src/views/virtual-machine-panel/virtual-machine-admin-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 { connect } from 'react-redux';
   7 import { Grid, Card, Chip, CardContent, TableBody, TableCell, TableHead, TableRow, Table, Tooltip, IconButton } from '@material-ui/core';
   8 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
   9 import { ArvadosTheme } from 'common/custom-theme';
  10 import { compose, Dispatch } from 'redux';
  11 import { loadVirtualMachinesAdminData, openAddVirtualMachineLoginDialog, openRemoveVirtualMachineLoginDialog } from 'store/virtual-machines/virtual-machines-actions';
  12 import { RootState } from 'store/store';
  13 import { ListResults } from 'services/common-service/common-service';
  14 import { MoreOptionsIcon, AddUserIcon } from 'components/icon/icon';
  15 import { VirtualMachineLogins, VirtualMachinesResource } from 'models/virtual-machines';
  16 import { openVirtualMachinesContextMenu } from 'store/context-menu/context-menu-actions';
  17 import { ResourceUuid, VirtualMachineHostname, VirtualMachineLogin } from 'views-components/data-explorer/renderers';
  18
  19 type CssRules = 'moreOptionsButton' | 'moreOptions' | 'chipsRoot';
  20
  21 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  22     moreOptionsButton: {
  23         padding: 0
  24     },
  25     moreOptions: {
  26         textAlign: 'right',
  27         '&:last-child': {
  28             paddingRight: 0
  29         }
  30     },
  31     chipsRoot: {
  32         margin: `0px -${theme.spacing.unit / 2}px`,
  33     },
  34 });
  35
  36 const mapStateToProps = (state: RootState) => {
  37     return {
  38         userUuid: state.auth.user!.uuid,
  39         ...state.virtualMachines
  40     };
  41 };
  42
  43 const mapDispatchToProps = (dispatch: Dispatch): Pick<VirtualMachinesPanelActionProps, 'loadVirtualMachinesData' | 'onOptionsMenuOpen' | 'onAddLogin' | 'onDeleteLogin'> => ({
  44     loadVirtualMachinesData: () => dispatch<any>(loadVirtualMachinesAdminData()),
  45     onOptionsMenuOpen: (event, virtualMachine) => {
  46         dispatch<any>(openVirtualMachinesContextMenu(event, virtualMachine));
  47     },
  48     onAddLogin: (uuid: string) => {
  49         dispatch<any>(openAddVirtualMachineLoginDialog(uuid));
  50     },
  51     onDeleteLogin: (uuid: string) => {
  52         dispatch<any>(openRemoveVirtualMachineLoginDialog(uuid));
  53     },
  54 });
  55
  56 interface VirtualMachinesPanelDataProps {
  57     virtualMachines: ListResults<any>;
  58     logins: VirtualMachineLogins;
  59     links: ListResults<any>;
  60     userUuid: string;
  61 }
  62
  63 interface VirtualMachinesPanelActionProps {
  64     loadVirtualMachinesData: () => string;
  65     onOptionsMenuOpen: (event: React.MouseEvent<HTMLElement>, virtualMachine: VirtualMachinesResource) => void;
  66     onAddLogin: (uuid: string) => void;
  67     onDeleteLogin: (uuid: string) => void;
  68 }
  69
  70 type VirtualMachineProps = VirtualMachinesPanelActionProps & VirtualMachinesPanelDataProps & WithStyles<CssRules>;
  71
  72 export const VirtualMachineAdminPanel = compose(
  73     withStyles(styles),
  74     connect(mapStateToProps, mapDispatchToProps))(
  75         class extends React.Component<VirtualMachineProps> {
  76             componentDidMount() {
  77                 this.props.loadVirtualMachinesData();
  78             }
  79
  80             render() {
  81                 const { virtualMachines } = this.props;
  82                 return (
  83                     <Grid container spacing={16}>
  84                         {virtualMachines.itemsAvailable > 0 && <CardContentWithVirtualMachines {...this.props} />}
  85                     </Grid>
  86                 );
  87             }
  88         }
  89     );
  90
  91 const CardContentWithVirtualMachines = (props: VirtualMachineProps) =>
  92     <Grid item xs={12}>
  93         <Card>
  94             <CardContent>
  95                 {virtualMachinesTable(props)}
  96             </CardContent>
  97         </Card>
  98     </Grid>;
  99
 100 const virtualMachinesTable = (props: VirtualMachineProps) =>
 101     <Table data-cy="vm-admin-table">
 102         <TableHead>
 103             <TableRow>
 104                 <TableCell>Uuid</TableCell>
 105                 <TableCell>Host name</TableCell>
 106                 <TableCell>Logins</TableCell>
 107                 <TableCell />
 108                 <TableCell />
 109             </TableRow>
 110         </TableHead>
 111         <TableBody>
 112             {props.virtualMachines.items.map((machine, index) =>
 113                 <TableRow key={index}>
 114                     <TableCell><ResourceUuid uuid={machine.uuid} /></TableCell>
 115                     <TableCell><VirtualMachineHostname uuid={machine.uuid} /></TableCell>
 116                     <TableCell>
 117                         <Grid container spacing={8} className={props.classes.chipsRoot}>
 118                             {props.links.items.filter((link) => (link.headUuid === machine.uuid)).map((permission, i) => (
 119                                 <Grid item key={i}>
 120                                     <Chip label={<VirtualMachineLogin linkUuid={permission.uuid} />} onDelete={event => props.onDeleteLogin(permission.uuid)} />
 121                                 </Grid>
 122                             ))}
 123                         </Grid>
 124                     </TableCell>
 125                     <TableCell>
 126                         <Tooltip title="Add Login Permission" disableFocusListener>
 127                             <IconButton onClick={event => props.onAddLogin(machine.uuid)} className={props.classes.moreOptionsButton}>
 128                                 <AddUserIcon />
 129                             </IconButton>
 130                         </Tooltip>
 131                     </TableCell>
 132                     <TableCell className={props.classes.moreOptions}>
 133                         <Tooltip title="More options" disableFocusListener>
 134                             <IconButton onClick={event => props.onOptionsMenuOpen(event, machine)} className={props.classes.moreOptionsButton}>
 135                                 <MoreOptionsIcon />
 136                             </IconButton>
 137                         </Tooltip>
 138                     </TableCell>
 139                 </TableRow>
 140             )}
 141         </TableBody>
 142     </Table>;