Merge branch 'divergence-graph-api-call' into 'master'
Fetch branches divergence graph data through API call Closes #46139 See merge request gitlab-org/gitlab-ce!30068
This commit is contained in:
commit
80e09ed010
6 changed files with 83 additions and 25 deletions
|
@ -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.')),
|
||||
);
|
||||
};
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -4145,6 +4145,9 @@ msgstr ""
|
|||
msgid "Error fetching contributors data."
|
||||
msgstr ""
|
||||
|
||||
msgid "Error fetching diverging counts for branches. Please try again."
|
||||
msgstr ""
|
||||
|
||||
msgid "Error fetching labels."
|
||||
msgstr ""
|
||||
|
||||
|
|
32
spec/frontend/branches/divergence_graph_spec.js
Normal file
32
spec/frontend/branches/divergence_graph_spec.js
Normal file
|
@ -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'] },
|
||||
});
|
||||
}));
|
||||
});
|
Loading…
Reference in a new issue