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 <wangfugen@126.com>
labring · Jan 1, 2023 · 03846e7 · 03846e7
1 parent 41916f9
commit 03846e7
Show file tree

Hide file tree

Showing 10 changed files with 150 additions and 64 deletions.
diff --git a/web/src/components/CopyText/index.tsx b/web/src/components/CopyText/index.tsx
@@ -23,7 +23,7 @@ export default function CopyText(props: {
   return (
     <Tooltip label={t("ToolTip.Copy")} placement="top">
       {React.cloneElement(children, {
-        className: "ml-2 " + (className || ""),
+        className: className || "",
         onClick: () => {
           onCopy();
           showSuccess(tip || t("ToolTip.Copied"));

diff --git a/web/src/components/Editor/FunctionEditor.tsx b/web/src/components/Editor/FunctionEditor.tsx
@@ -24,7 +24,7 @@ monaco?.editor.defineTheme("lafEditorTheme", {
   colors: {
     "editorLineNumber.foreground": "#aaa",
     "editorOverviewRuler.border": "#fff",
-    "editor.lineHighlightBackground": "#F5F6F8",
+    "editor.lineHighlightBackground": "#F7F8FA",
     "scrollbarSlider.background": "#E8EAEC",
     "editorIndentGuide.activeBackground": "#ddd",
     "editorIndentGuide.background": "#eee",
@@ -96,7 +96,7 @@ function FunctionEditor(props: {
     return () => {};
   }, [path, value]);
 
-  return <div style={{ height: "95%" }} ref={monacoEl}></div>;
+  return <div style={{ height: "calc(100% - 294px)" }} ref={monacoEl}></div>;
 }
 
 export default FunctionEditor;
diff --git a/web/src/pages/app/database/CollectionListPanel/index.tsx b/web/src/pages/app/database/CollectionListPanel/index.tsx
@@ -1,6 +1,5 @@
-import React, { useState } from "react";
-import { Search2Icon } from "@chakra-ui/icons";
-import { Input, InputGroup, InputLeftElement } from "@chakra-ui/react";
+import { useState } from "react";
+import { Input } from "@chakra-ui/react";
 
 import CopyText from "@/components/CopyText";
 import FileTypeIcon, { FileType } from "@/components/FileTypeIcon";
@@ -33,21 +32,12 @@ export default function CollectionListPanel() {
     <LeftPanel>
       <Panel title="集合列表" actions={[<CreateCollectionModal key={"create_database"} />]}>
         <div className="flex items-center m-2 mr-0 mb-3">
-          <InputGroup>
-            <InputLeftElement
-              height={"8"}
-              width="12"
-              pointerEvents="none"
-              children={<Search2Icon bgSize="sm" color="gray.300" />}
-            />
-            <Input
-              size="sm"
-              className="mr-2"
-              variant="filled"
-              placeholder="输入集ID查找"
-              onChange={(e) => setSearch(e.target.value)}
-            />
-          </InputGroup>
+          <Input
+            size="sm"
+            className="mr-2"
+            placeholder="输入集合 ID 搜索"
+            onChange={(e) => setSearch(e.target.value)}
+          />
         </div>
 
         <SectionList>

diff --git a/web/src/pages/app/functions/index.tsx b/web/src/pages/app/functions/index.tsx
@@ -2,7 +2,7 @@
  * cloud functions index page
  ***************************/
 
-import { Badge, Button, Center, HStack } from "@chakra-ui/react";
+import { Badge, Center, HStack } from "@chakra-ui/react";
 import { t } from "i18next";
 
 import FunctionEditor from "@/components/Editor/FunctionEditor";
@@ -13,6 +13,7 @@ import { Pages } from "@/constants";
 import LeftPanel from "../mods/LeftPanel";
 import RightPanel from "../mods/RightPanel";
 
+import ConsolePanel from "./mods/ConsolePanel";
 import DebugPanel from "./mods/DebugPannel";
 import DependecyPanel from "./mods/DependecePanel";
 import DeployButton from "./mods/DeployButton";
@@ -75,14 +76,6 @@ function FunctionPage() {
 
                 <HStack spacing="4">
                   <DeployButton />
-                  <Button
-                    size="sm"
-                    onClick={() => {
-                      globalStore.restartCurrentApp();
-                    }}
-                  >
-                    Restart
-                  </Button>
                 </HStack>
               </PanelHeader>
             </div>
@@ -98,6 +91,8 @@ function FunctionPage() {
             ) : (
               <Center className="h-full">{t("FunctionPanel.EmptyText")}</Center>
             )}
+
+            <ConsolePanel />
           </div>
           <div style={{ width: "30%" }}>
             {/* <div className="h-full border bg-black">1</div> */}

diff --git a/web/src/pages/app/functions/mods/ConsolePanel/index.tsx b/web/src/pages/app/functions/mods/ConsolePanel/index.tsx
@@ -0,0 +1,48 @@
+import { useQuery } from "@tanstack/react-query";
+
+import CopyText from "@/components/CopyText";
+import PanelHeader from "@/components/Panel/Header";
+import { formatDate } from "@/utils/format";
+
+import useFunctionStore from "../../store";
+
+import { LogControllerGetLogs } from "@/apis/v1/apps";
+
+function ConsolePanel() {
+  const { currentRequestId } = useFunctionStore();
+
+  const logControllerGetLogsQuery = useQuery(
+    ["LogControllerGetLogs", currentRequestId],
+    () => {
+      return LogControllerGetLogs({ requestId: currentRequestId, limit: 100 });
+    },
+    {
+      enabled: typeof currentRequestId !== "undefined",
+    },
+  );
+
+  return (
+    <div className="flex-1 ">
+      <PanelHeader className="bg-slate-100 !mb-1">Console</PanelHeader>
+      <div className="relative overflow-y-auto px-2 font-mono text-sm" style={{ height: "200px" }}>
+        {currentRequestId && (
+          <p className="mb-1 ml-1">
+            ReqeustID: {currentRequestId} <CopyText text={String(currentRequestId)} />
+          </p>
+        )}
+        {(logControllerGetLogsQuery.data?.data?.list || []).map((item: any) => {
+          return (
+            <div key={item._id} className="flex ">
+              <span className=" text-slate-500 min-w-[160px]">
+                [{formatDate(item.created_at, "YYYY-MM-DD hh:mm:ss")}]
+              </span>
+              <pre className="flex-1">{item.data}</pre>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export default ConsolePanel;
diff --git a/web/src/pages/app/functions/mods/DebugPannel/index.tsx b/web/src/pages/app/functions/mods/DebugPannel/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import SyntaxHighlighter from "react-syntax-highlighter";
 import {
   Button,
@@ -30,7 +30,9 @@ import useHotKey from "@/hooks/useHotKey";
 import useGlobalStore from "@/pages/globalStore";
 
 export default function DebugPanel() {
-  const { getFunctionDebugUrl, currentFunction } = useFunctionStore((state) => state);
+  const { getFunctionDebugUrl, currentFunction, setCurrentRequestId } = useFunctionStore(
+    (state) => state,
+  );
 
   const globalStore = useGlobalStore((state) => state);
 
@@ -42,7 +44,7 @@ export default function DebugPanel() {
 
   const compileMutation = useCompileMutation();
 
-  const [params, setParams] = useState(JSON.stringify({ name: "test" }));
+  const [params, setParams] = useState(JSON.stringify({ name: "test" }, null, 2));
 
   useHotKey(
     "r",
@@ -89,6 +91,9 @@ export default function DebugPanel() {
             "x-laf-debug-token": `${globalStore.currentApp?.function_debug_token}`,
           },
         });
+
+        setCurrentRequestId(res.headers["request-id"]);
+
         setRunningResData(res.data);
       }
     } catch (error: any) {

diff --git a/web/src/pages/app/functions/mods/DependecePanel/AddDepenceModal/index.tsx b/web/src/pages/app/functions/mods/DependecePanel/AddDepenceModal/index.tsx
@@ -35,8 +35,11 @@ import {
   usePackageVersionsQuery,
 } from "../service";
 
+import useGlobalStore from "@/pages/globalStore";
+
 const AddDepenceModal = () => {
   const { t } = useTranslation();
+  const globalStore = useGlobalStore((state) => state);
   const [checkList, setCheckList] = useState<TDependenceItem[]>([]);
   const [name, setName] = useState("");
   const [clickItem, setClickItem] = useState("");
@@ -82,6 +85,7 @@ const AddDepenceModal = () => {
     );
     isEdit ? setPackageList(newList) : setList(newList);
   });
+
   const search = useCallback(
     debounce((val: string) => {
       setIsShowChecked(false);
@@ -148,6 +152,7 @@ const AddDepenceModal = () => {
 
   const addPackageMutation = useAddPackageMutation(() => {
     onClose();
+    globalStore.restartCurrentApp();
   });
 
   const renderList = (list: TDependenceItem[]) => {

diff --git a/web/src/pages/app/functions/mods/FunctionPanel/index.tsx b/web/src/pages/app/functions/mods/FunctionPanel/index.tsx
@@ -4,8 +4,8 @@
 
 import { useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-import { DeleteIcon, Search2Icon } from "@chakra-ui/icons";
-import { Input, InputGroup, InputLeftElement } from "@chakra-ui/react";
+import { DeleteIcon } from "@chakra-ui/icons";
+import { Input } from "@chakra-ui/react";
 import { t } from "i18next";
 
 import ConfirmButton from "@/components/ConfirmButton";
@@ -61,23 +61,14 @@ export default function FunctionList() {
     <Panel title={t`FunctionList`} actions={[<CreateModal key="create_modal" />]}>
       <div className="border-b border-slate-300">
         <div className="flex items-center ml-2 mb-3">
-          <InputGroup>
-            <InputLeftElement
-              height={"8"}
-              width="12"
-              pointerEvents="none"
-              children={<Search2Icon bgSize="sm" color="gray.300" />}
-            />
-            <Input
-              size="sm"
-              className="mr-2"
-              variant="filled"
-              placeholder={String(t("SearchPlacehoder"))}
-              onChange={(event) => {
-                setKeywords(event.target.value);
-              }}
-            />
-          </InputGroup>
+          <Input
+            size="sm"
+            className="mr-2"
+            placeholder={String(t("SearchPlacehoder"))}
+            onChange={(event) => {
+              setKeywords(event.target.value);
+            }}
+          />
         </div>
 
         <SectionList style={{ height: "calc(100vh - 400px)", overflowY: "auto" }}>

diff --git a/web/src/pages/app/functions/store.ts b/web/src/pages/app/functions/store.ts
@@ -8,10 +8,12 @@ import useGlobalStore from "@/pages/globalStore";
 type State = {
   allFunctionList: TFunction[];
   currentFunction: TFunction | { [key: string]: any };
+  currentRequestId: string | undefined;
   functionCodes: { [key: string]: string };
   getFunctionUrl: () => string;
   getFunctionDebugUrl: () => string;
 
+  setCurrentRequestId: (requestId: string | undefined) => void;
   setAllFunctionList: (funcionList: TFunction[]) => void;
   setCurrentFunction: (currentFunction: TFunction | { [key: string]: any }) => void;
   updateFunctionCode: (current: TFunction | { [key: string]: any }, codes: string) => void;
@@ -21,10 +23,9 @@ const useFunctionStore = create<State>()(
   devtools(
     immer((set, get) => ({
       allFunctionList: [],
-
       currentFunction: {},
-
       functionCodes: {},
+      currentRequestId: undefined,
 
       getFunctionUrl: () => {
         const currentApp = useGlobalStore.getState().currentApp;
@@ -44,6 +45,12 @@ const useFunctionStore = create<State>()(
           : "";
       },
 
+      setCurrentRequestId: (requestId) => {
+        set((state) => {
+          state.currentRequestId = requestId;
+        });
+      },
+
       setAllFunctionList: (allFunctionList) => {
         set((state) => {
           state.allFunctionList = allFunctionList;