argo-cd

1
import {DataLoader, 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 {Revision, Timestamp} from '../../../shared/components';
6
import * as models from '../../../shared/models';
7
import {services} from '../../../shared/services';
8
import {ApplicationParameters} from '../application-parameters/application-parameters';
9
import {RevisionMetadataRows} from './revision-metadata-rows';
10
import './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' /> <span className='show-for-large'>Deployed At:</span>
37
                            <br />
38
                            <Timestamp date={info.deployedAt} />
39
                        </div>
40
                        <div>
41
                            <br />
42
                            <i className='fa fa-hourglass-half' /> <span className='show-for-large'>Time to deploy:</span>
43
                            <br />
44
                            {(info.deployStartedAt && <Duration durationMs={moment(info.deployedAt).diff(moment(info.deployStartedAt)) / 1000} />) || 'Unknown'}
45
                        </div>
46
                        <div>
47
                            <br />
48
                            Initiated by:
49
                            <br />
50
                            <InitiatedBy username={info.initiatedBy.username} automated={info.initiatedBy.automated} />
51
                        </div>
52
                        <div>
53
                            <br />
54
                            Active for:
55
                            <br />
56
                            <Duration durationMs={info.durationMs} />
57
                        </div>
58
                    </div>
59
                    <div className='columns small-9'>
60
                        <div className='row'>
61
                            <div className='columns small-3'>Revision:</div>
62
                            <div className='columns small-9'>
63
                                <Revision repoUrl={info.source.repoURL} revision={info.revision} />
64
                                <div className='application-deployment-history__item-menu'>
65
                                    <DropDownMenu
66
                                        anchor={() => (
67
                                            <button className='argo-button argo-button--light argo-button--lg argo-button--short'>
68
                                                <i className='fa fa-ellipsis-v' />
69
                                            </button>
70
                                        )}
71
                                        items={[
72
                                            {
73
                                                title: (info.nextDeployedAt && 'Rollback') || 'Redeploy',
74
                                                action: () => rollbackApp(info)
75
                                            }
76
                                        ]}
77
                                    />
78
                                </div>
79
                            </div>
80
                        </div>
81
                        {selectedRollbackDeploymentIndex === index ? (
82
                            <React.Fragment>
83
                                <RevisionMetadataRows
84
                                    applicationName={app.metadata.name}
85
                                    applicationNamespace={app.metadata.namespace}
86
                                    source={{...recentDeployments[index].source, targetRevision: recentDeployments[index].revision}}
87
                                />
88
                                <DataLoader
89
                                    input={{...recentDeployments[index].source, targetRevision: recentDeployments[index].revision, appName: app.metadata.name}}
90
                                    load={src => services.repos.appDetails(src, src.appName, app.spec.project)}>
91
                                    {(details: models.RepoAppDetails) => (
92
                                        <div>
93
                                            <ApplicationParameters
94
                                                application={{
95
                                                    ...app,
96
                                                    spec: {...app.spec, source: recentDeployments[index].source}
97
                                                }}
98
                                                details={details}
99
                                            />
100
                                        </div>
101
                                    )}
102
                                </DataLoader>
103
                            </React.Fragment>
104
                        ) : null}
105
                    </div>
106
                </div>
107
            ))}
108
        </div>
109
    );
110
};
111