Initial

client/src/views/JobOutputView.vue

@@ -82,7 +82,15 @@
             </select>
           </label>
         </template>
-        <template #cell-jobStatus="{ row }"><span :class="['status-pill', row.jobStatus]">{{ row.jobStatus }}</span></template>
+        <template #cell-outputStatus="{ row }">
+          <span :class="['status-pill', row.outputStatus]">{{ row.outputStatus }}</span>
+        </template>
+        <template #cell-outcome="{ row }">
+          <div class="job-output-outcome">
+            <strong>{{ row.hostSuccessCount }}/{{ row.hostTotalCount || 0 }}</strong>
+            <small>{{ row.hostFailedCount }} failed</small>
+          </div>
+        </template>
         <template #cell-latestAt="{ row }">{{ shortDate(row.latestAt) }}</template>
         <template #cell-actions="{ row }">
           <div class="job-output-row-actions">
@@ -118,7 +126,8 @@ const filters = reactive({ search: '', kind: '', page: 1, pageSize: 8, sort: 'la
 const columns = [
   { key: 'name', label: 'Job' },
   { key: 'kind', label: 'Artifact' },
-  { key: 'jobStatus', label: 'Status' },
+  { key: 'outputStatus', label: 'Status' },
+  { key: 'outcome', label: 'Success', sortable: false },
   { key: 'latestAt', label: 'Generated' },
   { key: 'actions', label: 'Actions', sortable: false }
 ];
@@ -140,6 +149,12 @@ const groupedOutputs = computed(() => {
         scriptName: output.scriptName || '',
         runplanName: output.runplanName || '',
         jobStatus: output.jobStatus || '',
+        outputStatus: output.outputStatus || output.jobStatus || '',
+        hostTotalCount: output.hostTotalCount || 0,
+        hostSuccessCount: output.hostSuccessCount || 0,
+        hostFailedCount: output.hostFailedCount || 0,
+        hostSkippedCount: output.hostSkippedCount || 0,
+        hostCanceledCount: output.hostCanceledCount || 0,
         latestAt: output.updatedAt || output.createdAt || '',
         createdAt: output.createdAt || '',
         artifacts: []
@@ -149,6 +164,12 @@ const groupedOutputs = computed(() => {
     group.artifacts.push(output);
     if (String(output.updatedAt || output.createdAt || '') > String(group.latestAt || '')) group.latestAt = output.updatedAt || output.createdAt;
     if (!group.jobStatus && output.jobStatus) group.jobStatus = output.jobStatus;
+    if (output.outputStatus) group.outputStatus = output.outputStatus;
+    group.hostTotalCount = Math.max(group.hostTotalCount || 0, output.hostTotalCount || 0);
+    group.hostSuccessCount = Math.max(group.hostSuccessCount || 0, output.hostSuccessCount || 0);
+    group.hostFailedCount = Math.max(group.hostFailedCount || 0, output.hostFailedCount || 0);
+    group.hostSkippedCount = Math.max(group.hostSkippedCount || 0, output.hostSkippedCount || 0);
+    group.hostCanceledCount = Math.max(group.hostCanceledCount || 0, output.hostCanceledCount || 0);
   }
   return [...groups.values()].map((group) => ({
     ...group,
@@ -164,6 +185,8 @@ const filteredGroups = computed(() => {
       group.title,
       group.subtitle,
       group.jobStatus,
+      group.outputStatus,
+      `${group.hostSuccessCount}/${group.hostTotalCount}`,
       group.runplanName,
       group.scriptName,
       group.jobId,
@@ -205,6 +228,7 @@ function sortableValue(row, key) {
   if (key === 'kind') return kindLabel(selectedArtifact(row)?.kind || '');
   if (key === 'name') return row.title || '';
   if (key === 'updatedAt') return row.latestAt || '';
+  if (key === 'outputStatus') return row.outputStatus || row.jobStatus || '';
   return String(row[key] ?? '').toLowerCase();
 }
 
@@ -381,27 +405,32 @@ function formatBytes(bytes = 0) {
 
 .job-output-list :deep(th:nth-child(1)),
 .job-output-list :deep(td:nth-child(1)) {
-  width: 34%;
+  width: 30%;
 }
 
 .job-output-list :deep(th:nth-child(2)),
 .job-output-list :deep(td:nth-child(2)) {
-  width: 24%;
+  width: 22%;
 }
 
 .job-output-list :deep(th:nth-child(3)),
 .job-output-list :deep(td:nth-child(3)) {
-  width: 12%;
+  width: 11%;
 }
 
 .job-output-list :deep(th:nth-child(4)),
 .job-output-list :deep(td:nth-child(4)) {
-  width: 16%;
+  width: 10%;
+}
+
+.job-output-list :deep(th:nth-child(5)),
+.job-output-list :deep(td:nth-child(5)) {
+  width: 14%;
 }
 
 .job-output-list :deep(th:last-child),
 .job-output-list :deep(td:last-child) {
-  width: 14%;
+  width: 13%;
 }
 
 .job-output-title {
@@ -458,6 +487,26 @@ function formatBytes(bytes = 0) {
   font-weight: 800;
 }
 
+.job-output-outcome {
+  display: inline-grid;
+  gap: 2px;
+  min-width: 64px;
+}
+
+.job-output-outcome strong {
+  color: #d8ffe8;
+  font-size: 13px;
+  font-weight: 900;
+}
+
+.job-output-outcome small {
+  color: rgba(247, 154, 167, .82);
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: .02em;
+  white-space: nowrap;
+}
+
 .status-dot {
   position: absolute;
   left: 13px;