argo-cd

1
import * as React from 'react';
2
import {Tooltip} from 'argo-ui';
3

4
export type ContainerGroup = {offset: number; containers: {name: string}[]};
5

6
// ContainerSelector is a component that renders a dropdown menu of containers
7
export const ContainerSelector = ({
8
    containerGroups,
9
    containerName,
10
    onClickContainer
11
}: {
12
    containerGroups?: ContainerGroup[];
13
    containerName: string;
14
    onClickContainer: (group: ContainerGroup, index: number, logs: string) => void;
15
}) => {
16
    if (!containerGroups) {
17
        return <></>;
18
    }
19

20
    const containers = containerGroups?.reduce((acc, group) => acc.concat(group.containers), []);
21
    const containerNames = containers?.map(container => container.name);
22
    const containerGroup = (n: string) => {
23
        return containerGroups?.find(group => group.containers?.find(container => container.name === n));
24
    };
25
    const containerIndex = (n: string) => {
26
        return containerGroup(n)?.containers.findIndex(container => container.name === n);
27
    };
28
    if (containerNames.length <= 1) return <></>;
29
    return (
30
        <Tooltip content='Select a container to view logs'>
31
            <select className='argo-field' value={containerName} onChange={e => onClickContainer(containerGroup(e.target.value), containerIndex(e.target.value), 'logs')}>
32
                {containerNames.map(n => (
33
                    <option key={n} value={n}>
34
                        {n}
35
                    </option>
36
                ))}
37
            </select>
38
        </Tooltip>
39
    );
40
};
41