@perses-dev/dashboards 0.0.0-snapshot-react-18-v-0-51-rc-0-8090608 → 0.0.0-snapshot-time-zone-selector-946f408
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/DashboardToolbar/DashboardToolbar.js +109 -98
- package/dist/cjs/components/Panel/PanelContent.js +1 -1
- package/dist/cjs/components/Panel/PanelPluginLoader.js +1 -1
- package/dist/cjs/components/PanelDrawer/PanelPreview.js +2 -2
- package/dist/cjs/components/QuerySummaryTable/QuerySummaryTable.js +1 -1
- package/dist/cjs/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.js +13 -1
- package/dist/cjs/components/SaveDashboardButton/SaveDashboardButton.js +10 -3
- package/dist/cjs/context/DashboardProvider/DashboardProvider.js +4 -2
- package/dist/cjs/context/useDashboard.js +3 -1
- package/dist/cjs/views/ViewDashboard/ViewDashboard.js +2 -0
- package/dist/components/DashboardToolbar/DashboardToolbar.d.ts.map +1 -1
- package/dist/components/DashboardToolbar/DashboardToolbar.js +111 -100
- package/dist/components/DashboardToolbar/DashboardToolbar.js.map +1 -1
- package/dist/components/Panel/PanelContent.js +1 -1
- package/dist/components/Panel/PanelContent.js.map +1 -1
- package/dist/components/Panel/PanelPluginLoader.js +1 -1
- package/dist/components/Panel/PanelPluginLoader.js.map +1 -1
- package/dist/components/PanelDrawer/PanelPreview.js +2 -2
- package/dist/components/PanelDrawer/PanelPreview.js.map +1 -1
- package/dist/components/QuerySummaryTable/QuerySummaryTable.js +1 -1
- package/dist/components/QuerySummaryTable/QuerySummaryTable.js.map +1 -1
- package/dist/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.d.ts.map +1 -1
- package/dist/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.js +14 -2
- package/dist/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.js.map +1 -1
- package/dist/components/SaveDashboardButton/SaveDashboardButton.d.ts.map +1 -1
- package/dist/components/SaveDashboardButton/SaveDashboardButton.js +11 -4
- package/dist/components/SaveDashboardButton/SaveDashboardButton.js.map +1 -1
- package/dist/context/DashboardProvider/DashboardProvider.d.ts +1 -0
- package/dist/context/DashboardProvider/DashboardProvider.d.ts.map +1 -1
- package/dist/context/DashboardProvider/DashboardProvider.js +5 -3
- package/dist/context/DashboardProvider/DashboardProvider.js.map +1 -1
- package/dist/context/DashboardProvider/save-changes-dialog-slice.d.ts +2 -1
- package/dist/context/DashboardProvider/save-changes-dialog-slice.d.ts.map +1 -1
- package/dist/context/DashboardProvider/save-changes-dialog-slice.js.map +1 -1
- package/dist/context/useDashboard.d.ts.map +1 -1
- package/dist/context/useDashboard.js +3 -1
- package/dist/context/useDashboard.js.map +1 -1
- package/dist/views/ViewDashboard/ViewDashboard.d.ts.map +1 -1
- package/dist/views/ViewDashboard/ViewDashboard.js +3 -1
- package/dist/views/ViewDashboard/ViewDashboard.js.map +1 -1
- package/package.json +6 -6
|
@@ -24,6 +24,7 @@ const _jsxruntime = require("react/jsx-runtime");
|
|
|
24
24
|
const _material = require("@mui/material");
|
|
25
25
|
const _components = require("@perses-dev/components");
|
|
26
26
|
const _pluginsystem = require("@perses-dev/plugin-system");
|
|
27
|
+
const _react = require("react");
|
|
27
28
|
const _context = require("../../context");
|
|
28
29
|
const _AddPanelButton = require("../AddPanelButton");
|
|
29
30
|
const _AddGroupButton = require("../AddGroupButton");
|
|
@@ -39,116 +40,126 @@ const DashboardToolbar = (props)=>{
|
|
|
39
40
|
const { isEditMode } = (0, _context.useEditMode)();
|
|
40
41
|
const isBiggerThanSm = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.up('sm'));
|
|
41
42
|
const isBiggerThanMd = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.up('md'));
|
|
43
|
+
const { timeZone, setTimeZone } = (0, _pluginsystem.useTimeZone)();
|
|
44
|
+
const timeZoneOptions = (0, _components.getTimeZoneOptions)();
|
|
42
45
|
const dashboardTitle = dashboardTitleComponent ? dashboardTitleComponent : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
|
|
43
46
|
variant: "h2",
|
|
44
47
|
children: dashboardName
|
|
45
48
|
});
|
|
46
49
|
const testId = 'dashboard-toolbar';
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
50
|
+
const handleTimeZoneChange = (0, _react.useCallback)((timeZoneOption)=>{
|
|
51
|
+
setTimeZone(timeZoneOption.value);
|
|
52
|
+
}, [
|
|
53
|
+
setTimeZone
|
|
54
|
+
]);
|
|
55
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
|
|
56
|
+
"data-testid": testId,
|
|
57
|
+
children: [
|
|
58
|
+
/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
|
|
59
|
+
px: 2,
|
|
60
|
+
py: 1.5,
|
|
61
|
+
display: "flex",
|
|
62
|
+
sx: {
|
|
63
|
+
backgroundColor: (theme)=>theme.palette.primary.main + (isEditMode ? '30' : '0')
|
|
64
|
+
},
|
|
65
|
+
children: [
|
|
66
|
+
dashboardTitle,
|
|
67
|
+
isEditMode ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
|
|
68
|
+
direction: "row",
|
|
69
|
+
gap: 1,
|
|
70
|
+
ml: "auto",
|
|
71
|
+
children: [
|
|
72
|
+
isReadonly && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Alert, {
|
|
73
|
+
severity: "warning",
|
|
74
|
+
sx: {
|
|
75
|
+
backgroundColor: 'transparent',
|
|
76
|
+
padding: 0
|
|
77
|
+
},
|
|
78
|
+
children: "Dashboard managed via code only. Download JSON and commit changes to save."
|
|
79
|
+
}),
|
|
80
|
+
/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
|
|
81
|
+
direction: "row",
|
|
82
|
+
spacing: 0.5,
|
|
83
|
+
ml: 1,
|
|
84
|
+
whiteSpace: "nowrap",
|
|
85
|
+
children: [
|
|
86
|
+
isVariableEnabled && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Variables.EditVariablesButton, {}),
|
|
87
|
+
isDatasourceEnabled && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Datasources.EditDatasourcesButton, {}),
|
|
88
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_AddPanelButton.AddPanelButton, {}),
|
|
89
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_AddGroupButton.AddGroupButton, {})
|
|
90
|
+
]
|
|
91
|
+
}),
|
|
92
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_SaveDashboardButton.SaveDashboardButton, {
|
|
93
|
+
onSave: onSave,
|
|
94
|
+
isDisabled: isReadonly
|
|
95
|
+
}),
|
|
96
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
|
|
97
|
+
variant: "outlined",
|
|
98
|
+
onClick: onCancelButtonClick,
|
|
99
|
+
children: "Cancel"
|
|
100
|
+
})
|
|
101
|
+
]
|
|
102
|
+
}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
|
|
103
|
+
children: isBiggerThanSm && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
|
|
61
104
|
direction: "row",
|
|
62
105
|
gap: 1,
|
|
63
106
|
ml: "auto",
|
|
64
|
-
children:
|
|
65
|
-
|
|
66
|
-
severity: "warning",
|
|
67
|
-
sx: {
|
|
68
|
-
backgroundColor: 'transparent',
|
|
69
|
-
padding: 0
|
|
70
|
-
},
|
|
71
|
-
children: "Dashboard managed via code only. Download JSON and commit changes to save."
|
|
72
|
-
}),
|
|
73
|
-
/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
|
|
74
|
-
direction: "row",
|
|
75
|
-
spacing: 0.5,
|
|
76
|
-
ml: 1,
|
|
77
|
-
whiteSpace: "nowrap",
|
|
78
|
-
children: [
|
|
79
|
-
isVariableEnabled && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Variables.EditVariablesButton, {}),
|
|
80
|
-
isDatasourceEnabled && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Datasources.EditDatasourcesButton, {}),
|
|
81
|
-
/*#__PURE__*/ (0, _jsxruntime.jsx)(_AddPanelButton.AddPanelButton, {}),
|
|
82
|
-
/*#__PURE__*/ (0, _jsxruntime.jsx)(_AddGroupButton.AddGroupButton, {})
|
|
83
|
-
]
|
|
84
|
-
}),
|
|
85
|
-
/*#__PURE__*/ (0, _jsxruntime.jsx)(_SaveDashboardButton.SaveDashboardButton, {
|
|
86
|
-
onSave: onSave,
|
|
87
|
-
isDisabled: isReadonly
|
|
88
|
-
}),
|
|
89
|
-
/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
|
|
90
|
-
variant: "outlined",
|
|
91
|
-
onClick: onCancelButtonClick,
|
|
92
|
-
children: "Cancel"
|
|
93
|
-
})
|
|
94
|
-
]
|
|
95
|
-
}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
|
|
96
|
-
children: isBiggerThanSm && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
|
|
97
|
-
direction: "row",
|
|
98
|
-
gap: 1,
|
|
99
|
-
ml: "auto",
|
|
100
|
-
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_EditButton.EditButton, {
|
|
101
|
-
onClick: onEditButtonClick
|
|
102
|
-
})
|
|
107
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_EditButton.EditButton, {
|
|
108
|
+
onClick: onEditButtonClick
|
|
103
109
|
})
|
|
104
110
|
})
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
}
|
|
127
|
-
}
|
|
111
|
+
})
|
|
112
|
+
]
|
|
113
|
+
}),
|
|
114
|
+
/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
|
|
115
|
+
sx: {
|
|
116
|
+
display: 'flex',
|
|
117
|
+
width: '100%',
|
|
118
|
+
alignItems: 'start',
|
|
119
|
+
padding: (theme)=>theme.spacing(1, 2, 0, 2),
|
|
120
|
+
flexDirection: isBiggerThanMd ? 'row' : 'column',
|
|
121
|
+
flexWrap: 'nowrap',
|
|
122
|
+
gap: 1
|
|
123
|
+
},
|
|
124
|
+
children: [
|
|
125
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
|
|
126
|
+
width: "100%",
|
|
127
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
|
|
128
|
+
FallbackComponent: _components.ErrorAlert,
|
|
129
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DashboardStickyToolbar.DashboardStickyToolbar, {
|
|
130
|
+
initialVariableIsSticky: initialVariableIsSticky,
|
|
131
|
+
sx: {
|
|
132
|
+
backgroundColor: ({ palette })=>palette.background.default
|
|
133
|
+
}
|
|
128
134
|
})
|
|
129
|
-
})
|
|
130
|
-
|
|
135
|
+
})
|
|
136
|
+
}),
|
|
137
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
|
|
138
|
+
direction: "row",
|
|
139
|
+
ml: "auto",
|
|
140
|
+
flexWrap: "wrap",
|
|
141
|
+
justifyContent: "end",
|
|
142
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
|
|
131
143
|
direction: "row",
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
children:
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
})
|
|
144
|
+
spacing: 1,
|
|
145
|
+
mt: 1,
|
|
146
|
+
ml: 1,
|
|
147
|
+
children: [
|
|
148
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TimeRangeControls, {}),
|
|
149
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_components.TimeZoneSelector, {
|
|
150
|
+
timeZoneOptions: timeZoneOptions,
|
|
151
|
+
value: timeZone,
|
|
152
|
+
onChange: handleTimeZoneChange
|
|
153
|
+
}),
|
|
154
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_DownloadButton.DownloadButton, {}),
|
|
155
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_EditJsonButton.EditJsonButton, {
|
|
156
|
+
isReadonly: !isEditMode
|
|
157
|
+
})
|
|
158
|
+
]
|
|
148
159
|
})
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
160
|
+
})
|
|
161
|
+
]
|
|
162
|
+
})
|
|
163
|
+
]
|
|
153
164
|
});
|
|
154
165
|
};
|
|
@@ -28,7 +28,7 @@ const _PanelPluginLoader = require("./PanelPluginLoader");
|
|
|
28
28
|
function PanelContent(props) {
|
|
29
29
|
const { panelPluginKind, definition, queryResults, spec, contentDimensions } = props;
|
|
30
30
|
const { data: plugin, isLoading: isPanelLoading } = (0, _pluginsystem.usePlugin)('Panel', panelPluginKind, {
|
|
31
|
-
|
|
31
|
+
useErrorBoundary: true
|
|
32
32
|
});
|
|
33
33
|
// Show fullsize skeleton if the panel plugin is loading.
|
|
34
34
|
if (isPanelLoading) {
|
|
@@ -26,7 +26,7 @@ const _material = require("@mui/material");
|
|
|
26
26
|
function PanelPluginLoader(props) {
|
|
27
27
|
const { kind, spec, contentDimensions, definition, queryResults } = props;
|
|
28
28
|
const { data: plugin, isLoading: isPanelLoading } = (0, _pluginsystem.usePlugin)('Panel', kind, {
|
|
29
|
-
|
|
29
|
+
useErrorBoundary: true
|
|
30
30
|
});
|
|
31
31
|
const PanelComponent = plugin?.PanelComponent;
|
|
32
32
|
const supportedQueryTypes = plugin?.supportedQueryTypes || [];
|
|
@@ -34,8 +34,8 @@ function PanelPreview({ panelDefinition }) {
|
|
|
34
34
|
width = boxRef.current.getBoundingClientRect().width;
|
|
35
35
|
}
|
|
36
36
|
const suggestedStepMs = (0, _pluginsystem.useSuggestedStepMs)(width);
|
|
37
|
-
const { data: plugin,
|
|
38
|
-
if (
|
|
37
|
+
const { data: plugin, isLoading } = (0, _pluginsystem.usePlugin)('Panel', panelDefinition.spec.plugin.kind);
|
|
38
|
+
if (isLoading) {
|
|
39
39
|
return null;
|
|
40
40
|
}
|
|
41
41
|
if (panelDefinition.spec.plugin.kind === '') {
|
|
@@ -34,7 +34,7 @@ function QuerySummaryTable(props) {
|
|
|
34
34
|
// for displaying a summary of recent query results
|
|
35
35
|
const queryClient = (0, _reactquery.useQueryClient)();
|
|
36
36
|
const queries = queryClient.getQueryCache().findAll();
|
|
37
|
-
const activeQueries = queries.filter((query)=>query.state.status === '
|
|
37
|
+
const activeQueries = queries.filter((query)=>query.state.status === 'loading');
|
|
38
38
|
const completedQueries = queries.filter((query)=>query.state.status === 'success');
|
|
39
39
|
const querySummary = (0, _pluginsystem.useActiveTimeSeriesQueries)();
|
|
40
40
|
if (datasourceClient.isLoading === true) {
|
|
@@ -31,8 +31,11 @@ const SaveChangesConfirmationDialog = ()=>{
|
|
|
31
31
|
const { saveChangesConfirmationDialog: dialog } = (0, _context.useSaveChangesConfirmationDialog)();
|
|
32
32
|
const isSavedDurationModified = dialog?.isSavedDurationModified ?? true;
|
|
33
33
|
const isSavedVariableModified = dialog?.isSavedVariableModified ?? true;
|
|
34
|
+
const isSavedTimeZoneModified = dialog?.isSavedTimeZoneModified ?? true;
|
|
34
35
|
const [saveDefaultTimeRange, setSaveDefaultTimeRange] = (0, _react.useState)(isSavedDurationModified);
|
|
35
36
|
const [saveDefaultVariables, setSaveDefaultVariables] = (0, _react.useState)(isSavedVariableModified);
|
|
37
|
+
const [saveDefaultTimeZone, setSaveDefaultTimeZone] = (0, _react.useState)(isSavedTimeZoneModified);
|
|
38
|
+
const { timeZone } = (0, _pluginsystem.useTimeZone)();
|
|
36
39
|
const { getSavedVariablesStatus } = (0, _context.useVariableDefinitionActions)();
|
|
37
40
|
const { modifiedVariableNames } = getSavedVariablesStatus();
|
|
38
41
|
const isOpen = dialog !== undefined;
|
|
@@ -40,6 +43,7 @@ const SaveChangesConfirmationDialog = ()=>{
|
|
|
40
43
|
const currentTimeRangeText = (0, _core.isRelativeTimeRange)(timeRange) ? `(Last ${timeRange.pastDuration})` : '(Absolute time ranges can not be saved)';
|
|
41
44
|
const saveTimeRangeText = `Save current time range as new default ${currentTimeRangeText}`;
|
|
42
45
|
const saveVariablesText = `Save current variable values as new default (${modifiedVariableNames.length > 0 ? modifiedVariableNames.join(', ') : 'No modified variables'})`;
|
|
46
|
+
const saveTimeZoneText = `Save time zone as "${timeZone}" time`;
|
|
43
47
|
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Dialog, {
|
|
44
48
|
open: isOpen,
|
|
45
49
|
children: dialog !== undefined && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
|
|
@@ -71,6 +75,14 @@ const SaveChangesConfirmationDialog = ()=>{
|
|
|
71
75
|
onChange: (e)=>setSaveDefaultVariables(e.target.checked)
|
|
72
76
|
}),
|
|
73
77
|
label: saveVariablesText
|
|
78
|
+
}),
|
|
79
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
|
|
80
|
+
control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
|
|
81
|
+
disabled: !isSavedTimeZoneModified,
|
|
82
|
+
checked: saveDefaultTimeZone && isSavedTimeZoneModified,
|
|
83
|
+
onChange: (e)=>setSaveDefaultTimeZone(e.target.checked)
|
|
84
|
+
}),
|
|
85
|
+
label: saveTimeZoneText
|
|
74
86
|
})
|
|
75
87
|
]
|
|
76
88
|
})
|
|
@@ -80,7 +92,7 @@ const SaveChangesConfirmationDialog = ()=>{
|
|
|
80
92
|
children: [
|
|
81
93
|
/*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Dialog.PrimaryButton, {
|
|
82
94
|
onClick: ()=>{
|
|
83
|
-
return dialog.onSaveChanges(saveDefaultTimeRange, saveDefaultVariables);
|
|
95
|
+
return dialog.onSaveChanges(saveDefaultTimeRange, saveDefaultVariables, saveDefaultTimeZone);
|
|
84
96
|
},
|
|
85
97
|
children: "Save Changes"
|
|
86
98
|
}),
|
|
@@ -34,14 +34,17 @@ const SaveDashboardButton = ({ onSave, isDisabled, variant = 'contained' })=>{
|
|
|
34
34
|
const { timeRange } = (0, _pluginsystem.useTimeRange)();
|
|
35
35
|
const { setEditMode } = (0, _context.useEditMode)();
|
|
36
36
|
const { openSaveChangesConfirmationDialog, closeSaveChangesConfirmationDialog } = (0, _context.useSaveChangesConfirmationDialog)();
|
|
37
|
+
const { timeZone: currentTimeZone } = (0, _pluginsystem.useTimeZone)();
|
|
37
38
|
const onSaveButtonClick = ()=>{
|
|
38
39
|
const isSavedDurationModified = (0, _core.isRelativeTimeRange)(timeRange) && dashboard.spec.duration !== timeRange.pastDuration;
|
|
40
|
+
const isSavedTimeZoneModified = dashboard.spec.timeZone !== currentTimeZone;
|
|
39
41
|
// Save dashboard
|
|
40
42
|
// - if active timeRange from plugin-system is relative and different from currently saved
|
|
41
43
|
// - or if the saved variables are different from currently saved
|
|
42
|
-
if
|
|
44
|
+
// - or if the saved timeZone are different from currently saved
|
|
45
|
+
if (isSavedDurationModified || isSavedVariableModified || isSavedTimeZoneModified) {
|
|
43
46
|
openSaveChangesConfirmationDialog({
|
|
44
|
-
onSaveChanges: (saveDefaultTimeRange, saveDefaultVariables)=>{
|
|
47
|
+
onSaveChanges: (saveDefaultTimeRange, saveDefaultVariables, isSavedTimeZone)=>{
|
|
45
48
|
if ((0, _core.isRelativeTimeRange)(timeRange) && saveDefaultTimeRange === true) {
|
|
46
49
|
dashboard.spec.duration = timeRange.pastDuration;
|
|
47
50
|
}
|
|
@@ -49,6 +52,9 @@ const SaveDashboardButton = ({ onSave, isDisabled, variant = 'contained' })=>{
|
|
|
49
52
|
const variables = setVariableDefaultValues();
|
|
50
53
|
dashboard.spec.variables = variables;
|
|
51
54
|
}
|
|
55
|
+
if (isSavedTimeZone) {
|
|
56
|
+
dashboard.spec.timeZone = currentTimeZone;
|
|
57
|
+
}
|
|
52
58
|
setDashboard(dashboard);
|
|
53
59
|
saveDashboard();
|
|
54
60
|
},
|
|
@@ -56,7 +62,8 @@ const SaveDashboardButton = ({ onSave, isDisabled, variant = 'contained' })=>{
|
|
|
56
62
|
closeSaveChangesConfirmationDialog();
|
|
57
63
|
},
|
|
58
64
|
isSavedDurationModified,
|
|
59
|
-
isSavedVariableModified
|
|
65
|
+
isSavedVariableModified,
|
|
66
|
+
isSavedTimeZoneModified
|
|
60
67
|
});
|
|
61
68
|
} else {
|
|
62
69
|
saveDashboard();
|
|
@@ -90,7 +90,7 @@ function DashboardProvider(props) {
|
|
|
90
90
|
}
|
|
91
91
|
function initStore(props) {
|
|
92
92
|
const { initialState: { dashboardResource, isEditMode, viewPanelRef, setViewPanelRef } } = props;
|
|
93
|
-
const { kind, metadata, spec: { display, duration, refreshInterval = _core.DEFAULT_REFRESH_INTERVAL, datasources } } = dashboardResource;
|
|
93
|
+
const { kind, metadata, spec: { display, duration, timeZone = _core.DEFAULT_DASHBOARD_TIMEZONE, refreshInterval = _core.DEFAULT_REFRESH_INTERVAL, datasources } } = dashboardResource;
|
|
94
94
|
const ttl = 'ttl' in dashboardResource.spec ? dashboardResource.spec.ttl : undefined;
|
|
95
95
|
let { spec: { layouts, panels } } = dashboardResource;
|
|
96
96
|
// Set fallbacks in case the frontend is used with a non-Perses backend
|
|
@@ -115,13 +115,14 @@ function initStore(props) {
|
|
|
115
115
|
display,
|
|
116
116
|
duration,
|
|
117
117
|
refreshInterval,
|
|
118
|
+
timeZone,
|
|
118
119
|
datasources,
|
|
119
120
|
ttl,
|
|
120
121
|
isEditMode: !!isEditMode,
|
|
121
122
|
setEditMode: (isEditMode)=>set({
|
|
122
123
|
isEditMode
|
|
123
124
|
}),
|
|
124
|
-
setDashboard: ({ kind, metadata, spec: { display, panels = {}, layouts = [], duration, refreshInterval, datasources = {} } })=>{
|
|
125
|
+
setDashboard: ({ kind, metadata, spec: { display, panels = {}, layouts = [], duration, refreshInterval, timeZone, datasources = {} } })=>{
|
|
125
126
|
set((state)=>{
|
|
126
127
|
state.kind = kind;
|
|
127
128
|
state.metadata = metadata;
|
|
@@ -132,6 +133,7 @@ function initStore(props) {
|
|
|
132
133
|
state.panelGroupOrder = panelGroupOrder;
|
|
133
134
|
state.duration = duration;
|
|
134
135
|
state.refreshInterval = refreshInterval ?? _core.DEFAULT_REFRESH_INTERVAL;
|
|
136
|
+
state.timeZone = timeZone ?? _core.DEFAULT_DASHBOARD_TIMEZONE;
|
|
135
137
|
state.datasources = datasources;
|
|
136
138
|
// TODO: add ttl here to e.g allow edition from JSON view, but probably requires quite some refactoring
|
|
137
139
|
});
|
|
@@ -24,7 +24,7 @@ const _core = require("@perses-dev/core");
|
|
|
24
24
|
const _DashboardProvider = require("./DashboardProvider");
|
|
25
25
|
const _VariableProvider = require("./VariableProvider");
|
|
26
26
|
function useDashboard() {
|
|
27
|
-
const { panels, panelGroups, panelGroupOrder, setDashboard: setDashboardResource, kind, metadata, display, duration, refreshInterval, datasources, ttl } = (0, _DashboardProvider.useDashboardStore)(({ panels, panelGroups, panelGroupOrder, setDashboard, kind, metadata, display, duration, refreshInterval, datasources, ttl })=>({
|
|
27
|
+
const { panels, panelGroups, panelGroupOrder, setDashboard: setDashboardResource, kind, metadata, display, duration, refreshInterval, timeZone, datasources, ttl } = (0, _DashboardProvider.useDashboardStore)(({ panels, panelGroups, panelGroupOrder, setDashboard, kind, metadata, display, duration, refreshInterval, timeZone, datasources, ttl })=>({
|
|
28
28
|
panels,
|
|
29
29
|
panelGroups,
|
|
30
30
|
panelGroupOrder,
|
|
@@ -34,6 +34,7 @@ function useDashboard() {
|
|
|
34
34
|
display,
|
|
35
35
|
duration,
|
|
36
36
|
refreshInterval,
|
|
37
|
+
timeZone,
|
|
37
38
|
datasources,
|
|
38
39
|
ttl
|
|
39
40
|
}));
|
|
@@ -50,6 +51,7 @@ function useDashboard() {
|
|
|
50
51
|
variables,
|
|
51
52
|
duration,
|
|
52
53
|
refreshInterval,
|
|
54
|
+
timeZone,
|
|
53
55
|
datasources
|
|
54
56
|
}
|
|
55
57
|
} : {
|
|
@@ -34,6 +34,7 @@ function ViewDashboard(props) {
|
|
|
34
34
|
const { spec } = dashboardResource;
|
|
35
35
|
const dashboardDuration = spec.duration ?? _core.DEFAULT_DASHBOARD_DURATION;
|
|
36
36
|
const dashboardRefreshInterval = spec.refreshInterval ?? _core.DEFAULT_REFRESH_INTERVAL;
|
|
37
|
+
const initialTimeZone = spec.timeZone ?? _core.DEFAULT_DASHBOARD_TIMEZONE;
|
|
37
38
|
const initialTimeRange = (0, _pluginsystem.useInitialTimeRange)(dashboardDuration);
|
|
38
39
|
const initialRefreshInterval = (0, _pluginsystem.useInitialRefreshInterval)(dashboardRefreshInterval);
|
|
39
40
|
const { data } = (0, _pluginsystem.usePluginBuiltinVariableDefinitions)();
|
|
@@ -86,6 +87,7 @@ function ViewDashboard(props) {
|
|
|
86
87
|
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TimeRangeProviderWithQueryParams, {
|
|
87
88
|
initialTimeRange: initialTimeRange,
|
|
88
89
|
initialRefreshInterval: initialRefreshInterval,
|
|
90
|
+
initialTimeZone: initialTimeZone,
|
|
89
91
|
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_context.VariableProviderWithQueryParams, {
|
|
90
92
|
initialVariableDefinitions: spec.variables,
|
|
91
93
|
externalVariableDefinitions: externalVariableDefinitions,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"names":[],"mappings":"AAsBA,OAAO,EAAE,YAAY,EAAe,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,eAAe,EAAe,MAAM,eAAe,CAAC;AAW7D,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,mBAAmB,EAAE,OAAO,CAAC;IAC7B,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,KAAG,YAyG/D,CAAC"}
|