chore(runtime&web): dependency changes require application restart

runtimes/nodejs/src/support/database-change-stream/conf-change-stream.ts

@@ -1,10 +1,10 @@
 import { CONFIG_COLLECTION } from '../../constants'
 import { DatabaseAgent } from '../../db'
 import { DatabaseChangeStream } from '.'
-import {
-  installDependencies,
-  uninstallDependencies,
-} from '../module-hot-reload'
+// import {
+//   installDependencies,
+//   uninstallDependencies,
+// } from '../module-hot-reload'
 
 export class ConfChangeStream {
   static dependencies = []
@@ -36,28 +36,32 @@ export class ConfChangeStream {
       return
     }
 
-    const newDeps = []
-    const unneededDeps = []
+    /*
+    hot reload dependencies
+    */
 
-    for (const dep of conf.dependencies) {
-      if (!ConfChangeStream.dependencies.includes(dep)) {
-        newDeps.push(dep)
-      }
-    }
+    // const newDeps = []
+    // const unneededDeps = []
 
-    for (const dep of ConfChangeStream.dependencies) {
-      if (!conf.dependencies.includes(dep)) {
-        unneededDeps.push(dep)
-      }
-    }
+    // for (const dep of conf.dependencies) {
+    //   if (!ConfChangeStream.dependencies.includes(dep)) {
+    //     newDeps.push(dep)
+    //   }
+    // }
 
-    ConfChangeStream.dependencies = conf.dependencies
+    // for (const dep of ConfChangeStream.dependencies) {
+    //   if (!conf.dependencies.includes(dep)) {
+    //     unneededDeps.push(dep)
+    //   }
+    // }
 
-    if (newDeps.length > 0) {
-      installDependencies(newDeps)
-    }
-    if (unneededDeps.length > 0) {
-      uninstallDependencies(unneededDeps)
-    }
+    // ConfChangeStream.dependencies = conf.dependencies
+
+    // if (newDeps.length > 0) {
+    //   installDependencies(newDeps)
+    // }
+    // if (unneededDeps.length > 0) {
+    //   uninstallDependencies(unneededDeps)
+    // }
   }
 }

web/src/pages/app/functions/mods/DependencePanel/AddDependenceModal/index.tsx

@@ -1,6 +1,12 @@
 import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { AddIcon, ExternalLinkIcon, InfoOutlineIcon, SearchIcon, SmallCloseIcon } from "@chakra-ui/icons";
+import {
+  AddIcon,
+  ExternalLinkIcon,
+  InfoOutlineIcon,
+  SearchIcon,
+  SmallCloseIcon,
+} from "@chakra-ui/icons";
 import {
   Box,
   Button,
@@ -23,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,
@@ -40,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 });
@@ -71,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) => {
@@ -336,7 +359,7 @@ const AddDependenceModal = () => {
             )}
           </ModalBody>
 
-          <ModalFooter justifyContent={'space-between'}>
+          <ModalFooter justifyContent={"space-between"}>
             <HStack>
               <span className="flex items-center text-grayModern-600">
                 <InfoOutlineIcon className="mx-1" />
@@ -353,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>
+                  {/* {t("FunctionPanel.Select")}: */}
                   <span className="mx-2 text-blue-500 ">
                     {isEdit ? (
                       packageList.length
@@ -372,7 +404,7 @@ const AddDependenceModal = () => {
                   submitDependence();
                 }}
               >
-                {t("Save")}
+                {t("SaveAndRestart")}
               </Button>
             </HStack>
           </ModalFooter>

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();

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`;
     }

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>

web/src/pages/globalStore.ts

@@ -17,7 +17,7 @@ const { toast } = createStandaloneToast();
 
 type CloseFunc = () => void;
 
-type State = {
+export type State = {
   userInfo: Definitions.UserWithProfile | undefined;
   loading: boolean;
   runtimes?: TRuntime[];