21288: new api request if wf is not in top 100 list Arvados-DCO-1.1-Signed-off-by...
[arvados.git] / 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>;