start

y-scope · Nov 28, 2024 · 8ede2ac · 8ede2ac
1 parent 82e677e
commit 8ede2ac
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 7 deletions.
diff --git 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
-        \`{<field-name>[:<formatter-name>[:<formatter-options>]]}\`, 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: (
+            <p>
+                [JSON] Log message format string: The log viewer can format structured
+                (e.g., JSON) logs as plain text using a format string. Please see
+                {" "}
+                <Link
+                    href={"https://docs.yscope.com/yscope-log-viewer/main/user-guide/format-string-overview.html"}
+                    level={"body-sm"}
+                    rel={"noopener noreferrer"}
+                    target={"_blank"}
+                >
+                    documentation
+                </Link>
+                {" "}
+                for format string syntax. Leave format string blank to display the entire log event
+                formatted as JSON.
+            </p>
+        ),
         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
@@ -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<TAB_NAME, string> = Object.freeze({
     [TAB_NAME.NONE]: "None",
+    [TAB_NAME.DOCUMENTATION]: "Documentation",
     [TAB_NAME.FILE_INFO]: "File info",
     [TAB_NAME.SEARCH]: "Search",
     [TAB_NAME.SETTINGS]: "Settings",