From 8ede2ac99fe8cfd9ae5ce5ad2c46378532ccc509 Mon Sep 17 00:00:00 2001 From: Dave Marco Date: Thu, 28 Nov 2024 02:36:10 +0000 Subject: [PATCH 1/7] start --- .../modals/SettingsModal/SettingsDialog.tsx | 26 ++++++++++++++----- src/typings/tab.ts | 2 ++ 2 files changed, 21 insertions(+), 7 deletions(-) diff --git a/src/components/modals/SettingsModal/SettingsDialog.tsx b/src/components/modals/SettingsModal/SettingsDialog.tsx index be49765f..ca0a8a9f 100644 --- a/src/components/modals/SettingsModal/SettingsDialog.tsx +++ b/src/components/modals/SettingsModal/SettingsDialog.tsx @@ -13,6 +13,7 @@ import { FormHelperText, FormLabel, Input, + Link, ModalDialog, } from "@mui/joy"; @@ -33,13 +34,24 @@ import ThemeSwitchToggle from "./ThemeSwitchToggle"; const CONFIG_FORM_FIELDS = [ { - helperText: `[JSON] Log message conversion pattern: use field placeholders to insert - values from JSON log events. The syntax is - \`{[:[:]]}\`, where \`field-name\` is - required, while \`formatter-name\` and \`formatter-options\` are optional. For example, - the following placeholder would format a timestamp field with name \`@timestamp\`: - \`{@timestamp:timestamp:YYYY-MM-DD HH\\:mm\\:ss.SSS}\`. Leave format string blank to - display the entire log event formatted as JSON.`, + helperText: ( +

+ [JSON] Log message format string: The log viewer can format structured + (e.g., JSON) logs as plain text using a format string. Please see + {" "} + + documentation + + {" "} + for format string syntax. Leave format string blank to display the entire log event + formatted as JSON. +

+ ), initialValue: getConfig(CONFIG_KEY.DECODER_OPTIONS).formatString, label: "Decoder: Format string", name: LOCAL_STORAGE_KEY.DECODER_OPTIONS_FORMAT_STRING, diff --git a/src/typings/tab.ts b/src/typings/tab.ts index 8f4ba857..d4e80d98 100644 --- a/src/typings/tab.ts +++ b/src/typings/tab.ts @@ -1,5 +1,6 @@ enum TAB_NAME { NONE = "none", + DOCUMENTATION = "documentation", FILE_INFO = "fileInfo", SEARCH = "search", SETTINGS = "settings", @@ -10,6 +11,7 @@ enum TAB_NAME { */ const TAB_DISPLAY_NAMES: Record = Object.freeze({ [TAB_NAME.NONE]: "None", + [TAB_NAME.DOCUMENTATION]: "Documentation", [TAB_NAME.FILE_INFO]: "File info", [TAB_NAME.SEARCH]: "Search", [TAB_NAME.SETTINGS]: "Settings", From 2856d1b4e92f46fe9707f75f4e18e4294e244328 Mon Sep 17 00:00:00 2001 From: Dave Marco Date: Thu, 28 Nov 2024 02:36:45 +0000 Subject: [PATCH 2/7] more --- .../Sidebar/SidebarTabs/index.tsx | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx index 90b3c93e..ea512217 100644 --- a/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx +++ b/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx @@ -1,6 +1,6 @@ import { forwardRef, - useContext, + useState, } from "react"; import { @@ -9,11 +9,11 @@ import { } from "@mui/joy"; import SvgIcon from "@mui/material/SvgIcon"; +import HelpOutlineIcon from "@mui/icons-material/HelpOutline"; import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined"; import SearchIcon from "@mui/icons-material/Search"; import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined"; -import {StateContext} from "../../../../contexts/StateContextProvider"; import {TAB_NAME} from "../../../../typings/tab"; import SettingsModal from "../../../modals/SettingsModal"; import FileInfoTabPanel from "./FileInfoTabPanel"; @@ -23,6 +23,8 @@ import TabButton from "./TabButton"; import "./index.css"; +const DOCUMENTATION_URL = "https://docs.yscope.com/yscope-log-viewer/main/user-guide/index.html"; + /** * Lists information for each tab. */ @@ -52,7 +54,7 @@ const SidebarTabs = forwardRef(( }, tabListRef ) => { - const {isSettingsModalOpen, setIsSettingsModalOpen} = useContext(StateContext); + const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false); const handleSettingsModalClose = () => { setIsSettingsModalOpen(false); @@ -63,6 +65,9 @@ const SidebarTabs = forwardRef(( case TAB_NAME.SETTINGS: setIsSettingsModalOpen(true); break; + case TAB_NAME.DOCUMENTATION: + window.open(DOCUMENTATION_URL, "_blank"); + break; default: onActiveTabNameChange(tabName); } @@ -88,9 +93,14 @@ const SidebarTabs = forwardRef(( onTabButtonClick={handleTabButtonClick}/> ))} - {/* Forces the settings tab to bottom of sidebar. */} + {/* Forces the settings and help tab to bottom of sidebar. */}
+ + Date: Thu, 28 Nov 2024 02:40:30 +0000 Subject: [PATCH 3/7] fix weird revert --- .../CentralContainer/Sidebar/SidebarTabs/index.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx index ea512217..eac28f04 100644 --- a/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx +++ b/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx @@ -1,6 +1,6 @@ import { forwardRef, - useState, + useContext, } from "react"; import { @@ -14,6 +14,7 @@ import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined"; import SearchIcon from "@mui/icons-material/Search"; import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined"; +import {StateContext} from "../../../../contexts/StateContextProvider"; import {TAB_NAME} from "../../../../typings/tab"; import SettingsModal from "../../../modals/SettingsModal"; import FileInfoTabPanel from "./FileInfoTabPanel"; @@ -54,7 +55,7 @@ const SidebarTabs = forwardRef(( }, tabListRef ) => { - const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false); + const {isSettingsModalOpen, setIsSettingsModalOpen} = useContext(StateContext); const handleSettingsModalClose = () => { setIsSettingsModalOpen(false); From 1fc7f32e5d3ea7efd2ce040dcfb35cf4a504cb2a Mon Sep 17 00:00:00 2001 From: davemarco <83603688+davemarco@users.noreply.github.com> Date: Thu, 28 Nov 2024 14:21:51 -0500 Subject: [PATCH 4/7] Apply suggestions from code review Co-authored-by: kirkrodrigues <2454684+kirkrodrigues@users.noreply.github.com> --- .../CentralContainer/Sidebar/SidebarTabs/index.tsx | 2 +- src/components/modals/SettingsModal/SettingsDialog.tsx | 8 +++----- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx index eac28f04..6acf5bc8 100644 --- a/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx +++ b/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx @@ -94,7 +94,7 @@ const SidebarTabs = forwardRef(( onTabButtonClick={handleTabButtonClick}/> ))} - {/* Forces the settings and help tab to bottom of sidebar. */} + {/* Forces the help and settings tabs to the bottom of the sidebar. */}
- [JSON] Log message format string: The log viewer can format structured - (e.g., JSON) logs as plain text using a format string. Please see + [JSON] Format string for formatting a JSON log event as plain text. See the {" "} - documentation + format string syntax docs {" "} - for format string syntax. Leave format string blank to display the entire log event - formatted as JSON. + or leave this blank to display the entire log event.

), initialValue: getConfig(CONFIG_KEY.DECODER_OPTIONS).formatString, From acee3c3a1108be8e3b9f80bb2238f7dd25921ae5 Mon Sep 17 00:00:00 2001 From: Dave Marco Date: Thu, 28 Nov 2024 19:25:42 +0000 Subject: [PATCH 5/7] kirk review --- src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx index 6acf5bc8..6600ad15 100644 --- a/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx +++ b/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx @@ -67,7 +67,7 @@ const SidebarTabs = forwardRef(( setIsSettingsModalOpen(true); break; case TAB_NAME.DOCUMENTATION: - window.open(DOCUMENTATION_URL, "_blank"); + window.open(DOCUMENTATION_URL, "_blank", "noopener,noreferrer"); break; default: onActiveTabNameChange(tabName); From 53491e785731840fd3c92e77ed685a64be67e06c Mon Sep 17 00:00:00 2001 From: Dave Marco Date: Thu, 28 Nov 2024 20:02:38 +0000 Subject: [PATCH 6/7] kirk review --- src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx | 2 +- src/components/modals/SettingsModal/SettingsDialog.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx index 6600ad15..31ebdccb 100644 --- a/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx +++ b/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx @@ -67,7 +67,7 @@ const SidebarTabs = forwardRef(( setIsSettingsModalOpen(true); break; case TAB_NAME.DOCUMENTATION: - window.open(DOCUMENTATION_URL, "_blank", "noopener,noreferrer"); + window.open(DOCUMENTATION_URL, "_blank", "noopener"); break; default: onActiveTabNameChange(tabName); diff --git a/src/components/modals/SettingsModal/SettingsDialog.tsx b/src/components/modals/SettingsModal/SettingsDialog.tsx index d546d639..4d8a9532 100644 --- a/src/components/modals/SettingsModal/SettingsDialog.tsx +++ b/src/components/modals/SettingsModal/SettingsDialog.tsx @@ -39,9 +39,9 @@ const CONFIG_FORM_FIELDS = [ [JSON] Format string for formatting a JSON log event as plain text. See the {" "} format string syntax docs From 98bad5949b88690507d7cbb1c35099705eff00b1 Mon Sep 17 00:00:00 2001 From: Dave Marco Date: Thu, 28 Nov 2024 21:38:35 +0000 Subject: [PATCH 7/7] junhao review --- .../CentralContainer/Sidebar/SidebarTabs/index.tsx | 3 ++- src/utils/url.ts | 9 +++++++++ 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx index 31ebdccb..edf639e6 100644 --- a/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx +++ b/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx @@ -16,6 +16,7 @@ import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined"; import {StateContext} from "../../../../contexts/StateContextProvider"; import {TAB_NAME} from "../../../../typings/tab"; +import {openInNewTab} from "../../../../utils/url"; import SettingsModal from "../../../modals/SettingsModal"; import FileInfoTabPanel from "./FileInfoTabPanel"; import SearchTabPanel from "./SearchTabPanel"; @@ -67,7 +68,7 @@ const SidebarTabs = forwardRef(( setIsSettingsModalOpen(true); break; case TAB_NAME.DOCUMENTATION: - window.open(DOCUMENTATION_URL, "_blank", "noopener"); + openInNewTab(DOCUMENTATION_URL); break; default: onActiveTabNameChange(tabName); diff --git a/src/utils/url.ts b/src/utils/url.ts index 5b69c27d..2ec419a9 100644 --- a/src/utils/url.ts +++ b/src/utils/url.ts @@ -44,8 +44,17 @@ const getBasenameFromUrlOrDefault = ( return basename; }; +/** + * Opens a given URL in a new browser tab. + * + * @param url + */ +const openInNewTab = (url: string): void => { + window.open(url, "_blank", "noopener"); +}; export { getAbsoluteUrl, getBasenameFromUrlOrDefault, + openInNewTab, };