Workflow Counts

package.json

@@ -118,13 +118,13 @@
     "@sveltejs/adapter-vercel": "^1.0.5",
     "@sveltejs/kit": "1.15.4",
     "@sveltejs/vite-plugin-svelte": "^2.0.2",
-    "@temporalio/activity": "^1.8.4",
-    "@temporalio/client": "^1.8.4",
-    "@temporalio/common": "^1.8.4",
-    "@temporalio/proto": "^1.8.4",
-    "@temporalio/testing": "^1.8.4",
-    "@temporalio/worker": "^1.8.4",
-    "@temporalio/workflow": "^1.8.4",
+    "@temporalio/activity": "^1.8.6",
+    "@temporalio/client": "^1.8.6",
+    "@temporalio/common": "^1.8.6",
+    "@temporalio/proto": "^1.8.6",
+    "@temporalio/testing": "^1.8.6",
+    "@temporalio/worker": "^1.8.6",
+    "@temporalio/workflow": "^1.8.6",
     "@types/base-64": "^1.0.0",
     "@types/cors": "^2.8.13",
     "@types/express": "^4.17.17",

server/proto/api/temporal/api/workflowservice/v1/service.proto

@@ -398,7 +398,7 @@ service WorkflowService {
     // GetSystemInfo returns information about the system.
     rpc GetSystemInfo(GetSystemInfoRequest) returns (GetSystemInfoResponse) {
         option (google.api.http) = {
-            get: "/api/v1/systemInfo"
+            get: "/api/v1/system-info"
         };
     }
 

src/lib/components/workflow-status.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { cva } from 'class-variance-authority';
 
+  import Spinner from '$lib/holocene/icon/svg/spinner.svelte';
   import { translate } from '$lib/i18n/translate';
   import type { EventClassification } from '$lib/models/event-history/get-event-classification';
   import type { ScheduleStatus } from '$lib/types/schedule';
@@ -12,6 +13,8 @@
 
   export let delay = 0;
   export let status: Status = 'Running';
+  export let count: number | undefined = undefined;
+  export let loading = false;
 
   const label: Record<Status, string> = {
     Running: translate('workflows', 'running'),
@@ -66,11 +69,25 @@
   );
 </script>
 
-<div class="flex text-center text-sm font-medium leading-4">
-  <span class={workflowStatus({ status })}>
+<div
+  class="flex text-center text-sm font-medium leading-4"
+  data-testid={$$props['test-id']}
+>
+  <span class={workflowStatus({ status })} class:count>
+    {#if loading}
+      <Spinner class="h-4 w-4 animate-spin" />
+    {:else if count}
+      {count.toLocaleString()}
+    {/if}
     {label[status]}
     {#if status === 'Running'}
       <HeartBeat {delay} />
     {/if}
   </span>
 </div>
+
+<style lang="postcss">
+  .count {
+    @apply px-1;
+  }
+</style>

src/lib/components/workflow/workflow-count-all.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import Spinner from '$lib/holocene/icon/svg/spinner.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import { loading, updating } from '$lib/stores/workflows';
+
+  export let count = 0;
+</script>
+
+<div class="font-base flex text-center text-sm leading-4">
+  <p data-testid="workflow-count" data-loaded={!$loading && !$updating}>
+    {#if $loading || $updating}
+      <Spinner class="h-4 w-4 animate-spin" />
+    {:else if count >= 0}
+      {count.toLocaleString()} {translate('workflows').toLocaleLowerCase()}
+    {/if}
+  </p>
+</div>

src/lib/components/workflow/workflow-count-status.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { loading, updating } from '$lib/stores/workflows';
+  import type { WorkflowStatus as Status } from '$lib/types/workflows';
+
+  import WorkflowStatus from '../workflow-status.svelte';
+
+  export let status: Status;
+  export let count = 0;
+</script>
+
+<WorkflowStatus
+  loading={$loading || $updating}
+  {count}
+  {status}
+  test-id="workflow-status-{status}"
+/>