Add latest changes from gitlab-org/gitlab@master

4 files changed, 434 insertions, 0 deletions

diff --git a/app/assets/javascripts/pipelines/components/test_reports/test_reports.vue b/app/assets/javascripts/pipelines/components/test_reports/test_reports.vue
new file mode 100644
index 00000000000..388b300b39d
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/test_reports/test_reports.vue
@@ -0,0 +1,81 @@
+<script>
+import { mapActions, mapState } from 'vuex';
+import { GlLoadingIcon } from '@gitlab/ui';
+import TestSuiteTable from './test_suite_table.vue';
+import TestSummary from './test_summary.vue';
+import TestSummaryTable from './test_summary_table.vue';
+import store from '~/pipelines/stores/test_reports';
+
+export default {
+  name: 'TestReports',
+  components: {
+    GlLoadingIcon,
+    TestSuiteTable,
+    TestSummary,
+    TestSummaryTable,
+  },
+  store,
+  computed: {
+    ...mapState(['isLoading', 'selectedSuite', 'testReports']),
+    showSuite() {
+      return this.selectedSuite.total_count > 0;
+    },
+    showTests() {
+      return this.testReports.total_count > 0;
+    },
+  },
+  methods: {
+    ...mapActions(['setSelectedSuite', 'removeSelectedSuite']),
+    summaryBackClick() {
+      this.removeSelectedSuite();
+    },
+    summaryTableRowClick(suite) {
+      this.setSelectedSuite(suite);
+    },
+    beforeEnterTransition() {
+      document.documentElement.style.overflowX = 'hidden';
+    },
+    afterLeaveTransition() {
+      document.documentElement.style.overflowX = '';
+    },
+  },
+};
+</script>
+
+<template>
+  <div v-if="isLoading">
+    <gl-loading-icon size="lg" class="prepend-top-default js-loading-spinner" />
+  </div>
+
+  <div
+    v-else-if="!isLoading && showTests"
+    ref="container"
+    class="tests-detail position-relative js-tests-detail"
+  >
+    <transition
+      name="slide"
+      @before-enter="beforeEnterTransition"
+      @after-leave="afterLeaveTransition"
+    >
+      <div v-if="showSuite" key="detail" class="w-100 position-absolute slide-enter-to-element">
+        <test-summary :report="selectedSuite" show-back @on-back-click="summaryBackClick" />
+
+        <test-suite-table />
+      </div>
+
+      <div v-else key="summary" class="w-100 position-absolute slide-enter-from-element">
+        <test-summary :report="testReports" />
+
+        <test-summary-table @row-click="summaryTableRowClick" />
+      </div>
+    </transition>
+  </div>
+
+  <div v-else>
+    <div class="row prepend-top-default">
+      <div class="col-12">
+        <p class="js-no-tests-to-show">{{ s__('TestReports|There are no tests to show.') }}</p>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue b/app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue
new file mode 100644
index 00000000000..28b2c706320
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue
@@ -0,0 +1,108 @@
+<script>
+import { mapGetters } from 'vuex';
+import Icon from '~/vue_shared/components/icon.vue';
+import store from '~/pipelines/stores/test_reports';
+import { __ } from '~/locale';
+
+export default {
+  name: 'TestsSuiteTable',
+  components: {
+    Icon,
+  },
+  store,
+  props: {
+    heading: {
+      type: String,
+      required: false,
+      default: __('Tests'),
+    },
+  },
+  computed: {
+    ...mapGetters(['getSuiteTests']),
+    hasSuites() {
+      return this.getSuiteTests.length > 0;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="row prepend-top-default">
+      <div class="col-12">
+        <h4>{{ heading }}</h4>
+      </div>
+    </div>
+
+    <div v-if="hasSuites" class="test-reports-table js-test-cases-table">
+      <div role="row" class="gl-responsive-table-row table-row-header font-weight-bold fgray">
+        <div role="rowheader" class="table-section section-20">
+          {{ __('Class') }}
+        </div>
+        <div role="rowheader" class="table-section section-20">
+          {{ __('Name') }}
+        </div>
+        <div role="rowheader" class="table-section section-10 text-center">
+          {{ __('Status') }}
+        </div>
+        <div role="rowheader" class="table-section flex-grow-1">
+          {{ __('Trace'), }}
+        </div>
+        <div role="rowheader" class="table-section section-10 text-right">
+          {{ __('Duration') }}
+        </div>
+      </div>
+
+      <div
+        v-for="(testCase, index) in getSuiteTests"
+        :key="index"
+        class="gl-responsive-table-row rounded align-items-md-start mt-sm-3 js-case-row"
+      >
+        <div class="table-section section-20 section-wrap">
+          <div role="rowheader" class="table-mobile-header">{{ __('Class') }}</div>
+          <div class="table-mobile-content pr-md-1">{{ testCase.classname }}</div>
+        </div>
+
+        <div class="table-section section-20 section-wrap">
+          <div role="rowheader" class="table-mobile-header">{{ __('Name') }}</div>
+          <div class="table-mobile-content">{{ testCase.name }}</div>
+        </div>
+
+        <div class="table-section section-10 section-wrap">
+          <div role="rowheader" class="table-mobile-header">{{ __('Status') }}</div>
+          <div class="table-mobile-content text-center">
+            <div
+              class="add-border ci-status-icon d-flex align-items-center justify-content-end justify-content-md-center"
+              :class="`ci-status-icon-${testCase.status}`"
+            >
+              <icon :size="24" :name="testCase.icon" />
+            </div>
+          </div>
+        </div>
+
+        <div class="table-section flex-grow-1">
+          <div role="rowheader" class="table-mobile-header">{{ __('Trace'), }}</div>
+          <div class="table-mobile-content">
+            <pre
+              v-if="testCase.system_output"
+              class="build-trace build-trace-rounded text-left"
+            ><code class="bash p-0">{{testCase.system_output}}</code></pre>
+          </div>
+        </div>
+
+        <div class="table-section section-10 section-wrap">
+          <div role="rowheader" class="table-mobile-header">
+            {{ __('Duration') }}
+          </div>
+          <div class="table-mobile-content text-right">
+            {{ testCase.formattedTime }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-else>
+      <p class="js-no-test-cases">{{ s__('TestReports|There are no test cases to display.') }}</p>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/pipelines/components/test_reports/test_summary.vue b/app/assets/javascripts/pipelines/components/test_reports/test_summary.vue
new file mode 100644
index 00000000000..5fc0e220a72
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/test_reports/test_summary.vue
@@ -0,0 +1,116 @@
+<script>
+import { GlButton, GlLink, GlProgressBar } from '@gitlab/ui';
+import { __ } from '~/locale';
+import { formatTime } from '~/lib/utils/datetime_utility';
+import Icon from '~/vue_shared/components/icon.vue';
+
+export default {
+  name: 'TestSummary',
+  components: {
+    GlButton,
+    GlLink,
+    GlProgressBar,
+    Icon,
+  },
+  props: {
+    report: {
+      type: Object,
+      required: true,
+    },
+    showBack: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    heading() {
+      return this.report.name || __('Summary');
+    },
+    successPercentage() {
+      return Math.round((this.report.success_count / this.report.total_count) * 100) || 0;
+    },
+    formattedDuration() {
+      return formatTime(this.report.total_time * 1000);
+    },
+    progressBarVariant() {
+      if (this.successPercentage < 33) {
+        return 'danger';
+      }
+
+      if (this.successPercentage >= 33 && this.successPercentage < 66) {
+        return 'warning';
+      }
+
+      if (this.successPercentage >= 66 && this.successPercentage < 90) {
+        return 'primary';
+      }
+
+      return 'success';
+    },
+  },
+  methods: {
+    onBackClick() {
+      this.$emit('on-back-click');
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="row">
+      <div class="col-12 d-flex prepend-top-8 align-items-center">
+        <gl-button
+          v-if="showBack"
+          size="sm"
+          class="append-right-default js-back-button"
+          @click="onBackClick"
+        >
+          <icon name="angle-left" />
+        </gl-button>
+
+        <h4>{{ heading }}</h4>
+      </div>
+    </div>
+
+    <div class="row mt-2">
+      <div class="col-4 col-md">
+        <span class="js-total-tests">{{
+          sprintf(s__('TestReports|%{count} jobs'), { count: report.total_count })
+        }}</span>
+      </div>
+
+      <div class="col-4 col-md text-center text-md-center">
+        <span class="js-failed-tests">{{
+          sprintf(s__('TestReports|%{count} failures'), { count: report.failed_count })
+        }}</span>
+      </div>
+
+      <div class="col-4 col-md text-right text-md-center">
+        <span class="js-errored-tests">{{
+          sprintf(s__('TestReports|%{count} errors'), { count: report.error_count })
+        }}</span>
+      </div>
+
+      <div class="col-6 mt-3 col-md mt-md-0 text-md-center">
+        <span class="js-success-rate">{{
+          sprintf(s__('TestReports|%{rate}%{sign} success rate'), {
+            rate: successPercentage,
+            sign: '%',
+          })
+        }}</span>
+      </div>
+
+      <div class="col-6 mt-3 col-md mt-md-0 text-right">
+        <span class="js-duration">{{ formattedDuration }}</span>
+      </div>
+    </div>
+
+    <div class="row mt-3">
+      <div class="col-12">
+        <gl-progress-bar :value="successPercentage" :variant="progressBarVariant" height="10px" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/pipelines/components/test_reports/test_summary_table.vue b/app/assets/javascripts/pipelines/components/test_reports/test_summary_table.vue
new file mode 100644
index 00000000000..688baa93b6d
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/test_reports/test_summary_table.vue
@@ -0,0 +1,129 @@
+<script>
+import { mapGetters } from 'vuex';
+import { s__ } from '~/locale';
+import store from '~/pipelines/stores/test_reports';
+
+export default {
+  name: 'TestsSummaryTable',
+  store,
+  props: {
+    heading: {
+      type: String,
+      required: false,
+      default: s__('TestReports|Test suites'),
+    },
+  },
+  computed: {
+    ...mapGetters(['getTestSuites']),
+    hasSuites() {
+      return this.getTestSuites.length > 0;
+    },
+  },
+  methods: {
+    tableRowClick(suite) {
+      this.$emit('row-click', suite);
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="row prepend-top-default">
+      <div class="col-12">
+        <h4>{{ heading }}</h4>
+      </div>
+    </div>
+
+    <div v-if="hasSuites" class="test-reports-table js-test-suites-table">
+      <div role="row" class="gl-responsive-table-row table-row-header font-weight-bold">
+        <div role="rowheader" class="table-section section-25 pl-3">
+          {{ __('Suite') }}
+        </div>
+        <div role="rowheader" class="table-section section-25">
+          {{ __('Duration') }}
+        </div>
+        <div role="rowheader" class="table-section section-10 text-center">
+          {{ __('Failed') }}
+        </div>
+        <div role="rowheader" class="table-section section-10 text-center">
+          {{ __('Errors'), }}
+        </div>
+        <div role="rowheader" class="table-section section-10 text-center">
+          {{ __('Skipped'), }}
+        </div>
+        <div role="rowheader" class="table-section section-10 text-center">
+          {{ __('Passed'), }}
+        </div>
+        <div role="rowheader" class="table-section section-10 pr-3 text-right">
+          {{ __('Total') }}
+        </div>
+      </div>
+
+      <div
+        v-for="(testSuite, index) in getTestSuites"
+        :key="index"
+        role="row"
+        class="gl-responsive-table-row test-reports-summary-row rounded cursor-pointer js-suite-row"
+        @click="tableRowClick(testSuite)"
+      >
+        <div class="table-section section-25">
+          <div role="rowheader" class="table-mobile-header font-weight-bold">
+            {{ __('Suite') }}
+          </div>
+          <div class="table-mobile-content test-reports-summary-suite cgray pl-3">
+            {{ testSuite.name }}
+          </div>
+        </div>
+
+        <div class="table-section section-25">
+          <div role="rowheader" class="table-mobile-header font-weight-bold">
+            {{ __('Duration') }}
+          </div>
+          <div class="table-mobile-content text-md-left">
+            {{ testSuite.formattedTime }}
+          </div>
+        </div>
+
+        <div class="table-section section-10 text-center">
+          <div role="rowheader" class="table-mobile-header font-weight-bold">
+            {{ __('Failed') }}
+          </div>
+          <div class="table-mobile-content">{{ testSuite.failed_count }}</div>
+        </div>
+
+        <div class="table-section section-10 text-center">
+          <div role="rowheader" class="table-mobile-header font-weight-bold">
+            {{ __('Errors') }}
+          </div>
+          <div class="table-mobile-content">{{ testSuite.error_count }}</div>
+        </div>
+
+        <div class="table-section section-10 text-center">
+          <div role="rowheader" class="table-mobile-header font-weight-bold">
+            {{ __('Skipped') }}
+          </div>
+          <div class="table-mobile-content">{{ testSuite.skipped_count }}</div>
+        </div>
+
+        <div class="table-section section-10 text-center">
+          <div role="rowheader" class="table-mobile-header font-weight-bold">
+            {{ __('Passed') }}
+          </div>
+          <div class="table-mobile-content">{{ testSuite.success_count }}</div>
+        </div>
+
+        <div class="table-section section-10 text-right pr-md-3">
+          <div role="rowheader" class="table-mobile-header font-weight-bold">
+            {{ __('Total') }}
+          </div>
+          <div class="table-mobile-content">{{ testSuite.total_count }}</div>
+        </div>
+      </div>
+    </div>
+
+    <div v-else>
+      <p class="js-no-tests-suites">{{ s__('TestReports|There are no test suites to show.') }}</p>
+    </div>
+  </div>
+</template>