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