Commit f59b9778 authored by Phil Hughes's avatar Phil Hughes

moved the collapsing method into a store action

normalized the data into a nicer format
parent aca0d610
...@@ -29,7 +29,7 @@ export default { ...@@ -29,7 +29,7 @@ export default {
<span class="prepend-left-8"> <span class="prepend-left-8">
{{ job.name }} {{ job.name }}
<a <a
:href="job.build_path" :href="job.path"
target="_blank" target="_blank"
v-text="jobId" v-text="jobId"
> >
......
...@@ -47,7 +47,7 @@ export default { ...@@ -47,7 +47,7 @@ export default {
this.showTooltip = stageTitle.scrollWidth > stageTitle.offsetWidth; this.showTooltip = stageTitle.scrollWidth > stageTitle.offsetWidth;
}, },
methods: { methods: {
...mapActions('pipelines', ['fetchJobs']), ...mapActions('pipelines', ['fetchJobs', 'toggleStageCollapsed']),
}, },
}; };
</script> </script>
...@@ -58,7 +58,7 @@ export default { ...@@ -58,7 +58,7 @@ export default {
> >
<div <div
class="panel-heading" class="panel-heading"
@click="() => stage.isCollapsed = !stage.isCollapsed" @click="toggleStageCollapsed(stage.id)"
> >
<ci-icon <ci-icon
:status="stage.status" :status="stage.status"
......
...@@ -65,9 +65,12 @@ export const fetchJobs = ({ dispatch }, stage) => { ...@@ -65,9 +65,12 @@ export const fetchJobs = ({ dispatch }, stage) => {
dispatch('requestJobs', stage.id); dispatch('requestJobs', stage.id);
axios axios
.get(stage.dropdown_path) .get(stage.dropdownPath)
.then(({ data }) => dispatch('receiveJobsSuccess', { id: stage.id, data })) .then(({ data }) => dispatch('receiveJobsSuccess', { id: stage.id, data }))
.catch(() => dispatch('receiveJobsError', stage.id)); .catch(() => dispatch('receiveJobsError', stage.id));
}; };
export const toggleStageCollapsed = ({ commit }, stageId) =>
commit(types.TOGGLE_STAGE_COLLAPSE, stageId);
export default () => {}; export default () => {};
...@@ -5,3 +5,5 @@ export const RECEIVE_LASTEST_PIPELINE_SUCCESS = 'RECEIVE_LASTEST_PIPELINE_SUCCES ...@@ -5,3 +5,5 @@ export const RECEIVE_LASTEST_PIPELINE_SUCCESS = 'RECEIVE_LASTEST_PIPELINE_SUCCES
export const REQUEST_JOBS = 'REQUEST_JOBS'; export const REQUEST_JOBS = 'REQUEST_JOBS';
export const RECEIVE_JOBS_ERROR = 'RECEIVE_JOBS_ERROR'; export const RECEIVE_JOBS_ERROR = 'RECEIVE_JOBS_ERROR';
export const RECEIVE_JOBS_SUCCESS = 'RECEIVE_JOBS_SUCCESS'; export const RECEIVE_JOBS_SUCCESS = 'RECEIVE_JOBS_SUCCESS';
export const TOGGLE_STAGE_COLLAPSE = 'TOGGLE_STAGE_COLLAPSE';
...@@ -23,8 +23,10 @@ export default { ...@@ -23,8 +23,10 @@ export default {
state.stages = pipeline.details.stages.map((stage, i) => { state.stages = pipeline.details.stages.map((stage, i) => {
const foundStage = state.stages.find(s => s.id === i); const foundStage = state.stages.find(s => s.id === i);
return { return {
...stage,
id: i, id: i,
dropdownPath: stage.dropdown_path,
name: stage.name,
status: stage.status,
isCollapsed: foundStage ? foundStage.isCollapsed : false, isCollapsed: foundStage ? foundStage.isCollapsed : false,
isLoading: foundStage ? foundStage.isLoading : false, isLoading: foundStage ? foundStage.isLoading : false,
jobs: foundStage ? foundStage.jobs : [], jobs: foundStage ? foundStage.jobs : [],
...@@ -33,34 +35,35 @@ export default { ...@@ -33,34 +35,35 @@ export default {
} }
}, },
[types.REQUEST_JOBS](state, id) { [types.REQUEST_JOBS](state, id) {
state.stages = state.stages.reduce( state.stages = state.stages.map(stage => ({
(acc, stage) =>
acc.concat({
...stage, ...stage,
isLoading: id === stage.id ? true : stage.isLoading, isLoading: id === stage.id ? true : stage.isLoading,
}), }));
[],
);
}, },
[types.RECEIVE_JOBS_ERROR](state, id) { [types.RECEIVE_JOBS_ERROR](state, id) {
state.stages = state.stages.reduce( state.stages = state.stages.map(stage => ({
(acc, stage) =>
acc.concat({
...stage, ...stage,
isLoading: id === stage.id ? false : stage.isLoading, isLoading: id === stage.id ? true : stage.isLoading,
}), }));
[],
);
}, },
[types.RECEIVE_JOBS_SUCCESS](state, { id, data }) { [types.RECEIVE_JOBS_SUCCESS](state, { id, data }) {
state.stages = state.stages.reduce( const normalizeData = job => ({
(acc, stage) => id: job.id,
acc.concat({ name: job.name,
status: job.status,
path: job.build_path,
});
state.stages = state.stages.map(stage => ({
...stage, ...stage,
isLoading: id === stage.id ? false : stage.isLoading, isLoading: id === stage.id ? false : stage.isLoading,
jobs: id === stage.id ? data.latest_statuses : stage.jobs, jobs: id === stage.id ? data.latest_statuses.map(normalizeData) : stage.jobs,
}), }));
[], },
); [types.TOGGLE_STAGE_COLLAPSE](state, id) {
state.stages = state.stages.map(stage => ({
...stage,
isCollapsed: stage.id === id ? !stage.isCollapsed : stage.isCollapsed,
}));
}, },
}; };
...@@ -911,6 +911,9 @@ ...@@ -911,6 +911,9 @@
} }
&.is-right { &.is-right {
padding-right: $gl-padding;
padding-left: $gl-padding + 1px;
&::after { &::after {
right: auto; right: auto;
left: -1px; left: -1px;
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment