argo-cd

1
import {Tooltip} from 'argo-ui/v2';
2
import * as React from 'react';
3
import {COLORS} from '../../../shared/components';
4
import {Consumer} from '../../../shared/context';
5
import * as models from '../../../shared/models';
6

7
import './applications-status-bar.scss';
8

9
export interface ApplicationsStatusBarProps {
10
    applications: models.Application[];
11
}
12

13
export const ApplicationsStatusBar = ({applications}: ApplicationsStatusBarProps) => {
14
    const readings = [
15
        {
16
            name: 'Healthy',
17
            value: applications.filter(app => app.status.health.status === 'Healthy').length,
18
            color: COLORS.health.healthy
19
        },
20
        {
21
            name: 'Progressing',
22
            value: applications.filter(app => app.status.health.status === 'Progressing').length,
23
            color: COLORS.health.progressing
24
        },
25
        {
26
            name: 'Degraded',
27
            value: applications.filter(app => app.status.health.status === 'Degraded').length,
28
            color: COLORS.health.degraded
29
        },
30
        {
31
            name: 'Suspended',
32
            value: applications.filter(app => app.status.health.status === 'Suspended').length,
33
            color: COLORS.health.suspended
34
        },
35
        {
36
            name: 'Missing',
37
            value: applications.filter(app => app.status.health.status === 'Missing').length,
38
            color: COLORS.health.missing
39
        },
40
        {
41
            name: 'Unknown',
42
            value: applications.filter(app => app.status.health.status === 'Unknown').length,
43
            color: COLORS.health.unknown
44
        }
45
    ];
46

47
    // will sort readings by value greatest to lowest, then by name
48
    readings.sort((a, b) => (a.value < b.value ? 1 : a.value === b.value ? (a.name > b.name ? 1 : -1) : -1));
49

50
    const totalItems = readings.reduce((total, i) => {
51
        return total + i.value;
52
    }, 0);
53

54
    return (
55
        <Consumer>
56
            {ctx => (
57
                <>
58
                    {totalItems > 1 && (
59
                        <div className='status-bar'>
60
                            {readings &&
61
                                readings.length > 1 &&
62
                                readings.map((item, i) => {
63
                                    if (item.value > 0) {
64
                                        return (
65
                                            <div className='status-bar__segment' style={{backgroundColor: item.color, width: (item.value / totalItems) * 100 + '%'}} key={i}>
66
                                                <Tooltip content={`${item.value} ${item.name}`} inverted={true}>
67
                                                    <div className='status-bar__segment__fill' />
68
                                                </Tooltip>
69
                                            </div>
70
                                        );
71
                                    }
72
                                })}
73
                        </div>
74
                    )}
75
                </>
76
            )}
77
        </Consumer>
78
    );
79
};
80