github.com/argoproj/argo-cd@v1.8.7/ui/src/app/applications/components/applications-list/applications-summary.tsx (about)

     1  import * as React from 'react';
     2  const PieChart = require('react-svg-piechart').default;
     3  
     4  import {COLORS} from '../../../shared/components';
     5  import * as models from '../../../shared/models';
     6  
     7  const healthColors = new Map<models.HealthStatusCode, string>();
     8  healthColors.set('Healthy', COLORS.health.healthy);
     9  healthColors.set('Progressing', COLORS.health.progressing);
    10  healthColors.set('Degraded', COLORS.health.degraded);
    11  healthColors.set('Missing', COLORS.health.missing);
    12  healthColors.set('Unknown', COLORS.health.unknown);
    13  
    14  const syncColors = new Map<models.SyncStatusCode, string>();
    15  syncColors.set('Synced', COLORS.sync.synced);
    16  syncColors.set('OutOfSync', COLORS.sync.out_of_sync);
    17  syncColors.set('Unknown', COLORS.sync.unknown);
    18  
    19  export const ApplicationsSummary = ({applications}: {applications: models.Application[]}) => {
    20      const sync = new Map<string, number>();
    21      applications.forEach(app => sync.set(app.status.sync.status, (sync.get(app.status.sync.status) || 0) + 1));
    22      const health = new Map<string, number>();
    23      applications.forEach(app => health.set(app.status.health.status, (health.get(app.status.health.status) || 0) + 1));
    24  
    25      const attributes = [
    26          {
    27              title: 'APPLICATIONS:',
    28              value: applications.length
    29          },
    30          {
    31              title: 'SYNCED:',
    32              value: applications.filter(app => app.status.sync.status === 'Synced').length
    33          },
    34          {
    35              title: 'HEALTHY:',
    36              value: applications.filter(app => app.status.health.status === 'Healthy').length
    37          },
    38          {
    39              title: 'CLUSTERS:',
    40              value: new Set(applications.map(app => app.spec.destination.server)).size
    41          },
    42          {
    43              title: 'NAMESPACES:',
    44              value: new Set(applications.map(app => app.spec.destination.namespace)).size
    45          }
    46      ];
    47  
    48      const charts = [
    49          {
    50              title: 'Sync',
    51              data: Array.from(sync.keys()).map(key => ({title: key, value: sync.get(key), color: syncColors.get(key as models.SyncStatusCode)})),
    52              legend: syncColors as Map<string, string>
    53          },
    54          {
    55              title: 'Health',
    56              data: Array.from(health.keys()).map(key => ({title: key, value: health.get(key), color: healthColors.get(key as models.HealthStatusCode)})),
    57              legend: healthColors as Map<string, string>
    58          }
    59      ];
    60      return (
    61          <div className='white-box applications-list__summary'>
    62              <div className='row'>
    63                  <div className='columns large-3 small-12'>
    64                      <div className='white-box__details'>
    65                          <p className='row'>SUMMARY</p>
    66                          {attributes.map(attr => (
    67                              <div className='row white-box__details-row' key={attr.title}>
    68                                  <div className='columns small-8'>{attr.title}</div>
    69                                  <div style={{textAlign: 'right'}} className='columns small-4'>
    70                                      {attr.value}
    71                                  </div>
    72                              </div>
    73                          ))}
    74                      </div>
    75                  </div>
    76                  {charts.map(chart => (
    77                      <React.Fragment key={chart.title}>
    78                          <div className='columns large-4 small-12'>
    79                              <div className='row'>
    80                                  <div className='columns large-10 small-6'>
    81                                      <h4 style={{textAlign: 'center'}}>{chart.title}</h4>
    82                                      <PieChart data={chart.data} />
    83                                  </div>
    84                                  <div className='columns large-1 small-1'>
    85                                      <ul>
    86                                          {Array.from(chart.legend.keys()).map(key => (
    87                                              <li style={{color: chart.legend.get(key)}} key={key}>
    88                                                  {key}
    89                                              </li>
    90                                          ))}
    91                                      </ul>
    92                                  </div>
    93                              </div>
    94                          </div>
    95                      </React.Fragment>
    96                  ))}
    97              </div>
    98          </div>
    99      );
   100  };