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

     1  import {DropDownMenu, Duration} from 'argo-ui';
     2  import {InitiatedBy} from './initiated-by';
     3  import * as moment from 'moment';
     4  import * as React from 'react';
     5  import {Timestamp} from '../../../shared/components';
     6  import * as models from '../../../shared/models';
     7  import './application-deployment-history.scss';
     8  import {ApplicationDeploymentHistoryDetails} from './application-deployment-history-details';
     9  
    10  export const ApplicationDeploymentHistory = ({
    11      app,
    12      rollbackApp,
    13      selectDeployment
    14  }: {
    15      app: models.Application;
    16      rollbackApp: (info: models.RevisionHistory) => any;
    17      selectDeployment: (index: number) => any;
    18  }) => {
    19      const deployments = (app.status.history || []).slice().reverse();
    20      const recentDeployments = deployments.map((info, i) => {
    21          const nextDeployedAt = i === 0 ? null : deployments[i - 1].deployedAt;
    22          const runEnd = nextDeployedAt ? moment(nextDeployedAt) : moment();
    23          return {...info, nextDeployedAt, durationS: runEnd.diff(moment(info.deployedAt)) / 1000};
    24      });
    25  
    26      return (
    27          <div className='application-deployment-history'>
    28              {recentDeployments.map((info, index) => (
    29                  <div className='row application-deployment-history__item' key={info.deployedAt} onClick={() => selectDeployment(index)}>
    30                      <div className='columns small-3'>
    31                          <div>
    32                              <i className='fa fa-clock' /> <span className='show-for-large'>Deployed At:</span>
    33                              <br />
    34                              <Timestamp date={info.deployedAt} />
    35                          </div>
    36                          <div>
    37                              <br />
    38                              <i className='fa fa-hourglass-half' /> <span className='show-for-large'>Time to deploy:</span>
    39                              <br />
    40                              {(info.deployStartedAt && <Duration durationS={moment(info.deployedAt).diff(moment(info.deployStartedAt)) / 1000} />) || 'Unknown'}
    41                          </div>
    42                          <div>
    43                              <br />
    44                              Initiated by:
    45                              <br />
    46                              <InitiatedBy username={info.initiatedBy.username} automated={info.initiatedBy.automated} />
    47                          </div>
    48                          <div>
    49                              <br />
    50                              Active for:
    51                              <br />
    52                              <Duration durationS={info.durationS} />
    53                          </div>
    54                      </div>
    55                      <div className='columns small-9'>
    56                          <div className='row'>
    57                              <div className='columns small-9'>
    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  
    76                          <ApplicationDeploymentHistoryDetails index={index} info={info} app={app} />
    77                      </div>
    78                  </div>
    79              ))}
    80          </div>
    81      );
    82  };