more progress

app/assets/javascripts/vue_icons/index.js.es6

@@ -66,4 +66,25 @@
       </svg>
     `,
   });
+
+  gl.VueSkippedIcon = Vue.extend({
+    template: `
+      <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
+        <g fill="#8F8F8F" fill-rule="evenodd">
+          <path d="M29.513 10.134A15.922 15.922 0 0 0 23 7.28V6h2.993C26.55 6 27 5.552 27 5V2a1 1 0 0 0-1.007-1H14.007C13.45 1 13 1.448 13 2v3a1 1 0 0 0 1.007 1H17v1.28C9.597 8.686 4 15.19 4 23c0 8.837 7.163 16 16 16s16-7.163 16-16c0-3.461-1.099-6.665-2.967-9.283l1.327-1.58a2.498 2.498 0 0 0-.303-3.53 2.499 2.499 0 0 0-3.528.315l-1.016 1.212zM20 34c6.075 0 11-4.925 11-11s-4.925-11-11-11S9 16.925 9 23s4.925 11 11 11z"/><path d="M19 21h-4.002c-.552 0-.998.452-.998 1.01v1.98c0 .567.447 1.01.998 1.01h7.004c.274 0 .521-.111.701-.291a.979.979 0 0 0 .297-.704v-8.01c0-.54-.452-.995-1.01-.995h-1.98a.997.997 0 0 0-1.01.995V21z"/>
+        </g>
+      </svg>
+    `,
+  });
+
+  gl.VueUnstableIcon = Vue.extend({
+    template: `
+      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
+        <g fill="#FF8A24" fill-rule="evenodd">
+          <path d="M12.5,7 C12.5,3.96243388 10.0375661,1.5 7,1.5 C3.96243388,1.5 1.5,3.96243388 1.5,7 C1.5,10.0375661 3.96243388,12.5 7,12.5 C10.0375661,12.5 12.5,10.0375661 12.5,7 Z M0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,10.8659932 10.8659932,14 7,14 C3.13400675,14 0,10.8659932 0,7 Z"/>
+          <path d="M6,3.49769878 C6,3.22282734 6.21403503,3 6.50468445,3 L7.49531555,3 C7.77404508,3 8,3.21484375 8,3.49769878 L8,7.50230122 C8,7.77717266 7.78596497,8 7.49531555,8 L6.50468445,8 C6.22595492,8 6,7.78515625 6,7.50230122 L6,3.49769878 Z M6,9.50468445 C6,9.22595492 6.21403503,9 6.50468445,9 L7.49531555,9 C7.77404508,9 8,9.21403503 8,9.50468445 L8,10.4953156 C8,10.7740451 7.78596497,11 7.49531555,11 L6.50468445,11 C6.22595492,11 6,10.785965 6,10.4953156 L6,9.50468445 Z"/>
+        </g>
+      </svg
+    `,
+  });
 })(window.gl || (window.gl = {}));

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

@@ -80,7 +80,7 @@
           <div class="cancel-retry-btns inline">
             <!-- @click='retry($event)' -->
             <a
-              v-if='!pipeline.cancel_url || pipeline.details.status !== "cancelled"'
+              v-if='pipeline.retry_url'
               class="btn has-tooltip"
               title="Retry"
               rel="nofollow"

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

@@ -19,7 +19,6 @@
       seconds(date) {
         return this.formatSection(date.getSeconds());
       },
-      // need created_at or created_at for finish and running
       finishdate() {
         const date = new Date(
           new Date(

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

@@ -3,3 +3,5 @@
 //= require ./running.js.es6
 //= require ./canceled.js.es6
 //= require ./status.js.es6
+//= require ./unstable.js.es6
+//= require ./skipped.js.es6

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

+/* global Vue, gl */
+/* eslint-disable no-param-reassign */
+
+((gl) => {
+  gl.VueSkippedScope = Vue.extend({
+    components: {
+      'vue-skipped-icon': gl.VueSkippedIcon,
+    },
+    props: [
+      'pipeline',
+    ],
+    template: `
+      <td class="commit-link">
+        <a :href='pipeline.url'>
+          <span class="ci-status ci-skipped">
+            <vue-skipped-icon></vue-skipped-icon>
+            &nbsp;skipped
+          </span>
+        </a>
+      </td>
+    `,
+  });
+})(window.gl || (window.gl = {}));
\ No newline at end of file

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

@@ -9,6 +9,7 @@
       'vue-failed-scope': gl.VueFailedScope,
       'vue-created-scope': gl.VueCreatedScope,
       'vue-canceled-scope': gl.VueCanceledScope,
+      'vue-unstable-scope': gl.VueUnstableScope,
     },
     props: [
       'pipeline',
@@ -40,6 +41,11 @@
           :pipeline='pipeline'
         >
         </vue-canceled-scope>
+        <vue-unstable-scope
+          v-if="pipeline.details.status === 'unstable'"
+          :pipeline='pipeline'
+        >
+        </vue-unstable-scope>
       </td>
     `,
   });

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

+/* global Vue, gl */
+/* eslint-disable no-param-reassign */
+
+((gl) => {
+  gl.VueUnstableScope = Vue.extend({
+    components: {
+      'vue-unstable-icon': gl.VueUnstableIcon,
+    },
+    props: [
+      'pipeline',
+    ],
+    template: `
+      <td class="commit-link">
+        <a :href='pipeline.url'>
+          <span class="ci-status ci-unstable">
+            <vue-unstable-icon></vue-unstable-icon>
+            &nbsp;unstable
+          </span>
+        </a>
+      </td>
+    `,
+  });
+})(window.gl || (window.gl = {}));