github.com/voedger/voedger@v0.0.0-20240520144910-273e84102129/pkg/apps/sys.monitor/site.main.src/src/elements/SysResourcesOverview.js (about)

     1  /*
     2   * Copyright (c) 2022-present unTill Pro, Ltd.
     3   */
     4  
     5  import { BooleanField, Button, useTranslate } from 'react-admin';
     6  import CardContent from '@mui/material/CardContent';
     7  import CardActions from '@mui/material/CardActions';
     8  import { Card, Typography, Box } from '@mui/material';
     9  import { DataGrid } from '@mui/x-data-grid';
    10  import MonCard from './MonCard';
    11  
    12  
    13  
    14  
    15  export default () => {
    16      const translate = useTranslate();
    17      const columns = [
    18          {
    19            field: 'node',
    20            headerName: translate('resourcesOverview.node'),          
    21            editable: false,
    22            width: 170,
    23          },
    24          {
    25            field: 'cpu',
    26            headerName: translate('resourcesOverview.cpu'),
    27            width: 100,
    28            editable: false,
    29            valueFormatter: ({ value }) => `${value}%`
    30          },
    31          {
    32            field: 'memory',
    33            headerName: translate('resourcesOverview.memory'),
    34            width: 100,
    35            editable: false,
    36            valueFormatter: ({ value }) => `${value}%`
    37          },
    38          {
    39              field: 'totalMemory',
    40              headerName: translate('resourcesOverview.totalMemory'),
    41              width: 100,
    42              editable: false,
    43          },
    44          {
    45              field: 'disk',
    46              headerName: translate('resourcesOverview.disk'),
    47              width: 100,
    48              editable: false,
    49              valueFormatter: ({ value }) => `${value}%`
    50          },
    51            {
    52                field: 'totalDisk',
    53                headerName: translate('resourcesOverview.totalDisk'),
    54                width: 100,
    55                editable: false,
    56            },
    57            {
    58              field: 'iops',
    59              headerName: translate('resourcesOverview.iops'),
    60              width: 100,
    61              editable: false,
    62          },
    63        ];
    64  
    65        const rows = [
    66          { id: '0', node: 'worker1', cpu: '75', memory: '65', totalMemory: '64G', disk: '25', totalDisk: '100G', iops: '12345' },
    67          { id: '1', node: 'db1', cpu: '94', memory: '45', totalMemory: '32G', disk: '46', totalDisk: '256G', iops: '42353' },
    68          { id: '2', node: 'db2', cpu: '55', memory: '92', totalMemory: '32G', disk: '36', totalDisk: '256G', iops: '41153' },
    69          { id: '3', node: 'db3', cpu: '47', memory: '30', totalMemory: '64G', disk: '88', totalDisk: '256G', iops: '122353' },
    70        ];  
    71      
    72      return (
    73          <MonCard caption={translate('dashboard.sysResourcesOverview')} toolbar={(<Button sx={{whiteSpace: 'nowrap'}} href="./#/sys-resources" label={translate('common.showDetails')}/>)}>
    74                 <Box sx={{ 
    75                      width: '100%',
    76                      '& .warm': {
    77                          backgroundColor: '#ffcf33',
    78                        },
    79                        '& .hot': {
    80                          backgroundColor: '#ba000d',
    81                          color: '#fff',
    82                          fontWeight: 'bold',
    83                        },
    84                  }}>
    85                  <DataGrid
    86                      density='compact'
    87                      rows={rows}
    88                      columns={columns}
    89                      rowsPerPageOptions={[5]}
    90                      disableSelectionOnClick
    91                      autoHeight={true}
    92                      hideFooter={true}
    93                      sx={{
    94                          boxShadow: 0,
    95                          border: 0,
    96                      }}
    97                      getCellClassName={(params) => {
    98                          if (params.field === 'cpu' || params.field === 'memory' || params.field === 'disk') {
    99                              return params.value >= 90 ? 'hot' : (params.value >= 70 ? 'warm' : '');
   100                          }
   101                          return '';
   102                      }}
   103                  />            
   104                  </Box>
   105          </MonCard>
   106  
   107      )
   108  };