github.com/argoproj/argo-cd@v1.8.7/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  
    10  require('./application-deployment-history.scss');
    11  
    12  export const ApplicationDeploymentHistory = ({
    13      app,
    14      rollbackApp,
    15      selectedRollbackDeploymentIndex,
    16      selectDeployment
    17  }: {
    18      app: models.Application;
    19      selectedRollbackDeploymentIndex: number;
    20      rollbackApp: (info: models.RevisionHistory) => any;
    21      selectDeployment: (index: number) => any;
    22  }) => {
    23      const deployments = (app.status.history || []).slice().reverse();
    24      const recentDeployments = deployments.map((info, i) => {
    25          const nextDeployedAt = i === 0 ? null : deployments[i - 1].deployedAt;
    26          const runEnd = nextDeployedAt ? moment(nextDeployedAt) : moment();
    27          return {...info, nextDeployedAt, durationMs: runEnd.diff(moment(info.deployedAt)) / 1000};
    28      });
    29  
    30      return (
    31          <div className='application-deployment-history'>
    32              {recentDeployments.map((info, index) => (
    33                  <div className='row application-deployment-history__item' key={info.deployedAt} onClick={() => selectDeployment(index)}>
    34                      <div className='columns small-3'>
    35                          <div>
    36                              <i className='fa fa-clock' /> Deployed At:
    37                              <br />
    38                              <Timestamp date={info.deployedAt} />
    39                          </div>
    40                          <div>
    41                              <br />
    42                              <i className='fa fa-hourglass-half' /> Time to deploy:
    43                              <br />
    44                              {(info.deployStartedAt && <Duration durationMs={moment(info.deployedAt).diff(moment(info.deployStartedAt)) / 1000} />) || 'Unknown'}
    45                          </div>
    46                          <div>
    47                              <br />
    48                              Active for:
    49                              <br />
    50                              <Duration durationMs={info.durationMs} />
    51                          </div>
    52                      </div>
    53                      <div className='columns small-9'>
    54                          <div className='row'>
    55                              <div className='columns small-3'>Revision:</div>
    56                              <div className='columns small-9'>
    57                                  <Revision repoUrl={info.source.repoURL} revision={info.revision} />
    58                                  <div className='application-deployment-history__item-menu'>
    59                                      <DropDownMenu
    60                                          anchor={() => (
    61                                              <button className='argo-button argo-button--light argo-button--lg argo-button--short'>
    62                                                  <i className='fa fa-ellipsis-v' />
    63                                              </button>
    64                                          )}
    65                                          items={[
    66                                              {
    67                                                  title: (info.nextDeployedAt && 'Rollback') || 'Redeploy',
    68                                                  action: () => rollbackApp(info)
    69                                              }
    70                                          ]}
    71                                      />
    72                                  </div>
    73                              </div>
    74                          </div>
    75                          {selectedRollbackDeploymentIndex === index ? (
    76                              <React.Fragment>
    77                                  <RevisionMetadataRows
    78                                      applicationName={app.metadata.name}
    79                                      source={{...recentDeployments[index].source, targetRevision: recentDeployments[index].revision}}
    80                                  />
    81                                  <DataLoader
    82                                      input={{...recentDeployments[index].source, targetRevision: recentDeployments[index].revision}}
    83                                      load={src => services.repos.appDetails(src)}>
    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  };