stages render correctly and use new status object

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

@@ -6,16 +6,13 @@
     props: ['stage'],
     computed: {
       buildStatus() {
-        return `Build: ${this.stage.status}`;
+        return `Build: ${this.stage.status.label}`;
       },
       tooltip() {
-        return `has-tooltip ci-status-icon-${this.stage.status}`;
+        return `has-tooltip ci-status-icon-${this.stage.status.label}`;
       },
       svg() {
-        return document
-          .querySelector(
-            `.icon_status_${this.stage.status}`,
-          ).innerHTML;
+        return document.querySelector(`.${this.stage.status.icon}`).innerHTML;
       },
     },
     template: `

app/assets/stylesheets/pages/icons.scss

@@ -6,6 +6,14 @@
   }
 }
 
+.ci-status-icon-passed {
+  color: $gl-success;
+
+  svg {
+    fill: $gl-success;
+  }
+}
+
 .ci-status-icon-failed {
   color: $gl-danger;