Skip to content

Commit 350f64f

Browse files
openshift-merge-bot[bot]openshift-merge-bot[bot]
authored
Merge pull request #454 from jgbernalp/manual-cherri-pick-ou-880
OU-880: Manual cherry pick
2 parents 98a8a58 + 1dda391 commit 350f64f

16 files changed

+368
-151
lines changed

‎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,
@@ -11,12 +7,15 @@ import {
117
ModalVariant,
128
TimePicker,
139
} from '@patternfly/react-core';
10+
import * as _ from 'lodash-es';
11+
import * as React from 'react';
12+
import { useTranslation } from 'react-i18next';
13+
import { useDispatch } from 'react-redux';
1414

1515
import { dashboardsSetEndTime, dashboardsSetTimespan, Perspective } from '../../../actions/observe';
1616

17-
import { QueryParams } from '../../query-params';
18-
import { useIsPerses } from './useIsPerses';
1917
import { NumberParam, useQueryParam } from 'use-query-params';
18+
import { QueryParams } from '../../query-params';
2019

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

@@ -48,7 +47,6 @@ const CustomTimeRangeModal: React.FC<CustomTimeRangeModalProps> = ({
4847
endTime,
4948
}) => {
5049
const { t } = useTranslation(process.env.I18N_NAMESPACE);
51-
const isPerses = useIsPerses();
5250
const [, setEndTime] = useQueryParam(QueryParams.EndTime, NumberParam);
5351
const [, setTimeRange] = useQueryParam(QueryParams.TimeRange, NumberParam);
5452

@@ -71,10 +69,8 @@ const CustomTimeRangeModal: React.FC<CustomTimeRangeModalProps> = ({
7169
const from = Date.parse(`${fromDate} ${fromTime}`);
7270
const to = Date.parse(`${toDate} ${toTime}`);
7371
if (_.isInteger(from) && _.isInteger(to)) {
74-
if (!isPerses) {
75-
dispatch(dashboardsSetEndTime(to, perspective));
76-
dispatch(dashboardsSetTimespan(to - from, perspective));
77-
}
72+
dispatch(dashboardsSetEndTime(to, perspective));
73+
dispatch(dashboardsSetTimespan(to - from, perspective));
7874
setEndTime(Number(to.toString()));
7975
setTimeRange(Number((to - from).toString()));
8076
setClosed();

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

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

‎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: 25 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,21 @@
11
import { Overview } from '@openshift-console/dynamic-plugin-sdk';
22
import * as React from 'react';
3-
import { RouteComponentProps, withRouter } from 'react-router-dom';
4-
5-
import ErrorAlert from '../shared/error';
6-
7-
import { LegacyDashboard } from '../legacy/legacy-dashboard';
8-
import DashboardSkeleton from '../shared/dashboard-skeleton';
9-
import { usePerspective } from '../../hooks/usePerspective';
103
import { useTranslation } from 'react-i18next';
11-
import { useLegacyDashboards } from './useLegacyDashboards';
12-
import { PersesContext } from '../../router';
4+
import { RouteComponentProps, withRouter } from 'react-router-dom';
5+
import { usePerspective } from '../../../components/hooks/usePerspective';
136
import { LoadingInline } from '../../../components/console/console-shared/src/components/loading/LoadingInline';
147
import withFallback from '../../console/console-shared/error/fallbacks/withFallback';
8+
import { LegacyDashboard } from '../legacy/legacy-dashboard';
9+
import { DashboardSkeletonLegacy } from './dashboard-skeleton-legacy';
10+
import ErrorAlert from './error';
11+
import { useLegacyDashboards } from './useLegacyDashboards';
1512

1613
type MonitoringLegacyDashboardsPageProps = {
1714
urlBoard: string;
1815
namespace?: string;
1916
};
2017

21-
const MonitoringLegacyDashboardsPage_: React.FC<MonitoringLegacyDashboardsPageProps> = ({
18+
const LegacyDashboardsPage_: React.FC<MonitoringLegacyDashboardsPageProps> = ({
2219
urlBoard,
2320
namespace, // only used in developer perspective
2421
}) => {
@@ -34,25 +31,23 @@ const MonitoringLegacyDashboardsPage_: React.FC<MonitoringLegacyDashboardsPagePr
3431
const { t } = useTranslation(process.env.I18N_NAMESPACE);
3532

3633
return (
37-
<>
38-
<DashboardSkeleton
39-
boardItems={legacyDashboardsMetadata}
40-
changeBoard={changeLegacyDashboard}
41-
dashboardName={legacyDashboard}
42-
>
43-
<Overview>
44-
{legacyDashboardsLoading ? (
45-
<LoadingInline />
46-
) : legacyDashboardsError ? (
47-
<ErrorAlert
48-
error={{ message: legacyDashboardsError, name: t('Error Loading Dashboards') }}
49-
/>
50-
) : (
51-
<LegacyDashboard rows={legacyRows} perspective={perspective} />
52-
)}
53-
</Overview>
54-
</DashboardSkeleton>
55-
</>
34+
<DashboardSkeletonLegacy
35+
boardItems={legacyDashboardsMetadata}
36+
changeBoard={changeLegacyDashboard}
37+
dashboardName={legacyDashboard}
38+
>
39+
<Overview>
40+
{legacyDashboardsLoading ? (
41+
<LoadingInline />
42+
) : legacyDashboardsError ? (
43+
<ErrorAlert
44+
error={{ message: legacyDashboardsError, name: t('Error Loading Dashboards') }}
45+
/>
46+
) : (
47+
<LegacyDashboard rows={legacyRows} perspective={perspective} />
48+
)}
49+
</Overview>
50+
</DashboardSkeletonLegacy>
5651
);
5752
};
5853

@@ -65,12 +60,7 @@ const MonitoringLegacyDashboardsPageWrapper: React.FC<MonitoringLegacyDashboards
6560
match,
6661
}) => {
6762
return (
68-
<PersesContext.Provider value={false}>
69-
<MonitoringLegacyDashboardsPage_
70-
urlBoard={match.params.dashboardName}
71-
namespace={match.params?.ns}
72-
/>
73-
</PersesContext.Provider>
63+
<LegacyDashboardsPage_ urlBoard={match.params.dashboardName} namespace={match.params?.ns} />
7464
);
7565
};
7666

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

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,41 @@
1-
import * as _ from 'lodash-es';
21
import {
32
PrometheusEndpoint,
43
RedExclamationCircleIcon,
54
useActiveNamespace,
65
useResolvedExtensions,
76
} from '@openshift-console/dynamic-plugin-sdk';
87
import {
9-
Tooltip,
10-
Select,
11-
SelectOption,
128
MenuToggle,
139
MenuToggleElement,
10+
Select,
11+
SelectOption,
12+
Split,
13+
Tooltip,
1414
} from '@patternfly/react-core';
15+
import { Map as ImmutableMap } from 'immutable';
16+
import * as _ from 'lodash-es';
1517
import * as React from 'react';
1618
import { useTranslation } from 'react-i18next';
1719
import { useDispatch, useSelector } from 'react-redux';
18-
import { Map as ImmutableMap } from 'immutable';
1920

20-
import { SingleTypeaheadDropdown } from '../../console/utils/single-typeahead-dropdown';
2121
import { getPrometheusURL } from '../../console/graphs/helpers';
2222
import { getQueryArgument, setQueryArgument } from '../../console/utils/router';
2323
import { useSafeFetch } from '../../console/utils/safe-fetch-hook';
24+
import { SingleTypeaheadDropdown } from '../../console/utils/single-typeahead-dropdown';
2425

26+
import {
27+
DataSource,
28+
isDataSource,
29+
} from '@openshift-console/dynamic-plugin-sdk/lib/extensions/dashboard-data-source';
2530
import {
2631
dashboardsPatchVariable,
2732
dashboardsVariableOptionsLoaded,
2833
Perspective,
2934
} from '../../../actions/observe';
30-
import { getTimeRanges, isTimeoutError, QUERY_CHUNK_SIZE } from '../../utils';
31-
import { getLegacyObserveState, usePerspective } from '../../hooks/usePerspective';
3235
import { MonitoringState } from '../../../reducers/observe';
33-
import {
34-
DEFAULT_GRAPH_SAMPLES,
35-
MONITORING_DASHBOARDS_VARIABLE_ALL_OPTION_KEY,
36-
} from '../shared/utils';
37-
import {
38-
DataSource,
39-
isDataSource,
40-
} from '@openshift-console/dynamic-plugin-sdk/lib/extensions/dashboard-data-source';
36+
import { getLegacyObserveState, usePerspective } from '../../hooks/usePerspective';
37+
import { getTimeRanges, isTimeoutError, QUERY_CHUNK_SIZE } from '../../utils';
38+
import { DEFAULT_GRAPH_SAMPLES, MONITORING_DASHBOARDS_VARIABLE_ALL_OPTION_KEY } from './utils';
4139

4240
const intervalVariableRegExps = ['__interval', '__rate_interval', '__auto_interval_[a-z]+'];
4341

@@ -321,7 +319,7 @@ export const LegacyDashboardsAllVariableDropdowns: React.FC = () => {
321319
}
322320

323321
return (
324-
<>
322+
<Split hasGutter isWrappable>
325323
{variables.keySeq().map((name: string) => (
326324
<LegacyDashboardsVariableDropdown
327325
key={name}
@@ -331,7 +329,7 @@ export const LegacyDashboardsAllVariableDropdowns: React.FC = () => {
331329
perspective={perspective}
332330
/>
333331
))}
334-
</>
332+
</Split>
335333
);
336334
};
337335

‎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 } 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
@@ -21,7 +21,7 @@ import * as _ from 'lodash-es';
2121
import * as React from 'react';
2222
import { useTranslation } from 'react-i18next';
2323

24-
import ErrorAlert from '../shared/error';
24+
import ErrorAlert from './error';
2525
import { getPrometheusURL } from '../../console/graphs/helpers';
2626
import { usePoll } from '../../console/utils/poll-hook';
2727
import { useSafeFetch } from '../../console/utils/safe-fetch-hook';

0 commit comments

Comments
 (0)