Skip to content

Commit

Permalink
use reducer
Browse files Browse the repository at this point in the history 
Signed-off-by: Abdelsalem <abdelsalem.hedhili@rte-france.com>
  • Loading branch information
@AbdelHedhili
AbdelHedhili committed Sep 18, 2024
1 parent e292ed8 commit ae66fc9
Show file tree
Hide file tree
Showing 4 changed files with 113 additions and 70 deletions.
31 changes: 29 additions & 2 deletions src/components/report-viewer/log-table.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ import { MuiVirtualizedTable } from '@gridsuite/commons-ui';
import { useTheme } from '@mui/material/styles';
import { FilterButton } from './filter-button';
import { TextFilterButton } from './text-filter-button.jsx';
import { useDispatch, useSelector } from 'react-redux';
import { useDebounce } from 'use-debounce';
import { setReportFilters } from '../../redux/actions';

// WARNING this file has been copied from commons-ui, and updated here. Putting it back to commons-ui has to be discussed.

Expand All @@ -36,13 +39,37 @@ const styles = {

const VirtualizedTable = styled(MuiVirtualizedTable)(styles);

const LogTable = ({ logs, onRowClick, selectedSeverity, setSelectedSeverity, messageFilter, setMessageFilter }) => {
const LogTable = ({ logs, onRowClick }) => {
const intl = useIntl();

const theme = useTheme();

const dispatch = useDispatch();

const [selectedRowIndex, setSelectedRowIndex] = useState(-1);

const severityFilter = useSelector((state) => state.reportSeverityFilter);

const selectedReportId = useSelector((state) => state.reportSelectedReportId);

//messageFilter is only used for display, debouncedMessageFilter is used for triggering fetch
const [messageFilter, setMessageFilter] = useState('');

const [debouncedMessageFilter] = useDebounce(messageFilter, 500);

useEffect(() => {
dispatch(setReportFilters(undefined, debouncedMessageFilter, undefined));
}, [debouncedMessageFilter, dispatch]);

//We reset the displayed message filter when we switch reports
useEffect(() => {
setMessageFilter('');
}, [selectedReportId]);

const setSeverityFilter = (selectedSeverity) => {
dispatch(setReportFilters(undefined, undefined, selectedSeverity));
};

const severityCellRender = (cellData) => {
return (
<TableCell
Expand All @@ -68,7 +95,7 @@ const LogTable = ({ logs, onRowClick, selectedSeverity, setSelectedSeverity, mes
maxWidth: SEVERITY_COLUMN_FIXED_WIDTH,
minWidth: SEVERITY_COLUMN_FIXED_WIDTH,
cellRenderer: severityCellRender,
extra: <FilterButton selectedItems={selectedSeverity} setSelectedItems={setSelectedSeverity} />,
extra: <FilterButton selectedItems={severityFilter} setSelectedItems={setSeverityFilter} />,
},
{
label: intl.formatMessage({ id: 'report_viewer/message' }).toUpperCase(),
Expand Down
111 changes: 43 additions & 68 deletions src/components/report-viewer/report-viewer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ import { getDefaultSeverityFilter } from '../../utils/report-severity.utils';
import { useReportFetcher } from '../../hooks/use-report-fetcher';
import { mapReportLog, mapReportLogs } from '../../utils/report-log.mapper';
import { mapReportsTree } from '../../utils/report-tree.mapper';
// import { useDebounce } from 'use-debounce';
import { useDispatch, useSelector } from 'react-redux';
import { setReportFilters } from '../../redux/actions';

// WARNING this file has been copied from commons-ui, and updated here. Putting it back to commons-ui has to be discussed.

Expand All @@ -26,20 +27,17 @@ const styles = {
};

export default function ReportViewer({ report, reportType }) {
const dispatch = useDispatch();

const [expandedTreeReports, setExpandedTreeReports] = useState([]);
const [logs, setLogs] = useState(null);
const [highlightedReportId, setHighlightedReportId] = useState();
const [reportVerticalPositionFromTop, setReportVerticalPositionFromTop] = useState(undefined);
const [isLogLoading, , fetchReportLogs] = useReportFetcher(reportType);

// const [selectedReportId, setSelectedReportId] = useState(null);
// const [severityFilter, setSeverityFilter] = useState(getDefaultSeverityFilter());
// const [messageFilter, setMessageFilter] = useState('');
// const [filterLogsTextDebounced] = useDebounce(messageFilter, 500);

const selectedReportId = useRef();
const severityFilter = useRef([]);
const messageFilter = useRef('');
const selectedReportId = useSelector((state) => state.reportSelectedReportId);
const severityFilter = useSelector((state) => state.reportSeverityFilter);
const messageFilter = useSelector((state) => state.reportMessageFilter);

const reportTreeData = useRef({});
const treeView = useRef(null);
Expand All @@ -63,75 +61,59 @@ export default function ReportViewer({ report, reportType }) {
);
}, []);

const refreshLogsOnSelectedReport = useCallback(() => {
let severityList = [];
for (const [severity, selected] of Object.entries(severityFilter.current)) {
if (selected) {
severityList.push(severity);
const refreshLogsOnSelectedReport = useCallback(
(selectedReportId, severityFilter, messageFilter) => {
let severityList = [];
for (const [severity, selected] of Object.entries(severityFilter)) {
if (selected) {
severityList.push(severity);
}
}
if (severityList.length === 0) {
setLogs([]);
setHighlightedReportId(null);
return;
}
}

if (severityList.length === 0) {
setLogs([]);
setHighlightedReportId(null);
return;
}
fetchReportLogs(
selectedReportId,
severityList,
reportTreeData.current[selectedReportId].type,
messageFilter
).then((reportLogs) => {
setLogs(mapReportLogs(reportLogs));
});
},
[fetchReportLogs]
);

fetchReportLogs(
selectedReportId.current,
severityList,
reportTreeData.current[selectedReportId.current].type,
messageFilter.current
).then((reportLogs) => {
setLogs(mapReportLogs(reportLogs));
});
}, [fetchReportLogs]);
useEffect(() => {
//refresh the logs when we change the filters
if (selectedReportId != null) {
refreshLogsOnSelectedReport(selectedReportId, severityFilter, messageFilter);
}
}, [messageFilter, severityFilter, selectedReportId, refreshLogsOnSelectedReport]);

useEffect(() => {
const reportTree = mapReportsTree(report);
treeView.current = initializeTreeDataAndComponent(reportTree);
selectedReportId.current = report.id;
setExpandedTreeReports([report.id]);
setLogs(mapReportLog(report, reportTree.severities));
severityFilter.current = getDefaultSeverityFilter(reportTree.severities);
}, [report, initializeTreeDataAndComponent]);

// //to reload the logs with the updated message filter without spamming the back
// useEffect(() => {
// if (selectedReportId != null) {
// refreshLogsOnSelectedReport(selectedReportId, severityFilter, filterLogsTextDebounced);
// }
// }, [refreshLogsOnSelectedReport, filterLogsTextDebounced, selectedReportId, severityFilter]);
dispatch(setReportFilters(report.id, '', getDefaultSeverityFilter(reportTree.severities)));
}, [report, initializeTreeDataAndComponent, dispatch]);

const handleReportVerticalPositionFromTop = useCallback((node) => {
setReportVerticalPositionFromTop(node?.getBoundingClientRect()?.top);
}, []);

const handleSelectNode = (_, reportId) => {
if (selectedReportId !== reportId) {
severityFilter.current = getDefaultSeverityFilter(reportTreeData.current[reportId].severities);
messageFilter.current = '';
selectedReportId.current = reportId;
refreshLogsOnSelectedReport();
dispatch(
setReportFilters(reportId, '', getDefaultSeverityFilter(reportTreeData.current[reportId].severities))
);
}
};

const onSeverityChange = (newSeverityFilter) => {
severityFilter.current = newSeverityFilter;
refreshLogsOnSelectedReport();
};

// useEffect(() => {
// const timeout = setTimeout(() => refreshLogsOnSelectedReport(), 500);
//
// return () => clearTimeout(timeout);
// }, [messageFilter.current]);

const handleMessageFilterChange = (newMessageFilter) => {
messageFilter.current = newMessageFilter;
refreshLogsOnSelectedReport();
};

// The MUI TreeView/TreeItems use useMemo on our items, so it's important to avoid changing the context
const isHighlighted = useMemo(
() => ({
Expand Down Expand Up @@ -176,7 +158,7 @@ export default function ReportViewer({ report, reportType }) {
<ReportTreeViewContext.Provider value={isHighlighted}>
{/*TODO do we need to useMemo/useCallback these props to avoid rerenders ?*/}
<ReportTree
selectedReportId={selectedReportId.current}
selectedReportId={selectedReportId}
expandedTreeReports={expandedTreeReports}
setExpandedTreeReports={setExpandedTreeReports}
handleSelectNode={handleSelectNode}
Expand All @@ -186,14 +168,7 @@ export default function ReportViewer({ report, reportType }) {
</ReportTreeViewContext.Provider>
<Grid item xs={12} sm={9} sx={{ height: '100%' }}>
<WaitingLoader loading={isLogLoading} message={'loadingReport'}>
<LogTable
logs={logs}
onRowClick={onLogRowClick}
selectedSeverity={severityFilter.current}
setSelectedSeverity={onSeverityChange}
messageFilter={messageFilter.current}
setMessageFilter={handleMessageFilterChange}
/>
<LogTable logs={logs} onRowClick={onLogRowClick} severityFilter={severityFilter} />
</WaitingLoader>
</Grid>
</Grid>
Expand Down
19 changes: 19 additions & 0 deletions src/redux/actions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ import {
} from '../utils/store-sort-filter-fields';
import { SortConfigType } from '../hooks/use-aggrid-sort';
import { StudyDisplayMode } from '../components/network-modification.type';
import { SeverityFilter } from '../types/report.type';

type MutableUnknownArray = unknown[];

Expand Down Expand Up @@ -1124,3 +1125,21 @@ export function setTableSort(table: TableSortKeysType, tab: string, sort: SortCo
sort,
};
}
export const REPORT_FILTER = 'REPORT_FILTER';
export type ReportFilterAction = Readonly<Action<typeof REPORT_FILTER>> & {
reportId: string | null | undefined;
messageFilter: string | undefined;
severityFilter: SeverityFilter | undefined;
};
export function setReportFilters(
reportId: string,
messageFilter: string,
severityFilter: SeverityFilter
): ReportFilterAction {
return {
type: REPORT_FILTER,
reportId,
messageFilter,
severityFilter,
};
}
22 changes: 22 additions & 0 deletions src/redux/reducer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -181,13 +181,15 @@ import {
SUBSTATION_LAYOUT,
SubstationLayoutAction,
TABLE_SORT,
REPORT_FILTER,
TableSortAction,
TOGGLE_PIN_DIAGRAM,
TogglePinDiagramAction,
UPDATE_EQUIPMENTS,
UpdateEquipmentsAction,
USE_NAME,
UseNameAction,
ReportFilterAction,
} from './actions';
import {
getLocalStorageComputedLanguage,
Expand Down Expand Up @@ -271,6 +273,8 @@ import { Node } from 'react-flow-renderer';
import { BUILD_STATUS } from '../components/network/constants';
import { SortConfigType, SortWay } from '../hooks/use-aggrid-sort';
import { StudyDisplayMode } from '../components/network-modification.type';
import { SeverityFilter } from '../types/report.type';
import { getDefaultSeverityFilter } from '../utils/report-severity.utils';

export enum NotificationType {
STUDY = 'study',
Expand Down Expand Up @@ -411,6 +415,9 @@ export interface AppState extends CommonStoreState {
studyDisplayMode: StudyDisplayMode;
studyIndexationStatus: StudyIndexationStatus;
tableSort: TableSort;
reportMessageFilter: string;
reportSeverityFilter: SeverityFilter;
reportSelectedReportId: string | null;

limitReductionModified: boolean;
selectionForCopy: SelectionForCopy;
Expand Down Expand Up @@ -562,6 +569,9 @@ const initialState: AppState = {
oneBusShortCircuitAnalysisDiagram: null,
studyIndexationStatus: StudyIndexationStatus.NOT_INDEXED,
limitReductionModified: false,
reportMessageFilter: '',
reportSeverityFilter: getDefaultSeverityFilter(),
reportSelectedReportId: null,

// params
[PARAM_THEME]: getLocalStorageTheme(),
Expand Down Expand Up @@ -1543,6 +1553,18 @@ export const reducer = createReducer(initialState, (builder) => {
builder.addCase(TABLE_SORT, (state, action: TableSortAction) => {
state.tableSort[action.table][action.tab] = action.sort;
});

builder.addCase(REPORT_FILTER, (state, action: ReportFilterAction) => {
if (action.messageFilter !== undefined) {
state.reportMessageFilter = action.messageFilter;
}
if (action.severityFilter !== undefined) {
state.reportSeverityFilter = action.severityFilter;
}
if (action.reportId !== undefined) {
state.reportSelectedReportId = action.reportId;
}
});
});

function updateSubstationAfterVLDeletion(currentSubstations: Substation[], VLToDeleteId: string): Substation[] {
Expand Down

0 comments on commit ae66fc9

Please sign in to comment.