Skip to content

Commit 03846e7

Browse files
LeezQmaslow
LeezQ
and
maslow
authored
feat(web): add function ide console panel (#593)
* fix(web): add types request url * feat(web): add custom url for per page * feat(web): add tooltip for menu icon * feat(web): add console panel Co-authored-by: maslow <[email protected]>
1 parent 41916f9 commit 03846e7

File tree

10 files changed

+150
-64
lines changed

10 files changed

+150
-64
lines changed

‎web/src/components/CopyText/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export default function CopyText(props: {
2323
return (
2424
<Tooltip label={t("ToolTip.Copy")} placement="top">
2525
{React.cloneElement(children, {
26-
className: "ml-2 " + (className || ""),
26+
className: className || "",
2727
onClick: () => {
2828
onCopy();
2929
showSuccess(tip || t("ToolTip.Copied"));

‎web/src/components/Editor/FunctionEditor.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ monaco?.editor.defineTheme("lafEditorTheme", {
2424
colors: {
2525
"editorLineNumber.foreground": "#aaa",
2626
"editorOverviewRuler.border": "#fff",
27-
"editor.lineHighlightBackground": "#F5F6F8",
27+
"editor.lineHighlightBackground": "#F7F8FA",
2828
"scrollbarSlider.background": "#E8EAEC",
2929
"editorIndentGuide.activeBackground": "#ddd",
3030
"editorIndentGuide.background": "#eee",
@@ -96,7 +96,7 @@ function FunctionEditor(props: {
9696
return () => {};
9797
}, [path, value]);
9898

99-
return <div style={{ height: "95%" }} ref={monacoEl}></div>;
99+
return <div style={{ height: "calc(100% - 294px)" }} ref={monacoEl}></div>;
100100
}
101101

102102
export default FunctionEditor;

‎web/src/pages/app/database/CollectionListPanel/index.tsx

+8-18
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import React, { useState } from "react";
2-
import { Search2Icon } from "@chakra-ui/icons";
3-
import { Input, InputGroup, InputLeftElement } from "@chakra-ui/react";
1+
import { useState } from "react";
2+
import { Input } from "@chakra-ui/react";
43

54
import CopyText from "@/components/CopyText";
65
import FileTypeIcon, { FileType } from "@/components/FileTypeIcon";
@@ -33,21 +32,12 @@ export default function CollectionListPanel() {
3332
<LeftPanel>
3433
<Panel title="集合列表" actions={[<CreateCollectionModal key={"create_database"} />]}>
3534
<div className="flex items-center m-2 mr-0 mb-3">
36-
<InputGroup>
37-
<InputLeftElement
38-
height={"8"}
39-
width="12"
40-
pointerEvents="none"
41-
children={<Search2Icon bgSize="sm" color="gray.300" />}
42-
/>
43-
<Input
44-
size="sm"
45-
className="mr-2"
46-
variant="filled"
47-
placeholder="输入集ID查找"
48-
onChange={(e) => setSearch(e.target.value)}
49-
/>
50-
</InputGroup>
35+
<Input
36+
size="sm"
37+
className="mr-2"
38+
placeholder="输入集合 ID 搜索"
39+
onChange={(e) => setSearch(e.target.value)}
40+
/>
5141
</div>
5242

5343
<SectionList>

‎web/src/pages/app/functions/index.tsx

+4-9
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* cloud functions index page
33
***************************/
44

5-
import { Badge, Button, Center, HStack } from "@chakra-ui/react";
5+
import { Badge, Center, HStack } from "@chakra-ui/react";
66
import { t } from "i18next";
77

88
import FunctionEditor from "@/components/Editor/FunctionEditor";
@@ -13,6 +13,7 @@ import { Pages } from "@/constants";
1313
import LeftPanel from "../mods/LeftPanel";
1414
import RightPanel from "../mods/RightPanel";
1515

16+
import ConsolePanel from "./mods/ConsolePanel";
1617
import DebugPanel from "./mods/DebugPannel";
1718
import DependecyPanel from "./mods/DependecePanel";
1819
import DeployButton from "./mods/DeployButton";
@@ -75,14 +76,6 @@ function FunctionPage() {
7576

7677
<HStack spacing="4">
7778
<DeployButton />
78-
<Button
79-
size="sm"
80-
onClick={() => {
81-
globalStore.restartCurrentApp();
82-
}}
83-
>
84-
Restart
85-
</Button>
8679
</HStack>
8780
</PanelHeader>
8881
</div>
@@ -98,6 +91,8 @@ function FunctionPage() {
9891
) : (
9992
<Center className="h-full">{t("FunctionPanel.EmptyText")}</Center>
10093
)}
94+
95+
<ConsolePanel />
10196
</div>
10297
<div style={{ width: "30%" }}>
10398
{/* <div className="h-full border bg-black">1</div> */}

‎web/src/pages/app/functions/mods/ConsolePanel/index.tsx

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { useQuery } from "@tanstack/react-query";
2+
3+
import CopyText from "@/components/CopyText";
4+
import PanelHeader from "@/components/Panel/Header";
5+
import { formatDate } from "@/utils/format";
6+
7+
import useFunctionStore from "../../store";
8+
9+
import { LogControllerGetLogs } from "@/apis/v1/apps";
10+
11+
function ConsolePanel() {
12+
const { currentRequestId } = useFunctionStore();
13+
14+
const logControllerGetLogsQuery = useQuery(
15+
["LogControllerGetLogs", currentRequestId],
16+
() => {
17+
return LogControllerGetLogs({ requestId: currentRequestId, limit: 100 });
18+
},
19+
{
20+
enabled: typeof currentRequestId !== "undefined",
21+
},
22+
);
23+
24+
return (
25+
<div className="flex-1 ">
26+
<PanelHeader className="bg-slate-100 !mb-1">Console</PanelHeader>
27+
<div className="relative overflow-y-auto px-2 font-mono text-sm" style={{ height: "200px" }}>
28+
{currentRequestId && (
29+
<p className="mb-1 ml-1">
30+
ReqeustID: {currentRequestId} <CopyText text={String(currentRequestId)} />
31+
</p>
32+
)}
33+
{(logControllerGetLogsQuery.data?.data?.list || []).map((item: any) => {
34+
return (
35+
<div key={item._id} className="flex ">
36+
<span className=" text-slate-500 min-w-[160px]">
37+
[{formatDate(item.created_at, "YYYY-MM-DD hh:mm:ss")}]
38+
</span>
39+
<pre className="flex-1">{item.data}</pre>
40+
</div>
41+
);
42+
})}
43+
</div>
44+
</div>
45+
);
46+
}
47+
48+
export default ConsolePanel;

‎web/src/pages/app/functions/mods/DebugPannel/index.tsx

+8-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect, useState } from "react";
1+
import { useEffect, useState } from "react";
22
import SyntaxHighlighter from "react-syntax-highlighter";
33
import {
44
Button,
@@ -30,7 +30,9 @@ import useHotKey from "@/hooks/useHotKey";
3030
import useGlobalStore from "@/pages/globalStore";
3131

3232
export default function DebugPanel() {
33-
const { getFunctionDebugUrl, currentFunction } = useFunctionStore((state) => state);
33+
const { getFunctionDebugUrl, currentFunction, setCurrentRequestId } = useFunctionStore(
34+
(state) => state,
35+
);
3436

3537
const globalStore = useGlobalStore((state) => state);
3638

@@ -42,7 +44,7 @@ export default function DebugPanel() {
4244

4345
const compileMutation = useCompileMutation();
4446

45-
const [params, setParams] = useState(JSON.stringify({ name: "test" }));
47+
const [params, setParams] = useState(JSON.stringify({ name: "test" }, null, 2));
4648

4749
useHotKey(
4850
"r",
@@ -89,6 +91,9 @@ export default function DebugPanel() {
8991
"x-laf-debug-token": `${globalStore.currentApp?.function_debug_token}`,
9092
},
9193
});
94+
95+
setCurrentRequestId(res.headers["request-id"]);
96+
9297
setRunningResData(res.data);
9398
}
9499
} catch (error: any) {

‎web/src/pages/app/functions/mods/DependecePanel/AddDepenceModal/index.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,11 @@ import {
3535
usePackageVersionsQuery,
3636
} from "../service";
3737

38+
import useGlobalStore from "@/pages/globalStore";
39+
3840
const AddDepenceModal = () => {
3941
const { t } = useTranslation();
42+
const globalStore = useGlobalStore((state) => state);
4043
const [checkList, setCheckList] = useState<TDependenceItem[]>([]);
4144
const [name, setName] = useState("");
4245
const [clickItem, setClickItem] = useState("");
@@ -82,6 +85,7 @@ const AddDepenceModal = () => {
8285
);
8386
isEdit ? setPackageList(newList) : setList(newList);
8487
});
88+
8589
const search = useCallback(
8690
debounce((val: string) => {
8791
setIsShowChecked(false);
@@ -148,6 +152,7 @@ const AddDepenceModal = () => {
148152

149153
const addPackageMutation = useAddPackageMutation(() => {
150154
onClose();
155+
globalStore.restartCurrentApp();
151156
});
152157

153158
const renderList = (list: TDependenceItem[]) => {

‎web/src/pages/app/functions/mods/FunctionPanel/index.tsx

+10-19
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44

55
import { useEffect, useState } from "react";
66
import { useNavigate, useParams } from "react-router-dom";
7-
import { DeleteIcon, Search2Icon } from "@chakra-ui/icons";
8-
import { Input, InputGroup, InputLeftElement } from "@chakra-ui/react";
7+
import { DeleteIcon } from "@chakra-ui/icons";
8+
import { Input } from "@chakra-ui/react";
99
import { t } from "i18next";
1010

1111
import ConfirmButton from "@/components/ConfirmButton";
@@ -61,23 +61,14 @@ export default function FunctionList() {
6161
<Panel title={t`FunctionList`} actions={[<CreateModal key="create_modal" />]}>
6262
<div className="border-b border-slate-300">
6363
<div className="flex items-center ml-2 mb-3">
64-
<InputGroup>
65-
<InputLeftElement
66-
height={"8"}
67-
width="12"
68-
pointerEvents="none"
69-
children={<Search2Icon bgSize="sm" color="gray.300" />}
70-
/>
71-
<Input
72-
size="sm"
73-
className="mr-2"
74-
variant="filled"
75-
placeholder={String(t("SearchPlacehoder"))}
76-
onChange={(event) => {
77-
setKeywords(event.target.value);
78-
}}
79-
/>
80-
</InputGroup>
64+
<Input
65+
size="sm"
66+
className="mr-2"
67+
placeholder={String(t("SearchPlacehoder"))}
68+
onChange={(event) => {
69+
setKeywords(event.target.value);
70+
}}
71+
/>
8172
</div>
8273

8374
<SectionList style={{ height: "calc(100vh - 400px)", overflowY: "auto" }}>

‎web/src/pages/app/functions/store.ts

+9-2
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,12 @@ import useGlobalStore from "@/pages/globalStore";
88
type State = {
99
allFunctionList: TFunction[];
1010
currentFunction: TFunction | { [key: string]: any };
11+
currentRequestId: string | undefined;
1112
functionCodes: { [key: string]: string };
1213
getFunctionUrl: () => string;
1314
getFunctionDebugUrl: () => string;
1415

16+
setCurrentRequestId: (requestId: string | undefined) => void;
1517
setAllFunctionList: (funcionList: TFunction[]) => void;
1618
setCurrentFunction: (currentFunction: TFunction | { [key: string]: any }) => void;
1719
updateFunctionCode: (current: TFunction | { [key: string]: any }, codes: string) => void;
@@ -21,10 +23,9 @@ const useFunctionStore = create<State>()(
2123
devtools(
2224
immer((set, get) => ({
2325
allFunctionList: [],
24-
2526
currentFunction: {},
26-
2727
functionCodes: {},
28+
currentRequestId: undefined,
2829

2930
getFunctionUrl: () => {
3031
const currentApp = useGlobalStore.getState().currentApp;
@@ -44,6 +45,12 @@ const useFunctionStore = create<State>()(
4445
: "";
4546
},
4647

48+
setCurrentRequestId: (requestId) => {
49+
set((state) => {
50+
state.currentRequestId = requestId;
51+
});
52+
},
53+
4754
setAllFunctionList: (allFunctionList) => {
4855
set((state) => {
4956
state.allFunctionList = allFunctionList;

0 commit comments

Comments
 (0)