anbaric-plugins 1.21.5 → 1.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anbaric-plugins",
-  "version": "1.21.5",
+  "version": "1.23.0",
   "description": "Open-source Anbaric platform plugins: pages and widgets loaded by the hosting server via ANBARIC_PLUGINS",
   "license": "MIT",
   "author": "chris@anbaric.ai",
@@ -14,7 +14,7 @@
   "devDependencies": {
     "@anbaric/design-system": "file:../anbaric-design-system",
     "@types/react": "^19.2.14",
-    "anbaric-cloud-hosting": "^1.21.5",
+    "anbaric-cloud-hosting": "^1.23.0",
     "react": "^19.2.6",
     "typescript": "^7.0.2"
   },

package/src/state-machines/RecentJobsWidget.tsx

@@ -0,0 +1,90 @@
+import { useEffect, useState } from 'react'
+
+import { Alert } from '@anbaric/design-system/components/Alert'
+import { Badge } from '@anbaric/design-system/components/Badge'
+import { Card } from '@anbaric/design-system/components/Card'
+
+import { cell, formatDate, headerCell, machineHeading, mono, muted, tableScroller } from './presentation'
+import { mostRecent } from './recentJobs'
+import type { Job } from './types'
+
+function RecentJobsWidget() {
+  const [jobs, setJobs] = useState<Array<Job> | undefined>(undefined)
+  const [failed, setFailed] = useState(false)
+
+  useEffect(() => {
+    void (async () => {
+      try {
+        const response = await fetch('/jobs')
+        if (!response.ok) return setFailed(true)
+        setJobs(await response.json())
+      } catch {
+        setFailed(true)
+      }
+    })()
+  }, [])
+
+  if (failed) {
+    return (
+      <Alert variant="danger" title="Could not load recent jobs">
+        The platform rejected the request — try reloading the page.
+      </Alert>
+    )
+  }
+
+  const recent = mostRecent(jobs ?? [])
+
+  return (
+    <Card>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          gap: 'var(--space-md)',
+          marginBottom: 'var(--space-md)',
+        }}
+      >
+        <h2 style={machineHeading}>Recent jobs</h2>
+        {jobs ? (
+          <Badge tone="neutral">
+            {jobs.length} {jobs.length === 1 ? 'job' : 'jobs'} in total
+          </Badge>
+        ) : null}
+      </div>
+
+      {recent.length === 0 ? (
+        <p style={{ margin: 0, ...muted }}>No jobs yet.</p>
+      ) : (
+        <div style={tableScroller}>
+          <table style={{ width: '100%', minWidth: '36rem', borderCollapse: 'collapse' }}>
+            <thead>
+              <tr>
+                <th style={headerCell}>Job</th>
+                <th style={headerCell}>State machine</th>
+                <th style={headerCell}>State</th>
+                <th style={headerCell}>Updated</th>
+              </tr>
+            </thead>
+            <tbody>
+              {recent.map((job) => (
+                <tr key={job.id}>
+                  <td style={{ ...cell, ...mono }}>{job.id}</td>
+                  <td style={{ ...cell, ...mono }}>{job.workflowId ?? <span style={muted}>—</span>}</td>
+                  <td style={cell}>
+                    <Badge tone="primary" dot>
+                      {job.state}
+                    </Badge>
+                  </td>
+                  <td style={{ ...cell, whiteSpace: 'nowrap' }}>{formatDate(job.lastUpdated ?? job.startedAt)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </Card>
+  )
+}
+
+export { RecentJobsWidget }

package/src/state-machines/StateMachinesWidget.tsx

@@ -1,65 +1,11 @@
-import { useEffect, useState, type CSSProperties } from 'react'
+import { useEffect, useState } from 'react'
 
 import { Alert } from '@anbaric/design-system/components/Alert'
 import { Badge } from '@anbaric/design-system/components/Badge'
 import { Card } from '@anbaric/design-system/components/Card'
 
-interface StateMachine {
-  workflowId: string
-  url: string
-}
-
-interface Job {
-  id: string
-  state: string
-  workflowId?: string
-  properties: Record<string, unknown>
-  startedAt?: string
-  startedBy?: string
-  lastUpdated?: string
-  transitions?: Array<{ from: string; to: string; actor: string }>
-}
-
-const formatDate = (iso?: string) =>
-  iso
-    ? new Date(iso).toLocaleString(undefined, {
-        day: 'numeric',
-        month: 'short',
-        year: 'numeric',
-        hour: 'numeric',
-        minute: '2-digit',
-      })
-    : '—'
-
-const machineHeading: CSSProperties = {
-  margin: 0,
-  fontFamily: 'var(--font-title)',
-  fontSize: '1.15rem',
-  textTransform: 'var(--title-transform)' as CSSProperties['textTransform'],
-}
-
-const cell: CSSProperties = {
-  textAlign: 'left',
-  padding: 'calc(var(--space-sm) / 2) var(--space-sm)',
-  borderBottom: '1px solid color-mix(in srgb, var(--color-grey) 12%, transparent)',
-}
-
-const headerCell: CSSProperties = {
-  ...cell,
-  fontSize: '0.72rem',
-  textTransform: 'uppercase',
-  letterSpacing: '0.06em',
-  color: 'var(--color-foreground-tint-2)',
-}
-
-const mono: CSSProperties = {
-  fontFamily: 'var(--font-mono)',
-  fontSize: '0.78rem',
-}
-
-const muted: CSSProperties = {
-  color: 'var(--color-foreground-tint-2)',
-}
+import { cell, formatDate, headerCell, machineHeading, mono, muted, tableScroller } from './presentation'
+import type { Job, StateMachine } from './types'
 
 function PropertyList({ job }: { job: Job }) {
   const entries: Array<[string, unknown]> = [['id', job.id], ...Object.entries(job.properties)]
@@ -96,7 +42,8 @@ function JobsTable({ jobs }: { jobs: Job[] }) {
     return <p style={{ margin: 0, color: 'var(--color-foreground-tint-2)' }}>No jobs yet.</p>
   }
   return (
-    <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+    <div style={tableScroller}>
+      <table style={{ width: '100%', minWidth: '44rem', borderCollapse: 'collapse' }}>
       <thead>
         <tr>
           <th style={headerCell}>Properties</th>
@@ -128,7 +75,8 @@ function JobsTable({ jobs }: { jobs: Job[] }) {
           </tr>
         ))}
       </tbody>
-    </table>
+      </table>
+    </div>
   )
 }
 

package/src/state-machines/index.tsx

@@ -1,11 +1,15 @@
 import type { Plugin } from 'anbaric-cloud-hosting'
 
+import { RecentJobsWidget } from './RecentJobsWidget'
 import { StateMachinesWidget } from './StateMachinesWidget'
 
 const plugin: Plugin = {
   name: 'state-machines',
   pages: [{ path: '/', title: 'Dashboard', icon: 'dashboard', navOrder: 0 }],
-  widgets: [{ page: '/', id: 'state-machines', component: StateMachinesWidget }],
+  widgets: [
+    { page: '/', id: 'recent-jobs', component: RecentJobsWidget },
+    { page: '/', id: 'state-machines', component: StateMachinesWidget },
+  ],
 }
 
 export { plugin }

package/src/state-machines/presentation.ts

@@ -0,0 +1,50 @@
+import type { CSSProperties } from 'react'
+
+const formatDate = (iso?: string) =>
+  iso
+    ? new Date(iso).toLocaleString(undefined, {
+        day: 'numeric',
+        month: 'short',
+        year: 'numeric',
+        hour: 'numeric',
+        minute: '2-digit',
+      })
+    : '—'
+
+const machineHeading: CSSProperties = {
+  margin: 0,
+  fontFamily: 'var(--font-title)',
+  fontSize: '1.15rem',
+  textTransform: 'var(--title-transform)' as CSSProperties['textTransform'],
+}
+
+const cell: CSSProperties = {
+  textAlign: 'left',
+  padding: 'calc(var(--space-sm) / 2) var(--space-sm)',
+  borderBottom: '1px solid color-mix(in srgb, var(--color-grey) 12%, transparent)',
+}
+
+const headerCell: CSSProperties = {
+  ...cell,
+  fontSize: '0.72rem',
+  textTransform: 'uppercase',
+  letterSpacing: '0.06em',
+  color: 'var(--color-foreground-tint-2)',
+}
+
+const mono: CSSProperties = {
+  fontFamily: 'var(--font-mono)',
+  fontSize: '0.78rem',
+}
+
+const muted: CSSProperties = {
+  color: 'var(--color-foreground-tint-2)',
+}
+
+// Tables of job properties get wide; scroll them rather than break the page.
+const tableScroller: CSSProperties = {
+  overflowX: 'auto',
+  maxWidth: '100%',
+}
+
+export { cell, formatDate, headerCell, machineHeading, mono, muted, tableScroller }

package/src/state-machines/recentJobs.ts

@@ -0,0 +1,12 @@
+import type { Job } from './types'
+
+const RECENT_LIMIT = 10
+
+const updatedAt = (job: Job) => new Date(job.lastUpdated ?? job.startedAt ?? 0).getTime()
+
+// Most recently touched first, falling back to when the job started for one
+// that has never been updated.
+const mostRecent = (jobs: Array<Job>, limit: number = RECENT_LIMIT) =>
+  [...jobs].sort((left, right) => updatedAt(right) - updatedAt(left)).slice(0, limit)
+
+export { RECENT_LIMIT, mostRecent }

package/src/state-machines/types.ts

@@ -0,0 +1,17 @@
+interface StateMachine {
+  workflowId: string
+  url: string
+}
+
+interface Job {
+  id: string
+  state: string
+  workflowId?: string
+  properties: Record<string, unknown>
+  startedAt?: string
+  startedBy?: string
+  lastUpdated?: string
+  transitions?: Array<{ from: string; to: string; actor: string }>
+}
+
+export type { Job, StateMachine }