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 {
<span class="prepend-left-8">
{{ job.name }}
<a
:href="job.build_path"
:href="job.path"
target="_blank"
v-text="jobId"
>
......
......@@ -47,7 +47,7 @@ export default {
this.showTooltip = stageTitle.scrollWidth > stageTitle.offsetWidth;
},
methods: {
...mapActions('pipelines', ['fetchJobs']),
...mapActions('pipelines', ['fetchJobs', 'toggleStageCollapsed']),
},
};
</script>
......@@ -58,7 +58,7 @@ export default {
>
<div
class="panel-heading"
@click="() => stage.isCollapsed = !stage.isCollapsed"
@click="toggleStageCollapsed(stage.id)"
>
<ci-icon
:status="stage.status"
......
......@@ -65,9 +65,12 @@ export const fetchJobs = ({ dispatch }, stage) => {
dispatch('requestJobs', stage.id);
axios
.get(stage.dropdown_path)
.get(stage.dropdownPath)
.then(({ data }) => dispatch('receiveJobsSuccess', { id: stage.id, data }))
.catch(() => dispatch('receiveJobsError', stage.id));
};
export const toggleStageCollapsed = ({ commit }, stageId) =>
commit(types.TOGGLE_STAGE_COLLAPSE, stageId);
export default () => {};
......@@ -5,3 +5,5 @@ export const RECEIVE_LASTEST_PIPELINE_SUCCESS = 'RECEIVE_LASTEST_PIPELINE_SUCCES
export const REQUEST_JOBS = 'REQUEST_JOBS';
export const RECEIVE_JOBS_ERROR = 'RECEIVE_JOBS_ERROR';
export const RECEIVE_JOBS_SUCCESS = 'RECEIVE_JOBS_SUCCESS';
export const TOGGLE_STAGE_COLLAPSE = 'TOGGLE_STAGE_COLLAPSE';
......@@ -23,8 +23,10 @@ export default {
state.stages = pipeline.details.stages.map((stage, i) => {
const foundStage = state.stages.find(s => s.id === i);
return {
...stage,
id: i,
dropdownPath: stage.dropdown_path,
name: stage.name,
status: stage.status,
isCollapsed: foundStage ? foundStage.isCollapsed : false,
isLoading: foundStage ? foundStage.isLoading : false,
jobs: foundStage ? foundStage.jobs : [],
......@@ -33,34 +35,35 @@ export default {
}
},
[types.REQUEST_JOBS](state, id) {
state.stages = state.stages.reduce(
(acc, stage) =>
acc.concat({
...stage,
isLoading: id === stage.id ? true : stage.isLoading,
}),
[],
);
state.stages = state.stages.map(stage => ({
...stage,
isLoading: id === stage.id ? true : stage.isLoading,
}));
},
[types.RECEIVE_JOBS_ERROR](state, id) {
state.stages = state.stages.reduce(
(acc, stage) =>
acc.concat({
...stage,
isLoading: id === stage.id ? false : stage.isLoading,
}),
[],
);
state.stages = state.stages.map(stage => ({
...stage,
isLoading: id === stage.id ? true : stage.isLoading,
}));
},
[types.RECEIVE_JOBS_SUCCESS](state, { id, data }) {
state.stages = state.stages.reduce(
(acc, stage) =>
acc.concat({
...stage,
isLoading: id === stage.id ? false : stage.isLoading,
jobs: id === stage.id ? data.latest_statuses : stage.jobs,
}),
[],
);
const normalizeData = job => ({
id: job.id,
name: job.name,
status: job.status,
path: job.build_path,
});
state.stages = state.stages.map(stage => ({
...stage,
isLoading: id === stage.id ? false : stage.isLoading,
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 @@
}
&.is-right {
padding-right: $gl-padding;
padding-left: $gl-padding + 1px;
&::after {
right: auto;
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