src/views/collection-content-address-panel/collection-content-address-panel.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from 'react';
   6 import {
   7     StyleRulesCallback,
   8     WithStyles,
   9     withStyles,
  10     Grid,
  11     Button
  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';
  20 import {
  21     resourceUuidToContextMenuKind,
  22     openContextMenu
  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';
  31 import {
  32     ResourceName,
  33     ResourceOwnerName,
  34     ResourceLastModifiedDate,
  35     ResourceStatus
  36 } from 'views-components/data-explorer/renderers';
  37
  38 type CssRules = 'backLink' | 'backIcon' | 'card' | 'title' | 'iconHeader' | 'link';
  39
  40 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  41     backLink: {
  42         fontSize: '14px',
  43         fontWeight: 600,
  44         display: 'flex',
  45         alignItems: 'center',
  46         padding: theme.spacing.unit,
  47         marginBottom: theme.spacing.unit,
  48         color: theme.palette.grey["700"],
  49     },
  50     backIcon: {
  51         marginRight: theme.spacing.unit
  52     },
  53     card: {
  54         width: '100%'
  55     },
  56     title: {
  57         color: theme.palette.grey["700"]
  58     },
  59     iconHeader: {
  60         fontSize: '1.875rem',
  61         color: theme.customs.colors.green700
  62     },
  63     link: {
  64         fontSize: '0.875rem',
  65         color: theme.palette.primary.main,
  66         textAlign: 'right',
  67         '&:hover': {
  68             cursor: 'pointer'
  69         }
  70     }
  71 });
  72
  73 enum CollectionContentAddressPanelColumnNames {
  74     COLLECTION_WITH_THIS_ADDRESS = "Collection with this address",
  75     STATUS = "Status",
  76     LOCATION = "Location",
  77     LAST_MODIFIED = "Last modified"
  78 }
  79
  80 export const collectionContentAddressPanelColumns: DataColumns<string> = [
  81     {
  82         name: CollectionContentAddressPanelColumnNames.COLLECTION_WITH_THIS_ADDRESS,
  83         selected: true,
  84         configurable: true,
  85         sortDirection: SortDirection.NONE,
  86         filters: createTree(),
  87         render: uuid => <ResourceName uuid={uuid} />
  88     },
  89     {
  90         name: CollectionContentAddressPanelColumnNames.STATUS,
  91         selected: true,
  92         configurable: true,
  93         filters: createTree(),
  94         render: uuid => <ResourceStatus uuid={uuid} />
  95     },
  96     {
  97         name: CollectionContentAddressPanelColumnNames.LOCATION,
  98         selected: true,
  99         configurable: true,
 100         filters: createTree(),
 101         render: uuid => <ResourceOwnerName uuid={uuid} />
 102     },
 103     {
 104         name: CollectionContentAddressPanelColumnNames.LAST_MODIFIED,
 105         selected: true,
 106         configurable: true,
 107         sortDirection: SortDirection.DESC,
 108         filters: createTree(),
 109         render: uuid => <ResourceLastModifiedDate uuid={uuid} />
 110     }
 111 ];
 112
 113 export interface CollectionContentAddressPanelActionProps {
 114     onContextMenu: (event: React.MouseEvent<any>, uuid: string) => void;
 115     onItemClick: (item: string) => void;
 116     onItemDoubleClick: (item: string) => void;
 117 }
 118
 119 const mapDispatchToProps = (dispatch: Dispatch): CollectionContentAddressPanelActionProps => ({
 120     onContextMenu: (event, resourceUuid) => {
 121         const kind = dispatch<any>(resourceUuidToContextMenuKind(resourceUuid));
 122         if (kind) {
 123             dispatch<any>(openContextMenu(event, {
 124                 name: '',
 125                 uuid: resourceUuid,
 126                 ownerUuid: '',
 127                 kind: ResourceKind.NONE,
 128                 menuKind: kind
 129             }));
 130         }
 131         dispatch<any>(loadDetailsPanel(resourceUuid));
 132     },
 133     onItemClick: (uuid: string) => {
 134         dispatch<any>(loadDetailsPanel(uuid));
 135     },
 136     onItemDoubleClick: uuid => {
 137         dispatch<any>(navigateTo(uuid));
 138     }
 139 });
 140
 141 interface CollectionContentAddressDataProps {
 142     match: {
 143         params: { id: string }
 144     };
 145 }
 146
 147 export const CollectionsContentAddressPanel = withStyles(styles)(
 148     connect(null, mapDispatchToProps)(
 149         class extends React.Component<CollectionContentAddressPanelActionProps & CollectionContentAddressDataProps & WithStyles<CssRules>> {
 150             render() {
 151                 return <Grid item xs={12}>
 152                     <Button
 153                         onClick={() => window.history.back()}
 154                         className={this.props.classes.backLink}>
 155                         <BackIcon className={this.props.classes.backIcon} />
 156                         Back
 157                     </Button>
 158                     <DataExplorer
 159                         id={COLLECTIONS_CONTENT_ADDRESS_PANEL_ID}
 160                         hideSearchInput
 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.']} />
 170                         } />;
 171                     </Grid >;
 172             }
 173         }
 174     )
 175 );