linked-output-to-collection-inside-process-view

Feature #14582

Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk@contractors.roche.com>

diff --git a/src/views/process-panel/process-information-card.tsx b/src/views/process-panel/process-information-card.tsx
index e5d15e729d6d32b26f07e934d7a2fbb854c87b5d..7f3e025f8dc7e97a7f1b7616a09d9013949260b1 100644 (file)
--- a/src/views/process-panel/process-information-card.tsx
+++ b/src/views/process-panel/process-information-card.tsx
@@ -11,7 +11,7 @@ import { ArvadosTheme } from '~/common/custom-theme';
 import { MoreOptionsIcon, ProcessIcon } from '~/components/icon/icon';
 import { DetailsAttribute } from '~/components/details-attribute/details-attribute';
 import { Process } from '~/store/processes/process';
-import { getProcessStatus, getProcessStatusColor } from '../../store/processes/process';
+import { getProcessStatus, getProcessStatusColor } from '~/store/processes/process';
 import { formatDate } from '~/common/formatters';
 
 
@@ -69,12 +69,13 @@ export interface ProcessInformationCardDataProps {
     process: Process;
     onContextMenu: (event: React.MouseEvent<HTMLElement>) => void;
     openProcessInputDialog: (uuid: string) => void;
+    navigateToOutput: (uuid: string) => void;
 }
 
 type ProcessInformationCardProps = ProcessInformationCardDataProps & WithStyles<CssRules, true>;
 
 export const ProcessInformationCard = withStyles(styles, { withTheme: true })(
-    ({ classes, process, onContextMenu, theme, openProcessInputDialog }: ProcessInformationCardProps) =>
+    ({ classes, process, onContextMenu, theme, openProcessInputDialog, navigateToOutput }: ProcessInformationCardProps) =>
         <Card className={classes.card}>
             <CardHeader
                 classes={{
@@ -120,7 +121,9 @@ export const ProcessInformationCard = withStyles(styles, { withTheme: true })(
                             label='Workflow' value='???' />
                     </Grid>
                     <Grid item xs={6}>
-                        <DetailsAttribute classLabel={classes.link} label='Outputs' />
+                        <span onClick={() => navigateToOutput(process.containerRequest.outputUuid!)}>
+                            <DetailsAttribute classLabel={classes.link} label='Outputs' />
+                        </span>
                         <span onClick={() => openProcessInputDialog(process.containerRequest.uuid)}>
                             <DetailsAttribute classLabel={classes.link} label='Inputs' />
                         </span>

diff --git a/src/views/process-panel/process-panel-root.tsx b/src/views/process-panel/process-panel-root.tsx
index 52c0f4515145120caf1d6f95038323d4f5fdb307..73f71e5e0a139b0fbbe007213b0f1d6705070868 100644 (file)
--- a/src/views/process-panel/process-panel-root.tsx
+++ b/src/views/process-panel/process-panel-root.tsx
@@ -23,6 +23,7 @@ export interface ProcessPanelRootActionProps {
     onContextMenu: (event: React.MouseEvent<HTMLElement>, process: Process) => void;
     onToggle: (status: string) => void;
     openProcessInputDialog: (uuid: string) => void;
+    navigateToOutput: (uuid: string) => void;
 }
 
 export type ProcessPanelRootProps = ProcessPanelRootDataProps & ProcessPanelRootActionProps;
@@ -34,7 +35,8 @@ export const ProcessPanelRoot = ({ process, ...props }: ProcessPanelRootProps) =
                 <ProcessInformationCard
                     process={process}
                     onContextMenu={event => props.onContextMenu(event, process)}
-                    openProcessInputDialog={props.openProcessInputDialog} />
+                    openProcessInputDialog={props.openProcessInputDialog}
+                    navigateToOutput={props.navigateToOutput} />
             </Grid>
             <Grid item sm={12} md={5}>
                 <SubprocessesCard

diff --git a/src/views/process-panel/process-panel.tsx b/src/views/process-panel/process-panel.tsx
index 8108cd1ef4d0b19a51fc7c530e6880e61b529334..87f60af3bab07b7f293db084d9db595809a430d0 100644 (file)
--- a/src/views/process-panel/process-panel.tsx
+++ b/src/views/process-panel/process-panel.tsx
@@ -13,6 +13,7 @@ import { ProcessPanel as ProcessPanelState} from '~/store/process-panel/process-
 import { groupBy } from 'lodash';
 import { toggleProcessPanelFilter } from '~/store/process-panel/process-panel-actions';
 import { openProcessInputDialog } from '~/store/processes/process-input-actions';
+import { navigateToCollection } from '~/store/navigation/navigation-action';
 
 const mapStateToProps = ({ router, resources, processPanel }: RootState): ProcessPanelRootDataProps => {
     const pathname = router.location ? router.location.pathname : '';
@@ -34,7 +35,8 @@ const mapDispatchToProps = (dispatch: Dispatch): ProcessPanelRootActionProps =>
     onToggle: status => {
         dispatch<any>(toggleProcessPanelFilter(status));
     },
-    openProcessInputDialog: (uuid) => dispatch<any>(openProcessInputDialog(uuid))
+    openProcessInputDialog: (uuid) => dispatch<any>(openProcessInputDialog(uuid)),
+    navigateToOutput: (uuid) => dispatch<any>(navigateToCollection(uuid))
 });
 
 export const ProcessPanel = connect(mapStateToProps, mapDispatchToProps)(ProcessPanelRoot);