Skip to content

Commit facc8a6

Browse files
shahroknishahrokni
committed
[BREAKINGCHANE] remove dashbaord resource dependecy
Signed-off-by: Seyed Mahmoud SHAHROKNI <seyedmahmoud.shahrokni@amadeus.com> Signed-off-by: Seyed Mahmoud SHAHROKNI <seyedmahmoud.shahrokni@amadeus.com> Signed-off-by: Seyed Mahmoud SHAHROKNI <seyedmahmoud.shahrokni@amadeus.com>
1 parent 9e068ec commit facc8a6

11 files changed

Lines changed: 101 additions & 104 deletions

File tree

‎dashboards/src/components/Datasources/EditDatasourcesButton.tsx‎

Lines changed: 7 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import { ReactElement, useState } from 'react';
1515
import { Button } from '@mui/material';
1616
import PencilIcon from 'mdi-material-ui/PencilOutline';
1717
import { Drawer, InfoTooltip } from '@perses-dev/components';
18-
import { DashboardResource, EphemeralDashboardResource } from '@perses-dev/core'; // TODO weird that ephemeral dashboard is required here
1918
import { DatasourceSpec } from '@perses-dev/spec';
2019
import { useDatasourceStore } from '@perses-dev/plugin-system';
2120
import { TOOLTIP_TEXT, editButtonStyle } from '../../constants';
@@ -60,23 +59,13 @@ export function EditDatasourcesButton(): ReactElement {
6059
{} as Record<string, DatasourceSpec>
6160
);
6261

63-
setDashboard(
64-
dashboard.kind === 'Dashboard'
65-
? ({
66-
...dashboard,
67-
spec: {
68-
...dashboard.spec,
69-
datasources: datasources,
70-
},
71-
} as DashboardResource)
72-
: ({
73-
...dashboard,
74-
spec: {
75-
...dashboard.spec,
76-
datasources: datasources,
77-
},
78-
} as EphemeralDashboardResource)
79-
);
62+
setDashboard({
63+
...dashboard,
64+
spec: {
65+
...dashboard.spec,
66+
datasources: datasources,
67+
},
68+
});
8069
setSavedDatasources(newSavedDatasources);
8170
setLocalDatasources(datasources);
8271
setIsDatasourceEditorOpen(false);

‎dashboards/src/components/DownloadButton/serializeDashboard.ts‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,22 +11,25 @@
1111
// See the License for the specific language governing permissions and
1212
// limitations under the License.
1313

14-
import { DashboardResource, EphemeralDashboardResource } from '@perses-dev/core'; // TODO metadata should not be used, same for ephemeral dashboard
1514
import { stringify } from 'yaml';
15+
import { DashboardMinimalResource } from '../../context';
16+
17+
//TODO: Although the previous comment suggests the metadata not should not be used, I keep them. Need to be discussed.
18+
// Check git history to find prev comment
1619

1720
type SerializedDashboard = {
1821
contentType: string;
1922
content: string;
2023
};
2124

2225
function serializeYaml(
23-
dashboard: DashboardResource | EphemeralDashboardResource,
26+
dashboard: DashboardMinimalResource,
2427
shape?: 'cr-v1alpha1' | 'cr-v1alpha2'
2528
): SerializedDashboard {
2629
let content: string;
2730

2831
if (shape === 'cr-v1alpha1') {
29-
const name = dashboard.metadata.name.toLowerCase().replace(/[^a-z0-9-]/g, '-');
32+
const name = (dashboard.metadata.name as string)?.toLowerCase().replace(/[^a-z0-9-]/g, '-');
3033
content = stringify(
3134
{
3235
apiVersion: 'perses.dev/v1alpha1',
@@ -45,7 +48,7 @@ function serializeYaml(
4548
{ schema: 'yaml-1.1' }
4649
);
4750
} else if (shape === 'cr-v1alpha2') {
48-
const name = dashboard.metadata.name.toLowerCase().replace(/[^a-z0-9-]/g, '-');
51+
const name = (dashboard.metadata.name as string).toLowerCase().replace(/[^a-z0-9-]/g, '-');
4952
content = stringify(
5053
{
5154
apiVersion: 'perses.dev/v1alpha2',
@@ -73,7 +76,7 @@ function serializeYaml(
7376
}
7477

7578
export function serializeDashboard(
76-
dashboard: DashboardResource | EphemeralDashboardResource,
79+
dashboard: DashboardMinimalResource,
7780
format: 'json' | 'yaml',
7881
shape?: 'cr-v1alpha1' | 'cr-v1alpha2'
7982
): SerializedDashboard {

‎dashboards/src/components/LeaveDialog/LeaveDialog.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@
1111
// See the License for the specific language governing permissions and
1212
// limitations under the License.
1313

14-
import { DashboardResource, EphemeralDashboardResource } from '@perses-dev/core'; // TODO only dashboard spec should be used
1514
import { ReactElement, ReactNode, useEffect } from 'react';
1615
import { useBlocker } from 'react-router-dom';
1716
import { DiscardChangesConfirmationDialog } from '@perses-dev/components';
1817
import type { BlockerFunction } from '@remix-run/router';
18+
import { DashboardMinimalResource } from '../../context';
1919

2020
const handleRouteChange = (event: BeforeUnloadEvent): string => {
2121
event.preventDefault();
@@ -69,8 +69,8 @@ export function LeaveDialog({
6969
original,
7070
current,
7171
}: {
72-
original: DashboardResource | EphemeralDashboardResource | undefined;
73-
current: DashboardResource | EphemeralDashboardResource;
72+
original: DashboardMinimalResource | undefined;
73+
current: DashboardMinimalResource;
7474
}): ReactNode {
7575
const handleIsBlocked: BlockerFunction = (ctx) => {
7676
if (JSON.stringify(original) !== JSON.stringify(current)) {

‎dashboards/src/context/DashboardProvider/DashboardProvider.tsx‎

Lines changed: 26 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,8 @@ import { devtools } from 'zustand/middleware';
1818
import { immer } from 'zustand/middleware/immer';
1919
import { shallow } from 'zustand/shallow';
2020
import { createContext, ReactElement, ReactNode, useCallback, useContext, useEffect, useState } from 'react';
21-
import {
22-
ProjectMetadata,
23-
DashboardResource,
24-
DEFAULT_REFRESH_INTERVAL,
25-
EphemeralDashboardResource,
26-
} from '@perses-dev/core';
27-
import { Display, DurationString, DatasourceSpec } from '@perses-dev/spec';
21+
import { DEFAULT_REFRESH_INTERVAL } from '@perses-dev/core';
22+
import { Display, DurationString, DatasourceSpec, DashboardSpec } from '@perses-dev/spec';
2823
import { usePlugin, usePluginRegistry } from '@perses-dev/plugin-system';
2924
import { createPanelGroupEditorSlice, PanelGroupEditorSlice } from './panel-group-editor-slice';
3025
import { convertLayoutsToPanelGroups, createPanelGroupSlice, PanelGroupSlice } from './panel-group-slice';
@@ -40,6 +35,20 @@ import { createPanelDefinition } from './common';
4035
import { createViewPanelSlice, ViewPanelSlice, VirtualPanelRef } from './view-panel-slice';
4136
import { createLinksSlice, LinksSlice } from './links-slice';
4237

38+
export type DashboardKind = 'Dashboard' | 'EphemeralDashboard';
39+
export type DashboardGenericMetaData = Record<string, string | number | string[] | undefined>;
40+
41+
/* TODO: There is an open and ongoing issue whether the meta-data should be removed or not.
42+
Such a decision would affect DashbaordProvider and buildDatasourceProxyUrl
43+
https://github.com/perses/perses/issues/4016
44+
*/
45+
export interface DashboardMinimalResource {
46+
kind: DashboardKind;
47+
name: string;
48+
spec: DashboardSpec;
49+
metadata: DashboardGenericMetaData;
50+
}
51+
4352
export interface DashboardStoreState
4453
extends PanelGroupSlice,
4554
PanelSlice,
@@ -55,9 +64,10 @@ export interface DashboardStoreState
5564
LinksSlice {
5665
isEditMode: boolean;
5766
setEditMode: (isEditMode: boolean) => void;
58-
setDashboard: (dashboard: DashboardResource | EphemeralDashboardResource) => void;
59-
kind: DashboardResource['kind'] | EphemeralDashboardResource['kind'];
60-
metadata: ProjectMetadata;
67+
setDashboard: (dashboard: DashboardMinimalResource) => void;
68+
dashboardName: string;
69+
kind: DashboardKind;
70+
metadata: DashboardGenericMetaData;
6171
duration: DurationString;
6272
refreshInterval: DurationString;
6373
display?: Display;
@@ -76,7 +86,7 @@ export function useDashboardStore<T>(selector: (state: DashboardStoreState) => T
7686
}
7787

7888
export interface DashboardStoreProps {
79-
dashboardResource: DashboardResource | EphemeralDashboardResource;
89+
dashboardResource: DashboardMinimalResource;
8090
isEditMode?: boolean;
8191
viewPanelRef?: VirtualPanelRef;
8292
setViewPanelRef?: (viewPanelRef: VirtualPanelRef | undefined) => void;
@@ -124,11 +134,12 @@ function initStore(props: DashboardProviderProps): StoreApi<DashboardStoreState>
124134
kind,
125135
metadata,
126136
spec: { display, duration, refreshInterval = DEFAULT_REFRESH_INTERVAL, datasources, layouts = [], panels = {} },
137+
name,
127138
} = dashboardResource;
128139

129140
const links = dashboardResource.spec.links ?? [];
130141

131-
const ttl = 'ttl' in dashboardResource.spec ? dashboardResource.spec.ttl : undefined;
142+
const ttl = 'ttl' in dashboardResource.spec ? (dashboardResource.spec.ttl as DurationString) : undefined;
132143

133144
const store = createStore<DashboardStoreState>()(
134145
immer(
@@ -151,6 +162,7 @@ function initStore(props: DashboardProviderProps): StoreApi<DashboardStoreState>
151162
...createDiscardChangesDialogSlice(...args),
152163
...createEditJsonDialogSlice(...args),
153164
...createSaveChangesDialogSlice(...args),
165+
dashboardName: name,
154166
kind,
155167
metadata,
156168
display,
@@ -163,12 +175,14 @@ function initStore(props: DashboardProviderProps): StoreApi<DashboardStoreState>
163175
set({ isEditMode });
164176
},
165177
setDashboard: ({
178+
name,
166179
kind,
167180
metadata,
168181
spec: { display, panels = {}, layouts = [], duration, refreshInterval, datasources = {}, links = [] },
169182
}): void => {
170183
set((state) => {
171184
state.kind = kind;
185+
state.dashboardName = name;
172186
state.metadata = metadata;
173187
state.display = display;
174188
state.panels = panels;

‎dashboards/src/context/DashboardProvider/common.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@
1111
// See the License for the specific language governing permissions and
1212
// limitations under the License.
1313

14-
import { DashboardResource, EphemeralDashboardResource } from '@perses-dev/core'; // TODO
1514
import { PanelDefinition, UnknownSpec } from '@perses-dev/spec';
15+
import { DashboardMinimalResource } from './DashboardProvider';
1616

17-
export type OnSaveDashboard = (dashboard: DashboardResource | EphemeralDashboardResource) => Promise<unknown>;
17+
export type OnSaveDashboard = (dashboard: DashboardMinimalResource) => Promise<unknown>;
1818

1919
/**
2020
* The middleware applied to the DashboardStore (can be used as generic argument in StateCreator).

‎dashboards/src/context/DashboardProvider/dashboard-provider-api.ts‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,9 @@
1212
// limitations under the License.
1313

1414
import { useCallback, useMemo } from 'react';
15-
import {
16-
DashboardResource,
17-
EphemeralDashboardResource,
18-
PanelGroupItemLayout,
19-
PanelGroupDefinition,
20-
PanelGroupItemId,
21-
} from '@perses-dev/core'; // TODO
15+
import { PanelGroupItemLayout, PanelGroupDefinition, PanelGroupItemId } from '@perses-dev/core'; // TODO
2216
import { DurationString, Link, PanelDefinition, PanelGroupId } from '@perses-dev/spec';
23-
import { DashboardStoreState, useDashboardStore } from './DashboardProvider';
17+
import { DashboardMinimalResource, DashboardStoreState, useDashboardStore } from './DashboardProvider';
2418
import { DeletePanelGroupDialogState } from './delete-panel-group-slice';
2519
import { PanelGroupEditor } from './panel-group-editor-slice';
2620
import { PanelEditorState } from './panel-editor-slice';
@@ -41,7 +35,7 @@ export function useEditMode(): { setEditMode: (isEditMode: boolean) => void; isE
4135
const selectDashboardActions: ({ setDashboard, openAddPanelGroup, openAddPanel }: DashboardStoreState) => {
4236
openAddPanelGroup: () => void;
4337
openAddPanel: (panelGroupId?: PanelGroupId) => void;
44-
setDashboard: (dashboard: DashboardResource | EphemeralDashboardResource) => void;
38+
setDashboard: (dashboard: DashboardMinimalResource) => void;
4539
} = ({ setDashboard, openAddPanelGroup, openAddPanel }: DashboardStoreState) => ({
4640
setDashboard,
4741
openAddPanelGroup,
@@ -53,7 +47,7 @@ const selectDashboardActions: ({ setDashboard, openAddPanelGroup, openAddPanel }
5347
export function useDashboardActions(): {
5448
openAddPanelGroup: () => void;
5549
openAddPanel: () => void;
56-
setDashboard: (dashboard: DashboardResource | EphemeralDashboardResource) => void;
50+
setDashboard: (dashboard: DashboardMinimalResource) => void;
5751
} {
5852
const { setDashboard, openAddPanelGroup, openAddPanel } = useDashboardStore(selectDashboardActions);
5953
return {

‎dashboards/src/context/DatasourceStoreProvider.tsx‎

Lines changed: 14 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,7 @@
1212
// limitations under the License.
1313

1414
import { ReactElement, ReactNode, useCallback, useMemo, useState } from 'react';
15-
import {
16-
DashboardResource,
17-
EphemeralDashboardResource,
18-
DatasourceDefinition,
19-
BuildDatasourceProxyUrlParams,
20-
DatasourceApi,
21-
} from '@perses-dev/core'; // TODO
15+
import { DatasourceDefinition, BuildDatasourceProxyUrlParams, DatasourceApi } from '@perses-dev/core'; // TODO
2216
import { DashboardSpec, DatasourceSelector, DatasourceSpec } from '@perses-dev/spec';
2317
import {
2418
DatasourceStoreContext,
@@ -29,9 +23,10 @@ import {
2923
DatasourceClient,
3024
DatasourceSelectItem,
3125
} from '@perses-dev/plugin-system';
26+
import { DashboardMinimalResource } from './DashboardProvider';
3227

3328
export interface DatasourceStoreProviderProps {
34-
dashboardResource?: DashboardResource | EphemeralDashboardResource;
29+
dashboardResource?: DashboardMinimalResource;
3530
projectName?: string;
3631
datasourceApi: DatasourceApi;
3732
children?: ReactNode;
@@ -61,8 +56,8 @@ export function DatasourceStoreProvider(props: DatasourceStoreProviderProps): Re
6156
return {
6257
spec: dashboardDatasource.spec,
6358
proxyUrl: buildDatasourceProxyUrl(datasourceApi, {
64-
project: dashboardResource.metadata.project,
65-
dashboard: dashboardResource.metadata.name,
59+
project: dashboardResource.metadata.project as string,
60+
dashboard: dashboardResource.metadata.name as string,
6661
name: dashboardDatasource.name,
6762
}),
6863
};
@@ -71,7 +66,7 @@ export function DatasourceStoreProvider(props: DatasourceStoreProviderProps): Re
7166

7267
if (project) {
7368
// Try to find it at the project level as a Datasource resource
74-
const datasource = await datasourceApi.getDatasource(project, selector);
69+
const datasource = await datasourceApi.getDatasource(String(project), selector);
7570
if (datasource !== undefined) {
7671
return {
7772
spec: datasource.spec,
@@ -126,7 +121,7 @@ export function DatasourceStoreProvider(props: DatasourceStoreProviderProps): Re
126121
async (datasourcePluginName: string): Promise<DatasourceSelectItemGroup[]> => {
127122
const [pluginMetadata, datasources, globalDatasources] = await Promise.all([
128123
listPluginMetadata(['Datasource']),
129-
project ? datasourceApi.listDatasources(project, datasourcePluginName) : [],
124+
project ? datasourceApi.listDatasources(String(project), datasourcePluginName) : [],
130125
datasourceApi.listGlobalDatasources(datasourcePluginName),
131126
]);
132127

@@ -182,23 +177,13 @@ export function DatasourceStoreProvider(props: DatasourceStoreProviderProps): Re
182177
const setLocalDatasources = useCallback(
183178
(datasources: Record<string, DatasourceSpec>) => {
184179
if (dashboardResource) {
185-
setDashboardResource(
186-
dashboardResource.kind === 'Dashboard'
187-
? ({
188-
...dashboardResource,
189-
spec: {
190-
...dashboardResource.spec,
191-
datasources: datasources,
192-
},
193-
} as DashboardResource)
194-
: ({
195-
...dashboardResource,
196-
spec: {
197-
...dashboardResource.spec,
198-
datasources: datasources,
199-
},
200-
} as EphemeralDashboardResource)
201-
);
180+
setDashboardResource({
181+
...dashboardResource,
182+
spec: {
183+
...dashboardResource.spec,
184+
datasources: datasources,
185+
},
186+
});
202187
}
203188
},
204189
[dashboardResource]

0 commit comments

Comments
 (0)