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,
   8     Table, TableHead, TableRow, TableCell, TableBody, Tooltip, IconButton
   9 } from '@material-ui/core';
  10 import { ArvadosTheme } from '~/common/custom-theme';
  11 import { MoreOptionsIcon, HelpIcon } from '~/components/icon/icon';
  12 import { ApiClientAuthorization } from '~/models/api-client-authorization';
  13 import { formatDate } from '~/common/formatters';
  14
  15 type CssRules = 'root' | 'tableRow' | 'helpIconGrid' | 'tableGrid';
  16
  17 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  18     root: {
  19         width: '100%',
  20         overflow: 'auto'
  21     },
  22     helpIconGrid: {
  23         textAlign: 'right'
  24     },
  25     tableGrid: {
  26         marginTop: theme.spacing.unit
  27     },
  28     tableRow: {
  29         '& td, th': {
  30             whiteSpace: 'nowrap'
  31         }
  32     }
  33 });
  34
  35 export interface ApiClientAuthorizationPanelRootActionProps {
  36     openRowOptions: (event: React.MouseEvent<HTMLElement>, keepService: ApiClientAuthorization) => void;
  37     openHelpDialog: () => void;
  38 }
  39
  40 export interface ApiClientAuthorizationPanelRootDataProps {
  41     apiClientAuthorizations: ApiClientAuthorization[];
  42     hasApiClientAuthorizations: boolean;
  43 }
  44
  45 type ApiClientAuthorizationPanelRootProps = ApiClientAuthorizationPanelRootActionProps
  46     & ApiClientAuthorizationPanelRootDataProps & WithStyles<CssRules>;
  47
  48 export const ApiClientAuthorizationPanelRoot = withStyles(styles)(
  49     ({ classes, hasApiClientAuthorizations, apiClientAuthorizations, openRowOptions, openHelpDialog }: ApiClientAuthorizationPanelRootProps) =>
  50         <Card className={classes.root}>
  51             <CardContent>
  52                 {hasApiClientAuthorizations && <Grid container direction="row" justify="flex-end">
  53                     <Grid item xs={12} className={classes.helpIconGrid}>
  54                         <Tooltip title="Api token - help">
  55                             <IconButton onClick={openHelpDialog}>
  56                                 <HelpIcon />
  57                             </IconButton>
  58                         </Tooltip>
  59                     </Grid>
  60                     <Grid item xs={12}>
  61                         <Table>
  62                             <TableHead>
  63                                 <TableRow className={classes.tableRow}>
  64                                     <TableCell>UUID</TableCell>
  65                                     <TableCell>API Client ID</TableCell>
  66                                     <TableCell>API Token</TableCell>
  67                                     <TableCell>Created by IP address</TableCell>
  68                                     <TableCell>Default owner</TableCell>
  69                                     <TableCell>Expires at</TableCell>
  70                                     <TableCell>Last used at</TableCell>
  71                                     <TableCell>Last used by IP address</TableCell>
  72                                     <TableCell>Scopes</TableCell>
  73                                     <TableCell>User ID</TableCell>
  74                                     <TableCell />
  75                                 </TableRow>
  76                             </TableHead>
  77                             <TableBody>
  78                                 {apiClientAuthorizations.map((apiClientAuthorizatio, index) =>
  79                                     <TableRow key={index} className={classes.tableRow}>
  80                                         <TableCell>{apiClientAuthorizatio.uuid}</TableCell>
  81                                         <TableCell>{apiClientAuthorizatio.apiClientId}</TableCell>
  82                                         <TableCell>{apiClientAuthorizatio.apiToken}</TableCell>
  83                                         <TableCell>{apiClientAuthorizatio.createdByIpAddress || '(none)'}</TableCell>
  84                                         <TableCell>{apiClientAuthorizatio.defaultOwnerUuid || '(none)'}</TableCell>
  85                                         <TableCell>{formatDate(apiClientAuthorizatio.expiresAt) || '(none)'}</TableCell>
  86                                         <TableCell>{formatDate(apiClientAuthorizatio.lastUsedAt) || '(none)'}</TableCell>
  87                                         <TableCell>{apiClientAuthorizatio.lastUsedByIpAddress || '(none)'}</TableCell>
  88                                         <TableCell>{JSON.stringify(apiClientAuthorizatio.scopes)}</TableCell>
  89                                         <TableCell>{apiClientAuthorizatio.userId}</TableCell>
  90                                         <TableCell>
  91                                             <Tooltip title="More options" disableFocusListener>
  92                                                 <IconButton onClick={event => openRowOptions(event, apiClientAuthorizatio)}>
  93                                                     <MoreOptionsIcon />
  94                                                 </IconButton>
  95                                             </Tooltip>
  96                                         </TableCell>
  97                                     </TableRow>)}
  98                             </TableBody>
  99                         </Table>
 100                     </Grid>
 101                 </Grid>}
 102             </CardContent>
 103         </Card>
 104 );