From fe2773658ed4a9cf450803193b49733ff466e194 Mon Sep 17 00:00:00 2001 From: newfish-cmyk <1239331448@qq.com> Date: Wed, 17 Jan 2024 16:18:03 +0800 Subject: [PATCH 1/5] feat(web): add logs pause button --- web/public/locales/en/translation.json | 6 +- web/public/locales/zh-CN/translation.json | 5 +- web/public/locales/zh/translation.json | 5 +- web/src/components/CommonIcon/index.tsx | 12 ++++ .../app/mods/StatusBar/LogsModal/index.tsx | 68 +++++++++++++++---- 5 files changed, 80 insertions(+), 16 deletions(-) diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json index a5d9d0c620..cb5a30709c 100644 --- a/web/public/locales/en/translation.json +++ b/web/public/locales/en/translation.json @@ -718,7 +718,10 @@ "Logs": { "PodLogs": "App Instance Logs", "Export": "Export", - "logs": "Logs" + "logs": "Logs", + "PauseRaw": "Pause row", + "ContinueRow": "Continue row", + "ContinueRowandShow": "resume and show {{number}} lines" }, "KeyCannotBeEmpty": "Key can't be empty", "ValueCannotBeEmpty": "Value can't be empty", @@ -754,4 +757,3 @@ "Description": "Click to update" } } - diff --git a/web/public/locales/zh-CN/translation.json b/web/public/locales/zh-CN/translation.json index 46cad40036..4672187b6b 100644 --- a/web/public/locales/zh-CN/translation.json +++ b/web/public/locales/zh-CN/translation.json @@ -718,7 +718,10 @@ "Logs": { "PodLogs": "应用实例日志", "Export": "导出", - "logs": "日志" + "logs": "日志", + "PauseRaw": "暂停滚动", + "ContinueRow": "继续滚动", + "ContinueRowandShow": "恢复并展示最新 {{number}} 行" }, "KeyCannotBeEmpty": "Key 不能为空", "ValueCannotBeEmpty": "Value 不能为空", diff --git a/web/public/locales/zh/translation.json b/web/public/locales/zh/translation.json index 7c0a992cc1..cb6145d047 100644 --- a/web/public/locales/zh/translation.json +++ b/web/public/locales/zh/translation.json @@ -718,7 +718,10 @@ "Logs": { "PodLogs": "应用实例日志", "Export": "导出", - "logs": "日志" + "logs": "日志", + "PauseRaw": "暂停滚动", + "ContinueRow": "继续滚动", + "ContinueRowandShow": "恢复并展示最新 {{number}} 行" }, "KeyCannotBeEmpty": "Key 不能为空", "ValueCannotBeEmpty": "Value 不能为空", diff --git a/web/src/components/CommonIcon/index.tsx b/web/src/components/CommonIcon/index.tsx index 471ee84a28..9cee6346e1 100644 --- a/web/src/components/CommonIcon/index.tsx +++ b/web/src/components/CommonIcon/index.tsx @@ -741,3 +741,15 @@ 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 PauseIcon = createIcon({ + displayName: "PauseIcon", + viewBox: "0 0 1024 1024", + d: "M304 176h80v672h-80zM712 176h-64c-4.4 0-8 3.6-8 8v656c0 4.4 3.6 8 8 8h64c4.4 0 8-3.6 8-8V184c0-4.4-3.6-8-8-8z", +}); + +export const ContinueIcon = createIcon({ + displayName: "ContinueIcon", + viewBox: "0 0 1024 1024", + d: "M104 0v1024l816-512z" +}); diff --git a/web/src/pages/app/mods/StatusBar/LogsModal/index.tsx b/web/src/pages/app/mods/StatusBar/LogsModal/index.tsx index 9dc3d52e18..9b62254972 100644 --- a/web/src/pages/app/mods/StatusBar/LogsModal/index.tsx +++ b/web/src/pages/app/mods/StatusBar/LogsModal/index.tsx @@ -1,5 +1,5 @@ import React, { useCallback, useEffect, useState } from "react"; -import { useTranslation } from "react-i18next"; +import { Trans, useTranslation } from "react-i18next"; import { Button, Center, @@ -25,6 +25,7 @@ import "./index.scss"; import { PodControllerGetContainerNameList, PodControllerGetPodNameList } from "@/apis/v1/apps"; import useCustomSettingStore from "@/pages/customSetting"; import useGlobalStore from "@/pages/globalStore"; +import { ContinueIcon, PauseIcon, RefreshIcon } from "@/components/CommonIcon"; export default function LogsModal(props: { children: React.ReactElement }) { const { children } = props; @@ -38,6 +39,18 @@ export default function LogsModal(props: { children: React.ReactElement }) { const [podName, setPodName] = useState(""); const [containerName, setContainerName] = useState(""); const [isLoading, setIsLoading] = useState(true); + const [rowNumber, setRowNumber] = useState(0); + const [isPaused, setIsPaused] = useState(false); + const [pausedRowNumber, setPausedRowNumber] = useState(0); + + const [renderLogs, setRenderLogs] = useState(""); + const [refresh, setRefresh] = useState(true); + + useEffect(() => { + if (!isPaused) { + setRenderLogs(logs); + } + }, [isPaused, logs]); const { data: podData } = useQuery( ["GetPodQuery"], @@ -90,10 +103,11 @@ export default function LogsModal(props: { children: React.ReactElement }) { ) .join("\n"); + setRowNumber((pre) => pre + logs.length); setLogs((pre) => pre + logStr + "\n"); }, }).catch((e) => { - if (e.includes("BodyStreamBuffer was aborte")) { + if (e.includes("BodyStreamBuffer was aborted")) { return; } throw e; @@ -109,7 +123,7 @@ export default function LogsModal(props: { children: React.ReactElement }) { return () => { controller?.abort(); }; - }, [podName, isOpen, fetchLogs]); + }, [podName, containerName, isOpen, refresh]); return ( <> @@ -167,16 +181,30 @@ export default function LogsModal(props: { children: React.ReactElement }) { )} + + + @@ -187,14 +215,14 @@ export default function LogsModal(props: { children: React.ReactElement }) { ) : (
} /> +
+ {isPaused && ( + + )} +
)} From cbdd1fb18e092c3ced489f586d380e147ea36726 Mon Sep 17 00:00:00 2001 From: newfish-cmyk <1239331448@qq.com> Date: Thu, 18 Jan 2024 12:05:21 +0800 Subject: [PATCH 2/5] change bottom button & add scroll up event --- web/public/locales/en/translation.json | 8 +++---- web/public/locales/zh-CN/translation.json | 8 +++---- web/public/locales/zh/translation.json | 8 +++---- web/src/chakraThemeDark.ts | 2 +- web/src/components/CommonIcon/index.tsx | 19 +++++++++++++++ .../app/mods/StatusBar/LogsModal/index.tsx | 23 +++++++++++++------ 6 files changed, 48 insertions(+), 20 deletions(-) diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json index cb5a30709c..e42f7bbb52 100644 --- a/web/public/locales/en/translation.json +++ b/web/public/locales/en/translation.json @@ -719,9 +719,9 @@ "PodLogs": "App Instance Logs", "Export": "Export", "logs": "Logs", - "PauseRaw": "Pause row", - "ContinueRow": "Continue row", - "ContinueRowandShow": "resume and show {{number}} lines" + "ContinueRowandShow": "resume and show {{number}} lines", + "Pause": "Pause", + "Resume": "Resume" }, "KeyCannotBeEmpty": "Key can't be empty", "ValueCannotBeEmpty": "Value can't be empty", @@ -756,4 +756,4 @@ "Title": "Laf is ready to update!", "Description": "Click to update" } -} +} \ No newline at end of file diff --git a/web/public/locales/zh-CN/translation.json b/web/public/locales/zh-CN/translation.json index 4672187b6b..0cc42844f0 100644 --- a/web/public/locales/zh-CN/translation.json +++ b/web/public/locales/zh-CN/translation.json @@ -719,9 +719,9 @@ "PodLogs": "应用实例日志", "Export": "导出", "logs": "日志", - "PauseRaw": "暂停滚动", - "ContinueRow": "继续滚动", - "ContinueRowandShow": "恢复并展示最新 {{number}} 行" + "ContinueRowandShow": "恢复并展示最新 {{number}} 行", + "Pause": "暂停", + "Resume": "恢复" }, "KeyCannotBeEmpty": "Key 不能为空", "ValueCannotBeEmpty": "Value 不能为空", @@ -756,4 +756,4 @@ "Title": "Laf 新版本已经准备好了！", "Description": "点击立即更新" } -} +} \ No newline at end of file diff --git a/web/public/locales/zh/translation.json b/web/public/locales/zh/translation.json index cb6145d047..e3edcc22a1 100644 --- a/web/public/locales/zh/translation.json +++ b/web/public/locales/zh/translation.json @@ -719,9 +719,9 @@ "PodLogs": "应用实例日志", "Export": "导出", "logs": "日志", - "PauseRaw": "暂停滚动", - "ContinueRow": "继续滚动", - "ContinueRowandShow": "恢复并展示最新 {{number}} 行" + "ContinueRowandShow": "恢复并展示最新 {{number}} 行", + "Pause": "暂停", + "Resume": "恢复" }, "KeyCannotBeEmpty": "Key 不能为空", "ValueCannotBeEmpty": "Value 不能为空", @@ -756,4 +756,4 @@ "Title": "Laf 新版本已经准备好了！", "Description": "点击立即更新" } -} +} \ No newline at end of file diff --git a/web/src/chakraThemeDark.ts b/web/src/chakraThemeDark.ts index 52f2969db5..e87843a883 100644 --- a/web/src/chakraThemeDark.ts +++ b/web/src/chakraThemeDark.ts @@ -127,7 +127,7 @@ const Button = defineStyleConfig({ text: { color: "primary.500", _hover: { - bg: "primary.100", + bg: "primary.900", }, }, diff --git a/web/src/components/CommonIcon/index.tsx b/web/src/components/CommonIcon/index.tsx index 9cee6346e1..afec1eecc2 100644 --- a/web/src/components/CommonIcon/index.tsx +++ b/web/src/components/CommonIcon/index.tsx @@ -753,3 +753,22 @@ export const ContinueIcon = createIcon({ viewBox: "0 0 1024 1024", d: "M104 0v1024l816-512z" }); + +export const DownIcon = (props: any) => { + return ( + + + + + + ); +}; \ No newline at end of file diff --git a/web/src/pages/app/mods/StatusBar/LogsModal/index.tsx b/web/src/pages/app/mods/StatusBar/LogsModal/index.tsx index 9b62254972..d47e8fc4ce 100644 --- a/web/src/pages/app/mods/StatusBar/LogsModal/index.tsx +++ b/web/src/pages/app/mods/StatusBar/LogsModal/index.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useState } from "react"; +import React, { useCallback, useEffect, useRef, useState } from "react"; import { Trans, useTranslation } from "react-i18next"; import { Button, @@ -25,7 +25,7 @@ import "./index.scss"; import { PodControllerGetContainerNameList, PodControllerGetPodNameList } from "@/apis/v1/apps"; import useCustomSettingStore from "@/pages/customSetting"; import useGlobalStore from "@/pages/globalStore"; -import { ContinueIcon, PauseIcon, RefreshIcon } from "@/components/CommonIcon"; +import { ContinueIcon, DownIcon, PauseIcon, RefreshIcon } from "@/components/CommonIcon"; export default function LogsModal(props: { children: React.ReactElement }) { const { children } = props; @@ -125,6 +125,13 @@ export default function LogsModal(props: { children: React.ReactElement }) { }; }, [podName, containerName, isOpen, refresh]); + document.addEventListener('wheel', event => { + if (event.deltaY < 0 && !isPaused) { + setIsPaused(true); + setPausedRowNumber(rowNumber); + } + }); + return ( <> {React.cloneElement(children, { @@ -194,7 +201,7 @@ export default function LogsModal(props: { children: React.ReactElement }) { @@ -221,7 +228,7 @@ export default function LogsModal(props: { children: React.ReactElement }) { @@ -236,8 +243,10 @@ export default function LogsModal(props: { children: React.ReactElement }) {
{isPaused && ( )}
From 0f04b838dd85ac308cceadcc5841597df8dc6ddb Mon Sep 17 00:00:00 2001 From: newfish-cmyk <1239331448@qq.com> Date: Mon, 22 Jan 2024 18:01:02 +0800 Subject: [PATCH 4/5] fix --- web/public/locales/en/translation.json | 7 +- web/public/locales/zh-CN/translation.json | 7 +- web/public/locales/zh/translation.json | 7 +- .../app/mods/StatusBar/LogsModal/index.tsx | 74 +++++++++++-------- 4 files changed, 50 insertions(+), 45 deletions(-) diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json index 501bfca2e4..ee6c2fcaa8 100644 --- a/web/public/locales/en/translation.json +++ b/web/public/locales/en/translation.json @@ -719,10 +719,7 @@ "PodLogs": "App Instance Logs", "Export": "Export", "logs": "Logs", - "ContinueRowandShow": "resume and show {{number}} lines", - "Pause": "Pause", - "Resume": "Resume", - "RowToBottom": "resume and row to bottom" + "RowToBottom": "row to bottom" }, "KeyCannotBeEmpty": "Key can't be empty", "ValueCannotBeEmpty": "Value can't be empty", @@ -757,4 +754,4 @@ "Title": "Laf is ready to update!", "Description": "Click to update" } -} +} \ No newline at end of file diff --git a/web/public/locales/zh-CN/translation.json b/web/public/locales/zh-CN/translation.json index 21809e4d4b..ba2637ad3a 100644 --- a/web/public/locales/zh-CN/translation.json +++ b/web/public/locales/zh-CN/translation.json @@ -719,10 +719,7 @@ "PodLogs": "应用实例日志", "Export": "导出", "logs": "日志", - "ContinueRowandShow": "恢复并展示最新 {{number}} 行", - "Pause": "暂停", - "Resume": "恢复", - "RowToBottom": "恢复并滚动到底部" + "RowToBottom": "滚动到底部" }, "KeyCannotBeEmpty": "Key 不能为空", "ValueCannotBeEmpty": "Value 不能为空", @@ -757,4 +754,4 @@ "Title": "Laf 新版本已经准备好了！", "Description": "点击立即更新" } -} +} \ No newline at end of file diff --git a/web/public/locales/zh/translation.json b/web/public/locales/zh/translation.json index bbb5405a4f..0924257399 100644 --- a/web/public/locales/zh/translation.json +++ b/web/public/locales/zh/translation.json @@ -719,10 +719,7 @@ "PodLogs": "应用实例日志", "Export": "导出", "logs": "日志", - "ContinueRowandShow": "恢复并展示最新 {{number}} 行", - "Pause": "暂停", - "Resume": "恢复", - "RowToBottom": "恢复并滚动到底部" + "RowToBottom": "滚动到底部" }, "KeyCannotBeEmpty": "Key 不能为空", "ValueCannotBeEmpty": "Value 不能为空", @@ -757,4 +754,4 @@ "Title": "Laf 新版本已经准备好了！", "Description": "点击立即更新" } -} +} \ No newline at end of file diff --git a/web/src/pages/app/mods/StatusBar/LogsModal/index.tsx b/web/src/pages/app/mods/StatusBar/LogsModal/index.tsx index 52d791d09b..7c6cb07706 100644 --- a/web/src/pages/app/mods/StatusBar/LogsModal/index.tsx +++ b/web/src/pages/app/mods/StatusBar/LogsModal/index.tsx @@ -1,5 +1,5 @@ import React, { useCallback, useEffect, useRef, useState } from "react"; -import { Trans, useTranslation } from "react-i18next"; +import { useTranslation } from "react-i18next"; import { Button, Center, @@ -12,6 +12,7 @@ import { ModalOverlay, Select, Spinner, + useColorMode, useDisclosure, } from "@chakra-ui/react"; import { LogViewer, LogViewerSearch } from "@patternfly/react-log-viewer"; @@ -25,7 +26,9 @@ import "./index.scss"; import { PodControllerGetContainerNameList, PodControllerGetPodNameList } from "@/apis/v1/apps"; import useCustomSettingStore from "@/pages/customSetting"; import useGlobalStore from "@/pages/globalStore"; -import { ContinueIcon, DownIcon, PauseIcon, RefreshIcon } from "@/components/CommonIcon"; +import { DownIcon, RefreshIcon } from "@/components/CommonIcon"; +import clsx from "clsx"; +import { debounce } from "lodash"; export default function LogsModal(props: { children: React.ReactElement }) { const { children } = props; @@ -46,9 +49,27 @@ export default function LogsModal(props: { children: React.ReactElement }) { const [renderLogs, setRenderLogs] = useState(""); const [refresh, setRefresh] = useState(true); + const logViewerRef = useRef(null); + + const darkMode = useColorMode().colorMode === "dark"; + + useEffect(() => { + const resizeHandler = debounce(() => { + if (!isPaused) { + setRefresh((pre) => !pre); + } + }, 200) + + window.addEventListener("resize", resizeHandler); + + return () => { + window.removeEventListener("resize", resizeHandler); + }; + }, [isPaused]) + useEffect(() => { if (!isPaused) { - setRenderLogs(logs); + setRenderLogs(logs.trim()); } }, [isPaused, logs]); @@ -125,13 +146,6 @@ export default function LogsModal(props: { children: React.ReactElement }) { }; }, [podName, containerName, isOpen, refresh]); - document.addEventListener('wheel', event => { - if (event.deltaY < 0 && !isPaused) { - setIsPaused(true); - setPausedRowNumber(rowNumber); - } - }); - return ( <> {React.cloneElement(children, { @@ -199,19 +213,6 @@ export default function LogsModal(props: { children: React.ReactElement }) { {t("Refresh")} - - - @@ -222,14 +223,26 @@ export default function LogsModal(props: { children: React.ReactElement }) { ) : (
{ + if (e.deltaY < 0 && !isPaused) { + setIsPaused(true); + setPausedRowNumber(rowNumber); + } + }} > { + if (e.scrollOffsetToBottom <= 0) { + setIsPaused(false); + } + }} toolbar={
{isPaused && ( - + + {t("Logs.RowToBottom")} + )}
From 0cd1df21a89fe2796cb0c9a965807a5e6e82635a Mon Sep 17 00:00:00 2001 From: newfish-cmyk <1239331448@qq.com> Date: Tue, 23 Jan 2024 10:25:26 +0800 Subject: [PATCH 5/5] fix --- web/public/locales/en/translation.json | 2 +- web/public/locales/zh-CN/translation.json | 2 +- web/public/locales/zh/translation.json | 2 +- web/src/pages/app/mods/StatusBar/LogsModal/index.tsx | 5 +---- 4 files changed, 4 insertions(+), 7 deletions(-) diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json index ee6c2fcaa8..f8d9383c09 100644 --- a/web/public/locales/en/translation.json +++ b/web/public/locales/en/translation.json @@ -719,7 +719,7 @@ "PodLogs": "App Instance Logs", "Export": "Export", "logs": "Logs", - "RowToBottom": "row to bottom" + "ScrollToBottom": "Scroll to bottom" }, "KeyCannotBeEmpty": "Key can't be empty", "ValueCannotBeEmpty": "Value can't be empty", diff --git a/web/public/locales/zh-CN/translation.json b/web/public/locales/zh-CN/translation.json index ba2637ad3a..db66004443 100644 --- a/web/public/locales/zh-CN/translation.json +++ b/web/public/locales/zh-CN/translation.json @@ -719,7 +719,7 @@ "PodLogs": "应用实例日志", "Export": "导出", "logs": "日志", - "RowToBottom": "滚动到底部" + "ScrollToBottom": "滚动到底部" }, "KeyCannotBeEmpty": "Key 不能为空", "ValueCannotBeEmpty": "Value 不能为空", diff --git a/web/public/locales/zh/translation.json b/web/public/locales/zh/translation.json index 0924257399..4e0e32294d 100644 --- a/web/public/locales/zh/translation.json +++ b/web/public/locales/zh/translation.json @@ -719,7 +719,7 @@ "PodLogs": "应用实例日志", "Export": "导出", "logs": "日志", - "RowToBottom": "滚动到底部" + "ScrollToBottom": "滚动到底部" }, "KeyCannotBeEmpty": "Key 不能为空", "ValueCannotBeEmpty": "Value 不能为空", diff --git a/web/src/pages/app/mods/StatusBar/LogsModal/index.tsx b/web/src/pages/app/mods/StatusBar/LogsModal/index.tsx index 7c6cb07706..af1a14318f 100644 --- a/web/src/pages/app/mods/StatusBar/LogsModal/index.tsx +++ b/web/src/pages/app/mods/StatusBar/LogsModal/index.tsx @@ -49,8 +49,6 @@ export default function LogsModal(props: { children: React.ReactElement }) { const [renderLogs, setRenderLogs] = useState(""); const [refresh, setRefresh] = useState(true); - const logViewerRef = useRef(null); - const darkMode = useColorMode().colorMode === "dark"; useEffect(() => { @@ -234,7 +232,6 @@ export default function LogsModal(props: { children: React.ReactElement }) { > - {t("Logs.RowToBottom")} + {t("Logs.ScrollToBottom")} )}