Get workflow counts working with api

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

@@ -4,26 +4,24 @@
   import WorkflowStatus from '../workflow-status.svelte';
 
   export let status: Status | 'all' = 'all';
-  // TODO: Make this a real count once API is implemented
-  export let count: number = Math.round(Math.random() * 10000);
-  // export let count = 0;
+  export let count = 0;
   export let active = false;
   export let onStatusClick: (status: Status | 'all') => void = () => {};
 </script>
 
-<div
-  class="count-card flex flex-row lg:flex-col items-center lg:items-end gap-2 lg:gap-0 cursor-pointer py-1 px-2 lg:py-4 lg:px-5 border-2 border-gray-900 rounded-lg bg-white"
+<button
+  class="count-card flex flex-row lg:flex-col items-center lg:items-end gap-2 lg:gap-0 cursor-pointer py-1 px-2 lg:py-2 lg:px-4 border-2 border-gray-900 rounded-lg bg-white"
   class:active
   on:click={() => onStatusClick(status)}
   on:keypress={() => onStatusClick(status)}
 >
   <p class="font-mono text-sm lg:text-lg">{count.toLocaleString()}</p>
   {#if status === 'all'}
-    <p class="font-mono text-sm lg:text-lg">All</p>
+    <p class="font-primary text-sm lg:text-lg">All</p>
   {:else}
     <WorkflowStatus {status} />
   {/if}
-</div>
+</button>
 
 <style lang="postcss">
   .active {
@@ -32,6 +30,6 @@
 
   .count-card:hover {
     background: linear-gradient(157deg, #e6fffa 0%, #e0eaff 100%);
-    box-shadow: 8px 8px 0 0 #000;
+    box-shadow: 4px 4px 0 0 #000;
   }
 </style>

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

@@ -4,16 +4,23 @@
   import type { WorkflowFilter } from '$lib/models/workflow-filters';
   import { workflowStatuses } from '$lib/models/workflow-status';
   import { workflowFilters } from '$lib/stores/filters';
+  import { workflowsQuery } from '$lib/stores/workflows';
+  import { decodePayload } from '$lib/utilities/decode-payload';
   import { isStatusFilter } from '$lib/utilities/query/filter-search';
   import { toListWorkflowQueryFromFilters } from '$lib/utilities/query/filter-workflow-query';
   import { combineFilters } from '$lib/utilities/query/to-list-workflow-filters';
   import { requestFromAPI } from '$lib/utilities/request-from-api';
   import { routeForApi } from '$lib/utilities/route-for-api';
   import { updateQueryParameters } from '$lib/utilities/update-query-parameters';
-  import { noop } from 'svelte/internal';
 
   import WorkflowCount from './workflow-count.svelte';
 
+  let totalCount = 0;
+  let statusGroups = [];
+
+  $: groupByEnabled =
+    $page.data?.systemInfo?.capabilities?.countGroupByExecutionStatus;
+
   $: statusFilters = $workflowFilters.filter((filter) =>
     isStatusFilter(filter.attribute),
   );
@@ -85,32 +92,48 @@
     });
   };
 
-  const groupByClause = 'GROUP BY ExecutionStatus';
+  const fetchCounts = async () => {
+    if (groupByEnabled) {
+      const groupByClause = 'GROUP BY ExecutionStatus';
+      const countRoute = routeForApi('workflows.count', {
+        namespace: $page.params.namespace,
+      });
+      const { count, groups } = await requestFromAPI<{
+        count: string;
+        groups: unknown[];
+      }>(countRoute, {
+        params: { query: `${groupByClause}` },
+        notifyOnError: false,
+      });
+      totalCount = parseInt(count);
+      statusGroups = groups.map((group) => {
+        const value = decodePayload(group?.groupValues[0]);
+        return {
+          value,
+          count: parseInt(group.count),
+        };
+      });
+    }
+  };
 
-  const countRoute = routeForApi('workflows.count', {
-    namespace: $page.params.namespace,
-  });
-  const countPromise = requestFromAPI<{ count: string }>(countRoute, {
-    params: { query: 'GROUP BY ExecutionStatus' },
-    notifyOnError: false,
-  });
+  $: $workflowsQuery, fetchCounts();
 </script>
 
-{#await countPromise then { count, groups }}
-  {(console.log('Count and groups: ', count, groups), '')}
+{#if groupByEnabled}
   <div class="flex gap-2 lg:gap-4 flex-wrap">
     <WorkflowCount
       status="all"
-      count={parseInt(count || '0')}
+      count={totalCount}
       {onStatusClick}
       active={!$workflowFilters.length}
     />
     {#each workflowStatuses as status}
       <WorkflowCount
         {status}
         {onStatusClick}
+        count={statusGroups.find((group) => group.value === status)?.count ?? 0}
         active={statusFilters.some((filter) => filter.value === status)}
       />
     {/each}
   </div>
-{/await}
+{/if}

src/lib/pages/workflows-with-new-search.svelte

@@ -234,7 +234,7 @@
       <Translate namespace="workflows" key="recent-workflows" />
     </h1>
     <div class="flex items-center gap-2 text-sm">
-      {#if $workflowCount?.totalCount >= 0 && $supportsAdvancedVisibility}
+      {#if $workflowCount?.totalCount >= 0 && $supportsAdvancedVisibility && !$page.data?.systemInfo?.capabilities?.countGroupByExecutionStatus}
         <p data-testid="workflow-count" data-loaded={!$loading && !$updating}>
           {#if $loading || $updating}
             <Translate namespace="workflows" key="loading-workflows" />
@@ -255,13 +255,11 @@
             />
           {/if}
         </p>
-      {/if}
-      {#if !$loading && !$updating && $workflows.length > 0}
         <div class="h-1 w-1 rounded-full bg-gray-400" />
-        <Link tabindex={0} on:click={() => exportWorkflows($workflows)}
-          >{translate('download-json')}</Link
-        >
       {/if}
+      <Link tabindex={0} on:click={() => exportWorkflows($workflows)}
+        >{translate('download-json')}</Link
+      >
     </div>
   </div>
   <div>

src/lib/services/settings-service.ts

@@ -1,6 +1,5 @@
 import { BROWSER } from 'esm-env';
 
-import { settings } from '$lib/stores/settings';
 import type { SettingsResponse } from '$lib/types';
 import type { Settings } from '$lib/types/global';
 import { getApiOrigin } from '$lib/utilities/get-api-origin';
@@ -62,7 +61,5 @@ export const fetchSettings = async (request = fetch): Promise<Settings> => {
     version: settingsResponse?.Version,
   };
 
-  settings.set(settingsInformation);
-
   return settingsInformation;
 };

src/lib/stores/advanced-visibility.ts

@@ -7,15 +7,14 @@ import {
   advancedVisibilityEnabledWithOrderBy,
 } from '$lib/utilities/advanced-visibility-enabled';
 
+import { cluster } from './cluster';
 import { temporalVersion } from './versions';
 
 export const isCloud = derived(
   [page],
   ([$page]) => $page.data?.settings?.runtimeEnvironment?.isCloud,
 );
 
-export const cluster = derived([page], ([$page]) => $page.data?.cluster);
-
 export const supportsAdvancedVisibility = derived(
   [cluster, temporalVersion, isCloud],
   ([$cluster, $temporalVersion, $isCloud]) =>

src/lib/stores/cluster.ts

@@ -1,5 +1,7 @@
-import { writable } from 'svelte/store';
+import { derived } from 'svelte/store';
 
-import type { GetClusterInfoResponse } from '$lib/types';
+import { page } from '$app/stores';
 
-export const cluster = writable<GetClusterInfoResponse>({});
+export const cluster = derived([page], ([$page]) => {
+  return $page.data?.cluster;
+});

src/lib/stores/settings.ts

@@ -1,33 +1,5 @@
-import { writable } from 'svelte/store';
+import { derived } from 'svelte/store';
 
-import type { Settings } from '$lib/types/global';
+import { page } from '$app/stores';
 
-export const settings = writable<Settings>({
-  auth: {
-    enabled: false,
-    options: null,
-  },
-  baseUrl: '',
-  codec: {
-    endpoint: '',
-    passAccessToken: false,
-    includeCredentials: false,
-  },
-  defaultNamespace: null,
-  disableWriteActions: false,
-  batchActionsDisabled: false,
-  workflowTerminateDisabled: false,
-  workflowCancelDisabled: false,
-  workflowSignalDisabled: false,
-  workflowResetDisabled: false,
-  hideWorkflowQueryErrors: false,
-  showTemporalSystemNamespace: false,
-  notifyOnNewVersion: false,
-  feedbackURL: '',
-  runtimeEnvironment: {
-    isCloud: false,
-    isLocal: true,
-    envOverride: true,
-  },
-  version: '',
-});
+export const settings = derived([page], ([$page]) => $page.data.settings);

src/routes/(app)/+layout.svelte

@@ -3,8 +3,6 @@
   import { goto } from '$app/navigation';
   import { page, updated } from '$app/stores';
 
-  import type { PageData } from './$types';
-
   import DataEncoderSettings from '$lib/components/data-encoder-settings.svelte';
   import SideNavigation from '$lib/components/side-nav.svelte';
   import TopNavigation from '$lib/components/top-nav.svelte';
@@ -27,8 +25,6 @@
 
   import type { DescribeNamespaceResponse as Namespace } from '$types';
 
-  export let data: PageData;
-
   let namespaceList: NamespaceListItem[];
 
   $: isCloud = $page.data?.settings?.runtimeEnvironment?.isCloud;

src/routes/(app)/namespaces/[namespace]/+page.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  
+
   import { page } from '$app/stores';
-  
+
   import type { PageData } from './$types';
 
   import PageTitle from '$lib/components/page-title.svelte';
@@ -17,7 +17,6 @@
   import { settings } from '$lib/stores/settings';
   import { temporalVersion, uiVersion } from '$lib/stores/versions';
   import { fromSecondsToDaysOrHours } from '$lib/utilities/format-time';
-  
 
   export let data: PageData;