src/views/api-client-authorization-panel/api-client-authorization-panel-root.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from 'react';
   6 import {
   7     StyleRulesCallback, WithStyles, withStyles, Card, CardContent, Grid, Tooltip, IconButton
   8 } from '@material-ui/core';
   9 import { ArvadosTheme } from 'common/custom-theme';
  10 import { HelpIcon, ShareMeIcon } from 'components/icon/icon';
  11 import { createTree } from 'models/tree';
  12 import { DataColumns } from 'components/data-table/data-table';
  13 import { SortDirection } from 'components/data-table/data-column';
  14 import { DataTableDefaultView } from 'components/data-table-default-view/data-table-default-view';
  15 import { API_CLIENT_AUTHORIZATION_PANEL_ID } from '../../store/api-client-authorizations/api-client-authorizations-actions';
  16 import { DataExplorer } from 'views-components/data-explorer/data-explorer';
  17 import { ResourcesState } from 'store/resources/resources';
  18 import {
  19     CommonUuid, TokenApiClientId, TokenApiToken, TokenCreatedByIpAddress, TokenDefaultOwnerUuid, TokenExpiresAt,
  20     TokenLastUsedAt, TokenLastUsedByIpAddress, TokenScopes, TokenUserId
  21 } from 'views-components/data-explorer/renderers';
  22
  23 type CssRules = 'card' | 'cardContent' | 'helpIconGrid';
  24
  25 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  26     card: {
  27         width: '100%',
  28         overflow: 'auto'
  29     },
  30     cardContent: {
  31         padding: 0,
  32         '&:last-child': {
  33             paddingBottom: 0
  34         }
  35     },
  36     helpIconGrid: {
  37         textAlign: 'right'
  38     }
  39 });
  40
  41
  42 export enum ApiClientAuthorizationPanelColumnNames {
  43     UUID = 'UUID',
  44     API_CLIENT_ID = 'API Client ID',
  45     API_TOKEN = 'API Token',
  46     CREATED_BY_IP_ADDRESS = 'Created by IP address',
  47     DEFAULT_OWNER_UUID = 'Default owner',
  48     EXPIRES_AT = 'Expires at',
  49     LAST_USED_AT = 'Last used at',
  50     LAST_USED_BY_IP_ADDRESS = 'Last used by IP address',
  51     SCOPES = 'Scopes',
  52     USER_ID = 'User ID'
  53 }
  54
  55 export const apiClientAuthorizationPanelColumns: DataColumns<string> = [
  56     {
  57         name: ApiClientAuthorizationPanelColumnNames.UUID,
  58         selected: true,
  59         configurable: true,
  60         sortDirection: SortDirection.NONE,
  61         filters: createTree(),
  62         render: uuid => <CommonUuid uuid={uuid} />
  63     },
  64     {
  65         name: ApiClientAuthorizationPanelColumnNames.API_CLIENT_ID,
  66         selected: true,
  67         configurable: true,
  68         filters: createTree(),
  69         render: uuid => <TokenApiClientId uuid={uuid} />
  70     },
  71     {
  72         name: ApiClientAuthorizationPanelColumnNames.API_TOKEN,
  73         selected: true,
  74         configurable: true,
  75         filters: createTree(),
  76         render: uuid => <TokenApiToken uuid={uuid} />
  77     },
  78     {
  79         name: ApiClientAuthorizationPanelColumnNames.CREATED_BY_IP_ADDRESS,
  80         selected: true,
  81         configurable: true,
  82         filters: createTree(),
  83         render: uuid => <TokenCreatedByIpAddress uuid={uuid} />
  84     },
  85     {
  86         name: ApiClientAuthorizationPanelColumnNames.DEFAULT_OWNER_UUID,
  87         selected: true,
  88         configurable: true,
  89         filters: createTree(),
  90         render: uuid => <TokenDefaultOwnerUuid uuid={uuid} />
  91     },
  92     {
  93         name: ApiClientAuthorizationPanelColumnNames.EXPIRES_AT,
  94         selected: true,
  95         configurable: true,
  96         filters: createTree(),
  97         render: uuid => <TokenExpiresAt uuid={uuid} />
  98     },
  99     {
 100         name: ApiClientAuthorizationPanelColumnNames.LAST_USED_AT,
 101         selected: true,
 102         configurable: true,
 103         filters: createTree(),
 104         render: uuid => <TokenLastUsedAt uuid={uuid} />
 105     },
 106     {
 107         name: ApiClientAuthorizationPanelColumnNames.LAST_USED_BY_IP_ADDRESS,
 108         selected: true,
 109         configurable: true,
 110         filters: createTree(),
 111         render: uuid => <TokenLastUsedByIpAddress uuid={uuid} />
 112     },
 113     {
 114         name: ApiClientAuthorizationPanelColumnNames.SCOPES,
 115         selected: true,
 116         configurable: true,
 117         filters: createTree(),
 118         render: uuid => <TokenScopes uuid={uuid} />
 119     },
 120     {
 121         name: ApiClientAuthorizationPanelColumnNames.USER_ID,
 122         selected: true,
 123         configurable: true,
 124         filters: createTree(),
 125         render: uuid => <TokenUserId uuid={uuid} />
 126     }
 127 ];
 128
 129 const DEFAULT_MESSAGE = 'Your api client authorization list is empty.';
 130
 131 export interface ApiClientAuthorizationPanelRootActionProps {
 132     onItemClick: (item: string) => void;
 133     onContextMenu: (event: React.MouseEvent<HTMLElement>, item: string) => void;
 134     onItemDoubleClick: (item: string) => void;
 135     openHelpDialog: () => void;
 136 }
 137
 138 export interface ApiClientAuthorizationPanelRootDataProps {
 139     resources: ResourcesState;
 140 }
 141
 142 type ApiClientAuthorizationPanelRootProps = ApiClientAuthorizationPanelRootActionProps
 143     & ApiClientAuthorizationPanelRootDataProps & WithStyles<CssRules>;
 144
 145 export const ApiClientAuthorizationPanelRoot = withStyles(styles)(
 146     ({ classes, onItemDoubleClick, onItemClick, onContextMenu, openHelpDialog }: ApiClientAuthorizationPanelRootProps) =>
 147         <Card className={classes.card}>
 148             <CardContent className={classes.cardContent}>
 149                 <Grid container direction="row" justify="flex-end">
 150                     <Grid item xs={12} className={classes.helpIconGrid}>
 151                         <Tooltip title="Api token - help">
 152                             <IconButton onClick={openHelpDialog}>
 153                                 <HelpIcon />
 154                             </IconButton>
 155                         </Tooltip>
 156                     </Grid>
 157                     <Grid item xs={12}>
 158                         <DataExplorer
 159                             id={API_CLIENT_AUTHORIZATION_PANEL_ID}
 160                             onRowClick={onItemClick}
 161                             onRowDoubleClick={onItemDoubleClick}
 162                             onContextMenu={onContextMenu}
 163                             contextMenuColumn={true}
 164                             hideColumnSelector
 165                             hideSearchInput
 166                             dataTableDefaultView={
 167                                 <DataTableDefaultView
 168                                     icon={ShareMeIcon}
 169                                     messages={[DEFAULT_MESSAGE]} />
 170                             } />
 171                     </Grid>
 172                 </Grid>
 173             </CardContent>
 174         </Card>
 175 );