@sentio/ui-dashboard 0.3.12 → 0.3.13

package/dist/index.js

@@ -30,6 +30,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  AddPanel: () => AddPanel,
+  AddPanelSlideover: () => AddPanelSlideover,
   AggregateInput: () => AggregateInput,
   AreaIcon: () => AreaIcon_default,
   ArgumentInput: () => ArgumentInput,
@@ -41,7 +43,10 @@ __export(index_exports, {
   ChartLegend: () => ChartLegend,
   ChartTooltip: () => ChartTooltip,
   ChartTypeButtonGroup: () => ChartTypeButtonGroup,
+  CodeBlockWithTitle: () => CodeBlockWithTitle,
+  CurlDialog: () => CurlDialog,
   DEFAULT_HIGHLIGHT_KEY: () => DEFAULT_HIGHLIGHT_KEY,
+  DashboardButtonsMemo: () => DashboardButtonsMemo,
   DashboardRefresh: () => DashboardRefresh,
   DataControls: () => DataControls,
   EditDashboardDialog: () => EditDashboardDialog,
@@ -49,7 +54,10 @@ __export(index_exports, {
   ErrorChart: () => ErrorChart,
   EventsFunctionCategories: () => EventsFunctionCategories,
   EventsFunctionMap: () => EventsFunctionMap,
+  ExportChartMenu: () => ExportChartMenu,
   ExportDashboardDialog: () => ExportDashboardDialog,
+  ExportType: () => ExportType,
+  ExtraSettingMenu: () => ExtraSettingMenu,
   FunctionInput: () => FunctionInput,
   FunctionMap: () => FunctionMap,
   FunctionsCategories: () => FunctionsCategories,
@@ -62,6 +70,7 @@ __export(index_exports, {
   LineControls: () => LineControls,
   LineIcon: () => LineIcon_default,
   MarkerControls: () => MarkerControls,
+  PanelOwner: () => PanelOwner,
   PieChart: () => PieChart2,
   PieChartControls: () => PieChartControls,
   PieIcon: () => PieIcon_default,
@@ -69,6 +78,7 @@ __export(index_exports, {
   QueryValueControls: () => QueryValueControls,
   QueryValueIcon: () => QueryValueIcon_default,
   ReactEChartsBase: () => ReactEChartsBase,
+  ReadonlyExtraSettingMenu: () => ReadonlyExtraSettingMenu,
   RefreshButton: () => RefreshButton,
   RefreshContext: () => RefreshContext,
   ScatterChartTooltip: () => ScatterChartTooltip,
@@ -81,21 +91,33 @@ __export(index_exports, {
   TableIcon: () => TableIcon_default,
   TimeRangeOverride: () => TimeRangeOverride,
   TimeSeriesChart: () => TimeSeriesChart,
+  UserInfo: () => UserInfo,
   ValueControls: () => ValueControls,
   ValueFormatters: () => ValueFormatters,
   ValueOptions: () => ValueOptions,
   ValueStringMapping: () => ValueStringMapping,
   XAxisControls: () => XAxisControls,
   YaxisControls: () => YaxisControls,
+  defaultAnalyticChart: () => defaultAnalyticChart,
   defaultBarGaugeConfig: () => defaultConfig2,
   defaultDataConfig: () => defaultConfig5,
+  defaultEventChart: () => defaultEventChart,
+  defaultGroupChart: () => defaultGroupChart,
+  defaultInsightChart: () => defaultInsightChart,
+  defaultMetricChart: () => defaultMetricChart,
+  defaultNoteChart: () => defaultNoteChart,
   defaultPieConfig: () => defaultConfig,
   defaultQueryValueConfig: () => defaultConfig9,
+  defaultRetentionChart: () => defaultRetentionChart,
   defaultScatterConfig: () => defaultConfig6,
+  defaultSqlChart: () => defaultSqlChart,
   defaultTableConfig: () => defaultConfig7,
   defaultTimeRangeOverrideConfig: () => defaultConfig8,
   defaultValueConfig: () => defaultConfig3,
   defaultValueControlsConfig: () => defaultConfig4,
+  escapeBody: () => escapeBody,
+  generateCurlCode: () => generateCurlCode,
+  generateNodeCode: () => generateNodeCode,
   getDefaultValueConfig: () => getDefaultValueConfig,
   getHighlightHex: () => getHighlightHex,
   isAggrOrRollupFunction: () => isAggrOrRollupFunction,
@@ -6683,8 +6705,8 @@ function aliasTemplate(alias, labels) {
 function escapeColumnId(id) {
   return id.replace(/[\W_.]+/g, "_");
 }
-function getColumnNameId(labels, alias, displayName) {
-  const s = aliasTemplate(alias, labels) || (0, import_lodash12.startCase)(displayName);
+function getColumnNameId(labels, alias, displayName2) {
+  const s = aliasTemplate(alias, labels) || (0, import_lodash12.startCase)(displayName2);
   return { columnName: s, columnId: escapeColumnId(s) };
 }
 
@@ -8027,8 +8049,1257 @@ function ExportDashboardDialog({
     }
   );
 }
+
+// src/dashboard/CurlDialog.tsx
+var import_react36 = require("react");
+var import_react37 = require("@headlessui/react");
+var import_ui_core39 = require("@sentio/ui-core");
+var import_tb = require("react-icons/tb");
+var import_lu13 = require("react-icons/lu");
+var import_omit = __toESM(require("lodash/omit"));
+
+// src/common/CodeBlock.tsx
+var import_react34 = __toESM(require("@monaco-editor/react"));
+var import_react35 = require("react");
+var import_ui_core38 = require("@sentio/ui-core");
+var import_lu12 = require("react-icons/lu");
+var import_jsx_runtime50 = require("react/jsx-runtime");
+var LANGUAGE_MAP = {
+  bash: "shell",
+  jsx: "javascript",
+  tsx: "typescript"
+};
+function toMonacoLanguage(lang) {
+  return LANGUAGE_MAP[lang] ?? lang;
+}
+var BASE_OPTIONS = {
+  readOnly: true,
+  scrollBeyondLastLine: false,
+  minimap: { enabled: false },
+  renderLineHighlight: "none",
+  folding: false
+};
+var CodeBlockWithTitle = ({
+  title,
+  icon,
+  value,
+  language,
+  showLineNumbers,
+  maxHeight = "300px",
+  className,
+  onBeforeMount
+}) => {
+  const isDarkMode = (0, import_ui_core38.useDarkMode)();
+  const [collapsed, setCollapsed] = (0, import_react35.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+    "div",
+    {
+      className: (0, import_ui_core38.classNames)(
+        "text-icontent border-main overflow-hidden rounded-lg border",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+          "div",
+          {
+            className: "flex w-full cursor-pointer items-center justify-between border-b bg-gray-200 p-2",
+            onClick: () => setCollapsed((c) => !c),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("span", { className: "text-ilabel text-text-foreground font-medium", children: [
+                icon,
+                title
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_ui_core38.CopyButton, { text: value, size: 16 }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                  import_lu12.LuChevronDown,
+                  {
+                    className: (0, import_ui_core38.classNames)(
+                      "text-text-foreground-secondary h-4 w-4 transition-transform duration-200",
+                      collapsed ? "-rotate-90" : ""
+                    )
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        !collapsed && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          import_react34.default,
+          {
+            theme: isDarkMode ? "sentio-dark" : "sentio",
+            language: toMonacoLanguage(language),
+            value,
+            height: maxHeight,
+            beforeMount: onBeforeMount,
+            options: {
+              ...BASE_OPTIONS,
+              lineNumbers: showLineNumbers ? "on" : "off"
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/dashboard/code-utils.ts
+var import_isEmpty = __toESM(require("lodash/isEmpty"));
+function escapeBody(body) {
+  if (typeof body !== "string") return body;
+  return body.replace(/'/g, `'\\''`);
+}
+function generateNodeCode(url, data, headers, apiKey = "<API_KEY>", method = "POST", apiKeyPosition = "header") {
+  if (apiKeyPosition === "header") {
+    headers = headers ? { ...headers, "api-key": apiKey } : { "api-key": apiKey };
+  } else {
+    url = url.includes("?") ? `${url}&api-key=${apiKey}` : `${url}?api-key=${apiKey}`;
+  }
+  return `const fetch = (...args) => import('node-fetch').then(({default: fetch}) => fetch(...args));
+
+const url = '${url}';
+const data = ${JSON.stringify(data, null, 2)};
+const method = '${method}';
+${headers ? `const headers = ${JSON.stringify(headers, null, 2)};` : ""}
+
+fetch(url, {
+  method,
+  headers: {
+    'Content-Type': 'application/json',${headers ? "\n    ...headers," : ""}
+  },
+  body: method === 'GET' ? undefined : JSON.stringify(data),
+})
+  .then(response => {
+    if (!response.ok) {
+      throw new Error('Network response was not ok');
+    }
+    return response.json();
+  })
+  .then(data => {
+    // Do something with the data
+    console.log(data);
+  })
+  .catch(error => {
+    // Handle the error
+    console.error('Error:', error);
+  });
+
+`;
+}
+function generateCurlCode(url, data, headers, apiKey = "<API_KEY>", method = "POST", apiKeyPosition = "header") {
+  if (apiKeyPosition === "header") {
+    headers = headers ? { ...headers, "api-key": apiKey } : { "api-key": apiKey };
+  } else {
+    url = url.includes("?") ? `${url}&api-key=${apiKey}` : `${url}?api-key=${apiKey}`;
+  }
+  let curlCommand = `curl -L -X ${method} '${url}' \\
+     -H 'Content-Type: application/json'`;
+  if (headers && !(0, import_isEmpty.default)(headers)) {
+    curlCommand += " \\\n" + Object.entries(headers).map(([key, value]) => `     -H '${key}: ${value}' \\`).join("\n");
+  } else {
+    curlCommand += ` \\`;
+  }
+  if (data) {
+    curlCommand += `
+     --data-raw '${escapeBody(JSON.stringify(data, null, 2))}'`;
+  } else {
+    curlCommand = curlCommand.slice(0, -1);
+  }
+  return curlCommand;
+}
+
+// src/dashboard/CurlDialog.tsx
+var import_jsx_runtime51 = require("react/jsx-runtime");
+var ExportType = /* @__PURE__ */ ((ExportType2) => {
+  ExportType2["CURL"] = "curl";
+  ExportType2["NODE"] = "node";
+  return ExportType2;
+})(ExportType || {});
+function CurlDialog({
+  open,
+  onClose,
+  payload,
+  apiHost = "",
+  apiUrl,
+  headers,
+  defaultType = "curl" /* CURL */,
+  noOmit,
+  onBeforeMount
+}) {
+  const data = noOmit ? payload : (0, import_omit.default)(payload, ["projectSlug", "projectOwner", "projectId"]);
+  const [type, setType] = (0, import_react36.useState)(defaultType);
+  const [curlContent, setCurlContent] = (0, import_react36.useState)("");
+  const [curlContentWithApiKey, setCurlContentWithApiKey] = (0, import_react36.useState)("");
+  const [nodeContent, setNodeContent] = (0, import_react36.useState)("");
+  (0, import_react36.useEffect)(() => {
+    let path = apiUrl || "";
+    path = path.startsWith("/api/") ? path.substring(4) : path;
+    const url = path.startsWith("/") ? `${apiHost}${path}` : path;
+    setCurlContent(generateCurlCode(url, data, headers));
+    setCurlContentWithApiKey(
+      generateCurlCode(url, data, headers, void 0, void 0, "param")
+    );
+    setNodeContent(generateNodeCode(url, data, headers));
+  }, [apiUrl, apiHost, data, headers]);
+  (0, import_react36.useEffect)(() => {
+    setType(defaultType);
+  }, [defaultType]);
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react37.Transition.Root, { show: open, as: import_react36.Fragment, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+    import_react37.Dialog,
+    {
+      as: "div",
+      className: "text-icontent relative z-10",
+      onClose,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          import_react37.Transition.Child,
+          {
+            as: import_react36.Fragment,
+            enter: "ease-out duration-300",
+            enterFrom: "opacity-0",
+            enterTo: "opacity-100",
+            leave: "ease-in duration-200",
+            leaveFrom: "opacity-100",
+            leaveTo: "opacity-0",
+            children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "fixed inset-0 bg-gray-200/40 transition-opacity dark:bg-gray-200/50" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "fixed inset-0 z-10 overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          import_react37.Transition.Child,
+          {
+            as: import_react36.Fragment,
+            enter: "ease-out duration-300",
+            enterFrom: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
+            enterTo: "opacity-100 translate-y-0 sm:scale-100",
+            leave: "ease-in duration-200",
+            leaveFrom: "opacity-100 translate-y-0 sm:scale-100",
+            leaveTo: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
+            children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_react37.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: [
+              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                import_react37.Dialog.Title,
+                {
+                  as: "h3",
+                  className: "text-text-foreground px-4 text-lg font-medium leading-6 sm:px-6",
+                  children: "Export As Code Snippet"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "my-2 space-y-4 border-t px-4 pt-4 sm:px-6", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("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: [
+                  /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("span", { children: [
+                    "Replace",
+                    " ",
+                    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("code", { className: "text-primary-600 dark:text-primary-800", children: "<API_KEY>" }),
+                    ` `,
+                    "with your real API key."
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("a", { href: "/profile/apikeys", target: "_blank", rel: "noreferrer", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("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: [
+                    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "text-icontent text-left font-medium", children: "Create a new API Key" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lu13.LuArrowRight, { className: "h-4 w-4" })
+                  ] }) })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                  import_ui_core39.NewButtonGroup,
+                  {
+                    value: type,
+                    onChange: setType,
+                    buttons: [
+                      {
+                        label: "Shell",
+                        value: "curl" /* CURL */,
+                        icon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_ui_core39.ShellIcon, { className: "mr-2 h-4 w-4" })
+                      },
+                      {
+                        label: "Node",
+                        value: "node" /* NODE */,
+                        icon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_tb.TbBrandNodejs, { className: "mr-2 h-4 w-4" })
+                      }
+                    ]
+                  }
+                ) }),
+                type === "curl" /* CURL */ && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                    CodeBlockWithTitle,
+                    {
+                      value: curlContent,
+                      showLineNumbers: true,
+                      language: "bash",
+                      title: "Shell (Auth with Header)",
+                      icon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_tb.TbTerminal, { className: "mr-2 inline-block h-4 w-4" }),
+                      onBeforeMount
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                    CodeBlockWithTitle,
+                    {
+                      value: curlContentWithApiKey,
+                      showLineNumbers: true,
+                      language: "bash",
+                      title: "Shell (Auth with Query Param)",
+                      icon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_tb.TbTerminal, { className: "mr-2 inline-block h-4 w-4" }),
+                      onBeforeMount
+                    }
+                  )
+                ] }),
+                type === "node" /* NODE */ && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                  CodeBlockWithTitle,
+                  {
+                    value: nodeContent,
+                    showLineNumbers: true,
+                    language: "typescript",
+                    title: "Nodejs",
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_tb.TbBrandNodejs, { className: "mr-2 inline-block h-4 w-4" }),
+                    onBeforeMount
+                  }
+                )
+              ] })
+            ] })
+          }
+        ) }) })
+      ]
+    }
+  ) });
+}
+
+// src/dashboard/PanelOwner.tsx
+var import_ui_core41 = require("@sentio/ui-core");
+
+// src/common/ImgWithFallback.tsx
+var import_react38 = require("react");
+var import_ui_core40 = require("@sentio/ui-core");
+var import_jsx_runtime52 = require("react/jsx-runtime");
+var TRANSPARENT_GIF = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
+var ImgWithFallback = ({
+  src,
+  fallback = TRANSPARENT_GIF,
+  ...props
+}) => {
+  const [loadError, setLoadError] = (0, import_react38.useState)(false);
+  (0, import_react38.useEffect)(() => {
+    setLoadError(false);
+  }, [src]);
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    "img",
+    {
+      alt: "",
+      "data-src": src,
+      src: loadError ? fallback : src ?? fallback,
+      ...props,
+      className: (0, import_ui_core40.classNames)(
+        props.className,
+        loadError && "bg-gray-200 dark:bg-gray-700"
+      ),
+      onError: () => {
+        setLoadError(true);
+      }
+    }
+  );
+};
+
+// src/dashboard/PanelOwner.tsx
+var import_jsx_runtime53 = require("react/jsx-runtime");
+var USER_CONTAINER_CLASSES = "inline-flex items-center gap-1 px-1 text-xs cursor-pointer";
+var AVATAR_CLASSES = "h-3 w-3 rounded-full";
+var TOOLTIP_CLASSES = "flex items-center gap-2";
+var LABEL_CLASSES = "text-xs font-semibold text-text-foreground-secondary";
+function displayName(user) {
+  return user.firstName && user.lastName ? `${user.firstName} ${user.lastName}` : user.username;
+}
+var UserInfo = ({
+  avatarSrc,
+  avatarAlt,
+  username,
+  containerClassName = USER_CONTAINER_CLASSES
+}) => /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: containerClassName, children: [
+  avatarSrc && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+    ImgWithFallback,
+    {
+      className: AVATAR_CLASSES,
+      src: avatarSrc,
+      alt: avatarAlt || username || ""
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "max-w-[120px] truncate", children: username })
+] });
+var TooltipUserDisplay = ({
+  user,
+  label,
+  onNavigateToUser
+}) => /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex flex-col gap-1 p-1", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: LABEL_CLASSES, children: label }),
+  /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: TOOLTIP_CLASSES, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+      ImgWithFallback,
+      {
+        className: "h-4 w-4 rounded-full",
+        src: user.picture,
+        alt: user.username
+      }
+    ),
+    onNavigateToUser && user.username ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+      "a",
+      {
+        className: "text-xs font-medium hover:underline",
+        href: `/user/${user.username}`,
+        onClick: (e) => {
+          e.preventDefault();
+          onNavigateToUser(user.username);
+        },
+        children: displayName(user)
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "text-xs font-medium", children: displayName(user) })
+  ] })
+] });
+var UserWithTooltip = ({
+  mainUser,
+  tooltipUser,
+  tooltipLabel,
+  onNavigateToUser
+}) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  import_ui_core41.PopoverTooltip,
+  {
+    text: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+      TooltipUserDisplay,
+      {
+        user: tooltipUser,
+        label: tooltipLabel,
+        onNavigateToUser
+      }
+    ),
+    maxWidth: "max-w-[240px]",
+    offsetOptions: 10,
+    children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+      UserInfo,
+      {
+        avatarSrc: mainUser.picture,
+        avatarAlt: mainUser.username,
+        username: mainUser.username
+      }
+    )
+  }
+);
+var UserWithBothTooltip = ({
+  mainUser,
+  creator,
+  updater,
+  onNavigateToUser
+}) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  import_ui_core41.PopoverTooltip,
+  {
+    text: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "space-y-3 p-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+        TooltipUserDisplay,
+        {
+          user: creator,
+          label: "Created by",
+          onNavigateToUser
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+        TooltipUserDisplay,
+        {
+          user: updater,
+          label: "Last updated by",
+          onNavigateToUser
+        }
+      )
+    ] }),
+    maxWidth: "max-w-[280px]",
+    offsetOptions: 10,
+    children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+      UserInfo,
+      {
+        avatarSrc: mainUser.picture,
+        avatarAlt: mainUser.username,
+        username: mainUser.username
+      }
+    )
+  }
+);
+var PanelOwner = ({
+  creator,
+  updater,
+  ownerName,
+  ownerAvatarUrl,
+  onNavigateToUser
+}) => {
+  if (!creator && !updater) {
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+      UserInfo,
+      {
+        avatarSrc: ownerAvatarUrl,
+        avatarAlt: ownerName,
+        username: ownerName
+      }
+    );
+  }
+  if (creator && updater) {
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+      UserWithBothTooltip,
+      {
+        mainUser: updater,
+        creator,
+        updater,
+        onNavigateToUser
+      }
+    );
+  }
+  if (creator) {
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+      UserWithTooltip,
+      {
+        mainUser: creator,
+        tooltipUser: creator,
+        tooltipLabel: "Created by",
+        onNavigateToUser
+      }
+    );
+  }
+  if (updater) {
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+      UserWithTooltip,
+      {
+        mainUser: updater,
+        tooltipUser: updater,
+        tooltipLabel: "Last updated by",
+        onNavigateToUser
+      }
+    );
+  }
+  return null;
+};
+
+// src/dashboard/AddPanel.tsx
+var import_react40 = require("react");
+var import_ui_core43 = require("@sentio/ui-core");
+var import_lu14 = require("react-icons/lu");
+
+// src/dashboard/AddPanelSlideover.tsx
+var import_react39 = require("react");
+var import_ui_core42 = require("@sentio/ui-core");
+var import_jsx_runtime54 = require("react/jsx-runtime");
+var PanelCard = ({
+  icon,
+  label,
+  onClick,
+  dataType
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+    "div",
+    {
+      onClick: (e) => onClick?.(e),
+      className: "group cursor-pointer space-y-2",
+      "data-type": dataType,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "group-hover:bg-hover rounded-md p-4 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "mx-auto grid h-14 w-14 items-center justify-center", children: icon }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "group-hover:text-text-foreground text-text-foreground-secondary w-full text-center text-xs group-hover:font-medium", children: label })
+      ]
+    }
+  );
+};
+var AnotationsPanels = [
+  {
+    icon: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_ui_core42.NoteIcon, {}),
+    label: "Note",
+    type: "annotations.note"
+  }
+];
+var InsightsPanels = [
+  {
+    icon: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_ui_core42.LinesIcon, {}),
+    label: "Lines",
+    type: "insights.line",
+    chartType: "LINE"
+  },
+  { icon: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_ui_core42.BarsIcon, {}), label: "Bars", type: "insights.bar", chartType: "BAR" },
+  {
+    icon: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_ui_core42.AreasIcon, {}),
+    label: "Areas",
+    type: "insights.area",
+    chartType: "AREA"
+  },
+  {
+    icon: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_ui_core42.GaugeIcon, {}),
+    label: "Bar Gauge",
+    type: "insights.bargauge",
+    chartType: "BAR_GAUGE"
+  },
+  {
+    icon: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_ui_core42.ScatterIcon, {}),
+    label: "Scatter",
+    type: "insights.scatter",
+    chartType: "SCATTER"
+  },
+  {
+    icon: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_ui_core42.QueryValueIcon, {}),
+    label: "Query Value",
+    type: "insights.queryvalue",
+    chartType: "QUERY_VALUE"
+  },
+  {
+    icon: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_ui_core42.TableIcon, {}),
+    label: "Table",
+    type: "insights.table",
+    chartType: "TABLE"
+  },
+  { icon: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_ui_core42.PieIcon, {}), label: "Pie", type: "insights.pie", chartType: "PIE" }
+];
+var EventsPanels = [
+  {
+    icon: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_ui_core42.EventLogsIcon, {}),
+    label: "Event Logs",
+    type: "events.log"
+  }
+];
+var SqlPanels = [
+  {
+    icon: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_ui_core42.SQlIcon, {}),
+    label: "SQL Chart",
+    type: "sql.table",
+    chartType: "TABLE"
+  }
+];
+var ContainerPanels = [
+  {
+    icon: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_ui_core42.GroupsIcon, {}),
+    label: "Empty Group",
+    type: "group.container"
+  }
+];
+function defaultLinkGenerator(chartType, datasource, query) {
+  const { owner, slug, id: dashboardId, ...restQuery } = query;
+  const search = new URLSearchParams();
+  for (const [key, value] of Object.entries(restQuery)) {
+    if (Array.isArray(value)) {
+      value.forEach((v) => search.append(key, v));
+    } else if (value != null) {
+      search.append(key, value);
+    }
+  }
+  const qs = search.toString();
+  const url = `/${owner}/${slug}/dashboards/${dashboardId}/panels/new`;
+  return `${url}${qs ? `?${qs}` : ""}#tab=edit&chart_type=${chartType}&datasource=${datasource}`;
+}
+var AddPanelSlideover = ({
+  open,
+  onClose,
+  onSelect,
+  routerQuery = {},
+  generateLinkHref = defaultLinkGenerator,
+  allowImport
+}) => {
+  const onClick = (0, import_react39.useCallback)(
+    (evt) => {
+      evt.stopPropagation();
+      const target = evt.currentTarget;
+      const type = target.getAttribute("data-type");
+      if (type && onSelect) {
+        onSelect(type);
+      }
+    },
+    [onSelect]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_ui_core42.SlideOver, { open, onClose, title: "Add Panel", size: "xs", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "relative h-full w-full space-y-6 overflow-y-auto px-4 py-6", children: [
+    allowImport && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("h3", { className: "text-ilabel font-ilabel text-text-foreground-secondary mb-2", children: "Import & SQL" }),
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "grid grid-cols-2 gap-x-2.5 gap-y-5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+          PanelCard,
+          {
+            icon: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_ui_core42.ImportIcon, { className: "h-14 w-auto" }),
+            dataType: "",
+            label: "Import",
+            onClick: (evt) => {
+              evt.stopPropagation();
+              onSelect?.("import");
+            }
+          }
+        ),
+        SqlPanels.map(({ icon, label, type }, index) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+          "a",
+          {
+            href: generateLinkHref("TABLE", "SQL", routerQuery),
+            children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(PanelCard, { icon, label, dataType: type })
+          },
+          index
+        ))
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("h3", { className: "text-ilabel font-ilabel text-text-foreground-secondary mb-2", children: "Containers" }),
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "grid grid-cols-2 gap-x-2.5 gap-y-5", children: ContainerPanels.map(({ icon, label, type }, index) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        PanelCard,
+        {
+          icon,
+          label,
+          dataType: type,
+          onClick
+        },
+        index
+      )) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("h3", { className: "text-ilabel font-ilabel text-text-foreground-secondary mb-2", children: "Insights" }),
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "grid grid-cols-2 gap-x-2.5 gap-y-5", children: InsightsPanels.map(({ icon, label, type, chartType }, index) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        "a",
+        {
+          href: generateLinkHref(chartType, "INSIGHTS", routerQuery),
+          children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(PanelCard, { icon, label, dataType: type })
+        },
+        index
+      )) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("h3", { className: "text-ilabel font-ilabel text-text-foreground-secondary mb-2", children: "Anotations" }),
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "grid grid-cols-2 gap-x-2.5 gap-y-5", children: AnotationsPanels.map(({ icon, label, type }, index) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        PanelCard,
+        {
+          icon,
+          label,
+          dataType: type,
+          onClick
+        },
+        index
+      )) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("h3", { className: "text-ilabel font-ilabel text-text-foreground-secondary mb-2", children: "Events" }),
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "grid grid-cols-2 gap-x-2.5 gap-y-5", children: EventsPanels.map(({ icon, label, type }, index) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        PanelCard,
+        {
+          icon,
+          label,
+          dataType: type,
+          onClick
+        },
+        index
+      )) })
+    ] }),
+    !allowImport && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("h3", { className: "text-ilabel font-ilabel text-text-foreground-secondary mb-2", children: "SQL" }),
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "grid grid-cols-2 gap-x-2.5 gap-y-5", children: SqlPanels.map(({ icon, label, type }, index) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        "a",
+        {
+          href: generateLinkHref("TABLE", "SQL", routerQuery),
+          children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(PanelCard, { icon, label, dataType: type })
+        },
+        index
+      )) })
+    ] })
+  ] }) });
+};
+
+// src/dashboard/AddPanel.tsx
+var import_jsx_runtime55 = require("react/jsx-runtime");
+var defaultMetricChart = {
+  type: "LINE",
+  datasourceType: "METRICS"
+};
+var defaultNoteChart = {
+  type: "NOTE",
+  note: {
+    content: ""
+  },
+  datasourceType: "NOTES"
+};
+var defaultAnalyticChart = {
+  type: "LINE",
+  datasourceType: "ANALYTICS",
+  config: {
+    timeRangeOverride: {
+      timeRange: {
+        interval: { unit: "d", value: 1 }
+      }
+    }
+  }
+};
+var defaultInsightChart = {
+  type: "LINE",
+  datasourceType: "INSIGHTS",
+  insightsQueries: [
+    {
+      dataSource: "METRICS",
+      metricsQuery: {
+        query: "",
+        alias: "",
+        id: "a"
+      }
+    }
+  ],
+  config: {
+    timeRangeOverride: {
+      timeRange: {}
+    }
+  }
+};
+var defaultEventChart = {
+  type: "TABLE",
+  datasourceType: "EVENTS",
+  eventLogsConfig: {
+    columnsConfig: {},
+    query: "",
+    timeRangeOverride: {
+      enabled: false
+    }
+  }
+};
+var defaultGroupChart = {
+  type: "GROUP",
+  datasourceType: "GROUP",
+  group: {
+    title: "New Group",
+    collapsed: false
+  }
+};
+var defaultRetentionChart = {
+  type: "LINE",
+  datasourceType: "RETENTION",
+  config: {
+    timeRangeOverride: {
+      timeRange: {}
+    }
+  },
+  retentionQuery: {
+    resources: [
+      { eventNames: [], filter: { timeFilter: { type: "Disable" } } },
+      { eventNames: [], filter: { timeFilter: { type: "Disable" } } }
+    ],
+    windowSize: 7,
+    interval: { unit: "Day", value: 1 },
+    groupBy: [],
+    segmentBy: [],
+    criteria: "On"
+  }
+};
+var defaultSqlChart = {
+  type: "TABLE",
+  datasourceType: "SQL",
+  sqlQuery: JSON.stringify({ sql: "", size: 100, version: "AUTO" })
+};
+var AddPanel = (0, import_react40.forwardRef)(function AddPanel2({ onNewPanel, onImportPanel, saving, routerQuery, generateLinkHref }, ref) {
+  const [slideOverVisible, setSlideOverVisible] = (0, import_react40.useState)(false);
+  const closeSlideOver = (0, import_react40.useCallback)(() => setSlideOverVisible(false), []);
+  const openSlideOver = (0, import_react40.useCallback)(() => setSlideOverVisible(true), []);
+  const onSelectNewPanel = (0, import_react40.useCallback)(
+    (type) => {
+      const [chartCategory, chartType] = type.split(".");
+      let chart;
+      switch (chartCategory) {
+        case "import":
+          onImportPanel();
+          closeSlideOver();
+          return;
+        case "annotations":
+          chart = { ...defaultNoteChart };
+          break;
+        case "group":
+          closeSlideOver();
+          onNewPanel({ ...defaultGroupChart });
+          return;
+        case "analytics":
+          chart = { ...defaultAnalyticChart };
+          break;
+        case "insights":
+          chart = { ...defaultInsightChart };
+          break;
+        case "events":
+          chart = { ...defaultEventChart };
+          break;
+        case "retention":
+          chart = { ...defaultRetentionChart };
+          break;
+        case "sql":
+          chart = { ...defaultSqlChart };
+          break;
+        case "timeseries":
+        default:
+          chart = { ...defaultMetricChart };
+      }
+      switch (chartType) {
+        case "line":
+          chart.type = "LINE";
+          break;
+        case "bar":
+          chart.type = "BAR";
+          break;
+        case "area":
+          chart.type = "AREA";
+          break;
+        case "bargauge":
+          chart.type = "BAR_GAUGE";
+          break;
+        case "queryvalue":
+          chart.type = "QUERY_VALUE";
+          break;
+        case "table":
+          chart.type = "TABLE";
+          break;
+        case "pie":
+          chart.type = "PIE";
+          break;
+        case "note":
+          chart.type = "NOTE";
+          break;
+        case "log":
+          chart.type = "TABLE";
+          break;
+        default:
+          chart = void 0;
+      }
+      if (chart) {
+        closeSlideOver();
+        onNewPanel(chart);
+      }
+    },
+    [closeSlideOver, onNewPanel, onImportPanel]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "inline-flex", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+      import_ui_core43.Button,
+      {
+        ref,
+        processing: saving,
+        icon: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_lu14.LuPlus, {}),
+        role: "primary",
+        onClick: openSlideOver,
+        size: "md",
+        children: "Add Panel"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+      AddPanelSlideover,
+      {
+        open: slideOverVisible,
+        onClose: closeSlideOver,
+        onSelect: onSelectNewPanel,
+        routerQuery,
+        generateLinkHref,
+        allowImport: true
+      }
+    )
+  ] });
+});
+
+// src/dashboard/DashboardButtons.tsx
+var import_react42 = require("react");
+var import_ui_core46 = require("@sentio/ui-core");
+
+// src/dashboard/ExportChartMenu.tsx
+var import_react41 = require("react");
+var import_immer17 = require("immer");
+var import_ui_core44 = require("@sentio/ui-core");
+var import_ai = require("react-icons/ai");
+var import_lu15 = require("react-icons/lu");
+var import_jsx_runtime56 = require("react/jsx-runtime");
+var DefaultMenuItems = [
+  [
+    {
+      label: "Take a snapshot",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_lu15.LuCamera, { className: "mr-2 w-4" }),
+      key: "snapshot"
+    }
+  ],
+  [
+    {
+      key: "png",
+      label: "Export as PNG",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_lu15.LuSquareArrowOutUpRight, { className: "mr-2 w-4" })
+    },
+    {
+      key: "svg",
+      label: "Export as SVG",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_lu15.LuDownload, { className: "mr-2 w-4" })
+    },
+    {
+      key: "csv",
+      label: "Export as CSV",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_lu15.LuDownload, { className: "mr-2 w-4" })
+    }
+  ],
+  [
+    {
+      label: "Export as API",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_ai.AiOutlineApi, { className: "mr-2 h-4 w-4" }),
+      key: "curl"
+    }
+  ]
+];
+function ExportChartMenu({
+  allowEdit,
+  onSelect,
+  allowEmbed,
+  canExportCurl,
+  exportCurlHint
+}) {
+  const menuItems2 = (0, import_react41.useMemo)(() => {
+    return (0, import_immer17.produce)(DefaultMenuItems, (draft) => {
+      draft[0][0].disabled = !allowEdit;
+      const last = draft[draft.length - 1];
+      last[0].disabled = !canExportCurl || !allowEdit;
+      last[0].disabledHint = exportCurlHint;
+      if (allowEmbed) {
+        last.push({
+          label: "Embed Iframe",
+          icon: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_lu15.LuLink2, { className: "mr-2 h-4 w-4" }),
+          key: "embed"
+        });
+      }
+    });
+  }, [allowEdit, canExportCurl, exportCurlHint, allowEmbed]);
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    import_ui_core44.PopupMenuButton,
+    {
+      items: menuItems2,
+      onSelect,
+      ariaLabel: "export",
+      buttonIcon: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_lu15.LuSquareArrowOutUpRight, { className: "w-4" }),
+      buttonClassName: "cursor-pointer"
+    }
+  );
+}
+
+// src/dashboard/ExtraSettingMenu.tsx
+var import_lu16 = require("react-icons/lu");
+var import_ui_core45 = require("@sentio/ui-core");
+var import_jsx_runtime57 = require("react/jsx-runtime");
+var menuItems = [
+  [
+    {
+      label: "Clone",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lu16.LuLayers2, { className: "mr-2 w-4" }),
+      key: "clone"
+    },
+    {
+      label: "Copy configuration",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lu16.LuClipboard, { className: "mr-2 w-4" }),
+      key: "copy"
+    }
+  ],
+  [
+    {
+      label: "Delete",
+      key: "delete",
+      status: "danger",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lu16.LuTrash2, { className: "mr-2 w-4" })
+    }
+  ]
+];
+function ExtraSettingMenu({ onSelect }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+    import_ui_core45.PopupMenuButton,
+    {
+      items: menuItems,
+      onSelect,
+      ariaLabel: "settings",
+      buttonIcon: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lu16.LuSettings, { className: "w-4" }),
+      buttonClassName: "cursor-pointer"
+    }
+  );
+}
+function ReadonlyExtraSettingMenu({ onSelect }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+    import_ui_core45.PopupMenuButton,
+    {
+      items: [
+        [
+          {
+            label: "Copy configuration",
+            icon: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lu16.LuClipboard, { className: "mr-2 w-4" }),
+            key: "copy"
+          }
+        ]
+      ],
+      onSelect,
+      ariaLabel: "settings",
+      buttonIcon: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lu16.LuSettings, { className: "w-4" }),
+      buttonClassName: "cursor-pointer"
+    }
+  );
+}
+
+// src/dashboard/DashboardButtons.tsx
+var import_ai2 = require("react-icons/ai");
+var import_lu17 = require("react-icons/lu");
+var import_jsx_runtime58 = require("react/jsx-runtime");
+var StaticButtons = {
+  fullscreen: {
+    label: "Full screen",
+    icon: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lu17.LuExpand, { className: "mr-2 w-4" }),
+    key: "fullscreen"
+  },
+  refresh: {
+    label: "Refresh panel",
+    icon: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lu17.LuRefreshCw, { className: "mr-2 w-4" }),
+    key: "refresh"
+  },
+  edit: {
+    label: "Edit panel",
+    icon: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lu17.LuPencil, { className: "mr-2 w-4" }),
+    key: "edit"
+  },
+  clone: {
+    label: "Clone",
+    icon: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lu17.LuLayers2, { className: "mr-2 w-4" }),
+    key: "clone"
+  },
+  copy: {
+    label: "Copy configuration",
+    icon: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lu17.LuClipboard, { className: "mr-2 w-4" }),
+    key: "copy"
+  },
+  delete: {
+    label: "Delete",
+    key: "delete",
+    status: "danger",
+    icon: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lu17.LuTrash2, { className: "mr-2 w-4" })
+  }
+};
+var DashboardButtons = ({
+  allowEdit,
+  onMenuSelect,
+  allowExport = true,
+  allowFullScreen = true,
+  allowViewPanel = true,
+  allowEmbed = false,
+  canExportCurl = false,
+  exportCurlHint
+}) => {
+  const menuRef = (0, import_react42.useRef)(null);
+  const exportButton = allowExport ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    ExportChartMenu,
+    {
+      allowEdit,
+      onSelect: onMenuSelect,
+      allowEmbed,
+      canExportCurl,
+      exportCurlHint
+    }
+  ) : null;
+  const fullScreenButton = allowFullScreen ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    "button",
+    {
+      type: "button",
+      className: "text-text-foreground-secondary hover:text-primary-600 w-6 px-1",
+      "aria-label": "Full screen",
+      onClick: () => {
+        onMenuSelect("fullscreen");
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lu17.LuExpand, {})
+    }
+  ) : null;
+  const items = (0, import_react42.useMemo)(() => {
+    const ret = [];
+    const curlItem = {
+      label: "Export as API",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_ai2.AiOutlineApi, { className: "mr-2 h-4 w-4" }),
+      key: "curl"
+    };
+    if (!canExportCurl) {
+      curlItem.disabled = true;
+      curlItem.disabledHint = exportCurlHint;
+    }
+    const lastGroup = [curlItem];
+    if (allowEmbed) {
+      lastGroup.push({
+        label: "Embed Iframe",
+        icon: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lu17.LuLink2, { className: "mr-2 h-4 w-4" }),
+        key: "embed"
+      });
+    }
+    const exportGroup = {
+      label: "Export",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lu17.LuSquareArrowOutUpRight, { className: "mr-2 w-4" }),
+      key: "export",
+      items: [
+        [
+          {
+            label: "Take a snapshot",
+            icon: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lu17.LuCamera, { className: "mr-2 w-4" }),
+            key: "snapshot"
+          }
+        ],
+        [
+          {
+            key: "png",
+            label: "Export as PNG",
+            icon: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lu17.LuSquareArrowOutUpRight, { className: "mr-2 w-4" })
+          },
+          {
+            key: "svg",
+            label: "Export as SVG",
+            icon: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lu17.LuDownload, { className: "mr-2 w-4" })
+          },
+          {
+            key: "csv",
+            label: "Export as CSV",
+            icon: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lu17.LuDownload, { className: "mr-2 w-4" })
+          }
+        ],
+        lastGroup
+      ]
+    };
+    if (allowFullScreen || allowExport) {
+      ret.push([
+        ...allowFullScreen ? [StaticButtons.fullscreen] : [],
+        ...allowExport ? [exportGroup] : []
+      ]);
+    }
+    const editButtons = [StaticButtons.refresh];
+    if (allowViewPanel) {
+      editButtons.push(StaticButtons.edit);
+    }
+    ret.push(editButtons);
+    if (allowEdit) {
+      ret.push(
+        [StaticButtons.clone, StaticButtons.copy],
+        [StaticButtons.delete]
+      );
+    } else if (allowViewPanel) {
+      ret.push([StaticButtons.copy]);
+    }
+    return ret;
+  }, [
+    allowEdit,
+    allowExport,
+    allowFullScreen,
+    allowViewPanel,
+    allowEmbed,
+    canExportCurl,
+    exportCurlHint
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "hidden group-[.xs]:flex", ref: menuRef, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+      import_ui_core46.PopupMenuButton,
+      {
+        onSelect: onMenuSelect,
+        items,
+        ariaLabel: "dropdown menu",
+        buttonIcon: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lu17.LuSettings, { className: "w-4" })
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex group-[.xs]:hidden", children: [
+      fullScreenButton,
+      exportButton,
+      allowViewPanel && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "text-text-foreground-secondary hover:text-primary-600 w-6 px-1",
+          "aria-label": "Edit panel",
+          onClick: () => {
+            onMenuSelect("edit");
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lu17.LuPencil, {})
+        }
+      ),
+      allowEdit ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ExtraSettingMenu, { onSelect: onMenuSelect }) : allowViewPanel ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ReadonlyExtraSettingMenu, { onSelect: onMenuSelect }) : null
+    ] })
+  ] });
+};
+var DashboardButtonsMemo = (0, import_react42.memo)(DashboardButtons);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AddPanel,
+  AddPanelSlideover,
   AggregateInput,
   AreaIcon,
   ArgumentInput,
@@ -8040,7 +9311,10 @@ function ExportDashboardDialog({
   ChartLegend,
   ChartTooltip,
   ChartTypeButtonGroup,
+  CodeBlockWithTitle,
+  CurlDialog,
   DEFAULT_HIGHLIGHT_KEY,
+  DashboardButtonsMemo,
   DashboardRefresh,
   DataControls,
   EditDashboardDialog,
@@ -8048,7 +9322,10 @@ function ExportDashboardDialog({
   ErrorChart,
   EventsFunctionCategories,
   EventsFunctionMap,
+  ExportChartMenu,
   ExportDashboardDialog,
+  ExportType,
+  ExtraSettingMenu,
   FunctionInput,
   FunctionMap,
   FunctionsCategories,
@@ -8061,6 +9338,7 @@ function ExportDashboardDialog({
   LineControls,
   LineIcon,
   MarkerControls,
+  PanelOwner,
   PieChart,
   PieChartControls,
   PieIcon,
@@ -8068,6 +9346,7 @@ function ExportDashboardDialog({
   QueryValueControls,
   QueryValueIcon,
   ReactEChartsBase,
+  ReadonlyExtraSettingMenu,
   RefreshButton,
   RefreshContext,
   ScatterChartTooltip,
@@ -8080,21 +9359,33 @@ function ExportDashboardDialog({
   TableIcon,
   TimeRangeOverride,
   TimeSeriesChart,
+  UserInfo,
   ValueControls,
   ValueFormatters,
   ValueOptions,
   ValueStringMapping,
   XAxisControls,
   YaxisControls,
+  defaultAnalyticChart,
   defaultBarGaugeConfig,
   defaultDataConfig,
+  defaultEventChart,
+  defaultGroupChart,
+  defaultInsightChart,
+  defaultMetricChart,
+  defaultNoteChart,
   defaultPieConfig,
   defaultQueryValueConfig,
+  defaultRetentionChart,
   defaultScatterConfig,
+  defaultSqlChart,
   defaultTableConfig,
   defaultTimeRangeOverrideConfig,
   defaultValueConfig,
   defaultValueControlsConfig,
+  escapeBody,
+  generateCurlCode,
+  generateNodeCode,
   getDefaultValueConfig,
   getHighlightHex,
   isAggrOrRollupFunction,