services/workbench2/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, openEditVirtualMachineLoginDialog } from 'store/virtual-machines/virtual-machines-actions';
  12 import { RootState } from 'store/store';
  13 import { ListResults } from 'services/common-service/common-service';
  14 import { MoreVerticalIcon, 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' | 'vmTableWrapper';
  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     vmTableWrapper: {
  35         overflowX: 'auto',
  36     },
  37 });
  38
  39 const mapStateToProps = (state: RootState) => {
  40     return {
  41         userUuid: state.auth.user!.uuid,
  42         ...state.virtualMachines
  43     };
  44 };
  45
  46 const mapDispatchToProps = (dispatch: Dispatch): Pick<VirtualMachinesPanelActionProps, 'loadVirtualMachinesData' | 'onOptionsMenuOpen' | 'onAddLogin' | 'onDeleteLogin' | 'onLoginEdit'> => ({
  47     loadVirtualMachinesData: () => dispatch<any>(loadVirtualMachinesAdminData()),
  48     onOptionsMenuOpen: (event, virtualMachine) => {
  49         dispatch<any>(openVirtualMachinesContextMenu(event, virtualMachine));
  50     },
  51     onAddLogin: (uuid: string) => {
  52         dispatch<any>(openAddVirtualMachineLoginDialog(uuid));
  53     },
  54     onDeleteLogin: (uuid: string) => {
  55         dispatch<any>(openRemoveVirtualMachineLoginDialog(uuid));
  56     },
  57     onLoginEdit: (uuid: string) => {
  58         dispatch<any>(openEditVirtualMachineLoginDialog(uuid));
  59     },
  60 });
  61
  62 interface VirtualMachinesPanelDataProps {
  63     virtualMachines: ListResults<any>;
  64     logins: VirtualMachineLogins;
  65     links: ListResults<any>;
  66     userUuid: string;
  67 }
  68
  69 interface VirtualMachinesPanelActionProps {
  70     loadVirtualMachinesData: () => string;
  71     onOptionsMenuOpen: (event: React.MouseEvent<HTMLElement>, virtualMachine: VirtualMachinesResource) => void;
  72     onAddLogin: (uuid: string) => void;
  73     onDeleteLogin: (uuid: string) => void;
  74     onLoginEdit: (uuid: string) => void;
  75 }
  76
  77 type VirtualMachineProps = VirtualMachinesPanelActionProps & VirtualMachinesPanelDataProps & WithStyles<CssRules>;
  78
  79 export const VirtualMachineAdminPanel = compose(
  80     withStyles(styles),
  81     connect(mapStateToProps, mapDispatchToProps))(
  82         class extends React.Component<VirtualMachineProps> {
  83             componentDidMount() {
  84                 this.props.loadVirtualMachinesData();
  85             }
  86
  87             render() {
  88                 const { virtualMachines } = this.props;
  89                 return (
  90                     <Grid container spacing={16}>
  91                         {virtualMachines.itemsAvailable > 0 && <CardContentWithVirtualMachines {...this.props} />}
  92                     </Grid>
  93                 );
  94             }
  95         }
  96     );
  97
  98 const CardContentWithVirtualMachines = (props: VirtualMachineProps) =>
  99     <Grid item xs={12}>
 100         <Card>
 101             <CardContent className={props.classes.vmTableWrapper}>
 102                 {virtualMachinesTable(props)}
 103             </CardContent>
 104         </Card>
 105     </Grid>;
 106
 107 const virtualMachinesTable = (props: VirtualMachineProps) =>
 108     <Table data-cy="vm-admin-table">
 109         <TableHead>
 110             <TableRow>
 111                 <TableCell>Uuid</TableCell>
 112                 <TableCell>Host name</TableCell>
 113                 <TableCell>Logins</TableCell>
 114                 <TableCell />
 115                 <TableCell />
 116             </TableRow>
 117         </TableHead>
 118         <TableBody>
 119             {props.virtualMachines.items.map((machine, index) =>
 120                 <TableRow key={index}>
 121                     <TableCell><ResourceUuid uuid={machine.uuid} /></TableCell>
 122                     <TableCell><VirtualMachineHostname uuid={machine.uuid} /></TableCell>
 123                     <TableCell>
 124                         <Grid container spacing={8} className={props.classes.chipsRoot}>
 125                             {props.links.items.filter((link) => (link.headUuid === machine.uuid)).map((permission, i) => (
 126                                 <Grid item key={i}>
 127                                     <Chip label={<VirtualMachineLogin linkUuid={permission.uuid} />} onDelete={event => props.onDeleteLogin(permission.uuid)} onClick={event => props.onLoginEdit(permission.uuid)} />
 128                                 </Grid>
 129                             ))}
 130                         </Grid>
 131                     </TableCell>
 132                     <TableCell>
 133                         <Tooltip title="Add Login Permission" disableFocusListener>
 134                             <IconButton onClick={event => props.onAddLogin(machine.uuid)} className={props.classes.moreOptionsButton}>
 135                                 <AddUserIcon />
 136                             </IconButton>
 137                         </Tooltip>
 138                     </TableCell>
 139                     <TableCell className={props.classes.moreOptions}>
 140                         <Tooltip title="More options" disableFocusListener>
 141                             <IconButton onClick={event => props.onOptionsMenuOpen(event, machine)} className={props.classes.moreOptionsButton}>
 142                                 <MoreVerticalIcon />
 143                             </IconButton>
 144                         </Tooltip>
 145                     </TableCell>
 146                 </TableRow>
 147             )}
 148         </TableBody>
 149     </Table>;