Fetch branch diverging counts from API

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/46139

2 files changed, 45 insertions, 19 deletions

diff --git a/app/assets/javascripts/branches/divergence_graph.js b/app/assets/javascripts/branches/divergence_graph.js
index 670e8e9eb60..96bc6a5f8e8 100644
--- a/app/assets/javascripts/branches/divergence_graph.js
+++ b/app/assets/javascripts/branches/divergence_graph.js
@@ -1,23 +1,49 @@
 import Vue from 'vue';
+import { __ } from '../locale';
+import createFlash from '../flash';
+import axios from '../lib/utils/axios_utils';
 import DivergenceGraph from './components/divergence_graph.vue';
 
-export default () => {
-  document.querySelectorAll('.js-branch-divergence-graph').forEach(el => {
-    const { distance, aheadCount, behindCount, defaultBranch, maxCommits } = el.dataset;
-
-    return new Vue({
-      el,
-      render(h) {
-        return h(DivergenceGraph, {
-          props: {
-            defaultBranch,
-            distance: distance ? parseInt(distance, 10) : null,
-            aheadCount: parseInt(aheadCount, 10),
-            behindCount: parseInt(behindCount, 10),
-            maxCommits: parseInt(maxCommits, 10),
-          },
-        });
-      },
-    });
+export function createGraphVueApp(el, data, maxCommits) {
+  return new Vue({
+    el,
+    render(h) {
+      return h(DivergenceGraph, {
+        props: {
+          defaultBranch: 'master',
+          distance: data.distance ? parseInt(data.distance, 10) : null,
+          aheadCount: parseInt(data.ahead, 10),
+          behindCount: parseInt(data.behind, 10),
+          maxCommits,
+        },
+      });
+    },
   });
+}
+
+export default endpoint => {
+  const names = [...document.querySelectorAll('.js-branch-item')].map(
+    ({ dataset }) => dataset.name,
+  );
+  return axios
+    .get(endpoint, {
+      params: { names },
+    })
+    .then(({ data }) => {
+      const maxCommits = Object.entries(data).reduce((acc, [, val]) => {
+        const max = Math.max(...Object.values(val));
+        return max > acc ? max : acc;
+      }, 100);
+
+      Object.entries(data).forEach(([branchName, val]) => {
+        const el = document.querySelector(`.js-branch-${branchName} .js-branch-divergence-graph`);
+
+        if (!el) return;
+
+        createGraphVueApp(el, val, maxCommits);
+      });
+    })
+    .catch(() =>
+      createFlash(__('Error fetching diverging counts for branches. Please try again.')),
+    );
 };
diff --git a/app/assets/javascripts/pages/projects/branches/index/index.js b/app/assets/javascripts/pages/projects/branches/index/index.js
index 29de3b7806c..37e8c75f299 100644
--- a/app/assets/javascripts/pages/projects/branches/index/index.js
+++ b/app/assets/javascripts/pages/projects/branches/index/index.js
@@ -5,5 +5,5 @@ import initDiverganceGraph from '~/branches/divergence_graph';
 document.addEventListener('DOMContentLoaded', () => {
   AjaxLoadingSpinner.init();
   new DeleteModal(); // eslint-disable-line no-new
-  initDiverganceGraph();
+  initDiverganceGraph(document.querySelector('.js-branch-list').dataset.divergingCountsEndpoint);
 });