Merge pull request #475 from jgbernalp/refactor-incidents-to-typescript

NO-JIRA: refactor incidents to add typescript

Author: openshift-merge-bot[bot]

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

@@ -14,37 +14,38 @@ import { Card, CardBody, CardTitle, EmptyState, EmptyStateBody } from '@patternf
 import { createAlertsChartBars, formatDate, generateDateArray } from '../utils';
 import { getResizeObserver } from '@patternfly/react-core';
 import { useDispatch, useSelector } from 'react-redux';
-import * as _ from 'lodash-es';
 import { setAlertsAreLoading } from '../../../actions/observe';
 import {
   t_global_color_status_danger_default,
   t_global_color_status_info_default,
   t_global_color_status_warning_default,
 } from '@patternfly/react-tokens';
+import { MonitoringState } from '../../../reducers/observe';
+import { VictoryPortal } from 'victory';
 
-const AlertsChart = ({ chartDays, theme }) => {
+const AlertsChart = ({ chartDays, theme }: { chartDays: number; theme: 'light' | 'dark' }) => {
   const dispatch = useDispatch();
-  const [chartContainerHeight, setChartContainerHeight] = React.useState();
-  const [chartHeight, setChartHeight] = React.useState();
-  const alertsData = useSelector((state) =>
+  const [chartContainerHeight, setChartContainerHeight] = React.useState<number>();
+  const [chartHeight, setChartHeight] = React.useState<number>();
+  const alertsData = useSelector((state: MonitoringState) =>
     state.plugins.mcp.getIn(['incidentsData', 'alertsData']),
   );
-  const alertsAreLoading = useSelector((state) =>
+  const alertsAreLoading = useSelector((state: MonitoringState) =>
     state.plugins.mcp.getIn(['incidentsData', 'alertsAreLoading']),
   );
-  const filteredData = useSelector((state) =>
+  const filteredData = useSelector((state: MonitoringState) =>
     state.plugins.mcp.getIn(['incidentsData', 'filteredIncidentsData']),
   );
-  const incidentGroupId = useSelector((state) =>
+  const incidentGroupId = useSelector((state: MonitoringState) =>
     state.plugins.mcp.getIn(['incidentsData', 'groupId']),
   );
 
   const dateValues = React.useMemo(() => generateDateArray(chartDays), [chartDays]);
 
   const chartData = React.useMemo(() => {
     if (!Array.isArray(alertsData) || alertsData.length === 0) return [];
-    return alertsData.map((alert) => createAlertsChartBars(alert, theme, dateValues));
-  }, [alertsData, theme, dateValues]);
+    return alertsData.map((alert) => createAlertsChartBars(alert, dateValues));
+  }, [alertsData, dateValues]);
 
   React.useEffect(() => {
     setChartContainerHeight(chartData?.length < 5 ? 300 : chartData?.length * 60);
@@ -73,12 +74,12 @@ const AlertsChart = ({ chartDays, theme }) => {
   }, [handleResize]);
 
   return (
-    <Card className="alerts-chart-card">
+    <Card className="alerts-chart-card" style={{ overflow: 'visible' }}>
       <div ref={containerRef}>
         <CardTitle>Alerts Timeline</CardTitle>
         {alertsAreLoading ? (
           <EmptyState
-            variant="large"
+            variant="lg"
             style={{
               height: '250px',
             }}
@@ -88,21 +89,22 @@ const AlertsChart = ({ chartDays, theme }) => {
         ) : (
           <CardBody
             style={{
-              height: { chartContainerHeight },
+              height: chartContainerHeight,
               width: '100%',
             }}
           >
             <Chart
               containerComponent={
                 <ChartVoronoiContainer
                   labelComponent={
-                    <ChartTooltip
-                      orientation="top"
-                      dx={({ x, x0 }) => -(x - x0) / 2}
-                      dy={-5} // Position tooltip so pointer appears above bar
-                      constrainToVisibleArea
-                      labelComponent={<ChartLabel />}
-                    />
+                    <VictoryPortal>
+                      <ChartTooltip
+                        orientation="top"
+                        dx={({ x, x0 }: any) => -(x - x0) / 2}
+                        dy={-5} // Position tooltip so pointer appears above bar
+                        labelComponent={<ChartLabel />}
+                      />
+                    </VictoryPortal>
                   }
                   labels={({ datum }) => {
                     if (datum.nodata) {
@@ -165,7 +167,7 @@ const AlertsChart = ({ chartDays, theme }) => {
                 tickFormat={(t) =>
                   new Date(t).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
                 }
-                tickValues={dateValues}
+                tickValues={dateValues.map((ts) => new Date(ts * 1000))}
                 tickLabelComponent={
                   <ChartLabel style={{ fill: theme === 'light' ? '#1b1d21' : '#e0e0e0' }} />
                 }

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

@@ -11,34 +11,50 @@ import {
   ChartTooltip,
   ChartVoronoiContainer,
 } from '@patternfly/react-charts/victory';
-import { Bullseye, Card, CardBody, CardTitle, Spinner } from '@patternfly/react-core';
 import {
-  createIncidentsChartBars,
-  formatDate,
-  generateDateArray,
-  updateBrowserUrl,
-} from '../utils';
-import { getResizeObserver } from '@patternfly/react-core';
-import { useDispatch, useSelector } from 'react-redux';
-import { setChooseIncident } from '../../../actions/observe';
+  Bullseye,
+  Card,
+  CardBody,
+  CardTitle,
+  getResizeObserver,
+  Spinner,
+} from '@patternfly/react-core';
 import {
   t_global_color_status_danger_default,
   t_global_color_status_info_default,
   t_global_color_status_warning_default,
 } from '@patternfly/react-tokens';
-import { setAlertsAreLoading } from '../../../actions/observe';
+import { useDispatch, useSelector } from 'react-redux';
+import { setAlertsAreLoading, setChooseIncident } from '../../../actions/observe';
+import { MonitoringState } from '../../../reducers/observe';
+import { Incident } from '../model';
+import {
+  createIncidentsChartBars,
+  formatDate,
+  generateDateArray,
+  updateBrowserUrl,
+} from '../utils';
+import { VictoryPortal } from 'victory';
 
-const IncidentsChart = ({ incidentsData, chartDays, theme }) => {
+const IncidentsChart = ({
+  incidentsData,
+  chartDays,
+  theme,
+}: {
+  incidentsData: Array<Incident>;
+  chartDays: number;
+  theme: 'light' | 'dark';
+}) => {
   const dispatch = useDispatch();
   const [isLoading, setIsLoading] = React.useState(true);
-  const [chartContainerHeight, setChartContainerHeight] = React.useState();
-  const [chartHeight, setChartHeight] = React.useState();
+  const [chartContainerHeight, setChartContainerHeight] = React.useState<number>();
+  const [chartHeight, setChartHeight] = React.useState<number>();
   const dateValues = React.useMemo(() => generateDateArray(chartDays), [chartDays]);
 
   const chartData = React.useMemo(() => {
     if (!Array.isArray(incidentsData) || incidentsData.length === 0) return [];
-    return incidentsData.map((incident) => createIncidentsChartBars(incident, theme, dateValues));
-  }, [incidentsData, theme, dateValues]);
+    return incidentsData.map((incident) => createIncidentsChartBars(incident, dateValues));
+  }, [incidentsData, dateValues]);
 
   React.useEffect(() => {
     setIsLoading(false);
@@ -63,8 +79,10 @@ const IncidentsChart = ({ incidentsData, chartDays, theme }) => {
     return () => observer();
   }, []);
 
-  const selectedId = useSelector((state) => state.plugins.mcp.getIn(['incidentsData', 'groupId']));
-  const incidentsActiveFilters = useSelector((state) =>
+  const selectedId = useSelector((state: MonitoringState) =>
+    state.plugins.mcp.getIn(['incidentsData', 'groupId']),
+  );
+  const incidentsActiveFilters = useSelector((state: MonitoringState) =>
     state.plugins.mcp.getIn(['incidentsData', 'incidentsActiveFilters']),
   );
 
@@ -97,8 +115,8 @@ const IncidentsChart = ({ incidentsData, chartDays, theme }) => {
   );
 
   return (
-    <Card className="incidents-chart-card">
-      <div ref={containerRef}>
+    <Card className="incidents-chart-card" style={{ overflow: 'visible' }}>
+      <div ref={containerRef} style={{ position: 'relative' }}>
         <CardTitle>Incidents Timeline</CardTitle>
         {isLoading ? (
           <Bullseye>
@@ -107,29 +125,33 @@ const IncidentsChart = ({ incidentsData, chartDays, theme }) => {
         ) : (
           <CardBody
             style={{
-              height: { chartContainerHeight },
+              height: chartContainerHeight,
               width: '100%',
             }}
           >
             <Chart
               containerComponent={
                 <ChartVoronoiContainer
                   labelComponent={
-                    <ChartTooltip
-                      orientation="top"
-                      dx={({ x, x0 }) => -(x - x0) / 2}
-                      dy={-5} // Position tooltip so pointer appears above bar
-                      constrainToVisibleArea
-                      labelComponent={<ChartLabel />}
-                    />
+                    <VictoryPortal>
+                      <ChartTooltip
+                        activateData={false}
+                        orientation="top"
+                        dx={({ x, x0 }: any) => -(x - x0) / 2}
+                        dy={-5} // Position tooltip so pointer appears above bar
+                        labelComponent={<ChartLabel />}
+                      />
+                    </VictoryPortal>
                   }
+                  voronoiPadding={0}
                   labels={({ datum }) => {
                     if (datum.nodata) {
                       return null;
                     }
                     return `Severity: ${datum.name}
                     Component: ${datum.componentList?.join(', ')}
-                    Incident ID: ${datum.group_id}
+                    Incident ID: 
+                    ${datum.group_id}
                     Start: ${formatDate(new Date(datum.y0), true)}
                     End: ${datum.firing ? '---' : formatDate(new Date(datum.y), true)}`;
                   }}
@@ -181,7 +203,7 @@ const IncidentsChart = ({ incidentsData, chartDays, theme }) => {
                 tickFormat={(t) =>
                   new Date(t).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
                 }
-                tickValues={dateValues}
+                tickValues={dateValues.map((ts) => new Date(ts * 1000))}
                 tickLabelComponent={
                   <ChartLabel style={{ fill: theme === 'light' ? '#1b1d21' : '#e0e0e0' }} />
                 }
@@ -192,7 +214,7 @@ const IncidentsChart = ({ incidentsData, chartDays, theme }) => {
                     //we have several arrays and for each array we make a ChartBar
                     <ChartBar
                       data={bar}
-                      key={bar.group_id}
+                      key={bar[0].group_id}
                       style={{
                         data: {
                           fill: ({ datum }) => datum.fill,
@@ -203,6 +225,7 @@ const IncidentsChart = ({ incidentsData, chartDays, theme }) => {
                       }}
                       events={[
                         {
+                          target: 'data',
                           eventHandlers: {
                             onClick: (props, datum) => clickHandler(props, datum),
                           },

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

@@ -25,6 +25,7 @@ import { SeverityBadge } from '../alerting/AlertUtils';
 import { useAlertsPoller } from '../hooks/useAlertsPoller';
 import { useSelector } from 'react-redux';
 import isEqual from 'lodash/isEqual';
+import { MonitoringState } from 'src/reducers/observe';
 
 function useDeepCompareMemoize(value) {
   const ref = React.useRef();
@@ -44,7 +45,7 @@ const IncidentsDetailsRowTable = ({ alerts }) => {
   const [alertsWithMatchedData, setAlertsWithMatchedData] = React.useState([]);
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
 
-  const alertsWithLabels = useSelector((state) =>
+  const alertsWithLabels = useSelector((state: MonitoringState) =>
     getLegacyObserveState(perspective, state)?.get(alertsKey),
   );
 
@@ -67,7 +68,7 @@ const IncidentsDetailsRowTable = ({ alerts }) => {
   }, [memoizedAlerts, alertsWithLabels]);
 
   return (
-    <Table borders={'compactBorderless'}>
+    <Table borders={false} variant="compact">
       <Thead>
         <Tr>
           <Th width={25}>{t('Alert Name')}</Th>