@perses-dev/dashboards 0.0.0-snapshot-profile-89b306f → 0.0.0-snapshot-time-zone-selector-946f408

package/dist/components/DashboardToolbar/DashboardToolbar.js

@@ -12,8 +12,9 @@
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Typography, Stack, Button, Box, useTheme, useMediaQuery, Alert } from '@mui/material';
-import { ErrorBoundary, ErrorAlert } from '@perses-dev/components';
-import { TimeRangeControls } from '@perses-dev/plugin-system';
+import { ErrorBoundary, ErrorAlert, TimeZoneSelector, getTimeZoneOptions } from '@perses-dev/components';
+import { TimeRangeControls, useTimeZone } from '@perses-dev/plugin-system';
+import { useCallback } from 'react';
 import { useEditMode } from '../../context';
 import { AddPanelButton } from '../AddPanelButton';
 import { AddGroupButton } from '../AddGroupButton';
@@ -29,117 +30,127 @@ export const DashboardToolbar = (props)=>{
     const { isEditMode } = useEditMode();
     const isBiggerThanSm = useMediaQuery(useTheme().breakpoints.up('sm'));
     const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));
+    const { timeZone, setTimeZone } = useTimeZone();
+    const timeZoneOptions = getTimeZoneOptions();
     const dashboardTitle = dashboardTitleComponent ? dashboardTitleComponent : /*#__PURE__*/ _jsx(Typography, {
         variant: "h2",
         children: dashboardName
     });
     const testId = 'dashboard-toolbar';
-    return /*#__PURE__*/ _jsx(_Fragment, {
-        children: /*#__PURE__*/ _jsxs(Stack, {
-            "data-testid": testId,
-            children: [
-                /*#__PURE__*/ _jsxs(Box, {
-                    px: 2,
-                    py: 1.5,
-                    display: "flex",
-                    sx: {
-                        backgroundColor: (theme)=>theme.palette.primary.main + (isEditMode ? '30' : '0')
-                    },
-                    children: [
-                        dashboardTitle,
-                        isEditMode ? /*#__PURE__*/ _jsxs(Stack, {
+    const handleTimeZoneChange = useCallback((timeZoneOption)=>{
+        setTimeZone(timeZoneOption.value);
+    }, [
+        setTimeZone
+    ]);
+    return /*#__PURE__*/ _jsxs(Stack, {
+        "data-testid": testId,
+        children: [
+            /*#__PURE__*/ _jsxs(Box, {
+                px: 2,
+                py: 1.5,
+                display: "flex",
+                sx: {
+                    backgroundColor: (theme)=>theme.palette.primary.main + (isEditMode ? '30' : '0')
+                },
+                children: [
+                    dashboardTitle,
+                    isEditMode ? /*#__PURE__*/ _jsxs(Stack, {
+                        direction: "row",
+                        gap: 1,
+                        ml: "auto",
+                        children: [
+                            isReadonly && /*#__PURE__*/ _jsx(Alert, {
+                                severity: "warning",
+                                sx: {
+                                    backgroundColor: 'transparent',
+                                    padding: 0
+                                },
+                                children: "Dashboard managed via code only. Download JSON and commit changes to save."
+                            }),
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                direction: "row",
+                                spacing: 0.5,
+                                ml: 1,
+                                whiteSpace: "nowrap",
+                                children: [
+                                    isVariableEnabled && /*#__PURE__*/ _jsx(EditVariablesButton, {}),
+                                    isDatasourceEnabled && /*#__PURE__*/ _jsx(EditDatasourcesButton, {}),
+                                    /*#__PURE__*/ _jsx(AddPanelButton, {}),
+                                    /*#__PURE__*/ _jsx(AddGroupButton, {})
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(SaveDashboardButton, {
+                                onSave: onSave,
+                                isDisabled: isReadonly
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                variant: "outlined",
+                                onClick: onCancelButtonClick,
+                                children: "Cancel"
+                            })
+                        ]
+                    }) : /*#__PURE__*/ _jsx(_Fragment, {
+                        children: isBiggerThanSm && /*#__PURE__*/ _jsx(Stack, {
                             direction: "row",
                             gap: 1,
                             ml: "auto",
-                            children: [
-                                isReadonly && /*#__PURE__*/ _jsx(Alert, {
-                                    severity: "warning",
-                                    sx: {
-                                        backgroundColor: 'transparent',
-                                        padding: 0
-                                    },
-                                    children: "Dashboard managed via code only. Download JSON and commit changes to save."
-                                }),
-                                /*#__PURE__*/ _jsxs(Stack, {
-                                    direction: "row",
-                                    spacing: 0.5,
-                                    ml: 1,
-                                    whiteSpace: "nowrap",
-                                    children: [
-                                        isVariableEnabled && /*#__PURE__*/ _jsx(EditVariablesButton, {}),
-                                        isDatasourceEnabled && /*#__PURE__*/ _jsx(EditDatasourcesButton, {}),
-                                        /*#__PURE__*/ _jsx(AddPanelButton, {}),
-                                        /*#__PURE__*/ _jsx(AddGroupButton, {})
-                                    ]
-                                }),
-                                /*#__PURE__*/ _jsx(SaveDashboardButton, {
-                                    onSave: onSave,
-                                    isDisabled: isReadonly
-                                }),
-                                /*#__PURE__*/ _jsx(Button, {
-                                    variant: "outlined",
-                                    onClick: onCancelButtonClick,
-                                    children: "Cancel"
-                                })
-                            ]
-                        }) : /*#__PURE__*/ _jsx(_Fragment, {
-                            children: isBiggerThanSm && /*#__PURE__*/ _jsx(Stack, {
-                                direction: "row",
-                                gap: 1,
-                                ml: "auto",
-                                children: /*#__PURE__*/ _jsx(EditButton, {
-                                    onClick: onEditButtonClick
-                                })
+                            children: /*#__PURE__*/ _jsx(EditButton, {
+                                onClick: onEditButtonClick
                             })
                         })
-                    ]
-                }),
-                /*#__PURE__*/ _jsxs(Box, {
-                    sx: {
-                        display: 'flex',
-                        width: '100%',
-                        alignItems: 'start',
-                        padding: (theme)=>theme.spacing(1, 2, 0, 2),
-                        flexDirection: isBiggerThanMd ? 'row' : 'column',
-                        flexWrap: 'nowrap',
-                        gap: 1
-                    },
-                    children: [
-                        /*#__PURE__*/ _jsx(Box, {
-                            width: "100%",
-                            children: /*#__PURE__*/ _jsx(ErrorBoundary, {
-                                FallbackComponent: ErrorAlert,
-                                children: /*#__PURE__*/ _jsx(DashboardStickyToolbar, {
-                                    initialVariableIsSticky: initialVariableIsSticky,
-                                    sx: {
-                                        backgroundColor: ({ palette })=>palette.background.default
-                                    }
-                                })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(Box, {
+                sx: {
+                    display: 'flex',
+                    width: '100%',
+                    alignItems: 'start',
+                    padding: (theme)=>theme.spacing(1, 2, 0, 2),
+                    flexDirection: isBiggerThanMd ? 'row' : 'column',
+                    flexWrap: 'nowrap',
+                    gap: 1
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Box, {
+                        width: "100%",
+                        children: /*#__PURE__*/ _jsx(ErrorBoundary, {
+                            FallbackComponent: ErrorAlert,
+                            children: /*#__PURE__*/ _jsx(DashboardStickyToolbar, {
+                                initialVariableIsSticky: initialVariableIsSticky,
+                                sx: {
+                                    backgroundColor: ({ palette })=>palette.background.default
+                                }
                             })
-                        }),
-                        /*#__PURE__*/ _jsx(Stack, {
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Stack, {
+                        direction: "row",
+                        ml: "auto",
+                        flexWrap: "wrap",
+                        justifyContent: "end",
+                        children: /*#__PURE__*/ _jsxs(Stack, {
                             direction: "row",
-                            ml: "auto",
-                            flexWrap: "wrap",
-                            justifyContent: "end",
-                            children: /*#__PURE__*/ _jsxs(Stack, {
-                                direction: "row",
-                                spacing: 1,
-                                mt: 1,
-                                ml: 1,
-                                children: [
-                                    /*#__PURE__*/ _jsx(TimeRangeControls, {}),
-                                    /*#__PURE__*/ _jsx(DownloadButton, {}),
-                                    /*#__PURE__*/ _jsx(EditJsonButton, {
-                                        isReadonly: !isEditMode
-                                    })
-                                ]
-                            })
+                            spacing: 1,
+                            mt: 1,
+                            ml: 1,
+                            children: [
+                                /*#__PURE__*/ _jsx(TimeRangeControls, {}),
+                                /*#__PURE__*/ _jsx(TimeZoneSelector, {
+                                    timeZoneOptions: timeZoneOptions,
+                                    value: timeZone,
+                                    onChange: handleTimeZoneChange
+                                }),
+                                /*#__PURE__*/ _jsx(DownloadButton, {}),
+                                /*#__PURE__*/ _jsx(EditJsonButton, {
+                                    isReadonly: !isEditMode
+                                })
+                            ]
                         })
-                    ]
-                })
-            ]
-        })
+                    })
+                ]
+            })
+        ]
     });
 };
 

package/dist/components/DashboardToolbar/DashboardToolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DashboardToolbar/DashboardToolbar.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 { Typography, Stack, Button, Box, useTheme, useMediaQuery, Alert } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { TimeRangeControls } from '@perses-dev/plugin-system';\nimport { ReactElement } from 'react';\nimport { OnSaveDashboard, useEditMode } from '../../context';\nimport { AddPanelButton } from '../AddPanelButton';\nimport { AddGroupButton } from '../AddGroupButton';\nimport { DownloadButton } from '../DownloadButton';\nimport { EditVariablesButton } from '../Variables';\nimport { EditDatasourcesButton } from '../Datasources';\nimport { EditButton } from '../EditButton';\nimport { EditJsonButton } from '../EditJsonButton';\nimport { SaveDashboardButton } from '../SaveDashboardButton';\nimport { DashboardStickyToolbar } from '../DashboardStickyToolbar';\n\nexport interface DashboardToolbarProps {\n  dashboardName: string;\n  dashboardTitleComponent?: JSX.Element;\n  initialVariableIsSticky?: boolean;\n  isReadonly: boolean;\n  isVariableEnabled: boolean;\n  isDatasourceEnabled: boolean;\n  onEditButtonClick: () => void;\n  onCancelButtonClick: () => void;\n  onSave?: OnSaveDashboard;\n}\n\nexport const DashboardToolbar = (props: DashboardToolbarProps): ReactElement => {\n  const {\n    dashboardName,\n    dashboardTitleComponent,\n    initialVariableIsSticky,\n    isReadonly,\n    isVariableEnabled,\n    isDatasourceEnabled,\n    onEditButtonClick,\n    onCancelButtonClick,\n    onSave,\n  } = props;\n\n  const { isEditMode } = useEditMode();\n\n  const isBiggerThanSm = useMediaQuery(useTheme().breakpoints.up('sm'));\n  const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));\n\n  const dashboardTitle = dashboardTitleComponent ? (\n    dashboardTitleComponent\n  ) : (\n    <Typography variant=\"h2\">{dashboardName}</Typography>\n  );\n\n  const testId = 'dashboard-toolbar';\n\n  return (\n    <>\n      <Stack data-testid={testId}>\n        <Box\n          px={2}\n          py={1.5}\n          display=\"flex\"\n          sx={{ backgroundColor: (theme) => theme.palette.primary.main + (isEditMode ? '30' : '0') }}\n        >\n          {dashboardTitle}\n          {isEditMode ? (\n            <Stack direction=\"row\" gap={1} ml=\"auto\">\n              {isReadonly && (\n                <Alert severity=\"warning\" sx={{ backgroundColor: 'transparent', padding: 0 }}>\n                  Dashboard managed via code only. Download JSON and commit changes to save.\n                </Alert>\n              )}\n              <Stack direction=\"row\" spacing={0.5} ml={1} whiteSpace=\"nowrap\">\n                {isVariableEnabled && <EditVariablesButton />}\n                {isDatasourceEnabled && <EditDatasourcesButton />}\n                <AddPanelButton />\n                <AddGroupButton />\n              </Stack>\n              <SaveDashboardButton onSave={onSave} isDisabled={isReadonly} />\n              <Button variant=\"outlined\" onClick={onCancelButtonClick}>\n                Cancel\n              </Button>\n            </Stack>\n          ) : (\n            <>\n              {isBiggerThanSm && (\n                <Stack direction=\"row\" gap={1} ml=\"auto\">\n                  <EditButton onClick={onEditButtonClick} />\n                </Stack>\n              )}\n            </>\n          )}\n        </Box>\n        <Box\n          sx={{\n            display: 'flex',\n            width: '100%',\n            alignItems: 'start',\n            padding: (theme) => theme.spacing(1, 2, 0, 2),\n            flexDirection: isBiggerThanMd ? 'row' : 'column',\n            flexWrap: 'nowrap',\n            gap: 1,\n          }}\n        >\n          <Box width=\"100%\">\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <DashboardStickyToolbar\n                initialVariableIsSticky={initialVariableIsSticky}\n                sx={{\n                  backgroundColor: ({ palette }) => palette.background.default,\n                }}\n              />\n            </ErrorBoundary>\n          </Box>\n          <Stack direction=\"row\" ml=\"auto\" flexWrap=\"wrap\" justifyContent=\"end\">\n            <Stack direction=\"row\" spacing={1} mt={1} ml={1}>\n              <TimeRangeControls />\n              <DownloadButton />\n              <EditJsonButton isReadonly={!isEditMode} />\n            </Stack>\n          </Stack>\n        </Box>\n      </Stack>\n    </>\n  );\n};\n"],"names":["Typography","Stack","Button","Box","useTheme","useMediaQuery","Alert","ErrorBoundary","ErrorAlert","TimeRangeControls","useEditMode","AddPanelButton","AddGroupButton","DownloadButton","EditVariablesButton","EditDatasourcesButton","EditButton","EditJsonButton","SaveDashboardButton","DashboardStickyToolbar","DashboardToolbar","props","dashboardName","dashboardTitleComponent","initialVariableIsSticky","isReadonly","isVariableEnabled","isDatasourceEnabled","onEditButtonClick","onCancelButtonClick","onSave","isEditMode","isBiggerThanSm","breakpoints","up","isBiggerThanMd","dashboardTitle","variant","testId","data-testid","px","py","display","sx","backgroundColor","theme","palette","primary","main","direction","gap","ml","severity","padding","spacing","whiteSpace","isDisabled","onClick","width","alignItems","flexDirection","flexWrap","FallbackComponent","background","default","justifyContent","mt"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/DashboardToolbar/DashboardToolbar.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 { Typography, Stack, Button, Box, useTheme, useMediaQuery, Alert } from '@mui/material';\nimport {\n  ErrorBoundary,\n  ErrorAlert,\n  TimeZoneSelector,\n  getTimeZoneOptions,\n  TimeZoneOption,\n} from '@perses-dev/components';\nimport { TimeRangeControls, useTimeZone } from '@perses-dev/plugin-system';\nimport { ReactElement, useCallback } from 'react';\nimport { OnSaveDashboard, useEditMode } from '../../context';\nimport { AddPanelButton } from '../AddPanelButton';\nimport { AddGroupButton } from '../AddGroupButton';\nimport { DownloadButton } from '../DownloadButton';\nimport { EditVariablesButton } from '../Variables';\nimport { EditDatasourcesButton } from '../Datasources';\nimport { EditButton } from '../EditButton';\nimport { EditJsonButton } from '../EditJsonButton';\nimport { SaveDashboardButton } from '../SaveDashboardButton';\nimport { DashboardStickyToolbar } from '../DashboardStickyToolbar';\n\nexport interface DashboardToolbarProps {\n  dashboardName: string;\n  dashboardTitleComponent?: JSX.Element;\n  initialVariableIsSticky?: boolean;\n  isReadonly: boolean;\n  isVariableEnabled: boolean;\n  isDatasourceEnabled: boolean;\n  onEditButtonClick: () => void;\n  onCancelButtonClick: () => void;\n  onSave?: OnSaveDashboard;\n}\n\nexport const DashboardToolbar = (props: DashboardToolbarProps): ReactElement => {\n  const {\n    dashboardName,\n    dashboardTitleComponent,\n    initialVariableIsSticky,\n    isReadonly,\n    isVariableEnabled,\n    isDatasourceEnabled,\n    onEditButtonClick,\n    onCancelButtonClick,\n    onSave,\n  } = props;\n\n  const { isEditMode } = useEditMode();\n\n  const isBiggerThanSm = useMediaQuery(useTheme().breakpoints.up('sm'));\n  const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));\n\n  const { timeZone, setTimeZone } = useTimeZone();\n  const timeZoneOptions = getTimeZoneOptions();\n\n  const dashboardTitle = dashboardTitleComponent ? (\n    dashboardTitleComponent\n  ) : (\n    <Typography variant=\"h2\">{dashboardName}</Typography>\n  );\n\n  const testId = 'dashboard-toolbar';\n\n  const handleTimeZoneChange = useCallback(\n    (timeZoneOption: TimeZoneOption) => {\n      setTimeZone(timeZoneOption.value);\n    },\n    [setTimeZone]\n  );\n\n  return (\n    <Stack data-testid={testId}>\n      <Box\n        px={2}\n        py={1.5}\n        display=\"flex\"\n        sx={{ backgroundColor: (theme) => theme.palette.primary.main + (isEditMode ? '30' : '0') }}\n      >\n        {dashboardTitle}\n        {isEditMode ? (\n          <Stack direction=\"row\" gap={1} ml=\"auto\">\n            {isReadonly && (\n              <Alert severity=\"warning\" sx={{ backgroundColor: 'transparent', padding: 0 }}>\n                Dashboard managed via code only. Download JSON and commit changes to save.\n              </Alert>\n            )}\n            <Stack direction=\"row\" spacing={0.5} ml={1} whiteSpace=\"nowrap\">\n              {isVariableEnabled && <EditVariablesButton />}\n              {isDatasourceEnabled && <EditDatasourcesButton />}\n              <AddPanelButton />\n              <AddGroupButton />\n            </Stack>\n            <SaveDashboardButton onSave={onSave} isDisabled={isReadonly} />\n            <Button variant=\"outlined\" onClick={onCancelButtonClick}>\n              Cancel\n            </Button>\n          </Stack>\n        ) : (\n          <>\n            {isBiggerThanSm && (\n              <Stack direction=\"row\" gap={1} ml=\"auto\">\n                <EditButton onClick={onEditButtonClick} />\n              </Stack>\n            )}\n          </>\n        )}\n      </Box>\n      <Box\n        sx={{\n          display: 'flex',\n          width: '100%',\n          alignItems: 'start',\n          padding: (theme) => theme.spacing(1, 2, 0, 2),\n          flexDirection: isBiggerThanMd ? 'row' : 'column',\n          flexWrap: 'nowrap',\n          gap: 1,\n        }}\n      >\n        <Box width=\"100%\">\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <DashboardStickyToolbar\n              initialVariableIsSticky={initialVariableIsSticky}\n              sx={{\n                backgroundColor: ({ palette }) => palette.background.default,\n              }}\n            />\n          </ErrorBoundary>\n        </Box>\n        <Stack direction=\"row\" ml=\"auto\" flexWrap=\"wrap\" justifyContent=\"end\">\n          <Stack direction=\"row\" spacing={1} mt={1} ml={1}>\n            <TimeRangeControls />\n            <TimeZoneSelector timeZoneOptions={timeZoneOptions} value={timeZone} onChange={handleTimeZoneChange} />\n            <DownloadButton />\n            <EditJsonButton isReadonly={!isEditMode} />\n          </Stack>\n        </Stack>\n      </Box>\n    </Stack>\n  );\n};\n"],"names":["Typography","Stack","Button","Box","useTheme","useMediaQuery","Alert","ErrorBoundary","ErrorAlert","TimeZoneSelector","getTimeZoneOptions","TimeRangeControls","useTimeZone","useCallback","useEditMode","AddPanelButton","AddGroupButton","DownloadButton","EditVariablesButton","EditDatasourcesButton","EditButton","EditJsonButton","SaveDashboardButton","DashboardStickyToolbar","DashboardToolbar","props","dashboardName","dashboardTitleComponent","initialVariableIsSticky","isReadonly","isVariableEnabled","isDatasourceEnabled","onEditButtonClick","onCancelButtonClick","onSave","isEditMode","isBiggerThanSm","breakpoints","up","isBiggerThanMd","timeZone","setTimeZone","timeZoneOptions","dashboardTitle","variant","testId","handleTimeZoneChange","timeZoneOption","value","data-testid","px","py","display","sx","backgroundColor","theme","palette","primary","main","direction","gap","ml","severity","padding","spacing","whiteSpace","isDisabled","onClick","width","alignItems","flexDirection","flexWrap","FallbackComponent","background","default","justifyContent","mt","onChange"],"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,SAASA,UAAU,EAAEC,KAAK,EAAEC,MAAM,EAAEC,GAAG,EAAEC,QAAQ,EAAEC,aAAa,EAAEC,KAAK,QAAQ,gBAAgB;AAC/F,SACEC,aAAa,EACbC,UAAU,EACVC,gBAAgB,EAChBC,kBAAkB,QAEb,yBAAyB;AAChC,SAASC,iBAAiB,EAAEC,WAAW,QAAQ,4BAA4B;AAC3E,SAAuBC,WAAW,QAAQ,QAAQ;AAClD,SAA0BC,WAAW,QAAQ,gBAAgB;AAC7D,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,UAAU,QAAQ,gBAAgB;AAC3C,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SAASC,mBAAmB,QAAQ,yBAAyB;AAC7D,SAASC,sBAAsB,QAAQ,4BAA4B;AAcnE,OAAO,MAAMC,mBAAmB,CAACC;IAC/B,MAAM,EACJC,aAAa,EACbC,uBAAuB,EACvBC,uBAAuB,EACvBC,UAAU,EACVC,iBAAiB,EACjBC,mBAAmB,EACnBC,iBAAiB,EACjBC,mBAAmB,EACnBC,MAAM,EACP,GAAGT;IAEJ,MAAM,EAAEU,UAAU,EAAE,GAAGrB;IAEvB,MAAMsB,iBAAiB/B,cAAcD,WAAWiC,WAAW,CAACC,EAAE,CAAC;IAC/D,MAAMC,iBAAiBlC,cAAcD,WAAWiC,WAAW,CAACC,EAAE,CAAC;IAE/D,MAAM,EAAEE,QAAQ,EAAEC,WAAW,EAAE,GAAG7B;IAClC,MAAM8B,kBAAkBhC;IAExB,MAAMiC,iBAAiBhB,0BACrBA,wCAEA,KAAC3B;QAAW4C,SAAQ;kBAAMlB;;IAG5B,MAAMmB,SAAS;IAEf,MAAMC,uBAAuBjC,YAC3B,CAACkC;QACCN,YAAYM,eAAeC,KAAK;IAClC,GACA;QAACP;KAAY;IAGf,qBACE,MAACxC;QAAMgD,eAAaJ;;0BAClB,MAAC1C;gBACC+C,IAAI;gBACJC,IAAI;gBACJC,SAAQ;gBACRC,IAAI;oBAAEC,iBAAiB,CAACC,QAAUA,MAAMC,OAAO,CAACC,OAAO,CAACC,IAAI,GAAIvB,CAAAA,aAAa,OAAO,GAAE;gBAAG;;oBAExFQ;oBACAR,2BACC,MAAClC;wBAAM0D,WAAU;wBAAMC,KAAK;wBAAGC,IAAG;;4BAC/BhC,4BACC,KAACvB;gCAAMwD,UAAS;gCAAUT,IAAI;oCAAEC,iBAAiB;oCAAeS,SAAS;gCAAE;0CAAG;;0CAIhF,MAAC9D;gCAAM0D,WAAU;gCAAMK,SAAS;gCAAKH,IAAI;gCAAGI,YAAW;;oCACpDnC,mCAAqB,KAACZ;oCACtBa,qCAAuB,KAACZ;kDACzB,KAACJ;kDACD,KAACC;;;0CAEH,KAACM;gCAAoBY,QAAQA;gCAAQgC,YAAYrC;;0CACjD,KAAC3B;gCAAO0C,SAAQ;gCAAWuB,SAASlC;0CAAqB;;;uCAK3D;kCACGG,gCACC,KAACnC;4BAAM0D,WAAU;4BAAMC,KAAK;4BAAGC,IAAG;sCAChC,cAAA,KAACzC;gCAAW+C,SAASnC;;;;;;0BAM/B,MAAC7B;gBACCkD,IAAI;oBACFD,SAAS;oBACTgB,OAAO;oBACPC,YAAY;oBACZN,SAAS,CAACR,QAAUA,MAAMS,OAAO,CAAC,GAAG,GAAG,GAAG;oBAC3CM,eAAe/B,iBAAiB,QAAQ;oBACxCgC,UAAU;oBACVX,KAAK;gBACP;;kCAEA,KAACzD;wBAAIiE,OAAM;kCACT,cAAA,KAAC7D;4BAAciE,mBAAmBhE;sCAChC,cAAA,KAACe;gCACCK,yBAAyBA;gCACzByB,IAAI;oCACFC,iBAAiB,CAAC,EAAEE,OAAO,EAAE,GAAKA,QAAQiB,UAAU,CAACC,OAAO;gCAC9D;;;;kCAIN,KAACzE;wBAAM0D,WAAU;wBAAME,IAAG;wBAAOU,UAAS;wBAAOI,gBAAe;kCAC9D,cAAA,MAAC1E;4BAAM0D,WAAU;4BAAMK,SAAS;4BAAGY,IAAI;4BAAGf,IAAI;;8CAC5C,KAAClD;8CACD,KAACF;oCAAiBiC,iBAAiBA;oCAAiBM,OAAOR;oCAAUqC,UAAU/B;;8CAC/E,KAAC7B;8CACD,KAACI;oCAAeQ,YAAY,CAACM;;;;;;;;;AAMzC,EAAE"}

package/dist/components/Panel/PanelContent.js

@@ -21,7 +21,7 @@ import { PanelPluginLoader } from './PanelPluginLoader';
  */ export function PanelContent(props) {
     const { panelPluginKind, definition, queryResults, spec, contentDimensions } = props;
     const { data: plugin, isLoading: isPanelLoading } = usePlugin('Panel', panelPluginKind, {
-        throwOnError: true
+        useErrorBoundary: true
     });
     // Show fullsize skeleton if the panel plugin is loading.
     if (isPanelLoading) {

package/dist/components/Panel/PanelContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Panel/PanelContent.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 { usePlugin, PanelProps, QueryData, PanelPlugin } from '@perses-dev/plugin-system';\nimport { UnknownSpec, PanelDefinition, QueryDataType } from '@perses-dev/core';\nimport { ReactElement } from 'react';\nimport { LoadingOverlay } from '@perses-dev/components';\nimport { Skeleton } from '@mui/material';\nimport { PanelPluginLoader } from './PanelPluginLoader';\n\nexport interface PanelContentProps extends Omit<PanelProps<UnknownSpec>, 'queryResults'> {\n  panelPluginKind: string;\n  definition?: PanelDefinition<UnknownSpec>;\n  queryResults: QueryData[];\n}\n\n/**\n * Based on the status of the queries (loading, error or data available), this component renders a\n * loading overlay, throws an error, or renders the panel content.\n */\nexport function PanelContent(props: PanelContentProps): ReactElement {\n  const { panelPluginKind, definition, queryResults, spec, contentDimensions } = props;\n  const { data: plugin, isLoading: isPanelLoading } = usePlugin('Panel', panelPluginKind, { throwOnError: true });\n\n  // Show fullsize skeleton if the panel plugin is loading.\n  if (isPanelLoading) {\n    return (\n      <Skeleton\n        variant=\"rectangular\"\n        width={contentDimensions?.width}\n        height={contentDimensions?.height}\n        aria-label=\"Loading...\"\n      />\n    );\n  }\n\n  // Render the panel if any query has data, or the panel doesn't have a query attached (for example MarkdownPanel).\n  // Loading indicator or errors of other queries are shown in the panel header.\n  const queryResultsWithData = queryResults.flatMap((q) =>\n    q.data ? [{ data: q.data, definition: q.definition }] : []\n  );\n  if (queryResultsWithData.length > 0 || queryResults.length === 0) {\n    return (\n      <PanelPluginLoader\n        kind={panelPluginKind}\n        spec={spec}\n        contentDimensions={contentDimensions}\n        definition={definition}\n        queryResults={queryResultsWithData}\n      />\n    );\n  }\n\n  // No query has data, show loading overlay if any query is fetching data.\n  if (queryResults.some((q) => q.isFetching)) {\n    return <PanelLoading plugin={plugin} spec={spec} definition={definition} contentDimensions={contentDimensions} />;\n  }\n\n  // No query has data or is loading, show the error if any query has an error.\n  // The error will be catched in <ErrorBoundary> of <Panel>.\n  const queryError = queryResults.find((q) => q.error);\n  if (queryError) {\n    throw queryError.error;\n  }\n\n  // At this point, one or more queries are defined, but no query has data, is loading, or has an error.\n  // This can happen if all queries are disabled (e.g. dependent dashboard variables are loading, or they are not in the viewport of the browser).\n  // Most likely, some query will be enabled later. Render the panel loading skeleton.\n  return <PanelLoading plugin={plugin} spec={spec} definition={definition} contentDimensions={contentDimensions} />;\n}\n\ninterface PanelLoadingProps extends Pick<PanelContentProps, 'spec' | 'definition' | 'contentDimensions'> {\n  plugin?: PanelPlugin<UnknownSpec, PanelProps<UnknownSpec, QueryDataType>>;\n}\n\nfunction PanelLoading({ plugin, spec, definition, contentDimensions }: PanelLoadingProps): ReactElement {\n  if (plugin?.LoadingComponent) {\n    return (\n      <plugin.LoadingComponent\n        spec={spec}\n        contentDimensions={contentDimensions}\n        definition={definition}\n        queryResults={[]}\n      />\n    );\n  }\n  return <LoadingOverlay />;\n}\n"],"names":["usePlugin","LoadingOverlay","Skeleton","PanelPluginLoader","PanelContent","props","panelPluginKind","definition","queryResults","spec","contentDimensions","data","plugin","isLoading","isPanelLoading","throwOnError","variant","width","height","aria-label","queryResultsWithData","flatMap","q","length","kind","some","isFetching","PanelLoading","queryError","find","error","LoadingComponent"],"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,SAASA,SAAS,QAA4C,4BAA4B;AAG1F,SAASC,cAAc,QAAQ,yBAAyB;AACxD,SAASC,QAAQ,QAAQ,gBAAgB;AACzC,SAASC,iBAAiB,QAAQ,sBAAsB;AAQxD;;;CAGC,GACD,OAAO,SAASC,aAAaC,KAAwB;IACnD,MAAM,EAAEC,eAAe,EAAEC,UAAU,EAAEC,YAAY,EAAEC,IAAI,EAAEC,iBAAiB,EAAE,GAAGL;IAC/E,MAAM,EAAEM,MAAMC,MAAM,EAAEC,WAAWC,cAAc,EAAE,GAAGd,UAAU,SAASM,iBAAiB;QAAES,cAAc;IAAK;IAE7G,yDAAyD;IACzD,IAAID,gBAAgB;QAClB,qBACE,KAACZ;YACCc,SAAQ;YACRC,OAAOP,mBAAmBO;YAC1BC,QAAQR,mBAAmBQ;YAC3BC,cAAW;;IAGjB;IAEA,kHAAkH;IAClH,8EAA8E;IAC9E,MAAMC,uBAAuBZ,aAAaa,OAAO,CAAC,CAACC,IACjDA,EAAEX,IAAI,GAAG;YAAC;gBAAEA,MAAMW,EAAEX,IAAI;gBAAEJ,YAAYe,EAAEf,UAAU;YAAC;SAAE,GAAG,EAAE;IAE5D,IAAIa,qBAAqBG,MAAM,GAAG,KAAKf,aAAae,MAAM,KAAK,GAAG;QAChE,qBACE,KAACpB;YACCqB,MAAMlB;YACNG,MAAMA;YACNC,mBAAmBA;YACnBH,YAAYA;YACZC,cAAcY;;IAGpB;IAEA,yEAAyE;IACzE,IAAIZ,aAAaiB,IAAI,CAAC,CAACH,IAAMA,EAAEI,UAAU,GAAG;QAC1C,qBAAO,KAACC;YAAaf,QAAQA;YAAQH,MAAMA;YAAMF,YAAYA;YAAYG,mBAAmBA;;IAC9F;IAEA,6EAA6E;IAC7E,2DAA2D;IAC3D,MAAMkB,aAAapB,aAAaqB,IAAI,CAAC,CAACP,IAAMA,EAAEQ,KAAK;IACnD,IAAIF,YAAY;QACd,MAAMA,WAAWE,KAAK;IACxB;IAEA,sGAAsG;IACtG,gJAAgJ;IAChJ,oFAAoF;IACpF,qBAAO,KAACH;QAAaf,QAAQA;QAAQH,MAAMA;QAAMF,YAAYA;QAAYG,mBAAmBA;;AAC9F;AAMA,SAASiB,aAAa,EAAEf,MAAM,EAAEH,IAAI,EAAEF,UAAU,EAAEG,iBAAiB,EAAqB;IACtF,IAAIE,QAAQmB,kBAAkB;QAC5B,qBACE,KAACnB,OAAOmB,gBAAgB;YACtBtB,MAAMA;YACNC,mBAAmBA;YACnBH,YAAYA;YACZC,cAAc,EAAE;;IAGtB;IACA,qBAAO,KAACP;AACV"}
+{"version":3,"sources":["../../../src/components/Panel/PanelContent.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 { usePlugin, PanelProps, QueryData, PanelPlugin } from '@perses-dev/plugin-system';\nimport { UnknownSpec, PanelDefinition, QueryDataType } from '@perses-dev/core';\nimport { ReactElement } from 'react';\nimport { LoadingOverlay } from '@perses-dev/components';\nimport { Skeleton } from '@mui/material';\nimport { PanelPluginLoader } from './PanelPluginLoader';\n\nexport interface PanelContentProps extends Omit<PanelProps<UnknownSpec>, 'queryResults'> {\n  panelPluginKind: string;\n  definition?: PanelDefinition<UnknownSpec>;\n  queryResults: QueryData[];\n}\n\n/**\n * Based on the status of the queries (loading, error or data available), this component renders a\n * loading overlay, throws an error, or renders the panel content.\n */\nexport function PanelContent(props: PanelContentProps): ReactElement {\n  const { panelPluginKind, definition, queryResults, spec, contentDimensions } = props;\n  const { data: plugin, isLoading: isPanelLoading } = usePlugin('Panel', panelPluginKind, { useErrorBoundary: true });\n\n  // Show fullsize skeleton if the panel plugin is loading.\n  if (isPanelLoading) {\n    return (\n      <Skeleton\n        variant=\"rectangular\"\n        width={contentDimensions?.width}\n        height={contentDimensions?.height}\n        aria-label=\"Loading...\"\n      />\n    );\n  }\n\n  // Render the panel if any query has data, or the panel doesn't have a query attached (for example MarkdownPanel).\n  // Loading indicator or errors of other queries are shown in the panel header.\n  const queryResultsWithData = queryResults.flatMap((q) =>\n    q.data ? [{ data: q.data, definition: q.definition }] : []\n  );\n  if (queryResultsWithData.length > 0 || queryResults.length === 0) {\n    return (\n      <PanelPluginLoader\n        kind={panelPluginKind}\n        spec={spec}\n        contentDimensions={contentDimensions}\n        definition={definition}\n        queryResults={queryResultsWithData}\n      />\n    );\n  }\n\n  // No query has data, show loading overlay if any query is fetching data.\n  if (queryResults.some((q) => q.isFetching)) {\n    return <PanelLoading plugin={plugin} spec={spec} definition={definition} contentDimensions={contentDimensions} />;\n  }\n\n  // No query has data or is loading, show the error if any query has an error.\n  // The error will be catched in <ErrorBoundary> of <Panel>.\n  const queryError = queryResults.find((q) => q.error);\n  if (queryError) {\n    throw queryError.error;\n  }\n\n  // At this point, one or more queries are defined, but no query has data, is loading, or has an error.\n  // This can happen if all queries are disabled (e.g. dependent dashboard variables are loading, or they are not in the viewport of the browser).\n  // Most likely, some query will be enabled later. Render the panel loading skeleton.\n  return <PanelLoading plugin={plugin} spec={spec} definition={definition} contentDimensions={contentDimensions} />;\n}\n\ninterface PanelLoadingProps extends Pick<PanelContentProps, 'spec' | 'definition' | 'contentDimensions'> {\n  plugin?: PanelPlugin<UnknownSpec, PanelProps<UnknownSpec, QueryDataType>>;\n}\n\nfunction PanelLoading({ plugin, spec, definition, contentDimensions }: PanelLoadingProps): ReactElement {\n  if (plugin?.LoadingComponent) {\n    return (\n      <plugin.LoadingComponent\n        spec={spec}\n        contentDimensions={contentDimensions}\n        definition={definition}\n        queryResults={[]}\n      />\n    );\n  }\n  return <LoadingOverlay />;\n}\n"],"names":["usePlugin","LoadingOverlay","Skeleton","PanelPluginLoader","PanelContent","props","panelPluginKind","definition","queryResults","spec","contentDimensions","data","plugin","isLoading","isPanelLoading","useErrorBoundary","variant","width","height","aria-label","queryResultsWithData","flatMap","q","length","kind","some","isFetching","PanelLoading","queryError","find","error","LoadingComponent"],"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,SAASA,SAAS,QAA4C,4BAA4B;AAG1F,SAASC,cAAc,QAAQ,yBAAyB;AACxD,SAASC,QAAQ,QAAQ,gBAAgB;AACzC,SAASC,iBAAiB,QAAQ,sBAAsB;AAQxD;;;CAGC,GACD,OAAO,SAASC,aAAaC,KAAwB;IACnD,MAAM,EAAEC,eAAe,EAAEC,UAAU,EAAEC,YAAY,EAAEC,IAAI,EAAEC,iBAAiB,EAAE,GAAGL;IAC/E,MAAM,EAAEM,MAAMC,MAAM,EAAEC,WAAWC,cAAc,EAAE,GAAGd,UAAU,SAASM,iBAAiB;QAAES,kBAAkB;IAAK;IAEjH,yDAAyD;IACzD,IAAID,gBAAgB;QAClB,qBACE,KAACZ;YACCc,SAAQ;YACRC,OAAOP,mBAAmBO;YAC1BC,QAAQR,mBAAmBQ;YAC3BC,cAAW;;IAGjB;IAEA,kHAAkH;IAClH,8EAA8E;IAC9E,MAAMC,uBAAuBZ,aAAaa,OAAO,CAAC,CAACC,IACjDA,EAAEX,IAAI,GAAG;YAAC;gBAAEA,MAAMW,EAAEX,IAAI;gBAAEJ,YAAYe,EAAEf,UAAU;YAAC;SAAE,GAAG,EAAE;IAE5D,IAAIa,qBAAqBG,MAAM,GAAG,KAAKf,aAAae,MAAM,KAAK,GAAG;QAChE,qBACE,KAACpB;YACCqB,MAAMlB;YACNG,MAAMA;YACNC,mBAAmBA;YACnBH,YAAYA;YACZC,cAAcY;;IAGpB;IAEA,yEAAyE;IACzE,IAAIZ,aAAaiB,IAAI,CAAC,CAACH,IAAMA,EAAEI,UAAU,GAAG;QAC1C,qBAAO,KAACC;YAAaf,QAAQA;YAAQH,MAAMA;YAAMF,YAAYA;YAAYG,mBAAmBA;;IAC9F;IAEA,6EAA6E;IAC7E,2DAA2D;IAC3D,MAAMkB,aAAapB,aAAaqB,IAAI,CAAC,CAACP,IAAMA,EAAEQ,KAAK;IACnD,IAAIF,YAAY;QACd,MAAMA,WAAWE,KAAK;IACxB;IAEA,sGAAsG;IACtG,gJAAgJ;IAChJ,oFAAoF;IACpF,qBAAO,KAACH;QAAaf,QAAQA;QAAQH,MAAMA;QAAMF,YAAYA;QAAYG,mBAAmBA;;AAC9F;AAMA,SAASiB,aAAa,EAAEf,MAAM,EAAEH,IAAI,EAAEF,UAAU,EAAEG,iBAAiB,EAAqB;IACtF,IAAIE,QAAQmB,kBAAkB;QAC5B,qBACE,KAACnB,OAAOmB,gBAAgB;YACtBtB,MAAMA;YACNC,mBAAmBA;YACnBH,YAAYA;YACZC,cAAc,EAAE;;IAGtB;IACA,qBAAO,KAACP;AACV"}

package/dist/components/Panel/PanelPluginLoader.js

@@ -19,7 +19,7 @@ import { Skeleton } from '@mui/material';
  */ export function PanelPluginLoader(props) {
     const { kind, spec, contentDimensions, definition, queryResults } = props;
     const { data: plugin, isLoading: isPanelLoading } = usePlugin('Panel', kind, {
-        throwOnError: true
+        useErrorBoundary: true
     });
     const PanelComponent = plugin?.PanelComponent;
     const supportedQueryTypes = plugin?.supportedQueryTypes || [];

package/dist/components/Panel/PanelPluginLoader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Panel/PanelPluginLoader.tsx"],"sourcesContent":["// Copyright 2025 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 { usePlugin, PanelProps } from '@perses-dev/plugin-system';\nimport { UnknownSpec, QueryDataType } from '@perses-dev/core';\nimport { ReactElement } from 'react';\nimport { Skeleton } from '@mui/material';\n\ninterface PanelPluginProps extends PanelProps<UnknownSpec, QueryDataType> {\n  kind: string;\n}\n\n/**\n * PanelPluginLoader loads the panel plugin specified by the 'kind' prop from the plugin registry and\n * renders its PanelComponent.\n */\nexport function PanelPluginLoader(props: PanelPluginProps): ReactElement {\n  const { kind, spec, contentDimensions, definition, queryResults } = props;\n  const { data: plugin, isLoading: isPanelLoading } = usePlugin('Panel', kind, { throwOnError: true });\n  const PanelComponent = plugin?.PanelComponent;\n  const supportedQueryTypes = plugin?.supportedQueryTypes || [];\n\n  // Show fullsize skeleton if the panel plugin is loading.\n  if (isPanelLoading) {\n    return (\n      <Skeleton\n        variant=\"rectangular\"\n        width={contentDimensions?.width}\n        height={contentDimensions?.height}\n        aria-label=\"Loading...\"\n      />\n    );\n  }\n\n  if (PanelComponent === undefined) {\n    throw new Error(`Missing PanelComponent from panel plugin for kind '${kind}'`);\n  }\n\n  for (const queryResult of queryResults) {\n    if (!supportedQueryTypes.includes(queryResult.definition.kind)) {\n      throw new Error(\n        `This panel does not support queries of type '${queryResult.definition.kind}'. Supported query types: ${supportedQueryTypes.join(', ')}.`\n      );\n    }\n  }\n\n  return (\n    <PanelComponent\n      spec={spec}\n      contentDimensions={contentDimensions}\n      definition={definition}\n      queryResults={queryResults}\n    />\n  );\n}\n"],"names":["usePlugin","Skeleton","PanelPluginLoader","props","kind","spec","contentDimensions","definition","queryResults","data","plugin","isLoading","isPanelLoading","throwOnError","PanelComponent","supportedQueryTypes","variant","width","height","aria-label","undefined","Error","queryResult","includes","join"],"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,SAASA,SAAS,QAAoB,4BAA4B;AAGlE,SAASC,QAAQ,QAAQ,gBAAgB;AAMzC;;;CAGC,GACD,OAAO,SAASC,kBAAkBC,KAAuB;IACvD,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAEC,iBAAiB,EAAEC,UAAU,EAAEC,YAAY,EAAE,GAAGL;IACpE,MAAM,EAAEM,MAAMC,MAAM,EAAEC,WAAWC,cAAc,EAAE,GAAGZ,UAAU,SAASI,MAAM;QAAES,cAAc;IAAK;IAClG,MAAMC,iBAAiBJ,QAAQI;IAC/B,MAAMC,sBAAsBL,QAAQK,uBAAuB,EAAE;IAE7D,yDAAyD;IACzD,IAAIH,gBAAgB;QAClB,qBACE,KAACX;YACCe,SAAQ;YACRC,OAAOX,mBAAmBW;YAC1BC,QAAQZ,mBAAmBY;YAC3BC,cAAW;;IAGjB;IAEA,IAAIL,mBAAmBM,WAAW;QAChC,MAAM,IAAIC,MAAM,CAAC,mDAAmD,EAAEjB,KAAK,CAAC,CAAC;IAC/E;IAEA,KAAK,MAAMkB,eAAed,aAAc;QACtC,IAAI,CAACO,oBAAoBQ,QAAQ,CAACD,YAAYf,UAAU,CAACH,IAAI,GAAG;YAC9D,MAAM,IAAIiB,MACR,CAAC,6CAA6C,EAAEC,YAAYf,UAAU,CAACH,IAAI,CAAC,0BAA0B,EAAEW,oBAAoBS,IAAI,CAAC,MAAM,CAAC,CAAC;QAE7I;IACF;IAEA,qBACE,KAACV;QACCT,MAAMA;QACNC,mBAAmBA;QACnBC,YAAYA;QACZC,cAAcA;;AAGpB"}
+{"version":3,"sources":["../../../src/components/Panel/PanelPluginLoader.tsx"],"sourcesContent":["// Copyright 2025 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 { usePlugin, PanelProps } from '@perses-dev/plugin-system';\nimport { UnknownSpec, QueryDataType } from '@perses-dev/core';\nimport { ReactElement } from 'react';\nimport { Skeleton } from '@mui/material';\n\ninterface PanelPluginProps extends PanelProps<UnknownSpec, QueryDataType> {\n  kind: string;\n}\n\n/**\n * PanelPluginLoader loads the panel plugin specified by the 'kind' prop from the plugin registry and\n * renders its PanelComponent.\n */\nexport function PanelPluginLoader(props: PanelPluginProps): ReactElement {\n  const { kind, spec, contentDimensions, definition, queryResults } = props;\n  const { data: plugin, isLoading: isPanelLoading } = usePlugin('Panel', kind, { useErrorBoundary: true });\n  const PanelComponent = plugin?.PanelComponent;\n  const supportedQueryTypes = plugin?.supportedQueryTypes || [];\n\n  // Show fullsize skeleton if the panel plugin is loading.\n  if (isPanelLoading) {\n    return (\n      <Skeleton\n        variant=\"rectangular\"\n        width={contentDimensions?.width}\n        height={contentDimensions?.height}\n        aria-label=\"Loading...\"\n      />\n    );\n  }\n\n  if (PanelComponent === undefined) {\n    throw new Error(`Missing PanelComponent from panel plugin for kind '${kind}'`);\n  }\n\n  for (const queryResult of queryResults) {\n    if (!supportedQueryTypes.includes(queryResult.definition.kind)) {\n      throw new Error(\n        `This panel does not support queries of type '${queryResult.definition.kind}'. Supported query types: ${supportedQueryTypes.join(', ')}.`\n      );\n    }\n  }\n\n  return (\n    <PanelComponent\n      spec={spec}\n      contentDimensions={contentDimensions}\n      definition={definition}\n      queryResults={queryResults}\n    />\n  );\n}\n"],"names":["usePlugin","Skeleton","PanelPluginLoader","props","kind","spec","contentDimensions","definition","queryResults","data","plugin","isLoading","isPanelLoading","useErrorBoundary","PanelComponent","supportedQueryTypes","variant","width","height","aria-label","undefined","Error","queryResult","includes","join"],"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,SAASA,SAAS,QAAoB,4BAA4B;AAGlE,SAASC,QAAQ,QAAQ,gBAAgB;AAMzC;;;CAGC,GACD,OAAO,SAASC,kBAAkBC,KAAuB;IACvD,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAEC,iBAAiB,EAAEC,UAAU,EAAEC,YAAY,EAAE,GAAGL;IACpE,MAAM,EAAEM,MAAMC,MAAM,EAAEC,WAAWC,cAAc,EAAE,GAAGZ,UAAU,SAASI,MAAM;QAAES,kBAAkB;IAAK;IACtG,MAAMC,iBAAiBJ,QAAQI;IAC/B,MAAMC,sBAAsBL,QAAQK,uBAAuB,EAAE;IAE7D,yDAAyD;IACzD,IAAIH,gBAAgB;QAClB,qBACE,KAACX;YACCe,SAAQ;YACRC,OAAOX,mBAAmBW;YAC1BC,QAAQZ,mBAAmBY;YAC3BC,cAAW;;IAGjB;IAEA,IAAIL,mBAAmBM,WAAW;QAChC,MAAM,IAAIC,MAAM,CAAC,mDAAmD,EAAEjB,KAAK,CAAC,CAAC;IAC/E;IAEA,KAAK,MAAMkB,eAAed,aAAc;QACtC,IAAI,CAACO,oBAAoBQ,QAAQ,CAACD,YAAYf,UAAU,CAACH,IAAI,GAAG;YAC9D,MAAM,IAAIiB,MACR,CAAC,6CAA6C,EAAEC,YAAYf,UAAU,CAACH,IAAI,CAAC,0BAA0B,EAAEW,oBAAoBS,IAAI,CAAC,MAAM,CAAC,CAAC;QAE7I;IACF;IAEA,qBACE,KAACV;QACCT,MAAMA;QACNC,mBAAmBA;QACnBC,YAAYA;QACZC,cAAcA;;AAGpB"}

package/dist/components/PanelDrawer/PanelPreview.js

@@ -24,8 +24,8 @@ export function PanelPreview({ panelDefinition }) {
         width = boxRef.current.getBoundingClientRect().width;
     }
     const suggestedStepMs = useSuggestedStepMs(width);
-    const { data: plugin, isPending } = usePlugin('Panel', panelDefinition.spec.plugin.kind);
-    if (isPending) {
+    const { data: plugin, isLoading } = usePlugin('Panel', panelDefinition.spec.plugin.kind);
+    if (isLoading) {
         return null;
     }
     if (panelDefinition.spec.plugin.kind === '') {

package/dist/components/PanelDrawer/PanelPreview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelDrawer/PanelPreview.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 { ReactElement, useRef } from 'react';\nimport { Box } from '@mui/material';\nimport { DataQueriesProvider, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';\nimport { PanelEditorValues } from '@perses-dev/core';\nimport { Panel } from '../Panel';\n\nconst PANEL_PREVIEW_HEIGHT = 300;\nconst PANEL_PREVIEW_DEFAULT_WIDTH = 840;\n\nexport function PanelPreview({ panelDefinition }: Pick<PanelEditorValues, 'panelDefinition'>): ReactElement | null {\n  const boxRef = useRef<HTMLDivElement>(null);\n  let width = PANEL_PREVIEW_DEFAULT_WIDTH;\n  if (boxRef.current !== null) {\n    width = boxRef.current.getBoundingClientRect().width;\n  }\n  const suggestedStepMs = useSuggestedStepMs(width);\n\n  const { data: plugin, isPending } = usePlugin('Panel', panelDefinition.spec.plugin.kind);\n  if (isPending) {\n    return null;\n  }\n\n  if (panelDefinition.spec.plugin.kind === '') {\n    return null;\n  }\n\n  const queries = panelDefinition.spec.queries ?? [];\n\n  // map TimeSeriesQueryDefinition to Definition<UnknownSpec>\n  const definitions = queries.length\n    ? queries.map((query) => {\n        return {\n          kind: query.spec.plugin.kind,\n          spec: query.spec.plugin.spec,\n        };\n      })\n    : [];\n\n  return (\n    <Box ref={boxRef} height={PANEL_PREVIEW_HEIGHT}>\n      <DataQueriesProvider definitions={definitions} options={{ suggestedStepMs, ...plugin?.queryOptions }}>\n        <Panel definition={panelDefinition} />\n      </DataQueriesProvider>\n    </Box>\n  );\n}\n"],"names":["useRef","Box","DataQueriesProvider","usePlugin","useSuggestedStepMs","Panel","PANEL_PREVIEW_HEIGHT","PANEL_PREVIEW_DEFAULT_WIDTH","PanelPreview","panelDefinition","boxRef","width","current","getBoundingClientRect","suggestedStepMs","data","plugin","isPending","spec","kind","queries","definitions","length","map","query","ref","height","options","queryOptions","definition"],"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,SAAuBA,MAAM,QAAQ,QAAQ;AAC7C,SAASC,GAAG,QAAQ,gBAAgB;AACpC,SAASC,mBAAmB,EAAEC,SAAS,EAAEC,kBAAkB,QAAQ,4BAA4B;AAE/F,SAASC,KAAK,QAAQ,WAAW;AAEjC,MAAMC,uBAAuB;AAC7B,MAAMC,8BAA8B;AAEpC,OAAO,SAASC,aAAa,EAAEC,eAAe,EAA8C;IAC1F,MAAMC,SAASV,OAAuB;IACtC,IAAIW,QAAQJ;IACZ,IAAIG,OAAOE,OAAO,KAAK,MAAM;QAC3BD,QAAQD,OAAOE,OAAO,CAACC,qBAAqB,GAAGF,KAAK;IACtD;IACA,MAAMG,kBAAkBV,mBAAmBO;IAE3C,MAAM,EAAEI,MAAMC,MAAM,EAAEC,SAAS,EAAE,GAAGd,UAAU,SAASM,gBAAgBS,IAAI,CAACF,MAAM,CAACG,IAAI;IACvF,IAAIF,WAAW;QACb,OAAO;IACT;IAEA,IAAIR,gBAAgBS,IAAI,CAACF,MAAM,CAACG,IAAI,KAAK,IAAI;QAC3C,OAAO;IACT;IAEA,MAAMC,UAAUX,gBAAgBS,IAAI,CAACE,OAAO,IAAI,EAAE;IAElD,2DAA2D;IAC3D,MAAMC,cAAcD,QAAQE,MAAM,GAC9BF,QAAQG,GAAG,CAAC,CAACC;QACX,OAAO;YACLL,MAAMK,MAAMN,IAAI,CAACF,MAAM,CAACG,IAAI;YAC5BD,MAAMM,MAAMN,IAAI,CAACF,MAAM,CAACE,IAAI;QAC9B;IACF,KACA,EAAE;IAEN,qBACE,KAACjB;QAAIwB,KAAKf;QAAQgB,QAAQpB;kBACxB,cAAA,KAACJ;YAAoBmB,aAAaA;YAAaM,SAAS;gBAAEb;gBAAiB,GAAGE,QAAQY,YAAY;YAAC;sBACjG,cAAA,KAACvB;gBAAMwB,YAAYpB;;;;AAI3B"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelPreview.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 { ReactElement, useRef } from 'react';\nimport { Box } from '@mui/material';\nimport { DataQueriesProvider, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';\nimport { PanelEditorValues } from '@perses-dev/core';\nimport { Panel } from '../Panel';\n\nconst PANEL_PREVIEW_HEIGHT = 300;\nconst PANEL_PREVIEW_DEFAULT_WIDTH = 840;\n\nexport function PanelPreview({ panelDefinition }: Pick<PanelEditorValues, 'panelDefinition'>): ReactElement | null {\n  const boxRef = useRef<HTMLDivElement>(null);\n  let width = PANEL_PREVIEW_DEFAULT_WIDTH;\n  if (boxRef.current !== null) {\n    width = boxRef.current.getBoundingClientRect().width;\n  }\n  const suggestedStepMs = useSuggestedStepMs(width);\n\n  const { data: plugin, isLoading } = usePlugin('Panel', panelDefinition.spec.plugin.kind);\n  if (isLoading) {\n    return null;\n  }\n\n  if (panelDefinition.spec.plugin.kind === '') {\n    return null;\n  }\n\n  const queries = panelDefinition.spec.queries ?? [];\n\n  // map TimeSeriesQueryDefinition to Definition<UnknownSpec>\n  const definitions = queries.length\n    ? queries.map((query) => {\n        return {\n          kind: query.spec.plugin.kind,\n          spec: query.spec.plugin.spec,\n        };\n      })\n    : [];\n\n  return (\n    <Box ref={boxRef} height={PANEL_PREVIEW_HEIGHT}>\n      <DataQueriesProvider definitions={definitions} options={{ suggestedStepMs, ...plugin?.queryOptions }}>\n        <Panel definition={panelDefinition} />\n      </DataQueriesProvider>\n    </Box>\n  );\n}\n"],"names":["useRef","Box","DataQueriesProvider","usePlugin","useSuggestedStepMs","Panel","PANEL_PREVIEW_HEIGHT","PANEL_PREVIEW_DEFAULT_WIDTH","PanelPreview","panelDefinition","boxRef","width","current","getBoundingClientRect","suggestedStepMs","data","plugin","isLoading","spec","kind","queries","definitions","length","map","query","ref","height","options","queryOptions","definition"],"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,SAAuBA,MAAM,QAAQ,QAAQ;AAC7C,SAASC,GAAG,QAAQ,gBAAgB;AACpC,SAASC,mBAAmB,EAAEC,SAAS,EAAEC,kBAAkB,QAAQ,4BAA4B;AAE/F,SAASC,KAAK,QAAQ,WAAW;AAEjC,MAAMC,uBAAuB;AAC7B,MAAMC,8BAA8B;AAEpC,OAAO,SAASC,aAAa,EAAEC,eAAe,EAA8C;IAC1F,MAAMC,SAASV,OAAuB;IACtC,IAAIW,QAAQJ;IACZ,IAAIG,OAAOE,OAAO,KAAK,MAAM;QAC3BD,QAAQD,OAAOE,OAAO,CAACC,qBAAqB,GAAGF,KAAK;IACtD;IACA,MAAMG,kBAAkBV,mBAAmBO;IAE3C,MAAM,EAAEI,MAAMC,MAAM,EAAEC,SAAS,EAAE,GAAGd,UAAU,SAASM,gBAAgBS,IAAI,CAACF,MAAM,CAACG,IAAI;IACvF,IAAIF,WAAW;QACb,OAAO;IACT;IAEA,IAAIR,gBAAgBS,IAAI,CAACF,MAAM,CAACG,IAAI,KAAK,IAAI;QAC3C,OAAO;IACT;IAEA,MAAMC,UAAUX,gBAAgBS,IAAI,CAACE,OAAO,IAAI,EAAE;IAElD,2DAA2D;IAC3D,MAAMC,cAAcD,QAAQE,MAAM,GAC9BF,QAAQG,GAAG,CAAC,CAACC;QACX,OAAO;YACLL,MAAMK,MAAMN,IAAI,CAACF,MAAM,CAACG,IAAI;YAC5BD,MAAMM,MAAMN,IAAI,CAACF,MAAM,CAACE,IAAI;QAC9B;IACF,KACA,EAAE;IAEN,qBACE,KAACjB;QAAIwB,KAAKf;QAAQgB,QAAQpB;kBACxB,cAAA,KAACJ;YAAoBmB,aAAaA;YAAaM,SAAS;gBAAEb;gBAAiB,GAAGE,QAAQY,YAAY;YAAC;sBACjG,cAAA,KAACvB;gBAAMwB,YAAYpB;;;;AAI3B"}

package/dist/components/QuerySummaryTable/QuerySummaryTable.js

@@ -24,7 +24,7 @@ export function QuerySummaryTable(props) {
     // for displaying a summary of recent query results
     const queryClient = useQueryClient();
     const queries = queryClient.getQueryCache().findAll();
-    const activeQueries = queries.filter((query)=>query.state.status === 'pending');
+    const activeQueries = queries.filter((query)=>query.state.status === 'loading');
     const completedQueries = queries.filter((query)=>query.state.status === 'success');
     const querySummary = useActiveTimeSeriesQueries();
     if (datasourceClient.isLoading === true) {

package/dist/components/QuerySummaryTable/QuerySummaryTable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/QuerySummaryTable/QuerySummaryTable.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 {\n  Box,\n  Button,\n  Paper,\n  Table,\n  TableBody,\n  TableCell,\n  TableContainer,\n  TableHead,\n  TableRow,\n  Typography,\n  Stack,\n} from '@mui/material';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { TimeSeriesQueryDefinition, UnknownSpec } from '@perses-dev/core';\nimport { useActiveTimeSeriesQueries, useDatasourceClient, useTimeRange } from '@perses-dev/plugin-system';\nimport { ReactElement } from 'react';\n\nexport interface WarningDisplay {\n  query: string;\n  summary: string;\n}\n\nconst TABLE_MAX_WIDTH = 1000;\n\ninterface QuerySummaryTableProps {\n  showTotalQueries?: boolean;\n}\n\nexport function QuerySummaryTable(props: QuerySummaryTableProps): ReactElement | null {\n  const { showTotalQueries = true } = props;\n  const datasourceClient = useDatasourceClient({ kind: 'PrometheusDatasource' });\n  const { absoluteTimeRange } = useTimeRange();\n\n  // for displaying a summary of recent query results\n  const queryClient = useQueryClient();\n  const queries = queryClient.getQueryCache().findAll();\n  const activeQueries = queries.filter((query) => query.state.status === 'pending');\n  const completedQueries = queries.filter((query) => query.state.status === 'success');\n  const querySummary = useActiveTimeSeriesQueries();\n\n  if (datasourceClient.isLoading === true) {\n    return null;\n  }\n\n  const warnings: WarningDisplay[] = [];\n  querySummary.forEach((query) => {\n    const queryData = query.state.data;\n    if (queryData && queryData.metadata?.notices) {\n      const queryKey = query.queryKey as [TimeSeriesQueryDefinition<UnknownSpec>];\n      const warningMessage = queryData.metadata.notices[0]?.message;\n      if (warningMessage) {\n        warnings.push({\n          query: String(queryKey[0].spec.plugin.spec.query),\n          summary: warningMessage,\n        });\n      }\n    }\n  });\n\n  return (\n    <Stack\n      spacing={1}\n      mb={2}\n      sx={{\n        maxWidth: TABLE_MAX_WIDTH,\n      }}\n    >\n      <Box sx={{ p: 1 }}>\n        <Typography variant=\"h2\" mb={1}>\n          Query Summary\n        </Typography>\n        <TableContainer component={Paper}>\n          <Table size=\"small\" aria-label=\"query summary table\">\n            <TableHead>\n              <TableRow>\n                <TableCell>Queries Loading</TableCell>\n                <TableCell>Recent Time Series Queries</TableCell>\n                {showTotalQueries && <TableCell>Total Queries</TableCell>}\n                <TableCell>Start Time</TableCell>\n                <TableCell>End Time</TableCell>\n              </TableRow>\n            </TableHead>\n            <TableBody>\n              <TableRow>\n                <TableCell>{activeQueries.length}</TableCell>\n                <TableCell>{querySummary.length}</TableCell>\n                {showTotalQueries && <TableCell>{completedQueries.length}</TableCell>}\n                <TableCell>{absoluteTimeRange.start.toString()}</TableCell>\n                <TableCell>{absoluteTimeRange.end.toString()}</TableCell>\n              </TableRow>\n            </TableBody>\n          </Table>\n        </TableContainer>\n      </Box>\n\n      {warnings.length > 0 && (\n        <Box sx={{ p: 1, m: 0 }}>\n          <Typography variant=\"h3\" mb={1}>\n            Warnings\n          </Typography>\n          <TableContainer component={Paper} sx={{ mb: 2 }}>\n            <Table size=\"small\" aria-label=\"query warnings table\">\n              <TableHead>\n                <TableRow>\n                  <TableCell>Query</TableCell>\n                  <TableCell>Summary</TableCell>\n                </TableRow>\n              </TableHead>\n              <TableBody>\n                {warnings.map((details, idx) => {\n                  return (\n                    <TableRow key={idx}>\n                      <TableCell>{details.query}</TableCell>\n                      <TableCell>{details.summary}</TableCell>\n                    </TableRow>\n                  );\n                })}\n              </TableBody>\n            </Table>\n          </TableContainer>\n          <Button disabled variant=\"outlined\">\n            TODO: Action Button\n          </Button>\n        </Box>\n      )}\n    </Stack>\n  );\n}\n"],"names":["Box","Button","Paper","Table","TableBody","TableCell","TableContainer","TableHead","TableRow","Typography","Stack","useQueryClient","useActiveTimeSeriesQueries","useDatasourceClient","useTimeRange","TABLE_MAX_WIDTH","QuerySummaryTable","props","showTotalQueries","datasourceClient","kind","absoluteTimeRange","queryClient","queries","getQueryCache","findAll","activeQueries","filter","query","state","status","completedQueries","querySummary","isLoading","warnings","forEach","queryData","data","metadata","notices","queryKey","warningMessage","message","push","String","spec","plugin","summary","spacing","mb","sx","maxWidth","p","variant","component","size","aria-label","length","start","toString","end","m","map","details","idx","disabled"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/QuerySummaryTable/QuerySummaryTable.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 {\n  Box,\n  Button,\n  Paper,\n  Table,\n  TableBody,\n  TableCell,\n  TableContainer,\n  TableHead,\n  TableRow,\n  Typography,\n  Stack,\n} from '@mui/material';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { TimeSeriesQueryDefinition, UnknownSpec } from '@perses-dev/core';\nimport { useActiveTimeSeriesQueries, useDatasourceClient, useTimeRange } from '@perses-dev/plugin-system';\nimport { ReactElement } from 'react';\n\nexport interface WarningDisplay {\n  query: string;\n  summary: string;\n}\n\nconst TABLE_MAX_WIDTH = 1000;\n\ninterface QuerySummaryTableProps {\n  showTotalQueries?: boolean;\n}\n\nexport function QuerySummaryTable(props: QuerySummaryTableProps): ReactElement | null {\n  const { showTotalQueries = true } = props;\n  const datasourceClient = useDatasourceClient({ kind: 'PrometheusDatasource' });\n  const { absoluteTimeRange } = useTimeRange();\n\n  // for displaying a summary of recent query results\n  const queryClient = useQueryClient();\n  const queries = queryClient.getQueryCache().findAll();\n  const activeQueries = queries.filter((query) => query.state.status === 'loading');\n  const completedQueries = queries.filter((query) => query.state.status === 'success');\n  const querySummary = useActiveTimeSeriesQueries();\n\n  if (datasourceClient.isLoading === true) {\n    return null;\n  }\n\n  const warnings: WarningDisplay[] = [];\n  querySummary.forEach((query) => {\n    const queryData = query.state.data;\n    if (queryData && queryData.metadata?.notices) {\n      const queryKey = query.queryKey as [TimeSeriesQueryDefinition<UnknownSpec>];\n      const warningMessage = queryData.metadata.notices[0]?.message;\n      if (warningMessage) {\n        warnings.push({\n          query: String(queryKey[0].spec.plugin.spec.query),\n          summary: warningMessage,\n        });\n      }\n    }\n  });\n\n  return (\n    <Stack\n      spacing={1}\n      mb={2}\n      sx={{\n        maxWidth: TABLE_MAX_WIDTH,\n      }}\n    >\n      <Box sx={{ p: 1 }}>\n        <Typography variant=\"h2\" mb={1}>\n          Query Summary\n        </Typography>\n        <TableContainer component={Paper}>\n          <Table size=\"small\" aria-label=\"query summary table\">\n            <TableHead>\n              <TableRow>\n                <TableCell>Queries Loading</TableCell>\n                <TableCell>Recent Time Series Queries</TableCell>\n                {showTotalQueries && <TableCell>Total Queries</TableCell>}\n                <TableCell>Start Time</TableCell>\n                <TableCell>End Time</TableCell>\n              </TableRow>\n            </TableHead>\n            <TableBody>\n              <TableRow>\n                <TableCell>{activeQueries.length}</TableCell>\n                <TableCell>{querySummary.length}</TableCell>\n                {showTotalQueries && <TableCell>{completedQueries.length}</TableCell>}\n                <TableCell>{absoluteTimeRange.start.toString()}</TableCell>\n                <TableCell>{absoluteTimeRange.end.toString()}</TableCell>\n              </TableRow>\n            </TableBody>\n          </Table>\n        </TableContainer>\n      </Box>\n\n      {warnings.length > 0 && (\n        <Box sx={{ p: 1, m: 0 }}>\n          <Typography variant=\"h3\" mb={1}>\n            Warnings\n          </Typography>\n          <TableContainer component={Paper} sx={{ mb: 2 }}>\n            <Table size=\"small\" aria-label=\"query warnings table\">\n              <TableHead>\n                <TableRow>\n                  <TableCell>Query</TableCell>\n                  <TableCell>Summary</TableCell>\n                </TableRow>\n              </TableHead>\n              <TableBody>\n                {warnings.map((details, idx) => {\n                  return (\n                    <TableRow key={idx}>\n                      <TableCell>{details.query}</TableCell>\n                      <TableCell>{details.summary}</TableCell>\n                    </TableRow>\n                  );\n                })}\n              </TableBody>\n            </Table>\n          </TableContainer>\n          <Button disabled variant=\"outlined\">\n            TODO: Action Button\n          </Button>\n        </Box>\n      )}\n    </Stack>\n  );\n}\n"],"names":["Box","Button","Paper","Table","TableBody","TableCell","TableContainer","TableHead","TableRow","Typography","Stack","useQueryClient","useActiveTimeSeriesQueries","useDatasourceClient","useTimeRange","TABLE_MAX_WIDTH","QuerySummaryTable","props","showTotalQueries","datasourceClient","kind","absoluteTimeRange","queryClient","queries","getQueryCache","findAll","activeQueries","filter","query","state","status","completedQueries","querySummary","isLoading","warnings","forEach","queryData","data","metadata","notices","queryKey","warningMessage","message","push","String","spec","plugin","summary","spacing","mb","sx","maxWidth","p","variant","component","size","aria-label","length","start","toString","end","m","map","details","idx","disabled"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"SaveChangesConfirmationDialog.d.ts","sourceRoot":"","sources":["../../../src/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAO/C,eAAO,MAAM,6BAA6B,QAAO,YAqEhD,CAAC"}
+{"version":3,"file":"SaveChangesConfirmationDialog.d.ts","sourceRoot":"","sources":["../../../src/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAO/C,eAAO,MAAM,6BAA6B,QAAO,YAoFhD,CAAC"}

package/dist/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.js

@@ -13,7 +13,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Checkbox, FormGroup, FormControlLabel, Typography } from '@mui/material';
-import { useTimeRange } from '@perses-dev/plugin-system';
+import { useTimeRange, useTimeZone } from '@perses-dev/plugin-system';
 import { isRelativeTimeRange, SAVE_DEFAULTS_DIALOG_TEXT } from '@perses-dev/core';
 import { Dialog } from '@perses-dev/components';
 import { useSaveChangesConfirmationDialog, useVariableDefinitionActions } from '../../context';
@@ -21,8 +21,11 @@ export const SaveChangesConfirmationDialog = ()=>{
     const { saveChangesConfirmationDialog: dialog } = useSaveChangesConfirmationDialog();
     const isSavedDurationModified = dialog?.isSavedDurationModified ?? true;
     const isSavedVariableModified = dialog?.isSavedVariableModified ?? true;
+    const isSavedTimeZoneModified = dialog?.isSavedTimeZoneModified ?? true;
     const [saveDefaultTimeRange, setSaveDefaultTimeRange] = useState(isSavedDurationModified);
     const [saveDefaultVariables, setSaveDefaultVariables] = useState(isSavedVariableModified);
+    const [saveDefaultTimeZone, setSaveDefaultTimeZone] = useState(isSavedTimeZoneModified);
+    const { timeZone } = useTimeZone();
     const { getSavedVariablesStatus } = useVariableDefinitionActions();
     const { modifiedVariableNames } = getSavedVariablesStatus();
     const isOpen = dialog !== undefined;
@@ -30,6 +33,7 @@ export const SaveChangesConfirmationDialog = ()=>{
     const currentTimeRangeText = isRelativeTimeRange(timeRange) ? `(Last ${timeRange.pastDuration})` : '(Absolute time ranges can not be saved)';
     const saveTimeRangeText = `Save current time range as new default ${currentTimeRangeText}`;
     const saveVariablesText = `Save current variable values as new default (${modifiedVariableNames.length > 0 ? modifiedVariableNames.join(', ') : 'No modified variables'})`;
+    const saveTimeZoneText = `Save time zone as "${timeZone}" time`;
     return /*#__PURE__*/ _jsx(Dialog, {
         open: isOpen,
         children: dialog !== undefined && /*#__PURE__*/ _jsxs(_Fragment, {
@@ -61,6 +65,14 @@ export const SaveChangesConfirmationDialog = ()=>{
                                         onChange: (e)=>setSaveDefaultVariables(e.target.checked)
                                     }),
                                     label: saveVariablesText
+                                }),
+                                /*#__PURE__*/ _jsx(FormControlLabel, {
+                                    control: /*#__PURE__*/ _jsx(Checkbox, {
+                                        disabled: !isSavedTimeZoneModified,
+                                        checked: saveDefaultTimeZone && isSavedTimeZoneModified,
+                                        onChange: (e)=>setSaveDefaultTimeZone(e.target.checked)
+                                    }),
+                                    label: saveTimeZoneText
                                 })
                             ]
                         })
@@ -70,7 +82,7 @@ export const SaveChangesConfirmationDialog = ()=>{
                     children: [
                         /*#__PURE__*/ _jsx(Dialog.PrimaryButton, {
                             onClick: ()=>{
-                                return dialog.onSaveChanges(saveDefaultTimeRange, saveDefaultVariables);
+                                return dialog.onSaveChanges(saveDefaultTimeRange, saveDefaultVariables, saveDefaultTimeZone);
                             },
                             children: "Save Changes"
                         }),

package/dist/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.tsx"],"sourcesContent":["// Copyright 2024 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 { ReactElement, useState } from 'react';\nimport { Checkbox, FormGroup, FormControlLabel, Typography } from '@mui/material';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport { isRelativeTimeRange, SAVE_DEFAULTS_DIALOG_TEXT } from '@perses-dev/core';\nimport { Dialog } from '@perses-dev/components';\nimport { useSaveChangesConfirmationDialog, useVariableDefinitionActions } from '../../context';\n\nexport const SaveChangesConfirmationDialog = (): ReactElement => {\n  const { saveChangesConfirmationDialog: dialog } = useSaveChangesConfirmationDialog();\n  const isSavedDurationModified = dialog?.isSavedDurationModified ?? true;\n  const isSavedVariableModified = dialog?.isSavedVariableModified ?? true;\n  const [saveDefaultTimeRange, setSaveDefaultTimeRange] = useState(isSavedDurationModified);\n  const [saveDefaultVariables, setSaveDefaultVariables] = useState(isSavedVariableModified);\n\n  const { getSavedVariablesStatus } = useVariableDefinitionActions();\n  const { modifiedVariableNames } = getSavedVariablesStatus();\n\n  const isOpen = dialog !== undefined;\n\n  const { timeRange } = useTimeRange();\n  const currentTimeRangeText = isRelativeTimeRange(timeRange)\n    ? `(Last ${timeRange.pastDuration})`\n    : '(Absolute time ranges can not be saved)';\n\n  const saveTimeRangeText = `Save current time range as new default ${currentTimeRangeText}`;\n\n  const saveVariablesText = `Save current variable values as new default (${\n    modifiedVariableNames.length > 0 ? modifiedVariableNames.join(', ') : 'No modified variables'\n  })`;\n\n  return (\n    <Dialog open={isOpen}>\n      {dialog !== undefined && (\n        <>\n          <Dialog.Header onClose={() => dialog.onCancel()}>Save Dashboard</Dialog.Header>\n\n          <Dialog.Content>\n            <Typography marginBottom={2}>{dialog.description || SAVE_DEFAULTS_DIALOG_TEXT}</Typography>\n            <FormGroup>\n              <FormControlLabel\n                control={\n                  <Checkbox\n                    disabled={!isSavedDurationModified || !isRelativeTimeRange(timeRange)}\n                    checked={saveDefaultTimeRange && isSavedDurationModified && isRelativeTimeRange(timeRange)}\n                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSaveDefaultTimeRange(e.target.checked)}\n                  />\n                }\n                label={saveTimeRangeText}\n              />\n              <FormControlLabel\n                control={\n                  <Checkbox\n                    disabled={!isSavedVariableModified}\n                    checked={saveDefaultVariables && isSavedVariableModified}\n                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSaveDefaultVariables(e.target.checked)}\n                  />\n                }\n                label={saveVariablesText}\n              />\n            </FormGroup>\n          </Dialog.Content>\n\n          <Dialog.Actions>\n            <Dialog.PrimaryButton\n              onClick={() => {\n                return dialog.onSaveChanges(saveDefaultTimeRange, saveDefaultVariables);\n              }}\n            >\n              Save Changes\n            </Dialog.PrimaryButton>\n            <Dialog.SecondaryButton onClick={() => dialog.onCancel()}>Cancel</Dialog.SecondaryButton>\n          </Dialog.Actions>\n        </>\n      )}\n    </Dialog>\n  );\n};\n"],"names":["useState","Checkbox","FormGroup","FormControlLabel","Typography","useTimeRange","isRelativeTimeRange","SAVE_DEFAULTS_DIALOG_TEXT","Dialog","useSaveChangesConfirmationDialog","useVariableDefinitionActions","SaveChangesConfirmationDialog","saveChangesConfirmationDialog","dialog","isSavedDurationModified","isSavedVariableModified","saveDefaultTimeRange","setSaveDefaultTimeRange","saveDefaultVariables","setSaveDefaultVariables","getSavedVariablesStatus","modifiedVariableNames","isOpen","undefined","timeRange","currentTimeRangeText","pastDuration","saveTimeRangeText","saveVariablesText","length","join","open","Header","onClose","onCancel","Content","marginBottom","description","control","disabled","checked","onChange","e","target","label","Actions","PrimaryButton","onClick","onSaveChanges","SecondaryButton"],"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,SAAuBA,QAAQ,QAAQ,QAAQ;AAC/C,SAASC,QAAQ,EAAEC,SAAS,EAAEC,gBAAgB,EAAEC,UAAU,QAAQ,gBAAgB;AAClF,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAASC,mBAAmB,EAAEC,yBAAyB,QAAQ,mBAAmB;AAClF,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,gCAAgC,EAAEC,4BAA4B,QAAQ,gBAAgB;AAE/F,OAAO,MAAMC,gCAAgC;IAC3C,MAAM,EAAEC,+BAA+BC,MAAM,EAAE,GAAGJ;IAClD,MAAMK,0BAA0BD,QAAQC,2BAA2B;IACnE,MAAMC,0BAA0BF,QAAQE,2BAA2B;IACnE,MAAM,CAACC,sBAAsBC,wBAAwB,GAAGjB,SAASc;IACjE,MAAM,CAACI,sBAAsBC,wBAAwB,GAAGnB,SAASe;IAEjE,MAAM,EAAEK,uBAAuB,EAAE,GAAGV;IACpC,MAAM,EAAEW,qBAAqB,EAAE,GAAGD;IAElC,MAAME,SAAST,WAAWU;IAE1B,MAAM,EAAEC,SAAS,EAAE,GAAGnB;IACtB,MAAMoB,uBAAuBnB,oBAAoBkB,aAC7C,CAAC,MAAM,EAAEA,UAAUE,YAAY,CAAC,CAAC,CAAC,GAClC;IAEJ,MAAMC,oBAAoB,CAAC,uCAAuC,EAAEF,sBAAsB;IAE1F,MAAMG,oBAAoB,CAAC,6CAA6C,EACtEP,sBAAsBQ,MAAM,GAAG,IAAIR,sBAAsBS,IAAI,CAAC,QAAQ,wBACvE,CAAC,CAAC;IAEH,qBACE,KAACtB;QAAOuB,MAAMT;kBACXT,WAAWU,2BACV;;8BACE,KAACf,OAAOwB,MAAM;oBAACC,SAAS,IAAMpB,OAAOqB,QAAQ;8BAAI;;8BAEjD,MAAC1B,OAAO2B,OAAO;;sCACb,KAAC/B;4BAAWgC,cAAc;sCAAIvB,OAAOwB,WAAW,IAAI9B;;sCACpD,MAACL;;8CACC,KAACC;oCACCmC,uBACE,KAACrC;wCACCsC,UAAU,CAACzB,2BAA2B,CAACR,oBAAoBkB;wCAC3DgB,SAASxB,wBAAwBF,2BAA2BR,oBAAoBkB;wCAChFiB,UAAU,CAACC,IAA2CzB,wBAAwByB,EAAEC,MAAM,CAACH,OAAO;;oCAGlGI,OAAOjB;;8CAET,KAACxB;oCACCmC,uBACE,KAACrC;wCACCsC,UAAU,CAACxB;wCACXyB,SAAStB,wBAAwBH;wCACjC0B,UAAU,CAACC,IAA2CvB,wBAAwBuB,EAAEC,MAAM,CAACH,OAAO;;oCAGlGI,OAAOhB;;;;;;8BAKb,MAACpB,OAAOqC,OAAO;;sCACb,KAACrC,OAAOsC,aAAa;4BACnBC,SAAS;gCACP,OAAOlC,OAAOmC,aAAa,CAAChC,sBAAsBE;4BACpD;sCACD;;sCAGD,KAACV,OAAOyC,eAAe;4BAACF,SAAS,IAAMlC,OAAOqB,QAAQ;sCAAI;;;;;;;AAMtE,EAAE"}
+{"version":3,"sources":["../../../src/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.tsx"],"sourcesContent":["// Copyright 2024 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 { ReactElement, useState } from 'react';\nimport { Checkbox, FormGroup, FormControlLabel, Typography } from '@mui/material';\nimport { useTimeRange, useTimeZone } from '@perses-dev/plugin-system';\nimport { isRelativeTimeRange, SAVE_DEFAULTS_DIALOG_TEXT } from '@perses-dev/core';\nimport { Dialog } from '@perses-dev/components';\nimport { useSaveChangesConfirmationDialog, useVariableDefinitionActions } from '../../context';\n\nexport const SaveChangesConfirmationDialog = (): ReactElement => {\n  const { saveChangesConfirmationDialog: dialog } = useSaveChangesConfirmationDialog();\n  const isSavedDurationModified = dialog?.isSavedDurationModified ?? true;\n  const isSavedVariableModified = dialog?.isSavedVariableModified ?? true;\n  const isSavedTimeZoneModified = dialog?.isSavedTimeZoneModified ?? true;\n  const [saveDefaultTimeRange, setSaveDefaultTimeRange] = useState(isSavedDurationModified);\n  const [saveDefaultVariables, setSaveDefaultVariables] = useState(isSavedVariableModified);\n  const [saveDefaultTimeZone, setSaveDefaultTimeZone] = useState(isSavedTimeZoneModified);\n\n  const { timeZone } = useTimeZone();\n  const { getSavedVariablesStatus } = useVariableDefinitionActions();\n  const { modifiedVariableNames } = getSavedVariablesStatus();\n\n  const isOpen = dialog !== undefined;\n\n  const { timeRange } = useTimeRange();\n  const currentTimeRangeText = isRelativeTimeRange(timeRange)\n    ? `(Last ${timeRange.pastDuration})`\n    : '(Absolute time ranges can not be saved)';\n\n  const saveTimeRangeText = `Save current time range as new default ${currentTimeRangeText}`;\n\n  const saveVariablesText = `Save current variable values as new default (${\n    modifiedVariableNames.length > 0 ? modifiedVariableNames.join(', ') : 'No modified variables'\n  })`;\n\n  const saveTimeZoneText = `Save time zone as \"${timeZone}\" time`;\n\n  return (\n    <Dialog open={isOpen}>\n      {dialog !== undefined && (\n        <>\n          <Dialog.Header onClose={() => dialog.onCancel()}>Save Dashboard</Dialog.Header>\n\n          <Dialog.Content>\n            <Typography marginBottom={2}>{dialog.description || SAVE_DEFAULTS_DIALOG_TEXT}</Typography>\n            <FormGroup>\n              <FormControlLabel\n                control={\n                  <Checkbox\n                    disabled={!isSavedDurationModified || !isRelativeTimeRange(timeRange)}\n                    checked={saveDefaultTimeRange && isSavedDurationModified && isRelativeTimeRange(timeRange)}\n                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSaveDefaultTimeRange(e.target.checked)}\n                  />\n                }\n                label={saveTimeRangeText}\n              />\n              <FormControlLabel\n                control={\n                  <Checkbox\n                    disabled={!isSavedVariableModified}\n                    checked={saveDefaultVariables && isSavedVariableModified}\n                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSaveDefaultVariables(e.target.checked)}\n                  />\n                }\n                label={saveVariablesText}\n              />\n              <FormControlLabel\n                control={\n                  <Checkbox\n                    disabled={!isSavedTimeZoneModified}\n                    checked={saveDefaultTimeZone && isSavedTimeZoneModified}\n                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSaveDefaultTimeZone(e.target.checked)}\n                  />\n                }\n                label={saveTimeZoneText}\n              />\n            </FormGroup>\n          </Dialog.Content>\n\n          <Dialog.Actions>\n            <Dialog.PrimaryButton\n              onClick={() => {\n                return dialog.onSaveChanges(saveDefaultTimeRange, saveDefaultVariables, saveDefaultTimeZone);\n              }}\n            >\n              Save Changes\n            </Dialog.PrimaryButton>\n            <Dialog.SecondaryButton onClick={() => dialog.onCancel()}>Cancel</Dialog.SecondaryButton>\n          </Dialog.Actions>\n        </>\n      )}\n    </Dialog>\n  );\n};\n"],"names":["useState","Checkbox","FormGroup","FormControlLabel","Typography","useTimeRange","useTimeZone","isRelativeTimeRange","SAVE_DEFAULTS_DIALOG_TEXT","Dialog","useSaveChangesConfirmationDialog","useVariableDefinitionActions","SaveChangesConfirmationDialog","saveChangesConfirmationDialog","dialog","isSavedDurationModified","isSavedVariableModified","isSavedTimeZoneModified","saveDefaultTimeRange","setSaveDefaultTimeRange","saveDefaultVariables","setSaveDefaultVariables","saveDefaultTimeZone","setSaveDefaultTimeZone","timeZone","getSavedVariablesStatus","modifiedVariableNames","isOpen","undefined","timeRange","currentTimeRangeText","pastDuration","saveTimeRangeText","saveVariablesText","length","join","saveTimeZoneText","open","Header","onClose","onCancel","Content","marginBottom","description","control","disabled","checked","onChange","e","target","label","Actions","PrimaryButton","onClick","onSaveChanges","SecondaryButton"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"SaveDashboardButton.d.ts","sourceRoot":"","sources":["../../../src/components/SaveDashboardButton/SaveDashboardButton.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAU,WAAW,EAAE,MAAM,eAAe,CAAC;AAGpD,OAAO,EACL,eAAe,EAKhB,MAAM,eAAe,CAAC;AAEvB,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC;IAC9E,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,UAAU,CAAC;CAC7C;AAED,eAAO,MAAM,mBAAmB,qCAI7B,wBAAwB,KAAG,YA8D7B,CAAC"}
+{"version":3,"file":"SaveDashboardButton.d.ts","sourceRoot":"","sources":["../../../src/components/SaveDashboardButton/SaveDashboardButton.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAU,WAAW,EAAE,MAAM,eAAe,CAAC;AAGpD,OAAO,EACL,eAAe,EAKhB,MAAM,eAAe,CAAC;AAEvB,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC;IAC9E,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,UAAU,CAAC;CAC7C;AAED,eAAO,MAAM,mBAAmB,qCAI7B,wBAAwB,KAAG,YAsE7B,CAAC"}