From 95c2cb4b79bff04d11ad13933a8561026a42a2eb Mon Sep 17 00:00:00 2001
From: yp05327 <576951401@qq.com>
Date: Thu, 20 Apr 2023 16:24:50 +0900
Subject: [PATCH] Add run status in action view page (#24223)

Backport #23212
---
 routers/web/repo/actions/view.go         | 2 ++
 web_src/js/components/RepoActionView.vue | 9 ++++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/routers/web/repo/actions/view.go b/routers/web/repo/actions/view.go
index 8a208a1113..2cc7249877 100644
--- a/routers/web/repo/actions/view.go
+++ b/routers/web/repo/actions/view.go
@@ -51,6 +51,7 @@ type ViewResponse struct {
 		Run struct {
 			Link      string     `json:"link"`
 			Title     string     `json:"title"`
+			Status    string     `json:"status"`
 			CanCancel bool       `json:"canCancel"`
 			Done      bool       `json:"done"`
 			Jobs      []*ViewJob `json:"jobs"`
@@ -109,6 +110,7 @@ func ViewPost(ctx *context_module.Context) {
 	resp.State.Run.CanCancel = !run.Status.IsDone() && ctx.Repo.CanWrite(unit.TypeActions)
 	resp.State.Run.Done = run.Status.IsDone()
 	resp.State.Run.Jobs = make([]*ViewJob, 0, len(jobs)) // marshal to '[]' instead fo 'null' in json
+	resp.State.Run.Status = run.Status.String()
 	for _, v := range jobs {
 		resp.State.Run.Jobs = append(resp.State.Run.Jobs, &ViewJob{
 			ID:       v.ID,
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 371e549e4e..4d3a019c9c 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -2,7 +2,13 @@
   <div class="action-view-container">
     <div class="action-view-header">
       <div class="action-info-summary">
-        {{ run.title }}
+        <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/>
+        <div class="action-title">
+          {{ run.title }}
+        </div>
         <button class="run_cancel" @click="cancelRun()" v-if="run.canCancel">
           <i class="stop circle outline icon"/>
         </button>
@@ -95,6 +101,7 @@ const sfc = {
       run: {
         link: '',
         title: '',
+        status: '',
         canCancel: false,
         done: false,
         jobs: [