src/views/compute-node-panel/compute-node-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, Table,
   8     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 { NodeResource } from '~/models/node';
  13 import { formatDate } from '~/common/formatters';
  14
  15 type CssRules = 'root' | 'tableRow';
  16
  17 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  18     root: {
  19         width: '100%',
  20         overflow: 'auto'
  21     },
  22     tableRow: {
  23         '& th': {
  24             whiteSpace: 'nowrap'
  25         }
  26     }
  27 });
  28
  29 export interface ComputeNodePanelRootActionProps {
  30     openRowOptions: (event: React.MouseEvent<HTMLElement>, computeNode: NodeResource) => void;
  31 }
  32
  33 export interface ComputeNodePanelRootDataProps {
  34     computeNodes: NodeResource[];
  35     hasComputeNodes: boolean;
  36 }
  37
  38 type ComputeNodePanelRootProps = ComputeNodePanelRootActionProps & ComputeNodePanelRootDataProps & WithStyles<CssRules>;
  39
  40 export const ComputeNodePanelRoot = withStyles(styles)(
  41     ({ classes, hasComputeNodes, computeNodes, openRowOptions }: ComputeNodePanelRootProps) =>
  42         <Card className={classes.root}>
  43             <CardContent>
  44                 {hasComputeNodes && <Grid container direction="row">
  45                     <Grid item xs={12}>
  46                         <Table>
  47                             <TableHead>
  48                                 <TableRow className={classes.tableRow}>
  49                                     <TableCell>Info</TableCell>
  50                                     <TableCell>UUID</TableCell>
  51                                     <TableCell>Domain</TableCell>
  52                                     <TableCell>First ping at</TableCell>
  53                                     <TableCell>Hostname</TableCell>
  54                                     <TableCell>IP Address</TableCell>
  55                                     <TableCell>Job</TableCell>
  56                                     <TableCell>Last ping at</TableCell>
  57                                     <TableCell />
  58                                 </TableRow>
  59                             </TableHead>
  60                             <TableBody>
  61                                 {computeNodes.map((computeNode, index) =>
  62                                     <TableRow key={index} className={classes.tableRow}>
  63                                         <TableCell>{JSON.stringify(computeNode.info, null, 4)}</TableCell>
  64                                         <TableCell>{computeNode.uuid}</TableCell>
  65                                         <TableCell>{computeNode.domain}</TableCell>
  66                                         <TableCell>{formatDate(computeNode.firstPingAt) || '(none)'}</TableCell>
  67                                         <TableCell>{computeNode.hostname || '(none)'}</TableCell>
  68                                         <TableCell>{computeNode.ipAddress || '(none)'}</TableCell>
  69                                         <TableCell>{computeNode.jobUuid || '(none)'}</TableCell>
  70                                         <TableCell>{formatDate(computeNode.lastPingAt) || '(none)'}</TableCell>
  71                                         <TableCell>
  72                                             <Tooltip title="More options" disableFocusListener>
  73                                                 <IconButton onClick={event => openRowOptions(event, computeNode)}>
  74                                                     <MoreOptionsIcon />
  75                                                 </IconButton>
  76                                             </Tooltip>
  77                                         </TableCell>
  78                                     </TableRow>)}
  79                             </TableBody>
  80                         </Table>
  81                     </Grid>
  82                 </Grid>}
  83             </CardContent>
  84         </Card>
  85 );