@ucdjs/pipelines-ui 0.0.1-beta.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/LICENSE +21 -0
- package/README.md +27 -0
- package/dist/components/detail/execution-result.d.mts +49 -0
- package/dist/components/detail/execution-result.mjs +366 -0
- package/dist/components/detail/version-selector.d.mts +21 -0
- package/dist/components/detail/version-selector.mjs +132 -0
- package/dist/components/graph/details.d.mts +14 -0
- package/dist/components/graph/details.mjs +369 -0
- package/dist/components/graph/filters.d.mts +14 -0
- package/dist/components/graph/filters.mjs +183 -0
- package/dist/components/graph/node-types.d.mts +10 -0
- package/dist/components/graph/node-types.mjs +13 -0
- package/dist/components/graph/nodes.d.mts +14 -0
- package/dist/components/graph/nodes.mjs +264 -0
- package/dist/components/graph/pipeline-graph.d.mts +15 -0
- package/dist/components/graph/pipeline-graph.mjs +241 -0
- package/dist/components/logs/execution-log-payload.d.mts +12 -0
- package/dist/components/logs/execution-log-payload.mjs +79 -0
- package/dist/components/logs/execution-log-table.d.mts +16 -0
- package/dist/components/logs/execution-log-table.mjs +121 -0
- package/dist/components/logs/execution-span-drawer.d.mts +16 -0
- package/dist/components/logs/execution-span-drawer.mjs +208 -0
- package/dist/components/logs/execution-waterfall.d.mts +18 -0
- package/dist/components/logs/execution-waterfall.mjs +354 -0
- package/dist/components/pipeline-sidebar.d.mts +6 -0
- package/dist/components/pipeline-sidebar.mjs +190 -0
- package/dist/components/status-badge.d.mts +11 -0
- package/dist/components/status-badge.mjs +50 -0
- package/dist/components/status-icon.d.mts +11 -0
- package/dist/components/status-icon.mjs +46 -0
- package/dist/hooks/index.d.mts +7 -0
- package/dist/hooks/index.mjs +8 -0
- package/dist/hooks/use-event-view.d.mts +19 -0
- package/dist/hooks/use-event-view.mjs +112 -0
- package/dist/hooks/use-execute.d.mts +20 -0
- package/dist/hooks/use-execute.mjs +68 -0
- package/dist/hooks/use-pipeline-file.d.mts +20 -0
- package/dist/hooks/use-pipeline-file.mjs +39 -0
- package/dist/hooks/use-pipeline-versions.d.mts +10 -0
- package/dist/hooks/use-pipeline-versions.mjs +137 -0
- package/dist/hooks/use-pipeline.d.mts +21 -0
- package/dist/hooks/use-pipeline.mjs +46 -0
- package/dist/hooks/use-pipelines.d.mts +26 -0
- package/dist/hooks/use-pipelines.mjs +38 -0
- package/dist/index.d.mts +31 -0
- package/dist/index.mjs +29 -0
- package/dist/lib/adapter.d.mts +26 -0
- package/dist/lib/adapter.mjs +74 -0
- package/dist/lib/colors.d.mts +7 -0
- package/dist/lib/colors.mjs +15 -0
- package/dist/lib/execution-logs.d.mts +19 -0
- package/dist/lib/execution-logs.mjs +74 -0
- package/dist/lib/format-time.d.mts +4 -0
- package/dist/lib/format-time.mjs +7 -0
- package/dist/lib/index.d.mts +5 -0
- package/dist/lib/index.mjs +6 -0
- package/dist/lib/layout.d.mts +8 -0
- package/dist/lib/layout.mjs +71 -0
- package/dist/lib/pipeline-utils.d.mts +9 -0
- package/dist/lib/pipeline-utils.mjs +49 -0
- package/dist/lib/utils.d.mts +6 -0
- package/dist/lib/utils.mjs +10 -0
- package/dist/styles/globals.css +3 -0
- package/dist/types.d.mts +143 -0
- package/package.json +95 -0
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
//#region src/hooks/use-event-view.d.ts
|
|
2
|
+
interface EventViewState {
|
|
3
|
+
isJsonMode: boolean;
|
|
4
|
+
selectedEventId: string | null;
|
|
5
|
+
isDetailPanelOpen: boolean;
|
|
6
|
+
expandedInlineIds: Set<string>;
|
|
7
|
+
}
|
|
8
|
+
interface EventViewActions {
|
|
9
|
+
toggleJsonMode: () => void;
|
|
10
|
+
setJsonMode: (value: boolean) => void;
|
|
11
|
+
selectEvent: (eventId: string | null) => void;
|
|
12
|
+
openDetailPanel: (eventId: string) => void;
|
|
13
|
+
closeDetailPanel: () => void;
|
|
14
|
+
toggleInlineExpansion: (eventId: string) => void;
|
|
15
|
+
isInlineExpanded: (eventId: string) => boolean;
|
|
16
|
+
}
|
|
17
|
+
declare function useEventView(): EventViewState & EventViewActions;
|
|
18
|
+
//#endregion
|
|
19
|
+
export { EventViewActions, EventViewState, useEventView };
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
import { c } from "react/compiler-runtime";
|
|
2
|
+
import { useState } from "react";
|
|
3
|
+
|
|
4
|
+
//#region src/hooks/use-event-view.ts
|
|
5
|
+
function useEventView() {
|
|
6
|
+
const $ = c(14);
|
|
7
|
+
const [isJsonMode, setIsJsonMode] = useState(_temp);
|
|
8
|
+
const [selectedEventId, setSelectedEventId] = useState(null);
|
|
9
|
+
const [isDetailPanelOpen, setIsDetailPanelOpen] = useState(false);
|
|
10
|
+
const [expandedInlineIds, setExpandedInlineIds] = useState(_temp2);
|
|
11
|
+
let t0;
|
|
12
|
+
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
|
|
13
|
+
t0 = () => {
|
|
14
|
+
setIsJsonMode(_temp3);
|
|
15
|
+
};
|
|
16
|
+
$[0] = t0;
|
|
17
|
+
} else t0 = $[0];
|
|
18
|
+
const toggleJsonMode = t0;
|
|
19
|
+
let t1;
|
|
20
|
+
if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
|
|
21
|
+
t1 = (value) => {
|
|
22
|
+
setIsJsonMode(value);
|
|
23
|
+
localStorage.setItem("pipeline-events-json-mode", String(value));
|
|
24
|
+
};
|
|
25
|
+
$[1] = t1;
|
|
26
|
+
} else t1 = $[1];
|
|
27
|
+
const setJsonMode = t1;
|
|
28
|
+
let t2;
|
|
29
|
+
if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
|
|
30
|
+
t2 = (eventId) => {
|
|
31
|
+
setSelectedEventId(eventId);
|
|
32
|
+
};
|
|
33
|
+
$[2] = t2;
|
|
34
|
+
} else t2 = $[2];
|
|
35
|
+
const selectEvent = t2;
|
|
36
|
+
let t3;
|
|
37
|
+
if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
|
|
38
|
+
t3 = (eventId_0) => {
|
|
39
|
+
setSelectedEventId(eventId_0);
|
|
40
|
+
setIsDetailPanelOpen(true);
|
|
41
|
+
};
|
|
42
|
+
$[3] = t3;
|
|
43
|
+
} else t3 = $[3];
|
|
44
|
+
const openDetailPanel = t3;
|
|
45
|
+
let t4;
|
|
46
|
+
if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
|
|
47
|
+
t4 = () => {
|
|
48
|
+
setIsDetailPanelOpen(false);
|
|
49
|
+
setSelectedEventId(null);
|
|
50
|
+
};
|
|
51
|
+
$[4] = t4;
|
|
52
|
+
} else t4 = $[4];
|
|
53
|
+
const closeDetailPanel = t4;
|
|
54
|
+
let t5;
|
|
55
|
+
if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
|
|
56
|
+
t5 = (eventId_1) => {
|
|
57
|
+
setExpandedInlineIds((prev_0) => {
|
|
58
|
+
const next_0 = new Set(prev_0);
|
|
59
|
+
if (next_0.has(eventId_1)) next_0.delete(eventId_1);
|
|
60
|
+
else next_0.add(eventId_1);
|
|
61
|
+
return next_0;
|
|
62
|
+
});
|
|
63
|
+
};
|
|
64
|
+
$[5] = t5;
|
|
65
|
+
} else t5 = $[5];
|
|
66
|
+
const toggleInlineExpansion = t5;
|
|
67
|
+
let t6;
|
|
68
|
+
if ($[6] !== expandedInlineIds) {
|
|
69
|
+
t6 = (eventId_2) => expandedInlineIds.has(eventId_2);
|
|
70
|
+
$[6] = expandedInlineIds;
|
|
71
|
+
$[7] = t6;
|
|
72
|
+
} else t6 = $[7];
|
|
73
|
+
const isInlineExpanded = t6;
|
|
74
|
+
let t7;
|
|
75
|
+
if ($[8] !== expandedInlineIds || $[9] !== isDetailPanelOpen || $[10] !== isInlineExpanded || $[11] !== isJsonMode || $[12] !== selectedEventId) {
|
|
76
|
+
t7 = {
|
|
77
|
+
isJsonMode,
|
|
78
|
+
selectedEventId,
|
|
79
|
+
isDetailPanelOpen,
|
|
80
|
+
expandedInlineIds,
|
|
81
|
+
toggleJsonMode,
|
|
82
|
+
setJsonMode,
|
|
83
|
+
selectEvent,
|
|
84
|
+
openDetailPanel,
|
|
85
|
+
closeDetailPanel,
|
|
86
|
+
toggleInlineExpansion,
|
|
87
|
+
isInlineExpanded
|
|
88
|
+
};
|
|
89
|
+
$[8] = expandedInlineIds;
|
|
90
|
+
$[9] = isDetailPanelOpen;
|
|
91
|
+
$[10] = isInlineExpanded;
|
|
92
|
+
$[11] = isJsonMode;
|
|
93
|
+
$[12] = selectedEventId;
|
|
94
|
+
$[13] = t7;
|
|
95
|
+
} else t7 = $[13];
|
|
96
|
+
return t7;
|
|
97
|
+
}
|
|
98
|
+
function _temp3(prev) {
|
|
99
|
+
const next = !prev;
|
|
100
|
+
localStorage.setItem("pipeline-events-json-mode", String(next));
|
|
101
|
+
return next;
|
|
102
|
+
}
|
|
103
|
+
function _temp2() {
|
|
104
|
+
return /* @__PURE__ */ new Set();
|
|
105
|
+
}
|
|
106
|
+
function _temp() {
|
|
107
|
+
if (typeof window !== "undefined") return localStorage.getItem("pipeline-events-json-mode") === "true";
|
|
108
|
+
return false;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
//#endregion
|
|
112
|
+
export { useEventView };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { ExecuteResult } from "../types.mjs";
|
|
2
|
+
|
|
3
|
+
//#region src/hooks/use-execute.d.ts
|
|
4
|
+
interface UseExecuteOptions {
|
|
5
|
+
/**
|
|
6
|
+
* Base URL for the API (default: "")
|
|
7
|
+
*/
|
|
8
|
+
baseUrl?: string;
|
|
9
|
+
}
|
|
10
|
+
interface UseExecuteReturn {
|
|
11
|
+
execute: (fileId: string, pipelineId: string, versions: string[]) => Promise<ExecuteResult>;
|
|
12
|
+
executing: boolean;
|
|
13
|
+
result: ExecuteResult | null;
|
|
14
|
+
error: string | null;
|
|
15
|
+
executionId: string | null;
|
|
16
|
+
reset: () => void;
|
|
17
|
+
}
|
|
18
|
+
declare function useExecute(options?: UseExecuteOptions): UseExecuteReturn;
|
|
19
|
+
//#endregion
|
|
20
|
+
export { UseExecuteOptions, UseExecuteReturn, useExecute };
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import { useCallback, useState } from "react";
|
|
2
|
+
|
|
3
|
+
//#region src/hooks/use-execute.ts
|
|
4
|
+
function useExecute(options = {}) {
|
|
5
|
+
const { baseUrl = "" } = options;
|
|
6
|
+
const [executing, setExecuting] = useState(false);
|
|
7
|
+
const [result, setResult] = useState(null);
|
|
8
|
+
const [error, setError] = useState(null);
|
|
9
|
+
const [executionId, setExecutionId] = useState(null);
|
|
10
|
+
return {
|
|
11
|
+
execute: useCallback(async (fileId, pipelineId, versions) => {
|
|
12
|
+
setExecuting(true);
|
|
13
|
+
setError(null);
|
|
14
|
+
setResult(null);
|
|
15
|
+
setExecutionId(null);
|
|
16
|
+
try {
|
|
17
|
+
const data = await (await fetch(`${baseUrl}/api/pipelines/${fileId}/${pipelineId}/execute`, {
|
|
18
|
+
method: "POST",
|
|
19
|
+
headers: { "Content-Type": "application/json" },
|
|
20
|
+
body: JSON.stringify({ versions })
|
|
21
|
+
})).json();
|
|
22
|
+
if (data.success && data.executionId) {
|
|
23
|
+
setExecutionId(data.executionId);
|
|
24
|
+
const successResult = {
|
|
25
|
+
success: true,
|
|
26
|
+
pipelineId,
|
|
27
|
+
executionId: data.executionId
|
|
28
|
+
};
|
|
29
|
+
setResult(successResult);
|
|
30
|
+
return successResult;
|
|
31
|
+
} else {
|
|
32
|
+
const errorResult_0 = {
|
|
33
|
+
success: false,
|
|
34
|
+
pipelineId,
|
|
35
|
+
executionId: data.executionId,
|
|
36
|
+
error: data.error ?? "Execution failed"
|
|
37
|
+
};
|
|
38
|
+
setResult(errorResult_0);
|
|
39
|
+
setError(errorResult_0.error ?? "Execution failed");
|
|
40
|
+
return errorResult_0;
|
|
41
|
+
}
|
|
42
|
+
} catch (err) {
|
|
43
|
+
const errorResult = {
|
|
44
|
+
success: false,
|
|
45
|
+
pipelineId,
|
|
46
|
+
error: err instanceof Error ? err.message : String(err)
|
|
47
|
+
};
|
|
48
|
+
setResult(errorResult);
|
|
49
|
+
setError(errorResult.error ?? "Execution failed");
|
|
50
|
+
return errorResult;
|
|
51
|
+
} finally {
|
|
52
|
+
setExecuting(false);
|
|
53
|
+
}
|
|
54
|
+
}, [baseUrl]),
|
|
55
|
+
executing,
|
|
56
|
+
result,
|
|
57
|
+
error,
|
|
58
|
+
executionId,
|
|
59
|
+
reset: useCallback(() => {
|
|
60
|
+
setResult(null);
|
|
61
|
+
setError(null);
|
|
62
|
+
setExecutionId(null);
|
|
63
|
+
}, [])
|
|
64
|
+
};
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
//#endregion
|
|
68
|
+
export { useExecute };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { PipelineFileInfo } from "../types.mjs";
|
|
2
|
+
|
|
3
|
+
//#region src/hooks/use-pipeline-file.d.ts
|
|
4
|
+
interface PipelineFileResponse {
|
|
5
|
+
file?: PipelineFileInfo;
|
|
6
|
+
error?: string;
|
|
7
|
+
}
|
|
8
|
+
interface UsePipelineFileOptions {
|
|
9
|
+
baseUrl?: string;
|
|
10
|
+
fetchOnMount?: boolean;
|
|
11
|
+
}
|
|
12
|
+
interface UsePipelineFileReturn {
|
|
13
|
+
file: PipelineFileInfo | null;
|
|
14
|
+
loading: boolean;
|
|
15
|
+
error: string | null;
|
|
16
|
+
refetch: () => void;
|
|
17
|
+
}
|
|
18
|
+
declare function usePipelineFile(fileId: string, options?: UsePipelineFileOptions): UsePipelineFileReturn;
|
|
19
|
+
//#endregion
|
|
20
|
+
export { PipelineFileResponse, UsePipelineFileOptions, UsePipelineFileReturn, usePipelineFile };
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { useCallback, useEffect, useState } from "react";
|
|
2
|
+
|
|
3
|
+
//#region src/hooks/use-pipeline-file.ts
|
|
4
|
+
function usePipelineFile(fileId, options = {}) {
|
|
5
|
+
const { baseUrl = "", fetchOnMount = true } = options;
|
|
6
|
+
const [file, setFile] = useState(null);
|
|
7
|
+
const [loading, setLoading] = useState(fetchOnMount);
|
|
8
|
+
const [error, setError] = useState(null);
|
|
9
|
+
const fetchFile = useCallback(async () => {
|
|
10
|
+
setLoading(true);
|
|
11
|
+
setError(null);
|
|
12
|
+
try {
|
|
13
|
+
const res = await fetch(`${baseUrl}/api/pipelines/${fileId}`);
|
|
14
|
+
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
|
15
|
+
const json = await res.json();
|
|
16
|
+
if (json.error) {
|
|
17
|
+
setError(json.error);
|
|
18
|
+
setFile(null);
|
|
19
|
+
} else setFile(json.file ?? null);
|
|
20
|
+
} catch (err) {
|
|
21
|
+
setError(err instanceof Error ? err.message : "Failed to load pipeline file");
|
|
22
|
+
setFile(null);
|
|
23
|
+
} finally {
|
|
24
|
+
setLoading(false);
|
|
25
|
+
}
|
|
26
|
+
}, [baseUrl, fileId]);
|
|
27
|
+
useEffect(() => {
|
|
28
|
+
if (fetchOnMount) fetchFile();
|
|
29
|
+
}, [fetchOnMount, fetchFile]);
|
|
30
|
+
return {
|
|
31
|
+
file,
|
|
32
|
+
loading,
|
|
33
|
+
error,
|
|
34
|
+
refetch: fetchFile
|
|
35
|
+
};
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
//#endregion
|
|
39
|
+
export { usePipelineFile };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
//#region src/hooks/use-pipeline-versions.d.ts
|
|
2
|
+
interface UsePipelineVersionsReturn {
|
|
3
|
+
selectedVersions: Set<string>;
|
|
4
|
+
toggleVersion: (version: string) => void;
|
|
5
|
+
selectAll: (versions: string[]) => void;
|
|
6
|
+
deselectAll: () => void;
|
|
7
|
+
}
|
|
8
|
+
declare function usePipelineVersions(pipelineId: string, allVersions: string[], storageKeyOverride?: string): UsePipelineVersionsReturn;
|
|
9
|
+
//#endregion
|
|
10
|
+
export { UsePipelineVersionsReturn, usePipelineVersions };
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
import { c } from "react/compiler-runtime";
|
|
2
|
+
import { useState } from "react";
|
|
3
|
+
|
|
4
|
+
//#region src/hooks/use-pipeline-versions.ts
|
|
5
|
+
const STORAGE_KEY_PREFIX = "ucd-versions-";
|
|
6
|
+
function getStorageKey(storageKey) {
|
|
7
|
+
return `${STORAGE_KEY_PREFIX}${storageKey}`;
|
|
8
|
+
}
|
|
9
|
+
function loadVersionsFromStorage(storageKey, allVersions) {
|
|
10
|
+
if (typeof window === "undefined") return new Set(allVersions);
|
|
11
|
+
try {
|
|
12
|
+
const stored = localStorage.getItem(getStorageKey(storageKey));
|
|
13
|
+
if (stored) {
|
|
14
|
+
const validVersions = JSON.parse(stored).filter((v) => allVersions.includes(v));
|
|
15
|
+
if (validVersions.length > 0) return new Set(validVersions);
|
|
16
|
+
}
|
|
17
|
+
} catch {}
|
|
18
|
+
return new Set(allVersions);
|
|
19
|
+
}
|
|
20
|
+
function saveVersionsToStorage(storageKey, versions) {
|
|
21
|
+
if (typeof window === "undefined") return;
|
|
22
|
+
try {
|
|
23
|
+
localStorage.setItem(getStorageKey(storageKey), JSON.stringify(Array.from(versions)));
|
|
24
|
+
} catch {}
|
|
25
|
+
}
|
|
26
|
+
function sanitizeVersions(versions, allVersions) {
|
|
27
|
+
const valid = Array.from(versions).filter((v) => allVersions.includes(v));
|
|
28
|
+
return new Set(valid.length > 0 ? valid : allVersions);
|
|
29
|
+
}
|
|
30
|
+
function usePipelineVersions(pipelineId, allVersions, storageKeyOverride) {
|
|
31
|
+
const $ = c(28);
|
|
32
|
+
let t0;
|
|
33
|
+
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
|
|
34
|
+
t0 = {};
|
|
35
|
+
$[0] = t0;
|
|
36
|
+
} else t0 = $[0];
|
|
37
|
+
const [overridesByPipeline, setOverridesByPipeline] = useState(t0);
|
|
38
|
+
const storageKey = storageKeyOverride ?? pipelineId;
|
|
39
|
+
let t1;
|
|
40
|
+
if ($[1] !== allVersions || $[2] !== storageKey) {
|
|
41
|
+
t1 = loadVersionsFromStorage(storageKey, allVersions);
|
|
42
|
+
$[1] = allVersions;
|
|
43
|
+
$[2] = storageKey;
|
|
44
|
+
$[3] = t1;
|
|
45
|
+
} else t1 = $[3];
|
|
46
|
+
const baseSelection = t1;
|
|
47
|
+
const override = overridesByPipeline[pipelineId];
|
|
48
|
+
let t2;
|
|
49
|
+
if ($[4] !== baseSelection || $[5] !== override) {
|
|
50
|
+
t2 = override ? new Set(override) : baseSelection;
|
|
51
|
+
$[4] = baseSelection;
|
|
52
|
+
$[5] = override;
|
|
53
|
+
$[6] = t2;
|
|
54
|
+
} else t2 = $[6];
|
|
55
|
+
const source = t2;
|
|
56
|
+
let t3;
|
|
57
|
+
if ($[7] !== allVersions || $[8] !== source) {
|
|
58
|
+
t3 = sanitizeVersions(source, allVersions);
|
|
59
|
+
$[7] = allVersions;
|
|
60
|
+
$[8] = source;
|
|
61
|
+
$[9] = t3;
|
|
62
|
+
} else t3 = $[9];
|
|
63
|
+
const selectedVersions = t3;
|
|
64
|
+
let t4;
|
|
65
|
+
if ($[10] !== allVersions || $[11] !== pipelineId || $[12] !== selectedVersions || $[13] !== storageKey) {
|
|
66
|
+
t4 = (version) => {
|
|
67
|
+
setOverridesByPipeline((prev) => {
|
|
68
|
+
const current = prev[pipelineId] ? new Set(prev[pipelineId]) : selectedVersions;
|
|
69
|
+
const next = new Set(current);
|
|
70
|
+
if (next.has(version)) next.delete(version);
|
|
71
|
+
else next.add(version);
|
|
72
|
+
const sanitized = sanitizeVersions(next, allVersions);
|
|
73
|
+
saveVersionsToStorage(storageKey, sanitized);
|
|
74
|
+
return {
|
|
75
|
+
...prev,
|
|
76
|
+
[pipelineId]: Array.from(sanitized)
|
|
77
|
+
};
|
|
78
|
+
});
|
|
79
|
+
};
|
|
80
|
+
$[10] = allVersions;
|
|
81
|
+
$[11] = pipelineId;
|
|
82
|
+
$[12] = selectedVersions;
|
|
83
|
+
$[13] = storageKey;
|
|
84
|
+
$[14] = t4;
|
|
85
|
+
} else t4 = $[14];
|
|
86
|
+
const toggleVersion = t4;
|
|
87
|
+
let t5;
|
|
88
|
+
if ($[15] !== allVersions || $[16] !== pipelineId || $[17] !== storageKey) {
|
|
89
|
+
t5 = (versions) => {
|
|
90
|
+
const sanitized_0 = sanitizeVersions(versions, allVersions);
|
|
91
|
+
saveVersionsToStorage(storageKey, sanitized_0);
|
|
92
|
+
setOverridesByPipeline((prev_0) => ({
|
|
93
|
+
...prev_0,
|
|
94
|
+
[pipelineId]: Array.from(sanitized_0)
|
|
95
|
+
}));
|
|
96
|
+
};
|
|
97
|
+
$[15] = allVersions;
|
|
98
|
+
$[16] = pipelineId;
|
|
99
|
+
$[17] = storageKey;
|
|
100
|
+
$[18] = t5;
|
|
101
|
+
} else t5 = $[18];
|
|
102
|
+
const selectAll = t5;
|
|
103
|
+
let t6;
|
|
104
|
+
if ($[19] !== allVersions || $[20] !== pipelineId || $[21] !== storageKey) {
|
|
105
|
+
t6 = () => {
|
|
106
|
+
const sanitized_1 = sanitizeVersions([], allVersions);
|
|
107
|
+
saveVersionsToStorage(storageKey, sanitized_1);
|
|
108
|
+
setOverridesByPipeline((prev_1) => ({
|
|
109
|
+
...prev_1,
|
|
110
|
+
[pipelineId]: Array.from(sanitized_1)
|
|
111
|
+
}));
|
|
112
|
+
};
|
|
113
|
+
$[19] = allVersions;
|
|
114
|
+
$[20] = pipelineId;
|
|
115
|
+
$[21] = storageKey;
|
|
116
|
+
$[22] = t6;
|
|
117
|
+
} else t6 = $[22];
|
|
118
|
+
const deselectAll = t6;
|
|
119
|
+
let t7;
|
|
120
|
+
if ($[23] !== deselectAll || $[24] !== selectAll || $[25] !== selectedVersions || $[26] !== toggleVersion) {
|
|
121
|
+
t7 = {
|
|
122
|
+
selectedVersions,
|
|
123
|
+
toggleVersion,
|
|
124
|
+
selectAll,
|
|
125
|
+
deselectAll
|
|
126
|
+
};
|
|
127
|
+
$[23] = deselectAll;
|
|
128
|
+
$[24] = selectAll;
|
|
129
|
+
$[25] = selectedVersions;
|
|
130
|
+
$[26] = toggleVersion;
|
|
131
|
+
$[27] = t7;
|
|
132
|
+
} else t7 = $[27];
|
|
133
|
+
return t7;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
//#endregion
|
|
137
|
+
export { usePipelineVersions };
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { PipelineDetails } from "../types.mjs";
|
|
2
|
+
|
|
3
|
+
//#region src/hooks/use-pipeline.d.ts
|
|
4
|
+
interface UsePipelineOptions {
|
|
5
|
+
/** Base URL for the API (default: "") */
|
|
6
|
+
baseUrl?: string;
|
|
7
|
+
/** Whether to fetch on mount (default: true) */
|
|
8
|
+
fetchOnMount?: boolean;
|
|
9
|
+
}
|
|
10
|
+
interface UsePipelineReturn {
|
|
11
|
+
pipeline: PipelineDetails | null;
|
|
12
|
+
loading: boolean;
|
|
13
|
+
error: string | null;
|
|
14
|
+
refetch: () => void;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* Hook to fetch and manage a single pipeline by ID
|
|
18
|
+
*/
|
|
19
|
+
declare function usePipeline(fileId: string, pipelineId: string, options?: UsePipelineOptions): UsePipelineReturn;
|
|
20
|
+
//#endregion
|
|
21
|
+
export { UsePipelineOptions, UsePipelineReturn, usePipeline };
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { useCallback, useEffect, useState } from "react";
|
|
2
|
+
|
|
3
|
+
//#region src/hooks/use-pipeline.ts
|
|
4
|
+
/**
|
|
5
|
+
* Hook to fetch and manage a single pipeline by ID
|
|
6
|
+
*/
|
|
7
|
+
function usePipeline(fileId, pipelineId, options = {}) {
|
|
8
|
+
const { baseUrl = "", fetchOnMount = true } = options;
|
|
9
|
+
const [pipeline, setPipeline] = useState(null);
|
|
10
|
+
const [loading, setLoading] = useState(fetchOnMount);
|
|
11
|
+
const [error, setError] = useState(null);
|
|
12
|
+
const fetchPipeline = useCallback(async () => {
|
|
13
|
+
setLoading(true);
|
|
14
|
+
setError(null);
|
|
15
|
+
try {
|
|
16
|
+
const res = await fetch(`${baseUrl}/api/pipelines/${fileId}/${pipelineId}`);
|
|
17
|
+
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
|
18
|
+
const json = await res.json();
|
|
19
|
+
if (json.error) {
|
|
20
|
+
setError(json.error);
|
|
21
|
+
setPipeline(null);
|
|
22
|
+
} else setPipeline(json.pipeline ?? null);
|
|
23
|
+
} catch (err) {
|
|
24
|
+
setError(err instanceof Error ? err.message : "Failed to load pipeline");
|
|
25
|
+
setPipeline(null);
|
|
26
|
+
} finally {
|
|
27
|
+
setLoading(false);
|
|
28
|
+
}
|
|
29
|
+
}, [
|
|
30
|
+
baseUrl,
|
|
31
|
+
fileId,
|
|
32
|
+
pipelineId
|
|
33
|
+
]);
|
|
34
|
+
useEffect(() => {
|
|
35
|
+
if (fetchOnMount) fetchPipeline();
|
|
36
|
+
}, [fetchOnMount, fetchPipeline]);
|
|
37
|
+
return {
|
|
38
|
+
pipeline,
|
|
39
|
+
loading,
|
|
40
|
+
error,
|
|
41
|
+
refetch: fetchPipeline
|
|
42
|
+
};
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
//#endregion
|
|
46
|
+
export { usePipeline };
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { PipelinesResponse } from "../types.mjs";
|
|
2
|
+
|
|
3
|
+
//#region src/hooks/use-pipelines.d.ts
|
|
4
|
+
interface UsePipelinesOptions {
|
|
5
|
+
/**
|
|
6
|
+
* Base URL for the API (default: "")
|
|
7
|
+
*/
|
|
8
|
+
baseUrl?: string;
|
|
9
|
+
/**
|
|
10
|
+
* Optional search query
|
|
11
|
+
*/
|
|
12
|
+
search?: string;
|
|
13
|
+
/**
|
|
14
|
+
* Whether to fetch on mount (default: true)
|
|
15
|
+
*/
|
|
16
|
+
fetchOnMount?: boolean;
|
|
17
|
+
}
|
|
18
|
+
interface UsePipelinesReturn {
|
|
19
|
+
data: PipelinesResponse | null;
|
|
20
|
+
loading: boolean;
|
|
21
|
+
error: string | null;
|
|
22
|
+
refetch: () => void;
|
|
23
|
+
}
|
|
24
|
+
declare function usePipelines(options?: UsePipelinesOptions): UsePipelinesReturn;
|
|
25
|
+
//#endregion
|
|
26
|
+
export { UsePipelinesOptions, UsePipelinesReturn, usePipelines };
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { useCallback, useEffect, useState } from "react";
|
|
2
|
+
|
|
3
|
+
//#region src/hooks/use-pipelines.ts
|
|
4
|
+
function usePipelines(options = {}) {
|
|
5
|
+
const { baseUrl = "", search, fetchOnMount = true } = options;
|
|
6
|
+
const [data, setData] = useState(null);
|
|
7
|
+
const [loading, setLoading] = useState(fetchOnMount);
|
|
8
|
+
const [error, setError] = useState(null);
|
|
9
|
+
const fetchPipelines = useCallback(async () => {
|
|
10
|
+
setLoading(true);
|
|
11
|
+
setError(null);
|
|
12
|
+
try {
|
|
13
|
+
const params = new URLSearchParams();
|
|
14
|
+
if (search && search.trim()) params.set("search", search.trim());
|
|
15
|
+
const queryString = params.toString();
|
|
16
|
+
const url = queryString ? `${baseUrl}/api/pipelines?${queryString}` : `${baseUrl}/api/pipelines`;
|
|
17
|
+
const res = await fetch(url);
|
|
18
|
+
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
|
19
|
+
setData(await res.json());
|
|
20
|
+
} catch (err) {
|
|
21
|
+
setError(err instanceof Error ? err.message : "Failed to load pipelines");
|
|
22
|
+
} finally {
|
|
23
|
+
setLoading(false);
|
|
24
|
+
}
|
|
25
|
+
}, [baseUrl, search]);
|
|
26
|
+
useEffect(() => {
|
|
27
|
+
if (fetchOnMount) fetchPipelines();
|
|
28
|
+
}, [fetchOnMount, fetchPipelines]);
|
|
29
|
+
return {
|
|
30
|
+
data,
|
|
31
|
+
loading,
|
|
32
|
+
error,
|
|
33
|
+
refetch: fetchPipelines
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
//#endregion
|
|
38
|
+
export { usePipelines };
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { PipelineSidebar } from "./components/pipeline-sidebar.mjs";
|
|
2
|
+
import { StatusBadge } from "./components/status-badge.mjs";
|
|
3
|
+
import { StatusIcon } from "./components/status-icon.mjs";
|
|
4
|
+
import { EventViewActions, EventViewState, useEventView } from "./hooks/use-event-view.mjs";
|
|
5
|
+
import { ExecuteResult, ExecutionEventItem, ExecutionEventsResponse, ExecutionLogItem, ExecutionLogPayload, ExecutionLogStream, ExecutionLogsResponse, LoadError, PipelineDetails, PipelineFileInfo, PipelineInfo, PipelineResponse, PipelinesResponse } from "./types.mjs";
|
|
6
|
+
import { UseExecuteOptions, UseExecuteReturn, useExecute } from "./hooks/use-execute.mjs";
|
|
7
|
+
import { UsePipelineOptions, UsePipelineReturn, usePipeline } from "./hooks/use-pipeline.mjs";
|
|
8
|
+
import { PipelineFileResponse, UsePipelineFileOptions, UsePipelineFileReturn, usePipelineFile } from "./hooks/use-pipeline-file.mjs";
|
|
9
|
+
import { UsePipelineVersionsReturn, usePipelineVersions } from "./hooks/use-pipeline-versions.mjs";
|
|
10
|
+
import { UsePipelinesOptions, UsePipelinesReturn, usePipelines } from "./hooks/use-pipelines.mjs";
|
|
11
|
+
import "./hooks/index.mjs";
|
|
12
|
+
import { ExecutionErrors, ExecutionErrorsProps, ExecutionResult, ExecutionResultProps, ExecutionSummary, ExecutionSummaryProps } from "./components/detail/execution-result.mjs";
|
|
13
|
+
import { VersionSelector, VersionSelectorProps } from "./components/detail/version-selector.mjs";
|
|
14
|
+
import { PipelineGraphDetails, PipelineGraphDetailsProps } from "./components/graph/details.mjs";
|
|
15
|
+
import { PipelineGraphFilters, PipelineGraphFiltersProps } from "./components/graph/filters.mjs";
|
|
16
|
+
import { nodeTypes } from "./components/graph/node-types.mjs";
|
|
17
|
+
import { ArtifactNode, FileNode, OutputNode, PipelineNodeData, RouteNode, SourceNode } from "./components/graph/nodes.mjs";
|
|
18
|
+
import { PipelineGraph, PipelineGraphProps } from "./components/graph/pipeline-graph.mjs";
|
|
19
|
+
import { ExecutionLogPayloadPanel, ExecutionLogPayloadPanelProps } from "./components/logs/execution-log-payload.mjs";
|
|
20
|
+
import { ExecutionLogTable, ExecutionLogTableProps } from "./components/logs/execution-log-table.mjs";
|
|
21
|
+
import { buildExecutionSpans, formatBytes, formatDuration, formatTimeLabel, formatTimestamp } from "./lib/execution-logs.mjs";
|
|
22
|
+
import { ExecutionSpanDrawer, ExecutionSpanDrawerProps } from "./components/logs/execution-span-drawer.mjs";
|
|
23
|
+
import { ExecutionWaterfall, ExecutionWaterfallProps } from "./components/logs/execution-waterfall.mjs";
|
|
24
|
+
import { PipelineFlowEdge, PipelineFlowNode, filterNodesByType, pipelineGraphToFlow } from "./lib/adapter.mjs";
|
|
25
|
+
import { getNodeColor, nodeTypeColors } from "./lib/colors.mjs";
|
|
26
|
+
import { formatHighPrecisionTime } from "./lib/format-time.mjs";
|
|
27
|
+
import { NODE_HEIGHT, NODE_WIDTH, applyLayout } from "./lib/layout.mjs";
|
|
28
|
+
import { toPipelineDetails, toPipelineInfo, toRouteDetails } from "./lib/pipeline-utils.mjs";
|
|
29
|
+
import { cn } from "./lib/utils.mjs";
|
|
30
|
+
import { ExecutionStatus } from "@ucdjs/pipelines-executor";
|
|
31
|
+
export { ArtifactNode, EventViewActions, EventViewState, type ExecuteResult, ExecutionErrors, type ExecutionErrorsProps, type ExecutionEventItem, type ExecutionEventsResponse, type ExecutionLogItem, type ExecutionLogPayload, ExecutionLogPayloadPanel, type ExecutionLogPayloadPanelProps, type ExecutionLogStream, ExecutionLogTable, type ExecutionLogTableProps, type ExecutionLogsResponse, ExecutionResult, type ExecutionResultProps, ExecutionSpanDrawer, type ExecutionSpanDrawerProps, type ExecutionStatus, ExecutionSummary, type ExecutionSummaryProps, ExecutionWaterfall, type ExecutionWaterfallProps, FileNode, type LoadError, NODE_HEIGHT, NODE_WIDTH, OutputNode, type PipelineDetails, type PipelineFileInfo, PipelineFileResponse, type PipelineFlowEdge, type PipelineFlowNode, PipelineGraph, PipelineGraphDetails, type PipelineGraphDetailsProps, PipelineGraphFilters, type PipelineGraphFiltersProps, type PipelineGraphProps, type PipelineInfo, type PipelineNodeData, type PipelineResponse, PipelineSidebar, type PipelinesResponse, RouteNode, SourceNode, StatusBadge, StatusIcon, UseExecuteOptions, UseExecuteReturn, UsePipelineFileOptions, UsePipelineFileReturn, UsePipelineOptions, UsePipelineReturn, UsePipelineVersionsReturn, UsePipelinesOptions, UsePipelinesReturn, VersionSelector, type VersionSelectorProps, applyLayout, buildExecutionSpans, cn, filterNodesByType, formatBytes, formatDuration, formatHighPrecisionTime, formatTimeLabel, formatTimestamp, getNodeColor, nodeTypeColors, nodeTypes, pipelineGraphToFlow, toPipelineDetails, toPipelineInfo, toRouteDetails, useEventView, useExecute, usePipeline, usePipelineFile, usePipelineVersions, usePipelines };
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { cn } from "./lib/utils.mjs";
|
|
2
|
+
import { ExecutionErrors, ExecutionResult, ExecutionSummary } from "./components/detail/execution-result.mjs";
|
|
3
|
+
import { VersionSelector } from "./components/detail/version-selector.mjs";
|
|
4
|
+
import { PipelineGraphDetails } from "./components/graph/details.mjs";
|
|
5
|
+
import { PipelineGraphFilters } from "./components/graph/filters.mjs";
|
|
6
|
+
import { ArtifactNode, FileNode, OutputNode, RouteNode, SourceNode } from "./components/graph/nodes.mjs";
|
|
7
|
+
import { nodeTypes } from "./components/graph/node-types.mjs";
|
|
8
|
+
import { filterNodesByType, pipelineGraphToFlow } from "./lib/adapter.mjs";
|
|
9
|
+
import { getNodeColor, nodeTypeColors } from "./lib/colors.mjs";
|
|
10
|
+
import { NODE_HEIGHT, NODE_WIDTH, applyLayout } from "./lib/layout.mjs";
|
|
11
|
+
import { PipelineGraph } from "./components/graph/pipeline-graph.mjs";
|
|
12
|
+
import { ExecutionLogPayloadPanel } from "./components/logs/execution-log-payload.mjs";
|
|
13
|
+
import { buildExecutionSpans, formatBytes, formatDuration, formatTimeLabel, formatTimestamp } from "./lib/execution-logs.mjs";
|
|
14
|
+
import { ExecutionLogTable } from "./components/logs/execution-log-table.mjs";
|
|
15
|
+
import { ExecutionSpanDrawer } from "./components/logs/execution-span-drawer.mjs";
|
|
16
|
+
import { ExecutionWaterfall } from "./components/logs/execution-waterfall.mjs";
|
|
17
|
+
import { useEventView } from "./hooks/use-event-view.mjs";
|
|
18
|
+
import { useExecute } from "./hooks/use-execute.mjs";
|
|
19
|
+
import { usePipeline } from "./hooks/use-pipeline.mjs";
|
|
20
|
+
import { usePipelineFile } from "./hooks/use-pipeline-file.mjs";
|
|
21
|
+
import { usePipelineVersions } from "./hooks/use-pipeline-versions.mjs";
|
|
22
|
+
import { usePipelines } from "./hooks/use-pipelines.mjs";
|
|
23
|
+
import { PipelineSidebar } from "./components/pipeline-sidebar.mjs";
|
|
24
|
+
import { StatusBadge } from "./components/status-badge.mjs";
|
|
25
|
+
import { StatusIcon } from "./components/status-icon.mjs";
|
|
26
|
+
import { formatHighPrecisionTime } from "./lib/format-time.mjs";
|
|
27
|
+
import { toPipelineDetails, toPipelineInfo, toRouteDetails } from "./lib/pipeline-utils.mjs";
|
|
28
|
+
|
|
29
|
+
export { ArtifactNode, ExecutionErrors, ExecutionLogPayloadPanel, ExecutionLogTable, ExecutionResult, ExecutionSpanDrawer, ExecutionSummary, ExecutionWaterfall, FileNode, NODE_HEIGHT, NODE_WIDTH, OutputNode, PipelineGraph, PipelineGraphDetails, PipelineGraphFilters, PipelineSidebar, RouteNode, SourceNode, StatusBadge, StatusIcon, VersionSelector, applyLayout, buildExecutionSpans, cn, filterNodesByType, formatBytes, formatDuration, formatHighPrecisionTime, formatTimeLabel, formatTimestamp, getNodeColor, nodeTypeColors, nodeTypes, pipelineGraphToFlow, toPipelineDetails, toPipelineInfo, toRouteDetails, useEventView, useExecute, usePipeline, usePipelineFile, usePipelineVersions, usePipelines };
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { Edge, Node } from "@xyflow/react";
|
|
2
|
+
import { PipelineGraph, PipelineGraphEdge, PipelineGraphNode, PipelineGraphNodeType } from "@ucdjs/pipelines-core";
|
|
3
|
+
|
|
4
|
+
//#region src/lib/adapter.d.ts
|
|
5
|
+
interface PipelineFlowNode extends Node {
|
|
6
|
+
data: {
|
|
7
|
+
pipelineNode: PipelineGraphNode;
|
|
8
|
+
label: string;
|
|
9
|
+
};
|
|
10
|
+
type: PipelineGraphNodeType;
|
|
11
|
+
}
|
|
12
|
+
interface PipelineFlowEdge extends Edge {
|
|
13
|
+
data: {
|
|
14
|
+
pipelineEdge: PipelineGraphEdge;
|
|
15
|
+
};
|
|
16
|
+
}
|
|
17
|
+
declare function pipelineGraphToFlow(graph: PipelineGraph): {
|
|
18
|
+
nodes: PipelineFlowNode[];
|
|
19
|
+
edges: PipelineFlowEdge[];
|
|
20
|
+
};
|
|
21
|
+
declare function filterNodesByType(nodes: PipelineFlowNode[], edges: PipelineFlowEdge[], visibleTypes: Set<PipelineGraphNodeType>): {
|
|
22
|
+
nodes: PipelineFlowNode[];
|
|
23
|
+
edges: PipelineFlowEdge[];
|
|
24
|
+
};
|
|
25
|
+
//#endregion
|
|
26
|
+
export { PipelineFlowEdge, PipelineFlowNode, filterNodesByType, pipelineGraphToFlow };
|