[ARVADOS-WORKBENCH2] created: 2.2.1-112-g826a0364
Git user
git at public.arvados.org
Fri Oct 8 19:16:30 UTC 2021
at 826a0364d7486b54765d03a384f22f19376bc322 (commit)
commit 826a0364d7486b54765d03a384f22f19376bc322
Author: Lucas Di Pentima <lucas.dipentima at curii.com>
Date: Fri Oct 8 16:11:16 2021 -0300
18128: Show [X] close button on individual panels.
Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima at curii.com>
diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx
index d272e870..940dbd0a 100644
--- a/src/components/data-explorer/data-explorer.tsx
+++ b/src/components/data-explorer/data-explorer.tsx
@@ -11,7 +11,7 @@ import { SearchInput } from 'components/search-input/search-input';
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';
@@ -62,6 +62,7 @@ interface DataExplorerDataProps<T> {
title?: React.ReactNode;
paperKey?: string;
currentItemUuid: string;
+ panelName?: string
}
interface DataExplorerActionProps<T> {
@@ -77,6 +78,7 @@ 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>;
@@ -94,7 +96,7 @@ export const DataExplorer = withStyles(styles)(
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>}
@@ -111,6 +113,10 @@ export const DataExplorer = withStyles(styles)(
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}
diff --git a/src/views/process-panel/process-information-card.tsx b/src/views/process-panel/process-information-card.tsx
index e70a0478..ad7673af 100644
--- a/src/views/process-panel/process-information-card.tsx
+++ b/src/views/process-panel/process-information-card.tsx
@@ -5,10 +5,10 @@
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';
@@ -81,12 +81,14 @@ export interface ProcessInformationCardDataProps {
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';
@@ -111,6 +113,10 @@ export const ProcessInformationCard = withStyles(styles, { withTheme: true })(
<MoreOptionsIcon />
</IconButton>
</Tooltip>
+ { doHidePanel &&
+ <Tooltip title={`Close ${panelName || 'panel'}`} disableFocusListener>
+ <Button onClick={doHidePanel}><CloseIcon /></Button>
+ </Tooltip> }
</div>
}
title={
diff --git a/src/views/process-panel/process-panel-root.tsx b/src/views/process-panel/process-panel-root.tsx
index 242349b5..045e5cfa 100644
--- a/src/views/process-panel/process-panel-root.tsx
+++ b/src/views/process-panel/process-panel-root.tsx
@@ -10,7 +10,7 @@ import { ProcessIcon } from 'components/icon/icon';
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;
@@ -32,7 +32,7 @@ export type ProcessPanelRootProps = ProcessPanelRootDataProps & ProcessPanelRoot
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)}
@@ -41,10 +41,10 @@ export const ProcessPanelRoot = ({ process, ...props }: ProcessPanelRootProps) =
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'
diff --git a/src/views/subprocess-panel/subprocess-panel-root.tsx b/src/views/subprocess-panel/subprocess-panel-root.tsx
index b8e1b081..e35a5712 100644
--- a/src/views/subprocess-panel/subprocess-panel-root.tsx
+++ b/src/views/subprocess-panel/subprocess-panel-root.tsx
@@ -65,12 +65,14 @@ export const subprocessPanelColumns: DataColumns<string> = [
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;
@@ -91,5 +93,7 @@ export const SubprocessPanelRoot = (props: SubprocessPanelProps) => {
<DataTableDefaultView
icon={ProcessIcon}
messages={DEFAULT_VIEW_MESSAGES} />
- } />;
+ }
+ doHidePanel={props.doHidePanel}
+ panelName={props.panelName} />;
};
\ No newline at end of file
commit f2f97f8cf0a46d72baa70ae9332b01a0f977465c
Author: Lucas Di Pentima <lucas.dipentima at curii.com>
Date: Fri Oct 8 16:05:05 2021 -0300
18128: Applies MPVContainer component to the process panel.
Both panel are now able to be toggled via the top level button tray.
Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima at curii.com>
diff --git a/src/views/process-panel/process-panel-root.tsx b/src/views/process-panel/process-panel-root.tsx
index e7f66573..242349b5 100644
--- a/src/views/process-panel/process-panel-root.tsx
+++ b/src/views/process-panel/process-panel-root.tsx
@@ -10,6 +10,7 @@ import { ProcessIcon } from 'components/icon/icon';
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';
export interface ProcessPanelRootDataProps {
process?: Process;
@@ -30,7 +31,7 @@ export type ProcessPanelRootProps = ProcessPanelRootDataProps & ProcessPanelRoot
export const ProcessPanelRoot = ({ process, ...props }: ProcessPanelRootProps) =>
process
- ? <Grid container spacing={16} alignItems="stretch">
+ ? <MPVContainer spacing={8} panelNames={["Info", "Subprocesses"]} alignItems="stretch">
<Grid item sm={12} md={12}>
<ProcessInformationCard
process={process}
@@ -44,7 +45,7 @@ export const ProcessPanelRoot = ({ process, ...props }: ProcessPanelRootProps) =
<Grid item sm={12} md={12}>
<SubprocessPanel />
</Grid>
- </Grid>
+ </MPVContainer>
: <Grid container
alignItems='center'
justify='center'
commit 3ead4ccf9f97c99349e5672489e620d6050fb475
Author: Lucas Di Pentima <lucas.dipentima at curii.com>
Date: Fri Oct 8 15:49:15 2021 -0300
18128: Adds Multi Panel View (MPV for short) component family.
MPVContainer aims to be a drop-in replacement for <Grid container...>
that will handle its children's visibility and pass to them additional
props so they can optionally offer UI elements to the user.
MPVPanelContent aims to be a drop-in replacement for <Grid item...>
in case there's a need for special layout inside a container. This
component will forward the additional props to its children.
Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima at curii.com>
diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index 26ce4fea..05b94f7e 100644
--- a/src/components/icon/icon.tsx
+++ b/src/components/icon/icon.tsx
@@ -112,6 +112,7 @@ export const FileIcon: IconType = (props) => <DescriptionIcon {...props} />;
export const HelpIcon: IconType = (props) => <Help {...props} />;
export const HelpOutlineIcon: IconType = (props) => <HelpOutline {...props} />;
export const ImportContactsIcon: IconType = (props) => <ImportContacts {...props} />;
+export const InfoIcon: IconType = (props) => <Info {...props} />;
export const InputIcon: IconType = (props) => <InsertDriveFile {...props} />;
export const KeyIcon: IconType = (props) => <VpnKey {...props} />;
export const LogIcon: IconType = (props) => <SettingsEthernet {...props} />;
diff --git a/src/components/multi-panel-view/multi-panel-view.tsx b/src/components/multi-panel-view/multi-panel-view.tsx
new file mode 100644
index 00000000..54bea41d
--- /dev/null
+++ b/src/components/multi-panel-view/multi-panel-view.tsx
@@ -0,0 +1,104 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import React, { ReactElement, ReactNode, useState } from 'react';
+import { Button, Grid } from "@material-ui/core";
+import { GridProps } from '@material-ui/core/Grid';
+import { isArray } from 'lodash';
+import { DefaultView } from 'components/default-view/default-view';
+import { InfoIcon } from 'components/icon/icon';
+import { ReactNodeArray } from 'prop-types';
+
+interface MPVHideablePanelDataProps {
+ name: string;
+ visible: boolean;
+ children: ReactNode;
+}
+
+interface MPVHideablePanelActionProps {
+ doHidePanel: () => void;
+}
+
+type MPVPanelProps = MPVHideablePanelDataProps & MPVHideablePanelActionProps;
+
+const MPVHideablePanel = ({doHidePanel, name, visible, ...props}: MPVPanelProps) =>
+ visible
+ ? <>
+ {React.cloneElement((props.children as ReactElement), { doHidePanel, panelName: name })}
+ </>
+ : null;
+
+interface MPVPanelContentDataProps {
+ panelName?: string;
+ children: ReactElement;
+}
+
+interface MPVPanelContentActionProps {
+ doHidePanel?: () => void;
+}
+
+type MPVPanelContentProps = MPVPanelContentDataProps & MPVPanelContentActionProps & GridProps;
+
+// Grid item compatible component for layout and MPV props passing
+export const MPVPanelContent = ({doHidePanel, panelName, ...props}: MPVPanelContentProps) =>
+ <Grid item {...props}>
+ {React.cloneElement(props.children, { doHidePanel, panelName })}
+ </Grid>;
+
+export interface MPVContainerDataProps {
+ panelNames?: string[];
+}
+
+type MPVContainerProps = MPVContainerDataProps & GridProps;
+
+// Grid container compatible component that also handles panel toggling.
+export const MPVContainer = ({children, panelNames, ...props}: MPVContainerProps) => {
+ if (children === undefined || children === null || children === {}) {
+ children = [];
+ } else if (!isArray(children)) {
+ children = [children];
+ }
+ const visibility = (children as ReactNodeArray).map(() => true);
+ const [panelVisibility, setPanelVisibility] = useState<boolean[]>(visibility);
+
+ let panels: JSX.Element[] = [];
+ let toggles: JSX.Element[] = [];
+
+ if (isArray(children)) {
+ for (let idx = 0; idx < children.length; idx++) {
+ const toggleFn = (idx: number) => () => {
+ setPanelVisibility([
+ ...panelVisibility.slice(0, idx),
+ !panelVisibility[idx],
+ ...panelVisibility.slice(idx+1)
+ ])
+ };
+ const toggleLabel = panelVisibility[idx] ? 'Hide' : 'Show'
+ const panelName = panelNames === undefined
+ ? `Panel ${idx+1}`
+ : panelNames[idx] || `Panel ${idx+1}`;
+
+
+ toggles = [
+ ...toggles,
+ <Button onClick={toggleFn(idx)}>{toggleLabel} {panelName}</Button>
+ ];
+
+ const aPanel =
+ <MPVHideablePanel visible={panelVisibility[idx]} name={panelName} doHidePanel={toggleFn(idx)}>
+ {children[idx]}
+ </MPVHideablePanel>;
+ panels = [...panels, aPanel];
+ };
+ };
+
+ return <Grid container {...props}>
+ { toggles }
+ { panelVisibility.includes(true)
+ ? panels
+ : <Grid container alignItems='center' justify='center'>
+ <DefaultView messages={["All panels are hidden.", "Click on the buttons above to show them."]} icon={InfoIcon} />
+ </Grid> }
+ </Grid>;
+};
commit 0709d8e87d8d7f2d8a9b0ce4580e09cd3f66f991
Author: Lucas Di Pentima <lucas.dipentima at curii.com>
Date: Fri Oct 8 15:42:02 2021 -0300
18128: Removes unused code.
Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima at curii.com>
diff --git a/src/components/panel-default-view/panel-default-view.tsx b/src/components/panel-default-view/panel-default-view.tsx
deleted file mode 100644
index c364bb75..00000000
--- a/src/components/panel-default-view/panel-default-view.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-// Copyright (C) The Arvados Authors. All rights reserved.
-//
-// SPDX-License-Identifier: AGPL-3.0
-
-import React from 'react';
-import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
-import { DefaultViewDataProps, DefaultView } from 'components/default-view/default-view';
-
-type CssRules = 'classRoot' | 'classIcon' | 'classMessage';
-
-const styles: StyleRulesCallback<CssRules> = () => ({
- classRoot: {
- position: 'absolute',
- width: '80%',
- left: '50%',
- top: '50%',
- transform: 'translate(-50%, -50%)'
- },
- classMessage: {
- fontSize: '1.75rem',
- },
- classIcon: {
- fontSize: '6rem'
- }
-});
-
-type PanelDefaultViewProps = Pick<DefaultViewDataProps, 'icon' | 'messages'> & WithStyles<CssRules>;
-
-export const PanelDefaultView = withStyles(styles)(
- ({ classes, ...props }: PanelDefaultViewProps) =>
- <DefaultView {...classes} {...props} />);
commit 40d4cf6eb5d70a65851f617c013c4d7037f3bbff
Author: Lucas Di Pentima <lucas.dipentima at curii.com>
Date: Fri Sep 17 12:15:01 2021 -0300
18128: Unrelated fix -- always use https to get the cluster config.
Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima at curii.com>
diff --git a/src/common/config.ts b/src/common/config.ts
index 56f7c488..c9ada2c3 100644
--- a/src/common/config.ts
+++ b/src/common/config.ts
@@ -316,4 +316,4 @@ const getDefaultConfig = (): WorkbenchConfig => {
export const ARVADOS_API_PATH = "arvados/v1";
export const CLUSTER_CONFIG_PATH = "arvados/v1/config";
export const DISCOVERY_DOC_PATH = "discovery/v1/apis/arvados/v1/rest";
-export const getClusterConfigURL = (apiHost: string) => `${window.location.protocol}//${apiHost}/${CLUSTER_CONFIG_PATH}?nocache=${(new Date()).getTime()}`;
+export const getClusterConfigURL = (apiHost: string) => `https://${apiHost}/${CLUSTER_CONFIG_PATH}?nocache=${(new Date()).getTime()}`;
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list