datajunction-ui
Version:
DataJunction UI
987 lines (986 loc) • 34.9 kB
JavaScript
var Ee = Object.defineProperty;
var Fe = (a, n, r) => n in a ? Ee(a, n, { enumerable: !0, configurable: !0, writable: !0, value: r }) : a[n] = r;
var G = (a, n, r) => Fe(a, typeof n != "symbol" ? n + "" : n, r);
import { jsxs as i, Fragment as R, jsx as e } from "react/jsx-runtime";
import * as Te from "react";
import ne, { useState as f, useContext as A, useEffect as P, useRef as de, useCallback as z, forwardRef as $e, useMemo as ke } from "react";
import { D as E, o as J, t as Re, q as ae, ao as He, ap as I, b3 as Je, an as U, al as ze, cF as qe, a5 as We, am as Ve, bo as ee, aa as te, ac as ve, cd as Ke, N as Qe, s as Ue, r as Xe, F as ye, cy as Ne, cv as Ye, i as Ze } from "./index-n79cxNwC.js";
/* empty css */
import { b as Ge, a as ea, f as me } from "./PreAggDetailsPanel-UslxH4LA.js";
import { useParams as Se, useNavigate as aa } from "react-router-dom";
import { F as na } from "./FullNameField-fHyJsZmF.js";
import "react-dom";
const H = class H {
constructor(n) {
this.name = n;
}
};
G(H, "Add", new H("add")), G(H, "Edit", new H("edit"));
let M = H;
function ta() {
const [a, n] = f([]), r = A(E).DataJunctionAPI;
let { initialNamespace: t } = Se();
return P(() => {
(async () => {
const m = await r.namespaces();
n(
m.map((v) => ({
value: v.namespace,
label: v.namespace
}))
);
})().catch(console.error);
}, [r, r.metrics]), /* @__PURE__ */ i(R, { children: [
/* @__PURE__ */ i("div", { className: "NamespaceInput", children: [
/* @__PURE__ */ e(J, { name: "namespace", component: "span" }),
/* @__PURE__ */ e("label", { htmlFor: "namespace", children: "Namespace *" }),
/* @__PURE__ */ e(
Re,
{
selectOptions: a,
formikFieldName: "namespace",
placeholder: "Choose Namespace",
defaultValue: {
value: t,
label: t
}
}
)
] }),
/* @__PURE__ */ i("div", { className: "DisplayNameInput NodeCreationInput", children: [
/* @__PURE__ */ e(J, { name: "display_name", component: "span" }),
/* @__PURE__ */ e("label", { htmlFor: "displayName", children: "Display Name *" }),
/* @__PURE__ */ e(
ae,
{
type: "text",
name: "display_name",
id: "displayName",
placeholder: "Human readable display name"
}
)
] }),
/* @__PURE__ */ i("div", { className: "FullNameInput NodeCreationInput", children: [
/* @__PURE__ */ e(J, { name: "name", component: "span" }),
/* @__PURE__ */ e("label", { htmlFor: "FullName", children: "Full Name" }),
/* @__PURE__ */ e(na, { type: "text", name: "name" })
] })
] });
}
var sa = ["defaultOptions", "cacheOptions", "loadOptions", "options", "isLoading", "onInputChange", "filterOption"];
function ia(a) {
var n = a.defaultOptions, r = n === void 0 ? !1 : n, t = a.cacheOptions, c = t === void 0 ? !1 : t, m = a.loadOptions;
a.options;
var v = a.isLoading, w = v === void 0 ? !1 : v, O = a.onInputChange, p = a.filterOption, b = p === void 0 ? null : p, h = He(a, sa), s = h.inputValue, d = de(void 0), l = de(!1), o = f(Array.isArray(r) ? r : void 0), u = I(o, 2), g = u[0], x = u[1], L = f(typeof s < "u" ? s : ""), S = I(L, 2), N = S[0], D = S[1], C = f(r === !0), y = I(C, 2), F = y[0], j = y[1], K = f(void 0), q = I(K, 2), T = q[0], B = q[1], $ = f([]), se = I($, 2), xe = se[0], X = se[1], Ce = f(!1), ie = I(Ce, 2), Oe = ie[0], Q = ie[1], we = f({}), le = I(we, 2), W = le[0], re = le[1], De = f(void 0), ce = I(De, 2), _e = ce[0], Me = ce[1], Pe = f(void 0), oe = I(Pe, 2), Le = oe[0], je = oe[1];
c !== Le && (re({}), je(c)), r !== _e && (x(Array.isArray(r) ? r : void 0), Me(r)), P(function() {
return l.current = !0, function() {
l.current = !1;
};
}, []);
var Y = z(function(V, k) {
if (!m) return k();
var _ = m(V, k);
_ && typeof _.then == "function" && _.then(k, function() {
return k();
});
}, [m]);
P(function() {
r === !0 && Y(N, function(V) {
l.current && (x(V || []), j(!!d.current));
});
}, []);
var Be = z(function(V, k) {
var _ = Je(V, k, O);
if (!_) {
d.current = void 0, D(""), B(""), X([]), j(!1), Q(!1);
return;
}
if (c && W[_])
D(_), B(_), X(W[_]), j(!1), Q(!1);
else {
var Ae = d.current = {};
D(_), j(!0), Q(!T), Y(_, function(Z) {
l && Ae === d.current && (d.current = void 0, j(!1), B(_), X(Z || []), Q(!1), re(Z ? U(U({}, W), {}, ze({}, _, Z)) : W));
});
}
}, [c, Y, T, W, O]), Ie = Oe ? [] : N && T ? xe : g || [];
return U(U({}, h), {}, {
options: Ie,
isLoading: F || w,
onInputChange: Be,
filterOption: b
});
}
var la = /* @__PURE__ */ $e(function(a, n) {
var r = ia(a), t = qe(r);
return /* @__PURE__ */ Te.createElement(We, Ve({
ref: n
}, t));
}), ra = la;
const ca = (a, n) => {
let r;
return (...t) => (clearTimeout(r), new Promise((c) => {
r = setTimeout(() => c(a(...t)), n);
}));
}, oa = (a) => a && a.split(".").slice(0, -1).join(".") || "default", da = () => /* @__PURE__ */ i(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "10",
height: "10",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round",
children: [
/* @__PURE__ */ e("line", { x1: "6", y1: "3", x2: "6", y2: "15" }),
/* @__PURE__ */ e("circle", { cx: "18", cy: "6", r: "3" }),
/* @__PURE__ */ e("circle", { cx: "6", cy: "18", r: "3" }),
/* @__PURE__ */ e("path", { d: "M18 9a9 9 0 0 1-9 9" })
]
}
), ma = (a) => {
const { data: n } = a, { namespace: r, gitInfo: t, count: c } = n;
return /* @__PURE__ */ i(
"div",
{
style: {
display: "flex",
alignItems: "center",
padding: "8px 12px",
backgroundColor: "#fafafa",
borderBottom: "1px solid #eee"
},
children: [
/* @__PURE__ */ e("span", { style: { fontWeight: 500, color: "#333" }, children: r }),
(t == null ? void 0 : t.branch) && /* @__PURE__ */ i(
"span",
{
title: `Branch: ${t.branch}`,
style: {
marginLeft: "8px",
fontSize: "11px",
padding: "2px 6px",
borderRadius: "3px",
backgroundColor: t.isDefaultBranch ? "#d4edda" : "#fff3cd",
color: t.isDefaultBranch ? "#155724" : "#856404",
display: "inline-flex",
alignItems: "center",
gap: "4px"
},
children: [
/* @__PURE__ */ e(da, {}),
t.branch
]
}
),
/* @__PURE__ */ i("span", { style: { marginLeft: "8px", color: "#999", fontSize: "12px" }, children: [
"(",
c,
")"
] })
]
}
);
}, pa = (a) => {
const n = {}, r = {};
return a.forEach((t) => {
const c = oa(t.value);
n[c] || (n[c] = [], r[c] = t.gitInfo), n[c].push(t);
}), Object.keys(n).sort().map((t) => {
const c = r[t], m = n[t].length;
return {
label: t,
namespace: t,
gitInfo: c,
count: m,
options: n[t]
};
});
}, ua = (a, { context: n }) => {
if (n === "menu") {
const m = a.label, v = a.value;
return /* @__PURE__ */ i("div", { children: [
/* @__PURE__ */ e("div", { children: m }),
m !== v && /* @__PURE__ */ e("div", { style: { fontSize: "12px", color: "#999", marginTop: "2px" }, children: v })
] });
}
const r = a.label || a.value, t = a.gitInfo, c = (t == null ? void 0 : t.branch) && !(t != null && t.isDefaultBranch);
return /* @__PURE__ */ i(
"span",
{
title: a.value,
style: { display: "inline-flex", alignItems: "center", gap: "4px" },
children: [
/* @__PURE__ */ e("span", { children: r }),
c && /* @__PURE__ */ i(
"span",
{
style: {
fontSize: "9px",
padding: "1px 4px",
borderRadius: "2px",
backgroundColor: "rgba(255, 255, 255, 0.6)",
color: "#a2283e",
border: "1px solid rgba(162, 40, 62, 0.2)",
fontWeight: 500,
letterSpacing: "0.2px"
},
children: [
"⎇ ",
t.branch
]
}
)
]
}
);
}, pe = ne.memo(function({
cube: n,
onChange: r
}) {
const t = A(E).DataJunctionAPI, [c, m] = f([]);
P(() => {
var p;
if ((p = n == null ? void 0 : n.current) != null && p.cubeMetrics) {
const b = n.current.cubeMetrics.map((s) => ({
value: s.name,
label: s.displayName || s.name
}));
m(b), r(b.map((s) => s.value));
const h = b.map((s) => s.value);
t.getMetricsInfo(h).then((s) => {
if (s.length > 0) {
const d = Object.fromEntries(
s.map((l) => [l.value, l])
);
m(
(l) => l.map((o) => d[o.value] ? d[o.value] : o)
);
}
});
}
}, [n, r, t]);
const v = z(
ca(async (p) => {
if (!p || p.length < 2)
return [];
try {
const b = await t.searchMetrics(p, 50);
return pa(b);
} catch (b) {
return console.error("Error searching metrics:", b), [];
}
}, 300),
[t]
);
return /* @__PURE__ */ e(
ra,
{
value: c,
loadOptions: v,
onChange: (p) => {
m(p || []), r((p || []).map((b) => b.value));
},
name: "metrics",
placeholder: "Type to search metrics...",
noOptionsMessage: ({ inputValue: p }) => p.length < 2 ? "Type at least 2 characters to search" : "No metrics found",
loadingMessage: () => "Searching...",
formatOptionLabel: ua,
components: { GroupHeading: ma },
styles: {
multiValue: (p) => ({
...p,
backgroundColor: "#fad7dd",
border: "1px solid rgba(162, 40, 62, 0.3)",
borderRadius: "3px",
margin: "2px"
}),
multiValueLabel: (p) => ({
...p,
color: "#a2283e",
fontSize: "10px",
fontWeight: 500,
padding: "2px 4px 2px 6px"
}),
multiValueRemove: (p) => ({
...p,
color: "#a2283e",
padding: "0 4px",
":hover": {
backgroundColor: "#f5c4cd",
color: "#a2283e"
}
})
},
isMulti: !0,
isClearable: !0,
closeMenuOnSelect: !1,
cacheOptions: !0,
defaultOptions: !1
}
);
}), ha = (a) => !a || a.length === 0 ? 0 : a.length, ue = (a) => {
if (!a) return "";
const n = a.replace(/^\[|\]$/g, "");
return n ? ` [${n}]` : "";
}, fa = (a) => {
if (!a) return [a, ""];
const n = a.match(/^(.+?)\[([^\]]+)\]$/);
return n ? [n[1], n[2]] : [a, ""];
}, ba = (a) => a === 0 ? "Direct Dimensions" : a === 1 ? "1 Hop Away" : `${a} Hops Away`, he = ne.memo(function({
cube: n,
metrics: r,
onChange: t
}) {
const c = A(E).DataJunctionAPI, [m, v] = f({}), [w, O] = f(
{}
), [p, b] = f([]);
P(() => {
(async () => {
let o;
const u = (n == null ? void 0 : n.current) ?? n;
if (u != null && u.cubeDimensions && (o = u.cubeDimensions.map((g) => {
var x;
return {
value: g.name,
label: ee(g.attribute) + ue(g.role) + ((x = g.properties) != null && x.includes("primary_key") ? " (PK)" : "")
};
}), b(o), t(o.map((g) => g.value))), r && r.length > 0) {
const x = (await c.commonDimensions(r)).reduce(
(S, N) => {
const D = N.node_name + JSON.stringify(N.path);
return S[D] = S[D] ?? [], S[D].push(N), S;
},
{}
), L = {};
if (Object.values(x).forEach((S) => {
const N = ha(S[0].path);
L[N] = L[N] ?? [], L[N].push(S);
}), v(L), n && o) {
const S = {};
Object.values(x).forEach((N) => {
const D = N[0].node_name + JSON.stringify(N[0].path);
S[D] = h(
o.filter(
(C) => N.filter((y) => C.value === y.name).length > 0
)
);
}), O(S), t(Object.values(S).flat(2));
}
} else
v({});
})().catch(console.error);
}, [c, t, r, n]);
const h = (l) => l ? l.map((o) => o.value) : [], s = Object.keys(m).map(Number).sort((l, o) => l - o), d = {
multiValue: (l) => ({
...l,
backgroundColor: "#ffefd0",
border: "1px solid rgba(169, 102, 33, 0.3)",
borderRadius: "3px",
margin: "2px"
}),
multiValueLabel: (l) => ({
...l,
color: "#a96621",
fontSize: "10px",
fontWeight: 500,
padding: "2px 4px 2px 6px"
}),
multiValueRemove: (l) => ({
...l,
color: "#a96621",
padding: "0 4px",
":hover": {
backgroundColor: "#ffe4b3",
color: "#a96621"
}
})
};
return s.length === 0 ? null : /* @__PURE__ */ e("div", { children: s.map((l) => {
const o = m[l], u = o.reduce(
(g, x) => g + x.length,
0
);
return /* @__PURE__ */ i("div", { style: { marginBottom: "20px" }, children: [
/* @__PURE__ */ i(
"div",
{
style: {
display: "flex",
alignItems: "center",
padding: "6px 0",
borderBottom: "1px solid #dee2e6",
marginBottom: "8px",
marginTop: l > 0 ? "24px" : "0"
},
children: [
/* @__PURE__ */ e(
"span",
{
style: {
fontWeight: 600,
color: "#212529",
fontSize: "14px"
},
children: ba(l)
}
),
/* @__PURE__ */ i(
"span",
{
style: {
marginLeft: "10px",
color: "#6c757d",
fontSize: "13px"
},
children: [
"(",
u,
" dimension",
u !== 1 ? "s" : "",
")"
]
}
)
]
}
),
/* @__PURE__ */ e("div", { style: { paddingLeft: "6px" }, children: o.map((g) => {
const x = g[0].node_name + JSON.stringify(g[0].path), L = g[0].path.map(
(C) => {
const y = C.split(".").pop();
return ee(y);
}
), S = /* @__PURE__ */ i(
"h5",
{
style: {
fontWeight: "normal",
marginBottom: "5px",
marginTop: "10px",
fontSize: "13px"
},
title: g[0].path.join(" → "),
children: [
/* @__PURE__ */ e("a", { href: `/nodes/${g[0].node_name}`, children: /* @__PURE__ */ e("b", { children: g[0].node_display_name }) }),
L.length > 0 && /* @__PURE__ */ i(R, { children: [
" ",
/* @__PURE__ */ e("span", { style: { color: "#6c757d" }, children: "via" }),
" ",
L.map((C, y) => /* @__PURE__ */ i("span", { children: [
y > 0 && " → ",
/* @__PURE__ */ e(
"a",
{
href: `/nodes/${g[0].path[y]}`,
children: C
}
)
] }, y))
] })
]
}
), N = g.map((C) => {
var j;
const [y, F] = fa(C.name);
return {
value: C.name,
label: ee(y.split(".").slice(-1)[0]) + ue(F) + ((j = C.properties) != null && j.includes("primary_key") ? " (PK)" : "")
};
}), D = p.filter(
(C) => N.filter((y) => C.value === y.value).length > 0
);
return /* @__PURE__ */ i("div", { children: [
S,
/* @__PURE__ */ e(
"span",
{
"data-testid": "dimensions-" + g[0].node_name,
children: /* @__PURE__ */ e(
te,
{
className: "",
name: "dimensions-" + x,
defaultValue: D,
options: N,
styles: d,
isMulti: !0,
isClearable: !0,
closeMenuOnSelect: !1,
onChange: (C) => {
const y = {
...w,
[x]: h(C)
};
O(y), t(Object.values(y).flat(2));
}
}
)
}
)
] }, x);
}) })
] }, l);
}) });
});
ve.registerLanguage("sql", Ke);
const ga = (a, n) => {
let r;
return (...t) => {
clearTimeout(r), r = setTimeout(() => a(...t), n);
};
}, va = ne.memo(function({
metrics: n = [],
dimensions: r = []
}) {
const t = A(E).DataJunctionAPI, [c, m] = f(null), [v, w] = f(!1), [O, p] = f(null), b = z(
ga(async (d, l) => {
if (d.length === 0 || l.length === 0) {
m(null);
return;
}
w(!0), p(null);
try {
const o = await t.metricsV3(d, l, "");
o.errors && o.errors.length > 0 ? (p(
o.errors.map(
(u) => typeof u == "string" ? u : u.message || JSON.stringify(u)
).join(", ")
), m(null)) : o.message ? (p(o.message), m(null)) : m(o);
} catch (o) {
p(o.message || "Failed to generate SQL"), m(null);
} finally {
w(!1);
}
}, 500),
[t]
);
P(() => {
b(n, r);
}, [n, r, b]);
const h = Ge(c == null ? void 0 : c.scan_estimate), s = ke(() => c != null && c.sql ? /* @__PURE__ */ e(
ve,
{
language: "sql",
style: ea,
customStyle: {
margin: 0,
padding: 0,
fontSize: "11px",
background: "transparent",
border: "none"
},
children: c.sql
}
) : null, [c == null ? void 0 : c.sql]);
return /* @__PURE__ */ i("div", { className: "cube-preview-panel", children: [
/* @__PURE__ */ i("div", { className: "preview-section-header", children: [
/* @__PURE__ */ e("span", { className: "preview-section-icon", children: "⌘" }),
/* @__PURE__ */ e("span", { className: "preview-section-title", children: "Generated SQL" })
] }),
h && /* @__PURE__ */ i("div", { className: `scan-estimate-banner scan-estimate-${h.level}`, children: [
/* @__PURE__ */ e("span", { className: "scan-estimate-icon", children: h.icon }),
/* @__PURE__ */ i("div", { className: "scan-estimate-content", children: [
/* @__PURE__ */ i("div", { className: "scan-estimate-header", children: [
/* @__PURE__ */ e("strong", { children: "Scan Cost:" }),
" ",
h.totalBytes !== null && h.totalBytes !== void 0 ? (h.hasMissingData ? "≥ " : "") + me(h.totalBytes) : "Unknown"
] }),
/* @__PURE__ */ e("div", { className: "scan-estimate-sources", children: h.sources.map((d, l) => {
let o = d.source_name;
return d.schema_ && d.table ? o = `${d.schema_}.${d.table}` : d.table && (o = d.table), /* @__PURE__ */ i("div", { className: "scan-source-item", children: [
/* @__PURE__ */ e(
"span",
{
className: "scan-source-name",
title: d.source_name,
children: o
}
),
/* @__PURE__ */ e("span", { className: "scan-source-size", children: d.total_bytes !== null && d.total_bytes !== void 0 ? me(d.total_bytes) : "no size data" })
] }, l);
}) })
] })
] }),
/* @__PURE__ */ i("div", { className: "preview-sql-container", children: [
v && /* @__PURE__ */ e("div", { className: "preview-loading", children: "Generating SQL..." }),
O && /* @__PURE__ */ e("div", { className: "preview-error", children: O }),
!v && !O && !(c != null && c.sql) && /* @__PURE__ */ e("div", { className: "preview-empty", children: "Select metrics and dimensions to preview SQL" }),
!v && !O && s
] })
] });
}), fe = () => /* @__PURE__ */ e(
ye,
{
as: "textarea",
id: "Description",
name: "description",
placeholder: "Describe your cube"
}
), be = ({ defaultValue: a }) => {
const n = A(E).DataJunctionAPI, [r, , t] = Ne("tags"), [c, m] = f([]), [v, w] = f(a || []);
return P(() => {
n.listTags().then((p) => {
m(p.map((b) => ({ value: b.name, label: b.display_name })));
});
}, [n]), P(() => {
a && w(a);
}, [a]), /* @__PURE__ */ e(
te,
{
value: v,
options: c,
onChange: (p) => {
w(p || []), t.setValue((p || []).map((b) => b.value));
},
isMulti: !0,
placeholder: "Select tags..."
}
);
}, ge = ({ defaultValue: a, isEdit: n = !1 }) => {
const r = A(E).DataJunctionAPI, { currentUser: t } = Ye(), [c, , m] = Ne("owners"), [v, w] = f([]), [O, p] = f(a || []);
return P(() => {
r.users().then((h) => {
w(h.map((s) => ({ value: s.username, label: s.username })));
});
}, [r]), P(() => {
if (a)
p(a), m.setValue(a.map((h) => h.value));
else if (!n && t) {
const h = [
{ value: t.username, label: t.username }
];
p(h), m.setValue([t.username]);
}
}, [a, t, n]), /* @__PURE__ */ e(
te,
{
value: O,
options: v,
onChange: (h) => {
p(h || []), m.setValue((h || []).map((s) => s.value));
},
isMulti: !0,
placeholder: "Select owners..."
}
);
};
function ya() {
const a = A(E).DataJunctionAPI, n = aa();
let { nodeType: r, initialNamespace: t, name: c } = Se();
const m = c !== void 0 ? M.Edit : M.Add, v = (s) => !!s.value, w = {
name: m === M.Edit ? c : "",
namespace: m === M.Add ? t : "",
display_name: "",
description: "",
mode: "published",
metrics: [],
dimensions: [],
filters: [],
tags: [],
owners: []
}, O = (s, { setSubmitting: d, setStatus: l }) => {
m === M.Add ? setTimeout(() => {
p(s, l), d(!1);
}, 400) : setTimeout(() => {
b(s, l), d(!1);
}, 400), window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
}, p = async (s, d) => {
const { status: l, json: o } = await a.createCube(
s.name,
s.display_name,
s.description,
s.mode,
s.metrics,
s.dimensions,
s.filters || []
);
l === 200 || l === 201 ? (s.tags && await a.tagsNode(s.name, s.tags), d({
success: !0,
savedName: o.name
})) : d({
failure: `${o.message}`
});
}, b = async (s, d) => {
const { status: l, json: o } = await a.patchCube(
s.name,
s.display_name,
s.description,
s.mode,
s.metrics,
s.dimensions,
s.filters || [],
s.owners
), u = await a.tagsNode(
s.name,
(s.tags || []).map((g) => g)
);
(l === 200 || l === 201) && u.status === 200 ? d({
success: !0,
savedName: o.name
}) : d({
failure: `${o.message}`
});
}, h = (s, d, l, o) => {
d("display_name", s.current.displayName || "", !1), d("description", s.current.description || "", !1), d("mode", s.current.mode.toLowerCase() || "draft", !1), d(
"tags",
s.tags.map((u) => u.name)
), l(
s.tags.map((u) => ({ value: u.name, label: u.displayName }))
), s.owners && o(
s.owners.map((u) => ({
value: u.username,
label: u.username
}))
);
};
return /* @__PURE__ */ e(R, { children: /* @__PURE__ */ i("div", { className: "mid", children: [
/* @__PURE__ */ e(
Qe,
{
namespace: t || (c ? c.substring(0, c.lastIndexOf(".")) : "")
}
),
/* @__PURE__ */ e(
Ue,
{
initialValues: w,
validate: v,
onSubmit: O,
children: function({
isSubmitting: d,
status: l,
setFieldValue: o,
values: u,
props: g
}) {
const [x, L] = f([]), [S, N] = f(null), [D, C] = f(null), [y, F] = f(!1), [j, K] = f(null);
P(() => {
(async () => {
if (c) {
const $ = await a.getCubeForEditing(c);
L($), h(
$,
o,
N,
C
);
}
})().catch(console.error);
}, [o]);
const q = z(
(B) => o("metrics", B),
[o]
), T = z(
(B) => o("dimensions", B),
[o]
);
return P(() => {
if (l != null && l.success) {
F(!0), K(null);
const B = l.savedName, $ = setTimeout(() => {
B && n(`/nodes/${B}`);
}, 1200);
return () => clearTimeout($);
}
l != null && l.failure && (K(l.failure), F(!1));
}, [l, n]), /* @__PURE__ */ i(Xe, { className: "cube-builder", children: [
/* @__PURE__ */ e("div", { className: "cube-builder-header", children: /* @__PURE__ */ i("h2", { children: [
m === M.Edit ? "Edit" : "Create",
" ",
/* @__PURE__ */ e("span", { className: "node_type__cube node_type_creation_heading", children: "Cube" })
] }) }),
/* @__PURE__ */ i("div", { className: "cube-builder-layout", children: [
/* @__PURE__ */ i("div", { className: "cube-builder-main", children: [
/* @__PURE__ */ e("div", { className: "cube-form-section", children: /* @__PURE__ */ e("div", { className: "cube-form-section-body", children: m === M.Add ? /* @__PURE__ */ i(R, { children: [
/* @__PURE__ */ e(ta, {}),
/* @__PURE__ */ i("div", { className: "cube-field-row", children: [
/* @__PURE__ */ i("div", { className: "cube-field cube-field-grow", children: [
/* @__PURE__ */ e(
J,
{
name: "description",
component: "span"
}
),
/* @__PURE__ */ e(
"label",
{
className: "cube-field-label",
htmlFor: "Description",
children: "Description"
}
),
/* @__PURE__ */ e(fe, {})
] }),
/* @__PURE__ */ i("div", { className: "cube-field cube-field-small", children: [
/* @__PURE__ */ e(
"label",
{
className: "cube-field-label",
htmlFor: "Mode",
children: "Mode"
}
),
/* @__PURE__ */ i(ae, { as: "select", name: "mode", id: "Mode", children: [
/* @__PURE__ */ e("option", { value: "draft", children: "Draft" }),
/* @__PURE__ */ e("option", { value: "published", children: "Published" })
] })
] })
] }),
/* @__PURE__ */ i("div", { className: "cube-field-row", children: [
/* @__PURE__ */ i("div", { className: "cube-field cube-field-half", children: [
/* @__PURE__ */ e("label", { className: "cube-field-label", children: "Tags" }),
/* @__PURE__ */ e(be, {})
] }),
/* @__PURE__ */ i("div", { className: "cube-field cube-field-half", children: [
/* @__PURE__ */ e("label", { className: "cube-field-label", children: "Owners" }),
/* @__PURE__ */ e(ge, {})
] })
] })
] }) : /* @__PURE__ */ i(R, { children: [
/* @__PURE__ */ i("div", { className: "cube-field", children: [
/* @__PURE__ */ e("label", { className: "cube-field-label", children: "Name" }),
/* @__PURE__ */ e("div", { className: "cube-field-static", children: c })
] }),
/* @__PURE__ */ i("div", { className: "cube-field-row", children: [
/* @__PURE__ */ i("div", { className: "cube-field cube-field-grow", children: [
/* @__PURE__ */ e(
J,
{
name: "display_name",
component: "span"
}
),
/* @__PURE__ */ e(
"label",
{
className: "cube-field-label",
htmlFor: "displayName",
children: "Display Name"
}
),
/* @__PURE__ */ e(
ye,
{
type: "text",
name: "display_name",
id: "displayName",
placeholder: "Human readable name"
}
)
] }),
/* @__PURE__ */ i("div", { className: "cube-field cube-field-small", children: [
/* @__PURE__ */ e(
"label",
{
className: "cube-field-label",
htmlFor: "Mode",
children: "Mode"
}
),
/* @__PURE__ */ i(ae, { as: "select", name: "mode", id: "Mode", children: [
/* @__PURE__ */ e("option", { value: "draft", children: "Draft" }),
/* @__PURE__ */ e("option", { value: "published", children: "Published" })
] })
] })
] }),
/* @__PURE__ */ i("div", { className: "cube-field", children: [
/* @__PURE__ */ e(
J,
{
name: "description",
component: "span"
}
),
/* @__PURE__ */ e(
"label",
{
className: "cube-field-label",
htmlFor: "Description",
children: "Description"
}
),
/* @__PURE__ */ e(fe, {})
] }),
/* @__PURE__ */ i("div", { className: "cube-field-row", children: [
/* @__PURE__ */ i("div", { className: "cube-field cube-field-half", children: [
/* @__PURE__ */ e("label", { className: "cube-field-label", children: "Tags" }),
/* @__PURE__ */ e(be, { defaultValue: S })
] }),
/* @__PURE__ */ i("div", { className: "cube-field cube-field-half", children: [
/* @__PURE__ */ e("label", { className: "cube-field-label", children: "Owners" }),
/* @__PURE__ */ e(
ge,
{
defaultValue: D,
isEdit: !0
}
)
] })
] })
] }) }) }),
/* @__PURE__ */ i("div", { className: "cube-form-section", children: [
/* @__PURE__ */ e("div", { className: "cube-form-section-header", children: /* @__PURE__ */ e("h3", { children: "Metrics" }) }),
/* @__PURE__ */ e("div", { className: "cube-form-section-body", children: /* @__PURE__ */ e("div", { "data-testid": "select-metrics", children: m === M.Edit ? /* @__PURE__ */ e(pe, { cube: x, onChange: q }) : /* @__PURE__ */ e(pe, { onChange: q }) }) })
] }),
/* @__PURE__ */ i("div", { className: "cube-form-section", children: [
/* @__PURE__ */ e("div", { className: "cube-form-section-header", children: /* @__PURE__ */ e("h3", { children: "Dimensions" }) }),
/* @__PURE__ */ e("div", { className: "cube-form-section-body", children: /* @__PURE__ */ e("div", { "data-testid": "select-dimensions", children: m === M.Edit ? /* @__PURE__ */ e(
he,
{
cube: x,
metrics: u.metrics,
onChange: T
}
) : /* @__PURE__ */ e(
he,
{
metrics: u.metrics,
onChange: T
}
) }) })
] })
] }),
/* @__PURE__ */ i("div", { className: "cube-builder-sidebar", children: [
/* @__PURE__ */ e(
va,
{
metrics: u.metrics,
dimensions: u.dimensions
}
),
/* @__PURE__ */ i("div", { className: "cube-settings", children: [
j && /* @__PURE__ */ e("div", { className: "save-error-message", children: j }),
/* @__PURE__ */ e(
"button",
{
type: "submit",
disabled: d || y,
"aria-label": "CreateCube",
className: `save-cube-btn${y ? " save-cube-btn--saved" : ""}${d ? " save-cube-btn--loading" : ""}`,
children: d ? /* @__PURE__ */ i(R, { children: [
/* @__PURE__ */ e("span", { className: "save-spinner", "aria-hidden": "true" }),
"Saving..."
] }) : y ? "✓ Saved" : m === M.Add ? "Create Cube" : "Save"
}
)
] })
] })
] })
] });
}
}
)
] }) });
}
ya.defaultProps = {
djClient: Ze
};
export {
ya as CubeBuilderPage
};
//# sourceMappingURL=index-BwiZgsZp.js.map