Update navigation with processes

Feature #14099

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

diff --git a/src/routes/routes.ts b/src/routes/routes.ts
index 0bf7110126df7849f4571cfbe6e2c21dffa49fdd..c46239e2a1cbe5deeff10fc60b42718181c82817 100644 (file)
--- a/src/routes/routes.ts
+++ b/src/routes/routes.ts
@@ -31,6 +31,8 @@ export const getResourceUrl = (uuid: string) => {
     }
 };
 
+export const getProcessUrl = (uuid: string) => `/processes/${uuid}`;
+
 export const addRouteChangeHandlers = (history: History, store: RootStore) => {
     const handler = handleLocationChange(store);
     handler(history.location);
@@ -43,30 +45,32 @@ export const matchRootRoute = (route: string) =>
 export const matchFavoritesRoute = (route: string) =>
     matchPath(route, { path: Routes.FAVORITES });
 
-export interface ProjectRouteParams {
+export interface ResourceRouteParams {
     id: string;
 }
 
 export const matchProjectRoute = (route: string) =>
-    matchPath<ProjectRouteParams>(route, { path: Routes.PROJECTS });
-
-export interface CollectionRouteParams {
-    id: string;
-}
+    matchPath<ResourceRouteParams>(route, { path: Routes.PROJECTS });
 
 export const matchCollectionRoute = (route: string) =>
-    matchPath<CollectionRouteParams>(route, { path: Routes.COLLECTIONS });
+    matchPath<ResourceRouteParams>(route, { path: Routes.COLLECTIONS });
+
+export const matchProcessRoute = (route: string) =>
+    matchPath<ResourceRouteParams>(route, { path: Routes.COLLECTIONS });
 
 
 const handleLocationChange = (store: RootStore) => ({ pathname }: Location) => {
     const projectMatch = matchProjectRoute(pathname);
     const collectionMatch = matchCollectionRoute(pathname);
     const favoriteMatch = matchFavoritesRoute(pathname);
+    const processMatch = matchProcessRoute(pathname);
     if (projectMatch) {
         store.dispatch(loadProject(projectMatch.params.id));
     } else if (collectionMatch) {
         store.dispatch(loadCollection(collectionMatch.params.id));
     } else if (favoriteMatch) {
         store.dispatch(loadFavorites());
+    } else if (processMatch) {
+        store.dispatch(processMatch.params.id);
     }
 };

diff --git a/src/store/navigation/navigation-action.ts b/src/store/navigation/navigation-action.ts
index 1d36beeca27119aade65cc52eb82e8a4c1c4ac07..188acf12bd30afc55b838f6d31f279822e0b6628 100644 (file)
--- a/src/store/navigation/navigation-action.ts
+++ b/src/store/navigation/navigation-action.ts
@@ -9,7 +9,7 @@ import { getCollectionUrl } from "~/models/collection";
 import { getProjectUrl } from "~/models/project";
 
 import { SidePanelTreeCategory } from '../side-panel-tree/side-panel-tree-actions';
-import { Routes } from '~/routes/routes';
+import { Routes, getProcessUrl } from '~/routes/routes';
 
 export const navigateTo = (uuid: string) =>
     async (dispatch: Dispatch) => {
@@ -18,6 +18,8 @@ export const navigateTo = (uuid: string) =>
             dispatch<any>(navigateToProject(uuid));
         } else if (kind === ResourceKind.COLLECTION) {
             dispatch<any>(navigateToCollection(uuid));
+        } else if (kind === ResourceKind.CONTAINER_REQUEST) {
+            dispatch<any>(navigateToProcess(uuid));
         }
         if (uuid === SidePanelTreeCategory.FAVORITES) {
             dispatch<any>(navigateToFavorites);
@@ -29,3 +31,5 @@ export const navigateToFavorites = push(Routes.FAVORITES);
 export const navigateToProject = compose(push, getProjectUrl);
 
 export const navigateToCollection = compose(push, getCollectionUrl);
+
+export const navigateToProcess = compose(push, getProcessUrl);

diff --git a/src/views-components/details-panel/process-details.tsx b/src/views-components/details-panel/process-details.tsx
index d9ddfad89ff6579ca382fd5bcd90e5a19233a652..e3c9823d018b62d1a0b247007cca32f158230c87 100644 (file)
--- a/src/views-components/details-panel/process-details.tsx
+++ b/src/views-components/details-panel/process-details.tsx
@@ -37,7 +37,7 @@ export class ProcessDetails extends DetailsData<ProcessResource> {
             <DetailsAttribute label='Container UUID' link={this.item.containerUuid || ''} value={this.item.containerUuid} />
 
             <DetailsAttribute label='Priority' value={this.item.priority} />
-            <DetailsAttribute label='Runtime Constraints' value={this.item.runtimeConstraints} />
+            <DetailsAttribute label='Runtime Constraints' value={JSON.stringify(this.item.runtimeConstraints)} />
             {/* Link but we dont have view */}
             <DetailsAttribute label='Docker Image locator' link={this.item.containerImage} value={this.item.containerImage} />
         </div>;