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

     1  /*
     2   * Copyright (c) 2022-present unTill Pro, Ltd.
     3   */
     4  
     5  import { Title } from 'react-admin';
     6  import Typography from '@mui/material/Typography';
     7  import { PaletteStatusCodes } from '../layout/Palette';
     8  import { useTranslate } from 'react-admin';
     9  import { useSearchParams } from "react-router-dom";
    10  import { COUNT, DURATION, PERCENT } from '../utils/Units';
    11  import { CommandProcessorMeta, HttpStatusCodesMeta, ProcessorsPerformanceRpsMeta, QueryProcessorMeta, StorageIopsCacheHitsMeta, StorageIopsExecutionTimeMeta, StorageIopsMeta } from '../data/Resources';
    12  import TimeSeriesChart, { LayoutLegendWidth } from '../charts/TimeSeriesChart';
    13  import MonCard from './MonCard';
    14  import AppSlowProjectors from './AppSlowProjectors';
    15  import AppPartitionsBalance from './AppPartitionsBalance';
    16  import { Box } from '@mui/material';
    17  
    18  
    19  const AppPerformance = (props) => {
    20  
    21      let [searchParams] = useSearchParams();    
    22      const app = searchParams.get("app")
    23      const translate = useTranslate();
    24  
    25      return (
    26          <div>
    27              <Title title={translate('menu.appPerformance')+': '+app} />
    28              <TimeSeriesChart 
    29                  path={props.path+":rps"} 
    30                  caption={translate('charts.rps')} 
    31                  meta={ProcessorsPerformanceRpsMeta(app)}
    32                  aggs={['avg']} 
    33                  units={COUNT}
    34                  height={200}
    35                  showAll />
    36              <MonCard caption={translate('charts.statusCodes')} >
    37                  <TimeSeriesChart 
    38                      noframe
    39                      path={props.path+":statusCodes"} 
    40                      caption={translate('appPerformance.overall')} 
    41                      meta={HttpStatusCodesMeta(app)}
    42                      aggs={['sum']} 
    43                      units={COUNT}
    44                      palette={PaletteStatusCodes}
    45                      height={200}
    46                      showAll />
    47                  <Box display='flex'>
    48                      <Box sx={{flexBasis: LayoutLegendWidth, flexShrink: 0, flexGrow: 0}} />
    49                      <Box sx={{flex: 1}} display="flex">
    50                          <Box width="50%">
    51                              <Typography align='center' sx={{paddingTop: 4}} variant="h6" component="h2">{translate('appPerformance.commandProcessor')}</Typography>
    52                              <TimeSeriesChart
    53                                  nolegend
    54                                  noframe
    55                                  path={props.path+":statusCodes"} 
    56                                  meta={HttpStatusCodesMeta(app)}
    57                                  units={COUNT}
    58                                  palette={PaletteStatusCodes}
    59                                  height={200}
    60                                  showAll 
    61                              />
    62                          </Box>
    63                          <Box width="50%">
    64                              <Typography align='center' sx={{paddingTop: 4}} variant="h6" component="h2">{translate('appPerformance.queryProcessor')}</Typography>
    65                              <TimeSeriesChart
    66                                  nolegend
    67                                  noframe                                
    68                                  path={props.path+":statusCodes"} 
    69                                  meta={HttpStatusCodesMeta(app)}
    70                                  units={COUNT}
    71                                  palette={PaletteStatusCodes}
    72                                  height={200}
    73                                  showAll 
    74                              />
    75                          </Box>
    76                      </Box>
    77                      
    78                  </Box>
    79  
    80              </MonCard>
    81              <MonCard caption={translate('appPerformance.executionTime')} >
    82                  <TimeSeriesChart 
    83                      noframe
    84                      caption={translate('appPerformance.commandProcessor')}
    85                      path={props.path+":executionTime:cp"} 
    86                      meta={CommandProcessorMeta(app)}
    87                      units={DURATION}
    88                      height={200}
    89                      aggs={[]}
    90                      showAll 
    91                  />
    92                  <TimeSeriesChart 
    93                      noframe
    94                      caption={translate('appPerformance.queryProcessor')}
    95                      height={300}
    96                      path={props.path+":executionTime:qp"} 
    97                      meta={QueryProcessorMeta(app)}
    98                      units={DURATION}
    99                      aggs={[]}
   100                      showAll
   101                  />
   102              </MonCard>
   103              <Box display={'flex'}>
   104                  <Box width="50%">
   105                      <AppSlowProjectors height={260} app={app}/>
   106                  </Box>
   107                  <Box width="50%">
   108                      <AppPartitionsBalance height={260} />
   109                  </Box>
   110              </Box>
   111              <MonCard caption={translate('appPerformance.storage')} >
   112                  <TimeSeriesChart 
   113                      path={props.path+":iops"} 
   114                      caption={translate('appPerformance.iops')} 
   115                      meta={StorageIopsMeta(app)}
   116                      aggs={['avg']} 
   117                      units={COUNT}
   118                      height={200}
   119                      noframe
   120                      showAll />
   121                  <TimeSeriesChart 
   122                      path={props.path+":execTime"} 
   123                      caption={translate('appPerformance.executionTime')} 
   124                      meta={StorageIopsExecutionTimeMeta(app)}
   125                      aggs={['avg']} 
   126                      units={DURATION}
   127                      height={200}
   128                      noframe
   129                      showAll />
   130                  <TimeSeriesChart 
   131                      path={props.path+":cacheHits"} 
   132                      caption={translate('appPerformance.cacheHits')} 
   133                      meta={StorageIopsCacheHitsMeta(app)}
   134                      aggs={['avg']} 
   135                      units={PERCENT}
   136                      height={200}
   137                      noframe
   138                      showAll />
   139              </MonCard>
   140          </div>
   141      )
   142  };
   143  
   144  
   145  export default AppPerformance