import { ArvadosTheme } from "common/custom-theme";
import { createTree } from 'models/tree';
import { DataTableFilters } from 'components/data-table-filters/data-table-filters-tree';
-import { MoreOptionsIcon } from 'components/icon/icon';
+import { CloseIcon, MoreOptionsIcon } from 'components/icon/icon';
import { PaperProps } from '@material-ui/core/Paper';
type CssRules = 'searchBox' | "toolbar" | "toolbarUnderTitle" | "footer" | "root" | 'moreOptionsButton' | 'title';
title?: React.ReactNode;
paperKey?: string;
currentItemUuid: string;
+ panelName?: string
}
interface DataExplorerActionProps<T> {
onChangeRowsPerPage: (rowsPerPage: number) => void;
onLoadMore: (page: number) => void;
extractKey?: (item: T) => React.Key;
+ doHidePanel?: () => void;
}
type DataExplorerProps<T> = DataExplorerDataProps<T> & DataExplorerActionProps<T> & WithStyles<CssRules>;
rowsPerPage, rowsPerPageOptions, onColumnToggle, searchLabel, searchValue, onSearch,
items, itemsAvailable, onRowClick, onRowDoubleClick, classes,
dataTableDefaultView, hideColumnSelector, actions, paperProps, hideSearchInput,
- paperKey, fetchMode, currentItemUuid, title
+ paperKey, fetchMode, currentItemUuid, title, doHidePanel, panelName
} = this.props;
return <Paper className={classes.root} {...paperProps} key={paperKey}>
{title && <div className={classes.title}>{title}</div>}
columns={columns}
onColumnToggle={onColumnToggle} />}
</Grid>
+ { doHidePanel &&
+ <Tooltip title={`Close ${panelName || 'panel'}`} disableFocusListener>
+ <Button onClick={doHidePanel}><CloseIcon /></Button>
+ </Tooltip> }
</Toolbar>}
<DataTable
columns={this.props.contextMenuColumn ? [...columns, this.contextMenuColumn] : columns}
import React from 'react';
import {
StyleRulesCallback, WithStyles, withStyles, Card,
- CardHeader, IconButton, CardContent, Grid, Chip, Typography, Tooltip
+ CardHeader, IconButton, CardContent, Grid, Chip, Typography, Tooltip, Button
} from '@material-ui/core';
import { ArvadosTheme } from 'common/custom-theme';
-import { MoreOptionsIcon, ProcessIcon } from 'components/icon/icon';
+import { CloseIcon, 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';
navigateToOutput: (uuid: string) => void;
openWorkflow: (uuid: string) => void;
cancelProcess: (uuid: string) => void;
+ doHidePanel?: () => void;
+ panelName?: string;
}
type ProcessInformationCardProps = ProcessInformationCardDataProps & WithStyles<CssRules, true>;
export const ProcessInformationCard = withStyles(styles, { withTheme: true })(
- ({ classes, process, onContextMenu, theme, openProcessInputDialog, navigateToOutput, openWorkflow, cancelProcess }: ProcessInformationCardProps) => {
+ ({ classes, process, onContextMenu, theme, openProcessInputDialog, navigateToOutput, openWorkflow, cancelProcess, doHidePanel, panelName }: ProcessInformationCardProps) => {
const { container } = process;
const startedAt = container ? formatDate(container.startedAt) : 'N/A';
const finishedAt = container ? formatDate(container.finishedAt) : 'N/A';
<MoreOptionsIcon />
</IconButton>
</Tooltip>
+ { doHidePanel &&
+ <Tooltip title={`Close ${panelName || 'panel'}`} disableFocusListener>
+ <Button onClick={doHidePanel}><CloseIcon /></Button>
+ </Tooltip> }
</div>
}
title={
import { Process } from 'store/processes/process';
import { SubprocessPanel } from 'views/subprocess-panel/subprocess-panel';
import { SubprocessFilterDataProps } from 'components/subprocess-filter/subprocess-filter';
-import { MPVContainer } from 'components/multi-panel-view/multi-panel-view';
+import { MPVContainer, MPVPanelContent } from 'components/multi-panel-view/multi-panel-view';
export interface ProcessPanelRootDataProps {
process?: Process;
export const ProcessPanelRoot = ({ process, ...props }: ProcessPanelRootProps) =>
process
? <MPVContainer spacing={8} panelNames={["Info", "Subprocesses"]} alignItems="stretch">
- <Grid item sm={12} md={12}>
+ <MPVPanelContent sm={12} md={12}>
<ProcessInformationCard
process={process}
onContextMenu={event => props.onContextMenu(event, process)}
openWorkflow={props.navigateToWorkflow}
cancelProcess={props.cancelProcess}
/>
- </Grid>
- <Grid item sm={12} md={12}>
+ </MPVPanelContent>
+ <MPVPanelContent sm={12} md={12}>
<SubprocessPanel />
- </Grid>
+ </MPVPanelContent>
</MPVContainer>
: <Grid container
alignItems='center'
export interface SubprocessPanelDataProps {
resources: ResourcesState;
+ panelName?: string;
}
export interface SubprocessPanelActionProps {
onItemClick: (item: string) => void;
onContextMenu: (event: React.MouseEvent<HTMLElement>, item: string, resources: ResourcesState) => void;
onItemDoubleClick: (item: string) => void;
+ doHidePanel?: () => void;
}
type SubprocessPanelProps = SubprocessPanelActionProps & SubprocessPanelDataProps;
<DataTableDefaultView
icon={ProcessIcon}
messages={DEFAULT_VIEW_MESSAGES} />
- } />;
+ }
+ doHidePanel={props.doHidePanel}
+ panelName={props.panelName} />;
};
\ No newline at end of file