LogTable : remove direct report dependency and include severity fetching logic

src/components/report-viewer-tab.jsx

@@ -19,6 +19,8 @@ import { useReportFetcher } from '../hooks/use-report-fetcher';
 import { COMPUTING_AND_NETWORK_MODIFICATION_TYPE } from '../utils/report/report.constant';
 import { ROOT_NODE_LABEL } from '../constants/node.constant';
 import { Box, Paper } from '@mui/material';
+import { ReportType } from 'utils/report/report.type';
+import { sortSeverityList } from 'utils/report/report-severity';
 
 const styles = {
     div: {
@@ -40,10 +42,11 @@ const styles = {
  */
 export const ReportViewerTab = ({ visible, currentNode, disabled }) => {
     const [report, setReport] = useState();
+    const [severities, setSeverities] = useState();
     const [nodeOnlyReport, setNodeOnlyReport] = useState(true);
     const treeModel = useSelector((state) => state.networkModificationTreeModel);
     const intl = useIntl();
-    const [isReportLoading, fetchReport] = useReportFetcher(
+    const [isReportLoading, fetchReport, , fetchReportSeverities] = useReportFetcher(
         COMPUTING_AND_NETWORK_MODIFICATION_TYPE.NETWORK_MODIFICATION
     );
 
@@ -64,16 +67,20 @@ export const ReportViewerTab = ({ visible, currentNode, disabled }) => {
             fetchReport(nodeOnlyReport).then((r) => {
                 if (r !== undefined) {
                     setReport(r);
+                    fetchReportSeverities(r.id, r.parentId ? ReportType.NODE : ReportType.GLOBAL).then((severities) => {
+                        setSeverities(sortSeverityList(severities));
+                    });
                 }
             });
         } else {
             // if the user unbuilds a node, the report needs to be reset.
             // otherwise, the report will be kept in the state and useless report fetches with previous id will be made when the user rebuilds the node.
             setReport();
+            setSeverities();
         }
         // It is important to keep the notifications in the useEffect's dependencies (even if it is not
         // apparent that they are used) to trigger the update of reports when a notification happens.
-    }, [visible, currentNode, disabled, fetchReport, nodeOnlyReport]);
+    }, [visible, currentNode, disabled, fetchReport, nodeOnlyReport, fetchReportSeverities]);
 
     return (
         <WaitingLoader loading={isReportLoading} message={'loadingReport'}>
@@ -101,6 +108,7 @@ export const ReportViewerTab = ({ visible, currentNode, disabled }) => {
                     <ReportViewer
                         report={report}
                         reportType={COMPUTING_AND_NETWORK_MODIFICATION_TYPE.NETWORK_MODIFICATION}
+                        severities={severities}
                     />
                 )}
             </Paper>

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

@@ -15,12 +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, getReportSeverities, REPORT_SEVERITY } from '../../utils/report/report-severity';
+import { getDefaultSeverityFilter, 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 { Report, ReportLog, ReportType } from 'utils/report/report.type';
+import { ReportLog, ReportType, SeverityLevel } 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';
@@ -59,21 +59,23 @@ const styles = {
 const SEVERITY_COLUMN_FIXED_WIDTH = 115;
 
 type LogTableProps = {
-    report: Report;
     selectedReportId: string;
     reportType: string;
     reportNature: ReportType;
+    severities: SeverityLevel[] | undefined;
     onRowClick: (data: ReportLog) => void;
 };
 
-const LogTable = ({ report, selectedReportId, reportType, reportNature, onRowClick }: LogTableProps) => {
+const LogTable = ({ selectedReportId, reportType, reportNature, severities, onRowClick }: LogTableProps) => {
     const intl = useIntl();
 
     const theme = useTheme<Theme>();
 
     const dispatch = useDispatch();
 
-    const [, , fetchReportLogs] = useReportFetcher(reportType as keyof typeof COMPUTING_AND_NETWORK_MODIFICATION_TYPE);
+    const [, , fetchReportLogs, fetchNodeSeverities] = useReportFetcher(
+        reportType as keyof typeof COMPUTING_AND_NETWORK_MODIFICATION_TYPE
+    );
     const { updateFilter, filterSelector } = useAggridRowFilter({
         filterType: LOGS_STORE_FIELD,
         filterTab: reportType,
@@ -89,7 +91,6 @@ const LogTable = ({ report, selectedReportId, reportType, reportNature, onRowCli
 
     const severityFilter = useMemo(() => getColumnFilterValue(filterSelector, 'severity') ?? [], [filterSelector]);
     const messageFilter = useMemo(() => getColumnFilterValue(filterSelector, 'message'), [filterSelector]);
-    const severities = useMemo(() => getReportSeverities(report), [report]);
 
     const resetSearch = useCallback(() => {
         setSearchResults([]);
@@ -120,7 +121,7 @@ const LogTable = ({ report, selectedReportId, reportType, reportNature, onRowCli
     }, [severityFilter, fetchReportLogs, selectedReportId, reportNature, messageFilter, resetSearch]);
 
     useEffect(() => {
-        if (filterSelector?.length === 0 && severities?.length > 0) {
+        if (filterSelector?.length === 0 && severities && severities.length > 0) {
             dispatch(
                 setLogsFilter(reportType, [
                     {
@@ -132,7 +133,7 @@ const LogTable = ({ report, selectedReportId, reportType, reportNature, onRowCli
                 ])
             );
         }
-    }, [severities, dispatch, reportType, filterSelector]);
+    }, [severities, dispatch, reportType, filterSelector, fetchNodeSeverities, selectedReportId, reportNature]);
 
     useEffect(() => {
         if (selectedReportId && reportNature) {
@@ -320,7 +321,7 @@ const LogTable = ({ report, selectedReportId, reportType, reportNature, onRowCli
                 />
             </Box>
             <Box sx={styles.chipContainer}>
-                {severities.map((severity, index) => (
+                {severities?.map((severity, index) => (
                     <Chip
                         key={severity}
                         label={severity}

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

@@ -11,11 +11,11 @@ import { mapReportsTree } from '../../utils/report/report-tree.mapper';
 import { useDispatch } from 'react-redux';
 import { VirtualizedTreeview } from './virtualized-treeview';
 import { ReportItem } from './treeview-item';
-import { Report, ReportLog, ReportTree, ReportType } from 'utils/report/report.type';
+import { Report, ReportLog, ReportTree, ReportType, SeverityLevel } from 'utils/report/report.type';
 
-type ReportViewerProps = { report: Report; reportType: string };
+type ReportViewerProps = { report: Report; reportType: string; severities: SeverityLevel[] | undefined };
 
-export default function ReportViewer({ report, reportType }: ReportViewerProps) {
+export default function ReportViewer({ report, reportType, severities }: ReportViewerProps) {
     const dispatch = useDispatch();
 
     const [expandedTreeReports, setExpandedTreeReports] = useState<string[]>([]);
@@ -97,10 +97,10 @@ export default function ReportViewer({ report, reportType }: ReportViewerProps)
                 <Grid item xs={12} sm={9}>
                     {selectedReportId && selectedReportType && (
                         <LogTable
-                            report={report}
                             selectedReportId={selectedReportId}
                             reportType={reportType}
                             reportNature={selectedReportType} // GlobalReport or NodeReport
+                            severities={severities}
                             onRowClick={onLogRowClick}
                         />
                     )}

src/components/results/common/computation-report-viewer.tsx

@@ -12,19 +12,21 @@ import { AppState } from '../../../redux/reducer';
 import { ComputingType } from '../../computing-status/computing-type';
 import WaitingLoader from '../../utils/waiting-loader';
 import { useReportFetcher } from '../../../hooks/use-report-fetcher';
-import { Report } from '../../../utils/report/report.type';
+import { Report, ReportType, SeverityLevel } from '../../../utils/report/report.type';
 import { BUILD_STATUS } from 'components/network/constants';
 import { Box } from '@mui/material';
+import { sortSeverityList } from 'utils/report/report-severity';
 
 interface ComputationReportViewerProps {
     reportType: ComputingType;
 }
 
 export const ComputationReportViewer: FunctionComponent<ComputationReportViewerProps> = ({ reportType }) => {
     const [report, setReport] = useState<Report>();
+    const [severities, setSeverities] = useState<SeverityLevel[]>();
     const studyUuid = useSelector((state: AppState) => state.studyUuid);
     const currentNode = useSelector((state: AppState) => state.currentTreeNode);
-    const [isReportLoading, fetchReport] = useReportFetcher(reportType);
+    const [isReportLoading, fetchReport, , fetchReportSeverities] = useReportFetcher(reportType);
     const shouldFetchReport = useMemo(
         () => studyUuid && currentNode?.id && currentNode?.data?.globalBuildStatus !== BUILD_STATUS.NOT_BUILT,
         [studyUuid, currentNode]
@@ -35,19 +37,27 @@ export const ComputationReportViewer: FunctionComponent<ComputationReportViewerP
             fetchReport().then((report) => {
                 if (report !== undefined) {
                     setReport(report);
+                    fetchReportSeverities?.(report?.id, report?.parentId ? ReportType.NODE : ReportType.GLOBAL)?.then(
+                        (severities) => {
+                            setSeverities(sortSeverityList(severities));
+                        }
+                    );
                 }
             });
         } else {
             // if the user unbuilds a node, the report needs to be reset.
             // otherwise, the report will be kept in the state and useless report fetches with previous id will be made when the user rebuilds the node.
             setReport(undefined);
+            setSeverities(undefined);
         }
-    }, [reportType, fetchReport, shouldFetchReport]);
+    }, [reportType, fetchReport, shouldFetchReport, fetchReportSeverities]);
 
     return (
         <WaitingLoader loading={isReportLoading} message={'loadingReport'}>
             <Box sx={{ marginTop: 1 }}>
-                {shouldFetchReport && report && <ReportViewer report={report} reportType={reportType} />}
+                {shouldFetchReport && report && (
+                    <ReportViewer report={report} reportType={reportType} severities={severities} />
+                )}
             </Box>
         </WaitingLoader>
     );

src/hooks/use-report-fetcher.tsx

@@ -8,7 +8,7 @@
 import { useSelector } from 'react-redux';
 import { AppState } from '../redux/reducer';
 import { useCallback, useMemo, useState } from 'react';
-import { fetchNodeReportLogs, fetchParentNodesReport } from '../services/study';
+import { fetchNodeReportLogs, fetchNodeSeverities, fetchParentNodesReport } from '../services/study';
 import { useSnackMessage } from '@gridsuite/commons-ui';
 import { Log, Report, ReportLog, ReportSeverity, ReportType, SeverityLevel } from '../utils/report/report.type';
 import { getContainerDefaultSeverityList, REPORT_SEVERITY } from '../utils/report/report-severity';
@@ -75,7 +75,8 @@ export const useReportFetcher = (
         severityList: string[],
         reportType: ReportType,
         filterMessage: string
-    ) => Promise<Log[]> | undefined
+    ) => Promise<Log[]> | undefined,
+    (reportId: string, reportType: ReportType) => Promise<SeverityLevel[]> | undefined
 ] => {
     const [isLoading, setIsLoading] = useState(false);
     const studyUuid = useSelector((state: AppState) => state.studyUuid);
@@ -151,5 +152,21 @@ export const useReportFetcher = (
         [currentNode, studyUuid, nodesNames]
     );
 
-    return [isLoading, fetchRawParentReport, fetchReportLogs];
+    const fetchReportSeverities = useCallback(
+        (reportId: string, reportType: ReportType) => {
+            if (!studyUuid) {
+                return;
+            }
+            let fetchPromise: (reportId: string) => Promise<SeverityLevel[]>;
+            if (reportType === ReportType.GLOBAL) {
+                fetchPromise = () => fetchNodeSeverities(studyUuid, currentNode!.id, null, true);
+            } else {
+                fetchPromise = (reportId: string) => fetchNodeSeverities(studyUuid, currentNode!.id, reportId, false);
+            }
+            return fetchPromise(reportId);
+        },
+        [currentNode, studyUuid]
+    );
+
+    return [isLoading, fetchRawParentReport, fetchReportLogs, fetchReportSeverities];
 };

src/services/study/index.ts

@@ -118,6 +118,16 @@ export function fetchNodeReportLogs(
     return backendFetchJson(url);
 }
 
+export function fetchNodeSeverities(studyUuid: UUID, nodeUuid: UUID, reportId: string | null, isGlobalLogs: boolean) {
+    let url;
+    if (isGlobalLogs) {
+        url = getStudyUrlWithNodeUuid(studyUuid, nodeUuid) + '/report/aggregated-severities';
+    } else {
+        url = getStudyUrlWithNodeUuid(studyUuid, nodeUuid) + '/report/' + reportId + '/aggregated-severities';
+    }
+    return backendFetchJson(url);
+}
+
 export function fetchSvg(svgUrl: string) {
     console.debug(svgUrl);
     return backendFetch(svgUrl).then((response) => (response.status === 204 ? null : response.json()));

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, Report } from './report.type';
+import { ReportSeverity, SeverityLevel } from './report.type';
 
 export const REPORT_SEVERITY: Record<SeverityLevel, ReportSeverity> = {
     UNKNOWN: {
@@ -80,19 +80,9 @@ export const getDefaultSeverityFilter = (severityList: string[]): string[] => {
     return severityFilter;
 };
 
-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 sortSeverityList(severityList: SeverityLevel[]): SeverityLevel[] {
+    return severityList.sort((a, b) => REPORT_SEVERITY[b].level - REPORT_SEVERITY[a].level);
+}
 
 export function getContainerDefaultSeverityList(): string[] {
     // return name list like ['WARN', 'INFO']