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

     1  import {DataLoader, DropDownMenu, Duration} from 'argo-ui';
     2  import * as moment from 'moment';
     3  import * as React from 'react';
     4  import {Revision, Timestamp} from '../../../shared/components';
     5  import * as models from '../../../shared/models';
     6  import {services} from '../../../shared/services';
     7  import {ApplicationParameters} from '../application-parameters/application-parameters';
     8  import {RevisionMetadataRows} from './revision-metadata-rows';
     9  import './application-deployment-history.scss';
    10  
    11  export const ApplicationDeploymentHistory = ({
    12      app,
    13      rollbackApp,
    14      selectedRollbackDeploymentIndex,
    15      selectDeployment
    16  }: {
    17      app: models.Application;
    18      selectedRollbackDeploymentIndex: number;
    19      rollbackApp: (info: models.RevisionHistory) => any;
    20      selectDeployment: (index: number) => any;
    21  }) => {
    22      const deployments = (app.status.history || []).slice().reverse();
    23      const recentDeployments = deployments.map((info, i) => {
    24          const nextDeployedAt = i === 0 ? null : deployments[i - 1].deployedAt;
    25          const runEnd = nextDeployedAt ? moment(nextDeployedAt) : moment();
    26          return {...info, nextDeployedAt, durationMs: runEnd.diff(moment(info.deployedAt)) / 1000};
    27      });
    28  
    29      return (
    30          <div className='application-deployment-history'>
    31              {recentDeployments.map((info, index) => (
    32                  <div className='row application-deployment-history__item' key={info.deployedAt} onClick={() => selectDeployment(index)}>
    33                      <div className='columns small-3'>
    34                          <div>
    35                              <i className='fa fa-clock' /> <span className='show-for-large'>Deployed At:</span>
    36                              <br />
    37                              <Timestamp date={info.deployedAt} />
    38                          </div>
    39                          <div>
    40                              <br />
    41                              <i className='fa fa-hourglass-half' /> <span className='show-for-large'>Time to deploy:</span>
    42                              <br />
    43                              {(info.deployStartedAt && <Duration durationMs={moment(info.deployedAt).diff(moment(info.deployStartedAt)) / 1000} />) || 'Unknown'}
    44                          </div>
    45                          <div>
    46                              <br />
    47                              Active for:
    48                              <br />
    49                              <Duration durationMs={info.durationMs} />
    50                          </div>
    51                      </div>
    52                      <div className='columns small-9'>
    53                          <div className='row'>
    54                              <div className='columns small-3'>Revision:</div>
    55                              <div className='columns small-9'>
    56                                  <Revision repoUrl={info.source.repoURL} revision={info.revision} />
    57                                  <div className='application-deployment-history__item-menu'>
    58                                      <DropDownMenu
    59                                          anchor={() => (
    60                                              <button className='argo-button argo-button--light argo-button--lg argo-button--short'>
    61                                                  <i className='fa fa-ellipsis-v' />
    62                                              </button>
    63                                          )}
    64                                          items={[
    65                                              {
    66                                                  title: (info.nextDeployedAt && 'Rollback') || 'Redeploy',
    67                                                  action: () => rollbackApp(info)
    68                                              }
    69                                          ]}
    70                                      />
    71                                  </div>
    72                              </div>
    73                          </div>
    74                          {selectedRollbackDeploymentIndex === index ? (
    75                              <React.Fragment>
    76                                  <RevisionMetadataRows
    77                                      applicationName={app.metadata.name}
    78                                      applicationNamespace={app.metadata.namespace}
    79                                      source={{...recentDeployments[index].source, targetRevision: recentDeployments[index].revision}}
    80                                  />
    81                                  <DataLoader
    82                                      input={{...recentDeployments[index].source, targetRevision: recentDeployments[index].revision, appName: app.metadata.name}}
    83                                      load={src => services.repos.appDetails(src, src.appName, app.spec.project)}>
    84                                      {(details: models.RepoAppDetails) => (
    85                                          <div>
    86                                              <ApplicationParameters
    87                                                  application={{
    88                                                      ...app,
    89                                                      spec: {...app.spec, source: recentDeployments[index].source}
    90                                                  }}
    91                                                  details={details}
    92                                              />
    93                                          </div>
    94                                      )}
    95                                  </DataLoader>
    96                              </React.Fragment>
    97                          ) : null}
    98                      </div>
    99                  </div>
   100              ))}
   101          </div>
   102      );
   103  };