@burdenoff/fluidgrids-fe-sdk 2026.1111.15 → 2026.1111.17

package/dist/DataSinkDashboardPage-1h2QsMzH.js

@@ -0,0 +1,270 @@
+"use client";
+import { t as __exportAll } from "./rolldown-runtime-hDbaFkMy.js";
+import { r as useTr } from "./TranslationBridge-Da-TPgQm.js";
+import { n as useDataSinks, t as useDataSinkData } from "./useObservability-CfEw3ZFD.js";
+import { s as prettyJson, t as formatBytes } from "./utils-uaL5UVxb.js";
+import { useEffect, useMemo, useState } from "react";
+import { Icon } from "@iconify/react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Input } from "@burdenoff/fe-libs/ui";
+import { Button as Button$1 } from "@burdenoff/fe-libs/button";
+
+// src/modules/observability/pages/DataSinkDashboardPage.tsx
+var DataSinkDashboardPage_exports = /* @__PURE__ */ __exportAll({ DataSinkDashboardPage: () => DataSinkDashboardPage });
+function valueLabel(value) {
+	if (value === null || value === void 0) return "—";
+	if (typeof value === "object") return JSON.stringify(value);
+	return String(value);
+}
+function DataPreview({ value }) {
+	const tr = useTr();
+	if (Array.isArray(value)) {
+		const rows = value.filter((item) => Boolean(item) && typeof item === "object" && !Array.isArray(item));
+		if (rows.length > 0) {
+			const keys = [...new Set(rows.flatMap((row) => Object.keys(row)))].slice(0, 12);
+			return /* @__PURE__ */ jsxs("div", {
+				className: "overflow-x-auto rounded-lg border border-border-secondary",
+				children: [/* @__PURE__ */ jsxs("table", {
+					className: "min-w-full text-left text-sm",
+					children: [/* @__PURE__ */ jsx("thead", {
+						className: "bg-background-tertiary text-xs uppercase text-text-secondary",
+						children: /* @__PURE__ */ jsx("tr", { children: keys.map((key) => /* @__PURE__ */ jsx("th", {
+							className: "whitespace-nowrap px-3 py-2 font-medium",
+							children: key
+						}, key)) })
+					}), /* @__PURE__ */ jsx("tbody", {
+						className: "divide-y divide-border-secondary",
+						children: rows.slice(0, 50).map((row, index) => /* @__PURE__ */ jsx("tr", {
+							className: "text-text-primary",
+							children: keys.map((key) => /* @__PURE__ */ jsx("td", {
+								className: "max-w-xs truncate px-3 py-2",
+								children: valueLabel(row[key])
+							}, key))
+						}, index))
+					})]
+				}), rows.length > 50 && /* @__PURE__ */ jsx("p", {
+					className: "border-t border-border-secondary px-3 py-2 text-xs text-text-secondary",
+					children: tr("fluidgrids.dataSinks.previewLimit", "Showing the first 50 rows")
+				})]
+			});
+		}
+	}
+	return /* @__PURE__ */ jsx("pre", {
+		className: "max-h-[28rem] overflow-auto rounded-lg border border-border-secondary bg-background-primary p-4 text-xs text-text-primary",
+		children: prettyJson(value)
+	});
+}
+function SinkCard({ sink, selected, onSelect }) {
+	const tr = useTr();
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: onSelect,
+		className: `w-full rounded-lg border p-4 text-left transition-colors ${selected ? "border-action-primary-bg bg-action-primary-bg/10" : "border-border-secondary bg-background-secondary hover:border-action-primary-bg/60"}`,
+		"aria-pressed": selected,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-start justify-between gap-3",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "min-w-0",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "truncate font-medium text-text-primary",
+					children: sink.name || sink.key
+				}), /* @__PURE__ */ jsx("p", {
+					className: "mt-1 truncate font-mono text-xs text-text-secondary",
+					children: sink.key
+				})]
+			}), /* @__PURE__ */ jsx("span", {
+				className: "shrink-0 rounded-full bg-background-tertiary px-2 py-0.5 text-xs text-text-secondary",
+				children: sink.status
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "mt-3 flex items-center justify-between text-xs text-text-secondary",
+			children: [/* @__PURE__ */ jsx("span", { children: formatBytes(sink.sizeBytes) }), /* @__PURE__ */ jsxs("span", { children: [
+				sink.linkedWorkflowCount,
+				" ",
+				tr("fluidgrids.dataSinks.workflows", "workflows")
+			] })]
+		})]
+	});
+}
+function DataSinkDashboardPage() {
+	const tr = useTr();
+	const [search, setSearch] = useState("");
+	const [selectedId, setSelectedId] = useState(null);
+	const { sinks, totalCount, loading, error, refetch } = useDataSinks(search);
+	const selectedSink = useMemo(() => sinks.find((sink) => sink.id === selectedId) ?? sinks[0] ?? null, [selectedId, sinks]);
+	const { sinkData, loading: dataLoading, error: dataError, refetch: refetchData } = useDataSinkData(selectedSink);
+	useEffect(() => {
+		if (selectedSink && selectedSink.id !== selectedId) setSelectedId(selectedSink.id);
+	}, [selectedId, selectedSink]);
+	const payload = sinkData?.extracted ?? sinkData?.raw;
+	const totalBytes = sinks.reduce((total, sink) => total + sink.sizeBytes, 0);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "min-h-screen bg-background-primary p-4 sm:p-6",
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: "mb-6 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between",
+				"data-tour": "fluidgrids-data-sinks-header",
+				children: [/* @__PURE__ */ jsxs("div", { children: [
+					/* @__PURE__ */ jsx("p", {
+						className: "text-xs font-medium uppercase tracking-wide text-text-secondary",
+						children: tr("fluidgrids.dataSinks.kicker", "BigConsole data")
+					}),
+					/* @__PURE__ */ jsx("h1", {
+						className: "mt-1 text-2xl font-semibold text-text-primary sm:text-3xl",
+						children: tr("fluidgrids.dataSinks.title", "DataSink dashboard")
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "mt-1 text-sm text-text-secondary",
+						children: tr("fluidgrids.dataSinks.subtitle", "Inspect workflow-produced data and its freshness without leaving FluidGrids.")
+					})
+				] }), /* @__PURE__ */ jsxs(Button$1, {
+					variant: "outline",
+					onClick: () => void refetch(),
+					disabled: loading,
+					children: [/* @__PURE__ */ jsx(Icon, {
+						icon: "mdi:refresh",
+						className: "mr-1",
+						width: 16
+					}), tr("fluidgrids.dataSinks.refresh", "Refresh")]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("section", {
+				className: "mb-6 grid gap-4 sm:grid-cols-3",
+				"data-tour": "fluidgrids-data-sinks-stats",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "rounded-xl border border-border-secondary bg-background-secondary p-4",
+						children: [/* @__PURE__ */ jsx("p", {
+							className: "text-sm text-text-secondary",
+							children: tr("fluidgrids.dataSinks.totalSinks", "DataSinks")
+						}), /* @__PURE__ */ jsx("p", {
+							className: "mt-2 text-2xl font-semibold text-text-primary",
+							children: totalCount
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "rounded-xl border border-border-secondary bg-background-secondary p-4",
+						children: [/* @__PURE__ */ jsx("p", {
+							className: "text-sm text-text-secondary",
+							children: tr("fluidgrids.dataSinks.activeSinks", "Active sinks")
+						}), /* @__PURE__ */ jsx("p", {
+							className: "mt-2 text-2xl font-semibold text-status-success-text",
+							children: sinks.filter((sink) => sink.isActive).length
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "rounded-xl border border-border-secondary bg-background-secondary p-4",
+						children: [/* @__PURE__ */ jsx("p", {
+							className: "text-sm text-text-secondary",
+							children: tr("fluidgrids.dataSinks.totalStorage", "Visible storage")
+						}), /* @__PURE__ */ jsx("p", {
+							className: "mt-2 text-2xl font-semibold text-text-primary",
+							children: formatBytes(totalBytes)
+						})]
+					})
+				]
+			}),
+			error && /* @__PURE__ */ jsx("div", {
+				role: "alert",
+				className: "mb-6 rounded-lg border border-status-error-border bg-status-error-bg-subtle p-4 text-sm text-status-error-text",
+				children: error.message
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid gap-6 xl:grid-cols-[22rem_minmax(0,1fr)]",
+				children: [/* @__PURE__ */ jsxs("aside", {
+					className: "space-y-3",
+					"data-tour": "fluidgrids-data-sinks-list",
+					children: [
+						/* @__PURE__ */ jsx(Input, {
+							value: search,
+							onChange: (event) => setSearch(event.target.value),
+							placeholder: tr("fluidgrids.dataSinks.search", "Search by name or key"),
+							"aria-label": tr("fluidgrids.dataSinks.search", "Search by name or key")
+						}),
+						loading && sinks.length === 0 && /* @__PURE__ */ jsx("p", {
+							className: "p-4 text-sm text-text-secondary",
+							children: tr("fluidgrids.dataSinks.loading", "Loading DataSinks…")
+						}),
+						!loading && sinks.length === 0 && /* @__PURE__ */ jsx("div", {
+							className: "rounded-lg border border-dashed border-border-secondary p-6 text-center text-sm text-text-secondary",
+							children: tr("fluidgrids.dataSinks.empty", "No active DataSinks found.")
+						}),
+						sinks.map((sink) => /* @__PURE__ */ jsx(SinkCard, {
+							sink,
+							selected: sink.id === selectedSink?.id,
+							onSelect: () => setSelectedId(sink.id)
+						}, sink.id))
+					]
+				}), /* @__PURE__ */ jsxs("main", {
+					className: "min-w-0 rounded-xl border border-border-secondary bg-background-secondary p-5",
+					"data-tour": "fluidgrids-data-sinks-preview",
+					children: [!selectedSink && /* @__PURE__ */ jsxs("div", {
+						className: "flex min-h-64 flex-col items-center justify-center text-center",
+						children: [
+							/* @__PURE__ */ jsx(Icon, {
+								icon: "mdi:database-outline",
+								className: "mb-3 text-text-secondary",
+								width: 40
+							}),
+							/* @__PURE__ */ jsx("p", {
+								className: "font-medium text-text-primary",
+								children: tr("fluidgrids.dataSinks.selectTitle", "Select a DataSink")
+							}),
+							/* @__PURE__ */ jsx("p", {
+								className: "mt-1 text-sm text-text-secondary",
+								children: tr("fluidgrids.dataSinks.selectDescription", "Choose a sink to inspect its latest payload.")
+							})
+						]
+					}), selectedSink && /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "mb-5 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "min-w-0",
+								children: [/* @__PURE__ */ jsx("h2", {
+									className: "truncate text-lg font-semibold text-text-primary",
+									children: selectedSink.name || selectedSink.key
+								}), /* @__PURE__ */ jsxs("p", {
+									className: "mt-1 font-mono text-xs text-text-secondary",
+									children: [
+										selectedSink.key,
+										" ·",
+										" ",
+										tr("fluidgrids.dataSinks.updated", "Updated"),
+										" ",
+										new Date(selectedSink.lastRefreshedAt).toLocaleString()
+									]
+								})]
+							}), /* @__PURE__ */ jsxs(Button$1, {
+								variant: "outline",
+								size: "sm",
+								onClick: () => void refetchData(),
+								disabled: dataLoading,
+								children: [/* @__PURE__ */ jsx(Icon, {
+									icon: "mdi:database-refresh-outline",
+									className: "mr-1",
+									width: 16
+								}), tr("fluidgrids.dataSinks.refreshPayload", "Refresh payload")]
+							})]
+						}),
+						dataError && /* @__PURE__ */ jsx("div", {
+							role: "alert",
+							className: "mb-4 rounded-lg border border-status-error-border bg-status-error-bg-subtle p-3 text-sm text-status-error-text",
+							children: dataError.message
+						}),
+						dataLoading && !sinkData && /* @__PURE__ */ jsx("div", { className: "h-64 animate-pulse rounded-lg bg-background-primary" }),
+						!dataLoading && sinkData && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+							className: "mb-4 flex flex-wrap gap-3 text-xs text-text-secondary",
+							children: [
+								/* @__PURE__ */ jsx("span", { children: sinkData.cached ? tr("fluidgrids.dataSinks.cached", "Cached") : tr("fluidgrids.dataSinks.fresh", "Fresh") }),
+								/* @__PURE__ */ jsxs("span", { children: ["v", sinkData.version] }),
+								sinkData.totalCount !== null && sinkData.totalCount !== void 0 && /* @__PURE__ */ jsxs("span", { children: [sinkData.totalCount, " rows"] })
+							]
+						}), /* @__PURE__ */ jsx(DataPreview, { value: payload })] })
+					] })]
+				})]
+			})
+		]
+	});
+}
+
+export { DataSinkDashboardPage_exports as n, DataSinkDashboardPage as t };