src/views-components/compute-nodes-dialog/attributes-dialog.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from "react";
   6 import { compose } from 'redux';
   7 import {
   8     withStyles, Dialog, DialogTitle, DialogContent, DialogActions,
   9     Button, StyleRulesCallback, WithStyles, Grid
  10 } from '@material-ui/core';
  11 import { WithDialogProps, withDialog } from "~/store/dialog/with-dialog";
  12 import { COMPUTE_NODE_ATTRIBUTES_DIALOG } from '~/store/compute-nodes/compute-nodes-actions';
  13 import { ArvadosTheme } from '~/common/custom-theme';
  14 import { NodeResource, NodeProperties, NodeInfo } from '~/models/node';
  15 import * as classnames from "classnames";
  16
  17 type CssRules = 'root' | 'grid';
  18
  19 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  20     root: {
  21         fontSize: '0.875rem',
  22         '& div:nth-child(odd):not(.nestedRoot)': {
  23             textAlign: 'right',
  24             color: theme.palette.grey["500"]
  25         },
  26         '& div:nth-child(even)': {
  27             overflowWrap: 'break-word'
  28         }
  29     },
  30     grid: {
  31         padding: '8px 0 0 0'
  32     }
  33 });
  34
  35 interface AttributesComputeNodeDialogDataProps {
  36     computeNode: NodeResource;
  37 }
  38
  39 export const AttributesComputeNodeDialog = compose(
  40     withDialog(COMPUTE_NODE_ATTRIBUTES_DIALOG),
  41     withStyles(styles))(
  42         ({ open, closeDialog, data, classes }: WithDialogProps<AttributesComputeNodeDialogDataProps> & WithStyles<CssRules>) =>
  43             <Dialog open={open} onClose={closeDialog} fullWidth maxWidth='sm'>
  44                 <DialogTitle>Attributes</DialogTitle>
  45                 <DialogContent>
  46                     {data.computeNode && <div>
  47                         {renderPrimaryInfo(data.computeNode, classes)}
  48                         {renderInfo(data.computeNode.info, classes)}
  49                         {renderProperties(data.computeNode.properties, classes)}
  50                     </div>}
  51                 </DialogContent>
  52                 <DialogActions>
  53                     <Button
  54                         variant='flat'
  55                         color='primary'
  56                         onClick={closeDialog}>
  57                         Close
  58                     </Button>
  59                 </DialogActions>
  60             </Dialog>
  61     );
  62
  63 const renderPrimaryInfo = (computeNode: NodeResource, classes: any) => {
  64     const { uuid, ownerUuid, createdAt, modifiedAt, modifiedByClientUuid, modifiedByUserUuid } = computeNode;
  65     return (
  66         <Grid container direction="row" spacing={16} className={classes.root}>
  67             <Grid item xs={5}>UUID</Grid>
  68             <Grid item xs={7}>{uuid}</Grid>
  69             <Grid item xs={5}>Owner uuid</Grid>
  70             <Grid item xs={7}>{ownerUuid}</Grid>
  71             <Grid item xs={5}>Created at</Grid>
  72             <Grid item xs={7}>{createdAt}</Grid>
  73             <Grid item xs={5}>Modified at</Grid>
  74             <Grid item xs={7}>{modifiedAt}</Grid>
  75             <Grid item xs={5}>Modified by user uuid</Grid>
  76             <Grid item xs={7}>{modifiedByUserUuid}</Grid>
  77             <Grid item xs={5}>Modified by client uuid</Grid>
  78             <Grid item xs={7}>{modifiedByClientUuid || '(none)'}</Grid>
  79         </Grid>
  80     );
  81 };
  82
  83 const renderInfo = (info: NodeInfo, classes: any) => {
  84     const { lastAction, pingSecret, ec2InstanceId, slurmState } = info;
  85     return (
  86         <Grid container direction="row" spacing={16} className={classnames([classes.root, classes.grid])}>
  87             <Grid item xs={5}>Info - Last action</Grid>
  88             <Grid item xs={7}>{lastAction || '(none)'}</Grid>
  89             <Grid item xs={5}>Info - Ping secret</Grid>
  90             <Grid item xs={7}>{pingSecret || '(none)'}</Grid>
  91             <Grid item xs={5}>Info - ec2 instance id</Grid>
  92             <Grid item xs={7}>{ec2InstanceId || '(none)'}</Grid>
  93             <Grid item xs={5}>Info - Slurm state</Grid>
  94             <Grid item xs={7}>{slurmState || '(none)'}</Grid>
  95         </Grid>
  96     );
  97 };
  98
  99 const renderProperties = (properties: NodeProperties, classes: any) => {
 100     const { totalRamMb, totalCpuCores, totalScratchMb, cloudNode } = properties;
 101     return (
 102         <Grid container direction="row" spacing={16} className={classnames([classes.root, classes.grid])}>
 103             <Grid item xs={5}>Properties - Total ram mb</Grid>
 104             <Grid item xs={7}>{totalRamMb || '(none)'}</Grid>
 105             <Grid item xs={5}>Properties - Total scratch mb</Grid>
 106             <Grid item xs={7}>{totalScratchMb || '(none)'}</Grid>
 107             <Grid item xs={5}>Properties - Total cpu cores</Grid>
 108             <Grid item xs={7}>{totalCpuCores || '(none)'}</Grid>
 109             <Grid item xs={5}>Properties - Cloud node size </Grid>
 110             <Grid item xs={7}>{cloudNode ? cloudNode.size : '(none)'}</Grid>
 111             <Grid item xs={5}>Properties - Cloud node price</Grid>
 112             <Grid item xs={7}>{cloudNode ? cloudNode.price : '(none)'}</Grid>
 113         </Grid>
 114     );
 115 };