From 9ccc7e8ebe82b97e219d65adeea8b03b2c9ed71a Mon Sep 17 00:00:00 2001 From: Michal Klobukowski Date: Wed, 29 Aug 2018 17:23:17 +0200 Subject: [PATCH] Setup routing for process panel Feature #14099 Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski --- src/routes/routes.ts | 11 +++--- src/store/workbench/workbench-actions.ts | 13 +++++++ .../process-information-card.ts | 24 ------------ .../process-information-card.tsx | 20 +++++----- .../process-panel/process-panel-root.tsx | 37 +++++++++++++++++++ src/views/process-panel/process-panel.tsx | 34 +++++++++++------ src/views/workbench/workbench.tsx | 2 +- 7 files changed, 90 insertions(+), 51 deletions(-) delete mode 100644 src/views-components/process-information-card/process-information-card.ts create mode 100644 src/views/process-panel/process-panel-root.tsx diff --git a/src/routes/routes.ts b/src/routes/routes.ts index c46239e2..20dd1359 100644 --- a/src/routes/routes.ts +++ b/src/routes/routes.ts @@ -3,19 +3,20 @@ // SPDX-License-Identifier: AGPL-3.0 import { History, Location } from 'history'; -import { RootStore } from '../store/store'; +import { RootStore } from '~/store/store'; import { matchPath } from 'react-router'; import { ResourceKind, RESOURCE_UUID_PATTERN, extractUuidKind } from '~/models/resource'; import { getProjectUrl } from '../models/project'; import { getCollectionUrl } from '~/models/collection'; -import { loadProject, loadFavorites, loadCollection } from '../store/workbench/workbench-actions'; +import { loadProject, loadFavorites, loadCollection } from '~/store/workbench/workbench-actions'; +import { loadProcess } from '~/store/processes/processes-actions'; export const Routes = { ROOT: '/', TOKEN: '/token', PROJECTS: `/projects/:id(${RESOURCE_UUID_PATTERN})`, COLLECTIONS: `/collections/:id(${RESOURCE_UUID_PATTERN})`, - PROCESS: `/processes/:id(${RESOURCE_UUID_PATTERN})`, + PROCESSES: `/processes/:id(${RESOURCE_UUID_PATTERN})`, FAVORITES: '/favorites', }; @@ -56,7 +57,7 @@ export const matchCollectionRoute = (route: string) => matchPath(route, { path: Routes.COLLECTIONS }); export const matchProcessRoute = (route: string) => - matchPath(route, { path: Routes.COLLECTIONS }); + matchPath(route, { path: Routes.PROCESSES }); const handleLocationChange = (store: RootStore) => ({ pathname }: Location) => { @@ -71,6 +72,6 @@ const handleLocationChange = (store: RootStore) => ({ pathname }: Location) => { } else if (favoriteMatch) { store.dispatch(loadFavorites()); } else if (processMatch) { - store.dispatch(processMatch.params.id); + store.dispatch(loadProcess(processMatch.params.id)); } }; diff --git a/src/store/workbench/workbench-actions.ts b/src/store/workbench/workbench-actions.ts index 8dc64a84..3c68c000 100644 --- a/src/store/workbench/workbench-actions.ts +++ b/src/store/workbench/workbench-actions.ts @@ -28,6 +28,8 @@ import * as collectionCreateActions from '~/store/collections/collection-create- import * as collectionCopyActions from '~/store/collections/collection-copy-actions'; import * as collectionUpdateActions from '~/store/collections/collection-update-actions'; import * as collectionMoveActions from '~/store/collections/collection-move-actions'; +import * as processesActions from '../processes/processes-actions'; +import { getProcess } from '../processes/process'; export const loadWorkbench = () => @@ -172,6 +174,17 @@ export const moveCollection = (data: MoveToFormDialogData) => } }; +export const loadProcess = (uuid: string) => + async (dispatch: Dispatch, getState: () => RootState) => { + await dispatch(processesActions.loadProcess(uuid)); + const process = getProcess(uuid)(getState().resources); + if (process) { + await dispatch(activateSidePanelTreeItem(process.containerRequest.ownerUuid)); + dispatch(setCollectionBreadcrumbs(process.containerRequest.ownerUuid)); + dispatch(loadDetailsPanel(uuid)); + } + }; + export const resourceIsNotLoaded = (uuid: string) => snackbarActions.OPEN_SNACKBAR({ message: `Resource identified by ${uuid} is not loaded.` diff --git a/src/views-components/process-information-card/process-information-card.ts b/src/views-components/process-information-card/process-information-card.ts deleted file mode 100644 index bf9172d5..00000000 --- a/src/views-components/process-information-card/process-information-card.ts +++ /dev/null @@ -1,24 +0,0 @@ -// Copyright (C) The Arvados Authors. All rights reserved. -// -// SPDX-License-Identifier: AGPL-3.0 - -import { Dispatch } from 'redux'; -import { openProcessContextMenu } from '~/store/context-menu/context-menu-actions'; -import { connect } from 'react-redux'; -import { RootState } from '~/store/store'; -import { ProcessInformationCard as InformationCardComponent, ProcessInformationCardDataProps } from '~/views/process-panel/process-information-card'; - -type InformationCardActionProps = Pick; - -const mapStateToProps = (state: RootState) => ({ - // todo: change for processPanel - item: state.collectionPanel.item -}); - -const mapDispatchToProps = (dispatch: Dispatch): InformationCardActionProps => ({ - onContextMenu: (event: React.MouseEvent) => { - dispatch(openProcessContextMenu(event)); - } -}); - -export const ProcessInformationCard = connect(mapStateToProps, mapDispatchToProps)(InformationCardComponent); \ No newline at end of file diff --git a/src/views/process-panel/process-information-card.tsx b/src/views/process-panel/process-information-card.tsx index a50490c9..53c56ca2 100644 --- a/src/views/process-panel/process-information-card.tsx +++ b/src/views/process-panel/process-information-card.tsx @@ -10,6 +10,8 @@ import { 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 } from '../../store/processes/process'; type CssRules = 'card' | 'iconHeader' | 'label' | 'value' | 'chip' | 'headerText' | 'link' | 'content' | 'title' | 'avatar'; @@ -66,14 +68,14 @@ const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ }); export interface ProcessInformationCardDataProps { - item: any; + process: Process; onContextMenu: (event: React.MouseEvent) => void; } type ProcessInformationCardProps = ProcessInformationCardDataProps & WithStyles; export const ProcessInformationCard = withStyles(styles)( - ({ classes, onContextMenu }: ProcessInformationCardProps) => + ({ classes, process, onContextMenu }: ProcessInformationCardProps) => } action={
- + onContextMenu(event)}> @@ -92,22 +94,22 @@ export const ProcessInformationCard = withStyles(styles)(
} title={ - + - Pipeline template that generates a config file from a template + {process.containerRequest.name} } - subheader="(no-description)" /> + subheader={process.containerRequest.description} /> + label='From' value={process.container ? process.container.startedAt : 'N/A'} /> + label='To' value={process.container ? process.container.finishedAt : 'N/A'} /> + label='Workflow' value='???' /> diff --git a/src/views/process-panel/process-panel-root.tsx b/src/views/process-panel/process-panel-root.tsx new file mode 100644 index 00000000..c7ac938a --- /dev/null +++ b/src/views/process-panel/process-panel-root.tsx @@ -0,0 +1,37 @@ +// Copyright (C) The Arvados Authors. All rights reserved. +// +// SPDX-License-Identifier: AGPL-3.0 + +import * as React from 'react'; +import { Grid } from '@material-ui/core'; +import { ProcessInformationCard } from './process-information-card'; +import { DefaultView } from '~/components/default-view/default-view'; +import { ProcessIcon } from '~/components/icon/icon'; +import { Process } from '~/store/processes/process'; + +export interface ProcessPanelRootDataProps { + process?: Process; +} + +export interface ProcessPanelRootActionProps { + onContextMenu: (event: React.MouseEvent) => void; +} + +export type ProcessPanelRootProps = ProcessPanelRootDataProps & ProcessPanelRootActionProps; + +export const ProcessPanelRoot = (props: ProcessPanelRootProps) => + props.process + ? + + + + + : + + ; diff --git a/src/views/process-panel/process-panel.tsx b/src/views/process-panel/process-panel.tsx index f416f7b2..421945fe 100644 --- a/src/views/process-panel/process-panel.tsx +++ b/src/views/process-panel/process-panel.tsx @@ -3,17 +3,27 @@ // SPDX-License-Identifier: AGPL-3.0 import * as React from 'react'; -import { ProcessInformationCard } from '~/views-components/process-information-card/process-information-card'; -import { Grid } from '@material-ui/core'; +import { RootState } from '~/store/store'; +import { connect } from 'react-redux'; +import { getProcess } from '~/store/processes/process'; +import { Dispatch } from 'redux'; +import { openProcessContextMenu } from '~/store/context-menu/context-menu-actions'; +import { matchProcessRoute } from '~/routes/routes'; +import { ProcessPanelRootDataProps, ProcessPanelRootActionProps, ProcessPanelRoot } from './process-panel-root'; -export class ProcessPanel extends React.Component { - render() { - return
- - - - - -
; +const mapStateToProps = ({ router, resources }: RootState): ProcessPanelRootDataProps => { + const pathname = router.location ? router.location.pathname : ''; + const match = matchProcessRoute(pathname); + const uuid = match ? match.params.id : ''; + return { + process: getProcess(uuid)(resources) + }; +}; + +const mapDispatchToProps = (dispatch: Dispatch): ProcessPanelRootActionProps => ({ + onContextMenu: (event: React.MouseEvent) => { + dispatch(openProcessContextMenu(event)); } -} \ No newline at end of file +}); + +export const ProcessPanel = connect(mapStateToProps, mapDispatchToProps)(ProcessPanelRoot); diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx index 1d53842b..860fb7ae 100644 --- a/src/views/workbench/workbench.tsx +++ b/src/views/workbench/workbench.tsx @@ -166,7 +166,7 @@ export const Workbench = withStyles(styles)( - + {user && } -- 2.30.2