Skip to content

Commit

Permalink
feat(web): support updating dependencies without restarting (#1824)
Browse files Browse the repository at this point in the history 
* feat(web): support updating dependencies without restarting

* fix(web): change SaveAndRestart to Save && fix typing load slowly
  • Loading branch information
@0fatal
0fatal committed Feb 5, 2024
1 parent bcde132 commit bd69fea
Show file tree
Hide file tree
Showing 8 changed files with 59 additions and 106 deletions.
4 changes: 2 additions & 2 deletions web/public/locales/en/translation.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -586,7 +586,7 @@
"AddMore": "Add More",
"Save": "Save",
"Recommended": "Recommended Template",
"Confirm": "If there are missing dependencies, the application will be automatically restarted. Are you sure you want to use this template?",
"Confirm": "Are you sure you want to use this template?",
"ConfirmDeleteTemplate": "Are you sure you want to delete this function template?",
"DeveloperInfo": "Developer Info",
"NoRecommended": "No Recommended Template",
Expand Down Expand Up @@ -753,4 +753,4 @@
"Title": "Laf is ready to update!",
"Description": "Click to update"
}
}
}
4 changes: 2 additions & 2 deletions web/public/locales/zh-CN/translation.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@
"ConfirmDeploy": "确认发布",
"CustomDependence": "自定义依赖",
"CustomDependenceTip": "暂无自定义依赖",
"DeleteDependencyConfirm": "确定要删除该依赖吗？删除依赖后会立即重启应用。",
"DeleteDependencyConfirm": "确定要删除该依赖吗？",
"Debug": "运行",
"DebugResult": "运行结果",
"DeleteConfirm": "确定要删除函数吗？",
Expand Down Expand Up @@ -560,7 +560,7 @@
"AddMore": "继续添加",
"Save": "保存",
"Recommended": "推荐模板",
"Confirm": "如果存在依赖包未安装，将会自动重启应用，确定使用该模板吗？",
"Confirm": "确定使用该模板吗？",
"ConfirmDeleteTemplate": "确定删除模板吗?",
"DeveloperInfo": "开发者信息",
"NoRecommended": "暂无推荐模板",
Expand Down
4 changes: 2 additions & 2 deletions web/public/locales/zh/translation.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@
"ConfirmDeploy": "确认发布",
"CustomDependence": "自定义依赖",
"CustomDependenceTip": "暂无自定义依赖",
"DeleteDependencyConfirm": "确定要删除该依赖吗？删除依赖后会立即重启应用。",
"DeleteDependencyConfirm": "确定要删除该依赖吗？",
"Debug": "运行",
"DebugResult": "运行结果",
"DeleteConfirm": "确定要删除函数吗？",
Expand Down Expand Up @@ -560,7 +560,7 @@
"AddMore": "继续添加",
"Save": "保存",
"Recommended": "推荐模板",
"Confirm": "如果存在依赖包未安装，将会自动重启应用，确定使用该模板吗？",
"Confirm": "确定使用该模板吗？",
"ConfirmDeleteTemplate": "确定删除模板吗?",
"DeveloperInfo": "开发者信息",
"NoRecommended": "暂无推荐模板",
Expand Down
89 changes: 46 additions & 43 deletions web/src/components/Editor/typesResolve/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,37 @@ import { globalDeclare } from "./globals";
import useGlobalStore from "@/pages/globalStore";

async function loadPackageTypings(packageName: string) {
const { currentApp } = useGlobalStore.getState();

const url = `//${currentApp?.host}`;
const cacheKey = `package-typings-${packageName}`;
const cache = localStorage.getItem(cacheKey);

const getType = async (packageName: string) => {
const { currentApp } = useGlobalStore.getState();

const url = `//${currentApp?.host}`;

const res = await axios({
url: `${url}/_/typing/package?packageName=${packageName}`,
method: "GET",
headers: {
"x-laf-develop-token": `${currentApp?.develop_token}`,
},
});

if (res.data?.code === 1 || !res.data?.data) {
localStorage.removeItem(cacheKey);
} else {
localStorage.setItem(cacheKey, JSON.stringify(res.data));
}
return res.data;
};

const res = await axios({
url: `${url}/_/typing/package?packageName=${packageName}`,
method: "GET",
headers: {
"x-laf-develop-token": `${currentApp?.develop_token}`,
},
});
if (cache) {
getType(packageName);
return JSON.parse(cache);
}

return res.data;
const r = await getType(packageName);
return r;
}

/**
Expand Down Expand Up @@ -82,36 +100,22 @@ export class AutoImportTypings {
*/
loadDefaults(monaco: any) {
this.addExtraLib({ path: "globals.d.ts", content: globalDeclare, monaco });
if (!this.isLoaded("@lafjs/cloud")) {
this.loadDeclaration("@lafjs/cloud", monaco);
}
if (!this.isLoaded("globals")) {
this.loadDeclaration("globals", monaco);
}
if (!this.isLoaded("database-proxy")) {
this.loadDeclaration("database-proxy", monaco);
}
if (!this.isLoaded("database-ql")) {
this.loadDeclaration("database-ql", monaco);
}
if (!this.isLoaded("axios")) {
this.loadDeclaration("axios", monaco);
}
if (!this.isLoaded("mongodb")) {
this.loadDeclaration("mongodb", monaco);
}
if (!this.isLoaded("@types/node")) {
this.loadDeclaration("@types/node", monaco);
}
if (!this.isLoaded("ws")) {
this.loadDeclaration("ws", monaco);
}
if (!this.isLoaded("@aws-sdk/client-s3")) {
this.loadDeclaration("@aws-sdk/client-s3", monaco);
}
if (!this.isLoaded("@aws-sdk/s3-request-presigner")) {
this.loadDeclaration("@aws-sdk/s3-request-presigner", monaco);
}
[
"@lafjs/cloud",
"globals",
"database-proxy",
"database-ql",
"axios",
"mongodb",
"@types/node",
"ws",
"@aws-sdk/client-s3",
"@aws-sdk/s3-request-presigner",
].forEach((v) => {
if (!this.isLoaded(v)) {
this.loadDeclaration(v, monaco);
}
});
}

/**
Expand All @@ -133,7 +137,7 @@ export class AutoImportTypings {
try {
this._loaded.push(packageName);

const r = await loadPackageTypings(packageName).catch((err: any) => console.error(err));
const r = await loadPackageTypings(packageName);
if (r?.code) {
this._loaded = this._loaded.filter((x) => x !== packageName);
return;
Expand Down Expand Up @@ -170,7 +174,6 @@ export class AutoImportTypings {
}
try {
defaults.addExtraLib(content, fullPath);
monaco.editor.createModel(content, "typescript", monaco.Uri.parse(fullPath));
} catch (error) {
console.log(error, fullPath);
throw error;
Expand Down
18 changes: 1 addition & 17 deletions web/src/pages/app/functions/mods/DependencePanel/AddDependenceModal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ 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,
Expand All @@ -40,11 +39,8 @@ import {
} from "../service";
import { openDependenceDetail } from "..";

import useGlobalStore from "@/pages/globalStore";

const AddDependenceModal = () => {
const { t } = useTranslation();
const globalStore = useGlobalStore((state) => state);
const [checkList, setCheckList] = useState<TDependenceItem[]>([]);
const [name, setName] = useState("");
const [clickItem, setClickItem] = useState({ package: "", loading: false });
Expand Down Expand Up @@ -74,22 +70,10 @@ 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) => {
Expand Down Expand Up @@ -380,7 +364,7 @@ const AddDependenceModal = () => {
submitDependence();
}}
>
{t("SaveAndRestart")}
{t("Save")}
</Button>
</ModalFooter>
</ModalContent>
Expand Down
7 changes: 1 addition & 6 deletions web/src/pages/app/functions/mods/DependencePanel/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,24 +10,19 @@ 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 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 globalStore = useGlobalStore((state) => state);
const delPackageMutation = useDelPackageMutation(() => {
globalStore.updateCurrentApp(globalStore.currentApp!, APP_STATUS.Restarting);
});
const delPackageMutation = useDelPackageMutation();
const { t } = useTranslation();

const store = useCustomSettingStore();
Expand Down
35 changes: 3 additions & 32 deletions web/src/pages/functionTemplate/Mods/TemplateInfo/UseTemplate/UseTemplateModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,25 +13,22 @@ import {
Spinner,
useDisclosure,
} from "@chakra-ui/react";
import { useMutation, useQuery } from "@tanstack/react-query";
import { 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; packageList: any }) => {
const { children, templateId, packageList } = props;
const UseTemplateModal = (props: { children: any; templateId: string }) => {
const { children, templateId } = props;
const { isOpen, onOpen, onClose } = useDisclosure();
const { regions, currentApp } = useGlobalStore();
const { t } = useTranslation();
Expand All @@ -47,38 +44,12 @@ const UseTemplateModal = (props: { children: any; templateId: string; packageLis
},
);

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`;
}
Expand Down
4 changes: 2 additions & 2 deletions web/src/pages/functionTemplate/Mods/TemplateInfo/UseTemplate/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import UseTemplateModal from "./UseTemplateModal";
import { TFunctionTemplate } from "@/apis/typing";

const UseTemplate = ({ template }: { template: TFunctionTemplate }) => {
const { star, _id: templateId, dependencies } = template;
const { star, _id: templateId } = template;

const { t } = useTranslation();
const [starState, setStarState] = useState(false);
Expand Down Expand Up @@ -51,7 +51,7 @@ const UseTemplate = ({ template }: { template: TFunctionTemplate }) => {
{starState ? <FilledHeartIcon /> : <HeartIcon />}
<span className="pl-1">{starNum}</span>
</button>
<UseTemplateModal templateId={templateId || ""} packageList={dependencies}>
<UseTemplateModal templateId={templateId || ""}>
<Button height={9}>{t("Template.useTemplate")}</Button>
</UseTemplateModal>
</Box>
Expand Down

0 comments on commit bd69fea

Please sign in to comment.