refactor(web): change old logs position (labring#1661)

HUAHUAI23 · Nov 9, 2023 · ff670f8 · ff670f8
1 parent 4afea1e
commit ff670f8
Show file tree

Hide file tree

Showing 10 changed files with 50 additions and 35 deletions.
diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json
@@ -230,7 +230,8 @@
     "EditorFont": "Editor Font",
     "FontSize": "Font Size",
     "FuncListDisplay": "Function List Display",
-    "ListDisplay": "List Display"
+    "ListDisplay": "List Display",
+    "OldLogs": "Old Logs"
   },
   "StoragePanel": {
     "All": "Total Capacity",
@@ -687,5 +688,6 @@
     "PodLogs": "App Instance Logs",
     "Export": "Export",
     "logs": "Logs"
-  }
+  },
+  "Deprecated": "Deprecated"
 }
diff --git a/web/public/locales/zh-CN/translation.json b/web/public/locales/zh-CN/translation.json
@@ -230,7 +230,8 @@
     "EditorFont": "编辑器字体",
     "FontSize": "字体大小",
     "FuncListDisplay": "函数列表显示",
-    "ListDisplay": "列表显示"
+    "ListDisplay": "列表显示",
+    "OldLogs": "旧版日志"
   },
   "StoragePanel": {
     "All": "总容量",
@@ -687,5 +688,6 @@
     "PodLogs": "应用实例日志",
     "Export": "导出",
     "logs": "日志"
-  }
+  },
+  "Deprecated": "已弃用"
 }
diff --git a/web/public/locales/zh/translation.json b/web/public/locales/zh/translation.json
@@ -230,7 +230,8 @@
     "EditorFont": "编辑器字体",
     "FontSize": "字体大小",
     "FuncListDisplay": "函数列表显示",
-    "ListDisplay": "列表显示"
+    "ListDisplay": "列表显示",
+    "OldLogs": "旧版日志"
   },
   "StoragePanel": {
     "All": "总容量",
@@ -687,5 +688,6 @@
     "PodLogs": "应用实例日志",
     "Export": "导出",
     "logs": "日志"
-  }
+  },
+  "Deprecated": "已弃用"
 }
diff --git a/web/src/components/CommonIcon/index.tsx b/web/src/components/CommonIcon/index.tsx
@@ -741,3 +741,23 @@ export const CommonSettingIcon = createIcon({
   viewBox: "0 0 16 16",
   d: "M1.5 4.54688C1.5 4.38526 1.5642 4.23026 1.67848 4.11598C1.79276 4.0017 1.94776 3.9375 2.10938 3.9375H13.8906C14.0522 3.9375 14.2072 4.0017 14.3215 4.11598C14.4358 4.23026 14.5 4.38526 14.5 4.54688C14.5 4.70849 14.4358 4.86349 14.3215 4.97777C14.2072 5.09205 14.0522 5.15625 13.8906 5.15625H2.10938C1.94776 5.15625 1.79276 5.09205 1.67848 4.97777C1.5642 4.86349 1.5 4.70849 1.5 4.54688ZM1.5 8C1.5 7.83838 1.5642 7.68339 1.67848 7.56911C1.79276 7.45483 1.94776 7.39062 2.10938 7.39062H13.8906C14.0522 7.39062 14.2072 7.45483 14.3215 7.56911C14.4358 7.68339 14.5 7.83838 14.5 8C14.5 8.16162 14.4358 8.31661 14.3215 8.43089C14.2072 8.54517 14.0522 8.60938 13.8906 8.60938H2.10938C1.94776 8.60938 1.79276 8.54517 1.67848 8.43089C1.5642 8.31661 1.5 8.16162 1.5 8ZM2.10938 10.8438C1.94776 10.8438 1.79276 10.908 1.67848 11.0222C1.5642 11.1365 1.5 11.2915 1.5 11.4531C1.5 11.6147 1.5642 11.7697 1.67848 11.884C1.79276 11.9983 1.94776 12.0625 2.10938 12.0625H9.82812C9.98974 12.0625 10.1447 11.9983 10.259 11.884C10.3733 11.7697 10.4375 11.6147 10.4375 11.4531C10.4375 11.2915 10.3733 11.1365 10.259 11.0222C10.1447 10.908 9.98974 10.8438 9.82812 10.8438H2.10938Z",
 });
+
+export const OldLogsIcon = () => {
+  return (
+    <svg
+      viewBox="0 0 1024 1024"
+      xmlns="http://www.w3.org/2000/svg"
+      width="16px"
+      height="14px"
+    >
+      <path
+        d="M984.423317 1024H39.576683v-887.736753h270.458004v78.333313H117.909996v731.070127h788.180008v-731.070127H713.965313v-78.333313h270.458004v887.736753z"
+      />
+      <path
+        d="M730.170517 279.466335h-436.341034V70.916128h162.064281v78.333313h-83.730968v51.883581h279.674408v-51.883581h-82.923156v-78.333313h161.256469v208.550207z"
+      />
+      <path d="M647.320799 135.320799h-78.333313a56.999725 56.999725 0 0 0-113.987211 0h-78.333313a135.333038 135.333038 0 0 1 270.653837 0zM255.076524 426.475933l256.710507-1.20927 0.369636 78.333313-256.710508 1.209271zM253.36543 654.952177h511.589974v78.333314H253.36543z"
+      />
+    </svg>
+  )
+}
diff --git a/web/src/constants/index.ts b/web/src/constants/index.ts
@@ -9,7 +9,6 @@ export const Pages = {
   function: "function",
   storage: "storage",
   database: "database",
-  logs: "logs",
   setting: "setting",
   userSetting: "userSetting",
 };
@@ -97,4 +96,5 @@ export enum APP_SETTING_KEY {
   MONITOR = "monitor",
   DOMAIN = "domain",
   COMMON = "common",
+  OLD_LOGS = "oldLogs",
 }
diff --git a/web/src/pages/app/logs/index.tsx b/web/src/pages/app/logs/index.tsx
@@ -21,7 +21,6 @@ import {
 import { useQuery } from "@tanstack/react-query";
 
 import { RefreshIcon } from "@/components/CommonIcon";
-import Content from "@/components/Content";
 import CopyText from "@/components/CopyText";
 import JSONViewer from "@/components/Editor/JSONViewer";
 import EmptyBox from "@/components/EmptyBox";
@@ -30,8 +29,6 @@ import Panel from "@/components/Panel";
 import { formatDate } from "@/utils/format";
 import getPageInfo from "@/utils/getPageInfo";
 
-import StatusBar from "../mods/StatusBar";
-
 import { queryKeys } from "./service";
 
 import styles from "./index.module.scss";
@@ -85,7 +82,7 @@ export default function LogsPage() {
   };
 
   return (
-    <Content>
+    <div className="h-[80vh]">
       <Panel className="h-[98%]">
         <form
           onSubmit={(event) => {
@@ -95,7 +92,7 @@ export default function LogsPage() {
         >
           <Panel.Header className="my-2">
             <HStack spacing={2}>
-              <InputGroup width={300}>
+              <InputGroup width={200}>
                 <Input
                   borderRadius="4"
                   size="sm"
@@ -105,7 +102,7 @@ export default function LogsPage() {
               </InputGroup>
 
               <Input
-                width={200}
+                width={120}
                 size="sm"
                 placeholder={t("FunctionPanel.FunctionName").toString()}
                 {...register("functionName")}
@@ -220,7 +217,6 @@ export default function LogsPage() {
           </ModalContent>
         </Modal>
       </Panel>
-      <StatusBar />
-    </Content>
+    </div>
   );
 }
diff --git a/web/src/pages/app/mods/SideBar/Icons.tsx b/web/src/pages/app/mods/SideBar/Icons.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Icon } from "@chakra-ui/react";
 
-function Icons(props: { type: "function" | "database" | "storage" | "logs" | "setting" | "info" }) {
+function Icons(props: { type: "function" | "database" | "storage" | "setting" | "info" }) {
   const { type } = props;
   switch (type) {
     case "function":
@@ -25,20 +25,6 @@ function Icons(props: { type: "function" | "database" | "storage" | "logs" | "se
         </Icon>
       );
 
-    case "logs":
-      return (
-        <Icon
-          width="28px"
-          height="28px"
-          viewBox="0 0 28 28"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path d="M22.1667 5.83333V22.1667H5.83333V5.83333H22.1667ZM22.1667 3.5H5.83333C4.55 3.5 3.5 4.55 3.5 5.83333V22.1667C3.5 23.45 4.55 24.5 5.83333 24.5H22.1667C23.45 24.5 24.5 23.45 24.5 22.1667V5.83333C24.5 4.55 23.45 3.5 22.1667 3.5Z" />
-          <path d="M16.3333 19.8334H8.16666V17.5001H16.3333V19.8334ZM19.8333 15.1667H8.16666V12.8334H19.8333V15.1667ZM19.8333 10.5001H8.16666V8.16675H19.8333V10.5001Z" />
-        </Icon>
-      );
-
     case "setting":
       return (
         <Icon

diff --git a/web/src/pages/app/mods/SideBar/index.tsx b/web/src/pages/app/mods/SideBar/index.tsx
@@ -55,11 +55,6 @@ export default function SideBar() {
       name: String(t("StoragePanel.Storage")),
       icon: <Icons type="storage" />,
     },
-    {
-      pageId: Pages.logs,
-      name: String(t("LogPanel.Log")),
-      icon: <Icons type="logs" />,
-    },
   ];
 
   const BOTTOM_ICONS: TIcon[] = [

diff --git a/web/src/pages/app/setting/SysSetting/index.tsx b/web/src/pages/app/setting/SysSetting/index.tsx
@@ -6,10 +6,13 @@ import {
   DomainIcon,
   ENVIcon,
   MonitorIcon,
+  OldLogsIcon,
   TextIcon,
 } from "@/components/CommonIcon";
 import { APP_SETTING_KEY } from "@/constants";
 
+import LogsPage from "../../logs";
+
 import AppEnvList from "./AppEnvList";
 import AppInfoList from "./AppInfoList";
 import AppMonitor from "./AppMonitor";
@@ -56,6 +59,13 @@ export default function SysSetting(props: {
               component: <CustomDomain />,
               icon: <DomainIcon boxSize={4} />,
             },
+            {
+              key: APP_SETTING_KEY.OLD_LOGS,
+              name: t("SettingPanel.OldLogs"),
+              component: <LogsPage />,
+              icon: <OldLogsIcon />,
+              status: t("Deprecated")
+            },
           ],
         },
         {

diff --git a/web/src/pages/app/setting/index.tsx b/web/src/pages/app/setting/index.tsx
@@ -23,6 +23,7 @@ export type TTabItem = {
   name: string;
   component: React.ReactElement;
   icon: React.ReactElement;
+  status?: string | null;
 };
 
 export type TTabMatch = {
@@ -118,6 +119,7 @@ const SettingModal = (props: {
                               <span className="flex">
                                 <span className="flex items-center pr-2 ">{tab.icon}</span>
                                 {tab.name}
+                                {tab?.status && <span className="border rounded-full px-1 text-red-300 border-red-300 scale-75 ml-4">{tab.status}</span>}
                               </span>
                             </SectionList.Item>
                           );