diff --git a/plugins/opencost/src/components/Details.js b/plugins/opencost/src/components/Details.js index 8be2038cee..5245c9e9fa 100644 --- a/plugins/opencost/src/components/Details.js +++ b/plugins/opencost/src/components/Details.js @@ -41,131 +41,139 @@ const Details = ({ pod, currency, }) => { - const [cluster, setCluster] = useState('') - const [node, setNode] = useState('') + const [cluster, setCluster] = useState(''); + const [node, setNode] = useState(''); - const [fetch, setFetch] = useState(true) - const [loading, setLoading] = useState(false) - const [errors, setErrors] = useState([]) - const [rows, setRows] = useState([]) + const [fetch, setFetch] = useState(true); + const [loading, setLoading] = useState(false); + const [errors, setErrors] = useState([]); + const [rows, setRows] = useState([]); useEffect(() => { if (fetch) { - setCluster('') - setNode('') - fetchData() + setCluster(''); + setNode(''); + fetchData(); } - }, [fetch]) + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [fetch]); async function fetchData() { - setLoading(true) - setErrors([]) + setLoading(true); + setErrors([]); try { - const filters = [] + const filters = []; if (cluster) { filters.push({ - property: "cluster", + property: 'cluster', value: cluster, - }) + }); } if (node) { filters.push({ - property: "node", + property: 'node', value: node, - }) + }); } if (namespace) { filters.push({ - property: "namespace", + property: 'namespace', value: namespace, - }) + }); } if (controllerKind) { filters.push({ - property: "controllerKind", + property: 'controllerKind', value: controllerKind, - }) + }); } if (controller) { filters.push({ - property: "controller", + property: 'controller', value: controller, - }) + }); } if (pod) { filters.push({ - property: "pod", + property: 'pod', value: pod, - }) + }); } - const resp = await AllocationService.fetchAllocation(window, '', { accumulate: true }) + const resp = await AllocationService.fetchAllocation(window, '', { + accumulate: true, + }); - let data = [] - forEach(resp.data[0], (datum) => { - if (datum.name === "__idle__") { - return + let data = []; + forEach(resp.data[0], datum => { + if (datum.name === '__idle__') { + return; } if (!cluster) { - setCluster(get(datum, 'properties.cluster', '')) + setCluster(get(datum, 'properties.cluster', '')); } if (!node) { - setNode(get(datum, 'properties.node', '')) + setNode(get(datum, 'properties.node', '')); } // TODO can we get pod, container back in properties? - const names = datum.name.split("/") - datum.pod = names[names.length-2] - datum.container = names[names.length-1] + const names = datum.name.split('/'); + datum.pod = names[names.length - 2]; + datum.container = names[names.length - 1]; - datum.hours = round(get(datum, 'minutes', 0.0) / 60.0, 2) + datum.hours = round(get(datum, 'minutes', 0.0) / 60.0, 2); if (datum.hours > 0) { - datum.cpu = round(get(datum, 'cpuCoreHours', 0.0) / datum.hours, 2) - datum.cpuCostPerCoreHr = datum.cpuCost / (datum.cpu * datum.hours) + datum.cpu = round(get(datum, 'cpuCoreHours', 0.0) / datum.hours, 2); + datum.cpuCostPerCoreHr = datum.cpuCost / (datum.cpu * datum.hours); if (datum.cpu === 0) { - datum.cpuCostPerCoreHr = 0.0 + datum.cpuCostPerCoreHr = 0.0; } - datum.ram = round(get(datum, 'ramByteHours', 0.0) / datum.hours, 2) - const ramGiB = datum.ram / 1024 / 1024 / 1024 - datum.ramCostPerGiBHr = datum.ramCost / (ramGiB * datum.hours) + datum.ram = round(get(datum, 'ramByteHours', 0.0) / datum.hours, 2); + const ramGiB = datum.ram / 1024 / 1024 / 1024; + datum.ramCostPerGiBHr = datum.ramCost / (ramGiB * datum.hours); if (ramGiB === 0) { - datum.ramCostPerGiBHr = 0.0 + datum.ramCostPerGiBHr = 0.0; } } else { - datum.cpu = 0.0 - datum.cpuCostPerCoreHr = 0.0 - datum.ram = 0.0 - datum.ramCostPerGiBHr = 0.0 + datum.cpu = 0.0; + datum.cpuCostPerCoreHr = 0.0; + datum.ram = 0.0; + datum.ramCostPerGiBHr = 0.0; } - data.push(datum) - }) + data.push(datum); + }); - data = reverse(sortBy(data, 'totalCost')) + data = reverse(sortBy(data, 'totalCost')); - setRows(data) + setRows(data); } catch (e) { /* eslint no-console: ["error", { allow: ["warn"] }] */ - console.warn(`Error fetching details for (${controllerKind}, ${controller}):`, e) - setErrors([{ - primary: "Error fetching details", - secondary: `Tried fetching details for: ${namespace}, ${controllerKind}, ${controller}, ${pod}`, - }]) + console.warn( + `Error fetching details for (${controllerKind}, ${controller}):`, + e, + ); + setErrors([ + { + primary: 'Error fetching details', + secondary: `Tried fetching details for: ${namespace}, ${controllerKind}, ${controller}, ${pod}`, + }, + ]); } - setLoading(false) - setFetch(false) + setLoading(false); + setFetch(false); } if (loading) { @@ -175,12 +183,11 @@ const Details = ({ - ) + ); } return (
- {!loading && errors.length > 0 && (
@@ -197,48 +204,84 @@ const Details = ({ )} {node && ( - - - - - - + + + + + + )} - Container - Hours - CPU - $/(CPU*Hr) - CPU cost - RAM - $/(GiB*Hr) - RAM cost - Total cost + + Container + + + Hours + + + CPU + + + $/(CPU*Hr) + + + CPU cost + + + RAM + + + $/(GiB*Hr) + + + RAM cost + + + Total cost + {rows.map((row, i) => ( - {row.container} - {row.hours} - {row.cpu} - {toCurrency(row.cpuCostPerCoreHr, currency, 5)} - {toCurrency(row.cpuCost, currency, 3)} - {bytesToString(row.ram)} - {toCurrency(row.ramCostPerGiBHr, currency, 5)} - {toCurrency(row.ramCost, currency, 3)} - {toCurrency(row.totalCost, currency, 3)} + + {row.container} + + + {row.hours} + + + {row.cpu} + + + {toCurrency(row.cpuCostPerCoreHr, currency, 5)} + + + {toCurrency(row.cpuCost, currency, 3)} + + + {bytesToString(row.ram)} + + + {toCurrency(row.ramCostPerGiBHr, currency, 5)} + + + {toCurrency(row.ramCost, currency, 3)} + + + {toCurrency(row.totalCost, currency, 3)} + ))}
- ) -} + ); +}; -export default memo(Details) +export default memo(Details);