From 12413158fddf093e9b2cc8d00d66f8c6833a260c Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Mon, 1 Jul 2019 11:40:29 +0100 Subject: Fetch branch diverging counts from API Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/46139 --- .../javascripts/branches/divergence_graph.js | 62 +++++++++++++++------- .../pages/projects/branches/index/index.js | 2 +- app/views/projects/branches/_branch.html.haml | 8 +-- app/views/projects/branches/index.html.haml | 1 + locale/gitlab.pot | 3 ++ spec/frontend/branches/divergence_graph_spec.js | 32 +++++++++++ 6 files changed, 83 insertions(+), 25 deletions(-) create mode 100644 spec/frontend/branches/divergence_graph_spec.js 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 = ` +
+ `; + }); + + 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'] }, + }); + })); +}); -- cgit v1.2.1