Add ability to query schedules

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

@@ -158,6 +158,7 @@
           disabled={Boolean(scheduleId)}
           on:input={onInput}
           on:blur={onBlur}
+          required
         />
       </div>
       <div class="w-full">
@@ -168,6 +169,7 @@
           error={errors['workflowType']}
           on:input={onInput}
           on:blur={onBlur}
+          required
         />
       </div>
       <div class="w-full">
@@ -178,6 +180,7 @@
           error={errors['workflowId']}
           on:input={onInput}
           on:blur={onBlur}
+          required
         />
       </div>
       <div class="w-full">
@@ -188,6 +191,7 @@
           error={errors['taskQueue']}
           on:input={onInput}
           on:blur={onBlur}
+          required
         />
       </div>
       <ScheduleInputPayload

src/lib/components/schedule/schedules-table-row.svelte

@@ -4,7 +4,9 @@
   import WorkflowStatus from '$lib/components/workflow-status.svelte';
   import Link from '$lib/holocene/link.svelte';
   import { translate } from '$lib/i18n/translate';
+  import type { ConfigurableTableHeader } from '$lib/stores/configurable-table-columns';
   import { relativeTime, timeFormat } from '$lib/stores/time-format';
+  import { decodePayloadAttributes } from '$lib/utilities/decode-payload';
   import { formatDate } from '$lib/utilities/format-date';
   import {
     routeForEventHistory,
@@ -18,11 +20,14 @@
   let { namespace } = $page.params;
 
   export let schedule: ScheduleListEntry;
+  export let columns: ConfigurableTableHeader[];
 
   $: spec = schedule?.info?.spec;
   $: calendar = spec?.structuredCalendar?.[0];
   $: interval = spec?.interval?.[0];
   $: timezoneName = spec?.timezoneName || 'UTC';
+  $: searchAttributes = schedule?.searchAttributes ?? {};
+  $: decodedAttributes = decodePayloadAttributes({ searchAttributes });
 
   const sortRecentActions = (recentActions: ScheduleActionResult[]) => {
     return (
@@ -43,45 +48,60 @@
 </script>
 
 <tr>
-  <td class="cell">
-    <WorkflowStatus status={schedule?.info?.paused ? 'Paused' : 'Running'} />
-  </td>
-  <td class="cell whitespace-pre-line break-words">
-    <Link href={route}>{schedule.scheduleId}</Link>
-  </td>
-  <td class="cell whitespace-pre-line break-words max-md:hidden">
-    {schedule?.info?.workflowType?.name ?? ''}
-  </td>
-  <td class="cell truncate">
-    {#each sortRecentActions(schedule?.info?.recentActions) as run}
-      <p>
-        <Link
-          href={routeForEventHistory({
-            namespace,
-            workflow: run?.startWorkflowResult?.workflowId,
-            run: run?.startWorkflowResult?.runId,
-          })}
-          >{formatDate(run?.actualTime, $timeFormat, {
-            relative: $relativeTime,
-          })}</Link
-        >
-      </p>
-    {/each}
-  </td>
-  <td class="cell truncate">
-    {#each schedule?.info?.futureActionTimes?.slice(0, 5) ?? [] as run}
-      <div>
-        {formatDate(run, $timeFormat, {
-          relative: $relativeTime,
-          relativeLabel: translate('common.from-now'),
-        })}
-      </div>
-    {/each}
-  </td>
-  <td class="cell">
-    <p>{@html translate('common.timezone', { timezone: timezoneName })}</p>
-    <ScheduleBasicFrequency {calendar} {interval} />
-  </td>
+  {#each columns as { label } (label)}
+    {#if label === translate('common.status')}
+      <td class="cell">
+        <WorkflowStatus
+          status={schedule?.info?.paused ? 'Paused' : 'Running'}
+        />
+      </td>
+    {:else if label === translate('schedules.id')}
+      <td class="cell whitespace-pre-line break-words">
+        <Link href={route}>{schedule.scheduleId}</Link>
+      </td>
+    {:else if label === translate('common.workflow-type')}
+      <td class="cell whitespace-pre-line break-words">
+        {schedule?.info?.workflowType?.name ?? ''}
+      </td>
+    {:else if label === translate('schedules.recent-runs')}
+      <td class="cell truncate">
+        {#each sortRecentActions(schedule?.info?.recentActions) as run}
+          <p>
+            <Link
+              href={routeForEventHistory({
+                namespace,
+                workflow: run?.startWorkflowResult?.workflowId,
+                run: run?.startWorkflowResult?.runId,
+              })}
+              >{formatDate(run?.actualTime, $timeFormat, {
+                relative: $relativeTime,
+              })}</Link
+            >
+          </p>
+        {/each}
+      </td>
+    {:else if label === translate('schedules.upcoming-runs')}
+      <td class="cell truncate">
+        {#each schedule?.info?.futureActionTimes?.slice(0, 5) ?? [] as run}
+          <div>
+            {formatDate(run, $timeFormat, {
+              relative: $relativeTime,
+              relativeLabel: translate('common.from-now'),
+            })}
+          </div>
+        {/each}
+      </td>
+    {:else if label === translate('schedules.schedule-spec')}
+      <td class="cell">
+        <p>{@html translate('common.timezone', { timezone: timezoneName })}</p>
+        <ScheduleBasicFrequency {calendar} {interval} />
+      </td>
+    {:else}
+      <td class="cell">
+        {decodedAttributes?.searchAttributes?.indexedFields?.[label] ?? ''}
+      </td>
+    {/if}
+  {/each}
 </tr>
 
 <style lang="postcss">

src/lib/components/workflow/filter-search/duration-filter.svelte → src/lib/components/search-attribute-filter/duration-filter.svelte

@@ -33,11 +33,11 @@
   };
 </script>
 
-<ConditionalMenu inputId="duration-filter-search" noBorderLeft />
+<ConditionalMenu inputId="duration-filter" noBorderLeft />
 <Input
   label={$filter.attribute}
   labelHidden
-  id="duration-filter-search"
+  id="duration-filter"
   type="search"
   placeholder={`${translate('common.enter')} ${$filter.attribute} (${translate(
     'workflows.duration-filter-placeholder',

src/lib/components/workflow/filter-search/filter-list.svelte → src/lib/components/search-attribute-filter/filter-list.svelte

@@ -9,8 +9,8 @@
   import Button from '$lib/holocene/button.svelte';
   import Chip from '$lib/holocene/chip.svelte';
   import { translate } from '$lib/i18n/translate';
+  import type { SearchAttributeFilter } from '$lib/models/search-attribute-filters';
   import { isWorkflowStatusType } from '$lib/models/workflow-status';
-  import { workflowFilters } from '$lib/stores/filters';
   import {
     relativeTime,
     timeFormat,
@@ -21,22 +21,24 @@
   import {
     isDateTimeFilter,
     isTextFilter,
-  } from '$lib/utilities/query/filter-search';
+  } from '$lib/utilities/query/search-attribute-filter';
   import { emptyFilter } from '$lib/utilities/query/to-list-workflow-filters';
   import { updateQueryParamsFromFilter } from '$lib/utilities/query/to-list-workflow-filters';
 
   import { FILTER_CONTEXT, type FilterContext } from './index.svelte';
 
+  export let filters: SearchAttributeFilter[];
+
   const { filter, activeQueryIndex } =
     getContext<FilterContext>(FILTER_CONTEXT);
 
   const removeQuery = (index: number) => {
-    $workflowFilters.splice(index, 1);
-    $workflowFilters = $workflowFilters;
-    updateQueryParamsFromFilter($page.url, $workflowFilters);
+    filters.splice(index, 1);
+    filters = filters;
+    updateQueryParamsFromFilter($page.url, filters);
 
-    if (index === $workflowFilters.length) {
-      const previousQuery = $workflowFilters[$workflowFilters.length - 1];
+    if (index === filters.length) {
+      const previousQuery = filters[filters.length - 1];
       if (previousQuery) {
         previousQuery.operator = '';
       }
@@ -52,8 +54,8 @@
 
   let totalFiltersInView = 5;
 
-  $: visibleFilters = $workflowFilters.slice(0, totalFiltersInView);
-  $: hasMoreFilters = totalFiltersInView < $workflowFilters.length;
+  $: visibleFilters = filters.slice(0, totalFiltersInView);
+  $: hasMoreFilters = totalFiltersInView < filters.length;
 
   const viewMoreFilters = () => {
     if (hasMoreFilters) {