Skip to content

Commit 9aa93dd

Browse files
openshift-merge-bot[bot]openshift-merge-bot[bot]
authored
Merge pull request #451 from jgbernalp/fix-same-name-dashboard-selection
OU-880: fix: allow correct selection of dashboard with same name in different projects
2 parents dd384f7 + fec4125 commit 9aa93dd

15 files changed

Lines changed: 177 additions & 107 deletions

web/src/components/dashboards/shared/custom-time-range-modal.tsx renamed to web/src/components/dashboards/legacy/custom-time-range-modal.tsx

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
import * as _ from 'lodash-es';
2-
import * as React from 'react';
3-
import { useTranslation } from 'react-i18next';
4-
import { useDispatch } from 'react-redux';
51
import {
62
Button,
73
DatePicker,
@@ -16,12 +12,15 @@ import {
1612
ModalVariant,
1713
TimePicker,
1814
} from '@patternfly/react-core';
15+
import * as _ from 'lodash-es';
16+
import * as React from 'react';
17+
import { useTranslation } from 'react-i18next';
18+
import { useDispatch } from 'react-redux';
1919

2020
import { dashboardsSetEndTime, dashboardsSetTimespan, Perspective } from '../../../actions/observe';
2121

22-
import { QueryParams } from '../../query-params';
23-
import { useIsPerses } from './useIsPerses';
2422
import { NumberParam, useQueryParam } from 'use-query-params';
23+
import { QueryParams } from '../../query-params';
2524

2625
const zeroPad = (number: number) => (number < 10 ? `0${number}` : number);
2726

@@ -51,7 +50,6 @@ const CustomTimeRangeModal: React.FC<CustomTimeRangeModalProps> = ({
5150
endTime,
5251
}) => {
5352
const { t } = useTranslation(process.env.I18N_NAMESPACE);
54-
const isPerses = useIsPerses();
5553
const [, setEndTime] = useQueryParam(QueryParams.EndTime, NumberParam);
5654
const [, setTimeRange] = useQueryParam(QueryParams.TimeRange, NumberParam);
5755

@@ -74,10 +72,8 @@ const CustomTimeRangeModal: React.FC<CustomTimeRangeModalProps> = ({
7472
const from = Date.parse(`${fromDate} ${fromTime}`);
7573
const to = Date.parse(`${toDate} ${toTime}`);
7674
if (_.isInteger(from) && _.isInteger(to)) {
77-
if (!isPerses) {
78-
dispatch(dashboardsSetEndTime(to, perspective));
79-
dispatch(dashboardsSetTimespan(to - from, perspective));
80-
}
75+
dispatch(dashboardsSetEndTime(to, perspective));
76+
dispatch(dashboardsSetTimespan(to - from, perspective));
8177
setEndTime(Number(to.toString()));
8278
setTimeRange(Number((to - from).toString()));
8379
setClosed();

‎web/src/components/dashboards/legacy/dashboard-skeleton-legacy.tsx‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
import * as _ from 'lodash-es';
2+
import * as React from 'react';
3+
import { Helmet } from 'react-helmet';
4+
import { useTranslation } from 'react-i18next';
5+
6+
import {
7+
Divider,
8+
PageSection,
9+
Split,
10+
SplitItem,
11+
Stack,
12+
StackItem,
13+
Title,
14+
} from '@patternfly/react-core';
15+
import { usePerspective } from '../../hooks/usePerspective';
16+
import { CombinedDashboardMetadata } from '../perses/hooks/useDashboardsData';
17+
import { DashboardDropdown } from '../shared/dashboard-dropdown';
18+
import { PollIntervalDropdown, TimespanDropdown } from './time-dropdowns';
19+
import { LegacyDashboardsAllVariableDropdowns } from './legacy-variable-dropdowns';
20+
21+
const HeaderTop: React.FC = React.memo(() => {
22+
const { t } = useTranslation(process.env.I18N_NAMESPACE);
23+
24+
return (
25+
<Split hasGutter isWrappable>
26+
<SplitItem isFilled>
27+
<Title headingLevel="h1">{t('Dashboards')}</Title>
28+
</SplitItem>
29+
<SplitItem>
30+
<Split hasGutter isWrappable>
31+
<SplitItem>
32+
<TimespanDropdown />
33+
</SplitItem>
34+
<SplitItem>
35+
<PollIntervalDropdown />
36+
</SplitItem>
37+
</Split>
38+
</SplitItem>
39+
</Split>
40+
);
41+
});
42+
43+
type MonitoringDashboardsLegacyPageProps = React.PropsWithChildren<{
44+
boardItems: CombinedDashboardMetadata[];
45+
changeBoard: (dashboardName: string) => void;
46+
dashboardName: string;
47+
}>;
48+
49+
export const DashboardSkeletonLegacy: React.FC<MonitoringDashboardsLegacyPageProps> = React.memo(
50+
({ children, boardItems, changeBoard, dashboardName }) => {
51+
const { t } = useTranslation(process.env.I18N_NAMESPACE);
52+
53+
const { perspective } = usePerspective();
54+
55+
const onChangeBoard = React.useCallback(
56+
(selectedDashboard: string) => {
57+
changeBoard(selectedDashboard);
58+
},
59+
[changeBoard],
60+
);
61+
62+
return (
63+
<>
64+
{perspective !== 'dev' && (
65+
<Helmet>
66+
<title>{t('Metrics dashboards')}</title>
67+
</Helmet>
68+
)}
69+
<PageSection hasBodyWrapper={false}>
70+
{perspective !== 'dev' && <HeaderTop />}
71+
<Stack hasGutter>
72+
{!_.isEmpty(boardItems) && (
73+
<StackItem>
74+
<DashboardDropdown
75+
items={boardItems}
76+
onChange={onChangeBoard}
77+
selectedKey={dashboardName}
78+
/>
79+
</StackItem>
80+
)}
81+
82+
<StackItem>
83+
<LegacyDashboardsAllVariableDropdowns key={dashboardName} />
84+
</StackItem>
85+
{perspective === 'dev' ? (
86+
<StackItem>
87+
<Split hasGutter>
88+
<SplitItem isFilled />
89+
<SplitItem>
90+
<TimespanDropdown />
91+
</SplitItem>
92+
<SplitItem>
93+
<PollIntervalDropdown />
94+
</SplitItem>
95+
</Split>
96+
</StackItem>
97+
) : (
98+
<StackItem>
99+
<Split>
100+
<SplitItem isFilled />
101+
</Split>
102+
</StackItem>
103+
)}
104+
</Stack>
105+
</PageSection>
106+
<Divider />
107+
{children}
108+
</>
109+
);
110+
},
111+
);

web/src/components/dashboards/shared/error.tsx renamed to web/src/components/dashboards/legacy/error.tsx

File renamed without changes.

‎web/src/components/dashboards/legacy/graph.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { dashboardsSetEndTime, dashboardsSetTimespan, Perspective } from '../../
55
import { FormatSeriesTitle, QueryBrowser } from '../../query-browser';
66
import { MonitoringState } from '../../../reducers/observe';
77
import { getLegacyObserveState } from '../../hooks/usePerspective';
8-
import { DEFAULT_GRAPH_SAMPLES } from '../shared/utils';
8+
import { DEFAULT_GRAPH_SAMPLES } from './utils';
99
import { CustomDataSource } from '@openshift-console/dynamic-plugin-sdk/lib/extensions/dashboard-data-source';
1010

1111
type Props = {

‎web/src/components/dashboards/legacy/legacy-dashboard-page.tsx‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,8 @@ import { LoadingInline } from '../../../components/console/console-shared/src/co
88
import withFallback from '../../console/console-shared/error/fallbacks/withFallback';
99
import { usePerspective } from '../../hooks/usePerspective';
1010
import { LegacyDashboard } from '../legacy/legacy-dashboard';
11-
import DashboardSkeleton from '../shared/dashboard-skeleton';
12-
import ErrorAlert from '../shared/error';
13-
import { PersesContext } from '../shared/useIsPerses';
11+
import ErrorAlert from './error';
12+
import { DashboardSkeletonLegacy } from './dashboard-skeleton-legacy';
1413
import { useLegacyDashboards } from './useLegacyDashboards';
1514

1615
type LegacyDashboardsPageProps = {
@@ -34,7 +33,7 @@ const LegacyDashboardsPage_: React.FC<LegacyDashboardsPageProps> = ({
3433
const { t } = useTranslation(process.env.I18N_NAMESPACE);
3534

3635
return (
37-
<DashboardSkeleton
36+
<DashboardSkeletonLegacy
3837
boardItems={legacyDashboardsMetadata}
3938
changeBoard={changeLegacyDashboard}
4039
dashboardName={legacyDashboard}
@@ -50,7 +49,7 @@ const LegacyDashboardsPage_: React.FC<LegacyDashboardsPageProps> = ({
5049
<LegacyDashboard rows={legacyRows} perspective={perspective} />
5150
)}
5251
</Overview>
53-
</DashboardSkeleton>
52+
</DashboardSkeletonLegacy>
5453
);
5554
};
5655

@@ -59,9 +58,7 @@ const LegacyDashboardsPage: React.FC = () => {
5958

6059
return (
6160
<QueryParamProvider adapter={ReactRouter5Adapter}>
62-
<PersesContext.Provider value={false}>
63-
<LegacyDashboardsPage_ urlBoard={params?.dashboardName} namespace={params?.ns} />
64-
</PersesContext.Provider>
61+
<LegacyDashboardsPage_ urlBoard={params?.dashboardName} namespace={params?.ns} />
6562
</QueryParamProvider>
6663
);
6764
};

‎web/src/components/dashboards/legacy/legacy-variable-dropdowns.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
Stack,
1616
StackItem,
1717
SplitItem,
18+
Split,
1819
} from '@patternfly/react-core';
1920
import * as React from 'react';
2021
import { useTranslation } from 'react-i18next';
@@ -34,10 +35,7 @@ import {
3435
import { getTimeRanges, isTimeoutError, QUERY_CHUNK_SIZE } from '../../utils';
3536
import { getLegacyObserveState, usePerspective } from '../../hooks/usePerspective';
3637
import { MonitoringState } from '../../../reducers/observe';
37-
import {
38-
DEFAULT_GRAPH_SAMPLES,
39-
MONITORING_DASHBOARDS_VARIABLE_ALL_OPTION_KEY,
40-
} from '../shared/utils';
38+
import { DEFAULT_GRAPH_SAMPLES, MONITORING_DASHBOARDS_VARIABLE_ALL_OPTION_KEY } from './utils';
4139
import {
4240
DataSource,
4341
isDataSource,
@@ -324,7 +322,7 @@ export const LegacyDashboardsAllVariableDropdowns: React.FC = () => {
324322
}
325323

326324
return (
327-
<>
325+
<Split hasGutter isWrappable>
328326
{variables.keySeq().map((name: string) => (
329327
<LegacyDashboardsVariableDropdown
330328
id={name}
@@ -334,7 +332,7 @@ export const LegacyDashboardsAllVariableDropdowns: React.FC = () => {
334332
perspective={perspective}
335333
/>
336334
))}
337-
</>
335+
</Split>
338336
);
339337
};
340338

‎web/src/components/dashboards/legacy/single-stat.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import * as React from 'react';
33
import { PrometheusEndpoint, PrometheusResponse } from '@openshift-console/dynamic-plugin-sdk';
44
import { Bullseye, Title } from '@patternfly/react-core';
55

6-
import ErrorAlert from '../shared/error';
6+
import ErrorAlert from './error';
77
import { getPrometheusURL } from '../../console/graphs/helpers';
88
import { usePoll } from '../../console/utils/poll-hook';
99
import { useSafeFetch } from '../../console/utils/safe-fetch-hook';

‎web/src/components/dashboards/legacy/table.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import * as _ from 'lodash-es';
1616
import * as React from 'react';
1717
import { useTranslation } from 'react-i18next';
1818

19-
import ErrorAlert from '../shared/error';
19+
import ErrorAlert from './error';
2020
import { getPrometheusURL } from '../../console/graphs/helpers';
2121
import { usePoll } from '../../console/utils/poll-hook';
2222
import { useSafeFetch } from '../../console/utils/safe-fetch-hook';

web/src/components/dashboards/shared/time-dropdowns.tsx renamed to web/src/components/dashboards/legacy/time-dropdowns.tsx

Lines changed: 16 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,25 @@
1+
import { Stack, StackItem } from '@patternfly/react-core';
2+
import { SimpleSelect, SimpleSelectOption } from '@patternfly/react-templates';
13
import * as _ from 'lodash-es';
24
import * as React from 'react';
35
import { useTranslation } from 'react-i18next';
46
import { useDispatch, useSelector } from 'react-redux';
7+
import { NumberParam, useQueryParam } from 'use-query-params';
58
import {
69
dashboardsSetEndTime,
710
dashboardsSetPollInterval,
811
dashboardsSetTimespan,
912
} from '../../../actions/observe';
10-
import { useBoolean } from '../../hooks/useBoolean';
11-
import CustomTimeRangeModal from '../shared/custom-time-range-modal';
12-
import { getLegacyObserveState, usePerspective } from '../../hooks/usePerspective';
1313
import { MonitoringState } from '../../../reducers/observe';
14-
import {
15-
DEFAULT_REFRESH_INTERVAL,
16-
DropDownPollInterval,
17-
} from '../../../components/dropdown-poll-interval';
18-
import { QueryParams } from '../../query-params';
19-
import { NumberParam, useQueryParam } from 'use-query-params';
20-
import { useIsPerses } from './useIsPerses';
2114
import {
2215
formatPrometheusDuration,
2316
parsePrometheusDuration,
2417
} from '../../console/console-shared/src/datetime/prometheus';
25-
import { SimpleSelect, SimpleSelectOption } from '@patternfly/react-templates';
26-
import { Stack, StackItem } from '@patternfly/react-core';
18+
import { DEFAULT_REFRESH_INTERVAL, DropDownPollInterval } from '../../dropdown-poll-interval';
19+
import { useBoolean } from '../../hooks/useBoolean';
20+
import { getLegacyObserveState, usePerspective } from '../../hooks/usePerspective';
21+
import { QueryParams } from '../../query-params';
22+
import CustomTimeRangeModal from './custom-time-range-modal';
2723

2824
const CUSTOM_TIME_RANGE_KEY = 'CUSTOM_TIME_RANGE_KEY';
2925
const DEFAULT_TIMERANGE = '30m';
@@ -32,7 +28,6 @@ export const TimespanDropdown: React.FC = () => {
3228
const { t } = useTranslation(process.env.I18N_NAMESPACE);
3329

3430
const { perspective } = usePerspective();
35-
const isPerses = useIsPerses();
3631

3732
const [isModalOpen, , setModalOpen, setModalClosed] = useBoolean(false);
3833

@@ -59,13 +54,11 @@ export const TimespanDropdown: React.FC = () => {
5954
} else {
6055
setTimeRange(parsePrometheusDuration(v));
6156
setEndTime(undefined);
62-
if (!isPerses) {
63-
dispatch(dashboardsSetTimespan(parsePrometheusDuration(v), perspective));
64-
dispatch(dashboardsSetEndTime(null, perspective));
65-
}
57+
dispatch(dashboardsSetTimespan(parsePrometheusDuration(v), perspective));
58+
dispatch(dashboardsSetEndTime(null, perspective));
6659
}
6760
},
68-
[setModalOpen, dispatch, perspective, setTimeRange, setEndTime, isPerses],
61+
[setModalOpen, dispatch, perspective, setTimeRange, setEndTime],
6962
);
7063

7164
const initialOptions = React.useMemo<SimpleSelectOption[]>(() => {
@@ -92,8 +85,8 @@ export const TimespanDropdown: React.FC = () => {
9285
return intervalOptions.map((o) => ({ ...o, selected: o.value === selectedKey }));
9386
}, [selectedKey, t, timeRangeFromParams, setTimeRange, setEndTime]);
9487

95-
const defaultTimerange = (isPerses ? timeRangeFromParams : timespan) ?? undefined;
96-
const defaultEndTime = (isPerses ? endTimeFromParams : endTime) ?? undefined;
88+
const defaultTimerange = timespan ?? undefined;
89+
const defaultEndTime = endTime ?? undefined;
9790

9891
return (
9992
<>
@@ -128,10 +121,7 @@ export const TimespanDropdown: React.FC = () => {
128121
export const PollIntervalDropdown: React.FC = () => {
129122
const { t } = useTranslation(process.env.I18N_NAMESPACE);
130123
const { perspective } = usePerspective();
131-
const isPerses = useIsPerses();
132-
const [selectedInterval, setSelectedInterval] = React.useState(
133-
isPerses ? 0 : DEFAULT_REFRESH_INTERVAL,
134-
);
124+
const [selectedInterval, setSelectedInterval] = React.useState(DEFAULT_REFRESH_INTERVAL);
135125

136126
const dispatch = useDispatch();
137127
const [, setRefreshInterval] = useQueryParam(QueryParams.RefreshInterval, NumberParam);
@@ -140,11 +130,9 @@ export const PollIntervalDropdown: React.FC = () => {
140130
(v: number) => {
141131
setSelectedInterval(v);
142132
setRefreshInterval(v);
143-
if (!isPerses) {
144-
dispatch(dashboardsSetPollInterval(v, perspective));
145-
}
133+
dispatch(dashboardsSetPollInterval(v, perspective));
146134
},
147-
[dispatch, perspective, isPerses, setRefreshInterval],
135+
[dispatch, perspective, setRefreshInterval],
148136
);
149137

150138
return (

‎web/src/components/dashboards/legacy/useLegacyDashboards.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { getAllQueryArguments, getQueryArgument } from '../../console/utils/rout
1313
import {
1414
MONITORING_DASHBOARDS_DEFAULT_TIMESPAN,
1515
MONITORING_DASHBOARDS_VARIABLE_ALL_OPTION_KEY,
16-
} from '../shared/utils';
16+
} from './utils';
1717
import {
1818
DashboardsClearVariables,
1919
dashboardsPatchAllVariables,

0 commit comments

Comments
 (0)