const rocheBlue = '#06C';
export const themeOptions: ArvadosThemeOptions = {
+ typography: {
+ useNextVariants: true,
+ },
customs: {
colors: {
green700: green["700"],
dark: teal.A400,
contrastText: '#fff'
}
- }
+ },
};
export const CustomTheme = createMuiTheme(themeOptions);
\ No newline at end of file
onOptionsMenuOpen: (event: React.MouseEvent<HTMLElement>) => void;
onSelectionToggle: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => void;
onCollapseToggle: (id: string, status: TreeItemStatus) => void;
+ onFileClick: (id: string) => void;
}
type CssRules = 'root' | 'cardSubheader' | 'nameHeader' | 'fileSizeHeader' | 'uploadIcon' | 'button';
classes={{ action: classes.button }}
action={
<Button onClick={onUploadDataClick}
- variant='raised'
+ variant='contained'
color='primary'
size='small'>
<DownloadIcon className={classes.uploadIcon} />
</DialogContent>
<DialogActions style={{ margin: '0px 24px 24px' }}>
<Button
- variant='flat'
+ variant='text'
color='primary'
onClick={props.closeDialog}>
{props.data.cancelButtonLabel || 'Cancel'}
<CardActions>
<Button
color="primary"
- variant="raised"
+ variant='contained'
size="small"
onClick={this.submit}>
Ok
<CardActions>
<Button
color="primary"
- variant="raised"
+ variant='contained'
size="small"
onClick={this.submit}>
Ok
}
},
typography: {
- fontFamily: 'monospace'
+ fontFamily: 'monospace',
+ useNextVariants: true,
}
});
<Typography className={classnames([classes.root, classRoot])} component="div">
<Icon className={classnames([classes.icon, classIcon])} />
{messages.map((msg: string, index: number) => {
- return <Typography key={index} variant="body1"
+ return <Typography key={index}
className={classnames([classes.message, classMessage])}>{msg}</Typography>;
})}
</Typography>
return <>
<div className={classes.root}>
<ListItemTextIcon
- icon={getIcon(item)}
+ icon={getIcon(item.data.type)}
name={item.data.name} />
<div className={classes.spacer} />
<Typography
</IconButton>
</Tooltip>
</div >
- <FileThumbnail file={item.data} />
</>;
}
}
});
-const getIcon = (item: TreeItem<FileTreeData>) => {
- switch (item.data.type) {
+export const getIcon = (type: string) => {
+ switch (type) {
case 'directory':
return ProjectIcon;
case 'file':
onMenuOpen: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => void;
onSelectionToggle: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => void;
onCollapseToggle: (id: string, status: TreeItemStatus) => void;
+ onFileClick: (id: string) => void;
}
export class FileTree extends React.Component<FileTreeProps> {
this.props.onCollapseToggle(id, status);
}
- handleToggleActive = () => { return; };
+ handleToggleActive = (_: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => {
+ this.props.onFileClick(item.id);
+ }
handleSelectionChange = (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => {
event.stopPropagation();
</DialogContent>
<DialogActions>
<Button
- variant='flat'
+ variant='text'
color='primary'
disabled={props.uploading}
onClick={props.closeDialog}>
{files.length === 0 &&
<Grid container justify="center" alignItems="center" className={classes.container}>
<Grid item component={"span"}>
- <Typography variant={"subheading"}>
+ <Typography variant='subtitle1'>
<CloudUploadIcon className={classes.uploadIcon} /> Drag and drop data or click to browse
</Typography>
</Grid>
<Icon style={{ fontSize: `${iconSize}rem` }} />
</ListItemIcon>
<ListItemText primary={
- <Typography variant='body1' className={classnames(classes.listItemText, {
+ <Typography className={classnames(classes.listItemText, {
[classes.active]: isActive
})}>
{name}
</DialogContent>
<DialogActions>
<Button
- variant='flat'
+ variant='text'
color='primary'
disabled={props.submitting}
onClick={props.closeDialog}>
import { CollectionResource } from "./collection";
import { ProcessResource } from "./process";
import { EmptyResource } from "./empty";
+import { CollectionFile, CollectionDirectory } from '~/models/collection-file';
-export type DetailsResource = ProjectResource | CollectionResource | ProcessResource | EmptyResource;
+export type DetailsResource = ProjectResource | CollectionResource | ProcessResource | EmptyResource | CollectionFile | CollectionDirectory;
export const detailsPanelActions = unionize({
TOGGLE_DETAILS_PANEL: ofType<{}>(),
+ OPEN_DETAILS_PANEL: ofType<string>(),
LOAD_DETAILS_PANEL: ofType<string>()
});
export const loadDetailsPanel = (uuid: string) => detailsPanelActions.LOAD_DETAILS_PANEL(uuid);
+export const openDetailsPanel = (uuid: string) => detailsPanelActions.OPEN_DETAILS_PANEL(uuid);
+
export const openProjectPropertiesDialog = () =>
(dispatch: Dispatch) => {
dispatch<any>(dialogActions.OPEN_DIALOG({ id: PROJECT_PROPERTIES_DIALOG_NAME, data: { } }));
detailsPanelActions.match(action, {
default: () => state,
LOAD_DETAILS_PANEL: resourceUuid => ({ ...state, resourceUuid }),
- TOGGLE_DETAILS_PANEL: () => ({ ...state, isOpened: !state.isOpened })
+ OPEN_DETAILS_PANEL: resourceUuid => ({ resourceUuid, isOpened: true }),
+ TOGGLE_DETAILS_PANEL: () => ({ ...state, isOpened: !state.isOpened }),
});
{value === 4 && dialogContent(curlHeader, curlExample, classes)}
</DialogContent>
<DialogActions>
- <Button variant='flat' color='primary' onClick={closeDialog}>
+ <Button variant='text' color='primary' onClick={closeDialog}>
Close
</Button>
</DialogActions>
</DialogContent>
<DialogActions>
<Button
- variant='flat'
+ variant='text'
color='primary'
onClick={closeDialog}>
Close
</DialogContent>
<DialogActions>
<Button
- variant='flat'
+ variant='text'
color='primary'
onClick={props.closeDialog}>
Close
import { openContextMenu, openCollectionFilesContextMenu } from '~/store/context-menu/context-menu-actions';
import { openUploadCollectionFilesDialog } from '~/store/collections/collection-upload-actions';
import { ResourceKind } from "~/models/resource";
+import { openDetailsPanel } from '~/store/details-panel/details-panel-action';
const memoizedMapStateToProps = () => {
let prevState: CollectionPanelFilesState;
};
};
-const mapDispatchToProps = (dispatch: Dispatch): Pick<CollectionPanelFilesProps, 'onUploadDataClick' | 'onCollapseToggle' | 'onSelectionToggle' | 'onItemMenuOpen' | 'onOptionsMenuOpen'> => ({
+const mapDispatchToProps = (dispatch: Dispatch): Pick<CollectionPanelFilesProps, 'onFileClick' | 'onUploadDataClick' | 'onCollapseToggle' | 'onSelectionToggle' | 'onItemMenuOpen' | 'onOptionsMenuOpen'> => ({
onUploadDataClick: () => {
dispatch<any>(openUploadCollectionFilesDialog());
},
onOptionsMenuOpen: (event) => {
dispatch<any>(openCollectionFilesContextMenu(event));
},
+ onFileClick: (id) => {
+ dispatch(openDetailsPanel(id));
+ },
});
</DialogContent>
<DialogActions>
<Button
- variant='flat'
+ variant='text'
color='primary'
onClick={closeDialog}>
Close
maxWidth='md'>
<DialogTitle>Current Token</DialogTitle>
<DialogContent>
- <Typography variant='body1' paragraph={true}>
+ <Typography paragraph={true}>
The Arvados API token is a secret key that enables the Arvados SDKs to access Arvados with the proper permissions.
<Typography component='p'>
For more information see
</a>
</Typography>
</Typography>
- <Typography variant='body1' paragraph={true}>
+ <Typography paragraph={true}>
Paste the following lines at a shell prompt to set up the necessary environment for Arvados SDKs to authenticate to your klingenc account.
</Typography>
<DefaultCodeSnippet lines={[getSnippet(data)]} />
- <Typography variant='body1'>
+ <Typography >
Arvados
<a href='http://doc.arvados.org/user/reference/api-tokens.html' target='blank' className={classes.link}>virtual machines</a>
do this for you automatically. This setup is needed only when you use the API remotely (e.g., from your own workstation).
import { ResourceData } from "~/store/resources-data/resources-data-reducer";
import { getResourceData } from "~/store/resources-data/resources-data";
import { toggleDetailsPanel, SLIDE_TIMEOUT } from '~/store/details-panel/details-panel-action';
+import { FileDetails } from '~/views-components/details-panel/file-details';
+import { getNode } from '~/models/tree';
type CssRules = 'root' | 'container' | 'opened' | 'headerContainer' | 'headerIcon' | 'tabContainer';
},
});
-const getItem = (resource: DetailsResource, resourceData?: ResourceData): DetailsData => {
- const res = resource || { kind: undefined, name: 'Projects' };
- switch (res.kind) {
- case ResourceKind.PROJECT:
- return new ProjectDetails(res);
- case ResourceKind.COLLECTION:
- return new CollectionDetails(res, resourceData);
- case ResourceKind.PROCESS:
- return new ProcessDetails(res);
- default:
- return new EmptyDetails(res as EmptyResource);
+const EMPTY_RESOURCE: EmptyResource = { kind: undefined, name: 'Projects' };
+
+const getItem = (res: DetailsResource, resourceData?: ResourceData): DetailsData => {
+ if ('kind' in res) {
+ switch (res.kind) {
+ case ResourceKind.PROJECT:
+ return new ProjectDetails(res);
+ case ResourceKind.COLLECTION:
+ return new CollectionDetails(res, resourceData);
+ case ResourceKind.PROCESS:
+ return new ProcessDetails(res);
+ default:
+ return new EmptyDetails(res);
+ }
+ } else {
+ return new FileDetails(res);
}
};
-const mapStateToProps = ({ detailsPanel, resources, resourcesData }: RootState) => {
- const resource = getResource(detailsPanel.resourceUuid)(resources) as DetailsResource;
+const mapStateToProps = ({ detailsPanel, resources, resourcesData, collectionPanelFiles }: RootState) => {
+ const resource = getResource(detailsPanel.resourceUuid)(resources) as DetailsResource | undefined;
+ const file = getNode(detailsPanel.resourceUuid)(collectionPanelFiles);
const resourceData = getResourceData(detailsPanel.resourceUuid)(resourcesData);
return {
isOpened: detailsPanel.isOpened,
- item: getItem(resource, resourceData)
+ item: getItem(resource || (file && file.value) || EMPTY_RESOURCE, resourceData)
};
};
</Grid>
<Grid item xs={8}>
<Tooltip title={item.getTitle()}>
- <Typography variant="title" noWrap>
+ <Typography variant='h6' noWrap>
{item.getTitle()}
</Typography>
</Tooltip>
--- /dev/null
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { DetailsData } from "./details-data";
+import { CollectionFile, CollectionDirectory, CollectionFileType } from '~/models/collection-file';
+import { getIcon } from '~/components/file-tree/file-tree-item';
+import { DetailsAttribute } from '~/components/details-attribute/details-attribute';
+import { formatFileSize } from '~/common/formatters';
+import { FileThumbnail } from '~/components/file-tree/file-thumbnail';
+import isImage from 'is-image';
+
+export class FileDetails extends DetailsData<CollectionFile | CollectionDirectory> {
+
+ getIcon(className?: string) {
+ const Icon = getIcon(this.item.type);
+ return <Icon className={className} />;
+ }
+
+ getDetails() {
+ const { item } = this;
+ return item.type === CollectionFileType.FILE
+ ? <>
+ <DetailsAttribute label='Size' value={formatFileSize(item.size)} />
+ {
+ isImage(item.url) && <>
+ <DetailsAttribute label='Preview' />
+ <FileThumbnail file={item} />
+ </>
+ }
+ </>
+ : <div />;
+ }
+}
maxWidth="sm">
<DialogTitle>Attributes</DialogTitle>
<DialogContent>
- <Typography variant="body2" className={props.classes.spacing}>
+ <Typography variant='body1' className={props.classes.spacing}>
{props.data && attributes(props.data, props.classes)}
</Typography>
</DialogContent>
<DialogActions>
<Button
- variant='flat'
+ variant='text'
color='primary'
onClick={props.closeDialog}>
Close
maxWidth="sm">
<DialogTitle>Attributes</DialogTitle>
<DialogContent>
- <Typography variant="body2" className={props.classes.spacing}>
+ <Typography variant='body1' className={props.classes.spacing}>
{props.data && attributes(props.data, props.classes)}
</Typography>
</DialogContent>
<DialogActions>
<Button
- variant='flat'
+ variant='text'
color='primary'
onClick={props.closeDialog}>
Close
</DialogContent>
<DialogActions>
<Button
- variant='flat'
+ variant='text'
color='primary'
onClick={closeDialog}>
Close
</DialogContent>
<DialogActions>
<Button
- variant='flat'
+ variant='text'
color='primary'
onClick={closeDialog}>
Close
<MenuItem key={link.title}>
<a href={link.link} target="_blank" className={classes.link}>
<ImportContactsIcon className={classes.icon} />
- <Typography variant="body1" className={classes.linkTitle}>{link.title}</Typography>
+ <Typography className={classes.linkTitle}>{link.title}</Typography>
</a>
</MenuItem>
)
<Toolbar className={props.classes.toolbar}>
<Grid container justify="space-between">
<Grid container item xs={3} direction="column" justify="center">
- <Typography variant="title" color="inherit" noWrap>
+ <Typography variant='h6' color="inherit" noWrap>
<Link to={Routes.ROOT} className={props.classes.link}>
arvados workbench
</Link>
lines={[props.data.command]} />
<DialogActions>
<Button
- variant='flat'
+ variant='text'
color='primary'
onClick={props.closeDialog}>
Close
</DialogContent>
<DialogActions>
<Button
- variant='flat'
+ variant='text'
color='primary'
onClick={props.closeDialog}>
Close
</DialogContent>
<DialogActions>
<Button
- variant='flat'
+ variant='text'
color='primary'
onClick={closeDialog}>
Close
</DialogContent>
<DialogActions>
<Button
- variant='flat'
+ variant='text'
color='primary'
onClick={props.closeDialog}>
Cancel
</Button>
- <Button variant='raised' color='primary'>
+ <Button variant='contained' color='primary'>
Remove
</Button>
</DialogActions>
<DefaultCodeSnippet
className={props.classes.codeSnippet}
lines={[snippetText(props.data.uuidPrefix)]} />
- <Typography variant="body2" className={props.classes.spacing}>
+ <Typography variant='body1' className={props.classes.spacing}>
See also:
<div><a href="https://doc.arvados.org/user/getting_started/ssh-access-unix.html" className={props.classes.link} target="_blank">SSH access</a></div>
<div><a href="https://doc.arvados.org/user/tutorials/tutorial-firstscript.html" className={props.classes.link} target="_blank">Writing a Crunch Script</a></div>
</DialogContent>
<DialogActions>
<Button
- variant='flat'
+ variant='text'
color='primary'
onClick={props.closeDialog}>
Close
maxWidth="sm">
<DialogTitle>Attributes</DialogTitle>
<DialogContent>
- <Typography variant="body2" className={props.classes.spacing}>
+ <Typography variant='body1' className={props.classes.spacing}>
{props.data.repositoryData && attributes(props.data.repositoryData, props.classes)}
</Typography>
</DialogContent>
<DialogActions>
<Button
- variant='flat'
+ variant='text'
color='primary'
onClick={props.closeDialog}>
Close
</DialogContent>
<DialogActions>
<Button
- variant='flat'
+ variant='text'
color='primary'
onClick={props.closeDialog}>
Close
{props.advancedViewOpen &&
<>
<Grid item>
- <Typography variant='subheading'>
+ <Typography variant='subtitle1'>
Who can access
</Typography>
<SharingPublicAccessForm />
<Divider />
<Grid container alignItems='center' spacing={8} wrap='nowrap' className={classes.root}>
<Grid item xs={8}>
- <Typography noWrap variant='subheading'>{fields.get(index).email}</Typography>
+ <Typography noWrap variant='subtitle1'>{fields.get(index).email}</Typography>
</Grid>
<Grid item xs={4} container wrap='nowrap'>
<Field
<Divider />
<Grid container alignItems='center' spacing={8} className={classes.root}>
<Grid item xs={8}>
- <Typography variant='subheading'>
+ <Typography variant='subtitle1'>
{renderVisibilityInfo(visibility)}
</Typography>
</Grid>
</DialogContent>
<DialogActions>
<Button
- variant='flat'
+ variant='text'
color='primary'
onClick={closeDialog}>
Close
</DialogContent>
<DialogActions>
<Button
- variant='flat'
+ variant='text'
color='primary'
onClick={closeDialog}>
Close
maxWidth="sm">
<DialogTitle>Attributes</DialogTitle>
<DialogContent>
- <Typography variant="body2" className={props.classes.spacing}>
+ <Typography variant='body1' className={props.classes.spacing}>
{props.data && attributes(props.data, props.classes)}
</Typography>
</DialogContent>
<DialogActions>
<Button
- variant='flat'
+ variant='text'
color='primary'
onClick={props.closeDialog}>
Close
<span>
<DialogTitle>{`Manage - ${props.data.user.firstName} ${props.data.user.lastName}`}</DialogTitle>
<DialogContent>
- <Typography variant="body2" className={props.classes.spacing}>
+ <Typography variant='body1' className={props.classes.spacing}>
As an admin, you can log in as this user. When you’ve finished, you will need to log out and log in again with your own account.
</Typography>
<Button variant="contained" color="primary" onClick={() => props.loginAs(props.data.client.uuid)}>
{`LOG IN AS ${props.data.user.firstName} ${props.data.user.lastName}`}
</Button>
- <Typography variant="body2" className={props.classes.spacing}>
+ <Typography variant='body1' className={props.classes.spacing}>
As an admin, you can setup a shell account for this user. The login name is automatically generated from the user's e-mail address.
</Typography>
<Button variant="contained" color="primary" onClick={() => props.openSetupShellAccount(props.data.uuid)}>
<DialogActions>
<Button
- variant='flat'
+ variant='text'
color='primary'
onClick={props.closeDialog}>
Close
maxWidth="sm">
<DialogTitle>Attributes</DialogTitle>
<DialogContent>
- <Typography variant="body2" className={props.classes.spacing}>
+ <Typography variant='body1' className={props.classes.spacing}>
{props.data.virtualMachineData && attributes(props.data.virtualMachineData, props.classes)}
</Typography>
</DialogContent>
<DialogActions>
<Button
- variant='flat'
+ variant='text'
color='primary'
onClick={props.closeDialog}>
Close
import { formatFileSize } from "~/common/formatters";
import { getResourceData } from "~/store/resources-data/resources-data";
import { ResourceData } from "~/store/resources-data/resources-data-reducer";
+import { openDetailsPanel } from '~/store/details-panel/details-panel-action';
type CssRules = 'card' | 'iconHeader' | 'tag' | 'copyIcon' | 'label' | 'value' | 'link';
return { item, data };
})(
class extends React.Component<CollectionPanelProps> {
+
render() {
const { classes, item, data, dispatch } = this.props;
return item
? <>
<Card className={classes.card}>
<CardHeader
- avatar={<CollectionIcon className={classes.iconHeader} />}
+ avatar={
+ <IconButton onClick={this.openCollectionDetails}>
+ <CollectionIcon className={classes.iconHeader} />
+ </IconButton>
+ }
action={
<Tooltip title="More options" disableFocusListener>
<IconButton
</Tooltip>
}
title={item && item.name}
- subheader={item && item.description} />
+ titleTypographyProps={this.titleProps}
+ subheader={item && item.description}
+ subheaderTypographyProps={this.titleProps} />
<CardContent>
<Grid container direction="column">
<Grid item xs={6}>
label='Content size' value={data && formatFileSize(data.fileSize)} />
<DetailsAttribute classLabel={classes.label} classValue={classes.value}
label='Owner' value={item && item.ownerUuid} />
- <span onClick={() => dispatch<any>(navigateToProcess(item.properties.container_request || item.properties.containerRequest))}>
+ <span onClick={() => dispatch<any>(navigateToProcess(item.properties.container_request || item.properties.containerRequest))}>
<DetailsAttribute classLabel={classes.link} label='Link to process' />
</span>
</Grid>
hideDuration: 2000
}));
}
+
+ openCollectionDetails = () => {
+ const { item } = this.props;
+ if (item) {
+ this.props.dispatch(openDetailsPanel(item.uuid));
+ }
+ }
+
+ titleProps = {
+ onClick: this.openCollectionDetails
+ };
+
}
)
);
({ classes, dispatch }: LoginPanelProps) =>
<Grid container direction="column" item xs alignItems="center" justify="center" className={classes.root}>
<Grid item className={classes.container}>
- <Typography variant="title" align="center" className={classes.title}>
+ <Typography variant='h6' align="center" className={classes.title}>
Welcome to the Arvados Workbench
</Typography>
- <Typography variant="body1" className={classes.content}>
+ <Typography className={classes.content}>
The "Log in" button below will show you a Google sign-in page.
After you assure Google that you want to log in here with your Google account, you will be redirected back here to Arvados Workbench.
</Typography>
- <Typography variant="body1" className={classes.content}>
+ <Typography className={classes.content}>
If you have never used Arvados Workbench before, logging in for the first time will automatically create a new account.
</Typography>
- <Typography variant="body2" className={classNames(classes.content, classes.content__bolder)}>
+ <Typography variant='body1' className={classNames(classes.content, classes.content__bolder)}>
IMPORTANT: Please keep in mind to store exploratory data only but not any information used for clinical decision making.
</Typography>
- <Typography variant="body1" className={classes.content}>
+ <Typography className={classes.content}>
Arvados Workbench uses your name and email address only for identification, and does not retrieve any other personal information from Google.
</Typography>
<Typography component="div" align="right">
({ classes, isValid, handleSubmit, reset, isPristine, invalid, submitting }: MyAccountPanelRootProps) => {
return <Card className={classes.root}>
<CardContent>
- <Typography variant="title" className={classes.title}>User profile</Typography>
+ <Typography variant='h6' className={classes.title}>User profile</Typography>
<form onSubmit={handleSubmit}>
<Grid container direction="row" spacing={24}>
<Grid item xs={6}>
}
},
typography: {
- fontFamily: 'monospace'
+ fontFamily: 'monospace',
+ useNextVariants: true,
}
});
</Tooltip>}
title={
<Tooltip title={process.containerRequest.name} placement="bottom-start">
- <Typography noWrap variant="title" className={classes.title}>
+ <Typography noWrap variant='h6' className={classes.title}>
{process.containerRequest.name}
</Typography>
</Tooltip>}
}
title={
<Tooltip title={process.containerRequest.name} placement="bottom-start">
- <Typography noWrap variant="title" color='inherit'>
+ <Typography noWrap variant='h6' color='inherit'>
{process.containerRequest.name}
</Typography>
</Tooltip>
}
subheader={
<Tooltip title={getDescription(process)} placement="bottom-start">
- <Typography noWrap variant="body2" color='inherit'>
+ <Typography noWrap variant='body1' color='inherit'>
{getDescription(process)}
</Typography>
</Tooltip>}/>
classes={{ content: classes.title, action: classes.action }}
action={
<div className={classes.rightSideHeader}>
- <Typography noWrap variant="body2" className={classes.status}>
+ <Typography noWrap variant='body1' className={classes.status}>
{getProcessStatus(subprocess)}
</Typography>
<Tooltip title="More options" disableFocusListener>
className={classes.options}
aria-label="More options"
onClick={onContextMenu}>
- <MoreOptionsIcon className={classes.moreOptions}/>
+ <MoreOptionsIcon className={classes.moreOptions} />
</IconButton>
</Tooltip>
</div>
}
title={
<Tooltip title={subprocess.containerRequest.name}>
- <Typography noWrap variant="body2" className={classes.titleHeader}>
+ <Typography noWrap variant='body1' className={classes.titleHeader}>
{subprocess.containerRequest.name}
</Typography>
</Tooltip>
} />
<CardContent className={classes.content}>
<DetailsAttribute classLabel={classes.label} classValue={classes.value}
- label="Runtime" value={formatTime(getProcessRuntime(subprocess))} />
+ label="Runtime" value={subprocess.container && subprocess.container.startedAt && subprocess.container.finishedAt
+ ? formatTime(getProcessRuntime(subprocess)) :
+ '(none)'} />
</CardContent>
</Card>;
});
<CardHeader
className={classes.title}
title={
- <Typography noWrap variant="title" color='inherit'>
+ <Typography noWrap variant='h6' color='inherit'>
Subprocess and filters
</Typography>} />
<CardContent>
<CardContent>
<Grid container direction="row">
<Grid item xs={8}>
- <Typography variant="body2">
+ <Typography variant='body1'>
When you are using an Arvados virtual machine, you should clone the https:// URLs. This will authenticate automatically using your API token. <br />
In order to clone git repositories using SSH, <Link to={Routes.SSH_KEYS_USER} className={classes.link}>add an SSH key to your account</Link> and clone the git@ URLs.
</Typography>
</div>
<Divider />
<div className={classes.chips}>
- <Typography variant='subheading'>Selected collections ({this.state.directories.length}):</Typography>
+ <Typography variant='subtitle1'>Selected collections ({this.state.directories.length}):</Typography>
<Chips
orderable
deletable
</div>
<Divider />
<div className={classes.chips}>
- <Typography variant='subheading'>Selected files ({this.state.files.length}):</Typography>
+ <Typography variant='subtitle1'>Selected files ({this.state.files.length}):</Typography>
<Chips
orderable
deletable
<CardContent>
<Grid container direction="row">
<Grid item xs={12}>
- <Typography variant='body1' paragraph={true} >
+ <Typography paragraph={true} >
You can log in to multiple Arvados sites here, then use the multi-site search page to search collections and projects on all sites at once.
</Typography>
</Grid>
<form onSubmit={handleSubmit}>
<Grid container direction="row">
<Grid item xs={12}>
- <Typography variant='body1' paragraph={true} className={classes.remoteSiteInfo}>
+ <Typography paragraph={true} className={classes.remoteSiteInfo}>
To add a remote Arvados site, paste the remote site's host here (see "ARVADOS_API_HOST" on the "current token" page).
</Typography>
</Grid>
<CardContent>
<Grid container direction="row">
<Grid item xs={8}>
- { !hasKeys && <Typography variant='body1' paragraph={true} >
+ { !hasKeys && <Typography paragraph={true} >
You have not yet set up an SSH public key for use with Arvados.
<a href='https://doc.arvados.org/user/getting_started/ssh-access-unix.html'
target='blank' className={classes.link}>
Learn more.
</a>
</Typography>}
- { !hasKeys && <Typography variant='body1' paragraph={true}>
+ { !hasKeys && <Typography paragraph={true}>
When you have an SSH key you would like to use, add it using button below.
</Typography> }
</Grid>
<Card>
<CardContent className={props.classes.cardWithoutMachines}>
<Grid item xs={6}>
- <Typography variant="body2">
+ <Typography variant='body1'>
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.
</Typography>
</Grid>
SEND REQUEST FOR SHELL ACCESS
</Button>
{props.requestedDate &&
- <Typography variant="body1">
+ <Typography >
A request for shell access was sent on {props.requestedDate}
</Typography>}
</span>;
<Grid item xs={12}>
<Card>
<CardContent>
- <Typography variant="body2">
+ <Typography variant='body1'>
In order to access virtual machines using SSH, <Link to={Routes.SSH_KEYS_USER} 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):
</Typography>
<DefaultCodeSnippet