Add run status in action view page (#24223)

Backport #23212

Author: yp05327

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,

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: [