Eliminate need to enable visibility of Docker containers in the exten…

…sion (#42)

leverage workaround from
docker/extensions-sdk#225 (comment)
to eliminate this startup dialog. H/t @versilis for leading us to this
solution!

Container state data, as emitted from inspect:
<img width="1009" alt="image"
src="https://user-images.githubusercontent.com/3943358/230248013-80ea46e0-6a14-4725-960a-b87df9d12dd3.png">

ui/src/data/queries/container.ts

@@ -54,10 +54,38 @@ export const useContainers = (predicate?: (ContainerInfo) => boolean): Container
   return containers;
 };
 
-export const getAkitaContainer = async (client: v1.DockerDesktopClient): Promise<ContainerInfo> =>
-  await getContainers(client).then((containers) =>
-    containers.find((container) => isAkitaContainer(container))
-  );
+export const getAkitaContainer = async (client: v1.DockerDesktopClient): Promise<ContainerInfo> => {
+  let inspectResult;
+  try {
+    inspectResult = await client.docker.cli.exec("inspect", [
+      "--type",
+      "container",
+      AgentContainerName,
+    ]);
+  } catch (error) {
+    console.info(
+      "Error from inspect, probably didn't find container, which happens when it has not yet started. This is likely not an issue.",
+      error
+    );
+    return undefined;
+  }
+
+  const inspectJson: Array<any> = JSON.parse(inspectResult.stdout);
+  if (inspectJson.length !== 1) {
+    throw new Error(
+      "Unexpectedly got more than one container named 'akita-docker-extension-agent'"
+    );
+  }
+  const containerInfo = inspectJson[0];
+  return {
+    Id: containerInfo.Id,
+    Image: containerInfo.Image,
+    Command: (containerInfo.Config?.Cmd || []).join(" "),
+    Names: [containerInfo.Name],
+    State: containerInfo.State?.Status,
+    Labels: containerInfo?.Config?.Labels,
+  };
+};
 
 export const startAgentWithRetry = async (
   client: v1.DockerDesktopClient,
@@ -127,13 +155,3 @@ export const removeAkitaContainer = async (client: v1.DockerDesktopClient) => {
     await client.docker.cli.exec("rm", ["-f", container.Id]);
   }
 };
-
-const isAkitaContainer = (containerInfo?: ContainerInfo): boolean => {
-  const doesMatchContainerName = containerInfo?.Names.some((name) =>
-    name.includes(AgentContainerName)
-  );
-  const doesMatchImageName = containerInfo?.Image.includes(AgentImageName);
-  const isDockerExtension = containerInfo?.Labels["com.docker.desktop.extension"] === "true";
-
-  return doesMatchContainerName && doesMatchImageName && isDockerExtension;
-};

ui/src/hooks/use-container-state.ts → ui/src/hooks/use-akita-agent-container-state.ts

@@ -1,19 +1,14 @@
 import { useEffect, useState } from "react";
-import { ContainerState, getContainer } from "../data/queries/container";
+import { ContainerState, getAkitaContainer } from "../data/queries/container";
 import { useDockerDesktopClient } from "./use-docker-desktop-client";
 
-export const useContainerState = (
-  pollInterval: number,
-  containerID?: string
-): ContainerState | undefined => {
+export const useAkitaAgentContainerState = (pollInterval: number): ContainerState | undefined => {
   const ddClient = useDockerDesktopClient();
   const [containerState, setContainerState] = useState<ContainerState | undefined>();
 
   useEffect(() => {
-    if (!containerID) return;
-
     const interval = setInterval(() => {
-      getContainer(ddClient, containerID)
+      getAkitaContainer(ddClient)
         .then((container) => {
           if (container) {
             setContainerState(container.State);
@@ -25,7 +20,7 @@ export const useContainerState = (
     }, pollInterval);
 
     return () => clearInterval(interval);
-  }, [containerID, ddClient, pollInterval]);
+  }, [ddClient, pollInterval]);
 
   return containerState;
 };

ui/src/views/agent/components/AgentStatus.tsx

@@ -12,7 +12,7 @@ import {
 import React, { useEffect, useState } from "react";
 import { ContainerInfo, ContainerState } from "../../../data/queries/container";
 import { Service } from "../../../data/queries/service";
-import { useContainerState } from "../../../hooks/use-container-state";
+import { useAkitaAgentContainerState } from "../../../hooks/use-akita-agent-container-state";
 import { useDockerDesktopClient } from "../../../hooks/use-docker-desktop-client";
 
 interface AgentStatusProps {
@@ -42,7 +42,7 @@ export const AgentStatus = ({
   targetedProjectName,
 }: AgentStatusProps) => {
   const ddClient = useDockerDesktopClient();
-  const containerState = useContainerState(2000, containerInfo?.Id);
+  const containerState = useAkitaAgentContainerState(2000);
   const [status, setStatus] = useState<
     "Loading" | "Running" | "Starting" | "Failed"
   >("Loading");

ui/src/views/config/ConfigPage.tsx

@@ -21,7 +21,6 @@ import { useAgentConfig } from "../../hooks/use-agent-config";
 import { useDockerDesktopClient } from "../../hooks/use-docker-desktop-client";
 import { BaseHeader } from "../shared/components/BaseHeader";
 import { HelpSpeedDial } from "../shared/components/HelpSpeedDial";
-import { SubmitWarningDialog } from "./components/SubmitWarningDialog";
 
 const AkitaLogo = () => {
   const isDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
@@ -74,7 +73,6 @@ export const ConfigPage = () => {
   const navigate = useNavigate();
   const [isInvalidAPICredentials, setIsInvalidAPICredentials] = useState(false);
   const [isInvalidProjectName, setIsInvalidProjectName] = useState(false);
-  const [isSubmitWarningDialogOpen, setIsSubmitWarningDialogOpen] = useState(false);
 
   // If the agent config has already been set, pre-populate the form with the existing values.
   useEffect(() => {
@@ -130,7 +128,7 @@ export const ConfigPage = () => {
           return Promise.reject(new Error("Invalid submission"));
         }
       })
-      .then(() => setIsSubmitWarningDialogOpen(true))
+      .then(handleStart)
       .catch((e) => {
         if (e.message !== "Invalid submission") {
           ddClient.desktopUI.toast.error(`Submission failed: ${e.message}`);
@@ -160,10 +158,7 @@ export const ConfigPage = () => {
   };
 
   const isSubmitEnabled =
-    isConfigInputStateValid(configInput) &&
-    !isInvalidAPICredentials &&
-    !isInvalidProjectName &&
-    !isSubmitWarningDialogOpen;
+    isConfigInputStateValid(configInput) && !isInvalidAPICredentials && !isInvalidProjectName;
 
   return (
     <>
@@ -241,11 +236,6 @@ export const ConfigPage = () => {
         </Box>
       </Box>
       <HelpSpeedDial sx={{ position: "absolute", bottom: 32, right: 32 }} />
-      <SubmitWarningDialog
-        isOpen={isSubmitWarningDialogOpen}
-        onClose={() => setIsSubmitWarningDialogOpen(false)}
-        onConfirm={handleStart}
-      />
     </>
   );
 };