Worker insights

.gitignore

@@ -28,4 +28,4 @@ go.work.sum
 .claude/*
 !.claude/skills/
 .sisyphus/*
-.omc
+.omc

src/lib/components/lines-and-dots/workflow-details.svelte

@@ -6,7 +6,7 @@
   import { translate } from '$lib/i18n/translate';
   import { fetchWorkflow } from '$lib/services/workflow-service';
   import { isCloud } from '$lib/stores/advanced-visibility';
-  import { fullEventHistory } from '$lib/stores/events';
+  import { fullEventHistory, sdkInfo } from '$lib/stores/events';
   import {
     relativeTime,
     timeFormat,
@@ -19,8 +19,6 @@
     formatDuration,
   } from '$lib/utilities/format-time';
   import { getBuildIdFromVersion } from '$lib/utilities/get-deployment-build-id';
-  import { getSDKandVersion } from '$lib/utilities/get-sdk-version';
-  import { isWorkflowTaskCompletedEvent } from '$lib/utilities/is-event-type';
   import {
     routeForSchedule,
     routeForTaskQueue,
@@ -81,16 +79,12 @@
     ],
   );
   let totalActions = $derived(
-    $fullEventHistory.reduce((acc, e) => e.billableActions + acc, 0).toString(),
+    $fullEventHistory
+      .reduce((acc, e) => (e?.billableActions ?? 0) + acc, 0)
+      .toString(),
   );
 
-  const workflowCompletedTasks = $derived(
-    $fullEventHistory.filter(isWorkflowTaskCompletedEvent),
-  );
-
-  const { sdk, version: sdkVersion } = $derived(
-    getSDKandVersion(workflowCompletedTasks),
-  );
+  const { sdk, version: sdkVersion } = $derived($sdkInfo);
 
   const fetchLatestRun = async () => {
     const result = await fetchWorkflow({
@@ -166,18 +160,20 @@
       href={routeForWorkflowsWithQuery({
         namespace,
         query: `WorkflowType="${workflow?.name}"`,
-      })}
+      }) ?? ''}
       iconName="filter"
     />
 
-    <DetailListLabel>{translate('common.task-queue')}</DetailListLabel>
-    <DetailListLinkValue
-      text={workflow?.taskQueue}
-      href={routeForTaskQueue({
-        namespace,
-        queue: workflow?.taskQueue,
-      })}
-    />
+    {#if workflow?.taskQueue}
+      <DetailListLabel>{translate('common.task-queue')}</DetailListLabel>
+      <DetailListLinkValue
+        text={workflow.taskQueue}
+        href={routeForTaskQueue({
+          namespace,
+          queue: workflow.taskQueue,
+        })}
+      />
+    {/if}
 
     {#if workflow?.priority}
       {@const { priorityKey, fairnessKey } = workflow.priority}
@@ -214,11 +210,11 @@
           copyableText={versioningBuildId}
           text={versioningBuildId}
           href={deploymentVersion
-            ? routeForWorkflowsWithQuery({
+            ? (routeForWorkflowsWithQuery({
                 namespace,
                 query: `TemporalWorkerDeploymentVersion="${deploymentVersion}"`,
-              })
-            : undefined}
+              }) ?? '')
+            : ''}
           iconName={deploymentVersion ? 'filter' : undefined}
         />
       {/if}
@@ -234,7 +230,7 @@
           href={routeForWorkflowsWithQuery({
             namespace,
             query: `TemporalWorkflowVersioningBehavior="${versioningBehavior}"`,
-          })}
+          }) ?? ''}
           iconName="filter"
         />
       {/if}
@@ -252,15 +248,15 @@
         })}
       />
     {/if}
-    {#if parent}
+    {#if parent?.workflowId && parent?.runId}
       <DetailListLabel>{translate('workflows.parent-workflow')}</DetailListLabel
       >
       <DetailListLinkValue
-        text={parent?.workflowId}
+        text={parent.workflowId}
         href={routeForWorkflow({
           namespace,
-          workflow: parent?.workflowId,
-          run: parent?.runId,
+          workflow: parent.workflowId,
+          run: parent.runId,
         })}
       />
     {/if}
@@ -305,7 +301,7 @@
     {/if}
 
     {#if sdk && sdkVersion}
-      <DetailListLabel>SDK</DetailListLabel>
+      <DetailListLabel>{translate('workflows.sdk')}</DetailListLabel>
       <DetailListValue>
         <SdkLogo {sdk} version={sdkVersion} />
       </DetailListValue>

src/lib/components/shared-search-attribute-filter/filter-bar.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import type { Writable } from 'svelte/store';
+
+  import Button from '$lib/holocene/button.svelte';
+  import Icon from '$lib/holocene/icon/icon.svelte';
+  import Tooltip from '$lib/holocene/tooltip.svelte';
+  import type { SearchAttributeFilter } from '$lib/models/search-attribute-filters';
+  import type { SearchAttributeOption } from '$lib/stores/search-attributes';
+
+  import type { StatusAttribute } from './types.ts';
+
+  import Filter from './filter.svelte';
+  import ManualQuery from './manual-query.svelte';
+
+  interface Props {
+    filters: Writable<SearchAttributeFilter[]>;
+    options: SearchAttributeOption[];
+    id: string;
+    statusAttribute?: StatusAttribute;
+    onManualSearch?: (query: string) => void;
+  }
+
+  let { filters, options, id, statusAttribute, onManualSearch }: Props =
+    $props();
+
+  let viewManualQuery = $state(false);
+</script>
+
+<div>
+  <div
+    class="flex w-full flex-wrap items-center justify-between gap-2 border border-subtle bg-primary p-1.5"
+  >
+    <div class="flex grow items-center justify-start gap-4 px-2">
+      <Icon name="filter-lines" class="text-primary-text h-4 w-4 shrink-0" />
+      <Filter {filters} {options} {id} {statusAttribute} />
+    </div>
+    <div class="flex items-center gap-1">
+      <Tooltip
+        text={viewManualQuery ? 'Hide raw query' : 'View raw query'}
+        left
+      >
+        <Button
+          variant="ghost"
+          size="xs"
+          leadingIcon="json"
+          active={viewManualQuery}
+          data-testid="toggle-manual-query"
+          on:click={() => (viewManualQuery = !viewManualQuery)}
+        />
+      </Tooltip>
+    </div>
+  </div>
+  {#if viewManualQuery}
+    <ManualQuery {filters} {id} onSearch={onManualSearch} />
+  {/if}
+</div>

src/lib/components/shared-search-attribute-filter/filter-list.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+  import type { Writable } from 'svelte/store';
+
+  import { getContext } from 'svelte';
+
+  import { page } from '$app/state';
+
+  import DropdownFilterChip from '$lib/components/workflow/filter-bar/dropdown-filter-chip.svelte';
+  import Button from '$lib/holocene/button.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import type { SearchAttributeFilter } from '$lib/models/search-attribute-filters';
+  import { createFilter } from '$lib/utilities/query/to-list-workflow-filters';
+  import { updateQueryParamsFromFilter } from '$lib/utilities/query/to-list-workflow-filters';
+
+  import type { StatusAttribute } from './types.ts';
+
+  import {
+    SEARCH_ATTRIBUTE_FILTER_CONTEXT,
+    type SearchAttributeFilterContext,
+  } from './filter.svelte';
+  import StatusFilterChip from './status-filter-chip.svelte';
+
+  interface Props {
+    filters: Writable<SearchAttributeFilter[]>;
+    statusAttribute?: StatusAttribute;
+  }
+
+  let { filters, statusAttribute }: Props = $props();
+
+  const isStatusFilter = (f: SearchAttributeFilter) =>
+    statusAttribute ? f.attribute === statusAttribute : false;
+
+  const { filter, activeQueryIndex, chipOpenIndex } =
+    getContext<SearchAttributeFilterContext>(SEARCH_ATTRIBUTE_FILTER_CONTEXT);
+
+  let totalFiltersInView = $state(10);
+
+  const firstExecutionStatusIndex = $derived(
+    $filters.findIndex((filter) => isStatusFilter(filter)),
+  );
+  const visibleFilters = $derived($filters.slice(0, totalFiltersInView));
+  const statusFilters = $derived(
+    statusAttribute
+      ? $filters.filter((filter) => filter.attribute === statusAttribute)
+      : [],
+  );
+  const nonStatusFilters = $derived(
+    $filters.filter((filter) => !isStatusFilter(filter)),
+  );
+  const hasMoreFilters = $derived(totalFiltersInView < $filters.length);
+
+  function updateFilter(index: number, updatedFilter: SearchAttributeFilter) {
+    const next = [...$filters];
+    next[index] = updatedFilter;
+    $filters = next;
+    updateQueryParamsFromFilter(page.url, $filters);
+  }
+
+  function updateStatusFilters(
+    index: number,
+    updatedFilters: SearchAttributeFilter[],
+  ) {
+    if (updatedFilters.length === 0) {
+      $filters = nonStatusFilters;
+      updateQueryParamsFromFilter(page.url, $filters);
+    } else {
+      const next = [...$filters];
+      next.splice(index, statusFilters.length, ...updatedFilters);
+      $filters = next;
+      updateQueryParamsFromFilter(page.url, $filters);
+    }
+  }
+
+  function removeFilter(index: number) {
+    const next = [...$filters];
+    next.splice(index, 1);
+    $filters = next;
+    updateQueryParamsFromFilter(page.url, $filters);
+
+    if (index === $filters.length && $filters.length > 0) {
+      const previousQuery = $filters[$filters.length - 1];
+      if (previousQuery) {
+        previousQuery.operator = '';
+      }
+    }
+
+    if (index === $activeQueryIndex) {
+      $activeQueryIndex = null;
+      $filter = createFilter();
+    } else if ($activeQueryIndex !== null && index < $activeQueryIndex) {
+      $activeQueryIndex -= 1;
+    }
+  }
+
+  function viewMoreFilters() {
+    if (hasMoreFilters) {
+      totalFiltersInView += 10;
+    }
+  }
+</script>
+
+{#if visibleFilters.length > 0}
+  <div class="flex flex-wrap items-center gap-2">
+    {#each visibleFilters as filterItem, i (filterItem.id)}
+      {#if statusAttribute && isStatusFilter(filterItem) && i === firstExecutionStatusIndex}
+        <StatusFilterChip
+          attribute={statusAttribute}
+          filters={statusFilters}
+          index={i}
+          openIndex={$chipOpenIndex}
+          onUpdate={(updatedStatusFilters) =>
+            updateStatusFilters(i, updatedStatusFilters)}
+        />
+      {:else if !isStatusFilter(filterItem) && filterItem.attribute}
+        <DropdownFilterChip
+          filter={filterItem}
+          index={i}
+          openIndex={$chipOpenIndex}
+          onUpdate={(updatedFilter) => updateFilter(i, updatedFilter)}
+          onRemove={() => removeFilter(i)}
+        />
+      {/if}
+    {/each}
+
+    {#if hasMoreFilters}
+      <Button variant="secondary" size="xs" on:click={viewMoreFilters}>
+        {translate('common.view-more')}
+      </Button>
+    {/if}
+  </div>
+{/if}