summaryrefslogtreecommitdiff
path: root/app
diff options
context:
space:
mode:
authorFilipa Lacerda <filipa@gitlab.com>2017-05-08 15:53:54 +0100
committerFilipa Lacerda <filipa@gitlab.com>2017-05-08 17:36:49 +0100
commit52a6db10f727be9af95af4ff8b443f76d771f9c5 (patch)
treebfba96c8dabe7a27867a88e1f79426f732bdaf9a /app
parent11ff9fc6a9837cd5defa0325b5057a5a3d84634c (diff)
downloadgitlab-ce-52a6db10f727be9af95af4ff8b443f76d771f9c5.tar.gz
Adds left connector class to the rendered graph
Diffstat (limited to 'app')
-rw-r--r--app/assets/javascripts/pipelines/components/graph/graph_component.vue24
-rw-r--r--app/assets/javascripts/pipelines/components/graph/stage_column_component.vue23
-rw-r--r--app/assets/javascripts/vue_shared/ci_action_icons.js4
3 files changed, 47 insertions, 4 deletions
diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
index a84161ef5e7..1f1b99ff401 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
@@ -64,6 +64,24 @@
capitalizeStageName(name) {
return name.charAt(0).toUpperCase() + name.slice(1);
},
+
+ isFirstColumn(index) {
+ return index === 0;
+ },
+
+ stageConnectorClass(index, stage) {
+ let className;
+
+ // If it's the first stage column and only has one job
+ if (index === 0 && stage.groups.length === 1) {
+ className = 'no-margin';
+ } else if (index > 0) {
+ // If it is not the first column
+ className = 'left-margin';
+ }
+
+ return className;
+ },
},
};
</script>
@@ -82,10 +100,12 @@
v-if="!isLoading"
class="stage-column-list">
<stage-column-component
- v-for="stage in state.graph"
+ v-for="(stage, index) in state.graph"
:title="capitalizeStageName(stage.name)"
:jobs="stage.groups"
- :key="stage.name"/>
+ :key="stage.name"
+ :stage-connector-class="stageConnectorClass(index, stage)"
+ :is-first-column="isFirstColumn(index)"/>
</ul>
</div>
</div>
diff --git a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
index b7da185e280..9b1bbb0906f 100644
--- a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
@@ -13,6 +13,18 @@ export default {
type: Array,
required: true,
},
+
+ isFirstColumn: {
+ type: Boolean,
+ required: false,
+ default: false,
+ },
+
+ stageConnectorClass: {
+ type: String,
+ required: false,
+ default: '',
+ },
},
components: {
@@ -28,20 +40,27 @@ export default {
jobId(job) {
return `ci-badge-${job.name}`;
},
+
+ buildConnnectorClass(index) {
+ return index === 0 && !this.isFirstColumn ? 'left-connector' : '';
+ },
},
};
</script>
<template>
- <li class="stage-column">
+ <li
+ class="stage-column"
+ :class="stageConnectorClass">
<div class="stage-name">
{{title}}
</div>
<div class="builds-container">
<ul>
<li
- v-for="job in jobs"
+ v-for="(job, index) in jobs"
:key="job.id"
class="build"
+ :class="buildConnnectorClass(index)"
:id="jobId(job)">
<div class="curve"></div>
diff --git a/app/assets/javascripts/vue_shared/ci_action_icons.js b/app/assets/javascripts/vue_shared/ci_action_icons.js
index 734b3c6c45e..ee41dc95beb 100644
--- a/app/assets/javascripts/vue_shared/ci_action_icons.js
+++ b/app/assets/javascripts/vue_shared/ci_action_icons.js
@@ -1,6 +1,7 @@
import cancelSVG from 'icons/_icon_action_cancel.svg';
import retrySVG from 'icons/_icon_action_retry.svg';
import playSVG from 'icons/_icon_action_play.svg';
+import stopSVG from 'icons/_icon_action_stop.svg';
export default function getActionIcon(action) {
let icon;
@@ -14,6 +15,9 @@ export default function getActionIcon(action) {
case 'icon_action_play':
icon = playSVG;
break;
+ case 'icon_action_stop':
+ icon = stopSVG;
+ break;
default:
icon = '';
}