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 { DefaultCodeSnippet } from '~/components/default-code-snippet/default-code-snippet';
  11 import { Link } from 'react-router-dom';
  12 import { compose, Dispatch } from 'redux';
  13 import { saveRequestedDate, loadVirtualMachinesUserData } from '~/store/virtual-machines/virtual-machines-actions';
  14 import { RootState } from '~/store/store';
  15 import { ListResults } from '~/services/common-service/common-service';
  16 import { HelpIcon } from '~/components/icon/icon';
  17 import { Routes } from '~/routes/routes';
  18
  19 type CssRules = 'button' | 'codeSnippet' | 'link' | 'linkIcon' | 'rightAlign' | 'cardWithoutMachines' | 'icon';
  20
  21 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  22     button: {
  23         marginTop: theme.spacing.unit,
  24         marginBottom: theme.spacing.unit
  25     },
  26     codeSnippet: {
  27         borderRadius: theme.spacing.unit * 0.5,
  28         border: '1px solid',
  29         borderColor: theme.palette.grey["400"],
  30     },
  31     link: {
  32         textDecoration: 'none',
  33         color: theme.palette.primary.main,
  34         "&:hover": {
  35             color: theme.palette.primary.dark,
  36             transition: 'all 0.5s ease'
  37         }
  38     },
  39     linkIcon: {
  40         textDecoration: 'none',
  41         color: theme.palette.grey["500"],
  42         textAlign: 'right',
  43         "&:hover": {
  44             color: theme.palette.common.black,
  45             transition: 'all 0.5s ease'
  46         }
  47     },
  48     rightAlign: {
  49         textAlign: "right"
  50     },
  51     cardWithoutMachines: {
  52         display: 'flex'
  53     },
  54     icon: {
  55         textAlign: "right",
  56         marginTop: theme.spacing.unit
  57     }
  58 });
  59
  60 const mapStateToProps = ({ virtualMachines }: RootState) => {
  61     return {
  62         requestedDate: virtualMachines.date,
  63         ...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     links: ListResults<any>;
  76 }
  77
  78 interface VirtualMachinesPanelActionProps {
  79     saveRequestedDate: () => void;
  80     loadVirtualMachinesData: () => string;
  81 }
  82
  83 type VirtualMachineProps = VirtualMachinesPanelActionProps & VirtualMachinesPanelDataProps & WithStyles<CssRules>;
  84
  85 export const VirtualMachineUserPanel = compose(
  86     withStyles(styles),
  87     connect(mapStateToProps, mapDispatchToProps))(
  88         class extends React.Component<VirtualMachineProps> {
  89             componentDidMount() {
  90                 this.props.loadVirtualMachinesData();
  91             }
  92
  93             render() {
  94                 const { virtualMachines, links } = this.props;
  95                 return (
  96                     <Grid container spacing={16}>
  97                         {virtualMachines.itemsAvailable === 0 && <CardContentWithoutVirtualMachines {...this.props} />}
  98                         {virtualMachines.itemsAvailable > 0 && links.itemsAvailable > 0 && <CardContentWithVirtualMachines {...this.props} />}
  99                         {<CardSSHSection {...this.props} />}
 100                     </Grid>
 101                 );
 102             }
 103         }
 104     );
 105
 106 const CardContentWithoutVirtualMachines = (props: VirtualMachineProps) =>
 107     <Grid item xs={12}>
 108         <Card>
 109             <CardContent className={props.classes.cardWithoutMachines}>
 110                 <Grid item xs={6}>
 111                     <Typography variant="body2">
 112                         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.
 113                     </Typography>
 114                 </Grid>
 115                 <Grid item xs={6} className={props.classes.rightAlign}>
 116                     {virtualMachineSendRequest(props)}
 117                 </Grid>
 118             </CardContent>
 119         </Card>
 120     </Grid>;
 121
 122 const CardContentWithVirtualMachines = (props: VirtualMachineProps) =>
 123     <Grid item xs={12}>
 124         <Card>
 125             <CardContent>
 126                 <span>
 127                     <div className={props.classes.rightAlign}>
 128                         {virtualMachineSendRequest(props)}
 129                     </div>
 130                     <div className={props.classes.icon}>
 131                         <a href="https://doc.arvados.org/user/getting_started/vm-login-with-webshell.html" target="_blank" className={props.classes.linkIcon}>
 132                             <Tooltip title="Access VM using webshell">
 133                                 <HelpIcon />
 134                             </Tooltip>
 135                         </a>
 136                     </div>
 137                     {virtualMachinesTable(props)}
 138                 </span>
 139
 140             </CardContent>
 141         </Card>
 142     </Grid>;
 143
 144 const virtualMachineSendRequest = (props: VirtualMachineProps) =>
 145     <span>
 146         <Button variant="contained" color="primary" className={props.classes.button} onClick={props.saveRequestedDate}>
 147             SEND REQUEST FOR SHELL ACCESS
 148         </Button>
 149         {props.requestedDate &&
 150             <Typography variant="body1">
 151                 A request for shell access was sent on {props.requestedDate}
 152             </Typography>}
 153     </span>;
 154
 155 const virtualMachinesTable = (props: VirtualMachineProps) =>
 156     <Table>
 157         <TableHead>
 158             <TableRow>
 159                 <TableCell>Host name</TableCell>
 160                 <TableCell>Login name</TableCell>
 161                 <TableCell>Command line</TableCell>
 162                 <TableCell>Web shell</TableCell>
 163             </TableRow>
 164         </TableHead>
 165         <TableBody>
 166             {props.virtualMachines.items.map((it, index) =>
 167                 <TableRow key={index}>
 168                     <TableCell>{it.hostname}</TableCell>
 169                     <TableCell>{getUsername(props.links)}</TableCell>
 170                     <TableCell>ssh {getUsername(props.links)}@{it.hostname}.arvados</TableCell>
 171                     <TableCell>
 172                         <a href={`https://workbench.c97qk.arvadosapi.com${it.href}/webshell/${getUsername(props.links)}`} target="_blank" className={props.classes.link}>
 173                             Log in as {getUsername(props.links)}
 174                         </a>
 175                     </TableCell>
 176                 </TableRow>
 177             )}
 178         </TableBody>
 179     </Table>;
 180
 181 const getUsername = (links: ListResults<any>) => {
 182     return links.items[0].properties.username;
 183 };
 184
 185 const CardSSHSection = (props: VirtualMachineProps) =>
 186     <Grid item xs={12}>
 187         <Card>
 188             <CardContent>
 189                 <Typography variant="body2">
 190                     In order to access virtual machines using SSH, <Link to={Routes.SSH_KEYS_USER} className={props.classes.link}>add an SSH key to your account</Link> and add a section like this to your SSH configuration file ( ~/.ssh/config):
 191                 </Typography>
 192                 <DefaultCodeSnippet
 193                     className={props.classes.codeSnippet}
 194                     lines={[textSSH]} />
 195             </CardContent>
 196         </Card>
 197     </Grid>;
 198
 199 const textSSH = `Host *.arvados
 200     TCPKeepAlive yes
 201     ServerAliveInterval 60
 202     ProxyCommand ssh -p2222 turnout@switchyard.api.ardev.roche.com -x -a $SSH_PROXY_FLAGS %h`;