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             const hasTotalCost = containerRequest && containerRequest.cumulativeCost > 0;
  73             const totalCostNotReady = container && container.cost > 0 && container.state === "Running" && containerRequest && containerRequest.cumulativeCost === 0 && subprocesses.length > 0;
  74             return <Grid container>
  75                 <Grid item xs={12}>
  76                     <ProcessRuntimeStatus runtimeStatus={container?.runtimeStatus} containerCount={containerRequest.containerCount} />
  77                 </Grid>
  78                 {!props.hideProcessPanelRedundantFields && <Grid item xs={12} md={mdSize}>
  79                     <DetailsAttribute label='Type' value={resourceLabel(ResourceKind.PROCESS)} />
  80                 </Grid>}
  81                 <Grid item xs={12} md={mdSize}>
  82                     <DetailsAttribute label='Container request UUID' linkToUuid={containerRequest.uuid} value={containerRequest.uuid} />
  83                 </Grid>
  84                 <Grid item xs={12} md={mdSize}>
  85                     <DetailsAttribute label='Docker image locator'
  86                         linkToUuid={containerRequest.containerImage} value={containerRequest.containerImage} />
  87                 </Grid>
  88                 <Grid item xs={12} md={mdSize}>
  89                     <DetailsAttribute
  90                         label='Owner' linkToUuid={containerRequest.ownerUuid}
  91                         uuidEnhancer={(uuid: string) => <ResourceWithName uuid={uuid} />} />
  92                 </Grid>
  93                 <Grid item xs={12} md={mdSize}>
  94                     <DetailsAttribute label='Container UUID' value={containerRequest.containerUuid} />
  95                 </Grid>
  96                 {!props.hideProcessPanelRedundantFields && <Grid item xs={12} md={mdSize}>
  97                     <DetailsAttribute label='Status' value={getProcessStatus({ containerRequest, container })} />
  98                 </Grid>}
  99                 <Grid item xs={12} md={mdSize}>
 100                     <DetailsAttribute label='Created at' value={formatDate(containerRequest.createdAt)} />
 101                 </Grid>
 102                 <Grid item xs={12} md={mdSize}>
 103                     <DetailsAttribute label='Started at' value={container ? formatDate(container.startedAt) : "(none)"} />
 104                 </Grid>
 105                 <Grid item xs={12} md={mdSize}>
 106                     <DetailsAttribute label='Finished at' value={container ? formatDate(container.finishedAt) : "(none)"} />
 107                 </Grid>
 108                 <Grid item xs={12} md={mdSize}>
 109                     <DetailsAttribute label='Container run time'>
 110                         <ContainerRunTime uuid={containerRequest.uuid} />
 111                     </DetailsAttribute>
 112                 </Grid>
 113                 {(containerRequest && containerRequest.modifiedByUserUuid) && <Grid item xs={12} md={mdSize} data-cy="process-details-attributes-modifiedby-user">
 114                     <DetailsAttribute
 115                         label='Submitted by' linkToUuid={containerRequest.modifiedByUserUuid}
 116                         uuidEnhancer={(uuid: string) => <ResourceWithName uuid={uuid} />} />
 117                 </Grid>}
 118                 {(container && container.runtimeUserUuid && container.runtimeUserUuid !== containerRequest.modifiedByUserUuid) && <Grid item xs={12} md={mdSize} data-cy="process-details-attributes-runtime-user">
 119                     <DetailsAttribute
 120                         label='Run as' linkToUuid={container.runtimeUserUuid}
 121                         uuidEnhancer={(uuid: string) => <ResourceWithName uuid={uuid} />} />
 122                 </Grid>}
 123                 <Grid item xs={12} md={mdSize}>
 124                     <DetailsAttribute label='Requesting container UUID' value={containerRequest.requestingContainerUuid || "(none)"} />
 125                 </Grid>
 126                 <Grid item xs={6}>
 127                     <DetailsAttribute label='Output collection' />
 128                     {containerRequest.outputUuid && <span onClick={() => props.navigateToOutput(containerRequest.outputUuid!)}>
 129                         <CollectionName className={classes.link} uuid={containerRequest.outputUuid} />
 130                     </span>}
 131                 </Grid>
 132                 {container && <Grid item xs={12} md={mdSize}>
 133                     <DetailsAttribute label='Cost' value={
 134                         `${hasTotalCost ? formatContainerCost(containerRequest.cumulativeCost) + ' total, ' : (totalCostNotReady ? 'total pending completion, ' : '')}${container.cost > 0 ? formatContainerCost(container.cost) : 'not available'} for this container`
 135                     } />
 136                 </Grid>}
 137                 {containerRequest.properties.template_uuid &&
 138                     <Grid item xs={12} md={mdSize}>
 139                         <span onClick={() => props.openWorkflow(containerRequest.properties.template_uuid)}>
 140                             <DetailsAttribute classValue={classes.link}
 141                                 label='Workflow' value={containerRequest.properties.workflowName} />
 142                         </span>
 143                     </Grid>}
 144                 <Grid item xs={12} md={mdSize}>
 145                     <DetailsAttribute label='Priority' value={containerRequest.priority} />
 146                 </Grid>
 147                 {/*
 148                         NOTE: The property list should be kept at the bottom, because it spans
 149                         the entire available width, without regards of the twoCol prop.
 150                         */}
 151                 <Grid item xs={12} md={12}>
 152                     <DetailsAttribute label='Properties' />
 153                     {filteredPropertyKeys.length > 0
 154                         ? filteredPropertyKeys.map(k =>
 155                             Array.isArray(containerRequest.properties[k])
 156                                 ? containerRequest.properties[k].map((v: string) =>
 157                                     getPropertyChip(k, v, undefined, classes.propertyTag))
 158                                 : getPropertyChip(k, containerRequest.properties[k], undefined, classes.propertyTag))
 159                         : <div>No properties</div>}
 160                 </Grid>
 161             </Grid>;
 162         }
 163     )
 164 );