Show run detail action on flow rows

Author: durable-workflow-ops

app/Http/Controllers/WorkflowsController.php

@@ -628,10 +628,31 @@ private function listItemView(WorkflowRunSummary $summary): array
         $item['history_budget_indicator'] = $this->historyBudgetIndicator($item);
         $item = CompatibilitySemantics::annotateListItem($item);
         $item['actionability'] = ActionabilityContract::annotateRun($item)['actionability'];
+        $item['detail_action'] = $this->detailAction($item);
 
         return $item;
     }
 
+    /**
+     * @param array<string, mixed> $item
+     * @return array<string, mixed>
+     */
+    private function detailAction(array $item): array
+    {
+        $historyEventCount = $this->intValue($item['history_event_count'] ?? null);
+        $hasTypedHistory = $historyEventCount !== null && $historyEventCount > 0;
+
+        return [
+            'label' => 'Run Detail',
+            'available' => true,
+            'history_available' => $hasTypedHistory,
+            'unavailable_label' => $hasTypedHistory ? null : 'No typed history',
+            'description' => $hasTypedHistory
+                ? 'Open the selected run detail, including history, tasks, commands, activities, metadata, and timeline data.'
+                : 'Open the selected run detail. This row has no typed history events, so history-specific diagnostics may be unavailable.',
+        ];
+    }
+
     /**
      * @param array<string, mixed> $item
      * @return array<string, mixed>

public/app.js

@@ -1,5 +1,5 @@
 {
-    "/app.js": "/app.js?id=9fa8a41ec214053e2b1281a730b0d187",
+    "/app.js": "/app.js?id=636e2d282c73577fb3b6664300d489e3",
     "/app-dark.css": "/app-dark.css?id=64d24ee96944ffdb4b26a9be1658c1e3",
     "/app.css": "/app.css?id=d525454610dfd3c5a581fc49676f8a37",
     "/img/favicon.png": "/img/favicon.png?id=7c006241b093796d6abfa3049df93a59",

public/mix-manifest.json

@@ -74,6 +74,24 @@
         <td v-if="isTerminalCollection() && columnEnabled('duration')" class="table-fit">
             <span>{{ duration(flow.started_at || flow.created_at, flow.closed_at || flow.updated_at) }}</span>
         </td>
+
+        <td v-if="columnEnabled('actions')" class="table-fit text-right">
+            <router-link
+                class="btn btn-outline-secondary btn-sm"
+                :title="detailActionTitle(flow)"
+                :to="detailRoute(flow)"
+            >
+                {{ detailActionLabel(flow) }}
+            </router-link>
+
+            <div
+                v-if="showDetailActionUnavailableState(flow)"
+                class="small text-muted mt-1"
+                :title="detailActionTitle(flow)"
+            >
+                {{ detailActionUnavailableLabel(flow) }}
+            </div>
+        </td>
     </tr>
 </template>
 
@@ -127,6 +145,51 @@
                 }
             },
 
+            detailAction(flow) {
+                return flow && flow.detail_action
+                    ? flow.detail_action
+                    : null
+            },
+
+            detailActionLabel(flow) {
+                const action = this.detailAction(flow)
+
+                return action && action.label
+                    ? action.label
+                    : 'Run Detail'
+            },
+
+            detailActionTitle(flow) {
+                const action = this.detailAction(flow)
+
+                return action && action.description
+                    ? action.description
+                    : 'Open the selected run detail.'
+            },
+
+            showDetailActionUnavailableState(flow) {
+                const action = this.detailAction(flow)
+
+                return action
+                    ? action.history_available === false
+                    : !this.hasTypedHistory(flow)
+            },
+
+            detailActionUnavailableLabel(flow) {
+                const action = this.detailAction(flow)
+
+                return action && action.unavailable_label
+                    ? action.unavailable_label
+                    : 'No typed history'
+            },
+
+            hasTypedHistory(flow) {
+                return flow
+                    && flow.history_event_count !== null
+                    && flow.history_event_count !== undefined
+                    && Number(flow.history_event_count) > 0
+            },
+
             isTerminalCollection() {
                 return ['completed', 'failed', 'cancelled', 'terminated'].includes(this.$route.params.type)
             },

resources/js/screens/flows/flow-row.vue

@@ -394,7 +394,7 @@
             },
 
             defaultWorkflowListColumns() {
-                return ['flow', 'started_at', 'closed_at', 'duration']
+                return ['flow', 'started_at', 'closed_at', 'duration', 'actions']
             },
 
             workflowListColumnOptions() {
@@ -408,6 +408,8 @@
                     options.push({key: 'duration', label: 'Duration'})
                 }
 
+                options.push({key: 'actions', label: 'Actions'})
+
                 return options
             },
 
@@ -420,6 +422,10 @@
                     normalized.unshift('flow')
                 }
 
+                if (!normalized.includes('actions')) {
+                    normalized.push('actions')
+                }
+
                 return normalized.length > 0
                     ? normalized
                     : this.defaultWorkflowListColumns().filter((column) => allowed.includes(column))
@@ -464,7 +470,7 @@
                                class="mr-2 waterline-column-option"
                                value="${this.escapeHtml(column.key)}"
                                ${columns.includes(column.key) ? 'checked' : ''}
-                               ${column.key === 'flow' ? 'disabled' : ''}>
+                               ${['flow', 'actions'].includes(column.key) ? 'disabled' : ''}>
                         <span>${this.escapeHtml(column.label)}</span>
                     </label>
                 `).join('')
@@ -1614,6 +1620,7 @@
                     </th>
                     <th v-if="isTerminalCollection() && columnEnabled('closed_at')">{{ closedAtLabel() }}</th>
                     <th v-if="isTerminalCollection() && columnEnabled('duration')" class="text-right">Duration</th>
+                    <th v-if="columnEnabled('actions')" class="text-right">Actions</th>
                 </tr>
                 </thead>
 

resources/js/screens/flows/index.vue

@@ -219,7 +219,11 @@ public function testTerminalListEndpointsFilterByRawStatus(): void
             ->assertJsonCount(1, 'data')
             ->assertJsonPath('data.0.id', $failed->id)
             ->assertJsonPath('data.0.status', 'failed')
-            ->assertJsonPath('data.0.is_terminal', true);
+            ->assertJsonPath('data.0.is_terminal', true)
+            ->assertJsonPath('data.0.detail_action.label', 'Run Detail')
+            ->assertJsonPath('data.0.detail_action.available', true)
+            ->assertJsonPath('data.0.detail_action.history_available', false)
+            ->assertJsonPath('data.0.detail_action.unavailable_label', 'No typed history');
 
         $this->get('/waterline/api/flows/cancelled')
             ->assertStatus(200)