services/workbench2/src/views/process-panel/process-cmd-card.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 {
   7     StyleRulesCallback,
   8     WithStyles,
   9     withStyles,
  10     Card,
  11     CardHeader,
  12     IconButton,
  13     CardContent,
  14     Tooltip,
  15     Typography,
  16     Grid,
  17 } from '@material-ui/core';
  18 import { ArvadosTheme } from 'common/custom-theme';
  19 import { CloseIcon, CommandIcon, CopyIcon } from 'components/icon/icon';
  20 import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view';
  21 import { DefaultVirtualCodeSnippet } from 'components/default-code-snippet/default-virtual-code-snippet';
  22 import { Process } from 'store/processes/process';
  23 import shellescape from 'shell-escape';
  24 import CopyToClipboard from 'react-copy-to-clipboard';
  25
  26 type CssRules = 'card' | 'content' | 'title' | 'header' | 'avatar' | 'iconHeader';
  27
  28 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  29     card: {
  30         height: '100%'
  31     },
  32     header: {
  33         paddingTop: theme.spacing.unit,
  34         paddingBottom: 0,
  35     },
  36     iconHeader: {
  37         fontSize: '1.875rem',
  38         color: theme.customs.colors.greyL,
  39     },
  40     avatar: {
  41         alignSelf: 'flex-start',
  42         paddingTop: theme.spacing.unit * 0.5
  43     },
  44     content: {
  45         height: `calc(100% - ${theme.spacing.unit * 6}px)`,
  46         padding: theme.spacing.unit * 1.0,
  47         paddingTop: 0,
  48         '&:last-child': {
  49             paddingBottom: theme.spacing.unit * 1,
  50         }
  51     },
  52     title: {
  53         overflow: 'hidden',
  54         paddingTop: theme.spacing.unit * 0.5,
  55         color: theme.customs.colors.greyD,
  56         fontSize: '1.875rem'
  57     },
  58 });
  59
  60 interface ProcessCmdCardDataProps {
  61   process: Process;
  62   onCopy: (text: string) => void;
  63 }
  64
  65 type ProcessCmdCardProps = ProcessCmdCardDataProps & WithStyles<CssRules> & MPVPanelProps;
  66
  67 export const ProcessCmdCard = withStyles(styles)(
  68   ({
  69     process,
  70     onCopy,
  71     classes,
  72     doHidePanel,
  73   }: ProcessCmdCardProps) => {
  74     const command = process.containerRequest.command.map((v) =>
  75       shellescape([v]) // Escape each arg separately
  76     );
  77
  78     let formattedCommand = [...command];
  79     formattedCommand.forEach((item, i, arr) => {
  80       // Indent lines after the first
  81       const indent = i > 0 ? '  ' : '';
  82       // Escape newlines on every non-last arg when there are multiple lines
  83       const lineBreak = arr.length > 1 && i < arr.length - 1 ? ' \\' : '';
  84       arr[i] = `${indent}${item}${lineBreak}`;
  85     });
  86
  87     return (
  88       <Card className={classes.card}>
  89         <CardHeader
  90           className={classes.header}
  91           classes={{
  92             content: classes.title,
  93             avatar: classes.avatar,
  94           }}
  95           avatar={<CommandIcon className={classes.iconHeader} />}
  96           title={
  97             <Typography noWrap variant="h6" color="inherit">
  98               Command
  99             </Typography>
 100           }
 101           action={
 102             <Grid container direction="row" alignItems="center">
 103               <Grid item>
 104                 <Tooltip title="Copy link to clipboard" disableFocusListener>
 105                   <IconButton>
 106                     <CopyToClipboard
 107                       text={command.join(" ")}
 108                       onCopy={() => onCopy("Command copied to clipboard")}
 109                     >
 110                       <CopyIcon />
 111                     </CopyToClipboard>
 112                   </IconButton>
 113                 </Tooltip>
 114               </Grid>
 115               <Grid item>
 116                 {doHidePanel && (
 117                   <Tooltip
 118                     title={`Close Command Panel`}
 119                     disableFocusListener
 120                   >
 121                     <IconButton onClick={doHidePanel}>
 122                       <CloseIcon />
 123                     </IconButton>
 124                   </Tooltip>
 125                 )}
 126               </Grid>
 127             </Grid>
 128           }
 129         />
 130         <CardContent className={classes.content}>
 131           <DefaultVirtualCodeSnippet lines={formattedCommand} linked />
 132         </CardContent>
 133       </Card>
 134     );
 135   }
 136 );