feat: fully functioning ALB

packages/frontend/src/components/DynamicResourceView.tsx

@@ -53,6 +53,10 @@ import { LambdaInvocationHistoryPanel } from "@/components/LambdaInvocationHisto
 import { LambdaCreatePanel } from "@/components/LambdaCreatePanel";
 import { bucketDeleteWarning } from "@/lib/bucketDeletion";
 import { SnsTopicPanel } from "@/components/SnsTopicPanel";
+import { EcrImageBrowser } from "@/components/EcrImageBrowser";
+import { LoadBalancerPanel } from "@/components/LoadBalancerPanel";
+import { TargetGroupPanel } from "@/components/TargetGroupPanel";
+import { LoadBalancerListenerPanel } from "@/components/LoadBalancerListenerPanel";
 
 interface DynamicResourceViewProps {
   cloud: CloudProvider;
@@ -76,6 +80,7 @@ export function DynamicResourceView({
 }: DynamicResourceViewProps) {
   const qc = useQueryClient();
   const [search, setSearch] = useState("");
+  const [state, setState] = useState("");
   const [databaseTab, setDatabaseTab] = useState<"instances" | "snapshots">("instances");
   const [selected, setSelected] = useState<CloudResource | undefined>();
   const [selectedObject, setSelectedObject] = useState<
@@ -104,8 +109,8 @@ export function DynamicResourceView({
   };
 
   const resourcesKey = useMemo(
-    () => ["cloud-resources", cloud, service, search],
-    [cloud, service, search],
+    () => ["cloud-resources", cloud, service, search, state],
+    [cloud, service, search, state],
   );
 
   const schemaQuery = useQuery({
@@ -115,7 +120,7 @@ export function DynamicResourceView({
 
   const resourcesQuery = useQuery({
     queryKey: resourcesKey,
-    queryFn: ({ signal }) => listCloudResources(cloud, service, search, signal),
+    queryFn: ({ signal }) => listCloudResources(cloud, service, search, signal, state),
     enabled:
       schemaQuery.isSuccess &&
       serviceAvailability === "available" &&
@@ -433,6 +438,7 @@ export function DynamicResourceView({
     setEditingResource(null);
     setUpdateError(null);
     setSearch("");
+    setState("");
     setDatabaseTab("instances");
     setIsDeleteMulti(false);
     setSelectedItems([]);
@@ -599,6 +605,18 @@ export function DynamicResourceView({
                       placeholder="Filter resources"
                     />
                   </div>
+                  {schema.filters.find((filter) => filter.name === "state" && filter.type === "select") && (
+                    <select
+                      className="input"
+                      aria-label="Filter by lifecycle state"
+                      value={state}
+                      onChange={(event) => setState(event.target.value)}
+                    >
+                      {schema.filters.find((filter) => filter.name === "state")?.options?.map((option) => (
+                        <option key={option.value} value={option.value}>{option.label}</option>
+                      ))}
+                    </select>
+                  )}
                   {service === "email" && (
                     clearConfirm ? (
                       <>
@@ -756,6 +774,13 @@ export function DynamicResourceView({
                       onCancel={() => setCreateOpen(false)}
                       onSubmit={(values) => createMut.mutate(values)}
                     />
+                  ) : service === "loadbalancing" && cloud === "aws" ? (
+                    <LoadBalancerPanel
+                      isSubmitting={createMut.isPending}
+                      submitError={createMut.error instanceof Error ? createMut.error.message : null}
+                      onCancel={() => setCreateOpen(false)}
+                      onSubmit={(values) => createMut.mutate(values)}
+                    />
                   ) : (
                     <DynamicFormRenderer
                       key={`${cloud}:${service}:create`}
@@ -832,6 +857,15 @@ export function DynamicResourceView({
           onSelectObject={setSelectedObject}
         />
       )}
+      {service === "ecr" && cloud === "aws" && (
+        <EcrImageBrowser resource={activeSelected} runtimeReachable={canUseRuntime} />
+      )}
+      {service === "targetgroups" && cloud === "aws" && (
+        <TargetGroupPanel resource={activeSelected} runtimeReachable={canUseRuntime} />
+      )}
+      {service === "loadbalancing" && cloud === "aws" && (
+        <LoadBalancerListenerPanel resource={activeSelected} runtimeReachable={canUseRuntime} />
+      )}
       {service === "compute" && (
         <ComputePanel
           cloud={cloud}
@@ -940,7 +974,15 @@ export function DynamicResourceView({
                 <X size={14} />
               </button>
             </div>
-            <DynamicFormRenderer
+            {service === "loadbalancing" && cloud === "aws" ? (
+              <LoadBalancerPanel
+                resource={editingResource}
+                isSubmitting={updateMut.isPending}
+                submitError={updateError}
+                onCancel={() => setEditingResource(null)}
+                onSubmit={handleEditSubmit}
+              />
+            ) : <DynamicFormRenderer
               key={editingResource.id}
               schema={schema}
               fields={schema.updateFields}
@@ -951,7 +993,7 @@ export function DynamicResourceView({
               submitError={updateError}
               onCancel={() => setEditingResource(null)}
               onSubmit={handleEditSubmit}
-            />
+            />}
           </div>
         </div>
       )}