koszewscy/azure-image-chooser
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update VmSkuOption and related components to use non-nullable numeric types

Browse Source
This commit is contained in:
Sławek Koszewski
2026-04-20 22:33:53 +02:00
parent cc4ff948c5
commit 778a74c49a
4 changed files with 23 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
app/frontend/src/tools/VmSkuChooserTool.tsx
View File

@@ -25,9 +25,9 @@ type VmSkuRow = {
id: string;
name: string;
family: string;
vcpus: string;
memoryGb: string;
maxDataDiskCount: string;
vcpus: number;
memoryGb: number;
maxDataDiskCount: number;
};
const formatValue = (value: number | null): string => {
@@ -38,19 +38,6 @@ const formatValue = (value: number | null): string => {
return Number.isInteger(value) ? String(value) : value.toFixed(1);
};
const parseNumericFilter = (value: string): number | null => {
if (!value.trim()) {
return null;
}
const parsed = Number.parseFloat(value);
if (!Number.isFinite(parsed)) {
return null;
}
return parsed;
};
const extractFamilyCode = (sku: VmSkuOption): string => {
const skuName = sku.name ?? "";
const skuFamily = sku.family ?? "";
@@ -72,10 +59,6 @@ const VmSkuChooserTool = () => {
const [location, setLocation] = useState(() => readSharedLocation());
const [nameFilter, setNameFilter] = useState("");
const [familyFilter, setFamilyFilter] = useState("");
const [minVcpusFilter, setMinVcpusFilter] = useState("");
const [maxVcpusFilter, setMaxVcpusFilter] = useState("");
const [minMemoryFilter, setMinMemoryFilter] = useState("");
const [maxMemoryFilter, setMaxMemoryFilter] = useState("");
const healthQuery = useQuery({ queryKey: ["health"], queryFn: api.health });
const locationsQuery = useQuery({ queryKey: ["locations"], queryFn: api.locations });
@@ -105,10 +88,6 @@ const VmSkuChooserTool = () => {
const filteredSkus = useMemo(() => {
const source = vmSkusQuery.data ?? [];
const nameQuery = nameFilter.trim().toLowerCase();
const minVcpus = parseNumericFilter(minVcpusFilter);
const maxVcpus = parseNumericFilter(maxVcpusFilter);
const minMemory = parseNumericFilter(minMemoryFilter);
const maxMemory = parseNumericFilter(maxMemoryFilter);
return source.filter((item) => {
const itemName = item.name ?? "";
@@ -121,25 +100,9 @@ const VmSkuChooserTool = () => {
return false;
}
if (minVcpus !== null && (item.vcpus === null || item.vcpus < minVcpus)) {
return false;
}
if (maxVcpus !== null && (item.vcpus === null || item.vcpus > maxVcpus)) {
return false;
}
if (minMemory !== null && (item.memoryGb === null || item.memoryGb < minMemory)) {
return false;
}
if (maxMemory !== null && (item.memoryGb === null || item.memoryGb > maxMemory)) {
return false;
}
return true;
});
}, [vmSkusQuery.data, nameFilter, familyFilter, minVcpusFilter, maxVcpusFilter, minMemoryFilter, maxMemoryFilter]);
}, [vmSkusQuery.data, nameFilter, familyFilter]);
const rows = useMemo<VmSkuRow[]>(
() =>
@@ -147,9 +110,9 @@ const VmSkuChooserTool = () => {
id: sku.name || `${sku.size || "sku"}-${sku.family || "unknown"}`,
name: sku.name || "-",
family: sku.family || sku.size || sku.tier || "-",
vcpus: formatValue(sku.vcpus),
memoryGb: formatValue(sku.memoryGb),
maxDataDiskCount: formatValue(sku.maxDataDiskCount)
vcpus: sku.vcpus,
memoryGb: sku.memoryGb,
maxDataDiskCount: sku.maxDataDiskCount
})),
[filteredSkus]
);
@@ -173,25 +136,31 @@ const VmSkuChooserTool = () => {
{
field: "vcpus",
headerName: "vCPUs",
type: "number",
minWidth: 110,
align: "right",
headerAlign: "right",
valueFormatter: (value) => formatValue(typeof value === "number" ? value : null),
headerClassName: HEADER_CLASS_NAME
},
{
field: "memoryGb",
headerName: "Memory (GB)",
type: "number",
minWidth: 130,
align: "right",
headerAlign: "right",
valueFormatter: (value) => formatValue(typeof value === "number" ? value : null),
headerClassName: HEADER_CLASS_NAME
},
{
field: "maxDataDiskCount",
headerName: "Max Data Disks",
type: "number",
minWidth: 150,
align: "right",
headerAlign: "right",
valueFormatter: (value) => formatValue(typeof value === "number" ? value : null),
headerClassName: HEADER_CLASS_NAME
}
],
@@ -260,8 +229,7 @@ const VmSkuChooserTool = () => {
display: "grid",
gridTemplateColumns: {
xs: "1fr",
sm: "repeat(2, minmax(0, 1fr))",
lg: "repeat(5, minmax(0, 1fr))"
sm: "repeat(2, minmax(0, 1fr))"
},
gap: 2
}}
@@ -282,38 +250,6 @@ const VmSkuChooserTool = () => {
))}
</Select>
</FormControl>
<TextField
type="number"
label="Min vCPUs"
value={minVcpusFilter}
onChange={(event) => setMinVcpusFilter(event.target.value)}
disabled={!location}
/>
<TextField
type="number"
label="Max vCPUs"
value={maxVcpusFilter}
onChange={(event) => setMaxVcpusFilter(event.target.value)}
disabled={!location}
/>
<TextField
type="number"
label="Min Memory (GB)"
value={minMemoryFilter}
onChange={(event) => setMinMemoryFilter(event.target.value)}
disabled={!location}
/>
<TextField
type="number"
label="Max Memory (GB)"
value={maxMemoryFilter}
onChange={(event) => setMaxMemoryFilter(event.target.value)}
disabled={!location}
/>
</Box>
</Stack>
</CardContent>

6
app/frontend/src/types.ts
View File

@@ -22,7 +22,7 @@ export type VmSkuOption = {
size: string;
family: string;
tier: string;
vcpus: number | null;
memoryGb: number | null;
maxDataDiskCount: number | null;
vcpus: number;
memoryGb: number;
maxDataDiskCount: number;
};