cloud filesystem bucket location selection -- include cities and searchability of them

- this is for consistency with compute servers

Author: williamstein

src/packages/frontend/compute/cloud-filesystem/bucket.tsx

@@ -1,4 +1,4 @@
-import { getDataStoragePriceRange } from "./util";
+import { getCity, getDataStoragePriceRange } from "./util";
 import { Alert, Checkbox, Select, Spin } from "antd";
 import {
   GOOGLE_CLOUD_BUCKET_STORAGE_CLASSES,
@@ -14,6 +14,7 @@ import { getRecentRegions } from "./regions";
 import { currency } from "@cocalc/util//misc";
 import { markup } from "@cocalc/util/compute/cloud/google-cloud/compute-cost";
 import { useGoogleCloudPriceData } from "@cocalc/frontend/compute/api";
+import { filterOption } from "@cocalc/frontend/compute/util";
 
 export function BucketStorageClass({ configuration, setConfiguration }) {
   const [priceData] = useGoogleCloudPriceData();
@@ -68,7 +69,7 @@ export function BucketStorageClass({ configuration, setConfiguration }) {
           (bucket_storage_class) => {
             const { min, max } = getDataStoragePriceRange({
               ...configuration,
-              prices: priceData,
+              priceData,
               bucket_storage_class,
             });
             return {
@@ -176,25 +177,34 @@ export function BucketLocation({ configuration, setConfiguration }) {
       let location;
       const { min, max } = getDataStoragePriceRange({
         ...configuration,
-        prices: priceData,
+        priceData,
         bucket_location: region,
       });
       if (multiregion) {
         location = `${region.toUpperCase()} (Multiregion)`;
       } else {
         location = region;
       }
+      const city = getCity({ region, priceData });
       const label = (
         <div style={{ display: "flex" }}>
-          <div style={{ flex: 0.5 }}>{location}</div>
+          <div style={{ flex: 0.6 }}>
+            {location} ({city})
+          </div>
           <div style={{ flex: 1, fontFamily: "monospace" }}>
             {min ? currency(min, 5) : null}
             {min != max && min && max ? ` - ${currency(max, 5)}` : null}
-            {min && max ? " per GB per month at rest" : null}
+            {min && max ? " / GB / month at rest" : null}
           </div>
         </div>
       );
-      return { value: region, label, key: region, price: { min, max } };
+      return {
+        value: region,
+        label,
+        key: region,
+        price: { min, max },
+        search: `${city} ${location}`,
+      };
     });
     if (!multiregion && (recentRegions?.length ?? 0) > 0) {
       const z = new Set(recentRegions);
@@ -242,6 +252,8 @@ export function BucketLocation({ configuration, setConfiguration }) {
             setConfiguration({ ...configuration, bucket_location });
             setMultiregion(!bucket_location?.includes("-"));
           }}
+          optionFilterProp="children"
+          filterOption={filterOption}
         />
         <div
           style={{

src/packages/frontend/compute/cloud-filesystem/util.ts

@@ -1,4 +1,5 @@
 import { capitalize } from "@cocalc/util//misc";
+import { markup } from "@cocalc/util/compute/cloud/google-cloud/compute-cost";
 
 export function editModalStyle(cloudFilesystem) {
   return {
@@ -10,51 +11,74 @@ export function editModalStyle(cloudFilesystem) {
   };
 }
 
+// Price returned from this includes markup
 export function getDataStoragePriceRange({
-  prices,
+  priceData,
   bucket_location,
   bucket_storage_class,
 }): { min: number | null; max: number | null } {
-  if (prices == null) {
+  if (priceData == null) {
     return { min: null, max: null };
   }
   if (bucket_storage_class.startsWith("autoclass")) {
     const min = getDataStoragePrice({
-      prices,
+      priceData,
       bucket_location,
       bucket_storage_class: bucket_storage_class.split("-")[1],
     });
     const max = getDataStoragePrice({
-      prices,
+      priceData,
       bucket_location,
       bucket_storage_class: "standard",
     });
     return { min, max };
   } else {
     const price = getDataStoragePrice({
-      prices,
+      priceData,
       bucket_location,
       bucket_storage_class,
     });
     return { min: price, max: price };
   }
 }
 
+// Price returned from this includes markup
 export function getDataStoragePrice({
-  prices,
+  priceData,
   bucket_location,
   bucket_storage_class,
 }): number | null {
-  if (prices == null) {
+  if (priceData == null) {
     return null;
   }
+  let cost;
   if (!bucket_location.includes("-")) {
-    return prices.storage?.atRest?.multiRegions?.[bucket_location]?.[
-      capitalize(bucket_storage_class)
-    ];
+    cost =
+      priceData.storage?.atRest?.multiRegions?.[bucket_location]?.[
+        capitalize(bucket_storage_class)
+      ];
   } else {
-    return prices.storage?.atRest?.regions?.[bucket_location]?.[
-      capitalize(bucket_storage_class)
-    ];
+    cost =
+      priceData.storage?.atRest?.regions?.[bucket_location]?.[
+        capitalize(bucket_storage_class)
+      ];
   }
+  return markup({
+    cost,
+    priceData,
+  });
+}
+
+const alpha = "abcdefghijklmnopqrstuvwxyz".split("");
+export function getCity({ region, priceData }) {
+  if (priceData?.zones == null) {
+    return "";
+  }
+  for (const x of alpha) {
+    const z = priceData.zones[`${region}-${x}`];
+    if (z != null) {
+      return z.location.split(",")[1].trim();
+    }
+  }
+  return "";
 }