@perses-dev/dashboards 0.44.0-rc1 → 0.44.0-rc2
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/Datasources/DatasourceEditor.js +1 -2
- package/dist/cjs/components/Datasources/EditDatasourcesButton.js +7 -1
- package/dist/cjs/components/EditJsonDialog/EditJsonDialog.js +7 -0
- package/dist/cjs/components/TimeRangeControls/TimeRangeControls.js +7 -1
- package/dist/cjs/context/DashboardProvider/DashboardProvider.js +7 -2
- package/dist/cjs/context/DatasourceStoreProvider.js +7 -1
- package/dist/cjs/context/useDashboard.js +19 -4
- package/dist/components/Datasources/DatasourceEditor.d.ts.map +1 -1
- package/dist/components/Datasources/DatasourceEditor.js +1 -2
- package/dist/components/Datasources/DatasourceEditor.js.map +1 -1
- package/dist/components/Datasources/EditDatasourcesButton.d.ts.map +1 -1
- package/dist/components/Datasources/EditDatasourcesButton.js +7 -1
- package/dist/components/Datasources/EditDatasourcesButton.js.map +1 -1
- package/dist/components/EditJsonDialog/EditJsonDialog.js +7 -0
- package/dist/components/EditJsonDialog/EditJsonDialog.js.map +1 -1
- package/dist/components/TimeRangeControls/TimeRangeControls.d.ts.map +1 -1
- package/dist/components/TimeRangeControls/TimeRangeControls.js +7 -1
- package/dist/components/TimeRangeControls/TimeRangeControls.js.map +1 -1
- package/dist/context/DashboardProvider/DashboardProvider.d.ts +5 -3
- package/dist/context/DashboardProvider/DashboardProvider.d.ts.map +1 -1
- package/dist/context/DashboardProvider/DashboardProvider.js +7 -2
- package/dist/context/DashboardProvider/DashboardProvider.js.map +1 -1
- package/dist/context/DashboardProvider/common.d.ts +2 -2
- package/dist/context/DashboardProvider/common.d.ts.map +1 -1
- package/dist/context/DashboardProvider/common.js.map +1 -1
- package/dist/context/DashboardProvider/dashboard-provider-api.d.ts +1 -1
- package/dist/context/DatasourceStoreProvider.d.ts +2 -2
- package/dist/context/DatasourceStoreProvider.d.ts.map +1 -1
- package/dist/context/DatasourceStoreProvider.js +7 -1
- package/dist/context/DatasourceStoreProvider.js.map +1 -1
- package/dist/context/useDashboard.d.ts +3 -3
- package/dist/context/useDashboard.d.ts.map +1 -1
- package/dist/context/useDashboard.js +19 -4
- package/dist/context/useDashboard.js.map +1 -1
- package/dist/views/ViewDashboard/DashboardApp.d.ts +2 -2
- package/dist/views/ViewDashboard/DashboardApp.d.ts.map +1 -1
- package/dist/views/ViewDashboard/DashboardApp.js.map +1 -1
- package/package.json +6 -6
|
@@ -85,8 +85,7 @@ function DatasourceEditor(props) {
|
|
|
85
85
|
};
|
|
86
86
|
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
|
|
87
87
|
children: datasourceEdit ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DatasourceEditorForm, {
|
|
88
|
-
|
|
89
|
-
initialSpec: datasourceEdit.spec,
|
|
88
|
+
initialDatasourceDefinition: datasourceEdit,
|
|
90
89
|
initialAction: datasourceFormAction,
|
|
91
90
|
isDraft: true,
|
|
92
91
|
onSave: (name, spec)=>{
|
|
@@ -61,7 +61,13 @@ function EditDatasourcesButton() {
|
|
|
61
61
|
obj[key] = datasources[key];
|
|
62
62
|
return obj;
|
|
63
63
|
}, {});
|
|
64
|
-
setDashboard({
|
|
64
|
+
setDashboard(dashboard.kind === 'Dashboard' ? {
|
|
65
|
+
...dashboard,
|
|
66
|
+
spec: {
|
|
67
|
+
...dashboard.spec,
|
|
68
|
+
datasources: datasources
|
|
69
|
+
}
|
|
70
|
+
} : {
|
|
65
71
|
...dashboard,
|
|
66
72
|
spec: {
|
|
67
73
|
...dashboard.spec,
|
|
@@ -92,6 +92,13 @@ const EditJsonDialogForm = (props)=>{
|
|
|
92
92
|
severity: "warning",
|
|
93
93
|
children: "Metadata cannot be modified or saved."
|
|
94
94
|
}),
|
|
95
|
+
draftDashboard.kind === 'EphemeralDashboard' && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Alert, {
|
|
96
|
+
sx: {
|
|
97
|
+
marginBottom: 1
|
|
98
|
+
},
|
|
99
|
+
severity: "warning",
|
|
100
|
+
children: "Time-to-live cannot be modified or saved from here. Go to the project view to modify it."
|
|
101
|
+
}),
|
|
95
102
|
/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControl, {
|
|
96
103
|
fullWidth: true,
|
|
97
104
|
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.JSONEditor, {
|
|
@@ -162,7 +162,13 @@ function TimeRangeControls({ heightPx, showTimeRangeSelector = true, showRefresh
|
|
|
162
162
|
}
|
|
163
163
|
// set the new refresh interval both in the dashboard context & as query param
|
|
164
164
|
const handleRefreshIntervalChange = (0, _react.useCallback)((duration)=>{
|
|
165
|
-
setDashboard({
|
|
165
|
+
setDashboard(dashboard.kind === 'Dashboard' ? {
|
|
166
|
+
...dashboard,
|
|
167
|
+
spec: {
|
|
168
|
+
...dashboard.spec,
|
|
169
|
+
refreshInterval: duration
|
|
170
|
+
}
|
|
171
|
+
} : {
|
|
166
172
|
...dashboard,
|
|
167
173
|
spec: {
|
|
168
174
|
...dashboard.spec,
|
|
@@ -89,7 +89,8 @@ function DashboardProvider(props) {
|
|
|
89
89
|
}
|
|
90
90
|
function initStore(props) {
|
|
91
91
|
const { initialState: { dashboardResource, isEditMode } } = props;
|
|
92
|
-
const { spec: { display, duration, refreshInterval = _core.DEFAULT_REFRESH_INTERVAL, datasources }
|
|
92
|
+
const { kind, metadata, spec: { display, duration, refreshInterval = _core.DEFAULT_REFRESH_INTERVAL, datasources } } = dashboardResource;
|
|
93
|
+
const ttl = 'ttl' in dashboardResource.spec ? dashboardResource.spec.ttl : undefined;
|
|
93
94
|
let { spec: { layouts, panels } } = dashboardResource;
|
|
94
95
|
// Set fallbacks in case the frontend is used with a non-Perses backend
|
|
95
96
|
layouts = layouts !== null && layouts !== void 0 ? layouts : [];
|
|
@@ -107,17 +108,20 @@ function initStore(props) {
|
|
|
107
108
|
/* General */ ...(0, _discardchangesdialogslice.createDiscardChangesDialogSlice)(...args),
|
|
108
109
|
...(0, _editjsondialogslice.createEditJsonDialogSlice)(...args),
|
|
109
110
|
...(0, _savechangesdialogslice.createSaveChangesDialogSlice)(...args),
|
|
111
|
+
kind,
|
|
110
112
|
metadata,
|
|
111
113
|
display,
|
|
112
114
|
duration,
|
|
113
115
|
refreshInterval,
|
|
114
116
|
datasources,
|
|
117
|
+
ttl,
|
|
115
118
|
isEditMode: !!isEditMode,
|
|
116
119
|
setEditMode: (isEditMode)=>set({
|
|
117
120
|
isEditMode
|
|
118
121
|
}),
|
|
119
|
-
setDashboard: ({ metadata, spec: { display, panels = {}, layouts = [], duration, refreshInterval, datasources = {} } })=>{
|
|
122
|
+
setDashboard: ({ kind, metadata, spec: { display, panels = {}, layouts = [], duration, refreshInterval, datasources = {} } })=>{
|
|
120
123
|
set((state)=>{
|
|
124
|
+
state.kind = kind;
|
|
121
125
|
state.metadata = metadata;
|
|
122
126
|
state.display = display;
|
|
123
127
|
state.panels = panels;
|
|
@@ -127,6 +131,7 @@ function initStore(props) {
|
|
|
127
131
|
state.duration = duration;
|
|
128
132
|
state.refreshInterval = refreshInterval !== null && refreshInterval !== void 0 ? refreshInterval : _core.DEFAULT_REFRESH_INTERVAL;
|
|
129
133
|
state.datasources = datasources;
|
|
134
|
+
// TODO: add ttl here to e.g allow edition from JSON view, but probably requires quite some refactoring
|
|
130
135
|
});
|
|
131
136
|
}
|
|
132
137
|
};
|
|
@@ -161,7 +161,13 @@ function DatasourceStoreProvider(props) {
|
|
|
161
161
|
]);
|
|
162
162
|
const setLocalDatasources = (0, _react.useCallback)((datasources)=>{
|
|
163
163
|
if (dashboardResource) {
|
|
164
|
-
setDashboardResource({
|
|
164
|
+
setDashboardResource(dashboardResource.kind === 'Dashboard' ? {
|
|
165
|
+
...dashboardResource,
|
|
166
|
+
spec: {
|
|
167
|
+
...dashboardResource.spec,
|
|
168
|
+
datasources: datasources
|
|
169
|
+
}
|
|
170
|
+
} : {
|
|
165
171
|
...dashboardResource,
|
|
166
172
|
spec: {
|
|
167
173
|
...dashboardResource.spec,
|
|
@@ -24,22 +24,24 @@ const _core = require("@perses-dev/core");
|
|
|
24
24
|
const _DashboardProvider = require("./DashboardProvider");
|
|
25
25
|
const _TemplateVariableProvider = require("./TemplateVariableProvider");
|
|
26
26
|
function useDashboard() {
|
|
27
|
-
const { panels, panelGroups, panelGroupOrder, setDashboard: setDashboardResource, metadata, display, duration, refreshInterval, datasources } = (0, _DashboardProvider.useDashboardStore)(({ panels, panelGroups, panelGroupOrder, setDashboard, metadata, display, duration, refreshInterval, datasources })=>({
|
|
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,
|
|
31
31
|
setDashboard,
|
|
32
|
+
kind,
|
|
32
33
|
metadata,
|
|
33
34
|
display,
|
|
34
35
|
duration,
|
|
35
36
|
refreshInterval,
|
|
36
|
-
datasources
|
|
37
|
+
datasources,
|
|
38
|
+
ttl
|
|
37
39
|
}));
|
|
38
40
|
const { setVariableDefinitions } = (0, _TemplateVariableProvider.useTemplateVariableActions)();
|
|
39
41
|
const variables = (0, _TemplateVariableProvider.useTemplateVariableDefinitions)();
|
|
40
42
|
const layouts = convertPanelGroupsToLayouts(panelGroups, panelGroupOrder);
|
|
41
|
-
const dashboard = {
|
|
42
|
-
kind
|
|
43
|
+
const dashboard = kind === 'Dashboard' ? {
|
|
44
|
+
kind,
|
|
43
45
|
metadata,
|
|
44
46
|
spec: {
|
|
45
47
|
display,
|
|
@@ -50,6 +52,19 @@ function useDashboard() {
|
|
|
50
52
|
refreshInterval,
|
|
51
53
|
datasources
|
|
52
54
|
}
|
|
55
|
+
} : {
|
|
56
|
+
kind,
|
|
57
|
+
metadata,
|
|
58
|
+
spec: {
|
|
59
|
+
display,
|
|
60
|
+
panels,
|
|
61
|
+
layouts,
|
|
62
|
+
variables,
|
|
63
|
+
duration,
|
|
64
|
+
refreshInterval,
|
|
65
|
+
datasources,
|
|
66
|
+
ttl
|
|
67
|
+
}
|
|
53
68
|
};
|
|
54
69
|
const setDashboard = (dashboardResource)=>{
|
|
55
70
|
setVariableDefinitions(dashboardResource.spec.variables);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatasourceEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Datasources/DatasourceEditor.tsx"],"names":[],"mappings":"AA6BA,OAAO,
|
|
1
|
+
{"version":3,"file":"DatasourceEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Datasources/DatasourceEditor.tsx"],"names":[],"mappings":"AA6BA,OAAO,EAAgC,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAMhF,wBAAgB,gBAAgB,CAAC,KAAK,EAAE;IACtC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAC5C,QAAQ,EAAE,CAAC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,KAAK,IAAI,CAAC;IAChE,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,2CAyJA"}
|
|
@@ -70,8 +70,7 @@ export function DatasourceEditor(props) {
|
|
|
70
70
|
};
|
|
71
71
|
return /*#__PURE__*/ _jsx(_Fragment, {
|
|
72
72
|
children: datasourceEdit ? /*#__PURE__*/ _jsx(DatasourceEditorForm, {
|
|
73
|
-
|
|
74
|
-
initialSpec: datasourceEdit.spec,
|
|
73
|
+
initialDatasourceDefinition: datasourceEdit,
|
|
75
74
|
initialAction: datasourceFormAction,
|
|
76
75
|
isDraft: true,
|
|
77
76
|
onSave: (name, spec)=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Datasources/DatasourceEditor.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 {\n Box,\n Button,\n IconButton,\n Stack,\n Table,\n TableBody,\n TableCell,\n TableContainer,\n TableHead,\n TableRow,\n Typography,\n} from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport TrashIcon from 'mdi-material-ui/TrashCan';\nimport { Action, DatasourceSpec } from '@perses-dev/core';\nimport { DatasourceEditorForm } from '@perses-dev/plugin-system';\nimport { useState } from 'react';\nimport { useImmer } from 'use-immer';\nimport { useDiscardChangesConfirmationDialog } from '../../context';\n\nexport function DatasourceEditor(props: {\n datasources: Record<string, DatasourceSpec>;\n onChange: (datasources: Record<string, DatasourceSpec>) => void;\n onCancel: () => void;\n}) {\n const [datasources, setDatasources] = useImmer(props.datasources);\n const [datasourceFormAction, setDatasourceFormAction] = useState<Action>('update');\n const [datasourceEdit, setDatasourceEdit] = useState<{ name: string; spec: DatasourceSpec } | null>(null);\n const defaultSpec: DatasourceSpec = {\n default: false,\n plugin: {\n // TODO: find a way to avoid assuming that the PrometheusDatasource plugin is installed\n kind: 'PrometheusDatasource',\n spec: {},\n },\n };\n\n const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } =\n useDiscardChangesConfirmationDialog();\n\n const handleCancel = () => {\n if (JSON.stringify(props.datasources) !== JSON.stringify(datasources)) {\n openDiscardChangesConfirmationDialog({\n onDiscardChanges: () => {\n closeDiscardChangesConfirmationDialog();\n props.onCancel();\n },\n onCancel: () => {\n closeDiscardChangesConfirmationDialog();\n },\n description:\n 'You have unapplied changes. Are you sure you want to discard these changes? Changes cannot be recovered.',\n });\n } else {\n props.onCancel();\n }\n };\n\n const removeDatasource = (name: string) => {\n setDatasources((draft) => {\n delete draft[name];\n });\n };\n\n const addDatasource = () => {\n setDatasourceFormAction('create');\n setDatasourceEdit({\n name: 'NewDatasource',\n spec: defaultSpec,\n });\n };\n\n const editDatasource = (name: string) => {\n setDatasourceFormAction('update');\n setDatasourceEdit({\n name: name,\n spec: datasources[name] ?? defaultSpec,\n });\n };\n\n return (\n <>\n {datasourceEdit ? (\n <DatasourceEditorForm\n initialName={datasourceEdit.name}\n initialSpec={datasourceEdit.spec}\n initialAction={datasourceFormAction}\n isDraft={true}\n onSave={(name: string, spec: DatasourceSpec) => {\n setDatasources((draft) => {\n delete draft[datasourceEdit.name]; // to tackle the case where datasource name has been changed\n draft[name] = spec;\n setDatasourceEdit(null);\n });\n }}\n onClose={() => {\n setDatasourceEdit(null);\n }}\n />\n ) : (\n <>\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n padding: (theme) => theme.spacing(1, 2),\n borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n }}\n >\n <Typography variant=\"h2\">Edit Dashboard Datasources</Typography>\n <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n <Button\n disabled={props.datasources === datasources}\n variant=\"contained\"\n onClick={() => {\n props.onChange(datasources);\n }}\n >\n Apply\n </Button>\n <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n Cancel\n </Button>\n </Stack>\n </Box>\n <Box padding={2} sx={{ overflowY: 'scroll' }}>\n <Stack spacing={2}>\n <Stack spacing={2}>\n <TableContainer>\n <Table sx={{ minWidth: 650 }} aria-label=\"table of datasources\">\n <TableHead>\n <TableRow>\n <TableCell>Name</TableCell>\n <TableCell>Type</TableCell>\n <TableCell>Description</TableCell>\n <TableCell align=\"right\">Actions</TableCell>\n </TableRow>\n </TableHead>\n <TableBody>\n {Object.entries(datasources).map(([name, spec]) => {\n return (\n <TableRow key={name}>\n <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n {name}\n </TableCell>\n <TableCell>{spec.plugin.kind}</TableCell>\n <TableCell>{spec.display?.description ?? ''}</TableCell>\n <TableCell align=\"right\" sx={{ whiteSpace: 'nowrap' }}>\n <IconButton onClick={() => editDatasource(name)}>\n <PencilIcon />\n </IconButton>\n <IconButton onClick={() => removeDatasource(name)}>\n <TrashIcon />\n </IconButton>\n </TableCell>\n </TableRow>\n );\n })}\n </TableBody>\n </Table>\n </TableContainer>\n <Box display=\"flex\">\n <Button\n variant=\"contained\"\n startIcon={<AddIcon />}\n sx={{ marginLeft: 'auto' }}\n onClick={addDatasource}\n >\n Add Datasource\n </Button>\n </Box>\n </Stack>\n </Stack>\n </Box>\n </>\n )}\n </>\n );\n}\n"],"names":["Box","Button","IconButton","Stack","Table","TableBody","TableCell","TableContainer","TableHead","TableRow","Typography","AddIcon","PencilIcon","TrashIcon","DatasourceEditorForm","useState","useImmer","useDiscardChangesConfirmationDialog","DatasourceEditor","props","datasources","setDatasources","datasourceFormAction","setDatasourceFormAction","datasourceEdit","setDatasourceEdit","defaultSpec","default","plugin","kind","spec","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","handleCancel","JSON","stringify","onDiscardChanges","onCancel","description","removeDatasource","name","draft","addDatasource","editDatasource","initialName","initialSpec","initialAction","isDraft","onSave","onClose","sx","display","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","direction","marginLeft","disabled","onClick","onChange","color","overflowY","minWidth","aria-label","align","Object","entries","map","component","scope","fontWeight","whiteSpace","startIcon"],"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,SACEA,GAAG,EACHC,MAAM,EACNC,UAAU,EACVC,KAAK,EACLC,KAAK,EACLC,SAAS,EACTC,SAAS,EACTC,cAAc,EACdC,SAAS,EACTC,QAAQ,EACRC,UAAU,QACL,gBAAgB;AACvB,OAAOC,aAAa,uBAAuB;AAC3C,OAAOC,gBAAgB,yBAAyB;AAChD,OAAOC,eAAe,2BAA2B;AAEjD,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAASC,QAAQ,QAAQ,QAAQ;AACjC,SAASC,QAAQ,QAAQ,YAAY;AACrC,SAASC,mCAAmC,QAAQ,gBAAgB;AAEpE,OAAO,SAASC,iBAAiBC,KAIhC;IACC,MAAM,CAACC,aAAaC,eAAe,GAAGL,SAASG,MAAMC,WAAW;IAChE,MAAM,CAACE,sBAAsBC,wBAAwB,GAAGR,SAAiB;IACzE,MAAM,CAACS,gBAAgBC,kBAAkB,GAAGV,SAAwD;IACpG,MAAMW,cAA8B;QAClCC,SAAS;QACTC,QAAQ;YACN,uFAAuF;YACvFC,MAAM;YACNC,MAAM,CAAC;QACT;IACF;IAEA,MAAM,EAAEC,oCAAoC,EAAEC,qCAAqC,EAAE,GACnFf;IAEF,MAAMgB,eAAe;QACnB,IAAIC,KAAKC,SAAS,CAAChB,MAAMC,WAAW,MAAMc,KAAKC,SAAS,CAACf,cAAc;YACrEW,qCAAqC;gBACnCK,kBAAkB;oBAChBJ;oBACAb,MAAMkB,QAAQ;gBAChB;gBACAA,UAAU;oBACRL;gBACF;gBACAM,aACE;YACJ;QACF,OAAO;YACLnB,MAAMkB,QAAQ;QAChB;IACF;IAEA,MAAME,mBAAmB,CAACC;QACxBnB,eAAe,CAACoB;YACd,OAAOA,KAAK,CAACD,KAAK;QACpB;IACF;IAEA,MAAME,gBAAgB;QACpBnB,wBAAwB;QACxBE,kBAAkB;YAChBe,MAAM;YACNV,MAAMJ;QACR;IACF;IAEA,MAAMiB,iBAAiB,CAACH;QACtBjB,wBAAwB;YAGhBH;QAFRK,kBAAkB;YAChBe,MAAMA;YACNV,MAAMV,CAAAA,oBAAAA,WAAW,CAACoB,KAAK,cAAjBpB,+BAAAA,oBAAqBM;QAC7B;IACF;IAEA,qBACE;kBACGF,+BACC,KAACV;YACC8B,aAAapB,eAAegB,IAAI;YAChCK,aAAarB,eAAeM,IAAI;YAChCgB,eAAexB;YACfyB,SAAS;YACTC,QAAQ,CAACR,MAAcV;gBACrBT,eAAe,CAACoB;oBACd,OAAOA,KAAK,CAACjB,eAAegB,IAAI,CAAC,EAAE,4DAA4D;oBAC/FC,KAAK,CAACD,KAAK,GAAGV;oBACdL,kBAAkB;gBACpB;YACF;YACAwB,SAAS;gBACPxB,kBAAkB;YACpB;2BAGF;;8BACE,MAACzB;oBACCkD,IAAI;wBACFC,SAAS;wBACTC,YAAY;wBACZC,SAAS,CAACC,QAAUA,MAAMC,OAAO,CAAC,GAAG;wBACrCC,cAAc,CAACF,QAAU,CAAC,UAAU,EAAEA,MAAMG,OAAO,CAACC,OAAO,CAAC,CAAC;oBAC/D;;sCAEA,KAAChD;4BAAWiD,SAAQ;sCAAK;;sCACzB,MAACxD;4BAAMyD,WAAU;4BAAML,SAAS;4BAAGM,YAAW;;8CAC5C,KAAC5D;oCACC6D,UAAU3C,MAAMC,WAAW,KAAKA;oCAChCuC,SAAQ;oCACRI,SAAS;wCACP5C,MAAM6C,QAAQ,CAAC5C;oCACjB;8CACD;;8CAGD,KAACnB;oCAAOgE,OAAM;oCAAYN,SAAQ;oCAAWI,SAAS9B;8CAAc;;;;;;8BAKxE,KAACjC;oBAAIqD,SAAS;oBAAGH,IAAI;wBAAEgB,WAAW;oBAAS;8BACzC,cAAA,KAAC/D;wBAAMoD,SAAS;kCACd,cAAA,MAACpD;4BAAMoD,SAAS;;8CACd,KAAChD;8CACC,cAAA,MAACH;wCAAM8C,IAAI;4CAAEiB,UAAU;wCAAI;wCAAGC,cAAW;;0DACvC,KAAC5D;0DACC,cAAA,MAACC;;sEACC,KAACH;sEAAU;;sEACX,KAACA;sEAAU;;sEACX,KAACA;sEAAU;;sEACX,KAACA;4DAAU+D,OAAM;sEAAQ;;;;;0DAG7B,KAAChE;0DACEiE,OAAOC,OAAO,CAACnD,aAAaoD,GAAG,CAAC,CAAC,CAAChC,MAAMV,KAAK;wDAO5BA;wDAAAA;oDANhB,qBACE,MAACrB;;0EACC,KAACH;gEAAUmE,WAAU;gEAAKC,OAAM;gEAAMxB,IAAI;oEAAEyB,YAAY;gEAAO;0EAC5DnC;;0EAEH,KAAClC;0EAAWwB,KAAKF,MAAM,CAACC,IAAI;;0EAC5B,KAACvB;0EAAWwB,CAAAA,6BAAAA,gBAAAA,KAAKqB,OAAO,cAAZrB,oCAAAA,cAAcQ,WAAW,cAAzBR,uCAAAA,4BAA6B;;0EACzC,MAACxB;gEAAU+D,OAAM;gEAAQnB,IAAI;oEAAE0B,YAAY;gEAAS;;kFAClD,KAAC1E;wEAAW6D,SAAS,IAAMpB,eAAeH;kFACxC,cAAA,KAAC5B;;kFAEH,KAACV;wEAAW6D,SAAS,IAAMxB,iBAAiBC;kFAC1C,cAAA,KAAC3B;;;;;uDAXQ2B;gDAgBnB;;;;;8CAIN,KAACxC;oCAAImD,SAAQ;8CACX,cAAA,KAAClD;wCACC0D,SAAQ;wCACRkB,yBAAW,KAAClE;wCACZuC,IAAI;4CAAEW,YAAY;wCAAO;wCACzBE,SAASrB;kDACV;;;;;;;;;;AAWnB"}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Datasources/DatasourceEditor.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 {\n Box,\n Button,\n IconButton,\n Stack,\n Table,\n TableBody,\n TableCell,\n TableContainer,\n TableHead,\n TableRow,\n Typography,\n} from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport TrashIcon from 'mdi-material-ui/TrashCan';\nimport { Action, DatasourceDefinition, DatasourceSpec } from '@perses-dev/core';\nimport { DatasourceEditorForm } from '@perses-dev/plugin-system';\nimport { useState } from 'react';\nimport { useImmer } from 'use-immer';\nimport { useDiscardChangesConfirmationDialog } from '../../context';\n\nexport function DatasourceEditor(props: {\n datasources: Record<string, DatasourceSpec>;\n onChange: (datasources: Record<string, DatasourceSpec>) => void;\n onCancel: () => void;\n}) {\n const [datasources, setDatasources] = useImmer(props.datasources);\n const [datasourceFormAction, setDatasourceFormAction] = useState<Action>('update');\n const [datasourceEdit, setDatasourceEdit] = useState<DatasourceDefinition | null>(null);\n const defaultSpec: DatasourceSpec = {\n default: false,\n plugin: {\n // TODO: find a way to avoid assuming that the PrometheusDatasource plugin is installed\n kind: 'PrometheusDatasource',\n spec: {},\n },\n };\n\n const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } =\n useDiscardChangesConfirmationDialog();\n\n const handleCancel = () => {\n if (JSON.stringify(props.datasources) !== JSON.stringify(datasources)) {\n openDiscardChangesConfirmationDialog({\n onDiscardChanges: () => {\n closeDiscardChangesConfirmationDialog();\n props.onCancel();\n },\n onCancel: () => {\n closeDiscardChangesConfirmationDialog();\n },\n description:\n 'You have unapplied changes. Are you sure you want to discard these changes? Changes cannot be recovered.',\n });\n } else {\n props.onCancel();\n }\n };\n\n const removeDatasource = (name: string) => {\n setDatasources((draft) => {\n delete draft[name];\n });\n };\n\n const addDatasource = () => {\n setDatasourceFormAction('create');\n setDatasourceEdit({\n name: 'NewDatasource',\n spec: defaultSpec,\n });\n };\n\n const editDatasource = (name: string) => {\n setDatasourceFormAction('update');\n setDatasourceEdit({\n name: name,\n spec: datasources[name] ?? defaultSpec,\n });\n };\n\n return (\n <>\n {datasourceEdit ? (\n <DatasourceEditorForm\n initialDatasourceDefinition={datasourceEdit}\n initialAction={datasourceFormAction}\n isDraft={true}\n onSave={(name: string, spec: DatasourceSpec) => {\n setDatasources((draft) => {\n delete draft[datasourceEdit.name]; // to tackle the case where datasource name has been changed\n draft[name] = spec;\n setDatasourceEdit(null);\n });\n }}\n onClose={() => {\n setDatasourceEdit(null);\n }}\n />\n ) : (\n <>\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n padding: (theme) => theme.spacing(1, 2),\n borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n }}\n >\n <Typography variant=\"h2\">Edit Dashboard Datasources</Typography>\n <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n <Button\n disabled={props.datasources === datasources}\n variant=\"contained\"\n onClick={() => {\n props.onChange(datasources);\n }}\n >\n Apply\n </Button>\n <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n Cancel\n </Button>\n </Stack>\n </Box>\n <Box padding={2} sx={{ overflowY: 'scroll' }}>\n <Stack spacing={2}>\n <Stack spacing={2}>\n <TableContainer>\n <Table sx={{ minWidth: 650 }} aria-label=\"table of datasources\">\n <TableHead>\n <TableRow>\n <TableCell>Name</TableCell>\n <TableCell>Type</TableCell>\n <TableCell>Description</TableCell>\n <TableCell align=\"right\">Actions</TableCell>\n </TableRow>\n </TableHead>\n <TableBody>\n {Object.entries(datasources).map(([name, spec]) => {\n return (\n <TableRow key={name}>\n <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n {name}\n </TableCell>\n <TableCell>{spec.plugin.kind}</TableCell>\n <TableCell>{spec.display?.description ?? ''}</TableCell>\n <TableCell align=\"right\" sx={{ whiteSpace: 'nowrap' }}>\n <IconButton onClick={() => editDatasource(name)}>\n <PencilIcon />\n </IconButton>\n <IconButton onClick={() => removeDatasource(name)}>\n <TrashIcon />\n </IconButton>\n </TableCell>\n </TableRow>\n );\n })}\n </TableBody>\n </Table>\n </TableContainer>\n <Box display=\"flex\">\n <Button\n variant=\"contained\"\n startIcon={<AddIcon />}\n sx={{ marginLeft: 'auto' }}\n onClick={addDatasource}\n >\n Add Datasource\n </Button>\n </Box>\n </Stack>\n </Stack>\n </Box>\n </>\n )}\n </>\n );\n}\n"],"names":["Box","Button","IconButton","Stack","Table","TableBody","TableCell","TableContainer","TableHead","TableRow","Typography","AddIcon","PencilIcon","TrashIcon","DatasourceEditorForm","useState","useImmer","useDiscardChangesConfirmationDialog","DatasourceEditor","props","datasources","setDatasources","datasourceFormAction","setDatasourceFormAction","datasourceEdit","setDatasourceEdit","defaultSpec","default","plugin","kind","spec","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","handleCancel","JSON","stringify","onDiscardChanges","onCancel","description","removeDatasource","name","draft","addDatasource","editDatasource","initialDatasourceDefinition","initialAction","isDraft","onSave","onClose","sx","display","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","direction","marginLeft","disabled","onClick","onChange","color","overflowY","minWidth","aria-label","align","Object","entries","map","component","scope","fontWeight","whiteSpace","startIcon"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditDatasourcesButton.d.ts","sourceRoot":"","sources":["../../../src/components/Datasources/EditDatasourcesButton.tsx"],"names":[],"mappings":"AAuBA,wBAAgB,qBAAqB,
|
|
1
|
+
{"version":3,"file":"EditDatasourcesButton.d.ts","sourceRoot":"","sources":["../../../src/components/Datasources/EditDatasourcesButton.tsx"],"names":[],"mappings":"AAuBA,wBAAgB,qBAAqB,4CAwFpC"}
|
|
@@ -46,7 +46,13 @@ export function EditDatasourcesButton() {
|
|
|
46
46
|
obj[key] = datasources[key];
|
|
47
47
|
return obj;
|
|
48
48
|
}, {});
|
|
49
|
-
setDashboard({
|
|
49
|
+
setDashboard(dashboard.kind === 'Dashboard' ? {
|
|
50
|
+
...dashboard,
|
|
51
|
+
spec: {
|
|
52
|
+
...dashboard.spec,
|
|
53
|
+
datasources: datasources
|
|
54
|
+
}
|
|
55
|
+
} : {
|
|
50
56
|
...dashboard,
|
|
51
57
|
spec: {
|
|
52
58
|
...dashboard.spec,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Datasources/EditDatasourcesButton.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 } from 'react';\nimport { Button } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport { Drawer, InfoTooltip } from '@perses-dev/components';\nimport { DatasourceSpec } from '@perses-dev/core';\nimport { useDatasourceStore } from '@perses-dev/plugin-system';\nimport { TOOLTIP_TEXT, editButtonStyle } from '../../constants';\nimport { useDashboard } from '../../context';\nimport { DatasourceEditor } from './DatasourceEditor';\n\nexport function EditDatasourcesButton() {\n const [isDatasourceEditorOpen, setIsDatasourceEditorOpen] = useState(false);\n const { getLocalDatasources, setLocalDatasources, getSavedDatasources, setSavedDatasources } = useDatasourceStore();\n const localDatasources: Record<string, DatasourceSpec> = getLocalDatasources();\n const savedDatasources: Record<string, DatasourceSpec> = getSavedDatasources();\n const { dashboard, setDashboard } = useDashboard();\n\n const openDatasourceEditor = () => {\n setIsDatasourceEditorOpen(true);\n };\n\n const closeDatasourceEditor = () => {\n setIsDatasourceEditorOpen(false);\n };\n\n const handleChangeDatasources = (datasources: Record<string, DatasourceSpec>) => {\n // Calculates the new list of datasources that are allowed to be used.\n const newSavedDatasources: Record<string, DatasourceSpec> = Object.keys(datasources)\n .filter((key) => {\n // Datasources are allowed to be used if a) they are direct, or b) they are proxied, and their\n // proxy is the same as what we have saved.\n const isDirect = 'directUrl' in (datasources[key]?.plugin?.spec ?? {});\n const isSavedProxy =\n !isDirect &&\n !('directUrl' in (savedDatasources[key]?.plugin?.spec ?? {})) &&\n datasources[key]?.plugin?.spec?.proxy === savedDatasources[key]?.plugin?.spec?.proxy;\n\n return isDirect || isSavedProxy;\n })\n .reduce(\n (obj, key) => {\n obj[key] = datasources[key] as DatasourceSpec;\n\n return obj;\n },\n {} as Record<string, DatasourceSpec>\n );\n\n setDashboard({\n
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Datasources/EditDatasourcesButton.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 } from 'react';\nimport { Button } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport { Drawer, InfoTooltip } from '@perses-dev/components';\nimport { DashboardResource, DatasourceSpec, EphemeralDashboardResource } from '@perses-dev/core';\nimport { useDatasourceStore } from '@perses-dev/plugin-system';\nimport { TOOLTIP_TEXT, editButtonStyle } from '../../constants';\nimport { useDashboard } from '../../context';\nimport { DatasourceEditor } from './DatasourceEditor';\n\nexport function EditDatasourcesButton() {\n const [isDatasourceEditorOpen, setIsDatasourceEditorOpen] = useState(false);\n const { getLocalDatasources, setLocalDatasources, getSavedDatasources, setSavedDatasources } = useDatasourceStore();\n const localDatasources: Record<string, DatasourceSpec> = getLocalDatasources();\n const savedDatasources: Record<string, DatasourceSpec> = getSavedDatasources();\n const { dashboard, setDashboard } = useDashboard();\n\n const openDatasourceEditor = () => {\n setIsDatasourceEditorOpen(true);\n };\n\n const closeDatasourceEditor = () => {\n setIsDatasourceEditorOpen(false);\n };\n\n const handleChangeDatasources = (datasources: Record<string, DatasourceSpec>) => {\n // Calculates the new list of datasources that are allowed to be used.\n const newSavedDatasources: Record<string, DatasourceSpec> = Object.keys(datasources)\n .filter((key) => {\n // Datasources are allowed to be used if a) they are direct, or b) they are proxied, and their\n // proxy is the same as what we have saved.\n const isDirect = 'directUrl' in (datasources[key]?.plugin?.spec ?? {});\n const isSavedProxy =\n !isDirect &&\n !('directUrl' in (savedDatasources[key]?.plugin?.spec ?? {})) &&\n datasources[key]?.plugin?.spec?.proxy === savedDatasources[key]?.plugin?.spec?.proxy;\n\n return isDirect || isSavedProxy;\n })\n .reduce(\n (obj, key) => {\n obj[key] = datasources[key] as DatasourceSpec;\n\n return obj;\n },\n {} as Record<string, DatasourceSpec>\n );\n\n setDashboard(\n dashboard.kind === 'Dashboard'\n ? ({\n ...dashboard,\n spec: {\n ...dashboard.spec,\n datasources: datasources,\n },\n } as DashboardResource)\n : ({\n ...dashboard,\n spec: {\n ...dashboard.spec,\n datasources: datasources,\n },\n } as EphemeralDashboardResource)\n );\n setSavedDatasources(newSavedDatasources);\n setLocalDatasources(datasources);\n setIsDatasourceEditorOpen(false);\n };\n\n return (\n <>\n <InfoTooltip description={TOOLTIP_TEXT.editDatasources}>\n <Button\n startIcon={<PencilIcon />}\n onClick={openDatasourceEditor}\n aria-label={TOOLTIP_TEXT.editDatasources}\n variant=\"text\"\n color=\"primary\"\n sx={editButtonStyle}\n >\n Datasources\n </Button>\n </InfoTooltip>\n <Drawer\n isOpen={isDatasourceEditorOpen}\n onClose={closeDatasourceEditor}\n PaperProps={{ sx: { width: '50%' } }}\n data-testid=\"datasource-editor\"\n >\n <DatasourceEditor\n datasources={localDatasources}\n onCancel={closeDatasourceEditor}\n onChange={handleChangeDatasources}\n />\n </Drawer>\n </>\n );\n}\n"],"names":["useState","Button","PencilIcon","Drawer","InfoTooltip","useDatasourceStore","TOOLTIP_TEXT","editButtonStyle","useDashboard","DatasourceEditor","EditDatasourcesButton","isDatasourceEditorOpen","setIsDatasourceEditorOpen","getLocalDatasources","setLocalDatasources","getSavedDatasources","setSavedDatasources","localDatasources","savedDatasources","dashboard","setDashboard","openDatasourceEditor","closeDatasourceEditor","handleChangeDatasources","datasources","newSavedDatasources","Object","keys","filter","key","isDirect","plugin","spec","isSavedProxy","proxy","reduce","obj","kind","description","editDatasources","startIcon","onClick","aria-label","variant","color","sx","isOpen","onClose","PaperProps","width","data-testid","onCancel","onChange"],"mappings":"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"}
|
|
@@ -82,6 +82,13 @@ const EditJsonDialogForm = (props)=>{
|
|
|
82
82
|
severity: "warning",
|
|
83
83
|
children: "Metadata cannot be modified or saved."
|
|
84
84
|
}),
|
|
85
|
+
draftDashboard.kind === 'EphemeralDashboard' && /*#__PURE__*/ _jsx(Alert, {
|
|
86
|
+
sx: {
|
|
87
|
+
marginBottom: 1
|
|
88
|
+
},
|
|
89
|
+
severity: "warning",
|
|
90
|
+
children: "Time-to-live cannot be modified or saved from here. Go to the project view to modify it."
|
|
91
|
+
}),
|
|
85
92
|
/*#__PURE__*/ _jsx(FormControl, {
|
|
86
93
|
fullWidth: true,
|
|
87
94
|
children: /*#__PURE__*/ _jsx(JSONEditor, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/EditJsonDialog/EditJsonDialog.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 { FormEvent, useState } from 'react';\nimport { Alert, FormControl } from '@mui/material';\nimport { Dialog, JSONEditor } from '@perses-dev/components';\nimport { useDatasourceStore, useTimeRange } from '@perses-dev/plugin-system';\nimport { useEditJsonDialog } from '../../context/DashboardProvider';\nimport { useDashboard } from '../../context/useDashboard';\n\nexport interface EditJsonDialogProps {\n isReadonly: boolean;\n disableMetadataEdition?: boolean;\n}\n\nexport const EditJsonDialog = (props: EditJsonDialogProps) => {\n const { isReadonly, disableMetadataEdition } = props;\n const { editJsonDialog, closeEditJsonDialog } = useEditJsonDialog();\n\n return (\n <Dialog open={!!editJsonDialog?.isOpen} scroll=\"paper\" fullWidth maxWidth=\"lg\">\n <Dialog.Header onClose={() => closeEditJsonDialog()}>{!isReadonly && 'Edit '} Dashboard JSON</Dialog.Header>\n {editJsonDialog?.isOpen && (\n <EditJsonDialogForm isReadonly={isReadonly} disableMetadataEdition={disableMetadataEdition} />\n )}\n </Dialog>\n );\n};\n\nconst EditJsonDialogForm = (props: EditJsonDialogProps) => {\n const { isReadonly, disableMetadataEdition } = props;\n const { closeEditJsonDialog } = useEditJsonDialog();\n const { setTimeRange, setRefreshInterval } = useTimeRange();\n const { dashboard, setDashboard } = useDashboard();\n const { setLocalDatasources } = useDatasourceStore();\n const [draftDashboard, setDraftDashboard] = useState(dashboard);\n\n const handleApply = (e: FormEvent) => {\n e.preventDefault();\n setDashboard(draftDashboard);\n setTimeRange({ pastDuration: draftDashboard.spec.duration });\n setRefreshInterval(draftDashboard.spec.refreshInterval ?? '0s');\n setLocalDatasources(draftDashboard.spec.datasources ?? {});\n closeEditJsonDialog();\n };\n\n const completeDraftDashboard = (dashboard: string | undefined) => {\n try {\n const json = JSON.parse(dashboard ?? '{}');\n setDraftDashboard(json);\n } catch (e) {\n // do nothing\n }\n };\n\n return (\n <Dialog.Form onSubmit={handleApply}>\n <Dialog.Content sx={{ width: '100%' }}>\n {disableMetadataEdition && !isReadonly && (\n <Alert sx={{ marginBottom: (theme) => theme.spacing(1) }} severity=\"warning\">\n Metadata cannot be modified or saved.\n </Alert>\n )}\n <FormControl fullWidth>\n <JSONEditor\n minHeight=\"300px\"\n maxHeight=\"70vh\"\n value={draftDashboard}\n onChange={(value: string) => completeDraftDashboard(value)}\n readOnly={isReadonly}\n />\n </FormControl>\n </Dialog.Content>\n {!isReadonly && (\n <Dialog.Actions>\n <Dialog.PrimaryButton onClick={handleApply}>Apply</Dialog.PrimaryButton>\n </Dialog.Actions>\n )}\n </Dialog.Form>\n );\n};\n"],"names":["useState","Alert","FormControl","Dialog","JSONEditor","useDatasourceStore","useTimeRange","useEditJsonDialog","useDashboard","EditJsonDialog","props","isReadonly","disableMetadataEdition","editJsonDialog","closeEditJsonDialog","open","isOpen","scroll","fullWidth","maxWidth","Header","onClose","EditJsonDialogForm","setTimeRange","setRefreshInterval","dashboard","setDashboard","setLocalDatasources","draftDashboard","setDraftDashboard","handleApply","e","preventDefault","pastDuration","spec","duration","refreshInterval","datasources","completeDraftDashboard","json","JSON","parse","Form","onSubmit","Content","sx","width","marginBottom","theme","spacing","severity","minHeight","maxHeight","value","onChange","readOnly","Actions","PrimaryButton","onClick"],"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,SAAoBA,QAAQ,QAAQ,QAAQ;AAC5C,SAASC,KAAK,EAAEC,WAAW,QAAQ,gBAAgB;AACnD,SAASC,MAAM,EAAEC,UAAU,QAAQ,yBAAyB;AAC5D,SAASC,kBAAkB,EAAEC,YAAY,QAAQ,4BAA4B;AAC7E,SAASC,iBAAiB,QAAQ,kCAAkC;AACpE,SAASC,YAAY,QAAQ,6BAA6B;AAO1D,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,MAAM,EAAEC,UAAU,EAAEC,sBAAsB,EAAE,GAAGF;IAC/C,MAAM,EAAEG,cAAc,EAAEC,mBAAmB,EAAE,GAAGP;IAEhD,qBACE,MAACJ;QAAOY,MAAM,CAAC,EAACF,2BAAAA,qCAAAA,eAAgBG,MAAM;QAAEC,QAAO;QAAQC,SAAS;QAACC,UAAS;;0BACxE,MAAChB,OAAOiB,MAAM;gBAACC,SAAS,IAAMP;;oBAAwB,CAACH,cAAc;oBAAQ;;;YAC5EE,CAAAA,2BAAAA,qCAAAA,eAAgBG,MAAM,mBACrB,KAACM;gBAAmBX,YAAYA;gBAAYC,wBAAwBA;;;;AAI5E,EAAE;AAEF,MAAMU,qBAAqB,CAACZ;IAC1B,MAAM,EAAEC,UAAU,EAAEC,sBAAsB,EAAE,GAAGF;IAC/C,MAAM,EAAEI,mBAAmB,EAAE,GAAGP;IAChC,MAAM,EAAEgB,YAAY,EAAEC,kBAAkB,EAAE,GAAGlB;IAC7C,MAAM,EAAEmB,SAAS,EAAEC,YAAY,EAAE,GAAGlB;IACpC,MAAM,EAAEmB,mBAAmB,EAAE,GAAGtB;IAChC,MAAM,CAACuB,gBAAgBC,kBAAkB,GAAG7B,SAASyB;IAErD,MAAMK,cAAc,CAACC;QACnBA,EAAEC,cAAc;QAChBN,aAAaE;QACbL,aAAa;YAAEU,cAAcL,eAAeM,IAAI,CAACC,QAAQ;QAAC;YACvCP;QAAnBJ,mBAAmBI,CAAAA,uCAAAA,eAAeM,IAAI,CAACE,eAAe,cAAnCR,kDAAAA,uCAAuC;YACtCA;QAApBD,oBAAoBC,CAAAA,mCAAAA,eAAeM,IAAI,CAACG,WAAW,cAA/BT,8CAAAA,mCAAmC,CAAC;QACxDd;IACF;IAEA,MAAMwB,yBAAyB,CAACb;QAC9B,IAAI;YACF,MAAMc,OAAOC,KAAKC,KAAK,CAAChB,sBAAAA,uBAAAA,YAAa;YACrCI,kBAAkBU;QACpB,EAAE,OAAOR,GAAG;QACV,aAAa;QACf;IACF;IAEA,qBACE,MAAC5B,OAAOuC,IAAI;QAACC,UAAUb;;0BACrB,MAAC3B,OAAOyC,OAAO;gBAACC,IAAI;oBAAEC,OAAO;gBAAO;;oBACjClC,0BAA0B,CAACD,4BAC1B,KAACV;wBAAM4C,IAAI;4BAAEE,cAAc,CAACC,QAAUA,MAAMC,OAAO,CAAC;wBAAG;wBAAGC,UAAS;kCAAU;;
|
|
1
|
+
{"version":3,"sources":["../../../src/components/EditJsonDialog/EditJsonDialog.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 { FormEvent, useState } from 'react';\nimport { Alert, FormControl } from '@mui/material';\nimport { Dialog, JSONEditor } from '@perses-dev/components';\nimport { useDatasourceStore, useTimeRange } from '@perses-dev/plugin-system';\nimport { useEditJsonDialog } from '../../context/DashboardProvider';\nimport { useDashboard } from '../../context/useDashboard';\n\nexport interface EditJsonDialogProps {\n isReadonly: boolean;\n disableMetadataEdition?: boolean;\n}\n\nexport const EditJsonDialog = (props: EditJsonDialogProps) => {\n const { isReadonly, disableMetadataEdition } = props;\n const { editJsonDialog, closeEditJsonDialog } = useEditJsonDialog();\n\n return (\n <Dialog open={!!editJsonDialog?.isOpen} scroll=\"paper\" fullWidth maxWidth=\"lg\">\n <Dialog.Header onClose={() => closeEditJsonDialog()}>{!isReadonly && 'Edit '} Dashboard JSON</Dialog.Header>\n {editJsonDialog?.isOpen && (\n <EditJsonDialogForm isReadonly={isReadonly} disableMetadataEdition={disableMetadataEdition} />\n )}\n </Dialog>\n );\n};\n\nconst EditJsonDialogForm = (props: EditJsonDialogProps) => {\n const { isReadonly, disableMetadataEdition } = props;\n const { closeEditJsonDialog } = useEditJsonDialog();\n const { setTimeRange, setRefreshInterval } = useTimeRange();\n const { dashboard, setDashboard } = useDashboard();\n const { setLocalDatasources } = useDatasourceStore();\n const [draftDashboard, setDraftDashboard] = useState(dashboard);\n\n const handleApply = (e: FormEvent) => {\n e.preventDefault();\n setDashboard(draftDashboard);\n setTimeRange({ pastDuration: draftDashboard.spec.duration });\n setRefreshInterval(draftDashboard.spec.refreshInterval ?? '0s');\n setLocalDatasources(draftDashboard.spec.datasources ?? {});\n closeEditJsonDialog();\n };\n\n const completeDraftDashboard = (dashboard: string | undefined) => {\n try {\n const json = JSON.parse(dashboard ?? '{}');\n setDraftDashboard(json);\n } catch (e) {\n // do nothing\n }\n };\n\n return (\n <Dialog.Form onSubmit={handleApply}>\n <Dialog.Content sx={{ width: '100%' }}>\n {disableMetadataEdition && !isReadonly && (\n <Alert sx={{ marginBottom: (theme) => theme.spacing(1) }} severity=\"warning\">\n Metadata cannot be modified or saved.\n </Alert>\n )}\n {draftDashboard.kind === 'EphemeralDashboard' && (\n <Alert sx={{ marginBottom: 1 }} severity=\"warning\">\n Time-to-live cannot be modified or saved from here. Go to the project view to modify it.\n </Alert>\n )}\n <FormControl fullWidth>\n <JSONEditor\n minHeight=\"300px\"\n maxHeight=\"70vh\"\n value={draftDashboard}\n onChange={(value: string) => completeDraftDashboard(value)}\n readOnly={isReadonly}\n />\n </FormControl>\n </Dialog.Content>\n {!isReadonly && (\n <Dialog.Actions>\n <Dialog.PrimaryButton onClick={handleApply}>Apply</Dialog.PrimaryButton>\n </Dialog.Actions>\n )}\n </Dialog.Form>\n );\n};\n"],"names":["useState","Alert","FormControl","Dialog","JSONEditor","useDatasourceStore","useTimeRange","useEditJsonDialog","useDashboard","EditJsonDialog","props","isReadonly","disableMetadataEdition","editJsonDialog","closeEditJsonDialog","open","isOpen","scroll","fullWidth","maxWidth","Header","onClose","EditJsonDialogForm","setTimeRange","setRefreshInterval","dashboard","setDashboard","setLocalDatasources","draftDashboard","setDraftDashboard","handleApply","e","preventDefault","pastDuration","spec","duration","refreshInterval","datasources","completeDraftDashboard","json","JSON","parse","Form","onSubmit","Content","sx","width","marginBottom","theme","spacing","severity","kind","minHeight","maxHeight","value","onChange","readOnly","Actions","PrimaryButton","onClick"],"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,SAAoBA,QAAQ,QAAQ,QAAQ;AAC5C,SAASC,KAAK,EAAEC,WAAW,QAAQ,gBAAgB;AACnD,SAASC,MAAM,EAAEC,UAAU,QAAQ,yBAAyB;AAC5D,SAASC,kBAAkB,EAAEC,YAAY,QAAQ,4BAA4B;AAC7E,SAASC,iBAAiB,QAAQ,kCAAkC;AACpE,SAASC,YAAY,QAAQ,6BAA6B;AAO1D,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,MAAM,EAAEC,UAAU,EAAEC,sBAAsB,EAAE,GAAGF;IAC/C,MAAM,EAAEG,cAAc,EAAEC,mBAAmB,EAAE,GAAGP;IAEhD,qBACE,MAACJ;QAAOY,MAAM,CAAC,EAACF,2BAAAA,qCAAAA,eAAgBG,MAAM;QAAEC,QAAO;QAAQC,SAAS;QAACC,UAAS;;0BACxE,MAAChB,OAAOiB,MAAM;gBAACC,SAAS,IAAMP;;oBAAwB,CAACH,cAAc;oBAAQ;;;YAC5EE,CAAAA,2BAAAA,qCAAAA,eAAgBG,MAAM,mBACrB,KAACM;gBAAmBX,YAAYA;gBAAYC,wBAAwBA;;;;AAI5E,EAAE;AAEF,MAAMU,qBAAqB,CAACZ;IAC1B,MAAM,EAAEC,UAAU,EAAEC,sBAAsB,EAAE,GAAGF;IAC/C,MAAM,EAAEI,mBAAmB,EAAE,GAAGP;IAChC,MAAM,EAAEgB,YAAY,EAAEC,kBAAkB,EAAE,GAAGlB;IAC7C,MAAM,EAAEmB,SAAS,EAAEC,YAAY,EAAE,GAAGlB;IACpC,MAAM,EAAEmB,mBAAmB,EAAE,GAAGtB;IAChC,MAAM,CAACuB,gBAAgBC,kBAAkB,GAAG7B,SAASyB;IAErD,MAAMK,cAAc,CAACC;QACnBA,EAAEC,cAAc;QAChBN,aAAaE;QACbL,aAAa;YAAEU,cAAcL,eAAeM,IAAI,CAACC,QAAQ;QAAC;YACvCP;QAAnBJ,mBAAmBI,CAAAA,uCAAAA,eAAeM,IAAI,CAACE,eAAe,cAAnCR,kDAAAA,uCAAuC;YACtCA;QAApBD,oBAAoBC,CAAAA,mCAAAA,eAAeM,IAAI,CAACG,WAAW,cAA/BT,8CAAAA,mCAAmC,CAAC;QACxDd;IACF;IAEA,MAAMwB,yBAAyB,CAACb;QAC9B,IAAI;YACF,MAAMc,OAAOC,KAAKC,KAAK,CAAChB,sBAAAA,uBAAAA,YAAa;YACrCI,kBAAkBU;QACpB,EAAE,OAAOR,GAAG;QACV,aAAa;QACf;IACF;IAEA,qBACE,MAAC5B,OAAOuC,IAAI;QAACC,UAAUb;;0BACrB,MAAC3B,OAAOyC,OAAO;gBAACC,IAAI;oBAAEC,OAAO;gBAAO;;oBACjClC,0BAA0B,CAACD,4BAC1B,KAACV;wBAAM4C,IAAI;4BAAEE,cAAc,CAACC,QAAUA,MAAMC,OAAO,CAAC;wBAAG;wBAAGC,UAAS;kCAAU;;oBAI9EtB,eAAeuB,IAAI,KAAK,sCACvB,KAAClD;wBAAM4C,IAAI;4BAAEE,cAAc;wBAAE;wBAAGG,UAAS;kCAAU;;kCAIrD,KAAChD;wBAAYgB,SAAS;kCACpB,cAAA,KAACd;4BACCgD,WAAU;4BACVC,WAAU;4BACVC,OAAO1B;4BACP2B,UAAU,CAACD,QAAkBhB,uBAAuBgB;4BACpDE,UAAU7C;;;;;YAIf,CAACA,4BACA,KAACR,OAAOsD,OAAO;0BACb,cAAA,KAACtD,OAAOuD,aAAa;oBAACC,SAAS7B;8BAAa;;;;;AAKtD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimeRangeControls.d.ts","sourceRoot":"","sources":["../../../src/components/TimeRangeControls/TimeRangeControls.tsx"],"names":[],"mappings":"AAeA,OAAO,EAA2D,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAS7G,eAAO,MAAM,0BAA0B,EAAE,UAAU,EAUlD,CAAC;AAEF,eAAO,MAAM,gCAAgC,EAAE,UAAU,EAOxD,CAAC;AAIF,UAAU,sBAAsB;IAE9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;CAC5B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,qBAA4B,EAC5B,iBAAwB,EACxB,mBAA0B,EAC1B,WAAwC,GACzC,EAAE,sBAAsB,
|
|
1
|
+
{"version":3,"file":"TimeRangeControls.d.ts","sourceRoot":"","sources":["../../../src/components/TimeRangeControls/TimeRangeControls.tsx"],"names":[],"mappings":"AAeA,OAAO,EAA2D,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAS7G,eAAO,MAAM,0BAA0B,EAAE,UAAU,EAUlD,CAAC;AAEF,eAAO,MAAM,gCAAgC,EAAE,UAAU,EAOxD,CAAC;AAIF,UAAU,sBAAsB;IAE9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;CAC5B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,qBAA4B,EAC5B,iBAAwB,EACxB,mBAA0B,EAC1B,WAAwC,GACzC,EAAE,sBAAsB,2CAoExB"}
|
|
@@ -136,7 +136,13 @@ export function TimeRangeControls({ heightPx, showTimeRangeSelector = true, show
|
|
|
136
136
|
}
|
|
137
137
|
// set the new refresh interval both in the dashboard context & as query param
|
|
138
138
|
const handleRefreshIntervalChange = useCallback((duration)=>{
|
|
139
|
-
setDashboard({
|
|
139
|
+
setDashboard(dashboard.kind === 'Dashboard' ? {
|
|
140
|
+
...dashboard,
|
|
141
|
+
spec: {
|
|
142
|
+
...dashboard.spec,
|
|
143
|
+
refreshInterval: duration
|
|
144
|
+
}
|
|
145
|
+
} : {
|
|
140
146
|
...dashboard,
|
|
141
147
|
spec: {
|
|
142
148
|
...dashboard.spec,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/TimeRangeControls/TimeRangeControls.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 RefreshIcon from 'mdi-material-ui/Refresh';\nimport { Stack } from '@mui/material';\nimport { DateTimeRangePicker, RefreshIntervalPicker, InfoTooltip, TimeOption } from '@perses-dev/components';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport { isDurationString, DurationString } from '@perses-dev/core';\nimport { useCallback } from 'react';\nimport { TOOLTIP_TEXT } from '../../constants';\nimport { useDashboardDuration } from '../../context';\nimport { ToolbarIconButton } from '../ToolbarIconButton';\nimport { useDashboard } from '../../context/useDashboard';\n\nexport const DEFAULT_TIME_RANGE_OPTIONS: TimeOption[] = [\n { value: { pastDuration: '5m' }, display: 'Last 5 minutes' },\n { value: { pastDuration: '15m' }, display: 'Last 15 minutes' },\n { value: { pastDuration: '30m' }, display: 'Last 30 minutes' },\n { value: { pastDuration: '1h' }, display: 'Last 1 hour' },\n { value: { pastDuration: '6h' }, display: 'Last 6 hours' },\n { value: { pastDuration: '12h' }, display: 'Last 12 hours' },\n { value: { pastDuration: '24h' }, display: 'Last 1 day' },\n { value: { pastDuration: '7d' }, display: 'Last 7 days' },\n { value: { pastDuration: '14d' }, display: 'Last 14 days' },\n];\n\nexport const DEFAULT_REFRESH_INTERVAL_OPTIONS: TimeOption[] = [\n { value: { pastDuration: '0s' }, display: 'Off' },\n { value: { pastDuration: '5s' }, display: '5s' },\n { value: { pastDuration: '10s' }, display: '10s' },\n { value: { pastDuration: '15s' }, display: '15s' },\n { value: { pastDuration: '30s' }, display: '30s' },\n { value: { pastDuration: '60s' }, display: '1m' },\n];\n\nconst DEFAULT_HEIGHT = '34px';\n\ninterface TimeRangeControlsProps {\n // The controls look best at heights >= 28 pixels\n heightPx?: number;\n showTimeRangeSelector?: boolean;\n showRefreshButton?: boolean;\n showRefreshInterval?: boolean;\n timePresets?: TimeOption[];\n}\n\nexport function TimeRangeControls({\n heightPx,\n showTimeRangeSelector = true,\n showRefreshButton = true,\n showRefreshInterval = true,\n timePresets = DEFAULT_TIME_RANGE_OPTIONS,\n}: TimeRangeControlsProps) {\n const { timeRange, setTimeRange, refresh, refreshInterval, setRefreshInterval } = useTimeRange();\n // TODO: Remove this since it couples to the dashboard context\n const dashboardDuration = useDashboardDuration();\n const { dashboard, setDashboard } = useDashboard();\n\n // Convert height to a string, then use the string for styling\n const height = heightPx === undefined ? DEFAULT_HEIGHT : `${heightPx}px`;\n\n // add time shortcut if one does not match duration from dashboard JSON\n if (!timePresets.some((option) => option.value.pastDuration === dashboardDuration)) {\n if (isDurationString(dashboardDuration)) {\n timePresets.push({\n value: { pastDuration: dashboardDuration },\n display: `Last ${dashboardDuration}`,\n });\n }\n }\n\n // set the new refresh interval both in the dashboard context & as query param\n const handleRefreshIntervalChange = useCallback(\n (duration: DurationString) => {\n setDashboard({\n
|
|
1
|
+
{"version":3,"sources":["../../../src/components/TimeRangeControls/TimeRangeControls.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 RefreshIcon from 'mdi-material-ui/Refresh';\nimport { Stack } from '@mui/material';\nimport { DateTimeRangePicker, RefreshIntervalPicker, InfoTooltip, TimeOption } from '@perses-dev/components';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport { isDurationString, DurationString, DashboardResource, EphemeralDashboardResource } from '@perses-dev/core';\nimport { useCallback } from 'react';\nimport { TOOLTIP_TEXT } from '../../constants';\nimport { useDashboardDuration } from '../../context';\nimport { ToolbarIconButton } from '../ToolbarIconButton';\nimport { useDashboard } from '../../context/useDashboard';\n\nexport const DEFAULT_TIME_RANGE_OPTIONS: TimeOption[] = [\n { value: { pastDuration: '5m' }, display: 'Last 5 minutes' },\n { value: { pastDuration: '15m' }, display: 'Last 15 minutes' },\n { value: { pastDuration: '30m' }, display: 'Last 30 minutes' },\n { value: { pastDuration: '1h' }, display: 'Last 1 hour' },\n { value: { pastDuration: '6h' }, display: 'Last 6 hours' },\n { value: { pastDuration: '12h' }, display: 'Last 12 hours' },\n { value: { pastDuration: '24h' }, display: 'Last 1 day' },\n { value: { pastDuration: '7d' }, display: 'Last 7 days' },\n { value: { pastDuration: '14d' }, display: 'Last 14 days' },\n];\n\nexport const DEFAULT_REFRESH_INTERVAL_OPTIONS: TimeOption[] = [\n { value: { pastDuration: '0s' }, display: 'Off' },\n { value: { pastDuration: '5s' }, display: '5s' },\n { value: { pastDuration: '10s' }, display: '10s' },\n { value: { pastDuration: '15s' }, display: '15s' },\n { value: { pastDuration: '30s' }, display: '30s' },\n { value: { pastDuration: '60s' }, display: '1m' },\n];\n\nconst DEFAULT_HEIGHT = '34px';\n\ninterface TimeRangeControlsProps {\n // The controls look best at heights >= 28 pixels\n heightPx?: number;\n showTimeRangeSelector?: boolean;\n showRefreshButton?: boolean;\n showRefreshInterval?: boolean;\n timePresets?: TimeOption[];\n}\n\nexport function TimeRangeControls({\n heightPx,\n showTimeRangeSelector = true,\n showRefreshButton = true,\n showRefreshInterval = true,\n timePresets = DEFAULT_TIME_RANGE_OPTIONS,\n}: TimeRangeControlsProps) {\n const { timeRange, setTimeRange, refresh, refreshInterval, setRefreshInterval } = useTimeRange();\n // TODO: Remove this since it couples to the dashboard context\n const dashboardDuration = useDashboardDuration();\n const { dashboard, setDashboard } = useDashboard();\n\n // Convert height to a string, then use the string for styling\n const height = heightPx === undefined ? DEFAULT_HEIGHT : `${heightPx}px`;\n\n // add time shortcut if one does not match duration from dashboard JSON\n if (!timePresets.some((option) => option.value.pastDuration === dashboardDuration)) {\n if (isDurationString(dashboardDuration)) {\n timePresets.push({\n value: { pastDuration: dashboardDuration },\n display: `Last ${dashboardDuration}`,\n });\n }\n }\n\n // set the new refresh interval both in the dashboard context & as query param\n const handleRefreshIntervalChange = useCallback(\n (duration: DurationString) => {\n setDashboard(\n dashboard.kind === 'Dashboard'\n ? ({\n ...dashboard,\n spec: {\n ...dashboard.spec,\n refreshInterval: duration,\n },\n } as DashboardResource)\n : ({\n ...dashboard,\n spec: {\n ...dashboard.spec,\n refreshInterval: duration,\n },\n } as EphemeralDashboardResource)\n );\n setRefreshInterval(duration);\n },\n [dashboard, setDashboard, setRefreshInterval]\n );\n\n return (\n <Stack direction=\"row\" spacing={1}>\n {showTimeRangeSelector && (\n <DateTimeRangePicker timeOptions={timePresets} value={timeRange} onChange={setTimeRange} height={height} />\n )}\n {showRefreshButton && (\n <InfoTooltip description={TOOLTIP_TEXT.refreshDashboard}>\n <ToolbarIconButton aria-label={TOOLTIP_TEXT.refreshDashboard} onClick={refresh} sx={{ height }}>\n <RefreshIcon />\n </ToolbarIconButton>\n </InfoTooltip>\n )}\n {showRefreshInterval && (\n <InfoTooltip description={TOOLTIP_TEXT.refreshDashboardInterval}>\n <RefreshIntervalPicker\n timeOptions={DEFAULT_REFRESH_INTERVAL_OPTIONS}\n value={refreshInterval}\n onChange={handleRefreshIntervalChange}\n height={height}\n />\n </InfoTooltip>\n )}\n </Stack>\n );\n}\n"],"names":["RefreshIcon","Stack","DateTimeRangePicker","RefreshIntervalPicker","InfoTooltip","useTimeRange","isDurationString","useCallback","TOOLTIP_TEXT","useDashboardDuration","ToolbarIconButton","useDashboard","DEFAULT_TIME_RANGE_OPTIONS","value","pastDuration","display","DEFAULT_REFRESH_INTERVAL_OPTIONS","DEFAULT_HEIGHT","TimeRangeControls","heightPx","showTimeRangeSelector","showRefreshButton","showRefreshInterval","timePresets","timeRange","setTimeRange","refresh","refreshInterval","setRefreshInterval","dashboardDuration","dashboard","setDashboard","height","undefined","some","option","push","handleRefreshIntervalChange","duration","kind","spec","direction","spacing","timeOptions","onChange","description","refreshDashboard","aria-label","onClick","sx","refreshDashboardInterval"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { StoreApi } from 'zustand';
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
|
-
import { DashboardResource, Display, ProjectMetadata, DurationString, DatasourceSpec } from '@perses-dev/core';
|
|
3
|
+
import { DashboardResource, Display, ProjectMetadata, DurationString, DatasourceSpec, EphemeralDashboardResource } from '@perses-dev/core';
|
|
4
4
|
import { PanelGroupEditorSlice } from './panel-group-editor-slice';
|
|
5
5
|
import { PanelGroupSlice } from './panel-group-slice';
|
|
6
6
|
import { PanelEditorSlice } from './panel-editor-slice';
|
|
@@ -14,15 +14,17 @@ import { EditJsonDialogSlice } from './edit-json-dialog-slice';
|
|
|
14
14
|
export interface DashboardStoreState extends PanelGroupSlice, PanelSlice, PanelGroupEditorSlice, DeletePanelGroupSlice, PanelEditorSlice, DeletePanelSlice, DiscardChangesConfirmationDialogSlice, DuplicatePanelSlice, EditJsonDialogSlice, SaveChangesConfirmationDialogSlice {
|
|
15
15
|
isEditMode: boolean;
|
|
16
16
|
setEditMode: (isEditMode: boolean) => void;
|
|
17
|
-
setDashboard: (dashboard: DashboardResource) => void;
|
|
17
|
+
setDashboard: (dashboard: DashboardResource | EphemeralDashboardResource) => void;
|
|
18
|
+
kind: DashboardResource['kind'] | EphemeralDashboardResource['kind'];
|
|
18
19
|
metadata: ProjectMetadata;
|
|
19
20
|
duration: DurationString;
|
|
20
21
|
refreshInterval: DurationString;
|
|
21
22
|
display?: Display;
|
|
22
23
|
datasources?: Record<string, DatasourceSpec>;
|
|
24
|
+
ttl?: DurationString;
|
|
23
25
|
}
|
|
24
26
|
export interface DashboardStoreProps {
|
|
25
|
-
dashboardResource: DashboardResource;
|
|
27
|
+
dashboardResource: DashboardResource | EphemeralDashboardResource;
|
|
26
28
|
isEditMode?: boolean;
|
|
27
29
|
}
|
|
28
30
|
export interface DashboardProviderProps {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DashboardProvider.d.ts","sourceRoot":"","sources":["../../../src/context/DashboardProvider/DashboardProvider.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAIxC,OAAO,EAAiB,SAAS,EAAgD,MAAM,OAAO,CAAC;AAC/F,OAAO,EACL,iBAAiB,EACjB,OAAO,EACP,eAAe,EACf,cAAc,EAEd,cAAc,
|
|
1
|
+
{"version":3,"file":"DashboardProvider.d.ts","sourceRoot":"","sources":["../../../src/context/DashboardProvider/DashboardProvider.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAIxC,OAAO,EAAiB,SAAS,EAAgD,MAAM,OAAO,CAAC;AAC/F,OAAO,EACL,iBAAiB,EACjB,OAAO,EACP,eAAe,EACf,cAAc,EAEd,cAAc,EACd,0BAA0B,EAC3B,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAA+B,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAChG,OAAO,EAAsD,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC1G,OAAO,EAA0B,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAChF,OAAO,EAAoB,UAAU,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAA+B,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAChG,OAAO,EAA0B,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAChF,OAAO,EAAmC,qCAAqC,EAAE,MAAM,gCAAgC,CAAC;AACxH,OAAO,EAAgC,kCAAkC,EAAE,MAAM,6BAA6B,CAAC;AAC/G,OAAO,EAA6B,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AACzF,OAAO,EAA6B,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAG1F,MAAM,WAAW,mBACf,SAAQ,eAAe,EACrB,UAAU,EACV,qBAAqB,EACrB,qBAAqB,EACrB,gBAAgB,EAChB,gBAAgB,EAChB,qCAAqC,EACrC,mBAAmB,EACnB,mBAAmB,EACnB,kCAAkC;IACpC,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,YAAY,EAAE,CAAC,SAAS,EAAE,iBAAiB,GAAG,0BAA0B,KAAK,IAAI,CAAC;IAClF,IAAI,EAAE,iBAAiB,CAAC,MAAM,CAAC,GAAG,0BAA0B,CAAC,MAAM,CAAC,CAAC;IACrE,QAAQ,EAAE,eAAe,CAAC;IAC1B,QAAQ,EAAE,cAAc,CAAC;IACzB,eAAe,EAAE,cAAc,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAC7C,GAAG,CAAC,EAAE,cAAc,CAAC;CACtB;AAED,MAAM,WAAW,mBAAmB;IAClC,iBAAiB,EAAE,iBAAiB,GAAG,0BAA0B,CAAC;IAClE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,sBAAsB;IACrC,YAAY,EAAE,mBAAmB,CAAC;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,oEAAsE,CAAC;AAEpG,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,CAAC,KAM/E;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,2CA0B9D"}
|
|
@@ -68,7 +68,8 @@ export function DashboardProvider(props) {
|
|
|
68
68
|
}
|
|
69
69
|
function initStore(props) {
|
|
70
70
|
const { initialState: { dashboardResource, isEditMode } } = props;
|
|
71
|
-
const { spec: { display, duration, refreshInterval = DEFAULT_REFRESH_INTERVAL, datasources }
|
|
71
|
+
const { kind, metadata, spec: { display, duration, refreshInterval = DEFAULT_REFRESH_INTERVAL, datasources } } = dashboardResource;
|
|
72
|
+
const ttl = 'ttl' in dashboardResource.spec ? dashboardResource.spec.ttl : undefined;
|
|
72
73
|
let { spec: { layouts, panels } } = dashboardResource;
|
|
73
74
|
// Set fallbacks in case the frontend is used with a non-Perses backend
|
|
74
75
|
layouts = layouts !== null && layouts !== void 0 ? layouts : [];
|
|
@@ -86,17 +87,20 @@ function initStore(props) {
|
|
|
86
87
|
/* General */ ...createDiscardChangesDialogSlice(...args),
|
|
87
88
|
...createEditJsonDialogSlice(...args),
|
|
88
89
|
...createSaveChangesDialogSlice(...args),
|
|
90
|
+
kind,
|
|
89
91
|
metadata,
|
|
90
92
|
display,
|
|
91
93
|
duration,
|
|
92
94
|
refreshInterval,
|
|
93
95
|
datasources,
|
|
96
|
+
ttl,
|
|
94
97
|
isEditMode: !!isEditMode,
|
|
95
98
|
setEditMode: (isEditMode)=>set({
|
|
96
99
|
isEditMode
|
|
97
100
|
}),
|
|
98
|
-
setDashboard: ({ metadata, spec: { display, panels = {}, layouts = [], duration, refreshInterval, datasources = {} } })=>{
|
|
101
|
+
setDashboard: ({ kind, metadata, spec: { display, panels = {}, layouts = [], duration, refreshInterval, datasources = {} } })=>{
|
|
99
102
|
set((state)=>{
|
|
103
|
+
state.kind = kind;
|
|
100
104
|
state.metadata = metadata;
|
|
101
105
|
state.display = display;
|
|
102
106
|
state.panels = panels;
|
|
@@ -106,6 +110,7 @@ function initStore(props) {
|
|
|
106
110
|
state.duration = duration;
|
|
107
111
|
state.refreshInterval = refreshInterval !== null && refreshInterval !== void 0 ? refreshInterval : DEFAULT_REFRESH_INTERVAL;
|
|
108
112
|
state.datasources = datasources;
|
|
113
|
+
// TODO: add ttl here to e.g allow edition from JSON view, but probably requires quite some refactoring
|
|
109
114
|
});
|
|
110
115
|
}
|
|
111
116
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/context/DashboardProvider/DashboardProvider.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 { createStore, useStore } from 'zustand';\nimport type { StoreApi } from 'zustand';\nimport { devtools } from 'zustand/middleware';\nimport { immer } from 'zustand/middleware/immer';\nimport { shallow } from 'zustand/shallow';\nimport { createContext, ReactNode, useCallback, useContext, useEffect, useState } from 'react';\nimport {\n DashboardResource,\n Display,\n ProjectMetadata,\n DurationString,\n DEFAULT_REFRESH_INTERVAL,\n DatasourceSpec,\n} from '@perses-dev/core';\nimport { usePlugin, usePluginRegistry } from '@perses-dev/plugin-system';\nimport { createPanelGroupEditorSlice, PanelGroupEditorSlice } from './panel-group-editor-slice';\nimport { convertLayoutsToPanelGroups, createPanelGroupSlice, PanelGroupSlice } from './panel-group-slice';\nimport { createPanelEditorSlice, PanelEditorSlice } from './panel-editor-slice';\nimport { createPanelSlice, PanelSlice } from './panel-slice';\nimport { createDeletePanelGroupSlice, DeletePanelGroupSlice } from './delete-panel-group-slice';\nimport { createDeletePanelSlice, DeletePanelSlice } from './delete-panel-slice';\nimport { createDiscardChangesDialogSlice, DiscardChangesConfirmationDialogSlice } from './discard-changes-dialog-slice';\nimport { createSaveChangesDialogSlice, SaveChangesConfirmationDialogSlice } from './save-changes-dialog-slice';\nimport { createDuplicatePanelSlice, DuplicatePanelSlice } from './duplicate-panel-slice';\nimport { createEditJsonDialogSlice, EditJsonDialogSlice } from './edit-json-dialog-slice';\nimport { createPanelDefinition } from './common';\n\nexport interface DashboardStoreState\n extends PanelGroupSlice,\n PanelSlice,\n PanelGroupEditorSlice,\n DeletePanelGroupSlice,\n PanelEditorSlice,\n DeletePanelSlice,\n DiscardChangesConfirmationDialogSlice,\n DuplicatePanelSlice,\n EditJsonDialogSlice,\n SaveChangesConfirmationDialogSlice {\n isEditMode: boolean;\n setEditMode: (isEditMode: boolean) => void;\n setDashboard: (dashboard: DashboardResource) => void;\n metadata: ProjectMetadata;\n duration: DurationString;\n refreshInterval: DurationString;\n display?: Display;\n datasources?: Record<string, DatasourceSpec>;\n}\n\nexport interface DashboardStoreProps {\n dashboardResource: DashboardResource;\n isEditMode?: boolean;\n}\n\nexport interface DashboardProviderProps {\n initialState: DashboardStoreProps;\n children?: ReactNode;\n}\n\nexport const DashboardContext = createContext<StoreApi<DashboardStoreState> | undefined>(undefined);\n\nexport function useDashboardStore<T>(selector: (state: DashboardStoreState) => T) {\n const store = useContext(DashboardContext);\n if (store === undefined) {\n throw new Error('No DashboardContext found. Did you forget a Provider?');\n }\n return useStore(store, selector, shallow);\n}\n\nexport function DashboardProvider(props: DashboardProviderProps) {\n const createDashboardStore = useCallback(initStore, [props]);\n\n // load plugin to retrieve initial spec if default panel kind is defined\n const { defaultPluginKinds } = usePluginRegistry();\n const defaultPanelKind = defaultPluginKinds?.['Panel'] ?? '';\n const { data: plugin } = usePlugin('Panel', defaultPanelKind);\n\n const [store] = useState(createDashboardStore(props)); // prevent calling createDashboardStore every time it rerenders\n\n useEffect(() => {\n if (plugin === undefined) return;\n const defaultPanelSpec = plugin.createInitialOptions();\n // set default panel kind, spec, and queries for add panel editor\n store.setState({\n initialValues: {\n panelDefinition: createPanelDefinition(defaultPanelKind, defaultPanelSpec),\n },\n });\n }, [plugin, store, defaultPanelKind]);\n\n return (\n <DashboardContext.Provider value={store as StoreApi<DashboardStoreState>}>\n {props.children}\n </DashboardContext.Provider>\n );\n}\n\nfunction initStore(props: DashboardProviderProps) {\n const {\n initialState: { dashboardResource, isEditMode },\n } = props;\n\n const {\n spec: { display, duration, refreshInterval = DEFAULT_REFRESH_INTERVAL, datasources },\n metadata,\n } = dashboardResource;\n\n let {\n spec: { layouts, panels },\n } = dashboardResource;\n\n // Set fallbacks in case the frontend is used with a non-Perses backend\n layouts = layouts ?? [];\n panels = panels ?? {};\n\n const store = createStore<DashboardStoreState>()(\n immer(\n devtools((...args) => {\n const [set] = args;\n return {\n /* Groups */\n ...createPanelGroupSlice(layouts)(...args),\n ...createPanelGroupEditorSlice(...args),\n ...createDeletePanelGroupSlice(...args),\n /* Panels */\n ...createPanelSlice(panels)(...args),\n ...createPanelEditorSlice()(...args),\n ...createDeletePanelSlice()(...args),\n ...createDuplicatePanelSlice()(...args),\n /* General */\n ...createDiscardChangesDialogSlice(...args),\n ...createEditJsonDialogSlice(...args),\n ...createSaveChangesDialogSlice(...args),\n metadata,\n display,\n duration,\n refreshInterval,\n datasources,\n isEditMode: !!isEditMode,\n setEditMode: (isEditMode: boolean) => set({ isEditMode }),\n setDashboard: ({\n metadata,\n spec: { display, panels = {}, layouts = [], duration, refreshInterval, datasources = {} },\n }) => {\n set((state) => {\n state.metadata = metadata;\n state.display = display;\n state.panels = panels;\n const { panelGroups, panelGroupOrder } = convertLayoutsToPanelGroups(layouts);\n state.panelGroups = panelGroups;\n state.panelGroupOrder = panelGroupOrder;\n state.duration = duration;\n state.refreshInterval = refreshInterval ?? DEFAULT_REFRESH_INTERVAL;\n state.datasources = datasources;\n });\n },\n };\n })\n )\n );\n\n return store;\n}\n"],"names":["createStore","useStore","devtools","immer","shallow","createContext","useCallback","useContext","useEffect","useState","DEFAULT_REFRESH_INTERVAL","usePlugin","usePluginRegistry","createPanelGroupEditorSlice","convertLayoutsToPanelGroups","createPanelGroupSlice","createPanelEditorSlice","createPanelSlice","createDeletePanelGroupSlice","createDeletePanelSlice","createDiscardChangesDialogSlice","createSaveChangesDialogSlice","createDuplicatePanelSlice","createEditJsonDialogSlice","createPanelDefinition","DashboardContext","undefined","useDashboardStore","selector","store","Error","DashboardProvider","props","createDashboardStore","initStore","defaultPluginKinds","defaultPanelKind","data","plugin","defaultPanelSpec","createInitialOptions","setState","initialValues","panelDefinition","Provider","value","children","initialState","dashboardResource","isEditMode","spec","display","duration","refreshInterval","datasources","metadata","layouts","panels","args","set","setEditMode","setDashboard","state","panelGroups","panelGroupOrder"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../src/context/DashboardProvider/DashboardProvider.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 { createStore, useStore } from 'zustand';\nimport type { StoreApi } from 'zustand';\nimport { devtools } from 'zustand/middleware';\nimport { immer } from 'zustand/middleware/immer';\nimport { shallow } from 'zustand/shallow';\nimport { createContext, ReactNode, useCallback, useContext, useEffect, useState } from 'react';\nimport {\n DashboardResource,\n Display,\n ProjectMetadata,\n DurationString,\n DEFAULT_REFRESH_INTERVAL,\n DatasourceSpec,\n EphemeralDashboardResource,\n} from '@perses-dev/core';\nimport { usePlugin, usePluginRegistry } from '@perses-dev/plugin-system';\nimport { createPanelGroupEditorSlice, PanelGroupEditorSlice } from './panel-group-editor-slice';\nimport { convertLayoutsToPanelGroups, createPanelGroupSlice, PanelGroupSlice } from './panel-group-slice';\nimport { createPanelEditorSlice, PanelEditorSlice } from './panel-editor-slice';\nimport { createPanelSlice, PanelSlice } from './panel-slice';\nimport { createDeletePanelGroupSlice, DeletePanelGroupSlice } from './delete-panel-group-slice';\nimport { createDeletePanelSlice, DeletePanelSlice } from './delete-panel-slice';\nimport { createDiscardChangesDialogSlice, DiscardChangesConfirmationDialogSlice } from './discard-changes-dialog-slice';\nimport { createSaveChangesDialogSlice, SaveChangesConfirmationDialogSlice } from './save-changes-dialog-slice';\nimport { createDuplicatePanelSlice, DuplicatePanelSlice } from './duplicate-panel-slice';\nimport { createEditJsonDialogSlice, EditJsonDialogSlice } from './edit-json-dialog-slice';\nimport { createPanelDefinition } from './common';\n\nexport interface DashboardStoreState\n extends PanelGroupSlice,\n PanelSlice,\n PanelGroupEditorSlice,\n DeletePanelGroupSlice,\n PanelEditorSlice,\n DeletePanelSlice,\n DiscardChangesConfirmationDialogSlice,\n DuplicatePanelSlice,\n EditJsonDialogSlice,\n SaveChangesConfirmationDialogSlice {\n isEditMode: boolean;\n setEditMode: (isEditMode: boolean) => void;\n setDashboard: (dashboard: DashboardResource | EphemeralDashboardResource) => void;\n kind: DashboardResource['kind'] | EphemeralDashboardResource['kind'];\n metadata: ProjectMetadata;\n duration: DurationString;\n refreshInterval: DurationString;\n display?: Display;\n datasources?: Record<string, DatasourceSpec>;\n ttl?: DurationString;\n}\n\nexport interface DashboardStoreProps {\n dashboardResource: DashboardResource | EphemeralDashboardResource;\n isEditMode?: boolean;\n}\n\nexport interface DashboardProviderProps {\n initialState: DashboardStoreProps;\n children?: ReactNode;\n}\n\nexport const DashboardContext = createContext<StoreApi<DashboardStoreState> | undefined>(undefined);\n\nexport function useDashboardStore<T>(selector: (state: DashboardStoreState) => T) {\n const store = useContext(DashboardContext);\n if (store === undefined) {\n throw new Error('No DashboardContext found. Did you forget a Provider?');\n }\n return useStore(store, selector, shallow);\n}\n\nexport function DashboardProvider(props: DashboardProviderProps) {\n const createDashboardStore = useCallback(initStore, [props]);\n\n // load plugin to retrieve initial spec if default panel kind is defined\n const { defaultPluginKinds } = usePluginRegistry();\n const defaultPanelKind = defaultPluginKinds?.['Panel'] ?? '';\n const { data: plugin } = usePlugin('Panel', defaultPanelKind);\n\n const [store] = useState(createDashboardStore(props)); // prevent calling createDashboardStore every time it rerenders\n\n useEffect(() => {\n if (plugin === undefined) return;\n const defaultPanelSpec = plugin.createInitialOptions();\n // set default panel kind, spec, and queries for add panel editor\n store.setState({\n initialValues: {\n panelDefinition: createPanelDefinition(defaultPanelKind, defaultPanelSpec),\n },\n });\n }, [plugin, store, defaultPanelKind]);\n\n return (\n <DashboardContext.Provider value={store as StoreApi<DashboardStoreState>}>\n {props.children}\n </DashboardContext.Provider>\n );\n}\n\nfunction initStore(props: DashboardProviderProps) {\n const {\n initialState: { dashboardResource, isEditMode },\n } = props;\n\n const {\n kind,\n metadata,\n spec: { display, duration, refreshInterval = DEFAULT_REFRESH_INTERVAL, datasources },\n } = dashboardResource;\n\n const ttl = 'ttl' in dashboardResource.spec ? dashboardResource.spec.ttl : undefined;\n\n let {\n spec: { layouts, panels },\n } = dashboardResource;\n\n // Set fallbacks in case the frontend is used with a non-Perses backend\n layouts = layouts ?? [];\n panels = panels ?? {};\n\n const store = createStore<DashboardStoreState>()(\n immer(\n devtools((...args) => {\n const [set] = args;\n return {\n /* Groups */\n ...createPanelGroupSlice(layouts)(...args),\n ...createPanelGroupEditorSlice(...args),\n ...createDeletePanelGroupSlice(...args),\n /* Panels */\n ...createPanelSlice(panels)(...args),\n ...createPanelEditorSlice()(...args),\n ...createDeletePanelSlice()(...args),\n ...createDuplicatePanelSlice()(...args),\n /* General */\n ...createDiscardChangesDialogSlice(...args),\n ...createEditJsonDialogSlice(...args),\n ...createSaveChangesDialogSlice(...args),\n kind,\n metadata,\n display,\n duration,\n refreshInterval,\n datasources,\n ttl,\n isEditMode: !!isEditMode,\n setEditMode: (isEditMode: boolean) => set({ isEditMode }),\n setDashboard: ({\n kind,\n metadata,\n spec: { display, panels = {}, layouts = [], duration, refreshInterval, datasources = {} },\n }) => {\n set((state) => {\n state.kind = kind;\n state.metadata = metadata;\n state.display = display;\n state.panels = panels;\n const { panelGroups, panelGroupOrder } = convertLayoutsToPanelGroups(layouts);\n state.panelGroups = panelGroups;\n state.panelGroupOrder = panelGroupOrder;\n state.duration = duration;\n state.refreshInterval = refreshInterval ?? DEFAULT_REFRESH_INTERVAL;\n state.datasources = datasources;\n // TODO: add ttl here to e.g allow edition from JSON view, but probably requires quite some refactoring\n });\n },\n };\n })\n )\n );\n\n return store;\n}\n"],"names":["createStore","useStore","devtools","immer","shallow","createContext","useCallback","useContext","useEffect","useState","DEFAULT_REFRESH_INTERVAL","usePlugin","usePluginRegistry","createPanelGroupEditorSlice","convertLayoutsToPanelGroups","createPanelGroupSlice","createPanelEditorSlice","createPanelSlice","createDeletePanelGroupSlice","createDeletePanelSlice","createDiscardChangesDialogSlice","createSaveChangesDialogSlice","createDuplicatePanelSlice","createEditJsonDialogSlice","createPanelDefinition","DashboardContext","undefined","useDashboardStore","selector","store","Error","DashboardProvider","props","createDashboardStore","initStore","defaultPluginKinds","defaultPanelKind","data","plugin","defaultPanelSpec","createInitialOptions","setState","initialValues","panelDefinition","Provider","value","children","initialState","dashboardResource","isEditMode","kind","metadata","spec","display","duration","refreshInterval","datasources","ttl","layouts","panels","args","set","setEditMode","setDashboard","state","panelGroups","panelGroupOrder"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { DashboardResource, PanelDefinition, UnknownSpec } from '@perses-dev/core';
|
|
2
|
-
export type OnSaveDashboard = (dashboard: DashboardResource) => Promise<unknown>;
|
|
1
|
+
import { DashboardResource, EphemeralDashboardResource, PanelDefinition, UnknownSpec } from '@perses-dev/core';
|
|
2
|
+
export type OnSaveDashboard = (dashboard: DashboardResource | EphemeralDashboardResource) => Promise<unknown>;
|
|
3
3
|
/**
|
|
4
4
|
* The middleware applied to the DashboardStore (can be used as generic argument in StateCreator).
|
|
5
5
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../src/context/DashboardProvider/common.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../src/context/DashboardProvider/common.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/G,MAAM,MAAM,eAAe,GAAG,CAAC,SAAS,EAAE,iBAAiB,GAAG,0BAA0B,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;AAE9G;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,CAAC,CAAC,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC,CAAC;AAEjF,OAAO,CAAC,MAAM,CAAC;IAEb,IAAI,gBAAgB,EAAE,MAAM,CAAC;CAC9B;AAED;;GAEG;AACH,wBAAgB,UAAU,WAKzB;AAGD,wBAAgB,qBAAqB,CAAC,gBAAgB,CAAC,EAAE,MAAM,EAAE,gBAAgB,CAAC,EAAE,WAAW,GAAG,eAAe,CAehH"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/context/DashboardProvider/common.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, PanelDefinition, UnknownSpec } from '@perses-dev/core';\n\nexport type OnSaveDashboard = (dashboard: DashboardResource) => Promise<unknown>;\n\n/**\n * The middleware applied to the DashboardStore (can be used as generic argument in StateCreator).\n */\nexport type Middleware = [['zustand/immer', never], ['zustand/devtools', never]];\n\ndeclare global {\n // eslint-disable-next-line no-var\n var dashboardStoreId: number;\n}\n\n/**\n * Helper function to generate unique IDs for things in the dashboard store that don't have a \"natural\" ID.\n */\nexport function generateId() {\n if (globalThis.dashboardStoreId === undefined) {\n globalThis.dashboardStoreId = 0;\n }\n return globalThis.dashboardStoreId++;\n}\n\n// Helper function to create initial PanelDefinitions\nexport function createPanelDefinition(defaultPanelKind?: string, defaultPanelSpec?: UnknownSpec): PanelDefinition {\n return {\n kind: 'Panel',\n spec: {\n display: {\n name: '',\n description: undefined,\n },\n plugin: {\n kind: defaultPanelKind ?? '',\n spec: defaultPanelSpec ?? {},\n },\n queries: [],\n },\n };\n}\n"],"names":["generateId","globalThis","dashboardStoreId","undefined","createPanelDefinition","defaultPanelKind","defaultPanelSpec","kind","spec","display","name","description","plugin","queries"],"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;AAgBjC;;CAEC,GACD,OAAO,SAASA;IACd,IAAIC,WAAWC,gBAAgB,KAAKC,WAAW;QAC7CF,WAAWC,gBAAgB,GAAG;IAChC;IACA,OAAOD,WAAWC,gBAAgB;AACpC;AAEA,qDAAqD;AACrD,OAAO,SAASE,sBAAsBC,gBAAyB,EAAEC,gBAA8B;IAC7F,OAAO;QACLC,MAAM;QACNC,MAAM;YACJC,SAAS;gBACPC,MAAM;gBACNC,aAAaR;YACf;YACAS,QAAQ;gBACNL,MAAMF,6BAAAA,8BAAAA,mBAAoB;gBAC1BG,MAAMF,6BAAAA,8BAAAA,mBAAoB,CAAC;YAC7B;YACAO,SAAS,EAAE;QACb;IACF;AACF"}
|
|
1
|
+
{"version":3,"sources":["../../../src/context/DashboardProvider/common.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, PanelDefinition, UnknownSpec } from '@perses-dev/core';\n\nexport type OnSaveDashboard = (dashboard: DashboardResource | EphemeralDashboardResource) => Promise<unknown>;\n\n/**\n * The middleware applied to the DashboardStore (can be used as generic argument in StateCreator).\n */\nexport type Middleware = [['zustand/immer', never], ['zustand/devtools', never]];\n\ndeclare global {\n // eslint-disable-next-line no-var\n var dashboardStoreId: number;\n}\n\n/**\n * Helper function to generate unique IDs for things in the dashboard store that don't have a \"natural\" ID.\n */\nexport function generateId() {\n if (globalThis.dashboardStoreId === undefined) {\n globalThis.dashboardStoreId = 0;\n }\n return globalThis.dashboardStoreId++;\n}\n\n// Helper function to create initial PanelDefinitions\nexport function createPanelDefinition(defaultPanelKind?: string, defaultPanelSpec?: UnknownSpec): PanelDefinition {\n return {\n kind: 'Panel',\n spec: {\n display: {\n name: '',\n description: undefined,\n },\n plugin: {\n kind: defaultPanelKind ?? '',\n spec: defaultPanelSpec ?? {},\n },\n queries: [],\n },\n };\n}\n"],"names":["generateId","globalThis","dashboardStoreId","undefined","createPanelDefinition","defaultPanelKind","defaultPanelSpec","kind","spec","display","name","description","plugin","queries"],"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;AAgBjC;;CAEC,GACD,OAAO,SAASA;IACd,IAAIC,WAAWC,gBAAgB,KAAKC,WAAW;QAC7CF,WAAWC,gBAAgB,GAAG;IAChC;IACA,OAAOD,WAAWC,gBAAgB;AACpC;AAEA,qDAAqD;AACrD,OAAO,SAASE,sBAAsBC,gBAAyB,EAAEC,gBAA8B;IAC7F,OAAO;QACLC,MAAM;QACNC,MAAM;YACJC,SAAS;gBACPC,MAAM;gBACNC,aAAaR;YACf;YACAS,QAAQ;gBACNL,MAAMF,6BAAAA,8BAAAA,mBAAoB;gBAC1BG,MAAMF,6BAAAA,8BAAAA,mBAAoB,CAAC;YAC7B;YACAO,SAAS,EAAE;QACb;IACF;AACF"}
|
|
@@ -7,7 +7,7 @@ export declare function useEditMode(): {
|
|
|
7
7
|
* Returns actions that can be performed on the current dashboard.
|
|
8
8
|
*/
|
|
9
9
|
export declare function useDashboardActions(): {
|
|
10
|
-
setDashboard: (dashboard: import("@perses-dev/core").DashboardResource) => void;
|
|
10
|
+
setDashboard: (dashboard: import("@perses-dev/core").DashboardResource | import("@perses-dev/core").EphemeralDashboardResource) => void;
|
|
11
11
|
openAddPanelGroup: () => void;
|
|
12
12
|
openAddPanel: () => void;
|
|
13
13
|
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
-
import { DashboardResource, ProjectDatasource, DatasourceSelector, DatasourceSpec, GlobalDatasource } from '@perses-dev/core';
|
|
2
|
+
import { DashboardResource, ProjectDatasource, DatasourceSelector, DatasourceSpec, GlobalDatasource, EphemeralDashboardResource } from '@perses-dev/core';
|
|
3
3
|
import { DatasourceClient } from '@perses-dev/plugin-system';
|
|
4
4
|
export interface DatasourceStoreProviderProps {
|
|
5
|
-
dashboardResource?: DashboardResource;
|
|
5
|
+
dashboardResource?: DashboardResource | EphemeralDashboardResource;
|
|
6
6
|
projectName?: string;
|
|
7
7
|
datasourceApi: DatasourceApi;
|
|
8
8
|
children?: ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatasourceStoreProvider.d.ts","sourceRoot":"","sources":["../../src/context/DatasourceStoreProvider.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,SAAS,EAAkC,MAAM,OAAO,CAAC;AAClE,OAAO,EACL,iBAAiB,EAEjB,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,EACd,gBAAgB,
|
|
1
|
+
{"version":3,"file":"DatasourceStoreProvider.d.ts","sourceRoot":"","sources":["../../src/context/DatasourceStoreProvider.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,SAAS,EAAkC,MAAM,OAAO,CAAC;AAClE,OAAO,EACL,iBAAiB,EAEjB,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,EACd,gBAAgB,EAEhB,0BAA0B,EAE3B,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAKL,gBAAgB,EAEjB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,WAAW,4BAA4B;IAC3C,iBAAiB,CAAC,EAAE,iBAAiB,GAAG,0BAA0B,CAAC;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAClD,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,gBAAgB,CAAC;CAC3D;AAED,MAAM,MAAM,6BAA6B,GAAG;IAC1C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG,CAAC,CAAC,EAAE,6BAA6B,KAAK,MAAM,CAAC;AAEvF;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,aAAa,CAAC,EAAE,2BAA2B,CAAC;IAE5C,aAAa,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,kBAAkB,KAAK,OAAO,CAAC,iBAAiB,GAAG,SAAS,CAAC,CAAC;IAEzG,mBAAmB,EAAE,CAAC,QAAQ,EAAE,kBAAkB,KAAK,OAAO,CAAC,gBAAgB,GAAG,SAAS,CAAC,CAAC;IAE7F,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,iBAAiB,EAAE,CAAC,CAAC;IAExF,qBAAqB,EAAE,CAAC,UAAU,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,gBAAgB,EAAE,CAAC,CAAC;CAC7E;AAED;;GAEG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,4BAA4B,2CAyL1E"}
|
|
@@ -153,7 +153,13 @@ import { DatasourceStoreContext, usePluginRegistry } from '@perses-dev/plugin-sy
|
|
|
153
153
|
]);
|
|
154
154
|
const setLocalDatasources = useCallback((datasources)=>{
|
|
155
155
|
if (dashboardResource) {
|
|
156
|
-
setDashboardResource({
|
|
156
|
+
setDashboardResource(dashboardResource.kind === 'Dashboard' ? {
|
|
157
|
+
...dashboardResource,
|
|
158
|
+
spec: {
|
|
159
|
+
...dashboardResource.spec,
|
|
160
|
+
datasources: datasources
|
|
161
|
+
}
|
|
162
|
+
} : {
|
|
157
163
|
...dashboardResource,
|
|
158
164
|
spec: {
|
|
159
165
|
...dashboardResource.spec,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/context/DatasourceStoreProvider.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 { ReactNode, useCallback, useMemo, useState } from 'react';\nimport {\n DashboardResource,\n DashboardSpec,\n ProjectDatasource,\n DatasourceSelector,\n DatasourceSpec,\n GlobalDatasource,\n useEvent,\n} from '@perses-dev/core';\nimport {\n DatasourceStoreContext,\n DatasourceStore,\n DatasourceSelectItemGroup,\n usePluginRegistry,\n DatasourceClient,\n DatasourceSelectItem,\n} from '@perses-dev/plugin-system';\n\nexport interface DatasourceStoreProviderProps {\n dashboardResource?: DashboardResource;\n projectName?: string;\n datasourceApi: DatasourceApi;\n children?: ReactNode;\n savedDatasources?: Record<string, DatasourceSpec>;\n onCreate?: (client: DatasourceClient) => DatasourceClient;\n}\n\nexport type BuildDatasourceProxyUrlParams = {\n project?: string;\n dashboard?: string;\n name: string;\n};\n\nexport type BuildDatasourceProxyUrlFunc = (p: BuildDatasourceProxyUrlParams) => string;\n\n/**\n * The external API for fetching datasource resources\n */\nexport interface DatasourceApi {\n buildProxyUrl?: BuildDatasourceProxyUrlFunc;\n\n getDatasource: (project: string, selector: DatasourceSelector) => Promise<ProjectDatasource | undefined>;\n\n getGlobalDatasource: (selector: DatasourceSelector) => Promise<GlobalDatasource | undefined>;\n\n listDatasources: (project: string, pluginKind?: string) => Promise<ProjectDatasource[]>;\n\n listGlobalDatasources: (pluginKind?: string) => Promise<GlobalDatasource[]>;\n}\n\n/**\n * A `DatasourceContext` provider that uses an external API to resolve datasource selectors.\n */\nexport function DatasourceStoreProvider(props: DatasourceStoreProviderProps) {\n const { projectName, datasourceApi, onCreate, children } = props;\n const [dashboardResource, setDashboardResource] = useState(props.dashboardResource);\n const [savedDatasources, setSavedDatasources] = useState<Record<string, DatasourceSpec>>(\n props.savedDatasources ?? {}\n );\n const project = projectName ?? dashboardResource?.metadata.project;\n\n const { getPlugin, listPluginMetadata } = usePluginRegistry();\n\n const findDatasource = useEvent(async (selector: DatasourceSelector) => {\n // Try to find it in dashboard spec\n if (dashboardResource) {\n const { datasources } = dashboardResource.spec;\n const dashboardDatasource = findDashboardDatasource(datasources, selector);\n if (dashboardDatasource !== undefined) {\n return {\n spec: dashboardDatasource.spec,\n proxyUrl: buildDatasourceProxyUrl(datasourceApi, {\n project: dashboardResource.metadata.project,\n dashboard: dashboardResource.metadata.name,\n name: dashboardDatasource.name,\n }),\n };\n }\n }\n\n if (project) {\n // Try to find it at the project level as a Datasource resource\n const datasource = await datasourceApi.getDatasource(project, selector);\n if (datasource !== undefined) {\n return {\n spec: datasource.spec,\n proxyUrl: buildDatasourceProxyUrl(datasourceApi, {\n project: datasource.metadata.project,\n name: datasource.metadata.name,\n }),\n };\n }\n }\n\n // Try to find it at the global level as a GlobalDatasource resource\n const globalDatasource = await datasourceApi.getGlobalDatasource(selector);\n if (globalDatasource !== undefined) {\n return {\n spec: globalDatasource.spec,\n proxyUrl: buildDatasourceProxyUrl(datasourceApi, {\n name: globalDatasource.metadata.name,\n }),\n };\n }\n\n throw new Error(`No datasource found for kind '${selector.kind}' and name '${selector.name}'`);\n });\n\n // Gets a datasource spec for a given selector\n const getDatasource = useCallback(\n async (selector: DatasourceSelector): Promise<DatasourceSpec> => {\n const { spec } = await findDatasource(selector);\n return spec;\n },\n [findDatasource]\n );\n\n // Given a Datasource selector, finds the spec for it and then uses its corresponding plugin the create a client\n const getDatasourceClient = useCallback(\n async function getClient<Client extends DatasourceClient>(selector: DatasourceSelector): Promise<Client> {\n const { kind } = selector;\n const [{ spec, proxyUrl }, plugin] = await Promise.all([findDatasource(selector), getPlugin('Datasource', kind)]);\n\n // allows extending client\n const client = plugin.createClient(spec.plugin.spec, { proxyUrl }) as Client;\n if (onCreate !== undefined) {\n return onCreate(client) as Client;\n }\n return client;\n },\n [findDatasource, getPlugin, onCreate]\n );\n\n const listDatasourceSelectItems = useEvent(\n async (datasourcePluginKind: string): Promise<DatasourceSelectItemGroup[]> => {\n const [pluginMetadata, datasources, globalDatasources] = await Promise.all([\n listPluginMetadata('Datasource'),\n project ? datasourceApi.listDatasources(project, datasourcePluginKind) : [],\n datasourceApi.listGlobalDatasources(datasourcePluginKind),\n ]);\n\n // Find the metadata for the plugin type they asked for, so we can use it for the name of the default datasource\n const datasourcePluginMetadata = pluginMetadata.find((metadata) => metadata.kind === datasourcePluginKind);\n if (datasourcePluginMetadata === undefined) {\n throw new Error(`Could not find a Datasource plugin with kind '${datasourcePluginKind}'`);\n }\n\n // Get helper for computing results properly\n const { results, addItem } = buildDatasourceSelectItemGroups(datasourcePluginMetadata.display.name);\n\n // Start with dashboard datasources with the highest precedence\n if (dashboardResource?.spec.datasources) {\n for (const selectorName in dashboardResource.spec.datasources) {\n const spec = dashboardResource.spec.datasources[selectorName];\n if (spec === undefined || spec.plugin.kind !== datasourcePluginKind) continue;\n\n const saved = selectorName in savedDatasources;\n addItem({ spec, selectorName, selectorGroup: 'dashboard', saved });\n }\n }\n\n // Now look at project-level datasources\n for (const datasource of datasources) {\n const selectorName = datasource.metadata.name;\n addItem({\n spec: datasource.spec,\n selectorName,\n selectorGroup: 'project',\n editLink: `/projects/${project}/datasources`,\n });\n }\n\n // And finally global datasources\n for (const globalDatasource of globalDatasources) {\n const selectorName = globalDatasource.metadata.name;\n addItem({ spec: globalDatasource.spec, selectorName, selectorGroup: 'global', editLink: '/admin/datasources' });\n }\n\n return results;\n }\n );\n\n const getLocalDatasources = useCallback((): Record<string, DatasourceSpec> => {\n return dashboardResource?.spec.datasources ?? {};\n }, [dashboardResource]);\n\n const getSavedDatasources = useCallback((): Record<string, DatasourceSpec> => {\n return savedDatasources;\n }, [savedDatasources]);\n\n const setLocalDatasources = useCallback(\n (datasources: Record<string, DatasourceSpec>) => {\n if (dashboardResource) {\n setDashboardResource({\n ...dashboardResource,\n spec: {\n ...dashboardResource.spec,\n datasources: datasources,\n },\n });\n }\n },\n [dashboardResource]\n );\n\n const ctxValue: DatasourceStore = useMemo(\n () =>\n ({\n getDatasource,\n getDatasourceClient,\n getLocalDatasources,\n setLocalDatasources,\n setSavedDatasources,\n getSavedDatasources,\n listDatasourceSelectItems,\n }) as DatasourceStore,\n [\n getDatasource,\n getDatasourceClient,\n getLocalDatasources,\n setLocalDatasources,\n listDatasourceSelectItems,\n setSavedDatasources,\n getSavedDatasources,\n ]\n );\n\n return <DatasourceStoreContext.Provider value={ctxValue}>{children}</DatasourceStoreContext.Provider>;\n}\n\nfunction buildDatasourceProxyUrl(api: DatasourceApi, params: BuildDatasourceProxyUrlParams): string {\n return api.buildProxyUrl ? api.buildProxyUrl(params) : '';\n}\n\n// Helper to find a datasource in the list embedded in a dashboard spec\nfunction findDashboardDatasource(\n dashboardDatasources: DashboardSpec['datasources'],\n selector: DatasourceSelector\n): { name: string; spec: DatasourceSpec } | undefined {\n if (dashboardDatasources === undefined) return undefined;\n\n // If using a name in the selector...\n if (selector.name !== undefined) {\n const named = dashboardDatasources[selector.name];\n if (named === undefined) return undefined;\n return named.plugin.kind === selector.kind ? { name: selector.name, spec: named } : undefined;\n }\n\n // If only using a kind, try to find one with that kind that is the default\n const result = Object.entries(dashboardDatasources).find(\n (entry) => entry[1].plugin.kind === selector.kind && entry[1].default\n );\n if (!result) {\n return undefined;\n }\n return { name: result[0], spec: result[1] };\n}\n\ninterface AddDatasouceSelectItemParams {\n spec: DatasourceSpec;\n selectorName: string;\n selectorGroup?: string;\n editLink?: string;\n saved?: boolean;\n}\n\ntype AddDatasourceSelectItemFunc = (params: AddDatasouceSelectItemParams) => void;\n\n/**\n * Helper for building a list of DatasourceSelectItemGroup results.\n * @param pluginDisplayName\n */\nfunction buildDatasourceSelectItemGroups(pluginDisplayName: string): {\n results: DatasourceSelectItemGroup[];\n addItem: AddDatasourceSelectItemFunc;\n} {\n const results: DatasourceSelectItemGroup[] = [];\n const usedNames = new Set<string>();\n let isFirst = true;\n let explicitDefaultAdded = false;\n const groupIndices: Record<string, number> = {};\n let currentGroupIndex = 1; // 0 is the default group, always there as it contains at least the first item.\n\n const addItem = ({ spec, selectorName, selectorGroup: group, editLink, saved }: AddDatasouceSelectItemParams) => {\n group = group ?? '';\n\n // Ensure the default group is always present as soon as an item is added.\n if (isFirst) {\n results.push({\n group: `Default ${pluginDisplayName}`,\n items: [],\n });\n }\n\n // Create the group if necessary\n let selectItemGroup = results[groupIndices[group] ?? -1];\n if (!selectItemGroup) {\n groupIndices[group] = currentGroupIndex;\n selectItemGroup = { items: [], group, editLink };\n results[currentGroupIndex] = selectItemGroup;\n currentGroupIndex++;\n }\n\n // Add item to the group\n const isOverridden = usedNames.has(selectorName);\n selectItemGroup.items.push({\n name: spec.display?.name ?? selectorName,\n overridden: isOverridden,\n saved,\n selector: {\n kind: spec.plugin.kind,\n name: selectorName,\n group,\n },\n });\n usedNames.add(selectorName);\n\n const isExplicitDefault = !isOverridden && spec.default && !explicitDefaultAdded;\n if (results[0] && (isFirst || isExplicitDefault)) {\n // If we haven't added a default yet and this is a default, add default option to the beginning of the results\n results[0].items = [\n {\n name: `Default (${selectorName} from ${group})`,\n selector: {\n kind: spec.plugin.kind,\n },\n },\n ];\n // We consider that we added the default datasource only if it has been explicitly set as default.\n // If we add this datasource as default just because it's the first, it still needs to be overridable by\n // another datasource explicitly set as default.\n explicitDefaultAdded = isExplicitDefault;\n }\n\n // At the end, we make sure the overriding item(s) is well flagged so\n if (isOverridden) {\n for (let i = explicitDefaultAdded ? 1 : 0; i < currentGroupIndex; i++) {\n (results[i]?.items ?? [])\n .filter((item: DatasourceSelectItem) => item.selector.name === selectorName)\n .forEach((item: DatasourceSelectItem) => {\n item.overriding = true;\n });\n }\n }\n\n isFirst = false;\n };\n\n return { results, addItem };\n}\n"],"names":["useCallback","useMemo","useState","useEvent","DatasourceStoreContext","usePluginRegistry","DatasourceStoreProvider","props","projectName","datasourceApi","onCreate","children","dashboardResource","setDashboardResource","savedDatasources","setSavedDatasources","project","metadata","getPlugin","listPluginMetadata","findDatasource","selector","datasources","spec","dashboardDatasource","findDashboardDatasource","undefined","proxyUrl","buildDatasourceProxyUrl","dashboard","name","datasource","getDatasource","globalDatasource","getGlobalDatasource","Error","kind","getDatasourceClient","getClient","plugin","Promise","all","client","createClient","listDatasourceSelectItems","datasourcePluginKind","pluginMetadata","globalDatasources","listDatasources","listGlobalDatasources","datasourcePluginMetadata","find","results","addItem","buildDatasourceSelectItemGroups","display","selectorName","saved","selectorGroup","editLink","getLocalDatasources","getSavedDatasources","setLocalDatasources","ctxValue","Provider","value","api","params","buildProxyUrl","dashboardDatasources","named","result","Object","entries","entry","default","pluginDisplayName","usedNames","Set","isFirst","explicitDefaultAdded","groupIndices","currentGroupIndex","group","push","items","selectItemGroup","isOverridden","has","overridden","add","isExplicitDefault","i","filter","item","forEach","overriding"],"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,SAAoBA,WAAW,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AAClE,SAOEC,QAAQ,QACH,mBAAmB;AAC1B,SACEC,sBAAsB,EAGtBC,iBAAiB,QAGZ,4BAA4B;AAkCnC;;CAEC,GACD,OAAO,SAASC,wBAAwBC,KAAmC;IACzE,MAAM,EAAEC,WAAW,EAAEC,aAAa,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGJ;IAC3D,MAAM,CAACK,mBAAmBC,qBAAqB,GAAGX,SAASK,MAAMK,iBAAiB;QAEhFL;IADF,MAAM,CAACO,kBAAkBC,oBAAoB,GAAGb,SAC9CK,CAAAA,0BAAAA,MAAMO,gBAAgB,cAAtBP,qCAAAA,0BAA0B,CAAC;IAE7B,MAAMS,UAAUR,wBAAAA,yBAAAA,cAAeI,8BAAAA,wCAAAA,kBAAmBK,QAAQ,CAACD,OAAO;IAElE,MAAM,EAAEE,SAAS,EAAEC,kBAAkB,EAAE,GAAGd;IAE1C,MAAMe,iBAAiBjB,SAAS,OAAOkB;QACrC,mCAAmC;QACnC,IAAIT,mBAAmB;YACrB,MAAM,EAAEU,WAAW,EAAE,GAAGV,kBAAkBW,IAAI;YAC9C,MAAMC,sBAAsBC,wBAAwBH,aAAaD;YACjE,IAAIG,wBAAwBE,WAAW;gBACrC,OAAO;oBACLH,MAAMC,oBAAoBD,IAAI;oBAC9BI,UAAUC,wBAAwBnB,eAAe;wBAC/CO,SAASJ,kBAAkBK,QAAQ,CAACD,OAAO;wBAC3Ca,WAAWjB,kBAAkBK,QAAQ,CAACa,IAAI;wBAC1CA,MAAMN,oBAAoBM,IAAI;oBAChC;gBACF;YACF;QACF;QAEA,IAAId,SAAS;YACX,+DAA+D;YAC/D,MAAMe,aAAa,MAAMtB,cAAcuB,aAAa,CAAChB,SAASK;YAC9D,IAAIU,eAAeL,WAAW;gBAC5B,OAAO;oBACLH,MAAMQ,WAAWR,IAAI;oBACrBI,UAAUC,wBAAwBnB,eAAe;wBAC/CO,SAASe,WAAWd,QAAQ,CAACD,OAAO;wBACpCc,MAAMC,WAAWd,QAAQ,CAACa,IAAI;oBAChC;gBACF;YACF;QACF;QAEA,oEAAoE;QACpE,MAAMG,mBAAmB,MAAMxB,cAAcyB,mBAAmB,CAACb;QACjE,IAAIY,qBAAqBP,WAAW;YAClC,OAAO;gBACLH,MAAMU,iBAAiBV,IAAI;gBAC3BI,UAAUC,wBAAwBnB,eAAe;oBAC/CqB,MAAMG,iBAAiBhB,QAAQ,CAACa,IAAI;gBACtC;YACF;QACF;QAEA,MAAM,IAAIK,MAAM,CAAC,8BAA8B,EAAEd,SAASe,IAAI,CAAC,YAAY,EAAEf,SAASS,IAAI,CAAC,CAAC,CAAC;IAC/F;IAEA,8CAA8C;IAC9C,MAAME,gBAAgBhC,YACpB,OAAOqB;QACL,MAAM,EAAEE,IAAI,EAAE,GAAG,MAAMH,eAAeC;QACtC,OAAOE;IACT,GACA;QAACH;KAAe;IAGlB,gHAAgH;IAChH,MAAMiB,sBAAsBrC,YAC1B,eAAesC,UAA2CjB,QAA4B;QACpF,MAAM,EAAEe,IAAI,EAAE,GAAGf;QACjB,MAAM,CAAC,EAAEE,IAAI,EAAEI,QAAQ,EAAE,EAAEY,OAAO,GAAG,MAAMC,QAAQC,GAAG,CAAC;YAACrB,eAAeC;YAAWH,UAAU,cAAckB;SAAM;QAEhH,0BAA0B;QAC1B,MAAMM,SAASH,OAAOI,YAAY,CAACpB,KAAKgB,MAAM,CAAChB,IAAI,EAAE;YAAEI;QAAS;QAChE,IAAIjB,aAAagB,WAAW;YAC1B,OAAOhB,SAASgC;QAClB;QACA,OAAOA;IACT,GACA;QAACtB;QAAgBF;QAAWR;KAAS;IAGvC,MAAMkC,4BAA4BzC,SAChC,OAAO0C;QACL,MAAM,CAACC,gBAAgBxB,aAAayB,kBAAkB,GAAG,MAAMP,QAAQC,GAAG,CAAC;YACzEtB,mBAAmB;YACnBH,UAAUP,cAAcuC,eAAe,CAAChC,SAAS6B,wBAAwB,EAAE;YAC3EpC,cAAcwC,qBAAqB,CAACJ;SACrC;QAED,gHAAgH;QAChH,MAAMK,2BAA2BJ,eAAeK,IAAI,CAAC,CAAClC,WAAaA,SAASmB,IAAI,KAAKS;QACrF,IAAIK,6BAA6BxB,WAAW;YAC1C,MAAM,IAAIS,MAAM,CAAC,8CAA8C,EAAEU,qBAAqB,CAAC,CAAC;QAC1F;QAEA,4CAA4C;QAC5C,MAAM,EAAEO,OAAO,EAAEC,OAAO,EAAE,GAAGC,gCAAgCJ,yBAAyBK,OAAO,CAACzB,IAAI;QAElG,+DAA+D;QAC/D,IAAIlB,8BAAAA,wCAAAA,kBAAmBW,IAAI,CAACD,WAAW,EAAE;YACvC,IAAK,MAAMkC,gBAAgB5C,kBAAkBW,IAAI,CAACD,WAAW,CAAE;gBAC7D,MAAMC,OAAOX,kBAAkBW,IAAI,CAACD,WAAW,CAACkC,aAAa;gBAC7D,IAAIjC,SAASG,aAAaH,KAAKgB,MAAM,CAACH,IAAI,KAAKS,sBAAsB;gBAErE,MAAMY,QAAQD,gBAAgB1C;gBAC9BuC,QAAQ;oBAAE9B;oBAAMiC;oBAAcE,eAAe;oBAAaD;gBAAM;YAClE;QACF;QAEA,wCAAwC;QACxC,KAAK,MAAM1B,cAAcT,YAAa;YACpC,MAAMkC,eAAezB,WAAWd,QAAQ,CAACa,IAAI;YAC7CuB,QAAQ;gBACN9B,MAAMQ,WAAWR,IAAI;gBACrBiC;gBACAE,eAAe;gBACfC,UAAU,CAAC,UAAU,EAAE3C,QAAQ,YAAY,CAAC;YAC9C;QACF;QAEA,iCAAiC;QACjC,KAAK,MAAMiB,oBAAoBc,kBAAmB;YAChD,MAAMS,eAAevB,iBAAiBhB,QAAQ,CAACa,IAAI;YACnDuB,QAAQ;gBAAE9B,MAAMU,iBAAiBV,IAAI;gBAAEiC;gBAAcE,eAAe;gBAAUC,UAAU;YAAqB;QAC/G;QAEA,OAAOP;IACT;IAGF,MAAMQ,sBAAsB5D,YAAY;YAC/BY;QAAP,OAAOA,CAAAA,sCAAAA,8BAAAA,wCAAAA,kBAAmBW,IAAI,CAACD,WAAW,cAAnCV,iDAAAA,sCAAuC,CAAC;IACjD,GAAG;QAACA;KAAkB;IAEtB,MAAMiD,sBAAsB7D,YAAY;QACtC,OAAOc;IACT,GAAG;QAACA;KAAiB;IAErB,MAAMgD,sBAAsB9D,YAC1B,CAACsB;QACC,IAAIV,mBAAmB;YACrBC,qBAAqB;gBACnB,GAAGD,iBAAiB;gBACpBW,MAAM;oBACJ,GAAGX,kBAAkBW,IAAI;oBACzBD,aAAaA;gBACf;YACF;QACF;IACF,GACA;QAACV;KAAkB;IAGrB,MAAMmD,WAA4B9D,QAChC,IACG,CAAA;YACC+B;YACAK;YACAuB;YACAE;YACA/C;YACA8C;YACAjB;QACF,CAAA,GACF;QACEZ;QACAK;QACAuB;QACAE;QACAlB;QACA7B;QACA8C;KACD;IAGH,qBAAO,KAACzD,uBAAuB4D,QAAQ;QAACC,OAAOF;kBAAWpD;;AAC5D;AAEA,SAASiB,wBAAwBsC,GAAkB,EAAEC,MAAqC;IACxF,OAAOD,IAAIE,aAAa,GAAGF,IAAIE,aAAa,CAACD,UAAU;AACzD;AAEA,uEAAuE;AACvE,SAAS1C,wBACP4C,oBAAkD,EAClDhD,QAA4B;IAE5B,IAAIgD,yBAAyB3C,WAAW,OAAOA;IAE/C,qCAAqC;IACrC,IAAIL,SAASS,IAAI,KAAKJ,WAAW;QAC/B,MAAM4C,QAAQD,oBAAoB,CAAChD,SAASS,IAAI,CAAC;QACjD,IAAIwC,UAAU5C,WAAW,OAAOA;QAChC,OAAO4C,MAAM/B,MAAM,CAACH,IAAI,KAAKf,SAASe,IAAI,GAAG;YAAEN,MAAMT,SAASS,IAAI;YAAEP,MAAM+C;QAAM,IAAI5C;IACtF;IAEA,2EAA2E;IAC3E,MAAM6C,SAASC,OAAOC,OAAO,CAACJ,sBAAsBlB,IAAI,CACtD,CAACuB,QAAUA,KAAK,CAAC,EAAE,CAACnC,MAAM,CAACH,IAAI,KAAKf,SAASe,IAAI,IAAIsC,KAAK,CAAC,EAAE,CAACC,OAAO;IAEvE,IAAI,CAACJ,QAAQ;QACX,OAAO7C;IACT;IACA,OAAO;QAAEI,MAAMyC,MAAM,CAAC,EAAE;QAAEhD,MAAMgD,MAAM,CAAC,EAAE;IAAC;AAC5C;AAYA;;;CAGC,GACD,SAASjB,gCAAgCsB,iBAAyB;IAIhE,MAAMxB,UAAuC,EAAE;IAC/C,MAAMyB,YAAY,IAAIC;IACtB,IAAIC,UAAU;IACd,IAAIC,uBAAuB;IAC3B,MAAMC,eAAuC,CAAC;IAC9C,IAAIC,oBAAoB,GAAG,+EAA+E;IAE1G,MAAM7B,UAAU,CAAC,EAAE9B,IAAI,EAAEiC,YAAY,EAAEE,eAAeyB,KAAK,EAAExB,QAAQ,EAAEF,KAAK,EAAgC;YAuBlGlC;QAtBR4D,QAAQA,kBAAAA,mBAAAA,QAAS;QAEjB,0EAA0E;QAC1E,IAAIJ,SAAS;YACX3B,QAAQgC,IAAI,CAAC;gBACXD,OAAO,CAAC,QAAQ,EAAEP,kBAAkB,CAAC;gBACrCS,OAAO,EAAE;YACX;QACF;YAG8BJ;QAD9B,gCAAgC;QAChC,IAAIK,kBAAkBlC,OAAO,CAAC6B,CAAAA,sBAAAA,YAAY,CAACE,MAAM,cAAnBF,iCAAAA,sBAAuB,CAAC,EAAE;QACxD,IAAI,CAACK,iBAAiB;YACpBL,YAAY,CAACE,MAAM,GAAGD;YACtBI,kBAAkB;gBAAED,OAAO,EAAE;gBAAEF;gBAAOxB;YAAS;YAC/CP,OAAO,CAAC8B,kBAAkB,GAAGI;YAC7BJ;QACF;QAEA,wBAAwB;QACxB,MAAMK,eAAeV,UAAUW,GAAG,CAAChC;YAE3BjC;QADR+D,gBAAgBD,KAAK,CAACD,IAAI,CAAC;YACzBtD,MAAMP,CAAAA,sBAAAA,gBAAAA,KAAKgC,OAAO,cAAZhC,oCAAAA,cAAcO,IAAI,cAAlBP,gCAAAA,qBAAsBiC;YAC5BiC,YAAYF;YACZ9B;YACApC,UAAU;gBACRe,MAAMb,KAAKgB,MAAM,CAACH,IAAI;gBACtBN,MAAM0B;gBACN2B;YACF;QACF;QACAN,UAAUa,GAAG,CAAClC;QAEd,MAAMmC,oBAAoB,CAACJ,gBAAgBhE,KAAKoD,OAAO,IAAI,CAACK;QAC5D,IAAI5B,OAAO,CAAC,EAAE,IAAK2B,CAAAA,WAAWY,iBAAgB,GAAI;YAChD,8GAA8G;YAC9GvC,OAAO,CAAC,EAAE,CAACiC,KAAK,GAAG;gBACjB;oBACEvD,MAAM,CAAC,SAAS,EAAE0B,aAAa,MAAM,EAAE2B,MAAM,CAAC,CAAC;oBAC/C9D,UAAU;wBACRe,MAAMb,KAAKgB,MAAM,CAACH,IAAI;oBACxB;gBACF;aACD;YACD,kGAAkG;YAClG,wGAAwG;YACxG,gDAAgD;YAChD4C,uBAAuBW;QACzB;QAEA,qEAAqE;QACrE,IAAIJ,cAAc;YAChB,IAAK,IAAIK,IAAIZ,uBAAuB,IAAI,GAAGY,IAAIV,mBAAmBU,IAAK;oBACpExC;oBAAAA;gBAAAA,CAAAA,CAAAA,oBAAAA,aAAAA,OAAO,CAACwC,EAAE,cAAVxC,iCAAAA,WAAYiC,KAAK,cAAjBjC,8BAAAA,mBAAqB,EAAE,AAAD,EACpByC,MAAM,CAAC,CAACC,OAA+BA,KAAKzE,QAAQ,CAACS,IAAI,KAAK0B,cAC9DuC,OAAO,CAAC,CAACD;oBACRA,KAAKE,UAAU,GAAG;gBACpB;YACJ;QACF;QAEAjB,UAAU;IACZ;IAEA,OAAO;QAAE3B;QAASC;IAAQ;AAC5B"}
|
|
1
|
+
{"version":3,"sources":["../../src/context/DatasourceStoreProvider.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 { ReactNode, useCallback, useMemo, useState } from 'react';\nimport {\n DashboardResource,\n DashboardSpec,\n ProjectDatasource,\n DatasourceSelector,\n DatasourceSpec,\n GlobalDatasource,\n useEvent,\n EphemeralDashboardResource,\n DatasourceDefinition,\n} from '@perses-dev/core';\nimport {\n DatasourceStoreContext,\n DatasourceStore,\n DatasourceSelectItemGroup,\n usePluginRegistry,\n DatasourceClient,\n DatasourceSelectItem,\n} from '@perses-dev/plugin-system';\n\nexport interface DatasourceStoreProviderProps {\n dashboardResource?: DashboardResource | EphemeralDashboardResource;\n projectName?: string;\n datasourceApi: DatasourceApi;\n children?: ReactNode;\n savedDatasources?: Record<string, DatasourceSpec>;\n onCreate?: (client: DatasourceClient) => DatasourceClient;\n}\n\nexport type BuildDatasourceProxyUrlParams = {\n project?: string;\n dashboard?: string;\n name: string;\n};\n\nexport type BuildDatasourceProxyUrlFunc = (p: BuildDatasourceProxyUrlParams) => string;\n\n/**\n * The external API for fetching datasource resources\n */\nexport interface DatasourceApi {\n buildProxyUrl?: BuildDatasourceProxyUrlFunc;\n\n getDatasource: (project: string, selector: DatasourceSelector) => Promise<ProjectDatasource | undefined>;\n\n getGlobalDatasource: (selector: DatasourceSelector) => Promise<GlobalDatasource | undefined>;\n\n listDatasources: (project: string, pluginKind?: string) => Promise<ProjectDatasource[]>;\n\n listGlobalDatasources: (pluginKind?: string) => Promise<GlobalDatasource[]>;\n}\n\n/**\n * A `DatasourceContext` provider that uses an external API to resolve datasource selectors.\n */\nexport function DatasourceStoreProvider(props: DatasourceStoreProviderProps) {\n const { projectName, datasourceApi, onCreate, children } = props;\n const [dashboardResource, setDashboardResource] = useState(props.dashboardResource);\n const [savedDatasources, setSavedDatasources] = useState<Record<string, DatasourceSpec>>(\n props.savedDatasources ?? {}\n );\n const project = projectName ?? dashboardResource?.metadata.project;\n\n const { getPlugin, listPluginMetadata } = usePluginRegistry();\n\n const findDatasource = useEvent(async (selector: DatasourceSelector) => {\n // Try to find it in dashboard spec\n if (dashboardResource) {\n const { datasources } = dashboardResource.spec;\n const dashboardDatasource = findDashboardDatasource(datasources, selector);\n if (dashboardDatasource !== undefined) {\n return {\n spec: dashboardDatasource.spec,\n proxyUrl: buildDatasourceProxyUrl(datasourceApi, {\n project: dashboardResource.metadata.project,\n dashboard: dashboardResource.metadata.name,\n name: dashboardDatasource.name,\n }),\n };\n }\n }\n\n if (project) {\n // Try to find it at the project level as a Datasource resource\n const datasource = await datasourceApi.getDatasource(project, selector);\n if (datasource !== undefined) {\n return {\n spec: datasource.spec,\n proxyUrl: buildDatasourceProxyUrl(datasourceApi, {\n project: datasource.metadata.project,\n name: datasource.metadata.name,\n }),\n };\n }\n }\n\n // Try to find it at the global level as a GlobalDatasource resource\n const globalDatasource = await datasourceApi.getGlobalDatasource(selector);\n if (globalDatasource !== undefined) {\n return {\n spec: globalDatasource.spec,\n proxyUrl: buildDatasourceProxyUrl(datasourceApi, {\n name: globalDatasource.metadata.name,\n }),\n };\n }\n\n throw new Error(`No datasource found for kind '${selector.kind}' and name '${selector.name}'`);\n });\n\n // Gets a datasource spec for a given selector\n const getDatasource = useCallback(\n async (selector: DatasourceSelector): Promise<DatasourceSpec> => {\n const { spec } = await findDatasource(selector);\n return spec;\n },\n [findDatasource]\n );\n\n // Given a Datasource selector, finds the spec for it and then uses its corresponding plugin the create a client\n const getDatasourceClient = useCallback(\n async function getClient<Client extends DatasourceClient>(selector: DatasourceSelector): Promise<Client> {\n const { kind } = selector;\n const [{ spec, proxyUrl }, plugin] = await Promise.all([findDatasource(selector), getPlugin('Datasource', kind)]);\n\n // allows extending client\n const client = plugin.createClient(spec.plugin.spec, { proxyUrl }) as Client;\n if (onCreate !== undefined) {\n return onCreate(client) as Client;\n }\n return client;\n },\n [findDatasource, getPlugin, onCreate]\n );\n\n const listDatasourceSelectItems = useEvent(\n async (datasourcePluginKind: string): Promise<DatasourceSelectItemGroup[]> => {\n const [pluginMetadata, datasources, globalDatasources] = await Promise.all([\n listPluginMetadata('Datasource'),\n project ? datasourceApi.listDatasources(project, datasourcePluginKind) : [],\n datasourceApi.listGlobalDatasources(datasourcePluginKind),\n ]);\n\n // Find the metadata for the plugin type they asked for, so we can use it for the name of the default datasource\n const datasourcePluginMetadata = pluginMetadata.find((metadata) => metadata.kind === datasourcePluginKind);\n if (datasourcePluginMetadata === undefined) {\n throw new Error(`Could not find a Datasource plugin with kind '${datasourcePluginKind}'`);\n }\n\n // Get helper for computing results properly\n const { results, addItem } = buildDatasourceSelectItemGroups(datasourcePluginMetadata.display.name);\n\n // Start with dashboard datasources with the highest precedence\n if (dashboardResource?.spec.datasources) {\n for (const selectorName in dashboardResource.spec.datasources) {\n const spec = dashboardResource.spec.datasources[selectorName];\n if (spec === undefined || spec.plugin.kind !== datasourcePluginKind) continue;\n\n const saved = selectorName in savedDatasources;\n addItem({ spec, selectorName, selectorGroup: 'dashboard', saved });\n }\n }\n\n // Now look at project-level datasources\n for (const datasource of datasources) {\n const selectorName = datasource.metadata.name;\n addItem({\n spec: datasource.spec,\n selectorName,\n selectorGroup: 'project',\n editLink: `/projects/${project}/datasources`,\n });\n }\n\n // And finally global datasources\n for (const globalDatasource of globalDatasources) {\n const selectorName = globalDatasource.metadata.name;\n addItem({ spec: globalDatasource.spec, selectorName, selectorGroup: 'global', editLink: '/admin/datasources' });\n }\n\n return results;\n }\n );\n\n const getLocalDatasources = useCallback((): Record<string, DatasourceSpec> => {\n return dashboardResource?.spec.datasources ?? {};\n }, [dashboardResource]);\n\n const getSavedDatasources = useCallback((): Record<string, DatasourceSpec> => {\n return savedDatasources;\n }, [savedDatasources]);\n\n const setLocalDatasources = useCallback(\n (datasources: Record<string, DatasourceSpec>) => {\n if (dashboardResource) {\n setDashboardResource(\n dashboardResource.kind === 'Dashboard'\n ? ({\n ...dashboardResource,\n spec: {\n ...dashboardResource.spec,\n datasources: datasources,\n },\n } as DashboardResource)\n : ({\n ...dashboardResource,\n spec: {\n ...dashboardResource.spec,\n datasources: datasources,\n },\n } as EphemeralDashboardResource)\n );\n }\n },\n [dashboardResource]\n );\n\n const ctxValue: DatasourceStore = useMemo(\n () =>\n ({\n getDatasource,\n getDatasourceClient,\n getLocalDatasources,\n setLocalDatasources,\n setSavedDatasources,\n getSavedDatasources,\n listDatasourceSelectItems,\n }) as DatasourceStore,\n [\n getDatasource,\n getDatasourceClient,\n getLocalDatasources,\n setLocalDatasources,\n listDatasourceSelectItems,\n setSavedDatasources,\n getSavedDatasources,\n ]\n );\n\n return <DatasourceStoreContext.Provider value={ctxValue}>{children}</DatasourceStoreContext.Provider>;\n}\n\nfunction buildDatasourceProxyUrl(api: DatasourceApi, params: BuildDatasourceProxyUrlParams): string {\n return api.buildProxyUrl ? api.buildProxyUrl(params) : '';\n}\n\n// Helper to find a datasource in the list embedded in a dashboard spec\nfunction findDashboardDatasource(\n dashboardDatasources: DashboardSpec['datasources'],\n selector: DatasourceSelector\n): DatasourceDefinition | undefined {\n if (dashboardDatasources === undefined) return undefined;\n\n // If using a name in the selector...\n if (selector.name !== undefined) {\n const named = dashboardDatasources[selector.name];\n if (named === undefined) return undefined;\n return named.plugin.kind === selector.kind ? { name: selector.name, spec: named } : undefined;\n }\n\n // If only using a kind, try to find one with that kind that is the default\n const result = Object.entries(dashboardDatasources).find(\n (entry) => entry[1].plugin.kind === selector.kind && entry[1].default\n );\n if (!result) {\n return undefined;\n }\n return { name: result[0], spec: result[1] };\n}\n\ninterface AddDatasouceSelectItemParams {\n spec: DatasourceSpec;\n selectorName: string;\n selectorGroup?: string;\n editLink?: string;\n saved?: boolean;\n}\n\ntype AddDatasourceSelectItemFunc = (params: AddDatasouceSelectItemParams) => void;\n\n/**\n * Helper for building a list of DatasourceSelectItemGroup results.\n * @param pluginDisplayName\n */\nfunction buildDatasourceSelectItemGroups(pluginDisplayName: string): {\n results: DatasourceSelectItemGroup[];\n addItem: AddDatasourceSelectItemFunc;\n} {\n const results: DatasourceSelectItemGroup[] = [];\n const usedNames = new Set<string>();\n let isFirst = true;\n let explicitDefaultAdded = false;\n const groupIndices: Record<string, number> = {};\n let currentGroupIndex = 1; // 0 is the default group, always there as it contains at least the first item.\n\n const addItem = ({ spec, selectorName, selectorGroup: group, editLink, saved }: AddDatasouceSelectItemParams) => {\n group = group ?? '';\n\n // Ensure the default group is always present as soon as an item is added.\n if (isFirst) {\n results.push({\n group: `Default ${pluginDisplayName}`,\n items: [],\n });\n }\n\n // Create the group if necessary\n let selectItemGroup = results[groupIndices[group] ?? -1];\n if (!selectItemGroup) {\n groupIndices[group] = currentGroupIndex;\n selectItemGroup = { items: [], group, editLink };\n results[currentGroupIndex] = selectItemGroup;\n currentGroupIndex++;\n }\n\n // Add item to the group\n const isOverridden = usedNames.has(selectorName);\n selectItemGroup.items.push({\n name: spec.display?.name ?? selectorName,\n overridden: isOverridden,\n saved,\n selector: {\n kind: spec.plugin.kind,\n name: selectorName,\n group,\n },\n });\n usedNames.add(selectorName);\n\n const isExplicitDefault = !isOverridden && spec.default && !explicitDefaultAdded;\n if (results[0] && (isFirst || isExplicitDefault)) {\n // If we haven't added a default yet and this is a default, add default option to the beginning of the results\n results[0].items = [\n {\n name: `Default (${selectorName} from ${group})`,\n selector: {\n kind: spec.plugin.kind,\n },\n },\n ];\n // We consider that we added the default datasource only if it has been explicitly set as default.\n // If we add this datasource as default just because it's the first, it still needs to be overridable by\n // another datasource explicitly set as default.\n explicitDefaultAdded = isExplicitDefault;\n }\n\n // At the end, we make sure the overriding item(s) is well flagged so\n if (isOverridden) {\n for (let i = explicitDefaultAdded ? 1 : 0; i < currentGroupIndex; i++) {\n (results[i]?.items ?? [])\n .filter((item: DatasourceSelectItem) => item.selector.name === selectorName)\n .forEach((item: DatasourceSelectItem) => {\n item.overriding = true;\n });\n }\n }\n\n isFirst = false;\n };\n\n return { results, addItem };\n}\n"],"names":["useCallback","useMemo","useState","useEvent","DatasourceStoreContext","usePluginRegistry","DatasourceStoreProvider","props","projectName","datasourceApi","onCreate","children","dashboardResource","setDashboardResource","savedDatasources","setSavedDatasources","project","metadata","getPlugin","listPluginMetadata","findDatasource","selector","datasources","spec","dashboardDatasource","findDashboardDatasource","undefined","proxyUrl","buildDatasourceProxyUrl","dashboard","name","datasource","getDatasource","globalDatasource","getGlobalDatasource","Error","kind","getDatasourceClient","getClient","plugin","Promise","all","client","createClient","listDatasourceSelectItems","datasourcePluginKind","pluginMetadata","globalDatasources","listDatasources","listGlobalDatasources","datasourcePluginMetadata","find","results","addItem","buildDatasourceSelectItemGroups","display","selectorName","saved","selectorGroup","editLink","getLocalDatasources","getSavedDatasources","setLocalDatasources","ctxValue","Provider","value","api","params","buildProxyUrl","dashboardDatasources","named","result","Object","entries","entry","default","pluginDisplayName","usedNames","Set","isFirst","explicitDefaultAdded","groupIndices","currentGroupIndex","group","push","items","selectItemGroup","isOverridden","has","overridden","add","isExplicitDefault","i","filter","item","forEach","overriding"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { DashboardResource } from '@perses-dev/core';
|
|
1
|
+
import { DashboardResource, EphemeralDashboardResource } from '@perses-dev/core';
|
|
2
2
|
export declare function useDashboard(): {
|
|
3
|
-
dashboard: DashboardResource;
|
|
4
|
-
setDashboard: (dashboardResource: DashboardResource) => void;
|
|
3
|
+
dashboard: DashboardResource | EphemeralDashboardResource;
|
|
4
|
+
setDashboard: (dashboardResource: DashboardResource | EphemeralDashboardResource) => void;
|
|
5
5
|
};
|
|
6
6
|
//# sourceMappingURL=useDashboard.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDashboard.d.ts","sourceRoot":"","sources":["../../src/context/useDashboard.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAkB,iBAAiB,EAAkB,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"useDashboard.d.ts","sourceRoot":"","sources":["../../src/context/useDashboard.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAkB,iBAAiB,EAAE,0BAA0B,EAAkB,MAAM,kBAAkB,CAAC;AAIjH,wBAAgB,YAAY;;sCA0Ee,iBAAiB,GAAG,0BAA0B;EASxF"}
|
|
@@ -14,22 +14,24 @@ import { createPanelRef } from '@perses-dev/core';
|
|
|
14
14
|
import { useDashboardStore } from './DashboardProvider';
|
|
15
15
|
import { useTemplateVariableActions, useTemplateVariableDefinitions } from './TemplateVariableProvider';
|
|
16
16
|
export function useDashboard() {
|
|
17
|
-
const { panels, panelGroups, panelGroupOrder, setDashboard: setDashboardResource, metadata, display, duration, refreshInterval, datasources } = useDashboardStore(({ panels, panelGroups, panelGroupOrder, setDashboard, metadata, display, duration, refreshInterval, datasources })=>({
|
|
17
|
+
const { panels, panelGroups, panelGroupOrder, setDashboard: setDashboardResource, kind, metadata, display, duration, refreshInterval, datasources, ttl } = useDashboardStore(({ panels, panelGroups, panelGroupOrder, setDashboard, kind, metadata, display, duration, refreshInterval, datasources, ttl })=>({
|
|
18
18
|
panels,
|
|
19
19
|
panelGroups,
|
|
20
20
|
panelGroupOrder,
|
|
21
21
|
setDashboard,
|
|
22
|
+
kind,
|
|
22
23
|
metadata,
|
|
23
24
|
display,
|
|
24
25
|
duration,
|
|
25
26
|
refreshInterval,
|
|
26
|
-
datasources
|
|
27
|
+
datasources,
|
|
28
|
+
ttl
|
|
27
29
|
}));
|
|
28
30
|
const { setVariableDefinitions } = useTemplateVariableActions();
|
|
29
31
|
const variables = useTemplateVariableDefinitions();
|
|
30
32
|
const layouts = convertPanelGroupsToLayouts(panelGroups, panelGroupOrder);
|
|
31
|
-
const dashboard = {
|
|
32
|
-
kind
|
|
33
|
+
const dashboard = kind === 'Dashboard' ? {
|
|
34
|
+
kind,
|
|
33
35
|
metadata,
|
|
34
36
|
spec: {
|
|
35
37
|
display,
|
|
@@ -40,6 +42,19 @@ export function useDashboard() {
|
|
|
40
42
|
refreshInterval,
|
|
41
43
|
datasources
|
|
42
44
|
}
|
|
45
|
+
} : {
|
|
46
|
+
kind,
|
|
47
|
+
metadata,
|
|
48
|
+
spec: {
|
|
49
|
+
display,
|
|
50
|
+
panels,
|
|
51
|
+
layouts,
|
|
52
|
+
variables,
|
|
53
|
+
duration,
|
|
54
|
+
refreshInterval,
|
|
55
|
+
datasources,
|
|
56
|
+
ttl
|
|
57
|
+
}
|
|
43
58
|
};
|
|
44
59
|
const setDashboard = (dashboardResource)=>{
|
|
45
60
|
setVariableDefinitions(dashboardResource.spec.variables);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/context/useDashboard.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 { createPanelRef, DashboardResource, GridDefinition } from '@perses-dev/core';\nimport { PanelGroupDefinition, PanelGroupId, useDashboardStore } from './DashboardProvider';\nimport { useTemplateVariableActions, useTemplateVariableDefinitions } from './TemplateVariableProvider';\n\nexport function useDashboard() {\n const {\n panels,\n panelGroups,\n panelGroupOrder,\n setDashboard: setDashboardResource,\n metadata,\n display,\n duration,\n refreshInterval,\n datasources,\n } = useDashboardStore(\n ({\n panels,\n panelGroups,\n panelGroupOrder,\n setDashboard,\n metadata,\n display,\n duration,\n refreshInterval,\n datasources,\n }) => ({\n panels,\n panelGroups,\n panelGroupOrder,\n setDashboard,\n metadata,\n display,\n duration,\n refreshInterval,\n datasources,\n })\n );\n const { setVariableDefinitions } = useTemplateVariableActions();\n const variables = useTemplateVariableDefinitions();\n const layouts = convertPanelGroupsToLayouts(panelGroups, panelGroupOrder);\n\n const dashboard
|
|
1
|
+
{"version":3,"sources":["../../src/context/useDashboard.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 { createPanelRef, DashboardResource, EphemeralDashboardResource, GridDefinition } from '@perses-dev/core';\nimport { PanelGroupDefinition, PanelGroupId, useDashboardStore } from './DashboardProvider';\nimport { useTemplateVariableActions, useTemplateVariableDefinitions } from './TemplateVariableProvider';\n\nexport function useDashboard() {\n const {\n panels,\n panelGroups,\n panelGroupOrder,\n setDashboard: setDashboardResource,\n kind,\n metadata,\n display,\n duration,\n refreshInterval,\n datasources,\n ttl,\n } = useDashboardStore(\n ({\n panels,\n panelGroups,\n panelGroupOrder,\n setDashboard,\n kind,\n metadata,\n display,\n duration,\n refreshInterval,\n datasources,\n ttl,\n }) => ({\n panels,\n panelGroups,\n panelGroupOrder,\n setDashboard,\n kind,\n metadata,\n display,\n duration,\n refreshInterval,\n datasources,\n ttl,\n })\n );\n const { setVariableDefinitions } = useTemplateVariableActions();\n const variables = useTemplateVariableDefinitions();\n const layouts = convertPanelGroupsToLayouts(panelGroups, panelGroupOrder);\n\n const dashboard =\n kind === 'Dashboard'\n ? ({\n kind,\n metadata,\n spec: {\n display,\n panels,\n layouts,\n variables,\n duration,\n refreshInterval,\n datasources,\n },\n } as DashboardResource)\n : ({\n kind,\n metadata,\n spec: {\n display,\n panels,\n layouts,\n variables,\n duration,\n refreshInterval,\n datasources,\n ttl,\n },\n } as EphemeralDashboardResource);\n\n const setDashboard = (dashboardResource: DashboardResource | EphemeralDashboardResource) => {\n setVariableDefinitions(dashboardResource.spec.variables);\n setDashboardResource(dashboardResource);\n };\n\n return {\n dashboard,\n setDashboard,\n };\n}\n\nfunction convertPanelGroupsToLayouts(\n panelGroups: Record<number, PanelGroupDefinition>,\n panelGroupOrder: PanelGroupId[]\n): GridDefinition[] {\n const layouts: GridDefinition[] = [];\n panelGroupOrder.map((groupOrderId) => {\n const group = panelGroups[groupOrderId];\n if (group === undefined) {\n throw new Error('panel group not found');\n }\n const { title, isCollapsed, itemLayouts, itemPanelKeys } = group;\n let display = undefined;\n if (title) {\n display = {\n title,\n collapse: {\n open: !isCollapsed,\n },\n };\n }\n const layout: GridDefinition = {\n kind: 'Grid',\n spec: {\n display,\n items: itemLayouts.map((layout) => {\n const panelKey = itemPanelKeys[layout.i];\n if (panelKey === undefined) {\n throw new Error(`Missing panel key of layout ${layout.i}`);\n }\n return {\n x: layout.x,\n y: layout.y,\n width: layout.w,\n height: layout.h,\n content: createPanelRef(panelKey),\n };\n }),\n },\n };\n layouts.push(layout);\n });\n\n return layouts;\n}\n"],"names":["createPanelRef","useDashboardStore","useTemplateVariableActions","useTemplateVariableDefinitions","useDashboard","panels","panelGroups","panelGroupOrder","setDashboard","setDashboardResource","kind","metadata","display","duration","refreshInterval","datasources","ttl","setVariableDefinitions","variables","layouts","convertPanelGroupsToLayouts","dashboard","spec","dashboardResource","map","groupOrderId","group","undefined","Error","title","isCollapsed","itemLayouts","itemPanelKeys","collapse","open","layout","items","panelKey","i","x","y","width","w","height","h","content","push"],"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,cAAc,QAAuE,mBAAmB;AACjH,SAA6CC,iBAAiB,QAAQ,sBAAsB;AAC5F,SAASC,0BAA0B,EAAEC,8BAA8B,QAAQ,6BAA6B;AAExG,OAAO,SAASC;IACd,MAAM,EACJC,MAAM,EACNC,WAAW,EACXC,eAAe,EACfC,cAAcC,oBAAoB,EAClCC,IAAI,EACJC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRC,eAAe,EACfC,WAAW,EACXC,GAAG,EACJ,GAAGf,kBACF,CAAC,EACCI,MAAM,EACNC,WAAW,EACXC,eAAe,EACfC,YAAY,EACZE,IAAI,EACJC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRC,eAAe,EACfC,WAAW,EACXC,GAAG,EACJ,GAAM,CAAA;YACLX;YACAC;YACAC;YACAC;YACAE;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF,CAAA;IAEF,MAAM,EAAEC,sBAAsB,EAAE,GAAGf;IACnC,MAAMgB,YAAYf;IAClB,MAAMgB,UAAUC,4BAA4Bd,aAAaC;IAEzD,MAAMc,YACJX,SAAS,cACJ;QACCA;QACAC;QACAW,MAAM;YACJV;YACAP;YACAc;YACAD;YACAL;YACAC;YACAC;QACF;IACF,IACC;QACCL;QACAC;QACAW,MAAM;YACJV;YACAP;YACAc;YACAD;YACAL;YACAC;YACAC;YACAC;QACF;IACF;IAEN,MAAMR,eAAe,CAACe;QACpBN,uBAAuBM,kBAAkBD,IAAI,CAACJ,SAAS;QACvDT,qBAAqBc;IACvB;IAEA,OAAO;QACLF;QACAb;IACF;AACF;AAEA,SAASY,4BACPd,WAAiD,EACjDC,eAA+B;IAE/B,MAAMY,UAA4B,EAAE;IACpCZ,gBAAgBiB,GAAG,CAAC,CAACC;QACnB,MAAMC,QAAQpB,WAAW,CAACmB,aAAa;QACvC,IAAIC,UAAUC,WAAW;YACvB,MAAM,IAAIC,MAAM;QAClB;QACA,MAAM,EAAEC,KAAK,EAAEC,WAAW,EAAEC,WAAW,EAAEC,aAAa,EAAE,GAAGN;QAC3D,IAAId,UAAUe;QACd,IAAIE,OAAO;YACTjB,UAAU;gBACRiB;gBACAI,UAAU;oBACRC,MAAM,CAACJ;gBACT;YACF;QACF;QACA,MAAMK,SAAyB;YAC7BzB,MAAM;YACNY,MAAM;gBACJV;gBACAwB,OAAOL,YAAYP,GAAG,CAAC,CAACW;oBACtB,MAAME,WAAWL,aAAa,CAACG,OAAOG,CAAC,CAAC;oBACxC,IAAID,aAAaV,WAAW;wBAC1B,MAAM,IAAIC,MAAM,CAAC,4BAA4B,EAAEO,OAAOG,CAAC,CAAC,CAAC;oBAC3D;oBACA,OAAO;wBACLC,GAAGJ,OAAOI,CAAC;wBACXC,GAAGL,OAAOK,CAAC;wBACXC,OAAON,OAAOO,CAAC;wBACfC,QAAQR,OAAOS,CAAC;wBAChBC,SAAS7C,eAAeqC;oBAC1B;gBACF;YACF;QACF;QACAlB,QAAQ2B,IAAI,CAACX;IACf;IAEA,OAAOhB;AACT"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { DashboardResource } from '@perses-dev/core';
|
|
2
|
+
import { DashboardResource, EphemeralDashboardResource } from '@perses-dev/core';
|
|
3
3
|
import { EmptyDashboardProps } from '../../components';
|
|
4
4
|
import { OnSaveDashboard } from '../../context';
|
|
5
5
|
export interface DashboardAppProps {
|
|
6
6
|
emptyDashboardProps?: Partial<EmptyDashboardProps>;
|
|
7
|
-
dashboardResource: DashboardResource;
|
|
7
|
+
dashboardResource: DashboardResource | EphemeralDashboardResource;
|
|
8
8
|
dashboardTitleComponent?: JSX.Element;
|
|
9
9
|
onSave?: OnSaveDashboard;
|
|
10
10
|
onDiscard?: (entity: DashboardResource) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DashboardApp.d.ts","sourceRoot":"","sources":["../../../src/views/ViewDashboard/DashboardApp.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"DashboardApp.d.ts","sourceRoot":"","sources":["../../../src/views/ViewDashboard/DashboardApp.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AAEjF,OAAO,EAQL,mBAAmB,EAGpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAkE,MAAM,eAAe,CAAC;AAEhH,MAAM,WAAW,iBAAiB;IAChC,mBAAmB,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;IACnD,iBAAiB,EAAE,iBAAiB,GAAG,0BAA0B,CAAC;IAClE,uBAAuB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtC,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAChD,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,YAAY,UAAW,iBAAiB,4CAkGpD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/views/ViewDashboard/DashboardApp.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 } from 'react';\nimport { Box } from '@mui/material';\nimport { ChartsProvider, ErrorAlert, ErrorBoundary, useChartsTheme } from '@perses-dev/components';\nimport { DashboardResource } from '@perses-dev/core';\nimport { useDatasourceStore } from '@perses-dev/plugin-system';\nimport {\n PanelDrawer,\n Dashboard,\n PanelGroupDialog,\n DeletePanelGroupDialog,\n DashboardDiscardChangesConfirmationDialog,\n DashboardToolbar,\n DeletePanelDialog,\n EmptyDashboardProps,\n EditJsonDialog,\n SaveChangesConfirmationDialog,\n} from '../../components';\nimport { OnSaveDashboard, useDashboard, useDiscardChangesConfirmationDialog, useEditMode } from '../../context';\n\nexport interface DashboardAppProps {\n emptyDashboardProps?: Partial<EmptyDashboardProps>;\n dashboardResource: DashboardResource;\n dashboardTitleComponent?: JSX.Element;\n onSave?: OnSaveDashboard;\n onDiscard?: (entity: DashboardResource) => void;\n initialVariableIsSticky?: boolean;\n isReadonly: boolean;\n isCreating?: boolean;\n}\n\nexport const DashboardApp = (props: DashboardAppProps) => {\n const {\n dashboardResource,\n dashboardTitleComponent,\n emptyDashboardProps,\n onSave,\n onDiscard,\n initialVariableIsSticky,\n isReadonly,\n isCreating,\n } = props;\n\n const chartsTheme = useChartsTheme();\n\n const { isEditMode, setEditMode } = useEditMode();\n const { dashboard, setDashboard } = useDashboard();\n const [originalDashboard, setOriginalDashboard] = useState
|
|
1
|
+
{"version":3,"sources":["../../../src/views/ViewDashboard/DashboardApp.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 } from 'react';\nimport { Box } from '@mui/material';\nimport { ChartsProvider, ErrorAlert, ErrorBoundary, useChartsTheme } from '@perses-dev/components';\nimport { DashboardResource, EphemeralDashboardResource } from '@perses-dev/core';\nimport { useDatasourceStore } from '@perses-dev/plugin-system';\nimport {\n PanelDrawer,\n Dashboard,\n PanelGroupDialog,\n DeletePanelGroupDialog,\n DashboardDiscardChangesConfirmationDialog,\n DashboardToolbar,\n DeletePanelDialog,\n EmptyDashboardProps,\n EditJsonDialog,\n SaveChangesConfirmationDialog,\n} from '../../components';\nimport { OnSaveDashboard, useDashboard, useDiscardChangesConfirmationDialog, useEditMode } from '../../context';\n\nexport interface DashboardAppProps {\n emptyDashboardProps?: Partial<EmptyDashboardProps>;\n dashboardResource: DashboardResource | EphemeralDashboardResource;\n dashboardTitleComponent?: JSX.Element;\n onSave?: OnSaveDashboard;\n onDiscard?: (entity: DashboardResource) => void;\n initialVariableIsSticky?: boolean;\n isReadonly: boolean;\n isCreating?: boolean;\n}\n\nexport const DashboardApp = (props: DashboardAppProps) => {\n const {\n dashboardResource,\n dashboardTitleComponent,\n emptyDashboardProps,\n onSave,\n onDiscard,\n initialVariableIsSticky,\n isReadonly,\n isCreating,\n } = props;\n\n const chartsTheme = useChartsTheme();\n\n const { isEditMode, setEditMode } = useEditMode();\n const { dashboard, setDashboard } = useDashboard();\n const [originalDashboard, setOriginalDashboard] = useState<\n DashboardResource | EphemeralDashboardResource | undefined\n >(undefined);\n const { setSavedDatasources } = useDatasourceStore();\n\n const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } =\n useDiscardChangesConfirmationDialog();\n\n const handleDiscardChanges = () => {\n // Reset to the original spec and exit edit mode\n if (originalDashboard) {\n setDashboard(originalDashboard);\n }\n setEditMode(false);\n closeDiscardChangesConfirmationDialog();\n if (onDiscard) {\n onDiscard(dashboard as unknown as DashboardResource);\n }\n };\n\n const onEditButtonClick = () => {\n setEditMode(true);\n setOriginalDashboard(dashboard);\n setSavedDatasources(dashboard.spec.datasources ?? {});\n };\n\n const onCancelButtonClick = () => {\n // check if dashboard has been modified\n if (JSON.stringify(dashboard) === JSON.stringify(originalDashboard)) {\n setEditMode(false);\n } else {\n openDiscardChangesConfirmationDialog({\n onDiscardChanges: () => {\n handleDiscardChanges();\n },\n onCancel: () => {\n closeDiscardChangesConfirmationDialog();\n },\n });\n }\n };\n\n return (\n <Box\n sx={{\n flexGrow: 1,\n overflowX: 'hidden',\n overflowY: 'auto',\n display: 'flex',\n flexDirection: 'column',\n }}\n >\n <DashboardToolbar\n dashboardName={dashboardResource.metadata.name}\n dashboardTitleComponent={dashboardTitleComponent}\n initialVariableIsSticky={initialVariableIsSticky}\n onSave={onSave}\n isReadonly={isReadonly}\n onEditButtonClick={onEditButtonClick}\n onCancelButtonClick={onCancelButtonClick}\n />\n <Box sx={{ padding: (theme) => theme.spacing(2), height: '100%' }}>\n <ErrorBoundary FallbackComponent={ErrorAlert}>\n <Dashboard\n emptyDashboardProps={{\n onEditButtonClick,\n ...emptyDashboardProps,\n }}\n />\n </ErrorBoundary>\n <ChartsProvider chartsTheme={chartsTheme} enablePinning={false}>\n <PanelDrawer />\n </ChartsProvider>\n <PanelGroupDialog />\n <DeletePanelGroupDialog />\n <DeletePanelDialog />\n <DashboardDiscardChangesConfirmationDialog />\n <EditJsonDialog isReadonly={!isEditMode} disableMetadataEdition={!isCreating} />\n <SaveChangesConfirmationDialog />\n </Box>\n </Box>\n );\n};\n"],"names":["useState","Box","ChartsProvider","ErrorAlert","ErrorBoundary","useChartsTheme","useDatasourceStore","PanelDrawer","Dashboard","PanelGroupDialog","DeletePanelGroupDialog","DashboardDiscardChangesConfirmationDialog","DashboardToolbar","DeletePanelDialog","EditJsonDialog","SaveChangesConfirmationDialog","useDashboard","useDiscardChangesConfirmationDialog","useEditMode","DashboardApp","props","dashboardResource","dashboardTitleComponent","emptyDashboardProps","onSave","onDiscard","initialVariableIsSticky","isReadonly","isCreating","chartsTheme","isEditMode","setEditMode","dashboard","setDashboard","originalDashboard","setOriginalDashboard","undefined","setSavedDatasources","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","handleDiscardChanges","onEditButtonClick","spec","datasources","onCancelButtonClick","JSON","stringify","onDiscardChanges","onCancel","sx","flexGrow","overflowX","overflowY","display","flexDirection","dashboardName","metadata","name","padding","theme","spacing","height","FallbackComponent","enablePinning","disableMetadataEdition"],"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,QAAQ,QAAQ,QAAQ;AACjC,SAASC,GAAG,QAAQ,gBAAgB;AACpC,SAASC,cAAc,EAAEC,UAAU,EAAEC,aAAa,EAAEC,cAAc,QAAQ,yBAAyB;AAEnG,SAASC,kBAAkB,QAAQ,4BAA4B;AAC/D,SACEC,WAAW,EACXC,SAAS,EACTC,gBAAgB,EAChBC,sBAAsB,EACtBC,yCAAyC,EACzCC,gBAAgB,EAChBC,iBAAiB,EAEjBC,cAAc,EACdC,6BAA6B,QACxB,mBAAmB;AAC1B,SAA0BC,YAAY,EAAEC,mCAAmC,EAAEC,WAAW,QAAQ,gBAAgB;AAahH,OAAO,MAAMC,eAAe,CAACC;IAC3B,MAAM,EACJC,iBAAiB,EACjBC,uBAAuB,EACvBC,mBAAmB,EACnBC,MAAM,EACNC,SAAS,EACTC,uBAAuB,EACvBC,UAAU,EACVC,UAAU,EACX,GAAGR;IAEJ,MAAMS,cAAcxB;IAEpB,MAAM,EAAEyB,UAAU,EAAEC,WAAW,EAAE,GAAGb;IACpC,MAAM,EAAEc,SAAS,EAAEC,YAAY,EAAE,GAAGjB;IACpC,MAAM,CAACkB,mBAAmBC,qBAAqB,GAAGnC,SAEhDoC;IACF,MAAM,EAAEC,mBAAmB,EAAE,GAAG/B;IAEhC,MAAM,EAAEgC,oCAAoC,EAAEC,qCAAqC,EAAE,GACnFtB;IAEF,MAAMuB,uBAAuB;QAC3B,gDAAgD;QAChD,IAAIN,mBAAmB;YACrBD,aAAaC;QACf;QACAH,YAAY;QACZQ;QACA,IAAId,WAAW;YACbA,UAAUO;QACZ;IACF;IAEA,MAAMS,oBAAoB;QACxBV,YAAY;QACZI,qBAAqBH;YACDA;QAApBK,oBAAoBL,CAAAA,8BAAAA,UAAUU,IAAI,CAACC,WAAW,cAA1BX,yCAAAA,8BAA8B,CAAC;IACrD;IAEA,MAAMY,sBAAsB;QAC1B,uCAAuC;QACvC,IAAIC,KAAKC,SAAS,CAACd,eAAea,KAAKC,SAAS,CAACZ,oBAAoB;YACnEH,YAAY;QACd,OAAO;YACLO,qCAAqC;gBACnCS,kBAAkB;oBAChBP;gBACF;gBACAQ,UAAU;oBACRT;gBACF;YACF;QACF;IACF;IAEA,qBACE,MAACtC;QACCgD,IAAI;YACFC,UAAU;YACVC,WAAW;YACXC,WAAW;YACXC,SAAS;YACTC,eAAe;QACjB;;0BAEA,KAAC1C;gBACC2C,eAAelC,kBAAkBmC,QAAQ,CAACC,IAAI;gBAC9CnC,yBAAyBA;gBACzBI,yBAAyBA;gBACzBF,QAAQA;gBACRG,YAAYA;gBACZc,mBAAmBA;gBACnBG,qBAAqBA;;0BAEvB,MAAC3C;gBAAIgD,IAAI;oBAAES,SAAS,CAACC,QAAUA,MAAMC,OAAO,CAAC;oBAAIC,QAAQ;gBAAO;;kCAC9D,KAACzD;wBAAc0D,mBAAmB3D;kCAChC,cAAA,KAACK;4BACCe,qBAAqB;gCACnBkB;gCACA,GAAGlB,mBAAmB;4BACxB;;;kCAGJ,KAACrB;wBAAe2B,aAAaA;wBAAakC,eAAe;kCACvD,cAAA,KAACxD;;kCAEH,KAACE;kCACD,KAACC;kCACD,KAACG;kCACD,KAACF;kCACD,KAACG;wBAAea,YAAY,CAACG;wBAAYkC,wBAAwB,CAACpC;;kCAClE,KAACb;;;;;AAIT,EAAE"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@perses-dev/dashboards",
|
|
3
|
-
"version": "0.44.0-
|
|
3
|
+
"version": "0.44.0-rc2",
|
|
4
4
|
"description": "The dashboards feature in Perses",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"homepage": "https://github.com/perses/perses/blob/main/README.md",
|
|
@@ -29,9 +29,9 @@
|
|
|
29
29
|
"lint:fix": "eslint --fix src --ext .ts,.tsx"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@perses-dev/components": "0.44.0-
|
|
33
|
-
"@perses-dev/core": "0.44.0-
|
|
34
|
-
"@perses-dev/plugin-system": "0.44.0-
|
|
32
|
+
"@perses-dev/components": "0.44.0-rc2",
|
|
33
|
+
"@perses-dev/core": "0.44.0-rc2",
|
|
34
|
+
"@perses-dev/plugin-system": "0.44.0-rc2",
|
|
35
35
|
"@types/react-grid-layout": "^1.3.2",
|
|
36
36
|
"date-fns": "^2.28.0",
|
|
37
37
|
"immer": "^9.0.15",
|
|
@@ -45,8 +45,8 @@
|
|
|
45
45
|
"zustand": "^4.3.3"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
|
-
"@perses-dev/internal-utils": "0.44.0-
|
|
49
|
-
"@perses-dev/storybook": "0.44.0-
|
|
48
|
+
"@perses-dev/internal-utils": "0.44.0-rc2",
|
|
49
|
+
"@perses-dev/storybook": "0.44.0-rc2",
|
|
50
50
|
"history": "^5.3.0",
|
|
51
51
|
"intersection-observer": "^0.12.2"
|
|
52
52
|
},
|