services/workbench2/src/views/keep-service-panel/keep-service-panel-root.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 { CustomStyleRulesCallback } from 'common/custom-theme';
   7 import { WithStyles, withStyles, Card, CardContent, Grid, Table, TableHead, TableRow, TableCell, TableBody, Tooltip, IconButton, Checkbox } from '@material-ui/core';
   8 import { ArvadosTheme } from 'common/custom-theme';
   9 import { MoreVerticalIcon } from 'components/icon/icon';
  10 import { KeepServiceResource } from 'models/keep-services';
  11
  12 type CssRules = 'root' | 'tableRow';
  13
  14 const styles: CustomStyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  15     root: {
  16         width: '100%',
  17         overflow: 'auto'
  18     },
  19     tableRow: {
  20         '& td, th': {
  21             whiteSpace: 'nowrap'
  22         }
  23     }
  24 });
  25
  26 export interface KeepServicePanelRootActionProps {
  27     openRowOptions: (event: React.MouseEvent<HTMLElement>, keepService: KeepServiceResource) => void;
  28 }
  29
  30 export interface KeepServicePanelRootDataProps {
  31     keepServices: KeepServiceResource[];
  32     hasKeepSerices: boolean;
  33 }
  34
  35 type KeepServicePanelRootProps = KeepServicePanelRootActionProps & KeepServicePanelRootDataProps & WithStyles<CssRules>;
  36
  37 export const KeepServicePanelRoot = withStyles(styles)(
  38     ({ classes, hasKeepSerices, keepServices, openRowOptions }: KeepServicePanelRootProps) =>
  39         <Card className={classes.root}>
  40             <CardContent>
  41                 {hasKeepSerices && <Grid container direction="row">
  42                     <Grid item xs={12}>
  43                         <Table>
  44                             <TableHead>
  45                                 <TableRow className={classes.tableRow}>
  46                                     <TableCell>UUID</TableCell>
  47                                     <TableCell>Read only</TableCell>
  48                                     <TableCell>Service host</TableCell>
  49                                     <TableCell>Service port</TableCell>
  50                                     <TableCell>Service SSL flag</TableCell>
  51                                     <TableCell>Service type</TableCell>
  52                                     <TableCell />
  53                                 </TableRow>
  54                             </TableHead>
  55                             <TableBody>
  56                                 {keepServices.map((keepService, index) =>
  57                                     <TableRow key={index} className={classes.tableRow}>
  58                                         <TableCell>{keepService.uuid}</TableCell>
  59                                         <TableCell>
  60                                             <Checkbox
  61                                                 disableRipple
  62                                                 color="primary"
  63                                                 checked={keepService.readOnly} />
  64                                         </TableCell>
  65                                         <TableCell>{keepService.serviceHost}</TableCell>
  66                                         <TableCell>{keepService.servicePort}</TableCell>
  67                                         <TableCell>
  68                                             <Checkbox
  69                                                 disableRipple
  70                                                 color="primary"
  71                                                 checked={keepService.serviceSslFlag} />
  72                                         </TableCell>
  73                                         <TableCell>{keepService.serviceType}</TableCell>
  74                                         <TableCell>
  75                                             <Tooltip title="More options" disableFocusListener>
  76                                                 <IconButton onClick={event => openRowOptions(event, keepService)}>
  77                                                     <MoreVerticalIcon />
  78                                                 </IconButton>
  79                                             </Tooltip>
  80                                         </TableCell>
  81                                     </TableRow>)}
  82                             </TableBody>
  83                         </Table>
  84                     </Grid>
  85                 </Grid>}
  86             </CardContent>
  87         </Card>
  88 );