Schedules Count (#2155)

* Add count for schedules list page

* Add total count of schedules

* Fix loading var

* Always render Schedules title, only load skeleton for count

* Add plural translation and remove loading

* Update tests

src/lib/components/schedule/schedules-count.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+
+  import { translate } from '$lib/i18n/translate';
+  import { fetchScheduleCount } from '$lib/services/workflow-counts';
+  import { schedulesCount } from '$lib/stores/schedules';
+
+  $: namespace = $page.params.namespace;
+
+  const fetchCounts = async () => {
+    try {
+      $schedulesCount = await fetchScheduleCount({
+        namespace,
+      });
+    } catch (e) {
+      console.error('Fetching schedules count failed: ', e?.message);
+    }
+  };
+
+  $: namespace, fetchCounts();
+</script>
+
+<div class="flex flex-wrap items-center gap-2">
+  {translate('common.schedules-plural', { count: Number($schedulesCount) })}
+</div>

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

@@ -96,6 +96,8 @@ export const Strings = {
   'workflows-plural_one': 'Workflow',
   'workflows-plural_other': 'Workflows',
   schedules: 'Schedules',
+  'schedules-plural_one': '{{ count }} Schedule',
+  'schedules-plural_other': '{{ count }} Schedules',
   archive: 'Archive',
   import: 'Import',
   feedback: 'Feedback',

src/lib/pages/schedules.svelte

@@ -4,6 +4,7 @@
   import { goto } from '$app/navigation';
   import { page } from '$app/stores';
 
+  import SchedulesCount from '$lib/components/schedule/schedules-count.svelte';
   import SchedulesTableRow from '$lib/components/schedule/schedules-table-row.svelte';
   import SchedulesTable from '$lib/components/schedule/schedules-table.svelte';
   import ApiPagination from '$lib/holocene/api-pagination.svelte';
@@ -15,6 +16,7 @@
   import { translate } from '$lib/i18n/translate';
   import { fetchPaginatedSchedules } from '$lib/services/schedule-service';
   import { coreUserStore } from '$lib/stores/core-user';
+  import { schedulesCount } from '$lib/stores/schedules';
   import type { ScheduleListEntry } from '$lib/types';
   import type { ErrorCallback } from '$lib/utilities/request-from-api';
   import { routeForScheduleCreate } from '$lib/utilities/route-for';
@@ -49,6 +51,7 @@
     let:visibleItems
     {onFetch}
     {onError}
+    total={$schedulesCount}
     aria-label={translate('common.schedules')}
     pageSizeSelectLabel={translate('common.per-page')}
     nextButtonLabel={translate('common.next')}
@@ -65,7 +68,7 @@
         <h1
           class="flex flex-col gap-0 text-lg md:flex-row md:items-center md:gap-2 md:text-2xl"
         >
-          {translate('common.schedules')}
+          <SchedulesCount />
         </h1>
       </div>
       {#if !createDisabled && visibleItems.length}
@@ -101,6 +104,7 @@
         <SchedulesTableRow {schedule} />
       {:else}
         <TableRow>
+          <td class="hidden xl:table-cell" />
           <td class="hidden xl:table-cell" />
           <td colspan="3">
             <EmptyState

src/lib/services/workflow-counts.ts

@@ -48,3 +48,25 @@ export const fetchWorkflowCountByExecutionStatus = async ({
     });
   return { count: count ?? '0', groups };
 };
+
+export const fetchScheduleCount = async ({
+  namespace,
+}: {
+  namespace: string;
+}): Promise<string> => {
+  const query =
+    'TemporalNamespaceDivision="TemporalScheduler" AND ExecutionStatus="Running"';
+  const countRoute = routeForApi('workflows.count', {
+    namespace,
+  });
+  const { count } = await requestFromAPI<CountWorkflowExecutionsResponse>(
+    countRoute,
+    {
+      params: {
+        query,
+      },
+      notifyOnError: false,
+    },
+  );
+  return count ?? '0';
+};

src/lib/stores/schedules.ts

@@ -200,3 +200,4 @@ export const submitEditSchedule = async (
 
 export const loading = writable(false);
 export const error = writable('');
+export const schedulesCount = writable('0');

tests/integration/disable-write-actions.spec.ts

@@ -47,7 +47,7 @@ test.describe('Disable write actions on empty schedules list actions', () => {
     await page.goto(schedulesUrl);
 
     const namespace = await page.locator('h1').innerText();
-    expect(namespace).toBe('Schedules');
+    expect(namespace).toBe('0 Schedules');
 
     const createButton = page.getByTestId('create-schedule');
     await expect(createButton).toBeDisabled();

tests/integration/schedules-list.spec.ts

@@ -15,7 +15,7 @@ test.describe('Schedules List with no schedules', () => {
     await page.goto(schedulesUrl);
 
     const namespace = await page.locator('h1').innerText();
-    expect(namespace).toBe('Schedules');
+    expect(namespace).toBe('0 Schedules');
 
     const createButton = page.getByTestId('create-schedule');
     await expect(createButton).toBeEnabled();
@@ -33,7 +33,7 @@ test.describe('Schedules List with schedules', () => {
     await page.goto(schedulesUrl);
 
     const namespace = await page.locator('h1').innerText();
-    expect(namespace).toBe('Schedules');
+    expect(namespace).toBe('0 Schedules');
 
     const createButton = page.getByTestId('create-schedule');
     await expect(createButton).toBeEnabled();