windmill-components 1.383.9 → 1.389.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package/assets/app.css +25 -1
- package/package/components/ArgInput.svelte +2 -1
- package/package/components/ChangeInstanceUsername.svelte +9 -108
- package/package/components/ChangeInstanceUsernameInner.svelte +112 -0
- package/package/components/ChangeInstanceUsernameInner.svelte.d.ts +21 -0
- package/package/components/DiffDrawer.svelte +27 -20
- package/package/components/DiffEditor.svelte +5 -1
- package/package/components/DisplayResult.svelte +39 -9
- package/package/components/DropdownV2.svelte +4 -26
- package/package/components/DropdownV2.svelte.d.ts +9 -1
- package/package/components/DropdownV2Inner.svelte +42 -0
- package/package/components/DropdownV2Inner.svelte.d.ts +40 -0
- package/package/components/Editor.svelte +24 -4
- package/package/components/Editor.svelte.d.ts +5 -4
- package/package/components/EditorBar.svelte +9 -11
- package/package/components/EditorSettings.svelte +44 -0
- package/package/components/EditorSettings.svelte.d.ts +17 -0
- package/package/components/EditorTheme.svelte +1 -1
- package/package/components/ErrorOrRecoveryHandler.svelte +27 -20
- package/package/components/FlowBuilder.svelte +17 -3
- package/package/components/FlowBuilder.svelte.d.ts +3 -0
- package/package/components/FlowGraphViewerStep.svelte +1 -1
- package/package/components/FlowStatusViewer.svelte +3 -1
- package/package/components/FlowStatusViewer.svelte.d.ts +1 -0
- package/package/components/FlowStatusViewerInner.svelte +5 -2
- package/package/components/FlowViewerInner.svelte +3 -7
- package/package/components/FormatOnSave.svelte +12 -29
- package/package/components/GraphqlSchemaViewer.svelte +1 -1
- package/package/components/GraphqlSchemaViewer.svelte.d.ts +1 -1
- package/package/components/HighlightCode.svelte +3 -0
- package/package/components/InstanceNameEditor.svelte +64 -0
- package/package/components/InstanceNameEditor.svelte.d.ts +23 -0
- package/package/components/LightweightArgInput.svelte +6 -11
- package/package/components/LogViewer.svelte +37 -29
- package/package/components/LogViewer.svelte.d.ts +2 -0
- package/package/components/ObjectResourceInput.svelte +1 -1
- package/package/components/ObjectResourceInput.svelte.d.ts +1 -0
- package/package/components/Path.svelte +3 -3
- package/package/components/QueueMetricsDrawer.svelte +6 -218
- package/package/components/QueueMetricsDrawer.svelte.d.ts +2 -3
- package/package/components/QueueMetricsDrawerInner.svelte +211 -0
- package/package/components/QueueMetricsDrawerInner.svelte.d.ts +15 -0
- package/package/components/ResourceEditorDrawer.svelte +14 -11
- package/package/components/ResourceEditorDrawer.svelte.d.ts +1 -1
- package/package/components/ResultJobLoader.svelte.d.ts +1 -1
- package/package/components/S3FilePicker.svelte +20 -8
- package/package/components/ScheduleEditorInner.svelte +497 -469
- package/package/components/ScriptBuilder.svelte +12 -1
- package/package/components/ScriptBuilder.svelte.d.ts +3 -0
- package/package/components/ScriptEditor.svelte +1 -0
- package/package/components/ScriptEditor.svelte.d.ts +2 -1
- package/package/components/ServiceLogsInner.svelte +511 -0
- package/package/components/ServiceLogsInner.svelte.d.ts +20 -0
- package/package/components/SimpleEditor.svelte +27 -2
- package/package/components/SimpleEditor.svelte.d.ts +5 -3
- package/package/components/Summary.svelte +33 -31
- package/package/components/Summary.svelte.d.ts +1 -0
- package/package/components/SuperadminSettings.svelte +28 -10
- package/package/components/TemplateEditor.svelte +1 -1
- package/package/components/TestJobLoader.svelte.d.ts +1 -1
- package/package/components/VimMode.svelte +16 -0
- package/package/components/VimMode.svelte.d.ts +14 -0
- package/package/components/WorkerTagPicker.svelte +4 -1
- package/package/components/WorkspaceGroup.svelte +139 -68
- package/package/components/WorkspaceGroup.svelte.d.ts +3 -0
- package/package/components/apps/components/display/table/AppAggridExplorerTable.svelte +19 -2
- package/package/components/apps/components/display/table/AppAggridInfiniteTable.svelte +1 -0
- package/package/components/apps/components/display/table/AppAggridInfiniteTable.svelte.d.ts +2 -1
- package/package/components/apps/components/display/table/AppAggridInfiniteTableEe.svelte +2 -0
- package/package/components/apps/components/display/table/AppAggridInfiniteTableEe.svelte.d.ts +2 -1
- package/package/components/apps/components/display/table/AppAggridTable.svelte +45 -3
- package/package/components/apps/components/display/table/AppAggridTable.svelte.d.ts +2 -1
- package/package/components/apps/components/display/table/AppAggridTableEe.svelte +2 -0
- package/package/components/apps/components/display/table/AppAggridTableEe.svelte.d.ts +2 -1
- package/package/components/apps/editor/AppEditor.svelte +239 -92
- package/package/components/apps/editor/AppEditorBottomPanel.svelte +22 -0
- package/package/components/apps/editor/AppEditorBottomPanel.svelte.d.ts +24 -0
- package/package/components/apps/editor/AppEditorHeader.svelte +44 -2
- package/package/components/apps/editor/AppEditorHeader.svelte.d.ts +9 -0
- package/package/components/apps/editor/AppExportButton.svelte +1 -1
- package/package/components/apps/editor/AppPreview.svelte +4 -0
- package/package/components/apps/editor/DeploymentHistory.svelte +7 -3
- package/package/components/apps/editor/GridEditor.svelte +4 -13
- package/package/components/apps/editor/RunnableJobPanel.svelte +25 -58
- package/package/components/apps/editor/RunnableJobPanel.svelte.d.ts +10 -1
- package/package/components/apps/editor/RunnalbeJobPanelInner.svelte +56 -0
- package/package/components/apps/editor/RunnalbeJobPanelInner.svelte.d.ts +18 -0
- package/package/components/apps/editor/SubGridEditor.svelte +3 -1
- package/package/components/apps/editor/component/Component.svelte +26 -4
- package/package/components/apps/editor/component/Component.svelte.d.ts +1 -0
- package/package/components/apps/editor/component/components.d.ts +5 -0
- package/package/components/apps/editor/componentsPanel/CssProperty.svelte +2 -0
- package/package/components/apps/editor/componentsPanel/tailwindUtils.js +267 -1
- package/package/components/apps/editor/contextPanel/ContextPanel.svelte +9 -1
- package/package/components/apps/editor/contextPanel/ContextPanel.svelte.d.ts +2 -0
- package/package/components/apps/editor/inlineScriptsPanel/CacheTtlPopup.svelte +1 -0
- package/package/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte +3 -0
- package/package/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte +7 -2
- package/package/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte.d.ts +5 -1
- package/package/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte +14 -2
- package/package/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte.d.ts +1 -0
- package/package/components/apps/editor/settingsPanel/ComponentPanel.svelte +25 -5
- package/package/components/apps/editor/settingsPanel/HideButton.svelte +47 -0
- package/package/components/apps/editor/settingsPanel/HideButton.svelte.d.ts +22 -0
- package/package/components/apps/editor/settingsPanel/TableActions.svelte +43 -4
- package/package/components/apps/editor/settingsPanel/TableActions.svelte.d.ts +2 -1
- package/package/components/apps/svelte-grid/Grid.svelte +6 -2
- package/package/components/apps/svelte-grid/Grid.svelte.d.ts +1 -0
- package/package/components/apps/svelte-grid/MoveResize.svelte +11 -3
- package/package/components/apps/svelte-grid/MoveResize.svelte.d.ts +1 -0
- package/package/components/apps/svelte-grid/utils/item.d.ts +4 -1
- package/package/components/apps/svelte-grid/utils/item.js +11 -4
- package/package/components/common/button/Button.svelte.d.ts +2 -2
- package/package/components/common/calendarPicker/CalendarPicker.svelte +6 -2
- package/package/components/common/calendarPicker/CalendarPicker.svelte.d.ts +2 -0
- package/package/components/common/drawer/ConditionalPortal.svelte +2 -1
- package/package/components/common/drawer/ConditionalPortal.svelte.d.ts +1 -0
- package/package/components/common/languageIcons/LanguageIcon.svelte +5 -2
- package/package/components/common/popup/Popup.svelte +2 -1
- package/package/components/common/popup/Popup.svelte.d.ts +1 -0
- package/package/components/common/table/AppRow.svelte +11 -8
- package/package/components/common/table/AppRow.svelte.d.ts +1 -2
- package/package/components/common/table/FlowRow.svelte +3 -3
- package/package/components/common/table/FlowRow.svelte.d.ts +1 -2
- package/package/components/common/table/RawAppRow.svelte +3 -3
- package/package/components/common/table/RawAppRow.svelte.d.ts +1 -2
- package/package/components/common/table/ScriptRow.svelte +3 -3
- package/package/components/common/table/ScriptRow.svelte.d.ts +1 -2
- package/package/components/copilot/CodeCompletionStatus.svelte +21 -46
- package/package/components/copilot/StepGen.svelte +2 -1
- package/package/components/custom_ui.d.ts +4 -1
- package/package/components/flows/CreateActionsApp.svelte +11 -8
- package/package/components/flows/CreateActionsFlow.svelte +11 -8
- package/package/components/flows/FlowEditor.svelte +1 -2
- package/package/components/flows/FlowEditor.svelte.d.ts +0 -1
- package/package/components/flows/FlowHistory.svelte +6 -3
- package/package/components/flows/content/FlowModuleScript.svelte +15 -11
- package/package/components/flows/content/FlowSettings.svelte +1 -4
- package/package/components/flows/content/ScriptEditorDrawer.svelte +3 -0
- package/package/components/flows/header/FlowYamlEditor.svelte +55 -0
- package/package/components/flows/header/FlowYamlEditor.svelte.d.ts +17 -0
- package/package/components/flows/map/InsertTriggerButton.svelte +1 -1
- package/package/components/flows/map/InsertTriggerButton.svelte.d.ts +1 -0
- package/package/components/flows/map/VirtualItem.svelte +1 -1
- package/package/components/flows/pickers/PickHubScript.svelte +1 -0
- package/package/components/flows/types.d.ts +7 -6
- package/package/components/flows/utils.d.ts +9 -0
- package/package/components/flows/utils.js +21 -0
- package/package/components/graph/graphBuilder.js +1 -0
- package/package/components/graph/model.d.ts +1 -0
- package/package/components/graph/renderers/edges/BaseEdge.svelte +16 -0
- package/package/components/graph/renderers/nodes/BranchOneStart.svelte +1 -1
- package/package/components/graph/renderers/nodes/NoBranchNode.svelte +5 -1
- package/package/components/graph/renderers/nodes/NoBranchNode.svelte.d.ts +1 -0
- package/package/components/home/Item.svelte +0 -17
- package/package/components/home/deploy_ui.d.ts +2 -0
- package/package/components/home/deploy_ui.js +21 -0
- package/package/components/icons/RustIcon.svelte +70 -0
- package/package/components/icons/RustIcon.svelte.d.ts +25 -0
- package/package/components/icons/rust-logo.svg +1 -0
- package/package/components/instanceSettings.js +2 -2
- package/package/components/monaco_keybindings.d.ts +3 -0
- package/package/components/monaco_keybindings.js +9 -0
- package/package/components/preview/FlowPreviewStatus.svelte +6 -2
- package/package/components/runs/JobLoader.svelte +12 -3
- package/package/components/runs/JobLoader.svelte.d.ts +1 -1
- package/package/components/runs/ManuelDatePicker.svelte +31 -44
- package/package/components/runs/ManuelDatePicker.svelte.d.ts +6 -2
- package/package/components/runs/RunsFilter.svelte +4 -1
- package/package/components/runs/RunsFilter.svelte.d.ts +1 -0
- package/package/components/search/GlobalSearchModal.svelte +36 -25
- package/package/components/wizards/TableActionsWizard.svelte +84 -0
- package/package/components/wizards/TableActionsWizard.svelte.d.ts +22 -0
- package/package/editorUtils.js +2 -0
- package/package/gen/core/OpenAPI.js +1 -1
- package/package/gen/schemas.gen.d.ts +8 -8
- package/package/gen/schemas.gen.js +8 -8
- package/package/gen/services.gen.d.ts +4 -0
- package/package/gen/services.gen.js +16 -0
- package/package/gen/types.gen.d.ts +20 -8
- package/package/infer.d.ts +1 -1
- package/package/infer.js +48 -7
- package/package/script_helpers.d.ts +1 -0
- package/package/script_helpers.js +39 -1
- package/package/scripts.d.ts +1 -1
- package/package/scripts.js +11 -3
- package/package/stores.d.ts +5 -1
- package/package/stores.js +7 -2
- package/package.json +13 -7
|
@@ -24,6 +24,8 @@ export let jobId = undefined;
|
|
|
24
24
|
export let tag;
|
|
25
25
|
export let small = false;
|
|
26
26
|
export let drawerOpen = false;
|
|
27
|
+
export let noMaxH = false;
|
|
28
|
+
export let noAutoScroll = false;
|
|
27
29
|
// @ts-ignore
|
|
28
30
|
const ansi_up = new AnsiUp();
|
|
29
31
|
let scroll = true;
|
|
@@ -118,17 +120,19 @@ function showMoreTruncate(len) {
|
|
|
118
120
|
<Drawer bind:this={logViewer} bind:open={drawerOpen} size="900px">
|
|
119
121
|
<DrawerContent title="Expanded Logs" on:close={logViewer.closeDrawer}>
|
|
120
122
|
<svelte:fragment slot="actions">
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
123
|
+
{#if jobId}
|
|
124
|
+
<Button
|
|
125
|
+
href="{base}/api/w/{$workspaceStore}/jobs_u/get_logs/{jobId}"
|
|
126
|
+
download="windmill_logs_{jobId}.txt"
|
|
127
|
+
color="light"
|
|
128
|
+
size="xs"
|
|
129
|
+
startIcon={{
|
|
130
|
+
icon: Download
|
|
131
|
+
}}
|
|
132
|
+
>
|
|
133
|
+
Download
|
|
134
|
+
</Button>
|
|
135
|
+
{/if}
|
|
132
136
|
|
|
133
137
|
<Button
|
|
134
138
|
on:click={() => copyToClipboard(content)}
|
|
@@ -160,28 +164,32 @@ function showMoreTruncate(len) {
|
|
|
160
164
|
<div class="relative w-full h-full {wrapperClass}">
|
|
161
165
|
<div
|
|
162
166
|
bind:this={div}
|
|
163
|
-
class="w-full h-full overflow-auto relative bg-surface-secondary max-h-screen"
|
|
167
|
+
class="w-full h-full overflow-auto relative bg-surface-secondary {noMaxH ? '' : 'max-h-screen'}"
|
|
164
168
|
>
|
|
165
169
|
<div class="sticky z-10 top-0 right-0 w-full flex flex-row-reverse justify-between text-sm">
|
|
166
170
|
<div class="flex gap-2 pl-0.5 bg-surface-secondary">
|
|
167
|
-
|
|
168
|
-
<
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
171
|
+
{#if jobId}
|
|
172
|
+
<div class="flex items-center">
|
|
173
|
+
<a
|
|
174
|
+
class="text-primary pb-0.5"
|
|
175
|
+
target="_blank"
|
|
176
|
+
href="{base}/api/w/{$workspaceStore}/jobs_u/get_logs/{jobId}"
|
|
177
|
+
download="windmill_logs_{jobId}.txt"
|
|
178
|
+
><Download size="14" />
|
|
179
|
+
</a>
|
|
180
|
+
</div>
|
|
181
|
+
{/if}
|
|
176
182
|
<button on:click={logViewer.openDrawer}><Expand size="12" /></button>
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
? '
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
183
|
+
{#if !noAutoScroll}
|
|
184
|
+
<div
|
|
185
|
+
class="{small ? '' : 'py-2'} pr-2 {small
|
|
186
|
+
? '!text-2xs'
|
|
187
|
+
: '!text-xs'} flex gap-2 text-tertiary items-center"
|
|
188
|
+
>
|
|
189
|
+
Auto scroll
|
|
190
|
+
<input class="windmillapp" type="checkbox" bind:checked={scroll} />
|
|
191
|
+
</div>
|
|
192
|
+
{/if}
|
|
185
193
|
</div>
|
|
186
194
|
</div>
|
|
187
195
|
{#if isLoading}
|
|
@@ -10,6 +10,8 @@ declare const __propDef: {
|
|
|
10
10
|
tag: string | undefined;
|
|
11
11
|
small?: boolean | undefined;
|
|
12
12
|
drawerOpen?: boolean | undefined;
|
|
13
|
+
noMaxH?: boolean | undefined;
|
|
14
|
+
noAutoScroll?: boolean | undefined;
|
|
13
15
|
scrollToBottom?: (() => void) | undefined;
|
|
14
16
|
};
|
|
15
17
|
events: {
|
|
@@ -86,7 +86,7 @@ export async function reset() {
|
|
|
86
86
|
while (await pathExists(metaToPath(newMeta), kind)) {
|
|
87
87
|
disabled = true;
|
|
88
88
|
error = 'finding an available name...';
|
|
89
|
-
newMeta.name = random_adj() + '_' + fullNamePlaceholder ?? namePlaceholder;
|
|
89
|
+
newMeta.name = random_adj() + '_' + (fullNamePlaceholder ?? namePlaceholder);
|
|
90
90
|
}
|
|
91
91
|
error = '';
|
|
92
92
|
disabled = false;
|
|
@@ -232,7 +232,7 @@ async function addFolder() {
|
|
|
232
232
|
function setDirty() {
|
|
233
233
|
!dirty && (dirty = true);
|
|
234
234
|
}
|
|
235
|
-
const openSearchWithPrefilledText = getContext(
|
|
235
|
+
const openSearchWithPrefilledText = getContext('openSearchWithPrefilledText');
|
|
236
236
|
</script>
|
|
237
237
|
|
|
238
238
|
<Drawer bind:this={newFolder}>
|
|
@@ -427,7 +427,7 @@ const openSearchWithPrefilledText = getContext("openSearchWithPrefilledText");
|
|
|
427
427
|
variant="border"
|
|
428
428
|
color="dark"
|
|
429
429
|
on:click={() => {
|
|
430
|
-
openSearchWithPrefilledText(
|
|
430
|
+
openSearchWithPrefilledText('#')
|
|
431
431
|
}}
|
|
432
432
|
startIcon={{ icon: SearchCode }}
|
|
433
433
|
>
|
|
@@ -1,225 +1,13 @@
|
|
|
1
1
|
<script>import { Drawer, DrawerContent } from './common';
|
|
2
|
-
import '
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
import { superadmin } from '../stores';
|
|
7
|
-
import Skeleton from './common/skeleton/Skeleton.svelte';
|
|
8
|
-
import DarkModeObserver from './DarkModeObserver.svelte';
|
|
9
|
-
import Alert from './common/alert/Alert.svelte';
|
|
10
|
-
export let drawer;
|
|
11
|
-
let isOpen = false;
|
|
12
|
-
let loading = true;
|
|
13
|
-
const colorTuples = [
|
|
14
|
-
['#7EB26D', 'rgba(126, 178, 109, 0.2)'],
|
|
15
|
-
['#EAB839', 'rgba(234, 184, 57, 0.2)'],
|
|
16
|
-
['#6ED0E0', 'rgba(110, 208, 224, 0.2)'],
|
|
17
|
-
['#EF843C', 'rgba(239, 132, 60, 0.2)'],
|
|
18
|
-
['#E24D42', 'rgba(226, 77, 66, 0.2)'],
|
|
19
|
-
['#1F78C1', 'rgba(31, 120, 193, 0.2)'],
|
|
20
|
-
['#BA43A9', 'rgba(186, 67, 169, 0.2)'],
|
|
21
|
-
['#705DA0', 'rgba(112, 93, 160, 0.2)'],
|
|
22
|
-
['#508642', 'rgba(80, 134, 66, 0.2)'],
|
|
23
|
-
['#CCA300', 'rgba(204, 163, 0, 0.2)'],
|
|
24
|
-
['#447EBC', 'rgba(68, 126, 188, 0.2)'],
|
|
25
|
-
['#C15C17', 'rgba(193, 92, 23, 0.2)'],
|
|
26
|
-
['#890F02', 'rgba(137, 15, 2, 0.2)'],
|
|
27
|
-
['#666666', 'rgba(102, 102, 102, 0.2)'],
|
|
28
|
-
['#44AA99', 'rgba(68, 170, 153, 0.2)'],
|
|
29
|
-
['#6D8764', 'rgba(109, 135, 100, 0.2)'],
|
|
30
|
-
['#555555', 'rgba(85, 85, 85, 0.2)'],
|
|
31
|
-
['#B3B3B3', 'rgba(179, 179, 179, 0.2)'],
|
|
32
|
-
['#008C9E', 'rgba(0, 140, 158, 0.2)'],
|
|
33
|
-
['#6BBA70', 'rgba(107, 186, 112, 0.2)']
|
|
34
|
-
];
|
|
35
|
-
function getColors(labels) {
|
|
36
|
-
const colors = labels.map((_, i) => colorTuples[i % colorTuples.length]);
|
|
37
|
-
return Object.fromEntries(colors.map((c, i) => [labels[i], c]));
|
|
2
|
+
import QueueMetricsDrawerInner from './QueueMetricsDrawerInner.svelte';
|
|
3
|
+
let drawer;
|
|
4
|
+
export function openDrawer() {
|
|
5
|
+
drawer?.openDrawer();
|
|
38
6
|
}
|
|
39
|
-
ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale, TimeScale, LogarithmicScale);
|
|
40
|
-
let countData = undefined;
|
|
41
|
-
let delayData = undefined;
|
|
42
|
-
let minDate = new Date();
|
|
43
|
-
let noMetrics = false;
|
|
44
|
-
function fillData(data, zero = 0) {
|
|
45
|
-
// fill holes with 0
|
|
46
|
-
const sorted = [];
|
|
47
|
-
for (const el of [
|
|
48
|
-
...data,
|
|
49
|
-
{
|
|
50
|
-
created_at: new Date().toISOString(),
|
|
51
|
-
value: zero
|
|
52
|
-
}
|
|
53
|
-
]) {
|
|
54
|
-
const last = sorted.length > 0 ? new Date(sorted[sorted.length - 1].created_at).getTime() : undefined;
|
|
55
|
-
const currentTs = new Date(el.created_at).getTime();
|
|
56
|
-
if (last && currentTs - last > 1000 * 60 * 2) {
|
|
57
|
-
const numElements = Math.floor((currentTs - last) / (1000 * 30));
|
|
58
|
-
for (let i = 1; i < numElements; i++) {
|
|
59
|
-
sorted.push({
|
|
60
|
-
created_at: new Date(last + i * (1000 * 30)).toISOString(),
|
|
61
|
-
value: zero
|
|
62
|
-
});
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
sorted.push(el);
|
|
66
|
-
}
|
|
67
|
-
// remove high frequency data points for similar values
|
|
68
|
-
const light = [];
|
|
69
|
-
for (const el of sorted) {
|
|
70
|
-
const last = light.length > 0 ? light[light.length - 1] : undefined;
|
|
71
|
-
if (!last ||
|
|
72
|
-
Math.abs((el.value - last.value) / last.value) > 0.1 ||
|
|
73
|
-
new Date(el.created_at).getTime() - new Date(last.created_at).getTime() > 1000 * 60 * 15) {
|
|
74
|
-
light.push(el);
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
return light;
|
|
78
|
-
}
|
|
79
|
-
async function loadMetrics() {
|
|
80
|
-
loading = true;
|
|
81
|
-
let metrics = await WorkerService.getQueueMetrics();
|
|
82
|
-
if (metrics.length == 0) {
|
|
83
|
-
noMetrics = true;
|
|
84
|
-
loading = false;
|
|
85
|
-
return;
|
|
86
|
-
}
|
|
87
|
-
const labels = metrics
|
|
88
|
-
.map((m) => m.id.slice(12))
|
|
89
|
-
.filter((v, i, a) => a.indexOf(v) === i)
|
|
90
|
-
.sort();
|
|
91
|
-
const labelColors = getColors(labels);
|
|
92
|
-
countData = {
|
|
93
|
-
datasets: metrics
|
|
94
|
-
.filter((m) => m.id.startsWith('queue_count_'))
|
|
95
|
-
.map((m) => {
|
|
96
|
-
const [color, bgColor] = labelColors[m.id.slice(12)];
|
|
97
|
-
return {
|
|
98
|
-
label: m.id.slice(12),
|
|
99
|
-
backgroundColor: bgColor,
|
|
100
|
-
borderColor: color,
|
|
101
|
-
data: fillData(m.values).map((v) => ({ x: v.created_at, y: v.value }))
|
|
102
|
-
};
|
|
103
|
-
})
|
|
104
|
-
};
|
|
105
|
-
delayData = {
|
|
106
|
-
datasets: metrics
|
|
107
|
-
.filter((m) => m.id.startsWith('queue_delay_'))
|
|
108
|
-
.map((m) => {
|
|
109
|
-
const [color, bgColor] = labelColors[m.id.slice(12)];
|
|
110
|
-
return {
|
|
111
|
-
label: m.id.slice(12),
|
|
112
|
-
borderColor: color,
|
|
113
|
-
backgroundColor: bgColor,
|
|
114
|
-
data: fillData(m.values, 1).map((v) => ({
|
|
115
|
-
x: v.created_at,
|
|
116
|
-
y: v.value
|
|
117
|
-
}))
|
|
118
|
-
};
|
|
119
|
-
})
|
|
120
|
-
};
|
|
121
|
-
minDate = new Date(Math.min(...countData.datasets.map((d) => new Date(d.data[0].x).getTime())));
|
|
122
|
-
loading = false;
|
|
123
|
-
}
|
|
124
|
-
$: if ($superadmin && isOpen) {
|
|
125
|
-
loadMetrics();
|
|
126
|
-
}
|
|
127
|
-
else {
|
|
128
|
-
countData = undefined;
|
|
129
|
-
delayData = undefined;
|
|
130
|
-
}
|
|
131
|
-
let darkMode = false;
|
|
132
|
-
$: ChartJS.defaults.color = darkMode ? '#ccc' : '#666';
|
|
133
|
-
$: ChartJS.defaults.borderColor = darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
|
|
134
7
|
</script>
|
|
135
8
|
|
|
136
|
-
<
|
|
137
|
-
|
|
138
|
-
<Drawer bind:this={drawer} bind:open={isOpen}>
|
|
9
|
+
<Drawer bind:this={drawer}>
|
|
139
10
|
<DrawerContent title="Queue Metrics" on:close={drawer.closeDrawer}>
|
|
140
|
-
|
|
141
|
-
<Skeleton layout={[[20]]} />
|
|
142
|
-
{:else if noMetrics}
|
|
143
|
-
<p class="text-secondary">No jobs delayed by more than 3 seconds in the last 14 days</p>
|
|
144
|
-
{:else}
|
|
145
|
-
<div class="flex flex-col gap-4">
|
|
146
|
-
{#if countData}
|
|
147
|
-
<Line
|
|
148
|
-
data={countData}
|
|
149
|
-
options={{
|
|
150
|
-
animation: false,
|
|
151
|
-
plugins: {
|
|
152
|
-
title: {
|
|
153
|
-
display: true,
|
|
154
|
-
text: 'Number of delayed jobs per tag (> 3s)'
|
|
155
|
-
}
|
|
156
|
-
},
|
|
157
|
-
scales: {
|
|
158
|
-
x: {
|
|
159
|
-
type: 'time',
|
|
160
|
-
min: minDate.toISOString(),
|
|
161
|
-
max: new Date().toISOString()
|
|
162
|
-
},
|
|
163
|
-
y: {
|
|
164
|
-
title: {
|
|
165
|
-
display: true,
|
|
166
|
-
text: 'count'
|
|
167
|
-
}
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
}}
|
|
171
|
-
/>
|
|
172
|
-
{/if}
|
|
173
|
-
{#if delayData}
|
|
174
|
-
<Line
|
|
175
|
-
data={delayData}
|
|
176
|
-
options={{
|
|
177
|
-
animation: false,
|
|
178
|
-
plugins: {
|
|
179
|
-
title: {
|
|
180
|
-
display: true,
|
|
181
|
-
text: 'Queue delay per tag (> 3s)'
|
|
182
|
-
},
|
|
183
|
-
tooltip: {
|
|
184
|
-
callbacks: {
|
|
185
|
-
label: function (context) {
|
|
186
|
-
// @ts-ignore
|
|
187
|
-
if (context.raw.y === 1) {
|
|
188
|
-
return context.dataset.label + ': 0'
|
|
189
|
-
} else {
|
|
190
|
-
// @ts-ignore
|
|
191
|
-
return context.dataset.label + ': ' + context.raw.y
|
|
192
|
-
}
|
|
193
|
-
}
|
|
194
|
-
}
|
|
195
|
-
}
|
|
196
|
-
},
|
|
197
|
-
scales: {
|
|
198
|
-
x: {
|
|
199
|
-
type: 'time',
|
|
200
|
-
min: minDate.toISOString(),
|
|
201
|
-
max: new Date().toISOString()
|
|
202
|
-
},
|
|
203
|
-
|
|
204
|
-
y: {
|
|
205
|
-
type: 'logarithmic',
|
|
206
|
-
title: {
|
|
207
|
-
display: true,
|
|
208
|
-
text: 'delay (s)'
|
|
209
|
-
},
|
|
210
|
-
ticks: {
|
|
211
|
-
callback: (value, _) => (value === 1 ? '0' : value)
|
|
212
|
-
}
|
|
213
|
-
}
|
|
214
|
-
}
|
|
215
|
-
}}
|
|
216
|
-
/>
|
|
217
|
-
{/if}
|
|
218
|
-
<Alert title="Info">
|
|
219
|
-
Only tags for jobs that have been delayed by more than 3 seconds in the last 14 days are
|
|
220
|
-
included in the graph.
|
|
221
|
-
</Alert>
|
|
222
|
-
</div>
|
|
223
|
-
{/if}
|
|
11
|
+
<QueueMetricsDrawerInner />
|
|
224
12
|
</DrawerContent>
|
|
225
13
|
</Drawer>
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import { SvelteComponent } from "svelte";
|
|
2
|
-
import { Drawer } from './common';
|
|
3
|
-
import 'chartjs-adapter-date-fns';
|
|
4
2
|
declare const __propDef: {
|
|
5
3
|
props: {
|
|
6
|
-
|
|
4
|
+
openDrawer?: (() => void) | undefined;
|
|
7
5
|
};
|
|
8
6
|
events: {
|
|
9
7
|
[evt: string]: CustomEvent<any>;
|
|
@@ -14,5 +12,6 @@ export type QueueMetricsDrawerProps = typeof __propDef.props;
|
|
|
14
12
|
export type QueueMetricsDrawerEvents = typeof __propDef.events;
|
|
15
13
|
export type QueueMetricsDrawerSlots = typeof __propDef.slots;
|
|
16
14
|
export default class QueueMetricsDrawer extends SvelteComponent<QueueMetricsDrawerProps, QueueMetricsDrawerEvents, QueueMetricsDrawerSlots> {
|
|
15
|
+
get openDrawer(): () => void;
|
|
17
16
|
}
|
|
18
17
|
export {};
|
|
@@ -0,0 +1,211 @@
|
|
|
1
|
+
<script>import 'chartjs-adapter-date-fns';
|
|
2
|
+
import { Line } from 'svelte-chartjs';
|
|
3
|
+
import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale, PointElement, LogarithmicScale, TimeScale } from 'chart.js';
|
|
4
|
+
import { WorkerService } from '../gen';
|
|
5
|
+
import Skeleton from './common/skeleton/Skeleton.svelte';
|
|
6
|
+
import DarkModeObserver from './DarkModeObserver.svelte';
|
|
7
|
+
import Alert from './common/alert/Alert.svelte';
|
|
8
|
+
let loading = true;
|
|
9
|
+
const colorTuples = [
|
|
10
|
+
['#7EB26D', 'rgba(126, 178, 109, 0.2)'],
|
|
11
|
+
['#EAB839', 'rgba(234, 184, 57, 0.2)'],
|
|
12
|
+
['#6ED0E0', 'rgba(110, 208, 224, 0.2)'],
|
|
13
|
+
['#EF843C', 'rgba(239, 132, 60, 0.2)'],
|
|
14
|
+
['#E24D42', 'rgba(226, 77, 66, 0.2)'],
|
|
15
|
+
['#1F78C1', 'rgba(31, 120, 193, 0.2)'],
|
|
16
|
+
['#BA43A9', 'rgba(186, 67, 169, 0.2)'],
|
|
17
|
+
['#705DA0', 'rgba(112, 93, 160, 0.2)'],
|
|
18
|
+
['#508642', 'rgba(80, 134, 66, 0.2)'],
|
|
19
|
+
['#CCA300', 'rgba(204, 163, 0, 0.2)'],
|
|
20
|
+
['#447EBC', 'rgba(68, 126, 188, 0.2)'],
|
|
21
|
+
['#C15C17', 'rgba(193, 92, 23, 0.2)'],
|
|
22
|
+
['#890F02', 'rgba(137, 15, 2, 0.2)'],
|
|
23
|
+
['#666666', 'rgba(102, 102, 102, 0.2)'],
|
|
24
|
+
['#44AA99', 'rgba(68, 170, 153, 0.2)'],
|
|
25
|
+
['#6D8764', 'rgba(109, 135, 100, 0.2)'],
|
|
26
|
+
['#555555', 'rgba(85, 85, 85, 0.2)'],
|
|
27
|
+
['#B3B3B3', 'rgba(179, 179, 179, 0.2)'],
|
|
28
|
+
['#008C9E', 'rgba(0, 140, 158, 0.2)'],
|
|
29
|
+
['#6BBA70', 'rgba(107, 186, 112, 0.2)']
|
|
30
|
+
];
|
|
31
|
+
function getColors(labels) {
|
|
32
|
+
const colors = labels.map((_, i) => colorTuples[i % colorTuples.length]);
|
|
33
|
+
return Object.fromEntries(colors.map((c, i) => [labels[i], c]));
|
|
34
|
+
}
|
|
35
|
+
ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale, TimeScale, LogarithmicScale);
|
|
36
|
+
let countData = undefined;
|
|
37
|
+
let delayData = undefined;
|
|
38
|
+
let minDate = new Date();
|
|
39
|
+
let noMetrics = false;
|
|
40
|
+
function fillData(data, zero = 0) {
|
|
41
|
+
// fill holes with 0
|
|
42
|
+
const sorted = [];
|
|
43
|
+
for (const el of [
|
|
44
|
+
...data,
|
|
45
|
+
{
|
|
46
|
+
created_at: new Date().toISOString(),
|
|
47
|
+
value: zero
|
|
48
|
+
}
|
|
49
|
+
]) {
|
|
50
|
+
const last = sorted.length > 0 ? new Date(sorted[sorted.length - 1].created_at).getTime() : undefined;
|
|
51
|
+
const currentTs = new Date(el.created_at).getTime();
|
|
52
|
+
if (last && currentTs - last > 1000 * 60 * 2) {
|
|
53
|
+
const numElements = Math.floor((currentTs - last) / (1000 * 30));
|
|
54
|
+
for (let i = 1; i < numElements; i++) {
|
|
55
|
+
sorted.push({
|
|
56
|
+
created_at: new Date(last + i * (1000 * 30)).toISOString(),
|
|
57
|
+
value: zero
|
|
58
|
+
});
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
sorted.push(el);
|
|
62
|
+
}
|
|
63
|
+
// remove high frequency data points for similar values
|
|
64
|
+
const light = [];
|
|
65
|
+
for (const el of sorted) {
|
|
66
|
+
const last = light.length > 0 ? light[light.length - 1] : undefined;
|
|
67
|
+
if (!last ||
|
|
68
|
+
Math.abs((el.value - last.value) / last.value) > 0.1 ||
|
|
69
|
+
new Date(el.created_at).getTime() - new Date(last.created_at).getTime() > 1000 * 60 * 15) {
|
|
70
|
+
light.push(el);
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
return light;
|
|
74
|
+
}
|
|
75
|
+
async function loadMetrics() {
|
|
76
|
+
loading = true;
|
|
77
|
+
let metrics = await WorkerService.getQueueMetrics();
|
|
78
|
+
if (metrics.length == 0) {
|
|
79
|
+
noMetrics = true;
|
|
80
|
+
loading = false;
|
|
81
|
+
return;
|
|
82
|
+
}
|
|
83
|
+
const labels = metrics
|
|
84
|
+
.map((m) => m.id.slice(12))
|
|
85
|
+
.filter((v, i, a) => a.indexOf(v) === i)
|
|
86
|
+
.sort();
|
|
87
|
+
const labelColors = getColors(labels);
|
|
88
|
+
countData = {
|
|
89
|
+
datasets: metrics
|
|
90
|
+
.filter((m) => m.id.startsWith('queue_count_'))
|
|
91
|
+
.map((m) => {
|
|
92
|
+
const [color, bgColor] = labelColors[m.id.slice(12)];
|
|
93
|
+
return {
|
|
94
|
+
label: m.id.slice(12),
|
|
95
|
+
backgroundColor: bgColor,
|
|
96
|
+
borderColor: color,
|
|
97
|
+
data: fillData(m.values).map((v) => ({ x: v.created_at, y: v.value }))
|
|
98
|
+
};
|
|
99
|
+
})
|
|
100
|
+
};
|
|
101
|
+
delayData = {
|
|
102
|
+
datasets: metrics
|
|
103
|
+
.filter((m) => m.id.startsWith('queue_delay_'))
|
|
104
|
+
.map((m) => {
|
|
105
|
+
const [color, bgColor] = labelColors[m.id.slice(12)];
|
|
106
|
+
return {
|
|
107
|
+
label: m.id.slice(12),
|
|
108
|
+
borderColor: color,
|
|
109
|
+
backgroundColor: bgColor,
|
|
110
|
+
data: fillData(m.values, 1).map((v) => ({
|
|
111
|
+
x: v.created_at,
|
|
112
|
+
y: v.value
|
|
113
|
+
}))
|
|
114
|
+
};
|
|
115
|
+
})
|
|
116
|
+
};
|
|
117
|
+
minDate = new Date(Math.min(...countData.datasets.map((d) => new Date(d.data[0].x).getTime())));
|
|
118
|
+
loading = false;
|
|
119
|
+
}
|
|
120
|
+
loadMetrics();
|
|
121
|
+
let darkMode = false;
|
|
122
|
+
$: ChartJS.defaults.color = darkMode ? '#ccc' : '#666';
|
|
123
|
+
$: ChartJS.defaults.borderColor = darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
|
|
124
|
+
</script>
|
|
125
|
+
|
|
126
|
+
<DarkModeObserver bind:darkMode />
|
|
127
|
+
|
|
128
|
+
{#if loading}
|
|
129
|
+
<Skeleton layout={[[20]]} />
|
|
130
|
+
{:else if noMetrics}
|
|
131
|
+
<p class="text-secondary">No jobs delayed by more than 3 seconds in the last 14 days</p>
|
|
132
|
+
{:else}
|
|
133
|
+
<div class="flex flex-col gap-4">
|
|
134
|
+
{#if countData}
|
|
135
|
+
<Line
|
|
136
|
+
data={countData}
|
|
137
|
+
options={{
|
|
138
|
+
animation: false,
|
|
139
|
+
plugins: {
|
|
140
|
+
title: {
|
|
141
|
+
display: true,
|
|
142
|
+
text: 'Number of delayed jobs per tag (> 3s)'
|
|
143
|
+
}
|
|
144
|
+
},
|
|
145
|
+
scales: {
|
|
146
|
+
x: {
|
|
147
|
+
type: 'time',
|
|
148
|
+
min: minDate.toISOString(),
|
|
149
|
+
max: new Date().toISOString()
|
|
150
|
+
},
|
|
151
|
+
y: {
|
|
152
|
+
title: {
|
|
153
|
+
display: true,
|
|
154
|
+
text: 'count'
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
}}
|
|
159
|
+
/>
|
|
160
|
+
{/if}
|
|
161
|
+
{#if delayData}
|
|
162
|
+
<Line
|
|
163
|
+
data={delayData}
|
|
164
|
+
options={{
|
|
165
|
+
animation: false,
|
|
166
|
+
plugins: {
|
|
167
|
+
title: {
|
|
168
|
+
display: true,
|
|
169
|
+
text: 'Queue delay per tag (> 3s)'
|
|
170
|
+
},
|
|
171
|
+
tooltip: {
|
|
172
|
+
callbacks: {
|
|
173
|
+
label: function (context) {
|
|
174
|
+
// @ts-ignore
|
|
175
|
+
if (context.raw.y === 1) {
|
|
176
|
+
return context.dataset.label + ': 0'
|
|
177
|
+
} else {
|
|
178
|
+
// @ts-ignore
|
|
179
|
+
return context.dataset.label + ': ' + context.raw.y
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
},
|
|
185
|
+
scales: {
|
|
186
|
+
x: {
|
|
187
|
+
type: 'time',
|
|
188
|
+
min: minDate.toISOString(),
|
|
189
|
+
max: new Date().toISOString()
|
|
190
|
+
},
|
|
191
|
+
|
|
192
|
+
y: {
|
|
193
|
+
type: 'logarithmic',
|
|
194
|
+
title: {
|
|
195
|
+
display: true,
|
|
196
|
+
text: 'delay (s)'
|
|
197
|
+
},
|
|
198
|
+
ticks: {
|
|
199
|
+
callback: (value, _) => (value === 1 ? '0' : value)
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
}}
|
|
204
|
+
/>
|
|
205
|
+
{/if}
|
|
206
|
+
<Alert title="Info">
|
|
207
|
+
Only tags for jobs that have been delayed by more than 3 seconds in the last 14 days are
|
|
208
|
+
included in the graph.
|
|
209
|
+
</Alert>
|
|
210
|
+
</div>
|
|
211
|
+
{/if}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
import 'chartjs-adapter-date-fns';
|
|
3
|
+
declare const __propDef: {
|
|
4
|
+
props: Record<string, never>;
|
|
5
|
+
events: {
|
|
6
|
+
[evt: string]: CustomEvent<any>;
|
|
7
|
+
};
|
|
8
|
+
slots: {};
|
|
9
|
+
};
|
|
10
|
+
export type QueueMetricsDrawerInnerProps = typeof __propDef.props;
|
|
11
|
+
export type QueueMetricsDrawerInnerEvents = typeof __propDef.events;
|
|
12
|
+
export type QueueMetricsDrawerInnerSlots = typeof __propDef.slots;
|
|
13
|
+
export default class QueueMetricsDrawerInner extends SvelteComponent<QueueMetricsDrawerInnerProps, QueueMetricsDrawerInnerEvents, QueueMetricsDrawerInnerSlots> {
|
|
14
|
+
}
|
|
15
|
+
export {};
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
<script>import
|
|
2
|
-
import { Button, Drawer } from './common';
|
|
1
|
+
<script>import { Button, Drawer } from './common';
|
|
3
2
|
import DrawerContent from './common/drawer/DrawerContent.svelte';
|
|
4
|
-
import { Save } from 'lucide-svelte';
|
|
3
|
+
import { Loader2, Save } from 'lucide-svelte';
|
|
5
4
|
let drawer;
|
|
6
5
|
let canSave = true;
|
|
7
6
|
let resource_type = undefined;
|
|
@@ -24,14 +23,18 @@ export async function initNew(resourceType) {
|
|
|
24
23
|
|
|
25
24
|
<Drawer bind:this={drawer} size="800px">
|
|
26
25
|
<DrawerContent title={path ? 'Edit ' + path : 'Add a resource'} on:close={drawer.closeDrawer}>
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
26
|
+
{#await import('./ResourceEditor.svelte')}
|
|
27
|
+
<Loader2 class="animate-spin" />
|
|
28
|
+
{:then Module}
|
|
29
|
+
<Module.default
|
|
30
|
+
{newResource}
|
|
31
|
+
{path}
|
|
32
|
+
{resource_type}
|
|
33
|
+
on:refresh
|
|
34
|
+
bind:this={resourceEditor}
|
|
35
|
+
bind:canSave
|
|
36
|
+
/>
|
|
37
|
+
{/await}
|
|
35
38
|
<svelte:fragment slot="actions">
|
|
36
39
|
<Button
|
|
37
40
|
startIcon={{ icon: Save }}
|
|
@@ -81,7 +81,7 @@ export default class ResultJobLoader extends SvelteComponent<ResultJobLoaderProp
|
|
|
81
81
|
cancel: () => void;
|
|
82
82
|
error: (err: Error) => void;
|
|
83
83
|
} | undefined) => Promise<string>;
|
|
84
|
-
get runPreview(): (path: string | undefined, code: string, lang: "python3" | "deno" | "go" | "bash" | "powershell" | "postgresql" | "mysql" | "bigquery" | "snowflake" | "mssql" | "graphql" | "nativets" | "bun" | "php", args: Record<string, any>, tag: string | undefined, callbacks?: {
|
|
84
|
+
get runPreview(): (path: string | undefined, code: string, lang: "python3" | "deno" | "go" | "bash" | "powershell" | "postgresql" | "mysql" | "bigquery" | "snowflake" | "mssql" | "graphql" | "nativets" | "bun" | "php" | "rust", args: Record<string, any>, tag: string | undefined, callbacks?: {
|
|
85
85
|
done: (x: any) => void;
|
|
86
86
|
cancel: () => void;
|
|
87
87
|
error: (err: Error) => void;
|