github.com/argoproj/argo-cd/v2@v2.10.9/ui/src/app/shared/components/application-selector/application-selector.tsx (about)

     1  import * as React from 'react';
     2  import {FormFunctionProps} from 'react-form';
     3  import {CheckboxField} from '..';
     4  import * as models from '../../models';
     5  import {appInstanceName, appQualifiedName, ComparisonStatusIcon, HealthStatusIcon, OperationPhaseIcon} from '../../../applications/components/utils';
     6  import {AuthSettingsCtx} from '../../context';
     7  
     8  export const ApplicationSelector = ({apps, formApi}: {apps: models.Application[]; formApi: FormFunctionProps}) => {
     9      const useAuthSettingsCtx = React.useContext(AuthSettingsCtx);
    10      return (
    11          <>
    12              <label>
    13                  Apps (<a onClick={() => apps.forEach((_, i) => formApi.setValue('app/' + i, true))}>all</a>/
    14                  <a onClick={() => apps.forEach((app, i) => formApi.setValue('app/' + i, app.status.sync.status === models.SyncStatuses.OutOfSync))}>out of sync</a>/
    15                  <a onClick={() => apps.forEach((_, i) => formApi.setValue('app/' + i, false))}>none</a>
    16                  ):
    17              </label>
    18              <div style={{marginTop: '0.4em'}}>
    19                  {apps.map((app, i) => (
    20                      <label key={appInstanceName(app)} style={{marginTop: '0.5em', cursor: 'pointer'}}>
    21                          <CheckboxField field={`app/${i}`} />
    22                          &nbsp;
    23                          {app.isAppOfAppsPattern
    24                              ? `(App of Apps) ${appQualifiedName(app, useAuthSettingsCtx?.appsInAnyNamespaceEnabled)}`
    25                              : appQualifiedName(app, useAuthSettingsCtx?.appsInAnyNamespaceEnabled)}
    26                          &nbsp;
    27                          <ComparisonStatusIcon status={app.status.sync.status} />
    28                          &nbsp;
    29                          <HealthStatusIcon state={app.status.health} />
    30                          &nbsp;
    31                          <OperationPhaseIcon app={app} />
    32                          <br />
    33                      </label>
    34                  ))}
    35              </div>
    36          </>
    37      );
    38  };