@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.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, displayName) {
6637
- const s = aliasTemplate(alias, labels) || startCase(displayName);
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,