@perses-dev/dashboards 0.39.0 → 0.40.1

package/dist/cjs/test/dashboard-provider.js

@@ -21,13 +21,17 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    getTestDashboard: ()=>getTestDashboard,
-    createDashboardProviderSpy: ()=>createDashboardProviderSpy
+    getTestDashboard: function() {
+        return getTestDashboard;
+    },
+    createDashboardProviderSpy: function() {
+        return createDashboardProviderSpy;
+    }
 });
 const _react = require("react");
 const _context = require("../context");
-const _testDashboard = /*#__PURE__*/ _interopRequireDefault(require("./testDashboard"));
-function _interopRequireDefault(obj) {
+const _testDashboard = /*#__PURE__*/ _interop_require_default(require("./testDashboard"));
+function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };

package/dist/cjs/test/datasource-provider.js

@@ -21,18 +21,24 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    prometheusDemoUrl: ()=>prometheusDemoUrl,
-    prometheusDemo: ()=>prometheusDemo,
-    defaultDatasourceProps: ()=>defaultDatasourceProps
+    prometheusDemoUrl: function() {
+        return prometheusDemoUrl;
+    },
+    prometheusDemo: function() {
+        return prometheusDemo;
+    },
+    defaultDatasourceProps: function() {
+        return defaultDatasourceProps;
+    }
 });
-const _dashboardProvider = require("./dashboard-provider");
+const _dashboardprovider = require("./dashboard-provider");
 const prometheusDemoUrl = 'https://prometheus.demo.do.prometheus.io';
 const prometheusDemo = {
     kind: 'GlobalDatasource',
     metadata: {
         name: 'PrometheusDemo',
-        created_at: '0001-01-01T00:00:00Z',
-        updated_at: '0001-01-01T00:00:00Z',
+        createdAt: '0001-01-01T00:00:00Z',
+        updatedAt: '0001-01-01T00:00:00Z',
         version: 0
     },
     spec: {
@@ -40,23 +46,21 @@ const prometheusDemo = {
         plugin: {
             kind: 'PrometheusDatasource',
             spec: {
-                direct_url: prometheusDemoUrl
+                directUrl: prometheusDemoUrl
             }
         }
     }
 };
 const defaultDatasourceProps = {
-    dashboardResource: (0, _dashboardProvider.getTestDashboard)(),
+    dashboardResource: (0, _dashboardprovider.getTestDashboard)(),
     datasourceApi: {
+        buildProxyUrl: ()=>'',
         getDatasource: ()=>{
             return Promise.resolve(undefined);
         },
         getGlobalDatasource: (selector)=>{
             if (selector.kind === 'PrometheusDatasource') {
-                return Promise.resolve({
-                    resource: prometheusDemo,
-                    proxyUrl: prometheusDemoUrl
-                });
+                return Promise.resolve(prometheusDemo);
             }
             return Promise.resolve(undefined);
         },

package/dist/cjs/test/index.js

@@ -14,18 +14,20 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./dashboard-provider"), exports);
-_exportStar(require("./datasource-provider"), exports);
-_exportStar(require("./plugin-registry"), exports);
-_exportStar(require("./render"), exports);
-function _exportStar(from, to) {
+_export_star(require("./dashboard-provider"), exports);
+_export_star(require("./datasource-provider"), exports);
+_export_star(require("./plugin-registry"), exports);
+_export_star(require("./render"), exports);
+function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
-        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
-            enumerable: true,
-            get: function() {
-                return from[k];
-            }
-        });
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
     });
     return from;
 }

package/dist/cjs/test/plugin-registry.js

@@ -16,17 +16,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "MOCK_PLUGINS", {
     enumerable: true,
-    get: ()=>MOCK_PLUGINS
+    get: function() {
+        return MOCK_PLUGINS;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const FakeTimeSeriesChartOptionEditor = ()=>{
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
         children: "TimeSeriesChart options"
     });
 };
 const FakeTimeSeriesPlugin = {
     PanelComponent: ()=>{
-        return /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
             children: "TimeSeriesChart panel"
         });
     },

package/dist/cjs/test/render.js

@@ -16,19 +16,23 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "renderWithContext", {
     enumerable: true,
-    get: ()=>renderWithContext
+    get: function() {
+        return renderWithContext;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _react1 = require("@testing-library/react");
-const _reactRouterDom = require("react-router-dom");
+const _reactrouterdom = require("react-router-dom");
 const _history = require("history");
-const _useQueryParams = require("use-query-params");
-const _reactRouter6 = require("use-query-params/adapters/react-router-6");
-const _reactQuery = require("@tanstack/react-query");
+const _usequeryparams = require("use-query-params");
+const _reactrouter6 = require("use-query-params/adapters/react-router-6");
+const _reactquery = require("@tanstack/react-query");
 const _components = require("@perses-dev/components");
-const _pluginSystem = require("@perses-dev/plugin-system");
-const _pluginRegistry = require("./plugin-registry");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _context = require("../context");
+const _test = require("../test");
+const _pluginregistry = require("./plugin-registry");
 /*
  * Workaround for React router upgrade type errors.
  * More details: https://stackoverflow.com/a/69948457/17575201
@@ -40,7 +44,7 @@ const _pluginRegistry = require("./plugin-registry");
     (0, _react.useLayoutEffect)(()=>history.listen(setState), [
         history
     ]);
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactRouterDom.Router, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactrouterdom.Router, {
         location: state.location,
         navigationType: state.action,
         navigator: history,
@@ -49,7 +53,7 @@ const _pluginRegistry = require("./plugin-registry");
 };
 function renderWithContext(ui, options, history) {
     // Create a new QueryClient for each test to avoid caching issues
-    const queryClient = new _reactQuery.QueryClient({
+    const queryClient = new _reactquery.QueryClient({
         defaultOptions: {
             queries: {
                 refetchOnWindowFocus: false,
@@ -58,27 +62,30 @@ function renderWithContext(ui, options, history) {
         }
     });
     const customHistory = history !== null && history !== void 0 ? history : (0, _history.createMemoryHistory)();
-    const BaseRender = ()=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(CustomRouter, {
+    const BaseRender = ()=>/*#__PURE__*/ (0, _jsxruntime.jsx)(CustomRouter, {
             history: customHistory,
-            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactQuery.QueryClientProvider, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactquery.QueryClientProvider, {
                 client: queryClient,
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_useQueryParams.QueryParamProvider, {
-                    adapter: _reactRouter6.ReactRouter6Adapter,
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.SnackbarProvider, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_usequeryparams.QueryParamProvider, {
+                    adapter: _reactrouter6.ReactRouter6Adapter,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.SnackbarProvider, {
                         anchorOrigin: {
                             vertical: 'bottom',
                             horizontal: 'right'
                         },
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ChartsProvider, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ChartsProvider, {
                             chartsTheme: _components.testChartsTheme,
-                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.PluginRegistry, {
-                                ...(0, _pluginSystem.mockPluginRegistry)(..._pluginRegistry.MOCK_PLUGINS),
-                                children: ui
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PluginRegistry, {
+                                ...(0, _pluginsystem.mockPluginRegistry)(..._pluginregistry.MOCK_PLUGINS),
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_context.DatasourceStoreProvider, {
+                                    ..._test.defaultDatasourceProps,
+                                    children: ui
+                                })
                             })
                         })
                     })
                 })
             })
         });
-    return (0, _react1.render)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(BaseRender, {}), options);
+    return (0, _react1.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(BaseRender, {}), options);
 }

package/dist/cjs/test/setup-tests.js

@@ -14,10 +14,10 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _reactIntersectionObserver = require("react-intersection-observer");
+const _reactintersectionobserver = require("react-intersection-observer");
 require("@testing-library/jest-dom/extend-expect");
 // Always mock e-charts during tests since we don't have a proper canvas in jsdom
 jest.mock('echarts/core');
 // Tell react-intersection-observer that everything should be considered in-view for tests (see package documentation
 // for other options)
-(0, _reactIntersectionObserver.defaultFallbackInView)(true);
+(0, _reactintersectionobserver.defaultFallbackInView)(true);

package/dist/cjs/test/testDashboard.js

@@ -16,15 +16,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "default", {
     enumerable: true,
-    get: ()=>_default
+    get: function() {
+        return _default;
+    }
 });
 const testDashboard = {
     kind: 'Dashboard',
     metadata: {
         name: 'Node Stats',
         project: 'perses',
-        created_at: '2021-11-09',
-        updated_at: '2021-11-09',
+        createdAt: '2021-11-09',
+        updatedAt: '2021-11-09',
         version: 0
     },
     spec: {
@@ -63,8 +65,8 @@ const testDashboard = {
                     plugin: {
                         kind: 'TimeSeriesChart',
                         spec: {
-                            unit: {
-                                kind: '%'
+                            format: {
+                                unit: '%'
                             }
                         }
                     },
@@ -92,8 +94,8 @@ const testDashboard = {
                     plugin: {
                         kind: 'TimeSeriesChart',
                         spec: {
-                            unit: {
-                                kind: 'Bytes'
+                            format: {
+                                unit: 'bytes'
                             }
                         }
                     },
@@ -155,8 +157,8 @@ const testDashboard = {
                     plugin: {
                         kind: 'TimeSeriesChart',
                         spec: {
-                            unit: {
-                                kind: 'Percent'
+                            format: {
+                                unit: 'percent'
                             }
                         }
                     },
@@ -184,8 +186,8 @@ const testDashboard = {
                     plugin: {
                         kind: 'TimeSeriesChart',
                         spec: {
-                            unit: {
-                                kind: 'Percent'
+                            format: {
+                                unit: 'percent'
                             }
                         }
                     },

package/dist/cjs/utils/index.js

@@ -14,16 +14,18 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./panelUtils"), exports);
-_exportStar(require("./time"), exports);
-function _exportStar(from, to) {
+_export_star(require("./panelUtils"), exports);
+_export_star(require("./time"), exports);
+function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
-        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
-            enumerable: true,
-            get: function() {
-                return from[k];
-            }
-        });
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
     });
     return from;
 }

package/dist/cjs/utils/panelUtils.js

@@ -21,9 +21,15 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    getYForNewRow: ()=>getYForNewRow,
-    insertPanelInLayout: ()=>insertPanelInLayout,
-    getValidPanelKey: ()=>getValidPanelKey
+    getYForNewRow: function() {
+        return getYForNewRow;
+    },
+    insertPanelInLayout: function() {
+        return insertPanelInLayout;
+    },
+    getValidPanelKey: function() {
+        return getValidPanelKey;
+    }
 });
 const _constants = require("../constants");
 function getYForNewRow(group) {

package/dist/cjs/utils/time.js

@@ -16,12 +16,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "useSuggestedStepMs", {
     enumerable: true,
-    get: ()=>useSuggestedStepMs
+    get: function() {
+        return useSuggestedStepMs;
+    }
 });
 const _core = require("@perses-dev/core");
-const _pluginSystem = require("@perses-dev/plugin-system");
+const _pluginsystem = require("@perses-dev/plugin-system");
 function useSuggestedStepMs(width) {
-    const { absoluteTimeRange  } = (0, _pluginSystem.useTimeRange)();
+    const { absoluteTimeRange  } = (0, _pluginsystem.useTimeRange)();
     if (width === undefined) return 0;
     return (0, _core.getSuggestedStepMs)(absoluteTimeRange, width);
 }

package/dist/cjs/validation/index.js

@@ -0,0 +1,30 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_export_star(require("./panel"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}

package/dist/cjs/validation/panel.js

@@ -0,0 +1,29 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "panelEditorValidationSchema", {
+    enumerable: true,
+    get: function() {
+        return panelEditorValidationSchema;
+    }
+});
+const _zod = require("zod");
+const panelEditorValidationSchema = _zod.z.object({
+    name: _zod.z.string().nonempty('Required'),
+    groupId: _zod.z.number(),
+    description: _zod.z.string().optional(),
+    type: _zod.z.string().nonempty('Required')
+});

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

@@ -16,16 +16,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "DashboardApp", {
     enumerable: true,
-    get: ()=>DashboardApp
+    get: function() {
+        return DashboardApp;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
 const _components1 = require("../../components");
 const _context = require("../../context");
 const DashboardApp = (props)=>{
-    const { dashboardResource , dashboardTitleComponent , emptyDashboardProps , onSave , onDiscard , initialVariableIsSticky , isReadonly ,  } = props;
+    const { dashboardResource , dashboardTitleComponent , emptyDashboardProps , onSave , onDiscard , initialVariableIsSticky , isReadonly , isCreating  } = props;
     const chartsTheme = (0, _components.useChartsTheme)();
     const { setEditMode  } = (0, _context.useEditMode)();
     const { dashboard , setDashboard  } = (0, _context.useDashboard)();
@@ -61,7 +63,7 @@ const DashboardApp = (props)=>{
             });
         }
     };
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
         sx: {
             flexGrow: 1,
             overflowX: 'hidden',
@@ -70,7 +72,7 @@ const DashboardApp = (props)=>{
             flexDirection: 'column'
         },
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.DashboardToolbar, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.DashboardToolbar, {
                 dashboardName: dashboardResource.metadata.name,
                 dashboardTitleComponent: dashboardTitleComponent,
                 initialVariableIsSticky: initialVariableIsSticky,
@@ -79,32 +81,34 @@ const DashboardApp = (props)=>{
                 onEditButtonClick: onEditButtonClick,
                 onCancelButtonClick: onCancelButtonClick
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
                 sx: {
                     padding: (theme)=>theme.spacing(2),
                     height: '100%'
                 },
                 children: [
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
                         FallbackComponent: _components.ErrorAlert,
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.Dashboard, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.Dashboard, {
                             emptyDashboardProps: {
                                 onEditButtonClick,
                                 ...emptyDashboardProps
                             }
                         })
                     }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ChartsProvider, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ChartsProvider, {
                         chartsTheme: chartsTheme,
                         enablePinning: false,
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.PanelDrawer, {})
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.PanelDrawer, {})
                     }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.PanelGroupDialog, {}),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.DeletePanelGroupDialog, {}),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.DeletePanelDialog, {}),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.DashboardDiscardChangesConfirmationDialog, {}),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.EditJsonDialog, {}),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.SaveChangesConfirmationDialog, {})
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.PanelGroupDialog, {}),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.DeletePanelGroupDialog, {}),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.DeletePanelDialog, {}),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.DashboardDiscardChangesConfirmationDialog, {}),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.EditJsonDialog, {
+                        disableMetadataEdition: !isCreating
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.SaveChangesConfirmationDialog, {})
                 ]
             })
         ]

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

@@ -16,40 +16,83 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "ViewDashboard", {
     enumerable: true,
-    get: ()=>ViewDashboard
+    get: function() {
+        return ViewDashboard;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+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 _pluginsystem = require("@perses-dev/plugin-system");
+const _react = require("react");
 const _context = require("../../context");
-const _dashboardApp = require("./DashboardApp");
+const _DashboardApp = require("./DashboardApp");
 function ViewDashboard(props) {
-    const { dashboardResource , datasourceApi , externalVariableDefinitions , dashboardTitleComponent , emptyDashboardProps , onSave , onDiscard , initialVariableIsSticky , isReadonly , isEditing , sx , ...others } = props;
+    const { dashboardResource , datasourceApi , externalVariableDefinitions , dashboardTitleComponent , emptyDashboardProps , onSave , onDiscard , initialVariableIsSticky , isReadonly , isEditing , isCreating , sx , ...others } = props;
     const { spec  } = dashboardResource;
-    var _duration;
-    const dashboardDuration = (_duration = spec.duration) !== null && _duration !== void 0 ? _duration : _core.DEFAULT_DASHBOARD_DURATION;
-    var _refreshInterval;
-    const dashboardRefreshInterval = (_refreshInterval = spec.refreshInterval) !== null && _refreshInterval !== void 0 ? _refreshInterval : _core.DEFAULT_REFRESH_INTERVAL;
-    const initialTimeRange = (0, _pluginSystem.useInitialTimeRange)(dashboardDuration);
-    const initialRefreshInterval = (0, _pluginSystem.useInitialRefreshInterval)(dashboardRefreshInterval);
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.DatasourceStoreProvider, {
+    var _spec_duration;
+    const dashboardDuration = (_spec_duration = spec.duration) !== null && _spec_duration !== void 0 ? _spec_duration : _core.DEFAULT_DASHBOARD_DURATION;
+    var _spec_refreshInterval;
+    const dashboardRefreshInterval = (_spec_refreshInterval = spec.refreshInterval) !== null && _spec_refreshInterval !== void 0 ? _spec_refreshInterval : _core.DEFAULT_REFRESH_INTERVAL;
+    const initialTimeRange = (0, _pluginsystem.useInitialTimeRange)(dashboardDuration);
+    const initialRefreshInterval = (0, _pluginsystem.useInitialRefreshInterval)(dashboardRefreshInterval);
+    const { data  } = (0, _pluginsystem.usePluginBuiltinVariableDefinitions)();
+    const builtinVariables = (0, _react.useMemo)(()=>{
+        const result = [
+            {
+                kind: 'BuiltinVariable',
+                spec: {
+                    name: '__dashboard',
+                    value: ()=>dashboardResource.metadata.name,
+                    source: 'Dashboard',
+                    display: {
+                        name: '__dashboard',
+                        description: 'The name of the current dashboard',
+                        hidden: true
+                    }
+                }
+            },
+            {
+                kind: 'BuiltinVariable',
+                spec: {
+                    name: '__project',
+                    value: ()=>dashboardResource.metadata.project,
+                    source: 'Dashboard',
+                    display: {
+                        name: '__project',
+                        description: 'The name of the current dashboard project',
+                        hidden: true
+                    }
+                }
+            }
+        ];
+        if (data) {
+            data.forEach((def)=>result.push(def));
+        }
+        return result;
+    }, [
+        dashboardResource.metadata.name,
+        dashboardResource.metadata.project,
+        data
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_context.DatasourceStoreProvider, {
         dashboardResource: dashboardResource,
         datasourceApi: datasourceApi,
-        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.DashboardProvider, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_context.DashboardProvider, {
             initialState: {
                 dashboardResource,
                 isEditMode: !!isEditing
             },
-            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.TimeRangeProvider, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TimeRangeProvider, {
                 initialTimeRange: initialTimeRange,
                 initialRefreshInterval: initialRefreshInterval,
                 enabledURLParams: true,
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TemplateVariableProvider, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_context.TemplateVariableProvider, {
                     initialVariableDefinitions: spec.variables,
                     externalVariableDefinitions: externalVariableDefinitions,
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                    builtinVariables: builtinVariables,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
                         sx: (0, _components.combineSx)({
                             display: 'flex',
                             width: '100%',
@@ -58,16 +101,17 @@ function ViewDashboard(props) {
                             overflow: 'hidden'
                         }, sx),
                         ...others,
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
                             FallbackComponent: _components.ErrorAlert,
-                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dashboardApp.DashboardApp, {
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DashboardApp.DashboardApp, {
                                 dashboardResource: dashboardResource,
                                 dashboardTitleComponent: dashboardTitleComponent,
                                 emptyDashboardProps: emptyDashboardProps,
                                 onSave: onSave,
                                 onDiscard: onDiscard,
                                 initialVariableIsSticky: initialVariableIsSticky,
-                                isReadonly: isReadonly
+                                isReadonly: isReadonly,
+                                isCreating: isCreating
                             })
                         })
                     })