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 @@ ...@@ -4,51 +4,60 @@
((gl) => { ((gl) => {
gl.VueBranchCommit = Vue.extend({ gl.VueBranchCommit = Vue.extend({
props: ['pipeline', 'shortsha'], props: ['pipeline', 'shortsha'],
methods: {
commiturl(sha) {
return `./commit/${sha}`;
},
},
template: ` template: `
<div class="icon-container"> <td class="branch-commit">
<i class="fa fa-code-fork"></i> <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> </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 <a
href="mailto:james@jameslopez.es" class="commit-id monospace"
:href='commiturl(pipeline.sha)'
> >
<!-- {{shortsha(pipeline)}}
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
</a> </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 = {})); })(window.gl || (window.gl = {}));
app/assets/javascripts/vue_pipelines_index/index.js.es6
...@@ -4,6 +4,8 @@ ...@@ -4,6 +4,8 @@
//= require vue-resource //= require vue-resource
//= require ./store.js.es6 //= require ./store.js.es6
//= require ./pipeline_url.vue.js.es6
//= require ./pipeline_head.vue.js.es6
//= require ./running_icon.vue.js.es6 //= require ./running_icon.vue.js.es6
//= require ./running.vue.js.es6 //= require ./running.vue.js.es6
//= require ./stages.vue.js.es6 //= require ./stages.vue.js.es6
......
app/assets/javascripts/vue_pipelines_index/pipeline_actions.vue.js.es6
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
gl.VuePipelineActions = Vue.extend({ gl.VuePipelineActions = Vue.extend({
// props: ['builds'], // props: ['builds'],
template: ` template: `
<td class="pipeline-actions hidden-xs">
<div class="controls pull-right"> <div class="controls pull-right">
<div class="btn-group inline"> <div class="btn-group inline">
<div class="btn-group"> <div class="btn-group">
...@@ -71,6 +72,7 @@ ...@@ -71,6 +72,7 @@
</a> </a>
</div> </div>
</div> </div>
</td>
`, `,
}); });
})(window.gl || (window.gl = {})); })(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 */ /* global Vue, gl */
/* eslint-disable no-param-reassign */ /* eslint-disable no-param-reassign, no-bitwise*/
((gl) => { ((gl) => {
gl.VuePipeLines = Vue.extend({ gl.VuePipeLines = Vue.extend({
...@@ -8,6 +8,8 @@ ...@@ -8,6 +8,8 @@
'vue-stages': gl.VueStages, 'vue-stages': gl.VueStages,
'vue-pipeline-actions': gl.VuePipelineActions, 'vue-pipeline-actions': gl.VuePipelineActions,
'vue-branch-commit': gl.VueBranchCommit, 'vue-branch-commit': gl.VueBranchCommit,
'vue-pipeline-url': gl.VuePipelineUrl,
'vue-pipeline-head': gl.VuePipelineHead,
}, },
data() { data() {
return { return {
...@@ -22,11 +24,8 @@ ...@@ -22,11 +24,8 @@
'store', 'store',
], ],
created() { created() {
// ** `.includes` does not work in PhantomJS ** const url = window.location.toString();
if (~url.indexOf('?')) this.pageNum = url.split('?')[1];
// const url = window.location.toString();
// if (url.includes('?')) this.pageNum = url.split('?')[1];
// now fetch page appropriate data
this.store.fetchDataLoop.call(this, Vue, this.pageNum); this.store.fetchDataLoop.call(this, Vue, this.pageNum);
}, },
methods: { methods: {
...@@ -37,66 +36,36 @@ ...@@ -37,66 +36,36 @@
// clearInterval(this.intervalId); // clearInterval(this.intervalId);
// this.store.fetchDataLoop.call(this, Vue, this.pageNum); // this.store.fetchDataLoop.call(this, Vue, this.pageNum);
}, },
pipelineurl(id) {
return `pipelines/${id}`;
},
}, },
template: ` template: `
<div class="table-holder"> <div class="table-holder">
<table class="table ci-table"> <table class="table ci-table">
<thead> <vue-pipeline-head></vue-pipeline-head>
<tr> <tbody>
<th>Status</th> <tr class="commit" v-for='pipeline in pipelines'>
<th>Pipeline</th> <td class="commit-link" v-if="pipeline.status">
<th>Commit</th> <vue-running-pipeline
<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
:pipeline='pipeline' :pipeline='pipeline'
:shortsha='shortsha' :pipelineurl='pipelineurl'
> >
</vue-branch-commit> </vue-running-pipeline>
</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>
</td> </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></td>
<td class="pipeline-actions hidden-xs"> <vue-pipeline-actions></vue-pipeline-actions>
<!-- will need to pass builds info and have v-if's for icons -->
<vue-pipeline-actions></vue-pipeline-actions>
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
......
app/assets/javascripts/vue_pipelines_index/running.vue.js.es6
...@@ -7,11 +7,12 @@ ...@@ -7,11 +7,12 @@
'vue-running-icon': gl.VueRunningIcon, 'vue-running-icon': gl.VueRunningIcon,
}, },
props: [ props: [
'pipe', 'pipeline',
'pipelineurl',
], ],
template: ` template: `
<td class="commit-link"> <td class="commit-link">
<a href="pipelines/{{pipe.id}}"> <a :href='pipelineurl(pipeline.id)'>
<span class="ci-status ci-running"> <span class="ci-status ci-running">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
<vue-running-icon></vue-running-icon> <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