@perses-dev/dashboards 0.54.0-beta.0 → 0.54.0-beta.10

package/dist/cjs/context/VariableProvider/VariableProvider.js

@@ -55,7 +55,6 @@ const _middleware = require("zustand/middleware");
 const _shallow = require("zustand/shallow");
 const _immer1 = require("immer");
 const _pluginsystem = require("@perses-dev/plugin-system");
-const _core = require("@perses-dev/core");
 const _spec = require("@perses-dev/spec");
 const _utils = require("./utils");
 const _hydrationUtils = require("./hydrationUtils");
@@ -160,6 +159,7 @@ function PluginProvider({ children, builtinVariables }) {
                 // If the variable is a list variable and has a custom all value, then use that value instead
                 if (definition?.kind === 'ListVariable' && definition.spec.customAllValue) {
                     v.value = definition.spec.customAllValue;
+                    v.customAllValue = definition.spec.customAllValue;
                 } else {
                     v.value = v.options?.map((o)=>o.value) ?? null;
                 }
@@ -204,7 +204,7 @@ function PluginProvider({ children, builtinVariables }) {
                 kind: 'BuiltinVariable',
                 spec: {
                     name: '__range',
-                    value: ()=>(0, _spec.formatDuration)((0, _core.intervalToPrometheusDuration)(absoluteTimeRange)),
+                    value: ()=>(0, _spec.formatDuration)((0, _spec.intervalToDuration)(absoluteTimeRange)),
                     source: 'Dashboard',
                     display: {
                         name: '__range',
@@ -258,8 +258,12 @@ function PluginProvider({ children, builtinVariables }) {
         })
     });
 }
-function createVariableDefinitionStore({ initialVariableDefinitions = [], externalVariableDefinitions = [], queryParams }) {
-    const initialParams = (0, _queryparams.getInitalValuesFromQueryParameters)(queryParams ? queryParams[0] : {});
+function createVariableDefinitionStore({ initialVariableDefinitions = [], externalVariableDefinitions = [], queryParams, initialVariableValues }) {
+    const queryParamValues = (0, _queryparams.getInitalValuesFromQueryParameters)(queryParams ? queryParams[0] : {});
+    const initialParams = {
+        ...queryParamValues,
+        ...initialVariableValues
+    };
     const store = (0, _zustand.createStore)()((0, _middleware.devtools)((0, _immer.immer)((set, get)=>({
             variableState: (0, _hydrationUtils.hydrateVariableDefinitionStates)(initialVariableDefinitions, initialParams, externalVariableDefinitions),
             variableDefinitions: initialVariableDefinitions,
@@ -365,10 +369,11 @@ function createVariableDefinitionStore({ initialVariableDefinitions = [], extern
         }))));
     return store;
 }
-function VariableProvider({ children, initialVariableDefinitions = [], externalVariableDefinitions = [], builtinVariableDefinitions = [] }) {
+function VariableProvider({ children, initialVariableDefinitions = [], externalVariableDefinitions = [], builtinVariableDefinitions = [], initialVariableValues }) {
     const [store] = (0, _react.useState)(()=>createVariableDefinitionStore({
             initialVariableDefinitions,
-            externalVariableDefinitions
+            externalVariableDefinitions,
+            initialVariableValues
         }));
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(VariableDefinitionStoreContext.Provider, {
         value: store,

package/dist/cjs/context/index.js

@@ -14,6 +14,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+_export_star(require("./AnnotationProvider"), exports);
 _export_star(require("./DashboardProvider"), exports);
 _export_star(require("./DatasourceStoreProvider"), exports);
 _export_star(require("./VariableProvider"), exports);

package/dist/cjs/context/useDashboard.js

@@ -23,14 +23,16 @@ Object.defineProperty(exports, "useDashboard", {
 const _spec = require("@perses-dev/spec");
 const _DashboardProvider = require("./DashboardProvider");
 const _VariableProvider = require("./VariableProvider");
+const _AnnotationProvider = require("./AnnotationProvider");
 function useDashboard() {
-    const { panels, panelGroups, panelGroupOrder, setDashboard: setDashboardResource, kind, metadata, display, duration, refreshInterval, datasources, links, ttl } = (0, _DashboardProvider.useDashboardStore)(({ panels, panelGroups, panelGroupOrder, setDashboard, kind, metadata, display, duration, refreshInterval, datasources, links, ttl })=>({
+    const { panels, panelGroups, panelGroupOrder, setDashboard: setDashboardResource, kind, metadata, display, timezone, duration, refreshInterval, datasources, links, ttl } = (0, _DashboardProvider.useDashboardStore)(({ panels, panelGroups, panelGroupOrder, setDashboard, kind, metadata, timezone, display, duration, refreshInterval, datasources, links, ttl })=>({
             panels,
             panelGroups,
             panelGroupOrder,
             setDashboard,
             kind,
             metadata,
+            timezone,
             display,
             duration,
             refreshInterval,
@@ -39,7 +41,9 @@ function useDashboard() {
             ttl
         }));
     const { setVariableDefinitions } = (0, _VariableProvider.useVariableDefinitionActions)();
+    const { setAnnotationSpecs } = (0, _AnnotationProvider.useAnnotationActions)();
     const variables = (0, _VariableProvider.useVariableDefinitions)();
+    const annotations = (0, _AnnotationProvider.useAnnotationSpecs)();
     const layouts = convertPanelGroupsToLayouts(panelGroups, panelGroupOrder);
     const dashboard = kind === 'Dashboard' ? {
         kind,
@@ -49,7 +53,9 @@ function useDashboard() {
             panels,
             layouts,
             variables,
+            annotations,
             duration,
+            timezone,
             refreshInterval,
             datasources,
             links
@@ -62,6 +68,7 @@ function useDashboard() {
             panels,
             layouts,
             variables,
+            annotations,
             duration,
             refreshInterval,
             datasources,
@@ -71,6 +78,9 @@ function useDashboard() {
     };
     const setDashboard = (dashboardResource)=>{
         setVariableDefinitions(dashboardResource.spec.variables);
+        if (dashboardResource.spec.annotations) {
+            setAnnotationSpecs(dashboardResource.spec.annotations);
+        }
         setDashboardResource(dashboardResource);
     };
     return {

package/dist/cjs/index.js

@@ -19,6 +19,7 @@ _export_star(require("./context"), exports);
 _export_star(require("./keyboard-shortcuts"), exports);
 _export_star(require("./views"), exports);
 _export_star(require("./model"), exports);
+_export_star(require("./constants"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/keyboard-shortcuts/index.js

@@ -30,6 +30,9 @@ _export(exports, {
     get buildShortcutOptions () {
         return _utils.buildShortcutOptions;
     },
+    get createModEnterHandler () {
+        return _utils.createModEnterHandler;
+    },
     get dispatchShortcutEvent () {
         return _utils.dispatchShortcutEvent;
     },

package/dist/cjs/keyboard-shortcuts/utils.js

@@ -24,6 +24,9 @@ _export(exports, {
     get buildShortcutOptions () {
         return buildShortcutOptions;
     },
+    get createModEnterHandler () {
+        return createModEnterHandler;
+    },
     get dispatchShortcutEvent () {
         return dispatchShortcutEvent;
     },
@@ -74,3 +77,11 @@ function requireShortcutEvent(def) {
 function dispatchShortcutEvent(eventName) {
     window.dispatchEvent(new CustomEvent(eventName));
 }
+function createModEnterHandler(execute) {
+    return (event)=>{
+        if (event.key === 'Enter' && (event.ctrlKey || event.metaKey) && !event.shiftKey && !event.altKey) {
+            event.preventDefault();
+            execute();
+        }
+    };
+}

package/dist/cjs/model/PanelGroupDefinition.js

@@ -0,0 +1,25 @@
+// Copyright 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, "isPanelGroupItemIdEqual", {
+    enumerable: true,
+    get: function() {
+        return isPanelGroupItemIdEqual;
+    }
+});
+function isPanelGroupItemIdEqual(a, b) {
+    return a?.panelGroupId === b?.panelGroupId && a?.panelGroupItemLayoutId === b?.panelGroupItemLayoutId;
+}

package/dist/cjs/model/index.js

@@ -14,7 +14,8 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_export_star(require("./DashboardResource"), exports);
+_export_star(require("./PanelGroupDefinition"), exports);
+_export_star(require("./VariableDefinition"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

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

@@ -36,7 +36,7 @@ const DashboardApp = (props)=>{
     });
 };
 const DashboardAppContent = (props)=>{
-    const { dashboardResource, emptyDashboardProps, isReadonly, isVariableEnabled, isDatasourceEnabled, disableShortcuts, isCreating, isInitialVariableSticky, isLeavingConfirmDialogEnabled, dashboardTitleComponent, onSave, onDiscard } = props;
+    const { dashboardResource, emptyDashboardProps, isReadonly, isVariableEnabled, isAnnotationEnabled, isDatasourceEnabled, disableShortcuts, isCreating, isInitialVariableSticky, isLeavingConfirmDialogEnabled, dashboardTitleComponent, userPreferenceTimezone, onSave, onDiscard } = props;
     const chartsTheme = (0, _components.useChartsTheme)();
     const { isEditMode, setEditMode } = (0, _context.useEditMode)();
     const { dashboard, setDashboard } = (0, _context.useDashboard)();
@@ -81,6 +81,12 @@ const DashboardAppContent = (props)=>{
         onCancelButtonClick,
         disabled: disableShortcuts
     });
+    const toolBarTimezone = (0, _react.useMemo)(()=>{
+        return dashboardResource.spec.timezone || userPreferenceTimezone || 'local';
+    }, [
+        dashboardResource.spec,
+        userPreferenceTimezone
+    ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
         sx: {
             flexGrow: 1,
@@ -92,11 +98,13 @@ const DashboardAppContent = (props)=>{
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.DashboardToolbar, {
                 dashboardName: dashboardResource.metadata.name,
+                timezone: toolBarTimezone,
                 dashboardTitleComponent: dashboardTitleComponent,
                 initialVariableIsSticky: isInitialVariableSticky,
                 onSave: onSave,
                 isReadonly: isReadonly,
                 isVariableEnabled: isVariableEnabled,
+                isAnnotationEnabled: isAnnotationEnabled,
                 isDatasourceEnabled: isDatasourceEnabled,
                 onEditButtonClick: onEditButtonClick,
                 onCancelButtonClick: onCancelButtonClick

package/dist/cjs/views/ViewDashboard/ViewDashboard.js

@@ -22,18 +22,18 @@ Object.defineProperty(exports, "ViewDashboard", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-const _core = require("@perses-dev/core");
 const _components = require("@perses-dev/components");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _react = require("react");
+const _constants = require("../../constants");
 const _context = require("../../context");
 const _DashboardProviderWithQueryParams = require("../../context/DashboardProvider/DashboardProviderWithQueryParams");
 const _DashboardApp = require("./DashboardApp");
 function ViewDashboard(props) {
-    const { dashboardResource, datasourceApi, externalVariableDefinitions, emptyDashboardProps, isReadonly, isVariableEnabled, isDatasourceEnabled, disableShortcuts, isEditing, isCreating, isInitialVariableSticky, isLeavingConfirmDialogEnabled, dashboardTitleComponent, onSave, onDiscard, sx, ...others } = props;
+    const { dashboardResource, datasourceApi, externalVariableDefinitions, emptyDashboardProps, isReadonly, isVariableEnabled, isAnnotationEnabled, isDatasourceEnabled, disableShortcuts, isEditing, isCreating, isInitialVariableSticky, isLeavingConfirmDialogEnabled, dashboardTitleComponent, onSave, onDiscard, sx, userPreferenceTimezone, ...others } = props;
     const { spec } = dashboardResource;
-    const dashboardDuration = spec.duration ?? _core.DEFAULT_DASHBOARD_DURATION;
-    const dashboardRefreshInterval = spec.refreshInterval ?? _core.DEFAULT_REFRESH_INTERVAL;
+    const dashboardDuration = spec.duration ?? _constants.DEFAULT_DASHBOARD_DURATION;
+    const dashboardRefreshInterval = spec.refreshInterval ?? _constants.DEFAULT_REFRESH_INTERVAL;
     const initialTimeRange = (0, _pluginsystem.useInitialTimeRange)(dashboardDuration);
     const initialRefreshInterval = (0, _pluginsystem.useInitialRefreshInterval)(dashboardRefreshInterval);
     const { data } = (0, _pluginsystem.usePluginBuiltinVariableDefinitions)();
@@ -90,30 +90,35 @@ function ViewDashboard(props) {
                     initialVariableDefinitions: spec.variables,
                     externalVariableDefinitions: externalVariableDefinitions,
                     builtinVariableDefinitions: builtinVariables,
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                        sx: (0, _components.combineSx)({
-                            display: 'flex',
-                            width: '100%',
-                            height: '100%',
-                            position: 'relative',
-                            overflow: 'hidden'
-                        }, sx),
-                        ...others,
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
-                            FallbackComponent: _components.ErrorAlert,
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DashboardApp.DashboardApp, {
-                                dashboardResource: dashboardResource,
-                                emptyDashboardProps: emptyDashboardProps,
-                                isReadonly: isReadonly,
-                                isVariableEnabled: isVariableEnabled,
-                                isDatasourceEnabled: isDatasourceEnabled,
-                                disableShortcuts: disableShortcuts,
-                                isCreating: isCreating,
-                                isInitialVariableSticky: isInitialVariableSticky,
-                                isLeavingConfirmDialogEnabled: isLeavingConfirmDialogEnabled,
-                                dashboardTitleComponent: dashboardTitleComponent,
-                                onSave: onSave,
-                                onDiscard: onDiscard
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_context.AnnotationProvider, {
+                        initialAnnotationSpecs: spec.annotations ?? [],
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                            sx: (0, _components.combineSx)({
+                                display: 'flex',
+                                width: '100%',
+                                height: '100%',
+                                position: 'relative',
+                                overflow: 'hidden'
+                            }, sx),
+                            ...others,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
+                                FallbackComponent: _components.ErrorAlert,
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DashboardApp.DashboardApp, {
+                                    dashboardResource: dashboardResource,
+                                    emptyDashboardProps: emptyDashboardProps,
+                                    isReadonly: isReadonly,
+                                    isVariableEnabled: isVariableEnabled,
+                                    isAnnotationEnabled: isAnnotationEnabled,
+                                    isDatasourceEnabled: isDatasourceEnabled,
+                                    disableShortcuts: disableShortcuts,
+                                    isCreating: isCreating,
+                                    isInitialVariableSticky: isInitialVariableSticky,
+                                    isLeavingConfirmDialogEnabled: isLeavingConfirmDialogEnabled,
+                                    dashboardTitleComponent: dashboardTitleComponent,
+                                    onSave: onSave,
+                                    onDiscard: onDiscard,
+                                    userPreferenceTimezone: userPreferenceTimezone
+                                })
                             })
                         })
                     })

package/dist/components/AddGroupButton/AddGroupButton.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright 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.
@@ -10,7 +11,6 @@
 // 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 { Button } from '@mui/material';
 import AddGroupIcon from 'mdi-material-ui/PlusBoxOutline';
 import { InfoTooltip } from '@perses-dev/components';

package/dist/components/AddGroupButton/AddGroupButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/AddGroupButton/AddGroupButton.tsx"],"sourcesContent":["// Copyright 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 { Button } from '@mui/material';\nimport AddGroupIcon from 'mdi-material-ui/PlusBoxOutline';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { ReactElement } from 'react';\nimport { TOOLTIP_TEXT, editButtonStyle } from '../../constants';\nimport { useDashboardActions } from '../../context';\n\nexport const AddGroupButton = (): ReactElement => {\n  const { openAddPanelGroup } = useDashboardActions();\n\n  return (\n    <InfoTooltip description={TOOLTIP_TEXT.addGroup}>\n      <Button\n        startIcon={<AddGroupIcon />}\n        onClick={openAddPanelGroup}\n        aria-label={TOOLTIP_TEXT.addGroup}\n        sx={editButtonStyle}\n      >\n        Panel Group\n      </Button>\n    </InfoTooltip>\n  );\n};\n"],"names":["Button","AddGroupIcon","InfoTooltip","TOOLTIP_TEXT","editButtonStyle","useDashboardActions","AddGroupButton","openAddPanelGroup","description","addGroup","startIcon","onClick","aria-label","sx"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,MAAM,QAAQ,gBAAgB;AACvC,OAAOC,kBAAkB,iCAAiC;AAC1D,SAASC,WAAW,QAAQ,yBAAyB;AAErD,SAASC,YAAY,EAAEC,eAAe,QAAQ,kBAAkB;AAChE,SAASC,mBAAmB,QAAQ,gBAAgB;AAEpD,OAAO,MAAMC,iBAAiB;IAC5B,MAAM,EAAEC,iBAAiB,EAAE,GAAGF;IAE9B,qBACE,KAACH;QAAYM,aAAaL,aAAaM,QAAQ;kBAC7C,cAAA,KAACT;YACCU,yBAAW,KAACT;YACZU,SAASJ;YACTK,cAAYT,aAAaM,QAAQ;YACjCI,IAAIT;sBACL;;;AAKP,EAAE"}
+{"version":3,"sources":["../../../src/components/AddGroupButton/AddGroupButton.tsx"],"sourcesContent":["// Copyright 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 { Button } from '@mui/material';\nimport AddGroupIcon from 'mdi-material-ui/PlusBoxOutline';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { ReactElement } from 'react';\nimport { TOOLTIP_TEXT, editButtonStyle } from '../../constants';\nimport { useDashboardActions } from '../../context';\n\nexport const AddGroupButton = (): ReactElement => {\n  const { openAddPanelGroup } = useDashboardActions();\n\n  return (\n    <InfoTooltip description={TOOLTIP_TEXT.addGroup}>\n      <Button\n        startIcon={<AddGroupIcon />}\n        onClick={openAddPanelGroup}\n        aria-label={TOOLTIP_TEXT.addGroup}\n        sx={editButtonStyle}\n      >\n        Panel Group\n      </Button>\n    </InfoTooltip>\n  );\n};\n"],"names":["Button","AddGroupIcon","InfoTooltip","TOOLTIP_TEXT","editButtonStyle","useDashboardActions","AddGroupButton","openAddPanelGroup","description","addGroup","startIcon","onClick","aria-label","sx"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,MAAM,QAAQ,gBAAgB;AACvC,OAAOC,kBAAkB,iCAAiC;AAC1D,SAASC,WAAW,QAAQ,yBAAyB;AAErD,SAASC,YAAY,EAAEC,eAAe,QAAQ,kBAAkB;AAChE,SAASC,mBAAmB,QAAQ,gBAAgB;AAEpD,OAAO,MAAMC,iBAAiB;IAC5B,MAAM,EAAEC,iBAAiB,EAAE,GAAGF;IAE9B,qBACE,KAACH;QAAYM,aAAaL,aAAaM,QAAQ;kBAC7C,cAAA,KAACT;YACCU,yBAAW,KAACT;YACZU,SAASJ;YACTK,cAAYT,aAAaM,QAAQ;YACjCI,IAAIT;sBACL;;;AAKP,EAAE"}

package/dist/components/AddPanelButton/AddPanelButton.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright 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.
@@ -10,7 +11,6 @@
 // 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 { Button } from '@mui/material';
 import AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';
 import { InfoTooltip } from '@perses-dev/components';

package/dist/components/AddPanelButton/AddPanelButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/AddPanelButton/AddPanelButton.tsx"],"sourcesContent":["// Copyright 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 { Button, ButtonProps } from '@mui/material';\nimport AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { ReactElement } from 'react';\nimport { TOOLTIP_TEXT, editButtonStyle } from '../../constants';\nimport { useDashboardActions } from '../../context';\n\nexport interface AddPanelButtonProps extends Pick<ButtonProps, 'fullWidth'> {\n  /**\n   * The variant to use to display the button.\n   */\n  variant?: 'text' | 'outlined';\n\n  /**\n   * The color to use to display the button.\n   */\n  color?: 'primary' | 'secondary';\n\n  /**\n   * The label used inside the button.\n   */\n  label?: string;\n}\n\nexport const AddPanelButton = ({\n  variant = 'text',\n  color = 'primary',\n  label = 'Panel',\n  fullWidth,\n}: AddPanelButtonProps): ReactElement => {\n  const { openAddPanel } = useDashboardActions();\n\n  return (\n    <InfoTooltip description={TOOLTIP_TEXT.addPanel}>\n      <Button\n        startIcon={<AddPanelIcon />}\n        onClick={openAddPanel}\n        aria-label={TOOLTIP_TEXT.addPanel}\n        variant={variant}\n        color={color}\n        fullWidth={fullWidth}\n        sx={editButtonStyle}\n      >\n        {label}\n      </Button>\n    </InfoTooltip>\n  );\n};\n"],"names":["Button","AddPanelIcon","InfoTooltip","TOOLTIP_TEXT","editButtonStyle","useDashboardActions","AddPanelButton","variant","color","label","fullWidth","openAddPanel","description","addPanel","startIcon","onClick","aria-label","sx"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,MAAM,QAAqB,gBAAgB;AACpD,OAAOC,kBAAkB,sCAAsC;AAC/D,SAASC,WAAW,QAAQ,yBAAyB;AAErD,SAASC,YAAY,EAAEC,eAAe,QAAQ,kBAAkB;AAChE,SAASC,mBAAmB,QAAQ,gBAAgB;AAmBpD,OAAO,MAAMC,iBAAiB,CAAC,EAC7BC,UAAU,MAAM,EAChBC,QAAQ,SAAS,EACjBC,QAAQ,OAAO,EACfC,SAAS,EACW;IACpB,MAAM,EAAEC,YAAY,EAAE,GAAGN;IAEzB,qBACE,KAACH;QAAYU,aAAaT,aAAaU,QAAQ;kBAC7C,cAAA,KAACb;YACCc,yBAAW,KAACb;YACZc,SAASJ;YACTK,cAAYb,aAAaU,QAAQ;YACjCN,SAASA;YACTC,OAAOA;YACPE,WAAWA;YACXO,IAAIb;sBAEHK;;;AAIT,EAAE"}
+{"version":3,"sources":["../../../src/components/AddPanelButton/AddPanelButton.tsx"],"sourcesContent":["// Copyright 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 { Button, ButtonProps } from '@mui/material';\nimport AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { ReactElement } from 'react';\nimport { TOOLTIP_TEXT, editButtonStyle } from '../../constants';\nimport { useDashboardActions } from '../../context';\n\nexport interface AddPanelButtonProps extends Pick<ButtonProps, 'fullWidth'> {\n  /**\n   * The variant to use to display the button.\n   */\n  variant?: 'text' | 'outlined';\n\n  /**\n   * The color to use to display the button.\n   */\n  color?: 'primary' | 'secondary';\n\n  /**\n   * The label used inside the button.\n   */\n  label?: string;\n}\n\nexport const AddPanelButton = ({\n  variant = 'text',\n  color = 'primary',\n  label = 'Panel',\n  fullWidth,\n}: AddPanelButtonProps): ReactElement => {\n  const { openAddPanel } = useDashboardActions();\n\n  return (\n    <InfoTooltip description={TOOLTIP_TEXT.addPanel}>\n      <Button\n        startIcon={<AddPanelIcon />}\n        onClick={openAddPanel}\n        aria-label={TOOLTIP_TEXT.addPanel}\n        variant={variant}\n        color={color}\n        fullWidth={fullWidth}\n        sx={editButtonStyle}\n      >\n        {label}\n      </Button>\n    </InfoTooltip>\n  );\n};\n"],"names":["Button","AddPanelIcon","InfoTooltip","TOOLTIP_TEXT","editButtonStyle","useDashboardActions","AddPanelButton","variant","color","label","fullWidth","openAddPanel","description","addPanel","startIcon","onClick","aria-label","sx"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,MAAM,QAAqB,gBAAgB;AACpD,OAAOC,kBAAkB,sCAAsC;AAC/D,SAASC,WAAW,QAAQ,yBAAyB;AAErD,SAASC,YAAY,EAAEC,eAAe,QAAQ,kBAAkB;AAChE,SAASC,mBAAmB,QAAQ,gBAAgB;AAmBpD,OAAO,MAAMC,iBAAiB,CAAC,EAC7BC,UAAU,MAAM,EAChBC,QAAQ,SAAS,EACjBC,QAAQ,OAAO,EACfC,SAAS,EACW;IACpB,MAAM,EAAEC,YAAY,EAAE,GAAGN;IAEzB,qBACE,KAACH;QAAYU,aAAaT,aAAaU,QAAQ;kBAC7C,cAAA,KAACb;YACCc,yBAAW,KAACb;YACZc,SAASJ;YACTK,cAAYb,aAAaU,QAAQ;YACjCN,SAASA;YACTC,OAAOA;YACPE,WAAWA;YACXO,IAAIb;sBAEHK;;;AAIT,EAAE"}

package/dist/components/Annotations/AnnotationsEditor.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+import { AnnotationSpec } from '@perses-dev/spec';
+export declare function AnnotationEditor(props: {
+    annotationSpecs: AnnotationSpec[];
+    onChange: (annotationSpecs: AnnotationSpec[]) => void;
+    onCancel: () => void;
+}): ReactElement;
+//# sourceMappingURL=AnnotationsEditor.d.ts.map

package/dist/components/Annotations/AnnotationsEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotationsEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Annotations/AnnotationsEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAqB,YAAY,EAAE,MAAM,OAAO,CAAC;AAkBxD,OAAO,EAAE,cAAc,EAA2B,MAAM,kBAAkB,CAAC;AA8B3E,wBAAgB,gBAAgB,CAAC,KAAK,EAAE;IACtC,eAAe,EAAE,cAAc,EAAE,CAAC;IAClC,QAAQ,EAAE,CAAC,eAAe,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IACtD,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,GAAG,YAAY,CAyMf"}