@plumile/backoffice-react 0.1.167 → 0.1.169

package/lib/esm/pages/BackofficeDashboardWidgetContent.js

@@ -4,68 +4,247 @@ import { BackofficeBillingUsageChart as n } from "../components/backoffice/billi
 import { buildDataTableColumns as r } from "../components/backoffice/columns/buildDataTableColumns.js";
 import { resolveLabel as i } from "./BackofficeDashboardPage.helpers.js";
 import { tileBody as a, tileCount as o } from "./backofficeDashboardPage.css.js";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { useTranslation as l } from "react-i18next";
-import * as u from "react-relay";
-import { BackofficeEmptyState as d } from "@plumile/ui/backoffice/molecules/backoffice_empty_state/BackofficeEmptyState.js";
-import { DashboardPanel as f } from "@plumile/ui/components/dashboard/dashboard_panel/DashboardPanel.js";
-import { DashboardQuickActions as p } from "@plumile/ui/components/dashboard/dashboard_quick_actions/DashboardQuickActions.js";
-import { DashboardMetricGroup as m } from "@plumile/ui/components/dashboard/dashboard_metric_group/DashboardMetricGroup.js";
-import { DashboardStatusList as h } from "@plumile/ui/components/dashboard/dashboard_status_list/DashboardStatusList.js";
-import { DataTable as g } from "@plumile/ui/components/data-table/DataTable.js";
+import { useEffect as s, useMemo as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useTranslation as f } from "react-i18next";
+import * as p from "react-relay";
+import { BackofficeEmptyState as m } from "@plumile/ui/backoffice/molecules/backoffice_empty_state/BackofficeEmptyState.js";
+import { buildBackofficeFallbackListHref as h, buildBackofficeListHref as g } from "@plumile/backoffice-core/state/buildListHref.js";
+import { DashboardPanel as _ } from "@plumile/ui/components/dashboard/dashboard_panel/DashboardPanel.js";
+import { DashboardQuickActions as v } from "@plumile/ui/components/dashboard/dashboard_quick_actions/DashboardQuickActions.js";
+import { DashboardMetricGroup as y } from "@plumile/ui/components/dashboard/dashboard_metric_group/DashboardMetricGroup.js";
+import { DashboardStatusList as b } from "@plumile/ui/components/dashboard/dashboard_status_list/DashboardStatusList.js";
+import { DashboardBreakdownList as x } from "@plumile/ui/components/dashboard/dashboard_operational/DashboardBreakdownList.js";
+import { DashboardEntitySpotlight as S } from "@plumile/ui/components/dashboard/dashboard_operational/DashboardEntitySpotlight.js";
+import { DashboardHealthMatrix as C } from "@plumile/ui/components/dashboard/dashboard_operational/DashboardHealthMatrix.js";
+import { DashboardRiskQueue as w } from "@plumile/ui/components/dashboard/dashboard_operational/DashboardRiskQueue.js";
+import { DashboardSlaGauge as T } from "@plumile/ui/components/dashboard/dashboard_operational/DashboardSlaGauge.js";
+import { DashboardTimelineChart as E } from "@plumile/ui/components/dashboard/dashboard_operational/DashboardTimelineChart.js";
+import { DashboardTrendMetric as D } from "@plumile/ui/components/dashboard/dashboard_operational/DashboardTrendMetric.js";
+import { DashboardWindowControl as O } from "@plumile/ui/components/dashboard/dashboard_operational/DashboardWindowControl.js";
+import { DataTable as k } from "@plumile/ui/components/data-table/DataTable.js";
 //#region src/pages/BackofficeDashboardWidgetContent.tsx
-var { useLazyLoadQuery: _ } = u, v = () => {
+var { useLazyLoadQuery: A } = p, j = { window: {
+	id: "24h",
+	label: (e) => e("common.time.lastDay", "24 h"),
+	from: (/* @__PURE__ */ new Date(0)).toISOString(),
+	to: (/* @__PURE__ */ new Date(0)).toISOString()
+} }, M = (e, t) => typeof e.variables == "function" ? e.variables(t) : e.variables, N = () => {
 	let { t } = e();
-	return /* @__PURE__ */ s(d, { title: t("common.notAvailable") });
-}, y = ({ widget: u, data: d }) => {
-	let { t: _ } = l(), { t: y } = e(), { entities: b } = t(), x = u.description == null ? void 0 : i(u.description, _), S = () => u.dataSource === "query" && d != null ? u.resolve(d) : null;
-	if (u.kind === "textBlock") return /* @__PURE__ */ s(f, {
-		title: i(u.title, _),
+	return /* @__PURE__ */ u(m, { title: t("common.notAvailable") });
+}, P = (e) => e == null ? "" : e.kind === "href" ? `href:${e.href}` : `entity-list:${e.entityId}:${JSON.stringify(e.state ?? null)}`, F = (e) => {
+	let { entities: n, entityRegistry: r } = t(), [, i] = l(0);
+	return s(() => {
+		let t = /* @__PURE__ */ new Set();
+		for (let i of e) i?.kind === "entity-list" && n[i.entityId] != null && r.getLoadedListEntity(i.entityId) == null && t.add(i.entityId);
+		if (t.size === 0) return;
+		let a = !1;
+		return Promise.all(Array.from(t).map(async (e) => {
+			try {
+				await r.loadListEntity(e);
+			} catch {
+				return null;
+			}
+			return e;
+		})).then(() => {
+			a || i((e) => e + 1);
+		}, () => {}), () => {
+			a = !0;
+		};
+	}, [
+		n,
+		r,
+		e.map(P).join("|"),
+		e
+	]), c(() => (e, t) => {
+		if (e == null) return t;
+		if (e.kind === "href") return e.href;
+		let i = n[e.entityId];
+		if (i == null) return t;
+		let a = r.getLoadedListEntity(e.entityId);
+		return a == null ? h(i.routes.list, e.state?.where ?? null, e.state?.filters) : g(a.config, {
+			where: e.state?.where,
+			sort: e.state?.sort
+		});
+	}, [n, r]);
+}, I = ({ metrics: t }) => {
+	let { t: n } = f(), { t: r } = e(), a = F(t.map((e) => e.target));
+	return /* @__PURE__ */ u(y, {
+		emptyState: /* @__PURE__ */ u(N, {}),
+		metrics: t.map((e) => ({
+			id: e.id,
+			href: a(e.target, e.href),
+			label: i(e.label, n),
+			value: e.value ?? r("common.notAvailable"),
+			hint: e.meta == null ? void 0 : i(e.meta, n)
+		}))
+	});
+}, L = ({ items: t }) => {
+	let { t: n } = f(), { t: r } = e(), a = F(t.map((e) => e.target));
+	return /* @__PURE__ */ u(b, {
+		emptyState: /* @__PURE__ */ u(N, {}),
+		items: t.map((e) => ({
+			id: e.id,
+			href: a(e.target, e.href),
+			label: i(e.label, n),
+			value: e.value ?? r("common.notAvailable")
+		}))
+	});
+}, R = ({ actions: e, layout: t }) => {
+	let { t: n } = f(), r = F(e.map((e) => e.target));
+	return /* @__PURE__ */ u(v, {
+		layout: t,
+		emptyState: /* @__PURE__ */ u(N, {}),
+		actions: e.map((e) => {
+			let t;
+			return t = typeof e.label == "string" ? e.label : i(e.label, n), {
+				id: e.id,
+				href: r(e.target, e.href) ?? "#",
+				label: t
+			};
+		})
+	});
+}, z = (e) => e.map((e) => e.target), B = ({ metric: t }) => {
+	let { t: n } = f(), { t: r } = e(), a = F([t.target]);
+	return /* @__PURE__ */ u(D, {
+		label: i(t.label, n),
+		value: t.value ?? r("common.notAvailable"),
+		unit: t.unit,
+		href: a(t.target, t.href),
+		tone: t.tone,
+		delta: t.delta == null ? void 0 : {
+			...t.delta,
+			label: t.delta.label == null ? void 0 : i(t.delta.label, n)
+		},
+		sparkline: t.sparkline,
+		sparklineLabel: i(t.label, n)
+	});
+}, V = ({ gauge: t }) => {
+	let { t: n } = f(), { t: r } = e(), a = F([t.target]);
+	return t.value == null ? /* @__PURE__ */ u(m, { title: r("common.notAvailable") }) : /* @__PURE__ */ u(T, {
+		label: i(t.label, n),
+		value: t.value,
+		max: t.max,
+		threshold: t.threshold,
+		unit: t.unit,
+		tone: t.tone,
+		href: a(t.target, t.href)
+	});
+}, H = ({ items: t }) => {
+	let { t: n } = f(), { t: r } = e(), a = F(z(t));
+	return /* @__PURE__ */ u(x, {
+		emptyState: /* @__PURE__ */ u(N, {}),
+		items: t.map((e) => ({
+			id: e.id,
+			href: a(e.target, e.href),
+			label: i(e.label, n),
+			meta: e.meta == null ? void 0 : i(e.meta, n),
+			tone: e.tone,
+			value: e.value ?? r("common.notAvailable")
+		}))
+	});
+}, U = ({ ariaLabel: e, chart: t, result: n }) => {
+	let { t: r } = f();
+	return /* @__PURE__ */ u(E, {
+		ariaLabel: i(e, r),
+		chart: t,
+		emptyMessage: n.emptyLabel == null ? "" : i(n.emptyLabel, r),
+		series: n.series.map((e) => ({
+			...e,
+			label: i(e.label, r)
+		}))
+	});
+}, W = ({ items: t }) => {
+	let { t: n } = f(), { t: r } = e(), a = F(z(t));
+	return /* @__PURE__ */ u(w, {
+		emptyState: /* @__PURE__ */ u(N, {}),
+		items: t.map((e) => ({
+			id: e.id,
+			href: a(e.target, e.href),
+			label: i(e.label, n),
+			meta: e.meta == null ? void 0 : i(e.meta, n),
+			severity: e.severity,
+			value: e.value ?? r("common.notAvailable")
+		}))
+	});
+}, G = ({ item: e }) => {
+	let { t } = f(), n = F([e?.target]);
+	return e == null ? /* @__PURE__ */ u(N, {}) : /* @__PURE__ */ u(S, {
+		href: n(e.target, e.href),
+		label: i(e.label, t),
+		title: i(e.title, t),
+		tone: e.tone,
+		meta: e.meta?.map((e) => ({
+			id: e.id,
+			label: i(e.label, t),
+			value: e.value
+		}))
+	});
+}, K = ({ rows: t }) => {
+	let { t: n } = f(), { t: r } = e(), a = F(t.flatMap((e) => e.cells.map((e) => e.target)));
+	return /* @__PURE__ */ u(C, {
+		emptyState: /* @__PURE__ */ u(N, {}),
+		rows: t.map((e) => ({
+			id: e.id,
+			label: i(e.label, n),
+			cells: e.cells.map((e) => ({
+				id: e.id,
+				href: a(e.target, e.href),
+				label: i(e.label, n),
+				tone: e.tone,
+				value: e.value ?? r("common.notAvailable")
+			}))
+		}))
+	});
+}, q = ({ activeWindowPresetId: s, context: c = j, widget: l, data: p, onWindowPresetChange: m, windowPresets: h = [] }) => {
+	let { t: g } = f(), { t: y } = e(), { entities: b } = t(), x = l.description == null ? void 0 : i(l.description, g), S = () => l.dataSource === "query" && p != null ? l.resolve(p, c) : null;
+	if (l.kind === "textBlock") return /* @__PURE__ */ u(_, {
+		title: i(l.title, g),
 		subtitle: x,
-		children: /* @__PURE__ */ s("div", {
+		children: /* @__PURE__ */ u("div", {
 			className: a,
-			children: i(u.body, _)
+			children: i(l.body, g)
 		})
 	});
-	if (u.kind === "shortcut") {
-		let e = b[u.entityId], t = i(u.label, _);
-		return e == null ? /* @__PURE__ */ s(f, {
+	if (l.kind === "shortcut") {
+		let e = b[l.entityId], t = i(l.label, g);
+		return e == null ? /* @__PURE__ */ u(_, {
 			title: t,
 			subtitle: x,
-			children: /* @__PURE__ */ s(v, {})
-		}) : e.kind === "tool" ? /* @__PURE__ */ s(f, {
+			children: /* @__PURE__ */ u(N, {})
+		}) : e.kind === "tool" ? /* @__PURE__ */ u(_, {
 			title: t,
 			subtitle: x,
-			children: /* @__PURE__ */ s(p, { actions: [{
+			children: /* @__PURE__ */ u(v, { actions: [{
 				id: e.id,
 				href: e.routes.list,
 				label: y("dashboard.actions.openTool")
 			}] })
-		}) : /* @__PURE__ */ s(f, {
+		}) : /* @__PURE__ */ u(_, {
 			title: t,
 			subtitle: x,
-			children: /* @__PURE__ */ s(p, { actions: [{
+			children: /* @__PURE__ */ u(v, { actions: [{
 				id: e.id,
 				href: e.routes.list,
 				label: y("dashboard.actions.openList")
 			}] })
 		});
 	}
-	if (u.kind === "tablePreview") {
+	if (l.kind === "tablePreview") {
 		let e = S();
-		if (e == null) return /* @__PURE__ */ s(f, {
-			title: i(u.title, _),
+		if (e == null) return /* @__PURE__ */ u(_, {
+			title: i(l.title, g),
 			subtitle: x,
-			children: /* @__PURE__ */ s(v, {})
+			children: /* @__PURE__ */ u(N, {})
 		});
 		let t = r(e.columns, {
-			tApp: _,
+			tApp: g,
 			t: y
 		});
-		return /* @__PURE__ */ s(f, {
-			title: i(u.title, _),
+		return /* @__PURE__ */ u(_, {
+			title: i(l.title, g),
 			subtitle: x,
-			children: /* @__PURE__ */ s(g, {
+			children: /* @__PURE__ */ u(k, {
 				columns: t,
 				rows: e.rows,
 				getRowId: (e, t) => {
@@ -78,113 +257,197 @@ var { useLazyLoadQuery: _ } = u, v = () => {
 			})
 		});
 	}
-	if (u.kind === "metricGroup") {
+	if (l.kind === "metricGroup") {
 		let e = S();
-		return e == null ? /* @__PURE__ */ s(v, {}) : /* @__PURE__ */ s(m, {
-			emptyState: /* @__PURE__ */ s(v, {}),
-			metrics: e.map((e) => ({
-				id: e.id,
-				href: e.href,
-				label: i(e.label, _),
-				value: e.value ?? y("common.notAvailable"),
-				hint: e.meta == null ? void 0 : i(e.meta, _)
-			}))
+		return e == null ? /* @__PURE__ */ u(N, {}) : /* @__PURE__ */ u(I, { metrics: e });
+	}
+	if (l.kind === "trendMetric") {
+		let e = S(), t = l.title == null ? void 0 : i(l.title, g);
+		return e == null ? /* @__PURE__ */ u(_, {
+			title: t,
+			subtitle: x,
+			children: /* @__PURE__ */ u(N, {})
+		}) : /* @__PURE__ */ u(_, {
+			title: t,
+			subtitle: x,
+			children: /* @__PURE__ */ u(B, { metric: e })
+		});
+	}
+	if (l.kind === "slaGauge") {
+		let e = S(), t = l.title == null ? void 0 : i(l.title, g);
+		return e == null ? /* @__PURE__ */ u(_, {
+			title: t,
+			subtitle: x,
+			children: /* @__PURE__ */ u(N, {})
+		}) : /* @__PURE__ */ u(_, {
+			title: t,
+			subtitle: x,
+			children: /* @__PURE__ */ u(V, { gauge: e })
 		});
 	}
-	if (u.kind === "billingUsageChart") {
-		let e = S(), t = i(u.title, _);
-		return e == null ? /* @__PURE__ */ s(f, {
+	if (l.kind === "breakdownList") {
+		let e = S(), t = l.title == null ? void 0 : i(l.title, g);
+		return e == null ? /* @__PURE__ */ u(_, {
 			title: t,
 			subtitle: x,
-			children: /* @__PURE__ */ s(v, {})
-		}) : /* @__PURE__ */ s(f, {
+			children: /* @__PURE__ */ u(N, {})
+		}) : /* @__PURE__ */ u(_, {
+			title: t,
+			subtitle: x,
+			children: /* @__PURE__ */ u(H, { items: e })
+		});
+	}
+	if (l.kind === "timelineChart") {
+		let e = S(), t = l.title == null ? void 0 : i(l.title, g);
+		return e == null ? /* @__PURE__ */ u(_, {
 			title: t,
 			subtitle: x,
-			children: /* @__PURE__ */ s(n, {
-				ariaLabel: i(u.ariaLabel, _),
+			children: /* @__PURE__ */ u(N, {})
+		}) : /* @__PURE__ */ u(_, {
+			title: t,
+			subtitle: x,
+			children: /* @__PURE__ */ u(U, {
+				ariaLabel: l.ariaLabel,
+				chart: l.chart,
+				result: e
+			})
+		});
+	}
+	if (l.kind === "riskQueue") {
+		let e = S(), t = l.title == null ? void 0 : i(l.title, g);
+		return e == null ? /* @__PURE__ */ u(_, {
+			title: t,
+			subtitle: x,
+			children: /* @__PURE__ */ u(N, {})
+		}) : /* @__PURE__ */ u(_, {
+			title: t,
+			subtitle: x,
+			children: /* @__PURE__ */ u(W, { items: e })
+		});
+	}
+	if (l.kind === "entitySpotlight") {
+		let e = S();
+		return /* @__PURE__ */ u(_, {
+			title: l.title == null ? void 0 : i(l.title, g),
+			subtitle: x,
+			children: /* @__PURE__ */ u(G, { item: e })
+		});
+	}
+	if (l.kind === "healthMatrix") {
+		let e = S(), t = l.title == null ? void 0 : i(l.title, g);
+		return e == null ? /* @__PURE__ */ u(_, {
+			title: t,
+			subtitle: x,
+			children: /* @__PURE__ */ u(N, {})
+		}) : /* @__PURE__ */ u(_, {
+			title: t,
+			subtitle: x,
+			children: /* @__PURE__ */ u(K, { rows: e })
+		});
+	}
+	if (l.kind === "billingUsageChart") {
+		let e = S(), t = i(l.title, g);
+		return e == null ? /* @__PURE__ */ u(_, {
+			title: t,
+			subtitle: x,
+			children: /* @__PURE__ */ u(N, {})
+		}) : /* @__PURE__ */ u(_, {
+			title: t,
+			subtitle: x,
+			children: /* @__PURE__ */ u(n, {
+				ariaLabel: i(l.ariaLabel, g),
 				buckets: e.buckets,
-				categories: u.categories.map((e) => ({
+				categories: l.categories.map((e) => ({
 					id: e.id,
-					label: i(e.label, _),
+					label: i(e.label, g),
 					color: e.color
 				})),
 				currency: e.currency,
-				emptyLabel: i(u.emptyLabel, _),
+				emptyLabel: i(l.emptyLabel, g),
 				from: e.from,
-				rangePrefix: i(u.rangePrefix, _),
+				rangePrefix: i(l.rangePrefix, g),
 				to: e.to,
 				totalAmount: e.totalAmount
 			})
 		});
 	}
-	if (u.kind === "quickActions") return /* @__PURE__ */ s(f, {
-		title: u.title == null ? y("dashboard.actions.openTool") : i(u.title, _),
+	if (l.kind === "quickActions") return /* @__PURE__ */ u(_, {
+		title: l.title == null ? y("dashboard.actions.openTool") : i(l.title, g),
+		subtitle: x,
+		children: /* @__PURE__ */ u(R, {
+			layout: l.layout?.zone === "aside" ? "stack" : "grid",
+			actions: l.actions
+		})
+	});
+	if (l.kind === "windowControl") return /* @__PURE__ */ u(_, {
+		title: i(l.title, g),
 		subtitle: x,
-		children: /* @__PURE__ */ s(p, {
-			layout: u.layout?.zone === "aside" ? "stack" : "grid",
-			emptyState: /* @__PURE__ */ s(v, {}),
-			actions: u.actions.map((e) => ({
+		children: /* @__PURE__ */ u(O, {
+			activePresetId: s ?? c.window.id,
+			onChange: (e) => {
+				m?.(e);
+			},
+			presets: h.map((e) => ({
 				id: e.id,
-				href: e.href,
-				label: i(e.label, _)
+				label: i(e.label, g)
 			}))
 		})
 	});
-	if (u.kind === "statusSummary") {
+	if (l.kind === "statusSummary") {
 		let e = S();
-		return e == null ? /* @__PURE__ */ s(f, {
-			title: u.title == null ? void 0 : i(u.title, _),
+		return e == null ? /* @__PURE__ */ u(_, {
+			title: l.title == null ? void 0 : i(l.title, g),
 			subtitle: x,
-			children: /* @__PURE__ */ s(v, {})
-		}) : /* @__PURE__ */ s(f, {
-			title: u.title == null ? void 0 : i(u.title, _),
+			children: /* @__PURE__ */ u(N, {})
+		}) : /* @__PURE__ */ u(_, {
+			title: l.title == null ? void 0 : i(l.title, g),
 			subtitle: x,
-			children: /* @__PURE__ */ s(h, {
-				emptyState: /* @__PURE__ */ s(v, {}),
-				items: e.map((e) => ({
-					id: e.id,
-					href: e.href,
-					label: i(e.label, _),
-					value: e.value ?? y("common.notAvailable")
-				}))
-			})
+			children: /* @__PURE__ */ u(L, { items: e })
 		});
 	}
-	if (u.kind === "recentItems") return /* @__PURE__ */ s(f, {
-		title: u.title == null ? y("dashboard.title") : i(u.title, _),
+	if (l.kind === "recentItems") return /* @__PURE__ */ u(_, {
+		title: l.title == null ? y("dashboard.title") : i(l.title, g),
 		subtitle: x,
-		children: /* @__PURE__ */ s(v, {})
+		children: /* @__PURE__ */ u(N, {})
 	});
-	let C = b[u.entityId];
-	if (C?.kind !== "list-detail") return /* @__PURE__ */ s(f, {
-		title: i(u.label, _),
+	let C = b[l.entityId];
+	if (C?.kind !== "list-detail") return /* @__PURE__ */ u(_, {
+		title: i(l.label, g),
 		subtitle: x,
-		children: /* @__PURE__ */ s(v, {})
+		children: /* @__PURE__ */ u(N, {})
 	});
 	let w = S(), T = y("common.notAvailable");
-	return typeof w?.count == "number" && (T = w.count), /* @__PURE__ */ s(f, {
-		title: i(u.label, _),
+	return typeof w?.count == "number" && (T = w.count), /* @__PURE__ */ u(_, {
+		title: i(l.label, g),
 		subtitle: x,
-		children: /* @__PURE__ */ c("div", {
+		children: /* @__PURE__ */ d("div", {
 			className: a,
-			children: [/* @__PURE__ */ s("div", {
+			children: [/* @__PURE__ */ u("div", {
 				className: o,
 				children: T
-			}), /* @__PURE__ */ s(p, {
-				emptyState: /* @__PURE__ */ s(v, {}),
-				actions: [{
-					id: C.id,
-					href: C.routes.list,
-					label: y("dashboard.actions.openList")
-				}]
-			})]
+			}), /* @__PURE__ */ u(R, { actions: [{
+				id: C.id,
+				href: w?.href ?? C.routes.list,
+				target: w?.target,
+				label: y("dashboard.actions.openList")
+			}] })]
 		})
 	});
-}, b = ({ widget: e }) => /* @__PURE__ */ s(y, {
-	widget: e,
-	data: _(e.query, e.variables, { fetchPolicy: "store-or-network" })
-}), x = ({ widget: e }) => e.dataSource === "query" ? /* @__PURE__ */ s(b, { widget: e }) : /* @__PURE__ */ s(y, { widget: e });
+}, J = ({ activeWindowPresetId: e, context: t = j, onWindowPresetChange: n, widget: r, windowPresets: i }) => /* @__PURE__ */ u(q, {
+	activeWindowPresetId: e,
+	context: t,
+	data: A(r.query, M(r, t), { fetchPolicy: "store-or-network" }),
+	onWindowPresetChange: n,
+	widget: r,
+	windowPresets: i
+}), Y = (e) => {
+	let { widget: t } = e;
+	return t.dataSource === "query" ? /* @__PURE__ */ u(J, {
+		...e,
+		widget: t
+	}) : /* @__PURE__ */ u(q, { ...e });
+};
 //#endregion
-export { x as BackofficeDashboardWidgetContent, x as default };
+export { Y as BackofficeDashboardWidgetContent, Y as default };
 
 //# sourceMappingURL=BackofficeDashboardWidgetContent.js.map