Get WorkflowCount status filters working with other queries

temporalio · Sep 1, 2023 · 7316e8a · 7316e8a
1 parent 1c65b10
commit 7316e8a
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 53 deletions.
diff --git a/src/lib/components/workflow/filter-search/filter-list.svelte b/src/lib/components/workflow/filter-search/filter-list.svelte
@@ -20,6 +20,7 @@
   import { formatDate } from '$lib/utilities/format-date';
   import {
     isDateTimeFilter,
+    isStatusFilter,
     isTextFilter,
   } from '$lib/utilities/query/filter-search';
   import { emptyFilter } from '$lib/utilities/query/to-list-workflow-filters';
@@ -52,7 +53,9 @@
 
   let totalFiltersInView = 5;
 
-  $: visibleFilters = $workflowFilters.slice(0, totalFiltersInView);
+  $: visibleFilters = $workflowFilters
+    .filter((f) => !isStatusFilter(f.attribute))
+    .slice(0, totalFiltersInView);
   $: hasMoreFilters = totalFiltersInView < $workflowFilters.length;
 
   const viewMoreFilters = () => {

diff --git a/src/lib/components/workflow/filter-search/index.svelte b/src/lib/components/workflow/filter-search/index.svelte
@@ -22,7 +22,7 @@
   import WorkflowAdvancedSearch from '$lib/components/workflow/workflow-advanced-search.svelte';
   import Button from '$lib/holocene/button.svelte';
   import Icon from '$lib/holocene/icon/icon.svelte';
-import Input from '$lib/holocene/input/input.svelte';
+  import Input from '$lib/holocene/input/input.svelte';
   import {
     Menu,
     MenuButton,
@@ -54,7 +54,6 @@ import Input from '$lib/holocene/input/input.svelte';
   import DateTimeFilter from './datetime-filter.svelte';
   import FilterList from './filter-list.svelte';
   import NumberFilter from './number-filter.svelte';
-  import StatusFilter from './status-filter.svelte';
   import TextFilter from './text-filter.svelte';
 
   const filter = writable<WorkflowFilter>(emptyFilter());
@@ -143,9 +142,10 @@ import Input from '$lib/holocene/input/input.svelte';
   $: $activeQueryIndex, updateFocusedElementId();
 
   let searchAttributeValue = '';
+
   //  TODO: Add KeywordList support
   $: options = $sortedSearchAttributeOptions.filter(
-    (option) => !isListFilter(option.value),
+    (option) => !isListFilter(option.value) && !isStatusFilter(option.value),
   );
 
   $: filteredOptions = !searchAttributeValue
@@ -193,51 +193,47 @@ import Input from '$lib/holocene/input/input.svelte';
         class:filter={!showClearAllButton}
         on:keyup={handleKeyUp}
       >
-        {#if isStatusFilter($filter.attribute)}
-          <StatusFilter />
-        {:else}
-          <MenuContainer>
-            <MenuButton
-              controls="search-attribute-menu"
-              unroundRight={Boolean($filter.attribute)}
-              disabled={$activeQueryIndex !== null}
-              count={$filter.attribute ? 0 : $workflowFilters.length}
-            >
-              <svelte:fragment slot="leading">
-                {#if !$filter.attribute}
-                  <Icon name="filter" />
-                {/if}
-              </svelte:fragment>
-              {$filter.attribute || translate('workflows', 'filter')}
-            </MenuButton>
-            <Menu id="search-attribute-menu">
-              <Input
-                label={translate('search')}
-                labelHidden
-                id="filter-search"
-                noBorder
-                bind:value={searchAttributeValue}
-                icon="search"
-                placeholder={translate('search')}
-                class="mb-1"
-              />
-
-              {#each filteredOptions as { value, label }}
-                {@const disabled = isOptionDisabled(value, $workflowFilters)}
-                <MenuItem
-                  on:click={() => {
-                    handleNewQuery(value);
-                  }}
-                  {disabled}
-                >
-                  {label}
-                </MenuItem>
-              {:else}
-                <MenuItem on:click={noop}>{translate('no-results')}</MenuItem>
-              {/each}
-            </Menu>
-          </MenuContainer>
-        {/if}
+        <MenuContainer>
+          <MenuButton
+            controls="search-attribute-menu"
+            unroundRight={Boolean($filter.attribute)}
+            disabled={$activeQueryIndex !== null}
+            count={$filter.attribute ? 0 : $workflowFilters.length}
+          >
+            <svelte:fragment slot="leading">
+              {#if !$filter.attribute}
+                <Icon name="filter" />
+              {/if}
+            </svelte:fragment>
+            {$filter.attribute || translate('workflows', 'filter')}
+          </MenuButton>
+          <Menu id="search-attribute-menu">
+            <Input
+              label={translate('search')}
+              labelHidden
+              id="filter-search"
+              noBorder
+              bind:value={searchAttributeValue}
+              icon="search"
+              placeholder={translate('search')}
+              class="mb-1"
+            />
+
+            {#each filteredOptions as { value, label }}
+              {@const disabled = isOptionDisabled(value, $workflowFilters)}
+              <MenuItem
+                on:click={() => {
+                  handleNewQuery(value);
+                }}
+                {disabled}
+              >
+                {label}
+              </MenuItem>
+            {:else}
+              <MenuItem on:click={noop}>{translate('no-results')}</MenuItem>
+            {/each}
+          </Menu>
+        </MenuContainer>
 
         {#if isTextFilter($filter.attribute)}
           <div class="w-full" in:fly={{ x: -100, duration: 150 }}>

diff --git a/src/lib/components/workflow/workflow-count.svelte b/src/lib/components/workflow/workflow-count.svelte
@@ -1,12 +1,20 @@
 <script lang="ts">
+  import Spinner from '$lib/holocene/icon/svg/spinner.svelte';
+  import { workflowFilters } from '$lib/stores/filters';
+  import { loading, updating } from '$lib/stores/workflows';
   import type { WorkflowStatus as Status } from '$lib/types/workflows';
+  import { isStatusFilter } from '$lib/utilities/query/filter-search';
 
   import WorkflowStatus from '../workflow-status.svelte';
 
   export let status: Status | 'all' = 'all';
   export let count = 0;
   export let active = false;
   export let onStatusClick: (status: Status | 'all') => void = () => {};
+
+  $: hasNonStatusQuery = $workflowFilters.some(
+    (filter) => !isStatusFilter(filter.attribute),
+  );
 </script>
 
 <button
@@ -15,9 +23,17 @@
   on:click={() => onStatusClick(status)}
   on:keypress={() => onStatusClick(status)}
 >
-  <p class="font-mono text-sm lg:text-lg">{count.toLocaleString()}</p>
+  <div class="h-8 flex flex-col items-center">
+    {#if $loading || $updating}
+      <Spinner class="w-6 h-6 animate-spin" />
+    {:else}
+      <p class="font-mono text-sm lg:text-lg">{count.toLocaleString()}</p>
+    {/if}
+  </div>
   {#if status === 'all'}
-    <p class="font-primary text-sm lg:text-lg">All</p>
+    <p class="font-primary text-sm lg:text-lg">
+      {hasNonStatusQuery ? 'Query' : 'All'}
+    </p>
   {:else}
     <WorkflowStatus {status} />
   {/if}

diff --git a/src/lib/components/workflow/workflow-counts.svelte b/src/lib/components/workflow/workflow-counts.svelte
@@ -51,7 +51,9 @@
 
   const onStatusClick = (status: string) => {
     if (status === 'all') {
-      $workflowFilters = [];
+      $workflowFilters = $workflowFilters.filter(
+        (f) => !isStatusFilter(f.attribute),
+      );
     } else {
       if (statusFilters.find((s) => s.value === status)) {
         const nonStatusFilters = $workflowFilters.filter(
@@ -98,11 +100,17 @@
       const countRoute = routeForApi('workflows.count', {
         namespace: $page.params.namespace,
       });
+
+      const query = toListWorkflowQueryFromFilters(
+        combineFilters(
+          $workflowFilters.filter((f) => !isStatusFilter(f.attribute)),
+        ),
+      );
       const { count, groups } = await requestFromAPI<{
         count: string;
         groups: unknown[];
       }>(countRoute, {
-        params: { query: `${groupByClause}` },
+        params: { query: `${query} ${groupByClause}` },
         notifyOnError: false,
       });
       totalCount = parseInt(count);