@sentio/ui-dashboard 0.3.11 → 0.3.13
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/dist/index.css +339 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +221 -82
- package/dist/index.d.ts +221 -82
- package/dist/index.js +1353 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1362 -2
- package/dist/index.mjs.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +7 -3
package/dist/index.mjs
CHANGED
|
@@ -6633,8 +6633,8 @@ function aliasTemplate(alias, labels) {
|
|
|
6633
6633
|
function escapeColumnId(id) {
|
|
6634
6634
|
return id.replace(/[\W_.]+/g, "_");
|
|
6635
6635
|
}
|
|
6636
|
-
function getColumnNameId(labels, alias,
|
|
6637
|
-
const s = aliasTemplate(alias, labels) || startCase(
|
|
6636
|
+
function getColumnNameId(labels, alias, displayName2) {
|
|
6637
|
+
const s = aliasTemplate(alias, labels) || startCase(displayName2);
|
|
6638
6638
|
return { columnName: s, columnId: escapeColumnId(s) };
|
|
6639
6639
|
}
|
|
6640
6640
|
|
|
@@ -7924,7 +7924,1346 @@ var ImportPanelDialog = ({
|
|
|
7924
7924
|
}
|
|
7925
7925
|
);
|
|
7926
7926
|
};
|
|
7927
|
+
|
|
7928
|
+
// src/dashboard/ExportDashboardDialog.tsx
|
|
7929
|
+
import { BaseDialog as BaseDialog4, Button as Button7, CopyButton as CopyButton4, useDarkMode as useDarkMode2 } from "@sentio/ui-core";
|
|
7930
|
+
import MonacoEditor from "@monaco-editor/react";
|
|
7931
|
+
import { LuDownload } from "react-icons/lu";
|
|
7932
|
+
import { jsx as jsx49, jsxs as jsxs39 } from "react/jsx-runtime";
|
|
7933
|
+
function ExportDashboardDialog({
|
|
7934
|
+
open,
|
|
7935
|
+
onClose,
|
|
7936
|
+
dashboardId,
|
|
7937
|
+
json,
|
|
7938
|
+
onBeforeMount
|
|
7939
|
+
}) {
|
|
7940
|
+
const isDarkMode = useDarkMode2();
|
|
7941
|
+
return /* @__PURE__ */ jsx49(
|
|
7942
|
+
BaseDialog4,
|
|
7943
|
+
{
|
|
7944
|
+
title: "Export dashboard JSON",
|
|
7945
|
+
open,
|
|
7946
|
+
onClose,
|
|
7947
|
+
onCancel: onClose,
|
|
7948
|
+
cancelText: "Close",
|
|
7949
|
+
footerBorder: false,
|
|
7950
|
+
extraButtons: /* @__PURE__ */ jsx49("div", { className: "absolute left-4 inline-flex", children: /* @__PURE__ */ jsx49(
|
|
7951
|
+
"a",
|
|
7952
|
+
{
|
|
7953
|
+
download: dashboardId ? `dashboard-${dashboardId}.json` : "dashboard.json",
|
|
7954
|
+
href: "data:text/json;charset=utf-8," + encodeURIComponent(json),
|
|
7955
|
+
children: /* @__PURE__ */ jsx49(Button7, { role: "text", icon: /* @__PURE__ */ jsx49(LuDownload, {}), children: "Save to a file" })
|
|
7956
|
+
}
|
|
7957
|
+
) }),
|
|
7958
|
+
children: /* @__PURE__ */ jsx49("form", { className: "relative", children: /* @__PURE__ */ jsxs39("div", { className: "px-[18px] py-4", children: [
|
|
7959
|
+
/* @__PURE__ */ jsx49(
|
|
7960
|
+
"div",
|
|
7961
|
+
{
|
|
7962
|
+
className: "absolute right-10 top-8 z-10",
|
|
7963
|
+
onClick: (evt) => evt.preventDefault(),
|
|
7964
|
+
children: /* @__PURE__ */ jsx49(CopyButton4, { text: json, size: 16 })
|
|
7965
|
+
}
|
|
7966
|
+
),
|
|
7967
|
+
/* @__PURE__ */ jsx49("div", { className: "focus-within:border-primary-300 h-[324px] overflow-hidden rounded-sm border", children: /* @__PURE__ */ jsx49(
|
|
7968
|
+
MonacoEditor,
|
|
7969
|
+
{
|
|
7970
|
+
value: json,
|
|
7971
|
+
theme: isDarkMode ? "sentio-dark" : "sentio",
|
|
7972
|
+
language: "json",
|
|
7973
|
+
beforeMount: onBeforeMount,
|
|
7974
|
+
options: {
|
|
7975
|
+
readOnly: true,
|
|
7976
|
+
minimap: { enabled: false },
|
|
7977
|
+
lineNumbers: "off"
|
|
7978
|
+
}
|
|
7979
|
+
}
|
|
7980
|
+
) })
|
|
7981
|
+
] }) })
|
|
7982
|
+
}
|
|
7983
|
+
);
|
|
7984
|
+
}
|
|
7985
|
+
|
|
7986
|
+
// src/dashboard/CurlDialog.tsx
|
|
7987
|
+
import { Fragment as Fragment11, useEffect as useEffect15, useState as useState17 } from "react";
|
|
7988
|
+
import { Dialog, Transition } from "@headlessui/react";
|
|
7989
|
+
import { NewButtonGroup, ShellIcon } from "@sentio/ui-core";
|
|
7990
|
+
import { TbTerminal, TbBrandNodejs } from "react-icons/tb";
|
|
7991
|
+
import { LuArrowRight } from "react-icons/lu";
|
|
7992
|
+
import omit from "lodash/omit";
|
|
7993
|
+
|
|
7994
|
+
// src/common/CodeBlock.tsx
|
|
7995
|
+
import MonacoEditor2 from "@monaco-editor/react";
|
|
7996
|
+
import { useState as useState16 } from "react";
|
|
7997
|
+
import { classNames as classNames16, CopyButton as CopyButton5, useDarkMode as useDarkMode3 } from "@sentio/ui-core";
|
|
7998
|
+
import { LuChevronDown as LuChevronDown3 } from "react-icons/lu";
|
|
7999
|
+
import { jsx as jsx50, jsxs as jsxs40 } from "react/jsx-runtime";
|
|
8000
|
+
var LANGUAGE_MAP = {
|
|
8001
|
+
bash: "shell",
|
|
8002
|
+
jsx: "javascript",
|
|
8003
|
+
tsx: "typescript"
|
|
8004
|
+
};
|
|
8005
|
+
function toMonacoLanguage(lang) {
|
|
8006
|
+
return LANGUAGE_MAP[lang] ?? lang;
|
|
8007
|
+
}
|
|
8008
|
+
var BASE_OPTIONS = {
|
|
8009
|
+
readOnly: true,
|
|
8010
|
+
scrollBeyondLastLine: false,
|
|
8011
|
+
minimap: { enabled: false },
|
|
8012
|
+
renderLineHighlight: "none",
|
|
8013
|
+
folding: false
|
|
8014
|
+
};
|
|
8015
|
+
var CodeBlockWithTitle = ({
|
|
8016
|
+
title,
|
|
8017
|
+
icon,
|
|
8018
|
+
value,
|
|
8019
|
+
language,
|
|
8020
|
+
showLineNumbers,
|
|
8021
|
+
maxHeight = "300px",
|
|
8022
|
+
className,
|
|
8023
|
+
onBeforeMount
|
|
8024
|
+
}) => {
|
|
8025
|
+
const isDarkMode = useDarkMode3();
|
|
8026
|
+
const [collapsed, setCollapsed] = useState16(false);
|
|
8027
|
+
return /* @__PURE__ */ jsxs40(
|
|
8028
|
+
"div",
|
|
8029
|
+
{
|
|
8030
|
+
className: classNames16(
|
|
8031
|
+
"text-icontent border-main overflow-hidden rounded-lg border",
|
|
8032
|
+
className
|
|
8033
|
+
),
|
|
8034
|
+
children: [
|
|
8035
|
+
/* @__PURE__ */ jsxs40(
|
|
8036
|
+
"div",
|
|
8037
|
+
{
|
|
8038
|
+
className: "flex w-full cursor-pointer items-center justify-between border-b bg-gray-200 p-2",
|
|
8039
|
+
onClick: () => setCollapsed((c) => !c),
|
|
8040
|
+
children: [
|
|
8041
|
+
/* @__PURE__ */ jsxs40("span", { className: "text-ilabel text-text-foreground font-medium", children: [
|
|
8042
|
+
icon,
|
|
8043
|
+
title
|
|
8044
|
+
] }),
|
|
8045
|
+
/* @__PURE__ */ jsxs40("div", { className: "flex items-center gap-1", children: [
|
|
8046
|
+
/* @__PURE__ */ jsx50("div", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx50(CopyButton5, { text: value, size: 16 }) }),
|
|
8047
|
+
/* @__PURE__ */ jsx50(
|
|
8048
|
+
LuChevronDown3,
|
|
8049
|
+
{
|
|
8050
|
+
className: classNames16(
|
|
8051
|
+
"text-text-foreground-secondary h-4 w-4 transition-transform duration-200",
|
|
8052
|
+
collapsed ? "-rotate-90" : ""
|
|
8053
|
+
)
|
|
8054
|
+
}
|
|
8055
|
+
)
|
|
8056
|
+
] })
|
|
8057
|
+
]
|
|
8058
|
+
}
|
|
8059
|
+
),
|
|
8060
|
+
!collapsed && /* @__PURE__ */ jsx50(
|
|
8061
|
+
MonacoEditor2,
|
|
8062
|
+
{
|
|
8063
|
+
theme: isDarkMode ? "sentio-dark" : "sentio",
|
|
8064
|
+
language: toMonacoLanguage(language),
|
|
8065
|
+
value,
|
|
8066
|
+
height: maxHeight,
|
|
8067
|
+
beforeMount: onBeforeMount,
|
|
8068
|
+
options: {
|
|
8069
|
+
...BASE_OPTIONS,
|
|
8070
|
+
lineNumbers: showLineNumbers ? "on" : "off"
|
|
8071
|
+
}
|
|
8072
|
+
}
|
|
8073
|
+
)
|
|
8074
|
+
]
|
|
8075
|
+
}
|
|
8076
|
+
);
|
|
8077
|
+
};
|
|
8078
|
+
|
|
8079
|
+
// src/dashboard/code-utils.ts
|
|
8080
|
+
import isEmpty from "lodash/isEmpty";
|
|
8081
|
+
function escapeBody(body) {
|
|
8082
|
+
if (typeof body !== "string") return body;
|
|
8083
|
+
return body.replace(/'/g, `'\\''`);
|
|
8084
|
+
}
|
|
8085
|
+
function generateNodeCode(url, data, headers, apiKey = "<API_KEY>", method = "POST", apiKeyPosition = "header") {
|
|
8086
|
+
if (apiKeyPosition === "header") {
|
|
8087
|
+
headers = headers ? { ...headers, "api-key": apiKey } : { "api-key": apiKey };
|
|
8088
|
+
} else {
|
|
8089
|
+
url = url.includes("?") ? `${url}&api-key=${apiKey}` : `${url}?api-key=${apiKey}`;
|
|
8090
|
+
}
|
|
8091
|
+
return `const fetch = (...args) => import('node-fetch').then(({default: fetch}) => fetch(...args));
|
|
8092
|
+
|
|
8093
|
+
const url = '${url}';
|
|
8094
|
+
const data = ${JSON.stringify(data, null, 2)};
|
|
8095
|
+
const method = '${method}';
|
|
8096
|
+
${headers ? `const headers = ${JSON.stringify(headers, null, 2)};` : ""}
|
|
8097
|
+
|
|
8098
|
+
fetch(url, {
|
|
8099
|
+
method,
|
|
8100
|
+
headers: {
|
|
8101
|
+
'Content-Type': 'application/json',${headers ? "\n ...headers," : ""}
|
|
8102
|
+
},
|
|
8103
|
+
body: method === 'GET' ? undefined : JSON.stringify(data),
|
|
8104
|
+
})
|
|
8105
|
+
.then(response => {
|
|
8106
|
+
if (!response.ok) {
|
|
8107
|
+
throw new Error('Network response was not ok');
|
|
8108
|
+
}
|
|
8109
|
+
return response.json();
|
|
8110
|
+
})
|
|
8111
|
+
.then(data => {
|
|
8112
|
+
// Do something with the data
|
|
8113
|
+
console.log(data);
|
|
8114
|
+
})
|
|
8115
|
+
.catch(error => {
|
|
8116
|
+
// Handle the error
|
|
8117
|
+
console.error('Error:', error);
|
|
8118
|
+
});
|
|
8119
|
+
|
|
8120
|
+
`;
|
|
8121
|
+
}
|
|
8122
|
+
function generateCurlCode(url, data, headers, apiKey = "<API_KEY>", method = "POST", apiKeyPosition = "header") {
|
|
8123
|
+
if (apiKeyPosition === "header") {
|
|
8124
|
+
headers = headers ? { ...headers, "api-key": apiKey } : { "api-key": apiKey };
|
|
8125
|
+
} else {
|
|
8126
|
+
url = url.includes("?") ? `${url}&api-key=${apiKey}` : `${url}?api-key=${apiKey}`;
|
|
8127
|
+
}
|
|
8128
|
+
let curlCommand = `curl -L -X ${method} '${url}' \\
|
|
8129
|
+
-H 'Content-Type: application/json'`;
|
|
8130
|
+
if (headers && !isEmpty(headers)) {
|
|
8131
|
+
curlCommand += " \\\n" + Object.entries(headers).map(([key, value]) => ` -H '${key}: ${value}' \\`).join("\n");
|
|
8132
|
+
} else {
|
|
8133
|
+
curlCommand += ` \\`;
|
|
8134
|
+
}
|
|
8135
|
+
if (data) {
|
|
8136
|
+
curlCommand += `
|
|
8137
|
+
--data-raw '${escapeBody(JSON.stringify(data, null, 2))}'`;
|
|
8138
|
+
} else {
|
|
8139
|
+
curlCommand = curlCommand.slice(0, -1);
|
|
8140
|
+
}
|
|
8141
|
+
return curlCommand;
|
|
8142
|
+
}
|
|
8143
|
+
|
|
8144
|
+
// src/dashboard/CurlDialog.tsx
|
|
8145
|
+
import { Fragment as Fragment12, jsx as jsx51, jsxs as jsxs41 } from "react/jsx-runtime";
|
|
8146
|
+
var ExportType = /* @__PURE__ */ ((ExportType2) => {
|
|
8147
|
+
ExportType2["CURL"] = "curl";
|
|
8148
|
+
ExportType2["NODE"] = "node";
|
|
8149
|
+
return ExportType2;
|
|
8150
|
+
})(ExportType || {});
|
|
8151
|
+
function CurlDialog({
|
|
8152
|
+
open,
|
|
8153
|
+
onClose,
|
|
8154
|
+
payload,
|
|
8155
|
+
apiHost = "",
|
|
8156
|
+
apiUrl,
|
|
8157
|
+
headers,
|
|
8158
|
+
defaultType = "curl" /* CURL */,
|
|
8159
|
+
noOmit,
|
|
8160
|
+
onBeforeMount
|
|
8161
|
+
}) {
|
|
8162
|
+
const data = noOmit ? payload : omit(payload, ["projectSlug", "projectOwner", "projectId"]);
|
|
8163
|
+
const [type, setType] = useState17(defaultType);
|
|
8164
|
+
const [curlContent, setCurlContent] = useState17("");
|
|
8165
|
+
const [curlContentWithApiKey, setCurlContentWithApiKey] = useState17("");
|
|
8166
|
+
const [nodeContent, setNodeContent] = useState17("");
|
|
8167
|
+
useEffect15(() => {
|
|
8168
|
+
let path = apiUrl || "";
|
|
8169
|
+
path = path.startsWith("/api/") ? path.substring(4) : path;
|
|
8170
|
+
const url = path.startsWith("/") ? `${apiHost}${path}` : path;
|
|
8171
|
+
setCurlContent(generateCurlCode(url, data, headers));
|
|
8172
|
+
setCurlContentWithApiKey(
|
|
8173
|
+
generateCurlCode(url, data, headers, void 0, void 0, "param")
|
|
8174
|
+
);
|
|
8175
|
+
setNodeContent(generateNodeCode(url, data, headers));
|
|
8176
|
+
}, [apiUrl, apiHost, data, headers]);
|
|
8177
|
+
useEffect15(() => {
|
|
8178
|
+
setType(defaultType);
|
|
8179
|
+
}, [defaultType]);
|
|
8180
|
+
return /* @__PURE__ */ jsx51(Transition.Root, { show: open, as: Fragment11, children: /* @__PURE__ */ jsxs41(
|
|
8181
|
+
Dialog,
|
|
8182
|
+
{
|
|
8183
|
+
as: "div",
|
|
8184
|
+
className: "text-icontent relative z-10",
|
|
8185
|
+
onClose,
|
|
8186
|
+
children: [
|
|
8187
|
+
/* @__PURE__ */ jsx51(
|
|
8188
|
+
Transition.Child,
|
|
8189
|
+
{
|
|
8190
|
+
as: Fragment11,
|
|
8191
|
+
enter: "ease-out duration-300",
|
|
8192
|
+
enterFrom: "opacity-0",
|
|
8193
|
+
enterTo: "opacity-100",
|
|
8194
|
+
leave: "ease-in duration-200",
|
|
8195
|
+
leaveFrom: "opacity-100",
|
|
8196
|
+
leaveTo: "opacity-0",
|
|
8197
|
+
children: /* @__PURE__ */ jsx51("div", { className: "fixed inset-0 bg-gray-200/40 transition-opacity dark:bg-gray-200/50" })
|
|
8198
|
+
}
|
|
8199
|
+
),
|
|
8200
|
+
/* @__PURE__ */ jsx51("div", { className: "fixed inset-0 z-10 overflow-y-auto", children: /* @__PURE__ */ jsx51("div", { className: "flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0", children: /* @__PURE__ */ jsx51(
|
|
8201
|
+
Transition.Child,
|
|
8202
|
+
{
|
|
8203
|
+
as: Fragment11,
|
|
8204
|
+
enter: "ease-out duration-300",
|
|
8205
|
+
enterFrom: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
|
|
8206
|
+
enterTo: "opacity-100 translate-y-0 sm:scale-100",
|
|
8207
|
+
leave: "ease-in duration-200",
|
|
8208
|
+
leaveFrom: "opacity-100 translate-y-0 sm:scale-100",
|
|
8209
|
+
leaveTo: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
|
|
8210
|
+
children: /* @__PURE__ */ jsxs41(Dialog.Panel, { className: "bg-default-bg relative transform overflow-hidden rounded-lg pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-4xl", children: [
|
|
8211
|
+
/* @__PURE__ */ jsx51(
|
|
8212
|
+
Dialog.Title,
|
|
8213
|
+
{
|
|
8214
|
+
as: "h3",
|
|
8215
|
+
className: "text-text-foreground px-4 text-lg font-medium leading-6 sm:px-6",
|
|
8216
|
+
children: "Export As Code Snippet"
|
|
8217
|
+
}
|
|
8218
|
+
),
|
|
8219
|
+
/* @__PURE__ */ jsxs41("div", { className: "my-2 space-y-4 border-t px-4 pt-4 sm:px-6", children: [
|
|
8220
|
+
/* @__PURE__ */ jsxs41("div", { className: "text-icontent bg-primary-50 flex w-full flex-wrap items-center justify-between gap-y-1 rounded-md px-4 py-2 font-medium", children: [
|
|
8221
|
+
/* @__PURE__ */ jsxs41("span", { children: [
|
|
8222
|
+
"Replace",
|
|
8223
|
+
" ",
|
|
8224
|
+
/* @__PURE__ */ jsx51("code", { className: "text-primary-600 dark:text-primary-800", children: "<API_KEY>" }),
|
|
8225
|
+
` `,
|
|
8226
|
+
"with your real API key."
|
|
8227
|
+
] }),
|
|
8228
|
+
/* @__PURE__ */ jsx51("a", { href: "/profile/apikeys", target: "_blank", rel: "noreferrer", children: /* @__PURE__ */ jsxs41("div", { className: "border-primary-400 text-primary-600 dark:text-primary-800 dark:border-primary-600 hover:bg-primary-100 active:bg-primary-200 flex flex-row items-center justify-center gap-1 rounded-md border border-solid pb-[7px] pl-2.5 pr-2.5 pt-[7px]", children: [
|
|
8229
|
+
/* @__PURE__ */ jsx51("div", { className: "text-icontent text-left font-medium", children: "Create a new API Key" }),
|
|
8230
|
+
/* @__PURE__ */ jsx51(LuArrowRight, { className: "h-4 w-4" })
|
|
8231
|
+
] }) })
|
|
8232
|
+
] }),
|
|
8233
|
+
/* @__PURE__ */ jsx51("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx51(
|
|
8234
|
+
NewButtonGroup,
|
|
8235
|
+
{
|
|
8236
|
+
value: type,
|
|
8237
|
+
onChange: setType,
|
|
8238
|
+
buttons: [
|
|
8239
|
+
{
|
|
8240
|
+
label: "Shell",
|
|
8241
|
+
value: "curl" /* CURL */,
|
|
8242
|
+
icon: /* @__PURE__ */ jsx51(ShellIcon, { className: "mr-2 h-4 w-4" })
|
|
8243
|
+
},
|
|
8244
|
+
{
|
|
8245
|
+
label: "Node",
|
|
8246
|
+
value: "node" /* NODE */,
|
|
8247
|
+
icon: /* @__PURE__ */ jsx51(TbBrandNodejs, { className: "mr-2 h-4 w-4" })
|
|
8248
|
+
}
|
|
8249
|
+
]
|
|
8250
|
+
}
|
|
8251
|
+
) }),
|
|
8252
|
+
type === "curl" /* CURL */ && /* @__PURE__ */ jsxs41(Fragment12, { children: [
|
|
8253
|
+
/* @__PURE__ */ jsx51(
|
|
8254
|
+
CodeBlockWithTitle,
|
|
8255
|
+
{
|
|
8256
|
+
value: curlContent,
|
|
8257
|
+
showLineNumbers: true,
|
|
8258
|
+
language: "bash",
|
|
8259
|
+
title: "Shell (Auth with Header)",
|
|
8260
|
+
icon: /* @__PURE__ */ jsx51(TbTerminal, { className: "mr-2 inline-block h-4 w-4" }),
|
|
8261
|
+
onBeforeMount
|
|
8262
|
+
}
|
|
8263
|
+
),
|
|
8264
|
+
/* @__PURE__ */ jsx51(
|
|
8265
|
+
CodeBlockWithTitle,
|
|
8266
|
+
{
|
|
8267
|
+
value: curlContentWithApiKey,
|
|
8268
|
+
showLineNumbers: true,
|
|
8269
|
+
language: "bash",
|
|
8270
|
+
title: "Shell (Auth with Query Param)",
|
|
8271
|
+
icon: /* @__PURE__ */ jsx51(TbTerminal, { className: "mr-2 inline-block h-4 w-4" }),
|
|
8272
|
+
onBeforeMount
|
|
8273
|
+
}
|
|
8274
|
+
)
|
|
8275
|
+
] }),
|
|
8276
|
+
type === "node" /* NODE */ && /* @__PURE__ */ jsx51(
|
|
8277
|
+
CodeBlockWithTitle,
|
|
8278
|
+
{
|
|
8279
|
+
value: nodeContent,
|
|
8280
|
+
showLineNumbers: true,
|
|
8281
|
+
language: "typescript",
|
|
8282
|
+
title: "Nodejs",
|
|
8283
|
+
icon: /* @__PURE__ */ jsx51(TbBrandNodejs, { className: "mr-2 inline-block h-4 w-4" }),
|
|
8284
|
+
onBeforeMount
|
|
8285
|
+
}
|
|
8286
|
+
)
|
|
8287
|
+
] })
|
|
8288
|
+
] })
|
|
8289
|
+
}
|
|
8290
|
+
) }) })
|
|
8291
|
+
]
|
|
8292
|
+
}
|
|
8293
|
+
) });
|
|
8294
|
+
}
|
|
8295
|
+
|
|
8296
|
+
// src/dashboard/PanelOwner.tsx
|
|
8297
|
+
import { PopoverTooltip as PopoverTooltip2 } from "@sentio/ui-core";
|
|
8298
|
+
|
|
8299
|
+
// src/common/ImgWithFallback.tsx
|
|
8300
|
+
import { useEffect as useEffect16, useState as useState18 } from "react";
|
|
8301
|
+
import { classNames as classNames17 } from "@sentio/ui-core";
|
|
8302
|
+
import { jsx as jsx52 } from "react/jsx-runtime";
|
|
8303
|
+
var TRANSPARENT_GIF = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
|
|
8304
|
+
var ImgWithFallback = ({
|
|
8305
|
+
src,
|
|
8306
|
+
fallback = TRANSPARENT_GIF,
|
|
8307
|
+
...props
|
|
8308
|
+
}) => {
|
|
8309
|
+
const [loadError, setLoadError] = useState18(false);
|
|
8310
|
+
useEffect16(() => {
|
|
8311
|
+
setLoadError(false);
|
|
8312
|
+
}, [src]);
|
|
8313
|
+
return /* @__PURE__ */ jsx52(
|
|
8314
|
+
"img",
|
|
8315
|
+
{
|
|
8316
|
+
alt: "",
|
|
8317
|
+
"data-src": src,
|
|
8318
|
+
src: loadError ? fallback : src ?? fallback,
|
|
8319
|
+
...props,
|
|
8320
|
+
className: classNames17(
|
|
8321
|
+
props.className,
|
|
8322
|
+
loadError && "bg-gray-200 dark:bg-gray-700"
|
|
8323
|
+
),
|
|
8324
|
+
onError: () => {
|
|
8325
|
+
setLoadError(true);
|
|
8326
|
+
}
|
|
8327
|
+
}
|
|
8328
|
+
);
|
|
8329
|
+
};
|
|
8330
|
+
|
|
8331
|
+
// src/dashboard/PanelOwner.tsx
|
|
8332
|
+
import { jsx as jsx53, jsxs as jsxs42 } from "react/jsx-runtime";
|
|
8333
|
+
var USER_CONTAINER_CLASSES = "inline-flex items-center gap-1 px-1 text-xs cursor-pointer";
|
|
8334
|
+
var AVATAR_CLASSES = "h-3 w-3 rounded-full";
|
|
8335
|
+
var TOOLTIP_CLASSES = "flex items-center gap-2";
|
|
8336
|
+
var LABEL_CLASSES = "text-xs font-semibold text-text-foreground-secondary";
|
|
8337
|
+
function displayName(user) {
|
|
8338
|
+
return user.firstName && user.lastName ? `${user.firstName} ${user.lastName}` : user.username;
|
|
8339
|
+
}
|
|
8340
|
+
var UserInfo = ({
|
|
8341
|
+
avatarSrc,
|
|
8342
|
+
avatarAlt,
|
|
8343
|
+
username,
|
|
8344
|
+
containerClassName = USER_CONTAINER_CLASSES
|
|
8345
|
+
}) => /* @__PURE__ */ jsxs42("div", { className: containerClassName, children: [
|
|
8346
|
+
avatarSrc && /* @__PURE__ */ jsx53(
|
|
8347
|
+
ImgWithFallback,
|
|
8348
|
+
{
|
|
8349
|
+
className: AVATAR_CLASSES,
|
|
8350
|
+
src: avatarSrc,
|
|
8351
|
+
alt: avatarAlt || username || ""
|
|
8352
|
+
}
|
|
8353
|
+
),
|
|
8354
|
+
/* @__PURE__ */ jsx53("span", { className: "max-w-[120px] truncate", children: username })
|
|
8355
|
+
] });
|
|
8356
|
+
var TooltipUserDisplay = ({
|
|
8357
|
+
user,
|
|
8358
|
+
label,
|
|
8359
|
+
onNavigateToUser
|
|
8360
|
+
}) => /* @__PURE__ */ jsxs42("div", { className: "flex flex-col gap-1 p-1", children: [
|
|
8361
|
+
/* @__PURE__ */ jsx53("div", { className: LABEL_CLASSES, children: label }),
|
|
8362
|
+
/* @__PURE__ */ jsxs42("div", { className: TOOLTIP_CLASSES, children: [
|
|
8363
|
+
/* @__PURE__ */ jsx53(
|
|
8364
|
+
ImgWithFallback,
|
|
8365
|
+
{
|
|
8366
|
+
className: "h-4 w-4 rounded-full",
|
|
8367
|
+
src: user.picture,
|
|
8368
|
+
alt: user.username
|
|
8369
|
+
}
|
|
8370
|
+
),
|
|
8371
|
+
onNavigateToUser && user.username ? /* @__PURE__ */ jsx53(
|
|
8372
|
+
"a",
|
|
8373
|
+
{
|
|
8374
|
+
className: "text-xs font-medium hover:underline",
|
|
8375
|
+
href: `/user/${user.username}`,
|
|
8376
|
+
onClick: (e) => {
|
|
8377
|
+
e.preventDefault();
|
|
8378
|
+
onNavigateToUser(user.username);
|
|
8379
|
+
},
|
|
8380
|
+
children: displayName(user)
|
|
8381
|
+
}
|
|
8382
|
+
) : /* @__PURE__ */ jsx53("span", { className: "text-xs font-medium", children: displayName(user) })
|
|
8383
|
+
] })
|
|
8384
|
+
] });
|
|
8385
|
+
var UserWithTooltip = ({
|
|
8386
|
+
mainUser,
|
|
8387
|
+
tooltipUser,
|
|
8388
|
+
tooltipLabel,
|
|
8389
|
+
onNavigateToUser
|
|
8390
|
+
}) => /* @__PURE__ */ jsx53(
|
|
8391
|
+
PopoverTooltip2,
|
|
8392
|
+
{
|
|
8393
|
+
text: /* @__PURE__ */ jsx53(
|
|
8394
|
+
TooltipUserDisplay,
|
|
8395
|
+
{
|
|
8396
|
+
user: tooltipUser,
|
|
8397
|
+
label: tooltipLabel,
|
|
8398
|
+
onNavigateToUser
|
|
8399
|
+
}
|
|
8400
|
+
),
|
|
8401
|
+
maxWidth: "max-w-[240px]",
|
|
8402
|
+
offsetOptions: 10,
|
|
8403
|
+
children: /* @__PURE__ */ jsx53(
|
|
8404
|
+
UserInfo,
|
|
8405
|
+
{
|
|
8406
|
+
avatarSrc: mainUser.picture,
|
|
8407
|
+
avatarAlt: mainUser.username,
|
|
8408
|
+
username: mainUser.username
|
|
8409
|
+
}
|
|
8410
|
+
)
|
|
8411
|
+
}
|
|
8412
|
+
);
|
|
8413
|
+
var UserWithBothTooltip = ({
|
|
8414
|
+
mainUser,
|
|
8415
|
+
creator,
|
|
8416
|
+
updater,
|
|
8417
|
+
onNavigateToUser
|
|
8418
|
+
}) => /* @__PURE__ */ jsx53(
|
|
8419
|
+
PopoverTooltip2,
|
|
8420
|
+
{
|
|
8421
|
+
text: /* @__PURE__ */ jsxs42("div", { className: "space-y-3 p-1", children: [
|
|
8422
|
+
/* @__PURE__ */ jsx53(
|
|
8423
|
+
TooltipUserDisplay,
|
|
8424
|
+
{
|
|
8425
|
+
user: creator,
|
|
8426
|
+
label: "Created by",
|
|
8427
|
+
onNavigateToUser
|
|
8428
|
+
}
|
|
8429
|
+
),
|
|
8430
|
+
/* @__PURE__ */ jsx53(
|
|
8431
|
+
TooltipUserDisplay,
|
|
8432
|
+
{
|
|
8433
|
+
user: updater,
|
|
8434
|
+
label: "Last updated by",
|
|
8435
|
+
onNavigateToUser
|
|
8436
|
+
}
|
|
8437
|
+
)
|
|
8438
|
+
] }),
|
|
8439
|
+
maxWidth: "max-w-[280px]",
|
|
8440
|
+
offsetOptions: 10,
|
|
8441
|
+
children: /* @__PURE__ */ jsx53(
|
|
8442
|
+
UserInfo,
|
|
8443
|
+
{
|
|
8444
|
+
avatarSrc: mainUser.picture,
|
|
8445
|
+
avatarAlt: mainUser.username,
|
|
8446
|
+
username: mainUser.username
|
|
8447
|
+
}
|
|
8448
|
+
)
|
|
8449
|
+
}
|
|
8450
|
+
);
|
|
8451
|
+
var PanelOwner = ({
|
|
8452
|
+
creator,
|
|
8453
|
+
updater,
|
|
8454
|
+
ownerName,
|
|
8455
|
+
ownerAvatarUrl,
|
|
8456
|
+
onNavigateToUser
|
|
8457
|
+
}) => {
|
|
8458
|
+
if (!creator && !updater) {
|
|
8459
|
+
return /* @__PURE__ */ jsx53(
|
|
8460
|
+
UserInfo,
|
|
8461
|
+
{
|
|
8462
|
+
avatarSrc: ownerAvatarUrl,
|
|
8463
|
+
avatarAlt: ownerName,
|
|
8464
|
+
username: ownerName
|
|
8465
|
+
}
|
|
8466
|
+
);
|
|
8467
|
+
}
|
|
8468
|
+
if (creator && updater) {
|
|
8469
|
+
return /* @__PURE__ */ jsx53(
|
|
8470
|
+
UserWithBothTooltip,
|
|
8471
|
+
{
|
|
8472
|
+
mainUser: updater,
|
|
8473
|
+
creator,
|
|
8474
|
+
updater,
|
|
8475
|
+
onNavigateToUser
|
|
8476
|
+
}
|
|
8477
|
+
);
|
|
8478
|
+
}
|
|
8479
|
+
if (creator) {
|
|
8480
|
+
return /* @__PURE__ */ jsx53(
|
|
8481
|
+
UserWithTooltip,
|
|
8482
|
+
{
|
|
8483
|
+
mainUser: creator,
|
|
8484
|
+
tooltipUser: creator,
|
|
8485
|
+
tooltipLabel: "Created by",
|
|
8486
|
+
onNavigateToUser
|
|
8487
|
+
}
|
|
8488
|
+
);
|
|
8489
|
+
}
|
|
8490
|
+
if (updater) {
|
|
8491
|
+
return /* @__PURE__ */ jsx53(
|
|
8492
|
+
UserWithTooltip,
|
|
8493
|
+
{
|
|
8494
|
+
mainUser: updater,
|
|
8495
|
+
tooltipUser: updater,
|
|
8496
|
+
tooltipLabel: "Last updated by",
|
|
8497
|
+
onNavigateToUser
|
|
8498
|
+
}
|
|
8499
|
+
);
|
|
8500
|
+
}
|
|
8501
|
+
return null;
|
|
8502
|
+
};
|
|
8503
|
+
|
|
8504
|
+
// src/dashboard/AddPanel.tsx
|
|
8505
|
+
import { forwardRef as forwardRef6, useCallback as useCallback10, useState as useState19 } from "react";
|
|
8506
|
+
import { Button as Button8 } from "@sentio/ui-core";
|
|
8507
|
+
import { LuPlus as LuPlus3 } from "react-icons/lu";
|
|
8508
|
+
|
|
8509
|
+
// src/dashboard/AddPanelSlideover.tsx
|
|
8510
|
+
import { useCallback as useCallback9 } from "react";
|
|
8511
|
+
import {
|
|
8512
|
+
SlideOver as SlideOver2,
|
|
8513
|
+
AreasIcon,
|
|
8514
|
+
BarsIcon,
|
|
8515
|
+
GaugeIcon,
|
|
8516
|
+
GroupsIcon,
|
|
8517
|
+
LinesIcon,
|
|
8518
|
+
NoteIcon,
|
|
8519
|
+
PieIcon,
|
|
8520
|
+
QueryValueIcon,
|
|
8521
|
+
TableIcon,
|
|
8522
|
+
SQlIcon,
|
|
8523
|
+
EventLogsIcon,
|
|
8524
|
+
ScatterIcon,
|
|
8525
|
+
ImportIcon
|
|
8526
|
+
} from "@sentio/ui-core";
|
|
8527
|
+
import { jsx as jsx54, jsxs as jsxs43 } from "react/jsx-runtime";
|
|
8528
|
+
var PanelCard = ({
|
|
8529
|
+
icon,
|
|
8530
|
+
label,
|
|
8531
|
+
onClick,
|
|
8532
|
+
dataType
|
|
8533
|
+
}) => {
|
|
8534
|
+
return /* @__PURE__ */ jsxs43(
|
|
8535
|
+
"div",
|
|
8536
|
+
{
|
|
8537
|
+
onClick: (e) => onClick?.(e),
|
|
8538
|
+
className: "group cursor-pointer space-y-2",
|
|
8539
|
+
"data-type": dataType,
|
|
8540
|
+
children: [
|
|
8541
|
+
/* @__PURE__ */ jsx54("div", { className: "group-hover:bg-hover rounded-md p-4 transition-colors", children: /* @__PURE__ */ jsx54("div", { className: "mx-auto grid h-14 w-14 items-center justify-center", children: icon }) }),
|
|
8542
|
+
/* @__PURE__ */ jsx54("div", { className: "group-hover:text-text-foreground text-text-foreground-secondary w-full text-center text-xs group-hover:font-medium", children: label })
|
|
8543
|
+
]
|
|
8544
|
+
}
|
|
8545
|
+
);
|
|
8546
|
+
};
|
|
8547
|
+
var AnotationsPanels = [
|
|
8548
|
+
{
|
|
8549
|
+
icon: /* @__PURE__ */ jsx54(NoteIcon, {}),
|
|
8550
|
+
label: "Note",
|
|
8551
|
+
type: "annotations.note"
|
|
8552
|
+
}
|
|
8553
|
+
];
|
|
8554
|
+
var InsightsPanels = [
|
|
8555
|
+
{
|
|
8556
|
+
icon: /* @__PURE__ */ jsx54(LinesIcon, {}),
|
|
8557
|
+
label: "Lines",
|
|
8558
|
+
type: "insights.line",
|
|
8559
|
+
chartType: "LINE"
|
|
8560
|
+
},
|
|
8561
|
+
{ icon: /* @__PURE__ */ jsx54(BarsIcon, {}), label: "Bars", type: "insights.bar", chartType: "BAR" },
|
|
8562
|
+
{
|
|
8563
|
+
icon: /* @__PURE__ */ jsx54(AreasIcon, {}),
|
|
8564
|
+
label: "Areas",
|
|
8565
|
+
type: "insights.area",
|
|
8566
|
+
chartType: "AREA"
|
|
8567
|
+
},
|
|
8568
|
+
{
|
|
8569
|
+
icon: /* @__PURE__ */ jsx54(GaugeIcon, {}),
|
|
8570
|
+
label: "Bar Gauge",
|
|
8571
|
+
type: "insights.bargauge",
|
|
8572
|
+
chartType: "BAR_GAUGE"
|
|
8573
|
+
},
|
|
8574
|
+
{
|
|
8575
|
+
icon: /* @__PURE__ */ jsx54(ScatterIcon, {}),
|
|
8576
|
+
label: "Scatter",
|
|
8577
|
+
type: "insights.scatter",
|
|
8578
|
+
chartType: "SCATTER"
|
|
8579
|
+
},
|
|
8580
|
+
{
|
|
8581
|
+
icon: /* @__PURE__ */ jsx54(QueryValueIcon, {}),
|
|
8582
|
+
label: "Query Value",
|
|
8583
|
+
type: "insights.queryvalue",
|
|
8584
|
+
chartType: "QUERY_VALUE"
|
|
8585
|
+
},
|
|
8586
|
+
{
|
|
8587
|
+
icon: /* @__PURE__ */ jsx54(TableIcon, {}),
|
|
8588
|
+
label: "Table",
|
|
8589
|
+
type: "insights.table",
|
|
8590
|
+
chartType: "TABLE"
|
|
8591
|
+
},
|
|
8592
|
+
{ icon: /* @__PURE__ */ jsx54(PieIcon, {}), label: "Pie", type: "insights.pie", chartType: "PIE" }
|
|
8593
|
+
];
|
|
8594
|
+
var EventsPanels = [
|
|
8595
|
+
{
|
|
8596
|
+
icon: /* @__PURE__ */ jsx54(EventLogsIcon, {}),
|
|
8597
|
+
label: "Event Logs",
|
|
8598
|
+
type: "events.log"
|
|
8599
|
+
}
|
|
8600
|
+
];
|
|
8601
|
+
var SqlPanels = [
|
|
8602
|
+
{
|
|
8603
|
+
icon: /* @__PURE__ */ jsx54(SQlIcon, {}),
|
|
8604
|
+
label: "SQL Chart",
|
|
8605
|
+
type: "sql.table",
|
|
8606
|
+
chartType: "TABLE"
|
|
8607
|
+
}
|
|
8608
|
+
];
|
|
8609
|
+
var ContainerPanels = [
|
|
8610
|
+
{
|
|
8611
|
+
icon: /* @__PURE__ */ jsx54(GroupsIcon, {}),
|
|
8612
|
+
label: "Empty Group",
|
|
8613
|
+
type: "group.container"
|
|
8614
|
+
}
|
|
8615
|
+
];
|
|
8616
|
+
function defaultLinkGenerator(chartType, datasource, query) {
|
|
8617
|
+
const { owner, slug, id: dashboardId, ...restQuery } = query;
|
|
8618
|
+
const search = new URLSearchParams();
|
|
8619
|
+
for (const [key, value] of Object.entries(restQuery)) {
|
|
8620
|
+
if (Array.isArray(value)) {
|
|
8621
|
+
value.forEach((v) => search.append(key, v));
|
|
8622
|
+
} else if (value != null) {
|
|
8623
|
+
search.append(key, value);
|
|
8624
|
+
}
|
|
8625
|
+
}
|
|
8626
|
+
const qs = search.toString();
|
|
8627
|
+
const url = `/${owner}/${slug}/dashboards/${dashboardId}/panels/new`;
|
|
8628
|
+
return `${url}${qs ? `?${qs}` : ""}#tab=edit&chart_type=${chartType}&datasource=${datasource}`;
|
|
8629
|
+
}
|
|
8630
|
+
var AddPanelSlideover = ({
|
|
8631
|
+
open,
|
|
8632
|
+
onClose,
|
|
8633
|
+
onSelect,
|
|
8634
|
+
routerQuery = {},
|
|
8635
|
+
generateLinkHref = defaultLinkGenerator,
|
|
8636
|
+
allowImport
|
|
8637
|
+
}) => {
|
|
8638
|
+
const onClick = useCallback9(
|
|
8639
|
+
(evt) => {
|
|
8640
|
+
evt.stopPropagation();
|
|
8641
|
+
const target = evt.currentTarget;
|
|
8642
|
+
const type = target.getAttribute("data-type");
|
|
8643
|
+
if (type && onSelect) {
|
|
8644
|
+
onSelect(type);
|
|
8645
|
+
}
|
|
8646
|
+
},
|
|
8647
|
+
[onSelect]
|
|
8648
|
+
);
|
|
8649
|
+
return /* @__PURE__ */ jsx54(SlideOver2, { open, onClose, title: "Add Panel", size: "xs", children: /* @__PURE__ */ jsxs43("div", { className: "relative h-full w-full space-y-6 overflow-y-auto px-4 py-6", children: [
|
|
8650
|
+
allowImport && /* @__PURE__ */ jsxs43("div", { children: [
|
|
8651
|
+
/* @__PURE__ */ jsx54("h3", { className: "text-ilabel font-ilabel text-text-foreground-secondary mb-2", children: "Import & SQL" }),
|
|
8652
|
+
/* @__PURE__ */ jsxs43("div", { className: "grid grid-cols-2 gap-x-2.5 gap-y-5", children: [
|
|
8653
|
+
/* @__PURE__ */ jsx54(
|
|
8654
|
+
PanelCard,
|
|
8655
|
+
{
|
|
8656
|
+
icon: /* @__PURE__ */ jsx54(ImportIcon, { className: "h-14 w-auto" }),
|
|
8657
|
+
dataType: "",
|
|
8658
|
+
label: "Import",
|
|
8659
|
+
onClick: (evt) => {
|
|
8660
|
+
evt.stopPropagation();
|
|
8661
|
+
onSelect?.("import");
|
|
8662
|
+
}
|
|
8663
|
+
}
|
|
8664
|
+
),
|
|
8665
|
+
SqlPanels.map(({ icon, label, type }, index) => /* @__PURE__ */ jsx54(
|
|
8666
|
+
"a",
|
|
8667
|
+
{
|
|
8668
|
+
href: generateLinkHref("TABLE", "SQL", routerQuery),
|
|
8669
|
+
children: /* @__PURE__ */ jsx54(PanelCard, { icon, label, dataType: type })
|
|
8670
|
+
},
|
|
8671
|
+
index
|
|
8672
|
+
))
|
|
8673
|
+
] })
|
|
8674
|
+
] }),
|
|
8675
|
+
/* @__PURE__ */ jsxs43("div", { children: [
|
|
8676
|
+
/* @__PURE__ */ jsx54("h3", { className: "text-ilabel font-ilabel text-text-foreground-secondary mb-2", children: "Containers" }),
|
|
8677
|
+
/* @__PURE__ */ jsx54("div", { className: "grid grid-cols-2 gap-x-2.5 gap-y-5", children: ContainerPanels.map(({ icon, label, type }, index) => /* @__PURE__ */ jsx54(
|
|
8678
|
+
PanelCard,
|
|
8679
|
+
{
|
|
8680
|
+
icon,
|
|
8681
|
+
label,
|
|
8682
|
+
dataType: type,
|
|
8683
|
+
onClick
|
|
8684
|
+
},
|
|
8685
|
+
index
|
|
8686
|
+
)) })
|
|
8687
|
+
] }),
|
|
8688
|
+
/* @__PURE__ */ jsxs43("div", { children: [
|
|
8689
|
+
/* @__PURE__ */ jsx54("h3", { className: "text-ilabel font-ilabel text-text-foreground-secondary mb-2", children: "Insights" }),
|
|
8690
|
+
/* @__PURE__ */ jsx54("div", { className: "grid grid-cols-2 gap-x-2.5 gap-y-5", children: InsightsPanels.map(({ icon, label, type, chartType }, index) => /* @__PURE__ */ jsx54(
|
|
8691
|
+
"a",
|
|
8692
|
+
{
|
|
8693
|
+
href: generateLinkHref(chartType, "INSIGHTS", routerQuery),
|
|
8694
|
+
children: /* @__PURE__ */ jsx54(PanelCard, { icon, label, dataType: type })
|
|
8695
|
+
},
|
|
8696
|
+
index
|
|
8697
|
+
)) })
|
|
8698
|
+
] }),
|
|
8699
|
+
/* @__PURE__ */ jsxs43("div", { children: [
|
|
8700
|
+
/* @__PURE__ */ jsx54("h3", { className: "text-ilabel font-ilabel text-text-foreground-secondary mb-2", children: "Anotations" }),
|
|
8701
|
+
/* @__PURE__ */ jsx54("div", { className: "grid grid-cols-2 gap-x-2.5 gap-y-5", children: AnotationsPanels.map(({ icon, label, type }, index) => /* @__PURE__ */ jsx54(
|
|
8702
|
+
PanelCard,
|
|
8703
|
+
{
|
|
8704
|
+
icon,
|
|
8705
|
+
label,
|
|
8706
|
+
dataType: type,
|
|
8707
|
+
onClick
|
|
8708
|
+
},
|
|
8709
|
+
index
|
|
8710
|
+
)) })
|
|
8711
|
+
] }),
|
|
8712
|
+
/* @__PURE__ */ jsxs43("div", { children: [
|
|
8713
|
+
/* @__PURE__ */ jsx54("h3", { className: "text-ilabel font-ilabel text-text-foreground-secondary mb-2", children: "Events" }),
|
|
8714
|
+
/* @__PURE__ */ jsx54("div", { className: "grid grid-cols-2 gap-x-2.5 gap-y-5", children: EventsPanels.map(({ icon, label, type }, index) => /* @__PURE__ */ jsx54(
|
|
8715
|
+
PanelCard,
|
|
8716
|
+
{
|
|
8717
|
+
icon,
|
|
8718
|
+
label,
|
|
8719
|
+
dataType: type,
|
|
8720
|
+
onClick
|
|
8721
|
+
},
|
|
8722
|
+
index
|
|
8723
|
+
)) })
|
|
8724
|
+
] }),
|
|
8725
|
+
!allowImport && /* @__PURE__ */ jsxs43("div", { children: [
|
|
8726
|
+
/* @__PURE__ */ jsx54("h3", { className: "text-ilabel font-ilabel text-text-foreground-secondary mb-2", children: "SQL" }),
|
|
8727
|
+
/* @__PURE__ */ jsx54("div", { className: "grid grid-cols-2 gap-x-2.5 gap-y-5", children: SqlPanels.map(({ icon, label, type }, index) => /* @__PURE__ */ jsx54(
|
|
8728
|
+
"a",
|
|
8729
|
+
{
|
|
8730
|
+
href: generateLinkHref("TABLE", "SQL", routerQuery),
|
|
8731
|
+
children: /* @__PURE__ */ jsx54(PanelCard, { icon, label, dataType: type })
|
|
8732
|
+
},
|
|
8733
|
+
index
|
|
8734
|
+
)) })
|
|
8735
|
+
] })
|
|
8736
|
+
] }) });
|
|
8737
|
+
};
|
|
8738
|
+
|
|
8739
|
+
// src/dashboard/AddPanel.tsx
|
|
8740
|
+
import { jsx as jsx55, jsxs as jsxs44 } from "react/jsx-runtime";
|
|
8741
|
+
var defaultMetricChart = {
|
|
8742
|
+
type: "LINE",
|
|
8743
|
+
datasourceType: "METRICS"
|
|
8744
|
+
};
|
|
8745
|
+
var defaultNoteChart = {
|
|
8746
|
+
type: "NOTE",
|
|
8747
|
+
note: {
|
|
8748
|
+
content: ""
|
|
8749
|
+
},
|
|
8750
|
+
datasourceType: "NOTES"
|
|
8751
|
+
};
|
|
8752
|
+
var defaultAnalyticChart = {
|
|
8753
|
+
type: "LINE",
|
|
8754
|
+
datasourceType: "ANALYTICS",
|
|
8755
|
+
config: {
|
|
8756
|
+
timeRangeOverride: {
|
|
8757
|
+
timeRange: {
|
|
8758
|
+
interval: { unit: "d", value: 1 }
|
|
8759
|
+
}
|
|
8760
|
+
}
|
|
8761
|
+
}
|
|
8762
|
+
};
|
|
8763
|
+
var defaultInsightChart = {
|
|
8764
|
+
type: "LINE",
|
|
8765
|
+
datasourceType: "INSIGHTS",
|
|
8766
|
+
insightsQueries: [
|
|
8767
|
+
{
|
|
8768
|
+
dataSource: "METRICS",
|
|
8769
|
+
metricsQuery: {
|
|
8770
|
+
query: "",
|
|
8771
|
+
alias: "",
|
|
8772
|
+
id: "a"
|
|
8773
|
+
}
|
|
8774
|
+
}
|
|
8775
|
+
],
|
|
8776
|
+
config: {
|
|
8777
|
+
timeRangeOverride: {
|
|
8778
|
+
timeRange: {}
|
|
8779
|
+
}
|
|
8780
|
+
}
|
|
8781
|
+
};
|
|
8782
|
+
var defaultEventChart = {
|
|
8783
|
+
type: "TABLE",
|
|
8784
|
+
datasourceType: "EVENTS",
|
|
8785
|
+
eventLogsConfig: {
|
|
8786
|
+
columnsConfig: {},
|
|
8787
|
+
query: "",
|
|
8788
|
+
timeRangeOverride: {
|
|
8789
|
+
enabled: false
|
|
8790
|
+
}
|
|
8791
|
+
}
|
|
8792
|
+
};
|
|
8793
|
+
var defaultGroupChart = {
|
|
8794
|
+
type: "GROUP",
|
|
8795
|
+
datasourceType: "GROUP",
|
|
8796
|
+
group: {
|
|
8797
|
+
title: "New Group",
|
|
8798
|
+
collapsed: false
|
|
8799
|
+
}
|
|
8800
|
+
};
|
|
8801
|
+
var defaultRetentionChart = {
|
|
8802
|
+
type: "LINE",
|
|
8803
|
+
datasourceType: "RETENTION",
|
|
8804
|
+
config: {
|
|
8805
|
+
timeRangeOverride: {
|
|
8806
|
+
timeRange: {}
|
|
8807
|
+
}
|
|
8808
|
+
},
|
|
8809
|
+
retentionQuery: {
|
|
8810
|
+
resources: [
|
|
8811
|
+
{ eventNames: [], filter: { timeFilter: { type: "Disable" } } },
|
|
8812
|
+
{ eventNames: [], filter: { timeFilter: { type: "Disable" } } }
|
|
8813
|
+
],
|
|
8814
|
+
windowSize: 7,
|
|
8815
|
+
interval: { unit: "Day", value: 1 },
|
|
8816
|
+
groupBy: [],
|
|
8817
|
+
segmentBy: [],
|
|
8818
|
+
criteria: "On"
|
|
8819
|
+
}
|
|
8820
|
+
};
|
|
8821
|
+
var defaultSqlChart = {
|
|
8822
|
+
type: "TABLE",
|
|
8823
|
+
datasourceType: "SQL",
|
|
8824
|
+
sqlQuery: JSON.stringify({ sql: "", size: 100, version: "AUTO" })
|
|
8825
|
+
};
|
|
8826
|
+
var AddPanel = forwardRef6(function AddPanel2({ onNewPanel, onImportPanel, saving, routerQuery, generateLinkHref }, ref) {
|
|
8827
|
+
const [slideOverVisible, setSlideOverVisible] = useState19(false);
|
|
8828
|
+
const closeSlideOver = useCallback10(() => setSlideOverVisible(false), []);
|
|
8829
|
+
const openSlideOver = useCallback10(() => setSlideOverVisible(true), []);
|
|
8830
|
+
const onSelectNewPanel = useCallback10(
|
|
8831
|
+
(type) => {
|
|
8832
|
+
const [chartCategory, chartType] = type.split(".");
|
|
8833
|
+
let chart;
|
|
8834
|
+
switch (chartCategory) {
|
|
8835
|
+
case "import":
|
|
8836
|
+
onImportPanel();
|
|
8837
|
+
closeSlideOver();
|
|
8838
|
+
return;
|
|
8839
|
+
case "annotations":
|
|
8840
|
+
chart = { ...defaultNoteChart };
|
|
8841
|
+
break;
|
|
8842
|
+
case "group":
|
|
8843
|
+
closeSlideOver();
|
|
8844
|
+
onNewPanel({ ...defaultGroupChart });
|
|
8845
|
+
return;
|
|
8846
|
+
case "analytics":
|
|
8847
|
+
chart = { ...defaultAnalyticChart };
|
|
8848
|
+
break;
|
|
8849
|
+
case "insights":
|
|
8850
|
+
chart = { ...defaultInsightChart };
|
|
8851
|
+
break;
|
|
8852
|
+
case "events":
|
|
8853
|
+
chart = { ...defaultEventChart };
|
|
8854
|
+
break;
|
|
8855
|
+
case "retention":
|
|
8856
|
+
chart = { ...defaultRetentionChart };
|
|
8857
|
+
break;
|
|
8858
|
+
case "sql":
|
|
8859
|
+
chart = { ...defaultSqlChart };
|
|
8860
|
+
break;
|
|
8861
|
+
case "timeseries":
|
|
8862
|
+
default:
|
|
8863
|
+
chart = { ...defaultMetricChart };
|
|
8864
|
+
}
|
|
8865
|
+
switch (chartType) {
|
|
8866
|
+
case "line":
|
|
8867
|
+
chart.type = "LINE";
|
|
8868
|
+
break;
|
|
8869
|
+
case "bar":
|
|
8870
|
+
chart.type = "BAR";
|
|
8871
|
+
break;
|
|
8872
|
+
case "area":
|
|
8873
|
+
chart.type = "AREA";
|
|
8874
|
+
break;
|
|
8875
|
+
case "bargauge":
|
|
8876
|
+
chart.type = "BAR_GAUGE";
|
|
8877
|
+
break;
|
|
8878
|
+
case "queryvalue":
|
|
8879
|
+
chart.type = "QUERY_VALUE";
|
|
8880
|
+
break;
|
|
8881
|
+
case "table":
|
|
8882
|
+
chart.type = "TABLE";
|
|
8883
|
+
break;
|
|
8884
|
+
case "pie":
|
|
8885
|
+
chart.type = "PIE";
|
|
8886
|
+
break;
|
|
8887
|
+
case "note":
|
|
8888
|
+
chart.type = "NOTE";
|
|
8889
|
+
break;
|
|
8890
|
+
case "log":
|
|
8891
|
+
chart.type = "TABLE";
|
|
8892
|
+
break;
|
|
8893
|
+
default:
|
|
8894
|
+
chart = void 0;
|
|
8895
|
+
}
|
|
8896
|
+
if (chart) {
|
|
8897
|
+
closeSlideOver();
|
|
8898
|
+
onNewPanel(chart);
|
|
8899
|
+
}
|
|
8900
|
+
},
|
|
8901
|
+
[closeSlideOver, onNewPanel, onImportPanel]
|
|
8902
|
+
);
|
|
8903
|
+
return /* @__PURE__ */ jsxs44("div", { className: "inline-flex", children: [
|
|
8904
|
+
/* @__PURE__ */ jsx55(
|
|
8905
|
+
Button8,
|
|
8906
|
+
{
|
|
8907
|
+
ref,
|
|
8908
|
+
processing: saving,
|
|
8909
|
+
icon: /* @__PURE__ */ jsx55(LuPlus3, {}),
|
|
8910
|
+
role: "primary",
|
|
8911
|
+
onClick: openSlideOver,
|
|
8912
|
+
size: "md",
|
|
8913
|
+
children: "Add Panel"
|
|
8914
|
+
}
|
|
8915
|
+
),
|
|
8916
|
+
/* @__PURE__ */ jsx55(
|
|
8917
|
+
AddPanelSlideover,
|
|
8918
|
+
{
|
|
8919
|
+
open: slideOverVisible,
|
|
8920
|
+
onClose: closeSlideOver,
|
|
8921
|
+
onSelect: onSelectNewPanel,
|
|
8922
|
+
routerQuery,
|
|
8923
|
+
generateLinkHref,
|
|
8924
|
+
allowImport: true
|
|
8925
|
+
}
|
|
8926
|
+
)
|
|
8927
|
+
] });
|
|
8928
|
+
});
|
|
8929
|
+
|
|
8930
|
+
// src/dashboard/DashboardButtons.tsx
|
|
8931
|
+
import { memo, useMemo as useMemo17, useRef as useRef10 } from "react";
|
|
8932
|
+
import { PopupMenuButton as PopupMenuButton4 } from "@sentio/ui-core";
|
|
8933
|
+
|
|
8934
|
+
// src/dashboard/ExportChartMenu.tsx
|
|
8935
|
+
import { useMemo as useMemo16 } from "react";
|
|
8936
|
+
import { produce as produce17 } from "immer";
|
|
8937
|
+
import { PopupMenuButton as PopupMenuButton2 } from "@sentio/ui-core";
|
|
8938
|
+
import { AiOutlineApi } from "react-icons/ai";
|
|
8939
|
+
import {
|
|
8940
|
+
LuLink2,
|
|
8941
|
+
LuSquareArrowOutUpRight,
|
|
8942
|
+
LuDownload as LuDownload2,
|
|
8943
|
+
LuCamera
|
|
8944
|
+
} from "react-icons/lu";
|
|
8945
|
+
import { jsx as jsx56 } from "react/jsx-runtime";
|
|
8946
|
+
var DefaultMenuItems = [
|
|
8947
|
+
[
|
|
8948
|
+
{
|
|
8949
|
+
label: "Take a snapshot",
|
|
8950
|
+
icon: /* @__PURE__ */ jsx56(LuCamera, { className: "mr-2 w-4" }),
|
|
8951
|
+
key: "snapshot"
|
|
8952
|
+
}
|
|
8953
|
+
],
|
|
8954
|
+
[
|
|
8955
|
+
{
|
|
8956
|
+
key: "png",
|
|
8957
|
+
label: "Export as PNG",
|
|
8958
|
+
icon: /* @__PURE__ */ jsx56(LuSquareArrowOutUpRight, { className: "mr-2 w-4" })
|
|
8959
|
+
},
|
|
8960
|
+
{
|
|
8961
|
+
key: "svg",
|
|
8962
|
+
label: "Export as SVG",
|
|
8963
|
+
icon: /* @__PURE__ */ jsx56(LuDownload2, { className: "mr-2 w-4" })
|
|
8964
|
+
},
|
|
8965
|
+
{
|
|
8966
|
+
key: "csv",
|
|
8967
|
+
label: "Export as CSV",
|
|
8968
|
+
icon: /* @__PURE__ */ jsx56(LuDownload2, { className: "mr-2 w-4" })
|
|
8969
|
+
}
|
|
8970
|
+
],
|
|
8971
|
+
[
|
|
8972
|
+
{
|
|
8973
|
+
label: "Export as API",
|
|
8974
|
+
icon: /* @__PURE__ */ jsx56(AiOutlineApi, { className: "mr-2 h-4 w-4" }),
|
|
8975
|
+
key: "curl"
|
|
8976
|
+
}
|
|
8977
|
+
]
|
|
8978
|
+
];
|
|
8979
|
+
function ExportChartMenu({
|
|
8980
|
+
allowEdit,
|
|
8981
|
+
onSelect,
|
|
8982
|
+
allowEmbed,
|
|
8983
|
+
canExportCurl,
|
|
8984
|
+
exportCurlHint
|
|
8985
|
+
}) {
|
|
8986
|
+
const menuItems2 = useMemo16(() => {
|
|
8987
|
+
return produce17(DefaultMenuItems, (draft) => {
|
|
8988
|
+
draft[0][0].disabled = !allowEdit;
|
|
8989
|
+
const last = draft[draft.length - 1];
|
|
8990
|
+
last[0].disabled = !canExportCurl || !allowEdit;
|
|
8991
|
+
last[0].disabledHint = exportCurlHint;
|
|
8992
|
+
if (allowEmbed) {
|
|
8993
|
+
last.push({
|
|
8994
|
+
label: "Embed Iframe",
|
|
8995
|
+
icon: /* @__PURE__ */ jsx56(LuLink2, { className: "mr-2 h-4 w-4" }),
|
|
8996
|
+
key: "embed"
|
|
8997
|
+
});
|
|
8998
|
+
}
|
|
8999
|
+
});
|
|
9000
|
+
}, [allowEdit, canExportCurl, exportCurlHint, allowEmbed]);
|
|
9001
|
+
return /* @__PURE__ */ jsx56(
|
|
9002
|
+
PopupMenuButton2,
|
|
9003
|
+
{
|
|
9004
|
+
items: menuItems2,
|
|
9005
|
+
onSelect,
|
|
9006
|
+
ariaLabel: "export",
|
|
9007
|
+
buttonIcon: /* @__PURE__ */ jsx56(LuSquareArrowOutUpRight, { className: "w-4" }),
|
|
9008
|
+
buttonClassName: "cursor-pointer"
|
|
9009
|
+
}
|
|
9010
|
+
);
|
|
9011
|
+
}
|
|
9012
|
+
|
|
9013
|
+
// src/dashboard/ExtraSettingMenu.tsx
|
|
9014
|
+
import { LuTrash2 as LuTrash22, LuSettings, LuLayers2, LuClipboard } from "react-icons/lu";
|
|
9015
|
+
import { PopupMenuButton as PopupMenuButton3 } from "@sentio/ui-core";
|
|
9016
|
+
import { jsx as jsx57 } from "react/jsx-runtime";
|
|
9017
|
+
var menuItems = [
|
|
9018
|
+
[
|
|
9019
|
+
{
|
|
9020
|
+
label: "Clone",
|
|
9021
|
+
icon: /* @__PURE__ */ jsx57(LuLayers2, { className: "mr-2 w-4" }),
|
|
9022
|
+
key: "clone"
|
|
9023
|
+
},
|
|
9024
|
+
{
|
|
9025
|
+
label: "Copy configuration",
|
|
9026
|
+
icon: /* @__PURE__ */ jsx57(LuClipboard, { className: "mr-2 w-4" }),
|
|
9027
|
+
key: "copy"
|
|
9028
|
+
}
|
|
9029
|
+
],
|
|
9030
|
+
[
|
|
9031
|
+
{
|
|
9032
|
+
label: "Delete",
|
|
9033
|
+
key: "delete",
|
|
9034
|
+
status: "danger",
|
|
9035
|
+
icon: /* @__PURE__ */ jsx57(LuTrash22, { className: "mr-2 w-4" })
|
|
9036
|
+
}
|
|
9037
|
+
]
|
|
9038
|
+
];
|
|
9039
|
+
function ExtraSettingMenu({ onSelect }) {
|
|
9040
|
+
return /* @__PURE__ */ jsx57(
|
|
9041
|
+
PopupMenuButton3,
|
|
9042
|
+
{
|
|
9043
|
+
items: menuItems,
|
|
9044
|
+
onSelect,
|
|
9045
|
+
ariaLabel: "settings",
|
|
9046
|
+
buttonIcon: /* @__PURE__ */ jsx57(LuSettings, { className: "w-4" }),
|
|
9047
|
+
buttonClassName: "cursor-pointer"
|
|
9048
|
+
}
|
|
9049
|
+
);
|
|
9050
|
+
}
|
|
9051
|
+
function ReadonlyExtraSettingMenu({ onSelect }) {
|
|
9052
|
+
return /* @__PURE__ */ jsx57(
|
|
9053
|
+
PopupMenuButton3,
|
|
9054
|
+
{
|
|
9055
|
+
items: [
|
|
9056
|
+
[
|
|
9057
|
+
{
|
|
9058
|
+
label: "Copy configuration",
|
|
9059
|
+
icon: /* @__PURE__ */ jsx57(LuClipboard, { className: "mr-2 w-4" }),
|
|
9060
|
+
key: "copy"
|
|
9061
|
+
}
|
|
9062
|
+
]
|
|
9063
|
+
],
|
|
9064
|
+
onSelect,
|
|
9065
|
+
ariaLabel: "settings",
|
|
9066
|
+
buttonIcon: /* @__PURE__ */ jsx57(LuSettings, { className: "w-4" }),
|
|
9067
|
+
buttonClassName: "cursor-pointer"
|
|
9068
|
+
}
|
|
9069
|
+
);
|
|
9070
|
+
}
|
|
9071
|
+
|
|
9072
|
+
// src/dashboard/DashboardButtons.tsx
|
|
9073
|
+
import { AiOutlineApi as AiOutlineApi2 } from "react-icons/ai";
|
|
9074
|
+
import {
|
|
9075
|
+
LuCamera as LuCamera2,
|
|
9076
|
+
LuClipboard as LuClipboard2,
|
|
9077
|
+
LuDownload as LuDownload3,
|
|
9078
|
+
LuExpand,
|
|
9079
|
+
LuLayers2 as LuLayers22,
|
|
9080
|
+
LuLink2 as LuLink22,
|
|
9081
|
+
LuPencil,
|
|
9082
|
+
LuRefreshCw,
|
|
9083
|
+
LuSettings as LuSettings2,
|
|
9084
|
+
LuSquareArrowOutUpRight as LuSquareArrowOutUpRight2,
|
|
9085
|
+
LuTrash2 as LuTrash23
|
|
9086
|
+
} from "react-icons/lu";
|
|
9087
|
+
import { Fragment as Fragment13, jsx as jsx58, jsxs as jsxs45 } from "react/jsx-runtime";
|
|
9088
|
+
var StaticButtons = {
|
|
9089
|
+
fullscreen: {
|
|
9090
|
+
label: "Full screen",
|
|
9091
|
+
icon: /* @__PURE__ */ jsx58(LuExpand, { className: "mr-2 w-4" }),
|
|
9092
|
+
key: "fullscreen"
|
|
9093
|
+
},
|
|
9094
|
+
refresh: {
|
|
9095
|
+
label: "Refresh panel",
|
|
9096
|
+
icon: /* @__PURE__ */ jsx58(LuRefreshCw, { className: "mr-2 w-4" }),
|
|
9097
|
+
key: "refresh"
|
|
9098
|
+
},
|
|
9099
|
+
edit: {
|
|
9100
|
+
label: "Edit panel",
|
|
9101
|
+
icon: /* @__PURE__ */ jsx58(LuPencil, { className: "mr-2 w-4" }),
|
|
9102
|
+
key: "edit"
|
|
9103
|
+
},
|
|
9104
|
+
clone: {
|
|
9105
|
+
label: "Clone",
|
|
9106
|
+
icon: /* @__PURE__ */ jsx58(LuLayers22, { className: "mr-2 w-4" }),
|
|
9107
|
+
key: "clone"
|
|
9108
|
+
},
|
|
9109
|
+
copy: {
|
|
9110
|
+
label: "Copy configuration",
|
|
9111
|
+
icon: /* @__PURE__ */ jsx58(LuClipboard2, { className: "mr-2 w-4" }),
|
|
9112
|
+
key: "copy"
|
|
9113
|
+
},
|
|
9114
|
+
delete: {
|
|
9115
|
+
label: "Delete",
|
|
9116
|
+
key: "delete",
|
|
9117
|
+
status: "danger",
|
|
9118
|
+
icon: /* @__PURE__ */ jsx58(LuTrash23, { className: "mr-2 w-4" })
|
|
9119
|
+
}
|
|
9120
|
+
};
|
|
9121
|
+
var DashboardButtons = ({
|
|
9122
|
+
allowEdit,
|
|
9123
|
+
onMenuSelect,
|
|
9124
|
+
allowExport = true,
|
|
9125
|
+
allowFullScreen = true,
|
|
9126
|
+
allowViewPanel = true,
|
|
9127
|
+
allowEmbed = false,
|
|
9128
|
+
canExportCurl = false,
|
|
9129
|
+
exportCurlHint
|
|
9130
|
+
}) => {
|
|
9131
|
+
const menuRef = useRef10(null);
|
|
9132
|
+
const exportButton = allowExport ? /* @__PURE__ */ jsx58(
|
|
9133
|
+
ExportChartMenu,
|
|
9134
|
+
{
|
|
9135
|
+
allowEdit,
|
|
9136
|
+
onSelect: onMenuSelect,
|
|
9137
|
+
allowEmbed,
|
|
9138
|
+
canExportCurl,
|
|
9139
|
+
exportCurlHint
|
|
9140
|
+
}
|
|
9141
|
+
) : null;
|
|
9142
|
+
const fullScreenButton = allowFullScreen ? /* @__PURE__ */ jsx58(
|
|
9143
|
+
"button",
|
|
9144
|
+
{
|
|
9145
|
+
type: "button",
|
|
9146
|
+
className: "text-text-foreground-secondary hover:text-primary-600 w-6 px-1",
|
|
9147
|
+
"aria-label": "Full screen",
|
|
9148
|
+
onClick: () => {
|
|
9149
|
+
onMenuSelect("fullscreen");
|
|
9150
|
+
},
|
|
9151
|
+
children: /* @__PURE__ */ jsx58(LuExpand, {})
|
|
9152
|
+
}
|
|
9153
|
+
) : null;
|
|
9154
|
+
const items = useMemo17(() => {
|
|
9155
|
+
const ret = [];
|
|
9156
|
+
const curlItem = {
|
|
9157
|
+
label: "Export as API",
|
|
9158
|
+
icon: /* @__PURE__ */ jsx58(AiOutlineApi2, { className: "mr-2 h-4 w-4" }),
|
|
9159
|
+
key: "curl"
|
|
9160
|
+
};
|
|
9161
|
+
if (!canExportCurl) {
|
|
9162
|
+
curlItem.disabled = true;
|
|
9163
|
+
curlItem.disabledHint = exportCurlHint;
|
|
9164
|
+
}
|
|
9165
|
+
const lastGroup = [curlItem];
|
|
9166
|
+
if (allowEmbed) {
|
|
9167
|
+
lastGroup.push({
|
|
9168
|
+
label: "Embed Iframe",
|
|
9169
|
+
icon: /* @__PURE__ */ jsx58(LuLink22, { className: "mr-2 h-4 w-4" }),
|
|
9170
|
+
key: "embed"
|
|
9171
|
+
});
|
|
9172
|
+
}
|
|
9173
|
+
const exportGroup = {
|
|
9174
|
+
label: "Export",
|
|
9175
|
+
icon: /* @__PURE__ */ jsx58(LuSquareArrowOutUpRight2, { className: "mr-2 w-4" }),
|
|
9176
|
+
key: "export",
|
|
9177
|
+
items: [
|
|
9178
|
+
[
|
|
9179
|
+
{
|
|
9180
|
+
label: "Take a snapshot",
|
|
9181
|
+
icon: /* @__PURE__ */ jsx58(LuCamera2, { className: "mr-2 w-4" }),
|
|
9182
|
+
key: "snapshot"
|
|
9183
|
+
}
|
|
9184
|
+
],
|
|
9185
|
+
[
|
|
9186
|
+
{
|
|
9187
|
+
key: "png",
|
|
9188
|
+
label: "Export as PNG",
|
|
9189
|
+
icon: /* @__PURE__ */ jsx58(LuSquareArrowOutUpRight2, { className: "mr-2 w-4" })
|
|
9190
|
+
},
|
|
9191
|
+
{
|
|
9192
|
+
key: "svg",
|
|
9193
|
+
label: "Export as SVG",
|
|
9194
|
+
icon: /* @__PURE__ */ jsx58(LuDownload3, { className: "mr-2 w-4" })
|
|
9195
|
+
},
|
|
9196
|
+
{
|
|
9197
|
+
key: "csv",
|
|
9198
|
+
label: "Export as CSV",
|
|
9199
|
+
icon: /* @__PURE__ */ jsx58(LuDownload3, { className: "mr-2 w-4" })
|
|
9200
|
+
}
|
|
9201
|
+
],
|
|
9202
|
+
lastGroup
|
|
9203
|
+
]
|
|
9204
|
+
};
|
|
9205
|
+
if (allowFullScreen || allowExport) {
|
|
9206
|
+
ret.push([
|
|
9207
|
+
...allowFullScreen ? [StaticButtons.fullscreen] : [],
|
|
9208
|
+
...allowExport ? [exportGroup] : []
|
|
9209
|
+
]);
|
|
9210
|
+
}
|
|
9211
|
+
const editButtons = [StaticButtons.refresh];
|
|
9212
|
+
if (allowViewPanel) {
|
|
9213
|
+
editButtons.push(StaticButtons.edit);
|
|
9214
|
+
}
|
|
9215
|
+
ret.push(editButtons);
|
|
9216
|
+
if (allowEdit) {
|
|
9217
|
+
ret.push(
|
|
9218
|
+
[StaticButtons.clone, StaticButtons.copy],
|
|
9219
|
+
[StaticButtons.delete]
|
|
9220
|
+
);
|
|
9221
|
+
} else if (allowViewPanel) {
|
|
9222
|
+
ret.push([StaticButtons.copy]);
|
|
9223
|
+
}
|
|
9224
|
+
return ret;
|
|
9225
|
+
}, [
|
|
9226
|
+
allowEdit,
|
|
9227
|
+
allowExport,
|
|
9228
|
+
allowFullScreen,
|
|
9229
|
+
allowViewPanel,
|
|
9230
|
+
allowEmbed,
|
|
9231
|
+
canExportCurl,
|
|
9232
|
+
exportCurlHint
|
|
9233
|
+
]);
|
|
9234
|
+
return /* @__PURE__ */ jsxs45(Fragment13, { children: [
|
|
9235
|
+
/* @__PURE__ */ jsx58("div", { className: "hidden group-[.xs]:flex", ref: menuRef, children: /* @__PURE__ */ jsx58(
|
|
9236
|
+
PopupMenuButton4,
|
|
9237
|
+
{
|
|
9238
|
+
onSelect: onMenuSelect,
|
|
9239
|
+
items,
|
|
9240
|
+
ariaLabel: "dropdown menu",
|
|
9241
|
+
buttonIcon: /* @__PURE__ */ jsx58(LuSettings2, { className: "w-4" })
|
|
9242
|
+
}
|
|
9243
|
+
) }),
|
|
9244
|
+
/* @__PURE__ */ jsxs45("div", { className: "flex group-[.xs]:hidden", children: [
|
|
9245
|
+
fullScreenButton,
|
|
9246
|
+
exportButton,
|
|
9247
|
+
allowViewPanel && /* @__PURE__ */ jsx58(
|
|
9248
|
+
"button",
|
|
9249
|
+
{
|
|
9250
|
+
type: "button",
|
|
9251
|
+
className: "text-text-foreground-secondary hover:text-primary-600 w-6 px-1",
|
|
9252
|
+
"aria-label": "Edit panel",
|
|
9253
|
+
onClick: () => {
|
|
9254
|
+
onMenuSelect("edit");
|
|
9255
|
+
},
|
|
9256
|
+
children: /* @__PURE__ */ jsx58(LuPencil, {})
|
|
9257
|
+
}
|
|
9258
|
+
),
|
|
9259
|
+
allowEdit ? /* @__PURE__ */ jsx58(ExtraSettingMenu, { onSelect: onMenuSelect }) : allowViewPanel ? /* @__PURE__ */ jsx58(ReadonlyExtraSettingMenu, { onSelect: onMenuSelect }) : null
|
|
9260
|
+
] })
|
|
9261
|
+
] });
|
|
9262
|
+
};
|
|
9263
|
+
var DashboardButtonsMemo = memo(DashboardButtons);
|
|
7927
9264
|
export {
|
|
9265
|
+
AddPanel,
|
|
9266
|
+
AddPanelSlideover,
|
|
7928
9267
|
AggregateInput,
|
|
7929
9268
|
AreaIcon_default as AreaIcon,
|
|
7930
9269
|
ArgumentInput,
|
|
@@ -7936,7 +9275,10 @@ export {
|
|
|
7936
9275
|
ChartLegend,
|
|
7937
9276
|
ChartTooltip,
|
|
7938
9277
|
ChartTypeButtonGroup,
|
|
9278
|
+
CodeBlockWithTitle,
|
|
9279
|
+
CurlDialog,
|
|
7939
9280
|
DEFAULT_HIGHLIGHT_KEY,
|
|
9281
|
+
DashboardButtonsMemo,
|
|
7940
9282
|
DashboardRefresh,
|
|
7941
9283
|
DataControls,
|
|
7942
9284
|
EditDashboardDialog,
|
|
@@ -7944,6 +9286,10 @@ export {
|
|
|
7944
9286
|
ErrorChart,
|
|
7945
9287
|
EventsFunctionCategories,
|
|
7946
9288
|
EventsFunctionMap,
|
|
9289
|
+
ExportChartMenu,
|
|
9290
|
+
ExportDashboardDialog,
|
|
9291
|
+
ExportType,
|
|
9292
|
+
ExtraSettingMenu,
|
|
7947
9293
|
FunctionInput,
|
|
7948
9294
|
FunctionMap,
|
|
7949
9295
|
FunctionsCategories,
|
|
@@ -7956,6 +9302,7 @@ export {
|
|
|
7956
9302
|
LineControls,
|
|
7957
9303
|
LineIcon_default as LineIcon,
|
|
7958
9304
|
MarkerControls,
|
|
9305
|
+
PanelOwner,
|
|
7959
9306
|
PieChart2 as PieChart,
|
|
7960
9307
|
PieChartControls,
|
|
7961
9308
|
PieIcon_default as PieIcon,
|
|
@@ -7963,6 +9310,7 @@ export {
|
|
|
7963
9310
|
QueryValueControls,
|
|
7964
9311
|
QueryValueIcon_default as QueryValueIcon,
|
|
7965
9312
|
ReactEChartsBase,
|
|
9313
|
+
ReadonlyExtraSettingMenu,
|
|
7966
9314
|
RefreshButton,
|
|
7967
9315
|
RefreshContext,
|
|
7968
9316
|
ScatterChartTooltip,
|
|
@@ -7975,21 +9323,33 @@ export {
|
|
|
7975
9323
|
TableIcon_default as TableIcon,
|
|
7976
9324
|
TimeRangeOverride,
|
|
7977
9325
|
TimeSeriesChart,
|
|
9326
|
+
UserInfo,
|
|
7978
9327
|
ValueControls,
|
|
7979
9328
|
ValueFormatters,
|
|
7980
9329
|
ValueOptions,
|
|
7981
9330
|
ValueStringMapping,
|
|
7982
9331
|
XAxisControls,
|
|
7983
9332
|
YaxisControls,
|
|
9333
|
+
defaultAnalyticChart,
|
|
7984
9334
|
defaultConfig2 as defaultBarGaugeConfig,
|
|
7985
9335
|
defaultConfig5 as defaultDataConfig,
|
|
9336
|
+
defaultEventChart,
|
|
9337
|
+
defaultGroupChart,
|
|
9338
|
+
defaultInsightChart,
|
|
9339
|
+
defaultMetricChart,
|
|
9340
|
+
defaultNoteChart,
|
|
7986
9341
|
defaultConfig as defaultPieConfig,
|
|
7987
9342
|
defaultConfig9 as defaultQueryValueConfig,
|
|
9343
|
+
defaultRetentionChart,
|
|
7988
9344
|
defaultConfig6 as defaultScatterConfig,
|
|
9345
|
+
defaultSqlChart,
|
|
7989
9346
|
defaultConfig7 as defaultTableConfig,
|
|
7990
9347
|
defaultConfig8 as defaultTimeRangeOverrideConfig,
|
|
7991
9348
|
defaultConfig3 as defaultValueConfig,
|
|
7992
9349
|
defaultConfig4 as defaultValueControlsConfig,
|
|
9350
|
+
escapeBody,
|
|
9351
|
+
generateCurlCode,
|
|
9352
|
+
generateNodeCode,
|
|
7993
9353
|
getDefaultValueConfig,
|
|
7994
9354
|
getHighlightHex,
|
|
7995
9355
|
isAggrOrRollupFunction,
|