Skip to content

Commit 1bb9c36

Browse files
openshift-merge-bot[bot]openshift-merge-bot[bot]
authored
Merge pull request #475 from jgbernalp/refactor-incidents-to-typescript
NO-JIRA: refactor incidents to add typescript
2 parents b44de47 + 94891eb commit 1bb9c36

11 files changed

Lines changed: 397 additions & 373 deletions

File tree

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

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -14,37 +14,38 @@ 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';
24+
import { VictoryPortal } from 'victory';
2425

25-
const AlertsChart = ({ chartDays, theme }) => {
26+
const AlertsChart = ({ chartDays, theme }: { chartDays: number; theme: 'light' | 'dark' }) => {
2627
const dispatch = useDispatch();
27-
const [chartContainerHeight, setChartContainerHeight] = React.useState();
28-
const [chartHeight, setChartHeight] = React.useState();
29-
const alertsData = useSelector((state) =>
28+
const [chartContainerHeight, setChartContainerHeight] = React.useState<number>();
29+
const [chartHeight, setChartHeight] = React.useState<number>();
30+
const alertsData = useSelector((state: MonitoringState) =>
3031
state.plugins.mcp.getIn(['incidentsData', 'alertsData']),
3132
);
32-
const alertsAreLoading = useSelector((state) =>
33+
const alertsAreLoading = useSelector((state: MonitoringState) =>
3334
state.plugins.mcp.getIn(['incidentsData', 'alertsAreLoading']),
3435
);
35-
const filteredData = useSelector((state) =>
36+
const filteredData = useSelector((state: MonitoringState) =>
3637
state.plugins.mcp.getIn(['incidentsData', 'filteredIncidentsData']),
3738
);
38-
const incidentGroupId = useSelector((state) =>
39+
const incidentGroupId = useSelector((state: MonitoringState) =>
3940
state.plugins.mcp.getIn(['incidentsData', 'groupId']),
4041
);
4142

4243
const dateValues = React.useMemo(() => generateDateArray(chartDays), [chartDays]);
4344

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

4950
React.useEffect(() => {
5051
setChartContainerHeight(chartData?.length < 5 ? 300 : chartData?.length * 60);
@@ -73,12 +74,12 @@ const AlertsChart = ({ chartDays, theme }) => {
7374
}, [handleResize]);
7475

7576
return (
76-
<Card className="alerts-chart-card">
77+
<Card className="alerts-chart-card" style={{ overflow: 'visible' }}>
7778
<div ref={containerRef}>
7879
<CardTitle>Alerts Timeline</CardTitle>
7980
{alertsAreLoading ? (
8081
<EmptyState
81-
variant="large"
82+
variant="lg"
8283
style={{
8384
height: '250px',
8485
}}
@@ -88,21 +89,22 @@ const AlertsChart = ({ chartDays, theme }) => {
8889
) : (
8990
<CardBody
9091
style={{
91-
height: { chartContainerHeight },
92+
height: chartContainerHeight,
9293
width: '100%',
9394
}}
9495
>
9596
<Chart
9697
containerComponent={
9798
<ChartVoronoiContainer
9899
labelComponent={
99-
<ChartTooltip
100-
orientation="top"
101-
dx={({ x, x0 }) => -(x - x0) / 2}
102-
dy={-5} // Position tooltip so pointer appears above bar
103-
constrainToVisibleArea
104-
labelComponent={<ChartLabel />}
105-
/>
100+
<VictoryPortal>
101+
<ChartTooltip
102+
orientation="top"
103+
dx={({ x, x0 }: any) => -(x - x0) / 2}
104+
dy={-5} // Position tooltip so pointer appears above bar
105+
labelComponent={<ChartLabel />}
106+
/>
107+
</VictoryPortal>
106108
}
107109
labels={({ datum }) => {
108110
if (datum.nodata) {
@@ -165,7 +167,7 @@ const AlertsChart = ({ chartDays, theme }) => {
165167
tickFormat={(t) =>
166168
new Date(t).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
167169
}
168-
tickValues={dateValues}
170+
tickValues={dateValues.map((ts) => new Date(ts * 1000))}
169171
tickLabelComponent={
170172
<ChartLabel style={{ fill: theme === 'light' ? '#1b1d21' : '#e0e0e0' }} />
171173
}

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

Lines changed: 53 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -11,34 +11,50 @@ import {
1111
ChartTooltip,
1212
ChartVoronoiContainer,
1313
} from '@patternfly/react-charts/victory';
14-
import { Bullseye, Card, CardBody, CardTitle, Spinner } from '@patternfly/react-core';
1514
import {
16-
createIncidentsChartBars,
17-
formatDate,
18-
generateDateArray,
19-
updateBrowserUrl,
20-
} from '../utils';
21-
import { getResizeObserver } from '@patternfly/react-core';
22-
import { useDispatch, useSelector } from 'react-redux';
23-
import { setChooseIncident } from '../../../actions/observe';
15+
Bullseye,
16+
Card,
17+
CardBody,
18+
CardTitle,
19+
getResizeObserver,
20+
Spinner,
21+
} from '@patternfly/react-core';
2422
import {
2523
t_global_color_status_danger_default,
2624
t_global_color_status_info_default,
2725
t_global_color_status_warning_default,
2826
} from '@patternfly/react-tokens';
29-
import { setAlertsAreLoading } from '../../../actions/observe';
27+
import { useDispatch, useSelector } from 'react-redux';
28+
import { setAlertsAreLoading, setChooseIncident } from '../../../actions/observe';
29+
import { MonitoringState } from '../../../reducers/observe';
30+
import { Incident } from '../model';
31+
import {
32+
createIncidentsChartBars,
33+
formatDate,
34+
generateDateArray,
35+
updateBrowserUrl,
36+
} from '../utils';
37+
import { VictoryPortal } from 'victory';
3038

31-
const IncidentsChart = ({ incidentsData, chartDays, theme }) => {
39+
const IncidentsChart = ({
40+
incidentsData,
41+
chartDays,
42+
theme,
43+
}: {
44+
incidentsData: Array<Incident>;
45+
chartDays: number;
46+
theme: 'light' | 'dark';
47+
}) => {
3248
const dispatch = useDispatch();
3349
const [isLoading, setIsLoading] = React.useState(true);
34-
const [chartContainerHeight, setChartContainerHeight] = React.useState();
35-
const [chartHeight, setChartHeight] = React.useState();
50+
const [chartContainerHeight, setChartContainerHeight] = React.useState<number>();
51+
const [chartHeight, setChartHeight] = React.useState<number>();
3652
const dateValues = React.useMemo(() => generateDateArray(chartDays), [chartDays]);
3753

3854
const chartData = React.useMemo(() => {
3955
if (!Array.isArray(incidentsData) || incidentsData.length === 0) return [];
40-
return incidentsData.map((incident) => createIncidentsChartBars(incident, theme, dateValues));
41-
}, [incidentsData, theme, dateValues]);
56+
return incidentsData.map((incident) => createIncidentsChartBars(incident, dateValues));
57+
}, [incidentsData, dateValues]);
4258

4359
React.useEffect(() => {
4460
setIsLoading(false);
@@ -63,8 +79,10 @@ const IncidentsChart = ({ incidentsData, chartDays, theme }) => {
6379
return () => observer();
6480
}, []);
6581

66-
const selectedId = useSelector((state) => state.plugins.mcp.getIn(['incidentsData', 'groupId']));
67-
const incidentsActiveFilters = useSelector((state) =>
82+
const selectedId = useSelector((state: MonitoringState) =>
83+
state.plugins.mcp.getIn(['incidentsData', 'groupId']),
84+
);
85+
const incidentsActiveFilters = useSelector((state: MonitoringState) =>
6886
state.plugins.mcp.getIn(['incidentsData', 'incidentsActiveFilters']),
6987
);
7088

@@ -97,8 +115,8 @@ const IncidentsChart = ({ incidentsData, chartDays, theme }) => {
97115
);
98116

99117
return (
100-
<Card className="incidents-chart-card">
101-
<div ref={containerRef}>
118+
<Card className="incidents-chart-card" style={{ overflow: 'visible' }}>
119+
<div ref={containerRef} style={{ position: 'relative' }}>
102120
<CardTitle>Incidents Timeline</CardTitle>
103121
{isLoading ? (
104122
<Bullseye>
@@ -107,29 +125,33 @@ const IncidentsChart = ({ incidentsData, chartDays, theme }) => {
107125
) : (
108126
<CardBody
109127
style={{
110-
height: { chartContainerHeight },
128+
height: chartContainerHeight,
111129
width: '100%',
112130
}}
113131
>
114132
<Chart
115133
containerComponent={
116134
<ChartVoronoiContainer
117135
labelComponent={
118-
<ChartTooltip
119-
orientation="top"
120-
dx={({ x, x0 }) => -(x - x0) / 2}
121-
dy={-5} // Position tooltip so pointer appears above bar
122-
constrainToVisibleArea
123-
labelComponent={<ChartLabel />}
124-
/>
136+
<VictoryPortal>
137+
<ChartTooltip
138+
activateData={false}
139+
orientation="top"
140+
dx={({ x, x0 }: any) => -(x - x0) / 2}
141+
dy={-5} // Position tooltip so pointer appears above bar
142+
labelComponent={<ChartLabel />}
143+
/>
144+
</VictoryPortal>
125145
}
146+
voronoiPadding={0}
126147
labels={({ datum }) => {
127148
if (datum.nodata) {
128149
return null;
129150
}
130151
return `Severity: ${datum.name}
131152
Component: ${datum.componentList?.join(', ')}
132-
Incident ID: ${datum.group_id}
153+
Incident ID:
154+
${datum.group_id}
133155
Start: ${formatDate(new Date(datum.y0), true)}
134156
End: ${datum.firing ? '---' : formatDate(new Date(datum.y), true)}`;
135157
}}
@@ -181,7 +203,7 @@ const IncidentsChart = ({ incidentsData, chartDays, theme }) => {
181203
tickFormat={(t) =>
182204
new Date(t).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
183205
}
184-
tickValues={dateValues}
206+
tickValues={dateValues.map((ts) => new Date(ts * 1000))}
185207
tickLabelComponent={
186208
<ChartLabel style={{ fill: theme === 'light' ? '#1b1d21' : '#e0e0e0' }} />
187209
}
@@ -192,7 +214,7 @@ const IncidentsChart = ({ incidentsData, chartDays, theme }) => {
192214
//we have several arrays and for each array we make a ChartBar
193215
<ChartBar
194216
data={bar}
195-
key={bar.group_id}
217+
key={bar[0].group_id}
196218
style={{
197219
data: {
198220
fill: ({ datum }) => datum.fill,
@@ -203,6 +225,7 @@ const IncidentsChart = ({ incidentsData, chartDays, theme }) => {
203225
}}
204226
events={[
205227
{
228+
target: 'data',
206229
eventHandlers: {
207230
onClick: (props, datum) => clickHandler(props, datum),
208231
},

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 'src/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>

0 commit comments

Comments
 (0)