datajunction-ui
Version:
DataJunction UI
394 lines (393 loc) • 15.8 kB
JavaScript
import { jsxs as n, jsx as e, Fragment as v } from "react/jsx-runtime";
import { useContext as r, useState as o, useEffect as d } from "react";
import { D as h, ai as u, I as g, ag as f } from "./index-n79cxNwC.js";
import { R as b, a as N, c as y, X as w, Y as A, B as D } from "./BarChart-JyKNSAsC.js";
import { L as F } from "./Legend-CTc9jmzF.js";
const x = ({
width: i = "45px",
height: t = "45px",
color: l = "#cccccc",
style: s = {}
}) => /* @__PURE__ */ n(
"svg",
{
width: i,
height: t,
viewBox: "0 0 30 30",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
style: s,
"data-testid": "node-icon",
children: [
/* @__PURE__ */ e(
"path",
{
opacity: "0.317243",
fillRule: "evenodd",
clipRule: "evenodd",
d: "M15 30C23.2843 30 30 23.2843 30 15C30 6.71573 23.2843 0 15 0C6.71573 0 0 6.71573 0 15C0 23.2843 6.71573 30 15 30Z",
fill: l
}
),
/* @__PURE__ */ e(
"path",
{
fillRule: "evenodd",
clipRule: "evenodd",
d: "M16.3333 7.6665C16.5144 7.6665 16.6787 7.73873 16.7988 7.85594C16.9229 7.97702 17 8.1461 17 8.33317V9.94265L18.7239 11.6665H20.3333C20.7015 11.6665 21 11.965 21 12.3332V20.3332C21 21.4377 20.1046 22.3332 19 22.3332H11C9.89543 22.3332 9 21.4377 9 20.3332V9.6665C9 8.56193 9.89543 7.6665 11 7.6665H16.3333ZM11 8.99984H15.6667L19.6667 12.9998V20.3332C19.6667 20.7014 19.3682 20.9998 19 20.9998H11C10.6318 20.9998 10.3333 20.7014 10.3333 20.3332V9.6665C10.3333 9.29831 10.6318 8.99984 11 8.99984ZM12.3333 14.9998H17.6667C18.0349 14.9998 18.3333 15.2983 18.3333 15.6665C18.3333 16.0347 18.0349 16.3332 17.6667 16.3332H12.3333C11.9651 16.3332 11.6667 16.0347 11.6667 15.6665C11.6667 15.2983 11.9651 14.9998 12.3333 14.9998ZM17.6667 17.6665H12.3333C11.9651 17.6665 11.6667 17.965 11.6667 18.3332C11.6667 18.7014 11.9651 18.9998 12.3333 18.9998H17.6667C18.0349 18.9998 18.3333 18.7014 18.3333 18.3332C18.3333 17.965 18.0349 17.6665 17.6667 17.6665ZM12.3333 12.3332H13.6667C14.0349 12.3332 14.3333 12.6316 14.3333 12.9998C14.3333 13.368 14.0349 13.6665 13.6667 13.6665H12.3333C11.9651 13.6665 11.6667 13.368 11.6667 12.9998C11.6667 12.6316 11.9651 12.3332 12.3333 12.3332Z",
fill: l
}
),
/* @__PURE__ */ e(
"mask",
{
id: "mask0",
type: "alpha",
maskUnits: "userSpaceOnUse",
x: "9",
y: "7",
width: "12",
height: "16",
children: /* @__PURE__ */ e(
"path",
{
fillRule: "evenodd",
clipRule: "evenodd",
d: "M16.3333 7.6665C16.5144 7.6665 16.6787 7.73873 16.7988 7.85594C16.9229 7.97702 17 8.1461 17 8.33317V9.94265L18.7239 11.6665H20.3333C20.7015 11.6665 21 11.965 21 12.3332V20.3332C21 21.4377 20.1046 22.3332 19 22.3332H11C9.89543 22.3332 9 21.4377 9 20.3332V9.6665C9 8.56193 9.89543 7.6665 11 7.6665H16.3333ZM11 8.99984H15.6667L19.6667 12.9998V20.3332C19.6667 20.7014 19.3682 20.9998 19 20.9998H11C10.6318 20.9998 10.3333 20.7014 10.3333 20.3332V9.6665C10.3333 9.29831 10.6318 8.99984 11 8.99984ZM12.3333 14.9998H17.6667C18.0349 14.9998 18.3333 15.2983 18.3333 15.6665C18.3333 16.0347 18.0349 16.3332 17.6667 16.3332H12.3333C11.9651 16.3332 11.6667 16.0347 11.6667 15.6665C11.6667 15.2983 11.9651 14.9998 12.3333 14.9998ZM17.6667 17.6665H12.3333C11.9651 17.6665 11.6667 17.965 11.6667 18.3332C11.6667 18.7014 11.9651 18.9998 12.3333 18.9998H17.6667C18.0349 18.9998 18.3333 18.7014 18.3333 18.3332C18.3333 17.965 18.0349 17.6665 17.6667 17.6665ZM12.3333 12.3332H13.6667C14.0349 12.3332 14.3333 12.6316 14.3333 12.9998C14.3333 13.368 14.0349 13.6665 13.6667 13.6665H12.3333C11.9651 13.6665 11.6667 13.368 11.6667 12.9998C11.6667 12.6316 11.9651 12.3332 12.3333 12.3332Z",
fill: "white"
}
)
}
),
/* @__PURE__ */ e("g", { mask: "url(#mask0)" })
]
}
), C = {
valid: "#00b368",
invalid: "#FF91A3"
// '#b34b00',
}, _ = () => {
const i = r(h).DataJunctionAPI, [t, l] = o(null), [s, c] = o(null);
return d(() => {
(async () => {
l(await i.system.node_counts_by_active()), c(await i.system.node_counts_by_status());
})().catch(console.error);
}, [i]), /* @__PURE__ */ n("div", { className: "chart-box", style: { flex: "0 0 2%" }, children: [
/* @__PURE__ */ e("div", { className: "chart-title", children: "Overview" }),
/* @__PURE__ */ e("div", { className: "horiz-box", children: t == null ? void 0 : t.filter((a) => a.name === "true").map((a) => /* @__PURE__ */ n(
"div",
{
className: "jss316 badge",
style: { color: "#000", margin: "0.2em" },
children: [
/* @__PURE__ */ e(x, { color: "#FFBB28", style: { marginTop: "0.75em" } }),
/* @__PURE__ */ n("div", { style: { display: "inline-grid", alignItems: "center" }, children: [
/* @__PURE__ */ e("strong", { className: "horiz-box-value", children: a.value }),
/* @__PURE__ */ e("span", { className: "horiz-box-label", children: "Active Nodes" })
] })
]
}
)) }),
/* @__PURE__ */ e("div", { className: "horiz-box", children: s == null ? void 0 : s.map((a) => /* @__PURE__ */ n(
"div",
{
className: "jss316 badge",
style: { color: "#000", margin: "0.2em", marginLeft: "1.2em" },
children: [
"↳",
/* @__PURE__ */ e(
"span",
{
style: {
color: C[a.name.toLowerCase()],
margin: "0 0.2em 0 0.4em"
},
children: a.name === "VALID" ? /* @__PURE__ */ e(
u,
{
width: "25px",
height: "25px",
style: { marginTop: "0.2em" }
}
) : /* @__PURE__ */ e(
g,
{
width: "25px",
height: "25px",
style: { marginTop: "0.2em" }
}
)
}
),
/* @__PURE__ */ n("div", { style: { display: "inline-flex", alignItems: "center" }, children: [
/* @__PURE__ */ e(
"strong",
{
style: {
color: C[a.name.toLowerCase()],
margin: "0 2px",
fontSize: "16px",
textAlign: "left"
},
children: a.value
}
),
/* @__PURE__ */ e("span", { style: { fontSize: "smaller", padding: "5px 2px" }, children: a.name.toLowerCase() })
] })
]
}
)) })
] });
}, m = {
source: "#00C49F",
dimension: "#FFBB28",
//'#FF8042',
transform: "#0088FE",
metric: "#FF91A3",
//'#FFBB28',
cube: "#AA46BE",
valid: "#00B368",
invalid: "#B34B00"
}, H = () => {
const i = r(h).DataJunctionAPI, [t, l] = o(null), [s, c] = o(null);
return d(() => {
(async () => {
l(await i.system.node_counts_by_type()), c(
await i.system.materialization_counts_by_type()
);
})().catch(console.error);
}, [i]), /* @__PURE__ */ n(v, { children: [
/* @__PURE__ */ n("div", { className: "chart-box", style: { flex: "0 0 30%", maxWidth: "350px" }, children: [
/* @__PURE__ */ e("div", { className: "chart-title", children: "Nodes by Type" }),
/* @__PURE__ */ e("div", { className: "horiz-box", children: t == null ? void 0 : t.map((a) => /* @__PURE__ */ n("div", { className: "vert-box", children: [
/* @__PURE__ */ e(x, { color: m[a.name] }),
/* @__PURE__ */ e("strong", { style: { color: m[a.name] }, children: a.value }),
/* @__PURE__ */ n("span", { children: [
a.name,
"s"
] })
] }, a.name)) })
] }),
/* @__PURE__ */ n("div", { className: "chart-box", style: { flex: "0 0 30%", maxWidth: "350px" }, children: [
/* @__PURE__ */ e("div", { className: "chart-title", children: "Materializations by Type" }),
/* @__PURE__ */ e("div", { className: "horiz-box", children: s == null ? void 0 : s.map((a) => /* @__PURE__ */ n("div", { className: "vert-box", children: [
/* @__PURE__ */ e(x, { color: m[a.name] }),
/* @__PURE__ */ e("strong", { style: { color: m[a.name] }, children: a.value }),
/* @__PURE__ */ n("span", { children: [
a.name,
"s"
] })
] }, a.name)) })
] })
] });
}, p = {
source: "#00C49F",
dimension: "#FFBB28",
//'#FF8042',
transform: "#0088FE",
metric: "#ff91a3",
//'#FFBB28',
cube: "#AA46BE",
valid: "#00b368",
invalid: "#b34b00"
}, B = () => {
const i = r(h).DataJunctionAPI, [t, l] = o(null), [s, c] = o(null);
return d(() => {
(async () => {
l(
await i.system.nodes_without_description()
), c(await i.system.dimensions());
})().catch(console.error);
}, [i]), /* @__PURE__ */ n("div", { className: "chart-box", style: { flex: "1 1 10%", maxWidth: "470px" }, children: [
/* @__PURE__ */ e("div", { className: "chart-title", children: "Governance Warnings" }),
/* @__PURE__ */ n(
"div",
{
className: "horiz-box",
style: {
padding: "5px 10px",
marginTop: "10px",
border: "1px solid #AA46BE30"
},
children: [
/* @__PURE__ */ e("span", { style: { color: "#FF804255", fontSize: "30px" }, children: "⚠" }),
/* @__PURE__ */ e("span", { style: { padding: "10px 12px", fontSize: "18px" }, children: "Missing Description" }),
/* @__PURE__ */ e("div", { style: { display: "block" }, children: t == null ? void 0 : t.map((a) => /* @__PURE__ */ n(
"div",
{
className: "jss316 badge",
style: {
margin: "5px 10px",
fontSize: "14px",
padding: "10px",
color: p[a.name.toLowerCase()],
backgroundColor: p[a.name.toLowerCase()] + "10"
},
children: [
/* @__PURE__ */ n("strong", { children: [
Math.round(a.value * 100),
"%"
] }),
" ",
/* @__PURE__ */ n("span", { children: [
a.name.toLowerCase(),
"s"
] })
]
},
a.name
)) })
]
}
),
/* @__PURE__ */ n(
"div",
{
className: "horiz-box",
style: {
padding: "5px 10px",
marginTop: "10px",
border: "1px solid #AA46BE30"
},
children: [
/* @__PURE__ */ n(
"div",
{
style: { width: "100%", display: "inline-flex", marginTop: "-10px" },
children: [
/* @__PURE__ */ e("span", { style: { color: "#FF804255", fontSize: "40px" }, children: "∅" }),
/* @__PURE__ */ e(
"span",
{
style: {
padding: "10px 12px",
fontSize: "18px",
marginTop: "10px"
},
children: "Orphaned Dimensions"
}
)
]
}
),
/* @__PURE__ */ e("div", { style: { display: "block" }, children: /* @__PURE__ */ n(
"div",
{
className: "jss316 badge",
style: {
margin: "5px 10px",
fontSize: "14px",
padding: "10px",
color: p.dimension,
backgroundColor: p.dimension + "10"
},
children: [
/* @__PURE__ */ e("strong", { children: (s == null ? void 0 : s.filter(
(a) => a.indegree === 0 || a.cube_count === 0
).length) || "..." }),
/* @__PURE__ */ e("span", { children: " dimension nodes" })
]
}
) })
]
}
)
] });
}, L = {
source: "#00C49F",
dimension: "#FFBB28",
transform: "#0088FE",
metric: "#FF91A3",
cube: "#AA46BE"
}, M = () => {
const i = r(h).DataJunctionAPI, [t, l] = o([]);
return d(() => {
(async () => {
l(await i.system.node_trends());
})().catch(console.error);
}, [i]), /* @__PURE__ */ n("div", { className: "chart-box", style: { maxWidth: "60%", flex: "1 1 20%" }, children: [
/* @__PURE__ */ e("div", { className: "chart-title", children: "Trends" }),
/* @__PURE__ */ e(b, { width: "100%", height: 400, children: /* @__PURE__ */ n(
N,
{
width: 1e3,
height: 400,
data: t,
margin: {
top: 20,
right: 30,
left: 20,
bottom: 5
},
children: [
/* @__PURE__ */ e(y, { strokeDasharray: "3 3" }),
/* @__PURE__ */ e(w, { dataKey: "date" }),
/* @__PURE__ */ e(A, {}),
/* @__PURE__ */ e(f, {}),
/* @__PURE__ */ e(F, {}),
Object.entries(L).map(([s, c]) => /* @__PURE__ */ e(
D,
{
dataKey: s,
stackId: "nodeCount",
fill: c,
name: s.charAt(0).toUpperCase() + s.slice(1)
},
s
))
]
}
) })
] });
}, P = () => {
const i = r(h).DataJunctionAPI, [t, l] = o(null);
return d(() => {
(async () => {
l(await i.system.dimensions());
})().catch(console.error);
}, [i]), /* @__PURE__ */ e(v, { children: /* @__PURE__ */ n("div", { className: "chart-box", children: [
/* @__PURE__ */ e("div", { className: "chart-title", children: "Dimension Node Usage" }),
/* @__PURE__ */ n("table", { className: "card-inner-table table", style: { marginTop: "0" }, children: [
/* @__PURE__ */ e("thead", { className: "fs-7 fw-bold text-gray-400 border-bottom-0", children: /* @__PURE__ */ n("tr", { children: [
/* @__PURE__ */ e("th", { className: "text-start", children: "Dimension" }),
/* @__PURE__ */ e("th", { className: "a", children: "Links" }),
/* @__PURE__ */ e("th", { className: "a", children: "Cubes" })
] }) }),
/* @__PURE__ */ e("tbody", { children: t == null ? void 0 : t.sort(
(s, c) => c.cube_count + c.indegree - (s.cube_count + s.indegree)
).slice(0, 6).map((s, c) => /* @__PURE__ */ n("tr", { children: [
/* @__PURE__ */ e("td", { className: "a", children: /* @__PURE__ */ e("a", { href: `/nodes/${s.name}`, children: s.name }) }),
/* @__PURE__ */ e("td", { className: "a", children: s.indegree }),
/* @__PURE__ */ e("td", { className: "a", children: s.cube_count })
] }, c)) })
] })
] }) });
};
function R() {
return /* @__PURE__ */ n("div", { className: "mid", children: [
/* @__PURE__ */ e(
"div",
{
style: {
display: "flex",
justifyContent: "flex-end",
padding: "0.5rem 1rem"
},
children: /* @__PURE__ */ e("a", { href: "/overview/explore", className: "button-3 neutral-button", children: "Explore system metrics →" })
}
),
/* @__PURE__ */ n("div", { className: "chart-container", children: [
/* @__PURE__ */ e(_, {}),
/* @__PURE__ */ e(H, {}),
/* @__PURE__ */ e(B, {})
] }),
/* @__PURE__ */ n("div", { className: "chart-container", children: [
/* @__PURE__ */ e(M, {}),
/* @__PURE__ */ e(P, {})
] })
] });
}
export {
R as OverviewPage
};
//# sourceMappingURL=index-NVG8GlS-.js.map