argo-cd

1
import * as moment from 'moment';
2
import * as React from 'react';
3
import {ago} from 'argo-ui/v2';
4

5
import * as models from '../../models';
6

7
require('./events-list.scss');
8

9
function timestampSort(first: models.Event, second: models.Event): number {
10
    if (first.lastTimestamp && !second.lastTimestamp) {
11
        return moment(second.eventTime).diff(first.lastTimestamp);
12
    } else if (!first.lastTimestamp && second.lastTimestamp) {
13
        return moment(second.lastTimestamp).diff(first.eventTime);
14
    } else if (!first.lastTimestamp && !second.lastTimestamp) {
15
        return moment(second.eventTime).diff(first.eventTime);
16
    }
17
    return moment(second.lastTimestamp).diff(first.lastTimestamp);
18
}
19

20
function getTimeElements(timestamp: string) {
21
    const readableFormat = (d: Date) => moment(d).calendar();
22
    const dateOfEvent = new Date(timestamp);
23
    return (
24
        <>
25
            <div className='events-list__event__ago'>{ago(dateOfEvent)}</div>
26
            <div className='events-list__event__time'>{readableFormat(dateOfEvent)}</div>
27
        </>
28
    );
29
}
30

31
export const EventsList = (props: {events: models.Event[]}) => {
32
    const events = props.events.sort((first, second) => timestampSort(first, second));
33

34
    return (
35
        <div className='events-list'>
36
            {(events.length === 0 && <p>No events available</p>) || (
37
                <div className='argo-table-list'>
38
                    <div className='argo-table-list__head'>
39
                        <div className='row'>
40
                            <div className='columns small-2 xxlarge-2'>REASON</div>
41
                            <div className='columns small-4 xxlarge-5'>MESSAGE</div>
42
                            <div className='columns small-2 xxlarge-1'>COUNT</div>
43
                            <div className='columns small-2 xxlarge-2'>FIRST OCCURRED</div>
44
                            <div className='columns small-2 xxlarge-2'>LAST OCCURRED</div>
45
                        </div>
46
                    </div>
47
                    {events.map(event => (
48
                        <div className={`argo-table-list__row events-list__event events-list__event--${event.type}`} key={event.metadata.uid}>
49
                            <div className='row'>
50
                                <div className='columns small-2 xxlarge-2'>{event.reason}</div>
51
                                <div className='columns small-4 xxlarge-5' style={{whiteSpace: 'normal', lineHeight: 'normal'}}>
52
                                    {event.message}
53
                                </div>
54
                                <div className='columns small-2 xxlarge-1'>{event.count}</div>
55
                                <div className='columns small-2 xxlarge-2'>{event.firstTimestamp ? getTimeElements(event.firstTimestamp) : getTimeElements(event.eventTime)}</div>
56
                                <div className='columns small-2 xxlarge-2'>{event.lastTimestamp ? getTimeElements(event.lastTimestamp) : getTimeElements(event.eventTime)}</div>
57
                            </div>
58
                        </div>
59
                    ))}
60
                </div>
61
            )}
62
        </div>
63
    );
64
};
65