add cancelled icon

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

@@ -55,4 +55,15 @@
       </svg>
     `,
   });
+
+  gl.VueCanceledIcon = Vue.extend({
+    template: `
+      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" class="ci-status-icon-canceled" viewBox="0 0 14 14">
+        <g fill="#5C5C5C" 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>
+          <rect width="8" height="2" x="3" y="6" transform="rotate(45 7 7)" rx=".5"></rect>
+        </g>
+      </svg>
+    `,
+  });
 })(window.gl || (window.gl = {}));

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

@@ -9,6 +9,7 @@
       'failed-icon': gl.VueFailedIcon,
       'success-icon': gl.VueSuccessIcon,
       'created-icon': gl.VueCreatedIcon,
+      'canceled-icon': gl.VueCanceledIcon,
     },
     props: ['stage'],
     computed: {
@@ -30,6 +31,7 @@
         <failed-icon v-if='stage.status === "failed"'></failed-icon>
         <pending-icon v-if='stage.status === "pending"'></pending-icon>
         <created-icon v-if='stage.status === "created"'></created-icon>
+        <canceled-icon v-if='stage.status === "canceled"'></canceled-icon>
       </a>
     `,
   });

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

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

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

 //= require ./pending.js.es6
 //= require ./failed.js.es6
 //= require ./running.js.es6
+//= require ./canceled.js.es6
 //= require ./status.js.es6

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

@@ -8,6 +8,7 @@
       'vue-pending-scope': gl.VuePendingScope,
       'vue-failed-scope': gl.VueFailedScope,
       'vue-created-scope': gl.VueCreatedScope,
+      'vue-canceled-scope': gl.VueCanceledScope,
     },
     props: [
       'pipeline',
@@ -34,6 +35,11 @@
           :pipeline='pipeline'
         >
         </vue-created-scope>
+        <vue-canceled-scope
+          v-if="pipeline.details.status === 'canceled'"
+          :pipeline='pipeline'
+        >
+        </vue-canceled-scope>
       </td>
     `,
   });