BigW Consortium Gitlab

Skip to content

G
gitlab-ce
Commit e96c2ab0 by Regis
Options

fix vue2 warns - more extraction - good refactor

parent 52a725cd
Showing with 132 additions and 100 deletions
app/assets/javascripts/vue_pipelines_index/branch_commit.vue.js.es6
......@@ -4,51 +4,60 @@
((gl) => {
gl.VueBranchCommit = Vue.extend({
props: ['pipeline', 'shortsha'],
methods: {
commiturl(sha) {
return `./commit/${sha}`;
},
},
template: `
<div class="icon-container">
<i class="fa fa-code-fork"></i>
<td class="branch-commit">
<div class="icon-container">
<i class="fa fa-code-fork"></i>
</div>
<!--
I need to know which branch things are comming from
-->
<a class="monospace branch-name" href="./commits/master">master</a>
<div class="icon-container commit-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
<path fill="#8F8F8F" fill-rule="evenodd" d="M28.7769836,18 C27.8675252,13.9920226 24.2831748,11 20,11 C15.7168252,11 12.1324748,13.9920226 11.2230164,18 L4.0085302,18 C2.90195036,18 2,18.8954305 2,20 C2,21.1122704 2.8992496,22 4.0085302,22 L11.2230164,22 C12.1324748,26.0079774 15.7168252,29 20,29 C24.2831748,29 27.8675252,26.0079774 28.7769836,22 L35.9914698,22 C37.0980496,22 38,21.1045695 38,20 C38,18.8877296 37.1007504,18 35.9914698,18 L28.7769836,18 L28.7769836,18 Z M20,25 C22.7614237,25 25,22.7614237 25,20 C25,17.2385763 22.7614237,15 20,15 C17.2385763,15 15,17.2385763 15,20 C15,22.7614237 17.2385763,25 20,25 L20,25 Z"></path>
</svg>
</div>
<!--
I need to know which branch things are comming from
-->
<a class="monospace branch-name" href="./commits/master">master</a>
<div class="icon-container commit-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
<path fill="#8F8F8F" fill-rule="evenodd" d="M28.7769836,18 C27.8675252,13.9920226 24.2831748,11 20,11 C15.7168252,11 12.1324748,13.9920226 11.2230164,18 L4.0085302,18 C2.90195036,18 2,18.8954305 2,20 C2,21.1122704 2.8992496,22 4.0085302,22 L11.2230164,22 C12.1324748,26.0079774 15.7168252,29 20,29 C24.2831748,29 27.8675252,26.0079774 28.7769836,22 L35.9914698,22 C37.0980496,22 38,21.1045695 38,20 C38,18.8877296 37.1007504,18 35.9914698,18 L28.7769836,18 L28.7769836,18 Z M20,25 C22.7614237,25 25,22.7614237 25,20 C25,17.2385763 22.7614237,15 20,15 C17.2385763,15 15,17.2385763 15,20 C15,22.7614237 17.2385763,25 20,25 L20,25 Z"></path>
</svg>
</div>
<a
class="commit-id monospace"
href="./commit/{{pipeline.sha}}">{{shortsha(pipeline)}}
</a>
<p class="commit-title">
<a
href="mailto:james@jameslopez.es"
class="commit-id monospace"
:href='commiturl(pipeline.sha)'
>
<!--
need Author Name
need Plural Version of Author Name: Rails has this built in
need gravatar HASH for author
need authors email
-->
<img
class="avatar has-tooltip s20 hidden-xs"
alt="James Lopez's avatar"
title="James Lopez"
data-container="body"
src="http://www.gravatar.com/avatar/80d3b651b4be1f1db39435c2d11f1f23?s=40&amp;d=identicon"
>
</a>
<a
class="commit-row-message"
href="./commit/{{pipeline.sha}}"
>
<!--
need commit message/title for SHA
-->
fix broken repo 500 errors in UI and added relevant specs
{{shortsha(pipeline)}}
</a>
</p>
<p class="commit-title">
<a
href="mailto:james@jameslopez.es"
>
<!--
need Author Name
need Plural Version of Author Name: Rails has this built in
need gravatar HASH for author
need authors email
-->
<img
class="avatar has-tooltip s20 hidden-xs"
alt="James Lopez's avatar"
title="James Lopez"
data-container="body"
src="http://www.gravatar.com/avatar/80d3b651b4be1f1db39435c2d11f1f23?s=40&amp;d=identicon"
>
</a>
<a
class="commit-row-message"
:href='commiturl(pipeline.sha)'
>
<!--
need commit message/title for SHA
-->
fix broken repo 500 errors in UI and added relevant specs
</a>
</p>
</td>
`,
});
})(window.gl || (window.gl = {}));
app/assets/javascripts/vue_pipelines_index/index.js.es6
......@@ -4,6 +4,8 @@
//= require vue-resource
//= require ./store.js.es6
//= require ./pipeline_url.vue.js.es6
//= require ./pipeline_head.vue.js.es6
//= require ./running_icon.vue.js.es6
//= require ./running.vue.js.es6
//= require ./stages.vue.js.es6
......
app/assets/javascripts/vue_pipelines_index/pipeline_actions.vue.js.es6
......@@ -5,6 +5,7 @@
gl.VuePipelineActions = Vue.extend({
// props: ['builds'],
template: `
<td class="pipeline-actions hidden-xs">
<div class="controls pull-right">
<div class="btn-group inline">
<div class="btn-group">
......@@ -71,6 +72,7 @@
</a>
</div>
</div>
</td>
`,
});
})(window.gl || (window.gl = {}));
app/assets/javascripts/vue_pipelines_index/pipeline_head.vue.js.es6 0 → 100644
/* global Vue, gl */
/* eslint-disable no-param-reassign */
((gl) => {
gl.VuePipelineHead = Vue.extend({
components: {
'vue-running-icon': gl.VueRunningIcon,
},
props: [
'pipeline',
'pipelineurl',
],
template: `
<thead>
<tr>
<th>Status</th>
<th>Pipeline</th>
<th>Commit</th>
<th>Stages</th>
<th></th>
<th class="hidden-xs"></th>
</tr>
</thead>
`,
});
})(window.gl || (window.gl = {}));
app/assets/javascripts/vue_pipelines_index/pipeline_url.vue.js.es6 0 → 100644
/* global Vue, gl */
/* eslint-disable no-param-reassign */
((gl) => {
gl.VuePipelineUrl = Vue.extend({
components: {
'vue-running-icon': gl.VueRunningIcon,
},
props: [
'pipeline',
'pipelineurl',
],
template: `
<td>
<a :href='pipelineurl(pipeline.id)'>
<span class="pipeline-id">#{{pipeline.id}}</span>
</a>
<span>by</span>
<span class="api monospace">{{pipeline.user}}</span>
</td>
`,
});
})(window.gl || (window.gl = {}));
app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6
/* global Vue, gl */
/* eslint-disable no-param-reassign */
/* eslint-disable no-param-reassign, no-bitwise*/
((gl) => {
gl.VuePipeLines = Vue.extend({
......@@ -8,6 +8,8 @@
'vue-stages': gl.VueStages,
'vue-pipeline-actions': gl.VuePipelineActions,
'vue-branch-commit': gl.VueBranchCommit,
'vue-pipeline-url': gl.VuePipelineUrl,
'vue-pipeline-head': gl.VuePipelineHead,
},
data() {
return {
......@@ -22,11 +24,8 @@
'store',
],
created() {
// ** `.includes` does not work in PhantomJS **
// const url = window.location.toString();
// if (url.includes('?')) this.pageNum = url.split('?')[1];
// now fetch page appropriate data
const url = window.location.toString();
if (~url.indexOf('?')) this.pageNum = url.split('?')[1];
this.store.fetchDataLoop.call(this, Vue, this.pageNum);
},
methods: {
......@@ -37,66 +36,36 @@
// clearInterval(this.intervalId);
// this.store.fetchDataLoop.call(this, Vue, this.pageNum);
},
pipelineurl(id) {
return `pipelines/${id}`;
},
},
template: `
<div class="table-holder">
<table class="table ci-table">
<thead>
<tr>
<th>Status</th>
<th>Pipeline</th>
<th>Commit</th>
<th>Stages</th>
<th></th>
<th class="hidden-xs"></th>
</tr>
</thead>
<tbody v-for='pipeline in pipelines'>
<tr class="commit">
<td class="commit-link" v-if="pipeline.status === 'running'">
<vue-running-pipeline :pipe='pipeline'></vue-running-pipeline>
</td>
<td>
<a href="pipelines/{{pipeline.id}}">
<span class="pipeline-id">#{{pipeline.id}}</span>
</a>
<span>by</span>
<span class="api monospace">{{pipeline.user}}</span>
</td>
<td class="branch-commit">
<vue-branch-commit
<vue-pipeline-head></vue-pipeline-head>
<tbody>
<tr class="commit" v-for='pipeline in pipelines'>
<td class="commit-link" v-if="pipeline.status">
<vue-running-pipeline
:pipeline='pipeline'
:shortsha='shortsha'
:pipelineurl='pipelineurl'
>
</vue-branch-commit>
</td>
<td class="stage-cell">
<!--
Need Stages Array:
ex: stage status per element as well as build name
Why I need it:
title="Prepare: failed" href="pipelines#prepare"
title="Notify Build: success" href="pipelines#notify_build"
title="Post Test: failed" href="pipelines#post-test"
How I would solve it once I have the data:
title="Prepare: {{stage.status}}"
href="pipelines#{{stage.title}}"
this way I can pass it as a prop to
ex:
<td class="stage-cell" v-for='stage in pipelines.stages'>
<vue-stage :stage='stage'>
</td>
-->
<vue-stages></vue-stages>
</vue-running-pipeline>
</td>
<vue-pipeline-url
:pipeline='pipeline'
:pipelineurl='pipelineurl'
>
</vue-pipeline-url>
<vue-branch-commit
:pipeline='pipeline'
:shortsha='shortsha'
>
</vue-branch-commit>
<vue-stages></vue-stages>
<td></td>
<td class="pipeline-actions hidden-xs">
<!-- will need to pass builds info and have v-if's for icons -->
<vue-pipeline-actions></vue-pipeline-actions>
</td>
<vue-pipeline-actions></vue-pipeline-actions>
</tr>
</tbody>
</table>
......
app/assets/javascripts/vue_pipelines_index/running.vue.js.es6
......@@ -7,11 +7,12 @@
'vue-running-icon': gl.VueRunningIcon,
},
props: [
'pipe',
'pipeline',
'pipelineurl',
],
template: `
<td class="commit-link">
<a href="pipelines/{{pipe.id}}">
<a :href='pipelineurl(pipeline.id)'>
<span class="ci-status ci-running">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
<vue-running-icon></vue-running-icon>
......
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