1 files changed, 30 insertions, 26 deletions

diff --git a/app/assets/javascripts/pipelines/pipeline_details_bundle.js b/app/assets/javascripts/pipelines/pipeline_details_bundle.js
index 90109598542..f1102a9bddf 100644
--- a/app/assets/javascripts/pipelines/pipeline_details_bundle.js
+++ b/app/assets/javascripts/pipelines/pipeline_details_bundle.js
@@ -10,8 +10,7 @@ import PipelinesMediator from './pipeline_details_mediator';
 import pipelineHeader from './components/header_component.vue';
 import eventHub from './event_hub';
 import TestReports from './components/test_reports/test_reports.vue';
-import testReportsStore from './stores/test_reports';
-import axios from '~/lib/utils/axios_utils';
+import createTestReportsStore from './stores/test_reports';
 
 Vue.use(Translate);
 
@@ -93,15 +92,11 @@ const createPipelineHeaderApp = mediator => {
   });
 };
 
-const createPipelinesTabs = dataset => {
+const createPipelinesTabs = testReportsStore => {
   const tabsElement = document.querySelector('.pipelines-tabs');
-  const testReportsEnabled =
-    window.gon && window.gon.features && window.gon.features.junitPipelineView;
-
-  if (tabsElement && testReportsEnabled) {
-    const fetchReportsAction = 'fetchReports';
-    testReportsStore.dispatch('setEndpoint', dataset.testReportEndpoint);
 
+  if (tabsElement) {
+    const fetchReportsAction = 'fetchFullReport';
     const isTestTabActive = Boolean(
       document.querySelector('.pipelines-tabs > li > a.test-tab.active'),
     );
@@ -121,28 +116,35 @@ const createPipelinesTabs = dataset => {
   }
 };
 
-const createTestDetails = detailsEndpoint => {
+const createTestDetails = () => {
+  if (!window.gon?.features?.junitPipelineView) {
+    return;
+  }
+
+  const el = document.querySelector('#js-pipeline-tests-detail');
+  const { fullReportEndpoint, summaryEndpoint, countEndpoint } = el?.dataset || {};
+
+  const testReportsStore = createTestReportsStore({
+    fullReportEndpoint,
+    summaryEndpoint: summaryEndpoint || countEndpoint,
+    useBuildSummaryReport: window.gon?.features?.buildReportSummary,
+  });
+
+  if (!window.gon?.features?.buildReportSummary) {
+    createPipelinesTabs(testReportsStore);
+  }
+
   // eslint-disable-next-line no-new
   new Vue({
-    el: '#js-pipeline-tests-detail',
+    el,
     components: {
       TestReports,
     },
+    store: testReportsStore,
     render(createElement) {
       return createElement('test-reports');
     },
   });
-
-  axios
-    .get(detailsEndpoint)
-    .then(({ data }) => {
-      if (!data.total_count) {
-        return;
-      }
-
-      document.querySelector('.js-test-report-badge-counter').innerHTML = data.total_count;
-    })
-    .catch(() => {});
 };
 
 const createDagApp = () => {
@@ -151,7 +153,8 @@ const createDagApp = () => {
   }
 
   const el = document.querySelector('#js-pipeline-dag-vue');
-  const graphUrl = el?.dataset?.pipelineDataPath;
+  const { pipelineDataPath, emptySvgPath, dagDocPath } = el?.dataset;
+
   // eslint-disable-next-line no-new
   new Vue({
     el,
@@ -161,7 +164,9 @@ const createDagApp = () => {
     render(createElement) {
       return createElement('dag', {
         props: {
-          graphUrl,
+          graphUrl: pipelineDataPath,
+          emptySvgPath,
+          dagDocPath,
         },
       });
     },
@@ -175,7 +180,6 @@ export default () => {
 
   createPipelinesDetailApp(mediator);
   createPipelineHeaderApp(mediator);
-  createPipelinesTabs(dataset);
-  createTestDetails(dataset.testReportsCountEndpoint);
+  createTestDetails();
   createDagApp();
 };