src/views/process-panel/process-details-attributes.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from "react";
   6 import { Grid, StyleRulesCallback, withStyles } from "@material-ui/core";
   7 import { Dispatch } from 'redux';
   8 import { formatContainerCost, formatDate } from "common/formatters";
   9 import { resourceLabel } from "common/labels";
  10 import { DetailsAttribute } from "components/details-attribute/details-attribute";
  11 import { ResourceKind } from "models/resource";
  12 import { CollectionName, ContainerRunTime, ResourceWithName } from "views-components/data-explorer/renderers";
  13 import { getProcess, getProcessStatus } from "store/processes/process";
  14 import { RootState } from "store/store";
  15 import { connect } from "react-redux";
  16 import { ProcessResource } from "models/process";
  17 import { ContainerResource } from "models/container";
  18 import { navigateToOutput, openWorkflow } from "store/process-panel/process-panel-actions";
  19 import { ArvadosTheme } from "common/custom-theme";
  20 import { ProcessRuntimeStatus } from "views-components/process-runtime-status/process-runtime-status";
  21 import { getPropertyChip } from "views-components/resource-properties-form/property-chip";
  22 import { ContainerRequestResource } from "models/container-request";
  23 import { filterResources } from "store/resources/resources";
  24
  25 type CssRules = 'link' | 'propertyTag';
  26
  27 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  28     link: {
  29         fontSize: '0.875rem',
  30         color: theme.palette.primary.main,
  31         '&:hover': {
  32             cursor: 'pointer'
  33         }
  34     },
  35     propertyTag: {
  36         marginRight: theme.spacing.unit / 2,
  37         marginBottom: theme.spacing.unit / 2
  38     },
  39 });
  40
  41 const mapStateToProps = (state: RootState, props: { request: ProcessResource }) => {
  42     const process = getProcess(props.request.uuid)(state.resources);
  43     return {
  44         container: process?.container,
  45         subprocesses: filterResources((resource: ContainerRequestResource) =>
  46             resource.kind === ResourceKind.CONTAINER_REQUEST &&
  47             resource.requestingContainerUuid === process?.containerRequest.containerUuid
  48         )(state.resources),
  49     };
  50 };
  51
  52 interface ProcessDetailsAttributesActionProps {
  53     navigateToOutput: (uuid: string) => void;
  54     openWorkflow: (uuid: string) => void;
  55 }
  56
  57 const mapDispatchToProps = (dispatch: Dispatch): ProcessDetailsAttributesActionProps => ({
  58     navigateToOutput: (uuid) => dispatch<any>(navigateToOutput(uuid)),
  59     openWorkflow: (uuid) => dispatch<any>(openWorkflow(uuid)),
  60 });
  61
  62 export const ProcessDetailsAttributes = withStyles(styles, { withTheme: true })(
  63     connect(mapStateToProps, mapDispatchToProps)(
  64         (props: { request: ProcessResource, container?: ContainerResource, subprocesses: ContainerRequestResource[], twoCol?: boolean, hideProcessPanelRedundantFields?: boolean, classes: Record<CssRules, string> } & ProcessDetailsAttributesActionProps) => {
  65             const containerRequest = props.request;
  66             const container = props.container;
  67             const subprocesses = props.subprocesses;
  68             const classes = props.classes;
  69             const mdSize = props.twoCol ? 6 : 12;
  70             const filteredPropertyKeys = Object.keys(containerRequest.properties)
  71                                             .filter(k => (typeof containerRequest.properties[k] !== 'object'));
  72             return <Grid container>
  73                 <Grid item xs={12}>
  74                     <ProcessRuntimeStatus runtimeStatus={container?.runtimeStatus} containerCount={containerRequest.containerCount} />
  75                 </Grid>
  76                 {!props.hideProcessPanelRedundantFields && <Grid item xs={12} md={mdSize}>
  77                     <DetailsAttribute label='Type' value={resourceLabel(ResourceKind.PROCESS)} />
  78                 </Grid>}
  79                 <Grid item xs={12} md={mdSize}>
  80                     <DetailsAttribute label='Container Request UUID' linkToUuid={containerRequest.uuid} value={containerRequest.uuid} />
  81                 </Grid>
  82                 <Grid item xs={12} md={mdSize}>
  83                     <DetailsAttribute label='Docker Image locator'
  84                         linkToUuid={containerRequest.containerImage} value={containerRequest.containerImage} />
  85                 </Grid>
  86                 <Grid item xs={12} md={mdSize}>
  87                     <DetailsAttribute
  88                         label='Owner' linkToUuid={containerRequest.ownerUuid}
  89                         uuidEnhancer={(uuid: string) => <ResourceWithName uuid={uuid} />} />
  90                 </Grid>
  91                 <Grid item xs={12} md={mdSize}>
  92                     <DetailsAttribute label='Container UUID' value={containerRequest.containerUuid} />
  93                 </Grid>
  94                 {!props.hideProcessPanelRedundantFields && <Grid item xs={12} md={mdSize}>
  95                     <DetailsAttribute label='Status' value={getProcessStatus({ containerRequest, container })} />
  96                 </Grid>}
  97                 <Grid item xs={12} md={mdSize}>
  98                     <DetailsAttribute label='Created at' value={formatDate(containerRequest.createdAt)} />
  99                 </Grid>
 100                 <Grid item xs={12} md={mdSize}>
 101                     <DetailsAttribute label='Started at' value={container ? formatDate(container.startedAt) : "(none)"} />
 102                 </Grid>
 103                 <Grid item xs={12} md={mdSize}>
 104                     <DetailsAttribute label='Finished at' value={container ? formatDate(container.finishedAt) : "(none)"} />
 105                 </Grid>
 106                 <Grid item xs={12} md={mdSize}>
 107                     <DetailsAttribute label='Container run time'>
 108                         <ContainerRunTime uuid={containerRequest.uuid} />
 109                     </DetailsAttribute>
 110                 </Grid>
 111                 {(containerRequest && containerRequest.modifiedByUserUuid) && <Grid item xs={12} md={mdSize} data-cy="process-details-attributes-modifiedby-user">
 112                     <DetailsAttribute
 113                         label='Submitted by' linkToUuid={containerRequest.modifiedByUserUuid}
 114                         uuidEnhancer={(uuid: string) => <ResourceWithName uuid={uuid} />} />
 115                 </Grid>}
 116                 {(container && container.runtimeUserUuid && container.runtimeUserUuid !== containerRequest.modifiedByUserUuid) && <Grid item xs={12} md={mdSize} data-cy="process-details-attributes-runtime-user">
 117                     <DetailsAttribute
 118                         label='Run as' linkToUuid={container.runtimeUserUuid}
 119                         uuidEnhancer={(uuid: string) => <ResourceWithName uuid={uuid} />} />
 120                 </Grid>}
 121                 <Grid item xs={12} md={mdSize}>
 122                     <DetailsAttribute label='Requesting Container UUID' value={containerRequest.requestingContainerUuid || "(none)"} />
 123                 </Grid>
 124                 <Grid item xs={6}>
 125                     <DetailsAttribute label='Output Collection' />
 126                     {containerRequest.outputUuid && <span onClick={() => props.navigateToOutput(containerRequest.outputUuid!)}>
 127                         <CollectionName className={classes.link} uuid={containerRequest.outputUuid} />
 128                     </span>}
 129                 </Grid>
 130                 {container && container.cost && <Grid item xs={12} md={mdSize}>
 131                         <DetailsAttribute label='Container Cost ' value={formatContainerCost(container.cost)} />
 132                 </Grid>}
 133                 {containerRequest && containerRequest.cumulativeCost && subprocesses.length > 0 && <Grid item xs={12} md={mdSize}>
 134                     <DetailsAttribute label='Container &amp; Subprocess Cost' value={formatContainerCost(containerRequest.cumulativeCost)} />
 135                 </Grid>}
 136                 {containerRequest.properties.template_uuid &&
 137                     <Grid item xs={12} md={mdSize}>
 138                         <span onClick={() => props.openWorkflow(containerRequest.properties.template_uuid)}>
 139                             <DetailsAttribute classValue={classes.link}
 140                                 label='Workflow' value={containerRequest.properties.workflowName} />
 141                         </span>
 142                     </Grid>}
 143                 <Grid item xs={12} md={mdSize}>
 144                     <DetailsAttribute label='Priority' value={containerRequest.priority} />
 145                 </Grid>
 146                 {/*
 147                     NOTE: The property list should be kept at the bottom, because it spans
 148                     the entire available width, without regards of the twoCol prop.
 149                 */}
 150                 <Grid item xs={12} md={12}>
 151                     <DetailsAttribute label='Properties' />
 152                     {filteredPropertyKeys.length > 0
 153                         ? filteredPropertyKeys.map(k =>
 154                             Array.isArray(containerRequest.properties[k])
 155                                 ? containerRequest.properties[k].map((v: string) =>
 156                                     getPropertyChip(k, v, undefined, classes.propertyTag))
 157                                 : getPropertyChip(k, containerRequest.properties[k], undefined, classes.propertyTag))
 158                         : <div>No properties</div>}
 159                 </Grid>
 160             </Grid>;
 161         }
 162     )
 163 );