@perses-dev/dashboards 0.23.0 → 0.24.0

package/dist/cjs/components/TimeRangeControls/TimeRangeControls.js

@@ -26,6 +26,7 @@ _export(exports, {
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _refresh = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Refresh"));
+const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
 const _pluginSystem = require("@perses-dev/plugin-system");
 const _core = require("@perses-dev/core");
@@ -94,8 +95,9 @@ const TIME_OPTIONS = [
     }
 ];
 const DEFAULT_HEIGHT = '34px';
-function TimeRangeControls({ heightPx  }) {
+function TimeRangeControls({ heightPx , showRefresh =true  }) {
     const { timeRange , setTimeRange , refresh  } = (0, _pluginSystem.useTimeRange)();
+    // TODO: Remove this since it couples to the dashboard context
     const defaultTimeRange = (0, _context.useDefaultTimeRange)();
     // Convert height to a string, then use the string for styling
     const height = heightPx === undefined ? DEFAULT_HEIGHT : `${heightPx}px`;
@@ -110,7 +112,9 @@ function TimeRangeControls({ heightPx  }) {
             });
         }
     }
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        spacing: 1,
         children: [
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.DateTimeRangePicker, {
                 timeOptions: TIME_OPTIONS,
@@ -118,7 +122,7 @@ function TimeRangeControls({ heightPx  }) {
                 onChange: setTimeRange,
                 height: height
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+            showRefresh && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
                 description: _constants.TOOLTIP_TEXT.refreshDashboard,
                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_toolbarIconButton.ToolbarIconButton, {
                     "aria-label": _constants.TOOLTIP_TEXT.refreshDashboard,

package/dist/cjs/context/DashboardProvider/DashboardProvider.js

@@ -29,7 +29,7 @@ const _jsxRuntime = require("react/jsx-runtime");
 const _zustand = require("zustand");
 const _middleware = require("zustand/middleware");
 const _immer = require("zustand/middleware/immer");
-const _shallow = /*#__PURE__*/ _interopRequireDefault(require("zustand/shallow"));
+const _shallow = require("zustand/shallow");
 const _react = require("react");
 const _pluginSystem = require("@perses-dev/plugin-system");
 const _panelGroupEditorSlice = require("./panel-group-editor-slice");
@@ -40,18 +40,13 @@ const _deletePanelGroupSlice = require("./delete-panel-group-slice");
 const _deletePanelSlice = require("./delete-panel-slice");
 const _discardChangesDialogSlice = require("./discard-changes-dialog-slice");
 const _duplicatePanelSlice = require("./duplicate-panel-slice");
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
 const DashboardContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
 function useDashboardStore(selector) {
     const store = (0, _react.useContext)(DashboardContext);
     if (store === undefined) {
         throw new Error('No DashboardContext found. Did you forget a Provider?');
     }
-    return (0, _zustand.useStore)(store, selector, _shallow.default);
+    return (0, _zustand.useStore)(store, selector, _shallow.shallow);
 }
 function DashboardProvider(props) {
     const createDashboardStore = (0, _react.useCallback)(initStore, [

package/dist/components/TimeRangeControls/TimeRangeControls.d.ts

@@ -3,7 +3,8 @@ import { TimeOption } from '@perses-dev/components';
 export declare const TIME_OPTIONS: TimeOption[];
 interface TimeRangeControlsProps {
     heightPx?: number;
+    showRefresh?: boolean;
 }
-export declare function TimeRangeControls({ heightPx }: TimeRangeControlsProps): JSX.Element;
+export declare function TimeRangeControls({ heightPx, showRefresh }: TimeRangeControlsProps): JSX.Element;
 export {};
 //# sourceMappingURL=TimeRangeControls.d.ts.map

package/dist/components/TimeRangeControls/TimeRangeControls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeRangeControls.d.ts","sourceRoot":"","sources":["../../../src/components/TimeRangeControls/TimeRangeControls.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAoC,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAOtF,eAAO,MAAM,YAAY,EAAE,UAAU,EAUpC,CAAC;AAIF,UAAU,sBAAsB;IAE9B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,EAAE,sBAAsB,eA2BrE"}
+{"version":3,"file":"TimeRangeControls.d.ts","sourceRoot":"","sources":["../../../src/components/TimeRangeControls/TimeRangeControls.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAoC,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAOtF,eAAO,MAAM,YAAY,EAAE,UAAU,EAUpC,CAAC;AAIF,UAAU,sBAAsB;IAE9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,WAAkB,EAAE,EAAE,sBAAsB,eA8BzF"}

package/dist/components/TimeRangeControls/TimeRangeControls.js

@@ -10,8 +10,9 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import RefreshIcon from 'mdi-material-ui/Refresh';
+import { Stack } from '@mui/material';
 import { DateTimeRangePicker, InfoTooltip } from '@perses-dev/components';
 import { useTimeRange } from '@perses-dev/plugin-system';
 import { isDurationString } from '@perses-dev/core';
@@ -75,8 +76,9 @@ export const TIME_OPTIONS = [
     }
 ];
 const DEFAULT_HEIGHT = '34px';
-export function TimeRangeControls({ heightPx  }) {
+export function TimeRangeControls({ heightPx , showRefresh =true  }) {
     const { timeRange , setTimeRange , refresh  } = useTimeRange();
+    // TODO: Remove this since it couples to the dashboard context
     const defaultTimeRange = useDefaultTimeRange();
     // Convert height to a string, then use the string for styling
     const height = heightPx === undefined ? DEFAULT_HEIGHT : `${heightPx}px`;
@@ -91,7 +93,9 @@ export function TimeRangeControls({ heightPx  }) {
             });
         }
     }
-    return /*#__PURE__*/ _jsxs(_Fragment, {
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        spacing: 1,
         children: [
             /*#__PURE__*/ _jsx(DateTimeRangePicker, {
                 timeOptions: TIME_OPTIONS,
@@ -99,7 +103,7 @@ export function TimeRangeControls({ heightPx  }) {
                 onChange: setTimeRange,
                 height: height
             }),
-            /*#__PURE__*/ _jsx(InfoTooltip, {
+            showRefresh && /*#__PURE__*/ _jsx(InfoTooltip, {
                 description: TOOLTIP_TEXT.refreshDashboard,
                 children: /*#__PURE__*/ _jsx(ToolbarIconButton, {
                     "aria-label": TOOLTIP_TEXT.refreshDashboard,

package/dist/components/TimeRangeControls/TimeRangeControls.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/TimeRangeControls/TimeRangeControls.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport RefreshIcon from 'mdi-material-ui/Refresh';\nimport { DateTimeRangePicker, InfoTooltip, TimeOption } from '@perses-dev/components';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport { isDurationString } from '@perses-dev/core';\nimport { TOOLTIP_TEXT } from '../../constants';\nimport { useDefaultTimeRange } from '../../context';\nimport { ToolbarIconButton } from '../ToolbarIconButton';\n\nexport const TIME_OPTIONS: TimeOption[] = [\n  { value: { pastDuration: '5m' }, display: 'Last 5 minutes' },\n  { value: { pastDuration: '15m' }, display: 'Last 15 minutes' },\n  { value: { pastDuration: '30m' }, display: 'Last 30 minutes' },\n  { value: { pastDuration: '1h' }, display: 'Last 1 hour' },\n  { value: { pastDuration: '6h' }, display: 'Last 6 hours' },\n  { value: { pastDuration: '12h' }, display: 'Last 12 hours' },\n  { value: { pastDuration: '24h' }, display: 'Last 1 day' },\n  { value: { pastDuration: '7d' }, display: 'Last 7 days' },\n  { value: { pastDuration: '14d' }, display: 'Last 14 days' },\n];\n\nconst DEFAULT_HEIGHT = '34px';\n\ninterface TimeRangeControlsProps {\n  // The controls look best at heights >= 28 pixels\n  heightPx?: number;\n}\n\nexport function TimeRangeControls({ heightPx }: TimeRangeControlsProps) {\n  const { timeRange, setTimeRange, refresh } = useTimeRange();\n  const defaultTimeRange = useDefaultTimeRange();\n\n  // Convert height to a string, then use the string for styling\n  const height = heightPx === undefined ? DEFAULT_HEIGHT : `${heightPx}px`;\n\n  // add time shortcut if one does not match duration from dashboard JSON\n  if (!TIME_OPTIONS.some((option) => option.value.pastDuration === defaultTimeRange.pastDuration)) {\n    if (isDurationString(defaultTimeRange.pastDuration)) {\n      TIME_OPTIONS.push({\n        value: { pastDuration: defaultTimeRange.pastDuration },\n        display: `Last ${defaultTimeRange.pastDuration}`,\n      });\n    }\n  }\n\n  return (\n    <>\n      <DateTimeRangePicker timeOptions={TIME_OPTIONS} value={timeRange} onChange={setTimeRange} height={height} />\n      <InfoTooltip description={TOOLTIP_TEXT.refreshDashboard}>\n        <ToolbarIconButton aria-label={TOOLTIP_TEXT.refreshDashboard} onClick={refresh} sx={{ height }}>\n          <RefreshIcon />\n        </ToolbarIconButton>\n      </InfoTooltip>\n    </>\n  );\n}\n"],"names":["RefreshIcon","DateTimeRangePicker","InfoTooltip","useTimeRange","isDurationString","TOOLTIP_TEXT","useDefaultTimeRange","ToolbarIconButton","TIME_OPTIONS","value","pastDuration","display","DEFAULT_HEIGHT","TimeRangeControls","heightPx","timeRange","setTimeRange","refresh","defaultTimeRange","height","undefined","some","option","push","timeOptions","onChange","description","refreshDashboard","aria-label","onClick","sx"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/TimeRangeControls/TimeRangeControls.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport RefreshIcon from 'mdi-material-ui/Refresh';\nimport { Stack } from '@mui/material';\nimport { DateTimeRangePicker, InfoTooltip, TimeOption } from '@perses-dev/components';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport { isDurationString } from '@perses-dev/core';\nimport { TOOLTIP_TEXT } from '../../constants';\nimport { useDefaultTimeRange } from '../../context';\nimport { ToolbarIconButton } from '../ToolbarIconButton';\n\nexport const TIME_OPTIONS: TimeOption[] = [\n  { value: { pastDuration: '5m' }, display: 'Last 5 minutes' },\n  { value: { pastDuration: '15m' }, display: 'Last 15 minutes' },\n  { value: { pastDuration: '30m' }, display: 'Last 30 minutes' },\n  { value: { pastDuration: '1h' }, display: 'Last 1 hour' },\n  { value: { pastDuration: '6h' }, display: 'Last 6 hours' },\n  { value: { pastDuration: '12h' }, display: 'Last 12 hours' },\n  { value: { pastDuration: '24h' }, display: 'Last 1 day' },\n  { value: { pastDuration: '7d' }, display: 'Last 7 days' },\n  { value: { pastDuration: '14d' }, display: 'Last 14 days' },\n];\n\nconst DEFAULT_HEIGHT = '34px';\n\ninterface TimeRangeControlsProps {\n  // The controls look best at heights >= 28 pixels\n  heightPx?: number;\n\n  // Whether to show the refresh button or not\n  showRefresh?: boolean;\n}\n\nexport function TimeRangeControls({ heightPx, showRefresh = true }: TimeRangeControlsProps) {\n  const { timeRange, setTimeRange, refresh } = useTimeRange();\n  // TODO: Remove this since it couples to the dashboard context\n  const defaultTimeRange = useDefaultTimeRange();\n\n  // Convert height to a string, then use the string for styling\n  const height = heightPx === undefined ? DEFAULT_HEIGHT : `${heightPx}px`;\n\n  // add time shortcut if one does not match duration from dashboard JSON\n  if (!TIME_OPTIONS.some((option) => option.value.pastDuration === defaultTimeRange.pastDuration)) {\n    if (isDurationString(defaultTimeRange.pastDuration)) {\n      TIME_OPTIONS.push({\n        value: { pastDuration: defaultTimeRange.pastDuration },\n        display: `Last ${defaultTimeRange.pastDuration}`,\n      });\n    }\n  }\n\n  return (\n    <Stack direction=\"row\" spacing={1}>\n      <DateTimeRangePicker timeOptions={TIME_OPTIONS} value={timeRange} onChange={setTimeRange} height={height} />\n      {showRefresh && (\n        <InfoTooltip description={TOOLTIP_TEXT.refreshDashboard}>\n          <ToolbarIconButton aria-label={TOOLTIP_TEXT.refreshDashboard} onClick={refresh} sx={{ height }}>\n            <RefreshIcon />\n          </ToolbarIconButton>\n        </InfoTooltip>\n      )}\n    </Stack>\n  );\n}\n"],"names":["RefreshIcon","Stack","DateTimeRangePicker","InfoTooltip","useTimeRange","isDurationString","TOOLTIP_TEXT","useDefaultTimeRange","ToolbarIconButton","TIME_OPTIONS","value","pastDuration","display","DEFAULT_HEIGHT","TimeRangeControls","heightPx","showRefresh","timeRange","setTimeRange","refresh","defaultTimeRange","height","undefined","some","option","push","direction","spacing","timeOptions","onChange","description","refreshDashboard","aria-label","onClick","sx"],"mappings":"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"}

package/dist/context/DashboardProvider/DashboardProvider.js

@@ -14,7 +14,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createStore, useStore } from 'zustand';
 import { devtools } from 'zustand/middleware';
 import { immer } from 'zustand/middleware/immer';
-import shallow from 'zustand/shallow';
+import { shallow } from 'zustand/shallow';
 import { createContext, useCallback, useContext, useEffect, useState } from 'react';
 import { usePlugin, usePluginRegistry } from '@perses-dev/plugin-system';
 import { createPanelGroupEditorSlice } from './panel-group-editor-slice';

package/dist/context/DashboardProvider/DashboardProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/context/DashboardProvider/DashboardProvider.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { createStore, useStore } from 'zustand';\nimport type { StoreApi } from 'zustand';\nimport { devtools } from 'zustand/middleware';\nimport { immer } from 'zustand/middleware/immer';\nimport shallow from 'zustand/shallow';\nimport { createContext, ReactNode, useCallback, useContext, useEffect, useState } from 'react';\nimport { DashboardResource, Display, ProjectMetadata, RelativeTimeRange } from '@perses-dev/core';\nimport { usePlugin, usePluginRegistry } from '@perses-dev/plugin-system';\nimport { createPanelGroupEditorSlice, PanelGroupEditorSlice } from './panel-group-editor-slice';\nimport { convertLayoutsToPanelGroups, createPanelGroupSlice, PanelGroupSlice } from './panel-group-slice';\nimport { createPanelEditorSlice, PanelEditorSlice } from './panel-editor-slice';\nimport { createPanelSlice, PanelSlice } from './panel-slice';\nimport { createDeletePanelGroupSlice, DeletePanelGroupSlice } from './delete-panel-group-slice';\nimport { createDeletePanelSlice, DeletePanelSlice } from './delete-panel-slice';\nimport { createDiscardChangesDialogSlice, DiscardChangesConfirmationDialogSlice } from './discard-changes-dialog-slice';\nimport { createDuplicatePanelSlice, DuplicatePanelSlice } from './duplicate-panel-slice';\n\nexport interface DashboardStoreState\n  extends PanelGroupSlice,\n    PanelSlice,\n    PanelGroupEditorSlice,\n    DeletePanelGroupSlice,\n    PanelEditorSlice,\n    DeletePanelSlice,\n    DiscardChangesConfirmationDialogSlice,\n    DuplicatePanelSlice {\n  isEditMode: boolean;\n  setEditMode: (isEditMode: boolean) => void;\n  defaultTimeRange: RelativeTimeRange;\n  setDashboard: (dashboard: DashboardResource) => void;\n  metadata: ProjectMetadata;\n  display?: Display;\n}\n\nexport interface DashboardStoreProps {\n  dashboardResource: DashboardResource;\n  isEditMode?: boolean;\n}\n\nexport interface DashboardProviderProps {\n  initialState: DashboardStoreProps;\n  children?: ReactNode;\n}\n\nexport const DashboardContext = createContext<StoreApi<DashboardStoreState> | undefined>(undefined);\n\nexport function useDashboardStore<T>(selector: (state: DashboardStoreState) => T) {\n  const store = useContext(DashboardContext);\n  if (store === undefined) {\n    throw new Error('No DashboardContext found. Did you forget a Provider?');\n  }\n  return useStore(store, selector, shallow);\n}\n\nexport function DashboardProvider(props: DashboardProviderProps) {\n  const createDashboardStore = useCallback(initStore, [props]);\n\n  // load plugin to retrieve initial spec if default panel kind is defined\n  const { defaultPluginKinds } = usePluginRegistry();\n  const defaultPanelKind = defaultPluginKinds?.['Panel'] ?? '';\n  const { data: plugin } = usePlugin('Panel', defaultPanelKind);\n\n  const [store] = useState(createDashboardStore(props)); // prevent calling createDashboardStore every time it rerenders\n\n  useEffect(() => {\n    if (plugin === undefined) return;\n    const spec = plugin.createInitialOptions();\n    // set default panel kind and spec for add panel editor\n    store.setState({ initialValues: { kind: defaultPanelKind, spec } });\n  }, [plugin, store, defaultPanelKind]);\n\n  return (\n    <DashboardContext.Provider value={store as StoreApi<DashboardStoreState>}>\n      {props.children}\n    </DashboardContext.Provider>\n  );\n}\n\nfunction initStore(props: DashboardProviderProps) {\n  const {\n    initialState: { dashboardResource, isEditMode },\n  } = props;\n\n  const {\n    spec: { display, layouts, panels, duration },\n    metadata,\n  } = dashboardResource;\n  const store = createStore<DashboardStoreState>()(\n    immer(\n      devtools((...args) => {\n        const [set] = args;\n        return {\n          ...createPanelGroupSlice(layouts)(...args),\n          ...createPanelSlice(panels)(...args),\n          ...createPanelGroupEditorSlice(...args),\n          ...createDeletePanelGroupSlice(...args),\n          ...createPanelEditorSlice()(...args),\n          ...createDeletePanelSlice()(...args),\n          ...createDiscardChangesDialogSlice(...args),\n          ...createDuplicatePanelSlice()(...args),\n          metadata,\n          display,\n          defaultTimeRange: { pastDuration: duration },\n          isEditMode: !!isEditMode,\n          setEditMode: (isEditMode: boolean) => set({ isEditMode }),\n          setDashboard: ({ metadata, spec: { display, panels, layouts } }) => {\n            set((state) => {\n              state.metadata = metadata;\n              state.display = display;\n              const { panelGroups, panelGroupOrder } = convertLayoutsToPanelGroups(layouts);\n              state.panels = panels;\n              state.panelGroups = panelGroups;\n              state.panelGroupOrder = panelGroupOrder;\n            });\n          },\n        };\n      })\n    )\n  );\n\n  return store;\n}\n"],"names":["createStore","useStore","devtools","immer","shallow","createContext","useCallback","useContext","useEffect","useState","usePlugin","usePluginRegistry","createPanelGroupEditorSlice","convertLayoutsToPanelGroups","createPanelGroupSlice","createPanelEditorSlice","createPanelSlice","createDeletePanelGroupSlice","createDeletePanelSlice","createDiscardChangesDialogSlice","createDuplicatePanelSlice","DashboardContext","undefined","useDashboardStore","selector","store","Error","DashboardProvider","props","createDashboardStore","initStore","defaultPluginKinds","defaultPanelKind","data","plugin","spec","createInitialOptions","setState","initialValues","kind","Provider","value","children","initialState","dashboardResource","isEditMode","display","layouts","panels","duration","metadata","args","set","defaultTimeRange","pastDuration","setEditMode","setDashboard","state","panelGroups","panelGroupOrder"],"mappings":"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"}
+{"version":3,"sources":["../../../src/context/DashboardProvider/DashboardProvider.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { createStore, useStore } from 'zustand';\nimport type { StoreApi } from 'zustand';\nimport { devtools } from 'zustand/middleware';\nimport { immer } from 'zustand/middleware/immer';\nimport { shallow } from 'zustand/shallow';\nimport { createContext, ReactNode, useCallback, useContext, useEffect, useState } from 'react';\nimport { DashboardResource, Display, ProjectMetadata, RelativeTimeRange } from '@perses-dev/core';\nimport { usePlugin, usePluginRegistry } from '@perses-dev/plugin-system';\nimport { createPanelGroupEditorSlice, PanelGroupEditorSlice } from './panel-group-editor-slice';\nimport { convertLayoutsToPanelGroups, createPanelGroupSlice, PanelGroupSlice } from './panel-group-slice';\nimport { createPanelEditorSlice, PanelEditorSlice } from './panel-editor-slice';\nimport { createPanelSlice, PanelSlice } from './panel-slice';\nimport { createDeletePanelGroupSlice, DeletePanelGroupSlice } from './delete-panel-group-slice';\nimport { createDeletePanelSlice, DeletePanelSlice } from './delete-panel-slice';\nimport { createDiscardChangesDialogSlice, DiscardChangesConfirmationDialogSlice } from './discard-changes-dialog-slice';\nimport { createDuplicatePanelSlice, DuplicatePanelSlice } from './duplicate-panel-slice';\n\nexport interface DashboardStoreState\n  extends PanelGroupSlice,\n    PanelSlice,\n    PanelGroupEditorSlice,\n    DeletePanelGroupSlice,\n    PanelEditorSlice,\n    DeletePanelSlice,\n    DiscardChangesConfirmationDialogSlice,\n    DuplicatePanelSlice {\n  isEditMode: boolean;\n  setEditMode: (isEditMode: boolean) => void;\n  defaultTimeRange: RelativeTimeRange;\n  setDashboard: (dashboard: DashboardResource) => void;\n  metadata: ProjectMetadata;\n  display?: Display;\n}\n\nexport interface DashboardStoreProps {\n  dashboardResource: DashboardResource;\n  isEditMode?: boolean;\n}\n\nexport interface DashboardProviderProps {\n  initialState: DashboardStoreProps;\n  children?: ReactNode;\n}\n\nexport const DashboardContext = createContext<StoreApi<DashboardStoreState> | undefined>(undefined);\n\nexport function useDashboardStore<T>(selector: (state: DashboardStoreState) => T) {\n  const store = useContext(DashboardContext);\n  if (store === undefined) {\n    throw new Error('No DashboardContext found. Did you forget a Provider?');\n  }\n  return useStore(store, selector, shallow);\n}\n\nexport function DashboardProvider(props: DashboardProviderProps) {\n  const createDashboardStore = useCallback(initStore, [props]);\n\n  // load plugin to retrieve initial spec if default panel kind is defined\n  const { defaultPluginKinds } = usePluginRegistry();\n  const defaultPanelKind = defaultPluginKinds?.['Panel'] ?? '';\n  const { data: plugin } = usePlugin('Panel', defaultPanelKind);\n\n  const [store] = useState(createDashboardStore(props)); // prevent calling createDashboardStore every time it rerenders\n\n  useEffect(() => {\n    if (plugin === undefined) return;\n    const spec = plugin.createInitialOptions();\n    // set default panel kind and spec for add panel editor\n    store.setState({ initialValues: { kind: defaultPanelKind, spec } });\n  }, [plugin, store, defaultPanelKind]);\n\n  return (\n    <DashboardContext.Provider value={store as StoreApi<DashboardStoreState>}>\n      {props.children}\n    </DashboardContext.Provider>\n  );\n}\n\nfunction initStore(props: DashboardProviderProps) {\n  const {\n    initialState: { dashboardResource, isEditMode },\n  } = props;\n\n  const {\n    spec: { display, layouts, panels, duration },\n    metadata,\n  } = dashboardResource;\n  const store = createStore<DashboardStoreState>()(\n    immer(\n      devtools((...args) => {\n        const [set] = args;\n        return {\n          ...createPanelGroupSlice(layouts)(...args),\n          ...createPanelSlice(panels)(...args),\n          ...createPanelGroupEditorSlice(...args),\n          ...createDeletePanelGroupSlice(...args),\n          ...createPanelEditorSlice()(...args),\n          ...createDeletePanelSlice()(...args),\n          ...createDiscardChangesDialogSlice(...args),\n          ...createDuplicatePanelSlice()(...args),\n          metadata,\n          display,\n          defaultTimeRange: { pastDuration: duration },\n          isEditMode: !!isEditMode,\n          setEditMode: (isEditMode: boolean) => set({ isEditMode }),\n          setDashboard: ({ metadata, spec: { display, panels, layouts } }) => {\n            set((state) => {\n              state.metadata = metadata;\n              state.display = display;\n              const { panelGroups, panelGroupOrder } = convertLayoutsToPanelGroups(layouts);\n              state.panels = panels;\n              state.panelGroups = panelGroups;\n              state.panelGroupOrder = panelGroupOrder;\n            });\n          },\n        };\n      })\n    )\n  );\n\n  return store;\n}\n"],"names":["createStore","useStore","devtools","immer","shallow","createContext","useCallback","useContext","useEffect","useState","usePlugin","usePluginRegistry","createPanelGroupEditorSlice","convertLayoutsToPanelGroups","createPanelGroupSlice","createPanelEditorSlice","createPanelSlice","createDeletePanelGroupSlice","createDeletePanelSlice","createDiscardChangesDialogSlice","createDuplicatePanelSlice","DashboardContext","undefined","useDashboardStore","selector","store","Error","DashboardProvider","props","createDashboardStore","initStore","defaultPluginKinds","defaultPanelKind","data","plugin","spec","createInitialOptions","setState","initialValues","kind","Provider","value","children","initialState","dashboardResource","isEditMode","display","layouts","panels","duration","metadata","args","set","defaultTimeRange","pastDuration","setEditMode","setDashboard","state","panelGroups","panelGroupOrder"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/dashboards",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "description": "The dashboards feature in Perses",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -20,7 +20,8 @@
     "build": "concurrently \"npm:build:*\"",
     "build:cjs": "swc ./src -d dist/cjs --config-file ../.cjs.swcrc",
     "build:esm": "swc ./src -d dist --config-file ../.swcrc",
-    "build:types": "tsc --emitDeclarationOnly --declaration --preserveWatchOutput",
+    "build:types": "tsc --project tsconfig.build.json",
+    "type-check": "tsc --noEmit",
     "start": "concurrently -P \"npm:build:* -- {*}\" -- --watch",
     "test": "TZ=UTC jest",
     "test:watch": "npm run test -- --watch",
@@ -28,9 +29,9 @@
     "lint:fix": "eslint --fix src --ext .ts,.tsx"
   },
   "dependencies": {
-    "@perses-dev/components": "0.23.0",
-    "@perses-dev/core": "0.23.0",
-    "@perses-dev/plugin-system": "0.23.0",
+    "@perses-dev/components": "0.24.0",
+    "@perses-dev/core": "0.24.0",
+    "@perses-dev/plugin-system": "0.24.0",
     "@types/react-grid-layout": "^1.3.2",
     "date-fns": "^2.28.0",
     "immer": "^9.0.15",
@@ -40,7 +41,7 @@
     "use-immer": "^0.7.0",
     "use-query-params": "^2.1.1",
     "use-resize-observer": "^9.0.0",
-    "zustand": "^4.1.1"
+    "zustand": "^4.3.3"
   },
   "devDependencies": {
     "intersection-observer": "^0.12.2"

package/dist/cjs/components/Panel/Panel.test.js

@@ -1,137 +0,0 @@
-// Copyright 2023 The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-const _jsxRuntime = require("react/jsx-runtime");
-const _react = require("@testing-library/react");
-const _userEvent = /*#__PURE__*/ _interopRequireDefault(require("@testing-library/user-event"));
-const _test = require("../../test");
-const _panel = require("./Panel");
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-describe('Panel', ()=>{
-    const createTestPanel = ()=>({
-            kind: 'Panel',
-            spec: {
-                display: {
-                    name: 'Fake Panel Title',
-                    description: 'This is a fake panel'
-                },
-                plugin: {
-                    kind: 'TimeSeriesChart',
-                    spec: {}
-                }
-            }
-        });
-    // Helper to render the panel with some context set
-    const renderPanel = (definition, editHandlers)=>{
-        definition !== null && definition !== void 0 ? definition : definition = createTestPanel();
-        (0, _test.renderWithContext)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_panel.Panel, {
-            definition: definition,
-            editHandlers: editHandlers
-        }));
-    };
-    // Helper to get the panel once rendered
-    const getPanel = ()=>_react.screen.getByRole('region', {
-            name: 'Fake Panel Title'
-        });
-    it('should render panel', async ()=>{
-        renderPanel();
-        const panel = getPanel();
-        expect(panel).toBeInTheDocument();
-        // Should diplay header with panel's title
-        const header = _react.screen.getByRole('banner');
-        expect(header).toHaveTextContent('Fake Panel Title');
-        // Should display chart's content from the fake panel plugin
-        const content = _react.screen.getByRole('figure');
-        await (0, _react.waitFor)(()=>{
-            expect(content).toHaveTextContent('TimeSeriesChart panel');
-        });
-        expect(content);
-    });
-    it('shows panel description', async ()=>{
-        renderPanel();
-        const panel = getPanel();
-        // Description button should not be visible until hover on panel
-        const missingButton = _react.screen.queryByRole('button', {
-            name: /description/i
-        });
-        expect(missingButton).not.toBeInTheDocument();
-        _userEvent.default.hover(panel);
-        const descriptionButton = _react.screen.getByRole('button', {
-            name: /description/i
-        });
-        expect(descriptionButton).toBeInTheDocument();
-        // Can hover to see panel description in tooltip
-        _userEvent.default.hover(descriptionButton);
-        const tooltip = await _react.screen.findByRole('tooltip');
-        expect(tooltip).toHaveTextContent('This is a fake panel');
-    });
-    it('does not show description when panel does not have one', ()=>{
-        // Render a panel without a description set
-        const withoutDescription = createTestPanel();
-        withoutDescription.spec.display.description = undefined;
-        renderPanel(withoutDescription);
-        const panel = getPanel();
-        _userEvent.default.hover(panel);
-        const descriptionButton = _react.screen.queryByRole('button', {
-            name: /description/i
-        });
-        expect(descriptionButton).not.toBeInTheDocument();
-    });
-    it('does not show description in edit mode', ()=>{
-        renderPanel(undefined, {
-            onEditPanelClick: jest.fn(),
-            onDeletePanelClick: jest.fn(),
-            onDuplicatePanelClick: jest.fn()
-        });
-        const panel = getPanel();
-        _userEvent.default.hover(panel);
-        const descriptionButton = _react.screen.queryByRole('button', {
-            name: /description/i
-        });
-        expect(descriptionButton).not.toBeInTheDocument();
-    });
-    it('can trigger panel actions in edit mode', ()=>{
-        const onEditPanelClick = jest.fn();
-        const onDeletePanelClick = jest.fn();
-        const onDuplicatePanelClick = jest.fn();
-        renderPanel(undefined, {
-            onEditPanelClick,
-            onDeletePanelClick,
-            onDuplicatePanelClick
-        });
-        const panel = getPanel();
-        _userEvent.default.hover(panel);
-        const editButton = _react.screen.getByRole('button', {
-            name: /edit/i
-        });
-        _userEvent.default.click(editButton);
-        const deleteButton = _react.screen.getByRole('button', {
-            name: /delete/i
-        });
-        _userEvent.default.click(deleteButton);
-        const duplicateButton = _react.screen.getByRole('button', {
-            name: /duplicate/i
-        });
-        _userEvent.default.click(duplicateButton);
-        expect(onEditPanelClick).toHaveBeenCalledTimes(1);
-        expect(onDeletePanelClick).toHaveBeenCalledTimes(1);
-        expect(onDuplicatePanelClick).toHaveBeenCalledTimes(1);
-    });
-});

package/dist/cjs/components/PanelDrawer/PanelDrawer.test.js

@@ -1,131 +0,0 @@
-// Copyright 2023 The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-const _jsxRuntime = require("react/jsx-runtime");
-const _react = require("@testing-library/react");
-const _userEvent = /*#__PURE__*/ _interopRequireDefault(require("@testing-library/user-event"));
-const _testUtils = require("react-dom/test-utils");
-const _test = require("../../test");
-const _dashboardProvider = require("../../context/DashboardProvider");
-const _panelDrawer = require("./PanelDrawer");
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-describe('Panel Drawer', ()=>{
-    const renderPanelDrawer = ()=>{
-        const { store , DashboardProviderSpy  } = (0, _test.createDashboardProviderSpy)();
-        (0, _test.renderWithContext)(/*#__PURE__*/ (0, _jsxRuntime.jsxs)(_dashboardProvider.DashboardProvider, {
-            initialState: {
-                dashboardResource: (0, _test.getTestDashboard)(),
-                isEditMode: true
-            },
-            children: [
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(DashboardProviderSpy, {}),
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelDrawer.PanelDrawer, {})
-            ]
-        }));
-        const { value: storeApi  } = store;
-        if (storeApi === undefined) {
-            throw new Error('Expected dashboard store to be set after initial render');
-        }
-        return storeApi;
-    };
-    it('should add new panel', async ()=>{
-        const storeApi = renderPanelDrawer();
-        // Open the drawer for a new panel
-        (0, _testUtils.act)(()=>storeApi.getState().openAddPanel());
-        const nameInput = await _react.screen.findByLabelText(/Name/);
-        _userEvent.default.type(nameInput, 'New Panel');
-        _userEvent.default.click(_react.screen.getByText('Add'));
-        // TODO: Assert drawer is closed?
-        const panels = storeApi.getState().panels;
-        expect(panels).toMatchObject({
-            // Should have the new panel in the store
-            NewPanel: {
-                kind: 'Panel',
-                spec: {
-                    display: {
-                        name: 'New Panel'
-                    },
-                    plugin: {
-                        kind: '',
-                        spec: {}
-                    }
-                }
-            }
-        });
-    });
-    it('should add panel with duplicate panel name', async ()=>{
-        const storeApi = renderPanelDrawer();
-        (0, _testUtils.act)(()=>storeApi.getState().openAddPanel());
-        const nameInput = await _react.screen.findByLabelText(/Name/);
-        _userEvent.default.type(nameInput, 'cpu');
-        _userEvent.default.click(_react.screen.getByText('Add'));
-        const panels = storeApi.getState().panels;
-        expect(panels).toMatchObject({
-            // make sure we don't have duplicate panel key by appending "-1"
-            'cpu-1': {
-                kind: 'Panel',
-                spec: {
-                    display: {
-                        name: 'cpu'
-                    },
-                    plugin: {
-                        kind: '',
-                        spec: {}
-                    }
-                }
-            }
-        });
-    });
-    it('should edit an existing panel', async ()=>{
-        const storeApi = renderPanelDrawer();
-        // Open the drawer for an existing panel
-        const group = Object.values(storeApi.getState().panelGroups).find((group)=>group.title === 'CPU Stats');
-        if (group === undefined) {
-            throw new Error('Test group not found');
-        }
-        const layout = Object.entries(group.itemPanelKeys).find(([, panelKey])=>panelKey === 'cpu');
-        if (layout === undefined) {
-            throw new Error('Test panel not found');
-        }
-        (0, _testUtils.act)(()=>storeApi.getState().openEditPanel({
-                panelGroupId: group.id,
-                panelGroupItemLayoutId: layout[0]
-            }));
-        const nameInput = await _react.screen.findByLabelText(/Name/);
-        _userEvent.default.clear(nameInput);
-        _userEvent.default.type(nameInput, 'cpu usage');
-        _userEvent.default.click(_react.screen.getByText('Apply'));
-        const panels = storeApi.getState().panels;
-        expect(panels).toMatchObject({
-            cpu: {
-                kind: 'Panel',
-                spec: {
-                    display: {
-                        name: 'cpu usage'
-                    },
-                    plugin: {
-                        kind: 'TimeSeriesChart',
-                        spec: {}
-                    }
-                }
-            }
-        });
-    });
-});

package/dist/cjs/components/PanelGroupDialog/PanelGroupDialog.test.js

@@ -1,87 +0,0 @@
-// Copyright 2023 The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-const _jsxRuntime = require("react/jsx-runtime");
-const _react = require("@testing-library/react");
-const _userEvent = /*#__PURE__*/ _interopRequireDefault(require("@testing-library/user-event"));
-const _testUtils = require("react-dom/test-utils");
-const _context = require("../../context");
-const _test = require("../../test");
-const _panelGroupDialog = require("./PanelGroupDialog");
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-describe('Add Panel Group', ()=>{
-    const renderDialog = ()=>{
-        const { store , DashboardProviderSpy  } = (0, _test.createDashboardProviderSpy)();
-        (0, _test.renderWithContext)(/*#__PURE__*/ (0, _jsxRuntime.jsxs)(_context.DashboardProvider, {
-            initialState: {
-                dashboardResource: (0, _test.getTestDashboard)(),
-                isEditMode: true
-            },
-            children: [
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(DashboardProviderSpy, {}),
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelGroupDialog.PanelGroupDialog, {})
-            ]
-        }));
-        const { value: storeApi  } = store;
-        if (storeApi === undefined) {
-            throw new Error('Expected dashboard store to be set after initial render');
-        }
-        return storeApi;
-    };
-    it('should add new panel group', async ()=>{
-        const storeApi = renderDialog();
-        // Open the dialog for a new panel group
-        (0, _testUtils.act)(()=>storeApi.getState().openAddPanelGroup());
-        const nameInput = await _react.screen.findByLabelText(/Name/);
-        _userEvent.default.type(nameInput, 'New Panel Group');
-        _userEvent.default.click(_react.screen.getByText('Add'));
-        // TODO: Figure out how to test this without coupling to the store state
-        const panelGroups = Object.values(storeApi.getState().panelGroups);
-        expect(panelGroups).toContainEqual({
-            id: expect.any(Number),
-            title: 'New Panel Group',
-            isCollapsed: false,
-            itemLayouts: expect.any(Array),
-            itemPanelKeys: expect.any(Object)
-        });
-    });
-    it('should edit existing panel group', async ()=>{
-        const storeApi = renderDialog();
-        // Open the dialog for an existing panel group
-        const group = Object.values(storeApi.getState().panelGroups).find((group)=>group.title === 'CPU Stats');
-        if (group === undefined) {
-            throw new Error('Missing test group');
-        }
-        (0, _testUtils.act)(()=>storeApi.getState().openEditPanelGroup(group.id));
-        const nameInput = await _react.screen.findByLabelText(/Name/);
-        _userEvent.default.clear(nameInput);
-        _userEvent.default.type(nameInput, 'New Name');
-        _userEvent.default.click(_react.screen.getByText('Apply'));
-        // TODO: Figure out how to test this without coupling to the store state
-        const panelGroups = storeApi.getState().panelGroups;
-        expect(panelGroups).toMatchObject({
-            [group.id]: {
-                id: group.id,
-                title: 'New Name',
-                isCollapsed: false
-            }
-        });
-    });
-});