src/views-components/virtual-machines-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 { Dialog, DialogTitle, DialogContent, DialogActions, Button, Typography, Grid } from "@material-ui/core";
   7 import { WithDialogProps } from "~/store/dialog/with-dialog";
   8 import { withDialog } from '~/store/dialog/with-dialog';
   9 import { VIRTUAL_MACHINE_ATTRIBUTES_DIALOG } from "~/store/virtual-machines/virtual-machines-actions";
  10 import { WithStyles, withStyles } from '@material-ui/core/styles';
  11 import { ArvadosTheme } from '~/common/custom-theme';
  12 import { compose } from "redux";
  13 import { VirtualMachinesResource } from "~/models/virtual-machines";
  14
  15 type CssRules = 'rightContainer' | 'leftContainer' | 'spacing';
  16
  17 const styles = withStyles<CssRules>((theme: ArvadosTheme) => ({
  18     rightContainer: {
  19         textAlign: 'right',
  20         paddingRight: theme.spacing.unit * 2,
  21         color: theme.palette.grey["500"]
  22     },
  23     leftContainer: {
  24         textAlign: 'left',
  25         paddingLeft: theme.spacing.unit * 2
  26     },
  27     spacing: {
  28         paddingTop: theme.spacing.unit * 2
  29     },
  30 }));
  31
  32 interface VirtualMachineAttributesDataProps {
  33     virtualMachineData: VirtualMachinesResource;
  34 }
  35
  36 type VirtualMachineAttributesProps = VirtualMachineAttributesDataProps & WithStyles<CssRules>;
  37
  38 export const VirtualMachineAttributesDialog = compose(
  39     withDialog(VIRTUAL_MACHINE_ATTRIBUTES_DIALOG),
  40     styles)(
  41         (props: WithDialogProps<VirtualMachineAttributesProps> & VirtualMachineAttributesProps) =>
  42             <Dialog open={props.open}
  43                 onClose={props.closeDialog}
  44                 fullWidth
  45                 maxWidth="sm">
  46                 <DialogTitle>Attributes</DialogTitle>
  47                 <DialogContent>
  48                     <Typography variant="body2" className={props.classes.spacing}>
  49                         {props.data.virtualMachineData && attributes(props.data.virtualMachineData, props.classes)}
  50                     </Typography>
  51                 </DialogContent>
  52                 <DialogActions>
  53                     <Button
  54                         variant='flat'
  55                         color='primary'
  56                         onClick={props.closeDialog}>
  57                         Close
  58                 </Button>
  59                 </DialogActions>
  60             </Dialog>
  61     );
  62
  63 const attributes = (virtualMachine: VirtualMachinesResource, classes: any) => {
  64     const { uuid, ownerUuid, createdAt, modifiedAt, modifiedByClientUuid, modifiedByUserUuid, hostname } = virtualMachine;
  65     return (
  66         <span>
  67             <Grid container direction="row">
  68                 <Grid item xs={5} className={classes.rightContainer}>
  69                     <Grid item>Hostname</Grid>
  70                     <Grid item>Owner uuid</Grid>
  71                     <Grid item>Created at</Grid>
  72                     <Grid item>Modified at</Grid>
  73                     <Grid item>Modified by user uuid</Grid>
  74                     <Grid item>Modified by client uuid</Grid>
  75                     <Grid item>uuid</Grid>
  76                 </Grid>
  77                 <Grid item xs={7} className={classes.leftContainer}>
  78                     <Grid item>{hostname}</Grid>
  79                     <Grid item>{ownerUuid}</Grid>
  80                     <Grid item>{createdAt}</Grid>
  81                     <Grid item>{modifiedAt}</Grid>
  82                     <Grid item>{modifiedByUserUuid}</Grid>
  83                     <Grid item>{modifiedByClientUuid}</Grid>
  84                     <Grid item>{uuid}</Grid>
  85                 </Grid>
  86             </Grid>
  87         </span>
  88     );
  89 };