// Copyright (C) The Arvados Authors. All rights reserved. // // SPDX-License-Identifier: AGPL-3.0 import React from "react"; import { Grid, Paper, Toolbar, StyleRulesCallback, withStyles, WithStyles, TablePagination, IconButton, Tooltip, Button } from "@material-ui/core"; import { ColumnSelector } from "components/column-selector/column-selector"; import { DataTable, DataColumns, DataTableFetchMode } from "components/data-table/data-table"; import { DataColumn } from "components/data-table/data-column"; import { SearchInput } from "components/search-input/search-input"; import { ArvadosTheme } from "common/custom-theme"; import { MultiselectToolbar } from "components/multiselect-toolbar/MultiselectToolbar"; import { TCheckedList } from "components/data-table/data-table"; import { createTree } from "models/tree"; import { DataTableFilters } from "components/data-table-filters/data-table-filters-tree"; import { CloseIcon, IconType, MaximizeIcon, UnMaximizeIcon, MoreVerticalIcon } from "components/icon/icon"; import { PaperProps } from "@material-ui/core/Paper"; import { MPVPanelProps } from "components/multi-panel-view/multi-panel-view"; type CssRules = "titleWrapper" | "searchBox" | "headerMenu" | "toolbar" | "footer" | "root" | "moreOptionsButton" | "title" | 'subProcessTitle' | "dataTable" | "container"; const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ titleWrapper: { display: "flex", justifyContent: "space-between", }, searchBox: { paddingBottom: 0, }, toolbar: { paddingTop: 0, paddingRight: theme.spacing.unit, paddingLeft: "10px", }, footer: { overflow: "auto", }, root: { height: "100%", }, moreOptionsButton: { padding: 0, }, title: { display: "inline-block", paddingLeft: theme.spacing.unit * 2, paddingTop: theme.spacing.unit * 2, fontSize: "18px", paddingRight: "10px", }, subProcessTitle: { display: "inline-block", paddingLeft: theme.spacing.unit * 2, paddingTop: theme.spacing.unit * 2, fontSize: "18px", flexGrow: 0, paddingRight: "10px", }, dataTable: { height: "100%", overflow: "auto", }, container: { height: "100%", }, headerMenu: { marginLeft: "auto", flexBasis: "initial", flexGrow: 0, }, }); interface DataExplorerDataProps { fetchMode: DataTableFetchMode; items: T[]; itemsAvailable: number; columns: DataColumns; searchLabel?: string; searchValue: string; rowsPerPage: number; rowsPerPageOptions: number[]; page: number; contextMenuColumn: boolean; defaultViewIcon?: IconType; defaultViewMessages?: string[]; working?: boolean; currentRefresh?: string; currentRoute?: string; hideColumnSelector?: boolean; paperProps?: PaperProps; actions?: React.ReactNode; hideSearchInput?: boolean; title?: React.ReactNode; progressBar?: React.ReactNode; paperKey?: string; currentItemUuid: string; elementPath?: string; isMSToolbarVisible: boolean; checkedList: TCheckedList; isNotFound?: boolean; } interface DataExplorerActionProps { onSetColumns: (columns: DataColumns) => void; onSearch: (value: string) => void; onRowClick: (item: T) => void; onRowDoubleClick: (item: T) => void; onColumnToggle: (column: DataColumn) => void; onContextMenu: (event: React.MouseEvent, item: T) => void; onSortToggle: (column: DataColumn) => void; onFiltersChange: (filters: DataTableFilters, column: DataColumn) => void; onChangePage: (page: number) => void; onChangeRowsPerPage: (rowsPerPage: number) => void; onLoadMore: (page: number) => void; extractKey?: (item: T) => React.Key; toggleMSToolbar: (isVisible: boolean) => void; setCheckedListOnStore: (checkedList: TCheckedList) => void; } type DataExplorerProps = DataExplorerDataProps & DataExplorerActionProps & WithStyles & MPVPanelProps; type DataExplorerState = { prevRefresh: string; prevRoute: string; }; export const DataExplorer = withStyles(styles)( class DataExplorerGeneric extends React.Component> { state: DataExplorerState = { prevRefresh: "", prevRoute: "", }; multiSelectToolbarInTitle = !this.props.title && !this.props.progressBar; componentDidUpdate(prevProps: DataExplorerProps) { const currentRefresh = this.props.currentRefresh || ""; const currentRoute = this.props.currentRoute || ""; if (currentRoute !== this.state.prevRoute) { // Component already mounted, but the user comes from a route change, // like browsing through a project hierarchy. this.setState({ prevRoute: currentRoute, }); } if (currentRefresh !== this.state.prevRefresh) { // Component already mounted, but the user just clicked the // refresh button. this.setState({ prevRefresh: currentRefresh, }); } } componentDidMount() { if (this.props.onSetColumns) { this.props.onSetColumns(this.props.columns); } // Component just mounted, so we need to show the loading indicator. this.setState({ prevRefresh: this.props.currentRefresh || "", prevRoute: this.props.currentRoute || "", }); } render() { const { columns, onContextMenu, onFiltersChange, onSortToggle, extractKey, rowsPerPage, rowsPerPageOptions, onColumnToggle, searchLabel, searchValue, onSearch, items, itemsAvailable, onRowClick, onRowDoubleClick, classes, defaultViewIcon, defaultViewMessages, hideColumnSelector, actions, paperProps, hideSearchInput, paperKey, fetchMode, currentItemUuid, currentRoute, title, progressBar, doHidePanel, doMaximizePanel, doUnMaximizePanel, panelName, panelMaximized, elementPath, toggleMSToolbar, setCheckedListOnStore, checkedList, working, } = this.props; return (
{title && ( {title} )} {!!progressBar && progressBar} {this.multiSelectToolbarInTitle && } {(!hideColumnSelector || !hideSearchInput || !!actions) && ( {!hideSearchInput && (
{!hideSearchInput && ( )}
)} {actions} {!hideColumnSelector && ( )}
{doUnMaximizePanel && panelMaximized && ( )} {doMaximizePanel && !panelMaximized && ( )} {doHidePanel && ( )}
)}
{!this.multiSelectToolbarInTitle && } onRowClick(item)} onContextMenu={onContextMenu} onRowDoubleClick={(_, item: T) => onRowDoubleClick(item)} onFiltersChange={onFiltersChange} onSortToggle={onSortToggle} extractKey={extractKey} defaultViewIcon={defaultViewIcon} defaultViewMessages={defaultViewMessages} currentItemUuid={currentItemUuid} currentRoute={paperKey} toggleMSToolbar={toggleMSToolbar} setCheckedListOnStore={setCheckedListOnStore} checkedList={checkedList} working={working} isNotFound={this.props.isNotFound} /> {elementPath && ( {elementPath} )} {fetchMode === DataTableFetchMode.PAGINATED ? ( 0 ? {} : { disabled: true }} component="div" /> ) : ( )}
); } changePage = (event: React.MouseEvent, page: number) => { this.props.onChangePage(page); }; changeRowsPerPage: React.ChangeEventHandler = event => { this.props.onChangeRowsPerPage(parseInt(event.target.value, 10)); }; loadMore = () => { this.props.onLoadMore(this.props.page + 1); }; renderContextMenuTrigger = (item: T) => ( { event.stopPropagation() this.props.onContextMenu(event, item) }} > ); contextMenuColumn: DataColumn = { name: "Actions", selected: true, configurable: false, filters: createTree(), key: "context-actions", render: this.renderContextMenuTrigger, }; } );