[ARVADOS-WORKBENCH2] updated: 1.1.4-77-ge806c70
Git user
git at public.curoverse.com
Fri Jun 15 05:45:40 EDT 2018
Summary of changes:
src/components/data-explorer/data-explorer.tsx | 243 +++++++++++----------
src/components/data-explorer/data-item.ts | 12 +
src/components/data-explorer/formatters.ts | 40 ++++
.../{tree/tree.test.tsx => data-explorer/index.ts} | 5 +-
src/views/data-explorer/data-explorer.tsx | 2 +-
5 files changed, 180 insertions(+), 122 deletions(-)
create mode 100644 src/components/data-explorer/data-item.ts
create mode 100644 src/components/data-explorer/formatters.ts
copy src/components/{tree/tree.test.tsx => data-explorer/index.ts} (53%)
via e806c7001a4be0bb4b5a27995d89bd560d5fe8db (commit)
from a0bace185804d0d263249d65af442bed2890ca7b (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 e806c7001a4be0bb4b5a27995d89bd560d5fe8db
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Fri Jun 15 11:45:16 2018 +0200
Extract data item interface and data explorer formatters and renderers
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 f2fe3be..ada0159 100644
--- a/src/components/data-explorer/data-explorer.tsx
+++ b/src/components/data-explorer/data-explorer.tsx
@@ -8,15 +8,8 @@ import { Typography, Grid, ListItem, Divider, List, ListItemIcon, ListItemText }
import IconButton, { IconButtonProps } from '@material-ui/core/IconButton';
import MoreVertIcon from "@material-ui/icons/MoreVert";
import Popover from '../popover/popover';
-
-export interface DataItem {
- name: string;
- type: string;
- owner: string;
- lastModified: string;
- fileSize?: number;
- status?: string;
-}
+import { formatFileSize, formatDate } from './formatters';
+import { DataItem } from './data-item';
interface DataExplorerProps {
items: DataItem[];
@@ -32,121 +25,40 @@ class DataExplorer extends React.Component<DataExplorerProps, DataExplorerState>
{
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>
- )
+ render: item => this.renderName(item)
},
{
header: "Status",
selected: true,
- render: item => (
- <Typography noWrap align="center">
- {item.status || "-"}
- </Typography>
- )
+ render: item => renderStatus(item.status)
},
{
header: "Type",
selected: true,
- render: item => (
- <Typography noWrap>
- {item.type}
- </Typography>
- )
+ render: item => renderType(item.type)
},
{
header: "Owner",
selected: true,
- render: item => (
- <Typography noWrap color="primary">
- {item.owner}
- </Typography>
- )
+ render: item => renderOwner(item.owner)
},
{
header: "File size",
selected: true,
- render: ({ fileSize }) => (
- <Typography noWrap>
- {typeof fileSize === "number" ? formatFileSize(fileSize) : "-"}
- </Typography>
- )
+ render: (item) => renderFileSize(item.fileSize)
},
{
header: "Last modified",
selected: true,
- render: item => (
- <Typography noWrap>
- {formatDate(item.lastModified)}
- </Typography>
- )
+ render: item => renderDate(item.lastModified)
},
{
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>
- )
+ renderHeader: () => this.renderActionsHeader(),
+ render: renderItemActions
}
]
};
@@ -166,30 +78,44 @@ class DataExplorer extends React.Component<DataExplorerProps, DataExplorerState>
columns.splice(index, 1, { ...column, selected: !column.selected });
this.setState({ columns });
}
-}
-const formatDate = (isoDate: string) => {
- const date = new Date(isoDate);
- return date.toLocaleString();
-};
+ renderActionsHeader = () => {
+ return (
+ <Grid container justify="flex-end">
+ <ColumnsConfigurator
+ columns={this.state.columns}
+ onColumnToggle={this.toggleColumn}
+ />
+ </Grid>
+ );
+ }
-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`;
+ renderName = (item: DataItem) => {
+ return (
+ (
+ <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>
+ )
+ );
}
-};
+}
-const renderIcon = (DataItem: DataItem) => {
- switch (DataItem.type) {
+const renderIcon = (dataItem: DataItem) => {
+ switch (dataItem.type) {
case "arvados#group":
return <i className="fas fa-folder fa-lg" />;
case "arvados#groupList":
@@ -199,6 +125,87 @@ const renderIcon = (DataItem: DataItem) => {
}
};
+const renderDate = (date: string) => {
+ return (
+ <Typography noWrap>
+ {formatDate(date)}
+ </Typography>
+ );
+};
+
+const renderFileSize = (fileSize?: number) => {
+ return (
+ <Typography noWrap>
+ {typeof fileSize === "number" ? formatFileSize(fileSize) : "-"}
+ </Typography>
+ );
+};
+
+const renderOwner = (owner: string) => {
+ return (
+ <Typography noWrap color="primary">
+ {owner}
+ </Typography>
+ );
+};
+
+const renderType = (type: string) => {
+ return (
+ <Typography noWrap>
+ {type}
+ </Typography>
+ );
+};
+
+const renderStatus = (status?: string) => {
+ return (
+ <Typography noWrap align="center">
+ {status || "-"}
+ </Typography>
+ );
+};
+
+const renderItemActions = () => {
+ return (
+ <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>
+ );
+};
+
const renderAction = (action: { label: string, icon: string }, index?: number) => (
<ListItem button key={index}>
<ListItemIcon>
diff --git a/src/components/data-explorer/data-item.ts b/src/components/data-explorer/data-item.ts
new file mode 100644
index 0000000..3a80992
--- /dev/null
+++ b/src/components/data-explorer/data-item.ts
@@ -0,0 +1,12 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+export interface DataItem {
+ name: string;
+ type: string;
+ owner: string;
+ lastModified: string;
+ fileSize?: number;
+ status?: string;
+}
\ No newline at end of file
diff --git a/src/components/data-explorer/formatters.ts b/src/components/data-explorer/formatters.ts
new file mode 100644
index 0000000..5862a86
--- /dev/null
+++ b/src/components/data-explorer/formatters.ts
@@ -0,0 +1,40 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+export const formatDate = (isoDate: string) => {
+ const date = new Date(isoDate);
+ return date.toLocaleString();
+};
+
+export const formatFileSize = (size: number) => {
+ for (const { base, unit } of fileSizes) {
+ if (size >= base) {
+ return `${(size / base).toFixed()} ${unit}`;
+ }
+ }
+ return "";
+};
+
+const fileSizes = [
+ {
+ base: 1000000000000,
+ unit: "TB"
+ },
+ {
+ base: 1000000000,
+ unit: "GB"
+ },
+ {
+ base: 1000000,
+ unit: "MB"
+ },
+ {
+ base: 1000,
+ unit: "KB"
+ },
+ {
+ base: 1,
+ unit: "B"
+ }
+];
\ No newline at end of file
diff --git a/src/components/data-explorer/index.ts b/src/components/data-explorer/index.ts
new file mode 100644
index 0000000..bde402d
--- /dev/null
+++ b/src/components/data-explorer/index.ts
@@ -0,0 +1,6 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+export { default as DataExplorer } from "./data-explorer";
+export * from "./data-item";
\ No newline at end of file
diff --git a/src/views/data-explorer/data-explorer.tsx b/src/views/data-explorer/data-explorer.tsx
index 9364fe4..5f17b63 100644
--- a/src/views/data-explorer/data-explorer.tsx
+++ b/src/views/data-explorer/data-explorer.tsx
@@ -11,7 +11,7 @@ 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 DataExplorer, { DataItem } from '../../components/data-explorer/data-explorer';
+import { DataExplorer, DataItem } from '../../components/data-explorer';
import { TreeItem } from '../../components/tree/tree';
interface DataExplorerViewDataProps {
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list