Skip to content

Commit 36ae235

Browse files
jgbernalpjgbernalp
committed
refactor incidents to add typescript
Signed-off-by: Gabriel Bernal <[email protected]>
1 parent 087dfd7 commit 36ae235

File tree

13 files changed

+241
-248
lines changed

13 files changed

+241
-248
lines changed

‎web/src/components/Incidents/AlertsChart/AlertsChart.jsx‎ renamed to ‎web/src/components/Incidents/AlertsChart/AlertsChart.tsx‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -14,41 +14,41 @@ import { Card, CardBody, CardTitle, EmptyState, EmptyStateBody } from '@patternf
1414
import { createAlertsChartBars, formatDate, generateDateArray } from '../utils';
1515
import { getResizeObserver } from '@patternfly/react-core';
1616
import { useDispatch, useSelector } from 'react-redux';
17-
import * as _ from 'lodash-es';
1817
import { setAlertsAreLoading } from '../../../actions/observe';
1918
import {
2019
t_global_color_status_danger_default,
2120
t_global_color_status_info_default,
2221
t_global_color_status_warning_default,
2322
} from '@patternfly/react-tokens';
23+
import { MonitoringState } from '../../../reducers/observe';
2424

2525
const AlertsChart = ({ chartDays, theme }) => {
2626
const dispatch = useDispatch();
27-
const [chartContainerHeight, setChartContainerHeight] = React.useState();
28-
const [chartHeight, setChartHeight] = React.useState();
29-
const alertsData = useSelector((state) =>
27+
const [chartContainerHeight, setChartContainerHeight] = React.useState<number>(0);
28+
const [chartHeight, setChartHeight] = React.useState<number>();
29+
const alertsData = useSelector((state: MonitoringState) =>
3030
state.plugins.mcp.getIn(['incidentsData', 'alertsData']),
3131
);
32-
const alertsAreLoading = useSelector((state) =>
32+
const alertsAreLoading = useSelector((state: MonitoringState) =>
3333
state.plugins.mcp.getIn(['incidentsData', 'alertsAreLoading']),
3434
);
35-
const filteredData = useSelector((state) =>
35+
const filteredData = useSelector((state: MonitoringState) =>
3636
state.plugins.mcp.getIn(['incidentsData', 'filteredIncidentsData']),
3737
);
38-
const incidentGroupId = useSelector((state) =>
38+
const incidentGroupId = useSelector((state: MonitoringState) =>
3939
state.plugins.mcp.getIn(['incidentsData', 'groupId']),
4040
);
4141

4242
const dateValues = React.useMemo(() => generateDateArray(chartDays), [chartDays]);
4343

4444
const chartData = React.useMemo(() => {
4545
if (!Array.isArray(alertsData) || alertsData.length === 0) return [];
46-
return alertsData.map((alert) => createAlertsChartBars(alert, theme, dateValues));
47-
}, [alertsData, theme, dateValues]);
46+
return alertsData.map((alert) => createAlertsChartBars(alert, dateValues));
47+
}, [alertsData, dateValues]);
4848

4949
React.useEffect(() => {
50-
setChartContainerHeight(chartData?.length < 5 ? 300 : chartData?.length * 60);
51-
setChartHeight(chartData?.length < 5 ? 250 : chartData?.length * 55);
50+
setChartContainerHeight(chartData ? (chartData?.length < 5 ? 300 : chartData?.length * 60) : 0);
51+
setChartHeight(chartData ? (chartData?.length < 5 ? 250 : chartData?.length * 55) : 0);
5252
}, [chartData]);
5353

5454
const selectedIncidentIsVisible = React.useMemo(() => {
@@ -78,7 +78,7 @@ const AlertsChart = ({ chartDays, theme }) => {
7878
<CardTitle>Alerts Timeline</CardTitle>
7979
{alertsAreLoading ? (
8080
<EmptyState
81-
variant="large"
81+
variant="lg"
8282
style={{
8383
height: '250px',
8484
}}
@@ -88,7 +88,7 @@ const AlertsChart = ({ chartDays, theme }) => {
8888
) : (
8989
<CardBody
9090
style={{
91-
height: { chartContainerHeight },
91+
height: chartContainerHeight,
9292
width: '100%',
9393
}}
9494
>
@@ -98,7 +98,7 @@ const AlertsChart = ({ chartDays, theme }) => {
9898
labelComponent={
9999
<ChartTooltip
100100
orientation="top"
101-
dx={({ x, x0 }) => -(x - x0) / 2}
101+
dx={({ x, datum }) => -Math.abs(x - datum.x) / 2}
102102
dy={-5} // Position tooltip so pointer appears above bar
103103
constrainToVisibleArea
104104
labelComponent={<ChartLabel />}

‎web/src/components/Incidents/IncidentsChart/IncidentsChart.jsx‎ renamed to ‎web/src/components/Incidents/IncidentsChart/IncidentsChart.tsx‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -27,26 +27,27 @@ import {
2727
t_global_color_status_warning_default,
2828
} from '@patternfly/react-tokens';
2929
import { setAlertsAreLoading } from '../../../actions/observe';
30+
import { MonitoringState } from '../../../reducers/observe';
3031

3132
const IncidentsChart = ({ incidentsData, chartDays, theme }) => {
3233
const dispatch = useDispatch();
3334
const [isLoading, setIsLoading] = React.useState(true);
34-
const [chartContainerHeight, setChartContainerHeight] = React.useState();
35-
const [chartHeight, setChartHeight] = React.useState();
35+
const [chartContainerHeight, setChartContainerHeight] = React.useState<number>(0);
36+
const [chartHeight, setChartHeight] = React.useState<number>();
3637
const dateValues = React.useMemo(() => generateDateArray(chartDays), [chartDays]);
3738

3839
const chartData = React.useMemo(() => {
3940
if (!Array.isArray(incidentsData) || incidentsData.length === 0) return [];
40-
return incidentsData.map((incident) => createIncidentsChartBars(incident, theme, dateValues));
41-
}, [incidentsData, theme, dateValues]);
41+
return incidentsData.map((incident) => createIncidentsChartBars(incident, dateValues));
42+
}, [incidentsData, dateValues]);
4243

4344
React.useEffect(() => {
4445
setIsLoading(false);
4546
}, [incidentsData]);
4647

4748
React.useEffect(() => {
48-
setChartContainerHeight(chartData?.length < 5 ? 300 : chartData?.length * 60);
49-
setChartHeight(chartData?.length < 5 ? 250 : chartData?.length * 55);
49+
setChartContainerHeight(chartData ? (chartData?.length < 5 ? 300 : chartData?.length * 60) : 0);
50+
setChartHeight(chartData ? (chartData?.length < 5 ? 250 : chartData?.length * 55) : 0);
5051
}, [chartData]);
5152

5253
const [width, setWidth] = React.useState(0);
@@ -63,8 +64,10 @@ const IncidentsChart = ({ incidentsData, chartDays, theme }) => {
6364
return () => observer();
6465
}, []);
6566

66-
const selectedId = useSelector((state) => state.plugins.mcp.getIn(['incidentsData', 'groupId']));
67-
const incidentsActiveFilters = useSelector((state) =>
67+
const selectedId = useSelector((state: MonitoringState) =>
68+
state.plugins.mcp.getIn(['incidentsData', 'groupId']),
69+
);
70+
const incidentsActiveFilters = useSelector((state: MonitoringState) =>
6871
state.plugins.mcp.getIn(['incidentsData', 'incidentsActiveFilters']),
6972
);
7073

@@ -107,7 +110,7 @@ const IncidentsChart = ({ incidentsData, chartDays, theme }) => {
107110
) : (
108111
<CardBody
109112
style={{
110-
height: { chartContainerHeight },
113+
height: chartContainerHeight,
111114
width: '100%',
112115
}}
113116
>
@@ -117,7 +120,7 @@ const IncidentsChart = ({ incidentsData, chartDays, theme }) => {
117120
labelComponent={
118121
<ChartTooltip
119122
orientation="top"
120-
dx={({ x, x0 }) => -(x - x0) / 2}
123+
dx={({ x, datum }) => -Math.abs(x - datum.x) / 2}
121124
dy={-5} // Position tooltip so pointer appears above bar
122125
constrainToVisibleArea
123126
labelComponent={<ChartLabel />}
@@ -192,7 +195,7 @@ const IncidentsChart = ({ incidentsData, chartDays, theme }) => {
192195
//we have several arrays and for each array we make a ChartBar
193196
<ChartBar
194197
data={bar}
195-
key={bar.group_id}
198+
key={bar[0].group_id}
196199
style={{
197200
data: {
198201
fill: ({ datum }) => datum.fill,
@@ -203,6 +206,7 @@ const IncidentsChart = ({ incidentsData, chartDays, theme }) => {
203206
}}
204207
events={[
205208
{
209+
target: 'data',
206210
eventHandlers: {
207211
onClick: (props, datum) => clickHandler(props, datum),
208212
},

‎web/src/components/Incidents/IncidentsDetailsRowTable.jsx‎ renamed to ‎web/src/components/Incidents/IncidentsDetailsRowTable.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import { SeverityBadge } from '../alerting/AlertUtils';
2525
import { useAlertsPoller } from '../hooks/useAlertsPoller';
2626
import { useSelector } from 'react-redux';
2727
import isEqual from 'lodash/isEqual';
28+
import { MonitoringState } from '../../reducers/observe';
2829

2930
function useDeepCompareMemoize(value) {
3031
const ref = React.useRef();
@@ -44,7 +45,7 @@ const IncidentsDetailsRowTable = ({ alerts }) => {
4445
const [alertsWithMatchedData, setAlertsWithMatchedData] = React.useState([]);
4546
const { t } = useTranslation(process.env.I18N_NAMESPACE);
4647

47-
const alertsWithLabels = useSelector((state) =>
48+
const alertsWithLabels = useSelector((state: MonitoringState) =>
4849
getLegacyObserveState(perspective, state)?.get(alertsKey),
4950
);
5051

@@ -67,7 +68,7 @@ const IncidentsDetailsRowTable = ({ alerts }) => {
6768
}, [memoizedAlerts, alertsWithLabels]);
6869

6970
return (
70-
<Table borders={'compactBorderless'}>
71+
<Table borders={false} variant="compact">
7172
<Thead>
7273
<Tr>
7374
<Th width={25}>{t('Alert Name')}</Th>

‎web/src/components/Incidents/IncidentsPage.jsx‎ renamed to ‎web/src/components/Incidents/IncidentsPage.tsx‎

Lines changed: 30 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ import {
1616
ToolbarItem,
1717
MenuToggle,
1818
Badge,
19-
Title,
2019
PageSection,
2120
Stack,
2221
StackItem,
@@ -56,6 +55,8 @@ import withFallback from '../console/console-shared/error/fallbacks/withFallback
5655
import IncidentsChart from './IncidentsChart/IncidentsChart';
5756
import AlertsChart from './AlertsChart/AlertsChart';
5857
import { usePatternFlyTheme } from '../hooks/usePatternflyTheme';
58+
import { DaysFilters, IncidentFilters } from './models';
59+
import { MonitoringState } from '../../reducers/observe';
5960

6061
const IncidentsPage = () => {
6162
const { t } = useTranslation(process.env.I18N_NAMESPACE);
@@ -69,7 +70,7 @@ const IncidentsPage = () => {
6970
// days span is where we store the value for creating time ranges for
7071
// fetch incidents/alerts based on the length of time ranges
7172
// when days filter changes we set a new days span -> calculate new time range and fetch new data
72-
const [daysSpan, setDaysSpan] = React.useState();
73+
const [daysSpan, setDaysSpan] = React.useState<number>(7);
7374
const [timeRanges, setTimeRanges] = React.useState([]);
7475
// data that is used for processing to serve it to the alerts table and chart
7576
const [incidentForAlertProcessing, setIncidentForAlertProcessing] = React.useState([]);
@@ -87,26 +88,28 @@ const IncidentsPage = () => {
8788
setDaysFilterIsExpanded(!daysFilterIsExpanded);
8889
};
8990

90-
const incidentsInitialState = useSelector((state) =>
91+
const incidentsInitialState = useSelector((state: MonitoringState) =>
9192
state.plugins.mcp.getIn(['incidentsData', 'incidentsInitialState']),
9293
);
9394

94-
const incidents = useSelector((state) => state.plugins.mcp.getIn(['incidentsData', 'incidents']));
95+
const incidents = useSelector((state: MonitoringState) =>
96+
state.plugins.mcp.getIn(['incidentsData', 'incidents']),
97+
);
9598

96-
const incidentsActiveFilters = useSelector((state) =>
99+
const incidentsActiveFilters = useSelector((state: MonitoringState) =>
97100
state.plugins.mcp.getIn(['incidentsData', 'incidentsActiveFilters']),
98101
);
99-
const incidentGroupId = useSelector((state) =>
102+
const incidentGroupId = useSelector((state: MonitoringState) =>
100103
state.plugins.mcp.getIn(['incidentsData', 'groupId']),
101104
);
102-
const alertsData = useSelector((state) =>
105+
const alertsData = useSelector((state: MonitoringState) =>
103106
state.plugins.mcp.getIn(['incidentsData', 'alertsData']),
104107
);
105-
const alertsAreLoading = useSelector((state) =>
108+
const alertsAreLoading = useSelector((state: MonitoringState) =>
106109
state.plugins.mcp.getIn(['incidentsData', 'alertsAreLoading']),
107110
);
108111

109-
const filteredData = useSelector((state) =>
112+
const filteredData = useSelector((state: MonitoringState) =>
110113
state.plugins.mcp.getIn(['incidentsData', 'filteredIncidentsData']),
111114
);
112115
React.useEffect(() => {
@@ -271,9 +274,9 @@ const IncidentsPage = () => {
271274
}
272275
}, [incidentGroupId, timeRanges]);
273276

274-
const onSelect = (_event, value) => {
277+
const onSelect = (_event: React.MouseEvent, value?: string) => {
275278
if (value) {
276-
changeDaysFilter(value, dispatch, incidentsActiveFilters);
279+
changeDaysFilter(value as DaysFilters, dispatch, incidentsActiveFilters);
277280
}
278281

279282
setDaysFilterIsExpanded(false);
@@ -295,15 +298,20 @@ const IncidentsPage = () => {
295298
id="toolbar-with-filter"
296299
collapseListedFiltersBreakpoint="xl"
297300
clearAllFilters={() =>
298-
onDeleteIncidentFilterChip('', '', incidentsActiveFilters, dispatch)
301+
onDeleteIncidentFilterChip('', undefined, incidentsActiveFilters, dispatch)
299302
}
300303
>
301304
<ToolbarContent>
302305
<ToolbarItem>
303306
<ToolbarFilter
304307
labels={incidentsActiveFilters.incidentFilters}
305308
deleteLabel={(category, chip) =>
306-
onDeleteIncidentFilterChip(category, chip, incidentsActiveFilters, dispatch)
309+
onDeleteIncidentFilterChip(
310+
category as string,
311+
chip as IncidentFilters,
312+
incidentsActiveFilters,
313+
dispatch,
314+
)
307315
}
308316
deleteLabelGroup={() =>
309317
onDeleteGroupIncidentFilterChip(incidentsActiveFilters, dispatch)
@@ -317,7 +325,12 @@ const IncidentsPage = () => {
317325
isOpen={incidentFilterIsExpanded}
318326
selected={incidentsActiveFilters.incidentFilters}
319327
onSelect={(event, selection) =>
320-
onIncidentFiltersSelect(event, selection, dispatch, incidentsActiveFilters)
328+
onIncidentFiltersSelect(
329+
event,
330+
selection as IncidentFilters,
331+
dispatch,
332+
incidentsActiveFilters,
333+
)
321334
}
322335
onOpenChange={(isOpen) => setIncidentIsExpanded(isOpen)}
323336
toggle={(toggleRef) => (
@@ -358,7 +371,9 @@ const IncidentsPage = () => {
358371
</SelectOption>
359372
<SelectOption
360373
value="Informative"
361-
isSelected={incidentsActiveFilters.incidentFilters.includes('Informative')}
374+
isSelected={incidentsActiveFilters.incidentFilters.includes(
375+
'Informative',
376+
)}
362377
description="The incident is not critical."
363378
hasCheckbox
364379
>

‎web/src/components/Incidents/IncidentsTable.jsx‎ renamed to ‎web/src/components/Incidents/IncidentsTable.tsx‎

Lines changed: 12 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,15 @@
1+
import { AlertSeverity, AlertStates } from '@openshift-console/dynamic-plugin-sdk';
2+
import { Bullseye, Card, CardBody, EmptyState, EmptyStateBody } from '@patternfly/react-core';
3+
import { SearchIcon } from '@patternfly/react-icons';
4+
import { ExpandableRowContent, Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
5+
import * as _ from 'lodash-es';
16
import React from 'react';
2-
import { Table, Thead, Tr, Th, Tbody, Td, ExpandableRowContent } from '@patternfly/react-table';
3-
import {
4-
Bullseye,
5-
Card,
6-
CardBody,
7-
EmptyState,
8-
EmptyStateBody,
9-
Label,
10-
} from '@patternfly/react-core';
11-
import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
12-
import IncidentsDetailsRowTable from './IncidentsDetailsRowTable';
13-
import { BellIcon, BellSlashIcon, SearchIcon } from '@patternfly/react-icons';
147
import { useSelector } from 'react-redux';
15-
import * as _ from 'lodash-es';
16-
import { AlertState, AlertStateIcon, SeverityBadge } from '../alerting/AlertUtils';
17-
import { AlertSeverity, AlertStates } from '@openshift-console/dynamic-plugin-sdk';
8+
import { AlertStateIcon, SeverityBadge } from '../alerting/AlertUtils';
9+
import IncidentsDetailsRowTable from './IncidentsDetailsRowTable';
10+
import { MonitoringState } from '../../reducers/observe';
1811

19-
export const IncidentsTable = ({ namespace }) => {
12+
export const IncidentsTable = () => {
2013
const columnNames = {
2114
checkbox: '',
2215
component: 'Component',
@@ -30,10 +23,10 @@ export const IncidentsTable = ({ namespace }) => {
3023
return isExpanding ? [...otherAlertExpanded, alert.component] : otherAlertExpanded;
3124
});
3225
const isAlertExpanded = (alert) => expandedAlerts.includes(alert.component);
33-
const alertsTableData = useSelector((state) =>
26+
const alertsTableData = useSelector((state: MonitoringState) =>
3427
state.plugins.mcp.getIn(['incidentsData', 'alertsTableData']),
3528
);
36-
const alertsAreLoading = useSelector((state) =>
29+
const alertsAreLoading = useSelector((state: MonitoringState) =>
3730
state.plugins.mcp.getIn(['incidentsData', 'alertsAreLoading']),
3831
);
3932

@@ -108,10 +101,7 @@ export const IncidentsTable = ({ namespace }) => {
108101
<Tr isExpanded={isAlertExpanded(alert)}>
109102
<Td width={100} colSpan={6}>
110103
<ExpandableRowContent>
111-
<IncidentsDetailsRowTable
112-
alerts={alert.alertsExpandedRowData}
113-
namespace={namespace}
114-
/>
104+
<IncidentsDetailsRowTable alerts={alert.alertsExpandedRowData} />
115105
</ExpandableRowContent>
116106
</Td>
117107
</Tr>

‎web/src/components/Incidents/api.js‎ renamed to ‎web/src/components/Incidents/api.ts‎

File renamed without changes.

0 commit comments

Comments
 (0)