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

app/backend/src/azure-service.ts

@@ -169,13 +169,12 @@ export class AzureImageService {
       .filter((value): value is string => Boolean(value));
   }
 
-  private toNumber(value: string | undefined): number | null {
+  private toNumber(value: string | undefined): number {
     if (!value) {
-      return null;
+      return 0;
     }
 
     const parsed = Number.parseFloat(value);
-    return Number.isFinite(parsed) ? parsed : null;
+    return Number.isFinite(parsed) ? parsed : 0;
   }
-
 }

app/backend/src/types.ts

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

app/frontend/src/tools/VmSkuChooserTool.tsx

@@ -25,9 +25,9 @@ type VmSkuRow = {
   id: string;
   name: string;
   family: string;
-  vcpus: string;
+  vcpus: number;
-  memoryGb: string;
+  memoryGb: number;
-  maxDataDiskCount: string;
+  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),
+        vcpus: sku.vcpus,
-        memoryGb: formatValue(sku.memoryGb),
+        memoryGb: sku.memoryGb,
-        maxDataDiskCount: formatValue(sku.maxDataDiskCount)
+        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))",
+                  sm: "repeat(2, minmax(0, 1fr))"
-                  lg: "repeat(5, 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>

app/frontend/src/types.ts

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