fix(striker-ui): improve info in anvil select list and remove base 10 units

main
Tsu-ba-me 3 years ago
parent d5ae619ce3
commit 67b1ed72f3
  1. 88
      striker-ui/components/ProvisionServerDialog.tsx

@ -1,5 +1,6 @@
import { import {
Dispatch, Dispatch,
ReactNode,
SetStateAction, SetStateAction,
useCallback, useCallback,
useEffect, useEffect,
@ -182,6 +183,7 @@ const MOCK_DATA = {
{ {
anvilUUID: 'ad590bcb-24e1-4592-8cd1-9cd6229b7bf2', anvilUUID: 'ad590bcb-24e1-4592-8cd1-9cd6229b7bf2',
anvilName: 'yan-anvil-03', anvilName: 'yan-anvil-03',
anvilDescription: "Yan's test Anvil specialized for breaking things.",
anvilTotalCPUCores: 4, anvilTotalCPUCores: 4,
anvilTotalMemory: '17179869184', anvilTotalMemory: '17179869184',
anvilTotalAllocatedCPUCores: 1, anvilTotalAllocatedCPUCores: 1,
@ -234,6 +236,7 @@ const MOCK_DATA = {
{ {
anvilUUID: '85e0fd96-ea38-403d-992f-441d20cad679', anvilUUID: '85e0fd96-ea38-403d-992f-441d20cad679',
anvilName: 'mock-anvil-01', anvilName: 'mock-anvil-01',
anvilDescription: 'Randomly generated mock Anvil #1.',
anvilTotalCPUCores: 8, anvilTotalCPUCores: 8,
anvilTotalMemory: '34359738368', anvilTotalMemory: '34359738368',
anvilTotalAllocatedCPUCores: 0, anvilTotalAllocatedCPUCores: 0,
@ -285,6 +288,7 @@ const MOCK_DATA = {
{ {
anvilUUID: '68470d36-e46b-44a5-b2cd-d57b2e7b5ddb', anvilUUID: '68470d36-e46b-44a5-b2cd-d57b2e7b5ddb',
anvilName: 'mock-anvil-02', anvilName: 'mock-anvil-02',
anvilDescription: 'Randomly generated mock Anvil #2.',
anvilTotalCPUCores: 16, anvilTotalCPUCores: 16,
anvilTotalMemory: '1234567890', anvilTotalMemory: '1234567890',
anvilTotalAllocatedCPUCores: 7, anvilTotalAllocatedCPUCores: 7,
@ -353,10 +357,6 @@ const DATA_SIZE_UNIT_SELECT_ITEMS: SelectItem<DataSizeUnit>[] = [
{ value: 'MiB' }, { value: 'MiB' },
{ value: 'GiB' }, { value: 'GiB' },
{ value: 'TiB' }, { value: 'TiB' },
{ value: 'kB' },
{ value: 'MB' },
{ value: 'GB' },
{ value: 'TB' },
]; ];
const INITIAL_DATA_SIZE_UNIT: DataSizeUnit = 'GiB'; const INITIAL_DATA_SIZE_UNIT: DataSizeUnit = 'GiB';
@ -400,6 +400,33 @@ const createMaxValueButton = (
</InputAdornment> </InputAdornment>
); );
const createSelectItemDisplay = ({
endAdornment,
mainLabel,
subLabel,
}: {
endAdornment?: ReactNode;
mainLabel?: string;
subLabel?: string;
} = {}) => (
<Box
sx={{
alignItems: 'center',
display: 'flex',
flexDirection: 'row',
width: '100%',
'& > :first-child': { flexGrow: 1 },
}}
>
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
{mainLabel && <BodyText inverted text={mainLabel} />}
{subLabel && <BodyText inverted text={subLabel} />}
</Box>
{endAdornment}
</Box>
);
const organizeAnvils = (data: AnvilDetailMetadataForProvisionServer[]) => { const organizeAnvils = (data: AnvilDetailMetadataForProvisionServer[]) => {
const anvilFiles: Record<string, FileMetadataForProvisionServer> = {}; const anvilFiles: Record<string, FileMetadataForProvisionServer> = {};
const result = data.reduce<{ const result = data.reduce<{
@ -448,6 +475,7 @@ const organizeAnvils = (data: AnvilDetailMetadataForProvisionServer[]) => {
}, },
}, },
precision: 0, precision: 0,
toUnit: 'ibyte',
}); });
reducedStorageGroups.anvilStorageGroupUUIDs.push( reducedStorageGroups.anvilStorageGroupUUIDs.push(
@ -457,27 +485,16 @@ const organizeAnvils = (data: AnvilDetailMetadataForProvisionServer[]) => {
reduceContainer.storageGroups.push(resultStorageGroup); reduceContainer.storageGroups.push(resultStorageGroup);
reduceContainer.storageGroupSelectItems.push({ reduceContainer.storageGroupSelectItems.push({
displayValue: ( displayValue: createSelectItemDisplay({
<Box endAdornment: (
sx={{
alignItems: 'center',
display: 'flex',
flexDirection: 'row',
width: '100%',
'& > :first-child': { flexGrow: 1 },
}}
>
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
<BodyText inverted text={storageGroup.storageGroupName} />
<BodyText inverted text={anvilName} />
</Box>
<BodyText <BodyText
inverted inverted
text={`~${resultStorageGroup.humanizedStorageGroupFree} free`} text={`~${resultStorageGroup.humanizedStorageGroupFree} free`}
/> />
</Box>
), ),
mainLabel: storageGroup.storageGroupName,
subLabel: anvilName,
}),
value: storageGroup.storageGroupUUID, value: storageGroup.storageGroupUUID,
}); });
reduceContainer.storageGroupUUIDMapToData[ reduceContainer.storageGroupUUIDMapToData[
@ -507,6 +524,7 @@ const organizeAnvils = (data: AnvilDetailMetadataForProvisionServer[]) => {
anvilTotalMemory: BigInt(anvilTotalMemory), anvilTotalMemory: BigInt(anvilTotalMemory),
anvilTotalAllocatedMemory: BigInt(anvilTotalAllocatedMemory), anvilTotalAllocatedMemory: BigInt(anvilTotalAllocatedMemory),
anvilTotalAvailableMemory: BigInt(anvilTotalAvailableMemory), anvilTotalAvailableMemory: BigInt(anvilTotalAvailableMemory),
humanizedAnvilTotalAvailableMemory: '',
hosts: hosts.map((host) => ({ hosts: hosts.map((host) => ({
...host, ...host,
hostMemory: BigInt(host.hostMemory), hostMemory: BigInt(host.hostMemory),
@ -520,9 +538,37 @@ const organizeAnvils = (data: AnvilDetailMetadataForProvisionServer[]) => {
fileUUIDs, fileUUIDs,
}; };
dsize(anvilTotalAvailableMemory, {
fromUnit: 'B',
onSuccess: {
string: (value, unit) => {
resultAnvil.humanizedAnvilTotalAvailableMemory = `${value} ${unit}`;
},
},
precision: 0,
toUnit: 'ibyte',
});
reduceContainer.anvils.push(resultAnvil); reduceContainer.anvils.push(resultAnvil);
reduceContainer.anvilSelectItems.push({ reduceContainer.anvilSelectItems.push({
displayValue: anvilName, displayValue: createSelectItemDisplay({
endAdornment: (
<Box
sx={{ display: 'flex', flexDirection: 'column', width: '8rem' }}
>
<BodyText
inverted
text={`CPU: ${resultAnvil.anvilTotalCPUCores} cores`}
/>
<BodyText
inverted
text={`Memory: ~${resultAnvil.humanizedAnvilTotalAvailableMemory}`}
/>
</Box>
),
mainLabel: resultAnvil.anvilName,
subLabel: resultAnvil.anvilDescription,
}),
value: anvilUUID, value: anvilUUID,
}); });
reduceContainer.anvilUUIDMapToData[anvilUUID] = resultAnvil; reduceContainer.anvilUUIDMapToData[anvilUUID] = resultAnvil;

Loading…
Cancel
Save