X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/ad5208965b91e020b431cd9d2c1d15ff4b856450..46751b9305a7e991d484494facd1f40790254d40:/src/views/api-client-authorization-panel/api-client-authorization-panel-root.tsx

diff --git a/src/views/api-client-authorization-panel/api-client-authorization-panel-root.tsx b/src/views/api-client-authorization-panel/api-client-authorization-panel-root.tsx
index 52921b3018..a25d93b748 100644
--- a/src/views/api-client-authorization-panel/api-client-authorization-panel-root.tsx
+++ b/src/views/api-client-authorization-panel/api-client-authorization-panel-root.tsx
@@ -3,53 +3,150 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { 
-    StyleRulesCallback, WithStyles, withStyles, Card, CardContent, Grid, 
-    Table, TableHead, TableRow, TableCell, TableBody, Tooltip, IconButton
+import {
+    StyleRulesCallback, WithStyles, withStyles, Card, CardContent, Grid, Tooltip, IconButton
 } from '@material-ui/core';
 import { ArvadosTheme } from '~/common/custom-theme';
-import { MoreOptionsIcon, HelpIcon } from '~/components/icon/icon';
-import { ApiClientAuthorization } from '~/models/api-client-authorization';
-import { formatDate } from '~/common/formatters';
+import { HelpIcon, ShareMeIcon } from '~/components/icon/icon';
+import { createTree } from '~/models/tree';
+import { DataColumns } from '~/components/data-table/data-table';
+import { SortDirection } from '~/components/data-table/data-column';
+import { DataTableDefaultView } from '~/components/data-table-default-view/data-table-default-view';
+import { API_CLIENT_AUTHORIZATION_PANEL_ID } from '../../store/api-client-authorizations/api-client-authorizations-actions';
+import { DataExplorer } from '~/views-components/data-explorer/data-explorer';
+import { ResourcesState } from '~/store/resources/resources';
+import {
+    CommonUuid, TokenApiClientId, TokenApiToken, TokenCreatedByIpAddress, TokenDefaultOwnerUuid, TokenExpiresAt,
+    TokenLastUsedAt, TokenLastUsedByIpAddress, TokenScopes, TokenUserId
+} from '~/views-components/data-explorer/renderers';
 
-type CssRules = 'root' | 'tableRow' | 'helpIconGrid' | 'tableGrid';
+type CssRules = 'card' | 'cardContent' | 'helpIconGrid';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
-    root: {
+    card: {
         width: '100%',
         overflow: 'auto'
     },
+    cardContent: {
+        padding: 0,
+        '&:last-child': {
+            paddingBottom: 0
+        }
+    },
     helpIconGrid: {
         textAlign: 'right'
+    }
+});
+
+
+export enum ApiClientAuthorizationPanelColumnNames {
+    UUID = 'UUID',
+    API_CLIENT_ID = 'API Client ID',
+    API_TOKEN = 'API Token',
+    CREATED_BY_IP_ADDRESS = 'Created by IP address',
+    DEFAULT_OWNER_UUID = 'Default owner',
+    EXPIRES_AT = 'Expires at',
+    LAST_USED_AT = 'Last used at',
+    LAST_USED_BY_IP_ADDRESS = 'Last used by IP address',
+    SCOPES = 'Scopes',
+    USER_ID = 'User ID'
+}
+
+export const ApiClientAuthorizationPanelColumns: DataColumns<string> = [
+    {
+        name: ApiClientAuthorizationPanelColumnNames.UUID,
+        selected: true,
+        configurable: true,
+        sortDirection: SortDirection.NONE,
+        filters: createTree(),
+        render: uuid => <CommonUuid uuid={uuid} />
     },
-    tableGrid: {
-        marginTop: theme.spacing.unit
+    {
+        name: ApiClientAuthorizationPanelColumnNames.API_CLIENT_ID,
+        selected: true,
+        configurable: true,
+        filters: createTree(),
+        render: uuid => <TokenApiClientId uuid={uuid} />
     },
-    tableRow: {
-        '& td, th': {
-            whiteSpace: 'nowrap'
-        }
+    {
+        name: ApiClientAuthorizationPanelColumnNames.API_TOKEN,
+        selected: true,
+        configurable: true,
+        filters: createTree(),
+        render: uuid => <TokenApiToken uuid={uuid} />
+    },
+    {
+        name: ApiClientAuthorizationPanelColumnNames.CREATED_BY_IP_ADDRESS,
+        selected: true,
+        configurable: true,
+        filters: createTree(),
+        render: uuid => <TokenCreatedByIpAddress uuid={uuid} />
+    },
+    {
+        name: ApiClientAuthorizationPanelColumnNames.DEFAULT_OWNER_UUID,
+        selected: true,
+        configurable: true,
+        filters: createTree(),
+        render: uuid => <TokenDefaultOwnerUuid uuid={uuid} />
+    },
+    {
+        name: ApiClientAuthorizationPanelColumnNames.EXPIRES_AT,
+        selected: true,
+        configurable: true,
+        filters: createTree(),
+        render: uuid => <TokenExpiresAt uuid={uuid} />
+    },
+    {
+        name: ApiClientAuthorizationPanelColumnNames.LAST_USED_AT,
+        selected: true,
+        configurable: true,
+        filters: createTree(),
+        render: uuid => <TokenLastUsedAt uuid={uuid} />
+    },
+    {
+        name: ApiClientAuthorizationPanelColumnNames.LAST_USED_BY_IP_ADDRESS,
+        selected: true,
+        configurable: true,
+        filters: createTree(),
+        render: uuid => <TokenLastUsedByIpAddress uuid={uuid} />
+    },
+    {
+        name: ApiClientAuthorizationPanelColumnNames.SCOPES,
+        selected: true,
+        configurable: true,
+        filters: createTree(),
+        render: uuid => <TokenScopes uuid={uuid} />
+    },
+    {
+        name: ApiClientAuthorizationPanelColumnNames.USER_ID,
+        selected: true,
+        configurable: true,
+        filters: createTree(),
+        render: uuid => <TokenUserId uuid={uuid} />
     }
-});
+];
+
+const DEFAULT_MESSAGE = 'Your api client authorization list is empty.';
 
 export interface ApiClientAuthorizationPanelRootActionProps {
-    openRowOptions: (event: React.MouseEvent<HTMLElement>, keepService: ApiClientAuthorization) => void;
+    onItemClick: (item: string) => void;
+    onContextMenu: (event: React.MouseEvent<HTMLElement>, item: string) => void;
+    onItemDoubleClick: (item: string) => void;
     openHelpDialog: () => void;
 }
 
 export interface ApiClientAuthorizationPanelRootDataProps {
-    apiClientAuthorizations: ApiClientAuthorization[];
-    hasApiClientAuthorizations: boolean;
+    resources: ResourcesState;
 }
 
-type ApiClientAuthorizationPanelRootProps = ApiClientAuthorizationPanelRootActionProps 
+type ApiClientAuthorizationPanelRootProps = ApiClientAuthorizationPanelRootActionProps
     & ApiClientAuthorizationPanelRootDataProps & WithStyles<CssRules>;
 
 export const ApiClientAuthorizationPanelRoot = withStyles(styles)(
-    ({ classes, hasApiClientAuthorizations, apiClientAuthorizations, openRowOptions, openHelpDialog }: ApiClientAuthorizationPanelRootProps) =>
-        <Card className={classes.root}>
-            <CardContent>
-                {hasApiClientAuthorizations && <Grid container direction="row" justify="flex-end">
+    ({ classes, onItemDoubleClick, onItemClick, onContextMenu, openHelpDialog }: ApiClientAuthorizationPanelRootProps) =>
+        <Card className={classes.card}>
+            <CardContent className={classes.cardContent}>
+                <Grid container direction="row" justify="flex-end">
                     <Grid item xs={12} className={classes.helpIconGrid}>
                         <Tooltip title="Api token - help">
                             <IconButton onClick={openHelpDialog}>
@@ -58,47 +155,21 @@ export const ApiClientAuthorizationPanelRoot = withStyles(styles)(
                         </Tooltip>
                     </Grid>
                     <Grid item xs={12}>
-                        <Table>
-                            <TableHead>
-                                <TableRow className={classes.tableRow}>
-                                    <TableCell>UUID</TableCell>
-                                    <TableCell>API Client ID</TableCell>
-                                    <TableCell>API Token</TableCell>
-                                    <TableCell>Created by IP address</TableCell>
-                                    <TableCell>Default owner</TableCell>
-                                    <TableCell>Expires at</TableCell>
-                                    <TableCell>Last used at</TableCell>
-                                    <TableCell>Last used by IP address</TableCell>
-                                    <TableCell>Scopes</TableCell>
-                                    <TableCell>User ID</TableCell>
-                                    <TableCell />
-                                </TableRow>
-                            </TableHead>
-                            <TableBody>
-                                {apiClientAuthorizations.map((apiClientAuthorizatio, index) =>
-                                    <TableRow key={index} className={classes.tableRow}>
-                                        <TableCell>{apiClientAuthorizatio.uuid}</TableCell>
-                                        <TableCell>{apiClientAuthorizatio.apiClientId}</TableCell>
-                                        <TableCell>{apiClientAuthorizatio.apiToken}</TableCell>
-                                        <TableCell>{apiClientAuthorizatio.createdByIpAddress || '(none)'}</TableCell>
-                                        <TableCell>{apiClientAuthorizatio.defaultOwnerUuid || '(none)'}</TableCell>
-                                        <TableCell>{formatDate(apiClientAuthorizatio.expiresAt) || '(none)'}</TableCell>
-                                        <TableCell>{formatDate(apiClientAuthorizatio.lastUsedAt) || '(none)'}</TableCell>
-                                        <TableCell>{apiClientAuthorizatio.lastUsedByIpAddress || '(none)'}</TableCell>
-                                        <TableCell>{JSON.stringify(apiClientAuthorizatio.scopes)}</TableCell>
-                                        <TableCell>{apiClientAuthorizatio.userId}</TableCell>
-                                        <TableCell>
-                                            <Tooltip title="More options" disableFocusListener>
-                                                <IconButton onClick={event => openRowOptions(event, apiClientAuthorizatio)}>
-                                                    <MoreOptionsIcon />
-                                                </IconButton>
-                                            </Tooltip>
-                                        </TableCell>
-                                    </TableRow>)}
-                            </TableBody>
-                        </Table>
+                        <DataExplorer
+                            id={API_CLIENT_AUTHORIZATION_PANEL_ID}
+                            onRowClick={onItemClick}
+                            onRowDoubleClick={onItemDoubleClick}
+                            onContextMenu={onContextMenu}
+                            contextMenuColumn={true}
+                            hideColumnSelector
+                            hideSearchInput
+                            dataTableDefaultView={
+                                <DataTableDefaultView
+                                    icon={ShareMeIcon}
+                                    messages={[DEFAULT_MESSAGE]} />
+                            } />
                     </Grid>
-                </Grid>}
+                </Grid>
             </CardContent>
         </Card>
 );
\ No newline at end of file