// 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;
--- /dev/null
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// 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";
+
+export interface DataTableProps<T> {
+ items: T[];
+ columns: Array<Column<T>>;
+ onColumnToggle: (column: Column<T>) => void;
+ onItemClick?: (item: T) => void;
+}
+
+class DataTable<T> extends React.Component<DataTableProps<T> & WithStyles<CssRules>> {
+ render() {
+ const { items, columns, classes, onItemClick, onColumnToggle } = this.props;
+ return (
+ <div className={classes.tableContainer}>
+ {
+ items.length > 0 ? (
+ <Table>
+ <TableHead>
+ <TableRow>
+ {
+ columns.filter(column => column.selected).map(({ header, renderHeader, key }, index) => (
+ <TableCell key={key || index}>
+ {renderHeader ? renderHeader() : header}
+ </TableCell>
+ ))
+ }
+ </TableRow>
+ </TableHead>
+ <TableBody className={classes.tableBody}>
+ {
+ 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>
+ ))
+ }
+ </TableBody>
+ </Table>
+ ) : (
+ <Typography>No items</Typography>
+ )
+ }
+
+ </div>
+ );
+ }
+}
+
+type CssRules = "tableBody" | "tableContainer";
+
+const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
+ tableContainer: {
+ overflowX: 'auto'
+ },
+ tableBody: {
+ background: theme.palette.background.paper
+ }
+});
+
+export default withStyles(styles)(DataTable);
--- /dev/null
+// 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
+++ /dev/null
-// 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;
// 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';
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}
/>
(state: RootState) => ({
projects: state.projects
})
-)(ProjectExplorerView);
+)(DataExplorerView);
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";
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;
<div className={classes.toolbar} />
<div className={classes.toolbar} />
<Switch>
- <Route path="/project/:name" component={ProjectExplorer}/>
+ <Route path="/project/:name" component={DataExplorer}/>
</Switch>
</main>
</div>