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