chore(runtime&server): dependency changes require application restart (…

…#6)
labring · Jun 19, 2024 · e80389f · e80389f
1 parent 8cb778b
commit e80389f
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 9 deletions.
diff --git a/web/src/pages/app/functions/mods/DependencePanel/AddDependenceModal/index.tsx b/web/src/pages/app/functions/mods/DependencePanel/AddDependenceModal/index.tsx
@@ -29,11 +29,13 @@ import {
   useColorMode,
   useDisclosure,
 } from "@chakra-ui/react";
+import clsx from "clsx";
 import { debounce } from "lodash";
 
 import { EditIconLine } from "@/components/CommonIcon";
 import DependenceList from "@/components/DependenceList";
 import IconWrap from "@/components/IconWrap";
+import { APP_STATUS } from "@/constants";
 
 import {
   TDependenceItem,
@@ -46,8 +48,11 @@ import {
 } from "../service";
 import { openDependenceDetail } from "..";
 
+import useGlobalStore, { State } from "@/pages/globalStore";
+
 const AddDependenceModal = () => {
   const { t } = useTranslation();
+  const globalStore = useGlobalStore((state: State) => state);
   const [checkList, setCheckList] = useState<TDependenceItem[]>([]);
   const [name, setName] = useState("");
   const [clickItem, setClickItem] = useState({ package: "", loading: false });
@@ -77,10 +82,22 @@ const AddDependenceModal = () => {
 
   const addPackageMutation = useAddPackageMutation(() => {
     onClose();
+    globalStore.updateCurrentApp(
+      globalStore.currentApp!,
+      globalStore.currentApp!.state === APP_STATUS.Stopped
+        ? APP_STATUS.Running
+        : APP_STATUS.Restarting,
+    );
   });
 
   const editPackageMutation = useEditPackageMutation(() => {
     onClose();
+    globalStore.updateCurrentApp(
+      globalStore.currentApp!,
+      globalStore.currentApp!.state === APP_STATUS.Stopped
+        ? APP_STATUS.Running
+        : APP_STATUS.Restarting,
+    );
   });
 
   const packageSearchQuery = usePackageSearchQuery(name, (data) => {
@@ -359,7 +376,16 @@ const AddDependenceModal = () => {
                     }
                   }}
                 >
-                  {t("FunctionPanel.Select")}:
+                  <span
+                    className={clsx(
+                      "underline",
+                      "hover:text-blue-700",
+                      darkMode ? "text-blue-300 hover:text-blue-500" : "text-blue-500",
+                    )}
+                  >
+                    {t("FunctionPanel.Select")}:
+                  </span>
+
                   <span className="mx-2 text-blue-500 ">
                     {isEdit ? (
                       packageList.length
@@ -378,7 +404,7 @@ const AddDependenceModal = () => {
                   submitDependence();
                 }}
               >
-                {t("Save")}
+                {t("SaveAndRestart")}
               </Button>
             </HStack>
           </ModalFooter>

diff --git a/web/src/pages/app/functions/mods/DependencePanel/index.tsx b/web/src/pages/app/functions/mods/DependencePanel/index.tsx
@@ -10,19 +10,31 @@ import ConfirmButton from "@/components/ConfirmButton";
 import FileTypeIcon, { FileType } from "@/components/FileTypeIcon";
 import Panel from "@/components/Panel";
 import SectionList from "@/components/SectionList";
+import { APP_STATUS } from "@/constants";
 
 import AddDependenceModal from "./AddDependenceModal";
 import { TPackage, useDelPackageMutation, usePackageQuery } from "./service";
 
 import useCustomSettingStore from "@/pages/customSetting";
+import useGlobalStore, { State } from "@/pages/globalStore";
 
 export const openDependenceDetail = (depName: string) => {
   window.open(`https://www.npmjs.com/package/${encodeURIComponent(depName)}`, "_blank");
 };
 
 export default function DependenceList() {
   const packageQuery = usePackageQuery();
-  const delPackageMutation = useDelPackageMutation();
+  const globalStore = useGlobalStore((state: State) => state);
+
+  const delPackageMutation = useDelPackageMutation(() => {
+    globalStore.updateCurrentApp(
+      globalStore.currentApp!,
+      globalStore.currentApp!.state === APP_STATUS.Stopped
+        ? APP_STATUS.Running
+        : APP_STATUS.Restarting,
+    );
+  });
+
   const { t } = useTranslation();
 
   const store = useCustomSettingStore();

diff --git a/web/src/pages/functionTemplate/Mods/TemplateInfo/UseTemplate/UseTemplateModal.tsx b/web/src/pages/functionTemplate/Mods/TemplateInfo/UseTemplate/UseTemplateModal.tsx
@@ -13,22 +13,25 @@ import {
   Spinner,
   useDisclosure,
 } from "@chakra-ui/react";
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 
 import ConfirmButton from "@/components/ConfirmButton";
+import { APP_STATUS } from "@/constants";
 import { formatDate } from "@/utils/format";
 import getRegionById from "@/utils/getRegionById";
 
 import { useFunctionTemplateUseMutation } from "../../../service";
 
 import { ApplicationControllerFindAll } from "@/apis/v1/applications";
+import { ApplicationControllerUpdateState } from "@/apis/v1/applications";
+import { DependencyControllerGetDependencies } from "@/apis/v1/apps";
 import useGlobalStore from "@/pages/globalStore";
 import { APP_LIST_QUERY_KEY } from "@/pages/home";
 import BundleInfo from "@/pages/home/mods/List/BundleInfo";
 import StatusBadge from "@/pages/home/mods/StatusBadge";
 
-const UseTemplateModal = (props: { children: any; templateId: string }) => {
-  const { children, templateId } = props;
+const UseTemplateModal = (props: { children: any; templateId: string; packageList: any }) => {
+  const { children, templateId, packageList } = props;
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { regions, currentApp } = useGlobalStore();
   const { t } = useTranslation();
@@ -44,12 +47,38 @@ const UseTemplateModal = (props: { children: any; templateId: string }) => {
     },
   );
 
+  const { data: dependencies } = useQuery(
+    ["dependencies"],
+    () => {
+      return DependencyControllerGetDependencies({});
+    },
+    {
+      enabled: !!currentApp,
+    },
+  );
+
+  const updateAppStateMutation = useMutation((params: any) =>
+    ApplicationControllerUpdateState(params),
+  );
+
   const handleUseTemplate = async (appItem: any) => {
     const res = await useTemplateMutation.mutateAsync({
       appid: appItem.appid,
       templateId: templateId,
     });
 
+    const isAnyPackageNotInDependencyList = packageList.some((packageItem: string) => {
+      const packageName = packageItem.split("@")[0];
+      return !dependencies?.data.some((dep: any) => dep.name === packageName);
+    });
+
+    if (isAnyPackageNotInDependencyList && packageList.length > 0) {
+      updateAppStateMutation.mutate({
+        appid: appItem.appid,
+        state: appItem.phase === APP_STATUS.Stopped ? APP_STATUS.Running : APP_STATUS.Restarting,
+      });
+    }
+
     if (!res.error) {
       window.location.href = `/app/${appItem.appid}/function`;
     }

diff --git a/web/src/pages/functionTemplate/Mods/TemplateInfo/UseTemplate/index.tsx b/web/src/pages/functionTemplate/Mods/TemplateInfo/UseTemplate/index.tsx
@@ -12,7 +12,7 @@ import UseTemplateModal from "./UseTemplateModal";
 import { TFunctionTemplate } from "@/apis/typing";
 
 const UseTemplate = ({ template }: { template: TFunctionTemplate }) => {
-  const { star, _id: templateId } = template;
+  const { star, _id: templateId, dependencies } = template;
 
   const { t } = useTranslation();
   const [starState, setStarState] = useState(false);
@@ -51,7 +51,7 @@ const UseTemplate = ({ template }: { template: TFunctionTemplate }) => {
         {starState ? <FilledHeartIcon /> : <HeartIcon />}
         <span className="pl-1">{starNum}</span>
       </button>
-      <UseTemplateModal templateId={templateId || ""}>
+      <UseTemplateModal templateId={templateId || ""} packageList={dependencies}>
         <Button height={9}>{t("Template.useTemplate")}</Button>
       </UseTemplateModal>
     </Box>

diff --git a/web/src/pages/globalStore.ts b/web/src/pages/globalStore.ts
@@ -17,7 +17,7 @@ const { toast } = createStandaloneToast();
 
 type CloseFunc = () => void;
 
-type State = {
+export type State = {
   userInfo: Definitions.User | undefined;
   loading: boolean;
   runtimes?: TRuntime[];