@perses-dev/dashboards 0.25.0 → 0.26.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/EmptyDashboard/EmptyDashboard.js +2 -1
- package/dist/cjs/components/Panel/Panel.js +0 -4
- package/dist/cjs/components/Panel/PanelHeader.js +2 -2
- package/dist/cjs/context/TemplateVariableProvider/TemplateVariableProvider.js +3 -41
- package/dist/cjs/context/TemplateVariableProvider/hydrationUtils.js +68 -0
- package/dist/cjs/stories/decorators/WithDashboard.js +7 -28
- package/dist/cjs/stories/decorators/WithDatasourceStore.js +82 -0
- package/dist/cjs/stories/decorators/WithTemplateVariables.js +9 -1
- package/dist/cjs/stories/decorators/WithTimeRange.js +38 -0
- package/dist/cjs/stories/decorators/constants.js +36 -0
- package/dist/cjs/stories/decorators/index.js +3 -0
- package/dist/components/EmptyDashboard/EmptyDashboard.d.ts +5 -1
- package/dist/components/EmptyDashboard/EmptyDashboard.d.ts.map +1 -1
- package/dist/components/EmptyDashboard/EmptyDashboard.js +2 -1
- package/dist/components/EmptyDashboard/EmptyDashboard.js.map +1 -1
- package/dist/components/Panel/Panel.d.ts.map +1 -1
- package/dist/components/Panel/Panel.js +0 -4
- package/dist/components/Panel/Panel.js.map +1 -1
- package/dist/components/Panel/PanelHeader.d.ts +1 -2
- package/dist/components/Panel/PanelHeader.d.ts.map +1 -1
- package/dist/components/Panel/PanelHeader.js +2 -2
- package/dist/components/Panel/PanelHeader.js.map +1 -1
- package/dist/context/TemplateVariableProvider/TemplateVariableProvider.d.ts +3 -2
- package/dist/context/TemplateVariableProvider/TemplateVariableProvider.d.ts.map +1 -1
- package/dist/context/TemplateVariableProvider/TemplateVariableProvider.js +1 -39
- package/dist/context/TemplateVariableProvider/TemplateVariableProvider.js.map +1 -1
- package/dist/context/TemplateVariableProvider/hydrationUtils.d.ts +4 -0
- package/dist/context/TemplateVariableProvider/hydrationUtils.d.ts.map +1 -0
- package/dist/context/TemplateVariableProvider/hydrationUtils.js +62 -0
- package/dist/context/TemplateVariableProvider/hydrationUtils.js.map +1 -0
- package/dist/stories/decorators/WithDashboard.js +4 -19
- package/dist/stories/decorators/WithDashboard.js.map +1 -1
- package/dist/stories/decorators/WithDatasourceStore.js +76 -0
- package/dist/stories/decorators/WithDatasourceStore.js.map +1 -0
- package/dist/stories/decorators/WithTemplateVariables.js +9 -1
- package/dist/stories/decorators/WithTemplateVariables.js.map +1 -1
- package/dist/stories/decorators/WithTimeRange.js +32 -0
- package/dist/stories/decorators/WithTimeRange.js.map +1 -0
- package/dist/stories/decorators/constants.js +30 -0
- package/dist/stories/decorators/constants.js.map +1 -0
- package/dist/stories/decorators/index.js +3 -0
- package/dist/stories/decorators/index.js.map +1 -1
- package/package.json +4 -4
|
@@ -74,7 +74,7 @@ const EmptyDashboardActions = ({ actions , isEditMode , onEditButtonClick })=>{
|
|
|
74
74
|
}
|
|
75
75
|
return null;
|
|
76
76
|
};
|
|
77
|
-
const EmptyDashboard = ({ title =DEFAULT_TITLE , description , additionalText , actions , onEditButtonClick })=>{
|
|
77
|
+
const EmptyDashboard = ({ title =DEFAULT_TITLE , image , description , additionalText , actions , onEditButtonClick })=>{
|
|
78
78
|
const { isEditMode } = (0, _context.useEditMode)();
|
|
79
79
|
const defaultDescription = isEditMode ? DEFAULT_DESCRIPTION.edit : DEFAULT_DESCRIPTION.view;
|
|
80
80
|
const actionsContent = /*#__PURE__*/ (0, _jsxRuntime.jsx)(EmptyDashboardActions, {
|
|
@@ -95,6 +95,7 @@ const EmptyDashboard = ({ title =DEFAULT_TITLE , description , additionalText ,
|
|
|
95
95
|
margin: '0 auto'
|
|
96
96
|
},
|
|
97
97
|
children: [
|
|
98
|
+
!!image && image,
|
|
98
99
|
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
|
|
99
100
|
variant: "h2",
|
|
100
101
|
gutterBottom: true,
|
|
@@ -37,7 +37,6 @@ function Panel(props) {
|
|
|
37
37
|
const generatedPanelId = (0, _components.useId)('Panel');
|
|
38
38
|
const headerId = `${generatedPanelId}-header`;
|
|
39
39
|
const [contentElement, setContentElement] = (0, _react.useState)(null);
|
|
40
|
-
const [isHovered, setIsHovered] = (0, _react.useState)(false);
|
|
41
40
|
const { width , height } = (0, _useResizeObserver.default)({
|
|
42
41
|
ref: contentElement
|
|
43
42
|
});
|
|
@@ -58,11 +57,9 @@ function Panel(props) {
|
|
|
58
57
|
});
|
|
59
58
|
const chartsTheme = (0, _components.useChartsTheme)();
|
|
60
59
|
const handleMouseEnter = (e)=>{
|
|
61
|
-
setIsHovered(true);
|
|
62
60
|
onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
|
|
63
61
|
};
|
|
64
62
|
const handleMouseLeave = (e)=>{
|
|
65
|
-
setIsHovered(false);
|
|
66
63
|
onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
|
|
67
64
|
};
|
|
68
65
|
return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Card, {
|
|
@@ -87,7 +84,6 @@ function Panel(props) {
|
|
|
87
84
|
title: definition.spec.display.name,
|
|
88
85
|
description: definition.spec.display.description,
|
|
89
86
|
editHandlers: editHandlers,
|
|
90
|
-
isHovered: isHovered,
|
|
91
87
|
sx: {
|
|
92
88
|
paddingX: `${chartsTheme.container.padding.default}px`
|
|
93
89
|
}
|
|
@@ -32,7 +32,7 @@ function _interopRequireDefault(obj) {
|
|
|
32
32
|
default: obj
|
|
33
33
|
};
|
|
34
34
|
}
|
|
35
|
-
function PanelHeader({ id , title , description , editHandlers ,
|
|
35
|
+
function PanelHeader({ id , title , description , editHandlers , sx , ...rest }) {
|
|
36
36
|
const titleElementId = `${id}-title`;
|
|
37
37
|
const descriptionTooltipId = `${id}-description`;
|
|
38
38
|
let actions = undefined;
|
|
@@ -94,7 +94,7 @@ function PanelHeader({ id , title , description , editHandlers , isHovered , sx
|
|
|
94
94
|
})
|
|
95
95
|
]
|
|
96
96
|
});
|
|
97
|
-
} else if (description !== undefined
|
|
97
|
+
} else if (description !== undefined) {
|
|
98
98
|
// If there aren't edit handlers and we have a description, show a button with a tooltip for the panel description
|
|
99
99
|
actions = /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
|
|
100
100
|
id: descriptionTooltipId,
|
|
@@ -34,6 +34,7 @@ const _zustand = require("zustand");
|
|
|
34
34
|
const _immer = require("zustand/middleware/immer");
|
|
35
35
|
const _middleware = require("zustand/middleware");
|
|
36
36
|
const _pluginSystem = require("@perses-dev/plugin-system");
|
|
37
|
+
const _hydrationUtils = require("./hydrationUtils");
|
|
37
38
|
const _queryParams = require("./query-params");
|
|
38
39
|
const TemplateVariableStoreContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
|
|
39
40
|
function useTemplateVariableStoreCtx() {
|
|
@@ -123,12 +124,12 @@ function PluginProvider({ children }) {
|
|
|
123
124
|
function createTemplateVariableSrvStore({ initialVariableDefinitions =[] , queryParams }) {
|
|
124
125
|
const initialParams = (0, _queryParams.getInitalValuesFromQueryParameters)(queryParams ? queryParams[0] : {});
|
|
125
126
|
const store = (0, _zustand.createStore)()((0, _middleware.devtools)((0, _immer.immer)((set)=>({
|
|
126
|
-
variableState: hydrateTemplateVariableStates(initialVariableDefinitions, initialParams),
|
|
127
|
+
variableState: (0, _hydrationUtils.hydrateTemplateVariableStates)(initialVariableDefinitions, initialParams),
|
|
127
128
|
variableDefinitions: initialVariableDefinitions,
|
|
128
129
|
setVariableDefinitions (definitions) {
|
|
129
130
|
set((state)=>{
|
|
130
131
|
state.variableDefinitions = definitions;
|
|
131
|
-
state.variableState = hydrateTemplateVariableStates(definitions, initialParams);
|
|
132
|
+
state.variableState = (0, _hydrationUtils.hydrateTemplateVariableStates)(definitions, initialParams);
|
|
132
133
|
});
|
|
133
134
|
},
|
|
134
135
|
setVariableOptions (name, options) {
|
|
@@ -187,42 +188,3 @@ function TemplateVariableProvider({ children , initialVariableDefinitions =[] }
|
|
|
187
188
|
})
|
|
188
189
|
});
|
|
189
190
|
}
|
|
190
|
-
/** Helpers */ function hydrateTemplateVariableState(variable, initialValue) {
|
|
191
|
-
const varState = {
|
|
192
|
-
value: null,
|
|
193
|
-
loading: false
|
|
194
|
-
};
|
|
195
|
-
switch(variable.kind){
|
|
196
|
-
case 'TextVariable':
|
|
197
|
-
varState.value = initialValue !== null && initialValue !== void 0 ? initialValue : variable.spec.value;
|
|
198
|
-
break;
|
|
199
|
-
case 'ListVariable':
|
|
200
|
-
varState.options = [];
|
|
201
|
-
var ref;
|
|
202
|
-
varState.value = (ref = initialValue !== null && initialValue !== void 0 ? initialValue : variable.spec.default_value) !== null && ref !== void 0 ? ref : null;
|
|
203
|
-
if (varState.options.length > 0 && !varState.value) {
|
|
204
|
-
var ref1;
|
|
205
|
-
var ref2;
|
|
206
|
-
const firstOptionValue = (ref2 = (ref1 = varState.options[0]) === null || ref1 === void 0 ? void 0 : ref1.value) !== null && ref2 !== void 0 ? ref2 : null;
|
|
207
|
-
if (firstOptionValue !== null) {
|
|
208
|
-
varState.value = variable.spec.allow_multiple ? [
|
|
209
|
-
firstOptionValue
|
|
210
|
-
] : firstOptionValue;
|
|
211
|
-
}
|
|
212
|
-
}
|
|
213
|
-
break;
|
|
214
|
-
default:
|
|
215
|
-
break;
|
|
216
|
-
}
|
|
217
|
-
return varState;
|
|
218
|
-
}
|
|
219
|
-
function hydrateTemplateVariableStates(definitions, initialValues) {
|
|
220
|
-
const state = {};
|
|
221
|
-
definitions.forEach((v)=>{
|
|
222
|
-
const name = v.spec.name;
|
|
223
|
-
const param = initialValues[name];
|
|
224
|
-
const initialValue = param ? param : null;
|
|
225
|
-
state[name] = hydrateTemplateVariableState(v, initialValue);
|
|
226
|
-
});
|
|
227
|
-
return state;
|
|
228
|
-
}
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
// Copyright 2023 The Perses Authors
|
|
2
|
+
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
3
|
+
// you may not use this file except in compliance with the License.
|
|
4
|
+
// You may obtain a copy of the License at
|
|
5
|
+
//
|
|
6
|
+
// http://www.apache.org/licenses/LICENSE-2.0
|
|
7
|
+
//
|
|
8
|
+
// Unless required by applicable law or agreed to in writing, software
|
|
9
|
+
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
10
|
+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
11
|
+
// See the License for the specific language governing permissions and
|
|
12
|
+
// limitations under the License.
|
|
13
|
+
"use strict";
|
|
14
|
+
Object.defineProperty(exports, "__esModule", {
|
|
15
|
+
value: true
|
|
16
|
+
});
|
|
17
|
+
Object.defineProperty(exports, "hydrateTemplateVariableStates", {
|
|
18
|
+
enumerable: true,
|
|
19
|
+
get: ()=>hydrateTemplateVariableStates
|
|
20
|
+
});
|
|
21
|
+
const _pluginSystem = require("@perses-dev/plugin-system");
|
|
22
|
+
function hydrateTemplateVariableState(variable, initialValue) {
|
|
23
|
+
const varState = {
|
|
24
|
+
value: null,
|
|
25
|
+
loading: false
|
|
26
|
+
};
|
|
27
|
+
switch(variable.kind){
|
|
28
|
+
case 'TextVariable':
|
|
29
|
+
varState.value = initialValue !== null && initialValue !== void 0 ? initialValue : variable.spec.value;
|
|
30
|
+
break;
|
|
31
|
+
case 'ListVariable':
|
|
32
|
+
varState.options = [];
|
|
33
|
+
var ref;
|
|
34
|
+
varState.value = (ref = initialValue !== null && initialValue !== void 0 ? initialValue : variable.spec.default_value) !== null && ref !== void 0 ? ref : null;
|
|
35
|
+
if (varState.options.length > 0 && !varState.value) {
|
|
36
|
+
var ref1;
|
|
37
|
+
var ref2;
|
|
38
|
+
const firstOptionValue = (ref2 = (ref1 = varState.options[0]) === null || ref1 === void 0 ? void 0 : ref1.value) !== null && ref2 !== void 0 ? ref2 : null;
|
|
39
|
+
if (firstOptionValue !== null) {
|
|
40
|
+
varState.value = variable.spec.allow_multiple ? [
|
|
41
|
+
firstOptionValue
|
|
42
|
+
] : firstOptionValue;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
// "all" variable handling assumes the value is not in an array. This is
|
|
46
|
+
// handled properly during internal variable interactions, but it is possible
|
|
47
|
+
// to end up in a buggy state if the variables are initialized with an "all"
|
|
48
|
+
// value inside an array. When hydrating variables, normalize this to minimize
|
|
49
|
+
// bugs.
|
|
50
|
+
if (Array.isArray(varState.value) && varState.value.length === 1 && varState.value[0] === _pluginSystem.DEFAULT_ALL_VALUE) {
|
|
51
|
+
varState.value = _pluginSystem.DEFAULT_ALL_VALUE;
|
|
52
|
+
}
|
|
53
|
+
break;
|
|
54
|
+
default:
|
|
55
|
+
break;
|
|
56
|
+
}
|
|
57
|
+
return varState;
|
|
58
|
+
}
|
|
59
|
+
function hydrateTemplateVariableStates(definitions, initialValues) {
|
|
60
|
+
const state = {};
|
|
61
|
+
definitions.forEach((v)=>{
|
|
62
|
+
const name = v.spec.name;
|
|
63
|
+
const param = initialValues[name];
|
|
64
|
+
const initialValue = param ? param : null;
|
|
65
|
+
state[name] = hydrateTemplateVariableState(v, initialValue);
|
|
66
|
+
});
|
|
67
|
+
return state;
|
|
68
|
+
}
|
|
@@ -14,46 +14,25 @@
|
|
|
14
14
|
Object.defineProperty(exports, "__esModule", {
|
|
15
15
|
value: true
|
|
16
16
|
});
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
get: all[name]
|
|
21
|
-
});
|
|
22
|
-
}
|
|
23
|
-
_export(exports, {
|
|
24
|
-
DEFAULT_DASHBOARD_INITIAL_STATE: ()=>DEFAULT_DASHBOARD_INITIAL_STATE,
|
|
25
|
-
WithDashboard: ()=>WithDashboard
|
|
17
|
+
Object.defineProperty(exports, "WithDashboard", {
|
|
18
|
+
enumerable: true,
|
|
19
|
+
get: ()=>WithDashboard
|
|
26
20
|
});
|
|
27
21
|
const _jsxRuntime = require("react/jsx-runtime");
|
|
28
22
|
const _dashboards = require("@perses-dev/dashboards");
|
|
23
|
+
const _constants = require("./constants");
|
|
29
24
|
// Type guard because storybook types parameters as `any`
|
|
30
25
|
function isWithDashboardParameter(parameter) {
|
|
31
26
|
return !!parameter && typeof parameter === 'object' && 'props' in parameter;
|
|
32
27
|
}
|
|
33
|
-
const DEFAULT_DASHBOARD_INITIAL_STATE = {
|
|
34
|
-
dashboardResource: {
|
|
35
|
-
kind: 'Dashboard',
|
|
36
|
-
metadata: {
|
|
37
|
-
name: 'My Dashboard',
|
|
38
|
-
project: 'Storybook',
|
|
39
|
-
created_at: '2021-11-09T00:00:00Z',
|
|
40
|
-
updated_at: '2021-11-09T00:00:00Z',
|
|
41
|
-
version: 0
|
|
42
|
-
},
|
|
43
|
-
spec: {
|
|
44
|
-
duration: '1h',
|
|
45
|
-
variables: [],
|
|
46
|
-
layouts: [],
|
|
47
|
-
panels: {}
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
};
|
|
51
28
|
const WithDashboard = (Story, context)=>{
|
|
52
29
|
const initParameter = context.parameters.withDashboard;
|
|
53
30
|
const parameter = isWithDashboardParameter(initParameter) ? initParameter : undefined;
|
|
54
31
|
const props = parameter === null || parameter === void 0 ? void 0 : parameter.props;
|
|
55
32
|
return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dashboards.DashboardProvider, {
|
|
56
|
-
initialState:
|
|
33
|
+
initialState: {
|
|
34
|
+
dashboardResource: _constants.EMPTY_DASHBOARD_RESOURCE
|
|
35
|
+
},
|
|
57
36
|
...props,
|
|
58
37
|
children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(Story, {})
|
|
59
38
|
});
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
// Copyright 2023 The Perses Authors
|
|
2
|
+
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
3
|
+
// you may not use this file except in compliance with the License.
|
|
4
|
+
// You may obtain a copy of the License at
|
|
5
|
+
//
|
|
6
|
+
// http://www.apache.org/licenses/LICENSE-2.0
|
|
7
|
+
//
|
|
8
|
+
// Unless required by applicable law or agreed to in writing, software
|
|
9
|
+
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
10
|
+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
11
|
+
// See the License for the specific language governing permissions and
|
|
12
|
+
// limitations under the License.
|
|
13
|
+
"use strict";
|
|
14
|
+
Object.defineProperty(exports, "__esModule", {
|
|
15
|
+
value: true
|
|
16
|
+
});
|
|
17
|
+
Object.defineProperty(exports, "WithDatasourceStore", {
|
|
18
|
+
enumerable: true,
|
|
19
|
+
get: ()=>WithDatasourceStore
|
|
20
|
+
});
|
|
21
|
+
const _jsxRuntime = require("react/jsx-runtime");
|
|
22
|
+
const _dashboards = require("@perses-dev/dashboards");
|
|
23
|
+
const _constants = require("./constants");
|
|
24
|
+
// Type guard because storybook types parameters as `any`
|
|
25
|
+
function isWithDatasourceStoreParameter(parameter) {
|
|
26
|
+
return !!parameter && typeof parameter === 'object' && 'props' in parameter;
|
|
27
|
+
}
|
|
28
|
+
const prometheusDemoUrl = 'https://prometheus.demo.do.prometheus.io';
|
|
29
|
+
const prometheusDemo = {
|
|
30
|
+
kind: 'GlobalDatasource',
|
|
31
|
+
metadata: {
|
|
32
|
+
name: 'PrometheusDemo',
|
|
33
|
+
created_at: '0001-01-01T00:00:00Z',
|
|
34
|
+
updated_at: '0001-01-01T00:00:00Z',
|
|
35
|
+
version: 0
|
|
36
|
+
},
|
|
37
|
+
spec: {
|
|
38
|
+
default: true,
|
|
39
|
+
plugin: {
|
|
40
|
+
kind: 'PrometheusDatasource',
|
|
41
|
+
spec: {
|
|
42
|
+
direct_url: prometheusDemoUrl
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
const WithDatasourceStore = (Story, context)=>{
|
|
48
|
+
const initParameter = context.parameters.withDatasourceStore;
|
|
49
|
+
const parameter = isWithDatasourceStoreParameter(initParameter) ? initParameter : undefined;
|
|
50
|
+
const props = parameter === null || parameter === void 0 ? void 0 : parameter.props;
|
|
51
|
+
// This default currently defines the bare minimum to get a story working in
|
|
52
|
+
// the `Dashboard` storybook with the Prometheus demo api. We'll likely want
|
|
53
|
+
// to expand it to do more in the future.
|
|
54
|
+
const defaultDatasourceProps = {
|
|
55
|
+
dashboardResource: _constants.EMPTY_DASHBOARD_RESOURCE,
|
|
56
|
+
datasourceApi: {
|
|
57
|
+
getDatasource: ()=>{
|
|
58
|
+
return Promise.resolve(undefined);
|
|
59
|
+
},
|
|
60
|
+
getGlobalDatasource: (selector)=>{
|
|
61
|
+
if (selector.kind === 'PrometheusDatasource') {
|
|
62
|
+
return Promise.resolve({
|
|
63
|
+
resource: prometheusDemo,
|
|
64
|
+
proxyUrl: prometheusDemoUrl
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
return Promise.resolve(undefined);
|
|
68
|
+
},
|
|
69
|
+
listDatasources: ()=>{
|
|
70
|
+
return Promise.resolve([]);
|
|
71
|
+
},
|
|
72
|
+
listGlobalDatasources: ()=>{
|
|
73
|
+
return Promise.resolve([]);
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
};
|
|
77
|
+
return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dashboards.DatasourceStoreProvider, {
|
|
78
|
+
...defaultDatasourceProps,
|
|
79
|
+
...props,
|
|
80
|
+
children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(Story, {})
|
|
81
|
+
});
|
|
82
|
+
};
|
|
@@ -20,8 +20,16 @@ Object.defineProperty(exports, "WithTemplateVariables", {
|
|
|
20
20
|
});
|
|
21
21
|
const _jsxRuntime = require("react/jsx-runtime");
|
|
22
22
|
const _dashboards = require("@perses-dev/dashboards");
|
|
23
|
-
|
|
23
|
+
// Type guard because storybook types parameters as `any`
|
|
24
|
+
function isWithTemplateVariableParameter(parameter) {
|
|
25
|
+
return !!parameter && typeof parameter === 'object' && 'props' in parameter;
|
|
26
|
+
}
|
|
27
|
+
const WithTemplateVariables = (Story, context)=>{
|
|
28
|
+
const initParameter = context.parameters.withTemplateVariables;
|
|
29
|
+
const parameter = isWithTemplateVariableParameter(initParameter) ? initParameter : undefined;
|
|
30
|
+
const props = parameter === null || parameter === void 0 ? void 0 : parameter.props;
|
|
24
31
|
return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dashboards.TemplateVariableProvider, {
|
|
32
|
+
...props,
|
|
25
33
|
children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(Story, {})
|
|
26
34
|
});
|
|
27
35
|
};
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
// Copyright 2023 The Perses Authors
|
|
2
|
+
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
3
|
+
// you may not use this file except in compliance with the License.
|
|
4
|
+
// You may obtain a copy of the License at
|
|
5
|
+
//
|
|
6
|
+
// http://www.apache.org/licenses/LICENSE-2.0
|
|
7
|
+
//
|
|
8
|
+
// Unless required by applicable law or agreed to in writing, software
|
|
9
|
+
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
10
|
+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
11
|
+
// See the License for the specific language governing permissions and
|
|
12
|
+
// limitations under the License.
|
|
13
|
+
"use strict";
|
|
14
|
+
Object.defineProperty(exports, "__esModule", {
|
|
15
|
+
value: true
|
|
16
|
+
});
|
|
17
|
+
Object.defineProperty(exports, "WithTimeRange", {
|
|
18
|
+
enumerable: true,
|
|
19
|
+
get: ()=>WithTimeRange
|
|
20
|
+
});
|
|
21
|
+
const _jsxRuntime = require("react/jsx-runtime");
|
|
22
|
+
const _pluginSystem = require("@perses-dev/plugin-system");
|
|
23
|
+
// Type guard because storybook types parameters as `any`
|
|
24
|
+
function isWithTimeRangeParameter(parameter) {
|
|
25
|
+
return !!parameter && typeof parameter === 'object' && 'props' in parameter;
|
|
26
|
+
}
|
|
27
|
+
const WithTimeRange = (Story, context)=>{
|
|
28
|
+
const initParameter = context.parameters.withTimeRange;
|
|
29
|
+
const parameter = isWithTimeRangeParameter(initParameter) ? initParameter : undefined;
|
|
30
|
+
const props = parameter === null || parameter === void 0 ? void 0 : parameter.props;
|
|
31
|
+
return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.TimeRangeProvider, {
|
|
32
|
+
initialTimeRange: {
|
|
33
|
+
pastDuration: '1h'
|
|
34
|
+
},
|
|
35
|
+
...props,
|
|
36
|
+
children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(Story, {})
|
|
37
|
+
});
|
|
38
|
+
};
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
// Copyright 2023 The Perses Authors
|
|
2
|
+
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
3
|
+
// you may not use this file except in compliance with the License.
|
|
4
|
+
// You may obtain a copy of the License at
|
|
5
|
+
//
|
|
6
|
+
// http://www.apache.org/licenses/LICENSE-2.0
|
|
7
|
+
//
|
|
8
|
+
// Unless required by applicable law or agreed to in writing, software
|
|
9
|
+
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
10
|
+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
11
|
+
// See the License for the specific language governing permissions and
|
|
12
|
+
// limitations under the License.
|
|
13
|
+
"use strict";
|
|
14
|
+
Object.defineProperty(exports, "__esModule", {
|
|
15
|
+
value: true
|
|
16
|
+
});
|
|
17
|
+
Object.defineProperty(exports, "EMPTY_DASHBOARD_RESOURCE", {
|
|
18
|
+
enumerable: true,
|
|
19
|
+
get: ()=>EMPTY_DASHBOARD_RESOURCE
|
|
20
|
+
});
|
|
21
|
+
const EMPTY_DASHBOARD_RESOURCE = {
|
|
22
|
+
kind: 'Dashboard',
|
|
23
|
+
metadata: {
|
|
24
|
+
name: 'My Dashboard',
|
|
25
|
+
project: 'Storybook',
|
|
26
|
+
created_at: '2021-11-09T00:00:00Z',
|
|
27
|
+
updated_at: '2021-11-09T00:00:00Z',
|
|
28
|
+
version: 0
|
|
29
|
+
},
|
|
30
|
+
spec: {
|
|
31
|
+
duration: '1h',
|
|
32
|
+
variables: [],
|
|
33
|
+
layouts: [],
|
|
34
|
+
panels: {}
|
|
35
|
+
}
|
|
36
|
+
};
|
|
@@ -14,11 +14,14 @@
|
|
|
14
14
|
Object.defineProperty(exports, "__esModule", {
|
|
15
15
|
value: true
|
|
16
16
|
});
|
|
17
|
+
_exportStar(require("./constants"), exports);
|
|
17
18
|
_exportStar(require("./WithDashboard"), exports);
|
|
19
|
+
_exportStar(require("./WithDatasourceStore"), exports);
|
|
18
20
|
_exportStar(require("./WithPluginRegistry"), exports);
|
|
19
21
|
_exportStar(require("./WithQueryClient"), exports);
|
|
20
22
|
_exportStar(require("./WithQueryParams"), exports);
|
|
21
23
|
_exportStar(require("./WithTemplateVariables"), exports);
|
|
24
|
+
_exportStar(require("./WithTimeRange"), exports);
|
|
22
25
|
function _exportStar(from, to) {
|
|
23
26
|
Object.keys(from).forEach(function(k) {
|
|
24
27
|
if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
|
|
@@ -4,6 +4,10 @@ export interface EmptyDashboardProps {
|
|
|
4
4
|
* The title, which should be relatively short text.
|
|
5
5
|
*/
|
|
6
6
|
title?: string;
|
|
7
|
+
/**
|
|
8
|
+
* Imagery to display above the title.
|
|
9
|
+
*/
|
|
10
|
+
image?: React.ReactNode;
|
|
7
11
|
/**
|
|
8
12
|
* Descriptive text, which can be a bit longer.
|
|
9
13
|
*/
|
|
@@ -29,5 +33,5 @@ export interface EmptyDashboardProps {
|
|
|
29
33
|
/**
|
|
30
34
|
* Communicate that a dashboard is empty and prompt the user to get started.
|
|
31
35
|
*/
|
|
32
|
-
export declare const EmptyDashboard: ({ title, description, additionalText, actions, onEditButtonClick, }: EmptyDashboardProps) => JSX.Element;
|
|
36
|
+
export declare const EmptyDashboard: ({ title, image, description, additionalText, actions, onEditButtonClick, }: EmptyDashboardProps) => JSX.Element;
|
|
33
37
|
//# sourceMappingURL=EmptyDashboard.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmptyDashboard.d.ts","sourceRoot":"","sources":["../../../src/components/EmptyDashboard/EmptyDashboard.tsx"],"names":[],"mappings":";AAmBA,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,OAAO,CAAC;IAEhC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC;AAmDD;;GAEG;AACH,eAAO,MAAM,cAAc,
|
|
1
|
+
{"version":3,"file":"EmptyDashboard.d.ts","sourceRoot":"","sources":["../../../src/components/EmptyDashboard/EmptyDashboard.tsx"],"names":[],"mappings":";AAmBA,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,OAAO,CAAC;IAEhC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC;AAmDD;;GAEG;AACH,eAAO,MAAM,cAAc,+EAOxB,mBAAmB,gBA2BrB,CAAC"}
|
|
@@ -68,7 +68,7 @@ const EmptyDashboardActions = ({ actions , isEditMode , onEditButtonClick })=>{
|
|
|
68
68
|
};
|
|
69
69
|
/**
|
|
70
70
|
* Communicate that a dashboard is empty and prompt the user to get started.
|
|
71
|
-
*/ export const EmptyDashboard = ({ title =DEFAULT_TITLE , description , additionalText , actions , onEditButtonClick })=>{
|
|
71
|
+
*/ export const EmptyDashboard = ({ title =DEFAULT_TITLE , image , description , additionalText , actions , onEditButtonClick })=>{
|
|
72
72
|
const { isEditMode } = useEditMode();
|
|
73
73
|
const defaultDescription = isEditMode ? DEFAULT_DESCRIPTION.edit : DEFAULT_DESCRIPTION.view;
|
|
74
74
|
const actionsContent = /*#__PURE__*/ _jsx(EmptyDashboardActions, {
|
|
@@ -89,6 +89,7 @@ const EmptyDashboardActions = ({ actions , isEditMode , onEditButtonClick })=>{
|
|
|
89
89
|
margin: '0 auto'
|
|
90
90
|
},
|
|
91
91
|
children: [
|
|
92
|
+
!!image && image,
|
|
92
93
|
/*#__PURE__*/ _jsx(Typography, {
|
|
93
94
|
variant: "h2",
|
|
94
95
|
gutterBottom: true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/EmptyDashboard/EmptyDashboard.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, Box } from '@mui/material';\nimport { useEditMode } from '../../context';\nimport { AddPanelButton } from '../AddPanelButton';\nimport { EditVariablesButton } from '../Variables';\nimport { EditButton } from '../EditButton';\n\nexport interface EmptyDashboardProps {\n /**\n * The title, which should be relatively short text.\n */\n title?: string;\n\n /**\n * Descriptive text, which can be a bit longer.\n */\n description?: string;\n\n /**\n * Additional text that will be displayed at the bottom of the empty state.\n * If not specified, no additional text is shown.\n */\n additionalText?: string;\n\n /**\n * Components that are placed below the title and description that include\n * actions for the user to take (e.g. buttons or links). If not specified,\n * the default buttons will be displayed. Set to `false` to disable the default\n * buttons.\n */\n actions?: JSX.Element | boolean;\n\n /**\n * Handler for clicking the edit button when the dashboard is in \"view\" mode.\n * Required when using the default empty state.\n */\n onEditButtonClick?: () => void;\n}\n\nconst DEFAULT_TITLE = \"Let's get started\";\n\nconst DEFAULT_DESCRIPTION = {\n edit: 'We currently support time series charts, gauge charts, stat charts and more!',\n view: 'This dashboard is currently empty. Get started by clicking the edit button.',\n};\n\n// Constants from specifics in designs to make the default messaging look good.\nconst CONTAINER_WIDTH = '450px';\nconst PRIMARY_CONTENT_WIDTH = '289px';\n\nconst COMMON_BUTTON_PROPS = {\n variant: 'outlined',\n color: 'secondary',\n} as const;\n\ntype EmptyDashboardActionsProps = Pick<EmptyDashboardProps, 'actions' | 'onEditButtonClick'> & {\n isEditMode: boolean;\n};\n\nconst EmptyDashboardActions = ({ actions, isEditMode, onEditButtonClick }: EmptyDashboardActionsProps) => {\n if (actions && typeof actions !== 'boolean') {\n // Custom actions\n return actions;\n }\n\n if (actions === false) {\n // Disable default actions\n return null;\n }\n\n if (isEditMode) {\n // Default edit mode actions\n return (\n <>\n <AddPanelButton variant=\"outlined\" color=\"secondary\" label=\"Add Panel\" fullWidth />\n <EditVariablesButton variant=\"outlined\" color=\"secondary\" label=\"Add Variables\" fullWidth />\n </>\n );\n }\n\n if (onEditButtonClick) {\n // Default view mode actions\n return <EditButton {...COMMON_BUTTON_PROPS} label=\"Edit Dashboard\" onClick={onEditButtonClick} />;\n }\n\n return null;\n};\n\n/**\n * Communicate that a dashboard is empty and prompt the user to get started.\n */\nexport const EmptyDashboard = ({\n title = DEFAULT_TITLE,\n description,\n additionalText,\n actions,\n onEditButtonClick,\n}: EmptyDashboardProps) => {\n const { isEditMode } = useEditMode();\n\n const defaultDescription = isEditMode ? DEFAULT_DESCRIPTION.edit : DEFAULT_DESCRIPTION.view;\n const actionsContent = (\n <EmptyDashboardActions actions={actions} onEditButtonClick={onEditButtonClick} isEditMode={isEditMode} />\n );\n\n return (\n <Box sx={{ width: CONTAINER_WIDTH, textAlign: 'center', margin: '0 auto' }}>\n <Box sx={{ width: PRIMARY_CONTENT_WIDTH, margin: '0 auto' }}>\n <Typography variant=\"h2\" gutterBottom>\n {title}\n </Typography>\n <Typography variant=\"body1\">{description ?? defaultDescription}</Typography>\n {actionsContent && (\n <Box sx={{ display: 'flex', gap: 2, marginTop: 1, justifyContent: 'center' }}>{actionsContent}</Box>\n )}\n </Box>\n {additionalText && (\n <Typography variant=\"subtitle1\" sx={{ marginTop: 12 }}>\n {additionalText}\n </Typography>\n )}\n </Box>\n );\n};\n"],"names":["Typography","Box","useEditMode","AddPanelButton","EditVariablesButton","EditButton","DEFAULT_TITLE","DEFAULT_DESCRIPTION","edit","view","CONTAINER_WIDTH","PRIMARY_CONTENT_WIDTH","COMMON_BUTTON_PROPS","variant","color","EmptyDashboardActions","actions","isEditMode","onEditButtonClick","label","fullWidth","onClick","EmptyDashboard","title","description","additionalText","defaultDescription","actionsContent","sx","width","textAlign","margin","gutterBottom","display","gap","marginTop","justifyContent"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,UAAU,EAAEC,GAAG,QAAQ,eAAe,CAAC;AAChD,SAASC,WAAW,QAAQ,eAAe,CAAC;AAC5C,SAASC,cAAc,QAAQ,mBAAmB,CAAC;AACnD,SAASC,mBAAmB,QAAQ,cAAc,CAAC;AACnD,SAASC,UAAU,QAAQ,eAAe,CAAC;
|
|
1
|
+
{"version":3,"sources":["../../../src/components/EmptyDashboard/EmptyDashboard.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, Box } from '@mui/material';\nimport { useEditMode } from '../../context';\nimport { AddPanelButton } from '../AddPanelButton';\nimport { EditVariablesButton } from '../Variables';\nimport { EditButton } from '../EditButton';\n\nexport interface EmptyDashboardProps {\n /**\n * The title, which should be relatively short text.\n */\n title?: string;\n\n /**\n * Imagery to display above the title.\n */\n image?: React.ReactNode;\n\n /**\n * Descriptive text, which can be a bit longer.\n */\n description?: string;\n\n /**\n * Additional text that will be displayed at the bottom of the empty state.\n * If not specified, no additional text is shown.\n */\n additionalText?: string;\n\n /**\n * Components that are placed below the title and description that include\n * actions for the user to take (e.g. buttons or links). If not specified,\n * the default buttons will be displayed. Set to `false` to disable the default\n * buttons.\n */\n actions?: JSX.Element | boolean;\n\n /**\n * Handler for clicking the edit button when the dashboard is in \"view\" mode.\n * Required when using the default empty state.\n */\n onEditButtonClick?: () => void;\n}\n\nconst DEFAULT_TITLE = \"Let's get started\";\n\nconst DEFAULT_DESCRIPTION = {\n edit: 'We currently support time series charts, gauge charts, stat charts and more!',\n view: 'This dashboard is currently empty. Get started by clicking the edit button.',\n};\n\n// Constants from specifics in designs to make the default messaging look good.\nconst CONTAINER_WIDTH = '450px';\nconst PRIMARY_CONTENT_WIDTH = '289px';\n\nconst COMMON_BUTTON_PROPS = {\n variant: 'outlined',\n color: 'secondary',\n} as const;\n\ntype EmptyDashboardActionsProps = Pick<EmptyDashboardProps, 'actions' | 'onEditButtonClick'> & {\n isEditMode: boolean;\n};\n\nconst EmptyDashboardActions = ({ actions, isEditMode, onEditButtonClick }: EmptyDashboardActionsProps) => {\n if (actions && typeof actions !== 'boolean') {\n // Custom actions\n return actions;\n }\n\n if (actions === false) {\n // Disable default actions\n return null;\n }\n\n if (isEditMode) {\n // Default edit mode actions\n return (\n <>\n <AddPanelButton variant=\"outlined\" color=\"secondary\" label=\"Add Panel\" fullWidth />\n <EditVariablesButton variant=\"outlined\" color=\"secondary\" label=\"Add Variables\" fullWidth />\n </>\n );\n }\n\n if (onEditButtonClick) {\n // Default view mode actions\n return <EditButton {...COMMON_BUTTON_PROPS} label=\"Edit Dashboard\" onClick={onEditButtonClick} />;\n }\n\n return null;\n};\n\n/**\n * Communicate that a dashboard is empty and prompt the user to get started.\n */\nexport const EmptyDashboard = ({\n title = DEFAULT_TITLE,\n image,\n description,\n additionalText,\n actions,\n onEditButtonClick,\n}: EmptyDashboardProps) => {\n const { isEditMode } = useEditMode();\n\n const defaultDescription = isEditMode ? DEFAULT_DESCRIPTION.edit : DEFAULT_DESCRIPTION.view;\n const actionsContent = (\n <EmptyDashboardActions actions={actions} onEditButtonClick={onEditButtonClick} isEditMode={isEditMode} />\n );\n\n return (\n <Box sx={{ width: CONTAINER_WIDTH, textAlign: 'center', margin: '0 auto' }}>\n <Box sx={{ width: PRIMARY_CONTENT_WIDTH, margin: '0 auto' }}>\n {!!image && image}\n <Typography variant=\"h2\" gutterBottom>\n {title}\n </Typography>\n <Typography variant=\"body1\">{description ?? defaultDescription}</Typography>\n {actionsContent && (\n <Box sx={{ display: 'flex', gap: 2, marginTop: 1, justifyContent: 'center' }}>{actionsContent}</Box>\n )}\n </Box>\n {additionalText && (\n <Typography variant=\"subtitle1\" sx={{ marginTop: 12 }}>\n {additionalText}\n </Typography>\n )}\n </Box>\n );\n};\n"],"names":["Typography","Box","useEditMode","AddPanelButton","EditVariablesButton","EditButton","DEFAULT_TITLE","DEFAULT_DESCRIPTION","edit","view","CONTAINER_WIDTH","PRIMARY_CONTENT_WIDTH","COMMON_BUTTON_PROPS","variant","color","EmptyDashboardActions","actions","isEditMode","onEditButtonClick","label","fullWidth","onClick","EmptyDashboard","title","image","description","additionalText","defaultDescription","actionsContent","sx","width","textAlign","margin","gutterBottom","display","gap","marginTop","justifyContent"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAQ,SAAS,EAAe,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAG9D,MAAM,WAAW,UAAW,SAAQ,SAAS,CAAC,SAAS,CAAC;IACtD,UAAU,EAAE,eAAe,CAAC;IAC5B,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;CACjD;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,
|
|
1
|
+
{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAQ,SAAS,EAAe,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAG9D,MAAM,WAAW,UAAW,SAAQ,SAAS,CAAC,SAAS,CAAC;IACtD,UAAU,EAAE,eAAe,CAAC;IAC5B,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;CACjD;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,eAuFtC"}
|
|
@@ -26,7 +26,6 @@ import { PanelContent } from './PanelContent';
|
|
|
26
26
|
const generatedPanelId = useId('Panel');
|
|
27
27
|
const headerId = `${generatedPanelId}-header`;
|
|
28
28
|
const [contentElement, setContentElement] = useState(null);
|
|
29
|
-
const [isHovered, setIsHovered] = useState(false);
|
|
30
29
|
const { width , height } = useResizeObserver({
|
|
31
30
|
ref: contentElement
|
|
32
31
|
});
|
|
@@ -47,11 +46,9 @@ import { PanelContent } from './PanelContent';
|
|
|
47
46
|
});
|
|
48
47
|
const chartsTheme = useChartsTheme();
|
|
49
48
|
const handleMouseEnter = (e)=>{
|
|
50
|
-
setIsHovered(true);
|
|
51
49
|
onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
|
|
52
50
|
};
|
|
53
51
|
const handleMouseLeave = (e)=>{
|
|
54
|
-
setIsHovered(false);
|
|
55
52
|
onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
|
|
56
53
|
};
|
|
57
54
|
return /*#__PURE__*/ _jsxs(Card, {
|
|
@@ -76,7 +73,6 @@ import { PanelContent } from './PanelContent';
|
|
|
76
73
|
title: definition.spec.display.name,
|
|
77
74
|
description: definition.spec.display.description,
|
|
78
75
|
editHandlers: editHandlers,
|
|
79
|
-
isHovered: isHovered,
|
|
80
76
|
sx: {
|
|
81
77
|
paddingX: `${chartsTheme.container.padding.default}px`
|
|
82
78
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Panel/Panel.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 { useState, useMemo } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { useInView } from 'react-intersection-observer';\nimport { ErrorBoundary, ErrorAlert, combineSx, useId, useChartsTheme } from '@perses-dev/components';\nimport { PanelDefinition } from '@perses-dev/core';\nimport { Card, CardProps, CardContent } from '@mui/material';\nimport { PanelHeader, PanelHeaderProps } from './PanelHeader';\nimport { PanelContent } from './PanelContent';\n\nexport interface PanelProps extends CardProps<'section'> {\n definition: PanelDefinition;\n editHandlers?: PanelHeaderProps['editHandlers'];\n}\n\n/**\n * Renders a PanelDefinition's content inside of a Card.\n */\nexport function Panel(props: PanelProps) {\n const { definition, editHandlers, onMouseEnter, onMouseLeave, sx, ...others } = props;\n\n // Make sure we have an ID we can use for aria attributes\n const generatedPanelId = useId('Panel');\n const headerId = `${generatedPanelId}-header`;\n\n const [contentElement, setContentElement] = useState<HTMLElement | null>(null);\n
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Panel/Panel.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 { useState, useMemo } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { useInView } from 'react-intersection-observer';\nimport { ErrorBoundary, ErrorAlert, combineSx, useId, useChartsTheme } from '@perses-dev/components';\nimport { PanelDefinition } from '@perses-dev/core';\nimport { Card, CardProps, CardContent } from '@mui/material';\nimport { PanelHeader, PanelHeaderProps } from './PanelHeader';\nimport { PanelContent } from './PanelContent';\n\nexport interface PanelProps extends CardProps<'section'> {\n definition: PanelDefinition;\n editHandlers?: PanelHeaderProps['editHandlers'];\n}\n\n/**\n * Renders a PanelDefinition's content inside of a Card.\n */\nexport function Panel(props: PanelProps) {\n const { definition, editHandlers, onMouseEnter, onMouseLeave, sx, ...others } = props;\n\n // Make sure we have an ID we can use for aria attributes\n const generatedPanelId = useId('Panel');\n const headerId = `${generatedPanelId}-header`;\n\n const [contentElement, setContentElement] = useState<HTMLElement | null>(null);\n\n const { width, height } = useResizeObserver({ ref: contentElement });\n\n const contentDimensions = useMemo(() => {\n if (width === undefined || height === undefined) return undefined;\n return { width, height };\n }, [width, height]);\n\n const { ref, inView } = useInView({\n threshold: 0.3,\n initialInView: false,\n triggerOnce: true,\n });\n\n const chartsTheme = useChartsTheme();\n\n const handleMouseEnter: CardProps['onMouseEnter'] = (e) => {\n onMouseEnter?.(e);\n };\n\n const handleMouseLeave: CardProps['onMouseLeave'] = (e) => {\n onMouseLeave?.(e);\n };\n\n return (\n <Card\n ref={ref}\n component=\"section\"\n sx={combineSx(\n {\n width: '100%',\n height: '100%',\n display: 'flex',\n flexFlow: 'column nowrap',\n },\n sx\n )}\n variant=\"outlined\"\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n aria-labelledby={headerId}\n aria-describedby={headerId}\n data-testid=\"panel\"\n {...others}\n >\n <PanelHeader\n id={headerId}\n title={definition.spec.display.name}\n description={definition.spec.display.description}\n editHandlers={editHandlers}\n sx={{ paddingX: `${chartsTheme.container.padding.default}px` }}\n />\n <CardContent\n component=\"figure\"\n sx={{\n position: 'relative',\n overflow: 'hidden',\n flexGrow: 1,\n margin: 0,\n padding: 0,\n // Override MUI default style for last-child\n ':last-child': {\n padding: 0,\n },\n }}\n ref={setContentElement}\n >\n <ErrorBoundary FallbackComponent={ErrorAlert} resetKeys={[definition.spec.plugin.spec]}>\n {inView === true && (\n <PanelContent\n panelPluginKind={definition.spec.plugin.kind}\n spec={definition.spec.plugin.spec}\n contentDimensions={contentDimensions}\n />\n )}\n </ErrorBoundary>\n </CardContent>\n </Card>\n );\n}\n"],"names":["useState","useMemo","useResizeObserver","useInView","ErrorBoundary","ErrorAlert","combineSx","useId","useChartsTheme","Card","CardContent","PanelHeader","PanelContent","Panel","props","definition","editHandlers","onMouseEnter","onMouseLeave","sx","others","generatedPanelId","headerId","contentElement","setContentElement","width","height","ref","contentDimensions","undefined","inView","threshold","initialInView","triggerOnce","chartsTheme","handleMouseEnter","e","handleMouseLeave","component","display","flexFlow","variant","aria-labelledby","aria-describedby","data-testid","id","title","spec","name","description","paddingX","container","padding","default","position","overflow","flexGrow","margin","FallbackComponent","resetKeys","plugin","panelPluginKind","kind"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,QAAQ,EAAEC,OAAO,QAAQ,OAAO,CAAC;AAC1C,OAAOC,iBAAiB,MAAM,qBAAqB,CAAC;AACpD,SAASC,SAAS,QAAQ,6BAA6B,CAAC;AACxD,SAASC,aAAa,EAAEC,UAAU,EAAEC,SAAS,EAAEC,KAAK,EAAEC,cAAc,QAAQ,wBAAwB,CAAC;AAErG,SAASC,IAAI,EAAaC,WAAW,QAAQ,eAAe,CAAC;AAC7D,SAASC,WAAW,QAA0B,eAAe,CAAC;AAC9D,SAASC,YAAY,QAAQ,gBAAgB,CAAC;AAO9C;;CAEC,GACD,OAAO,SAASC,KAAK,CAACC,KAAiB,EAAE;IACvC,MAAM,EAAEC,UAAU,CAAA,EAAEC,YAAY,CAAA,EAAEC,YAAY,CAAA,EAAEC,YAAY,CAAA,EAAEC,EAAE,CAAA,EAAE,GAAGC,MAAM,EAAE,GAAGN,KAAK,AAAC;IAEtF,yDAAyD;IACzD,MAAMO,gBAAgB,GAAGd,KAAK,CAAC,OAAO,CAAC,AAAC;IACxC,MAAMe,QAAQ,GAAG,CAAC,EAAED,gBAAgB,CAAC,OAAO,CAAC,AAAC;IAE9C,MAAM,CAACE,cAAc,EAAEC,iBAAiB,CAAC,GAAGxB,QAAQ,CAAqB,IAAI,CAAC,AAAC;IAE/E,MAAM,EAAEyB,KAAK,CAAA,EAAEC,MAAM,CAAA,EAAE,GAAGxB,iBAAiB,CAAC;QAAEyB,GAAG,EAAEJ,cAAc;KAAE,CAAC,AAAC;IAErE,MAAMK,iBAAiB,GAAG3B,OAAO,CAAC,IAAM;QACtC,IAAIwB,KAAK,KAAKI,SAAS,IAAIH,MAAM,KAAKG,SAAS,EAAE,OAAOA,SAAS,CAAC;QAClE,OAAO;YAAEJ,KAAK;YAAEC,MAAM;SAAE,CAAC;IAC3B,CAAC,EAAE;QAACD,KAAK;QAAEC,MAAM;KAAC,CAAC,AAAC;IAEpB,MAAM,EAAEC,GAAG,CAAA,EAAEG,MAAM,CAAA,EAAE,GAAG3B,SAAS,CAAC;QAChC4B,SAAS,EAAE,GAAG;QACdC,aAAa,EAAE,KAAK;QACpBC,WAAW,EAAE,IAAI;KAClB,CAAC,AAAC;IAEH,MAAMC,WAAW,GAAG1B,cAAc,EAAE,AAAC;IAErC,MAAM2B,gBAAgB,GAA8B,CAACC,CAAC,GAAK;QACzDnB,YAAY,aAAZA,YAAY,WAAK,GAAjBA,KAAAA,CAAiB,GAAjBA,YAAY,CAAGmB,CAAC,CAAC,CAAC;IACpB,CAAC,AAAC;IAEF,MAAMC,gBAAgB,GAA8B,CAACD,CAAC,GAAK;QACzDlB,YAAY,aAAZA,YAAY,WAAK,GAAjBA,KAAAA,CAAiB,GAAjBA,YAAY,CAAGkB,CAAC,CAAC,CAAC;IACpB,CAAC,AAAC;IAEF,qBACE,MAAC3B,IAAI;QACHkB,GAAG,EAAEA,GAAG;QACRW,SAAS,EAAC,SAAS;QACnBnB,EAAE,EAAEb,SAAS,CACX;YACEmB,KAAK,EAAE,MAAM;YACbC,MAAM,EAAE,MAAM;YACda,OAAO,EAAE,MAAM;YACfC,QAAQ,EAAE,eAAe;SAC1B,EACDrB,EAAE,CACH;QACDsB,OAAO,EAAC,UAAU;QAClBxB,YAAY,EAAEkB,gBAAgB;QAC9BjB,YAAY,EAAEmB,gBAAgB;QAC9BK,iBAAe,EAAEpB,QAAQ;QACzBqB,kBAAgB,EAAErB,QAAQ;QAC1BsB,aAAW,EAAC,OAAO;QAClB,GAAGxB,MAAM;;0BAEV,KAACT,WAAW;gBACVkC,EAAE,EAAEvB,QAAQ;gBACZwB,KAAK,EAAE/B,UAAU,CAACgC,IAAI,CAACR,OAAO,CAACS,IAAI;gBACnCC,WAAW,EAAElC,UAAU,CAACgC,IAAI,CAACR,OAAO,CAACU,WAAW;gBAChDjC,YAAY,EAAEA,YAAY;gBAC1BG,EAAE,EAAE;oBAAE+B,QAAQ,EAAE,CAAC,EAAEhB,WAAW,CAACiB,SAAS,CAACC,OAAO,CAACC,OAAO,CAAC,EAAE,CAAC;iBAAE;cAC9D;0BACF,KAAC3C,WAAW;gBACV4B,SAAS,EAAC,QAAQ;gBAClBnB,EAAE,EAAE;oBACFmC,QAAQ,EAAE,UAAU;oBACpBC,QAAQ,EAAE,QAAQ;oBAClBC,QAAQ,EAAE,CAAC;oBACXC,MAAM,EAAE,CAAC;oBACTL,OAAO,EAAE,CAAC;oBACV,4CAA4C;oBAC5C,aAAa,EAAE;wBACbA,OAAO,EAAE,CAAC;qBACX;iBACF;gBACDzB,GAAG,EAAEH,iBAAiB;0BAEtB,cAAA,KAACpB,aAAa;oBAACsD,iBAAiB,EAAErD,UAAU;oBAAEsD,SAAS,EAAE;wBAAC5C,UAAU,CAACgC,IAAI,CAACa,MAAM,CAACb,IAAI;qBAAC;8BACnFjB,MAAM,KAAK,IAAI,kBACd,KAAClB,YAAY;wBACXiD,eAAe,EAAE9C,UAAU,CAACgC,IAAI,CAACa,MAAM,CAACE,IAAI;wBAC5Cf,IAAI,EAAEhC,UAAU,CAACgC,IAAI,CAACa,MAAM,CAACb,IAAI;wBACjCnB,iBAAiB,EAAEA,iBAAiB;sBACpC,AACH;kBACa;cACJ;;MACT,CACP;AACJ,CAAC"}
|
|
@@ -10,8 +10,7 @@ export interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {
|
|
|
10
10
|
onDuplicatePanelClick: () => void;
|
|
11
11
|
onDeletePanelClick: () => void;
|
|
12
12
|
};
|
|
13
|
-
isHovered: boolean;
|
|
14
13
|
}
|
|
15
|
-
export declare function PanelHeader({ id, title, description, editHandlers,
|
|
14
|
+
export declare function PanelHeader({ id, title, description, editHandlers, sx, ...rest }: PanelHeaderProps): JSX.Element;
|
|
16
15
|
export {};
|
|
17
16
|
//# sourceMappingURL=PanelHeader.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PanelHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelHeader.tsx"],"names":[],"mappings":";AAaA,OAAO,EAA6C,eAAe,EAAU,MAAM,eAAe,CAAC;AASnG,aAAK,YAAY,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,mBAAmB,CAAC;AAE1E,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC;IAC3E,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE;QACb,gBAAgB,EAAE,MAAM,IAAI,CAAC;QAC7B,qBAAqB,EAAE,MAAM,IAAI,CAAC;QAClC,kBAAkB,EAAE,MAAM,IAAI,CAAC;KAChC,CAAC;
|
|
1
|
+
{"version":3,"file":"PanelHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelHeader.tsx"],"names":[],"mappings":";AAaA,OAAO,EAA6C,eAAe,EAAU,MAAM,eAAe,CAAC;AASnG,aAAK,YAAY,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,mBAAmB,CAAC;AAE1E,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC;IAC3E,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE;QACb,gBAAgB,EAAE,MAAM,IAAI,CAAC;QAC7B,qBAAqB,EAAE,MAAM,IAAI,CAAC;QAClC,kBAAkB,EAAE,MAAM,IAAI,CAAC;KAChC,CAAC;CACH;AAED,wBAAgB,WAAW,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,EAAE,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,eAmHlG"}
|