[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