// Copyright (C) The Arvados Authors. All rights reserved. // // SPDX-License-Identifier: AGPL-3.0 import * as React from 'react'; import { StyleRulesCallback, WithStyles, withStyles, CardContent, Tab, Tabs, Table, TableHead, TableCell, TableBody, TableRow } from '@material-ui/core'; import { ArvadosTheme } from '~/common/custom-theme'; import { WorkflowIcon } from '~/components/icon/icon'; import { DataTableDefaultView } from '~/components/data-table-default-view/data-table-default-view'; import { WorkflowResource, parseWorkflowDefinition, getWorkflowInputs, getInputLabel, stringifyInputType } from '~/models/workflow'; import { WorkflowGraph } from "~/views/workflow-panel/workflow-graph"; export type CssRules = 'root' | 'tab' | 'inputTab' | 'graphTab' | 'graphTabWithChosenWorkflow' | 'descriptionTab' | 'inputsTable'; const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ root: { height: '100%' }, tab: { minWidth: '33%' }, inputTab: { overflow: 'auto', maxHeight: '300px', marginTop: theme.spacing.unit }, graphTab: { marginTop: theme.spacing.unit, }, graphTabWithChosenWorkflow: { overflow: 'auto', height: '450px', marginTop: theme.spacing.unit, }, descriptionTab: { overflow: 'auto', maxHeight: '300px', marginTop: theme.spacing.unit, }, inputsTable: { tableLayout: 'fixed', }, }); interface WorkflowDetailsCardDataProps { workflow?: WorkflowResource; } type WorkflowDetailsCardProps = WorkflowDetailsCardDataProps & WithStyles; export const WorkflowDetailsCard = withStyles(styles)( class extends React.Component { state = { value: 0, }; handleChange = (event: React.MouseEvent, value: number) => { this.setState({ value }); } render() { const { classes, workflow } = this.props; const { value } = this.state; return
{value === 0 && {workflow ?
{workflow.description}
: ( )}
} {value === 1 && {workflow ? this.renderInputsTable() : } } {value === 2 && {workflow ? : } }
; } get inputs() { if (this.props.workflow) { const definition = parseWorkflowDefinition(this.props.workflow); if (definition) { return getWorkflowInputs(definition); } } return; } renderInputsTable() { return Label Type Description {this.inputs && this.inputs.map(input => {getInputLabel(input)} {stringifyInputType(input)} {input.doc} )}
; } });