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;
|
if (pipeline.commit) return pipeline.commit.commit_url;
|
||||||
return '';
|
return '';
|
||||||
},
|
},
|
||||||
|
match(string) {
|
||||||
|
return string.replace(/_([a-z])/g, (m, w) => w.toUpperCase());
|
||||||
|
},
|
||||||
},
|
},
|
||||||
template: `
|
template: `
|
||||||
<div>
|
<div>
|
||||||
|
@ -77,7 +80,12 @@
|
||||||
<pipeline-head></pipeline-head>
|
<pipeline-head></pipeline-head>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr class="commit" v-for='pipeline in pipelines'>
|
<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>
|
<pipeline-url :pipeline='pipeline'></pipeline-url>
|
||||||
<td>
|
<td>
|
||||||
<commit
|
<commit
|
||||||
|
@ -91,7 +99,12 @@
|
||||||
>
|
>
|
||||||
</commit>
|
</commit>
|
||||||
</td>
|
</td>
|
||||||
<stages :pipeline='pipeline'></stages>
|
<stages
|
||||||
|
:pipeline='pipeline'
|
||||||
|
:svgs='svgs'
|
||||||
|
:match='match'
|
||||||
|
>
|
||||||
|
</stages>
|
||||||
<time-ago :pipeline='pipeline'></time-ago>
|
<time-ago :pipeline='pipeline'></time-ago>
|
||||||
<pipeline-actions :pipeline='pipeline'></pipeline-actions>
|
<pipeline-actions :pipeline='pipeline'></pipeline-actions>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
|
|
||||||
((gl) => {
|
((gl) => {
|
||||||
gl.VueStage = Vue.extend({
|
gl.VueStage = Vue.extend({
|
||||||
props: ['stage'],
|
props: ['stage', 'svgs', 'match'],
|
||||||
computed: {
|
computed: {
|
||||||
buildStatus() {
|
buildStatus() {
|
||||||
return `Build: ${this.stage.status.label}`;
|
return `Build: ${this.stage.status.label}`;
|
||||||
|
@ -12,7 +12,7 @@
|
||||||
return `has-tooltip ci-status-icon-${this.stage.status.label}`;
|
return `has-tooltip ci-status-icon-${this.stage.status.label}`;
|
||||||
},
|
},
|
||||||
svg() {
|
svg() {
|
||||||
return document.querySelector(`.${this.stage.status.icon}`).innerHTML;
|
return this.svgs[this.match(this.stage.status.icon)];
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
template: `
|
template: `
|
||||||
|
|
|
@ -6,14 +6,14 @@
|
||||||
components: {
|
components: {
|
||||||
'vue-stage': gl.VueStage,
|
'vue-stage': gl.VueStage,
|
||||||
},
|
},
|
||||||
props: ['pipeline'],
|
props: ['pipeline', 'svgs', 'match'],
|
||||||
template: `
|
template: `
|
||||||
<td class="stage-cell">
|
<td class="stage-cell">
|
||||||
<div
|
<div
|
||||||
class="stage-container"
|
class="stage-container"
|
||||||
v-for='stage in pipeline.details.stages'
|
v-for='stage in pipeline.details.stages'
|
||||||
>
|
>
|
||||||
<vue-stage :stage='stage'></vue-stage>
|
<vue-stage :stage='stage' :svgs='svgs' :match='match'></vue-stage>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
`,
|
`,
|
||||||
|
|
|
@ -40,24 +40,17 @@
|
||||||
%div
|
%div
|
||||||
.nothing-here-block No pipelines to show
|
.nothing-here-block No pipelines to show
|
||||||
- else
|
- 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
|
.vue-pipelines-index
|
||||||
|
|
||||||
= page_specific_javascript_tag('vue_pagination/index.js')
|
= page_specific_javascript_tag('vue_pagination/index.js')
|
||||||
|
|
Loading…
Reference in a new issue