@perses-dev/dashboards 0.9.0 → 0.11.0

package/dist/utils/time-range-params.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/time-range-params.ts"],"sourcesContent":["// Copyright 2022 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 { useMemo, useCallback, useState } from 'react';\nimport { useQueryParams, QueryParamConfig } from 'use-query-params';\nimport { getUnixTime, isDate } from 'date-fns';\nimport {\n  TimeRangeValue,\n  isRelativeTimeRange,\n  isDurationString,\n  DurationString,\n  AbsoluteTimeRange,\n} from '@perses-dev/core';\nimport { TimeRange } from '@perses-dev/plugin-system';\n\nexport type TimeOptionValue = Date | DurationString | null | undefined;\n\n/* Interprets an encoded string and returns either the string or null/undefined if not available */\nfunction getEncodedValue(\n  input: string | Array<string | null> | null | undefined,\n  allowEmptyString?: boolean\n): string | null | undefined {\n  if (input == null) {\n    return input;\n  }\n  // '' or []\n  if (input.length === 0 && (!allowEmptyString || (allowEmptyString && input !== ''))) {\n    return null;\n  }\n\n  const str = input instanceof Array ? input[0] : input;\n  if (str == null) {\n    return str;\n  }\n  if (!allowEmptyString && str === '') {\n    return null;\n  }\n\n  return str;\n}\n\n/* Encodes individual TimeRangeValue as a string, depends on whether start is relative or absolute */\nexport function encodeTimeRangeValue(timeOptionValue: TimeOptionValue): string | null | undefined {\n  if (!timeOptionValue) {\n    return timeOptionValue;\n  }\n\n  if (typeof timeOptionValue === 'string') {\n    if (isDurationString(timeOptionValue)) {\n      return timeOptionValue;\n    }\n  }\n  return (getUnixTime(timeOptionValue) * 1000).toString();\n}\n\n/* Converts param input to supported relative or absolute time range format */\nexport function decodeTimeRangeValue(\n  input: string | Array<string | null> | null | undefined\n): Date | DurationString | null | undefined {\n  const paramString = getEncodedValue(input);\n  if (paramString == null) return paramString;\n  return isDurationString(paramString) ? paramString : new Date(Number(paramString));\n}\n\n/**\n * Custom TimeRangeValue param type\n * See: https://github.com/pbeshai/use-query-params/tree/master/packages/serialize-query-params#param-types\n */\nexport const TimeRangeParam: QueryParamConfig<TimeOptionValue, TimeOptionValue> = {\n  encode: encodeTimeRangeValue,\n  decode: decodeTimeRangeValue,\n  equals: (valueA: TimeOptionValue, valueB: TimeOptionValue) => {\n    if (valueA === valueB) return true;\n    if (valueA == null || valueB == null) return valueA === valueB;\n    return valueA.valueOf() === valueB.valueOf();\n  },\n};\n\nexport const timeRangeQueryConfig = {\n  start: TimeRangeParam,\n  end: TimeRangeParam,\n};\n\n/**\n * Gets the initial time range taking into account URL params and dashboard JSON duration\n * Sets start query param if it is empty on page load\n */\nexport function useInitialTimeRange(dashboardDuration: DurationString): TimeRangeValue {\n  const [query] = useQueryParams(timeRangeQueryConfig);\n  const { start, end } = query;\n  return useMemo(() => {\n    let initialTimeRange: TimeRangeValue = { pastDuration: dashboardDuration };\n    if (!start) {\n      return initialTimeRange;\n    }\n    const startStr = start.toString();\n    if (isDurationString(startStr)) {\n      initialTimeRange = { pastDuration: startStr };\n    } else if (isDate(start) && isDate(end)) {\n      initialTimeRange = { start: start, end: end } as AbsoluteTimeRange;\n    }\n    return initialTimeRange;\n  }, [start, end, dashboardDuration]);\n}\n\n/**\n * Returns time range getter and setter, set paramsEnabled to false to disable query string serialization\n */\nexport function useSetTimeRangeParams(initialTimeRange: TimeRangeValue, paramsEnabled = true): TimeRange {\n  const [query, setQuery] = useQueryParams(timeRangeQueryConfig);\n\n  // fallback when app does not want query string as source of truth\n  const [timeRangeState, setTimeRangeState] = useState<TimeRangeValue>(initialTimeRange);\n\n  const { start } = query;\n\n  // set start param on page load if empty\n  if (paramsEnabled && !start) {\n    if (isRelativeTimeRange(initialTimeRange)) {\n      setQuery({ start: initialTimeRange.pastDuration, end: undefined });\n    }\n  }\n\n  const setTimeRange: TimeRange['setTimeRange'] = useCallback(\n    (value: TimeRangeValue) => {\n      if (isRelativeTimeRange(value)) {\n        setQuery({ start: value.pastDuration, end: undefined });\n      } else {\n        setQuery(value);\n      }\n    },\n    [setQuery]\n  );\n\n  if (!paramsEnabled) {\n    return { timeRange: timeRangeState, setTimeRange: setTimeRangeState };\n  }\n  return { timeRange: initialTimeRange, setTimeRange: setTimeRange };\n}\n"],"names":["useMemo","useCallback","useState","useQueryParams","getUnixTime","isDate","isRelativeTimeRange","isDurationString","getEncodedValue","input","allowEmptyString","length","str","Array","encodeTimeRangeValue","timeOptionValue","toString","decodeTimeRangeValue","paramString","Date","Number","TimeRangeParam","encode","decode","equals","valueA","valueB","valueOf","timeRangeQueryConfig","start","end","useInitialTimeRange","dashboardDuration","query","initialTimeRange","pastDuration","startStr","useSetTimeRangeParams","paramsEnabled","setQuery","timeRangeState","setTimeRangeState","undefined","setTimeRange","value","timeRange"],"mappings":"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"}

package/dist/views/ViewDashboard/DashboardApp.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardApp.d.ts","sourceRoot":"","sources":["../../../src/views/ViewDashboard/DashboardApp.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAMrD,MAAM,WAAW,iBAAiB;IAChC,iBAAiB,EAAE,iBAAiB,CAAC;CACtC;AAED,eAAO,MAAM,YAAY,UAAW,iBAAiB,gBAyBpD,CAAC"}
+{"version":3,"file":"DashboardApp.d.ts","sourceRoot":"","sources":["../../../src/views/ViewDashboard/DashboardApp.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAKrD,MAAM,WAAW,iBAAiB;IAChC,iBAAiB,EAAE,iBAAiB,CAAC;CACtC;AAED,eAAO,MAAM,YAAY,UAAW,iBAAiB,gBAyBpD,CAAC"}

package/dist/views/ViewDashboard/DashboardApp.js

@@ -13,14 +13,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { ErrorAlert, ErrorBoundary } from '@perses-dev/components';
-import { PanelDrawer, Dashboard } from '../../components';
-import PanelGroupDialog from '../../components/PanelGroupDialog/PanelGroupDialog';
+import { PanelDrawer, Dashboard, PanelGroupDialog, DeletePanelGroupDialog } from '../../components';
 import { DashboardToolbar } from '../../components/DashboardToolbar';
-import { useDashboard, useDashboardApp } from '../../context';
+import DeletePanelDialog from '../../components/Panel/DeletePanelDialog';
 export const DashboardApp = (props)=>{
     const { dashboardResource  } = props;
-    const { dashboard  } = useDashboard();
-    const { panelGroupDialog  } = useDashboardApp();
     return /*#__PURE__*/ _jsxs(Box, {
         sx: {
             padding: (theme)=>theme.spacing(1, 0),
@@ -41,12 +38,12 @@ export const DashboardApp = (props)=>{
                 children: [
                     /*#__PURE__*/ _jsx(ErrorBoundary, {
                         FallbackComponent: ErrorAlert,
-                        children: /*#__PURE__*/ _jsx(Dashboard, {
-                            spec: dashboard
-                        })
+                        children: /*#__PURE__*/ _jsx(Dashboard, {})
                     }),
                     /*#__PURE__*/ _jsx(PanelDrawer, {}),
-                    panelGroupDialog && /*#__PURE__*/ _jsx(PanelGroupDialog, {})
+                    /*#__PURE__*/ _jsx(PanelGroupDialog, {}),
+                    /*#__PURE__*/ _jsx(DeletePanelGroupDialog, {}),
+                    /*#__PURE__*/ _jsx(DeletePanelDialog, {})
                 ]
             })
         ]

package/dist/views/ViewDashboard/DashboardApp.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/views/ViewDashboard/DashboardApp.tsx"],"sourcesContent":["// Copyright 2022 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 { Box } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { DashboardResource } from '@perses-dev/core';\nimport { PanelDrawer, Dashboard } from '../../components';\nimport PanelGroupDialog from '../../components/PanelGroupDialog/PanelGroupDialog';\nimport { DashboardToolbar } from '../../components/DashboardToolbar';\nimport { useDashboard, useDashboardApp } from '../../context';\n\nexport interface DashboardAppProps {\n  dashboardResource: DashboardResource;\n}\n\nexport const DashboardApp = (props: DashboardAppProps) => {\n  const { dashboardResource } = props;\n  const { dashboard } = useDashboard();\n  const { panelGroupDialog } = useDashboardApp();\n  return (\n    <Box\n      sx={{\n        padding: (theme) => theme.spacing(1, 0),\n        flexGrow: 1,\n        overflowX: 'hidden',\n        overflowY: 'auto',\n        display: 'flex',\n        flexDirection: 'column',\n      }}\n    >\n      <DashboardToolbar dashboardName={dashboardResource.metadata.name} />\n      <Box sx={{ padding: (theme) => theme.spacing(2) }}>\n        <ErrorBoundary FallbackComponent={ErrorAlert}>\n          <Dashboard spec={dashboard} />\n        </ErrorBoundary>\n        <PanelDrawer />\n        {panelGroupDialog && <PanelGroupDialog />}\n      </Box>\n    </Box>\n  );\n};\n"],"names":["Box","ErrorAlert","ErrorBoundary","PanelDrawer","Dashboard","PanelGroupDialog","DashboardToolbar","useDashboard","useDashboardApp","DashboardApp","props","dashboardResource","dashboard","panelGroupDialog","sx","padding","theme","spacing","flexGrow","overflowX","overflowY","display","flexDirection","dashboardName","metadata","name","FallbackComponent","spec"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,GAAG,QAAQ,eAAe,CAAC;AACpC,SAASC,UAAU,EAAEC,aAAa,QAAQ,wBAAwB,CAAC;AAEnE,SAASC,WAAW,EAAEC,SAAS,QAAQ,kBAAkB,CAAC;AAC1D,OAAOC,gBAAgB,MAAM,oDAAoD,CAAC;AAClF,SAASC,gBAAgB,QAAQ,mCAAmC,CAAC;AACrE,SAASC,YAAY,EAAEC,eAAe,QAAQ,eAAe,CAAC;AAM9D,OAAO,MAAMC,YAAY,GAAG,CAACC,KAAwB,GAAK;IACxD,MAAM,EAAEC,iBAAiB,CAAA,EAAE,GAAGD,KAAK,AAAC;IACpC,MAAM,EAAEE,SAAS,CAAA,EAAE,GAAGL,YAAY,EAAE,AAAC;IACrC,MAAM,EAAEM,gBAAgB,CAAA,EAAE,GAAGL,eAAe,EAAE,AAAC;IAC/C,qBACE,MAACR,GAAG;QACFc,EAAE,EAAE;YACFC,OAAO,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC;YACvCC,QAAQ,EAAE,CAAC;YACXC,SAAS,EAAE,QAAQ;YACnBC,SAAS,EAAE,MAAM;YACjBC,OAAO,EAAE,MAAM;YACfC,aAAa,EAAE,QAAQ;SACxB;;0BAED,KAAChB,gBAAgB;gBAACiB,aAAa,EAAEZ,iBAAiB,CAACa,QAAQ,CAACC,IAAI;cAAI;0BACpE,MAACzB,GAAG;gBAACc,EAAE,EAAE;oBAAEC,OAAO,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAAC,CAAC,CAAC;iBAAE;;kCAC/C,KAACf,aAAa;wBAACwB,iBAAiB,EAAEzB,UAAU;kCAC1C,cAAA,KAACG,SAAS;4BAACuB,IAAI,EAAEf,SAAS;0BAAI;sBAChB;kCAChB,KAACT,WAAW,KAAG;oBACdU,gBAAgB,kBAAI,KAACR,gBAAgB,KAAG;;cACrC;;MACF,CACN;AACJ,CAAC,CAAC"}
+{"version":3,"sources":["../../../src/views/ViewDashboard/DashboardApp.tsx"],"sourcesContent":["// Copyright 2022 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 { Box } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { DashboardResource } from '@perses-dev/core';\nimport { PanelDrawer, Dashboard, PanelGroupDialog, DeletePanelGroupDialog } from '../../components';\nimport { DashboardToolbar } from '../../components/DashboardToolbar';\nimport DeletePanelDialog from '../../components/Panel/DeletePanelDialog';\n\nexport interface DashboardAppProps {\n  dashboardResource: DashboardResource;\n}\n\nexport const DashboardApp = (props: DashboardAppProps) => {\n  const { dashboardResource } = props;\n  return (\n    <Box\n      sx={{\n        padding: (theme) => theme.spacing(1, 0),\n        flexGrow: 1,\n        overflowX: 'hidden',\n        overflowY: 'auto',\n        display: 'flex',\n        flexDirection: 'column',\n      }}\n    >\n      <DashboardToolbar dashboardName={dashboardResource.metadata.name} />\n      <Box sx={{ padding: (theme) => theme.spacing(2) }}>\n        <ErrorBoundary FallbackComponent={ErrorAlert}>\n          <Dashboard />\n        </ErrorBoundary>\n        <PanelDrawer />\n        <PanelGroupDialog />\n        <DeletePanelGroupDialog />\n        <DeletePanelDialog />\n      </Box>\n    </Box>\n  );\n};\n"],"names":["Box","ErrorAlert","ErrorBoundary","PanelDrawer","Dashboard","PanelGroupDialog","DeletePanelGroupDialog","DashboardToolbar","DeletePanelDialog","DashboardApp","props","dashboardResource","sx","padding","theme","spacing","flexGrow","overflowX","overflowY","display","flexDirection","dashboardName","metadata","name","FallbackComponent"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,GAAG,QAAQ,eAAe,CAAC;AACpC,SAASC,UAAU,EAAEC,aAAa,QAAQ,wBAAwB,CAAC;AAEnE,SAASC,WAAW,EAAEC,SAAS,EAAEC,gBAAgB,EAAEC,sBAAsB,QAAQ,kBAAkB,CAAC;AACpG,SAASC,gBAAgB,QAAQ,mCAAmC,CAAC;AACrE,OAAOC,iBAAiB,MAAM,0CAA0C,CAAC;AAMzE,OAAO,MAAMC,YAAY,GAAG,CAACC,KAAwB,GAAK;IACxD,MAAM,EAAEC,iBAAiB,CAAA,EAAE,GAAGD,KAAK,AAAC;IACpC,qBACE,MAACV,GAAG;QACFY,EAAE,EAAE;YACFC,OAAO,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC;YACvCC,QAAQ,EAAE,CAAC;YACXC,SAAS,EAAE,QAAQ;YACnBC,SAAS,EAAE,MAAM;YACjBC,OAAO,EAAE,MAAM;YACfC,aAAa,EAAE,QAAQ;SACxB;;0BAED,KAACb,gBAAgB;gBAACc,aAAa,EAAEV,iBAAiB,CAACW,QAAQ,CAACC,IAAI;cAAI;0BACpE,MAACvB,GAAG;gBAACY,EAAE,EAAE;oBAAEC,OAAO,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAAC,CAAC,CAAC;iBAAE;;kCAC/C,KAACb,aAAa;wBAACsB,iBAAiB,EAAEvB,UAAU;kCAC1C,cAAA,KAACG,SAAS,KAAG;sBACC;kCAChB,KAACD,WAAW,KAAG;kCACf,KAACE,gBAAgB,KAAG;kCACpB,KAACC,sBAAsB,KAAG;kCAC1B,KAACE,iBAAiB,KAAG;;cACjB;;MACF,CACN;AACJ,CAAC,CAAC"}

package/dist/views/ViewDashboard/ViewDashboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ViewDashboard.d.ts","sourceRoot":"","sources":["../../../src/views/ViewDashboard/ViewDashboard.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAuB,MAAM,kBAAkB,CAAC;AAG1E,OAAO,EAIL,4BAA4B,EAE7B,MAAM,eAAe,CAAC;AAGvB,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC;IACpE,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,aAAa,EAAE,4BAA4B,CAAC,eAAe,CAAC,CAAC;CAC9D;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eA8CtD"}
+{"version":3,"file":"ViewDashboard.d.ts","sourceRoot":"","sources":["../../../src/views/ViewDashboard/ViewDashboard.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAErD,OAAO,EAIL,4BAA4B,EAE7B,MAAM,eAAe,CAAC;AAIvB,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC;IACpE,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,aAAa,EAAE,4BAA4B,CAAC,eAAe,CAAC,CAAC;CAC9D;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eAkCtD"}

package/dist/views/ViewDashboard/ViewDashboard.js

@@ -11,38 +11,20 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect } from 'react';
 import { Box } from '@mui/material';
-import { getDefaultTimeRange } from '@perses-dev/core';
-import { useQueryString } from '@perses-dev/plugin-system';
 import { ErrorBoundary, ErrorAlert, combineSx } from '@perses-dev/components';
 import { TimeRangeProvider, TemplateVariableProvider, DashboardProvider, DatasourceStoreProvider } from '../../context';
+import { useInitialTimeRange, useSetTimeRangeParams } from '../../utils';
 import { DashboardApp } from './DashboardApp';
 /**
  * The View for displaying a Dashboard, along with the UI for selecting variable values.
  */ export function ViewDashboard(props) {
     const { dashboardResource , datasourceApi , sx , ...others } = props;
     const { spec  } = dashboardResource;
-    const { queryString , setQueryString  } = useQueryString();
     var _duration;
     const dashboardDuration = (_duration = spec.duration) !== null && _duration !== void 0 ? _duration : '1h';
-    const defaultTimeRange = getDefaultTimeRange(dashboardDuration, queryString);
-    // TODO: add reusable sync query string or no-op util
-    useEffect(()=>{
-        const currentParams = Object.fromEntries([
-            ...queryString
-        ]);
-        // if app does not provide query string implementation, setTimeRange is used instead
-        if (!currentParams.start && setQueryString) {
-            // default to duration in dashboard definition if start param is not already set
-            queryString.set('start', dashboardDuration);
-            setQueryString(queryString);
-        }
-    }, [
-        dashboardDuration,
-        queryString,
-        setQueryString
-    ]);
+    const initialTimeRange = useInitialTimeRange(dashboardDuration);
+    const { timeRange , setTimeRange  } = useSetTimeRangeParams(initialTimeRange, true);
     return /*#__PURE__*/ _jsx(DatasourceStoreProvider, {
         dashboardResource: dashboardResource,
         datasourceApi: datasourceApi,
@@ -51,7 +33,8 @@ import { DashboardApp } from './DashboardApp';
                 dashboardSpec: spec
             },
             children: /*#__PURE__*/ _jsx(TimeRangeProvider, {
-                initialTimeRange: defaultTimeRange,
+                timeRange: timeRange,
+                setTimeRange: setTimeRange,
                 children: /*#__PURE__*/ _jsx(TemplateVariableProvider, {
                     initialVariableDefinitions: spec.variables,
                     children: /*#__PURE__*/ _jsx(Box, {

package/dist/views/ViewDashboard/ViewDashboard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/views/ViewDashboard/ViewDashboard.tsx"],"sourcesContent":["// Copyright 2022 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 { useEffect } from 'react';\nimport { Box, BoxProps } from '@mui/material';\nimport { DashboardResource, getDefaultTimeRange } from '@perses-dev/core';\nimport { useQueryString } from '@perses-dev/plugin-system';\nimport { ErrorBoundary, ErrorAlert, combineSx } from '@perses-dev/components';\nimport {\n  TimeRangeProvider,\n  TemplateVariableProvider,\n  DashboardProvider,\n  DatasourceStoreProviderProps,\n  DatasourceStoreProvider,\n} from '../../context';\nimport { DashboardApp } from './DashboardApp';\n\nexport interface ViewDashboardProps extends Omit<BoxProps, 'children'> {\n  dashboardResource: DashboardResource;\n  datasourceApi: DatasourceStoreProviderProps['datasourceApi'];\n}\n\n/**\n * The View for displaying a Dashboard, along with the UI for selecting variable values.\n */\nexport function ViewDashboard(props: ViewDashboardProps) {\n  const { dashboardResource, datasourceApi, sx, ...others } = props;\n  const { spec } = dashboardResource;\n\n  const { queryString, setQueryString } = useQueryString();\n  const dashboardDuration = spec.duration ?? '1h';\n  const defaultTimeRange = getDefaultTimeRange(dashboardDuration, queryString);\n\n  // TODO: add reusable sync query string or no-op util\n  useEffect(() => {\n    const currentParams = Object.fromEntries([...queryString]);\n    // if app does not provide query string implementation, setTimeRange is used instead\n    if (!currentParams.start && setQueryString) {\n      // default to duration in dashboard definition if start param is not already set\n      queryString.set('start', dashboardDuration);\n      setQueryString(queryString);\n    }\n  }, [dashboardDuration, queryString, setQueryString]);\n\n  return (\n    <DatasourceStoreProvider dashboardResource={dashboardResource} datasourceApi={datasourceApi}>\n      <DashboardProvider initialState={{ dashboardSpec: spec }}>\n        <TimeRangeProvider initialTimeRange={defaultTimeRange}>\n          <TemplateVariableProvider initialVariableDefinitions={spec.variables}>\n            <Box\n              sx={combineSx(\n                {\n                  display: 'flex',\n                  width: '100%',\n                  height: '100%',\n                  position: 'relative',\n                  overflow: 'hidden',\n                },\n                sx\n              )}\n              {...others}\n            >\n              <ErrorBoundary FallbackComponent={ErrorAlert}>\n                <DashboardApp dashboardResource={dashboardResource} />\n              </ErrorBoundary>\n            </Box>\n          </TemplateVariableProvider>\n        </TimeRangeProvider>\n      </DashboardProvider>\n    </DatasourceStoreProvider>\n  );\n}\n"],"names":["useEffect","Box","getDefaultTimeRange","useQueryString","ErrorBoundary","ErrorAlert","combineSx","TimeRangeProvider","TemplateVariableProvider","DashboardProvider","DatasourceStoreProvider","DashboardApp","ViewDashboard","props","dashboardResource","datasourceApi","sx","others","spec","queryString","setQueryString","dashboardDuration","duration","defaultTimeRange","currentParams","Object","fromEntries","start","set","initialState","dashboardSpec","initialTimeRange","initialVariableDefinitions","variables","display","width","height","position","overflow","FallbackComponent"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,SAAS,QAAQ,OAAO,CAAC;AAClC,SAASC,GAAG,QAAkB,eAAe,CAAC;AAC9C,SAA4BC,mBAAmB,QAAQ,kBAAkB,CAAC;AAC1E,SAASC,cAAc,QAAQ,2BAA2B,CAAC;AAC3D,SAASC,aAAa,EAAEC,UAAU,EAAEC,SAAS,QAAQ,wBAAwB,CAAC;AAC9E,SACEC,iBAAiB,EACjBC,wBAAwB,EACxBC,iBAAiB,EAEjBC,uBAAuB,QAClB,eAAe,CAAC;AACvB,SAASC,YAAY,QAAQ,gBAAgB,CAAC;AAO9C;;CAEC,GACD,OAAO,SAASC,aAAa,CAACC,KAAyB,EAAE;IACvD,MAAM,EAAEC,iBAAiB,CAAA,EAAEC,aAAa,CAAA,EAAEC,EAAE,CAAA,EAAE,GAAGC,MAAM,EAAE,GAAGJ,KAAK,AAAC;IAClE,MAAM,EAAEK,IAAI,CAAA,EAAE,GAAGJ,iBAAiB,AAAC;IAEnC,MAAM,EAAEK,WAAW,CAAA,EAAEC,cAAc,CAAA,EAAE,GAAGjB,cAAc,EAAE,AAAC;QAC/Be,SAAa;IAAvC,MAAMG,iBAAiB,GAAGH,CAAAA,SAAa,GAAbA,IAAI,CAACI,QAAQ,cAAbJ,SAAa,cAAbA,SAAa,GAAI,IAAI,AAAC;IAChD,MAAMK,gBAAgB,GAAGrB,mBAAmB,CAACmB,iBAAiB,EAAEF,WAAW,CAAC,AAAC;IAE7E,qDAAqD;IACrDnB,SAAS,CAAC,IAAM;QACd,MAAMwB,aAAa,GAAGC,MAAM,CAACC,WAAW,CAAC;eAAIP,WAAW;SAAC,CAAC,AAAC;QAC3D,oFAAoF;QACpF,IAAI,CAACK,aAAa,CAACG,KAAK,IAAIP,cAAc,EAAE;YAC1C,gFAAgF;YAChFD,WAAW,CAACS,GAAG,CAAC,OAAO,EAAEP,iBAAiB,CAAC,CAAC;YAC5CD,cAAc,CAACD,WAAW,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC,EAAE;QAACE,iBAAiB;QAAEF,WAAW;QAAEC,cAAc;KAAC,CAAC,CAAC;IAErD,qBACE,KAACV,uBAAuB;QAACI,iBAAiB,EAAEA,iBAAiB;QAAEC,aAAa,EAAEA,aAAa;kBACzF,cAAA,KAACN,iBAAiB;YAACoB,YAAY,EAAE;gBAAEC,aAAa,EAAEZ,IAAI;aAAE;sBACtD,cAAA,KAACX,iBAAiB;gBAACwB,gBAAgB,EAAER,gBAAgB;0BACnD,cAAA,KAACf,wBAAwB;oBAACwB,0BAA0B,EAAEd,IAAI,CAACe,SAAS;8BAClE,cAAA,KAAChC,GAAG;wBACFe,EAAE,EAAEV,SAAS,CACX;4BACE4B,OAAO,EAAE,MAAM;4BACfC,KAAK,EAAE,MAAM;4BACbC,MAAM,EAAE,MAAM;4BACdC,QAAQ,EAAE,UAAU;4BACpBC,QAAQ,EAAE,QAAQ;yBACnB,EACDtB,EAAE,CACH;wBACA,GAAGC,MAAM;kCAEV,cAAA,KAACb,aAAa;4BAACmC,iBAAiB,EAAElC,UAAU;sCAC1C,cAAA,KAACM,YAAY;gCAACG,iBAAiB,EAAEA,iBAAiB;8BAAI;0BACxC;sBACZ;kBACmB;cACT;UACF;MACI,CAC1B;AACJ,CAAC"}
+{"version":3,"sources":["../../../src/views/ViewDashboard/ViewDashboard.tsx"],"sourcesContent":["// Copyright 2022 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 { Box, BoxProps } from '@mui/material';\nimport { DashboardResource } from '@perses-dev/core';\nimport { ErrorBoundary, ErrorAlert, combineSx } from '@perses-dev/components';\nimport {\n  TimeRangeProvider,\n  TemplateVariableProvider,\n  DashboardProvider,\n  DatasourceStoreProviderProps,\n  DatasourceStoreProvider,\n} from '../../context';\nimport { useInitialTimeRange, useSetTimeRangeParams } from '../../utils';\nimport { DashboardApp } from './DashboardApp';\n\nexport interface ViewDashboardProps extends Omit<BoxProps, 'children'> {\n  dashboardResource: DashboardResource;\n  datasourceApi: DatasourceStoreProviderProps['datasourceApi'];\n}\n\n/**\n * The View for displaying a Dashboard, along with the UI for selecting variable values.\n */\nexport function ViewDashboard(props: ViewDashboardProps) {\n  const { dashboardResource, datasourceApi, sx, ...others } = props;\n  const { spec } = dashboardResource;\n  const dashboardDuration = spec.duration ?? '1h';\n  const initialTimeRange = useInitialTimeRange(dashboardDuration);\n  const { timeRange, setTimeRange } = useSetTimeRangeParams(initialTimeRange, true);\n\n  return (\n    <DatasourceStoreProvider dashboardResource={dashboardResource} datasourceApi={datasourceApi}>\n      <DashboardProvider initialState={{ dashboardSpec: spec }}>\n        <TimeRangeProvider timeRange={timeRange} setTimeRange={setTimeRange}>\n          <TemplateVariableProvider initialVariableDefinitions={spec.variables}>\n            <Box\n              sx={combineSx(\n                {\n                  display: 'flex',\n                  width: '100%',\n                  height: '100%',\n                  position: 'relative',\n                  overflow: 'hidden',\n                },\n                sx\n              )}\n              {...others}\n            >\n              <ErrorBoundary FallbackComponent={ErrorAlert}>\n                <DashboardApp dashboardResource={dashboardResource} />\n              </ErrorBoundary>\n            </Box>\n          </TemplateVariableProvider>\n        </TimeRangeProvider>\n      </DashboardProvider>\n    </DatasourceStoreProvider>\n  );\n}\n"],"names":["Box","ErrorBoundary","ErrorAlert","combineSx","TimeRangeProvider","TemplateVariableProvider","DashboardProvider","DatasourceStoreProvider","useInitialTimeRange","useSetTimeRangeParams","DashboardApp","ViewDashboard","props","dashboardResource","datasourceApi","sx","others","spec","dashboardDuration","duration","initialTimeRange","timeRange","setTimeRange","initialState","dashboardSpec","initialVariableDefinitions","variables","display","width","height","position","overflow","FallbackComponent"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,GAAG,QAAkB,eAAe,CAAC;AAE9C,SAASC,aAAa,EAAEC,UAAU,EAAEC,SAAS,QAAQ,wBAAwB,CAAC;AAC9E,SACEC,iBAAiB,EACjBC,wBAAwB,EACxBC,iBAAiB,EAEjBC,uBAAuB,QAClB,eAAe,CAAC;AACvB,SAASC,mBAAmB,EAAEC,qBAAqB,QAAQ,aAAa,CAAC;AACzE,SAASC,YAAY,QAAQ,gBAAgB,CAAC;AAO9C;;CAEC,GACD,OAAO,SAASC,aAAa,CAACC,KAAyB,EAAE;IACvD,MAAM,EAAEC,iBAAiB,CAAA,EAAEC,aAAa,CAAA,EAAEC,EAAE,CAAA,EAAE,GAAGC,MAAM,EAAE,GAAGJ,KAAK,AAAC;IAClE,MAAM,EAAEK,IAAI,CAAA,EAAE,GAAGJ,iBAAiB,AAAC;QACTI,SAAa;IAAvC,MAAMC,iBAAiB,GAAGD,CAAAA,SAAa,GAAbA,IAAI,CAACE,QAAQ,cAAbF,SAAa,cAAbA,SAAa,GAAI,IAAI,AAAC;IAChD,MAAMG,gBAAgB,GAAGZ,mBAAmB,CAACU,iBAAiB,CAAC,AAAC;IAChE,MAAM,EAAEG,SAAS,CAAA,EAAEC,YAAY,CAAA,EAAE,GAAGb,qBAAqB,CAACW,gBAAgB,EAAE,IAAI,CAAC,AAAC;IAElF,qBACE,KAACb,uBAAuB;QAACM,iBAAiB,EAAEA,iBAAiB;QAAEC,aAAa,EAAEA,aAAa;kBACzF,cAAA,KAACR,iBAAiB;YAACiB,YAAY,EAAE;gBAAEC,aAAa,EAAEP,IAAI;aAAE;sBACtD,cAAA,KAACb,iBAAiB;gBAACiB,SAAS,EAAEA,SAAS;gBAAEC,YAAY,EAAEA,YAAY;0BACjE,cAAA,KAACjB,wBAAwB;oBAACoB,0BAA0B,EAAER,IAAI,CAACS,SAAS;8BAClE,cAAA,KAAC1B,GAAG;wBACFe,EAAE,EAAEZ,SAAS,CACX;4BACEwB,OAAO,EAAE,MAAM;4BACfC,KAAK,EAAE,MAAM;4BACbC,MAAM,EAAE,MAAM;4BACdC,QAAQ,EAAE,UAAU;4BACpBC,QAAQ,EAAE,QAAQ;yBACnB,EACDhB,EAAE,CACH;wBACA,GAAGC,MAAM;kCAEV,cAAA,KAACf,aAAa;4BAAC+B,iBAAiB,EAAE9B,UAAU;sCAC1C,cAAA,KAACQ,YAAY;gCAACG,iBAAiB,EAAEA,iBAAiB;8BAAI;0BACxC;sBACZ;kBACmB;cACT;UACF;MACI,CAC1B;AACJ,CAAC"}

package/dist/views/ViewDashboard/tests/panelGroups.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=panelGroups.test.d.ts.map

package/dist/views/ViewDashboard/tests/panelGroups.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panelGroups.test.d.ts","sourceRoot":"","sources":["../../../../src/views/ViewDashboard/tests/panelGroups.test.tsx"],"names":[],"mappings":""}

package/dist/views/ViewDashboard/tests/panelGroups.test.js

@@ -0,0 +1,107 @@
+// Copyright 2022 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.
+import { jsx as _jsx } from "react/jsx-runtime";
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { DashboardProvider, TemplateVariableProvider, TimeRangeProvider } from '../../../context';
+import { getTestDashboard, renderWithContext } from '../../../test';
+import { DashboardApp } from '../DashboardApp';
+describe('Panel Groups', ()=>{
+    const renderDashboard = ()=>{
+        renderWithContext(/*#__PURE__*/ _jsx(TimeRangeProvider, {
+            timeRange: {
+                pastDuration: '30m'
+            },
+            children: /*#__PURE__*/ _jsx(TemplateVariableProvider, {
+                children: /*#__PURE__*/ _jsx(DashboardProvider, {
+                    initialState: {
+                        dashboardSpec: getTestDashboard().spec,
+                        isEditMode: true
+                    },
+                    children: /*#__PURE__*/ _jsx(DashboardApp, {
+                        dashboardResource: getTestDashboard()
+                    })
+                })
+            })
+        }));
+    };
+    it('should delete panel', ()=>{
+        renderDashboard();
+        const panel = screen.getByText('CPU');
+        userEvent.hover(panel);
+        const deletePanelButton = screen.getByLabelText('delete panel');
+        userEvent.click(deletePanelButton);
+        screen.getByText('Delete Panel');
+        const deleteButton = screen.getByText('Delete');
+        userEvent.click(deleteButton);
+        // The panel should disappear
+        const deletedPanel = screen.queryByText('CPU');
+        expect(deletedPanel).not.toBeInTheDocument();
+    });
+    it('should only delete panel from panel group if panel is not referenced more than once', ()=>{
+        renderDashboard();
+        const panels = screen.getAllByText('Disk I/O Utilization');
+        expect(panels).toHaveLength(2);
+        const panel = panels[0];
+        if (panel === undefined) throw new Error('Missing panel');
+        userEvent.hover(panel);
+        const deletePanelButton = screen.getByLabelText('delete panel');
+        userEvent.click(deletePanelButton);
+        screen.getByText('Delete Panel');
+        const deleteButton = screen.getByText('Delete');
+        userEvent.click(deleteButton);
+        // The deleted panel should still be on screen in the other group
+        const deletedPanel = screen.queryByText('Disk I/O Utilization');
+        expect(deletedPanel).toBeInTheDocument();
+    });
+    it('should swap panels', ()=>{
+        renderDashboard();
+        // should move panel down
+        const group1 = screen.getByText('CPU Stats');
+        userEvent.hover(group1);
+        const moveGroupDownBtn = screen.getByLabelText('move group down');
+        userEvent.click(moveGroupDownBtn);
+        userEvent.unhover(moveGroupDownBtn);
+        // should move panel up
+        const group2 = screen.getByText('Disk Stats');
+        userEvent.hover(group2);
+        const moveGroupUpBtn = screen.getByLabelText('move group up');
+        userEvent.click(moveGroupUpBtn);
+    /* TODO: Figure out how to test this visually without coupling to the store
+    const layouts = storeApi.getState().layouts;
+    expect(layouts[0]?.title).toBe(undefined);
+    expect(layouts[1]?.title).toBe('Disk Stats');
+    expect(layouts[2]?.title).toBe('CPU Stats');
+    */ });
+    it('should delete a panel group', ()=>{
+        renderDashboard();
+        const group = screen.getByText('CPU Stats');
+        userEvent.hover(group);
+        const deleteGroupIcon = screen.getByLabelText('delete group');
+        userEvent.click(deleteGroupIcon);
+        screen.getByText('Delete Panel Group');
+        const deleteButton = screen.getByText('Delete');
+        userEvent.click(deleteButton);
+        // should remove group
+        const deletedGroup = screen.queryByText('CPU Stats');
+        expect(deletedGroup).not.toBeInTheDocument();
+        // CPU panel should be completely gone since it wasn't in any other group
+        let panel = screen.queryByText('CPU');
+        expect(panel).not.toBeInTheDocument();
+        // A DiskIO panel should still be present in the other group that wasn't deleted
+        panel = screen.queryByText('Disk I/O Utilization');
+        expect(panel).toBeInTheDocument();
+    });
+});
+
+//# sourceMappingURL=panelGroups.test.js.map

package/dist/views/ViewDashboard/tests/panelGroups.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/views/ViewDashboard/tests/panelGroups.test.tsx"],"sourcesContent":["// Copyright 2022 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 { screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { DashboardProvider, TemplateVariableProvider, TimeRangeProvider } from '../../../context';\nimport { getTestDashboard, renderWithContext } from '../../../test';\nimport { DashboardApp } from '../DashboardApp';\n\ndescribe('Panel Groups', () => {\n  const renderDashboard = () => {\n    renderWithContext(\n      <TimeRangeProvider timeRange={{ pastDuration: '30m' }}>\n        <TemplateVariableProvider>\n          <DashboardProvider initialState={{ dashboardSpec: getTestDashboard().spec, isEditMode: true }}>\n            <DashboardApp dashboardResource={getTestDashboard()} />\n          </DashboardProvider>\n        </TemplateVariableProvider>\n      </TimeRangeProvider>\n    );\n  };\n  it('should delete panel', () => {\n    renderDashboard();\n    const panel = screen.getByText('CPU');\n    userEvent.hover(panel);\n    const deletePanelButton = screen.getByLabelText('delete panel');\n    userEvent.click(deletePanelButton);\n    screen.getByText('Delete Panel');\n    const deleteButton = screen.getByText('Delete');\n    userEvent.click(deleteButton);\n\n    // The panel should disappear\n    const deletedPanel = screen.queryByText('CPU');\n    expect(deletedPanel).not.toBeInTheDocument();\n  });\n\n  it('should only delete panel from panel group if panel is not referenced more than once', () => {\n    renderDashboard();\n\n    const panels = screen.getAllByText('Disk I/O Utilization');\n    expect(panels).toHaveLength(2);\n\n    const panel = panels[0];\n    if (panel === undefined) throw new Error('Missing panel');\n\n    userEvent.hover(panel);\n    const deletePanelButton = screen.getByLabelText('delete panel');\n    userEvent.click(deletePanelButton);\n    screen.getByText('Delete Panel');\n    const deleteButton = screen.getByText('Delete');\n    userEvent.click(deleteButton);\n\n    // The deleted panel should still be on screen in the other group\n    const deletedPanel = screen.queryByText('Disk I/O Utilization');\n    expect(deletedPanel).toBeInTheDocument();\n  });\n\n  it('should swap panels', () => {\n    renderDashboard();\n\n    // should move panel down\n    const group1 = screen.getByText('CPU Stats');\n    userEvent.hover(group1);\n    const moveGroupDownBtn = screen.getByLabelText('move group down');\n    userEvent.click(moveGroupDownBtn);\n    userEvent.unhover(moveGroupDownBtn);\n\n    // should move panel up\n    const group2 = screen.getByText('Disk Stats');\n    userEvent.hover(group2);\n    const moveGroupUpBtn = screen.getByLabelText('move group up');\n    userEvent.click(moveGroupUpBtn);\n\n    /* TODO: Figure out how to test this visually without coupling to the store\n    const layouts = storeApi.getState().layouts;\n    expect(layouts[0]?.title).toBe(undefined);\n    expect(layouts[1]?.title).toBe('Disk Stats');\n    expect(layouts[2]?.title).toBe('CPU Stats');\n    */\n  });\n\n  it('should delete a panel group', () => {\n    renderDashboard();\n    const group = screen.getByText('CPU Stats');\n    userEvent.hover(group);\n    const deleteGroupIcon = screen.getByLabelText('delete group');\n    userEvent.click(deleteGroupIcon);\n    screen.getByText('Delete Panel Group');\n    const deleteButton = screen.getByText('Delete');\n    userEvent.click(deleteButton);\n\n    // should remove group\n    const deletedGroup = screen.queryByText('CPU Stats');\n    expect(deletedGroup).not.toBeInTheDocument();\n\n    // CPU panel should be completely gone since it wasn't in any other group\n    let panel = screen.queryByText('CPU');\n    expect(panel).not.toBeInTheDocument();\n\n    // A DiskIO panel should still be present in the other group that wasn't deleted\n    panel = screen.queryByText('Disk I/O Utilization');\n    expect(panel).toBeInTheDocument();\n  });\n});\n"],"names":["screen","userEvent","DashboardProvider","TemplateVariableProvider","TimeRangeProvider","getTestDashboard","renderWithContext","DashboardApp","describe","renderDashboard","timeRange","pastDuration","initialState","dashboardSpec","spec","isEditMode","dashboardResource","it","panel","getByText","hover","deletePanelButton","getByLabelText","click","deleteButton","deletedPanel","queryByText","expect","not","toBeInTheDocument","panels","getAllByText","toHaveLength","undefined","Error","group1","moveGroupDownBtn","unhover","group2","moveGroupUpBtn","group","deleteGroupIcon","deletedGroup"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/dashboards",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "The dashboards feature in Perses",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -27,9 +27,9 @@
     "lint:fix": "eslint --fix src --ext .ts,.tsx"
   },
   "dependencies": {
-    "@perses-dev/components": "^0.9.0",
-    "@perses-dev/core": "^0.9.0",
-    "@perses-dev/plugin-system": "^0.9.0",
+    "@perses-dev/components": "^0.11.0",
+    "@perses-dev/core": "^0.11.0",
+    "@perses-dev/plugin-system": "^0.11.0",
     "@types/react-grid-layout": "^1.3.2",
     "date-fns": "^2.28.0",
     "immer": "^9.0.15",
@@ -37,6 +37,7 @@
     "react-grid-layout": "^1.3.4",
     "react-intersection-observer": "^9.4.0",
     "use-immer": "^0.7.0",
+    "use-query-params": "^2.1.1",
     "use-resize-observer": "^9.0.0",
     "zustand": "^4.1.1"
   },

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

@@ -1,40 +0,0 @@
-// Copyright 2022 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
-});
-Object.defineProperty(exports, "PanelSpecEditor", {
-    enumerable: true,
-    get: ()=>PanelSpecEditor
-});
-const _jsxRuntime = require("react/jsx-runtime");
-const _pluginSystem = require("@perses-dev/plugin-system");
-function PanelSpecEditor(props) {
-    const { panelPluginKind , ...others } = props;
-    const { data: plugin , isLoading  } = (0, _pluginSystem.usePlugin)('Panel', panelPluginKind, {
-        useErrorBoundary: true,
-        enabled: panelPluginKind !== ''
-    });
-    // TODO: Proper loading indicator
-    if (isLoading) {
-        return null;
-    }
-    if (plugin === undefined) {
-        throw new Error(`Missing OptionsEditorComponent for Panel plugin with kind '${panelPluginKind}'`);
-    }
-    const { OptionsEditorComponent  } = plugin;
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(OptionsEditorComponent, {
-        ...others
-    });
-}

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

@@ -1,38 +0,0 @@
-// Copyright 2022 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
-});
-Object.defineProperty(exports, "PanelTypeSelect", {
-    enumerable: true,
-    get: ()=>PanelTypeSelect
-});
-const _jsxRuntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _pluginSystem = require("@perses-dev/plugin-system");
-function PanelTypeSelect(props) {
-    const { value: propValue , ...others } = props;
-    const { data , isLoading  } = (0, _pluginSystem.useListPluginMetadata)('Panel');
-    // Pass an empty value while options are still loading so MUI doesn't complain about us using an "out of range" value
-    const value = propValue !== '' && isLoading ? '' : propValue;
-    // TODO: Does this need a loading indicator of some kind?
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Select, {
-        ...others,
-        value: value,
-        children: data === null || data === void 0 ? void 0 : data.map((metadata)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
-                value: metadata.kind,
-                children: metadata.display.name
-            }, metadata.kind))
-    });
-}

package/dist/cjs/components/PanelDrawer/panel-editor-model.js

@@ -1,140 +0,0 @@
-// Copyright 2022 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
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    usePanelDrawerModel: ()=>usePanelDrawerModel,
-    usePanelSpecState: ()=>usePanelSpecState
-});
-const _react = require("react");
-const _pluginSystem = require("@perses-dev/plugin-system");
-const _useImmer = require("use-immer");
-const _context = require("../../context");
-const _functions = require("../../utils/functions");
-function usePanelDrawerModel() {
-    const { panelDrawer  } = (0, _context.useDashboardApp)();
-    const { panels , updatePanel  } = (0, _context.usePanels)();
-    // If we're closed, no model to return
-    if (panelDrawer === undefined) {
-        return undefined;
-    }
-    // If we don't have a panel key, we're adding a new panel
-    const { panelKey , groupIndex  } = panelDrawer;
-    if (panelKey === undefined) {
-        return {
-            drawerTitle: 'Add Panel',
-            submitButtonText: 'Add',
-            initialValues: {
-                name: '',
-                description: '',
-                group: groupIndex !== null && groupIndex !== void 0 ? groupIndex : 0,
-                kind: '',
-                spec: {}
-            },
-            applyChanges: (values)=>{
-                const { name , description , group , kind , spec  } = values;
-                const panelKey = (0, _functions.removeWhiteSpacesAndSpecialCharacters)(name);
-                updatePanel(panelKey, {
-                    kind: 'Panel',
-                    spec: {
-                        display: {
-                            name,
-                            description
-                        },
-                        plugin: {
-                            kind,
-                            spec
-                        }
-                    }
-                }, group);
-            }
-        };
-    }
-    // Otherwise we have a panel key, so we're trying to edit an existing panel
-    const existingPanel = panels[panelKey];
-    // TODO: Can we better express this via the type system on the dashboard store to avoid these states?
-    if (existingPanel === undefined) {
-        throw new Error(`Cannot find existing panel '${panelKey}' to edit`);
-    }
-    if (groupIndex === undefined) {
-        throw new Error(`Cannot edit existing panel '${panelKey}' without its group index`);
-    }
-    var _description;
-    return {
-        drawerTitle: 'Edit Panel',
-        submitButtonText: 'Apply',
-        initialValues: {
-            name: existingPanel.spec.display.name,
-            description: (_description = existingPanel.spec.display.description) !== null && _description !== void 0 ? _description : '',
-            group: groupIndex,
-            kind: existingPanel.spec.plugin.kind,
-            spec: existingPanel.spec.plugin.spec
-        },
-        applyChanges: (values)=>{
-            const { name , description , group , kind , spec  } = values;
-            updatePanel(panelKey, {
-                kind: 'Panel',
-                spec: {
-                    display: {
-                        name,
-                        description
-                    },
-                    plugin: {
-                        kind,
-                        spec
-                    }
-                }
-            });
-            if (group !== groupIndex) {
-            // TO DO: need to move panel if panel group changes
-            }
-        }
-    };
-}
-function usePanelSpecState(panelPluginKind, initialState) {
-    // Keeping track of spec values by kind allows users to switch between panel types and come back with their old
-    // values intact from before the switch
-    const [specByKind, setSpecByKind] = (0, _useImmer.useImmer)({
-        [panelPluginKind]: initialState
-    });
-    const { data: plugin  } = (0, _pluginSystem.usePlugin)('Panel', panelPluginKind, {
-        enabled: panelPluginKind !== ''
-    });
-    const pluginInitialSpec = (0, _react.useMemo)(()=>{
-        return plugin === null || plugin === void 0 ? void 0 : plugin.createInitialOptions();
-    }, [
-        plugin
-    ]);
-    var _panelPluginKind;
-    // Use the value in specByKind or if unset, use the initial values from the plugin (which could still be undefined)
-    const spec = (_panelPluginKind = specByKind[panelPluginKind]) !== null && _panelPluginKind !== void 0 ? _panelPluginKind : pluginInitialSpec;
-    // TODO: Do we want to expose more of a immer style API to plugin authors for managing their state, rather than the
-    // current "onChange" API?
-    const onSpecChange = (next)=>{
-        setSpecByKind((draft)=>{
-            draft[panelPluginKind] = next;
-        });
-    };
-    return {
-        spec,
-        onSpecChange
-    };
-}

package/dist/cjs/context/DashboardAppSlice.js

@@ -1,57 +0,0 @@
-// Copyright 2022 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
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    createDashboardAppSlice: ()=>createDashboardAppSlice,
-    useDashboardApp: ()=>useDashboardApp
-});
-const _immer = require("zustand/middleware/immer");
-const _dashboardProvider = require("./DashboardProvider");
-const createDashboardAppSlice = (0, _immer.immer)((set)=>({
-        openPanelDrawer: ({ groupIndex , panelKey  })=>set((state)=>{
-                state.panelDrawer = {
-                    groupIndex,
-                    panelKey
-                };
-            }),
-        closePanelDrawer: ()=>set((state)=>{
-                state.panelDrawer = undefined;
-            }),
-        openPanelGroupDialog: (groupIndex)=>set((state)=>{
-                state.panelGroupDialog = {
-                    groupIndex
-                };
-            }),
-        closePanelGroupDialog: ()=>set((state)=>{
-                state.panelGroupDialog = undefined;
-            })
-    }));
-function useDashboardApp() {
-    return (0, _dashboardProvider.useDashboardStore)(({ panelDrawer , openPanelDrawer , closePanelDrawer , panelGroupDialog , openPanelGroupDialog , closePanelGroupDialog ,  })=>({
-            panelDrawer,
-            openPanelDrawer,
-            closePanelDrawer,
-            panelGroupDialog,
-            openPanelGroupDialog,
-            closePanelGroupDialog
-        }));
-}