added region filtering based on the amount of providers

akash-network · Nov 7, 2023 · 47e1235 · 47e1235
1 parent ab60167
commit 47e1235
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 20 deletions.
diff --git a/deploy-web/src/components/sdl/RegionSelect.tsx b/deploy-web/src/components/sdl/RegionSelect.tsx
@@ -1,26 +1,39 @@
-import { Autocomplete, Box, ClickAwayListener, TextField } from "@mui/material";
+import { Autocomplete, Box, ClickAwayListener, TextField, useTheme } from "@mui/material";
 import { RentGpusFormValues } from "@src/types";
-import { ProviderAttributeSchemaDetailValue, ProviderAttributesSchema } from "@src/types/providerAttributes";
+import { ProviderAttributeSchemaDetailValue, ProviderAttributesSchema, ProviderRegionValue } from "@src/types/providerAttributes";
 import { useState } from "react";
 import { Control, Controller } from "react-hook-form";
 import { CustomTooltip } from "../shared/CustomTooltip";
 import InfoIcon from "@mui/icons-material/Info";
+import { useProviderRegions } from "@src/queries/useProvidersQuery";
+import { makeStyles } from "tss-react/mui";
+import { cx } from "@emotion/css";
 
 type RegionSelectProps = {
   control: Control<RentGpusFormValues, any>;
-  providerAttributesSchema: ProviderAttributesSchema;
   className?: string;
 };
 
-export const RegionSelect: React.FunctionComponent<RegionSelectProps> = ({ control, providerAttributesSchema, className }) => {
+const useStyles = makeStyles()(theme => ({
+  disabled: {
+    color: theme.palette.mode === "dark" ? theme.palette.grey[600] : theme.palette.grey[400],
+    pointerEvents: "none",
+    cursor: "default"
+  }
+}));
+
+export const RegionSelect: React.FunctionComponent<RegionSelectProps> = ({ control, className }) => {
+  const { classes } = useStyles();
+  const theme = useTheme();
   const [isOpen, setIsOpen] = useState(false);
+  const { data: regions, isLoading: isLoadingRegions } = useProviderRegions();
   const options = [
     {
       key: "any",
-      value: "any",
-      description: "Any region"
+      description: "Any region",
+      providers: []
     },
-    ...(providerAttributesSchema?.["location-region"]?.values || [])
+    ...(regions || [])
   ];
 
   return (
@@ -33,12 +46,13 @@ export const RegionSelect: React.FunctionComponent<RegionSelectProps> = ({ contr
             disableClearable
             open={isOpen}
             options={options}
-            value={field.value}
+            value={field.value as ProviderRegionValue}
             getOptionLabel={option => option?.key}
             defaultValue={null}
             isOptionEqualToValue={(option, value) => option.key === value.key}
             filterSelectedOptions
             fullWidth
+            loading={isLoadingRegions}
             ChipProps={{ size: "small" }}
             onChange={(event, newValue: ProviderAttributeSchemaDetailValue) => {
               field.onChange(newValue);
@@ -60,9 +74,25 @@ export const RegionSelect: React.FunctionComponent<RegionSelectProps> = ({ contr
             )}
             renderOption={(props, option) => {
               return (
-                <Box {...props} component="li" sx={{ display: "flex", alignItems: "center", width: "100%", padding: ".2rem .5rem" }}>
-                  {option.key}
-
+                <Box
+                  {...props}
+                  component="li"
+                  sx={{ display: "flex", alignItems: "center", width: "100%", padding: ".2rem .5rem" }}
+                  className={cx({ [classes.disabled]: option.key !== "any" && option.providers?.length === 0 }, props.className)}
+                >
+                  <span>{option.key}</span>
+                  {option.key !== "any" && (
+                    <Box
+                      component="small"
+                      sx={{
+                        marginLeft: ".5rem",
+                        color: option.providers?.length === 0 ? "inherit" : theme.palette.secondary.main,
+                        fontWeight: option.providers?.length > 0 ? "bold" : "normal"
+                      }}
+                    >
+                      ({option.providers.length})
+                    </Box>
+                  )}
                   <CustomTooltip arrow title={option.description}>
                     <InfoIcon color="disabled" fontSize="small" sx={{ marginLeft: ".5rem" }} />
                   </CustomTooltip>

diff --git a/deploy-web/src/components/sdl/RentGpusForm.tsx b/deploy-web/src/components/sdl/RentGpusForm.tsx
@@ -44,9 +44,6 @@ type Props = {};
 const useStyles = makeStyles()(theme => ({
   formControl: {
     marginBottom: theme.spacing(1.5)
-  },
-  textField: {
-    width: "100%"
   }
 }));
 
@@ -271,7 +268,7 @@ export const RentGpusForm: React.FunctionComponent<Props> = ({}) => {
 
           <Grid container spacing={2} sx={{ marginTop: "1rem" }}>
             <Grid item xs={6}>
-              <RegionSelect control={control} providerAttributesSchema={providerAttributesSchema} />
+              <RegionSelect control={control} />
             </Grid>
             <Grid item xs={6}>
               <FormControl className={classes.formControl} fullWidth sx={{ display: "flex", alignItems: "center", flexDirection: "row" }}>

diff --git a/deploy-web/src/queries/queryKeys.ts b/deploy-web/src/queries/queryKeys.ts
@@ -34,6 +34,7 @@ export class QueryKeys {
   static getBidListKey = (address: string, dseq: string) => ["BID_LIST", address, dseq];
   static getProvidersKey = () => ["PROVIDERS"];
   static getProviderListKey = () => ["PROVIDER_LIST"];
+  static getProviderRegionsKey = () => ["PROVIDER_REGIONS"];
   static getProviderDetailKey = (owner: string) => ["PROVIDERS", owner];
   static getDataNodeProvidersKey = () => ["DATA_NODE_PROVIDERS"];
   static getProviderStatusKey = (providerUri: string) => ["PROVIDER_STATUS", providerUri];

diff --git a/deploy-web/src/queries/useProvidersQuery.ts b/deploy-web/src/queries/useProvidersQuery.ts
@@ -4,7 +4,7 @@ import axios, { AxiosResponse } from "axios";
 import { ApiUrlService } from "@src/utils/apiUtils";
 import { getNetworkCapacityDto, providerStatusToDto } from "@src/utils/providerUtils";
 import { PROVIDER_PROXY_URL } from "@src/utils/constants";
-import { ApiProviderDetail, ApiProviderList, Auditor } from "@src/types/provider";
+import { ApiProviderDetail, ApiProviderList, ApiProviderRegion, Auditor } from "@src/types/provider";
 import { ProviderAttributesSchema } from "@src/types/providerAttributes";
 
 async function getProviderDetail(owner: string): Promise<ApiProviderDetail> {
@@ -101,3 +101,13 @@ async function getProviderList(): Promise<Array<ApiProviderList>> {
 export function useProviderList(options = {}) {
   return useQuery(QueryKeys.getProviderListKey(), () => getProviderList(), options);
 }
+
+async function getProviderRegions(): Promise<Array<ApiProviderRegion>> {
+  const response = await axios.get(ApiUrlService.providerRegions());
+
+  return response.data;
+}
+
+export function useProviderRegions(options = {}) {
+  return useQuery(QueryKeys.getProviderRegionsKey(), () => getProviderRegions(), options);
+}
diff --git a/deploy-web/src/types/provider.ts b/deploy-web/src/types/provider.ts
@@ -284,3 +284,9 @@ export type Auditor = {
   address: string;
   website: string;
 };
+
+export interface ApiProviderRegion {
+  key: string;
+  description: string;
+  providers: string[];
+}
diff --git a/deploy-web/src/types/providerAttributes.ts b/deploy-web/src/types/providerAttributes.ts
@@ -70,4 +70,11 @@ export type ProviderAttributeSchemaDetail = {
   values?: Array<ProviderAttributeSchemaDetailValue>;
 };
 
-export type ProviderAttributeSchemaDetailValue = { key: string; description: string; value?: any };
+export interface ProviderAttributeSchemaDetailValue {
+  key: string;
+  description: string;
+  value?: any;
+}
+export interface ProviderRegionValue extends ProviderAttributeSchemaDetailValue {
+  providers: string[];
+}
diff --git a/deploy-web/src/types/sdlBuilder.ts b/deploy-web/src/types/sdlBuilder.ts
@@ -1,4 +1,4 @@
-import { ProviderAttributeSchemaDetailValue } from "./providerAttributes";
+import { ProviderAttributeSchemaDetailValue, ProviderRegionValue } from "./providerAttributes";
 
 export type Service = {
   id: string;
@@ -145,5 +145,5 @@ export type SdlSaveTemplateFormValues = {
 
 export type RentGpusFormValues = {
   services: Service[];
-  region: ProviderAttributeSchemaDetailValue;
-};
+  region: Partial<ProviderRegionValue>;
+};
diff --git a/deploy-web/src/utils/apiUtils.ts b/deploy-web/src/utils/apiUtils.ts
@@ -24,6 +24,9 @@ export class ApiUrlService {
   static providerDetail(owner: string) {
     return `${BASE_API_URL}/providers/${owner}`;
   }
+  static providerRegions() {
+    return `${BASE_API_URL}/provider-regions`;
+  }
   static block(apiEndpoint: string, id: string) {
     return `${apiEndpoint}/blocks/${id}`;
   }