github.com/argoproj/argo-cd/v3@v3.2.1/ui/src/app/applications/components/applications-list/applications-status-bar.tsx (about)

     1  import {Tooltip} from 'argo-ui/v2';
     2  import * as React from 'react';
     3  import {COLORS} from '../../../shared/components';
     4  import {Consumer} from '../../../shared/context';
     5  import * as models from '../../../shared/models';
     6  
     7  import './applications-status-bar.scss';
     8  
     9  export interface ApplicationsStatusBarProps {
    10      applications: models.Application[];
    11  }
    12  
    13  export const ApplicationsStatusBar = ({applications}: ApplicationsStatusBarProps) => {
    14      const readings = [
    15          {
    16              name: 'Healthy',
    17              value: applications.filter(app => app.status.health.status === 'Healthy').length,
    18              color: COLORS.health.healthy
    19          },
    20          {
    21              name: 'Progressing',
    22              value: applications.filter(app => app.status.health.status === 'Progressing').length,
    23              color: COLORS.health.progressing
    24          },
    25          {
    26              name: 'Degraded',
    27              value: applications.filter(app => app.status.health.status === 'Degraded').length,
    28              color: COLORS.health.degraded
    29          },
    30          {
    31              name: 'Suspended',
    32              value: applications.filter(app => app.status.health.status === 'Suspended').length,
    33              color: COLORS.health.suspended
    34          },
    35          {
    36              name: 'Missing',
    37              value: applications.filter(app => app.status.health.status === 'Missing').length,
    38              color: COLORS.health.missing
    39          },
    40          {
    41              name: 'Unknown',
    42              value: applications.filter(app => app.status.health.status === 'Unknown').length,
    43              color: COLORS.health.unknown
    44          }
    45      ];
    46  
    47      // will sort readings by value greatest to lowest, then by name
    48      readings.sort((a, b) => (a.value < b.value ? 1 : a.value === b.value ? (a.name > b.name ? 1 : -1) : -1));
    49  
    50      const totalItems = readings.reduce((total, i) => {
    51          return total + i.value;
    52      }, 0);
    53  
    54      return (
    55          <Consumer>
    56              {() => (
    57                  <>
    58                      {totalItems > 1 && (
    59                          <div className='status-bar'>
    60                              {readings &&
    61                                  readings.length > 1 &&
    62                                  readings.map((item, i) => {
    63                                      if (item.value > 0) {
    64                                          return (
    65                                              <div className='status-bar__segment' style={{backgroundColor: item.color, width: (item.value / totalItems) * 100 + '%'}} key={i}>
    66                                                  <Tooltip content={`${item.value} ${item.name}`} inverted={true}>
    67                                                      <div className='status-bar__segment__fill' />
    68                                                  </Tooltip>
    69                                              </div>
    70                                          );
    71                                      }
    72                                  })}
    73                          </div>
    74                      )}
    75                  </>
    76              )}
    77          </Consumer>
    78      );
    79  };