X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/38d27e9783f7f760cee84cc225e86144069848c4..7c6d47d766b7b37463281387d8badbfe18522d09:/src/views/process-panel/process-information-card.tsx diff --git a/src/views/process-panel/process-information-card.tsx b/src/views/process-panel/process-information-card.tsx deleted file mode 100644 index e70a0478..00000000 --- a/src/views/process-panel/process-information-card.tsx +++ /dev/null @@ -1,159 +0,0 @@ -// 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, Grid, Chip, Typography, Tooltip -} from '@material-ui/core'; -import { ArvadosTheme } from 'common/custom-theme'; -import { MoreOptionsIcon, ProcessIcon } from 'components/icon/icon'; -import { DetailsAttribute } from 'components/details-attribute/details-attribute'; -import { Process } from 'store/processes/process'; -import { getProcessStatus, getProcessStatusColor } from 'store/processes/process'; -import { formatDate } from 'common/formatters'; -import classNames from 'classnames'; -import { ContainerState } from 'models/container'; - -type CssRules = 'card' | 'iconHeader' | 'label' | 'value' | 'chip' | 'link' | 'content' | 'title' | 'avatar' | 'cancelButton'; - -const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ - card: { - height: '100%' - }, - iconHeader: { - fontSize: '1.875rem', - color: theme.customs.colors.green700, - }, - avatar: { - alignSelf: 'flex-start', - paddingTop: theme.spacing.unit * 0.5 - }, - label: { - display: 'flex', - justifyContent: 'flex-end', - fontSize: '0.875rem', - marginRight: theme.spacing.unit * 3, - paddingRight: theme.spacing.unit - }, - value: { - textTransform: 'none', - fontSize: '0.875rem', - }, - link: { - fontSize: '0.875rem', - color: theme.palette.primary.main, - '&:hover': { - cursor: 'pointer' - } - }, - chip: { - height: theme.spacing.unit * 3, - width: theme.spacing.unit * 12, - color: theme.palette.common.white, - fontSize: '0.875rem', - borderRadius: theme.spacing.unit * 0.625, - }, - content: { - '&:last-child': { - paddingBottom: theme.spacing.unit * 2, - } - }, - title: { - overflow: 'hidden', - paddingTop: theme.spacing.unit * 0.5 - }, - cancelButton: { - paddingRight: theme.spacing.unit * 2, - fontSize: '14px', - color: theme.customs.colors.red900, - "&:hover": { - cursor: 'pointer' - } - } -}); - -export interface ProcessInformationCardDataProps { - process: Process; - onContextMenu: (event: React.MouseEvent) => void; - openProcessInputDialog: (uuid: string) => void; - navigateToOutput: (uuid: string) => void; - openWorkflow: (uuid: string) => void; - cancelProcess: (uuid: string) => void; -} - -type ProcessInformationCardProps = ProcessInformationCardDataProps & WithStyles; - -export const ProcessInformationCard = withStyles(styles, { withTheme: true })( - ({ classes, process, onContextMenu, theme, openProcessInputDialog, navigateToOutput, openWorkflow, cancelProcess }: ProcessInformationCardProps) => { - const { container } = process; - const startedAt = container ? formatDate(container.startedAt) : 'N/A'; - const finishedAt = container ? formatDate(container.finishedAt) : 'N/A'; - return - } - action={ -
- {process.container && process.container.state === ContainerState.RUNNING && - cancelProcess(process.containerRequest.uuid)}>Cancel} - - - onContextMenu(event)}> - - - -
- } - title={ - - - {process.containerRequest.name} - - - } - subheader={ - - - {getDescription(process)} - - } /> - - - - - - {process.containerRequest.properties.workflowUuid && - openWorkflow(process.containerRequest.properties.workflowUuid)}> - - } - - - navigateToOutput(process.containerRequest.outputUuid!)}> - - - openProcessInputDialog(process.containerRequest.uuid)}> - - - - - -
; - } -); - -const getDescription = (process: Process) => - process.containerRequest.description || '(no-description)';