Skip to content

Commit 5c1c65b

Browse files
Mohammed AbdiMohammed Abdi
Mohammed Abdi
authored and
Mohammed Abdi
committed
timerangedropedown automate
Signed-off-by: Mohammed Abdi <[email protected]>
1 parent 42d9bfb commit 5c1c65b

File tree

6 files changed

+53
-155
lines changed

6 files changed

+53
-155
lines changed

‎frontend/src/pages/MCADashboard/DropDowns/time-range-drop-down.tsx‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,17 @@ import React from 'react';
22
import { Select, SelectOption, SelectList } from '@patternfly/react-core/next';
33
import { MenuToggle, MenuToggleElement } from '@patternfly/react-core';
44

5-
const TimeRangeDropDown: React.FunctionComponent = () => {
5+
type TimeRangeDropDownProps = {
6+
onSelected: (itemId: string) => void;
7+
dateFormatter: (str: string) => string;
8+
};
9+
10+
const TimeRangeDropDown: React.FunctionComponent<TimeRangeDropDownProps> = ({
11+
onSelected,
12+
dateFormatter,
13+
}) => {
614
const [isOpen, setIsOpen] = React.useState(false);
7-
const [selected, setSelected] = React.useState<string>('Last 6 months');
15+
const [selected, setSelected] = React.useState<string>('Last 30 minutes');
816
const menuRef = React.useRef<HTMLDivElement>(null);
917

1018
const onToggleClick = () => {
@@ -20,6 +28,8 @@ const TimeRangeDropDown: React.FunctionComponent = () => {
2028

2129
setSelected(itemId as string);
2230
setIsOpen(false);
31+
32+
onSelected(dateFormatter(itemId as string));
2333
};
2434

2535
const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
@@ -57,8 +67,9 @@ const TimeRangeDropDown: React.FunctionComponent = () => {
5767
<SelectOption itemId="Last 1 hour">Last 1 hour</SelectOption>
5868
<SelectOption itemId="Last 2 hours">Last 2 hours</SelectOption>
5969
<SelectOption itemId="Last 1 day">Last 1 day</SelectOption>
60-
<SelectOption itemId="Last 1 month">Last 1 month</SelectOption>
61-
<SelectOption itemId="Last 6 months">Last 6 months</SelectOption>
70+
<SelectOption itemId="Last 2 days">Last 2 days</SelectOption>
71+
<SelectOption itemId="Last 1 week">Last 1 week</SelectOption>
72+
<SelectOption itemId="Last 2 weeks">Last 2 weeks</SelectOption>
6273
</SelectList>
6374
</Select>
6475
</div>

‎frontend/src/pages/MCADashboard/MCADashboard.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import './MCADashboard.css';
1313
import fetchData from './app-wrapper-data';
1414
import { Data } from './types';
1515
import MetricsCards from './Metrics/MetricsCards';
16+
import { convertRangeToTime } from './Metrics/metrics-utils';
1617
import { availableResourceQueries } from './Metrics/queries';
1718
import { getNamespacesFromAppwrappers } from './Metrics/metrics-utils';
1819
//const description = `A Dashboard for Multi-Cluster App Dispatcher`;
@@ -29,11 +30,16 @@ let enabledComponents: OdhApplication[] = [];
2930
export const MCADashboardInner: React.FC<MCADashboardInnerProps> = React.memo(
3031
({ loaded, loadError, components }) => {
3132
const isEmpty = !components || components.length === 0;
33+
const [span, setSpan] = React.useState<string>('30m');
3234
const [refreshRate, setRefreshRate] = React.useState(30000);
3335
const handleSelection = (selectedItemId: number) => {
3436
setRefreshRate(selectedItemId);
3537
};
3638

39+
const handleTimeRangeSelection = (item: string) => {
40+
setSpan(item);
41+
};
42+
3743
const emptyDataObject: Data = {
3844
stats: {
3945
// initial values for the stats object
@@ -104,7 +110,10 @@ export const MCADashboardInner: React.FC<MCADashboardInnerProps> = React.memo(
104110
<div className="dropdowns-container">
105111
<RefreshRateDropDown onSelected={handleSelection} />
106112
<div className="spacer" />
107-
<TimeRangeDropDown />
113+
<TimeRangeDropDown
114+
onSelected={handleTimeRangeSelection}
115+
dateFormatter={convertRangeToTime}
116+
/>
108117
</div>
109118
<MetricsCards
110119
queries={availableResourceQueries}

‎frontend/src/pages/MCADashboard/Metrics/McadMetricGraph.tsx‎

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,11 @@ type MetricGraphProps = {
4545
validNamespaces?: Set<string>;
4646
};
4747

48+
type LegendDataItem = {
49+
childName: string;
50+
name: string;
51+
};
52+
4853
const formatSeriesValues = (values: any[], samples: number, span: number) => {
4954
const newValues = values;
5055

@@ -125,12 +130,18 @@ const McadMetricGraph: React.FC<MetricGraphProps> = ({
125130

126131
return () => clearInterval(interval);
127132
}, [time, validNamespaces, refreshRate]);
133+
const legendData: LegendDataItem[] = [];
128134

129-
const legendData = metricData?.map((obj) => {
130-
return {
131-
childName: obj.metric.status ? obj.metric.status : obj.metric.namespace,
132-
name: obj.metric.status ? obj.metric.status : obj.metric.namespace,
133-
};
135+
metricData?.forEach((obj) => {
136+
const status = obj.metric.status;
137+
// Check if the same status is already in legendData
138+
const alreadyExists = legendData.some(item => item.childName === status);
139+
if (!alreadyExists) {
140+
legendData.push({
141+
childName: status,
142+
name: status,
143+
});
144+
}
134145
});
135146

136147
return (
@@ -240,15 +251,15 @@ const Graph: React.FC<GraphProps> = ({
240251
tickFormat={(tick) =>
241252
time.charAt(time.length - 1) === 'h' || time.charAt(time.length - 1) === 'm'
242253
? new Date(tick * 1000).toLocaleTimeString([], {
243-
hour: 'numeric',
244-
minute: 'numeric',
245-
})
254+
hour: 'numeric',
255+
minute: 'numeric',
256+
})
246257
: new Date(tick * 1000).toLocaleDateString([], {
247-
day: 'numeric',
248-
month: 'numeric',
249-
hour: 'numeric',
250-
minute: 'numeric',
251-
})
258+
day: 'numeric',
259+
month: 'numeric',
260+
hour: 'numeric',
261+
minute: 'numeric',
262+
})
252263
}
253264
/>
254265
<ChartAxis

‎frontend/src/pages/MCADashboard/Metrics/Metrics.tsx‎

Lines changed: 2 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import '../../MCADashboard/MCADashboard.css';
66
import './Metrics.scss';
77
import MetricGraph from './MetricGraph';
88
import McadMetricGraph from './McadMetricGraph';
9-
import TimeRangeDropDown from './time-range-dropdown';
9+
import TimeRangeDropDown from '../DropDowns/time-range-drop-down';
1010
import { useWatchComponents } from '~/utilities/useWatchComponents';
1111
import ApplicationsPage from '../../ApplicationsPage';
1212
import { Query, Unit } from './types';
@@ -37,7 +37,7 @@ type MetricsProps = {
3737

3838
const Metrics: React.FC<MetricsProps> = ({ activeTabKey }: MetricsProps): React.ReactElement => {
3939
const [refreshRate, setRefreshRate] = React.useState<number>(30000);
40-
const [span, setSpan] = React.useState<string>('2w');
40+
const [span, setSpan] = React.useState<string>('30m');
4141
const [validNamespaces, setValidNamespaces] = React.useState<Set<string>>();
4242
const handleRefreshSelection = (selectedItemId: number) => {
4343
setRefreshRate(selectedItemId);
@@ -99,33 +99,6 @@ const Metrics: React.FC<MetricsProps> = ({ activeTabKey }: MetricsProps): React.
9999
};
100100
}, []);
101101

102-
const convertRangeToTime = (timeRange: string) => {
103-
switch (timeRange) {
104-
case 'Custom Time Range':
105-
return '5m';
106-
case 'Last 5 minutes':
107-
return '5m';
108-
case 'Last 10 minutes':
109-
return '10m';
110-
case 'Last 30 minutes':
111-
return '30m';
112-
case 'Last 1 hour':
113-
return '1h';
114-
case 'Last 2 hours':
115-
return '2h';
116-
case 'Last 1 day':
117-
return '1d';
118-
case 'Last 2 days':
119-
return '2d';
120-
case 'Last 1 week':
121-
return '1w';
122-
case 'Last 2 weeks':
123-
return '2w';
124-
default:
125-
throw new Error('invalid input');
126-
}
127-
};
128-
129102
return (
130103
<>
131104
<ApplicationsPage

‎frontend/src/pages/MCADashboard/Metrics/Resources.tsx‎

Lines changed: 2 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import '../../MCADashboard/MCADashboard.css';
66
import './Metrics.scss';
77
import MetricGraph from './MetricGraph';
88
import McadMetricGraph from './McadMetricGraph';
9-
import TimeRangeDropDown from './time-range-dropdown';
9+
import TimeRangeDropDown from '../DropDowns/time-range-drop-down';
1010
import { useWatchComponents } from '~/utilities/useWatchComponents';
1111
import ApplicationsPage from '../../ApplicationsPage';
1212
import { Query, Unit } from './types';
@@ -37,7 +37,7 @@ type MetricsProps = {
3737

3838
const Resources: React.FC<MetricsProps> = ({ activeTabKey }: MetricsProps): React.ReactElement => {
3939
const [refreshRate, setRefreshRate] = React.useState<number>(30000);
40-
const [span, setSpan] = React.useState<string>('2w');
40+
const [span, setSpan] = React.useState<string>('30m');
4141
const [validNamespaces, setValidNamespaces] = React.useState<Set<string>>();
4242
const handleRefreshSelection = (selectedItemId: number) => {
4343
setRefreshRate(selectedItemId);
@@ -99,33 +99,6 @@ const Resources: React.FC<MetricsProps> = ({ activeTabKey }: MetricsProps): Reac
9999
};
100100
}, []);
101101

102-
const convertRangeToTime = (timeRange: string) => {
103-
switch (timeRange) {
104-
case 'Custom Time Range':
105-
return '5m';
106-
case 'Last 5 minutes':
107-
return '5m';
108-
case 'Last 10 minutes':
109-
return '10m';
110-
case 'Last 30 minutes':
111-
return '30m';
112-
case 'Last 1 hour':
113-
return '1h';
114-
case 'Last 2 hours':
115-
return '2h';
116-
case 'Last 1 day':
117-
return '1d';
118-
case 'Last 2 days':
119-
return '2d';
120-
case 'Last 1 week':
121-
return '1w';
122-
case 'Last 2 weeks':
123-
return '2w';
124-
default:
125-
throw new Error('invalid input');
126-
}
127-
};
128-
129102
return (
130103
<>
131104
<ApplicationsPage

‎frontend/src/pages/MCADashboard/Metrics/time-range-dropdown.tsx‎

Lines changed: 0 additions & 79 deletions
This file was deleted.

0 commit comments

Comments
 (0)