From b49b666dea747668623620da481dd41b1a80b86f Mon Sep 17 00:00:00 2001 From: yomybaby <621215+yomybaby@users.noreply.github.com> Date: Thu, 5 Sep 2024 02:53:32 +0000 Subject: [PATCH] refactor: percent calcuation and typescript deifinition in agent list (#2690) ### TL;DR Refactored the AgentList component to improve type safety and code readability. ### What changed? - Improved type safety by explicitly defining types for `parsedOccupiedSlots` and `parsedAvailableSlots`. - Refactored the rendering logic for resource allocation to use a more consistent approach across different resource types. - Simplified calculations for percentage values and improved variable naming. - Consolidated duplicate code into reusable logic for CPU, memory, and other resource types. ### How to test? 1. Navigate to the Agent List view in the application. 2. Verify that the allocation information for CPU, memory, and other resources is displayed correctly. 3. Check that the progress bars accurately reflect the resource usage percentages. 4. Ensure that the color coding (red for high usage, green for normal usage) is working as expected. ### Why make this change? This refactoring improves code maintainability and reduces the likelihood of bugs by: 1. Enhancing type safety, which helps catch potential errors at compile-time. 2. Reducing code duplication, making it easier to update and maintain the component. 3. Improving readability, making it easier for developers to understand and work with the code. 4. Ensuring consistent handling of different resource types, which can simplify future additions or modifications to resource allocation display. --- react/src/components/AgentList.tsx | 296 ++++++++++++++--------------- 1 file changed, 139 insertions(+), 157 deletions(-) diff --git a/react/src/components/AgentList.tsx b/react/src/components/AgentList.tsx index a35ccab98e..176d43d3d4 100644 --- a/react/src/components/AgentList.tsx +++ b/react/src/components/AgentList.tsx @@ -5,7 +5,7 @@ import { transformSorterToOrderString, } from '../helper'; import { useSuspendedBackendaiClient, useUpdatableState } from '../hooks'; -import { useResourceSlotsDetails } from '../hooks/backendai'; +import { ResourceSlotName, useResourceSlotsDetails } from '../hooks/backendai'; import { useBAIPaginationOptionState } from '../hooks/reactPaginationQueryOptions'; import { useThemeMode } from '../hooks/useThemeMode'; import AgentDetailModal from './AgentDetailModal'; @@ -267,167 +267,149 @@ const AgentList: React.FC = ({ title: t('agent.Allocation'), key: 'allocation', render: (value, record) => { - const parsedOccupiedSlots = JSON.parse(record?.occupied_slots || '{}'); - const parsedAvailableSlots = JSON.parse( - record?.available_slots || '{}', - ); + const parsedOccupiedSlots: { + [key in ResourceSlotName]: string | undefined; + } = JSON.parse(record?.occupied_slots || '{}'); + const parsedAvailableSlots: { + [key in ResourceSlotName]: string | undefined; + } = JSON.parse(record?.available_slots || '{}'); return ( - {_.map(_.keys(parsedAvailableSlots), (key) => { - if (key === 'cpu') { - return ( - - - - - {toFixedFloorWithoutTrailingZeros( - parsedOccupiedSlots[key] || 0, - 0, - )} - / - {toFixedFloorWithoutTrailingZeros( - parsedAvailableSlots[key], - 0, - )} - - - {resourceSlotsDetails?.cpu?.display_unit} - + {_.map( + parsedAvailableSlots, + (value: string | number, key: ResourceSlotName) => { + if (key === 'cpu') { + const cpuPercent = _.toFinite( + (_.toNumber(parsedOccupiedSlots.cpu) / + _.toNumber(parsedAvailableSlots.cpu)) * + 100, + ); + return ( + + + + + {toFixedFloorWithoutTrailingZeros( + parsedOccupiedSlots.cpu || 0, + 0, + )} + / + {toFixedFloorWithoutTrailingZeros( + parsedAvailableSlots.cpu || 0, + 0, + )} + + + {resourceSlotsDetails?.cpu?.display_unit} + + + 80 + ? token.colorError + : token.colorSuccess + } + width={120} + valueLabel={ + toFixedFloorWithoutTrailingZeros(cpuPercent, 1) + ' %' + } + /> - - 80 - ? token.colorError - : token.colorSuccess - } - width={120} - valueLabel={ - toFixedFloorWithoutTrailingZeros( - _.toFinite( - ((parsedOccupiedSlots[key] || 0) / - parsedAvailableSlots[key]) * - 100, - ), - 1, - ) + ' %' - } - /> - - ); - } else if (key === 'mem') { - return ( - - - - - {iSizeToSize(parsedOccupiedSlots[key], 'g', 0) - ?.numberFixed ?? 0} - / - {iSizeToSize(parsedAvailableSlots[key], 'g', 0) - ?.numberFixed ?? 0} - - - GiB - + ); + } else if (key === 'mem') { + const memPercent = _.toFinite( + (_.toNumber(parsedOccupiedSlots.mem) / + _.toNumber(parsedAvailableSlots.mem)) * + 100, + ); + return ( + + + + + {iSizeToSize(parsedOccupiedSlots.mem, 'g', 0) + ?.numberFixed ?? 0} + / + {iSizeToSize(parsedAvailableSlots.mem, 'g', 0) + ?.numberFixed ?? 0} + + + GiB + + + 80 + ? token.colorError + : token.colorSuccess + } + width={120} + valueLabel={ + toFixedFloorWithoutTrailingZeros(memPercent, 1) + ' %' + } + /> - - 80 - ? token.colorError - : token.colorSuccess - } - width={120} - valueLabel={ - toFixedFloorWithoutTrailingZeros( - _.toFinite( - ((parsedOccupiedSlots[key] || 0) / - parsedAvailableSlots[key]) * - 100, - ), - 1, - ) + ' %' - } - /> - - ); - } else if (parsedAvailableSlots[key]) { - return ( - - - - - {toFixedFloorWithoutTrailingZeros( - parsedOccupiedSlots[key], - 2, - )} - / - {toFixedFloorWithoutTrailingZeros( - parsedAvailableSlots[key], - 2, - )} - - - {resourceSlotsDetails?.[key]?.display_unit} - + ); + } else if (parsedAvailableSlots[key]) { + const percent = _.toFinite( + (_.toNumber(parsedOccupiedSlots[key]) / + _.toNumber(parsedAvailableSlots[key])) * + 100, + ); + return ( + + + + + {toFixedFloorWithoutTrailingZeros( + parsedOccupiedSlots[key] || 0, + 2, + )} + / + {toFixedFloorWithoutTrailingZeros( + parsedAvailableSlots[key], + 2, + )} + + + {resourceSlotsDetails?.[key]?.display_unit} + + + 80 ? token.colorError : token.colorSuccess + } + width={120} + valueLabel={ + toFixedFloorWithoutTrailingZeros(percent, 1) + ' %' + } + /> - - 80 - ? token.colorError - : token.colorSuccess - } - width={120} - valueLabel={ - toFixedFloorWithoutTrailingZeros( - _.toFinite( - (parsedOccupiedSlots[key] / - parsedAvailableSlots[key]) * - 100, - ), - 1, - ) + ' %' - } - /> - - ); - } - })} + ); + } + }, + )} ); },