BigW Consortium Gitlab

Skip to content

G
gitlab-ce
Commit f17109c0 by Filipa Lacerda
Options

Load SVGs into Pipelines

parent e5037529
Showing with 81 additions and 92 deletions
app/assets/javascripts/vue_pipelines_index/index.js.es6
......@@ -11,15 +11,10 @@ $(() => new Vue({
data() {
const project = document.querySelector('.pipelines');
const svgs = document.querySelector('.pipeline-svgs').dataset;
// Transform svgs DOMStringMap to a plain Object.
const svgsObject = gl.utils.DOMStringMapToObject(svgs);
return {
scope: project.dataset.url,
store: new gl.PipelineStore(),
svgs: svgsObject,
};
},
components: {
......@@ -27,10 +22,8 @@ $(() => new Vue({
},
template: `
<vue-pipelines
:scope='scope'
:store='store'
:svgs='svgs'
>
:scope="scope"
:store="store">
</vue-pipelines>
`,
}));
app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6
/* global Vue, Flash, gl */
/* eslint-disable no-param-reassign */
const playIconSvg = require('../../../views/shared/icons/_icon_play.svg');
((gl) => {
gl.VuePipelineActions = Vue.extend({
props: ['pipeline', 'svgs'],
props: ['pipeline'],
computed: {
actions() {
return this.pipeline.details.manual_actions.length > 0;
......@@ -17,6 +18,11 @@
return `Download ${name} artifacts`;
},
},
data() {
return { playIconSvg };
},
template: `
<td class="pipeline-actions hidden-xs">
<div class="controls pull-right">
......@@ -30,7 +36,7 @@
data-placement="top"
aria-label="Manual job"
>
<span v-html='svgs.iconPlay' aria-hidden="true"></span>
<span v-html="playIconSvg" aria-hidden="true"></span>
<i class="fa fa-caret-down" aria-hidden="true"></i>
</button>
<ul class="dropdown-menu dropdown-menu-align-right">
......@@ -40,7 +46,7 @@
data-method="post"
:href='action.path'
>
<span v-html='svgs.iconPlay' aria-hidden="true"></span>
<span v-html="playIconSvg" aria-hidden="true"></span>
<span>{{action.name}}</span>
</a>
</li>
......
app/assets/javascripts/vue_pipelines_index/pipelines.js.es6
......@@ -27,7 +27,7 @@ const CommitPipelinesStoreWithTimeAgo = require('../commit/pipelines/pipelines_s
pageRequest: false,
};
},
props: ['scope', 'store', 'svgs'],
props: ['scope', 'store'],
created() {
const pagenum = gl.utils.getParameterByName('page');
const scope = gl.utils.getParameterByName('scope');
......@@ -73,10 +73,7 @@ const CommitPipelinesStoreWithTimeAgo = require('../commit/pipelines/pipelines_s
</div>
<div class="table-holder" v-if='!pageRequest && pipelines.length'>
<pipelines-table-component
:pipelines='pipelines'
:svgs='svgs'>
</pipelines-table-component>
<pipelines-table-component :pipelines='pipelines'/>
</div>
<gl-pagination
......
app/assets/javascripts/vue_pipelines_index/stage.js.es6
/* global Vue, Flash, gl */
/* eslint-disable no-param-reassign */
import canceledSvg from '../../../views/shared/icons/_icon_status_canceled_borderless.svg';
import createdSvg from '../../../views/shared/icons/_icon_status_created_borderless.svg';
import failedSvg from '../../../views/shared/icons/_icon_status_failed_borderless.svg';
import manualSvg from '../../../views/shared/icons/_icon_status_manual_borderless.svg';
import pendingSvg from '../../../views/shared/icons/_icon_status_pending_borderless.svg';
import runningSvg from '../../../views/shared/icons/_icon_status_running_borderless.svg';
import skippedSvg from '../../../views/shared/icons/_icon_status_skipped_borderless.svg';
import successSvg from '../../../views/shared/icons/_icon_status_success_borderless.svg';
import warningSvg from '../../../views/shared/icons/_icon_status_warning_borderless.svg';
((gl) => {
gl.VueStage = Vue.extend({
data() {
const svgsDictionary = {
icon_status_canceled: canceledSvg,
icon_status_created: createdSvg,
icon_status_failed: failedSvg,
icon_status_manual: manualSvg,
icon_status_pending: pendingSvg,
icon_status_running: runningSvg,
icon_status_skipped: skippedSvg,
icon_status_success: successSvg,
icon_status_warning: warningSvg,
};
return {
builds: '',
spinner: '<span class="fa fa-spinner fa-spin"></span>',
svg: svgsDictionary[this.stage.status.icon],
};
},
props: {
stage: {
type: Object,
required: true,
},
svgs: {
type: Object,
required: true,
},
match: {
type: Function,
required: true,
},
},
updated() {
......@@ -73,11 +88,6 @@
tooltip() {
return `has-tooltip ci-status-icon ci-status-icon-${this.stage.status.group}`;
},
svg() {
const { icon } = this.stage.status;
const stageIcon = icon.replace(/icon/i, 'stage_icon');
return this.svgs[this.match(stageIcon)];
},
triggerButtonClass() {
return `mini-pipeline-graph-dropdown-toggle has-tooltip js-builds-dropdown-button ci-status-icon-${this.stage.status.group}`;
},
......@@ -91,8 +101,7 @@
data-placement="top"
data-toggle="dropdown"
type="button"
:aria-label="stage.title"
>
:aria-label="stage.title">
<span v-html="svg" aria-hidden="true"></span>
<i class="fa fa-caret-down" aria-hidden="true"></i>
</button>
......@@ -101,8 +110,7 @@
<div
:class="dropdownClass"
class="js-builds-dropdown-list scrollable-menu"
v-html="buildsOrSpinner"
>
v-html="buildsOrSpinner">
</div>
</ul>
</div>
......
app/assets/javascripts/vue_pipelines_index/status.js.es6
/* global Vue, gl */
/* eslint-disable no-param-reassign */
import canceledSvg from '../../../views/shared/icons/_icon_status_canceled.svg';
import createdSvg from '../../../views/shared/icons/_icon_status_created.svg';
import failedSvg from '../../../views/shared/icons/_icon_status_failed.svg';
import manualSvg from '../../../views/shared/icons/_icon_status_manual.svg';
import pendingSvg from '../../../views/shared/icons/_icon_status_pending.svg';
import runningSvg from '../../../views/shared/icons/_icon_status_running.svg';
import skippedSvg from '../../../views/shared/icons/_icon_status_skipped.svg';
import successSvg from '../../../views/shared/icons/_icon_status_success.svg';
import warningSvg from '../../../views/shared/icons/_icon_status_warning.svg';
((gl) => {
gl.VueStatusScope = Vue.extend({
props: [
'pipeline', 'svgs', 'match',
'pipeline',
],
data() {
const svgsDictionary = {
icon_status_canceled: canceledSvg,
icon_status_created: createdSvg,
icon_status_failed: failedSvg,
icon_status_manual: manualSvg,
icon_status_pending: pendingSvg,
icon_status_running: runningSvg,
icon_status_skipped: skippedSvg,
icon_status_success: successSvg,
icon_status_warning: warningSvg,
};
return {
svg: svgsDictionary[this.pipeline.details.status.icon],
};
},
computed: {
cssClasses() {
const cssObject = { 'ci-status': true };
cssObject[`ci-${this.pipeline.details.status.group}`] = true;
return cssObject;
},
svg() {
return this.svgs[this.match(this.pipeline.details.status.icon)];
},
detailsPath() {
const { status } = this.pipeline.details;
return status.has_details ? status.details_path : false;
......@@ -25,8 +52,7 @@
<a
:class='cssClasses'
:href='detailsPath'
v-html='svg + pipeline.details.status.text'
>
v-html="svg + pipeline.details.status.text">
</a>
</td>
`,
......
app/assets/javascripts/vue_pipelines_index/time_ago.js.es6
......@@ -4,14 +4,17 @@
window.Vue = require('vue');
require('../lib/utils/datetime_utility');
const iconTimerSvg = require('../../../views/shared/icons/_icon_timer.svg');
((gl) => {
gl.VueTimeAgo = Vue.extend({
data() {
return {
currentTime: new Date(),
iconTimerSvg,
};
},
props: ['pipeline', 'svgs'],
props: ['pipeline'],
computed: {
timeAgo() {
return gl.utils.getTimeago();
......@@ -56,7 +59,7 @@ require('../lib/utils/datetime_utility');
template: `
<td>
<p class="duration" v-if='duration'>
<span v-html='svgs.iconTimer'></span>
<span v-html="iconTimerSvg"></span>
{{duration}}
</p>
<p class="finished-at" v-if='timeStopped'>
......
app/assets/javascripts/vue_shared/components/pipelines_table.js.es6
......@@ -21,14 +21,6 @@ require('./pipelines_table_row');
default: () => ([]),
},
/**
* TODO: Remove this when we have webpack.
*/
svgs: {
type: Object,
required: true,
default: () => ({}),
},
},
components: {
......@@ -51,8 +43,7 @@ require('./pipelines_table_row');
<template v-for="model in pipelines"
v-bind:model="model">
<tr is="pipelines-table-row-component"
:pipeline="model"
:svgs="svgs"></tr>
:pipeline="model"></tr>
</template>
</tbody>
</table>
......
app/assets/javascripts/vue_shared/components/pipelines_table_row.js.es6
......@@ -25,14 +25,6 @@ require('./commit');
default: () => ({}),
},
/**
* TODO: Remove this when we have webpack;
*/
svgs: {
type: Object,
required: true,
default: () => ({}),
},
},
components: {
......@@ -174,30 +166,9 @@ require('./commit');
},
},
methods: {
/**
* FIXME: This should not be in this component but in the components that
* need this function.
*
* Used to render SVGs in the following components:
* - status-scope
* - dropdown-stage
*
* @param {String} string
* @return {String}
*/
match(string) {
return string.replace(/_([a-z])/g, (m, w) => w.toUpperCase());
},
},
template: `
<tr class="commit">
<status-scope
:pipeline="pipeline"
:svgs="svgs"
:match="match">
</status-scope>
<status-scope :pipeline="pipeline"/>
<pipeline-url :pipeline="pipeline"></pipeline-url>
......@@ -208,26 +179,20 @@ require('./commit');
:commit-url="commitUrl"
:short-sha="commitShortSha"
:title="commitTitle"
:author="commitAuthor"
:commit-icon-svg="svgs.commitIconSvg">
</commit-component>
:author="commitAuthor"/>
</td>
<td class="stage-cell">
<div class="stage-container dropdown js-mini-pipeline-graph"
v-if="pipeline.details.stages.length > 0"
v-for="stage in pipeline.details.stages">
<dropdown-stage
:stage="stage"
:svgs="svgs"
:match="match">
</dropdown-stage>
<dropdown-stage :stage="stage"/>
</div>
</td>
<time-ago :pipeline="pipeline" :svgs="svgs"></time-ago>
<time-ago :pipeline="pipeline"/>
<pipeline-actions :pipeline="pipeline" :svgs="svgs"></pipeline-actions>
<pipeline-actions :pipeline="pipeline" />
</tr>
`,
});
......
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