Add ActionRunStatus component

web_src/js/components/RepoActionView.vue

@@ -17,12 +17,7 @@
           <div class="job-brief-list">
             <div class="job-brief-item" v-for="(job, index) in run.jobs" :key="job.id">
               <a class="job-brief-link" :href="run.link+'/jobs/'+index">
-                <SvgIcon name="octicon-check-circle-fill" class="green" v-if="job.status === 'success'"/>
-                <SvgIcon name="octicon-skip" class="ui text grey" v-else-if="job.status === 'skipped'"/>
-                <SvgIcon name="octicon-clock" class="ui text yellow" v-else-if="job.status === 'waiting'"/>
-                <SvgIcon name="octicon-blocked" class="ui text yellow" v-else-if="job.status === 'blocked'"/>
-                <SvgIcon name="octicon-meter" class="ui text yellow" class-name="job-status-rotate" v-else-if="job.status === 'running'"/>
-                <SvgIcon name="octicon-x-circle-fill" class="red" v-else/>
+                <RunStatus :status="job.status"/>
                 <span class="ui text">{{ job.name }}</span>
               </a>
               <button class="job-brief-rerun" @click="rerunJob(index)" v-if="job.canRerun">
@@ -48,12 +43,7 @@
               <SvgIcon name="octicon-chevron-down" class="gt-mr-3" v-show="currentJobStepsStates[i].expanded"/>
               <SvgIcon name="octicon-chevron-right" class="gt-mr-3" v-show="!currentJobStepsStates[i].expanded"/>
 
-              <SvgIcon name="octicon-check-circle-fill" class="green gt-mr-3" v-if="jobStep.status === 'success'"/>
-              <SvgIcon name="octicon-skip" class="ui text grey gt-mr-3" v-else-if="jobStep.status === 'skipped'"/>
-              <SvgIcon name="octicon-clock" class="ui text yellow gt-mr-3" v-else-if="jobStep.status === 'waiting'"/>
-              <SvgIcon name="octicon-blocked" class="ui text yellow gt-mr-3" v-else-if="jobStep.status === 'blocked'"/>
-              <SvgIcon name="octicon-meter" class="ui text yellow gt-mr-3" class-name="job-status-rotate" v-else-if="jobStep.status === 'running'"/>
-              <SvgIcon name="octicon-x-circle-fill" class="red gt-mr-3 " v-else/>
+              <RunStatus :status="jobStep.status" class="gt-mr-3"/>
 
               <span class="step-summary-msg">{{ jobStep.summary }}</span>
               <span class="step-summary-dur">{{ jobStep.duration }}</span>
@@ -70,6 +60,7 @@
 
 <script>
 import {SvgIcon} from '../svg.js';
+import {RunStatus} from '../runstatus.js';
 import {createApp} from 'vue';
 import AnsiToHTML from 'ansi-to-html';
 
@@ -79,6 +70,7 @@ const sfc = {
   name: 'RepoActionView',
   components: {
     SvgIcon,
+    RunStatus,
   },
   props: {
     runIndex: String,

web_src/js/runstatus.js

@@ -0,0 +1,54 @@
+import {svg} from './svg.js';
+
+// retrieve a HTML string for given run status, size and additional classes
+function runstatus(status, size = 16, className = '') {
+  switch (status) {
+    case 'success':
+      return [
+        svg('octicon-check-circle-fill', size, className),
+        'green'
+      ];
+    case 'skipped':
+      return [
+        svg('octicon-skip', size, className),
+        'ui text grey'
+      ];
+    case 'waiting':
+      return [
+        svg('octicon-clock', size, className),
+        'ui text yellow'
+      ];
+    case 'blocked':
+      return [
+        svg('octicon-blocked', size, className),
+        'ui text yellow'
+      ];
+    case 'running':
+      return [
+        svg('octicon-meter', size, className),
+        'ui text yellow'
+      ];
+    default:
+      return [
+        svg('octicon-x-circle-fill', size, className),
+        'red'
+      ];
+  }
+}
+
+export const RunStatus = {
+  name: 'RunStatus',
+  props: {
+    status: {type: String, required: true},
+    size: {type: Number, default: 16},
+    className: {type: String, default: ''},
+  },
+
+  computed: {
+    runstatus() {
+      return runstatus(this.status, this.size, this.className);
+    },
+  },
+
+  template: `<span v-html="runstatus[0]" :class="runstatus[1]"/>`
+};