fix problem of repeated query for docker accounts, secrets, etc

frontend/src/components/build/tabs/Provider.tsx

@@ -45,7 +45,10 @@ export const ConfigProvider: ParentComponent<{}> = (p) => {
     set(...args);
     set("updated", true);
   };
-  const server = () => build.server_id ? servers.get(build.server_id) : undefined;
+  const server = () =>
+    builds.get(params.id)?.server_id
+      ? servers.get(builds.get(params.id)!.server_id!)
+      : undefined;
 
   const load = () => {
     // console.log("load build");

frontend/src/components/build/tabs/config/BuildArgs.tsx

@@ -1,4 +1,12 @@
-import { Component, createEffect, createResource, createSignal, For, Show } from "solid-js";
+import { useParams } from "@solidjs/router";
+import {
+  Component,
+  createEffect,
+  createResource,
+  createSignal,
+  For,
+  Show,
+} from "solid-js";
 import { client } from "../../../..";
 import { useAppState } from "../../../../state/StateProvider";
 import { ServerStatus } from "../../../../types";
@@ -40,9 +48,10 @@ const BuildArgs: Component<{}> = (p) => {
 };
 
 const EditBuildArgs: Component<{}> = (p) => {
-  const { aws_builder_config } = useAppState();
+  const { aws_builder_config, builds, serverSecrets } = useAppState();
   const [show, toggle] = useToggle();
   const [buildArgs, setBuildArgs] = createSignal("");
+  const params = useParams();
   const { build, setBuild, server } = useConfig();
   createEffect(() => {
     setBuildArgs(
@@ -61,16 +70,14 @@ const EditBuildArgs: Component<{}> = (p) => {
     }
     toggle();
   };
-  
-  const [peripherySecrets] = createResource(() => {
-      if (server()?.status === ServerStatus.Ok) {
-        return client
-          .get_server_available_secrets(build.server_id!);
-      } else return []
-  });
   const secrets = () => {
-    if (build.server_id) {
-      return peripherySecrets() || [];
+    if (builds.get(params.id)?.server_id) {
+      return (
+        serverSecrets.get(
+          builds.get(params.id)!.server_id!,
+          server()?.status || ServerStatus.NotOk
+        ) || []
+      );
     } else if (build.aws_config) {
       const ami_name =
         build.aws_config?.ami_name || aws_builder_config()?.default_ami_name;

frontend/src/components/build/tabs/config/Docker.tsx

@@ -14,17 +14,11 @@ import Selector from "../../../shared/menu/Selector";
 import { useConfig } from "../Provider";
 
 const Docker: Component<{}> = (p) => {
-  const { aws_builder_config } = useAppState();
+  const { aws_builder_config, serverDockerAccounts, docker_organizations } = useAppState();
   const { build, setBuild, server, userCanUpdate } = useConfig();
-  const [dockerOrgs] = createResource(() => client.get_docker_organizations());
-  const [peripheryDockerAccounts] = createResource(() => {
-    if (server()?.status === ServerStatus.Ok) {
-      return client.get_server_docker_accounts(build.server_id!);
-    } else return [];
-  });
   const dockerAccounts = () => {
     if (build.server_id) {
-      return peripheryDockerAccounts() || [];
+      return serverDockerAccounts.get(build.server_id, server()?.status || ServerStatus.NotOk) || [];
     } else if (build.aws_config) {
       const ami_name =
         build.aws_config?.ami_name || aws_builder_config()?.default_ami_name;
@@ -87,7 +81,7 @@ const Docker: Component<{}> = (p) => {
           disabled={!userCanUpdate()}
         />
       </Flex>
-      <Show when={build.docker_organization || (dockerOrgs() || []).length > 0}>
+      <Show when={build.docker_organization || (docker_organizations() || []).length > 0}>
         <Flex
           justifyContent={userCanUpdate() ? "space-between" : undefined}
           alignItems="center"
@@ -97,7 +91,7 @@ const Docker: Component<{}> = (p) => {
           <Selector
             targetClass="blue"
             selected={build.docker_organization || "none"}
-            items={["none", ...(dockerOrgs() || [])]}
+            items={["none", ...(docker_organizations() || [])]}
             onSelect={(account) => {
               setBuild(
                 "docker_organization",

frontend/src/components/build/tabs/config/Repo.tsx

@@ -1,26 +1,24 @@
-import { Component, createResource, Show } from "solid-js";
+import { Component, Show } from "solid-js";
 import Grid from "../../../shared/layout/Grid";
 import { useConfig } from "../Provider";
 import Flex from "../../../shared/layout/Flex";
 import Input from "../../../shared/Input";
 import { combineClasses } from "../../../../util/helpers";
 import { useAppState } from "../../../../state/StateProvider";
-import { client } from "../../../..";
 import { ServerStatus } from "../../../../types";
 import Selector from "../../../shared/menu/Selector";
 
 const Repo: Component<{}> = (p) => {
-  const { aws_builder_config } = useAppState();
+  const { aws_builder_config, serverGithubAccounts } = useAppState();
   const { build, setBuild, server, userCanUpdate } = useConfig();
-  const [peripheryGithubAccounts] = createResource(() => {
-    if (server()?.status === ServerStatus.Ok) {
-      return client
-        .get_server_github_accounts(build.server_id!);
-    } else return [];
-  });
   const githubAccounts = () => {
     if (build.server_id) {
-      return peripheryGithubAccounts() || [];
+      return (
+        serverGithubAccounts.get(
+          build.server_id,
+          server()?.status || ServerStatus.NotOk
+        ) || []
+      );
     } else if (build.aws_config) {
       const ami_name =
         build.aws_config?.ami_name || aws_builder_config()?.default_ami_name;

frontend/src/components/build/tabs/config/Version.tsx

@@ -1,6 +1,5 @@
 import { Component, createSignal, Show } from "solid-js";
 import { version_to_string } from "../../../../util/helpers";
-import Input from "../../../shared/Input";
 import Flex from "../../../shared/layout/Flex";
 import { useConfig } from "../Provider";
 

frontend/src/components/build/tabs/config/WebhookUrl.tsx

@@ -1,5 +1,6 @@
 import { Component, createResource, Show } from "solid-js";
 import { client } from "../../../..";
+import { useAppState } from "../../../../state/StateProvider";
 import { getId } from "../../../../util/helpers";
 import CopyClipboard from "../../../shared/CopyClipboard";
 import Flex from "../../../shared/layout/Flex";
@@ -8,13 +9,11 @@ import Loading from "../../../shared/loading/Loading";
 import { useConfig } from "../Provider";
 
 const ListenerUrl: Component<{}> = (p) => {
+  const { github_webhook_base_url } = useAppState();
   const { build } = useConfig();
-  const [github_base_url] = createResource(() =>
-    client.get_github_webhook_base_url()
-  );
   const listenerUrl = () => {
-    if (github_base_url()) {
-      return `${github_base_url()}/api/listener/build/${getId(build)}`;
+    if (github_webhook_base_url()) {
+      return `${github_webhook_base_url()}/api/listener/build/${getId(build)}`;
     }
   };
   return (

frontend/src/components/deployment/tabs/config/container/DockerAccount.tsx

@@ -1,8 +1,5 @@
-import {
-  Component,
-  createResource,
-} from "solid-js";
-import { client } from "../../../../..";
+import { Component } from "solid-js";
+import { useAppState } from "../../../../../state/StateProvider";
 import { ServerStatus } from "../../../../../types";
 import { combineClasses } from "../../../../../util/helpers";
 import Flex from "../../../../shared/layout/Flex";
@@ -10,12 +7,13 @@ import Selector from "../../../../shared/menu/Selector";
 import { useConfig } from "../Provider";
 
 const DockerAccount: Component<{}> = (p) => {
+  const { serverDockerAccounts } = useAppState();
   const { deployment, setDeployment, server, userCanUpdate } = useConfig();
-  const [dockerAccounts] = createResource(() => {
-    if (server()?.status === ServerStatus.Ok) {
-      return client.get_server_docker_accounts(deployment.server_id);
-    } else return [];
-  });
+  const dockerAccounts = () =>
+    serverDockerAccounts.get(
+      deployment.server_id,
+      server()?.status || ServerStatus.NotOk
+    ) || [];
   const when_none_selected = () => {
     if (deployment.build_id) {
       return "same as build";
@@ -23,9 +21,7 @@ const DockerAccount: Component<{}> = (p) => {
       return "none";
     }
   };
-  const accounts = () => {
-    return [when_none_selected(), ...(dockerAccounts() || [])];
-  };
+  const accounts = () => [when_none_selected(), ...dockerAccounts()];
   return (
     <Flex
       class={combineClasses("config-item shadow")}

frontend/src/components/deployment/tabs/config/container/Env.tsx

@@ -1,5 +1,13 @@
-import { Component, createEffect, createResource, createSignal, For, Show } from "solid-js";
+import {
+  Component,
+  createEffect,
+  createResource,
+  createSignal,
+  For,
+  Show,
+} from "solid-js";
 import { client } from "../../../../..";
+import { useAppState } from "../../../../../state/StateProvider";
 import { ServerStatus } from "../../../../../types";
 import {
   combineClasses,
@@ -38,6 +46,7 @@ const Env: Component<{}> = (p) => {
 };
 
 const EditDotEnv: Component<{}> = (p) => {
+  const { serverSecrets } = useAppState();
   const [show, toggle] = useToggle();
   const [dotenv, setDotEnv] = createSignal("");
   const { deployment, setDeployment, server } = useConfig();
@@ -58,12 +67,11 @@ const EditDotEnv: Component<{}> = (p) => {
     }
     toggle();
   };
-  const [secrets] = createResource(() => {
-    if (server()?.status === ServerStatus.Ok) {
-      return client
-        .get_server_available_secrets(deployment.server_id);
-    } else return []
-  })
+  const secrets = () =>
+    serverSecrets.get(
+      deployment.server_id,
+      server()?.status || ServerStatus.NotOk
+    ) || [];
   let ref: HTMLTextAreaElement;
   return (
     <CenterMenu

frontend/src/components/deployment/tabs/config/container/WebhookUrl.tsx

@@ -1,5 +1,5 @@
 import { Component, createResource, Show } from "solid-js";
-import { client } from "../../../../..";
+import { useAppState } from "../../../../../state/StateProvider";
 import { getId } from "../../../../../util/helpers";
 import CopyClipboard from "../../../../shared/CopyClipboard";
 import Flex from "../../../../shared/layout/Flex";
@@ -8,13 +8,11 @@ import Loading from "../../../../shared/loading/Loading";
 import { useConfig } from "../Provider";
 
 const WebhookUrl: Component<{}> = (p) => {
+  const { github_webhook_base_url } = useAppState();
   const { deployment } = useConfig();
-  const [github_base_url] = createResource(() =>
-    client.get_github_webhook_base_url()
-  );
   const listenerUrl = () => {
-    if (github_base_url()) {
-      return `${github_base_url()}/api/listener/deployment/${getId(
+    if (github_webhook_base_url()) {
+      return `${github_webhook_base_url()}/api/listener/deployment/${getId(
         deployment
       )}`;
     }

frontend/src/components/deployment/tabs/config/mount-repo/Git.tsx

@@ -1,5 +1,5 @@
 import { Component, createResource } from "solid-js";
-import { client } from "../../../../..";
+import { useAppState } from "../../../../../state/StateProvider";
 import { ServerStatus } from "../../../../../types";
 import { combineClasses } from "../../../../../util/helpers";
 import Input from "../../../../shared/Input";
@@ -9,13 +9,13 @@ import Selector from "../../../../shared/menu/Selector";
 import { useConfig } from "../Provider";
 
 const Git: Component<{}> = (p) => {
+  const { serverGithubAccounts } = useAppState();
   const { deployment, server, setDeployment, userCanUpdate } = useConfig();
-  const [githubAccounts] = createResource(() => {
-    if (server()?.status === ServerStatus.Ok) {
-      return client
-        .get_server_github_accounts(deployment.server_id);
-    } else return []
-  });
+  const githubAccounts = () =>
+    serverGithubAccounts.get(
+      deployment.server_id,
+      server()?.status || ServerStatus.NotOk
+    ) || [];
   return (
     <Grid class={combineClasses("config-item shadow")}>
       <h1>github config</h1>
@@ -54,7 +54,7 @@ const Git: Component<{}> = (p) => {
         <Selector
           targetClass="blue"
           selected={deployment.github_account || "none"}
-          items={["none", ...githubAccounts()!]}
+          items={["none", ...githubAccounts()]}
           onSelect={(account) => {
             setDeployment(
               "github_account",

frontend/src/state/StateProvider.tsx

@@ -6,8 +6,11 @@ import {
   useDeployments,
   useGroups,
   useProcedures,
+  useServerDockerAccounts,
+  useServerGithubAccounts,
   useServerInfo,
   useServers,
+  useServerSecrets,
   useServerStats,
   useUpdates,
   useUsernames,
@@ -23,6 +26,9 @@ export type State = {
   getPermissionOnServer: (id: string) => PermissionLevel;
   serverStats: ReturnType<typeof useServerStats>;
   serverInfo: ReturnType<typeof useServerInfo>;
+  serverDockerAccounts: ReturnType<typeof useServerDockerAccounts>;
+  serverGithubAccounts: ReturnType<typeof useServerGithubAccounts>;
+  serverSecrets: ReturnType<typeof useServerSecrets>;
   ungroupedServerIds: () => string[] | undefined;
   builds: ReturnType<typeof useBuilds>;
   getPermissionOnBuild: (id: string) => PermissionLevel;
@@ -34,6 +40,8 @@ export type State = {
   getPermissionOnProcedure: (id: string) => PermissionLevel;
   updates: ReturnType<typeof useUpdates>;
   aws_builder_config: Resource<AwsBuilderConfig>;
+  docker_organizations: Resource<string[]>;
+  github_webhook_base_url: Resource<string>;
 };
 
 const context = createContext<
@@ -54,6 +62,8 @@ export const AppStateProvider: ParentComponent = (p) => {
   const deployments = useDeployments();
   const usernames = useUsernames();
   const [aws_builder_config] = createResource(() => client.get_aws_builder_defaults());
+  const [docker_organizations] = createResource(() => client.get_docker_organizations());
+  const [github_webhook_base_url] = createResource(() => client.get_github_webhook_base_url());
   const state: State = {
     usernames,
     servers,
@@ -107,6 +117,9 @@ export const AppStateProvider: ParentComponent = (p) => {
     },
     serverStats: useServerStats(servers),
     serverInfo: useServerInfo(servers),
+    serverDockerAccounts: useServerDockerAccounts(servers),
+    serverGithubAccounts: useServerGithubAccounts(servers),
+    serverSecrets: useServerSecrets(servers),
     groups,
     getPermissionOnGroup: (id: string) => {
       const group = groups.get(id)!;
@@ -133,6 +146,8 @@ export const AppStateProvider: ParentComponent = (p) => {
     },
     updates: useUpdates(),
     aws_builder_config,
+    docker_organizations,
+    github_webhook_base_url,
   };
 
   // createEffect(() => {

frontend/src/state/hooks.ts

@@ -112,6 +112,106 @@ export function useServerInfo(servers: ReturnType<typeof useServers>) {
   };
 }
 
+export function useServerGithubAccounts(servers: ReturnType<typeof useServers>) {
+  const [accounts, set] = createSignal<
+    Record<string, string[] | undefined>
+  >({});
+  const load = async (serverID: string) => {
+    if (servers.get(serverID)?.status === ServerStatus.Ok) {
+      try {
+        const info = await client.get_server_github_accounts(serverID);
+        set((s) => ({ ...s, [serverID]: info }));
+      } catch (error) {
+        console.log("error getting server github accounts", error);
+      }
+    }
+  };
+  const loading: Record<string, boolean> = {};
+  return {
+    get: (serverID: string, serverStatus?: ServerStatus) => {
+      const accts = accounts()[serverID];
+      if (
+        accts === undefined &&
+        !loading[serverID] &&
+        (serverStatus ? serverStatus === ServerStatus.Ok : true)
+      ) {
+        loading[serverID] = true;
+        load(serverID);
+      }
+      return accts;
+    },
+    load,
+  };
+}
+
+export function useServerDockerAccounts(
+  servers: ReturnType<typeof useServers>
+) {
+  const [accounts, set] = createSignal<Record<string, string[] | undefined>>(
+    {}
+  );
+  const load = async (serverID: string) => {
+    if (servers.get(serverID)?.status === ServerStatus.Ok) {
+      try {
+        const info = await client.get_server_docker_accounts(serverID);
+        set((s) => ({ ...s, [serverID]: info }));
+      } catch (error) {
+        console.log("error getting server docker accounts", error);
+      }
+    }
+  };
+  const loading: Record<string, boolean> = {};
+  return {
+    get: (serverID: string, serverStatus?: ServerStatus) => {
+      const accts = accounts()[serverID];
+      if (
+        accts === undefined &&
+        !loading[serverID] &&
+        (serverStatus ? serverStatus === ServerStatus.Ok : true)
+      ) {
+        loading[serverID] = true;
+        load(serverID);
+      }
+      return accts;
+    },
+    load,
+  };
+}
+
+export function useServerSecrets(
+  servers: ReturnType<typeof useServers>
+) {
+  const [accounts, set] = createSignal<Record<string, string[] | undefined>>(
+    {}
+  );
+  const load = async (serverID: string) => {
+    if (servers.get(serverID)?.status === ServerStatus.Ok) {
+      try {
+        const info = await client.get_server_available_secrets(serverID);
+        set((s) => ({ ...s, [serverID]: info }));
+      } catch (error) {
+        console.log("error getting server github_accounts", error);
+      }
+    }
+  };
+  const loading: Record<string, boolean> = {};
+  return {
+    get: (serverID: string, serverStatus?: ServerStatus) => {
+      const accts = accounts()[serverID];
+      if (
+        accts === undefined &&
+        !loading[serverID] &&
+        (serverStatus ? serverStatus === ServerStatus.Ok : true)
+      ) {
+        loading[serverID] = true;
+        load(serverID);
+      }
+      return accts;
+    },
+    load,
+  };
+}
+
 export function useUsernames() {
   const [usernames, set] = createSignal<Record<string, string | undefined>>({});
   const load = async (userID: string) => {

frontend/src/util/client.ts

@@ -50,6 +50,10 @@ import { generateQuery, QueryObject } from "./helpers";
 export class Client {
   loginOptions: LoginOptions | undefined;
   monitorTitle: string | undefined;
+  secrets_cache: Record<string, string[]> = {};
+  github_accounts_cache: Record<string, string[]> = {};
+  docker_accounts_cache: Record<string, string[]> = {};
+  server_version_cache: Record<string, string> = {};
 
   constructor(private baseURL: string, public token: string | null) {}
 
@@ -254,18 +258,51 @@ export class Client {
   }
 
   get_server_github_accounts(id: string): Promise<string[]> {
+    // if (this.github_accounts_cache[id]) {
+    //   return this.github_accounts_cache[id];
+    // } else {
+    //   this.github_accounts_cache[id] = [];
+    // }
+    // this.github_accounts_cache[id] = await this.get(
+    //   `/api/server/${id}/github_accounts`
+    // );
+    // return this.github_accounts_cache[id];
     return this.get(`/api/server/${id}/github_accounts`);
   }
 
   get_server_docker_accounts(id: string): Promise<string[]> {
+    // if (this.docker_accounts_cache[id]) {
+    //   return this.docker_accounts_cache[id];
+    // } else {
+    //   this.docker_accounts_cache[id] = [];
+    // };
+    // this.docker_accounts_cache[id] = await this.get(
+    //   `/api/server/${id}/docker_accounts`
+    // );
+    // return this.docker_accounts_cache[id];
     return this.get(`/api/server/${id}/docker_accounts`);
   }
 
   get_server_available_secrets(id: string): Promise<string[]> {
+    // if (this.secrets_cache[id]) {
+    //   return this.secrets_cache[id];
+    // } else {
+    //   this.secrets_cache[id] = [];
+    // };
+    // console.log("loading");
+    // this.secrets_cache[id] = await this.get(`/api/server/${id}/secrets`);
+    // return this.secrets_cache[id];
     return this.get(`/api/server/${id}/secrets`);
   }
 
   get_server_version(id: string): Promise<string> {
+    // if (this.server_version_cache[id]) {
+    //   return this.server_version_cache[id];
+    // } else {
+    //   this.server_version_cache[id] = "loading...";
+    // };
+    // this.server_version_cache[id] = await this.get(`/api/server/${id}/version`);
+    // return this.server_version_cache[id];
     return this.get(`/api/server/${id}/version`);
   }