@sentio/ui-dashboard 0.3.12 → 0.3.13

package/dist/index.mjs

@@ -6633,8 +6633,8 @@ function aliasTemplate(alias, labels) {
 function escapeColumnId(id) {
   return id.replace(/[\W_.]+/g, "_");
 }
-function getColumnNameId(labels, alias, displayName) {
-  const s = aliasTemplate(alias, labels) || startCase(displayName);
+function getColumnNameId(labels, alias, displayName2) {
+  const s = aliasTemplate(alias, labels) || startCase(displayName2);
   return { columnName: s, columnId: escapeColumnId(s) };
 }
 
@@ -7982,7 +7982,1288 @@ function ExportDashboardDialog({
     }
   );
 }
+
+// src/dashboard/CurlDialog.tsx
+import { Fragment as Fragment11, useEffect as useEffect15, useState as useState17 } from "react";
+import { Dialog, Transition } from "@headlessui/react";
+import { NewButtonGroup, ShellIcon } from "@sentio/ui-core";
+import { TbTerminal, TbBrandNodejs } from "react-icons/tb";
+import { LuArrowRight } from "react-icons/lu";
+import omit from "lodash/omit";
+
+// src/common/CodeBlock.tsx
+import MonacoEditor2 from "@monaco-editor/react";
+import { useState as useState16 } from "react";
+import { classNames as classNames16, CopyButton as CopyButton5, useDarkMode as useDarkMode3 } from "@sentio/ui-core";
+import { LuChevronDown as LuChevronDown3 } from "react-icons/lu";
+import { jsx as jsx50, jsxs as jsxs40 } from "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 = useDarkMode3();
+  const [collapsed, setCollapsed] = useState16(false);
+  return /* @__PURE__ */ jsxs40(
+    "div",
+    {
+      className: classNames16(
+        "text-icontent border-main overflow-hidden rounded-lg border",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs40(
+          "div",
+          {
+            className: "flex w-full cursor-pointer items-center justify-between border-b bg-gray-200 p-2",
+            onClick: () => setCollapsed((c) => !c),
+            children: [
+              /* @__PURE__ */ jsxs40("span", { className: "text-ilabel text-text-foreground font-medium", children: [
+                icon,
+                title
+              ] }),
+              /* @__PURE__ */ jsxs40("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx50("div", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx50(CopyButton5, { text: value, size: 16 }) }),
+                /* @__PURE__ */ jsx50(
+                  LuChevronDown3,
+                  {
+                    className: classNames16(
+                      "text-text-foreground-secondary h-4 w-4 transition-transform duration-200",
+                      collapsed ? "-rotate-90" : ""
+                    )
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        !collapsed && /* @__PURE__ */ jsx50(
+          MonacoEditor2,
+          {
+            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
+import isEmpty from "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 && !isEmpty(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
+import { Fragment as Fragment12, jsx as jsx51, jsxs as jsxs41 } from "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 : omit(payload, ["projectSlug", "projectOwner", "projectId"]);
+  const [type, setType] = useState17(defaultType);
+  const [curlContent, setCurlContent] = useState17("");
+  const [curlContentWithApiKey, setCurlContentWithApiKey] = useState17("");
+  const [nodeContent, setNodeContent] = useState17("");
+  useEffect15(() => {
+    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]);
+  useEffect15(() => {
+    setType(defaultType);
+  }, [defaultType]);
+  return /* @__PURE__ */ jsx51(Transition.Root, { show: open, as: Fragment11, children: /* @__PURE__ */ jsxs41(
+    Dialog,
+    {
+      as: "div",
+      className: "text-icontent relative z-10",
+      onClose,
+      children: [
+        /* @__PURE__ */ jsx51(
+          Transition.Child,
+          {
+            as: Fragment11,
+            enter: "ease-out duration-300",
+            enterFrom: "opacity-0",
+            enterTo: "opacity-100",
+            leave: "ease-in duration-200",
+            leaveFrom: "opacity-100",
+            leaveTo: "opacity-0",
+            children: /* @__PURE__ */ jsx51("div", { className: "fixed inset-0 bg-gray-200/40 transition-opacity dark:bg-gray-200/50" })
+          }
+        ),
+        /* @__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(
+          Transition.Child,
+          {
+            as: Fragment11,
+            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__ */ 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: [
+              /* @__PURE__ */ jsx51(
+                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__ */ jsxs41("div", { className: "my-2 space-y-4 border-t px-4 pt-4 sm:px-6", children: [
+                /* @__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: [
+                  /* @__PURE__ */ jsxs41("span", { children: [
+                    "Replace",
+                    " ",
+                    /* @__PURE__ */ jsx51("code", { className: "text-primary-600 dark:text-primary-800", children: "<API_KEY>" }),
+                    ` `,
+                    "with your real API key."
+                  ] }),
+                  /* @__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: [
+                    /* @__PURE__ */ jsx51("div", { className: "text-icontent text-left font-medium", children: "Create a new API Key" }),
+                    /* @__PURE__ */ jsx51(LuArrowRight, { className: "h-4 w-4" })
+                  ] }) })
+                ] }),
+                /* @__PURE__ */ jsx51("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx51(
+                  NewButtonGroup,
+                  {
+                    value: type,
+                    onChange: setType,
+                    buttons: [
+                      {
+                        label: "Shell",
+                        value: "curl" /* CURL */,
+                        icon: /* @__PURE__ */ jsx51(ShellIcon, { className: "mr-2 h-4 w-4" })
+                      },
+                      {
+                        label: "Node",
+                        value: "node" /* NODE */,
+                        icon: /* @__PURE__ */ jsx51(TbBrandNodejs, { className: "mr-2 h-4 w-4" })
+                      }
+                    ]
+                  }
+                ) }),
+                type === "curl" /* CURL */ && /* @__PURE__ */ jsxs41(Fragment12, { children: [
+                  /* @__PURE__ */ jsx51(
+                    CodeBlockWithTitle,
+                    {
+                      value: curlContent,
+                      showLineNumbers: true,
+                      language: "bash",
+                      title: "Shell (Auth with Header)",
+                      icon: /* @__PURE__ */ jsx51(TbTerminal, { className: "mr-2 inline-block h-4 w-4" }),
+                      onBeforeMount
+                    }
+                  ),
+                  /* @__PURE__ */ jsx51(
+                    CodeBlockWithTitle,
+                    {
+                      value: curlContentWithApiKey,
+                      showLineNumbers: true,
+                      language: "bash",
+                      title: "Shell (Auth with Query Param)",
+                      icon: /* @__PURE__ */ jsx51(TbTerminal, { className: "mr-2 inline-block h-4 w-4" }),
+                      onBeforeMount
+                    }
+                  )
+                ] }),
+                type === "node" /* NODE */ && /* @__PURE__ */ jsx51(
+                  CodeBlockWithTitle,
+                  {
+                    value: nodeContent,
+                    showLineNumbers: true,
+                    language: "typescript",
+                    title: "Nodejs",
+                    icon: /* @__PURE__ */ jsx51(TbBrandNodejs, { className: "mr-2 inline-block h-4 w-4" }),
+                    onBeforeMount
+                  }
+                )
+              ] })
+            ] })
+          }
+        ) }) })
+      ]
+    }
+  ) });
+}
+
+// src/dashboard/PanelOwner.tsx
+import { PopoverTooltip as PopoverTooltip2 } from "@sentio/ui-core";
+
+// src/common/ImgWithFallback.tsx
+import { useEffect as useEffect16, useState as useState18 } from "react";
+import { classNames as classNames17 } from "@sentio/ui-core";
+import { jsx as jsx52 } from "react/jsx-runtime";
+var TRANSPARENT_GIF = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
+var ImgWithFallback = ({
+  src,
+  fallback = TRANSPARENT_GIF,
+  ...props
+}) => {
+  const [loadError, setLoadError] = useState18(false);
+  useEffect16(() => {
+    setLoadError(false);
+  }, [src]);
+  return /* @__PURE__ */ jsx52(
+    "img",
+    {
+      alt: "",
+      "data-src": src,
+      src: loadError ? fallback : src ?? fallback,
+      ...props,
+      className: classNames17(
+        props.className,
+        loadError && "bg-gray-200 dark:bg-gray-700"
+      ),
+      onError: () => {
+        setLoadError(true);
+      }
+    }
+  );
+};
+
+// src/dashboard/PanelOwner.tsx
+import { jsx as jsx53, jsxs as jsxs42 } from "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__ */ jsxs42("div", { className: containerClassName, children: [
+  avatarSrc && /* @__PURE__ */ jsx53(
+    ImgWithFallback,
+    {
+      className: AVATAR_CLASSES,
+      src: avatarSrc,
+      alt: avatarAlt || username || ""
+    }
+  ),
+  /* @__PURE__ */ jsx53("span", { className: "max-w-[120px] truncate", children: username })
+] });
+var TooltipUserDisplay = ({
+  user,
+  label,
+  onNavigateToUser
+}) => /* @__PURE__ */ jsxs42("div", { className: "flex flex-col gap-1 p-1", children: [
+  /* @__PURE__ */ jsx53("div", { className: LABEL_CLASSES, children: label }),
+  /* @__PURE__ */ jsxs42("div", { className: TOOLTIP_CLASSES, children: [
+    /* @__PURE__ */ jsx53(
+      ImgWithFallback,
+      {
+        className: "h-4 w-4 rounded-full",
+        src: user.picture,
+        alt: user.username
+      }
+    ),
+    onNavigateToUser && user.username ? /* @__PURE__ */ jsx53(
+      "a",
+      {
+        className: "text-xs font-medium hover:underline",
+        href: `/user/${user.username}`,
+        onClick: (e) => {
+          e.preventDefault();
+          onNavigateToUser(user.username);
+        },
+        children: displayName(user)
+      }
+    ) : /* @__PURE__ */ jsx53("span", { className: "text-xs font-medium", children: displayName(user) })
+  ] })
+] });
+var UserWithTooltip = ({
+  mainUser,
+  tooltipUser,
+  tooltipLabel,
+  onNavigateToUser
+}) => /* @__PURE__ */ jsx53(
+  PopoverTooltip2,
+  {
+    text: /* @__PURE__ */ jsx53(
+      TooltipUserDisplay,
+      {
+        user: tooltipUser,
+        label: tooltipLabel,
+        onNavigateToUser
+      }
+    ),
+    maxWidth: "max-w-[240px]",
+    offsetOptions: 10,
+    children: /* @__PURE__ */ jsx53(
+      UserInfo,
+      {
+        avatarSrc: mainUser.picture,
+        avatarAlt: mainUser.username,
+        username: mainUser.username
+      }
+    )
+  }
+);
+var UserWithBothTooltip = ({
+  mainUser,
+  creator,
+  updater,
+  onNavigateToUser
+}) => /* @__PURE__ */ jsx53(
+  PopoverTooltip2,
+  {
+    text: /* @__PURE__ */ jsxs42("div", { className: "space-y-3 p-1", children: [
+      /* @__PURE__ */ jsx53(
+        TooltipUserDisplay,
+        {
+          user: creator,
+          label: "Created by",
+          onNavigateToUser
+        }
+      ),
+      /* @__PURE__ */ jsx53(
+        TooltipUserDisplay,
+        {
+          user: updater,
+          label: "Last updated by",
+          onNavigateToUser
+        }
+      )
+    ] }),
+    maxWidth: "max-w-[280px]",
+    offsetOptions: 10,
+    children: /* @__PURE__ */ jsx53(
+      UserInfo,
+      {
+        avatarSrc: mainUser.picture,
+        avatarAlt: mainUser.username,
+        username: mainUser.username
+      }
+    )
+  }
+);
+var PanelOwner = ({
+  creator,
+  updater,
+  ownerName,
+  ownerAvatarUrl,
+  onNavigateToUser
+}) => {
+  if (!creator && !updater) {
+    return /* @__PURE__ */ jsx53(
+      UserInfo,
+      {
+        avatarSrc: ownerAvatarUrl,
+        avatarAlt: ownerName,
+        username: ownerName
+      }
+    );
+  }
+  if (creator && updater) {
+    return /* @__PURE__ */ jsx53(
+      UserWithBothTooltip,
+      {
+        mainUser: updater,
+        creator,
+        updater,
+        onNavigateToUser
+      }
+    );
+  }
+  if (creator) {
+    return /* @__PURE__ */ jsx53(
+      UserWithTooltip,
+      {
+        mainUser: creator,
+        tooltipUser: creator,
+        tooltipLabel: "Created by",
+        onNavigateToUser
+      }
+    );
+  }
+  if (updater) {
+    return /* @__PURE__ */ jsx53(
+      UserWithTooltip,
+      {
+        mainUser: updater,
+        tooltipUser: updater,
+        tooltipLabel: "Last updated by",
+        onNavigateToUser
+      }
+    );
+  }
+  return null;
+};
+
+// src/dashboard/AddPanel.tsx
+import { forwardRef as forwardRef6, useCallback as useCallback10, useState as useState19 } from "react";
+import { Button as Button8 } from "@sentio/ui-core";
+import { LuPlus as LuPlus3 } from "react-icons/lu";
+
+// src/dashboard/AddPanelSlideover.tsx
+import { useCallback as useCallback9 } from "react";
+import {
+  SlideOver as SlideOver2,
+  AreasIcon,
+  BarsIcon,
+  GaugeIcon,
+  GroupsIcon,
+  LinesIcon,
+  NoteIcon,
+  PieIcon,
+  QueryValueIcon,
+  TableIcon,
+  SQlIcon,
+  EventLogsIcon,
+  ScatterIcon,
+  ImportIcon
+} from "@sentio/ui-core";
+import { jsx as jsx54, jsxs as jsxs43 } from "react/jsx-runtime";
+var PanelCard = ({
+  icon,
+  label,
+  onClick,
+  dataType
+}) => {
+  return /* @__PURE__ */ jsxs43(
+    "div",
+    {
+      onClick: (e) => onClick?.(e),
+      className: "group cursor-pointer space-y-2",
+      "data-type": dataType,
+      children: [
+        /* @__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 }) }),
+        /* @__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 })
+      ]
+    }
+  );
+};
+var AnotationsPanels = [
+  {
+    icon: /* @__PURE__ */ jsx54(NoteIcon, {}),
+    label: "Note",
+    type: "annotations.note"
+  }
+];
+var InsightsPanels = [
+  {
+    icon: /* @__PURE__ */ jsx54(LinesIcon, {}),
+    label: "Lines",
+    type: "insights.line",
+    chartType: "LINE"
+  },
+  { icon: /* @__PURE__ */ jsx54(BarsIcon, {}), label: "Bars", type: "insights.bar", chartType: "BAR" },
+  {
+    icon: /* @__PURE__ */ jsx54(AreasIcon, {}),
+    label: "Areas",
+    type: "insights.area",
+    chartType: "AREA"
+  },
+  {
+    icon: /* @__PURE__ */ jsx54(GaugeIcon, {}),
+    label: "Bar Gauge",
+    type: "insights.bargauge",
+    chartType: "BAR_GAUGE"
+  },
+  {
+    icon: /* @__PURE__ */ jsx54(ScatterIcon, {}),
+    label: "Scatter",
+    type: "insights.scatter",
+    chartType: "SCATTER"
+  },
+  {
+    icon: /* @__PURE__ */ jsx54(QueryValueIcon, {}),
+    label: "Query Value",
+    type: "insights.queryvalue",
+    chartType: "QUERY_VALUE"
+  },
+  {
+    icon: /* @__PURE__ */ jsx54(TableIcon, {}),
+    label: "Table",
+    type: "insights.table",
+    chartType: "TABLE"
+  },
+  { icon: /* @__PURE__ */ jsx54(PieIcon, {}), label: "Pie", type: "insights.pie", chartType: "PIE" }
+];
+var EventsPanels = [
+  {
+    icon: /* @__PURE__ */ jsx54(EventLogsIcon, {}),
+    label: "Event Logs",
+    type: "events.log"
+  }
+];
+var SqlPanels = [
+  {
+    icon: /* @__PURE__ */ jsx54(SQlIcon, {}),
+    label: "SQL Chart",
+    type: "sql.table",
+    chartType: "TABLE"
+  }
+];
+var ContainerPanels = [
+  {
+    icon: /* @__PURE__ */ jsx54(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 = useCallback9(
+    (evt) => {
+      evt.stopPropagation();
+      const target = evt.currentTarget;
+      const type = target.getAttribute("data-type");
+      if (type && onSelect) {
+        onSelect(type);
+      }
+    },
+    [onSelect]
+  );
+  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: [
+    allowImport && /* @__PURE__ */ jsxs43("div", { children: [
+      /* @__PURE__ */ jsx54("h3", { className: "text-ilabel font-ilabel text-text-foreground-secondary mb-2", children: "Import & SQL" }),
+      /* @__PURE__ */ jsxs43("div", { className: "grid grid-cols-2 gap-x-2.5 gap-y-5", children: [
+        /* @__PURE__ */ jsx54(
+          PanelCard,
+          {
+            icon: /* @__PURE__ */ jsx54(ImportIcon, { className: "h-14 w-auto" }),
+            dataType: "",
+            label: "Import",
+            onClick: (evt) => {
+              evt.stopPropagation();
+              onSelect?.("import");
+            }
+          }
+        ),
+        SqlPanels.map(({ icon, label, type }, index) => /* @__PURE__ */ jsx54(
+          "a",
+          {
+            href: generateLinkHref("TABLE", "SQL", routerQuery),
+            children: /* @__PURE__ */ jsx54(PanelCard, { icon, label, dataType: type })
+          },
+          index
+        ))
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs43("div", { children: [
+      /* @__PURE__ */ jsx54("h3", { className: "text-ilabel font-ilabel text-text-foreground-secondary mb-2", children: "Containers" }),
+      /* @__PURE__ */ jsx54("div", { className: "grid grid-cols-2 gap-x-2.5 gap-y-5", children: ContainerPanels.map(({ icon, label, type }, index) => /* @__PURE__ */ jsx54(
+        PanelCard,
+        {
+          icon,
+          label,
+          dataType: type,
+          onClick
+        },
+        index
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs43("div", { children: [
+      /* @__PURE__ */ jsx54("h3", { className: "text-ilabel font-ilabel text-text-foreground-secondary mb-2", children: "Insights" }),
+      /* @__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(
+        "a",
+        {
+          href: generateLinkHref(chartType, "INSIGHTS", routerQuery),
+          children: /* @__PURE__ */ jsx54(PanelCard, { icon, label, dataType: type })
+        },
+        index
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs43("div", { children: [
+      /* @__PURE__ */ jsx54("h3", { className: "text-ilabel font-ilabel text-text-foreground-secondary mb-2", children: "Anotations" }),
+      /* @__PURE__ */ jsx54("div", { className: "grid grid-cols-2 gap-x-2.5 gap-y-5", children: AnotationsPanels.map(({ icon, label, type }, index) => /* @__PURE__ */ jsx54(
+        PanelCard,
+        {
+          icon,
+          label,
+          dataType: type,
+          onClick
+        },
+        index
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs43("div", { children: [
+      /* @__PURE__ */ jsx54("h3", { className: "text-ilabel font-ilabel text-text-foreground-secondary mb-2", children: "Events" }),
+      /* @__PURE__ */ jsx54("div", { className: "grid grid-cols-2 gap-x-2.5 gap-y-5", children: EventsPanels.map(({ icon, label, type }, index) => /* @__PURE__ */ jsx54(
+        PanelCard,
+        {
+          icon,
+          label,
+          dataType: type,
+          onClick
+        },
+        index
+      )) })
+    ] }),
+    !allowImport && /* @__PURE__ */ jsxs43("div", { children: [
+      /* @__PURE__ */ jsx54("h3", { className: "text-ilabel font-ilabel text-text-foreground-secondary mb-2", children: "SQL" }),
+      /* @__PURE__ */ jsx54("div", { className: "grid grid-cols-2 gap-x-2.5 gap-y-5", children: SqlPanels.map(({ icon, label, type }, index) => /* @__PURE__ */ jsx54(
+        "a",
+        {
+          href: generateLinkHref("TABLE", "SQL", routerQuery),
+          children: /* @__PURE__ */ jsx54(PanelCard, { icon, label, dataType: type })
+        },
+        index
+      )) })
+    ] })
+  ] }) });
+};
+
+// src/dashboard/AddPanel.tsx
+import { jsx as jsx55, jsxs as jsxs44 } from "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 = forwardRef6(function AddPanel2({ onNewPanel, onImportPanel, saving, routerQuery, generateLinkHref }, ref) {
+  const [slideOverVisible, setSlideOverVisible] = useState19(false);
+  const closeSlideOver = useCallback10(() => setSlideOverVisible(false), []);
+  const openSlideOver = useCallback10(() => setSlideOverVisible(true), []);
+  const onSelectNewPanel = useCallback10(
+    (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__ */ jsxs44("div", { className: "inline-flex", children: [
+    /* @__PURE__ */ jsx55(
+      Button8,
+      {
+        ref,
+        processing: saving,
+        icon: /* @__PURE__ */ jsx55(LuPlus3, {}),
+        role: "primary",
+        onClick: openSlideOver,
+        size: "md",
+        children: "Add Panel"
+      }
+    ),
+    /* @__PURE__ */ jsx55(
+      AddPanelSlideover,
+      {
+        open: slideOverVisible,
+        onClose: closeSlideOver,
+        onSelect: onSelectNewPanel,
+        routerQuery,
+        generateLinkHref,
+        allowImport: true
+      }
+    )
+  ] });
+});
+
+// src/dashboard/DashboardButtons.tsx
+import { memo, useMemo as useMemo17, useRef as useRef10 } from "react";
+import { PopupMenuButton as PopupMenuButton4 } from "@sentio/ui-core";
+
+// src/dashboard/ExportChartMenu.tsx
+import { useMemo as useMemo16 } from "react";
+import { produce as produce17 } from "immer";
+import { PopupMenuButton as PopupMenuButton2 } from "@sentio/ui-core";
+import { AiOutlineApi } from "react-icons/ai";
+import {
+  LuLink2,
+  LuSquareArrowOutUpRight,
+  LuDownload as LuDownload2,
+  LuCamera
+} from "react-icons/lu";
+import { jsx as jsx56 } from "react/jsx-runtime";
+var DefaultMenuItems = [
+  [
+    {
+      label: "Take a snapshot",
+      icon: /* @__PURE__ */ jsx56(LuCamera, { className: "mr-2 w-4" }),
+      key: "snapshot"
+    }
+  ],
+  [
+    {
+      key: "png",
+      label: "Export as PNG",
+      icon: /* @__PURE__ */ jsx56(LuSquareArrowOutUpRight, { className: "mr-2 w-4" })
+    },
+    {
+      key: "svg",
+      label: "Export as SVG",
+      icon: /* @__PURE__ */ jsx56(LuDownload2, { className: "mr-2 w-4" })
+    },
+    {
+      key: "csv",
+      label: "Export as CSV",
+      icon: /* @__PURE__ */ jsx56(LuDownload2, { className: "mr-2 w-4" })
+    }
+  ],
+  [
+    {
+      label: "Export as API",
+      icon: /* @__PURE__ */ jsx56(AiOutlineApi, { className: "mr-2 h-4 w-4" }),
+      key: "curl"
+    }
+  ]
+];
+function ExportChartMenu({
+  allowEdit,
+  onSelect,
+  allowEmbed,
+  canExportCurl,
+  exportCurlHint
+}) {
+  const menuItems2 = useMemo16(() => {
+    return produce17(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__ */ jsx56(LuLink2, { className: "mr-2 h-4 w-4" }),
+          key: "embed"
+        });
+      }
+    });
+  }, [allowEdit, canExportCurl, exportCurlHint, allowEmbed]);
+  return /* @__PURE__ */ jsx56(
+    PopupMenuButton2,
+    {
+      items: menuItems2,
+      onSelect,
+      ariaLabel: "export",
+      buttonIcon: /* @__PURE__ */ jsx56(LuSquareArrowOutUpRight, { className: "w-4" }),
+      buttonClassName: "cursor-pointer"
+    }
+  );
+}
+
+// src/dashboard/ExtraSettingMenu.tsx
+import { LuTrash2 as LuTrash22, LuSettings, LuLayers2, LuClipboard } from "react-icons/lu";
+import { PopupMenuButton as PopupMenuButton3 } from "@sentio/ui-core";
+import { jsx as jsx57 } from "react/jsx-runtime";
+var menuItems = [
+  [
+    {
+      label: "Clone",
+      icon: /* @__PURE__ */ jsx57(LuLayers2, { className: "mr-2 w-4" }),
+      key: "clone"
+    },
+    {
+      label: "Copy configuration",
+      icon: /* @__PURE__ */ jsx57(LuClipboard, { className: "mr-2 w-4" }),
+      key: "copy"
+    }
+  ],
+  [
+    {
+      label: "Delete",
+      key: "delete",
+      status: "danger",
+      icon: /* @__PURE__ */ jsx57(LuTrash22, { className: "mr-2 w-4" })
+    }
+  ]
+];
+function ExtraSettingMenu({ onSelect }) {
+  return /* @__PURE__ */ jsx57(
+    PopupMenuButton3,
+    {
+      items: menuItems,
+      onSelect,
+      ariaLabel: "settings",
+      buttonIcon: /* @__PURE__ */ jsx57(LuSettings, { className: "w-4" }),
+      buttonClassName: "cursor-pointer"
+    }
+  );
+}
+function ReadonlyExtraSettingMenu({ onSelect }) {
+  return /* @__PURE__ */ jsx57(
+    PopupMenuButton3,
+    {
+      items: [
+        [
+          {
+            label: "Copy configuration",
+            icon: /* @__PURE__ */ jsx57(LuClipboard, { className: "mr-2 w-4" }),
+            key: "copy"
+          }
+        ]
+      ],
+      onSelect,
+      ariaLabel: "settings",
+      buttonIcon: /* @__PURE__ */ jsx57(LuSettings, { className: "w-4" }),
+      buttonClassName: "cursor-pointer"
+    }
+  );
+}
+
+// src/dashboard/DashboardButtons.tsx
+import { AiOutlineApi as AiOutlineApi2 } from "react-icons/ai";
+import {
+  LuCamera as LuCamera2,
+  LuClipboard as LuClipboard2,
+  LuDownload as LuDownload3,
+  LuExpand,
+  LuLayers2 as LuLayers22,
+  LuLink2 as LuLink22,
+  LuPencil,
+  LuRefreshCw,
+  LuSettings as LuSettings2,
+  LuSquareArrowOutUpRight as LuSquareArrowOutUpRight2,
+  LuTrash2 as LuTrash23
+} from "react-icons/lu";
+import { Fragment as Fragment13, jsx as jsx58, jsxs as jsxs45 } from "react/jsx-runtime";
+var StaticButtons = {
+  fullscreen: {
+    label: "Full screen",
+    icon: /* @__PURE__ */ jsx58(LuExpand, { className: "mr-2 w-4" }),
+    key: "fullscreen"
+  },
+  refresh: {
+    label: "Refresh panel",
+    icon: /* @__PURE__ */ jsx58(LuRefreshCw, { className: "mr-2 w-4" }),
+    key: "refresh"
+  },
+  edit: {
+    label: "Edit panel",
+    icon: /* @__PURE__ */ jsx58(LuPencil, { className: "mr-2 w-4" }),
+    key: "edit"
+  },
+  clone: {
+    label: "Clone",
+    icon: /* @__PURE__ */ jsx58(LuLayers22, { className: "mr-2 w-4" }),
+    key: "clone"
+  },
+  copy: {
+    label: "Copy configuration",
+    icon: /* @__PURE__ */ jsx58(LuClipboard2, { className: "mr-2 w-4" }),
+    key: "copy"
+  },
+  delete: {
+    label: "Delete",
+    key: "delete",
+    status: "danger",
+    icon: /* @__PURE__ */ jsx58(LuTrash23, { className: "mr-2 w-4" })
+  }
+};
+var DashboardButtons = ({
+  allowEdit,
+  onMenuSelect,
+  allowExport = true,
+  allowFullScreen = true,
+  allowViewPanel = true,
+  allowEmbed = false,
+  canExportCurl = false,
+  exportCurlHint
+}) => {
+  const menuRef = useRef10(null);
+  const exportButton = allowExport ? /* @__PURE__ */ jsx58(
+    ExportChartMenu,
+    {
+      allowEdit,
+      onSelect: onMenuSelect,
+      allowEmbed,
+      canExportCurl,
+      exportCurlHint
+    }
+  ) : null;
+  const fullScreenButton = allowFullScreen ? /* @__PURE__ */ jsx58(
+    "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__ */ jsx58(LuExpand, {})
+    }
+  ) : null;
+  const items = useMemo17(() => {
+    const ret = [];
+    const curlItem = {
+      label: "Export as API",
+      icon: /* @__PURE__ */ jsx58(AiOutlineApi2, { 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__ */ jsx58(LuLink22, { className: "mr-2 h-4 w-4" }),
+        key: "embed"
+      });
+    }
+    const exportGroup = {
+      label: "Export",
+      icon: /* @__PURE__ */ jsx58(LuSquareArrowOutUpRight2, { className: "mr-2 w-4" }),
+      key: "export",
+      items: [
+        [
+          {
+            label: "Take a snapshot",
+            icon: /* @__PURE__ */ jsx58(LuCamera2, { className: "mr-2 w-4" }),
+            key: "snapshot"
+          }
+        ],
+        [
+          {
+            key: "png",
+            label: "Export as PNG",
+            icon: /* @__PURE__ */ jsx58(LuSquareArrowOutUpRight2, { className: "mr-2 w-4" })
+          },
+          {
+            key: "svg",
+            label: "Export as SVG",
+            icon: /* @__PURE__ */ jsx58(LuDownload3, { className: "mr-2 w-4" })
+          },
+          {
+            key: "csv",
+            label: "Export as CSV",
+            icon: /* @__PURE__ */ jsx58(LuDownload3, { 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__ */ jsxs45(Fragment13, { children: [
+    /* @__PURE__ */ jsx58("div", { className: "hidden group-[.xs]:flex", ref: menuRef, children: /* @__PURE__ */ jsx58(
+      PopupMenuButton4,
+      {
+        onSelect: onMenuSelect,
+        items,
+        ariaLabel: "dropdown menu",
+        buttonIcon: /* @__PURE__ */ jsx58(LuSettings2, { className: "w-4" })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs45("div", { className: "flex group-[.xs]:hidden", children: [
+      fullScreenButton,
+      exportButton,
+      allowViewPanel && /* @__PURE__ */ jsx58(
+        "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__ */ jsx58(LuPencil, {})
+        }
+      ),
+      allowEdit ? /* @__PURE__ */ jsx58(ExtraSettingMenu, { onSelect: onMenuSelect }) : allowViewPanel ? /* @__PURE__ */ jsx58(ReadonlyExtraSettingMenu, { onSelect: onMenuSelect }) : null
+    ] })
+  ] });
+};
+var DashboardButtonsMemo = memo(DashboardButtons);
 export {
+  AddPanel,
+  AddPanelSlideover,
   AggregateInput,
   AreaIcon_default as AreaIcon,
   ArgumentInput,
@@ -7994,7 +9275,10 @@ export {
   ChartLegend,
   ChartTooltip,
   ChartTypeButtonGroup,
+  CodeBlockWithTitle,
+  CurlDialog,
   DEFAULT_HIGHLIGHT_KEY,
+  DashboardButtonsMemo,
   DashboardRefresh,
   DataControls,
   EditDashboardDialog,
@@ -8002,7 +9286,10 @@ export {
   ErrorChart,
   EventsFunctionCategories,
   EventsFunctionMap,
+  ExportChartMenu,
   ExportDashboardDialog,
+  ExportType,
+  ExtraSettingMenu,
   FunctionInput,
   FunctionMap,
   FunctionsCategories,
@@ -8015,6 +9302,7 @@ export {
   LineControls,
   LineIcon_default as LineIcon,
   MarkerControls,
+  PanelOwner,
   PieChart2 as PieChart,
   PieChartControls,
   PieIcon_default as PieIcon,
@@ -8022,6 +9310,7 @@ export {
   QueryValueControls,
   QueryValueIcon_default as QueryValueIcon,
   ReactEChartsBase,
+  ReadonlyExtraSettingMenu,
   RefreshButton,
   RefreshContext,
   ScatterChartTooltip,
@@ -8034,21 +9323,33 @@ export {
   TableIcon_default as TableIcon,
   TimeRangeOverride,
   TimeSeriesChart,
+  UserInfo,
   ValueControls,
   ValueFormatters,
   ValueOptions,
   ValueStringMapping,
   XAxisControls,
   YaxisControls,
+  defaultAnalyticChart,
   defaultConfig2 as defaultBarGaugeConfig,
   defaultConfig5 as defaultDataConfig,
+  defaultEventChart,
+  defaultGroupChart,
+  defaultInsightChart,
+  defaultMetricChart,
+  defaultNoteChart,
   defaultConfig as defaultPieConfig,
   defaultConfig9 as defaultQueryValueConfig,
+  defaultRetentionChart,
   defaultConfig6 as defaultScatterConfig,
+  defaultSqlChart,
   defaultConfig7 as defaultTableConfig,
   defaultConfig8 as defaultTimeRangeOverrideConfig,
   defaultConfig3 as defaultValueConfig,
   defaultConfig4 as defaultValueControlsConfig,
+  escapeBody,
+  generateCurlCode,
+  generateNodeCode,
   getDefaultValueConfig,
   getHighlightHex,
   isAggrOrRollupFunction,