Skip to content

Commit 559e63e

Browse files
camielvscamielvs
authored
Read Compute Resources from json (#1437)
## Description <!-- Please provide a brief description of the changes made in this pull request. Include any relevant context or reasoning for the changes. --> Extract compute resources definition to a json file. Schema structure is based on json-schema (but not strictly validated by it). Schema allows for different cloud providers to be specified and will display a different set of compute resources depending on what the user chooses. ## Related Issue and Pull requests <!-- Link to any related issues using the format #<issue-number> --> Closes #1392 ## Type of Change <!-- Please delete options that are not relevant --> - [x] Improvement ## Checklist <!-- Please ensure the following are completed before submitting the PR --> - [ ] I have tested this does not break current pipelines / runs functionality - [ ] I have tested the changes on staging ## Screenshots (if applicable) <!-- Include any screenshots that might help explain the changes or provide visual context --> ## Test Instructions <!-- Detail steps and prerequisites for testing the changes in this PR --> verify that all annotations and compute resources continue to work as expected ## Additional Comments <!-- Add any additional context or information that reviewers might need to know regarding this PR -->
1 parent dea3247 commit 559e63e

File tree

8 files changed

+518
-160
lines changed

8 files changed

+518
-160
lines changed

‎src/components/shared/ReactFlow/FlowCanvas/TaskNode/AnnotationsEditor/AnnotationsEditor.tsx‎

Lines changed: 31 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,27 @@
11
import { PlusCircleIcon } from "lucide-react";
22

33
import { Button } from "@/components/ui/button";
4-
import { Heading } from "@/components/ui/typography";
4+
import { BlockStack, InlineStack } from "@/components/ui/layout";
5+
import { Heading, Paragraph } from "@/components/ui/typography";
56
import type { AnnotationConfig, Annotations } from "@/types/annotations";
67

78
import { AnnotationsInput } from "./AnnotationsInput";
8-
import { COMPUTE_RESOURCES } from "./ComputeResourcesEditor";
99
import {
1010
NewAnnotationRow,
1111
type NewAnnotationRowData,
1212
} from "./NewAnnotationRow";
1313

14+
const DEFAULT_COMMON_ANNOTATIONS: AnnotationConfig[] = [
15+
{
16+
annotation: "editor.position",
17+
label: "Node position",
18+
type: "json",
19+
},
20+
];
21+
1422
interface AnnotationsEditorProps {
1523
annotations: Annotations;
24+
pinnedAnnotations?: AnnotationConfig[];
1625
onSave: (key: string, value: string) => void;
1726
onRemove: (key: string) => void;
1827
newRows: Array<NewAnnotationRowData>;
@@ -21,20 +30,9 @@ interface AnnotationsEditorProps {
2130
onAddNewRow: () => void;
2231
}
2332

24-
const COMMON_ANNOTATIONS: AnnotationConfig[] = [
25-
{
26-
annotation: "editor.position",
27-
label: "Node position",
28-
type: "json",
29-
},
30-
{
31-
annotation: "shopify.io/showback_cost_owner_ref",
32-
label: "Showback cost owner",
33-
},
34-
];
35-
3633
export const AnnotationsEditor = ({
3734
annotations,
35+
pinnedAnnotations = DEFAULT_COMMON_ANNOTATIONS,
3836
onSave,
3937
onRemove,
4038
newRows,
@@ -43,14 +41,17 @@ export const AnnotationsEditor = ({
4341
onAddNewRow,
4442
}: AnnotationsEditorProps) => {
4543
const remainingAnnotations = Object.entries(annotations).filter(
46-
([key]) =>
47-
!COMPUTE_RESOURCES.some((resource) => resource.annotation === key) &&
48-
!COMMON_ANNOTATIONS.some((common) => common.annotation === key),
44+
([key]) => !pinnedAnnotations.some((config) => config.annotation === key),
4945
);
5046

5147
return (
52-
<div className="h-auto flex flex-col gap-2">
53-
<div className="flex justify-between items-center">
48+
<BlockStack gap="2">
49+
<InlineStack
50+
gap="2"
51+
align="space-between"
52+
blockAlign="center"
53+
className="w-full"
54+
>
5455
<Heading level={1}>Annotations</Heading>
5556

5657
<Button
@@ -62,13 +63,13 @@ export const AnnotationsEditor = ({
6263
<PlusCircleIcon className="h-4 w-4" />
6364
New
6465
</Button>
65-
</div>
66+
</InlineStack>
6667

67-
{COMMON_ANNOTATIONS.map((config) => (
68-
<div key={config.annotation} className="flex items-center gap-2">
69-
<span className="text-xs text-muted-foreground w-40 truncate">
68+
{pinnedAnnotations.map((config) => (
69+
<BlockStack key={config.annotation}>
70+
<Paragraph size="xs" tone="subdued">
7071
{config.label} {config.unit && `(${config.unit})`}
71-
</span>
72+
</Paragraph>
7273

7374
<AnnotationsInput
7475
key={config.annotation}
@@ -77,14 +78,14 @@ export const AnnotationsEditor = ({
7778
annotations={annotations}
7879
config={config}
7980
/>
80-
</div>
81+
</BlockStack>
8182
))}
8283

8384
{remainingAnnotations.map(([key, value]) => (
84-
<div key={key} className="flex items-center gap-2">
85-
<span className="text-xs text-muted-foreground w-40 truncate">
85+
<BlockStack key={key}>
86+
<Paragraph size="xs" tone="subdued">
8687
{key}
87-
</span>
88+
</Paragraph>
8889

8990
<AnnotationsInput
9091
key={key}
@@ -94,7 +95,7 @@ export const AnnotationsEditor = ({
9495
annotations={annotations}
9596
deletable
9697
/>
97-
</div>
98+
</BlockStack>
9899
))}
99100

100101
{newRows.map((row, idx) => (
@@ -106,6 +107,6 @@ export const AnnotationsEditor = ({
106107
onRemove={onRemoveNewRow}
107108
/>
108109
))}
109-
</div>
110+
</BlockStack>
110111
);
111112
};

‎src/components/shared/ReactFlow/FlowCanvas/TaskNode/AnnotationsEditor/AnnotationsInput.tsx‎

Lines changed: 45 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { AlertTriangle } from "lucide-react";
21
import { type ChangeEvent, useCallback, useEffect, useState } from "react";
32

43
import { MultilineTextInputDialog } from "@/components/shared/Dialogs/MultilineTextInputDialog";
@@ -222,39 +221,37 @@ export const AnnotationsInput = ({
222221
: inputValue;
223222

224223
inputElement = (
225-
<div className="flex items-center gap-1 grow">
226-
<Select
227-
value={currentValue}
228-
onValueChange={
229-
config?.enableQuantity
230-
? handleQuantitySelectChange
231-
: handleNonQuantitySelectChange
232-
}
233-
>
234-
<div className="relative group grow min-w-24">
235-
<SelectTrigger className={cn("w-full", className)}>
236-
<SelectValue placeholder={"Select " + placeholder} />
237-
</SelectTrigger>
238-
{!!currentValue && (
239-
<Button
240-
variant="ghost"
241-
size="min"
242-
className="absolute right-8 top-1/2 -translate-y-1/2 hidden group-hover:block"
243-
onClick={handleClearSelection}
244-
>
245-
<Icon name="X" className="size-3 text-muted-foreground" />
246-
</Button>
247-
)}
248-
</div>
249-
<SelectContent>
250-
{config.options.map((opt) => (
251-
<SelectItem key={opt.value} value={opt.value}>
252-
{opt.name}
253-
</SelectItem>
254-
))}
255-
</SelectContent>
256-
</Select>
257-
</div>
224+
<Select
225+
value={currentValue}
226+
onValueChange={
227+
config?.enableQuantity
228+
? handleQuantitySelectChange
229+
: handleNonQuantitySelectChange
230+
}
231+
>
232+
<div className="relative group grow min-w-24">
233+
<SelectTrigger className={cn("w-full", className)}>
234+
<SelectValue placeholder={"Select " + placeholder} />
235+
</SelectTrigger>
236+
{!!currentValue && (
237+
<Button
238+
variant="ghost"
239+
size="min"
240+
className="absolute right-8 top-1/2 -translate-y-1/2 hidden group-hover:block"
241+
onClick={handleClearSelection}
242+
>
243+
<Icon name="X" className="size-3 text-muted-foreground" />
244+
</Button>
245+
)}
246+
</div>
247+
<SelectContent>
248+
{config.options.map((opt) => (
249+
<SelectItem key={opt.value} value={opt.value}>
250+
{opt.name}
251+
</SelectItem>
252+
))}
253+
</SelectContent>
254+
</Select>
258255
);
259256
} else if (inputType === "boolean") {
260257
inputElement = (
@@ -279,15 +276,19 @@ export const AnnotationsInput = ({
279276
/>
280277

281278
{config?.max !== undefined && (
282-
<Paragraph size="xs" tone="subdued" className="whitespace-nowrap">
279+
<Paragraph
280+
size="xs"
281+
tone="subdued"
282+
className="whitespace-nowrap min-w-16"
283+
>
283284
(max: {config.max})
284285
</Paragraph>
285286
)}
286287
</InlineStack>
287288
);
288289
} else {
289290
inputElement = (
290-
<div>
291+
<InlineStack gap="2" blockAlign="center" wrap="nowrap" className="grow">
291292
<div className="flex-1 w-full relative group">
292293
<Input
293294
value={
@@ -314,19 +315,22 @@ export const AnnotationsInput = ({
314315
</Button>
315316
</div>
316317
{isInvalid && (
317-
<div className="flex items-center gap-1 my-1 text-xs text-warning">
318-
<AlertTriangle className="w-4 h-4" /> Invalid JSON
319-
</div>
318+
<InlineStack gap="1" blockAlign="center" className="my-1">
319+
<Icon name="TriangleAlert" />
320+
<Paragraph size="xs" tone="warning">
321+
Invalid JSON
322+
</Paragraph>
323+
</InlineStack>
320324
)}
321-
</div>
325+
</InlineStack>
322326
);
323327
}
324328

325329
const dialogTitle = `Edit ${config?.label ?? "Annotation"}`;
326330

327331
return (
328332
<>
329-
<InlineStack gap="2" blockAlign="center" wrap="nowrap" className="grow">
333+
<InlineStack gap="2" blockAlign="center" wrap="nowrap" className="w-full">
330334
{inputElement}
331335
{config?.enableQuantity && (
332336
<QuantityInput

0 commit comments

Comments
 (0)