Workflows Table Row Density

src/lib/components/workflow/workflows-summary-configurable-table.svelte

@@ -12,6 +12,7 @@
     fetchPaginatedWorkflows,
   } from '$lib/services/workflow-service';
   import { configurableTableColumns } from '$lib/stores/configurable-table-columns';
+  import { tableDensity } from '$lib/stores/table-density';
   import { refresh, workflowCount } from '$lib/stores/workflows';
   import type { WorkflowExecution } from '$lib/types/workflows';
   import { exportWorkflows } from '$lib/utilities/export-workflows';
@@ -74,6 +75,12 @@
   };
 
   $: onFetch = () => fetchPaginatedWorkflows(namespace, query);
+
+  $: compact = $tableDensity === 'compact';
+
+  const setTableDensity = () => {
+    $tableDensity = compact ? 'comfortable' : 'compact';
+  };
 </script>
 
 {#key [namespace, query, $refresh]}
@@ -128,6 +135,21 @@
       </TableEmptyState>
     </svelte:fragment>
     <svelte:fragment slot="actions-end-additional" let:visibleItems let:page>
+      <Tooltip
+        text={compact
+          ? translate('common.dense')
+          : translate('common.comfortable')}
+        top
+      >
+        <Button
+          on:click={setTableDensity}
+          data-testid="table-density-button"
+          size="xs"
+          variant="ghost"
+          leadingIcon={compact ? 'table-compact' : 'table-comfy'}
+        ></Button>
+      </Tooltip>
+
       <Tooltip text={translate('common.download-json')} top>
         <Button
           on:click={() => exportWorkflows(visibleItems, page)}

src/lib/components/workflow/workflows-summary-configurable-table/filterable-table-cell.svelte

@@ -15,31 +15,25 @@
     createFilter,
     updateQueryParamsFromFilter,
   } from '$lib/utilities/query/to-list-workflow-filters';
+  import { truncateValue } from '$lib/utilities/truncate-value';
 
   type Props = {
     attribute: string;
     filterOrCopyButtonsVisible: boolean;
     value: string;
     href?: string;
     type?: SearchAttributeType;
+    truncate?: boolean;
   };
   let {
     attribute,
     filterOrCopyButtonsVisible = false,
     value,
     href,
     type = SEARCH_ATTRIBUTE_TYPE.KEYWORD,
+    truncate = true,
   }: Props = $props();
 
-  const truncateRunId = (runId: string): string => {
-    if (runId.length > 11) {
-      return `${runId.slice(0, 4)}...${runId.slice(-4)}`;
-    }
-    return runId;
-  };
-
-  const isRunId = attribute === 'RunId';
-
   const onRowFilterClick = () => {
     const filter = $workflowFilters.find((f) => f.attribute === attribute);
     const getOtherFilters = () =>
@@ -61,23 +55,25 @@
   };
 </script>
 
-{#if isRunId}
-  <Tooltip text={value} top class="min-w-0">
-    <Link {href} class="cursor-help">{truncateRunId(value)}</Link>
+{#if href}
+  <Tooltip text={value} top class="min-w-0" hide={!truncate}>
+    <Link {href}>{truncate ? truncateValue(value) : value}</Link>
   </Tooltip>
-{:else if href}
-  <Link {href}>{value}</Link>
 {:else}
-  {value}
+  <Tooltip text={value} top class="min-w-0" hide={!truncate}>
+    {truncate ? truncateValue(value) : value}
+  </Tooltip>
+{/if}
+{#if !truncate}
+  <FilterOrCopyButtons
+    copyIconTitle={translate('common.copy-icon-title')}
+    copySuccessIconTitle={translate('common.copy-success-icon-title')}
+    filterIconTitle={translate('common.filter-workflows')}
+    show={filterOrCopyButtonsVisible}
+    content={value}
+    onFilter={onRowFilterClick}
+    filtered={$workflowFilters.some(
+      (filter) => filter.attribute === attribute && filter.value === value,
+    )}
+  />
 {/if}
-<FilterOrCopyButtons
-  copyIconTitle={translate('common.copy-icon-title')}
-  copySuccessIconTitle={translate('common.copy-success-icon-title')}
-  filterIconTitle={translate('common.filter-workflows')}
-  show={filterOrCopyButtonsVisible}
-  content={value}
-  onFilter={onRowFilterClick}
-  filtered={$workflowFilters.some(
-    (filter) => filter.attribute === attribute && filter.value === value,
-  )}
-/>

src/lib/components/workflow/workflows-summary-configurable-table/table-body-cell.svelte

@@ -4,12 +4,14 @@
   import Timestamp from '$lib/components/timestamp.svelte';
   import WorkflowStatus from '$lib/components/workflow-status.svelte';
   import Badge from '$lib/holocene/badge.svelte';
+  import Tooltip from '$lib/holocene/tooltip.svelte';
   import type { ConfigurableTableHeader } from '$lib/stores/configurable-table-columns';
   import {
     customSearchAttributes,
     isCustomSearchAttribute,
     workflowIncludesSearchAttribute,
   } from '$lib/stores/search-attributes';
+  import { tableDensity } from '$lib/stores/table-density';
   import {
     SEARCH_ATTRIBUTE_TYPE,
     type WorkflowExecution,
@@ -22,6 +24,7 @@
     routeForWorkerDeployment,
     routeForWorkflow,
   } from '$lib/utilities/route-for';
+  import { truncateValue } from '$lib/utilities/truncate-value';
   import { isWorkflowTaskFailure } from '$lib/utilities/workflow-task-failures';
 
   import FilterableTableCell from './filterable-table-cell.svelte';
@@ -32,6 +35,7 @@
     archival?: boolean;
   };
   let { column, workflow, archival = false }: Props = $props();
+  let truncate = $derived($tableDensity === 'compact');
 
   const { label } = $derived(column);
   const namespace = $derived(page.params.namespace);
@@ -69,7 +73,8 @@
 
 {#if filterableLabels.includes(label) || isCustomKeywordOrTextAttribute}
   <td
-    class="workflows-summary-table-body-cell filterable"
+    class="workflows-summary-table-body-cell"
+    class:filterable={!truncate}
     data-testid="workflows-summary-table-body-cell"
     onmouseover={showFilterOrCopy}
     onfocus={showFilterOrCopy}
@@ -89,6 +94,7 @@
           run: workflow.runId,
           archival,
         })}
+        {truncate}
       />
     {:else if label === 'Workflow ID'}
       <FilterableTableCell
@@ -101,6 +107,7 @@
           run: workflow.runId,
           archival,
         })}
+        {truncate}
       />
     {:else if label === 'Run ID'}
       <FilterableTableCell
@@ -113,6 +120,7 @@
           run: workflow.runId,
           archival,
         })}
+        {truncate}
       />
     {:else if label === 'Deployment'}
       {@const deployment =
@@ -127,6 +135,7 @@
               deployment,
             })
           : undefined}
+        {truncate}
       />
     {:else if label === 'Deployment Version'}
       {@const version =
@@ -136,6 +145,7 @@
         {filterOrCopyButtonsVisible}
         attribute="TemporalWorkerDeploymentVersion"
         value={version && typeof version === 'string' ? version : ''}
+        {truncate}
       />
     {:else if label === 'Build ID'}
       {@const buildId =
@@ -148,6 +158,7 @@
         {filterOrCopyButtonsVisible}
         attribute="TemporalWorkerBuildId"
         value={buildId && typeof buildId === 'string' ? buildId : ''}
+        {truncate}
       />
     {:else if label === 'Versioning Behavior'}
       {@const behavior =
@@ -157,6 +168,7 @@
         {filterOrCopyButtonsVisible}
         attribute="TemporalWorkflowVersioningBehavior"
         value={behavior && typeof behavior === 'string' ? behavior : ''}
+        {truncate}
       />
     {:else if isCustomKeywordOrTextAttribute}
       {@const content = workflow.searchAttributes?.indexedFields?.[label]}
@@ -165,6 +177,7 @@
         attribute={label}
         value={content}
         type={$customSearchAttributes[label]}
+        {truncate}
       />
     {:else if label === 'Scheduled By ID'}
       {@const scheduleId =
@@ -173,13 +186,16 @@
         {filterOrCopyButtonsVisible}
         attribute="TemporalScheduledById"
         value={scheduleId && typeof scheduleId === 'string' ? scheduleId : ''}
+        {truncate}
       />
     {/if}
   </td>
 {:else}
   <td
     class="workflows-summary-table-body-cell"
     data-testid="workflows-summary-table-body-cell"
+    class:comfy={!truncate}
+    class:dense={truncate}
   >
     {#if label === 'Status'}
       <WorkflowStatus
@@ -188,9 +204,15 @@
         taskFailure={isWorkflowTaskFailure(workflow)}
       />
     {:else if label === 'End'}
-      <Timestamp dateTime={workflow.endTime} />
+      <Timestamp
+        dateTime={workflow.endTime}
+        options={{ format: truncate ? 'short' : 'long' }}
+      />
     {:else if label === 'Start'}
-      <Timestamp dateTime={workflow.startTime} />
+      <Timestamp
+        dateTime={workflow.startTime}
+        options={{ format: truncate ? 'short' : 'long' }}
+      />
     {:else if label === 'Task Queue'}
       {workflow.taskQueue}
     {:else if label === 'Parent Namespace'}
@@ -202,7 +224,10 @@
         ? workflow.stateTransitionCount
         : ''}
     {:else if label === 'Execution Time'}
-      <Timestamp dateTime={workflow.executionTime} />
+      <Timestamp
+        dateTime={workflow.executionTime}
+        options={{ format: truncate ? 'short' : 'long' }}
+      />
     {:else if label === 'Execution Duration'}
       {formatDistance({
         start: workflow.startTime,
@@ -217,18 +242,26 @@
       {@const content =
         workflow.searchAttributes?.indexedFields?.TemporalScheduledStartTime}
       {#if content && typeof content === 'string'}
-        <Timestamp dateTime={content} />
+        <Timestamp
+          dateTime={content}
+          options={{ format: truncate ? 'short' : 'long' }}
+        />
       {/if}
     {:else if label === 'Change Version'}
       {workflow.searchAttributes?.indexedFields?.TemporalChangeVersion}
     {:else if isCustomSearchAttribute(label) && workflowIncludesSearchAttribute(workflow, label)}
       {@const content = workflow.searchAttributes?.indexedFields?.[label]}
       {#if $customSearchAttributes[label] === SEARCH_ATTRIBUTE_TYPE.DATETIME && typeof content === 'string'}
-        <Timestamp dateTime={content} />
+        <Timestamp
+          dateTime={content}
+          options={{ format: truncate ? 'short' : 'long' }}
+        />
       {:else if $customSearchAttributes[label] === SEARCH_ATTRIBUTE_TYPE.BOOL}
         <Badge>{content}</Badge>
       {:else}
-        {content}
+        <Tooltip text={content} top class="min-w-0" hide={!truncate}>
+          {truncate ? truncateValue(content) : content}
+        </Tooltip>
       {/if}
     {/if}
   </td>

src/lib/components/workflow/workflows-summary-configurable-table/table-row.svelte

@@ -14,6 +14,7 @@
     type BatchOperationContext,
   } from '$lib/pages/workflows-with-new-search.svelte';
   import { supportsBulkActions } from '$lib/stores/bulk-actions';
+  import { tableDensity } from '$lib/stores/table-density';
   import type { WorkflowExecution } from '$lib/types/workflows';
   import { workflowCreateDisabled } from '$lib/utilities/workflow-create-disabled';
 
@@ -71,6 +72,7 @@
           workflowId={workflow.id}
           taskQueue={workflow.taskQueue}
           workflowType={workflow.name}
+          class={$tableDensity === 'compact' ? 'mt-1 h-5 w-5' : ''}
         />
       {/if}
       <IsTemporalServerVersionGuard minimumVersion="1.23.0">
@@ -79,6 +81,7 @@
             size="xs"
             variant={childrenShown ? 'primary' : 'ghost'}
             on:click={() => viewChildren(workflow)}
+            class={$tableDensity === 'compact' ? 'mt-1 h-5 w-5' : ''}
           >
             <Tooltip
               text={childrenShown

src/lib/holocene/icon/paths.ts

@@ -121,6 +121,8 @@ import sun from './svg/sun.svelte';
 import support from './svg/support.svelte';
 import switchIcon from './svg/switch.svelte';
 import systemWindow from './svg/system-window.svelte';
+import tableComfy from './svg/table-comfy.svelte';
+import tableCompact from './svg/table-compact.svelte';
 import table from './svg/table.svelte';
 import tag from './svg/tag.svelte';
 import target from './svg/target.svelte';
@@ -271,6 +273,8 @@ export const icons = {
   support,
   switch: switchIcon,
   table,
+  'table-comfy': tableComfy,
+  'table-compact': tableCompact,
   tag,
   target,
   'temporal-logo': temporalLogo,

src/lib/holocene/icon/svg/table-comfy.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import Svg from '../svg.svelte';
+  let props = $props();
+</script>
+
+<Svg {...props}>
+  <path
+    stroke="currentcolor"
+    stroke-width="2"
+    d="M3 22H21C21.5523 22 22 21.5523 22 21V3C22 2.44772 21.5523 2 21 2H3C2.44772 2 2 2.44772 2 3V21C2 21.5523 2.44772 22 3 22Z"
+  ></path>
+  <path stroke="currentcolor" stroke-width="2" d="M22 8.75L2 8.75"></path>
+  <path stroke="currentcolor" stroke-width="2" d="M22 15.25L2 15.25"></path>
+</Svg>

src/lib/holocene/icon/svg/table-compact.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import Svg from '../svg.svelte';
+  let props = $props();
+</script>
+
+<Svg {...props}>
+  <path
+    stroke="currentcolor"
+    stroke-width="2"
+    d="M3 22H21C21.5523 22 22 21.5523 22 21V3C22 2.44772 21.5523 2 21 2H3C2.44772 2 2 2.44772 2 3V21C2 21.5523 2.44772 22 3 22Z"
+  ></path>
+  <path stroke="currentcolor" stroke-width="2" d="M22 6L2 6"></path>
+  <path stroke="currentcolor" stroke-width="2" d="M22 10L2 10"></path>
+  <path stroke="currentcolor" stroke-width="2" d="M22 14L2 14"></path>
+  <path stroke="currentcolor" stroke-width="2" d="M22 18L2 18"></path>
+</Svg>

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

@@ -218,4 +218,7 @@ export const Strings = {
   'slack-community': 'Slack Community',
   'community-forum': 'Community Forum',
   'change-log': 'Change Log',
+  compact: 'Compact',
+  comfortable: 'Comfortable',
+  dense: 'Dense',
 } as const;

src/lib/stores/table-density.ts

@@ -0,0 +1,8 @@
+import { persistStore } from './persist-store';
+
+type TableDensity = 'compact' | 'comfortable';
+export const tableDensity = persistStore<TableDensity>(
+  'tableDensity',
+  'comfortable',
+  true,
+);