Initial structure for reports app

3 files changed, 203 insertions, 0 deletions

diff --git a/app/assets/javascripts/reports/components/grouped_test_reports_app.vue b/app/assets/javascripts/reports/components/grouped_test_reports_app.vue
new file mode 100644
index 00000000000..016806b84c3
--- /dev/null
+++ b/app/assets/javascripts/reports/components/grouped_test_reports_app.vue
@@ -0,0 +1,63 @@
+<script>
+import ReportSection from '~/vue_shared/components/reports/report_section.vue';
+import SummaryRow from '~/vue_shared/components/reports/summary_row.vue';
+import IssuesList from '~/vue_shared/components/reports/issues_list.vue';
+import { mapActions } from 'vuex';
+
+export default {
+  name: 'GroupedTestReportsApp',
+  // store: createStore(),
+  components: {
+    ReportSection,
+    SummaryRow,
+    IssuesList,
+  },
+  props: {
+    endpoint: {
+      type: String,
+      required: true,
+    },
+  },
+  created() {
+    this.setEndpoint(this.endpoint);
+
+    this.fetchReports();
+  },
+  methods: {
+    ...mapActions(['setEndpoint', 'fetchReports'])
+  },
+}
+</script>
+<template>
+  <report-section
+    :status=""
+    :success-text=""
+    :loading-text=""
+    :error-text=""
+    :has-issues="true"
+    class="mr-widget-border-top grouped-security-reports"
+  >
+    <div
+      slot="body"
+      class="mr-widget-grouped-section report-block"
+    >
+      <template
+        v-for="(report, i) in reports"
+        :key="i"
+      >
+        <summary-row
+          :summary=""
+          :status-icon=""
+        />
+        <issues-list
+          :unresolved-issues="sast.newIssues"
+          :resolved-issues="sast.resolvedIssues"
+          :all-issues="sast.allIssues"
+          type="test"
+          class="report-block-group-list"
+        />
+      </template>
+    </div>
+  </report-section>
+</template>
+
diff --git a/app/assets/javascripts/reports/components/modal.vue b/app/assets/javascripts/reports/components/modal.vue
new file mode 100644
index 00000000000..61004399aa4
--- /dev/null
+++ b/app/assets/javascripts/reports/components/modal.vue
@@ -0,0 +1,80 @@
+<script>
+  import Modal from '~/vue_shared/components/gl_modal.vue';
+  import LoadingButton from '~/vue_shared/components/loading_button.vue';
+  import Icon from '~/vue_shared/components/icon.vue';
+  import { fieldTypes } from '../constants';
+
+  export default {
+    components: {
+      Modal,
+      LoadingButton,
+      Icon,
+    },
+
+    props: {
+      title: {
+        type: String,
+        required: true,
+      },
+      modalData: {
+        type: Object,
+        required: true,
+      },
+      actions: {
+        type: Array,
+        required: true,
+      },
+    },
+
+    computed: {
+      shouldRenderFooterSection() {
+        return this.actions.length > 0;
+      },
+    },
+  };
+</script>
+<template>
+  <modal
+    id="modal-mrwidget-security-issue"
+    :header-title-text="title"
+    :class="{ 'modal-hide-footer': !shouldRenderFooterSection }"
+    class="modal-security-report-dast"
+  >
+    <slot>
+      <div
+        v-for="(field, key, index) in modalData"
+        v-if="field.value"
+        :key="index"
+        class="row prepend-top-10 append-bottom-10"
+      >
+        <label class="col-sm-2 text-right font-weight-bold">
+          {{ field.text }}:
+        </label>
+
+        <div class="col-sm-10 text-secondary">
+          <template v-if="field.type === fieldTypes.codeBlock">
+            <code>{{field.value}}</code>
+          </template>
+
+          <template v-else-if="field.type === fieldTypes.link">
+            <a
+              :href="field.value"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {{ field.value}}
+            </a>
+          </template>
+
+          <template v-else-if="field.type === fieldTypes.miliseconds">
+            {{ field.value }} ms
+          </template>
+
+          <template v-else-if="field.type === fieldTypes.text">
+            {{ field.value }}
+          </template>
+        </div>
+      </div>
+    </slot>
+  </modal>
+</template>
diff --git a/app/assets/javascripts/reports/constants.js b/app/assets/javascripts/reports/constants.js
new file mode 100644
index 00000000000..36306f33153
--- /dev/null
+++ b/app/assets/javascripts/reports/constants.js
@@ -0,0 +1,60 @@
+import { s__ } from '~/locale';
+
+export const fieldTypes = {
+  codeBock: 'codeBlock',
+  link: 'link',
+  miliseconds: 'miliseconds',
+  text: 'text',
+};
+
+/**
+ * Map of data show in modalbox
+ *
+ * Each key will only be rendered if `value` is present.
+ *
+ * Keys in this map have the same format as the backend json response.
+ *
+ * When the user clicks on the issue name, in modal_open_name,
+ * the store will set the modal data based on this map
+ * and the keys available in the store.
+ */
+export const modalData = {
+  class: {
+    value: null,
+    text: s__('Reports|Class'),
+    type: fieldTypes.link,
+  },
+  execution_time: {
+    value: null,
+    text: s__('Reports|Execution time'),
+    type: fieldTypes.miliseconds,
+  },
+  failure: {
+    value: null,
+    text: s__('Reports|Failure'),
+    type: fieldTypes.codeBock,
+  },
+  system_output: {
+    value: null,
+    text: s__('Reports|System output'),
+    type: fieldTypes.codeBock,
+  },
+};
+
+export const modalActions = [
+  {
+    title: s__('Reports|Cancel'),
+    attributes: {
+      type: 'button',
+      class: 'btn btn-default',
+      'data-dismiss': 'modal',
+    },
+  },
+  {
+    title: s__('Reports|Create Issue'),
+    attributes: {
+      type: 'button',
+      class: 'btn btn-success btn-inverted',
+    },
+  }
+];