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