feat(formatter): Display entire log event as JSON by default and remind users to set format string.

src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx

@@ -1,6 +1,6 @@
 import {
     forwardRef,
-    useState,
+    useContext,
 } from "react";
 
 import {
@@ -13,6 +13,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";
@@ -51,7 +52,7 @@ const SidebarTabs = forwardRef<HTMLDivElement, SidebarTabsProps>((
     },
     tabListRef
 ) => {
-    const [isSettingsModalOpen, setIsSettingsModalOpen] = useState<boolean>(false);
+    const {isSettingsModalOpen, setIsSettingsModalOpen} = useContext(StateContext);
 
     const handleSettingsModalClose = () => {
         setIsSettingsModalOpen(false);

src/components/PopUps/PopUpMessageBox.tsx

@@ -8,6 +8,7 @@ import {
 import {
     Alert,
     Box,
+    Button,
     CircularProgress,
     IconButton,
     Typography,
@@ -38,7 +39,7 @@ interface PopUpMessageProps {
  * @return
  */
 const PopUpMessageBox = ({message}: PopUpMessageProps) => {
-    const {id, level, message: messageStr, title, timeoutMillis} = message;
+    const {id, level, button, message: messageStr, title, timeoutMillis} = message;
 
     const {handlePopUpMessageClose} = useContext(NotificationContext);
     const [percentRemaining, setPercentRemaining] = useState<number>(100);
@@ -113,6 +114,16 @@ const PopUpMessageBox = ({message}: PopUpMessageProps) => {
                 <Typography level={"body-sm"}>
                     {messageStr}
                 </Typography>
+                {button && (
+                    <Button
+                        className={"pop-up-message-box-callback-button"}
+                        color={color}
+                        variant={"soft"}
+                        onClick={button.callback}
+                    >
+                        {button.title}
+                    </Button>
+                )}
             </div>
         </Alert>
     );

src/components/PopUps/index.css

@@ -30,6 +30,10 @@
     width: 300px;
 }
 
+.pop-up-message-box-callback-button {
+    margin-top: 10px !important;
+}
+
 .pop-up-message-box-title-container {
     display: flex;
     align-items: center;

src/components/modals/SettingsModal/SettingsDialog.tsx

@@ -38,7 +38,8 @@ const CONFIG_FORM_FIELDS = [
         \`{<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}\`.`,
+        \`{@timestamp:timestamp:YYYY-MM-DD HH\\:mm\\:ss.SSS}\`. The default setting is
+        an empty string which will print all fields formatted as JSON.`,
         initialValue: getConfig(CONFIG_KEY.DECODER_OPTIONS).formatString,
         label: "Decoder: Format string",
         name: LOCAL_STORAGE_KEY.DECODER_OPTIONS_FORMAT_STRING,

src/contexts/StateContextProvider.tsx

@@ -14,7 +14,10 @@ import LogExportManager, {
 } from "../services/LogExportManager";
 import {Nullable} from "../typings/common";
 import {CONFIG_KEY} from "../typings/config";
-import {LogLevelFilter} from "../typings/logs";
+import {
+    LOG_LEVEL,
+    LogLevelFilter,
+} from "../typings/logs";
 import {DEFAULT_AUTO_DISMISS_TIMEOUT_MILLIS} from "../typings/notifications";
 import {UI_STATE} from "../typings/states";
 import {SEARCH_PARAM_NAMES} from "../typings/url";
@@ -36,6 +39,7 @@ import {
     NavigationAction,
 } from "../utils/actions";
 import {
+    CONFIG_DEFAULT,
     EXPORT_LOGS_CHUNK_SIZE,
     getConfig,
 } from "../utils/config";
@@ -56,8 +60,9 @@ import {
 
 interface StateContextType {
     beginLineNumToLogEventNum: BeginLineNumToLogEventNumMap,
-    fileName: string,
     exportProgress: Nullable<number>,
+    fileName: string,
+    isSettingsModalOpen: boolean,
     uiState: UI_STATE,
     logData: string,
     numEvents: number,
@@ -70,6 +75,7 @@ interface StateContextType {
     exportLogs: () => void,
     loadFile: (fileSrc: FileSrcType, cursor: CursorType) => void,
     loadPageByAction: (navAction: NavigationAction) => void,
+    setIsSettingsModalOpen: (isOpen: boolean) => void,
     setLogLevelFilter: (newLogLevelFilter: LogLevelFilter) => void,
     startQuery: (queryString: string, isRegex: boolean, isCaseSensitive: boolean) => void,
 }
@@ -82,6 +88,7 @@ const STATE_DEFAULT: Readonly<StateContextType> = Object.freeze({
     beginLineNumToLogEventNum: new Map<number, number>(),
     exportProgress: null,
     fileName: "",
+    isSettingsModalOpen: false,
     logData: "No file is open.",
     numEvents: 0,
     numPages: 0,
@@ -94,6 +101,7 @@ const STATE_DEFAULT: Readonly<StateContextType> = Object.freeze({
     exportLogs: () => null,
     loadFile: () => null,
     loadPageByAction: () => null,
+    setIsSettingsModalOpen: () => null,
     setLogLevelFilter: () => null,
     startQuery: () => null,
 });
@@ -236,6 +244,8 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
     // States
     const [exportProgress, setExportProgress] =
         useState<Nullable<number>>(STATE_DEFAULT.exportProgress);
+    const [isSettingsModalOpen, setIsSettingsModalOpen] =
+        useState<boolean>(STATE_DEFAULT.isSettingsModalOpen);
     const [fileName, setFileName] = useState<string>(STATE_DEFAULT.fileName);
     const [logData, setLogData] = useState<string>(STATE_DEFAULT.logData);
     const [numEvents, setNumEvents] = useState<number>(STATE_DEFAULT.numEvents);
@@ -274,6 +284,20 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
                 setFileName(args.fileName);
                 setNumEvents(args.numEvents);
                 setOnDiskFileSizeInBytes(args.onDiskFileSizeInBytes);
+                if (getConfig(CONFIG_KEY.DECODER_OPTIONS).formatString ===
+                    CONFIG_DEFAULT[CONFIG_KEY.DECODER_OPTIONS].formatString) {
+                    postPopUp({
+                        button: {
+                            title: "Open Settings",
+                            callback: () => { setIsSettingsModalOpen(true); },
+                        },
+                        level: LOG_LEVEL.INFO,
+                        message: "Input a custom format string in settings dialog" +
+                        " to improve readability of JSON logs",
+                        timeoutMillis: 2 * DEFAULT_AUTO_DISMISS_TIMEOUT_MILLIS,
+                        title: "Format JSON Logs",
+                    });
+                }
                 break;
             case WORKER_RESP_CODE.NOTIFICATION:
                 postPopUp({
@@ -510,6 +534,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
                 beginLineNumToLogEventNum: beginLineNumToLogEventNumRef.current,
                 exportProgress: exportProgress,
                 fileName: fileName,
+                isSettingsModalOpen: isSettingsModalOpen,
                 logData: logData,
                 numEvents: numEvents,
                 numPages: numPages,
@@ -522,6 +547,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
                 exportLogs: exportLogs,
                 loadFile: loadFile,
                 loadPageByAction: loadPageByAction,
+                setIsSettingsModalOpen: setIsSettingsModalOpen,
                 setLogLevelFilter: setLogLevelFilter,
                 startQuery: startQuery,
             }}

src/services/formatters/YscopeFormatter/index.ts

@@ -10,6 +10,7 @@ import {
 import {LogEvent} from "../../../typings/logs";
 import {
     getFormattedField,
+    jsonValueToString,
     removeEscapeCharacters,
     replaceDoubleBacklash,
     splitFieldPlaceholder,
@@ -37,6 +38,11 @@ class YscopeFormatter implements Formatter {
     }
 
     formatLogEvent (logEvent: LogEvent): string {
+        // Empty format string is special case where formatter returns all fields as JSON.
+        if ("" === this.#processedFormatString) {
+            return jsonValueToString(logEvent.fields);
+        }
+
         const formattedLogFragments: string[] = [];
         let lastIndex = 0;
 

src/typings/notifications.ts

@@ -1,6 +1,14 @@
 import {LOG_LEVEL} from "./logs";
 
 
+/**
+ * Optional button for pop-up.
+ */
+type PopUpButton = {
+    title: string,
+    callback: () => void,
+}
+
 /**
  * Contents of pop-up messages and its associated auto dismiss timeout.
  */
@@ -9,6 +17,7 @@ interface PopUpMessage {
     message: string,
     timeoutMillis: number,
     title: string,
+    button?: PopUpButton,
 }
 
 /**

src/utils/config.ts

@@ -19,8 +19,7 @@ const QUERY_CHUNK_SIZE = 10_000;
  */
 const CONFIG_DEFAULT: ConfigMap = Object.freeze({
     [CONFIG_KEY.DECODER_OPTIONS]: {
-        formatString: "{@timestamp:timestamp:YYYY-MM-DD HH\\:mm\\:ss.SSS}" +
-        " {log\\.level} [{process\\.thread\\.name}] {message}",
+        formatString: "",
         logLevelKey: "log.level",
         timestampKey: "@timestamp",
     },
@@ -42,8 +41,10 @@ const testConfig = ({key, value}: ConfigUpdate): Nullable<string> => {
     let result = null;
     switch (key) {
         case CONFIG_KEY.DECODER_OPTIONS:
-            if (Object.values(value).includes("")) {
-                result = "Decoder options cannot be empty.";
+            if ("" === value.timestampKey) {
+                result = "Timestamp key cannot be empty.";
+            } else if ("" === value.logLevelKey) {
+                result = "Log level key cannot be empty.";
             }
             break;
         case CONFIG_KEY.INITIAL_TAB_NAME: