src/views/virtual-machine-panel/virtual-machine-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 { Dispatch, compose } from 'redux';
  13 import { saveRequestedDate, loadVirtualMachinesData } from '~/store/virtual-machines/virtual-machines-actions';
  14 import { RootState } from '~/store/store';
  15 import { ListResults } from '~/services/common-service/common-resource-service';
  16 import { HelpIcon } from '~/components/icon/icon';
  17 import { VirtualMachinesLoginsResource, VirtualMachinesResource } from '~/models/virtual-machines';
  18 import { Routes } from '~/routes/routes';
  19
  20 type CssRules = 'button' | 'codeSnippet' | 'link' | 'linkIcon' | 'rightAlign' | 'cardWithoutMachines' | 'icon';
  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 = ({ virtualMachines }: RootState) => {
  62     return {
  63         requestedDate: virtualMachines.date,
  64         ...virtualMachines
  65     };
  66 };
  67
  68 const mapDispatchToProps = {
  69     saveRequestedDate,
  70     loadVirtualMachinesData
  71 };
  72
  73 interface VirtualMachinesPanelDataProps {
  74     requestedDate: string;
  75     virtualMachines: ListResults<any>;
  76     logins: VirtualMachinesLoginsResource[];
  77     links: ListResults<any>;
  78 }
  79
  80 interface VirtualMachinesPanelActionProps {
  81     saveRequestedDate: () => void;
  82     loadVirtualMachinesData: () => string;
  83 }
  84
  85 type VirtualMachineProps = VirtualMachinesPanelActionProps & VirtualMachinesPanelDataProps & WithStyles<CssRules>;
  86
  87 export const VirtualMachinePanel = compose(
  88     withStyles(styles),
  89     connect(mapStateToProps, mapDispatchToProps))(
  90         class extends React.Component<VirtualMachineProps> {
  91             componentDidMount() {
  92                 this.props.loadVirtualMachinesData();
  93             }
  94
  95             render() {
  96                 const { virtualMachines, links } = this.props;
  97                 return (
  98                     <Grid container spacing={16}>
  99                         {virtualMachines.itemsAvailable === 0 && <CardContentWithNoVirtualMachines {...this.props} />}
 100                         {virtualMachines.itemsAvailable > 0 && links.itemsAvailable > 0 && <CardContentWithVirtualMachines {...this.props} />}
 101                         {<CardSSHSection {...this.props} />}
 102                     </Grid>
 103                 );
 104             }
 105         }
 106     );
 107
 108 const CardContentWithNoVirtualMachines = (props: VirtualMachineProps) =>
 109     <Grid item xs={12}>
 110         <Card>
 111             <CardContent className={props.classes.cardWithoutMachines}>
 112                 <Grid item xs={6}>
 113                     <Typography variant="body2">
 114                         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.
 115                     </Typography>
 116                 </Grid>
 117                 <Grid item xs={6} className={props.classes.rightAlign}>
 118                     <Button variant="contained" color="primary" className={props.classes.button} onClick={props.saveRequestedDate}>
 119                         SEND REQUEST FOR SHELL ACCESS
 120                     </Button>
 121                     {props.requestedDate &&
 122                         <Typography variant="body1">
 123                             A request for shell access was sent on {props.requestedDate}
 124                         </Typography>}
 125                 </Grid>
 126             </CardContent>
 127         </Card>
 128     </Grid>;
 129
 130 const CardContentWithVirtualMachines = (props: VirtualMachineProps) =>
 131     <Grid item xs={12}>
 132         <Card>
 133             <CardContent>
 134                 <div className={props.classes.rightAlign}>
 135                     <Button variant="contained" color="primary" className={props.classes.button} onClick={props.saveRequestedDate}>
 136                         SEND REQUEST FOR SHELL ACCESS
 137                     </Button>
 138                     {props.requestedDate &&
 139                         <Typography variant="body1">
 140                             A request for shell access was sent on {props.requestedDate}
 141                         </Typography>}
 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" className={props.classes.linkIcon}>
 145                         <Tooltip title="Access VM using webshell">
 146                             <HelpIcon />
 147                         </Tooltip>
 148                     </a>
 149                 </div>
 150                 <Table>
 151                     <TableHead>
 152                         <TableRow>
 153                             <TableCell>Host name</TableCell>
 154                             <TableCell>Login name</TableCell>
 155                             <TableCell>Command line</TableCell>
 156                             <TableCell>Web shell</TableCell>
 157                         </TableRow>
 158                     </TableHead>
 159                     <TableBody>
 160                         {props.virtualMachines.items.map((it, index) =>
 161                             <TableRow key={index}>
 162                                 <TableCell>{it.hostname}</TableCell>
 163                                 <TableCell>{getUsername(props.links, it)}</TableCell>
 164                                 <TableCell>ssh {getUsername(props.links, it)}@shell.arvados</TableCell>
 165                                 <TableCell>
 166                                     <a href={`https://workbench.c97qk.arvadosapi.com${it.href}/webshell/${getUsername(props.links, it)}`} target="_blank" className={props.classes.link}>
 167                                         Log in as {getUsername(props.links, it)}
 168                                     </a>
 169                                 </TableCell>
 170                             </TableRow>
 171                         )}
 172                     </TableBody>
 173                 </Table>
 174             </CardContent>
 175         </Card>
 176     </Grid>;
 177
 178 const getUsername = (links: ListResults<any>, virtualMachine: VirtualMachinesResource) => {
 179     const link = links.items.find((item: any) => item.headUuid === virtualMachine.uuid);
 180     return link.properties.username || undefined;
 181 };
 182
 183 const CardSSHSection = (props: VirtualMachineProps) =>
 184     <Grid item xs={12}>
 185         <Card>
 186             <CardContent>
 187                 <Typography variant="body2">
 188                     In order to access virtual machines using SSH, <Link to={Routes.SSH_KEYS} 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):
 189                 </Typography>
 190                 <DefaultCodeSnippet
 191                     className={props.classes.codeSnippet}
 192                     lines={[textSSH]} />
 193             </CardContent>
 194         </Card>
 195     </Grid>;
 196
 197 const textSSH = `Host *.arvados
 198     TCPKeepAlive yes
 199     ServerAliveInterval 60
 200     ProxyCommand ssh -p2222 turnout@switchyard.api.ardev.roche.com -x -a $SSH_PROXY_FLAGS %h`;