Fetch branch diverging counts from API

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

6 files changed, 83 insertions, 25 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);
 });
diff --git a/app/views/projects/branches/_branch.html.haml b/app/views/projects/branches/_branch.html.haml
index f97b259f8f2..dbff2115f50 100644
--- a/app/views/projects/branches/_branch.html.haml
+++ b/app/views/projects/branches/_branch.html.haml
@@ -1,11 +1,7 @@
 - merged = local_assigns.fetch(:merged, false)
 - commit = @repository.commit(branch.dereferenced_target)
-- diverging_commit_counts = Branches::DivergingCommitCountsService.new(@repository).call(branch)
-- number_commits_distance = diverging_commit_counts[:distance]
-- number_commits_behind = diverging_commit_counts[:behind]
-- number_commits_ahead = diverging_commit_counts[:ahead]
 - merge_project = merge_request_source_project_for_project(@project)
-%li{ class: "branch-item js-branch-#{branch.name}" }
+%li{ class: "branch-item js-branch-item js-branch-#{branch.name}", data: { name: branch.name } }
   .branch-info
     .branch-title
       = sprite_icon('fork', size: 12)
@@ -30,7 +26,7 @@
         = s_('Branches|Cant find HEAD commit for this branch')
 
   - if branch.name != @repository.root_ref
-    .js-branch-divergence-graph{ data: { distance: number_commits_distance, ahead_count: number_commits_ahead, behind_count: number_commits_behind, default_branch: @repository.root_ref, max_commits: @max_commits } }
+    .js-branch-divergence-graph
 
   .controls.d-none.d-md-block<
     - if merge_project && create_mr_button?(@repository.root_ref, branch.name)
diff --git a/app/views/projects/branches/index.html.haml b/app/views/projects/branches/index.html.haml
index d270e461ac8..11340d12423 100644
--- a/app/views/projects/branches/index.html.haml
+++ b/app/views/projects/branches/index.html.haml
@@ -47,6 +47,7 @@
 
   = render_if_exists 'projects/commits/mirror_status'
 
+  .js-branch-list{ data: { diverging_counts_endpoint: diverging_commit_counts_namespace_project_branches_path(@project.namespace, @project, format: :json) } }
   - if can?(current_user, :admin_project, @project)
     - project_settings_link = link_to s_('Branches|project settings'), project_protected_branches_path(@project)
     .row-content-block
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index a04a0acd98e..46f2b54f485 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -4133,6 +4133,9 @@ msgstr ""
 msgid "Error fetching contributors data."
 msgstr ""
 
+msgid "Error fetching diverging counts for branches. Please try again."
+msgstr ""
+
 msgid "Error fetching labels."
 msgstr ""
 
diff --git a/spec/frontend/branches/divergence_graph_spec.js b/spec/frontend/branches/divergence_graph_spec.js
new file mode 100644
index 00000000000..4ed77c3a036
--- /dev/null
+++ b/spec/frontend/branches/divergence_graph_spec.js
@@ -0,0 +1,32 @@
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
+import init from '~/branches/divergence_graph';
+
+describe('Divergence graph', () => {
+  let mock;
+
+  beforeEach(() => {
+    mock = new MockAdapter(axios);
+
+    mock.onGet('/-/diverging_counts').reply(200, {
+      master: { ahead: 1, behind: 1 },
+    });
+
+    jest.spyOn(axios, 'get');
+
+    document.body.innerHTML = `
+      <div class="js-branch-item" data-name="master"></div>
+    `;
+  });
+
+  afterEach(() => {
+    mock.restore();
+  });
+
+  it('calls axos get with list of branch names', () =>
+    init('/-/diverging_counts').then(() => {
+      expect(axios.get).toHaveBeenCalledWith('/-/diverging_counts', {
+        params: { names: ['master'] },
+      });
+    }));
+});