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

     1  /*
     2   * Copyright (c) 2022-present unTill Pro, Ltd.
     3   */
     4  
     5  import { Error, Title, useDataProvider, useTheme } from 'react-admin';
     6  import { Bars } from 'svg-loaders-react'
     7  import { Typography, Box } from '@mui/material';
     8  import CardContent from '@mui/material/CardContent';
     9  import { Card, CardHeader } from '@mui/material';
    10  import { useTranslate } from 'react-admin';
    11  import { COUNT, DURATION, FormatValue, PERCENT } from '../utils/Units';
    12  import { useSelector } from 'react-redux';
    13  import { PaletteSpringPastels } from '../charts/TimeSeriesChart';
    14  import { ResWorstApps } from '../data/Resources';
    15  import { useEffect, useState } from 'react';
    16  
    17  export default (props) => {
    18  
    19      const [theme] = useTheme();
    20      const dataProvider = useDataProvider()
    21  
    22      const appInterval = useSelector((state) => state.app.interval)
    23  
    24      const [loading, setLoading] = useState(true);
    25      const [error, setError] = useState();
    26      const [worstApps, setWorstApps] = useState(); 
    27      const [interval, setInterval] = useState(appInterval);
    28  
    29      const renderMoreSection = function(data, caption, unit) {
    30          return (
    31              <Box>
    32                  <table cellpadding="4">
    33                      <thead>
    34                          <tr>
    35                              <th colspan="2" style={{borderBottomColor: theme.palette.divider, borderBottomWidth: 1, borderBottomStyle: 'solid'}}><Typography sx={{fontWeight: 'bolder'}} >{caption}</Typography></th>
    36                          </tr>
    37                      </thead>
    38                      <tbody>
    39                          {data.map((entry, index) => (
    40                              <tr key={`cell-${index}`}>
    41                                  <td><Typography>{entry.app}</Typography></td>
    42                                  <td><Typography>{FormatValue(unit, entry.value)}</Typography></td>
    43                              </tr>
    44                          ))}                   
    45                      </tbody>            
    46                  </table>
    47              </Box>
    48          )
    49      }
    50      const reload = (interval) => {
    51          dataProvider.getOne(ResWorstApps, {meta: {interval: interval}})
    52              .then(({ data }) => {
    53                  setWorstApps(data);
    54                  setLoading(false);
    55              })
    56              .catch(error => {
    57                  setError(error);
    58                  setLoading(false);
    59              })
    60      }
    61  
    62      const Section = (props) => (
    63          <Card variant='outlined'>
    64              <CardHeader 
    65                  title={props.title} 
    66                  sx={{backgroundColor: theme.palette.action.selected, padding: '.5rem 1.3rem'}} 
    67                  titleTypographyProps = {{
    68                      variant: "h6",
    69                      component: "h2"
    70                  }}
    71              />
    72              <CardContent>
    73                  <Box display={"flex"} gap={'2rem'}>
    74                      {props.children}
    75                  </Box>
    76              </CardContent>
    77          </Card>
    78      )
    79  
    80      useEffect(() => {
    81          reload(interval)
    82      }, []);
    83      
    84      if (appInterval != interval) { // Interval has changed
    85          setInterval(appInterval)
    86          setLoading(true)
    87          setError(false)
    88          reload(appInterval);
    89      }
    90  
    91      const translate = useTranslate();
    92      
    93      if (error) {
    94          return (
    95              <Error />
    96          )
    97      }
    98  
    99      if (loading) {
   100          return (
   101              <Box width="100%" height={props.height} sx={{ border: '1px solid #ccc' }} display='flex' alignItems={'center'} justifyContent={'center'}>
   102                  <Bars stroke={PaletteSpringPastels[1]} fill={PaletteSpringPastels[1]} width="60"/>
   103              </Box>
   104          )
   105      }
   106  
   107      return (
   108          <Box>
   109              <Typography variant="h6" component="h2" sx={{margin: '1rem 0'}}>
   110                  {translate('sysPerformance.worstApps')}
   111              </Typography>
   112              <Box display="flex" flexWrap={'wrap'} gap={'2rem'}>
   113                  <Section title='Get'>
   114                      {renderMoreSection(worstApps.moreGetTop5AppsByRT, translate('sysPerformance.top5ByRt'), DURATION)}
   115                      {renderMoreSection(worstApps.moreGetTop5AppsByRPS, translate('sysPerformance.top5ByRps'), COUNT)}
   116                      {renderMoreSection(worstApps.moreGetBottom5AppsByCacheHits, translate('sysPerformance.bottom5ByCacheHits'), PERCENT)}
   117                  </Section>
   118                  <Section title='GetBatch'>
   119                      {renderMoreSection(worstApps.moreGetBatchTop5AppsByRT, translate('sysPerformance.top5ByRt'), DURATION)}
   120                      {renderMoreSection(worstApps.moreGetBatchTop5AppsByRPS, translate('sysPerformance.top5ByRps'), COUNT)}
   121                      {renderMoreSection(worstApps.moreGetBatchBottom5AppsByCacheHits, translate('sysPerformance.bottom5ByCacheHits'), PERCENT)}
   122                  </Section>
   123                  <Section title='Read'>
   124                      {renderMoreSection(worstApps.moreReadTop5AppsByRT, translate('sysPerformance.top5ByRt'), DURATION)}
   125                      {renderMoreSection(worstApps.moreReadTop5AppsByRPS, translate('sysPerformance.top5ByRps'), COUNT)}
   126                  </Section>
   127                  <Section title='Put'>
   128                      {renderMoreSection(worstApps.morePutTop5AppsByRT, translate('sysPerformance.top5ByRt'), DURATION)}
   129                      {renderMoreSection(worstApps.morePutTop5AppsByRPS, translate('sysPerformance.top5ByRps'), COUNT)}
   130                  </Section>
   131                  <Section title='PutBatch'>
   132                      {renderMoreSection(worstApps.morePutBatchTop5AppsByRT, translate('sysPerformance.top5ByRt'), DURATION)}
   133                      {renderMoreSection(worstApps.morePutBatchTop5AppsByRPS, translate('sysPerformance.top5ByRps'), COUNT)}
   134                      {renderMoreSection(worstApps.morePutBatchTop5AppsByBatchSize, translate('sysPerformance.top5ByBatchSize'), COUNT)}
   135                  </Section>
   136              </Box>
   137          </Box>
   138      )
   139  
   140  }