argo-cd

1
import * as React from 'react';
2
import Moment from 'react-moment';
3
import {Pod} from '../../../shared/models';
4
import {isYoungerThanXMinutes} from '../utils';
5

6
export const PodTooltip = (props: {pod: Pod}) => {
7
    const pod = props.pod;
8

9
    return (
10
        <div>
11
            <div className='row'>
12
                <div className='columns small-12'>{pod.metadata.name}</div>
13
            </div>
14
            <div className='row'>
15
                <div className='columns small-6'>Health:</div>
16
                <div className='columns small-6'>{pod.health}</div>
17
            </div>
18
            {(pod.info || [])
19
                .filter(i => i.name !== 'Node')
20
                .map(i => (
21
                    <div className='row' key={i.name}>
22
                        <div className='columns small-6' style={{whiteSpace: 'nowrap'}}>
23
                            {i.name}:
24
                        </div>
25
                        <div className='columns small-6'>{i.value}</div>
26
                    </div>
27
                ))}
28
            {pod.createdAt && (
29
                <div className='row'>
30
                    <div className='columns small-6'>
31
                        <span>Created: </span>
32
                    </div>
33
                    <div className='columns small-6'>
34
                        <Moment fromNow={true} ago={true}>
35
                            {pod.createdAt}
36
                        </Moment>
37
                        <span> ago</span>
38
                    </div>
39
                    {isYoungerThanXMinutes(pod, 30) && (
40
                        <div className='columns small-12'>
41
                            <span>
42
                                <i className='fas fa-circle circle-icon' /> &nbsp;
43
                                <span>pod age less than 30min</span>
44
                            </span>
45
                        </div>
46
                    )}
47
                </div>
48
            )}
49
        </div>
50
    );
51
};
52