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 { DefaultCodeSnippet } from 'components/default-code-snippet/default-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: theme.spacing.unit,
  35     },
  36     iconHeader: {
  37         fontSize: '1.875rem',
  38         color: theme.customs.colors.green700,
  39     },
  40     avatar: {
  41         alignSelf: 'flex-start',
  42         paddingTop: theme.spacing.unit * 0.5
  43     },
  44     content: {
  45         padding: theme.spacing.unit * 1.0,
  46         paddingTop: theme.spacing.unit * 0.5,
  47         '&:last-child': {
  48             paddingBottom: theme.spacing.unit * 1,
  49         }
  50     },
  51     title: {
  52         overflow: 'hidden',
  53         paddingTop: theme.spacing.unit * 0.5
  54     },
  55 });
  56
  57 interface ProcessCmdCardDataProps {
  58   process: Process;
  59   onCopy: (text: string) => void;
  60 }
  61
  62 type ProcessCmdCardProps = ProcessCmdCardDataProps & WithStyles<CssRules> & MPVPanelProps;
  63
  64 export const ProcessCmdCard = withStyles(styles)(
  65   ({
  66     process,
  67     onCopy,
  68     classes,
  69     doHidePanel,
  70   }: ProcessCmdCardProps) => {
  71     const command = process.containerRequest.command.map((v) =>
  72       shellescape([v]) // Escape each arg separately
  73     );
  74
  75     let formattedCommand = [...command];
  76     formattedCommand.forEach((item, i, arr) => {
  77       // Indent lines after the first
  78       const indent = i > 0 ? '  ' : '';
  79       // Escape newlines on every non-last arg when there are multiple lines
  80       const lineBreak = arr.length > 1 && i < arr.length - 1 ? ' \\' : '';
  81       arr[i] = `${indent}${item}${lineBreak}`;
  82     });
  83
  84     return (
  85       <Card className={classes.card}>
  86         <CardHeader
  87           className={classes.header}
  88           classes={{
  89             content: classes.title,
  90             avatar: classes.avatar,
  91           }}
  92           avatar={<CommandIcon className={classes.iconHeader} />}
  93           title={
  94             <Typography noWrap variant="h6" color="inherit">
  95               Command
  96             </Typography>
  97           }
  98           action={
  99             <Grid container direction="row" alignItems="center">
 100               <Grid item>
 101                 <Tooltip title="Copy to clipboard" disableFocusListener>
 102                   <IconButton>
 103                     <CopyToClipboard
 104                       text={command.join(" ")}
 105                       onCopy={() => onCopy("Command copied to clipboard")}
 106                     >
 107                       <CopyIcon />
 108                     </CopyToClipboard>
 109                   </IconButton>
 110                 </Tooltip>
 111               </Grid>
 112               <Grid item>
 113                 {doHidePanel && (
 114                   <Tooltip
 115                     title={`Close Command Panel`}
 116                     disableFocusListener
 117                   >
 118                     <IconButton onClick={doHidePanel}>
 119                       <CloseIcon />
 120                     </IconButton>
 121                   </Tooltip>
 122                 )}
 123               </Grid>
 124             </Grid>
 125           }
 126         />
 127         <CardContent className={classes.content}>
 128           <DefaultCodeSnippet lines={formattedCommand} linked />
 129         </CardContent>
 130       </Card>
 131     );
 132   }
 133 );