function renderMetrics()

in src/main/js/components/simple-grid/simple-grid-row.js [78:123]
45 lines of code
1 McCabe index (conditional complexity)

    function renderMetrics() {
        const cpuUsage = hostMetrics.cpuUsage
        const memoryUsage = hostMetrics.memoryUsage
        const diskUsage = hostMetrics.diskUsage
        let cpuUsageClassName = metricsProgressClass(cpuUsage);
        let memoryUsageClassName = metricsProgressClass(memoryUsage);
        let diskUsageClassName = metricsProgressClass(diskUsage);

        return (
            <>
                <td className="px-6 " style={{minWidth: "100px", maxWidth: "200px"}}>
                    <div style={{minWidth: "100px", maxWidth: "200px", margin: "auto"}}>
                        <progress className={cpuUsageClassName}
                                  data-tooltip-id="vispana-tooltip"
                                  data-tooltip-content={cpuUsage.toFixed(2) + "%"}
                                  data-tooltip-place="top"
                                  value={`${cpuUsage}`}
                                  max="100">
                        </progress>
                    </div>
                </td>
                <td className="px-6 " style={{minWidth: "100px", maxWidth: "200px"}}>
                    <div style={{minWidth: "100px", maxWidth: "200px", margin: "auto"}}>
                        <progress className={memoryUsageClassName}
                                  data-tooltip-id="vispana-tooltip"
                                  data-tooltip-content={memoryUsage.toFixed(2) + "%"}
                                  data-tooltip-place="top"
                                  value={`${memoryUsage}`}
                                  max="100">
                        </progress>
                    </div>
                </td>
                <td className="px-6 " style={{minWidth: "100px", maxWidth: "200px"}}>
                    <div style={{minWidth: "100px", maxWidth: "200px", margin: "auto"}}>
                        <progress className={diskUsageClassName}
                                  data-tooltip-id="vispana-tooltip"
                                  data-tooltip-content={diskUsage.toFixed(2) + "%"}
                                  data-tooltip-place="top"
                                  value={`${diskUsage}`}
                                  max="100">
                        </progress>
                    </div>
                </td>
            </>
        )
    }