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