Merge branch 'main' from arvados-workbench2.git
[arvados.git] / services / workbench2 / 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 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='body1' className={props.classes.spacing}>
49                         {props.data.virtualMachineData && attributes(props.data.virtualMachineData, props.classes)}
50                     </Typography>
51                 </DialogContent>
52                 <DialogActions>
53                     <Button
54                         variant='text'
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 };