@perses-dev/dashboards 0.0.0-snapshot-time-zone-selector-946f408 → 0.0.0-snapshot-timeseries-panel-actions-e28c1fe
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 +98 -109
- package/dist/cjs/components/DownloadButton/DownloadButton.js +3 -33
- package/dist/cjs/components/DownloadButton/serializeDashboard.js +64 -0
- package/dist/cjs/components/Panel/Panel.js +85 -1
- package/dist/cjs/components/Panel/PanelActions.js +45 -8
- package/dist/cjs/components/Panel/PanelHeader.js +11 -3
- package/dist/cjs/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.js +1 -13
- package/dist/cjs/components/SaveDashboardButton/SaveDashboardButton.js +3 -10
- package/dist/cjs/context/DashboardProvider/DashboardProvider.js +2 -4
- package/dist/cjs/context/useDashboard.js +1 -3
- package/dist/cjs/views/ViewDashboard/ViewDashboard.js +0 -2
- package/dist/components/DashboardToolbar/DashboardToolbar.d.ts.map +1 -1
- package/dist/components/DashboardToolbar/DashboardToolbar.js +100 -111
- package/dist/components/DashboardToolbar/DashboardToolbar.js.map +1 -1
- package/dist/components/DownloadButton/DownloadButton.d.ts.map +1 -1
- package/dist/components/DownloadButton/DownloadButton.js +3 -33
- package/dist/components/DownloadButton/DownloadButton.js.map +1 -1
- package/dist/components/DownloadButton/serializeDashboard.d.ts +8 -0
- package/dist/components/DownloadButton/serializeDashboard.d.ts.map +1 -0
- package/dist/components/DownloadButton/serializeDashboard.js +56 -0
- package/dist/components/DownloadButton/serializeDashboard.js.map +1 -0
- package/dist/components/Panel/Panel.d.ts.map +1 -1
- package/dist/components/Panel/Panel.js +87 -3
- package/dist/components/Panel/Panel.js.map +1 -1
- package/dist/components/Panel/PanelActions.d.ts +4 -3
- package/dist/components/Panel/PanelActions.d.ts.map +1 -1
- package/dist/components/Panel/PanelActions.js +45 -8
- package/dist/components/Panel/PanelActions.js.map +1 -1
- package/dist/components/Panel/PanelHeader.d.ts +2 -1
- package/dist/components/Panel/PanelHeader.d.ts.map +1 -1
- package/dist/components/Panel/PanelHeader.js +11 -3
- package/dist/components/Panel/PanelHeader.js.map +1 -1
- package/dist/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.d.ts.map +1 -1
- package/dist/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.js +2 -14
- 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 +4 -11
- package/dist/components/SaveDashboardButton/SaveDashboardButton.js.map +1 -1
- package/dist/context/DashboardProvider/DashboardProvider.d.ts +0 -1
- package/dist/context/DashboardProvider/DashboardProvider.d.ts.map +1 -1
- package/dist/context/DashboardProvider/DashboardProvider.js +3 -5
- package/dist/context/DashboardProvider/DashboardProvider.js.map +1 -1
- package/dist/context/DashboardProvider/save-changes-dialog-slice.d.ts +1 -2
- 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 +1 -3
- package/dist/context/useDashboard.js.map +1 -1
- package/dist/views/ViewDashboard/ViewDashboard.d.ts.map +1 -1
- package/dist/views/ViewDashboard/ViewDashboard.js +1 -3
- package/dist/views/ViewDashboard/ViewDashboard.js.map +1 -1
- package/package.json +5 -5
|
@@ -34,17 +34,14 @@ 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)();
|
|
38
37
|
const onSaveButtonClick = ()=>{
|
|
39
38
|
const isSavedDurationModified = (0, _core.isRelativeTimeRange)(timeRange) && dashboard.spec.duration !== timeRange.pastDuration;
|
|
40
|
-
const isSavedTimeZoneModified = dashboard.spec.timeZone !== currentTimeZone;
|
|
41
39
|
// Save dashboard
|
|
42
40
|
// - if active timeRange from plugin-system is relative and different from currently saved
|
|
43
41
|
// - or if the saved variables are different from currently saved
|
|
44
|
-
|
|
45
|
-
if (isSavedDurationModified || isSavedVariableModified || isSavedTimeZoneModified) {
|
|
42
|
+
if (isSavedDurationModified || isSavedVariableModified) {
|
|
46
43
|
openSaveChangesConfirmationDialog({
|
|
47
|
-
onSaveChanges: (saveDefaultTimeRange, saveDefaultVariables
|
|
44
|
+
onSaveChanges: (saveDefaultTimeRange, saveDefaultVariables)=>{
|
|
48
45
|
if ((0, _core.isRelativeTimeRange)(timeRange) && saveDefaultTimeRange === true) {
|
|
49
46
|
dashboard.spec.duration = timeRange.pastDuration;
|
|
50
47
|
}
|
|
@@ -52,9 +49,6 @@ const SaveDashboardButton = ({ onSave, isDisabled, variant = 'contained' })=>{
|
|
|
52
49
|
const variables = setVariableDefaultValues();
|
|
53
50
|
dashboard.spec.variables = variables;
|
|
54
51
|
}
|
|
55
|
-
if (isSavedTimeZone) {
|
|
56
|
-
dashboard.spec.timeZone = currentTimeZone;
|
|
57
|
-
}
|
|
58
52
|
setDashboard(dashboard);
|
|
59
53
|
saveDashboard();
|
|
60
54
|
},
|
|
@@ -62,8 +56,7 @@ const SaveDashboardButton = ({ onSave, isDisabled, variant = 'contained' })=>{
|
|
|
62
56
|
closeSaveChangesConfirmationDialog();
|
|
63
57
|
},
|
|
64
58
|
isSavedDurationModified,
|
|
65
|
-
isSavedVariableModified
|
|
66
|
-
isSavedTimeZoneModified
|
|
59
|
+
isSavedVariableModified
|
|
67
60
|
});
|
|
68
61
|
} else {
|
|
69
62
|
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,
|
|
93
|
+
const { kind, metadata, spec: { display, duration, 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,14 +115,13 @@ function initStore(props) {
|
|
|
115
115
|
display,
|
|
116
116
|
duration,
|
|
117
117
|
refreshInterval,
|
|
118
|
-
timeZone,
|
|
119
118
|
datasources,
|
|
120
119
|
ttl,
|
|
121
120
|
isEditMode: !!isEditMode,
|
|
122
121
|
setEditMode: (isEditMode)=>set({
|
|
123
122
|
isEditMode
|
|
124
123
|
}),
|
|
125
|
-
setDashboard: ({ kind, metadata, spec: { display, panels = {}, layouts = [], duration, refreshInterval,
|
|
124
|
+
setDashboard: ({ kind, metadata, spec: { display, panels = {}, layouts = [], duration, refreshInterval, datasources = {} } })=>{
|
|
126
125
|
set((state)=>{
|
|
127
126
|
state.kind = kind;
|
|
128
127
|
state.metadata = metadata;
|
|
@@ -133,7 +132,6 @@ function initStore(props) {
|
|
|
133
132
|
state.panelGroupOrder = panelGroupOrder;
|
|
134
133
|
state.duration = duration;
|
|
135
134
|
state.refreshInterval = refreshInterval ?? _core.DEFAULT_REFRESH_INTERVAL;
|
|
136
|
-
state.timeZone = timeZone ?? _core.DEFAULT_DASHBOARD_TIMEZONE;
|
|
137
135
|
state.datasources = datasources;
|
|
138
136
|
// TODO: add ttl here to e.g allow edition from JSON view, but probably requires quite some refactoring
|
|
139
137
|
});
|
|
@@ -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,
|
|
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 })=>({
|
|
28
28
|
panels,
|
|
29
29
|
panelGroups,
|
|
30
30
|
panelGroupOrder,
|
|
@@ -34,7 +34,6 @@ function useDashboard() {
|
|
|
34
34
|
display,
|
|
35
35
|
duration,
|
|
36
36
|
refreshInterval,
|
|
37
|
-
timeZone,
|
|
38
37
|
datasources,
|
|
39
38
|
ttl
|
|
40
39
|
}));
|
|
@@ -51,7 +50,6 @@ function useDashboard() {
|
|
|
51
50
|
variables,
|
|
52
51
|
duration,
|
|
53
52
|
refreshInterval,
|
|
54
|
-
timeZone,
|
|
55
53
|
datasources
|
|
56
54
|
}
|
|
57
55
|
} : {
|
|
@@ -34,7 +34,6 @@ 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;
|
|
38
37
|
const initialTimeRange = (0, _pluginsystem.useInitialTimeRange)(dashboardDuration);
|
|
39
38
|
const initialRefreshInterval = (0, _pluginsystem.useInitialRefreshInterval)(dashboardRefreshInterval);
|
|
40
39
|
const { data } = (0, _pluginsystem.usePluginBuiltinVariableDefinitions)();
|
|
@@ -87,7 +86,6 @@ function ViewDashboard(props) {
|
|
|
87
86
|
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TimeRangeProviderWithQueryParams, {
|
|
88
87
|
initialTimeRange: initialTimeRange,
|
|
89
88
|
initialRefreshInterval: initialRefreshInterval,
|
|
90
|
-
initialTimeZone: initialTimeZone,
|
|
91
89
|
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_context.VariableProviderWithQueryParams, {
|
|
92
90
|
initialVariableDefinitions: spec.variables,
|
|
93
91
|
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":"AAgBA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,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,YAgG/D,CAAC"}
|
|
@@ -12,9 +12,8 @@
|
|
|
12
12
|
// limitations under the License.
|
|
13
13
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
14
14
|
import { Typography, Stack, Button, Box, useTheme, useMediaQuery, Alert } from '@mui/material';
|
|
15
|
-
import { ErrorBoundary, ErrorAlert
|
|
16
|
-
import { TimeRangeControls
|
|
17
|
-
import { useCallback } from 'react';
|
|
15
|
+
import { ErrorBoundary, ErrorAlert } from '@perses-dev/components';
|
|
16
|
+
import { TimeRangeControls } from '@perses-dev/plugin-system';
|
|
18
17
|
import { useEditMode } from '../../context';
|
|
19
18
|
import { AddPanelButton } from '../AddPanelButton';
|
|
20
19
|
import { AddGroupButton } from '../AddGroupButton';
|
|
@@ -30,127 +29,117 @@ export const DashboardToolbar = (props)=>{
|
|
|
30
29
|
const { isEditMode } = useEditMode();
|
|
31
30
|
const isBiggerThanSm = useMediaQuery(useTheme().breakpoints.up('sm'));
|
|
32
31
|
const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));
|
|
33
|
-
const { timeZone, setTimeZone } = useTimeZone();
|
|
34
|
-
const timeZoneOptions = getTimeZoneOptions();
|
|
35
32
|
const dashboardTitle = dashboardTitleComponent ? dashboardTitleComponent : /*#__PURE__*/ _jsx(Typography, {
|
|
36
33
|
variant: "h2",
|
|
37
34
|
children: dashboardName
|
|
38
35
|
});
|
|
39
36
|
const testId = 'dashboard-toolbar';
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
},
|
|
55
|
-
children: [
|
|
56
|
-
dashboardTitle,
|
|
57
|
-
isEditMode ? /*#__PURE__*/ _jsxs(Stack, {
|
|
58
|
-
direction: "row",
|
|
59
|
-
gap: 1,
|
|
60
|
-
ml: "auto",
|
|
61
|
-
children: [
|
|
62
|
-
isReadonly && /*#__PURE__*/ _jsx(Alert, {
|
|
63
|
-
severity: "warning",
|
|
64
|
-
sx: {
|
|
65
|
-
backgroundColor: 'transparent',
|
|
66
|
-
padding: 0
|
|
67
|
-
},
|
|
68
|
-
children: "Dashboard managed via code only. Download JSON and commit changes to save."
|
|
69
|
-
}),
|
|
70
|
-
/*#__PURE__*/ _jsxs(Stack, {
|
|
71
|
-
direction: "row",
|
|
72
|
-
spacing: 0.5,
|
|
73
|
-
ml: 1,
|
|
74
|
-
whiteSpace: "nowrap",
|
|
75
|
-
children: [
|
|
76
|
-
isVariableEnabled && /*#__PURE__*/ _jsx(EditVariablesButton, {}),
|
|
77
|
-
isDatasourceEnabled && /*#__PURE__*/ _jsx(EditDatasourcesButton, {}),
|
|
78
|
-
/*#__PURE__*/ _jsx(AddPanelButton, {}),
|
|
79
|
-
/*#__PURE__*/ _jsx(AddGroupButton, {})
|
|
80
|
-
]
|
|
81
|
-
}),
|
|
82
|
-
/*#__PURE__*/ _jsx(SaveDashboardButton, {
|
|
83
|
-
onSave: onSave,
|
|
84
|
-
isDisabled: isReadonly
|
|
85
|
-
}),
|
|
86
|
-
/*#__PURE__*/ _jsx(Button, {
|
|
87
|
-
variant: "outlined",
|
|
88
|
-
onClick: onCancelButtonClick,
|
|
89
|
-
children: "Cancel"
|
|
90
|
-
})
|
|
91
|
-
]
|
|
92
|
-
}) : /*#__PURE__*/ _jsx(_Fragment, {
|
|
93
|
-
children: isBiggerThanSm && /*#__PURE__*/ _jsx(Stack, {
|
|
37
|
+
return /*#__PURE__*/ _jsx(_Fragment, {
|
|
38
|
+
children: /*#__PURE__*/ _jsxs(Stack, {
|
|
39
|
+
"data-testid": testId,
|
|
40
|
+
children: [
|
|
41
|
+
/*#__PURE__*/ _jsxs(Box, {
|
|
42
|
+
px: 2,
|
|
43
|
+
py: 1.5,
|
|
44
|
+
display: "flex",
|
|
45
|
+
sx: {
|
|
46
|
+
backgroundColor: (theme)=>theme.palette.primary.main + (isEditMode ? '30' : '0')
|
|
47
|
+
},
|
|
48
|
+
children: [
|
|
49
|
+
dashboardTitle,
|
|
50
|
+
isEditMode ? /*#__PURE__*/ _jsxs(Stack, {
|
|
94
51
|
direction: "row",
|
|
95
52
|
gap: 1,
|
|
96
53
|
ml: "auto",
|
|
97
|
-
children: /*#__PURE__*/ _jsx(EditButton, {
|
|
98
|
-
onClick: onEditButtonClick
|
|
99
|
-
})
|
|
100
|
-
})
|
|
101
|
-
})
|
|
102
|
-
]
|
|
103
|
-
}),
|
|
104
|
-
/*#__PURE__*/ _jsxs(Box, {
|
|
105
|
-
sx: {
|
|
106
|
-
display: 'flex',
|
|
107
|
-
width: '100%',
|
|
108
|
-
alignItems: 'start',
|
|
109
|
-
padding: (theme)=>theme.spacing(1, 2, 0, 2),
|
|
110
|
-
flexDirection: isBiggerThanMd ? 'row' : 'column',
|
|
111
|
-
flexWrap: 'nowrap',
|
|
112
|
-
gap: 1
|
|
113
|
-
},
|
|
114
|
-
children: [
|
|
115
|
-
/*#__PURE__*/ _jsx(Box, {
|
|
116
|
-
width: "100%",
|
|
117
|
-
children: /*#__PURE__*/ _jsx(ErrorBoundary, {
|
|
118
|
-
FallbackComponent: ErrorAlert,
|
|
119
|
-
children: /*#__PURE__*/ _jsx(DashboardStickyToolbar, {
|
|
120
|
-
initialVariableIsSticky: initialVariableIsSticky,
|
|
121
|
-
sx: {
|
|
122
|
-
backgroundColor: ({ palette })=>palette.background.default
|
|
123
|
-
}
|
|
124
|
-
})
|
|
125
|
-
})
|
|
126
|
-
}),
|
|
127
|
-
/*#__PURE__*/ _jsx(Stack, {
|
|
128
|
-
direction: "row",
|
|
129
|
-
ml: "auto",
|
|
130
|
-
flexWrap: "wrap",
|
|
131
|
-
justifyContent: "end",
|
|
132
|
-
children: /*#__PURE__*/ _jsxs(Stack, {
|
|
133
|
-
direction: "row",
|
|
134
|
-
spacing: 1,
|
|
135
|
-
mt: 1,
|
|
136
|
-
ml: 1,
|
|
137
54
|
children: [
|
|
138
|
-
/*#__PURE__*/ _jsx(
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
55
|
+
isReadonly && /*#__PURE__*/ _jsx(Alert, {
|
|
56
|
+
severity: "warning",
|
|
57
|
+
sx: {
|
|
58
|
+
backgroundColor: 'transparent',
|
|
59
|
+
padding: 0
|
|
60
|
+
},
|
|
61
|
+
children: "Dashboard managed via code only. Download JSON and commit changes to save."
|
|
143
62
|
}),
|
|
144
|
-
/*#__PURE__*/
|
|
145
|
-
|
|
146
|
-
|
|
63
|
+
/*#__PURE__*/ _jsxs(Stack, {
|
|
64
|
+
direction: "row",
|
|
65
|
+
spacing: 0.5,
|
|
66
|
+
ml: 1,
|
|
67
|
+
whiteSpace: "nowrap",
|
|
68
|
+
children: [
|
|
69
|
+
isVariableEnabled && /*#__PURE__*/ _jsx(EditVariablesButton, {}),
|
|
70
|
+
isDatasourceEnabled && /*#__PURE__*/ _jsx(EditDatasourcesButton, {}),
|
|
71
|
+
/*#__PURE__*/ _jsx(AddPanelButton, {}),
|
|
72
|
+
/*#__PURE__*/ _jsx(AddGroupButton, {})
|
|
73
|
+
]
|
|
74
|
+
}),
|
|
75
|
+
/*#__PURE__*/ _jsx(SaveDashboardButton, {
|
|
76
|
+
onSave: onSave,
|
|
77
|
+
isDisabled: isReadonly
|
|
78
|
+
}),
|
|
79
|
+
/*#__PURE__*/ _jsx(Button, {
|
|
80
|
+
variant: "outlined",
|
|
81
|
+
onClick: onCancelButtonClick,
|
|
82
|
+
children: "Cancel"
|
|
147
83
|
})
|
|
148
84
|
]
|
|
85
|
+
}) : /*#__PURE__*/ _jsx(_Fragment, {
|
|
86
|
+
children: isBiggerThanSm && /*#__PURE__*/ _jsx(Stack, {
|
|
87
|
+
direction: "row",
|
|
88
|
+
gap: 1,
|
|
89
|
+
ml: "auto",
|
|
90
|
+
children: /*#__PURE__*/ _jsx(EditButton, {
|
|
91
|
+
onClick: onEditButtonClick
|
|
92
|
+
})
|
|
93
|
+
})
|
|
94
|
+
})
|
|
95
|
+
]
|
|
96
|
+
}),
|
|
97
|
+
/*#__PURE__*/ _jsxs(Box, {
|
|
98
|
+
sx: {
|
|
99
|
+
display: 'flex',
|
|
100
|
+
width: '100%',
|
|
101
|
+
alignItems: 'start',
|
|
102
|
+
padding: (theme)=>theme.spacing(1, 2, 0, 2),
|
|
103
|
+
flexDirection: isBiggerThanMd ? 'row' : 'column',
|
|
104
|
+
flexWrap: 'nowrap',
|
|
105
|
+
gap: 1
|
|
106
|
+
},
|
|
107
|
+
children: [
|
|
108
|
+
/*#__PURE__*/ _jsx(Box, {
|
|
109
|
+
width: "100%",
|
|
110
|
+
children: /*#__PURE__*/ _jsx(ErrorBoundary, {
|
|
111
|
+
FallbackComponent: ErrorAlert,
|
|
112
|
+
children: /*#__PURE__*/ _jsx(DashboardStickyToolbar, {
|
|
113
|
+
initialVariableIsSticky: initialVariableIsSticky,
|
|
114
|
+
sx: {
|
|
115
|
+
backgroundColor: ({ palette })=>palette.background.default
|
|
116
|
+
}
|
|
117
|
+
})
|
|
118
|
+
})
|
|
119
|
+
}),
|
|
120
|
+
/*#__PURE__*/ _jsx(Stack, {
|
|
121
|
+
direction: "row",
|
|
122
|
+
ml: "auto",
|
|
123
|
+
flexWrap: "wrap",
|
|
124
|
+
justifyContent: "end",
|
|
125
|
+
children: /*#__PURE__*/ _jsxs(Stack, {
|
|
126
|
+
direction: "row",
|
|
127
|
+
spacing: 1,
|
|
128
|
+
mt: 1,
|
|
129
|
+
ml: 1,
|
|
130
|
+
children: [
|
|
131
|
+
/*#__PURE__*/ _jsx(TimeRangeControls, {}),
|
|
132
|
+
/*#__PURE__*/ _jsx(DownloadButton, {}),
|
|
133
|
+
/*#__PURE__*/ _jsx(EditJsonButton, {
|
|
134
|
+
isReadonly: !isEditMode
|
|
135
|
+
})
|
|
136
|
+
]
|
|
137
|
+
})
|
|
149
138
|
})
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
139
|
+
]
|
|
140
|
+
})
|
|
141
|
+
]
|
|
142
|
+
})
|
|
154
143
|
});
|
|
155
144
|
};
|
|
156
145
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Typography, Stack, Button, Box, useTheme, useMediaQuery, Alert } from '@mui/material';\nimport {
|
|
1
|
+
{"version":3,"sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Typography, Stack, Button, Box, useTheme, useMediaQuery, Alert } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { TimeRangeControls } from '@perses-dev/plugin-system';\nimport { ReactElement } from 'react';\nimport { OnSaveDashboard, useEditMode } from '../../context';\nimport { AddPanelButton } from '../AddPanelButton';\nimport { AddGroupButton } from '../AddGroupButton';\nimport { DownloadButton } from '../DownloadButton';\nimport { EditVariablesButton } from '../Variables';\nimport { EditDatasourcesButton } from '../Datasources';\nimport { EditButton } from '../EditButton';\nimport { EditJsonButton } from '../EditJsonButton';\nimport { SaveDashboardButton } from '../SaveDashboardButton';\nimport { DashboardStickyToolbar } from '../DashboardStickyToolbar';\n\nexport interface DashboardToolbarProps {\n dashboardName: string;\n dashboardTitleComponent?: JSX.Element;\n initialVariableIsSticky?: boolean;\n isReadonly: boolean;\n isVariableEnabled: boolean;\n isDatasourceEnabled: boolean;\n onEditButtonClick: () => void;\n onCancelButtonClick: () => void;\n onSave?: OnSaveDashboard;\n}\n\nexport const DashboardToolbar = (props: DashboardToolbarProps): ReactElement => {\n const {\n dashboardName,\n dashboardTitleComponent,\n initialVariableIsSticky,\n isReadonly,\n isVariableEnabled,\n isDatasourceEnabled,\n onEditButtonClick,\n onCancelButtonClick,\n onSave,\n } = props;\n\n const { isEditMode } = useEditMode();\n\n const isBiggerThanSm = useMediaQuery(useTheme().breakpoints.up('sm'));\n const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));\n\n const dashboardTitle = dashboardTitleComponent ? (\n dashboardTitleComponent\n ) : (\n <Typography variant=\"h2\">{dashboardName}</Typography>\n );\n\n const testId = 'dashboard-toolbar';\n\n return (\n <>\n <Stack data-testid={testId}>\n <Box\n px={2}\n py={1.5}\n display=\"flex\"\n sx={{ backgroundColor: (theme) => theme.palette.primary.main + (isEditMode ? '30' : '0') }}\n >\n {dashboardTitle}\n {isEditMode ? (\n <Stack direction=\"row\" gap={1} ml=\"auto\">\n {isReadonly && (\n <Alert severity=\"warning\" sx={{ backgroundColor: 'transparent', padding: 0 }}>\n Dashboard managed via code only. Download JSON and commit changes to save.\n </Alert>\n )}\n <Stack direction=\"row\" spacing={0.5} ml={1} whiteSpace=\"nowrap\">\n {isVariableEnabled && <EditVariablesButton />}\n {isDatasourceEnabled && <EditDatasourcesButton />}\n <AddPanelButton />\n <AddGroupButton />\n </Stack>\n <SaveDashboardButton onSave={onSave} isDisabled={isReadonly} />\n <Button variant=\"outlined\" onClick={onCancelButtonClick}>\n Cancel\n </Button>\n </Stack>\n ) : (\n <>\n {isBiggerThanSm && (\n <Stack direction=\"row\" gap={1} ml=\"auto\">\n <EditButton onClick={onEditButtonClick} />\n </Stack>\n )}\n </>\n )}\n </Box>\n <Box\n sx={{\n display: 'flex',\n width: '100%',\n alignItems: 'start',\n padding: (theme) => theme.spacing(1, 2, 0, 2),\n flexDirection: isBiggerThanMd ? 'row' : 'column',\n flexWrap: 'nowrap',\n gap: 1,\n }}\n >\n <Box width=\"100%\">\n <ErrorBoundary FallbackComponent={ErrorAlert}>\n <DashboardStickyToolbar\n initialVariableIsSticky={initialVariableIsSticky}\n sx={{\n backgroundColor: ({ palette }) => palette.background.default,\n }}\n />\n </ErrorBoundary>\n </Box>\n <Stack direction=\"row\" ml=\"auto\" flexWrap=\"wrap\" justifyContent=\"end\">\n <Stack direction=\"row\" spacing={1} mt={1} ml={1}>\n <TimeRangeControls />\n <DownloadButton />\n <EditJsonButton isReadonly={!isEditMode} />\n </Stack>\n </Stack>\n </Box>\n </Stack>\n </>\n );\n};\n"],"names":["Typography","Stack","Button","Box","useTheme","useMediaQuery","Alert","ErrorBoundary","ErrorAlert","TimeRangeControls","useEditMode","AddPanelButton","AddGroupButton","DownloadButton","EditVariablesButton","EditDatasourcesButton","EditButton","EditJsonButton","SaveDashboardButton","DashboardStickyToolbar","DashboardToolbar","props","dashboardName","dashboardTitleComponent","initialVariableIsSticky","isReadonly","isVariableEnabled","isDatasourceEnabled","onEditButtonClick","onCancelButtonClick","onSave","isEditMode","isBiggerThanSm","breakpoints","up","isBiggerThanMd","dashboardTitle","variant","testId","data-testid","px","py","display","sx","backgroundColor","theme","palette","primary","main","direction","gap","ml","severity","padding","spacing","whiteSpace","isDisabled","onClick","width","alignItems","flexDirection","flexWrap","FallbackComponent","background","default","justifyContent","mt"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DownloadButton.d.ts","sourceRoot":"","sources":["../../../src/components/DownloadButton/DownloadButton.tsx"],"names":[],"mappings":"AAgBA,OAAc,EAAE,YAAY,EAAU,MAAM,OAAO,CAAC;AAKpD,wBAAgB,cAAc,IAAI,YAAY,
|
|
1
|
+
{"version":3,"file":"DownloadButton.d.ts","sourceRoot":"","sources":["../../../src/components/DownloadButton/DownloadButton.tsx"],"names":[],"mappings":"AAgBA,OAAc,EAAE,YAAY,EAAU,MAAM,OAAO,CAAC;AAKpD,wBAAgB,cAAc,IAAI,YAAY,CA+D7C"}
|
|
@@ -15,8 +15,8 @@ import { ClickAwayListener, Menu, MenuItem, MenuList } from '@mui/material';
|
|
|
15
15
|
import { ToolbarIconButton } from '@perses-dev/components';
|
|
16
16
|
import DownloadIcon from 'mdi-material-ui/DownloadOutline';
|
|
17
17
|
import React, { useRef } from 'react';
|
|
18
|
-
import { stringify } from 'yaml';
|
|
19
18
|
import { useDashboard } from '../../context';
|
|
19
|
+
import { serializeDashboard } from './serializeDashboard';
|
|
20
20
|
// Button that enables downloading the dashboard as a JSON file
|
|
21
21
|
export function DownloadButton() {
|
|
22
22
|
const { dashboard } = useDashboard();
|
|
@@ -28,43 +28,13 @@ export function DownloadButton() {
|
|
|
28
28
|
};
|
|
29
29
|
const handleItemClick = (format, shape)=>()=>{
|
|
30
30
|
setAnchorEl(null);
|
|
31
|
-
|
|
32
|
-
switch(format){
|
|
33
|
-
case 'json':
|
|
34
|
-
type = 'application/json';
|
|
35
|
-
content = JSON.stringify(dashboard, null, 2);
|
|
36
|
-
break;
|
|
37
|
-
case 'yaml':
|
|
38
|
-
{
|
|
39
|
-
type = 'application/yaml';
|
|
40
|
-
if (shape === 'cr') {
|
|
41
|
-
const name = dashboard.metadata.name.toLowerCase().replace(/[^a-z0-9-]/g, '-');
|
|
42
|
-
content = stringify({
|
|
43
|
-
apiVersion: 'perses.dev/v1alpha1',
|
|
44
|
-
kind: 'PersesDashboard',
|
|
45
|
-
metadata: {
|
|
46
|
-
labels: {
|
|
47
|
-
'app.kubernetes.io/name': 'perses-dashboard',
|
|
48
|
-
'app.kubernetes.io/instance': name,
|
|
49
|
-
'app.kubernetes.io/part-of': 'perses-operator'
|
|
50
|
-
},
|
|
51
|
-
name
|
|
52
|
-
},
|
|
53
|
-
namespace: dashboard.metadata.project,
|
|
54
|
-
spec: dashboard.spec
|
|
55
|
-
});
|
|
56
|
-
} else {
|
|
57
|
-
content = stringify(dashboard);
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
break;
|
|
61
|
-
}
|
|
31
|
+
const { contentType, content } = serializeDashboard(dashboard, format, shape);
|
|
62
32
|
if (!hiddenLinkRef || !hiddenLinkRef.current) return;
|
|
63
33
|
// Create blob URL
|
|
64
34
|
const hiddenLinkUrl = URL.createObjectURL(new Blob([
|
|
65
35
|
content
|
|
66
36
|
], {
|
|
67
|
-
type
|
|
37
|
+
type: contentType
|
|
68
38
|
}));
|
|
69
39
|
// Simulate click
|
|
70
40
|
hiddenLinkRef.current.download = `${dashboard.metadata.name}${shape === 'cr' ? '-cr' : ''}.${format}`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/DownloadButton/DownloadButton.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 { ClickAwayListener, Menu, MenuItem, MenuList } from '@mui/material';\nimport { ToolbarIconButton } from '@perses-dev/components';\nimport DownloadIcon from 'mdi-material-ui/DownloadOutline';\nimport React, { ReactElement, useRef } from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["../../../src/components/DownloadButton/DownloadButton.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 { ClickAwayListener, Menu, MenuItem, MenuList } from '@mui/material';\nimport { ToolbarIconButton } from '@perses-dev/components';\nimport DownloadIcon from 'mdi-material-ui/DownloadOutline';\nimport React, { ReactElement, useRef } from 'react';\nimport { useDashboard } from '../../context';\nimport { serializeDashboard } from './serializeDashboard';\n\n// Button that enables downloading the dashboard as a JSON file\nexport function DownloadButton(): ReactElement {\n const { dashboard } = useDashboard();\n const hiddenLinkRef = useRef<HTMLAnchorElement>(null);\n const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);\n const open = Boolean(anchorEl);\n const handleClick = (event: React.MouseEvent<HTMLButtonElement>): void => {\n setAnchorEl(event.currentTarget);\n };\n const handleItemClick = (format: 'json' | 'yaml', shape?: 'cr') => (): void => {\n setAnchorEl(null);\n\n const { contentType, content } = serializeDashboard(dashboard, format, shape);\n\n if (!hiddenLinkRef || !hiddenLinkRef.current) return;\n // Create blob URL\n const hiddenLinkUrl = URL.createObjectURL(new Blob([content], { type: contentType }));\n // Simulate click\n hiddenLinkRef.current.download = `${dashboard.metadata.name}${shape === 'cr' ? '-cr' : ''}.${format}`;\n hiddenLinkRef.current.href = hiddenLinkUrl;\n hiddenLinkRef.current.click();\n // Remove blob URL (for memory management)\n URL.revokeObjectURL(hiddenLinkUrl);\n };\n\n return (\n <>\n <ToolbarIconButton\n id=\"download-dashboard-button\"\n aria-controls={open ? 'basic-menu' : undefined}\n aria-haspopup=\"true\"\n aria-expanded={open ? 'true' : undefined}\n onClick={handleClick}\n >\n <DownloadIcon />\n </ToolbarIconButton>\n\n <Menu\n id=\"download-dashboard-formats\"\n anchorEl={anchorEl}\n open={open}\n hideBackdrop={true}\n onClose={() => setAnchorEl(null)}\n MenuListProps={{\n 'aria-labelledby': 'download-dashboard-button',\n }}\n >\n <div>\n <ClickAwayListener onClickAway={() => setAnchorEl(null)}>\n <MenuList>\n <MenuItem onClick={handleItemClick('json')}>JSON</MenuItem>\n <MenuItem onClick={handleItemClick('yaml')}>YAML</MenuItem>\n <MenuItem onClick={handleItemClick('yaml', 'cr')}>YAML (CR)</MenuItem>\n </MenuList>\n </ClickAwayListener>\n </div>\n </Menu>\n\n {/* Hidden link to download the dashboard as a JSON or YAML file */}\n {/* eslint-disable jsx-a11y/anchor-has-content */}\n {/* eslint-disable jsx-a11y/anchor-is-valid */}\n <a ref={hiddenLinkRef} style={{ display: 'none' }} />\n </>\n );\n}\n"],"names":["ClickAwayListener","Menu","MenuItem","MenuList","ToolbarIconButton","DownloadIcon","React","useRef","useDashboard","serializeDashboard","DownloadButton","dashboard","hiddenLinkRef","anchorEl","setAnchorEl","useState","open","Boolean","handleClick","event","currentTarget","handleItemClick","format","shape","contentType","content","current","hiddenLinkUrl","URL","createObjectURL","Blob","type","download","metadata","name","href","click","revokeObjectURL","id","aria-controls","undefined","aria-haspopup","aria-expanded","onClick","hideBackdrop","onClose","MenuListProps","div","onClickAway","a","ref","style","display"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,iBAAiB,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,QAAQ,QAAQ,gBAAgB;AAC5E,SAASC,iBAAiB,QAAQ,yBAAyB;AAC3D,OAAOC,kBAAkB,kCAAkC;AAC3D,OAAOC,SAAuBC,MAAM,QAAQ,QAAQ;AACpD,SAASC,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,kBAAkB,QAAQ,uBAAuB;AAE1D,+DAA+D;AAC/D,OAAO,SAASC;IACd,MAAM,EAAEC,SAAS,EAAE,GAAGH;IACtB,MAAMI,gBAAgBL,OAA0B;IAChD,MAAM,CAACM,UAAUC,YAAY,GAAGR,MAAMS,QAAQ,CAAqB;IACnE,MAAMC,OAAOC,QAAQJ;IACrB,MAAMK,cAAc,CAACC;QACnBL,YAAYK,MAAMC,aAAa;IACjC;IACA,MAAMC,kBAAkB,CAACC,QAAyBC,QAAiB;YACjET,YAAY;YAEZ,MAAM,EAAEU,WAAW,EAAEC,OAAO,EAAE,GAAGhB,mBAAmBE,WAAWW,QAAQC;YAEvE,IAAI,CAACX,iBAAiB,CAACA,cAAcc,OAAO,EAAE;YAC9C,kBAAkB;YAClB,MAAMC,gBAAgBC,IAAIC,eAAe,CAAC,IAAIC,KAAK;gBAACL;aAAQ,EAAE;gBAAEM,MAAMP;YAAY;YAClF,iBAAiB;YACjBZ,cAAcc,OAAO,CAACM,QAAQ,GAAG,GAAGrB,UAAUsB,QAAQ,CAACC,IAAI,GAAGX,UAAU,OAAO,QAAQ,GAAG,CAAC,EAAED,QAAQ;YACrGV,cAAcc,OAAO,CAACS,IAAI,GAAGR;YAC7Bf,cAAcc,OAAO,CAACU,KAAK;YAC3B,0CAA0C;YAC1CR,IAAIS,eAAe,CAACV;QACtB;IAEA,qBACE;;0BACE,KAACvB;gBACCkC,IAAG;gBACHC,iBAAevB,OAAO,eAAewB;gBACrCC,iBAAc;gBACdC,iBAAe1B,OAAO,SAASwB;gBAC/BG,SAASzB;0BAET,cAAA,KAACb;;0BAGH,KAACJ;gBACCqC,IAAG;gBACHzB,UAAUA;gBACVG,MAAMA;gBACN4B,cAAc;gBACdC,SAAS,IAAM/B,YAAY;gBAC3BgC,eAAe;oBACb,mBAAmB;gBACrB;0BAEA,cAAA,KAACC;8BACC,cAAA,KAAC/C;wBAAkBgD,aAAa,IAAMlC,YAAY;kCAChD,cAAA,MAACX;;8CACC,KAACD;oCAASyC,SAAStB,gBAAgB;8CAAS;;8CAC5C,KAACnB;oCAASyC,SAAStB,gBAAgB;8CAAS;;8CAC5C,KAACnB;oCAASyC,SAAStB,gBAAgB,QAAQ;8CAAO;;;;;;;0BAS1D,KAAC4B;gBAAEC,KAAKtC;gBAAeuC,OAAO;oBAAEC,SAAS;gBAAO;;;;AAGtD"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { DashboardResource, EphemeralDashboardResource } from '@perses-dev/core';
|
|
2
|
+
type SerializedDashboard = {
|
|
3
|
+
contentType: string;
|
|
4
|
+
content: string;
|
|
5
|
+
};
|
|
6
|
+
export declare function serializeDashboard(dashboard: DashboardResource | EphemeralDashboardResource, format: 'json' | 'yaml', shape?: 'cr'): SerializedDashboard;
|
|
7
|
+
export {};
|
|
8
|
+
//# sourceMappingURL=serializeDashboard.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"serializeDashboard.d.ts","sourceRoot":"","sources":["../../../src/components/DownloadButton/serializeDashboard.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AAGjF,KAAK,mBAAmB,GAAG;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AA+BF,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,iBAAiB,GAAG,0BAA0B,EACzD,MAAM,EAAE,MAAM,GAAG,MAAM,EACvB,KAAK,CAAC,EAAE,IAAI,GACX,mBAAmB,CAOrB"}
|
|
@@ -0,0 +1,56 @@
|
|
|
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
|
+
import { stringify } from 'yaml';
|
|
14
|
+
function serializeYaml(dashboard, shape) {
|
|
15
|
+
let content;
|
|
16
|
+
if (shape === 'cr') {
|
|
17
|
+
const name = dashboard.metadata.name.toLowerCase().replace(/[^a-z0-9-]/g, '-');
|
|
18
|
+
content = stringify({
|
|
19
|
+
apiVersion: 'perses.dev/v1alpha1',
|
|
20
|
+
kind: 'PersesDashboard',
|
|
21
|
+
metadata: {
|
|
22
|
+
labels: {
|
|
23
|
+
'app.kubernetes.io/name': 'perses-dashboard',
|
|
24
|
+
'app.kubernetes.io/instance': name,
|
|
25
|
+
'app.kubernetes.io/part-of': 'perses-operator'
|
|
26
|
+
},
|
|
27
|
+
name,
|
|
28
|
+
namespace: dashboard.metadata.project
|
|
29
|
+
},
|
|
30
|
+
spec: dashboard.spec
|
|
31
|
+
}, {
|
|
32
|
+
schema: 'yaml-1.1'
|
|
33
|
+
});
|
|
34
|
+
} else {
|
|
35
|
+
content = stringify(dashboard, {
|
|
36
|
+
schema: 'yaml-1.1'
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
return {
|
|
40
|
+
contentType: 'application/yaml',
|
|
41
|
+
content
|
|
42
|
+
};
|
|
43
|
+
}
|
|
44
|
+
export function serializeDashboard(dashboard, format, shape) {
|
|
45
|
+
switch(format){
|
|
46
|
+
case 'json':
|
|
47
|
+
return {
|
|
48
|
+
contentType: 'application/json',
|
|
49
|
+
content: JSON.stringify(dashboard, null, 2)
|
|
50
|
+
};
|
|
51
|
+
case 'yaml':
|
|
52
|
+
return serializeYaml(dashboard, shape);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
//# sourceMappingURL=serializeDashboard.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/DownloadButton/serializeDashboard.ts"],"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 { DashboardResource, EphemeralDashboardResource } from '@perses-dev/core';\nimport { stringify } from 'yaml';\n\ntype SerializedDashboard = {\n contentType: string;\n content: string;\n};\n\nfunction serializeYaml(dashboard: DashboardResource | EphemeralDashboardResource, shape?: 'cr'): SerializedDashboard {\n let content: string;\n\n if (shape === 'cr') {\n const name = dashboard.metadata.name.toLowerCase().replace(/[^a-z0-9-]/g, '-');\n content = stringify(\n {\n apiVersion: 'perses.dev/v1alpha1',\n kind: 'PersesDashboard',\n metadata: {\n labels: {\n 'app.kubernetes.io/name': 'perses-dashboard',\n 'app.kubernetes.io/instance': name,\n 'app.kubernetes.io/part-of': 'perses-operator',\n },\n name,\n namespace: dashboard.metadata.project,\n },\n spec: dashboard.spec,\n },\n { schema: 'yaml-1.1' }\n );\n } else {\n content = stringify(dashboard, { schema: 'yaml-1.1' });\n }\n\n return { contentType: 'application/yaml', content };\n}\n\nexport function serializeDashboard(\n dashboard: DashboardResource | EphemeralDashboardResource,\n format: 'json' | 'yaml',\n shape?: 'cr'\n): SerializedDashboard {\n switch (format) {\n case 'json':\n return { contentType: 'application/json', content: JSON.stringify(dashboard, null, 2) };\n case 'yaml':\n return serializeYaml(dashboard, shape);\n }\n}\n"],"names":["stringify","serializeYaml","dashboard","shape","content","name","metadata","toLowerCase","replace","apiVersion","kind","labels","namespace","project","spec","schema","contentType","serializeDashboard","format","JSON"],"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;AAGjC,SAASA,SAAS,QAAQ,OAAO;AAOjC,SAASC,cAAcC,SAAyD,EAAEC,KAAY;IAC5F,IAAIC;IAEJ,IAAID,UAAU,MAAM;QAClB,MAAME,OAAOH,UAAUI,QAAQ,CAACD,IAAI,CAACE,WAAW,GAAGC,OAAO,CAAC,eAAe;QAC1EJ,UAAUJ,UACR;YACES,YAAY;YACZC,MAAM;YACNJ,UAAU;gBACRK,QAAQ;oBACN,0BAA0B;oBAC1B,8BAA8BN;oBAC9B,6BAA6B;gBAC/B;gBACAA;gBACAO,WAAWV,UAAUI,QAAQ,CAACO,OAAO;YACvC;YACAC,MAAMZ,UAAUY,IAAI;QACtB,GACA;YAAEC,QAAQ;QAAW;IAEzB,OAAO;QACLX,UAAUJ,UAAUE,WAAW;YAAEa,QAAQ;QAAW;IACtD;IAEA,OAAO;QAAEC,aAAa;QAAoBZ;IAAQ;AACpD;AAEA,OAAO,SAASa,mBACdf,SAAyD,EACzDgB,MAAuB,EACvBf,KAAY;IAEZ,OAAQe;QACN,KAAK;YACH,OAAO;gBAAEF,aAAa;gBAAoBZ,SAASe,KAAKnB,SAAS,CAACE,WAAW,MAAM;YAAG;QACxF,KAAK;YACH,OAAOD,cAAcC,WAAWC;IACpC;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAqB,SAAS,EAAE,MAAM,eAAe,CAAC;AAE7D,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAqB,SAAS,EAAE,MAAM,eAAe,CAAC;AAE7D,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAsC,MAAM,OAAO,CAAC;AAEtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEjD,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAE9D,MAAM,WAAW,UAAW,SAAQ,SAAS,CAAC,SAAS,CAAC;IACtD,UAAU,EAAE,eAAe,CAAC;IAC5B,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAChD,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAChD,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC;AAED,MAAM,MAAM,YAAY,GAAG;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,SAAS,CAAC;CAC/C,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC;;OAEG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,KAAK,kDAkMhB,CAAC"}
|