Remove multiple severity per report (#2445)

Signed-off-by: Hugo Marcellin <[email protected]>
Co-authored-by: Ayoub LABIDI <[email protected]>

Author: Meklo

src/components/report-viewer/log-table.tsx

@@ -4,7 +4,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import React, { memo, useCallback, useEffect, useState, useMemo, useRef } from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { CustomAGGrid } from '@gridsuite/commons-ui';
 import { alpha, useTheme } from '@mui/material/styles';
@@ -15,13 +15,12 @@ import { getColumnFilterValue, useAggridRowFilter } from 'hooks/use-aggrid-row-f
 import { LOGS_STORE_FIELD } from 'utils/store-sort-filter-fields';
 import { useReportFetcher } from 'hooks/use-report-fetcher';
 import { useDispatch } from 'react-redux';
-import { getDefaultSeverityFilter, orderSeverityList, REPORT_SEVERITY } from '../../utils/report/report-severity';
-import PropTypes from 'prop-types';
+import { getDefaultSeverityFilter, getReportSeverities, REPORT_SEVERITY } from '../../utils/report/report-severity';
 import { QuickSearch } from './QuickSearch';
 import { Box, Chip, Theme } from '@mui/material';
 import { CellClickedEvent, GridApi, ICellRendererParams, IRowNode, RowClassParams, RowStyle } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
-import { ReportLog, ReportType, SeverityLevel } from 'utils/report/report.type';
+import { Report, ReportLog, ReportType } from 'utils/report/report.type';
 import { COMPUTING_AND_NETWORK_MODIFICATION_TYPE } from 'utils/report/report.constant';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import VisibilityIcon from '@mui/icons-material/Visibility';
@@ -60,14 +59,14 @@ const styles = {
 const SEVERITY_COLUMN_FIXED_WIDTH = 115;
 
 type LogTableProps = {
+    report: Report;
     selectedReportId: string;
     reportType: string;
     reportNature: ReportType;
-    severities: SeverityLevel[];
     onRowClick: (data: ReportLog) => void;
 };
 
-const LogTable = ({ selectedReportId, reportType, reportNature, severities, onRowClick }: LogTableProps) => {
+const LogTable = ({ report, selectedReportId, reportType, reportNature, onRowClick }: LogTableProps) => {
     const intl = useIntl();
 
     const theme = useTheme<Theme>();
@@ -90,7 +89,7 @@ const LogTable = ({ selectedReportId, reportType, reportNature, severities, onRo
 
     const severityFilter = useMemo(() => getColumnFilterValue(filterSelector, 'severity') ?? [], [filterSelector]);
     const messageFilter = useMemo(() => getColumnFilterValue(filterSelector, 'message'), [filterSelector]);
-    const orderedSeverities = useMemo(() => orderSeverityList(severities), [severities]);
+    const severities = useMemo(() => getReportSeverities(report), [report]);
 
     const resetSearch = useCallback(() => {
         setSearchResults([]);
@@ -118,10 +117,9 @@ const LogTable = ({ selectedReportId, reportType, reportNature, severities, onRo
             setRowData(transformedLogs);
             resetSearch();
         });
-    }, [fetchReportLogs, messageFilter, reportNature, severityFilter, selectedReportId, resetSearch]);
+    }, [severityFilter, fetchReportLogs, selectedReportId, reportNature, messageFilter, resetSearch]);
 
     useEffect(() => {
-        // initialize the filter with the severities
         if (filterSelector?.length === 0 && severities?.length > 0) {
             dispatch(
                 setLogsFilter(reportType, [
@@ -134,19 +132,13 @@ const LogTable = ({ selectedReportId, reportType, reportNature, severities, onRo
                 ])
             );
         }
+    }, [severities, dispatch, reportType, filterSelector]);
+
+    useEffect(() => {
         if (selectedReportId && reportNature) {
             refreshLogsOnSelectedReport();
         }
-    }, [
-        dispatch,
-        filterSelector?.length,
-        refreshLogsOnSelectedReport,
-        reportNature,
-        reportType,
-        selectedReportId,
-        severities,
-        updateFilter,
-    ]);
+    }, [refreshLogsOnSelectedReport, reportNature, selectedReportId]);
 
     const COLUMNS_DEFINITIONS = useMemo(
         () => [
@@ -328,7 +320,7 @@ const LogTable = ({ selectedReportId, reportType, reportNature, severities, onRo
                 />
             </Box>
             <Box sx={styles.chipContainer}>
-                {orderedSeverities.map((severity, index) => (
+                {severities.map((severity, index) => (
                     <Chip
                         key={severity}
                         label={severity}
@@ -354,12 +346,4 @@ const LogTable = ({ selectedReportId, reportType, reportNature, severities, onRo
     );
 };
 
-LogTable.propTypes = {
-    selectedReportId: PropTypes.string,
-    reportType: PropTypes.string,
-    reportNature: PropTypes.string,
-    severities: PropTypes.arrayOf(PropTypes.string),
-    onRowClick: PropTypes.func,
-};
-
 export default memo(LogTable);

src/components/report-viewer/report-viewer.tsx

@@ -12,7 +12,7 @@ import ReportItem from './report-item';
 import { mapReportsTree } from '../../utils/report/report-tree.mapper';
 import { useDispatch } from 'react-redux';
 import ReportTree from './report-tree';
-import { Report, ReportLog, ReportTree as ReportTreeType, ReportType, SeverityLevel } from 'utils/report/report.type';
+import { Report, ReportLog, ReportTree as ReportTreeType, ReportType } from 'utils/report/report.type';
 
 // WARNING this file has been copied from commons-ui, and updated here. Putting it back to commons-ui has to be discussed.
 
@@ -32,7 +32,6 @@ export default function ReportViewer({ report, reportType }: ReportViewerProps)
     const [reportVerticalPositionFromTop, setReportVerticalPositionFromTop] = useState<number | undefined>(undefined);
 
     const [selectedReportId, setSelectedReportId] = useState(report?.id);
-    const [severities, setSeverities] = useState<SeverityLevel[]>([]);
     const [selectedReportType, setSelectedReportType] = useState<ReportType>();
 
     const reportTreeData = useRef<Record<string, ReportTreeType>>({});
@@ -47,7 +46,7 @@ export default function ReportViewer({ report, reportType }: ReportViewerProps)
         return (
             <ReportItem
                 labelText={report.message}
-                labelIconColor={report.highestSeverity.colorName}
+                labelIconColor={report.severity.colorName}
                 key={report.id}
                 sx={styles.treeItem}
                 nodeId={report.id}
@@ -62,7 +61,6 @@ export default function ReportViewer({ report, reportType }: ReportViewerProps)
         treeView.current = initializeTreeDataAndComponent(reportTree);
         setExpandedTreeReports([report.id]);
         setSelectedReportId(report.id);
-        setSeverities([...new Set(reportTree.severities)]);
         setSelectedReportType(reportTreeData.current[report.id]?.type);
     }, [report, initializeTreeDataAndComponent, dispatch]);
 
@@ -73,7 +71,6 @@ export default function ReportViewer({ report, reportType }: ReportViewerProps)
     const handleSelectNode = (_: SyntheticEvent, reportId: string) => {
         if (selectedReportId !== reportId) {
             setSelectedReportId(reportId);
-            setSeverities([...new Set(reportTreeData.current[reportId].severities)]);
             setSelectedReportType(reportTreeData.current[reportId].type);
         }
     };
@@ -133,10 +130,10 @@ export default function ReportViewer({ report, reportType }: ReportViewerProps)
                 <Grid item xs={12} sm={9} sx={{ height: '100%' }}>
                     {selectedReportId && selectedReportType && (
                         <LogTable
+                            report={report}
                             selectedReportId={selectedReportId}
                             reportType={reportType}
                             reportNature={selectedReportType} // GlobalReport or NodeReport
-                            severities={severities}
                             onRowClick={onLogRowClick}
                         />
                     )}

src/hooks/use-report-fetcher.tsx

@@ -10,8 +10,8 @@ import { AppState } from '../redux/reducer';
 import { useCallback, useMemo, useState } from 'react';
 import { fetchNodeReportLogs, fetchParentNodesReport } from '../services/study';
 import { useSnackMessage } from '@gridsuite/commons-ui';
-import { Log, Report, ReportLog, ReportType } from '../utils/report/report.type';
-import { getContainerDefaultSeverityList } from '../utils/report/report-severity';
+import { Log, Report, ReportLog, ReportSeverity, ReportType, SeverityLevel } from '../utils/report/report.type';
+import { getContainerDefaultSeverityList, REPORT_SEVERITY } from '../utils/report/report-severity';
 import { mapReportLogs } from '../utils/report/report-log.mapper';
 import { COMPUTING_AND_NETWORK_MODIFICATION_TYPE, GLOBAL_REPORT_NODE_LABEL } from '../utils/report/report.constant';
 import { ROOT_NODE_LABEL } from '../constants/node.constant';
@@ -26,11 +26,26 @@ function makeSingleReportAndMapNames(report: Report | Report[], nodesNames: Map<
         return {
             message: GLOBAL_REPORT_NODE_LABEL,
             id: GLOBAL_REPORT_NODE_LABEL,
+            severity: getHighestSeverity(report),
             subReports: report.map((r) => setNodeName(r, nodesNames)),
         } as Report;
     }
 }
 
+const getHighestSeverity = (report: Report[]): SeverityLevel => {
+    if (report.length === 1) {
+        return report[0].severity;
+    }
+
+    const severityList = report.map((r) => r.severity);
+    let reduceFct = (p: ReportSeverity, c: ReportSeverity) => (c.level > p.level ? c : p);
+    let highestSeverity = REPORT_SEVERITY.UNKNOWN;
+
+    return Object.values(REPORT_SEVERITY)
+        .filter((s) => severityList.includes(s.name))
+        .reduce(reduceFct, highestSeverity).name;
+};
+
 function setNodeName(report: Report, nodesNames: Map<string, string>) {
     if (report.message !== ROOT_NODE_LABEL) {
         report.message = nodesNames?.get(report.message) ?? report.message;

src/utils/report/report-log.mapper.ts

@@ -5,8 +5,8 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Log, ReportLog, ReportSeverity } from './report.type';
 import { REPORT_SEVERITY } from './report-severity';
+import { Log, ReportLog } from './report.type';
 
 export const mapReportLogs = (reportLogs: ReportLog[]) => {
     const formattedLogs: Log[] = [];
@@ -17,18 +17,9 @@ export const mapReportLogs = (reportLogs: ReportLog[]) => {
 };
 
 const formatLog = (reportLog: ReportLog, formattedLogs: Log[]) => {
-    const highestSeverity = mapSeverity(reportLog.severity ?? [REPORT_SEVERITY.UNKNOWN.name]);
     formattedLogs.push({
         message: reportLog.message,
-        severity: highestSeverity,
+        severity: Object.values(REPORT_SEVERITY).find((s) => reportLog.severity === s.name) ?? REPORT_SEVERITY.UNKNOWN,
         parentId: reportLog.parentId,
     });
 };
-
-const mapSeverity = (severities: string[]) => {
-    let reduceFct = (p: ReportSeverity, c: ReportSeverity) => (c.level > p.level ? c : p);
-    let highestSeverity: ReportSeverity = REPORT_SEVERITY.UNKNOWN;
-    return Object.values(REPORT_SEVERITY)
-        .filter((s) => severities.includes(s.name))
-        .reduce(reduceFct, highestSeverity);
-};

src/utils/report/report-severity.ts

@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { ReportSeverity, SeverityLevel } from './report.type';
+import { ReportSeverity, SeverityLevel, Report } from './report.type';
 
 export const REPORT_SEVERITY: Record<SeverityLevel, ReportSeverity> = {
     UNKNOWN: {
@@ -80,23 +80,23 @@ export const getDefaultSeverityFilter = (severityList: string[]): string[] => {
     return severityFilter;
 };
 
-export function orderSeverityList(severityList: SeverityLevel[]): SeverityLevel[] {
-    return severityList.sort((a, b) => REPORT_SEVERITY[b].level - REPORT_SEVERITY[a].level);
-}
+export const getReportSeverities = (report: Report): SeverityLevel[] => {
+    const severities: SeverityLevel[] = [];
+    if (report.severity) {
+        severities.push(report.severity);
+    }
+    if (report.subReports.length > 0) {
+        report.subReports.forEach((subreport) => {
+            severities.push(...getReportSeverities(subreport));
+        });
+    }
+    severities.sort((a, b) => REPORT_SEVERITY[b].level - REPORT_SEVERITY[a].level);
+    return [...new Set(severities)];
+};
 
 export function getContainerDefaultSeverityList(): string[] {
     // return name list like ['WARN', 'INFO']
     return Object.values(REPORT_SEVERITY)
         .filter((s) => s.displayedByDefaultForReportContainer)
         .map((s) => s.name);
 }
-
-export function getHighestSeverity(severityList: string[]) {
-    // We have a un-ordered list of existing severities, like ['INFO', 'ERROR', 'DEBUG'].
-    // Lets find out the highest level corresponding SEVERITY object, like SEVERITY.ERROR:
-    let reduceFct = (p: ReportSeverity, c: ReportSeverity) => (c.level > p.level ? c : p);
-    let highestSeverity = REPORT_SEVERITY.UNKNOWN;
-    return Object.values(REPORT_SEVERITY)
-        .filter((s) => severityList.includes(s.name))
-        .reduce(reduceFct, highestSeverity);
-}

src/utils/report/report-tree.mapper.ts

@@ -6,18 +6,16 @@
  */
 
 import { Report, ReportTree, ReportType } from './report.type';
-import { getHighestSeverity } from './report-severity';
 import { GLOBAL_REPORT_NODE_LABEL } from './report.constant';
+import { REPORT_SEVERITY } from './report-severity';
 
 export function mapReportsTree(report: Report, reportType?: ReportType): ReportTree {
-    const severityList = report.severities || report.subReports.flatMap((subReport) => subReport.severities);
     return {
         type: reportType ?? (report.message === GLOBAL_REPORT_NODE_LABEL ? ReportType.GLOBAL : ReportType.NODE),
         id: report.id,
         message: report.message,
         parentId: report.parentId,
-        severities: severityList,
-        highestSeverity: getHighestSeverity(severityList),
+        severity: Object.values(REPORT_SEVERITY).find((s) => report.severity === s.name) ?? REPORT_SEVERITY.UNKNOWN,
         subReports: report.subReports
             .filter((subReport) => subReport.subReports.length > 0 || subReport.id)
             .map((subReport) => mapReportsTree(subReport, ReportType.NODE)),

src/utils/report/report.type.ts

@@ -21,15 +21,15 @@ export enum ReportType {
     NODE = 'NodeReport',
 }
 
-export type ReportTree = Report & {
+export type ReportTree = Omit<Report, 'severity' | 'subReports'> & {
     type: ReportType;
-    highestSeverity: ReportSeverity;
+    severity: ReportSeverity;
     subReports: ReportTree[];
 };
 
 export type Report = {
     message: string;
-    severities: SeverityLevel[];
+    severity: SeverityLevel;
     parentId: string | null;
     id: string;
     subReports: Report[];
@@ -43,7 +43,7 @@ export type Log = {
 
 export type ReportLog = {
     message: string;
-    severity: SeverityLevel[];
+    severity: SeverityLevel;
     parentId: string;
     backgroundColor?: string;
 };