add expected count in UI

Author: Plawn

ui/src/components/DagCanvas.tsx

@@ -34,6 +34,7 @@ function buildNodeData(task: BasicTask) {
     ended_at: task.ended_at,
     success: task.success,
     failures: task.failures,
+    expected_count: task.expected_count,
     batch_id: task.batch_id,
     dead_end_barrier: task.dead_end_barrier,
   };
@@ -114,6 +115,7 @@ export default function DagCanvas(props: Props) {
         ended_at: data.ended_at,
         success: data.success,
         failures: data.failures,
+        expected_count: data.expected_count ?? null,
         batch_id: data.batch_id ?? null,
         dead_end_barrier: data.dead_end_barrier ?? false,
       };

ui/src/components/TaskInfoPanel.tsx

@@ -1,5 +1,5 @@
 import { Show, For, createSignal, createEffect, on } from 'solid-js';
-import type { BasicTask, TaskDetail, ActionDto } from '../types';
+import type { BasicTask, TaskDetail, ActionDto, Strategy } from '../types';
 import { fetchTask, cancelTask } from '../api';
 import StatusBadge from './StatusBadge';
 import { JsonViewer, urlRenderer, Window, Collapsible, Button } from 'glass-ui-solid';
@@ -53,6 +53,7 @@ export default function TaskInfoPanel(props: Props) {
   const [loading, setLoading] = createSignal(false);
   const [metadataOpen, setMetadataOpen] = createSignal(false);
   const [actionsOpen, setActionsOpen] = createSignal(false);
+  const [rulesOpen, setRulesOpen] = createSignal(false);
   const [showCancelConfirm, setShowCancelConfirm] = createSignal(false);
   const [canceling, setCanceling] = createSignal(false);
   const [cancelError, setCancelError] = createSignal<string | null>(null);
@@ -105,6 +106,10 @@ export default function TaskInfoPanel(props: Props) {
     const det = d();
     return det && det.actions && det.actions.length > 0;
   };
+  const hasRules = () => {
+    const det = d();
+    return det && det.rules && det.rules.length > 0;
+  };
 
   const offset = props.index * WINDOW_OFFSET;
 
@@ -149,6 +154,39 @@ export default function TaskInfoPanel(props: Props) {
       <InfoRow label="Success" value={String(task().success)} />
       <InfoRow label="Failures" value={String(task().failures)} />
 
+      {/* Progress bar when expected_count is set */}
+      <Show when={task().expected_count != null}>
+        {(() => {
+          const expected = task().expected_count!;
+          const done = task().success + task().failures;
+          const pct = expected > 0 ? Math.min(100, Math.round((done / expected) * 100)) : 0;
+          const successPct = expected > 0 ? Math.min(100, Math.round((task().success / expected) * 100)) : 0;
+          const failurePct = expected > 0 ? Math.min(100 - successPct, Math.round((task().failures / expected) * 100)) : 0;
+          return (
+            <div class="border-b border-white/10 py-1.5">
+              <div class="flex items-center justify-between mb-1">
+                <span class="text-white/50">Progress</span>
+                <span class="font-mono text-xs text-white/90">
+                  {done} / {expected} ({pct}%)
+                </span>
+              </div>
+              <div class="h-2 w-full rounded-full bg-white/10 overflow-hidden flex">
+                <div
+                  class="h-full bg-emerald-500 transition-all duration-300"
+                  style={{ width: `${successPct}%` }}
+                />
+                <Show when={failurePct > 0}>
+                  <div
+                    class="h-full bg-red-500 transition-all duration-300"
+                    style={{ width: `${failurePct}%` }}
+                  />
+                </Show>
+              </div>
+            </div>
+          );
+        })()}
+      </Show>
+
       <Show when={loading()}>
         <div class="mt-2 text-center text-xs text-white/40">Loading details...</div>
       </Show>
@@ -209,6 +247,48 @@ export default function TaskInfoPanel(props: Props) {
             </div>
           </Collapsible>
         </Show>
+
+        <Show when={hasRules()}>
+          <Collapsible
+            open={rulesOpen()}
+            onOpenChange={setRulesOpen}
+            trigger={
+              <span class="text-xs font-semibold text-white/60">
+                Rules ({d()!.rules.length})
+              </span>
+            }
+            class="mt-2"
+          >
+            <div class="space-y-2">
+              <For each={d()!.rules}>
+                {(rule) => (
+                  <div class="rounded border border-white/10 bg-black/20 p-2">
+                    <div class="mb-1 flex items-center gap-2">
+                      <span class={`text-[10px] font-semibold uppercase ${rule.type === 'Concurency' ? 'text-cyan-400' : 'text-orange-400'}`}>
+                        {rule.type}
+                      </span>
+                      <span class="rounded bg-white/10 px-1 py-0.5 text-[10px] text-white/60">
+                        max: {rule.type === 'Concurency' ? rule.max_concurency : rule.max_capacity}
+                      </span>
+                    </div>
+                    <div class="text-[11px] text-white/70 space-y-0.5">
+                      <div>
+                        <span class="text-white/40">kind:</span>{' '}
+                        <span class="font-mono">{rule.matcher.kind}</span>
+                      </div>
+                      <Show when={rule.matcher.fields.length > 0}>
+                        <div>
+                          <span class="text-white/40">fields:</span>{' '}
+                          <span class="font-mono">{rule.matcher.fields.join(', ')}</span>
+                        </div>
+                      </Show>
+                    </div>
+                  </div>
+                )}
+              </For>
+            </div>
+          </Collapsible>
+        </Show>
       </Show>
 
       {/* Cancel task */}

ui/src/components/TaskTable.tsx

@@ -7,7 +7,7 @@ interface Props {
   onTaskClick: (task: BasicTask) => void;
 }
 
-type SortKey = 'name' | 'kind' | 'status' | 'created_at' | 'started_at' | 'ended_at' | 'success' | 'failures';
+type SortKey = 'name' | 'kind' | 'status' | 'created_at' | 'started_at' | 'ended_at' | 'success' | 'failures' | 'progress';
 
 const COLUMNS: { key: SortKey; label: string }[] = [
   { key: 'name', label: 'Name' },
@@ -18,9 +18,23 @@ const COLUMNS: { key: SortKey; label: string }[] = [
   { key: 'ended_at', label: 'Ended' },
   { key: 'success', label: 'Success' },
   { key: 'failures', label: 'Failures' },
+  { key: 'progress', label: 'Progress' },
 ];
 
+function progressPct(t: BasicTask): number | null {
+  if (t.expected_count == null || t.expected_count === 0) return null;
+  return Math.min(100, Math.round(((t.success + t.failures) / t.expected_count) * 100));
+}
+
 function compare(a: BasicTask, b: BasicTask, key: SortKey): number {
+  if (key === 'progress') {
+    const ap = progressPct(a);
+    const bp = progressPct(b);
+    if (ap == null && bp == null) return 0;
+    if (ap == null) return 1;
+    if (bp == null) return -1;
+    return ap - bp;
+  }
   const av = a[key];
   const bv = b[key];
   if (av == null && bv == null) return 0;
@@ -110,6 +124,20 @@ export default function TaskTable(props: Props) {
                   <td class="px-3 py-2 text-white/50">{formatDate(task.ended_at)}</td>
                   <td class="px-3 py-2 text-center">{task.success}</td>
                   <td class="px-3 py-2 text-center">{task.failures}</td>
+                  <td class="px-3 py-2 text-center">
+                    {(() => {
+                      const pct = progressPct(task);
+                      if (pct == null) return <span class="text-white/30">—</span>;
+                      return (
+                        <div class="flex items-center gap-1.5">
+                          <div class="h-1.5 w-16 rounded-full bg-white/10 overflow-hidden">
+                            <div class="h-full bg-emerald-500" style={{ width: `${pct}%` }} />
+                          </div>
+                          <span class="text-xs text-white/60">{pct}%</span>
+                        </div>
+                      );
+                    })()}
+                  </td>
                 </tr>
               )}
             </For>

ui/src/types.ts

@@ -18,16 +18,38 @@ export interface BasicTask {
   ended_at: string | null;
   success: number;
   failures: number;
+  expected_count: number | null;
   batch_id: string | null;
   dead_end_barrier: boolean;
 }
 
+export interface Matcher {
+  status: TaskStatus;
+  kind: string;
+  fields: string[];
+}
+
+export interface ConcurencyRule {
+  type: 'Concurency';
+  max_concurency: number;
+  matcher: Matcher;
+}
+
+export interface CapacityRule {
+  type: 'Capacity';
+  max_capacity: number;
+  matcher: Matcher;
+}
+
+export type Strategy = ConcurencyRule | CapacityRule;
+
 export interface TaskDetail extends BasicTask {
   timeout: number;
   metadata: Record<string, unknown>;
   failure_reason: string | null;
   last_updated: string;
-  rules: unknown[];
+  expected_count: number | null;
+  rules: Strategy[];
   actions: ActionDto[];
 }