change to vue

Author: yp05327

web_src/js/components/ActionsRunStatus.vue

@@ -0,0 +1,26 @@
+<template>
+  <SvgIcon name="octicon-check-circle-fill" class="green" :size="size" v-if="status === 'success'"/>
+  <SvgIcon name="octicon-skip" class="ui text grey" :size="size" v-else-if="status === 'skipped'"/>
+  <SvgIcon name="octicon-clock" class="ui text yellow" :size="size" v-else-if="status === 'waiting'"/>
+  <SvgIcon name="octicon-blocked" class="ui text yellow" :size="size" v-else-if="status === 'blocked'"/>
+  <SvgIcon name="octicon-meter" class="ui text yellow" :size="size" class-name="job-status-rotate" v-else-if="job.status === 'running'"/>
+  <SvgIcon name="octicon-x-circle-fill" class="red" :size="size" v-else/>
+</template>
+
+<script>
+import {SvgIcon} from '../svg.js';
+
+export default {
+  components: {SvgIcon},
+  props: {
+    status: {
+      type: String,
+      required: true
+    },
+    size: {
+      type: Number,
+      default: 16
+    }
+  },
+};
+</script>

web_src/js/components/RepoActionView.vue

@@ -17,7 +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">
-                <RunStatus :status="job.status"/>
+                <ActionsRunStatus :status="job.status" size="20"/>
                 <span class="ui text">{{ job.name }}</span>
               </a>
               <button class="job-brief-rerun" @click="rerunJob(index)" v-if="job.canRerun">
@@ -43,7 +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"/>
 
-              <RunStatus :status="jobStep.status" class="gt-mr-3"/>
+              <ActionsRunStatus :status="jobStep.status" class="gt-mr-3"/>
 
               <span class="step-summary-msg">{{ jobStep.summary }}</span>
               <span class="step-summary-dur">{{ jobStep.duration }}</span>
@@ -60,7 +60,7 @@
 
 <script>
 import {SvgIcon} from '../svg.js';
-import {RunStatus} from '../runstatus.js';
+import ActionsRunStatus from './ActionsRunStatus.vue';
 import {createApp} from 'vue';
 import AnsiToHTML from 'ansi-to-html';
 
@@ -70,7 +70,7 @@ const sfc = {
   name: 'RepoActionView',
   components: {
     SvgIcon,
-    RunStatus,
+    ActionsRunStatus,
   },
   props: {
     runIndex: String,