Workflow Electron

.github/workflows/update-ui-server.yml

@@ -23,11 +23,9 @@ jobs:
           app_id: ${{ secrets.TEMPORAL_CICD_APP_ID }}
           private_key: ${{ secrets.TEMPORAL_CICD_PRIVATE_KEY }}
 
-      - uses: actions/setup-go@v3
+      - uses: actions/setup-go@v4
         with:
-          go-version-file: server/go.mod
-          cache: true
-          cache-dependency-path: server/go.sum
+          go-version: '1.23'
       - name: Setup Protoc
         uses: arduino/setup-protoc@v1
         with:

.storybook/test-runner.ts

@@ -1,11 +1,16 @@
 import type { TestRunnerConfig } from '@storybook/test-runner';
+import { getStoryContext } from '@storybook/test-runner';
 import { injectAxe, checkA11y } from 'axe-playwright';
 
 const config: TestRunnerConfig = {
   async preVisit(page) {
     await injectAxe(page);
   },
-  async postVisit(page) {
+  async postVisit(page, context) {
+    const storyContext = await getStoryContext(page, context);
+    if (storyContext.parameters?.a11y?.disable) {
+      return;
+    }
     await checkA11y(page, '#storybook-root', {
       detailedReport: true,
       detailedReportOptions: {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@temporalio/ui",
-  "version": "2.31.0",
+  "version": "2.31.1",
   "engines": {
     "pnpm": ">=8.6.0",
     "node": ">=18.15.0"

server/Dockerfile

@@ -1,5 +1,5 @@
 ARG BASE_SERVER_IMAGE=temporalio/base-server:1.15.7
-ARG BASE_BUILDER_IMAGE=temporalio/base-builder:1.14.8
+ARG BASE_BUILDER_IMAGE=temporalio/base-builder:1.15.0
 
 FROM ${BASE_BUILDER_IMAGE} AS server-builder
 

server/go.mod

@@ -1,6 +1,6 @@
 module github.com/temporalio/ui-server/v2
 
-go 1.22.6
+go 1.23
 
 require (
 	github.com/coreos/go-oidc/v3 v3.1.0

server/server/version/version.go

@@ -28,5 +28,5 @@ const (
 	clientNameHeaderName    = "client-name"
 	clientNameHeaderValue   = "temporal-ui"
 	clientVersionHeaderName = "client-version"
-	UIVersion               = "2.30.3"
+	UIVersion               = "2.31.0"
 )

src/lib/components/workflow/workflow-atom.svelte

@@ -0,0 +1,201 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+
+  import Breadcrumbs from '$lib/holocene/breadcrumbs.svelte';
+  import ZoomSvg from '$lib/holocene/zoom-svg.svelte';
+  import type { RootNode } from '$lib/services/workflow-service';
+  import { workflowRun } from '$lib/stores/workflow-run';
+  import { routeForEventHistory } from '$lib/utilities/route-for';
+
+  import WorkflowElectron from './workflow-electron.svelte';
+
+  $: ({ namespace } = $page.params);
+  $: ({ workflow } = $workflowRun);
+
+  export let root: RootNode;
+
+  let activeNode: RootNode | undefined;
+  let hoverNode: RootNode | undefined;
+
+  let links: { copy: string; href: string }[] = [];
+
+  $: currentNode =
+    root?.workflow?.runId === workflow.runId &&
+    root?.workflow?.id === workflow.id;
+
+  const getPositions = (width: number, height: number, zoomLevel: number) => {
+    const centerX = width / 2;
+    const centerY = height / 2;
+    const orbits = {
+      root: width / 50 / zoomLevel,
+      level1: width / 16 / zoomLevel,
+      level2: width / 9 / zoomLevel,
+      level3: width / 6 / zoomLevel,
+      level4: width / 4 / zoomLevel,
+    };
+    const radius = 10 / (2 * zoomLevel);
+    return {
+      centerX,
+      centerY,
+      orbits,
+      radius,
+    };
+  };
+
+  const onNodeMouseEnter = (node: RootNode) => {
+    if (activeNode) return;
+    hoverNode = node;
+  };
+
+  const onNodeMouseLeave = (_node: RootNode) => {
+    if (activeNode) return;
+    hoverNode = undefined;
+  };
+
+  const onNodeClick = (node: RootNode) => {
+    if (activeNode === node) {
+      activeNode = undefined;
+      links = [];
+    } else {
+      activeNode = node;
+      links = node.rootPaths.map((path) => {
+        return {
+          copy: node.workflow.id,
+          href: routeForEventHistory({
+            namespace,
+            workflow: path.workflowId,
+            run: path.runId,
+          }),
+        };
+      });
+    }
+  };
+</script>
+
+{#if links.length}
+  <Breadcrumbs {links} />
+{/if}
+<div class="w-full rounded-xl border-2 border-subtle bg-primary">
+  <ZoomSvg
+    initialZoom={0.65}
+    maxZoomOut={1}
+    maxZoomIn={0.25}
+    let:width
+    let:height
+    let:zoomLevel
+    class="spin"
+  >
+    {@const { centerX, centerY, orbits, radius } = getPositions(
+      width,
+      height,
+      zoomLevel,
+    )}
+    <circle
+      class="stroke-black dark:stroke-white"
+      cx={centerX}
+      cy={centerY}
+      r={orbits.level1}
+      stroke-width="1"
+      fill-opacity="0"
+    />
+    <circle
+      class="stroke-black opacity-50 dark:stroke-white"
+      cx={centerX}
+      cy={centerY}
+      r={orbits.level2}
+      stroke-width="1"
+      fill-opacity="0"
+    />
+    <circle
+      class="stroke-black opacity-50 dark:stroke-white"
+      cx={centerX}
+      cy={centerY}
+      r={orbits.level3}
+      stroke-width="1"
+      fill-opacity="0"
+    />
+    <circle
+      class="stroke-black opacity-50 dark:stroke-white"
+      cx={centerX}
+      cy={centerY}
+      r={orbits.level4}
+      stroke-width="1"
+      fill-opacity="0"
+    />
+    {#each root.children as child, i}
+      <WorkflowElectron
+        index={i}
+        node={child}
+        parent={root}
+        center={{ x: centerX, y: centerY }}
+        parentCenter={{ x: centerX, y: centerY }}
+        {radius}
+        {orbits}
+        generation={1}
+        {zoomLevel}
+        {activeNode}
+        {hoverNode}
+        {onNodeClick}
+        {onNodeMouseEnter}
+        {onNodeMouseLeave}
+      />
+    {/each}
+    <g
+      class="outline-none"
+      role="button"
+      tabindex="0"
+      on:keypress={() => onNodeClick(root)}
+      on:click={() => onNodeClick(root)}
+    >
+      {#if currentNode}
+        <circle
+          class="dark:fill-white"
+          cx={centerX}
+          cy={centerY}
+          r={orbits.root * 1.1}
+        />
+      {/if}
+      <circle
+        class={root.workflow.status}
+        cx={centerX}
+        cy={centerY}
+        r={orbits.root}
+      />
+    </g>
+  </ZoomSvg>
+</div>
+
+<style lang="postcss">
+  .Running {
+    fill: #93bbfd;
+  }
+
+  .Started {
+    fill: #92a4c3;
+  }
+
+  .Completed {
+    fill: #00f37e;
+  }
+
+  .Fired {
+    fill: #f8a208;
+  }
+
+  .Signaled {
+    fill: #d300d8;
+  }
+
+  .Failed,
+  .Terminated {
+    fill: #ff4518;
+  }
+
+  .TimedOut {
+    fill: #c2570c;
+  }
+
+  .Canceled {
+    fill: #fed64b;
+  }
+</style>