@sentio/ui-dashboard 0.3.6 → 0.3.8

package/dist/index.mjs

@@ -4061,6 +4061,29 @@ function timeBefore(time, duration2, asStart = true) {
     return t.subtract(durationValue, TimeUnitShortNames2[duration2.unit]);
   }
 }
+function fromTimeLike(tl) {
+  if (!tl) {
+    return void 0;
+  }
+  if (tl.relativeTime) {
+    const value = tl.relativeTime.value || 0;
+    return {
+      value: Math.abs(value),
+      unit: tl.relativeTime.unit,
+      sign: value < 0 ? -1 : 1
+    };
+  }
+  return dayjs4.unix(parseInt(tl.absoluteTime || ""));
+}
+function toTimeLike(t) {
+  if (dayjs4.isDayjs(t)) {
+    return { absoluteTime: `${t.unix()}` };
+  }
+  const rt = t;
+  return {
+    relativeTime: { unit: rt.unit, value: rt.sign * rt.value, align: rt.align }
+  };
+}
 
 // src/charts/TimeSeriesChart.tsx
 import {
@@ -7120,6 +7143,596 @@ 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" })
+            ] })
+          ] })
+        ] })
+      ] })
+    }
+  );
+};
+
+// src/dashboard/TimeRangeOverride.tsx
+import { defaults as defaults9 } from "lodash";
+import { produce as produce15 } from "immer";
+import { Switch, TimeRangePicker } from "@sentio/ui-core";
+import { jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
+var defaultConfig8 = {
+  enabled: false
+};
+function TimeRangeOverride({
+  config,
+  onChange,
+  globalStartTime,
+  globalEndTime,
+  globalTz,
+  onSetGlobalTimeRange
+}) {
+  config = defaults9(config || {}, defaultConfig8);
+  const setEnabled = (enabled) => {
+    config && onChange(
+      produce15(config, (draft) => {
+        draft.enabled = enabled;
+        if (enabled) {
+          draft.timeRange = {
+            start: toTimeLike(globalStartTime),
+            end: toTimeLike(globalEndTime),
+            step: draft.timeRange?.step,
+            interval: draft.timeRange?.interval,
+            timezone: draft.timeRange?.timezone
+          };
+        }
+      })
+    );
+  };
+  function onTimeRangeChange(start, end, tz) {
+    if (config?.enabled) {
+      onChange(
+        produce15(config, (draft) => {
+          draft.timeRange = {
+            start: toTimeLike(start),
+            end: toTimeLike(end),
+            timezone: tz,
+            step: draft.timeRange?.step,
+            interval: draft.timeRange?.interval
+          };
+        })
+      );
+    } else {
+      onSetGlobalTimeRange(start, end, tz);
+    }
+  }
+  return /* @__PURE__ */ jsxs34("div", { className: "flex flex-wrap items-center gap-4 p-2", children: [
+    /* @__PURE__ */ jsx44("div", { className: "flex items-center", children: /* @__PURE__ */ jsx44(
+      Switch,
+      {
+        checked: config.enabled || false,
+        onChange: setEnabled,
+        label: "Override Global Time"
+      }
+    ) }),
+    /* @__PURE__ */ jsx44(
+      TimeRangePicker,
+      {
+        startTime: config.enabled ? fromTimeLike(config.timeRange?.start) : globalStartTime,
+        endTime: config.enabled ? fromTimeLike(config.timeRange?.end) : globalEndTime,
+        tz: config.enabled ? config.timeRange?.timezone || globalTz : globalTz,
+        onChange: onTimeRangeChange
+      }
+    )
+  ] });
+}
+
+// src/dashboard/SeriesControls.tsx
+import { useEffect as useEffect13, useRef as useRef8, useState as useState15, useLayoutEffect } from "react";
+import { Select as Select3, classNames as classNames14 } from "@sentio/ui-core";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { LuChevronRight, LuMountainSnow } from "react-icons/lu";
+import { cloneDeep } from "lodash";
+import { Disclosure } from "@headlessui/react";
+import { jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
+var seriesChartTypes = [
+  {
+    value: "default",
+    label: /* @__PURE__ */ jsxs35("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ jsx45(LuMountainSnow, { className: "mr-2 h-4 w-4" }),
+      "Default"
+    ] })
+  },
+  {
+    value: "LINE",
+    label: /* @__PURE__ */ jsxs35("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ jsx45(LineIcon_default, { className: "mr-2 h-4 w-4" }),
+      "Line"
+    ] })
+  },
+  {
+    value: "BAR",
+    label: /* @__PURE__ */ jsxs35("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ jsx45(BarIcon_default, { className: "mr-2 h-4 w-4" }),
+      "Bar"
+    ] })
+  },
+  {
+    value: "AREA",
+    label: /* @__PURE__ */ jsxs35("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ jsx45(AreaIcon_default, { className: "mr-2 h-4 w-4" }),
+      "Area"
+    ] })
+  }
+];
+var SeriesControls = ({
+  config,
+  setSeriesConfig,
+  series,
+  enabled
+}) => {
+  const parentRef = useRef8(null);
+  const [isDisclosureOpen, setIsDisclosureOpen] = useState15(true);
+  const shouldVirtualize = series.length > 10;
+  const virtualizer = useVirtualizer({
+    count: shouldVirtualize && isDisclosureOpen ? series.length : 0,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 40,
+    overscan: 5
+    // Render 5 extra items outside viewport for smooth scrolling
+  });
+  useLayoutEffect(() => {
+    if (isDisclosureOpen && shouldVirtualize && parentRef.current) {
+      const timeoutId = setTimeout(() => {
+        virtualizer.measure();
+      }, 10);
+      return () => clearTimeout(timeoutId);
+    }
+  }, [isDisclosureOpen, shouldVirtualize, virtualizer]);
+  const handleSeriesTypeChange = (seriesName, selectedType) => {
+    const currentSeriesConfig = config?.seriesConfig || { series: {} };
+    if (selectedType === "default") {
+      const newSeriesConfig2 = cloneDeep(currentSeriesConfig);
+      if (newSeriesConfig2.series && newSeriesConfig2.series[seriesName]) {
+        delete newSeriesConfig2.series[seriesName];
+      }
+      setSeriesConfig(newSeriesConfig2);
+      return;
+    }
+    const newSeriesConfig = {
+      ...currentSeriesConfig,
+      series: {
+        ...currentSeriesConfig.series,
+        [seriesName]: { type: selectedType }
+      }
+    };
+    setSeriesConfig(newSeriesConfig);
+  };
+  const handleReset = () => {
+    setSeriesConfig({ series: {} });
+  };
+  const renderSeriesItem = (seriesName) => {
+    const currentType = config?.seriesConfig?.series?.[seriesName]?.type || "default";
+    return /* @__PURE__ */ jsxs35(
+      "div",
+      {
+        className: "text-icontent inline-flex h-8 w-full basis-0 px-2",
+        children: [
+          /* @__PURE__ */ jsx45("div", { className: "sm:text-icontent bg-sentio-gray-100 dark:bg-sentio-gray-200 border-main inline-flex shrink items-center rounded-l-md border border-r-0 px-2 font-medium sm:min-w-[160px]", children: /* @__PURE__ */ jsx45("span", { className: "truncate", title: seriesName, children: seriesName }) }),
+          /* @__PURE__ */ jsx45("span", { className: "sm:text-icontent bg-sentio-gray-100 dark:bg-sentio-gray-200 border-main inline-flex items-center whitespace-nowrap border border-r-0 px-2", children: "Show as" }),
+          /* @__PURE__ */ jsx45("div", { className: "w-40", children: /* @__PURE__ */ jsx45(
+            Select3,
+            {
+              options: seriesChartTypes,
+              value: currentType,
+              onChange: (selectedType) => handleSeriesTypeChange(seriesName, selectedType),
+              className: "focus:border-primary-500 sm:text-icontent border-main h-full rounded-r-md border",
+              buttonClassName: "border-none! h-full!",
+              placeholder: "Select chart type",
+              asLayer: true
+            }
+          ) })
+        ]
+      },
+      seriesName
+    );
+  };
+  if (!enabled) {
+    return null;
+  }
+  const titleWithReset = /* @__PURE__ */ jsxs35("div", { className: "flex w-full items-center justify-between pr-2", children: [
+    /* @__PURE__ */ jsx45("span", { children: `Series (${series.length})` }),
+    /* @__PURE__ */ jsx45(
+      "button",
+      {
+        type: "button",
+        onClick: (e) => {
+          e.stopPropagation();
+          handleReset();
+        },
+        className: "rounded-sm bg-gray-200 px-2 py-1 text-xs transition-colors hover:bg-gray-300",
+        title: "Reset all series to default",
+        children: "Reset"
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsx45(Disclosure, { defaultOpen: true, children: ({ open }) => {
+    useEffect13(() => {
+      setIsDisclosureOpen(open);
+    }, [open]);
+    return /* @__PURE__ */ jsxs35("div", { className: "bg-default-bg w-full rounded-sm", children: [
+      /* @__PURE__ */ jsxs35(
+        Disclosure.Button,
+        {
+          className: classNames14(
+            open ? "rounded-t" : "rounded-sm",
+            "focus-visible:ring-primary-500/75 text-ilabel font-ilabel text-text-foreground hover:bg-sentio-gray-100 dark:hover:bg-sentio-gray-400 focus:outline-hidden focus-visible:ring-3 flex w-full px-2 py-1.5 text-left"
+          ),
+          children: [
+            /* @__PURE__ */ jsx45(
+              LuChevronRight,
+              {
+                className: classNames14(
+                  open ? "rotate-90 transform" : "",
+                  "mr-1 h-5 w-5 self-center transition-all"
+                )
+              }
+            ),
+            titleWithReset
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx45(Disclosure.Panel, { className: "p-2", children: shouldVirtualize && open ? (
+        // Virtualized rendering for large lists - only render when open
+        /* @__PURE__ */ jsx45(
+          "div",
+          {
+            ref: parentRef,
+            className: "text-icontent h-[200px] overflow-auto",
+            style: {
+              contain: "strict"
+            },
+            children: /* @__PURE__ */ jsx45(
+              "div",
+              {
+                style: {
+                  height: `${virtualizer?.getTotalSize() ?? 0}px`,
+                  width: "100%",
+                  position: "relative"
+                },
+                children: virtualizer?.getVirtualItems().map((virtualItem) => {
+                  const seriesName = series[virtualItem.index];
+                  if (!seriesName) return null;
+                  return /* @__PURE__ */ jsx45(
+                    "div",
+                    {
+                      style: {
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        width: "100%",
+                        height: `${virtualItem.size}px`,
+                        transform: `translateY(${virtualItem.start}px)`
+                      },
+                      children: renderSeriesItem(seriesName)
+                    },
+                    virtualItem.key
+                  );
+                })
+              }
+            )
+          }
+        )
+      ) : (
+        // Normal rendering for small lists
+        /* @__PURE__ */ jsx45("div", { className: "text-icontent flex max-h-[200px] flex-col gap-2 overflow-y-auto", children: series.map((seriesName) => renderSeriesItem(seriesName)) })
+      ) })
+    ] });
+  } });
+};
+
+// src/dashboard/QueryValueControls.tsx
+import { produce as produce16 } from "immer";
+import { defaults as defaults10 } from "lodash";
+import { Checkbox as Checkbox7, DisclosurePanel as DisclosurePanel12 } from "@sentio/ui-core";
+import { jsx as jsx46, jsxs as jsxs36 } from "react/jsx-runtime";
+var defaultConfig9 = {
+  calculation: "LAST",
+  colorTheme: {
+    themeType: "Gray"
+  },
+  showBackgroundChart: false
+};
+var CalculationItems4 = [
+  { label: "Last", value: "LAST" },
+  { label: "First", value: "FIRST" },
+  { label: "Total", value: "TOTAL" },
+  { label: "Mean", value: "MEAN" },
+  { label: "Max", value: "MAX" },
+  { label: "Min", value: "MIN" }
+];
+function QueryValueControls({
+  config,
+  defaultOpen,
+  onChange,
+  renderColorSelect
+}) {
+  config = defaults10(config, defaultConfig9);
+  function onCalculationChange(cal) {
+    config && onChange(produce16(config, (draft) => void (draft.calculation = cal)));
+  }
+  function onSeriesCalculationChange(cal) {
+    config && onChange(produce16(config, (draft) => void (draft.seriesCalculation = cal)));
+  }
+  function onSelectColor(c) {
+    config && onChange(
+      produce16(config, (draft) => {
+        draft.colorTheme = c.value;
+      })
+    );
+  }
+  function toggleShowBackgroundChart() {
+    config && onChange(
+      produce16(config, (draft) => {
+        draft.showBackgroundChart = !draft.showBackgroundChart;
+      })
+    );
+  }
+  return /* @__PURE__ */ jsx46(
+    DisclosurePanel12,
+    {
+      title: "Query Value Options",
+      defaultOpen,
+      containerClassName: "w-full bg-default-bg",
+      children: /* @__PURE__ */ jsxs36("div", { className: "flex flex-wrap items-center gap-4", children: [
+        /* @__PURE__ */ jsxs36("div", { className: "shadow-xs flex h-8 rounded-md", children: [
+          /* @__PURE__ */ jsx46("span", { className: "sm:text-ilabel border-main text-text-foreground inline-flex items-center whitespace-nowrap rounded-l-md border bg-gray-50 px-3", children: "For each series, calculate the" }),
+          /* @__PURE__ */ jsx46(
+            "select",
+            {
+              value: config?.calculation,
+              className: "sm:text-ilabel border-main text-text-foreground inline-flex items-center border border-x-0 py-0.5 pl-4 pr-7",
+              onChange: (e) => onCalculationChange(e.target.value),
+              children: CalculationItems4.map((d) => /* @__PURE__ */ jsx46("option", { value: d.value, children: d.label }, d.value))
+            }
+          ),
+          /* @__PURE__ */ jsx46("span", { className: "sm:text-ilabel border-main text-text-foreground inline-flex items-center whitespace-nowrap border bg-gray-50 px-3", children: "value, then show the" }),
+          /* @__PURE__ */ jsx46(
+            "select",
+            {
+              value: config?.seriesCalculation,
+              className: "sm:text-ilabel border-main text-text-foreground inline-flex items-center border border-x-0 py-0.5 pl-4 pr-7",
+              onChange: (e) => onSeriesCalculationChange(e.target.value),
+              children: CalculationItems4.map((d) => /* @__PURE__ */ jsx46("option", { value: d.value, children: d.label }, d.value))
+            }
+          ),
+          /* @__PURE__ */ jsx46("span", { className: "sm:text-ilabel border-main text-text-foreground inline-flex items-center whitespace-nowrap rounded-r-md border bg-gray-50 px-3", children: "value of multiple series" })
+        ] }),
+        /* @__PURE__ */ jsxs36("div", { className: "focus-within:ring-primary-500 shadow-xs border-main flex h-8 divide-x divide-gray-300 rounded-md border focus-within:border-transparent focus-within:ring-2", children: [
+          /* @__PURE__ */ jsx46("span", { className: "sm:text-ilabel text-text-foreground inline-flex items-center whitespace-nowrap rounded-l-md bg-gray-50 px-3", children: "Color Theme" }),
+          renderColorSelect(config?.colorTheme, onSelectColor)
+        ] }),
+        /* @__PURE__ */ jsx46(
+          Checkbox7,
+          {
+            checked: config?.showBackgroundChart,
+            onChange: toggleShowBackgroundChart,
+            label: "Show Background Chart"
+          }
+        )
+      ] })
+    }
+  );
+}
 export {
   AggregateInput,
   AreaIcon_default as AreaIcon,
@@ -7133,6 +7746,7 @@ export {
   ChartTooltip,
   ChartTypeButtonGroup,
   DEFAULT_HIGHLIGHT_KEY,
+  DashboardRefresh,
   DataControls,
   EditDashboardDialog,
   EditGroupDialog,
@@ -7153,6 +7767,7 @@ export {
   PieChartControls,
   PieIcon_default as PieIcon,
   QueryValueChart,
+  QueryValueControls,
   QueryValueIcon_default as QueryValueIcon,
   ReactEChartsBase,
   RefreshButton,
@@ -7160,9 +7775,12 @@ export {
   ScatterChartTooltip,
   ScatterControls,
   ScatterIcon_default as ScatterIcon,
+  SeriesControls,
+  ShareDashboardDialog,
   SystemLabels,
   TableControls,
   TableIcon_default as TableIcon,
+  TimeRangeOverride,
   TimeSeriesChart,
   ValueControls,
   ValueFormatters,
@@ -7173,8 +7791,10 @@ export {
   defaultConfig2 as defaultBarGaugeConfig,
   defaultConfig5 as defaultDataConfig,
   defaultConfig as defaultPieConfig,
+  defaultConfig9 as defaultQueryValueConfig,
   defaultConfig6 as defaultScatterConfig,
   defaultConfig7 as defaultTableConfig,
+  defaultConfig8 as defaultTimeRangeOverrideConfig,
   defaultConfig3 as defaultValueConfig,
   defaultConfig4 as defaultValueControlsConfig,
   getDefaultValueConfig,