1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import * as React from 'react';
12 } from '@material-ui/core';
13 import { CollectionIcon } from '~/components/icon/icon';
14 import { ArvadosTheme } from '~/common/custom-theme';
15 import { BackIcon } from '~/components/icon/icon';
16 import { DataTableDefaultView } from '~/components/data-table-default-view/data-table-default-view';
17 import { COLLECTIONS_CONTENT_ADDRESS_PANEL_ID } from '~/store/collections-content-address-panel/collections-content-address-panel-actions';
18 import { DataExplorer } from "~/views-components/data-explorer/data-explorer";
19 import { Dispatch } from 'redux';
21 resourceUuidToContextMenuKind,
23 } from '~/store/context-menu/context-menu-actions';
24 import { ResourceKind } from '~/models/resource';
25 import { loadDetailsPanel } from '~/store/details-panel/details-panel-action';
26 import { connect } from 'react-redux';
27 import { navigateTo } from '~/store/navigation/navigation-action';
28 import { DataColumns } from '~/components/data-table/data-table';
29 import { SortDirection } from '~/components/data-table/data-column';
30 import { createTree } from '~/models/tree';
34 ResourceLastModifiedDate,
36 } from '~/views-components/data-explorer/renderers';
38 type CssRules = 'backLink' | 'backIcon' | 'card' | 'title' | 'iconHeader' | 'link';
40 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
46 padding: theme.spacing.unit,
47 marginBottom: theme.spacing.unit,
48 color: theme.palette.grey["700"],
51 marginRight: theme.spacing.unit
57 color: theme.palette.grey["700"]
61 color: theme.customs.colors.green700
65 color: theme.palette.primary.main,
73 enum CollectionContentAddressPanelColumnNames {
74 COLLECTION_WITH_THIS_ADDRESS = "Collection with this address",
76 LOCATION = "Location",
77 LAST_MODIFIED = "Last modified"
80 export const collectionContentAddressPanelColumns: DataColumns<string> = [
82 name: CollectionContentAddressPanelColumnNames.COLLECTION_WITH_THIS_ADDRESS,
85 sortDirection: SortDirection.NONE,
86 filters: createTree(),
87 render: uuid => <ResourceName uuid={uuid} />
90 name: CollectionContentAddressPanelColumnNames.STATUS,
93 filters: createTree(),
94 render: uuid => <ResourceStatus uuid={uuid} />
97 name: CollectionContentAddressPanelColumnNames.LOCATION,
100 filters: createTree(),
101 render: uuid => <ResourceOwnerName uuid={uuid} />
104 name: CollectionContentAddressPanelColumnNames.LAST_MODIFIED,
107 sortDirection: SortDirection.DESC,
108 filters: createTree(),
109 render: uuid => <ResourceLastModifiedDate uuid={uuid} />
113 export interface CollectionContentAddressPanelActionProps {
114 onContextMenu: (event: React.MouseEvent<any>, uuid: string) => void;
115 onItemClick: (item: string) => void;
116 onItemDoubleClick: (item: string) => void;
119 const mapDispatchToProps = (dispatch: Dispatch): CollectionContentAddressPanelActionProps => ({
120 onContextMenu: (event, resourceUuid) => {
121 const kind = dispatch<any>(resourceUuidToContextMenuKind(resourceUuid));
123 dispatch<any>(openContextMenu(event, {
127 kind: ResourceKind.NONE,
131 dispatch<any>(loadDetailsPanel(resourceUuid));
133 onItemClick: (uuid: string) => {
134 dispatch<any>(loadDetailsPanel(uuid));
136 onItemDoubleClick: uuid => {
137 dispatch<any>(navigateTo(uuid));
141 interface CollectionContentAddressDataProps {
143 params: { id: string }
147 export const CollectionsContentAddressPanel = withStyles(styles)(
148 connect(null, mapDispatchToProps)(
149 class extends React.Component<CollectionContentAddressPanelActionProps & CollectionContentAddressDataProps & WithStyles<CssRules>> {
151 return <Grid item xs={12}>
153 onClick={() => history.back()}
154 className={this.props.classes.backLink}>
155 <BackIcon className={this.props.classes.backIcon} />
159 id={COLLECTIONS_CONTENT_ADDRESS_PANEL_ID}
161 onRowClick={this.props.onItemClick}
162 onRowDoubleClick={this.props.onItemDoubleClick}
163 onContextMenu={this.props.onContextMenu}
164 contextMenuColumn={true}
165 title={`Content address: ${this.props.match.params.id}`}
166 dataTableDefaultView={
167 <DataTableDefaultView
168 icon={CollectionIcon}
169 messages={['Collections with this content address not found.']} />