@sentio/ui-dashboard 0.3.5 → 0.3.7

package/dist/index.mjs

@@ -6946,8 +6946,7 @@ function StyleCard({ selected, label, onClick, preview }) {
       type: "button",
       onClick,
       className: classNames12(
-        "flex flex-col items-stretch overflow-hidden rounded-lg border bg-white text-left transition-colors",
-        "dark:bg-default-bg",
+        "flex flex-col items-stretch overflow-hidden rounded-lg border text-left transition-colors",
         selected ? "border-primary-600 ring-primary-600/30 ring-3 shadow-sm" : "border-main hover:border-primary-400"
       ),
       children: [
@@ -7121,6 +7120,227 @@ function EditGroupDialog({
     }
   );
 }
+
+// src/dashboard/DashboardRefresh.tsx
+import dayjs6 from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+import updateLocale from "dayjs/plugin/updateLocale";
+import { classNames as classNames13 } from "@sentio/ui-core";
+import { useCallback as useCallback7, useEffect as useEffect12, useRef as useRef7, useState as useState13 } from "react";
+import { IoMdRefresh as IoMdRefresh2 } from "react-icons/io";
+import dayjsEn from "dayjs/locale/en";
+import { jsx as jsx42, jsxs as jsxs32 } from "react/jsx-runtime";
+dayjs6.extend(relativeTime);
+dayjs6.extend(updateLocale);
+dayjs6.locale("en.short", {
+  ...dayjsEn,
+  relativeTime: {
+    // relative time format strings, keep %s %d as the same
+    future: "in %s",
+    past: "%s ago",
+    s: "<1s",
+    m: "1min",
+    mm: "%dmin",
+    h: "1h",
+    hh: "%dh",
+    d: "1d",
+    dd: "%dd",
+    M: "1m",
+    MM: "%dm",
+    y: "1y",
+    yy: "%dy"
+  }
+});
+dayjs6.locale("en");
+var DashboardRefresh = ({ stats, onRefresh }) => {
+  const timeRef = useRef7(null);
+  const [fetching, setFetching] = useState13(false);
+  const [currentColor, setCurrentColor] = useState13("text-[#4CAF1D] border-[#4CAF1D] border" /* NORMAL */);
+  useEffect12(() => {
+    const updateFn = () => {
+      if (!stats || !stats.computedAt) return;
+      const computedAt = dayjs6(stats.computedAt).locale("en.short");
+      timeRef.current.textContent = computedAt.fromNow(true);
+      if (computedAt.isBefore(dayjs6().subtract(1, "hour"))) {
+        setCurrentColor("text-[#D98200] border-[#D98200] border" /* WARNNING */);
+      } else {
+        setCurrentColor("text-[#4CAF1D] border-[#4CAF1D] border" /* NORMAL */);
+      }
+    };
+    updateFn();
+    const interval = setInterval(() => {
+      updateFn();
+    }, 1e3);
+    return () => {
+      clearInterval(interval);
+    };
+  }, [stats]);
+  const onClick = useCallback7(() => {
+    setFetching((prevState) => {
+      if (prevState) return prevState;
+      onRefresh().finally(() => {
+        setFetching(false);
+      });
+      return true;
+    });
+  }, [onRefresh]);
+  useEffect12(() => {
+    if (typeof window == "object") {
+      window.addEventListener("refresh_all", onClick);
+      return () => {
+        window.removeEventListener("refresh_all", onClick);
+      };
+    }
+  }, []);
+  const showReload = fetching || stats?.isRefreshing;
+  return /* @__PURE__ */ jsxs32(
+    "div",
+    {
+      className: classNames13(
+        "group/refresh relative ml-1 flex items-center gap-1 rounded-sm py-px pl-1 text-xs transition-all",
+        currentColor,
+        showReload ? "pr-5" : "pr-1.5 hover:pr-5"
+      ),
+      children: [
+        /* @__PURE__ */ jsx42("span", { className: "cursor-default text-[10px]", ref: timeRef }),
+        /* @__PURE__ */ jsx42(
+          "button",
+          {
+            onClick,
+            className: classNames13(
+              "absolute right-1",
+              showReload ? "block" : "hidden group-hover/refresh:block"
+            ),
+            children: /* @__PURE__ */ jsx42(
+              IoMdRefresh2,
+              {
+                className: classNames13(
+                  "h-3.5 w-3.5",
+                  showReload ? "animate-spin" : ""
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/dashboard/ShareDashboardDialog.tsx
+import { useMemo as useMemo14, useState as useState14 } from "react";
+import {
+  BaseDialog as BaseDialog3,
+  CopyButton as CopyButton3,
+  Checkbox as Checkbox6,
+  dateTimeToString as dateTimeToString2
+} from "@sentio/ui-core";
+import { jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
+var ShareDashboardDialog = ({
+  open,
+  initData,
+  onUnshare,
+  onClose,
+  onConfigChange,
+  startTime,
+  endTime,
+  tz
+}) => {
+  const [isReadonly, setIsReadonly] = useState14(
+    initData?.config?.isReadonly ?? false
+  );
+  const [hideModifiers, setHideModifiers] = useState14(
+    initData?.config?.hideModifiers ?? false
+  );
+  const linkText = useMemo14(() => {
+    if (initData?.id) {
+      let timeSuffix = startTime && endTime ? `?from=${encodeURIComponent(dateTimeToString2(startTime))}&to=${encodeURIComponent(dateTimeToString2(endTime))}&tz=${tz}` : "";
+      if (tz) {
+        timeSuffix += `&tz=${tz}`;
+      }
+      return `${location.origin}/share/${initData?.id}${timeSuffix}`;
+    }
+    return "";
+  }, [initData?.id, startTime, endTime]);
+  const handleConfigChange = (newIsReadonly, newHideModifiers) => {
+    const config = {
+      isReadonly: newIsReadonly,
+      hideModifiers: newHideModifiers
+    };
+    onConfigChange?.(config);
+  };
+  const handleReadonlyChange = (checked) => {
+    setIsReadonly(checked);
+    handleConfigChange(checked, hideModifiers);
+  };
+  const handleHideModifiersChange = (checked) => {
+    setHideModifiers(checked);
+    handleConfigChange(isReadonly, checked);
+  };
+  return /* @__PURE__ */ jsx43(
+    BaseDialog3,
+    {
+      title: "Sharing: ON",
+      open,
+      onCancel: () => {
+        onUnshare?.();
+        onClose();
+      },
+      cancelText: "Revoke URL",
+      cancelProps: {
+        status: "danger"
+      },
+      okText: "Done",
+      onOk: () => {
+        onClose();
+      },
+      onClose,
+      buttonsClassName: "justify-between",
+      footerBorder: false,
+      children: /* @__PURE__ */ jsxs33("div", { className: "mx-4 my-4", children: [
+        /* @__PURE__ */ jsxs33("div", { className: "flex overflow-hidden rounded-md border  pl-3", children: [
+          /* @__PURE__ */ jsx43("span", { className: "text-ilabel font-ilabel text-text-foreground flex-1 grow truncate leading-8", children: linkText }),
+          /* @__PURE__ */ jsx43("div", { className: "group cursor-pointer border-l  bg-gray-200 px-2 py-1 hover:bg-gray-100", children: /* @__PURE__ */ jsx43(
+            CopyButton3,
+            {
+              text: linkText,
+              size: 18,
+              className: "text-text-foreground group-hover:text-primary h-4 w-4 align-middle"
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx43("div", { className: "text-text-foreground-secondary mt-2 text-[11px]", children: "Anyone with the link can access this dashboard. You can revoke the link at any time." }),
+        /* @__PURE__ */ jsxs33("div", { className: "mt-4 space-y-3 border-t pt-4", children: [
+          /* @__PURE__ */ jsx43("div", { className: "text-text-foreground text-sm font-medium", children: "Access Settings" }),
+          /* @__PURE__ */ jsxs33("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxs33("div", { children: [
+              /* @__PURE__ */ jsx43(
+                Checkbox6,
+                {
+                  checked: isReadonly,
+                  onChange: handleReadonlyChange,
+                  label: "Panel read-only access"
+                }
+              ),
+              /* @__PURE__ */ jsx43("div", { className: "text-text-foreground-secondary ml-6 text-xs", children: "Viewers can only view the dashboard without entering panel edit mode or copy configuration." })
+            ] }),
+            /* @__PURE__ */ jsxs33("div", { children: [
+              /* @__PURE__ */ jsx43(
+                Checkbox6,
+                {
+                  checked: hideModifiers,
+                  onChange: handleHideModifiersChange,
+                  label: "Hide controls"
+                }
+              ),
+              /* @__PURE__ */ jsx43("div", { className: "text-text-foreground-secondary ml-6 text-xs", children: "Hide panel creator and modifier for viewers" })
+            ] })
+          ] })
+        ] })
+      ] })
+    }
+  );
+};
 export {
   AggregateInput,
   AreaIcon_default as AreaIcon,
@@ -7134,6 +7354,7 @@ export {
   ChartTooltip,
   ChartTypeButtonGroup,
   DEFAULT_HIGHLIGHT_KEY,
+  DashboardRefresh,
   DataControls,
   EditDashboardDialog,
   EditGroupDialog,
@@ -7161,6 +7382,7 @@ export {
   ScatterChartTooltip,
   ScatterControls,
   ScatterIcon_default as ScatterIcon,
+  ShareDashboardDialog,
   SystemLabels,
   TableControls,
   TableIcon_default as TableIcon,