Tooltip,
Typography,
Grid,
+ Link,
+ Button
} from '@material-ui/core';
import { ArvadosTheme } from 'common/custom-theme';
import {
MaximizeIcon,
ResourceIcon,
UnMaximizeIcon,
+ ShowChartIcon,
} from 'components/icon/icon';
import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view';
import { connect } from 'react-redux';
interface ProcessResourceCardDataProps {
process: Process;
nodeInfo: NodeInstanceType | null;
+ usageReport: string | null;
}
-type CssRules = "card" | "header" | "title" | "avatar" | "iconHeader" | "content" | "sectionH3";
+type CssRules = "card" | "header" | "title" | "avatar" | "iconHeader" | "content" | "sectionH3" | "reportButton";
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
card: {
color: theme.customs.colors.greyD,
fontSize: "0.8125rem",
textTransform: "uppercase",
+ },
+ reportButton: {
}
});
type ProcessResourceCardProps = ProcessResourceCardDataProps & WithStyles<CssRules> & MPVPanelProps;
export const ProcessResourceCard = withStyles(styles)(connect()(
- ({ classes, nodeInfo, doHidePanel, doMaximizePanel, doUnMaximizePanel, panelMaximized, panelName, process, }: ProcessResourceCardProps) => {
+ ({ classes, nodeInfo, usageReport, doHidePanel, doMaximizePanel, doUnMaximizePanel, panelMaximized, panelName, process, }: ProcessResourceCardProps) => {
let diskRequest = 0;
if (process.container?.mounts) {
for (const mnt in process.container.mounts) {
}
action={
<div>
+ {usageReport && <Link href={usageReport} className={classes.reportButton} target="_blank"><ShowChartIcon /> Resource usage report</Link>}
{doUnMaximizePanel && panelMaximized &&
<Tooltip title={`Unmaximize ${panelName || 'panel'}`} disableFocusListener>
<IconButton onClick={doUnMaximizePanel}><UnMaximizeIcon /></IconButton>