function getDockerTable()

in karavan-web/karavan-app/src/main/webui/src/dashboard/DashboardPage.tsx [304:379]
74 lines of code
6 McCabe index (conditional complexity)

    function getDockerTable() {
        const conts = containers
            .filter(c => ['devmode', 'project'].includes(c.type))
            .filter(d => d.containerName.toLowerCase().includes(filter));
        return (
            <TableComposable aria-label="Projects" variant={TableVariant.compact}>
                <Thead>
                    <Tr>
                        <Th key='type'>Type</Th>
                        <Th key='container'>Container</Th>
                        <Th key='description'>Project Description</Th>
                        <Th key='ports'>Ports</Th>
                        <Th key='environment'>Environment</Th>
                        <Th key='camel'>Camel Health</Th>
                        {/*<Th key='action'></Th>*/}
                    </Tr>
                </Thead>
                <Tbody>
                    {conts.map(container => (
                        <Tr key={container.containerName}>
                            <Td style={{verticalAlign: "middle"}} modifier={"fitContent"}>
                                <Badge className="badge">{container.type}</Badge>
                            </Td>
                            <Td style={{verticalAlign: "middle"}}>
                                <Label color={container.lifeCycle === 'ready' ? "green" : 'grey'}>
                                    {container.containerName}
                                </Label>
                            </Td>
                            <Td style={{verticalAlign: "middle"}}>
                                <HelperText>
                                    <HelperTextItem>{getProject(container.containerName)?.description || "Camel project"}</HelperTextItem>
                                </HelperText>
                            </Td>
                            <Td>
                                <Flex direction={{default: "column"}}>
                                    {container.ports.map(port => (
                                        <FlexItem className="badge-flex-item" key={port}>
                                            <Badge className="badge" isRead={true}>{port}</Badge>
                                        </FlexItem>
                                    ))}
                                </Flex>
                            </Td>
                            <Td>
                                <Flex direction={{default: "column"}}>
                                    {getContainerByEnvironments(container.containerName).map(value => (
                                        <FlexItem className="badge-flex-item" key={value[0]}>
                                            <Label color={"green"}>
                                                {value[1] ? value[1]?.env : ""}
                                            </Label>
                                        </FlexItem>
                                    ))}
                                </Flex>
                            </Td>
                            <Td modifier={"fitContent"}>
                                <Flex direction={{default: "column"}}>
                                    {getCamelStatusByEnvironments(container.containerName).map(value => {
                                        // const color = value[1] ? (value[1].consumerStatus === "UP" ? "green" : "red") : "grey";
                                        // let icon = undefined;
                                        // if (value[1]?.consumerStatus === "UP") icon = <UpIcon/>
                                        // if (value[1]?.consumerStatus === "DOWN") icon = <DownIcon/>
                                        // const text = value[1] && value[1]?.contextVersion ? value[1]?.contextVersion : "???";
                                        return <FlexItem key={value[0]}>
                                            {/*<LabelGroup numLabels={4} className="camel-label-group">*/}
                                            {/*    <Label color={color} className="table-label" icon={icon}>{text}</Label>*/}
                                            {/*</LabelGroup>*/}
                                        </FlexItem>
                                    })}
                                </Flex>
                            </Td>
                        </Tr>
                    ))}
                    {conts.length === 0 && getEmptyState()}
                </Tbody>
            </TableComposable>
        )
    }