Better styles and flex for Workflow Details (#2454)

* Better styles and flex for workflow details * Make grow a prop for CodeBlock * Add translation and truncate * Allow control of max size for menu's. Allow external control for combobox through open store. Update bottom nav to increase ability to dependency inject * oops * Use grow-0 * Remove prop --------- Co-authored-by: Alex Thomsen <[email protected]>
temporalio · Dec 4, 2024 · 0a9875f · 0a9875f
1 parent 6fc71e6
commit 0a9875f
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 59 deletions.
diff --git a/src/lib/components/lines-and-dots/workflow-detail.svelte b/src/lib/components/lines-and-dots/workflow-detail.svelte
@@ -16,21 +16,23 @@
   export let badge = false;
 </script>
 
-<p class="flex items-center gap-2 whitespace-nowrap {$$restProps.class}">
+<p
+  class="flex h-4 items-center justify-between gap-16 truncate whitespace-nowrap {$$restProps.class}"
+>
+  {#if title}
+    <span class="font-mono">{title}</span>
+  {/if}
+  {#if icon}
+    <Icon name={icon} />
+  {/if}
   {#if copyable}
     <Copyable
       copyIconTitle={translate('common.copy-icon-title')}
       copySuccessIconTitle={translate('common.copy-success-icon-title')}
       {content}
       visible
-      container-class="gap-1 w-full h-4"
+      container-class="gap-1 w-full justify-end"
     >
-      {#if icon}
-        <Icon name={icon} />
-      {/if}
-      {#if title}
-        <i>{title}</i>
-      {/if}
       {#if href}
         <Link
           {href}
@@ -50,26 +52,18 @@
         </Tooltip>
       {/if}
     </Copyable>
+  {:else if href}
+    <Link
+      {href}
+      class="value truncate rounded-sm p-1 leading-4 {badge &&
+        'surface-subtle'}">{content}</Link
+    >
   {:else}
-    {#if title}
-      <i>{title}</i>
-    {/if}
-    {#if icon}
-      <Icon name={icon} />
-    {/if}
-    {#if href}
-      <Link
-        {href}
-        class="value truncate rounded-sm p-1 leading-4 {badge &&
-          'surface-subtle'}">{content}</Link
+    <Tooltip text={tooltip} hide={!tooltip} top>
+      <span
+        class="w-fit select-all truncate rounded-sm p-1 leading-4"
+        class:surface-subtle={badge}>{content}</span
       >
-    {:else}
-      <Tooltip text={tooltip} hide={!tooltip} top>
-        <span
-          class="w-fit select-all truncate rounded-sm p-1 leading-4"
-          class:surface-subtle={badge}>{content}</span
-        >
-      </Tooltip>
-    {/if}
+    </Tooltip>
   {/if}
 </p>
diff --git a/src/lib/components/lines-and-dots/workflow-details.svelte b/src/lib/components/lines-and-dots/workflow-details.svelte
@@ -8,6 +8,7 @@
   import { formatDistanceAbbreviated } from '$lib/utilities/format-time';
   import {
     routeForWorkers,
+    routeForWorkflow,
     routeForWorkflowsWithQuery,
   } from '$lib/utilities/route-for';
 
@@ -22,15 +23,8 @@
   });
 </script>
 
-<div class="flex flex-col gap-2">
-  <div
-    class="grid w-full grid-flow-row grid-cols-1 gap-x-4 gap-y-2 text-sm lg:grid-cols-3 xl:grid-cols-4"
-  >
-    <WorkflowDetail
-      content={elapsedTime}
-      class="order-1 font-mono text-xl"
-      icon="clock"
-    />
+<div class="flex w-full flex-col gap-2 xl:flex-row xl:gap-16">
+  <div class="flex w-full flex-col gap-2 xl:w-1/3">
     <WorkflowDetail
       title={translate('common.start')}
       tooltip={$relativeTime
@@ -43,11 +37,7 @@
       content={formatDate(workflow?.startTime, $timeFormat, {
         relative: $relativeTime,
       })}
-      class="order-2"
     />
-
-    <div class="hidden lg:order-4 lg:block xl:order-5" />
-    <div class="hidden lg:order-7 lg:block xl:hidden" />
     <WorkflowDetail
       title={translate('common.end')}
       tooltip={$relativeTime
@@ -62,39 +52,50 @@
             relative: $relativeTime,
           })
         : '-'}
-      class="order-3 lg:order-5 xl:order-6"
     />
+    <WorkflowDetail content={elapsedTime} class="text-xl" icon="clock" />
+  </div>
+  <div class="flex w-full flex-col gap-2 xl:w-1/3">
     <WorkflowDetail
-      title={translate('common.task-queue')}
-      content={workflow?.taskQueue}
-      class="order-6 xl:order-4"
-      href={routeForWorkers({
-        namespace: $page.params.namespace,
-        workflow: workflow?.id,
-        run: workflow?.runId,
-      })}
+      title={translate('common.run-id')}
+      content={workflow?.runId}
+      copyable
     />
     <WorkflowDetail
       title={translate('common.workflow-type')}
       content={workflow?.name}
       copyable
       filterable
-      class="order-3"
       href={routeForWorkflowsWithQuery({
         namespace,
         query: `WorkflowType="${workflow?.name}"`,
       })}
     />
     <WorkflowDetail
-      title={translate('common.run-id')}
-      content={workflow?.runId}
-      copyable
-      class="order-8 xl:order-7"
+      title={translate('common.task-queue')}
+      content={workflow?.taskQueue}
+      href={routeForWorkers({
+        namespace: $page.params.namespace,
+        workflow: workflow?.id,
+        run: workflow?.runId,
+      })}
     />
+  </div>
+  <div class="flex w-full flex-col gap-2 xl:w-1/3">
+    {#if workflow?.parent}
+      <WorkflowDetail
+        title={translate('workflows.parent-workflow')}
+        content={workflow?.parent?.workflowId}
+        href={routeForWorkflow({
+          namespace,
+          workflow: workflow?.parent?.workflowId,
+          run: workflow?.parent?.runId,
+        })}
+      />
+    {/if}
     <WorkflowDetail
       title={translate('common.history-size-bytes')}
       content={workflow?.historySizeBytes}
-      class="order-9 xl:order-8"
     />
   </div>
 </div>
diff --git a/src/lib/holocene/code-block.svelte b/src/lib/holocene/code-block.svelte
@@ -188,7 +188,7 @@
   $: content, language, setView();
 </script>
 
-<div class="relative min-w-[80px] grow">
+<div class="relative min-w-[80px] grow-0">
   <div
     bind:this={editor}
     class={className}

diff --git a/src/lib/layouts/workflow-header.svelte b/src/lib/layouts/workflow-header.svelte
@@ -98,7 +98,7 @@
     {/if}
   </div>
 </div>
-<header class="rounded-top flex flex-col gap-1">
+<header class="rounded-top flex flex-col gap-2">
   <div class="flex flex-col items-center justify-between gap-4 lg:flex-row">
     <div class="flex flex-col items-center gap-4 lg:flex-row">
       <WorkflowStatus status={workflow?.status} big />
@@ -176,7 +176,7 @@
     </div>
   {/if}
   <Tabs>
-    <TabList class="flex flex-wrap gap-6 pb-1 pt-4" label="workflow detail">
+    <TabList class="flex flex-wrap gap-6 pt-2" label="workflow detail">
       <Tab
         label={translate('workflows.history-tab')}
         id="history-tab"

diff --git a/src/lib/layouts/workflow-run-layout.svelte b/src/lib/layouts/workflow-run-layout.svelte
@@ -226,7 +226,7 @@
     {:else if !$workflowRun.workflow}
       <Loading class="pt-24" />
     {:else}
-      <div class="border-b-2 border-subtle px-8 pt-8 md:pt-20">
+      <div class="border-b-2 border-subtle px-4 pt-8 md:pt-20 xl:px-8">
         <WorkflowHeader namespace={$page.params.namespace} />
       </div>
       <slot />