searching by description and uuid
[arvados.git] / src / views-components / compute-nodes-dialog / attributes-dialog.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 { compose } from 'redux';
7 import {
8     withStyles, Dialog, DialogTitle, DialogContent, DialogActions,
9     Button, StyleRulesCallback, WithStyles, Grid
10 } from '@material-ui/core';
11 import { WithDialogProps, withDialog } from "~/store/dialog/with-dialog";
12 import { COMPUTE_NODE_ATTRIBUTES_DIALOG } from '~/store/compute-nodes/compute-nodes-actions';
13 import { ArvadosTheme } from '~/common/custom-theme';
14 import { NodeResource, NodeProperties, NodeInfo } from '~/models/node';
15 import * as classnames from "classnames";
16
17 type CssRules = 'root' | 'grid';
18
19 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
20     root: {
21         fontSize: '0.875rem',
22         '& div:nth-child(odd):not(.nestedRoot)': {
23             textAlign: 'right',
24             color: theme.palette.grey["500"]
25         },
26         '& div:nth-child(even)': {
27             overflowWrap: 'break-word'
28         }
29     },
30     grid: {
31         padding: '8px 0 0 0'
32     } 
33 });
34
35 interface AttributesComputeNodeDialogDataProps {
36     computeNode: NodeResource;
37 }
38
39 export const AttributesComputeNodeDialog = compose(
40     withDialog(COMPUTE_NODE_ATTRIBUTES_DIALOG),
41     withStyles(styles))(
42         ({ open, closeDialog, data, classes }: WithDialogProps<AttributesComputeNodeDialogDataProps> & WithStyles<CssRules>) =>
43             <Dialog open={open} onClose={closeDialog} fullWidth maxWidth='sm'>
44                 <DialogTitle>Attributes</DialogTitle>
45                 <DialogContent>
46                     {data.computeNode && <div>
47                         {renderPrimaryInfo(data.computeNode, classes)}
48                         {renderInfo(data.computeNode.info, classes)}
49                         {renderProperties(data.computeNode.properties, classes)}
50                     </div>}
51                 </DialogContent>
52                 <DialogActions>
53                     <Button
54                         variant='text'
55                         color='primary'
56                         onClick={closeDialog}>
57                         Close
58                     </Button>
59                 </DialogActions>
60             </Dialog>
61     );
62
63 const renderPrimaryInfo = (computeNode: NodeResource, classes: any) => {
64     const { uuid, ownerUuid, createdAt, modifiedAt, modifiedByClientUuid, modifiedByUserUuid } = computeNode;
65     return (
66         <Grid container direction="row" spacing={16} className={classes.root}>
67             <Grid item xs={5}>UUID</Grid>
68             <Grid item xs={7}>{uuid}</Grid>
69             <Grid item xs={5}>Owner uuid</Grid>
70             <Grid item xs={7}>{ownerUuid}</Grid>
71             <Grid item xs={5}>Created at</Grid>
72             <Grid item xs={7}>{createdAt}</Grid>
73             <Grid item xs={5}>Modified at</Grid>
74             <Grid item xs={7}>{modifiedAt}</Grid>
75             <Grid item xs={5}>Modified by user uuid</Grid>
76             <Grid item xs={7}>{modifiedByUserUuid}</Grid>
77             <Grid item xs={5}>Modified by client uuid</Grid>
78             <Grid item xs={7}>{modifiedByClientUuid || '(none)'}</Grid>
79         </Grid>
80     );
81 };
82
83 const renderInfo = (info: NodeInfo, classes: any) => {
84     const { lastAction, pingSecret, ec2InstanceId, slurmState } = info;
85     return (
86         <Grid container direction="row" spacing={16} className={classnames([classes.root, classes.grid])}>
87             <Grid item xs={5}>Info - Last action</Grid>
88             <Grid item xs={7}>{lastAction || '(none)'}</Grid>
89             <Grid item xs={5}>Info - Ping secret</Grid>
90             <Grid item xs={7}>{pingSecret || '(none)'}</Grid>
91             <Grid item xs={5}>Info - ec2 instance id</Grid>
92             <Grid item xs={7}>{ec2InstanceId || '(none)'}</Grid>
93             <Grid item xs={5}>Info - Slurm state</Grid>
94             <Grid item xs={7}>{slurmState || '(none)'}</Grid>
95         </Grid>
96     );
97 };
98
99 const renderProperties = (properties: NodeProperties, classes: any) => {
100     const { totalRamMb, totalCpuCores, totalScratchMb, cloudNode } = properties;
101     return (
102         <Grid container direction="row" spacing={16} className={classnames([classes.root, classes.grid])}>
103             <Grid item xs={5}>Properties - Total ram mb</Grid>
104             <Grid item xs={7}>{totalRamMb || '(none)'}</Grid>
105             <Grid item xs={5}>Properties - Total scratch mb</Grid>
106             <Grid item xs={7}>{totalScratchMb || '(none)'}</Grid>
107             <Grid item xs={5}>Properties - Total cpu cores</Grid>
108             <Grid item xs={7}>{totalCpuCores || '(none)'}</Grid>
109             <Grid item xs={5}>Properties - Cloud node size </Grid>
110             <Grid item xs={7}>{cloudNode ? cloudNode.size : '(none)'}</Grid>
111             <Grid item xs={5}>Properties - Cloud node price</Grid>
112             <Grid item xs={7}>{cloudNode ? cloudNode.price : '(none)'}</Grid>
113         </Grid>
114     );
115 };