import { ColumnSelector } from "../column-selector/column-selector";
import { DataTable, DataColumns } from "../data-table/data-table";
import { DataColumn, SortDirection } from "../data-table/data-column";
-import { DataTableFilterItem } from '../data-table-filters/data-table-filters';
import { SearchInput } from '../search-input/search-input';
import { ArvadosTheme } from "~/common/custom-theme";
+import { createTree } from '~/models/tree';
+import { DataTableFilters } from '../data-table-filters/data-table-filters-tree';
import { MoreOptionsIcon } from '~/components/icon/icon';
type CssRules = 'searchBox' | "toolbar" | "footer" | "root" | 'moreOptionsButton';
onColumnToggle: (column: DataColumn<T>) => void;
onContextMenu: (event: React.MouseEvent<HTMLElement>, item: T) => void;
onSortToggle: (column: DataColumn<T>) => void;
- onFiltersChange: (filters: DataTableFilterItem[], column: DataColumn<T>) => void;
+ onFiltersChange: (filters: DataTableFilters, column: DataColumn<T>) => void;
onChangePage: (page: number) => void;
onChangeRowsPerPage: (rowsPerPage: number) => void;
extractKey?: (item: T) => React.Key;
selected: true,
configurable: false,
sortDirection: SortDirection.NONE,
- filters: [],
+ filters: createTree(),
key: "context-actions",
render: this.renderContextMenuTrigger
};
--- /dev/null
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from "react";
+import {
+ WithStyles,
+ withStyles,
+ ButtonBase,
+ StyleRulesCallback,
+ Theme,
+ Popover,
+ Button,
+ Card,
+ CardActions,
+ Typography,
+ CardContent,
+ Tooltip
+} from "@material-ui/core";
+import * as classnames from "classnames";
+import { DefaultTransformOrigin } from "~/components/popover/helpers";
+import { createTree } from '~/models/tree';
+import { DataTableFilters, DataTableFiltersTree } from "./data-table-filters-tree";
+import { getNodeDescendants } from '~/models/tree';
+
+export type CssRules = "root" | "icon" | "active" | "checkbox";
+
+const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
+ root: {
+ cursor: "pointer",
+ display: "inline-flex",
+ justifyContent: "flex-start",
+ flexDirection: "inherit",
+ alignItems: "center",
+ "&:hover": {
+ color: theme.palette.text.primary,
+ },
+ "&:focus": {
+ color: theme.palette.text.primary,
+ },
+ },
+ active: {
+ color: theme.palette.text.primary,
+ '& $icon': {
+ opacity: 1,
+ },
+ },
+ icon: {
+ marginRight: 4,
+ marginLeft: 4,
+ opacity: 0.7,
+ userSelect: "none",
+ width: 16
+ },
+ checkbox: {
+ width: 24,
+ height: 24
+ }
+});
+
+export interface DataTableFilterProps {
+ name: string;
+ filters: DataTableFilters;
+ onChange?: (filters: DataTableFilters) => void;
+}
+
+interface DataTableFilterState {
+ anchorEl?: HTMLElement;
+ filters: DataTableFilters;
+ prevFilters: DataTableFilters;
+}
+
+export const DataTableFiltersPopover = withStyles(styles)(
+ class extends React.Component<DataTableFilterProps & WithStyles<CssRules>, DataTableFilterState> {
+ state: DataTableFilterState = {
+ anchorEl: undefined,
+ filters: createTree(),
+ prevFilters: createTree(),
+ };
+ icon = React.createRef<HTMLElement>();
+
+ render() {
+ const { name, classes, children } = this.props;
+ const isActive = getNodeDescendants('')(this.state.filters).some(f => f.selected);
+ return <>
+ <Tooltip title='Filters'>
+ <ButtonBase
+ className={classnames([classes.root, { [classes.active]: isActive }])}
+ component="span"
+ onClick={this.open}
+ disableRipple>
+ {children}
+ <i className={classnames(["fas fa-filter", classes.icon])}
+ data-fa-transform="shrink-3"
+ ref={this.icon} />
+ </ButtonBase>
+ </Tooltip>
+ <Popover
+ anchorEl={this.state.anchorEl}
+ open={!!this.state.anchorEl}
+ anchorOrigin={DefaultTransformOrigin}
+ transformOrigin={DefaultTransformOrigin}
+ onClose={this.cancel}>
+ <Card>
+ <CardContent>
+ <Typography variant="caption">
+ {name}
+ </Typography>
+ </CardContent>
+ <DataTableFiltersTree
+ filters={this.state.filters}
+ onChange={filters => this.setState({ filters })} />
+ <CardActions>
+ <Button
+ color="primary"
+ variant="raised"
+ size="small"
+ onClick={this.submit}>
+ Ok
+ </Button>
+ <Button
+ color="primary"
+ variant="outlined"
+ size="small"
+ onClick={this.cancel}>
+ Cancel
+ </Button>
+ </CardActions >
+ </Card>
+ </Popover>
+ </>;
+ }
+
+ static getDerivedStateFromProps(props: DataTableFilterProps, state: DataTableFilterState): DataTableFilterState {
+ return props.filters !== state.prevFilters
+ ? { ...state, filters: props.filters, prevFilters: props.filters }
+ : state;
+ }
+
+ open = () => {
+ this.setState({ anchorEl: this.icon.current || undefined });
+ }
+
+ submit = () => {
+ const { onChange } = this.props;
+ if (onChange) {
+ onChange(this.state.filters);
+ }
+ this.setState({ anchorEl: undefined });
+ }
+
+ cancel = () => {
+ this.setState(prev => ({
+ ...prev,
+ filters: prev.prevFilters,
+ anchorEl: undefined
+ }));
+ }
+
+ setFilters = (filters: DataTableFilters) => {
+ this.setState({ filters });
+ }
+
+ }
+);
--- /dev/null
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from "react";
+import { Tree, toggleNodeSelection, getNode, initTreeNode, getNodeChildrenIds } from '~/models/tree';
+import { Tree as TreeComponent, TreeItem, TreeItemStatus } from '~/components/tree/tree';
+import { noop, map } from "lodash/fp";
+import { toggleNodeCollapse } from '~/models/tree';
+import { countNodes, countChildren } from '~/models/tree';
+
+export interface DataTableFilterItem {
+ name: string;
+}
+
+export type DataTableFilters = Tree<DataTableFilterItem>;
+
+export interface DataTableFilterProps {
+ filters: DataTableFilters;
+ onChange?: (filters: DataTableFilters) => void;
+}
+
+export class DataTableFiltersTree extends React.Component<DataTableFilterProps> {
+
+ render() {
+ const { filters } = this.props;
+ const hasSubfilters = countNodes(filters) !== countChildren('')(filters);
+ return <TreeComponent
+ levelIndentation={hasSubfilters ? 20 : 0}
+ itemRightPadding={20}
+ items={filtersToTree(filters)}
+ render={renderItem}
+ showSelection
+ onContextMenu={noop}
+ toggleItemActive={noop}
+ toggleItemOpen={this.toggleOpen}
+ toggleItemSelection={this.toggleFilter}
+ />;
+ }
+
+ toggleFilter = (_: React.MouseEvent, item: TreeItem<DataTableFilterItem>) => {
+ const { onChange = noop } = this.props;
+ onChange(toggleNodeSelection(item.id)(this.props.filters));
+ }
+
+ toggleOpen = (_: React.MouseEvent, item: TreeItem<DataTableFilterItem>) => {
+ const { onChange = noop } = this.props;
+ onChange(toggleNodeCollapse(item.id)(this.props.filters));
+ }
+}
+
+const renderItem = (item: TreeItem<DataTableFilterItem>) =>
+ <span>{item.data.name}</span>;
+
+const filterToTreeItem = (filters: DataTableFilters) =>
+ (id: string): TreeItem<any> => {
+ const node = getNode(id)(filters) || initTreeNode({ id: '', value: 'InvalidNode' });
+ const items = getNodeChildrenIds(node.id)(filters)
+ .map(filterToTreeItem(filters));
+
+ return {
+ active: node.active,
+ data: node.value,
+ id: node.id,
+ items: items.length > 0 ? items : undefined,
+ open: node.expanded,
+ selected: node.selected,
+ status: TreeItemStatus.LOADED,
+ };
+ };
+
+const filtersToTree = (filters: DataTableFilters): TreeItem<DataTableFilterItem>[] =>
+ map(filterToTreeItem(filters), getNodeChildrenIds('')(filters));
} from "@material-ui/core";
import * as classnames from "classnames";
import { DefaultTransformOrigin } from "../popover/helpers";
+import { createTree, initTreeNode, mapTree } from '~/models/tree';
+import { DataTableFilters as DataTableFiltersModel, DataTableFiltersTree } from "./data-table-filters-tree";
+import { pipe } from 'lodash/fp';
+import { setNode } from '~/models/tree';
export type CssRules = "root" | "icon" | "active" | "checkbox";
anchorEl?: HTMLElement;
filters: DataTableFilterItem[];
prevFilters: DataTableFilterItem[];
+ filtersTree: DataTableFiltersModel;
}
+const filters: DataTableFiltersModel = pipe(
+ createTree,
+ setNode(initTreeNode({ id: 'Project', value: { name: 'Project' } })),
+ setNode(initTreeNode({ id: 'Process', value: { name: 'Process' } })),
+ setNode(initTreeNode({ id: 'Data collection', value: { name: 'Data collection' } })),
+ setNode(initTreeNode({ id: 'General', parent: 'Data collection', value: { name: 'General' } })),
+ setNode(initTreeNode({ id: 'Output', parent: 'Data collection', value: { name: 'Output' } })),
+ setNode(initTreeNode({ id: 'Log', parent: 'Data collection', value: { name: 'Log' } })),
+ mapTree(node => ({...node, selected: true})),
+)();
+
export const DataTableFilters = withStyles(styles)(
class extends React.Component<DataTableFilterProps & WithStyles<CssRules>, DataTableFilterState> {
state: DataTableFilterState = {
anchorEl: undefined,
filters: [],
- prevFilters: []
+ prevFilters: [],
+ filtersTree: filters,
};
icon = React.createRef<HTMLElement>();
</ListItem>
)}
</List>
+ <DataTableFiltersTree
+ filters={this.state.filtersTree}
+ onChange={filtersTree => this.setState({ filtersTree })} />
<CardActions>
<Button
color="primary"
// SPDX-License-Identifier: AGPL-3.0
import * as React from "react";
-import { DataTableFilterItem } from "../data-table-filters/data-table-filters";
+import { DataTableFilters } from "../data-table-filters/data-table-filters-tree";
+import { createTree } from '~/models/tree';
-export interface DataColumn<T, F extends DataTableFilterItem = DataTableFilterItem> {
+export interface DataColumn<T> {
key?: React.Key;
name: string;
selected: boolean;
configurable: boolean;
sortDirection?: SortDirection;
- filters: F[];
+ filters: DataTableFilters;
render: (item: T) => React.ReactElement<any>;
renderHeader?: () => React.ReactElement<any>;
}
return column.sortDirection ? { ...column, sortDirection: SortDirection.NONE } : column;
};
-export const createDataColumn = <T, F extends DataTableFilterItem>(dataColumn: Partial<DataColumn<T, F>>): DataColumn<T, F> => ({
+export const createDataColumn = <T>(dataColumn: Partial<DataColumn<T>>): DataColumn<T> => ({
key: '',
name: '',
selected: true,
configurable: true,
sortDirection: SortDirection.NONE,
- filters: [],
+ filters: createTree(),
render: () => React.createElement('span'),
...dataColumn,
});
import * as React from "react";
import { mount, configure } from "enzyme";
+import { pipe } from 'lodash/fp';
import { TableHead, TableCell, Typography, TableBody, Button, TableSortLabel } from "@material-ui/core";
import * as Adapter from "enzyme-adapter-react-16";
import { DataTable, DataColumns } from "./data-table";
-import { DataTableFilters } from "../data-table-filters/data-table-filters";
+import { DataTableFilters } from "~/components/data-table-filters/data-table-filters";
import { SortDirection, createDataColumn } from "./data-column";
-import { DataTableDefaultView } from '~/components/data-table-default-view/data-table-default-view';
+import { DataTableFiltersPopover } from '~/components/data-table-filters/data-table-filters-popover';
+import { createTree, setNode, initTreeNode } from '~/models/tree';
+import { DataTableFilterItem } from "~/components/data-table-filters/data-table-filters-tree";
configure({ adapter: new Adapter() });
it("passes sorting props to <TableSortLabel />", () => {
const columns: DataColumns<string> = [
createDataColumn({
- name: "Column 1",
- sortDirection: SortDirection.ASC,
- selected: true,
- configurable: true,
- render: (item) => <Typography>{item}</Typography>
- })];
+ name: "Column 1",
+ sortDirection: SortDirection.ASC,
+ selected: true,
+ configurable: true,
+ render: (item) => <Typography>{item}</Typography>
+ })];
const onSortToggle = jest.fn();
const dataTable = mount(<DataTable
columns={columns}
expect(dataTable.find(DataTableFilters)).toHaveLength(0);
});
- it("passes filter props to <DataTableFilter />", () => {
+ it("passes filter props to <DataTableFiltersPopover />", () => {
+ const filters = pipe(
+ () => createTree<DataTableFilterItem>(),
+ setNode(initTreeNode({ id: 'filter', value: { name: 'filter' } }))
+ );
const columns: DataColumns<string> = [{
name: "Column 1",
sortDirection: SortDirection.ASC,
selected: true,
configurable: true,
- filters: [{ name: "Filter 1", selected: true }],
+ filters: filters(),
render: (item) => <Typography>{item}</Typography>
}];
const onFiltersChange = jest.fn();
onRowDoubleClick={jest.fn()}
onSortToggle={jest.fn()}
onContextMenu={jest.fn()} />);
- expect(dataTable.find(DataTableFilters).prop("filters")).toBe(columns[0].filters);
- dataTable.find(DataTableFilters).prop("onChange")([]);
+ expect(dataTable.find(DataTableFiltersPopover).prop("filters")).toBe(columns[0].filters);
+ dataTable.find(DataTableFiltersPopover).prop("onChange")([]);
expect(onFiltersChange).toHaveBeenCalledWith([], columns[0]);
});
import * as React from 'react';
import { Table, TableBody, TableRow, TableCell, TableHead, TableSortLabel, StyleRulesCallback, Theme, WithStyles, withStyles } from '@material-ui/core';
import { DataColumn, SortDirection } from './data-column';
-import { DataTableFilters, DataTableFilterItem } from "../data-table-filters/data-table-filters";
import { DataTableDefaultView } from '../data-table-default-view/data-table-default-view';
+import { DataTableFilters } from '../data-table-filters/data-table-filters-tree';
+import { DataTableFiltersPopover } from '../data-table-filters/data-table-filters-popover';
+import { countNodes } from '~/models/tree';
-export type DataColumns<T, F extends DataTableFilterItem = DataTableFilterItem> = Array<DataColumn<T, F>>;
+export type DataColumns<T> = Array<DataColumn<T>>;
export interface DataTableDataProps<T> {
items: T[];
onContextMenu: (event: React.MouseEvent<HTMLElement>, item: T) => void;
onRowDoubleClick: (event: React.MouseEvent<HTMLTableRowElement>, item: T) => void;
onSortToggle: (column: DataColumn<T>) => void;
- onFiltersChange: (filters: DataTableFilterItem[], column: DataColumn<T>) => void;
+ onFiltersChange: (filters: DataTableFilters, column: DataColumn<T>) => void;
extractKey?: (item: T) => React.Key;
working?: boolean;
defaultView?: React.ReactNode;
return <TableCell key={key || index}>
{renderHeader ?
renderHeader() :
- filters.length > 0
- ? <DataTableFilters
+ countNodes(filters) > 0
+ ? <DataTableFiltersPopover
name={`${name} filters`}
onChange={filters =>
onFiltersChange &&
onFiltersChange(filters, column)}
filters={filters}>
{name}
- </DataTableFilters>
+ </DataTableFiltersPopover>
: sortDirection
? <TableSortLabel
active={sortDirection !== SortDirection.NONE}
onContextMenu: (event: React.MouseEvent<HTMLElement>, item: TreeItem<T>) => void;
render: (item: TreeItem<T>, level?: number) => ReactElement<{}>;
showSelection?: boolean | ((item: TreeItem<T>) => boolean);
+ levelIndentation?: number;
+ itemRightPadding?: number;
toggleItemActive: (event: React.MouseEvent<HTMLElement>, item: TreeItem<T>) => void;
toggleItemOpen: (event: React.MouseEvent<HTMLElement>, item: TreeItem<T>) => void;
toggleItemSelection?: (event: React.MouseEvent<HTMLElement>, item: TreeItem<T>) => void;
? this.props.showSelection
: () => this.props.showSelection ? true : false;
+ const { levelIndentation = 20, itemRightPadding = 20 } = this.props;
+
return <List component="div" className={list}>
{items && items.map((it: TreeItem<T>, idx: number) =>
<div key={`item/${level}/${idx}`}>
- <ListItem button className={listItem} style={{ paddingLeft: (level + 1) * 20 }}
+ <ListItem button className={listItem}
+ style={{
+ paddingLeft: (level + 1) * levelIndentation,
+ paddingRight: itemRightPadding,
+ }}
disableRipple={disableRipple}
onClick={event => toggleItemActive(event, it)}
onContextMenu={this.handleRowContextMenu(it)}>
export const getCollectionUrl = (uuid: string) => {
return `/collections/${uuid}`;
};
+
+export enum CollectionType {
+ GENERAL = 'nil',
+ OUTPUT = 'output',
+ LOG = 'log',
+}
export const getNodeDescendants = (id: string, limit = Infinity) => <T>(tree: Tree<T>) =>
mapIdsToNodes(getNodeDescendantsIds(id, limit)(tree))(tree);
+export const countNodes = <T>(tree: Tree<T>) =>
+ getNodeDescendantsIds('')(tree).length;
+
+export const countChildren = (id: string) => <T>(tree: Tree<T>) =>
+ getNodeChildren('')(tree).length;
+
export const getNodeDescendantsIds = (id: string, limit = Infinity) => <T>(tree: Tree<T>): string[] => {
const node = getNode(id)(tree);
const children = node ? node.children :
ids.map(id => getNode(id)(tree)).filter((node): node is TreeNode<T> => node !== undefined);
export const activateNode = (id: string) => <T>(tree: Tree<T>) =>
- mapTree(node => node.id === id ? { ...node, active: true } : { ...node, active: false })(tree);
+ mapTree((node: TreeNode<T>) => node.id === id ? { ...node, active: true } : { ...node, active: false })(tree);
export const deactivateNode = <T>(tree: Tree<T>) =>
- mapTree(node => node.active ? { ...node, active: false } : node)(tree);
+ mapTree((node: TreeNode<T>) => node.active ? { ...node, active: false } : node)(tree);
export const expandNode = (...ids: string[]) => <T>(tree: Tree<T>) =>
- mapTree(node => ids.some(id => id === node.id) ? { ...node, expanded: true } : node)(tree);
+ mapTree((node: TreeNode<T>) => ids.some(id => id === node.id) ? { ...node, expanded: true } : node)(tree);
export const collapseNode = (...ids: string[]) => <T>(tree: Tree<T>) =>
- mapTree(node => ids.some(id => id === node.id) ? { ...node, expanded: false } : node)(tree);
+ mapTree((node: TreeNode<T>) => ids.some(id => id === node.id) ? { ...node, expanded: false } : node)(tree);
export const toggleNodeCollapse = (...ids: string[]) => <T>(tree: Tree<T>) =>
- mapTree(node => ids.some(id => id === node.id) ? { ...node, expanded: !node.expanded } : node)(tree);
+ mapTree((node: TreeNode<T>) => ids.some(id => id === node.id) ? { ...node, expanded: !node.expanded } : node)(tree);
export const setNodeStatus = (id: string) => (status: TreeNodeStatus) => <T>(tree: Tree<T>) => {
const node = getNode(id)(tree);
return ids.reduce((tree, id) => deselectNode(id)(tree), tree);
};
+export const getSelectedNodes = <T>(tree: Tree<T>) =>
+ getNodeDescendants('')(tree)
+ .filter(node => node.selected);
+
export const initTreeNode = <T>(data: Pick<TreeNode<T>, 'id' | 'value'> & { parent?: string }): TreeNode<T> => ({
children: [],
active: false,
).toEqual(`["etag","in",["etagValue1","etagValue2"]]`);
});
+ it("should add 'not in' rule for set", () => {
+ expect(
+ filters.addNotIn("etag", ["etagValue1", "etagValue2"]).getFilters()
+ ).toEqual(`["etag","not in",["etagValue1","etagValue2"]]`);
+ });
+
it("should add multiple rules", () => {
expect(
filters
expect(new FilterBuilder()
.addIn("etag", ["etagValue1", "etagValue2"], "myPrefix")
.getFilters())
- .toEqual(`["my_prefix.etag","in",["etagValue1","etagValue2"]]`);
+ .toEqual(`["myPrefix.etag","in",["etagValue1","etagValue2"]]`);
});
});
return this.addCondition(field, "in", value, "", "", resourcePrefix);
}
+ public addNotIn(field: string, value?: string | string[], resourcePrefix?: string) {
+ return this.addCondition(field, "not in", value, "", "", resourcePrefix);
+ }
+
public addGt(field: string, value?: string, resourcePrefix?: string) {
return this.addCondition(field, ">", value, "", "", resourcePrefix);
}
}
const resPrefix = resourcePrefix
- ? _.snakeCase(resourcePrefix) + "."
+ ? resourcePrefix + "."
: "";
this.filters += `${this.filters ? "," : ""}["${resPrefix}${_.snakeCase(field)}","${cond}",${value}]`;
// SPDX-License-Identifier: AGPL-3.0
import { unionize, ofType, UnionOf } from "~/common/unionize";
-import { DataTableFilterItem } from "~/components/data-table-filters/data-table-filters";
import { DataColumns } from "~/components/data-table/data-table";
+import { DataTableFilters } from '~/components/data-table-filters/data-table-filters-tree';
export const dataExplorerActions = unionize({
RESET_PAGINATION: ofType<{ id: string }>(),
REQUEST_ITEMS: ofType<{ id: string }>(),
SET_COLUMNS: ofType<{ id: string, columns: DataColumns<any> }>(),
- SET_FILTERS: ofType<{ id: string, columnName: string, filters: DataTableFilterItem[] }>(),
+ SET_FILTERS: ofType<{ id: string, columnName: string, filters: DataTableFilters }>(),
SET_ITEMS: ofType<{ id: string, items: any[], page: number, rowsPerPage: number, itemsAvailable: number }>(),
SET_PAGE: ofType<{ id: string, page: number }>(),
SET_ROWS_PER_PAGE: ofType<{ id: string, rowsPerPage: number }>(),
dataExplorerActions.REQUEST_ITEMS({ id }),
SET_COLUMNS: (payload: { columns: DataColumns<any> }) =>
dataExplorerActions.SET_COLUMNS({ ...payload, id }),
- SET_FILTERS: (payload: { columnName: string, filters: DataTableFilterItem[] }) =>
+ SET_FILTERS: (payload: { columnName: string, filters: DataTableFilters }) =>
dataExplorerActions.SET_FILTERS({ ...payload, id }),
SET_ITEMS: (payload: { items: any[], page: number, rowsPerPage: number, itemsAvailable: number }) =>
dataExplorerActions.SET_ITEMS({ ...payload, id }),
import { Dispatch, MiddlewareAPI } from "redux";
import { RootState } from "../store";
import { DataColumns } from "~/components/data-table/data-table";
-import { DataTableFilterItem } from "~/components/data-table-filters/data-table-filters";
import { DataExplorer } from './data-explorer-reducer';
import { ListResults } from '~/services/common-service/common-resource-service';
+import { createTree } from "~/models/tree";
+import { DataTableFilters } from "~/components/data-table-filters/data-table-filters-tree";
export abstract class DataExplorerMiddlewareService {
protected readonly id: string;
return this.id;
}
- public getColumnFilters<T, F extends DataTableFilterItem>(columns: DataColumns<T, F>, columnName: string): F[] {
- const column = columns.find(c => c.name === columnName);
- return column ? column.filters.filter(f => f.selected) : [];
+ public getColumnFilters<T>(columns: DataColumns<T>, columnName: string): DataTableFilters {
+ return getDataExplorerColumnFilters(columns, columnName);
}
abstract requestItems(api: MiddlewareAPI<Dispatch, RootState>): void;
}
-export const getDataExplorerColumnFilters = <T, F extends DataTableFilterItem>(columns: DataColumns<T, F>, columnName: string): F[] => {
+export const getDataExplorerColumnFilters = <T>(columns: DataColumns<T>, columnName: string): DataTableFilters => {
const column = columns.find(c => c.name === columnName);
- return column ? column.filters.filter(f => f.selected) : [];
+ return column ? column.filters : createTree();
};
-export const dataExplorerToListParams = <R>(dataExplorer: DataExplorer) => ({
+export const dataExplorerToListParams = (dataExplorer: DataExplorer) => ({
limit: dataExplorer.rowsPerPage,
offset: dataExplorer.page * dataExplorer.rowsPerPage,
});
import { DataColumns } from "~/components/data-table/data-table";
import { dataExplorerActions } from "./data-explorer-action";
import { SortDirection } from "~/components/data-table/data-column";
+import { createTree } from '~/models/tree';
+import { DataTableFilterItem } from "~/components/data-table-filters/data-table-filters-tree";
describe("DataExplorerMiddleware", () => {
selected: true,
configurable: false,
sortDirection: SortDirection.NONE,
- filters: [],
+ filters: createTree<DataTableFilterItem>(),
render: jest.fn()
}],
requestItems: jest.fn(),
selected: true,
configurable: false,
sortDirection: SortDirection.NONE,
- filters: [],
+ filters: createTree<DataTableFilterItem>(),
render: jest.fn()
}],
requestItems: jest.fn(),
};
const next = jest.fn();
const middleware = dataExplorerMiddleware(service)(api)(next);
- middleware(dataExplorerActions.SET_FILTERS({ id: service.getId(), columnName: "", filters: [] }));
+ middleware(dataExplorerActions.SET_FILTERS({ id: service.getId(), columnName: "", filters: createTree() }));
expect(api.dispatch).toHaveBeenCalledTimes(2);
});
import { DataColumn, toggleSortDirection, resetSortDirection, SortDirection } from "~/components/data-table/data-column";
import { dataExplorerActions, DataExplorerAction } from "./data-explorer-action";
-import { DataTableFilterItem } from "~/components/data-table-filters/data-table-filters";
import { DataColumns } from "~/components/data-table/data-table";
+import { DataTableFilters } from "~/components/data-table-filters/data-table-filters-tree";
export interface DataExplorer {
columns: DataColumns<any>;
? { ...column, selected: !column.selected }
: column;
-const setFilters = (columnName: string, filters: DataTableFilterItem[]) =>
+const setFilters = (columnName: string, filters: DataTableFilters) =>
(column: DataColumn<any>) => column.name === columnName
? { ...column, filters }
: column;
//
// SPDX-License-Identifier: AGPL-3.0
-import { DataExplorerMiddlewareService } from "../data-explorer/data-explorer-middleware-service";
-import { FavoritePanelColumnNames, FavoritePanelFilter } from "~/views/favorite-panel/favorite-panel";
+import { DataExplorerMiddlewareService } from "~/store/data-explorer/data-explorer-middleware-service";
+import { FavoritePanelColumnNames } from "~/views/favorite-panel/favorite-panel";
import { RootState } from "../store";
import { DataColumns } from "~/components/data-table/data-table";
import { ServiceRepository } from "~/services/services";
import { getDataExplorer } from "~/store/data-explorer/data-explorer-reducer";
import { loadMissingProcessesInformation } from "~/store/project-panel/project-panel-middleware-service";
import { getSortColumn } from "~/store/data-explorer/data-explorer-reducer";
+import { getDataExplorerColumnFilters } from '~/store/data-explorer/data-explorer-middleware-service';
+import { serializeSimpleObjectTypeFilters } from '../resource-type-filters/resource-type-filters';
export class FavoritePanelMiddlewareService extends DataExplorerMiddlewareService {
constructor(private services: ServiceRepository, id: string) {
if (!dataExplorer) {
api.dispatch(favoritesPanelDataExplorerIsNotSet());
} else {
- const columns = dataExplorer.columns as DataColumns<string, FavoritePanelFilter>;
+ const columns = dataExplorer.columns as DataColumns<string>;
const sortColumn = getSortColumn(dataExplorer);
- const typeFilters = this.getColumnFilters(columns, FavoritePanelColumnNames.TYPE);
+ const typeFilters = serializeSimpleObjectTypeFilters(getDataExplorerColumnFilters(columns, FavoritePanelColumnNames.TYPE));
+
const linkOrder = new OrderBuilder<LinkResource>();
const contentOrder = new OrderBuilder<GroupContentsResource>();
linkOrder: linkOrder.getOrder(),
contentOrder: contentOrder.getOrder(),
filters: new FilterBuilder()
- .addIsA("headUuid", typeFilters.map(filter => filter.type))
.addILike("name", dataExplorer.searchValue)
- .getFilters()
+ .addIsA("headUuid", typeFilters)
+ .getFilters(),
+
});
api.dispatch(progressIndicatorActions.PERSIST_STOP_WORKING(this.getId()));
api.dispatch(resourcesActions.SET_RESOURCES(response.items));
//
// SPDX-License-Identifier: AGPL-3.0
-import { bindDataExplorerActions } from "../data-explorer/data-explorer-action";
-import { propertiesActions } from "~/store/properties/properties-actions";
import { Dispatch } from 'redux';
-import { ServiceRepository } from "~/services/services";
+import { bindDataExplorerActions } from "~/store/data-explorer/data-explorer-action";
+import { propertiesActions } from "~/store/properties/properties-actions";
import { RootState } from '~/store/store';
import { getProperty } from "~/store/properties/properties";
export const projectPanelActions = bindDataExplorerActions(PROJECT_PANEL_ID);
export const openProjectPanel = (projectUuid: string) =>
- (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
+ (dispatch: Dispatch) => {
dispatch(propertiesActions.SET_PROPERTY({ key: PROJECT_PANEL_CURRENT_UUID, value: projectUuid }));
dispatch(projectPanelActions.REQUEST_ITEMS());
};
import { ServiceRepository } from "~/services/services";
import { SortDirection } from "~/components/data-table/data-column";
import { OrderBuilder, OrderDirection } from "~/services/api/order-builder";
-import { FilterBuilder } from "~/services/api/filter-builder";
+import { FilterBuilder, joinFilters } from "~/services/api/filter-builder";
import { GroupContentsResource, GroupContentsResourcePrefix } from "~/services/groups-service/groups-service";
import { updateFavorites } from "../favorites/favorites-actions";
import { PROJECT_PANEL_CURRENT_UUID, IS_PROJECT_PANEL_TRASHED, projectPanelActions } from './project-panel-action';
import { CollectionResource } from "~/models/collection";
import { resourcesDataActions } from "~/store/resources-data/resources-data-actions";
import { getSortColumn } from "~/store/data-explorer/data-explorer-reducer";
+import { serializeResourceTypeFilters } from '../resource-type-filters/resource-type-filters';
export class ProjectPanelMiddlewareService extends DataExplorerMiddlewareService {
constructor(private services: ServiceRepository, id: string) {
});
export const getFilters = (dataExplorer: DataExplorer) => {
- const columns = dataExplorer.columns as DataColumns<string, ProjectPanelFilter>;
- const typeFilters = getDataExplorerColumnFilters(columns, ProjectPanelColumnNames.TYPE);
- const statusFilters = getDataExplorerColumnFilters(columns, ProjectPanelColumnNames.STATUS);
- return new FilterBuilder()
- .addIsA("uuid", typeFilters.map(f => f.type))
+ const columns = dataExplorer.columns as DataColumns<string>;
+ const typeFilters = serializeResourceTypeFilters(getDataExplorerColumnFilters(columns, ProjectPanelColumnNames.TYPE));
+
+ // TODO: Extract group contents name filter
+ const nameFilters = new FilterBuilder()
.addILike("name", dataExplorer.searchValue, GroupContentsResourcePrefix.COLLECTION)
.addILike("name", dataExplorer.searchValue, GroupContentsResourcePrefix.PROCESS)
.addILike("name", dataExplorer.searchValue, GroupContentsResourcePrefix.PROJECT)
.getFilters();
+
+ return joinFilters(
+ typeFilters,
+ nameFilters,
+ );
+ // TODO: Restore process status filters
+ // const statusFilters = getDataExplorerColumnFilters(columns, ProjectPanelColumnNames.STATUS);
};
export const getOrder = (dataExplorer: DataExplorer) => {
--- /dev/null
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import { getInitialResourceTypeFilters, serializeResourceTypeFilters, ObjectTypeFilter, CollectionTypeFilter } from './resource-type-filters';
+import { ResourceKind } from '~/models/resource';
+import { deselectNode } from '~/models/tree';
+import { pipe } from 'lodash/fp';
+
+describe("serializeResourceTypeFilters", () => {
+ it("should serialize all filters", () => {
+ const filters = getInitialResourceTypeFilters();
+ const serializedFilters = serializeResourceTypeFilters(filters);
+ expect(serializedFilters)
+ .toEqual(`["uuid","is_a",["${ResourceKind.PROJECT}","${ResourceKind.PROCESS}","${ResourceKind.COLLECTION}"]]`);
+ });
+
+ it("should serialize all but collection filters", () => {
+ const filters = deselectNode(ObjectTypeFilter.COLLECTION)(getInitialResourceTypeFilters());
+ const serializedFilters = serializeResourceTypeFilters(filters);
+ expect(serializedFilters)
+ .toEqual(`["uuid","is_a",["${ResourceKind.PROJECT}","${ResourceKind.PROCESS}"]]`);
+ });
+
+ it("should serialize output collections and projects", () => {
+ const filters = pipe(
+ () => getInitialResourceTypeFilters(),
+ deselectNode(ObjectTypeFilter.PROCESS),
+ deselectNode(CollectionTypeFilter.GENERAL_COLLECTION),
+ deselectNode(CollectionTypeFilter.LOG_COLLECTION),
+ )();
+
+ const serializedFilters = serializeResourceTypeFilters(filters);
+ expect(serializedFilters)
+ .toEqual(`["uuid","is_a",["${ResourceKind.PROJECT}","${ResourceKind.COLLECTION}"]],["collections.properties.type","in",["output"]]`);
+ });
+
+ it("should serialize general and log collections", () => {
+ const filters = pipe(
+ () => getInitialResourceTypeFilters(),
+ deselectNode(ObjectTypeFilter.PROJECT),
+ deselectNode(ObjectTypeFilter.PROCESS),
+ deselectNode(CollectionTypeFilter.OUTPUT_COLLECTION)
+ )();
+
+ const serializedFilters = serializeResourceTypeFilters(filters);
+ expect(serializedFilters)
+ .toEqual(`["uuid","is_a",["${ResourceKind.COLLECTION}"]],["collections.properties.type","not in",["output"]]`);
+ });
+});
--- /dev/null
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import { difference, pipe, values, includes, __ } from 'lodash/fp';
+import { createTree, setNode, TreeNodeStatus, TreeNode, Tree } from '~/models/tree';
+import { DataTableFilterItem, DataTableFilters } from '~/components/data-table-filters/data-table-filters-tree';
+import { ResourceKind } from '~/models/resource';
+import { FilterBuilder } from '~/services/api/filter-builder';
+import { getSelectedNodes } from '~/models/tree';
+import { CollectionType } from '~/models/collection';
+import { GroupContentsResourcePrefix } from '~/services/groups-service/groups-service';
+
+export enum ObjectTypeFilter {
+ PROJECT = 'Project',
+ PROCESS = 'Process',
+ COLLECTION = 'Data Collection',
+}
+
+export enum CollectionTypeFilter {
+ GENERAL_COLLECTION = 'General',
+ OUTPUT_COLLECTION = 'Output',
+ LOG_COLLECTION = 'Log',
+}
+
+const initFilter = (name: string, parent = '') =>
+ setNode<DataTableFilterItem>({
+ id: name,
+ value: { name },
+ parent,
+ children: [],
+ active: false,
+ selected: true,
+ expanded: false,
+ status: TreeNodeStatus.LOADED,
+ });
+
+export const getSimpleObjectTypeFilters = pipe(
+ (): DataTableFilters => createTree<DataTableFilterItem>(),
+ initFilter(ObjectTypeFilter.PROJECT),
+ initFilter(ObjectTypeFilter.PROCESS),
+ initFilter(ObjectTypeFilter.COLLECTION),
+);
+
+export const getInitialResourceTypeFilters = pipe(
+ (): DataTableFilters => createTree<DataTableFilterItem>(),
+ initFilter(ObjectTypeFilter.PROJECT),
+ initFilter(ObjectTypeFilter.PROCESS),
+ initFilter(ObjectTypeFilter.COLLECTION),
+ initFilter(CollectionTypeFilter.GENERAL_COLLECTION, ObjectTypeFilter.COLLECTION),
+ initFilter(CollectionTypeFilter.OUTPUT_COLLECTION, ObjectTypeFilter.COLLECTION),
+ initFilter(CollectionTypeFilter.LOG_COLLECTION, ObjectTypeFilter.COLLECTION),
+);
+
+
+const createFiltersBuilder = (filters: DataTableFilters) =>
+ ({ fb: new FilterBuilder(), selectedFilters: getSelectedNodes(filters) });
+
+const getMatchingFilters = (values: string[], filters: TreeNode<DataTableFilterItem>[]) =>
+ filters
+ .map(f => f.id)
+ .filter(includes(__, values));
+
+const objectTypeToResourceKind = (type: ObjectTypeFilter) => {
+ switch (type) {
+ case ObjectTypeFilter.PROJECT:
+ return ResourceKind.PROJECT;
+ case ObjectTypeFilter.PROCESS:
+ return ResourceKind.PROCESS;
+ case ObjectTypeFilter.COLLECTION:
+ return ResourceKind.COLLECTION;
+ }
+};
+
+const serializeObjectTypeFilters = ({ fb, selectedFilters }: ReturnType<typeof createFiltersBuilder>) => {
+ const collectionFilters = getMatchingFilters(values(CollectionTypeFilter), selectedFilters);
+ const typeFilters = pipe(
+ () => new Set(getMatchingFilters(values(ObjectTypeFilter), selectedFilters)),
+ set => collectionFilters.length > 0
+ ? set.add(ObjectTypeFilter.COLLECTION)
+ : set,
+ set => Array.from(set)
+ )();
+
+ return {
+ fb: typeFilters.length > 0
+ ? fb.addIsA('uuid', typeFilters.map(objectTypeToResourceKind))
+ : fb,
+ selectedFilters,
+ };
+};
+
+const collectionTypeToPropertyValue = (type: CollectionTypeFilter) => {
+ switch (type) {
+ case CollectionTypeFilter.GENERAL_COLLECTION:
+ return CollectionType.GENERAL;
+ case CollectionTypeFilter.OUTPUT_COLLECTION:
+ return CollectionType.OUTPUT;
+ case CollectionTypeFilter.LOG_COLLECTION:
+ return CollectionType.LOG;
+ }
+};
+
+const serializeCollectionTypeFilters = ({ fb, selectedFilters }: ReturnType<typeof createFiltersBuilder>) => pipe(
+ () => getMatchingFilters(values(CollectionTypeFilter), selectedFilters),
+ filters => filters.map(collectionTypeToPropertyValue),
+ mappedFilters => ({
+ fb: buildCollectiomTypeFilters({ fb, filters: mappedFilters }),
+ selectedFilters
+ })
+)();
+
+const COLLECTION_TYPES = values(CollectionType);
+
+const NON_GENERAL_COLLECTION_TYPES = difference(COLLECTION_TYPES, [CollectionType.GENERAL]);
+
+const COLLECTION_PROPERTIES_PREFIX = `${GroupContentsResourcePrefix.COLLECTION}.properties`;
+
+const buildCollectiomTypeFilters = ({ fb, filters }: { fb: FilterBuilder, filters: CollectionType[] }) => {
+ switch (true) {
+ case filters.length === 0 || filters.length === COLLECTION_TYPES.length:
+ return fb;
+ case includes(CollectionType.GENERAL, filters):
+ return fb.addNotIn('type', difference(NON_GENERAL_COLLECTION_TYPES, filters), COLLECTION_PROPERTIES_PREFIX);
+ default:
+ return fb.addIn('type', filters, COLLECTION_PROPERTIES_PREFIX);
+ }
+};
+
+export const serializeResourceTypeFilters = pipe(
+ createFiltersBuilder,
+ serializeObjectTypeFilters,
+ serializeCollectionTypeFilters,
+ ({ fb }) => fb.getFilters(),
+);
+
+export const serializeSimpleObjectTypeFilters = (filters: Tree<DataTableFilterItem>) => {
+ return getSelectedNodes(filters)
+ .map(f => f.id)
+ .map(objectTypeToResourceKind);
+};
import { updateResources } from "~/store/resources/resources-actions";
import { progressIndicatorActions } from "~/store/progress-indicator/progress-indicator-actions";
import { getSortColumn } from "~/store/data-explorer/data-explorer-reducer";
+import { serializeResourceTypeFilters } from '~/store//resource-type-filters/resource-type-filters';
+import { getDataExplorerColumnFilters } from '~/store/data-explorer/data-explorer-middleware-service';
+import { joinFilters } from '../../services/api/filter-builder';
export class TrashPanelMiddlewareService extends DataExplorerMiddlewareService {
constructor(private services: ServiceRepository, id: string) {
async requestItems(api: MiddlewareAPI<Dispatch, RootState>) {
const dataExplorer = api.getState().dataExplorer[this.getId()];
- const columns = dataExplorer.columns as DataColumns<string, TrashPanelFilter>;
+ const columns = dataExplorer.columns as DataColumns<string>;
const sortColumn = getSortColumn(dataExplorer);
- const typeFilters = this.getColumnFilters(columns, TrashPanelColumnNames.TYPE);
+
+ const typeFilters = serializeResourceTypeFilters(getDataExplorerColumnFilters(columns, ProjectPanelColumnNames.TYPE));
+
+ const otherFilters = new FilterBuilder()
+ .addILike("name", dataExplorer.searchValue, GroupContentsResourcePrefix.COLLECTION)
+ .addILike("name", dataExplorer.searchValue, GroupContentsResourcePrefix.PROCESS)
+ .addILike("name", dataExplorer.searchValue, GroupContentsResourcePrefix.PROJECT)
+ .addEqual("is_trashed", true)
+ .getFilters();
+
+ const filters = joinFilters(
+ typeFilters,
+ otherFilters,
+ );
const order = new OrderBuilder<ProjectResource>();
.contents(userUuid, {
...dataExplorerToListParams(dataExplorer),
order: order.getOrder(),
- filters: new FilterBuilder()
- .addIsA("uuid", typeFilters.map(f => f.type))
- .addILike("name", dataExplorer.searchValue, GroupContentsResourcePrefix.COLLECTION)
- .addILike("name", dataExplorer.searchValue, GroupContentsResourcePrefix.PROJECT)
- .addEqual("is_trashed", true)
- .getFilters(),
+ filters,
recursive: true,
includeTrash: true
});
import { Dispatch } from "redux";
import { dataExplorerActions } from "~/store/data-explorer/data-explorer-action";
import { DataColumn } from "~/components/data-table/data-column";
-import { DataTableFilterItem } from "~/components/data-table-filters/data-table-filters";
import { DataColumns } from "~/components/data-table/data-table";
+import { DataTableFilters } from '~/components/data-table-filters/data-table-filters-tree';
interface Props {
id: string;
dispatch(dataExplorerActions.TOGGLE_SORT({ id, columnName: column.name }));
},
- onFiltersChange: (filters: DataTableFilter
Item[], column: DataColumn<any>) => {
+ onFiltersChange: (filters: DataTableFilter
s, column: DataColumn<any>) => {
dispatch(dataExplorerActions.SET_FILTERS({ id, columnName: column.name, filters }));
},
import { DataTableFilterItem } from '~/components/data-table-filters/data-table-filters';
import { SortDirection } from '~/components/data-table/data-column';
import { ResourceKind } from '~/models/resource';
-import { resourceLabel } from '~/common/labels';
import { ArvadosTheme } from '~/common/custom-theme';
import { FAVORITE_PANEL_ID } from "~/store/favorite-panel/favorite-panel-action";
import {
import { loadDetailsPanel } from '~/store/details-panel/details-panel-action';
import { navigateTo } from '~/store/navigation/navigation-action';
import { ContainerRequestState } from "~/models/container-request";
-import { FavoritesState } from '../../store/favorites/favorites-reducer';
+import { FavoritesState } from '~/store/favorites/favorites-reducer';
import { RootState } from '~/store/store';
import { DataTableDefaultView } from '~/components/data-table-default-view/data-table-default-view';
+import { createTree } from '~/models/tree';
+import { getSimpleObjectTypeFilters } from '~/store/resource-type-filters/resource-type-filters';
type CssRules = "toolbar" | "button";
type: ResourceKind | ContainerRequestState;
}
-export const favoritePanelColumns: DataColumns<string, FavoritePanelFilter> = [
+export const favoritePanelColumns: DataColumns<string> = [
{
name: FavoritePanelColumnNames.NAME,
selected: true,
configurable: true,
sortDirection: SortDirection.ASC,
- filters: [],
+ filters: createTree(),
render: uuid => <ResourceName uuid={uuid} />
},
{
name: "Status",
selected: true,
configurable: true,
- filters: [],
+ filters: createTree(),
render: uuid => <ProcessStatus uuid={uuid} />
},
{
name: FavoritePanelColumnNames.TYPE,
selected: true,
configurable: true,
- filters: [
- {
- name: resourceLabel(ResourceKind.COLLECTION),
- selected: true,
- type: ResourceKind.COLLECTION
- },
- {
- name: resourceLabel(ResourceKind.PROCESS),
- selected: true,
- type: ResourceKind.PROCESS
- },
- {
- name: resourceLabel(ResourceKind.PROJECT),
- selected: true,
- type: ResourceKind.PROJECT
- }
- ],
+ filters: getSimpleObjectTypeFilters(),
render: uuid => <ResourceType uuid={uuid} />
},
{
name: FavoritePanelColumnNames.OWNER,
selected: true,
configurable: true,
- filters: [],
+ filters: createTree(),
render: uuid => <ResourceOwner uuid={uuid} />
},
{
name: FavoritePanelColumnNames.FILE_SIZE,
selected: true,
configurable: true,
- filters: [],
+ filters: createTree(),
render: uuid => <ResourceFileSize uuid={uuid} />
},
{
selected: true,
configurable: true,
sortDirection: SortDirection.NONE,
- filters: [],
+ filters: createTree(),
render: uuid => <ResourceLastModifiedDate uuid={uuid} />
}
];
// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { DataExplorer } from "~/views-components/data-explorer/data-explorer";
+import withStyles from "@material-ui/core/styles/withStyles";
import { DispatchProp, connect } from 'react-redux';
-import { DataColumns } from '~/components/data-table/data-table';
import { RouteComponentProps } from 'react-router';
+import { StyleRulesCallback, WithStyles } from "@material-ui/core";
+
+import { DataExplorer } from "~/views-components/data-explorer/data-explorer";
+import { DataColumns } from '~/components/data-table/data-table';
import { RootState } from '~/store/store';
import { DataTableFilterItem } from '~/components/data-table-filters/data-table-filters';
import { ContainerRequestState } from '~/models/container-request';
import { SortDirection } from '~/components/data-table/data-column';
import { ResourceKind, Resource } from '~/models/resource';
-import { resourceLabel } from '~/common/labels';
import { ResourceFileSize, ResourceLastModifiedDate, ProcessStatus, ResourceType, ResourceOwner } from '~/views-components/data-explorer/renderers';
import { ProjectIcon } from '~/components/icon/icon';
import { ResourceName } from '~/views-components/data-explorer/renderers';
import { getProperty } from '~/store/properties/properties';
import { PROJECT_PANEL_CURRENT_UUID } from '~/store/project-panel/project-panel-action';
import { DataTableDefaultView } from '~/components/data-table-default-view/data-table-default-view';
-import { StyleRulesCallback, WithStyles } from "@material-ui/core";
import { ArvadosTheme } from "~/common/custom-theme";
-import withStyles from "@material-ui/core/styles/withStyles";
+import { createTree } from '~/models/tree';
+import { getInitialResourceTypeFilters } from '~/store/resource-type-filters/resource-type-filters';
type CssRules = 'root' | "button";
type: ResourceKind | ContainerRequestState;
}
-export const projectPanelColumns: DataColumns<string, ProjectPanelFilter> = [
+export const projectPanelColumns: DataColumns<string> = [
{
name: ProjectPanelColumnNames.NAME,
selected: true,
configurable: true,
sortDirection: SortDirection.ASC,
- filters: [],
+ filters: createTree(),
render: uuid => <ResourceName uuid={uuid} />
},
{
name: "Status",
selected: true,
configurable: true,
- filters: [],
+ filters: createTree(),
render: uuid => <ProcessStatus uuid={uuid} />,
},
{
name: ProjectPanelColumnNames.TYPE,
selected: true,
configurable: true,
- filters: [
- {
- name: resourceLabel(ResourceKind.COLLECTION),
- selected: true,
- type: ResourceKind.COLLECTION
- },
- {
- name: resourceLabel(ResourceKind.PROCESS),
- selected: true,
- type: ResourceKind.PROCESS
- },
- {
- name: resourceLabel(ResourceKind.PROJECT),
- selected: true,
- type: ResourceKind.PROJECT
- }
- ],
+ filters: getInitialResourceTypeFilters(),
render: uuid => <ResourceType uuid={uuid} />
},
{
name: ProjectPanelColumnNames.OWNER,
selected: true,
configurable: true,
- filters: [],
+ filters: createTree(),
render: uuid => <ResourceOwner uuid={uuid} />
},
{
name: ProjectPanelColumnNames.FILE_SIZE,
selected: true,
configurable: true,
- filters: [],
+ filters: createTree(),
render: uuid => <ResourceFileSize uuid={uuid} />
},
{
selected: true,
configurable: true,
sortDirection: SortDirection.NONE,
- filters: [],
+ filters: createTree(),
render: uuid => <ResourceLastModifiedDate uuid={uuid} />
}
];
export const PROJECT_PANEL_ID = "projectPanel";
+const DEFAUL_VIEW_MESSAGES = [
+ 'Your project is empty.',
+ 'Please create a project or create a collection and upload a data.',
+];
+
interface ProjectPanelDataProps {
currentItemId: string;
resources: ResourcesState;
dataTableDefaultView={
<DataTableDefaultView
icon={ProjectIcon}
- messages={[
- 'Your project is empty.',
- 'Please create a project or create a collection and upload a data.'
- ]}/>
- }/>
+ messages={DEFAUL_VIEW_MESSAGES} />
+ } />
</div>;
}
ResourceOwner,
ResourceType
} from '~/views-components/data-explorer/renderers';
-
+import { createTree } from '~/models/tree';
+import { getInitialResourceTypeFilters } from '../../store/resource-type-filters/resource-type-filters';
+// TODO: code clean up
export enum SearchResultsPanelColumnNames {
NAME = "Name",
PROJECT = "Project",
type: ResourceKind | ContainerRequestState;
}
-export const searchResultsPanelColumns: DataColumns<string, WorkflowPanelFilter> = [
+export const searchResultsPanelColumns: DataColumns<string> = [
{
name: SearchResultsPanelColumnNames.NAME,
selected: true,
configurable: true,
sortDirection: SortDirection.ASC,
- filters: [],
+ filters: createTree(),
render: (uuid: string) => <ResourceName uuid={uuid} />
},
{
name: SearchResultsPanelColumnNames.PROJECT,
selected: true,
configurable: true,
- filters: [],
+ filters: createTree(),
render: uuid => <ResourceFileSize uuid={uuid} />
},
{
name: SearchResultsPanelColumnNames.STATUS,
selected: true,
configurable: true,
- filters: [],
+ filters: createTree(),
render: uuid => <ProcessStatus uuid={uuid} />
},
{
name: SearchResultsPanelColumnNames.TYPE,
selected: true,
configurable: true,
- filters: [
- {
- name: resourceLabel(ResourceKind.COLLECTION),
- selected: true,
- type: ResourceKind.COLLECTION
- },
- {
- name: resourceLabel(ResourceKind.PROCESS),
- selected: true,
- type: ResourceKind.PROCESS
- },
- {
- name: resourceLabel(ResourceKind.PROJECT),
- selected: true,
- type: ResourceKind.PROJECT
- }
- ],
+ filters: getInitialResourceTypeFilters(),
render: (uuid: string) => <ResourceType uuid={uuid} />,
},
{
name: SearchResultsPanelColumnNames.OWNER,
selected: true,
configurable: true,
- filters: [],
+ filters: createTree(),
render: uuid => <ResourceOwner uuid={uuid} />
},
{
name: SearchResultsPanelColumnNames.FILE_SIZE,
selected: true,
configurable: true,
- filters: [],
+ filters: createTree(),
render: uuid => <ResourceFileSize uuid={uuid} />
},
{
selected: true,
configurable: true,
sortDirection: SortDirection.NONE,
- filters: [],
+ filters: createTree(),
render: uuid => <ResourceLastModifiedDate uuid={uuid} />
}
];
import { Dispatch } from "redux";
import { PanelDefaultView } from '~/components/panel-default-view/panel-default-view';
import { DataTableDefaultView } from '~/components/data-table-default-view/data-table-default-view';
-
+import { createTree } from '~/models/tree';
+import { getInitialResourceTypeFilters } from '../../store/resource-type-filters/resource-type-filters';
+// TODO: code clean up
type CssRules = "toolbar" | "button";
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
</Tooltip>
);
-export const trashPanelColumns: DataColumns<string, TrashPanelFilter> = [
+export const trashPanelColumns: DataColumns<string> = [
{
name: TrashPanelColumnNames.NAME,
selected: true,
configurable: true,
sortDirection: SortDirection.ASC,
- filters: [],
+ filters: createTree(),
render: uuid => <ResourceName uuid={uuid} />
},
{
selected: true,
configurable: true,
sortDirection: SortDirection.NONE,
- filters: [
- {
- name: resourceLabel(ResourceKind.COLLECTION),
- selected: true,
- type: ResourceKind.COLLECTION
- },
- {
- name: resourceLabel(ResourceKind.PROJECT),
- selected: true,
- type: ResourceKind.PROJECT
- }
- ],
+ filters: getInitialResourceTypeFilters(),
render: uuid => <ResourceType uuid={uuid} />,
},
{
selected: true,
configurable: true,
sortDirection: SortDirection.NONE,
- filters: [],
+ filters: createTree(),
render: uuid => <ResourceFileSize uuid={uuid} />
},
{
selected: true,
configurable: true,
sortDirection: SortDirection.NONE,
- filters: [],
+ filters: createTree(),
render: uuid => <ResourceTrashDate uuid={uuid} />
},
{
selected: true,
configurable: true,
sortDirection: SortDirection.NONE,
- filters: [],
+ filters: createTree(),
render: uuid => <ResourceDeleteDate uuid={uuid} />
},
{
selected: true,
configurable: false,
sortDirection: SortDirection.NONE,
- filters: [],
+ filters: createTree(),
render: uuid => <ResourceRestore uuid={uuid} />
}
];
import { Grid, Paper } from '@material-ui/core';
import { WorkflowDetailsCard } from './workflow-description-card';
import { WorkflowResource } from '../../models/workflow';
+import { createTree } from '~/models/tree';
export enum WorkflowPanelColumnNames {
NAME = "Name",
}
};
-export const workflowPanelColumns: DataColumns<string, WorkflowPanelFilter> = [
+export const workflowPanelColumns: DataColumns<string> = [
{
name: WorkflowPanelColumnNames.NAME,
selected: true,
configurable: true,
sortDirection: SortDirection.ASC,
- filters: [],
+ filters: createTree(),
render: (uuid: string) => <RosurceWorkflowName uuid={uuid} />
},
{
name: WorkflowPanelColumnNames.AUTHORISATION,
selected: true,
configurable: true,
- filters: [
- {
- name: resourceStatus(ResourceStatus.PUBLIC),
- selected: true,
- type: ResourceStatus.PUBLIC
- },
- {
- name: resourceStatus(ResourceStatus.PRIVATE),
- selected: true,
- type: ResourceStatus.PRIVATE
- },
- {
- name: resourceStatus(ResourceStatus.SHARED),
- selected: true,
- type: ResourceStatus.SHARED
- }
- ],
+ filters: createTree(),
+ // TODO: restore filters
+ // filters: [
+ // {
+ // name: resourceStatus(ResourceStatus.PUBLIC),
+ // selected: true,
+ // type: ResourceStatus.PUBLIC
+ // },
+ // {
+ // name: resourceStatus(ResourceStatus.PRIVATE),
+ // selected: true,
+ // type: ResourceStatus.PRIVATE
+ // },
+ // {
+ // name: resourceStatus(ResourceStatus.SHARED),
+ // selected: true,
+ // type: ResourceStatus.SHARED
+ // }
+ // ],
render: (uuid: string) => <ResourceWorkflowStatus uuid={uuid} />,
},
{
selected: true,
configurable: true,
sortDirection: SortDirection.NONE,
- filters: [],
+ filters: createTree(),
render: (uuid: string) => <ResourceLastModifiedDate uuid={uuid} />
},
{
name: '',
selected: true,
configurable: false,
- filters: [],
+ filters: createTree(),
render: (uuid: string) => <ResourceShare uuid={uuid} />
}
];
projects / arvados-workbench2.git / commitdiff