services/workbench2/src/views/instance-types-panel/instance-types-panel.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 { StyleRulesCallback, WithStyles, withStyles, Card, CardContent, Typography, Grid } from '@material-ui/core';
   7 import { ArvadosTheme } from 'common/custom-theme';
   8 import { ResourceIcon } from 'components/icon/icon';
   9 import { RootState } from 'store/store';
  10 import { connect } from 'react-redux';
  11 import { ClusterConfigJSON } from 'common/config';
  12 import { NotFoundView } from 'views/not-found-panel/not-found-panel';
  13 import { formatCWLResourceSize, formatCost, formatFileSize } from 'common/formatters';
  14 import { DetailsAttribute } from 'components/details-attribute/details-attribute';
  15 import { DefaultCodeSnippet } from 'components/default-code-snippet/default-code-snippet';
  16
  17 type CssRules = 'root' | 'infoBox' | 'instanceType';
  18
  19 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  20     root: {
  21        width: "calc(100% + 20px)",
  22        margin: "0 -10px",
  23        overflow: 'auto'
  24     },
  25     infoBox: {
  26         padding: "0 10px 10px",
  27     },
  28     instanceType: {
  29         padding: "10px",
  30     },
  31 });
  32
  33 type InstanceTypesPanelConnectedProps = {config: ClusterConfigJSON};
  34
  35 type InstanceTypesPanelRootProps = InstanceTypesPanelConnectedProps & WithStyles<CssRules>;
  36
  37 const mapStateToProps = ({auth}: RootState): InstanceTypesPanelConnectedProps => ({
  38     config: auth.config.clusterConfig,
  39 });
  40
  41 export const InstanceTypesPanel = withStyles(styles)(connect(mapStateToProps)(
  42     ({ config, classes }: InstanceTypesPanelRootProps) => {
  43
  44         const instances = config.InstanceTypes || {};
  45
  46         return <Grid className={classes.root} container direction="row">
  47             <Grid className={classes.infoBox} item xs={12}>
  48                 <Card>
  49                     <CardContent>
  50                         <Typography variant="body2">
  51                             These are the cloud compute instance types
  52                             configured for this cluster. The core count and
  53                             maximum RAM request correspond to the greatest
  54                             values you can put in the CWL Workflow
  55                             ResourceRequest{" "}
  56                             <DefaultCodeSnippet
  57                                 inline
  58                                 lines={["minCores"]}
  59                             />{" "}
  60                             and{" "}
  61                             <DefaultCodeSnippet inline lines={["minRAM"]} />{" "}
  62                             and still be scheduled on that instance type.
  63                         </Typography>
  64                     </CardContent>
  65                 </Card>
  66             </Grid>
  67             {Object.keys(instances).length > 0 ?
  68                 Object.keys(instances)
  69                     .sort((a, b) => {
  70                         const typeA = instances[a];
  71                         const typeB = instances[b];
  72
  73                         if (typeA.Price !== typeB.Price) {
  74                             return typeA.Price - typeB.Price;
  75                         } else {
  76                             return typeA.ProviderType.localeCompare(typeB.ProviderType);
  77                         }
  78                     }).map((instanceKey) => {
  79                         const instanceType = instances[instanceKey];
  80                         const diskRequest = instanceType.IncludedScratch;
  81                         const ramRequest = instanceType.RAM - config.Containers.ReserveExtraRAM;
  82
  83                         return <Grid data-cy={instanceKey} className={classes.instanceType} item sm={6} xs={12} key={instanceKey}>
  84                             <Card>
  85                                 <CardContent>
  86                                     <Typography variant="h6">
  87                                         {instanceKey}
  88                                     </Typography>
  89                                     <Grid item xs={12}>
  90                                         <DetailsAttribute label="Provider type" value={instanceType.ProviderType} />
  91                                     </Grid>
  92                                     <Grid item xs={12}>
  93                                         <DetailsAttribute label="Price" value={formatCost(instanceType.Price)} />
  94                                     </Grid>
  95                                     <Grid item xs={12}>
  96                                         <DetailsAttribute label="Cores" value={instanceType.VCPUs} />
  97                                     </Grid>
  98                                     <Grid item xs={12}>
  99                                         <DetailsAttribute label="Max RAM request" value={`${formatCWLResourceSize(ramRequest)} (${formatFileSize(ramRequest)})`} />
 100                                     </Grid>
 101                                     <Grid item xs={12}>
 102                                         <DetailsAttribute label="Max disk request" value={`${formatCWLResourceSize(diskRequest)} (${formatFileSize(diskRequest)})`} />
 103                                     </Grid>
 104                                     <Grid item xs={12}>
 105                                         <DetailsAttribute label="Preemptible" value={instanceType.Preemptible.toString()} />
 106                                     </Grid>
 107                                     {instanceType.CUDA && instanceType.CUDA.DeviceCount > 0 ?
 108                                         <>
 109                                             <Grid item xs={12}>
 110                                                 <DetailsAttribute label="CUDA GPUs" value={instanceType.CUDA.DeviceCount} />
 111                                             </Grid>
 112                                             <Grid item xs={12}>
 113                                                 <DetailsAttribute label="Hardware capability" value={instanceType.CUDA.HardwareCapability} />
 114                                             </Grid>
 115                                             <Grid item xs={12}>
 116                                                 <DetailsAttribute label="Driver version" value={instanceType.CUDA.DriverVersion} />
 117                                             </Grid>
 118                                         </> : <></>
 119                                     }
 120                                 </CardContent>
 121                             </Card>
 122                         </Grid>;
 123                     }) :
 124                 <NotFoundView
 125                     icon={ResourceIcon}
 126                     messages={["No instances found"]}
 127                 />
 128             }
 129         </Grid>;
 130     }
 131 ));