status icon and status components dynamic by scope

app/assets/javascripts/vue_pipelines_index/pipelines.js.es6

@@ -11,7 +11,7 @@
       'vue-pipeline-url': gl.VuePipelineUrl,
       'vue-pipeline-head': gl.VuePipelineHead,
       'vue-gl-pagination': gl.VueGlPagination,
-      'vue-status-pipeline': gl.VueStatusPipeline,
+      'vue-status-scope': gl.VueStatusScope,
     },
     data() {
       return {
@@ -54,11 +54,11 @@
             <vue-pipeline-head></vue-pipeline-head>
             <tbody>
               <tr class="commit" v-for='pipeline in pipelines'>
-                <vue-status-pipeline
-                  :pipeline='pipeline'
-                  :pipelineurl='pipelineurl'
+                <vue-status-scope
+                  :scope='pipeline'
+                  :scopeurl='pipelineurl'
                 >
-                </vue-status-pipeline>
+                </vue-status-scope>
                 <vue-pipeline-url
                   :pipeline='pipeline'
                   :pipelineurl='pipelineurl'

app/assets/javascripts/vue_pipelines_status/failed.js.es6

@@ -2,17 +2,17 @@
 /* eslint-disable no-param-reassign */
 
 ((gl) => {
-  gl.VueFailedPipeline = Vue.extend({
+  gl.VueFailedScope = Vue.extend({
     components: {
       'vue-failed-icon': gl.VuePendingIcon,
     },
     props: [
-      'pipeline',
-      'pipelineurl',
+      'scope',
+      'scopeurl',
     ],
     template: `
       <td class="commit-link">
-        <a :href='pipelineurl(pipeline.id)'>
+        <a :href='scopeurl(scope.id)'>
           <span class="ci-status ci-failed">
             <vue-failed-icon></vue-failed-icon>
             &nbsp;failed

app/assets/javascripts/vue_pipelines_status/pending.js.es6

@@ -2,17 +2,17 @@
 /* eslint-disable no-param-reassign */
 
 ((gl) => {
-  gl.VuePendingPipeline = Vue.extend({
+  gl.VuePendingScope = Vue.extend({
     components: {
       'vue-pending-icon': gl.VuePendingIcon,
     },
     props: [
-      'pipeline',
-      'pipelineurl',
+      'scope',
+      'scopeurl',
     ],
     template: `
       <td class="commit-link">
-        <a :href='pipelineurl(pipeline.id)'>
+        <a :href='scopeurl(scope.id)'>
           <span class="ci-status ci-pending">
             <vue-pending-icon></vue-pending-icon>
             &nbsp;pending

app/assets/javascripts/vue_pipelines_status/running.js.es6

@@ -2,17 +2,17 @@
 /* eslint-disable no-param-reassign */
 
 ((gl) => {
-  gl.VueRunningPipeline = Vue.extend({
+  gl.VueRunningScope = Vue.extend({
     components: {
       'vue-running-icon': gl.VueRunningIcon,
     },
     props: [
-      'pipeline',
-      'pipelineurl',
+      'scope',
+      'scopeurl',
     ],
     template: `
       <td class="commit-link">
-        <a :href='pipelineurl(pipeline.id)'>
+        <a :href='scopeurl(scope.id)'>
           <span class="ci-status ci-running">
             <vue-running-icon></vue-running-icon>
             &nbsp;running

app/assets/javascripts/vue_pipelines_status/status.js.es6

@@ -2,36 +2,36 @@
 /* eslint-disable no-param-reassign */
 
 ((gl) => {
-  gl.VueStatusPipeline = Vue.extend({
+  gl.VueStatusScope = Vue.extend({
     components: {
-      'vue-running-pipeline': gl.VueRunningPipeline,
-      'vue-pending-pipeline': gl.VuePendingPipeline,
-      'vue-failed-pipeline': gl.VueFailedPipeline,
+      'vue-running-scope': gl.VueRunningScope,
+      'vue-pending-scope': gl.VuePendingScope,
+      'vue-failed-scope': gl.VueFailedScope,
     },
     props: [
-      'pipeline',
-      'pipelineurl',
+      'scope',
+      'scopeurl',
     ],
     template: `
       <td class="commit-link">
-        <vue-running-pipeline
-          v-if="pipeline.status === 'running'"
-          :pipeline='pipeline'
-          :pipelineurl='pipelineurl'
+        <vue-running-scope
+          v-if="scope.status === 'running'"
+          :scope='scope'
+          :scopeurl='scopeurl'
         >
-        </vue-running-pipeline>
-        <vue-pending-pipeline
-          v-if="pipeline.status === 'pending'"
-          :pipeline='pipeline'
-          :pipelineurl='pipelineurl'
+        </vue-running-scope>
+        <vue-pending-scope
+          v-if="scope.status === 'pending'"
+          :scope='scope'
+          :scopeurl='scopeurl'
         >
-        </vue-pending-pipeline>
-        <vue-failed-pipeline
-          v-if="pipeline.status === 'failed'"
-          :pipeline='pipeline'
-          :pipelineurl='pipelineurl'
+        </vue-pending-scope>
+        <vue-failed-scope
+          v-if="scope.status === 'failed'"
+          :scope='scope'
+          :scopeurl='scopeurl'
         >
-        </vue-failed-pipeline>
+        </vue-failed-scope>
       </td>
     `,
   });