dynamic API consumption for SVGs
This commit is contained in:
parent
562df3a3fb
commit
13798c003e
4 changed files with 29 additions and 23 deletions
|
@ -66,6 +66,9 @@
|
|||
if (pipeline.commit) return pipeline.commit.commit_url;
|
||||
return '';
|
||||
},
|
||||
match(string) {
|
||||
return string.replace(/_([a-z])/g, (m, w) => w.toUpperCase());
|
||||
},
|
||||
},
|
||||
template: `
|
||||
<div>
|
||||
|
@ -77,7 +80,12 @@
|
|||
<pipeline-head></pipeline-head>
|
||||
<tbody>
|
||||
<tr class="commit" v-for='pipeline in pipelines'>
|
||||
<status-scope :pipeline='pipeline'></status-scope>
|
||||
<status-scope
|
||||
:pipeline='pipeline'
|
||||
:match='match'
|
||||
:svgs='svgs'
|
||||
>
|
||||
</status-scope>
|
||||
<pipeline-url :pipeline='pipeline'></pipeline-url>
|
||||
<td>
|
||||
<commit
|
||||
|
@ -91,7 +99,12 @@
|
|||
>
|
||||
</commit>
|
||||
</td>
|
||||
<stages :pipeline='pipeline'></stages>
|
||||
<stages
|
||||
:pipeline='pipeline'
|
||||
:svgs='svgs'
|
||||
:match='match'
|
||||
>
|
||||
</stages>
|
||||
<time-ago :pipeline='pipeline'></time-ago>
|
||||
<pipeline-actions :pipeline='pipeline'></pipeline-actions>
|
||||
</tr>
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
((gl) => {
|
||||
gl.VueStage = Vue.extend({
|
||||
props: ['stage'],
|
||||
props: ['stage', 'svgs', 'match'],
|
||||
computed: {
|
||||
buildStatus() {
|
||||
return `Build: ${this.stage.status.label}`;
|
||||
|
@ -12,7 +12,7 @@
|
|||
return `has-tooltip ci-status-icon-${this.stage.status.label}`;
|
||||
},
|
||||
svg() {
|
||||
return document.querySelector(`.${this.stage.status.icon}`).innerHTML;
|
||||
return this.svgs[this.match(this.stage.status.icon)];
|
||||
},
|
||||
},
|
||||
template: `
|
||||
|
|
|
@ -6,14 +6,14 @@
|
|||
components: {
|
||||
'vue-stage': gl.VueStage,
|
||||
},
|
||||
props: ['pipeline'],
|
||||
props: ['pipeline', 'svgs', 'match'],
|
||||
template: `
|
||||
<td class="stage-cell">
|
||||
<div
|
||||
class="stage-container"
|
||||
v-for='stage in pipeline.details.stages'
|
||||
>
|
||||
<vue-stage :stage='stage'></vue-stage>
|
||||
<vue-stage :stage='stage' :svgs='svgs' :match='match'></vue-stage>
|
||||
</div>
|
||||
</td>
|
||||
`,
|
||||
|
|
|
@ -40,24 +40,17 @@
|
|||
%div
|
||||
.nothing-here-block No pipelines to show
|
||||
- else
|
||||
.pipeline-svgs{"data" => {"commit-icon-svg" => custom_icon("icon_commit")} }
|
||||
.pipeline-svgs{"data" => {"commit_icon_svg" => custom_icon("icon_commit"),
|
||||
"icon_status_canceled" => custom_icon("icon_status_canceled"),
|
||||
"icon_status_running" => custom_icon("icon_status_running"),
|
||||
"icon_status_skipped" => custom_icon("icon_status_skipped"),
|
||||
"icon_status_created" => custom_icon("icon_status_created"),
|
||||
"icon_status_pending" => custom_icon("icon_status_pending"),
|
||||
"icon_status_success" => custom_icon("icon_status_success"),
|
||||
"icon_status_failed" => custom_icon("icon_status_failed"),
|
||||
"icon_status_warning" => custom_icon("icon_status_warning"),
|
||||
} }
|
||||
|
||||
.icon_status_canceled.hidden
|
||||
= custom_icon("icon_status_canceled")
|
||||
.icon_status_running.hidden
|
||||
= custom_icon("icon_status_running")
|
||||
.icon_status_skipped.hidden
|
||||
= custom_icon("icon_status_skipped")
|
||||
.icon_status_created.hidden
|
||||
= custom_icon("icon_status_created")
|
||||
.icon_status_pending.hidden
|
||||
= custom_icon("icon_status_pending")
|
||||
.icon_status_success.hidden
|
||||
= custom_icon("icon_status_success")
|
||||
.icon_status_failed.hidden
|
||||
= custom_icon("icon_status_failed")
|
||||
.icon_status_warning.hidden
|
||||
= custom_icon("icon_status_warning")
|
||||
.vue-pipelines-index
|
||||
|
||||
= page_specific_javascript_tag('vue_pagination/index.js')
|
||||
|
|
Loading…
Reference in a new issue