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

     1  /*
     2   * Copyright (c) 2022-present unTill Pro, Ltd.
     3   */
     4  
     5  import { Button, useTranslate } from 'react-admin';
     6  import { Typography, Box } from '@mui/material';
     7  import { DataGrid } from '@mui/x-data-grid';
     8  import MonCard from './MonCard';
     9  
    10  
    11  export default () => {
    12      const translate = useTranslate();
    13      const columns = [
    14          {
    15            field: 'app',
    16            headerName: translate('appsOverview.application'),          
    17            editable: false,
    18            width: 200,
    19          },
    20          {
    21            field: 'ver',
    22            headerName: translate('appsOverview.version'),
    23            width: 100,
    24            editable: false,
    25          },
    26          {
    27            field: 'partitions',
    28            headerName: translate('appsOverview.partitions'),
    29            width: 100,
    30            editable: false,
    31          },
    32          {
    33            field: 'uptime',
    34            headerName: translate('appsOverview.uptime'),
    35            width: 130,
    36            editable: false,
    37          },
    38          {
    39            field: 'rps',
    40            headerName: translate('appsOverview.rps'),
    41            width: 130,
    42            editable: false,
    43            renderCell: (params) => {
    44              return (
    45                <strong>
    46                  <Button size="small" href={`./#/app-performance?app=${params.row.app.replace("/", ".")}`} label={params.value}/>
    47                </strong>
    48              )
    49            },
    50          },
    51        ];
    52  
    53        const rows = [
    54          { id: '0', app: 'sys/monitor', ver: '0.0.1', 'partitions': '1', uptime: '10d', rps: 12 },
    55          { id: '1', app: 'sys/registry', ver: '0.1.2', 'partitions': '10', uptime: '10d', rps: 52 },
    56          { id: '2', app: 'untill/air', ver: '0.2.1', 'partitions': '20', uptime: '4h 10m', rps: 2103 },
    57        ];  
    58      
    59      return (
    60          <MonCard>
    61                  <Typography variant="h5" component="h2">
    62                      {translate('dashboard.applicationsOverview')}
    63                 </Typography>
    64  
    65                <Box>
    66                  <DataGrid
    67                      density='compact'
    68                      rows={rows}
    69                      columns={columns}
    70                      rowsPerPageOptions={[5]}
    71                      disableSelectionOnClick
    72                      autoHeight={true}
    73                      hideFooter={true}
    74                      sx={{
    75                          boxShadow: 0,
    76                          border: 0,
    77                      }}
    78                  />            
    79                </Box>
    80          </MonCard>
    81      )
    82  };