feat: Action status display on logs list

frontend/resources/vue/components/ActionStatusDisplay.vue

@@ -1,7 +1,7 @@
 <template>
-    <span>
+    <div :class = "statusClass + ' annotation'">
-        <span :class="['action-status', statusClass]">{{ statusText }}</span><span>{{ exitCodeText }}</span>
+        <span>{{ statusText }}</span><span>{{ exitCodeText }}</span>
-    </span>
+    </div>
 
 </template>
 
@@ -35,11 +35,14 @@ const statusText = computed(() => {
 const exitCodeText = computed(() => {
     const logEntry = props.logEntry
     if (!logEntry) return ''
+    if (logEntry.exitCode === 0) {
+        return ''
+    }
     if (logEntry.executionFinished) {
         if (logEntry.blocked || logEntry.timedOut) {
             return ''
         }
-        return ' Exit code: ' + logEntry.exitCode
+        return ' (Exit code: ' + logEntry.exitCode + ')'
     }
     return ''
 })
@@ -49,15 +52,35 @@ const statusClass = computed(() => {
     if (!logEntry) return ''
     if (logEntry.executionFinished) {
         if (logEntry.blocked) {
-            return 'action-blocked'
+            return 'status-blocked'
         } else if (logEntry.timedOut) {
-            return 'action-timeout'
+            return 'status-timeout'
         } else if (logEntry.exitCode === 0) {
-            return 'action-success'
+            return 'status-success'
         } else {
-            return 'action-nonzero-exit'
+            return 'status-nonzero-exit'
         }
     }
     return ''
 })
 </script>
+
+<style scoped>
+.status-success {
+  color: var(--karma-good-fg);
+}
+
+.status-nonzero-exit {
+  color: var(--karma-bad-fg);
+}
+
+.status-timeout {
+  color: var(--karma-warning-fg);
+}
+
+.status-blocked {
+  color: #ca79ff;
+}
+
+
+</style>

frontend/resources/vue/views/LogsListView.vue

@@ -46,9 +46,7 @@
                 </span>
               </td>
               <td class="exit-code">
-                <span :class="getStatusClass(log) + ' annotation'">
+                <ActionStatusDisplay :logEntry="log" />
-                  {{ getStatusText(log) }}
-                </span>
               </td>
             </tr>
           </tbody>
@@ -70,6 +68,7 @@ import { ref, computed, onMounted } from 'vue'
 import Pagination from 'picocrank/vue/components/Pagination.vue'
 import Section from 'picocrank/vue/components/Section.vue'
 import { useI18n } from 'vue-i18n'
+import ActionStatusDisplay from '../components/ActionStatusDisplay.vue'
 
 const logs = ref([])
 const searchText = ref('')
@@ -134,20 +133,6 @@ function formatTimestamp(timestamp) {
   }
 }
 
-function getStatusClass(log) {
-  if (log.timedOut) return 'status-timeout'
-  if (log.blocked) return 'status-blocked'
-  if (log.exitCode !== 0) return 'status-error'
-  return 'status-success'
-}
-
-function getStatusText(log) {
-  if (log.timedOut) return t('logs.timed-out')
-  if (log.blocked) return t('logs.blocked')
-  if (log.exitCode !== 0) return `${t('logs.exit-code')} ${log.exitCode}`
-  return t('logs.completed')
-}
-
 function handlePageChange(page) {
   currentPage.value = page
   fetchLogs()
@@ -227,22 +212,6 @@ onMounted(() => {
   font-size: smaller;
 }
 
-.status-success {
-  color: var(--karma-good-fg);
-}
-
-.status-error {
-  color: var(--karma-bad-fg);
-}
-
-.status-timeout {
-  color: var(--karma-warning-fg);
-}
-
-.status-blocked {
-  color: var(--karma-neutral-fg);
-}
-
 .empty-state {
   text-align: center;
   padding: 2rem;