github.com/argoproj/argo-cd/v3@v3.2.1/ui/src/app/applications/components/application-hydrate-operation-state/application-hydrate-operation-state.tsx (about)

     1  import {Duration, Ticker} from 'argo-ui';
     2  import * as moment from 'moment';
     3  import * as PropTypes from 'prop-types';
     4  import * as React from 'react';
     5  
     6  import {Revision, Timestamp} from '../../../shared/components';
     7  import * as models from '../../../shared/models';
     8  
     9  import './application-hydrate-operation-state.scss';
    10  
    11  interface Props {
    12      hydrateOperationState: models.HydrateOperation;
    13  }
    14  
    15  export const ApplicationHydrateOperationState: React.FunctionComponent<Props> = ({hydrateOperationState}) => {
    16      const operationAttributes = [
    17          {title: 'PHASE', value: hydrateOperationState.phase},
    18          ...(hydrateOperationState.message ? [{title: 'MESSAGE', value: hydrateOperationState.message}] : []),
    19          {title: 'STARTED AT', value: <Timestamp date={hydrateOperationState.startedAt} />},
    20          {
    21              title: 'DURATION',
    22              value: (
    23                  <Ticker>
    24                      {time => (
    25                          <Duration
    26                              durationS={
    27                                  ((hydrateOperationState.finishedAt && moment(hydrateOperationState.finishedAt)) || moment(time)).diff(moment(hydrateOperationState.startedAt)) /
    28                                  1000
    29                              }
    30                          />
    31                      )}
    32                  </Ticker>
    33              )
    34          }
    35      ];
    36  
    37      if (hydrateOperationState.finishedAt && hydrateOperationState.phase !== 'Hydrating') {
    38          operationAttributes.push({title: 'FINISHED AT', value: <Timestamp date={hydrateOperationState.finishedAt} />});
    39      }
    40      operationAttributes.push({
    41          title: 'DRY REVISION',
    42          value: (
    43              <div>
    44                  <Revision repoUrl={hydrateOperationState.sourceHydrator.drySource.repoURL} revision={hydrateOperationState.drySHA} />
    45              </div>
    46          )
    47      });
    48      if (hydrateOperationState.finishedAt) {
    49          operationAttributes.push({
    50              title: 'HYDRATED REVISION',
    51              value: (
    52                  <div>
    53                      <Revision repoUrl={hydrateOperationState.sourceHydrator.drySource.repoURL} revision={hydrateOperationState.hydratedSHA} />
    54                  </div>
    55              )
    56          });
    57      }
    58      return (
    59          <div>
    60              <div className='white-box'>
    61                  <div className='white-box__details'>
    62                      {operationAttributes.map(attr => (
    63                          <div className='row white-box__details-row' key={attr.title}>
    64                              <div className='columns small-3'>{attr.title}</div>
    65                              <div className='columns small-9'>{attr.value}</div>
    66                          </div>
    67                      ))}
    68                  </div>
    69              </div>
    70          </div>
    71      );
    72  };
    73  
    74  ApplicationHydrateOperationState.contextTypes = {
    75      apis: PropTypes.object
    76  };