Merge branch '17782-react-scripts-ts-migration' into main. Closes #17782
[arvados-workbench2.git] / src / views / process-log-panel / process-log-panel.tsx
index 1ce06afdf80a031814b8e62f9f46ee92c26b7215..9f61f8b6c607f790208b859296c99028ba161458 100644 (file)
@@ -2,25 +2,15 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import * as React from 'react';
-import { RootState } from '~/store/store';
+import { RootState } from 'store/store';
 import { connect } from 'react-redux';
-import { getProcess } from '~/store/processes/process';
+import { getProcess } from 'store/processes/process';
 import { Dispatch } from 'redux';
-import { openProcessContextMenu } from '~/store/context-menu/context-menu-actions';
-import { matchProcessLogRoute } from '~/routes/routes';
+import { openProcessContextMenu } from 'store/context-menu/context-menu-actions';
 import { ProcessLogPanelRootDataProps, ProcessLogPanelRootActionProps, ProcessLogPanelRoot } from './process-log-panel-root';
-
-const SELECT_OPTIONS = [
-    { label: 'Dispatch', value: 'dispatch' },
-    { label: 'Crunch-run', value: 'crunch-run' },
-    { label: 'Crunchstat', value: 'crunchstat' },
-    { label: 'Hoststat', value: 'hoststat' },
-    { label: 'Node-info', value: 'node-info' },
-    { label: 'Arv-mount', value: 'arv-mount' },
-    { label: 'Stdout', value: 'stdout' },
-    { label: 'Stderr', value: 'stderr' }
-];
+import { getProcessPanelLogs } from 'store/process-logs-panel/process-logs-panel';
+import { setProcessLogsPanelFilter, navigateToLogCollection } from 'store/process-logs-panel/process-logs-panel-actions';
+import { getProcessLogsPanelCurrentUuid } from 'store/process-logs-panel/process-logs-panel';
 
 export interface Log {
     object_uuid: string;
@@ -35,23 +25,27 @@ export interface FilterOption {
     value: string;
 }
 
-const mapStateToProps = ({ router, resources }: RootState): ProcessLogPanelRootDataProps => {
-    const pathname = router.location ? router.location.pathname : '';
-    const match = matchProcessLogRoute(pathname);
-    const uuid = match ? match.params.id : '';
+const mapStateToProps = (state: RootState): ProcessLogPanelRootDataProps => {
+    const { resources, processLogsPanel } = state;
+    const uuid = getProcessLogsPanelCurrentUuid(state) || '';
     return {
         process: getProcess(uuid)(resources),
-        selectedFilter: SELECT_OPTIONS[0],
-        filters: SELECT_OPTIONS
-        // lines: string[]
+        selectedFilter: { label: processLogsPanel.selectedFilter, value: processLogsPanel.selectedFilter },
+        filters: processLogsPanel.filters.map(filter => ({ label: filter, value: filter })),
+        lines: getProcessPanelLogs(processLogsPanel)
     };
 };
 
 const mapDispatchToProps = (dispatch: Dispatch): ProcessLogPanelRootActionProps => ({
-    onContextMenu: (event: React.MouseEvent<HTMLElement>) => {
-        dispatch<any>(openProcessContextMenu(event));
+    onContextMenu: (event, process) => {
+        dispatch<any>(openProcessContextMenu(event, process));
+    },
+    onChange: filter => {
+        dispatch(setProcessLogsPanelFilter(filter.value));
     },
-    onChange: (filter: FilterOption) => { return; }
+    navigateToLogCollection: (uuid: string) => {
+        dispatch<any>(navigateToLogCollection(uuid));
+    }
 });
 
 export const ProcessLogPanel = connect(mapStateToProps, mapDispatchToProps)(ProcessLogPanelRoot);