From 4a2ce822445278f4c022d9f26921b047a35cdc85 Mon Sep 17 00:00:00 2001
From: yp05327 <576951401@qq.com>
Date: Fri, 3 Mar 2023 02:16:06 +0000
Subject: [PATCH 1/7] add runstatus component

---
 web_src/js/components/RepoActionView.vue | 16 ++-----
 web_src/js/runstatus.js                  | 56 ++++++++++++++++++++++++
 2 files changed, 60 insertions(+), 12 deletions(-)
 create mode 100644 web_src/js/runstatus.js

diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 762067f52388b..db82c80e92811 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/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,
diff --git a/web_src/js/runstatus.js b/web_src/js/runstatus.js
new file mode 100644
index 0000000000000..913636cfcbaca
--- /dev/null
+++ b/web_src/js/runstatus.js
@@ -0,0 +1,56 @@
+import {svg} from './svg.js';
+
+// retrieve a HTML string for given run status, size and additional classes
+export function runstatus(status, size = 16, className = '') {
+  switch (status) {
+    case "success":
+      return svg('octicon-check-circle-fill', size, className);
+    case "skipped":
+      return svg('octicon-skip', size, className);
+    case "waiting":
+      return svg('octicon-clock', size, className);
+    case "blocked":
+      return svg('octicon-blocked', size, className);
+    case "running":
+      return svg('octicon-meter', size, className);
+    default:
+      return svg('octicon-x-circle-fill', size, className);
+  }
+}
+
+function spanclass(status){
+  switch (status) {
+    case "success":
+      return "green";
+    case "skipped":
+      return "ui text grey";
+    case "waiting":
+      return "ui text yellow";
+    case "blocked":
+      return "ui text yellow";
+    case "running":
+      return "ui text yellow";
+    default:
+      return "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);
+    },
+    spanclass() {
+      return spanclass(this.status)
+    }
+  },
+
+  template: `<span v-html="runstatus" :class="spanclass"/>`
+};

From badcf7e1303769669d5c4bd6f06dce56ecf1d81f Mon Sep 17 00:00:00 2001
From: yp05327 <576951401@qq.com>
Date: Fri, 3 Mar 2023 02:33:35 +0000
Subject: [PATCH 2/7] fix lint

---
 web_src/js/runstatus.js | 38 +++++++++++++++++++-------------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/web_src/js/runstatus.js b/web_src/js/runstatus.js
index 913636cfcbaca..fad4011cec32c 100644
--- a/web_src/js/runstatus.js
+++ b/web_src/js/runstatus.js
@@ -1,37 +1,37 @@
 import {svg} from './svg.js';
 
 // retrieve a HTML string for given run status, size and additional classes
-export function runstatus(status, size = 16, className = '') {
+function runstatus(status, size = 16, className = '') {
   switch (status) {
-    case "success":
+    case 'success':
       return svg('octicon-check-circle-fill', size, className);
-    case "skipped":
+    case 'skipped':
       return svg('octicon-skip', size, className);
-    case "waiting":
+    case 'waiting':
       return svg('octicon-clock', size, className);
-    case "blocked":
+    case 'blocked':
       return svg('octicon-blocked', size, className);
-    case "running":
+    case 'running':
       return svg('octicon-meter', size, className);
     default:
       return svg('octicon-x-circle-fill', size, className);
   }
 }
 
-function spanclass(status){
+function spanclass(status) {
   switch (status) {
-    case "success":
-      return "green";
-    case "skipped":
-      return "ui text grey";
-    case "waiting":
-      return "ui text yellow";
-    case "blocked":
-      return "ui text yellow";
-    case "running":
-      return "ui text yellow";
+    case 'success':
+      return 'green';
+    case 'skipped':
+      return 'ui text grey';
+    case 'waiting':
+      return 'ui text yellow';
+    case 'blocked':
+      return 'ui text yellow';
+    case 'running':
+      return 'ui text yellow';
     default:
-      return "red";
+      return 'red';
   }
 }
 
@@ -48,7 +48,7 @@ export const RunStatus = {
       return runstatus(this.status, this.size, this.className);
     },
     spanclass() {
-      return spanclass(this.status)
+      return spanclass(this.status);
     }
   },
 

From 44646a9d9645c92e2702b00a68186b0885c51548 Mon Sep 17 00:00:00 2001
From: yp05327 <576951401@qq.com>
Date: Fri, 3 Mar 2023 02:54:19 +0000
Subject: [PATCH 3/7] change to return 2 values

---
 web_src/js/runstatus.js | 52 ++++++++++++++++++++---------------------
 1 file changed, 25 insertions(+), 27 deletions(-)

diff --git a/web_src/js/runstatus.js b/web_src/js/runstatus.js
index fad4011cec32c..172c61183f9e2 100644
--- a/web_src/js/runstatus.js
+++ b/web_src/js/runstatus.js
@@ -4,34 +4,35 @@ import {svg} from './svg.js';
 function runstatus(status, size = 16, className = '') {
   switch (status) {
     case 'success':
-      return svg('octicon-check-circle-fill', size, className);
+      return [
+        svg('octicon-check-circle-fill', size, className),
+        'green'
+      ];
     case 'skipped':
-      return svg('octicon-skip', size, className);
+      return [
+        svg('octicon-skip', size, className),
+        'ui text grey'
+      ];
     case 'waiting':
-      return svg('octicon-clock', size, className);
+      return [
+        svg('octicon-clock', size, className),
+        'ui text yellow'
+      ];
     case 'blocked':
-      return svg('octicon-blocked', size, className);
+      return [
+        svg('octicon-blocked', size, className),
+        'ui text yellow'
+      ];
     case 'running':
-      return svg('octicon-meter', size, className);
+      return [
+        svg('octicon-meter', size, className),
+        'ui text yellow'
+      ];
     default:
-      return svg('octicon-x-circle-fill', size, className);
-  }
-}
-
-function spanclass(status) {
-  switch (status) {
-    case 'success':
-      return 'green';
-    case 'skipped':
-      return 'ui text grey';
-    case 'waiting':
-      return 'ui text yellow';
-    case 'blocked':
-      return 'ui text yellow';
-    case 'running':
-      return 'ui text yellow';
-    default:
-      return 'red';
+      return [
+        svg('octicon-x-circle-fill', size, className),
+        'red'
+      ];
   }
 }
 
@@ -47,10 +48,7 @@ export const RunStatus = {
     runstatus() {
       return runstatus(this.status, this.size, this.className);
     },
-    spanclass() {
-      return spanclass(this.status);
-    }
   },
 
-  template: `<span v-html="runstatus" :class="spanclass"/>`
+  template: `<span v-html="runstatus[0]" :class="runstatus[1]"/>`
 };

From e3e2d3a858048bfb614b45009db0e49fdfbd003a Mon Sep 17 00:00:00 2001
From: yp05327 <576951401@qq.com>
Date: Mon, 6 Mar 2023 08:26:52 +0000
Subject: [PATCH 4/7] change to vue

---
 web_src/js/components/ActionsRunStatus.vue | 26 +++++++++++
 web_src/js/components/RepoActionView.vue   |  8 ++--
 web_src/js/runstatus.js                    | 54 ----------------------
 3 files changed, 30 insertions(+), 58 deletions(-)
 create mode 100644 web_src/js/components/ActionsRunStatus.vue
 delete mode 100644 web_src/js/runstatus.js

diff --git a/web_src/js/components/ActionsRunStatus.vue b/web_src/js/components/ActionsRunStatus.vue
new file mode 100644
index 0000000000000..de14ed8ea66f3
--- /dev/null
+++ b/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>
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index db82c80e92811..9615e377e2eef 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/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,
diff --git a/web_src/js/runstatus.js b/web_src/js/runstatus.js
deleted file mode 100644
index 172c61183f9e2..0000000000000
--- a/web_src/js/runstatus.js
+++ /dev/null
@@ -1,54 +0,0 @@
-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]"/>`
-};

From 15e37b4ad97b23b7e5ecbdff3d6062008e685a9a Mon Sep 17 00:00:00 2001
From: yp05327 <576951401@qq.com>
Date: Mon, 6 Mar 2023 08:41:13 +0000
Subject: [PATCH 5/7] use ActionsRunStatus to run.status

---
 .../{ActionsRunStatus.vue => ActionRunStatus.vue}   |  2 +-
 web_src/js/components/RepoActionView.vue            | 13 +++++--------
 2 files changed, 6 insertions(+), 9 deletions(-)
 rename web_src/js/components/{ActionsRunStatus.vue => ActionRunStatus.vue} (91%)

diff --git a/web_src/js/components/ActionsRunStatus.vue b/web_src/js/components/ActionRunStatus.vue
similarity index 91%
rename from web_src/js/components/ActionsRunStatus.vue
rename to web_src/js/components/ActionRunStatus.vue
index de14ed8ea66f3..ccb46f2c29961 100644
--- a/web_src/js/components/ActionsRunStatus.vue
+++ b/web_src/js/components/ActionRunStatus.vue
@@ -3,7 +3,7 @@
   <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-meter" class="ui text yellow" :size="size" class-name="job-status-rotate" v-else-if="status === 'running'"/>
   <SvgIcon name="octicon-x-circle-fill" class="red" :size="size" v-else/>
 </template>
 
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 9592cdefb9ab5..f83e4df7daf8b 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -2,10 +2,7 @@
   <div class="action-view-container">
     <div class="action-view-header">
       <div class="action-info-summary">
-        <SvgIcon name="octicon-check-circle-fill" size="20" class="green" v-if="run.status === 'success'"/>
-        <SvgIcon name="octicon-clock" size="20" class="ui text yellow" v-else-if="run.status === 'waiting'"/>
-        <SvgIcon name="octicon-meter" size="20" class="ui text yellow" class-name="job-status-rotate" v-else-if="run.status === 'running'"/>
-        <SvgIcon name="octicon-x-circle-fill" size="20" class="red" v-else/>
+        <ActionRunStatus :status="run.status" size="20"/>
         <div class="action-title">
           {{ run.title }}
         </div>
@@ -23,7 +20,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">
-                <ActionsRunStatus :status="job.status" size="20"/>
+                <ActionRunStatus :status="job.status"/>
                 <span class="ui text">{{ job.name }}</span>
               </a>
               <button class="job-brief-rerun" @click="rerunJob(index)" v-if="job.canRerun">
@@ -49,7 +46,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"/>
 
-              <ActionsRunStatus :status="jobStep.status" class="gt-mr-3"/>
+              <ActionRunStatus :status="jobStep.status" class="gt-mr-3"/>
 
               <span class="step-summary-msg">{{ jobStep.summary }}</span>
               <span class="step-summary-dur">{{ jobStep.duration }}</span>
@@ -66,7 +63,7 @@
 
 <script>
 import {SvgIcon} from '../svg.js';
-import ActionsRunStatus from './ActionsRunStatus.vue';
+import ActionRunStatus from './ActionRunStatus.vue';
 import {createApp} from 'vue';
 import AnsiToHTML from 'ansi-to-html';
 
@@ -76,7 +73,7 @@ const sfc = {
   name: 'RepoActionView',
   components: {
     SvgIcon,
-    ActionsRunStatus,
+    ActionRunStatus,
   },
   props: {
     runIndex: String,

From 429ac3091c1e5a1e79b14ac04bdae440aa3c0599 Mon Sep 17 00:00:00 2001
From: yp05327 <576951401@qq.com>
Date: Mon, 6 Mar 2023 08:44:21 +0000
Subject: [PATCH 6/7] add classname

---
 web_src/js/components/ActionRunStatus.vue | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/web_src/js/components/ActionRunStatus.vue b/web_src/js/components/ActionRunStatus.vue
index ccb46f2c29961..3717b64956617 100644
--- a/web_src/js/components/ActionRunStatus.vue
+++ b/web_src/js/components/ActionRunStatus.vue
@@ -1,9 +1,9 @@
 <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="status === 'running'"/>
+  <SvgIcon name="octicon-check-circle-fill" class="green" :size="size" :class-name="className" v-if="status === 'success'"/>
+  <SvgIcon name="octicon-skip" class="ui text grey" :size="size" :class-name="className" v-else-if="status === 'skipped'"/>
+  <SvgIcon name="octicon-clock" class="ui text yellow" :size="size" :class-name="className" v-else-if="status === 'waiting'"/>
+  <SvgIcon name="octicon-blocked" class="ui text yellow" :size="size" :class-name="className" v-else-if="status === 'blocked'"/>
+  <SvgIcon name="octicon-meter" class="ui text yellow" :size="size" :class-name="'job-status-rotate ' + className" v-else-if="status === 'running'"/>
   <SvgIcon name="octicon-x-circle-fill" class="red" :size="size" v-else/>
 </template>
 
@@ -20,6 +20,10 @@ export default {
     size: {
       type: Number,
       default: 16
+    },
+    className: {
+      type: String,
+      default: ''
     }
   },
 };

From 8feb4a972c9b65a35980c0e7df6c7796b3ebca05 Mon Sep 17 00:00:00 2001
From: yp05327 <576951401@qq.com>
Date: Mon, 6 Mar 2023 08:46:53 +0000
Subject: [PATCH 7/7] fix size

---
 web_src/js/components/RepoActionView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index f83e4df7daf8b..aadc8369b75e6 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -2,7 +2,7 @@
   <div class="action-view-container">
     <div class="action-view-header">
       <div class="action-info-summary">
-        <ActionRunStatus :status="run.status" size="20"/>
+        <ActionRunStatus :status="run.status" :size="20"/>
         <div class="action-title">
           {{ run.title }}
         </div>