Skip to content

Commit 290fcf4

Browse files
Alex-TidemanAlex-Tideman
authored
Only query workflow metadata for running workflows (#2560)
* Only query workflow metadata for running workflows * Remove space * Add query details button if running * Use update details * Translate * Add css to go renderer, always show Current Details accordion * Refactor based on updates, set no current details in api call, remove button, better padding
1 parent 22ecd45 commit 290fcf4

File tree

10 files changed

+304
-75
lines changed

10 files changed

+304
-75
lines changed

Diff for: ‎server/server/route/ui.go

+132
Original file line numberDiff line numberDiff line change
@@ -176,6 +176,138 @@ func SetRenderRoute(e *echo.Echo, publicPath string) {
176176
Content: template.HTML(renderedHTML),
177177
Nonce: nonce,
178178
Theme: theme,
179+
CSS: `*,
180+
body {
181+
margin: 0;
182+
padding: 0;
183+
border: 0;
184+
font-size: 100%;
185+
vertical-align: baseline;
186+
}
187+
188+
body {
189+
overscroll-behavior: none;
190+
position: relative;
191+
padding: 1rem;
192+
white-space: pre-line;
193+
font-family: sans-serif;
194+
}
195+
196+
h1 {
197+
font-size: 2em;
198+
}
199+
200+
h2 {
201+
font-size: 1.5em;
202+
}
203+
204+
h3 {
205+
font-size: 1.17em;
206+
}
207+
208+
h4 {
209+
font-size: 1em;
210+
}
211+
212+
h5 {
213+
font-size: 0.83em;
214+
}
215+
216+
h6 {
217+
font-size: 0.67em;
218+
}
219+
220+
blockquote,
221+
q {
222+
quotes: none;
223+
}
224+
blockquote:before,
225+
blockquote:after,
226+
q:before,
227+
q:after {
228+
content: '';
229+
content: none;
230+
}
231+
232+
table {
233+
border-collapse: collapse;
234+
border-spacing: 0;
235+
}
236+
237+
ul,
238+
ol {
239+
white-space: normal;
240+
}
241+
242+
li {
243+
list-style-position: inside;
244+
}
245+
246+
li * {
247+
display: inline;
248+
}
249+
250+
a {
251+
gap: 0.5rem;
252+
align-items: center;
253+
border-radius: 0.25rem;
254+
max-width: fit-content;
255+
text-decoration: underline;
256+
text-underline-offset: 2px;
257+
cursor: pointer;
258+
}
259+
260+
blockquote {
261+
padding-top: 0;
262+
padding-bottom: 0;
263+
padding-left: 0.5rem;
264+
border-left: 4px solid;
265+
border-left-color: #92a4c3;
266+
background: #e8efff;
267+
color: #121416;
268+
p {
269+
font-size: 1.25rem;
270+
line-height: 1.75rem;
271+
}
272+
}
273+
274+
code {
275+
font-family: monospace;
276+
padding-top: 0.125rem;
277+
padding-bottom: 0.125rem;
278+
padding-left: 0.25rem;
279+
padding-right: 0.25rem;
280+
border-radius: 0.25rem;
281+
background: #e8efff;
282+
color: #121416;
283+
}
284+
285+
pre {
286+
font-family: monospace;
287+
padding: 0.25rem;
288+
border-radius: 0.25rem;
289+
background: #e8efff;
290+
color: #121416;
291+
code {
292+
padding: 0;
293+
}
294+
}
295+
296+
body[data-theme='light'] {
297+
background-color: #fff;
298+
color: #121416;
299+
a {
300+
color: #444ce7;
301+
}
302+
}
303+
304+
body[data-theme='dark'] {
305+
background-color: #141414;
306+
color: #f8fafc;
307+
a {
308+
color: #8098f9;
309+
}
310+
}`,
179311
}
180312

181313
// Set headers

Diff for: ‎src/lib/components/workflow/metadata/workflow-current-details.svelte

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<script lang="ts">
2+
import { page } from '$app/stores';
3+
4+
import AccordionLight from '$lib/holocene/accordion/accordion-light.svelte';
5+
import Button from '$lib/holocene/button.svelte';
6+
import Icon from '$lib/holocene/icon/icon.svelte';
7+
import Markdown from '$lib/holocene/monaco/markdown.svelte';
8+
import Tooltip from '$lib/holocene/tooltip.svelte';
9+
import { translate } from '$lib/i18n/translate';
10+
import { getWorkflowMetadata } from '$lib/services/query-service';
11+
import { authUser } from '$lib/stores/auth-user';
12+
import { workflowRun } from '$lib/stores/workflow-run';
13+
14+
$: ({ namespace } = $page.params);
15+
$: ({ workflow } = $workflowRun);
16+
$: currentDetails = $workflowRun?.metadata?.currentDetails || '';
17+
$: closedWithoutDetails = !workflow.isRunning && !currentDetails;
18+
19+
let loading = false;
20+
21+
const fetchCurrentDetails = async () => {
22+
if (loading) return;
23+
loading = true;
24+
try {
25+
const { settings } = $page.data;
26+
const metadata = await getWorkflowMetadata(
27+
{
28+
namespace,
29+
workflow: {
30+
id: workflow.id,
31+
runId: workflow.runId,
32+
},
33+
},
34+
settings,
35+
$authUser?.accessToken,
36+
);
37+
$workflowRun.metadata = metadata;
38+
} catch (error) {
39+
console.error('Error fetching current details:', error);
40+
} finally {
41+
loading = false;
42+
}
43+
};
44+
</script>
45+
46+
<AccordionLight
47+
let:open
48+
onToggle={closedWithoutDetails ? fetchCurrentDetails : undefined}
49+
icon={closedWithoutDetails ? 'retry' : undefined}
50+
>
51+
<div slot="title" class="flex w-full items-center gap-2 p-2 text-xl">
52+
<Icon name="flag" class="text-brand" width={32} height={32} />
53+
{translate('workflows.current-details')}
54+
{#if loading}{translate('common.loading')}{/if}
55+
</div>
56+
{#if open}
57+
{#key currentDetails}
58+
<Markdown content={currentDetails} />
59+
{/key}
60+
{/if}
61+
<svelte:fragment slot="action">
62+
{#if workflow.isRunning}
63+
<Tooltip text={translate('workflows.update-details')} left>
64+
<Button
65+
variant="ghost"
66+
on:click={fetchCurrentDetails}
67+
disabled={loading}
68+
>
69+
<Icon name="retry" />
70+
</Button>
71+
</Tooltip>
72+
{/if}
73+
</svelte:fragment>
74+
</AccordionLight>

Diff for: ‎src/lib/components/workflow/metadata/workflow-summary-and-details.svelte

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<script lang="ts">
2+
import AccordionLight from '$lib/holocene/accordion/accordion-light.svelte';
3+
import Icon from '$lib/holocene/icon/icon.svelte';
4+
import Markdown from '$lib/holocene/monaco/markdown.svelte';
5+
import { translate } from '$lib/i18n/translate';
6+
import { workflowRun } from '$lib/stores/workflow-run';
7+
8+
$: summary = $workflowRun?.userMetadata?.summary;
9+
$: details = $workflowRun?.userMetadata?.details;
10+
$: hasUserMetadata = summary || details;
11+
</script>
12+
13+
{#if hasUserMetadata}
14+
<AccordionLight let:open>
15+
<div slot="title" class="flex w-full items-center gap-2 p-2 text-xl">
16+
<Icon name="info" class="text-brand" width={32} height={32} />{translate(
17+
'workflows.summary-and-details',
18+
)}
19+
</div>
20+
{#if open && summary}
21+
<h3>{translate('workflows.summary')}</h3>
22+
<Markdown content={summary} />
23+
{/if}
24+
{#if open && details}
25+
<h3>{translate('workflows.details')}</h3>
26+
<Markdown content={details} />
27+
{/if}
28+
</AccordionLight>
29+
{/if}

Diff for: ‎src/lib/holocene/accordion/accordion-light.svelte

+13-14
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<script lang="ts">
22
import type { HTMLAttributes } from 'svelte/elements';
3-
import { noop } from 'svelte/internal';
43
import { slide } from 'svelte/transition';
54
65
import { v4 } from 'uuid';
@@ -14,17 +13,22 @@
1413
open?: boolean;
1514
expandable?: boolean;
1615
error?: string;
17-
onToggle?: () => void;
16+
onToggle?: () => Promise<void>;
1817
'data-testid'?: string;
1918
}
2019
2120
export let id: string = v4();
2221
export let open = false;
23-
export let onToggle = noop;
22+
export let onToggle = undefined;
23+
export let icon: IconName | undefined = undefined;
2424
25-
const toggleAccordion = () => {
26-
open = !open;
27-
onToggle();
25+
const toggleAccordion = async () => {
26+
if (onToggle) {
27+
await onToggle();
28+
open = !open;
29+
} else {
30+
open = !open;
31+
}
2832
};
2933
</script>
3034

@@ -37,17 +41,12 @@
3741
type="button"
3842
on:click={toggleAccordion}
3943
>
40-
<div class="flex w-full flex-row items-center justify-between gap-2">
44+
<div class="flex w-full flex-row items-center justify-between gap-2 pr-4">
4145
<slot name="title" />
4246
<slot name="description" />
43-
<div
44-
class="flex flex-row items-center gap-2 pr-2"
45-
on:click|stopPropagation
46-
on:keyup|stopPropagation
47-
role="none"
48-
>
47+
<div class="flex items-center gap-4">
4948
<slot name="action" />
50-
<Icon class="m-2 shrink-0" name={open ? 'arrow-down' : 'arrow-right'} />
49+
<Icon name={icon ? icon : open ? 'arrow-down' : 'arrow-right'} />
5150
</div>
5251
</div>
5352
</button>

Diff for: ‎src/lib/i18n/locales/en/workflows.ts

+2
Original file line numberDiff line numberDiff line change
@@ -274,4 +274,6 @@ export const Strings = {
274274
'Markdown is supported in the summary and details fields. You can use {namespace}, {workflowId} or {runId} syntax in link href to create dynamic links based on the page you are on. Images are not allowed.',
275275
'update-id': 'Update ID (optional)',
276276
'update-name-label': 'Update name',
277+
'no-current-details': 'No Current Details',
278+
'update-details': 'Update Details',
277279
} as const;

Diff for: ‎src/lib/layouts/workflow-header.svelte

+4-42
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,16 @@
44
import { page } from '$app/stores';
55
66
import WorkflowDetails from '$lib/components/lines-and-dots/workflow-details.svelte';
7+
import WorkflowCurrentDetails from '$lib/components/workflow/metadata/workflow-current-details.svelte';
8+
import WorkflowSummaryAndDetails from '$lib/components/workflow/metadata/workflow-summary-and-details.svelte';
79
import WorkflowActions from '$lib/components/workflow-actions.svelte';
810
import WorkflowStatus from '$lib/components/workflow-status.svelte';
911
import WorkflowVersioningHeader from '$lib/components/workflow-versioning-header.svelte';
10-
import AccordionLight from '$lib/holocene/accordion/accordion-light.svelte';
1112
import Alert from '$lib/holocene/alert.svelte';
1213
import Badge from '$lib/holocene/badge.svelte';
1314
import Copyable from '$lib/holocene/copyable/index.svelte';
1415
import Icon from '$lib/holocene/icon/icon.svelte';
1516
import Link from '$lib/holocene/link.svelte';
16-
import Markdown from '$lib/holocene/monaco/markdown.svelte';
1717
import TabList from '$lib/holocene/tab/tab-list.svelte';
1818
import Tab from '$lib/holocene/tab/tab.svelte';
1919
import Tabs from '$lib/holocene/tab/tabs.svelte';
@@ -64,11 +64,6 @@
6464
$fullEventHistory,
6565
$namespaces,
6666
);
67-
68-
$: summary = $workflowRun?.userMetadata?.summary;
69-
$: details = $workflowRun?.userMetadata?.details;
70-
$: hasUserMetadata = summary || details;
71-
$: currentDetails = $workflowRun?.metadata?.currentDetails;
7267
</script>
7368

7469
<div class="flex items-center justify-between pb-4">
@@ -138,41 +133,8 @@
138133
<WorkflowActions {isRunning} {cancelInProgress} {workflow} {namespace} />
139134
</div>
140135
</div>
141-
{#if hasUserMetadata}
142-
<AccordionLight let:open>
143-
<div slot="title" class="flex w-full items-center gap-2 p-2 text-xl">
144-
<Icon
145-
name="info"
146-
class="text-brand"
147-
width={32}
148-
height={32}
149-
/>{translate('workflows.summary-and-details')}
150-
</div>
151-
{#if open && summary}
152-
<h3>{translate('workflows.summary')}</h3>
153-
<Markdown content={summary} />
154-
{/if}
155-
{#if open && details}
156-
<h3>{translate('workflows.details')}</h3>
157-
<Markdown content={details} />
158-
{/if}
159-
</AccordionLight>
160-
{/if}
161-
{#if currentDetails}
162-
<AccordionLight let:open>
163-
<div slot="title" class="flex w-full items-center gap-2 p-2 text-xl">
164-
<Icon
165-
name="flag"
166-
class="text-brand"
167-
width={32}
168-
height={32}
169-
/>{translate('workflows.current-details')}
170-
</div>
171-
{#if open}
172-
<Markdown content={currentDetails} />
173-
{/if}
174-
</AccordionLight>
175-
{/if}
136+
<WorkflowSummaryAndDetails />
137+
<WorkflowCurrentDetails />
176138
<WorkflowDetails {workflow} />
177139
{#if cancelInProgress}
178140
<div in:fly={{ duration: 200, delay: 100 }}>

0 commit comments

Comments
 (0)