src/views/virtual-machine-panel/virtual-machine-user-panel.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 { connect } from 'react-redux';
   7 import { Grid, Typography, Button, Card, CardContent, TableBody, TableCell, TableHead, TableRow, Table, Tooltip } 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 { saveRequestedDate, loadVirtualMachinesUserData } from '~/store/virtual-machines/virtual-machines-actions';
  12 import { RootState } from '~/store/store';
  13 import { ListResults } from '~/services/common-service/common-service';
  14 import { HelpIcon } from '~/components/icon/icon';
  15
  16 type CssRules = 'button' | 'codeSnippet' | 'link' | 'linkIcon' | 'rightAlign' | 'cardWithoutMachines' | 'icon';
  17
  18 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  19     button: {
  20         marginTop: theme.spacing.unit,
  21         marginBottom: theme.spacing.unit
  22     },
  23     codeSnippet: {
  24         borderRadius: theme.spacing.unit * 0.5,
  25         border: '1px solid',
  26         borderColor: theme.palette.grey["400"],
  27     },
  28     link: {
  29         textDecoration: 'none',
  30         color: theme.palette.primary.main,
  31         "&:hover": {
  32             color: theme.palette.primary.dark,
  33             transition: 'all 0.5s ease'
  34         }
  35     },
  36     linkIcon: {
  37         textDecoration: 'none',
  38         color: theme.palette.grey["500"],
  39         textAlign: 'right',
  40         "&:hover": {
  41             color: theme.palette.common.black,
  42             transition: 'all 0.5s ease'
  43         }
  44     },
  45     rightAlign: {
  46         textAlign: "right"
  47     },
  48     cardWithoutMachines: {
  49         display: 'flex'
  50     },
  51     icon: {
  52         textAlign: "right",
  53         marginTop: theme.spacing.unit
  54     }
  55 });
  56
  57 const mapStateToProps = (state: RootState) => {
  58     return {
  59         requestedDate: state.virtualMachines.date,
  60         userUuid: state.auth.user!.uuid,
  61         helpText: state.auth.config.clusterConfig.Workbench.SSHHelpPageHTML,
  62         webShell: state.auth.config.clusterConfig.Services.WebShell.ExternalURL,
  63         ...state.virtualMachines
  64     };
  65 };
  66
  67 const mapDispatchToProps = (dispatch: Dispatch): Pick<VirtualMachinesPanelActionProps, 'loadVirtualMachinesData' | 'saveRequestedDate'> => ({
  68     saveRequestedDate: () => dispatch<any>(saveRequestedDate()),
  69     loadVirtualMachinesData: () => dispatch<any>(loadVirtualMachinesUserData()),
  70 });
  71
  72 interface VirtualMachinesPanelDataProps {
  73     requestedDate: string;
  74     virtualMachines: ListResults<any>;
  75     userUuid: string;
  76     links: ListResults<any>;
  77     helpText: string;
  78     webShell: string;
  79 }
  80
  81 interface VirtualMachinesPanelActionProps {
  82     saveRequestedDate: () => void;
  83     loadVirtualMachinesData: () => string;
  84 }
  85
  86 type VirtualMachineProps = VirtualMachinesPanelActionProps & VirtualMachinesPanelDataProps & WithStyles<CssRules>;
  87
  88 export const VirtualMachineUserPanel = compose(
  89     withStyles(styles),
  90     connect(mapStateToProps, mapDispatchToProps))(
  91         class extends React.Component<VirtualMachineProps> {
  92             componentDidMount() {
  93                 this.props.loadVirtualMachinesData();
  94             }
  95
  96             render() {
  97                 const { virtualMachines, links } = this.props;
  98                 return (
  99                     <Grid container spacing={16}>
 100                         {virtualMachines.itemsAvailable === 0 && <CardContentWithoutVirtualMachines {...this.props} />}
 101                         {virtualMachines.itemsAvailable > 0 && links.itemsAvailable > 0 && <CardContentWithVirtualMachines {...this.props} />}
 102                         {<CardSSHSection {...this.props} />}
 103                     </Grid>
 104                 );
 105             }
 106         }
 107     );
 108
 109 const CardContentWithoutVirtualMachines = (props: VirtualMachineProps) =>
 110     <Grid item xs={12}>
 111         <Card>
 112             <CardContent className={props.classes.cardWithoutMachines}>
 113                 <Grid item xs={6}>
 114                     <Typography variant='body1'>
 115                         You do not have access to any virtual machines. Some Arvados features require using the command line. You may request access to a hosted virtual machine with the command line shell.
 116                     </Typography>
 117                 </Grid>
 118                 <Grid item xs={6} className={props.classes.rightAlign}>
 119                     {virtualMachineSendRequest(props)}
 120                 </Grid>
 121             </CardContent>
 122         </Card>
 123     </Grid>;
 124
 125 const CardContentWithVirtualMachines = (props: VirtualMachineProps) =>
 126     <Grid item xs={12}>
 127         <Card>
 128             <CardContent>
 129                 <span>
 130                     <div className={props.classes.rightAlign}>
 131                         {virtualMachineSendRequest(props)}
 132                     </div>
 133                     <div className={props.classes.icon}>
 134                         <a href="https://doc.arvados.org/user/getting_started/vm-login-with-webshell.html" target="_blank" className={props.classes.linkIcon}>
 135                             <Tooltip title="Access VM using webshell">
 136                                 <HelpIcon />
 137                             </Tooltip>
 138                         </a>
 139                     </div>
 140                     {virtualMachinesTable(props)}
 141                 </span>
 142
 143             </CardContent>
 144         </Card>
 145     </Grid>;
 146
 147 const virtualMachineSendRequest = (props: VirtualMachineProps) =>
 148     <span>
 149         <Button variant="contained" color="primary" className={props.classes.button} onClick={props.saveRequestedDate}>
 150             SEND REQUEST FOR SHELL ACCESS
 151         </Button>
 152         {props.requestedDate &&
 153             <Typography >
 154                 A request for shell access was sent on {props.requestedDate}
 155             </Typography>}
 156     </span>;
 157
 158 const virtualMachinesTable = (props: VirtualMachineProps) =>
 159     <Table>
 160         <TableHead>
 161             <TableRow>
 162                 <TableCell>Host name</TableCell>
 163                 <TableCell>Login name</TableCell>
 164                 <TableCell>Command line</TableCell>
 165                 {props.webShell !== "" && <TableCell>Web shell</TableCell>}
 166             </TableRow>
 167         </TableHead>
 168         <TableBody>
 169             {props.virtualMachines.items.map((it, index) =>
 170                 <TableRow key={index}>
 171                     <TableCell>{it.hostname}</TableCell>
 172                     <TableCell>{getUsername(props.links, props.userUuid)}</TableCell>
 173                     <TableCell>ssh {getUsername(props.links, props.userUuid)}@{it.hostname}</TableCell>
 174                     {props.webShell !== "" && <TableCell>
 175                         <a href={`${props.webShell}${it.href}/webshell/${getUsername(props.links, props.userUuid)}`} target="_blank" className={props.classes.link}>
 176                             Log in as {getUsername(props.links, props.userUuid)}
 177                         </a>
 178                     </TableCell>}
 179                 </TableRow>
 180             )}
 181         </TableBody>
 182     </Table>;
 183
 184 const getUsername = (links: ListResults<any>, userUuid: string) => {
 185     return links.items.map(it => it.tailUuid === userUuid ? it.properties.username : '');
 186 };
 187
 188 const CardSSHSection = (props: VirtualMachineProps) =>
 189     <Grid item xs={12}>
 190         <Card>
 191             <CardContent>
 192                 <Typography>
 193                     <div dangerouslySetInnerHTML={{ __html: props.helpText }} style={{ margin: "1em" }} />
 194                 </Typography>
 195             </CardContent>
 196         </Card>
 197     </Grid>;