Disable eslint issue with "error React Hook useEffect has a missing dependency: 'fetchData'. Either include it or remove the dependency array react-hooks/exhaustive-deps"
Signed-off-by: Matt Ray <github@mattray.dev>
This commit is contained in:
Matt Ray
@@ -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 = ({
|
||||
<CircularProgress />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
{!loading && errors.length > 0 && (
|
||||
<div style={{ marginBottom: 20 }}>
|
||||
<Warnings warnings={errors} />
|
||||
@@ -197,48 +204,84 @@ const Details = ({
|
||||
</ListItem>
|
||||
)}
|
||||
{node && (
|
||||
<ListItem>
|
||||
<ListItemIcon>
|
||||
<NodeIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={node} />
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<ListItemIcon>
|
||||
<NodeIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={node} />
|
||||
</ListItem>
|
||||
)}
|
||||
</List>
|
||||
<TableContainer>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell align="left" component="th" scope="row" width={200}>Container</TableCell>
|
||||
<TableCell align="right" component="th" scope="row">Hours</TableCell>
|
||||
<TableCell align="right" component="th" scope="row">CPU</TableCell>
|
||||
<TableCell align="right" component="th" scope="row">$/(CPU*Hr)</TableCell>
|
||||
<TableCell align="right" component="th" scope="row">CPU cost</TableCell>
|
||||
<TableCell align="right" component="th" scope="row">RAM</TableCell>
|
||||
<TableCell align="right" component="th" scope="row">$/(GiB*Hr)</TableCell>
|
||||
<TableCell align="right" component="th" scope="row">RAM cost</TableCell>
|
||||
<TableCell align="right" component="th" scope="row">Total cost</TableCell>
|
||||
<TableCell align="left" component="th" scope="row" width={200}>
|
||||
Container
|
||||
</TableCell>
|
||||
<TableCell align="right" component="th" scope="row">
|
||||
Hours
|
||||
</TableCell>
|
||||
<TableCell align="right" component="th" scope="row">
|
||||
CPU
|
||||
</TableCell>
|
||||
<TableCell align="right" component="th" scope="row">
|
||||
$/(CPU*Hr)
|
||||
</TableCell>
|
||||
<TableCell align="right" component="th" scope="row">
|
||||
CPU cost
|
||||
</TableCell>
|
||||
<TableCell align="right" component="th" scope="row">
|
||||
RAM
|
||||
</TableCell>
|
||||
<TableCell align="right" component="th" scope="row">
|
||||
$/(GiB*Hr)
|
||||
</TableCell>
|
||||
<TableCell align="right" component="th" scope="row">
|
||||
RAM cost
|
||||
</TableCell>
|
||||
<TableCell align="right" component="th" scope="row">
|
||||
Total cost
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{rows.map((row, i) => (
|
||||
<TableRow key={i} hover>
|
||||
<TableCell align="left" component="th" scope="row" width={200}>{row.container}</TableCell>
|
||||
<TableCell align="right" component="th" scope="row">{row.hours}</TableCell>
|
||||
<TableCell align="right" component="th" scope="row">{row.cpu}</TableCell>
|
||||
<TableCell align="right" component="th" scope="row">{toCurrency(row.cpuCostPerCoreHr, currency, 5)}</TableCell>
|
||||
<TableCell align="right" component="th" scope="row">{toCurrency(row.cpuCost, currency, 3)}</TableCell>
|
||||
<TableCell align="right" component="th" scope="row">{bytesToString(row.ram)}</TableCell>
|
||||
<TableCell align="right" component="th" scope="row">{toCurrency(row.ramCostPerGiBHr, currency, 5)}</TableCell>
|
||||
<TableCell align="right" component="th" scope="row">{toCurrency(row.ramCost, currency, 3)}</TableCell>
|
||||
<TableCell align="right" component="th" scope="row">{toCurrency(row.totalCost, currency, 3)}</TableCell>
|
||||
<TableCell align="left" component="th" scope="row" width={200}>
|
||||
{row.container}
|
||||
</TableCell>
|
||||
<TableCell align="right" component="th" scope="row">
|
||||
{row.hours}
|
||||
</TableCell>
|
||||
<TableCell align="right" component="th" scope="row">
|
||||
{row.cpu}
|
||||
</TableCell>
|
||||
<TableCell align="right" component="th" scope="row">
|
||||
{toCurrency(row.cpuCostPerCoreHr, currency, 5)}
|
||||
</TableCell>
|
||||
<TableCell align="right" component="th" scope="row">
|
||||
{toCurrency(row.cpuCost, currency, 3)}
|
||||
</TableCell>
|
||||
<TableCell align="right" component="th" scope="row">
|
||||
{bytesToString(row.ram)}
|
||||
</TableCell>
|
||||
<TableCell align="right" component="th" scope="row">
|
||||
{toCurrency(row.ramCostPerGiBHr, currency, 5)}
|
||||
</TableCell>
|
||||
<TableCell align="right" component="th" scope="row">
|
||||
{toCurrency(row.ramCost, currency, 3)}
|
||||
</TableCell>
|
||||
<TableCell align="right" component="th" scope="row">
|
||||
{toCurrency(row.totalCost, currency, 3)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(Details)
|
||||
export default memo(Details);
|
||||
|
||||
Reference in New Issue
Block a user