Schedule Workflows Count and View All link

src/lib/components/schedule/schedule-form-view.svelte

@@ -116,7 +116,7 @@
   {#if $loading}
     <Loading title={loadingText} />
   {:else}
-    <header class="mb-12 flex flex-col gap-1">
+    <header class="mb-12 flex flex-col gap-4">
       <Link href={backHref} icon="chevron-left">
         {backTitle}
       </Link>

src/lib/components/schedule/schedule-recent-runs.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { goto } from '$app/navigation';
+
   import Panel from '$lib/components/panel.svelte';
   import EmptyState from '$lib/holocene/empty-state.svelte';
   import Link from '$lib/holocene/link.svelte';
@@ -7,14 +9,18 @@
   import { relativeTime, timeFormat } from '$lib/stores/time-format';
   import { decodeURIForSvelte } from '$lib/utilities/encode-uri';
   import { formatDate } from '$lib/utilities/format-date';
-  import { routeForEventHistory } from '$lib/utilities/route-for';
+  import {
+    routeForEventHistory,
+    routeForWorkflowsWithQuery,
+  } from '$lib/utilities/route-for';
 
   import WorkflowStatus from '../workflow-status.svelte';
 
   import type { ScheduleActionResult } from '$types';
 
   export let recentRuns: ScheduleActionResult[] = [];
   export let namespace: string;
+  export let workflowQuery: string;
 
   const sortRecentRuns = (recentRuns: ScheduleActionResult[]) => {
     return (
@@ -30,7 +36,21 @@
 </script>
 
 <Panel class="w-full">
-  <h2 class="mb-4 text-2xl">{translate('schedules.recent-runs')}</h2>
+  <div class="flex justify-between">
+    <h2 class="mb-4 text-2xl">{translate('schedules.recent-runs')}</h2>
+    <Link
+      on:click={() => {
+        goto(
+          routeForWorkflowsWithQuery({
+            namespace,
+            query: workflowQuery,
+          }),
+        );
+      }}
+    >
+      {translate('common.view-all-runs')}
+    </Link>
+  </div>
   {#each sortRecentRuns(recentRuns) as run (run?.startWorkflowResult?.workflowId)}
     {#await fetchWorkflowForSchedule({ namespace, workflowId: decodeURIForSvelte(run.startWorkflowResult.workflowId), runId: run.startWorkflowResult.runId }, fetch) then workflow}
       <div class="row">

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

@@ -1,5 +1,4 @@
 <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';
@@ -10,7 +9,6 @@
 </script>
 
 <WorkflowStatus
-  loading={$loading || $updating}
   {count}
   {newCount}
   {status}

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

@@ -5,26 +5,23 @@
 
   import Skeleton from '$lib/holocene/skeleton/index.svelte';
   import { fetchWorkflowCountByExecutionStatus } from '$lib/services/workflow-counts';
-  import {
-    loading,
-    refresh,
-    updating,
-    workflowCount,
-  } from '$lib/stores/workflows';
+  import { refresh, workflowCount } from '$lib/stores/workflows';
   import type { WorkflowStatus } from '$lib/types/workflows';
   import { decodePayload } from '$lib/utilities/decode-payload';
   import { getExponentialBackoffSeconds } from '$lib/utilities/refresh-rate';
 
   import WorkflowCountStatus from './workflow-count-status.svelte';
 
+  export let staticQuery = '';
   $: namespace = $page.params.namespace;
-  $: query = $page.url.searchParams.get('query');
+  $: query = staticQuery || $page.url.searchParams.get('query');
 
   let statusGroups: { status: WorkflowStatus; count: number }[] = [];
   let newStatusGroups: { status: WorkflowStatus; count: number }[] = [];
   let refreshInterval: ReturnType<typeof setInterval>;
 
   let attempt = 1;
+  let loading = false;
   const initialIntervalSeconds = 5;
   const maxAttempts = 100;
 
@@ -51,6 +48,7 @@
     newStatusGroups = [];
     $workflowCount.newCount = 0;
     attempt = 1;
+    loading = true;
   };
 
   const getStatusAndCountOfGroup = (groups = []) => {
@@ -77,6 +75,8 @@
       newStatusGroups = getStatusAndCountOfGroup(groups);
     } catch (e) {
       console.error('Fetching workflow counts failed: ', e?.message);
+    } finally {
+      loading = false;
     }
   };
 
@@ -98,6 +98,8 @@
       statusGroups = getStatusAndCountOfGroup(groups);
     } catch (e) {
       console.error('Fetching workflow counts failed: ', e?.message);
+    } finally {
+      loading = false;
     }
   };
 
@@ -106,7 +108,7 @@
 
 <div class="flex min-h-[24px] flex-wrap items-center gap-2">
   {#each statusGroups as { count, status } (status)}
-    {#if !$loading && !$updating}
+    {#if !loading}
       <WorkflowCountStatus
         {status}
         {count}

src/lib/i18n/locales/en/common.ts

@@ -90,6 +90,8 @@ export const Strings = {
   cluster: 'Cluster',
   'codec-server': 'Codec Server',
   workflows: 'Workflows',
+  'workflows-plural_one': 'Workflow',
+  'workflows-plural_other': 'Workflows',
   schedules: 'Schedules',
   archive: 'Archive',
   import: 'Import',
@@ -146,5 +148,6 @@ export const Strings = {
   'auto-refresh': 'Auto refresh',
   'auto-refresh-tooltip': '{{ interval }} second page refresh',
   'view-more': 'View More...',
+  'view-all-runs': 'View All Runs',
   download: 'Download',
 } as const;

src/lib/pages/schedule-view.svelte

@@ -9,7 +9,9 @@
   import ScheduleFrequencyPanel from '$lib/components/schedule/schedule-frequency-panel.svelte';
   import ScheduleRecentRuns from '$lib/components/schedule/schedule-recent-runs.svelte';
   import ScheduleUpcomingRuns from '$lib/components/schedule/schedule-upcoming-runs.svelte';
+  import WorkflowCounts from '$lib/components/workflow/workflow-counts.svelte';
   import WorkflowStatus from '$lib/components/workflow-status.svelte';
+  import Button from '$lib/holocene/button.svelte';
   import Link from '$lib/holocene/link.svelte';
   import Loading from '$lib/holocene/loading.svelte';
   import MenuItem from '$lib/holocene/menu/menu-item.svelte';
@@ -18,6 +20,7 @@
   import RadioInput from '$lib/holocene/radio-input/radio-input.svelte';
   import SplitButton from '$lib/holocene/split-button.svelte';
   import { translate } from '$lib/i18n/translate';
+  import Translate from '$lib/i18n/translate.svelte';
   import {
     deleteSchedule,
     fetchSchedule,
@@ -26,8 +29,10 @@
     unpauseSchedule,
   } from '$lib/services/schedule-service';
   import { coreUserStore } from '$lib/stores/core-user';
+  import { groupByCountEnabled } from '$lib/stores/group-by-enabled';
   import { loading } from '$lib/stores/schedules';
   import { relativeTime, timeFormat } from '$lib/stores/time-format';
+  import { refresh, workflowCount } from '$lib/stores/workflows';
   import type { OverlapPolicy } from '$lib/types/schedule';
   import { decodeURIForSvelte } from '$lib/utilities/encode-uri';
   import { formatDate } from '$lib/utilities/format-date';
@@ -40,6 +45,7 @@
 
   let namespace = $page.params.namespace;
   let scheduleId = $page.params.schedule;
+  let workflowQuery = `TemporalScheduledById="${scheduleId}"`;
 
   const parameters = {
     namespace,
@@ -128,7 +134,7 @@
           scheduleId,
           reason,
         });
-    scheduleFetch = fetchSchedule(parameters, fetch);
+    scheduleFetch = fetchSchedule(parameters);
     reason = '';
     pauseConfirmationModalOpen = false;
   };
@@ -141,7 +147,7 @@
       overlapPolicy: $overlapPolicy,
     });
     setTimeout(() => {
-      scheduleFetch = fetchSchedule(parameters, fetch);
+      scheduleFetch = fetchSchedule(parameters);
       triggerConfirmationModalOpen = false;
       triggerLoading = false;
     }, 1000);
@@ -154,7 +160,7 @@
 
 {#await scheduleFetch}
   <header class="mb-8">
-    <div class="relative flex flex-col gap-1">
+    <div class="relative flex flex-col gap-4">
       <Link
         on:click={() => {
           goto(routeForSchedules({ namespace }));
@@ -163,10 +169,7 @@
       >
         {translate('schedules.back-to-schedules')}
       </Link>
-      <h1
-        class="mt-8 select-all text-2xl font-medium"
-        data-testid="schedule-name"
-      >
+      <h1 class="select-all text-2xl font-medium" data-testid="schedule-name">
         {scheduleId}
       </h1>
       <p class="text-sm">
@@ -189,7 +192,7 @@
         >
           {translate('schedules.back-to-schedules')}
         </Link>
-        <h1 class="relative mt-4 flex items-center text-2xl">
+        <h1 class="relative flex items-center text-2xl">
           <span class="select-all font-medium" data-testid="schedule-name">
             {scheduleId}
           </span>
@@ -260,11 +263,39 @@
           <ScheduleError error={schedule?.info?.invalidScheduleError} />
         </div>
       {/if}
+      {#if $groupByCountEnabled}
+        <div class="flex w-full flex-col gap-2 text-lg">
+          <div class="flex items-center gap-2">
+            <span data-testid="workflow-count"
+              >{$workflowCount.count.toLocaleString()}
+              <Translate
+                key="common.workflows-plural"
+                count={$workflowCount.count}
+              />
+            </span>
+            <Button
+              size="xs"
+              variant="ghost"
+              leadingIcon="retry"
+              on:click={() => {
+                scheduleFetch = fetchSchedule(parameters);
+                $refresh = Date.now();
+              }}
+            >
+              {#if $workflowCount.newCount > 0}
+                +{$workflowCount.newCount.toLocaleString()}
+              {/if}
+            </Button>
+          </div>
+          <WorkflowCounts staticQuery={workflowQuery} />
+        </div>
+      {/if}
       <div class="flex flex-col gap-4 xl:flex-row">
         <div class="flex w-full flex-col items-start gap-4 xl:w-2/3">
           <ScheduleRecentRuns
             {namespace}
             recentRuns={schedule?.info?.recentActions}
+            {workflowQuery}
           />
           <ScheduleUpcomingRuns
             futureRuns={schedule?.info?.futureActionTimes}

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

@@ -211,7 +211,10 @@
           <span data-testid="workflow-count"
             >{$workflowCount.count.toLocaleString()}</span
           >
-          <Translate key="common.workflows" />
+          <Translate
+            key="common.workflows-plural"
+            count={$workflowCount.count}
+          />
         {:else}
           <Translate key="workflows.recent-workflows" />
         {/if}