"@types/react-virtualized-auto-sizer": "1.0.0",
"@types/react-window": "1.8.2",
"@types/redux-form": "7.4.12",
- "@types/shell-quote": "1.6.0",
+ "@types/shell-escape": "^0.2.0",
"axios": "^0.21.1",
"babel-core": "6.26.3",
"babel-runtime": "6.26.0",
"redux-thunk": "2.3.0",
"reselect": "4.0.0",
"set-value": "2.0.1",
- "shell-quote": "1.6.1",
+ "shell-escape": "^0.2.0",
"sinon": "7.3",
"tslint": "5.20.0",
"tslint-etc": "1.6.0",
// SPDX-License-Identifier: AGPL-3.0
import React from 'react';
-import { StyleRulesCallback, WithStyles, Typography, withStyles } from '@material-ui/core';
+import { StyleRulesCallback, WithStyles, Typography, withStyles, Link } from '@material-ui/core';
import { ArvadosTheme } from 'common/custom-theme';
import classNames from 'classnames';
+import { connect, DispatchProp } from 'react-redux';
+import { RootState } from 'store/store';
+import { FederationConfig, getNavUrl } from 'routes/routes';
+import { Dispatch } from 'redux';
+import { navigationNotAvailable } from 'store/navigation/navigation-action';
type CssRules = 'root' | 'space';
lines: string[];
className?: string;
apiResponse?: boolean;
+ linked?: boolean;
+}
+
+interface CodeSnippetAuthProps {
+ auth: FederationConfig;
}
type CodeSnippetProps = CodeSnippetDataProps & WithStyles<CssRules>;
-export const CodeSnippet = withStyles(styles)(
- ({ classes, lines, className, apiResponse }: CodeSnippetProps) =>
+const mapStateToProps = (state: RootState): CodeSnippetAuthProps => ({
+ auth: state.auth,
+});
+
+export const CodeSnippet = withStyles(styles)(connect(mapStateToProps)(
+ ({ classes, lines, linked, className, apiResponse, dispatch, auth }: CodeSnippetProps & CodeSnippetAuthProps & DispatchProp) =>
<Typography
component="div"
className={classNames(classes.root, className)}>
- {
- lines.map((line: string, index: number) => {
- return <Typography key={index} className={apiResponse ? classes.space : className} component="pre">{line}</Typography>;
- })
- }
+ <Typography className={apiResponse ? classes.space : className} component="pre">
+ {linked ?
+ lines.map((line, index) => <React.Fragment key={index}>{renderLinks(auth, dispatch)(line)}{`\n`}</React.Fragment>) :
+ lines.join('\n')
+ }
+ </Typography>
</Typography>
- );
\ No newline at end of file
+ ));
+
+const renderLinks = (auth: FederationConfig, dispatch: Dispatch) => (text: string): JSX.Element => {
+ // Matches UUIDs & PDHs
+ const REGEX = /[a-z0-9]{5}-[a-z0-9]{5}-[a-z0-9]{15}|[0-9a-f]{32}\+\d+/g;
+ const links = text.match(REGEX);
+ if (!links) {
+ return <>{text}</>;
+ }
+ return <>
+ {text.split(REGEX).map((part, index) =>
+ <React.Fragment key={index}>
+ {part}
+ {links[index] &&
+ <Link onClick={() => {
+ const url = getNavUrl(links[index], auth)
+ if (url) {
+ window.open(`${window.location.origin}${url}`, '_blank');
+ } else {
+ dispatch(navigationNotAvailable(links[index]));
+ }
+ }}
+ style={ {cursor: 'pointer'} }>
+ {links[index]}
+ </Link>}
+ </React.Fragment>
+ )}
+ </>;
+ };
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import { CodeSnippet, CodeSnippetDataProps } from 'components/code-snippet/code-snippet';
import grey from '@material-ui/core/colors/grey';
+import { themeOptions } from 'common/custom-theme';
-const theme = createMuiTheme({
+const theme = createMuiTheme(Object.assign({}, themeOptions, {
overrides: {
MuiTypography: {
body1: {
fontFamily: 'monospace',
useNextVariants: true,
}
-});
+}));
-export const DefaultCodeSnippet = (props: CodeSnippetDataProps) =>
+export const DefaultCodeSnippet = (props: CodeSnippetDataProps) =>
<MuiThemeProvider theme={theme}>
<CodeSnippet {...props} />
- </MuiThemeProvider>;
\ No newline at end of file
+ </MuiThemeProvider>;
+++ /dev/null
-// Copyright (C) The Arvados Authors. All rights reserved.
-//
-// SPDX-License-Identifier: AGPL-3.0
-
-import { dialogActions } from 'store/dialog/dialog-actions';
-import { RootState } from 'store/store';
-import { Dispatch } from 'redux';
-import { getProcess } from 'store/processes/process';
-import { quote } from 'shell-quote';
-
-export const PROCESS_COMMAND_DIALOG_NAME = 'processCommandDialog';
-
-export interface ProcessCommandDialogData {
- command: string;
- processName: string;
-}
-
-export const openProcessCommandDialog = (processUuid: string) =>
- (dispatch: Dispatch<any>, getState: () => RootState) => {
- const process = getProcess(processUuid)(getState().resources);
- if (process) {
- const data: ProcessCommandDialogData = {
- command: quote(process.containerRequest.command),
- processName: process.containerRequest.name,
- };
- dispatch(dialogActions.OPEN_DIALOG({ id: PROCESS_COMMAND_DIALOG_NAME, data }));
- }
- };
import { toggleFavorite } from "store/favorites/favorites-actions";
import {
RenameIcon, ShareIcon, MoveToIcon, CopyIcon, DetailsIcon,
- RemoveIcon, ReRunProcessIcon, InputIcon, OutputIcon, CommandIcon,
+ RemoveIcon, ReRunProcessIcon, InputIcon, OutputIcon,
AdvancedIcon
} from "components/icon/icon";
import { favoritePanelActions } from "store/favorite-panel/favorite-panel-action";
import { snackbarActions, SnackbarKind } from "store/snackbar/snackbar-actions";
import { openProcessInputDialog } from "store/processes/process-input-actions";
import { navigateToOutput } from "store/process-panel/process-panel-actions";
-import { openProcessCommandDialog } from "store/processes/process-command-actions";
import { openAdvancedTabDialog } from "store/advanced-tab/advanced-tab";
import { TogglePublicFavoriteAction } from "../actions/public-favorite-action";
import { togglePublicFavorite } from "store/public-favorites/public-favorites-actions";
}
}
},
- {
- icon: CommandIcon,
- name: "Command",
- execute: (dispatch, resource) => {
- dispatch<any>(openProcessCommandDialog(resource.uuid));
- }
- },
{
icon: DetailsIcon,
name: "View details",
});
}
},
-]];
\ No newline at end of file
+]];
+++ /dev/null
-// Copyright (C) The Arvados Authors. All rights reserved.
-//
-// SPDX-License-Identifier: AGPL-3.0
-
-import React from "react";
-import { Dialog, DialogActions, Button, StyleRulesCallback, WithStyles, withStyles, Tooltip, IconButton, CardHeader } from '@material-ui/core';
-import { withDialog } from "store/dialog/with-dialog";
-import { PROCESS_COMMAND_DIALOG_NAME } from 'store/processes/process-command-actions';
-import { WithDialogProps } from 'store/dialog/with-dialog';
-import { ProcessCommandDialogData } from 'store/processes/process-command-actions';
-import { DefaultCodeSnippet } from "components/default-code-snippet/default-code-snippet";
-import { compose } from 'redux';
-import CopyToClipboard from "react-copy-to-clipboard";
-import { CopyIcon } from 'components/icon/icon';
-
-type CssRules = 'codeSnippet' | 'copyToClipboard';
-
-const styles: StyleRulesCallback<CssRules> = theme => ({
- codeSnippet: {
- marginLeft: theme.spacing.unit * 3,
- marginRight: theme.spacing.unit * 3,
- },
- copyToClipboard: {
- marginRight: theme.spacing.unit,
- }
-});
-
-export const ProcessCommandDialog = compose(
- withDialog(PROCESS_COMMAND_DIALOG_NAME),
- withStyles(styles),
-)(
- (props: WithDialogProps<ProcessCommandDialogData> & WithStyles<CssRules>) =>
- <Dialog
- open={props.open}
- maxWidth="md"
- onClose={props.closeDialog}
- style={{ alignSelf: 'stretch' }}>
- <CardHeader
- title={`Command - ${props.data.processName}`}
- action={
- <Tooltip title="Copy to clipboard">
- <CopyToClipboard text={props.data.command}>
- <IconButton className={props.classes.copyToClipboard}>
- <CopyIcon />
- </IconButton>
- </CopyToClipboard>
- </Tooltip>
- } />
- <DefaultCodeSnippet
- className={props.classes.codeSnippet}
- lines={[props.data.command]} />
- <DialogActions>
- <Button
- variant='text'
- color='primary'
- onClick={props.closeDialog}>
- Close
- </Button>
- </DialogActions>
- </Dialog>
-);
\ No newline at end of file
import Adapter from 'enzyme-adapter-react-16';
import CopyToClipboard from 'react-copy-to-clipboard';
import { TokenDialogComponent } from './token-dialog';
+import { combineReducers, createStore } from 'redux';
+import { Provider } from 'react-redux';
configure({ adapter: new Adapter() });
describe('<CurrentTokenDialog />', () => {
let props;
let wrapper;
+ let store;
beforeEach(() => {
props = {
open: true,
dispatch: jest.fn(),
};
+
+ const initialAuthState = {
+ localCluster: "zzzzz",
+ remoteHostsConfig: {},
+ sessions: {},
+ };
+
+ store = createStore(combineReducers({
+ auth: (state: any = initialAuthState, action: any) => state,
+ }));
});
describe('Get API Token dialog', () => {
beforeEach(() => {
- wrapper = mount(<TokenDialogComponent {...props} />);
+ wrapper = mount(
+ <Provider store={store}>
+ <TokenDialogComponent {...props} />
+ </Provider>
+ );
});
it('should include API host and token', () => {
const someDate = '2140-01-01T00:00:00.000Z'
props.tokenExpiration = new Date(someDate);
- wrapper = mount(<TokenDialogComponent {...props} />);
+ wrapper = mount(
+ <Provider store={store}>
+ <TokenDialogComponent {...props} />
+ </Provider>);
expect(wrapper.html()).toContain(props.tokenExpiration.toLocaleString());
});
expect(wrapper.html()).not.toContain('GET NEW TOKEN');
props.canCreateNewTokens = true;
- wrapper = mount(<TokenDialogComponent {...props} />);
+ wrapper = mount(
+ <Provider store={store}>
+ <TokenDialogComponent {...props} />
+ </Provider>);
expect(wrapper.html()).toContain('GET NEW TOKEN');
});
});
describe('copy to clipboard button', () => {
beforeEach(() => {
- wrapper = mount(<TokenDialogComponent {...props} />);
+ wrapper = mount(
+ <Provider store={store}>
+ <TokenDialogComponent {...props} />
+ </Provider>);
});
it('should copy API TOKEN to the clipboard', () => {
--- /dev/null
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import React from 'react';
+import {
+ StyleRulesCallback,
+ WithStyles,
+ withStyles,
+ Card,
+ CardHeader,
+ IconButton,
+ CardContent,
+ Tooltip,
+ Typography,
+ Grid,
+} from '@material-ui/core';
+import { ArvadosTheme } from 'common/custom-theme';
+import { CloseIcon, CommandIcon, CopyIcon } from 'components/icon/icon';
+import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view';
+import { DefaultCodeSnippet } from 'components/default-code-snippet/default-code-snippet';
+import { Process } from 'store/processes/process';
+import shellescape from 'shell-escape';
+import CopyToClipboard from 'react-copy-to-clipboard';
+
+type CssRules = 'card' | 'content' | 'title' | 'header' | 'avatar' | 'iconHeader';
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+ card: {
+ height: '100%'
+ },
+ header: {
+ paddingTop: theme.spacing.unit,
+ paddingBottom: theme.spacing.unit,
+ },
+ iconHeader: {
+ fontSize: '1.875rem',
+ color: theme.customs.colors.green700,
+ },
+ avatar: {
+ alignSelf: 'flex-start',
+ paddingTop: theme.spacing.unit * 0.5
+ },
+ content: {
+ padding: theme.spacing.unit * 1.0,
+ paddingTop: theme.spacing.unit * 0.5,
+ '&:last-child': {
+ paddingBottom: theme.spacing.unit * 1,
+ }
+ },
+ title: {
+ overflow: 'hidden',
+ paddingTop: theme.spacing.unit * 0.5
+ },
+});
+
+interface ProcessCmdCardDataProps {
+ process: Process;
+ onCopy: (text: string) => void;
+}
+
+type ProcessCmdCardProps = ProcessCmdCardDataProps & WithStyles<CssRules> & MPVPanelProps;
+
+export const ProcessCmdCard = withStyles(styles)(
+ ({
+ process,
+ onCopy,
+ classes,
+ doHidePanel,
+ }: ProcessCmdCardProps) => {
+ const command = process.containerRequest.command.map((v) =>
+ shellescape([v]) // Escape each arg separately
+ );
+
+ let formattedCommand = [...command];
+ formattedCommand.forEach((item, i, arr) => {
+ // Indent lines after the first
+ const indent = i > 0 ? ' ' : '';
+ // Escape newlines on every non-last arg when there are multiple lines
+ const lineBreak = arr.length > 1 && i < arr.length - 1 ? ' \\' : '';
+ arr[i] = `${indent}${item}${lineBreak}`;
+ });
+
+ return (
+ <Card className={classes.card}>
+ <CardHeader
+ className={classes.header}
+ classes={{
+ content: classes.title,
+ avatar: classes.avatar,
+ }}
+ avatar={<CommandIcon className={classes.iconHeader} />}
+ title={
+ <Typography noWrap variant="h6" color="inherit">
+ Command
+ </Typography>
+ }
+ action={
+ <Grid container direction="row" alignItems="center">
+ <Grid item>
+ <Tooltip title="Copy to clipboard" disableFocusListener>
+ <IconButton>
+ <CopyToClipboard
+ text={command.join(" ")}
+ onCopy={() => onCopy("Command copied to clipboard")}
+ >
+ <CopyIcon />
+ </CopyToClipboard>
+ </IconButton>
+ </Tooltip>
+ </Grid>
+ <Grid item>
+ {doHidePanel && (
+ <Tooltip
+ title={`Close Command Panel`}
+ disableFocusListener
+ >
+ <IconButton onClick={doHidePanel}>
+ <CloseIcon />
+ </IconButton>
+ </Tooltip>
+ )}
+ </Grid>
+ </Grid>
+ }
+ />
+ <CardContent className={classes.content}>
+ <DefaultCodeSnippet lines={formattedCommand} linked />
+ </CardContent>
+ </Card>
+ );
+ }
+);
import { getProcessPanelLogs, ProcessLogsPanel } from 'store/process-logs-panel/process-logs-panel';
import { ProcessLogsCard } from './process-log-card';
import { FilterOption } from 'views/process-panel/process-log-form';
+import { ProcessCmdCard } from './process-cmd-card';
type CssRules = 'root';
cancelProcess: (uuid: string) => void;
onLogFilterChange: (filter: FilterOption) => void;
navigateToLog: (uuid: string) => void;
- onLogCopyToClipboard: (uuid: string) => void;
+ onCopyToClipboard: (uuid: string) => void;
}
export type ProcessPanelRootProps = ProcessPanelRootDataProps & ProcessPanelRootActionProps & WithStyles<CssRules>;
const panelsData: MPVPanelState[] = [
{name: "Details"},
+ {name: "Command"},
{name: "Logs", visible: true},
{name: "Subprocesses"},
];
cancelProcess={props.cancelProcess}
/>
</MPVPanelContent>
+ <MPVPanelContent forwardProps xs="auto" data-cy="process-cmd">
+ <ProcessCmdCard
+ onCopy={props.onCopyToClipboard}
+ process={process} />
+ </MPVPanelContent>
<MPVPanelContent forwardProps xs maxHeight='50%' data-cy="process-logs">
<ProcessLogsCard
- onCopy={props.onLogCopyToClipboard}
+ onCopy={props.onCopyToClipboard}
process={process}
lines={getProcessPanelLogs(processLogsPanel)}
selectedFilter={{
};
const mapDispatchToProps = (dispatch: Dispatch): ProcessPanelRootActionProps => ({
- onLogCopyToClipboard: (message: string) => {
+ onCopyToClipboard: (message: string) => {
dispatch<any>(snackbarActions.OPEN_SNACKBAR({
message,
hideDuration: 2000,
import { MoveCollectionDialog } from 'views-components/dialog-forms/move-collection-dialog';
import { FilesUploadCollectionDialog } from 'views-components/dialog-forms/files-upload-collection-dialog';
import { PartialCopyCollectionDialog } from 'views-components/dialog-forms/partial-copy-collection-dialog';
-import { ProcessCommandDialog } from 'views-components/process-command-dialog/process-command-dialog';
import { RemoveProcessDialog } from 'views-components/process-remove-dialog/process-remove-dialog';
import { MainContentBar } from 'views-components/main-content-bar/main-content-bar';
import { Grid } from '@material-ui/core';
<PublicKeyDialog />
<PartialCopyCollectionDialog />
<PartialCopyToCollectionDialog />
- <ProcessCommandDialog />
<ProcessInputDialog />
<RestoreCollectionVersionDialog />
<RemoveApiClientAuthorizationDialog />
languageName: node
linkType: hard
-"@types/shell-quote@npm:1.6.0":
- version: 1.6.0
- resolution: "@types/shell-quote@npm:1.6.0"
- checksum: 5d9f4e35c8df32d9994f8ae2f1a1fe8a6b7ee96794f803e0904ceae7ad7255a214954e85cd75bd847fe77458d3746430522e87237438f223b7d72a23c4928c0e
+"@types/shell-escape@npm:^0.2.0":
+ version: 0.2.0
+ resolution: "@types/shell-escape@npm:0.2.0"
+ checksum: 020696ed313eeb02deb2abcc581e8b570be6f9ee662892339965b524bb4fbdc9a97b6520d914117740ec11147b0b1aa52358b8e03fa214c2da99743adb196853
languageName: node
linkType: hard
languageName: node
linkType: hard
-"array-filter@npm:~0.0.0":
- version: 0.0.1
- resolution: "array-filter@npm:0.0.1"
- checksum: 0e9afdf5e248c45821c6fe1232071a13a3811e1902c2c2a39d12e4495e8b0b25739fd95bffbbf9884b9693629621f6077b4ae16207b8f23d17710fc2465cebbb
- languageName: node
- linkType: hard
-
"array-find-index@npm:^1.0.1":
version: 1.0.2
resolution: "array-find-index@npm:1.0.2"
languageName: node
linkType: hard
-"array-map@npm:~0.0.0":
- version: 0.0.0
- resolution: "array-map@npm:0.0.0"
- checksum: 30d73fdc99956c8bd70daea40db5a7d78c5c2c75a03c64fc77904885e79adf7d5a0595076534f4e58962d89435f0687182ac929e65634e3d19931698cbac8149
- languageName: node
- linkType: hard
-
-"array-reduce@npm:~0.0.0":
- version: 0.0.0
- resolution: "array-reduce@npm:0.0.0"
- checksum: d6226325271f477e3dd65b4d40db8597735b8d08bebcca4972e52d3c173d6c697533664fa8865789ea2d076bdaf1989bab5bdfbb61598be92074a67f13057c3a
- languageName: node
- linkType: hard
-
"array-union@npm:^1.0.1":
version: 1.0.2
resolution: "array-union@npm:1.0.2"
"@types/redux-devtools": 3.0.44
"@types/redux-form": 7.4.12
"@types/redux-mock-store": 1.0.2
- "@types/shell-quote": 1.6.0
+ "@types/shell-escape": ^0.2.0
"@types/sinon": 7.5
"@types/uuid": 3.4.4
axios: ^0.21.1
redux-thunk: 2.3.0
reselect: 4.0.0
set-value: 2.0.1
- shell-quote: 1.6.1
+ shell-escape: ^0.2.0
sinon: 7.3
ts-mock-imports: 1.3.7
tslint: 5.20.0
languageName: node
linkType: hard
-"shell-quote@npm:1.6.1":
- version: 1.6.1
- resolution: "shell-quote@npm:1.6.1"
- dependencies:
- array-filter: ~0.0.0
- array-map: ~0.0.0
- array-reduce: ~0.0.0
- jsonify: ~0.0.0
- checksum: 982a4fdf2d474f0dc40885de4222f100ba457d7c75d46b532bf23b01774b8617bc62522c6825cb1fa7dd4c54c18e9dcbae7df2ca8983101841b6f2e6a7cacd2f
+"shell-escape@npm:^0.2.0":
+ version: 0.2.0
+ resolution: "shell-escape@npm:0.2.0"
+ checksum: 0d87f1ae22ad22a74e148348ceaf64721e3024f83c90afcfb527318ce10ece654dd62e103dd89a242f2f4e4ce3cecdef63e3d148c40e5fabca8ba6c508f97d9f
languageName: node
linkType: hard
projects / arvados-workbench2.git / commitdiff