[ARVADOS-WORKBENCH2] updated: 1.1.4-72-g7b5dbd4
Git user
git at public.curoverse.com
Fri Jun 15 03:57:59 EDT 2018
Summary of changes:
src/components/data-explorer/data-explorer.tsx | 255 ++++++++++++++++-----
.../{data-explorer => data-table}/column.ts | 0
.../columns-configurator.test.tsx | 0
.../columns-configurator/columns-configurator.tsx | 0
.../data-table.tsx} | 6 +-
src/components/data-table/index.ts | 9 +
.../project-explorer/project-explorer.tsx | 222 ------------------
.../data-explorer.tsx} | 18 +-
src/views/workbench/workbench.tsx | 17 +-
9 files changed, 225 insertions(+), 302 deletions(-)
rename src/components/{data-explorer => data-table}/column.ts (100%)
rename src/components/{data-explorer => data-table}/columns-configurator/columns-configurator.test.tsx (100%)
rename src/components/{data-explorer => data-table}/columns-configurator/columns-configurator.tsx (100%)
copy src/components/{data-explorer/data-explorer.tsx => data-table/data-table.tsx} (93%)
create mode 100644 src/components/data-table/index.ts
delete mode 100644 src/components/project-explorer/project-explorer.tsx
rename src/views/{project-explorer/project-explorer.tsx => data-explorer/data-explorer.tsx} (70%)
via 7b5dbd45ca461a8c58cfb148980b1ffe3f6d801e (commit)
from 60503a22e8681732571bbfb9840edb37908a62b0 (commit)
Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.
commit 7b5dbd45ca461a8c58cfb148980b1ffe3f6d801e
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Fri Jun 15 09:57:46 2018 +0200
Update data-explorer naming convention
Feature #13601
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx
index 229a090..7ea0856 100644
--- a/src/components/data-explorer/data-explorer.tsx
+++ b/src/components/data-explorer/data-explorer.tsx
@@ -3,71 +3,218 @@
// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { Table, TableBody, TableRow, TableCell, TableHead, StyleRulesCallback, Theme, WithStyles, withStyles, Typography, Grid } from '@material-ui/core';
-import { Column } from './column';
-import ColumnsConfigurator from "./columns-configurator/columns-configurator";
+import { DataTable, DataTableProps, Column, ColumnsConfigurator } from "../../components/data-table";
+import { Typography, Grid, ListItem, Divider, List, ListItemIcon, ListItemText } from '@material-ui/core';
+import IconButton, { IconButtonProps } from '@material-ui/core/IconButton';
+import MoreVertIcon from "@material-ui/icons/MoreVert";
+import Popover from '../popover/popover';
-export interface DataExplorerProps<T> {
- items: T[];
- columns: Array<Column<T>>;
- onColumnToggle: (column: Column<T>) => void;
- onItemClick?: (item: T) => void;
+export interface DataItem {
+ name: string;
+ type: string;
+ owner: string;
+ lastModified: string;
+ fileSize?: number;
+ status?: string;
}
-class DataExplorer<T> extends React.Component<DataExplorerProps<T> & WithStyles<CssRules>> {
- render() {
- const { items, columns, classes, onItemClick, onColumnToggle } = this.props;
- return (
- <div className={classes.tableContainer}>
- {
- items.length > 0 ? (
- <Table>
- <TableHead>
- <TableRow>
+interface DataExplorerProps {
+ items: DataItem[];
+ onItemClick: (item: DataItem) => void;
+}
+
+type DataExplorerState = Pick<DataTableProps<DataItem>, "columns">;
+
+class DataExplorer extends React.Component<DataExplorerProps, DataExplorerState> {
+
+ state: DataExplorerState = {
+ columns: [
+ {
+ header: "Name",
+ selected: true,
+ render: item => (
+ <Grid
+ container
+ alignItems="center"
+ wrap="nowrap"
+ spacing={16}
+ onClick={() => this.props.onItemClick(item)}
+ >
+ <Grid item>
+ {renderIcon(item)}
+ </Grid>
+ <Grid item>
+ <Typography color="primary">
+ {item.name}
+ </Typography>
+ </Grid>
+ </Grid>
+ )
+ },
+ {
+ header: "Status",
+ selected: true,
+ render: item => (
+ <Typography noWrap align="center">
+ {item.status || "-"}
+ </Typography>
+ )
+ },
+ {
+ header: "Type",
+ selected: true,
+ render: item => (
+ <Typography noWrap>
+ {item.type}
+ </Typography>
+ )
+ },
+ {
+ header: "Owner",
+ selected: true,
+ render: item => (
+ <Typography noWrap color="primary">
+ {item.owner}
+ </Typography>
+ )
+ },
+ {
+ header: "File size",
+ selected: true,
+ render: ({ fileSize }) => (
+ <Typography noWrap>
+ {typeof fileSize === "number" ? formatFileSize(fileSize) : "-"}
+ </Typography>
+ )
+ },
+ {
+ header: "Last modified",
+ selected: true,
+ render: item => (
+ <Typography noWrap>
+ {formatDate(item.lastModified)}
+ </Typography>
+ )
+ },
+ {
+ header: "Actions",
+ key: "Actions",
+ selected: true,
+ configurable: false,
+ renderHeader: () => (
+ <Grid container justify="flex-end">
+ <ColumnsConfigurator
+ columns={this.state.columns}
+ onColumnToggle={this.toggleColumn}
+ />
+ </Grid>
+ ),
+ render: item => (
+ <Grid container justify="flex-end">
+ <Popover triggerComponent={ItemActionsTrigger}>
+ <List dense>
+ {[
+ {
+ icon: "fas fa-users",
+ label: "Share"
+ },
+ {
+ icon: "fas fa-sign-out-alt",
+ label: "Move to"
+ },
+ {
+ icon: "fas fa-star",
+ label: "Add to favourite"
+ },
+ {
+ icon: "fas fa-edit",
+ label: "Rename"
+ },
{
- columns.filter(column => column.selected).map(({ header, renderHeader, key }, index) => (
- <TableCell key={key || index}>
- {renderHeader ? renderHeader() : header}
- </TableCell>
- ))
- }
- </TableRow>
- </TableHead>
- <TableBody className={classes.tableBody}>
+ icon: "fas fa-copy",
+ label: "Make a copy"
+ },
+ {
+ icon: "fas fa-download",
+ label: "Download"
+ }].map(renderAction)
+ }
+ < Divider />
{
- items.map((item, index) => (
- <TableRow key={index} hover onClick={() => onItemClick && onItemClick(item)}>
- {
- columns.filter(column => column.selected).map((column, index) => (
- <TableCell key={index}>
- {column.render(item)}
- </TableCell>
- ))
- }
- </TableRow>
- ))
+ renderAction({ icon: "fas fa-trash-alt", label: "Remove" })
}
- </TableBody>
- </Table>
- ) : (
- <Typography>No items</Typography>
- )
- }
+ </List>
+ </Popover>
+ </Grid>
+ )
+ }
+ ]
+ };
- </div>
+ render() {
+ return (
+ <DataTable
+ columns={this.state.columns}
+ items={this.props.items}
+ onColumnToggle={this.toggleColumn}
+ />
);
}
+
+ toggleColumn = (column: Column<DataItem>) => {
+ const index = this.state.columns.indexOf(column);
+ const columns = this.state.columns.slice(0);
+ columns.splice(index, 1, { ...column, selected: !column.selected });
+ this.setState({ columns });
+ }
}
-type CssRules = "tableBody" | "tableContainer";
+const formatDate = (isoDate: string) => {
+ const date = new Date(isoDate);
+ return date.toLocaleString();
+};
+
+const formatFileSize = (size: number) => {
+ switch (true) {
+ case size > 1000000000000:
+ return `${size / 1000000000000} TB`;
+ case size > 1000000000:
+ return `${size / 1000000000} GB`;
+ case size > 1000000:
+ return `${size / 1000000} MB`;
+ case size > 1000:
+ return `${size / 1000} KB`;
+ default:
+ return `${size} B`;
+ }
+};
-const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
- tableContainer: {
- overflowX: 'auto'
- },
- tableBody: {
- background: theme.palette.background.paper
+const renderIcon = (DataItem: DataItem) => {
+ switch (DataItem.type) {
+ case "arvados#group":
+ return <i className="fas fa-folder fa-lg" />;
+ case "arvados#groupList":
+ return <i className="fas fa-th fa-lg" />;
+ default:
+ return <i />;
}
-});
+};
+
+const renderAction = (action: { label: string, icon: string }, index?: number) => (
+ <ListItem button key={index}>
+ <ListItemIcon>
+ <i className={action.icon} />
+ </ListItemIcon>
+ <ListItemText>
+ {action.label}
+ </ListItemText>
+ </ListItem>
+);
+
+const ItemActionsTrigger: React.SFC<IconButtonProps> = (props) => (
+ <IconButton {...props}>
+ <MoreVertIcon />
+ </IconButton>
+);
-export default withStyles(styles)(DataExplorer);
+export default DataExplorer;
diff --git a/src/components/data-explorer/column.ts b/src/components/data-table/column.ts
similarity index 100%
rename from src/components/data-explorer/column.ts
rename to src/components/data-table/column.ts
diff --git a/src/components/data-explorer/columns-configurator/columns-configurator.test.tsx b/src/components/data-table/columns-configurator/columns-configurator.test.tsx
similarity index 100%
rename from src/components/data-explorer/columns-configurator/columns-configurator.test.tsx
rename to src/components/data-table/columns-configurator/columns-configurator.test.tsx
diff --git a/src/components/data-explorer/columns-configurator/columns-configurator.tsx b/src/components/data-table/columns-configurator/columns-configurator.tsx
similarity index 100%
rename from src/components/data-explorer/columns-configurator/columns-configurator.tsx
rename to src/components/data-table/columns-configurator/columns-configurator.tsx
diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-table/data-table.tsx
similarity index 93%
copy from src/components/data-explorer/data-explorer.tsx
copy to src/components/data-table/data-table.tsx
index 229a090..d0c6a67 100644
--- a/src/components/data-explorer/data-explorer.tsx
+++ b/src/components/data-table/data-table.tsx
@@ -7,14 +7,14 @@ import { Table, TableBody, TableRow, TableCell, TableHead, StyleRulesCallback, T
import { Column } from './column';
import ColumnsConfigurator from "./columns-configurator/columns-configurator";
-export interface DataExplorerProps<T> {
+export interface DataTableProps<T> {
items: T[];
columns: Array<Column<T>>;
onColumnToggle: (column: Column<T>) => void;
onItemClick?: (item: T) => void;
}
-class DataExplorer<T> extends React.Component<DataExplorerProps<T> & WithStyles<CssRules>> {
+class DataTable<T> extends React.Component<DataTableProps<T> & WithStyles<CssRules>> {
render() {
const { items, columns, classes, onItemClick, onColumnToggle } = this.props;
return (
@@ -70,4 +70,4 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
}
});
-export default withStyles(styles)(DataExplorer);
+export default withStyles(styles)(DataTable);
diff --git a/src/components/data-table/index.ts b/src/components/data-table/index.ts
new file mode 100644
index 0000000..be88e5e
--- /dev/null
+++ b/src/components/data-table/index.ts
@@ -0,0 +1,9 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+export * from "./column";
+export * from "./columns-configurator/columns-configurator";
+export { default as ColumnsConfigurator } from "./columns-configurator/columns-configurator";
+export * from "./data-table";
+export { default as DataTable } from "./data-table";
\ No newline at end of file
diff --git a/src/components/project-explorer/project-explorer.tsx b/src/components/project-explorer/project-explorer.tsx
deleted file mode 100644
index c7d286b..0000000
--- a/src/components/project-explorer/project-explorer.tsx
+++ /dev/null
@@ -1,222 +0,0 @@
-// Copyright (C) The Arvados Authors. All rights reserved.
-//
-// SPDX-License-Identifier: AGPL-3.0
-
-import * as React from 'react';
-import DataExplorer, { DataExplorerProps } from "../../components/data-explorer/data-explorer";
-import ColumnsConfigurator from "../../components/data-explorer/columns-configurator/columns-configurator";
-import { Typography, Grid, ListItem, Divider, List, ListItemIcon, ListItemText } from '@material-ui/core';
-import { Column } from '../../components/data-explorer/column';
-import IconButton, { IconButtonProps } from '@material-ui/core/IconButton';
-import MoreVertIcon from "@material-ui/icons/MoreVert";
-import Popover from '../popover/popover';
-
-export interface ProjectItem {
- name: string;
- type: string;
- owner: string;
- lastModified: string;
- fileSize?: number;
- status?: string;
-}
-
-interface ProjectExplorerProps {
- items: ProjectItem[];
- onItemClick: (item: ProjectItem) => void;
-}
-
-type ProjectExplorerState = Pick<DataExplorerProps<ProjectItem>, "columns">;
-
-class ProjectExplorer extends React.Component<ProjectExplorerProps, ProjectExplorerState> {
-
- state: ProjectExplorerState = {
- columns: [
- {
- header: "Name",
- selected: true,
- render: item => (
- <Grid
- container
- alignItems="center"
- wrap="nowrap"
- spacing={16}
- onClick={() => this.props.onItemClick(item)}
- >
- <Grid item>
- {renderIcon(item)}
- </Grid>
- <Grid item>
- <Typography color="primary">
- {item.name}
- </Typography>
- </Grid>
- </Grid>
- )
- },
- {
- header: "Status",
- selected: true,
- render: item => (
- <Typography noWrap align="center">
- {item.status || "-"}
- </Typography>
- )
- },
- {
- header: "Type",
- selected: true,
- render: item => (
- <Typography noWrap>
- {item.type}
- </Typography>
- )
- },
- {
- header: "Owner",
- selected: true,
- render: item => (
- <Typography noWrap color="primary">
- {item.owner}
- </Typography>
- )
- },
- {
- header: "File size",
- selected: true,
- render: ({ fileSize }) => (
- <Typography noWrap>
- {typeof fileSize === "number" ? formatFileSize(fileSize) : "-"}
- </Typography>
- )
- },
- {
- header: "Last modified",
- selected: true,
- render: item => (
- <Typography noWrap>
- {formatDate(item.lastModified)}
- </Typography>
- )
- },
- {
- header: "Actions",
- key: "Actions",
- selected: true,
- configurable: false,
- renderHeader: () => (
- <Grid container justify="flex-end">
- <ColumnsConfigurator
- columns={this.state.columns}
- onColumnToggle={this.toggleColumn}
- />
- </Grid>
- ),
- render: item => (
- <Grid container justify="flex-end">
- <Popover triggerComponent={ItemActionsTrigger}>
- <List dense>
- {[
- {
- icon: "fas fa-users",
- label: "Share"
- },
- {
- icon: "fas fa-sign-out-alt",
- label: "Move to"
- },
- {
- icon: "fas fa-star",
- label: "Add to favourite"
- },
- {
- icon: "fas fa-edit",
- label: "Rename"
- },
- {
- icon: "fas fa-copy",
- label: "Make a copy"
- },
- {
- icon: "fas fa-download",
- label: "Download"
- }].map(renderAction)
- }
- < Divider />
- {
- renderAction({ icon: "fas fa-trash-alt", label: "Remove" })
- }
- </List>
- </Popover>
- </Grid>
- )
- }
- ]
- };
-
- render() {
- return (
- <DataExplorer
- columns={this.state.columns}
- items={this.props.items}
- onColumnToggle={this.toggleColumn}
- />
- );
- }
-
- toggleColumn = (column: Column<ProjectItem>) => {
- const index = this.state.columns.indexOf(column);
- const columns = this.state.columns.slice(0);
- columns.splice(index, 1, { ...column, selected: !column.selected });
- this.setState({ columns });
- }
-}
-
-const formatDate = (isoDate: string) => {
- const date = new Date(isoDate);
- return date.toLocaleString();
-};
-
-const formatFileSize = (size: number) => {
- switch (true) {
- case size > 1000000000000:
- return `${size / 1000000000000} TB`;
- case size > 1000000000:
- return `${size / 1000000000} GB`;
- case size > 1000000:
- return `${size / 1000000} MB`;
- case size > 1000:
- return `${size / 1000} KB`;
- default:
- return `${size} B`;
- }
-};
-
-const renderIcon = (projectItem: ProjectItem) => {
- switch (projectItem.type) {
- case "arvados#group":
- return <i className="fas fa-folder fa-lg" />;
- case "arvados#groupList":
- return <i className="fas fa-th fa-lg"/>;
- default:
- return <i />;
- }
-};
-
-const renderAction = (action: { label: string, icon: string }, index?: number) => (
- <ListItem button key={index}>
- <ListItemIcon>
- <i className={action.icon} />
- </ListItemIcon>
- <ListItemText>
- {action.label}
- </ListItemText>
- </ListItem>
-);
-
-const ItemActionsTrigger: React.SFC<IconButtonProps> = (props) => (
- <IconButton {...props}>
- <MoreVertIcon />
- </IconButton>
-);
-
-export default ProjectExplorer;
diff --git a/src/views/project-explorer/project-explorer.tsx b/src/views/data-explorer/data-explorer.tsx
similarity index 70%
rename from src/views/project-explorer/project-explorer.tsx
rename to src/views/data-explorer/data-explorer.tsx
index ec08b02..9364fe4 100644
--- a/src/views/project-explorer/project-explorer.tsx
+++ b/src/views/data-explorer/data-explorer.tsx
@@ -3,7 +3,7 @@
// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { DataExplorerProps } from "../../components/data-explorer/data-explorer";
+import { DataTableProps } from "../../components/data-table";
import { RouteComponentProps } from 'react-router';
import { Project } from '../../models/project';
import { ProjectState, findTreeItem } from '../../store/project/project-reducer';
@@ -11,28 +11,28 @@ import { RootState } from '../../store/store';
import { connect, DispatchProp } from 'react-redux';
import { push } from 'react-router-redux';
import projectActions from "../../store/project/project-action";
-import ProjectExplorer, { ProjectItem } from '../../components/project-explorer/project-explorer';
+import DataExplorer, { DataItem } from '../../components/data-explorer/data-explorer';
import { TreeItem } from '../../components/tree/tree';
-interface ProjectExplorerViewDataProps {
+interface DataExplorerViewDataProps {
projects: ProjectState;
}
-type ProjectExplorerViewProps = ProjectExplorerViewDataProps & RouteComponentProps<{ name: string }> & DispatchProp;
+type DataExplorerViewProps = DataExplorerViewDataProps & RouteComponentProps<{ name: string }> & DispatchProp;
-type ProjectExplorerViewState = Pick<DataExplorerProps<Project>, "columns">;
+type DataExplorerViewState = Pick<DataTableProps<Project>, "columns">;
-interface MappedProjectItem extends ProjectItem {
+interface MappedProjectItem extends DataItem {
uuid: string;
}
-class ProjectExplorerView extends React.Component<ProjectExplorerViewProps, ProjectExplorerViewState> {
+class DataExplorerView extends React.Component<DataExplorerViewProps, DataExplorerViewState> {
render() {
const project = findTreeItem(this.props.projects, this.props.match.params.name);
const projectItems = project && project.items || [];
return (
- <ProjectExplorer
+ <DataExplorer
items={projectItems.map(mapTreeItem)}
onItemClick={this.goToProject}
/>
@@ -59,4 +59,4 @@ export default connect(
(state: RootState) => ({
projects: state.projects
})
-)(ProjectExplorerView);
+)(DataExplorerView);
diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index 87eaff2..4f1671c 100644
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -6,23 +6,12 @@ import * as React from 'react';
import { StyleRulesCallback, Theme, WithStyles, withStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
-import AppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
import { connect, DispatchProp } from "react-redux";
-import ProjectList from "../../components/project-list/project-list";
import { Route, Switch } from "react-router";
-import { Link } from "react-router-dom";
-import Button from "@material-ui/core/Button/Button";
import authActions from "../../store/auth/auth-action";
-import IconButton from "@material-ui/core/IconButton/IconButton";
-import Menu from "@material-ui/core/Menu/Menu";
-import MenuItem from "@material-ui/core/MenuItem/MenuItem";
-import { AccountCircle } from "@material-ui/icons";
import { User } from "../../models/user";
-import Grid from "@material-ui/core/Grid/Grid";
import { RootState } from "../../store/store";
-import MainAppBar, { MainAppBarActionProps, MainAppBarMenuItems, MainAppBarMenuItem } from '../../components/main-app-bar/main-app-bar';
+import MainAppBar, { MainAppBarActionProps, MainAppBarMenuItem } from '../../components/main-app-bar/main-app-bar';
import { Breadcrumb } from '../../components/breadcrumbs/breadcrumbs';
import { push } from 'react-router-redux';
import projectActions from "../../store/project/project-action";
@@ -30,7 +19,7 @@ import ProjectTree from '../../components/project-tree/project-tree';
import { TreeItem } from "../../components/tree/tree";
import { Project } from "../../models/project";
import { projectService } from '../../services/services';
-import ProjectExplorer from '../project-explorer/project-explorer';
+import DataExplorer from '../data-explorer/data-explorer';
const drawerWidth = 240;
@@ -179,7 +168,7 @@ class Workbench extends React.Component<WorkbenchProps, WorkbenchState> {
<div className={classes.toolbar} />
<div className={classes.toolbar} />
<Switch>
- <Route path="/project/:name" component={ProjectExplorer}/>
+ <Route path="/project/:name" component={DataExplorer}/>
</Switch>
</main>
</div>
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list