Replace instance type text input with select in Create Model form

lambda/models/lambda_functions.py

@@ -17,6 +17,7 @@
 from typing import Annotated, Union
 
 import boto3
+import botocore.session
 from fastapi import FastAPI, Path, Request
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.responses import JSONResponse
@@ -36,6 +37,7 @@
 from .exception import InvalidStateTransitionError, ModelAlreadyExistsError, ModelNotFoundError
 from .handler import CreateModelHandler, DeleteModelHandler, GetModelHandler, ListModelsHandler, UpdateModelHandler
 
+sess = botocore.session.Session()
 app = FastAPI(redirect_slashes=False, lifespan="off", docs_url="/docs", openapi_url="/openapi.json")
 app.add_middleware(AWSAPIGatewayMiddleware)
 
@@ -135,5 +137,11 @@ async def delete_model(
     return delete_handler(model_id=model_id)
 
 
+@app.get(path="/metadata/instances")  # type: ignore
+async def get_instances() -> list[str]:
+    """Endpoint to list available instances in this region."""
+    return list(sess.get_service_model("ec2").shape_for("InstanceType").enum)
+
+
 handler = Mangum(app, lifespan="off", api_gateway_base_path="/models")
 docs = Mangum(app, lifespan="off")

lib/user-interface/react/src/components/model-management/create-model/BaseModelConfig.tsx

@@ -22,12 +22,15 @@ import Toggle from '@cloudscape-design/components/toggle';
 import Select from '@cloudscape-design/components/select';
 import { IModelRequest, InferenceContainer, ModelType } from '../../../shared/model/model-management.model';
 import { Grid, SpaceBetween } from '@cloudscape-design/components';
+import { useGetInstancesQuery } from '../../../shared/reducers/model-management.reducer';
 
 export type BaseModelConfigCustomProps = {
     isEdit: boolean
 };
 
 export function BaseModelConfig (props: FormProps<IModelRequest> & BaseModelConfigCustomProps) : ReactElement {
+    const {data: instances, isLoading: isLoadingInstances} = useGetInstancesQuery();
+
     return (
         <SpaceBetween size={'s'}>
             <FormField label='Model ID' errorText={props.formErrors?.modelId}>
@@ -68,9 +71,19 @@ export function BaseModelConfig (props: FormProps<IModelRequest> & BaseModelConf
                 />
             </FormField>
             <FormField label='Instance Type' errorText={props.formErrors?.instanceType}>
-                <Input value={props.item.instanceType} inputMode='text' onBlur={() => props.touchFields(['instanceType'])} onChange={({ detail }) => {
-                    props.setFields({ 'instanceType': detail.value });
-                }} disabled={props.isEdit} placeholder='g5.xlarge'/>
+                <Select
+                    options={(instances || []).map((instance) => ({value: instance}))}
+                    selectedOption={{value: props.item.instanceType}}
+                    loadingText='Loading instances'
+                    disabled={props.isEdit}
+                    onBlur={() => props.touchFields(['instanceType'])}
+                    onChange={({ detail }) => {
+                        props.setFields({ 'instanceType': detail.selectedOption.value });
+                    }}
+                    filteringType='auto'
+                    statusType={ isLoadingInstances ? 'loading' : 'finished'}
+                    virtualScroll
+                />
             </FormField>
             <FormField label='Inference Container' errorText={props.formErrors?.inferenceContainer}>
                 <Select

lib/user-interface/react/src/shared/reducers/model-management.reducer.ts

@@ -66,8 +66,18 @@ export const modelManagementApi = createApi({
             },
             invalidatesTags: ['models'],
         }),
+        getInstances: builder.query<string[], void>({
+            query: () => ({
+                url: '/models/metadata/instances'
+            })
+        })
     }),
 });
 
-export const { useGetAllModelsQuery, useDeleteModelMutation, useCreateModelMutation, useUpdateModelMutation } =
-  modelManagementApi;
+export const {
+    useGetAllModelsQuery,
+    useDeleteModelMutation,
+    useCreateModelMutation,
+    useUpdateModelMutation,
+    useGetInstancesQuery
+} = modelManagementApi;