feat: show job status icons on pipeline details page

frontend/src/components/JobStatusIconLink.vue

@@ -0,0 +1,39 @@
+<template>
+  <router-link
+    style="text-decoration: none; color: inherit;"
+    :to="{ path: `/jobs/${jobId}` }">
+    <v-icon v-if="status === 'success'" color="green" size="large">
+      mdi:mdi-check-circle-outline
+    </v-icon>
+    <v-icon v-else-if="status === 'failed'" color="red" size="large">
+      mdi:mdi-close-circle-outline
+    </v-icon>
+    <v-icon v-else-if="status === 'running'" color="blue" size="large">
+      mdi:mdi-circle-slice-5
+    </v-icon>
+    <v-icon v-else-if="status === 'error'" color="red" size="large">
+      mdi:mdi-alert-circle-outline
+    </v-icon>
+    <v-icon v-else color="grey" size="large">
+      mdi:mdi-circle-slice-8
+    </v-icon>
+    <v-tooltip activator="parent" location="bottom">
+      <template v-if="arch">
+        Job #{{ jobId }} for {{ arch }}: {{ status }}
+      </template>
+      <template v-else>
+        Job #{{ jobId }}: {{ status }}
+      </template>
+    </v-tooltip>
+  </router-link>
+</template>
+
+<script lang="ts" setup>
+  interface Props {
+    jobId: number;
+    status: string;
+    arch: string;
+  }
+
+  defineProps<Props>();
+</script>

frontend/src/pages/pipelines/[id].vue

@@ -22,15 +22,21 @@
         <div v-if="pipeline.github_pr !== null && pipeline.github_pr !== undefined">
           GitHub PR: <a :href="`https://github.com/AOSC-Dev/aosc-os-abbs/pull/${pipeline.github_pr}`">
             {{ pipeline.github_pr }}
-          </a> 
+          </a>
           <br/>
         </div>
-        Jobs: <div v-for="job in pipeline.jobs" :key="job.job_id">
-          Job
-          <router-link :to="{ path: `/jobs/${job.job_id}` }">
-            #{{ job.job_id }}
-          </router-link>
-          for {{ job.arch }}
+        Jobs:
+        <div v-for="job in pipeline.jobs" :key="job.job_id">
+          <div class="d-inline-flex align-center ga-2">
+            <JobStatusIconLink :job-id="job.job_id" :status="job.status" :arch="job.arch" />
+            <span>
+              Job
+              <router-link :to="{ path: `/jobs/${job.job_id}` }">
+                #{{ job.job_id }}
+              </router-link>
+              for {{ job.arch }}
+            </span>
+          </div>
         </div>
       </v-card-text>
     </v-card>
@@ -44,10 +50,12 @@
 <script lang="ts">
   import axios from 'axios';
   import { hostname } from '@/common';
+  import JobStatusIconLink from '@/components/JobStatusIconLink.vue';
 
   interface PipelineInfoResponseJob {
     job_id: number;
     arch: string;
+    status: string;
   }
 
   interface PipelineInfoResponse {
@@ -76,4 +84,4 @@
       }
     }
   }
-</script>
+</script>

frontend/src/pages/pipelines/index.vue

@@ -162,30 +162,8 @@
           </template>
           <template #item.jobs="{ item }">
             <div class="d-inline-flex">
-              <div v-for="job in (item as Pipeline).jobs" :link="job.job_id">
-                <!-- https://stackoverflow.com/questions/44808474/vue-router-how-to-remove-underline-from-router-link -->
-                <router-link
-                  style="text-decoration: none; color: inherit;"
-                  :to="{ path: `/jobs/${(job as Job).job_id}` }">
-                  <v-icon v-if="(job as Job).status === 'success'" color="green" size="large">
-                    mdi:mdi-check-circle-outline
-                  </v-icon>
-                  <v-icon v-else-if="(job as Job).status === 'failed'" color="red" size="large">
-                    mdi:mdi-close-circle-outline
-                  </v-icon>
-                  <v-icon v-else-if="(job as Job).status === 'running'" color="blue" size="large">
-                    mdi:mdi-circle-slice-5
-                  </v-icon>
-                  <v-icon v-else-if="(job as Job).status === 'error'" color="red" size="large">
-                    mdi:mdi-alert-circle-outline
-                  </v-icon>
-                  <v-icon v-else-if="(job as Job).status === 'created'" color="grey" size="large">
-                    mdi:mdi-circle-slice-8
-                  </v-icon>
-                  <v-tooltip activator="parent" location="bottom">
-                    Job #{{ (job as Job).job_id }} for {{ (job as Job).arch }}: {{ (job as Job).status }}
-                  </v-tooltip>
-                </router-link>
+              <div v-for="job in (item as Pipeline).jobs" :link="job.job_id" :key="job.job_id">
+                <JobStatusIconLink :job-id="job.job_id" :status="job.status" :arch="job.arch" />
               </div>
             </div>
           </template>
@@ -202,6 +180,7 @@
 <script lang="ts">
   import axios from 'axios';
   import { hostname } from '@/common';
+  import JobStatusIconLink from '@/components/JobStatusIconLink.vue';
   import TimeAgo from 'javascript-time-ago'
   import en from 'javascript-time-ago/locale/en'
 

server/src/routes/pipeline.rs

@@ -74,6 +74,7 @@ pub struct PipelineInfoRequest {
 pub struct PipelineInfoResponseJob {
     job_id: i32,
     arch: String,
+    status: String,
 }
 
 #[derive(Serialize)]
@@ -113,6 +114,7 @@ pub async fn pipeline_info(
                 .map(|job| PipelineInfoResponseJob {
                     job_id: job.id,
                     arch: job.arch,
+                    status: job.status,
                 })
                 .collect();