From 3041b3ba7902f8db77d2e8ae8fd39d7dee88ea1e Mon Sep 17 00:00:00 2001
From: HesterG <hestergong@gmail.com>
Date: Thu, 11 May 2023 08:36:23 +0800
Subject: [PATCH 01/16] save

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

diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 28adfbc6eca71..fefc564c080d6 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -30,15 +30,15 @@
       <div class="action-view-left">
         <div class="job-group-section">
           <div class="job-brief-list">
-            <div class="job-brief-item" v-for="(job, index) in run.jobs" :key="job.id">
+            <div class="job-brief-item" v-for="(job, index) in run.jobs" :key="job.id" @mouseenter="rerunIndex = job.id"  @mouseleave="rerunIndex = -1">
               <a class="job-brief-link" :href="run.link+'/jobs/'+index">
                 <ActionRunStatus :locale-status="locale.status[job.status]" :status="job.status"/>
                 <span class="ui text gt-mx-3">{{ job.name }}</span>
               </a>
-              <span class="step-summary-duration">{{ job.duration }}</span>
-              <button :data-tooltip-content="locale.rerun" class="job-brief-rerun" @click="rerunJob(index)" v-if="job.canRerun">
+              <button :data-tooltip-content="locale.rerun" class="job-brief-rerun" @click="rerunJob(index)" v-if="job.canRerun && rerunIndex === job.id">
                 <SvgIcon name="octicon-sync" class="ui text black"/>
               </button>
+              <span class="step-summary-duration">{{ job.duration }}</span>
             </div>
           </div>
         </div>
@@ -115,6 +115,7 @@ const sfc = {
       intervalID: null,
       currentJobStepsStates: [],
       artifacts: [],
+      rerunIndex: -1,
 
       // provided by backend
       run: {
@@ -490,11 +491,10 @@ export function ansiLogToHTML(line) {
   background-color: transparent;
   outline: none;
   cursor: pointer;
-  transition: transform 0.2s;
 }
 
 .job-group-section .job-brief-list .job-brief-item .job-brief-rerun:hover {
-  transform: scale(130%);
+  
 }
 
 .job-group-section .job-brief-list .job-brief-item .job-brief-link {
@@ -507,6 +507,10 @@ export function ansiLogToHTML(line) {
   align-items: center;
 }
 
+.job-group-section .job-brief-list .job-brief-item .job-brief-link:hover {
+  text-decoration: none;
+}
+
 .job-group-section .job-brief-list .job-brief-item:hover {
   background-color: var(--color-secondary);
 }

From ee60a4df2baf99d2ead49a330b5faf43f9839050 Mon Sep 17 00:00:00 2001
From: HesterG <hestergong@gmail.com>
Date: Thu, 11 May 2023 18:08:11 +0800
Subject: [PATCH 02/16] save changes

---
 options/locale/locale_en-US.ini           |   1 +
 templates/repo/actions/status.tmpl        |   3 +-
 templates/repo/actions/view.tmpl          |   1 +
 web_src/js/components/ActionRunStatus.vue |   3 +-
 web_src/js/components/RepoActionView.vue  | 152 +++++++++++++++-------
 5 files changed, 113 insertions(+), 47 deletions(-)

diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index 6305a3907b7be..250186510155d 100644
--- a/options/locale/locale_en-US.ini
+++ b/options/locale/locale_en-US.ini
@@ -80,6 +80,7 @@ milestones = Milestones
 ok = OK
 cancel = Cancel
 rerun = Re-run
+rerun_all = Re-run All Jobs
 save = Save
 add = Add
 add_all = Add All
diff --git a/templates/repo/actions/status.tmpl b/templates/repo/actions/status.tmpl
index ab2ee8482cf0e..41a5c6475fb3f 100644
--- a/templates/repo/actions/status.tmpl
+++ b/templates/repo/actions/status.tmpl
@@ -1,5 +1,6 @@
 <!-- This template should be kept the same as web_src/js/components/ActionRunStatus.vue
 	Please also update the vue file above if this template is modified.
+	action status accepted: success, skipped, waiting, blocked, running, failure, cancelled, unknown
 -->
 {{- $size := 16 -}}
 {{- if .size -}}
@@ -22,7 +23,7 @@
 	{{svg "octicon-blocked" $size (printf "text yellow %s" $className)}}
 {{else if eq .status "running"}}
 	{{svg "octicon-meter" $size (printf "text yellow job-status-rotate %s" $className)}}
-{{else}}
+{{else if or (eq .status "failure") or (eq .status "cancelled") or (eq .status "unknown")}}
 	{{svg "octicon-x-circle-fill" $size (printf "text red %s" $className)}}
 {{end}}
 </span>
diff --git a/templates/repo/actions/view.tmpl b/templates/repo/actions/view.tmpl
index 8d6559ee98007..3a3a069cbc8a7 100644
--- a/templates/repo/actions/view.tmpl
+++ b/templates/repo/actions/view.tmpl
@@ -9,6 +9,7 @@
 		data-locale-approve="{{.locale.Tr "repo.diff.review.approve"}}"
 		data-locale-cancel="{{.locale.Tr "cancel"}}"
 		data-locale-rerun="{{.locale.Tr "rerun"}}"
+		data-locale-rerun-all="{{.locale.Tr "rerun_all"}}"
 		data-locale-status-unknown="{{.locale.Tr "actions.status.unknown"}}"
 		data-locale-status-waiting="{{.locale.Tr "actions.status.waiting"}}"
 		data-locale-status-running="{{.locale.Tr "actions.status.running"}}"
diff --git a/web_src/js/components/ActionRunStatus.vue b/web_src/js/components/ActionRunStatus.vue
index 0786cb60a9a48..a620c9c946bf8 100644
--- a/web_src/js/components/ActionRunStatus.vue
+++ b/web_src/js/components/ActionRunStatus.vue
@@ -1,5 +1,6 @@
 <!-- This vue should be kept the same as templates/repo/actions/status.tmpl
     Please also update the template file above if this vue is modified.
+    action status accepted: success, skipped, waiting, blocked, running, failure, cancelled, unknown
 -->
 <template>
   <span :data-tooltip-content="localeStatus" v-if="status">
@@ -8,7 +9,7 @@
     <SvgIcon name="octicon-clock" class="text yellow" :size="size" :class-name="className" v-else-if="status === 'waiting'"/>
     <SvgIcon name="octicon-blocked" class="text yellow" :size="size" :class-name="className" v-else-if="status === 'blocked'"/>
     <SvgIcon name="octicon-meter" class="text yellow" :size="size" :class-name="'job-status-rotate ' + className" v-else-if="status === 'running'"/>
-    <SvgIcon name="octicon-x-circle-fill" class="text red" :size="size" v-else/>
+    <SvgIcon name="octicon-x-circle-fill" class="text red" :size="size" v-else-if="['failure', 'cancelled', 'unknown'].includes(status)" />
   </span>
 </template>
 
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index fefc564c080d6..d0a4925602a47 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -1,19 +1,19 @@
 <template>
-  <div class="action-view-container">
+  <div class="ui container action-view-container">
     <div class="action-view-header">
       <div class="action-info-summary">
         <ActionRunStatus :locale-status="locale.status[run.status]" :status="run.status" :size="20"/>
-        <div class="action-title">
+        <h2 class="action-title">
           {{ run.title }}
-        </div>
+        </h2>
         <button class="ui basic small compact button primary" @click="approveRun()" v-if="run.canApprove">
-          <SvgIcon class="gt-mr-2" name="octicon-play" :size="20"/> {{ locale.approve }}
+          {{ locale.approve }}
         </button>
         <button class="ui basic small compact button red" @click="cancelRun()" v-else-if="run.canCancel">
-          <SvgIcon class="gt-mr-2" name="octicon-x-circle-fill" :size="20"/> {{ locale.cancel }}
+          {{ locale.cancel }}
         </button>
         <button class="ui basic small compact button secondary" @click="rerun()" v-else-if="run.canRerun">
-          <SvgIcon class="gt-mr-2" name="octicon-sync" :size="20"/> {{ locale.rerun }}
+          {{ locale.rerun_all }}
         </button>
       </div>
       <div class="action-commit-summary">
@@ -30,15 +30,15 @@
       <div class="action-view-left">
         <div class="job-group-section">
           <div class="job-brief-list">
-            <div class="job-brief-item" v-for="(job, index) in run.jobs" :key="job.id" @mouseenter="rerunIndex = job.id"  @mouseleave="rerunIndex = -1">
+            <div class="job-brief-item" :class="parseInt(jobIndex) === index ? 'selected' : ''" v-for="(job, index) in run.jobs" :key="job.id" @mouseenter="onHoverRerunIndex = job.id"  @mouseleave="onHoverRerunIndex = -1">
               <a class="job-brief-link" :href="run.link+'/jobs/'+index">
                 <ActionRunStatus :locale-status="locale.status[job.status]" :status="job.status"/>
-                <span class="ui text gt-mx-3">{{ job.name }}</span>
+                <span class="job-brief-name gt-mx-3 gt-ellipsis">{{ job.name }}</span>
               </a>
-              <button :data-tooltip-content="locale.rerun" class="job-brief-rerun" @click="rerunJob(index)" v-if="job.canRerun && rerunIndex === job.id">
-                <SvgIcon name="octicon-sync" class="ui text black"/>
-              </button>
-              <span class="step-summary-duration">{{ job.duration }}</span>
+              <span class="job-brief-info" :data-tooltip-content="locale.rerun" >
+                <SvgIcon name="octicon-sync" class="job-brief-rerun gt-mx-3" @click="rerunJob(index)" v-show="job.canRerun && onHoverRerunIndex === job.id"/>
+                <span class="step-summary-duration">{{ job.duration }}</span>
+              </span>
             </div>
           </div>
         </div>
@@ -58,21 +58,21 @@
 
       <div class="action-view-right">
         <div class="job-info-header">
-          <div class="job-info-header-title">
+          <h3 class="job-info-header-title">
             {{ currentJob.title }}
-          </div>
-          <div class="job-info-header-detail">
+          </h3>
+          <p class="job-info-header-detail">
             {{ currentJob.detail }}
-          </div>
+          </p>
         </div>
         <div class="job-step-container">
           <div class="job-step-section" v-for="(jobStep, i) in currentJob.steps" :key="i">
-            <div class="job-step-summary" @click.stop="toggleStepLogs(i)">
-              <SvgIcon :name="currentJobStepsStates[i].expanded ? 'octicon-chevron-down': 'octicon-chevron-right'" class="gt-mr-3"/>
-
+            <div class="job-step-summary" @click.stop="toggleStepLogs(i)" :class="currentJobStepsStates[i].expanded ? 'selected' : ''">
+              <SvgIcon v-if="currentJobStepsStates[i].isLoading" name="octicon-sync" class="gt-mr-3 job-status-rotate"/>
+              <SvgIcon v-else :name="currentJobStepsStates[i].expanded ? 'octicon-chevron-down': 'octicon-chevron-right'" class="gt-mr-3"/>
               <ActionRunStatus :status="jobStep.status" class="gt-mr-3"/>
 
-              <span class="step-summary-msg">{{ jobStep.summary }}</span>
+              <span class="step-summary-msg gt-ellipsis">{{ jobStep.summary }}</span>
               <span class="step-summary-duration">{{ jobStep.duration }}</span>
             </div>
 
@@ -115,7 +115,7 @@ const sfc = {
       intervalID: null,
       currentJobStepsStates: [],
       artifacts: [],
-      rerunIndex: -1,
+      onHoverRerunIndex: -1,
 
       // provided by backend
       run: {
@@ -209,10 +209,21 @@ const sfc = {
     },
 
     // show/hide the step logs for a step
-    toggleStepLogs(idx) {
-      this.currentJobStepsStates[idx].expanded = !this.currentJobStepsStates[idx].expanded;
-      if (this.currentJobStepsStates[idx].expanded) {
-        this.loadJob(); // try to load the data immediately instead of waiting for next timer interval
+    async toggleStepLogs(idx) {
+      console.log(this.currentJobStepsStates[idx]);
+      const currentToggledStep = this.currentJobStepsStates[idx];
+      currentToggledStep.expanded = !currentToggledStep.expanded;
+      if (currentToggledStep.expanded) {
+        // If the job is done and the job step is expanded for the first time,
+        // wait for fetching job and show the loading icon
+        if (this.isDone(this.run.status) && currentToggledStep.isInitialExpand) {
+          currentToggledStep.isInitialExpand = false;
+          currentToggledStep.isLoading = true;
+          await this.loadJob();
+          currentToggledStep.isLoading = false;
+        } else {
+          this.loadJob(); // try to load the data immediately instead of waiting for next timer interval
+        }
       }
     },
     // rerun a job
@@ -256,6 +267,7 @@ const sfc = {
     },
 
     appendLogs(stepIndex, logLines) {
+      console.log('append', logLines);
       for (const line of logLines) {
         // TODO: group support: ##[group]GroupTitle , ##[endgroup]
         const el = this.getLogsContainer(stepIndex);
@@ -296,11 +308,13 @@ const sfc = {
         // sync the currentJobStepsStates to store the job step states
         for (let i = 0; i < this.currentJob.steps.length; i++) {
           if (!this.currentJobStepsStates[i]) {
-            this.currentJobStepsStates[i] = {cursor: null, expanded: false};
+            console.log('initial syncing')
+            this.currentJobStepsStates[i] = {cursor: null, expanded: false, isInitialExpand: true};
           }
         }
         // append logs to the UI
         for (const logs of response.logs.stepsLog) {
+          console.log('logs.cursor', logs.cursor);
           // save the cursor, it will be passed to backend next time
           this.currentJobStepsStates[logs.step].cursor = logs.cursor;
           this.appendLogs(logs.step, logs.lines);
@@ -326,6 +340,10 @@ const sfc = {
         body,
       });
     },
+
+    isDone(status) {
+      return ['success', 'skipped', 'failure', 'cancelled'].includes(status);
+    }
   },
 };
 
@@ -349,6 +367,7 @@ export function initRepositoryActionView() {
       cancel: el.getAttribute('data-locale-cancel'),
       rerun: el.getAttribute('data-locale-rerun'),
       artifactsTitle: el.getAttribute('data-locale-artifacts-title'),
+      rerun_all: el.getAttribute('data-locale-rerun-all'),
       status: {
         unknown: el.getAttribute('data-locale-status-unknown'),
         waiting: el.getAttribute('data-locale-status-waiting'),
@@ -418,24 +437,24 @@ export function ansiLogToHTML(line) {
 /* action view header */
 
 .action-view-header {
-  margin: 0 20px 20px 20px;
+  margin: 20px 0px;
 }
 
 .action-info-summary {
-  font-size: 150%;
-  height: 20px;
   display: flex;
   align-items: center;
   margin-top: 1rem;
 }
 
 .action-info-summary .action-title {
+  font-size: 20px;
+  margin: 0;
   padding: 0 5px;
   flex: 1;
 }
 
 .action-commit-summary {
-  padding: 10px 10px;
+  padding: 10px;
 }
 
 /* ================ */
@@ -445,7 +464,6 @@ export function ansiLogToHTML(line) {
   width: 30%;
   max-width: 400px;
   overflow-y: scroll;
-  margin-left: 10px;
 }
 
 .job-group-section .job-group-summary {
@@ -481,25 +499,23 @@ export function ansiLogToHTML(line) {
   border-radius: 5px;
   text-decoration: none;
   display: flex;
-  justify-items: center;
   flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: center;
 }
 
 .job-group-section .job-brief-list .job-brief-item .job-brief-rerun {
-  float: right;
-  border: none;
-  background-color: transparent;
-  outline: none;
   cursor: pointer;
+  transition: transform 0.2s;
 }
 
 .job-group-section .job-brief-list .job-brief-item .job-brief-rerun:hover {
-  
+  transform: scale(130%);
 }
 
 .job-group-section .job-brief-list .job-brief-item .job-brief-link {
-  flex-grow: 1;
   display: flex;
+  width: 80%;
 }
 
 .job-group-section .job-brief-list .job-brief-item .job-brief-link span {
@@ -507,11 +523,26 @@ export function ansiLogToHTML(line) {
   align-items: center;
 }
 
+.job-group-section .job-brief-list .job-brief-item .job-brief-link .job-brief-name {
+  display: block;
+  width: 70%;
+}
+
 .job-group-section .job-brief-list .job-brief-item .job-brief-link:hover {
   text-decoration: none;
 }
 
+.job-group-section .job-brief-list .job-brief-item .job-brief-info {
+  display: flex;
+  align-items: center;
+}
+
 .job-group-section .job-brief-list .job-brief-item:hover {
+  background-color: var(--color-secondary-light-2);
+}
+
+.job-group-section .job-brief-list .job-brief-item.selected {
+  font-weight: 600;
   background-color: var(--color-secondary);
 }
 
@@ -521,21 +552,27 @@ export function ansiLogToHTML(line) {
 .action-view-right {
   flex: 1;
   background-color: var(--color-console-bg);
-  color: var(--color-console-fg);
+  color: var(--color-secondary-dark-2);
   max-height: 100%;
-  margin-right: 10px;
+  width: 70%;
   display: flex;
   flex-direction: column;
 }
 
-.job-info-header .job-info-header-title {
-  font-size: 150%;
+.job-info-header {
   padding: 10px;
+  border-bottom: 1px solid var(--color-grey);
+}
+
+.job-info-header .job-info-header-title {
+  color: var(--color-console-fg);
+  font-size: 16px;
+  margin: 0;
 }
 
 .job-info-header .job-info-header-detail {
-  padding: 0 10px 10px;
-  border-bottom: 1px solid var(--color-grey);
+  color: var(--color-secondary-dark-3);
+  font-size: 12px;
 }
 
 .job-step-container {
@@ -547,6 +584,7 @@ export function ansiLogToHTML(line) {
   cursor: pointer;
   padding: 5px 10px;
   display: flex;
+  align-items: center;
 }
 
 .job-step-container .job-step-summary .step-summary-msg {
@@ -557,8 +595,25 @@ export function ansiLogToHTML(line) {
   margin-left: 16px;
 }
 
-.job-step-container .job-step-summary:hover {
+.job-step-container .job-step-summary:hover,
+.job-step-container .job-step-summary.selected {
+  color: var(--color-console-fg);
   background-color: var(--color-black-light);
+  border-radius: 5px;
+}
+
+@media (max-width: 768px) {
+  .action-view-body {
+    flex-direction: column;
+  }
+  .action-view-left, .action-view-right {
+    width: 100%;
+  }
+
+  .action-view-left {
+    max-width: none;
+    overflow-y: visible;
+  }
 }
 </style>
 
@@ -580,12 +635,19 @@ export function ansiLogToHTML(line) {
 
 .job-step-section .job-step-logs {
   font-family: monospace, monospace;
+  margin: 8px 0px;
+  font-size: 12px;
 }
 
 .job-step-section .job-step-logs .job-log-line {
   display: flex;
 }
 
+.job-step-section .job-step-logs .job-log-line:hover {
+  color: var(--color-console-fg);
+  background-color: var(--color-black-light);
+}
+
 .job-step-section .job-step-logs .job-log-line .line-num {
   width: 48px;
   color: var(--color-grey-light);

From 9a39ce04214bbc5ed15aacca8cf5fbc7dcaae011 Mon Sep 17 00:00:00 2001
From: HesterG <hestergong@gmail.com>
Date: Mon, 15 May 2023 07:55:55 +0800
Subject: [PATCH 03/16] update style

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

diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index d0a4925602a47..53d9042cd3728 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -2,10 +2,12 @@
   <div class="ui container action-view-container">
     <div class="action-view-header">
       <div class="action-info-summary">
-        <ActionRunStatus :locale-status="locale.status[run.status]" :status="run.status" :size="20"/>
-        <h2 class="action-title">
-          {{ run.title }}
-        </h2>
+        <div class="action-info-summary-title">
+          <ActionRunStatus :locale-status="locale.status[run.status]" :status="run.status" :size="20"/>
+          <h2 class="action-info-summary-title-text">
+            {{ run.title }}
+          </h2>
+        </div>
         <button class="ui basic small compact button primary" @click="approveRun()" v-if="run.canApprove">
           {{ locale.approve }}
         </button>
@@ -210,7 +212,6 @@ const sfc = {
 
     // show/hide the step logs for a step
     async toggleStepLogs(idx) {
-      console.log(this.currentJobStepsStates[idx]);
       const currentToggledStep = this.currentJobStepsStates[idx];
       currentToggledStep.expanded = !currentToggledStep.expanded;
       if (currentToggledStep.expanded) {
@@ -267,7 +268,6 @@ const sfc = {
     },
 
     appendLogs(stepIndex, logLines) {
-      console.log('append', logLines);
       for (const line of logLines) {
         // TODO: group support: ##[group]GroupTitle , ##[endgroup]
         const el = this.getLogsContainer(stepIndex);
@@ -308,13 +308,13 @@ const sfc = {
         // sync the currentJobStepsStates to store the job step states
         for (let i = 0; i < this.currentJob.steps.length; i++) {
           if (!this.currentJobStepsStates[i]) {
-            console.log('initial syncing')
+            // initial states for job steps
+            // isInitialExpand is used to check if the expand button of a job is clicked for the first time
             this.currentJobStepsStates[i] = {cursor: null, expanded: false, isInitialExpand: true};
           }
         }
         // append logs to the UI
         for (const logs of response.logs.stepsLog) {
-          console.log('logs.cursor', logs.cursor);
           // save the cursor, it will be passed to backend next time
           this.currentJobStepsStates[logs.step].cursor = logs.cursor;
           this.appendLogs(logs.step, logs.lines);
@@ -444,9 +444,14 @@ export function ansiLogToHTML(line) {
   display: flex;
   align-items: center;
   margin-top: 1rem;
+  justify-content: space-between;
+}
+
+.action-info-summary-title {
+  display: flex;
 }
 
-.action-info-summary .action-title {
+.action-info-summary-title-text {
   font-size: 20px;
   margin: 0;
   padding: 0 5px;

From 6334e10d8c05997bb35f3bbdf9c2efe6725223d2 Mon Sep 17 00:00:00 2001
From: HesterG <hestergong@gmail.com>
Date: Mon, 15 May 2023 08:21:54 +0800
Subject: [PATCH 04/16] adjust styles

---
 templates/repo/actions/status.tmpl        |  2 +-
 web_src/js/components/ActionRunStatus.vue |  2 +-
 web_src/js/components/RepoActionView.vue  | 11 ++++++-----
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/templates/repo/actions/status.tmpl b/templates/repo/actions/status.tmpl
index 41a5c6475fb3f..cdc747aa8b0b1 100644
--- a/templates/repo/actions/status.tmpl
+++ b/templates/repo/actions/status.tmpl
@@ -12,7 +12,7 @@
 {{- $className = .className -}}
 {{- end -}}
 
-<span data-tooltip-content="{{.locale.Tr (printf "actions.status.%s" .status)}}">
+<span class="gt-df gt-ac" data-tooltip-content="{{.locale.Tr (printf "actions.status.%s" .status)}}">
 {{if eq .status "success"}}
 	{{svg "octicon-check-circle-fill" $size (printf "text green %s" $className)}}
 {{else if eq .status "skipped"}}
diff --git a/web_src/js/components/ActionRunStatus.vue b/web_src/js/components/ActionRunStatus.vue
index a620c9c946bf8..bddf307a1b10a 100644
--- a/web_src/js/components/ActionRunStatus.vue
+++ b/web_src/js/components/ActionRunStatus.vue
@@ -3,7 +3,7 @@
     action status accepted: success, skipped, waiting, blocked, running, failure, cancelled, unknown
 -->
 <template>
-  <span :data-tooltip-content="localeStatus" v-if="status">
+  <span class="gt-df gt-ac" :data-tooltip-content="localeStatus" v-if="status">
     <SvgIcon name="octicon-check-circle-fill" class="text green" :size="size" :class-name="className" v-if="status === 'success'"/>
     <SvgIcon name="octicon-skip" class="text grey" :size="size" :class-name="className" v-else-if="status === 'skipped'"/>
     <SvgIcon name="octicon-clock" class="text yellow" :size="size" :class-name="className" v-else-if="status === 'waiting'"/>
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 53d9042cd3728..6900c55a4120b 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -21,10 +21,10 @@
       <div class="action-commit-summary">
         {{ run.commit.localeCommit }}
         <a :href="run.commit.link">{{ run.commit.shortSHA }}</a>
-        &nbsp;<span class="ui label" v-if="run.commit.shortSHA">
+        <span class="ui label" v-if="run.commit.shortSHA">
           <a :href="run.commit.branch.link">{{ run.commit.branch.name }}</a>
         </span>
-        &nbsp;{{ run.commit.localePushedBy }}
+        {{ run.commit.localePushedBy }}
         <a :href="run.commit.pusher.link">{{ run.commit.pusher.displayName }}</a>
       </div>
     </div>
@@ -453,13 +453,14 @@ export function ansiLogToHTML(line) {
 
 .action-info-summary-title-text {
   font-size: 20px;
-  margin: 0;
-  padding: 0 5px;
+  margin: 0 0 0 5px;
   flex: 1;
 }
 
 .action-commit-summary {
-  padding: 10px;
+  display: flex;
+  gap: 5px;
+  margin: 10px 0px 10px 25px;
 }
 
 /* ================ */

From f78b8327e5406ea028da68ab618bbc7d1ce53e3c Mon Sep 17 00:00:00 2001
From: HesterG <hestergong@gmail.com>
Date: Mon, 15 May 2023 08:26:15 +0800
Subject: [PATCH 05/16] adjust margin

---
 web_src/js/components/RepoActionView.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 6900c55a4120b..ba8bf78341351 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -510,6 +510,10 @@ export function ansiLogToHTML(line) {
   align-items: center;
 }
 
+.job-group-section .job-brief-list .job-brief-item:first-of-type {
+  margin-top: 0;
+}
+
 .job-group-section .job-brief-list .job-brief-item .job-brief-rerun {
   cursor: pointer;
   transition: transform 0.2s;

From 47edf604830141bf79740cd1a7fb84ff0c71f445 Mon Sep 17 00:00:00 2001
From: HesterG <hestergong@gmail.com>
Date: Mon, 15 May 2023 08:49:45 +0800
Subject: [PATCH 06/16] fix

---
 web_src/js/components/RepoActionView.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index ba8bf78341351..341d36119f48d 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -32,7 +32,7 @@
       <div class="action-view-left">
         <div class="job-group-section">
           <div class="job-brief-list">
-            <div class="job-brief-item" :class="parseInt(jobIndex) === index ? 'selected' : ''" v-for="(job, index) in run.jobs" :key="job.id" @mouseenter="onHoverRerunIndex = job.id"  @mouseleave="onHoverRerunIndex = -1">
+            <div class="job-brief-item" :class="parseInt(jobIndex) === index ? 'selected' : ''" v-for="(job, index) in run.jobs" :key="job.id" @mouseenter="onHoverRerunIndex = job.id" @mouseleave="onHoverRerunIndex = -1">
               <a class="job-brief-link" :href="run.link+'/jobs/'+index">
                 <ActionRunStatus :locale-status="locale.status[job.status]" :status="job.status"/>
                 <span class="job-brief-name gt-mx-3 gt-ellipsis">{{ job.name }}</span>
@@ -215,7 +215,7 @@ const sfc = {
       const currentToggledStep = this.currentJobStepsStates[idx];
       currentToggledStep.expanded = !currentToggledStep.expanded;
       if (currentToggledStep.expanded) {
-        // If the job is done and the job step is expanded for the first time,
+        // If the job is done and the job step log is expanded for the first time,
         // wait for fetching job and show the loading icon
         if (this.isDone(this.run.status) && currentToggledStep.isInitialExpand) {
           currentToggledStep.isInitialExpand = false;
@@ -595,6 +595,7 @@ export function ansiLogToHTML(line) {
   padding: 5px 10px;
   display: flex;
   align-items: center;
+  user-select: none;
 }
 
 .job-step-container .job-step-summary .step-summary-msg {

From 4f442ad62fec3720c832cceed0c4d9438ad3e2c6 Mon Sep 17 00:00:00 2001
From: HesterG <hestergong@gmail.com>
Date: Mon, 15 May 2023 09:10:20 +0800
Subject: [PATCH 07/16] adjust scroll

---
 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 341d36119f48d..00d702fa46eeb 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -623,7 +623,7 @@ export function ansiLogToHTML(line) {
 
   .action-view-left {
     max-width: none;
-    overflow-y: visible;
+    overflow-y: hidden;
   }
 }
 </style>

From f515e3570e07f986e5364d76c1091107d574d498 Mon Sep 17 00:00:00 2001
From: HesterG <hestergong@gmail.com>
Date: Mon, 15 May 2023 09:45:10 +0800
Subject: [PATCH 08/16] adjust for arc green

---
 web_src/js/components/RepoActionView.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 00d702fa46eeb..bace2c1047db0 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -536,6 +536,7 @@ export function ansiLogToHTML(line) {
 .job-group-section .job-brief-list .job-brief-item .job-brief-link .job-brief-name {
   display: block;
   width: 70%;
+  color: var(--color-text);
 }
 
 .job-group-section .job-brief-list .job-brief-item .job-brief-link:hover {
@@ -548,12 +549,12 @@ export function ansiLogToHTML(line) {
 }
 
 .job-group-section .job-brief-list .job-brief-item:hover {
-  background-color: var(--color-secondary-light-2);
+  background-color: var(--color-secondary);
 }
 
 .job-group-section .job-brief-list .job-brief-item.selected {
   font-weight: 600;
-  background-color: var(--color-secondary);
+  background-color: var(--color-secondary-dark-1);
 }
 
 /* ================ */

From 232bed8d568242f804c182ec5c27d9f3b2d0d9f4 Mon Sep 17 00:00:00 2001
From: HesterG <hestergong@gmail.com>
Date: Mon, 15 May 2023 10:26:58 +0800
Subject: [PATCH 09/16] adjust rerun

---
 web_src/js/components/RepoActionView.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index bace2c1047db0..9fa07940dae09 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -37,8 +37,8 @@
                 <ActionRunStatus :locale-status="locale.status[job.status]" :status="job.status"/>
                 <span class="job-brief-name gt-mx-3 gt-ellipsis">{{ job.name }}</span>
               </a>
-              <span class="job-brief-info" :data-tooltip-content="locale.rerun" >
-                <SvgIcon name="octicon-sync" class="job-brief-rerun gt-mx-3" @click="rerunJob(index)" v-show="job.canRerun && onHoverRerunIndex === job.id"/>
+              <span class="job-brief-info">
+                <SvgIcon name="octicon-sync" :data-tooltip-content="locale.rerun" class="job-brief-rerun gt-mx-3" @click="rerunJob(index)" v-show="job.canRerun && onHoverRerunIndex === job.id"/>
                 <span class="step-summary-duration">{{ job.duration }}</span>
               </span>
             </div>

From 8a870d87b86c245e1bbc0ca02fca75627b89b192 Mon Sep 17 00:00:00 2001
From: HesterG <hestergong@gmail.com>
Date: Mon, 15 May 2023 10:29:51 +0800
Subject: [PATCH 10/16] add role

---
 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 9fa07940dae09..919ee052e8cb1 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -38,7 +38,7 @@
                 <span class="job-brief-name gt-mx-3 gt-ellipsis">{{ job.name }}</span>
               </a>
               <span class="job-brief-info">
-                <SvgIcon name="octicon-sync" :data-tooltip-content="locale.rerun" class="job-brief-rerun gt-mx-3" @click="rerunJob(index)" v-show="job.canRerun && onHoverRerunIndex === job.id"/>
+                <SvgIcon name="octicon-sync" role="button" :data-tooltip-content="locale.rerun" class="job-brief-rerun gt-mx-3" @click="rerunJob(index)" v-show="job.canRerun && onHoverRerunIndex === job.id"/>
                 <span class="step-summary-duration">{{ job.duration }}</span>
               </span>
             </div>

From 9cb99428b9860a4c55d7e51d3884d735244fc007 Mon Sep 17 00:00:00 2001
From: HesterG <hestergong@gmail.com>
Date: Mon, 15 May 2023 10:45:36 +0800
Subject: [PATCH 11/16] improve

---
 web_src/js/components/RepoActionView.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 919ee052e8cb1..56f2849000b04 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -525,9 +525,14 @@ export function ansiLogToHTML(line) {
 
 .job-group-section .job-brief-list .job-brief-item .job-brief-link {
   display: flex;
-  width: 80%;
+  width: 100%;
 }
 
+@media (max-width: 992px) {
+  .job-group-section .job-brief-list .job-brief-item .job-brief-link {
+    width: 80%;
+  }
+}
 .job-group-section .job-brief-list .job-brief-item .job-brief-link span {
   display: flex;
   align-items: center;

From 75976271d68779977d6ef058ebdf54154bc7e726 Mon Sep 17 00:00:00 2001
From: HesterG <hestergong@gmail.com>
Date: Mon, 15 May 2023 15:45:14 +0800
Subject: [PATCH 12/16] simplify logic

---
 web_src/js/components/RepoActionView.vue | 26 ++++++++----------------
 1 file changed, 9 insertions(+), 17 deletions(-)

diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 56f2849000b04..797a7308afdf8 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -70,7 +70,10 @@
         <div class="job-step-container">
           <div class="job-step-section" v-for="(jobStep, i) in currentJob.steps" :key="i">
             <div class="job-step-summary" @click.stop="toggleStepLogs(i)" :class="currentJobStepsStates[i].expanded ? 'selected' : ''">
-              <SvgIcon v-if="currentJobStepsStates[i].isLoading" name="octicon-sync" class="gt-mr-3 job-status-rotate"/>
+              <!-- If the job is done and the job step log is loaded for the first time, show the loading icon
+                currentJobStepsStates[i].cursor === null means the log is loaded for the first time
+              -->
+              <SvgIcon v-if="isDone(run.status) && currentJobStepsStates[i].expanded && currentJobStepsStates[i].cursor === null" name="octicon-sync" class="gt-mr-3 job-status-rotate"/>
               <SvgIcon v-else :name="currentJobStepsStates[i].expanded ? 'octicon-chevron-down': 'octicon-chevron-right'" class="gt-mr-3"/>
               <ActionRunStatus :status="jobStep.status" class="gt-mr-3"/>
 
@@ -211,20 +214,10 @@ const sfc = {
     },
 
     // show/hide the step logs for a step
-    async toggleStepLogs(idx) {
-      const currentToggledStep = this.currentJobStepsStates[idx];
-      currentToggledStep.expanded = !currentToggledStep.expanded;
-      if (currentToggledStep.expanded) {
-        // If the job is done and the job step log is expanded for the first time,
-        // wait for fetching job and show the loading icon
-        if (this.isDone(this.run.status) && currentToggledStep.isInitialExpand) {
-          currentToggledStep.isInitialExpand = false;
-          currentToggledStep.isLoading = true;
-          await this.loadJob();
-          currentToggledStep.isLoading = false;
-        } else {
-          this.loadJob(); // try to load the data immediately instead of waiting for next timer interval
-        }
+    toggleStepLogs(idx) {
+      this.currentJobStepsStates[idx].expanded = !this.currentJobStepsStates[idx].expanded;
+      if (this.currentJobStepsStates[idx].expanded) {
+        this.loadJob(); // try to load the data immediately instead of waiting for next timer interval
       }
     },
     // rerun a job
@@ -309,8 +302,7 @@ const sfc = {
         for (let i = 0; i < this.currentJob.steps.length; i++) {
           if (!this.currentJobStepsStates[i]) {
             // initial states for job steps
-            // isInitialExpand is used to check if the expand button of a job is clicked for the first time
-            this.currentJobStepsStates[i] = {cursor: null, expanded: false, isInitialExpand: true};
+            this.currentJobStepsStates[i] = {cursor: null, expanded: false};
           }
         }
         // append logs to the UI

From 197a91154979798df53d75cb7a9a017e64b978bb Mon Sep 17 00:00:00 2001
From: Hester Gong <hestergong@gmail.com>
Date: Mon, 15 May 2023 17:27:08 +0800
Subject: [PATCH 13/16] Update options/locale/locale_en-US.ini

Co-authored-by: silverwind <me@silverwind.io>
---
 options/locale/locale_en-US.ini | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index 250186510155d..6bccff2d497f4 100644
--- a/options/locale/locale_en-US.ini
+++ b/options/locale/locale_en-US.ini
@@ -80,7 +80,7 @@ milestones = Milestones
 ok = OK
 cancel = Cancel
 rerun = Re-run
-rerun_all = Re-run All Jobs
+rerun_all = Re-run all jobs
 save = Save
 add = Add
 add_all = Add All

From 2b3a47e8717924677e460bb9f2e6d0c44bd0d995 Mon Sep 17 00:00:00 2001
From: Hester Gong <hestergong@gmail.com>
Date: Tue, 16 May 2023 11:11:04 +0800
Subject: [PATCH 14/16] Update web_src/js/components/RepoActionView.vue

Co-authored-by: silverwind <me@silverwind.io>
---
 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 797a7308afdf8..8db7030016309 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -550,7 +550,7 @@ export function ansiLogToHTML(line) {
 }
 
 .job-group-section .job-brief-list .job-brief-item.selected {
-  font-weight: 600;
+  font-weight: var(--font-weight-bold);
   background-color: var(--color-secondary-dark-1);
 }
 

From 5a7659fc1e5ede0eed7783878fe641ff57267927 Mon Sep 17 00:00:00 2001
From: HesterG <hestergong@gmail.com>
Date: Tue, 16 May 2023 11:45:47 +0800
Subject: [PATCH 15/16] updates

---
 web_src/css/base.css                     |  1 +
 web_src/js/components/RepoActionView.vue | 30 ++++++++++--------------
 2 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/web_src/css/base.css b/web_src/css/base.css
index eb12ffef7a6c2..4b9f1eef22498 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -71,6 +71,7 @@
   /* console colors */
   --color-console-fg: #ffffff;
   --color-console-bg: #171717;
+  --color-console-hover-bg: #ffffff16;
   /* named colors */
   --color-red: #db2828;
   --color-orange: #f2711c;
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 8db7030016309..b180b31ac3d16 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -38,8 +38,8 @@
                 <span class="job-brief-name gt-mx-3 gt-ellipsis">{{ job.name }}</span>
               </a>
               <span class="job-brief-info">
-                <SvgIcon name="octicon-sync" role="button" :data-tooltip-content="locale.rerun" class="job-brief-rerun gt-mx-3" @click="rerunJob(index)" v-show="job.canRerun && onHoverRerunIndex === job.id"/>
                 <span class="step-summary-duration">{{ job.duration }}</span>
+                <SvgIcon name="octicon-sync" role="button" :data-tooltip-content="locale.rerun" class="job-brief-rerun gt-mx-3" @click="rerunJob(index)" v-show="job.canRerun && onHoverRerunIndex === job.id"/>
               </span>
             </div>
           </div>
@@ -490,7 +490,7 @@ export function ansiLogToHTML(line) {
   padding-right: 3px;
 }
 
-.job-group-section .job-brief-list .job-brief-item {
+.job-brief-item {
   margin: 5px 0;
   padding: 10px;
   background: var(--color-info-bg);
@@ -502,50 +502,46 @@ export function ansiLogToHTML(line) {
   align-items: center;
 }
 
-.job-group-section .job-brief-list .job-brief-item:first-of-type {
+.job-brief-item:first-of-type {
   margin-top: 0;
 }
 
-.job-group-section .job-brief-list .job-brief-item .job-brief-rerun {
+.job-brief-item .job-brief-rerun {
   cursor: pointer;
   transition: transform 0.2s;
 }
 
-.job-group-section .job-brief-list .job-brief-item .job-brief-rerun:hover {
+.job-brief-item .job-brief-rerun:hover {
   transform: scale(130%);
 }
 
-.job-group-section .job-brief-list .job-brief-item .job-brief-link {
+.job-brief-item .job-brief-link {
   display: flex;
   width: 100%;
 }
 
-@media (max-width: 992px) {
-  .job-group-section .job-brief-list .job-brief-item .job-brief-link {
-    width: 80%;
-  }
-}
-.job-group-section .job-brief-list .job-brief-item .job-brief-link span {
+.job-brief-item .job-brief-link span {
   display: flex;
   align-items: center;
 }
 
-.job-group-section .job-brief-list .job-brief-item .job-brief-link .job-brief-name {
+.job-brief-item .job-brief-link .job-brief-name {
   display: block;
   width: 70%;
   color: var(--color-text);
 }
 
-.job-group-section .job-brief-list .job-brief-item .job-brief-link:hover {
+.job-brief-item .job-brief-link:hover {
   text-decoration: none;
 }
 
-.job-group-section .job-brief-list .job-brief-item .job-brief-info {
+.job-brief-item .job-brief-info {
   display: flex;
   align-items: center;
+  width: 55px;
 }
 
-.job-group-section .job-brief-list .job-brief-item:hover {
+.job-brief-item:hover {
   background-color: var(--color-secondary);
 }
 
@@ -654,7 +650,7 @@ export function ansiLogToHTML(line) {
 
 .job-step-section .job-step-logs .job-log-line:hover {
   color: var(--color-console-fg);
-  background-color: var(--color-black-light);
+  background-color: var(--color-console-hover-bg);
 }
 
 .job-step-section .job-step-logs .job-log-line .line-num {

From 49048560997c74176c85cd05f82ebe780eceab40 Mon Sep 17 00:00:00 2001
From: HesterG <hestergong@gmail.com>
Date: Wed, 17 May 2023 09:07:46 +0800
Subject: [PATCH 16/16] use v-if and change names

---
 web_src/js/components/RepoActionView.vue | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index b180b31ac3d16..b2fd63dd18e9e 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -39,7 +39,7 @@
               </a>
               <span class="job-brief-info">
                 <span class="step-summary-duration">{{ job.duration }}</span>
-                <SvgIcon name="octicon-sync" role="button" :data-tooltip-content="locale.rerun" class="job-brief-rerun gt-mx-3" @click="rerunJob(index)" v-show="job.canRerun && onHoverRerunIndex === job.id"/>
+                <SvgIcon name="octicon-sync" role="button" :data-tooltip-content="locale.rerun" class="job-brief-rerun gt-mx-3" @click="rerunJob(index)" v-if="job.canRerun && onHoverRerunIndex === job.id"/>
               </span>
             </div>
           </div>
@@ -502,6 +502,15 @@ export function ansiLogToHTML(line) {
   align-items: center;
 }
 
+.job-brief-item:hover {
+  background-color: var(--color-secondary);
+}
+
+.job-brief-item.selected {
+  font-weight: var(--font-weight-bold);
+  background-color: var(--color-secondary-dark-1);
+}
+
 .job-brief-item:first-of-type {
   margin-top: 0;
 }
@@ -541,15 +550,6 @@ export function ansiLogToHTML(line) {
   width: 55px;
 }
 
-.job-brief-item:hover {
-  background-color: var(--color-secondary);
-}
-
-.job-group-section .job-brief-list .job-brief-item.selected {
-  font-weight: var(--font-weight-bold);
-  background-color: var(--color-secondary-dark-1);
-}
-
 /* ================ */
 /* action view right */