-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+ Status message
+
+
+
+
);
};
From d27c65cb9ed099bbe137f418d022bb7e31aa7add Mon Sep 17 00:00:00 2001
From: Henry <50559854+Henry8192@users.noreply.github.com>
Date: Fri, 6 Sep 2024 18:39:21 -0400
Subject: [PATCH 24/66] Extract MenuBar & StatusBar out of Layout
---
new-log-viewer/src/components/Layout.css | 7 +-
new-log-viewer/src/components/Layout.tsx | 264 ++------------------
new-log-viewer/src/components/MenuBar.tsx | 224 +++++++++++++++++
new-log-viewer/src/components/StatusBar.tsx | 38 +++
4 files changed, 285 insertions(+), 248 deletions(-)
create mode 100644 new-log-viewer/src/components/MenuBar.tsx
create mode 100644 new-log-viewer/src/components/StatusBar.tsx
diff --git a/new-log-viewer/src/components/Layout.css b/new-log-viewer/src/components/Layout.css
index 01044f9a..f4f58c9c 100644
--- a/new-log-viewer/src/components/Layout.css
+++ b/new-log-viewer/src/components/Layout.css
@@ -5,7 +5,6 @@
.menu-bar {
display: flex;
flex-direction: row;
- height: 32px;
align-items: center;
}
@@ -17,7 +16,6 @@
align-items: center;
bottom: 0;
display: flex;
- height: 30px;
position: absolute;
width: 100%;
}
@@ -29,3 +27,8 @@
.status-button {
min-height: 0;
}
+
+:root {
+ --status-bar-height: 32px;
+ --menu-bar-height: 32px;
+}
diff --git a/new-log-viewer/src/components/Layout.tsx b/new-log-viewer/src/components/Layout.tsx
index 5609a314..cf3b6acf 100644
--- a/new-log-viewer/src/components/Layout.tsx
+++ b/new-log-viewer/src/components/Layout.tsx
@@ -1,245 +1,36 @@
-import React, {
+import {
useCallback,
useContext,
useEffect,
useRef,
- useState,
} from "react";
import * as monaco from "monaco-editor";
-import {
- Button,
- DialogContent,
- DialogTitle,
- IconButton,
- Modal,
- ModalDialog,
- Sheet,
- ToggleButtonGroup,
- Typography,
- useColorScheme,
-} from "@mui/joy";
import {CssVarsProvider} from "@mui/joy/styles";
-import type {Mode} from "@mui/system/cssVars/useCurrentColorScheme";
-
-import {SvgIconComponent} from "@mui/icons-material";
-import DarkMode from "@mui/icons-material/DarkMode";
-import Description from "@mui/icons-material/Description";
-import FileOpenIcon from "@mui/icons-material/FileOpen";
-import LightMode from "@mui/icons-material/LightMode";
-import NavigateBefore from "@mui/icons-material/NavigateBefore";
-import NavigateNext from "@mui/icons-material/NavigateNext";
-import Settings from "@mui/icons-material/Settings";
-import SettingsBrightnessIcon from "@mui/icons-material/SettingsBrightness";
-import SkipNext from "@mui/icons-material/SkipNext";
-import SkipPrevious from "@mui/icons-material/SkipPrevious";
-import TipsAndUpdates from "@mui/icons-material/TipsAndUpdates";
import {StateContext} from "../contexts/StateContextProvider";
import {
copyPermalinkToClipboard,
- updateWindowUrlHashParams,
UrlContext,
} from "../contexts/UrlContextProvider";
import {Nullable} from "../typings/common";
-import {
- CONFIG_KEY,
- THEME_NAME,
-} from "../typings/config";
-import {CURSOR_CODE} from "../typings/worker";
+import {CONFIG_KEY} from "../typings/config";
import {ACTION_NAME} from "../utils/actions";
-import {
- CONFIG_DEFAULT,
- getConfig,
-} from "../utils/config";
-import {openFile} from "../utils/file";
-import {
- getFirstItemNumInNextChunk,
- getLastItemNumInPrevChunk,
-} from "../utils/math";
+import {CONFIG_DEFAULT} from "../utils/config";
import monacoTheme from "../utils/theme";
-import ConfigForm from "./ConfigForm";
import DropFileContainer from "./DropFileContainer";
import Editor from "./Editor";
import {goToPositionAndCenter} from "./Editor/MonacoInstance/utils";
+import {
+ handleAction,
+ MenuBar,
+} from "./MenuBar";
+import {StatusBar} from "./StatusBar";
import "./Layout.css";
-/**
- *
- * @param actionName
- * @param logEventNum
- * @param numEvents
- */
-const handleAction = (actionName: ACTION_NAME, logEventNum: number, numEvents: number) => {
- const pageSize = getConfig(CONFIG_KEY.PAGE_SIZE);
- switch (actionName) {
- case ACTION_NAME.FIRST_PAGE:
- updateWindowUrlHashParams({logEventNum: 1});
- break;
- case ACTION_NAME.PREV_PAGE:
- updateWindowUrlHashParams({
- logEventNum: getLastItemNumInPrevChunk(logEventNum, pageSize),
- });
- break;
- case ACTION_NAME.NEXT_PAGE:
- updateWindowUrlHashParams({
- logEventNum: getFirstItemNumInNextChunk(logEventNum, pageSize),
- });
- break;
- case ACTION_NAME.LAST_PAGE:
- updateWindowUrlHashParams({logEventNum: numEvents});
- break;
- default:
- break;
- }
-};
-
-/**
- *
- */
-const MenuBar = () => {
- const {setMode, mode} = useColorScheme();
- const {logEventNum} = useContext(UrlContext);
- const {fileName, loadFile, numEvents} = useContext(StateContext);
-
- const [settingsModelOpen, setSettingsModelOpen] = useState
(false);
-
- const handleNavButtonClick = (event: React.MouseEvent) => {
- if (null === logEventNum) {
- return;
- }
- const {actionName} = event.currentTarget.dataset as {actionName: ACTION_NAME};
- if (Object.values(ACTION_NAME).includes(actionName)) {
- handleAction(actionName, logEventNum, numEvents);
- }
- };
-
- const handleOpenFileButtonClick = () => {
- openFile((file) => {
- loadFile(file, {code: CURSOR_CODE.LAST_EVENT, args: null});
- });
- };
-
- const SmallNavIconButton = ({actionName, Icon}: {
- actionName: string,
- Icon: SvgIconComponent,
- }) => (
-
-
-
- );
- const SmallIconButton = ({onClick, Icon}: {
- onClick: (event: React.MouseEvent) => void,
- Icon: SvgIconComponent,
- }) => (
-
-
-
- );
-
- return (
-
-
-
- {fileName}
-
-
-
-
-
-
-
- {
- setSettingsModelOpen(true);
- }}/>
-
-
-
- {
- setSettingsModelOpen(false);
- }}
- >
-
-
-
- Settings
-
- {
- setMode(newValue as Mode);
- }}
- >
-
-
-
-
-
-
-
-
-
-
-
- );
-};
-
/**
* Renders the major layout of the log viewer.
*
@@ -295,40 +86,21 @@ const Layout = () => {
}, [numEvents]);
return (
+
+ // FIXME: these components doesn't apply Layout.css properties
-
-
-
-
-
-
-
-
-
- Status message
-
-
-
-
+
+
);
};
diff --git a/new-log-viewer/src/components/Layout.css b/new-log-viewer/src/components/Layout.css
index f4f58c9c..bb2d182d 100644
--- a/new-log-viewer/src/components/Layout.css
+++ b/new-log-viewer/src/components/Layout.css
@@ -1,15 +1,36 @@
-.container {
+:root {
+ --status-bar-height: 32px;
+ --menu-bar-height: 32px;
+}
+
+.layout {
height: 100vh;
+ display: flex;
+ flex-direction: column;
}
.menu-bar {
display: flex;
- flex-direction: row;
+ flexDirection: "row";
+ height: var(--status-bar-height);
+ alignItems: "center";
+}
+
+.menu-bar-typography {
+ align-items: center;
+ display: flex;
+ flex-grow: 1;
+ gap: 2px;
+}
+
+.menu-bar-modal {
+ display: flex;
+ justify-content: space-between;
align-items: center;
}
-.editor-container {
- height: calc(100vh - 32px - 32px);
+.editor {
+ height: calc(100vh - var(--menu-bar-height) - var(--status-bar-height));
}
.status-bar {
@@ -20,6 +41,14 @@
width: 100%;
}
+.config-form-control {
+ display: flex;
+ justify-content: space-between;
+ flex-grow: 1;
+ margin-bottom: 16px;
+ width: 100%;
+}
+
.status-message {
flex-grow: 1;
}
@@ -27,8 +56,3 @@
.status-button {
min-height: 0;
}
-
-:root {
- --status-bar-height: 32px;
- --menu-bar-height: 32px;
-}
diff --git a/new-log-viewer/src/components/Layout.tsx b/new-log-viewer/src/components/Layout.tsx
index cf3b6acf..e0eab0d7 100644
--- a/new-log-viewer/src/components/Layout.tsx
+++ b/new-log-viewer/src/components/Layout.tsx
@@ -86,22 +86,22 @@ const Layout = () => {
}, [numEvents]);
return (
-
- // FIXME: these components doesn't apply Layout.css properties
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
);
};
diff --git a/new-log-viewer/src/components/MenuBar.tsx b/new-log-viewer/src/components/MenuBar.tsx
index d8728c99..c0fc31af 100644
--- a/new-log-viewer/src/components/MenuBar.tsx
+++ b/new-log-viewer/src/components/MenuBar.tsx
@@ -131,21 +131,8 @@ export const MenuBar = () => {
);
return (
-
-
+
+
{fileName}
@@ -177,13 +164,12 @@ export const MenuBar = () => {
{
setSettingsModelOpen(false);
}}
>
-
+
Settings
From 860f91a03aa2f1f2a4c73b33d1b029116ddc1bd5 Mon Sep 17 00:00:00 2001
From: Henry8192 <50559854+Henry8192@users.noreply.github.com>
Date: Mon, 9 Sep 2024 14:12:30 -0400
Subject: [PATCH 26/66] Apply suggestions from code review
Co-authored-by: Junhao Liao
---
new-log-viewer/src/components/ConfigForm.tsx | 9 +++++----
new-log-viewer/src/components/MenuBar.tsx | 2 +-
2 files changed, 6 insertions(+), 5 deletions(-)
diff --git a/new-log-viewer/src/components/ConfigForm.tsx b/new-log-viewer/src/components/ConfigForm.tsx
index d687f5ff..08a0f585 100644
--- a/new-log-viewer/src/components/ConfigForm.tsx
+++ b/new-log-viewer/src/components/ConfigForm.tsx
@@ -58,11 +58,12 @@ const ConfigForm = () => {
const handleConfigFormSubmit = (ev: React.FormEvent) => {
ev.preventDefault();
const formData = new FormData(ev.target as HTMLFormElement);
+ const getFormDataValue = (key: string) => formData.get(key) as string;
- const formatString = formData.get(LOCAL_STORAGE_KEY.DECODER_OPTIONS_FORMAT_STRING);
- const logLevelKey = formData.get(LOCAL_STORAGE_KEY.DECODER_OPTIONS_LOG_LEVEL_KEY);
- const timestampKey = formData.get(LOCAL_STORAGE_KEY.DECODER_OPTIONS_TIMESTAMP_KEY);
- const pageSize = formData.get(LOCAL_STORAGE_KEY.PAGE_SIZE);
+ const formatString = getFormDataValue(LOCAL_STORAGE_KEY.DECODER_OPTIONS_FORMAT_STRING);
+ const logLevelKey = getFormDataValue(LOCAL_STORAGE_KEY.DECODER_OPTIONS_LOG_LEVEL_KEY);
+ const timestampKey = getFormDataValue(LOCAL_STORAGE_KEY.DECODER_OPTIONS_TIMESTAMP_KEY);
+ const pageSize = getFormDataValue(LOCAL_STORAGE_KEY.PAGE_SIZE);
let error = null;
if (
"string" === typeof formatString &&
diff --git a/new-log-viewer/src/components/MenuBar.tsx b/new-log-viewer/src/components/MenuBar.tsx
index c0fc31af..cfc85a20 100644
--- a/new-log-viewer/src/components/MenuBar.tsx
+++ b/new-log-viewer/src/components/MenuBar.tsx
@@ -168,7 +168,7 @@ export const MenuBar = () => {
setSettingsModelOpen(false);
}}
>
-
+
Settings
From 6511129e59098384e1b79b75f97eb3a967c4d9bd Mon Sep 17 00:00:00 2001
From: Henry8192 <50559854+Henry8192@users.noreply.github.com>
Date: Mon, 9 Sep 2024 14:30:36 -0400
Subject: [PATCH 27/66] pull config handle functions out of ConfigForm(); add
CONFIG_KEY.THEME case check back to avoid IDE screaming
---
new-log-viewer/src/components/ConfigForm.tsx | 93 +++++++++++---------
new-log-viewer/src/utils/config.ts | 9 ++
2 files changed, 61 insertions(+), 41 deletions(-)
diff --git a/new-log-viewer/src/components/ConfigForm.tsx b/new-log-viewer/src/components/ConfigForm.tsx
index 08a0f585..74318eac 100644
--- a/new-log-viewer/src/components/ConfigForm.tsx
+++ b/new-log-viewer/src/components/ConfigForm.tsx
@@ -44,53 +44,64 @@ const formFields = [
];
/**
- * Renders a configuration settings form.
+ * Handles the reset event for the configuration form.
*
+ * @param ev The form event triggered by the reset action.
* @return
*/
-const ConfigForm = () => {
- const handleConfigFormReset = (ev: React.FormEvent) => {
- ev.preventDefault();
- window.localStorage.clear();
- window.location.reload();
- };
+const handleConfigFormReset = (ev: React.FormEvent) => {
+ ev.preventDefault();
+ window.localStorage.clear();
+ window.location.reload();
+};
- const handleConfigFormSubmit = (ev: React.FormEvent) => {
- ev.preventDefault();
- const formData = new FormData(ev.target as HTMLFormElement);
- const getFormDataValue = (key: string) => formData.get(key) as string;
+/**
+ * Handles the submit event for the configuration form.
+ *
+ * @param ev The form event triggered by the submit action.
+ * @return
+ */
+const handleConfigFormSubmit = (ev: React.FormEvent) => {
+ ev.preventDefault();
+ const formData = new FormData(ev.target as HTMLFormElement);
- const formatString = getFormDataValue(LOCAL_STORAGE_KEY.DECODER_OPTIONS_FORMAT_STRING);
- const logLevelKey = getFormDataValue(LOCAL_STORAGE_KEY.DECODER_OPTIONS_LOG_LEVEL_KEY);
- const timestampKey = getFormDataValue(LOCAL_STORAGE_KEY.DECODER_OPTIONS_TIMESTAMP_KEY);
- const pageSize = getFormDataValue(LOCAL_STORAGE_KEY.PAGE_SIZE);
- let error = null;
- if (
- "string" === typeof formatString &&
- "string" === typeof logLevelKey &&
- "string" === typeof timestampKey
- ) {
- error ||= setConfig({
- key: CONFIG_KEY.DECODER_OPTIONS,
- value: {formatString, logLevelKey, timestampKey},
- });
- }
- if ("string" === typeof pageSize) {
- error ||= setConfig({
- key: CONFIG_KEY.PAGE_SIZE,
- value: Number(pageSize),
- });
- }
- if (null !== error) {
- // eslint-disable-next-line no-warning-comments
- // TODO: Show an error pop-up once NotificationProvider is implemented.
- // eslint-disable-next-line no-alert
- window.alert(error);
- } else {
- window.location.reload();
- }
- };
+ const formatString = formData.get(LOCAL_STORAGE_KEY.DECODER_OPTIONS_FORMAT_STRING);
+ const logLevelKey = formData.get(LOCAL_STORAGE_KEY.DECODER_OPTIONS_LOG_LEVEL_KEY);
+ const timestampKey = formData.get(LOCAL_STORAGE_KEY.DECODER_OPTIONS_TIMESTAMP_KEY);
+ const pageSize = formData.get(LOCAL_STORAGE_KEY.PAGE_SIZE);
+ let error = null;
+ if (
+ "string" === typeof formatString &&
+ "string" === typeof logLevelKey &&
+ "string" === typeof timestampKey
+ ) {
+ error ||= setConfig({
+ key: CONFIG_KEY.DECODER_OPTIONS,
+ value: {formatString, logLevelKey, timestampKey},
+ });
+ }
+ if ("string" === typeof pageSize) {
+ error ||= setConfig({
+ key: CONFIG_KEY.PAGE_SIZE,
+ value: Number(pageSize),
+ });
+ }
+ if (null !== error) {
+ // eslint-disable-next-line no-warning-comments
+ // TODO: Show an error pop-up once NotificationProvider is implemented.
+ // eslint-disable-next-line no-alert
+ window.alert(error);
+ } else {
+ window.location.reload();
+ }
+};
+/**
+ * Renders a configuration settings form.
+ *
+ * @return
+ */
+const ConfigForm = () => {
return (
-
-
-
-
+
+
+
);
From 1c9bbec3982f53ebde4eb0cbb8b1e3f3e4f8d47a Mon Sep 17 00:00:00 2001
From: Henry8192 <50559854+Henry8192@users.noreply.github.com>
Date: Mon, 9 Sep 2024 16:11:07 -0400
Subject: [PATCH 29/66] Add helperText to each form fields
---
new-log-viewer/src/components/ConfigDialog.tsx | 9 ++++++++-
1 file changed, 8 insertions(+), 1 deletion(-)
diff --git a/new-log-viewer/src/components/ConfigDialog.tsx b/new-log-viewer/src/components/ConfigDialog.tsx
index d84a71fd..744ec86c 100644
--- a/new-log-viewer/src/components/ConfigDialog.tsx
+++ b/new-log-viewer/src/components/ConfigDialog.tsx
@@ -1,4 +1,5 @@
import FormControl from "@mui/joy/FormControl/FormControl";
+import FormHelperText from "@mui/joy/FormHelperText";
import FormLabel from "@mui/joy/FormLabel/FormLabel";
import Input from "@mui/joy/Input";
@@ -10,30 +11,33 @@ import {getConfig} from "../utils/config";
const formFields = [
- // FIXME: add helper text for each field.
{
initialValue: getConfig(CONFIG_KEY.DECODER_OPTIONS).formatString,
label: LOCAL_STORAGE_KEY.DECODER_OPTIONS_FORMAT_STRING,
name: LOCAL_STORAGE_KEY.DECODER_OPTIONS_FORMAT_STRING,
type: "text",
+ helperText: "The format string used to decode the log messages.",
},
{
initialValue: getConfig(CONFIG_KEY.DECODER_OPTIONS).logLevelKey,
label: LOCAL_STORAGE_KEY.DECODER_OPTIONS_LOG_LEVEL_KEY,
name: LOCAL_STORAGE_KEY.DECODER_OPTIONS_LOG_LEVEL_KEY,
type: "text",
+ helperText: "The key used to determine the log level.",
},
{
initialValue: getConfig(CONFIG_KEY.DECODER_OPTIONS).timestampKey,
label: LOCAL_STORAGE_KEY.DECODER_OPTIONS_TIMESTAMP_KEY,
name: LOCAL_STORAGE_KEY.DECODER_OPTIONS_TIMESTAMP_KEY,
type: "text",
+ helperText: "The key used to determine the timestamp.",
},
{
initialValue: getConfig(CONFIG_KEY.PAGE_SIZE),
label: LOCAL_STORAGE_KEY.PAGE_SIZE,
name: LOCAL_STORAGE_KEY.PAGE_SIZE,
type: "number",
+ helperText: "The number of log messages to display per page.",
},
];
@@ -54,6 +58,9 @@ const ConfigDialog = () => {
{field.label}
+
+ {field.helperText}
+
Date: Mon, 9 Sep 2024 18:34:39 -0400
Subject: [PATCH 30/66] Fix modal spacing issue, add description to config form
fields
---
.../src/components/ConfigDialog.tsx | 80 -------
new-log-viewer/src/components/Layout.css | 18 +-
new-log-viewer/src/components/Layout.tsx | 2 +-
new-log-viewer/src/components/MenuBar.tsx | 133 +----------
.../modals/SettingsModal/ConfigDialog.tsx | 209 ++++++++++++++++++
.../src/{utils => components}/theme.tsx | 41 ++--
new-log-viewer/src/index.css | 4 +
7 files changed, 251 insertions(+), 236 deletions(-)
delete mode 100644 new-log-viewer/src/components/ConfigDialog.tsx
create mode 100644 new-log-viewer/src/components/modals/SettingsModal/ConfigDialog.tsx
rename new-log-viewer/src/{utils => components}/theme.tsx (54%)
diff --git a/new-log-viewer/src/components/ConfigDialog.tsx b/new-log-viewer/src/components/ConfigDialog.tsx
deleted file mode 100644
index 744ec86c..00000000
--- a/new-log-viewer/src/components/ConfigDialog.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import FormControl from "@mui/joy/FormControl/FormControl";
-import FormHelperText from "@mui/joy/FormHelperText";
-import FormLabel from "@mui/joy/FormLabel/FormLabel";
-import Input from "@mui/joy/Input";
-
-import {
- CONFIG_KEY,
- LOCAL_STORAGE_KEY,
-} from "../typings/config";
-import {getConfig} from "../utils/config";
-
-
-const formFields = [
- {
- initialValue: getConfig(CONFIG_KEY.DECODER_OPTIONS).formatString,
- label: LOCAL_STORAGE_KEY.DECODER_OPTIONS_FORMAT_STRING,
- name: LOCAL_STORAGE_KEY.DECODER_OPTIONS_FORMAT_STRING,
- type: "text",
- helperText: "The format string used to decode the log messages.",
- },
- {
- initialValue: getConfig(CONFIG_KEY.DECODER_OPTIONS).logLevelKey,
- label: LOCAL_STORAGE_KEY.DECODER_OPTIONS_LOG_LEVEL_KEY,
- name: LOCAL_STORAGE_KEY.DECODER_OPTIONS_LOG_LEVEL_KEY,
- type: "text",
- helperText: "The key used to determine the log level.",
- },
- {
- initialValue: getConfig(CONFIG_KEY.DECODER_OPTIONS).timestampKey,
- label: LOCAL_STORAGE_KEY.DECODER_OPTIONS_TIMESTAMP_KEY,
- name: LOCAL_STORAGE_KEY.DECODER_OPTIONS_TIMESTAMP_KEY,
- type: "text",
- helperText: "The key used to determine the timestamp.",
- },
- {
- initialValue: getConfig(CONFIG_KEY.PAGE_SIZE),
- label: LOCAL_STORAGE_KEY.PAGE_SIZE,
- name: LOCAL_STORAGE_KEY.PAGE_SIZE,
- type: "number",
- helperText: "The number of log messages to display per page.",
- },
-];
-
-/**
- * Renders a configuration settings form.
- *
- * @return
- */
-const ConfigDialog = () => {
- return (
- <>
- {formFields.map((field, index) => (
-
-
- {field.label}
-
-
- {field.helperText}
-
-
-
-
- ))}
-
- );
-};
-
-export default ConfigDialog;
diff --git a/new-log-viewer/src/components/Layout.css b/new-log-viewer/src/components/Layout.css
index bb2d182d..1eea3732 100644
--- a/new-log-viewer/src/components/Layout.css
+++ b/new-log-viewer/src/components/Layout.css
@@ -1,7 +1,4 @@
-:root {
- --status-bar-height: 32px;
- --menu-bar-height: 32px;
-}
+
.layout {
height: 100vh;
@@ -12,7 +9,7 @@
.menu-bar {
display: flex;
flexDirection: "row";
- height: var(--status-bar-height);
+ height: var(--ylv-status-bar-height);
alignItems: "center";
}
@@ -23,14 +20,15 @@
gap: 2px;
}
-.menu-bar-modal {
+.settings-modal {
display: flex;
justify-content: space-between;
align-items: center;
+ flex-wrap: wrap;
}
.editor {
- height: calc(100vh - var(--menu-bar-height) - var(--status-bar-height));
+ height: calc(100vh - var(--ylv-menu-bar-height) - var(--ylv-status-bar-height));
}
.status-bar {
@@ -42,11 +40,7 @@
}
.config-form-control {
- display: flex;
- justify-content: space-between;
- flex-grow: 1;
- margin-bottom: 16px;
- width: 100%;
+ margin-top: 16px;
}
.status-message {
diff --git a/new-log-viewer/src/components/Layout.tsx b/new-log-viewer/src/components/Layout.tsx
index e0eab0d7..56637c73 100644
--- a/new-log-viewer/src/components/Layout.tsx
+++ b/new-log-viewer/src/components/Layout.tsx
@@ -18,7 +18,6 @@ import {Nullable} from "../typings/common";
import {CONFIG_KEY} from "../typings/config";
import {ACTION_NAME} from "../utils/actions";
import {CONFIG_DEFAULT} from "../utils/config";
-import monacoTheme from "../utils/theme";
import DropFileContainer from "./DropFileContainer";
import Editor from "./Editor";
import {goToPositionAndCenter} from "./Editor/MonacoInstance/utils";
@@ -27,6 +26,7 @@ import {
MenuBar,
} from "./MenuBar";
import {StatusBar} from "./StatusBar";
+import monacoTheme from "./theme";
import "./Layout.css";
diff --git a/new-log-viewer/src/components/MenuBar.tsx b/new-log-viewer/src/components/MenuBar.tsx
index 5f4d2a44..5271ad62 100644
--- a/new-log-viewer/src/components/MenuBar.tsx
+++ b/new-log-viewer/src/components/MenuBar.tsx
@@ -4,29 +4,18 @@ import React, {
} from "react";
import {
- Button,
- DialogActions,
- DialogContent,
- DialogTitle,
IconButton,
Modal,
- ModalDialog,
Sheet,
- ToggleButtonGroup,
Typography,
- useColorScheme,
} from "@mui/joy";
-import type {Mode} from "@mui/system/cssVars/useCurrentColorScheme";
import {SvgIconComponent} from "@mui/icons-material";
-import DarkMode from "@mui/icons-material/DarkMode";
import Description from "@mui/icons-material/Description";
import FileOpenIcon from "@mui/icons-material/FileOpen";
-import LightMode from "@mui/icons-material/LightMode";
import NavigateBefore from "@mui/icons-material/NavigateBefore";
import NavigateNext from "@mui/icons-material/NavigateNext";
import Settings from "@mui/icons-material/Settings";
-import SettingsBrightnessIcon from "@mui/icons-material/SettingsBrightness";
import SkipNext from "@mui/icons-material/SkipNext";
import SkipPrevious from "@mui/icons-material/SkipPrevious";
import TipsAndUpdates from "@mui/icons-material/TipsAndUpdates";
@@ -36,23 +25,16 @@ import {
updateWindowUrlHashParams,
UrlContext,
} from "../contexts/UrlContextProvider";
-import {
- CONFIG_KEY,
- LOCAL_STORAGE_KEY,
- THEME_NAME,
-} from "../typings/config";
+import {CONFIG_KEY} from "../typings/config";
import {CURSOR_CODE} from "../typings/worker";
import {ACTION_NAME} from "../utils/actions";
-import {
- getConfig,
- setConfig,
-} from "../utils/config";
+import {getConfig} from "../utils/config";
import {openFile} from "../utils/file";
import {
getFirstItemNumInNextChunk,
getLastItemNumInPrevChunk,
} from "../utils/math";
-import ConfigDialog from "./ConfigDialog";
+import ConfigDialog from "./modals/SettingsModal/ConfigDialog";
/**
@@ -85,64 +67,11 @@ export const handleAction = (actionName: ACTION_NAME, logEventNum: number, numEv
}
};
-/**
- * Handles the reset event for the configuration form.
- *
- * @param ev The form event triggered by the reset action.
- * @return
- */
-const handleConfigFormReset = (ev: React.FormEvent) => {
- ev.preventDefault();
- window.localStorage.clear();
- window.location.reload();
-};
-
-/**
- * Handles the submit event for the configuration form.
- *
- * @param ev The form event triggered by the submit action.
- * @return
- */
-const handleConfigFormSubmit = (ev: React.FormEvent) => {
- ev.preventDefault();
- const formData = new FormData(ev.target as HTMLFormElement);
-
- const formatString = formData.get(LOCAL_STORAGE_KEY.DECODER_OPTIONS_FORMAT_STRING);
- const logLevelKey = formData.get(LOCAL_STORAGE_KEY.DECODER_OPTIONS_LOG_LEVEL_KEY);
- const timestampKey = formData.get(LOCAL_STORAGE_KEY.DECODER_OPTIONS_TIMESTAMP_KEY);
- const pageSize = formData.get(LOCAL_STORAGE_KEY.PAGE_SIZE);
- let error = null;
- if (
- "string" === typeof formatString &&
- "string" === typeof logLevelKey &&
- "string" === typeof timestampKey
- ) {
- error ||= setConfig({
- key: CONFIG_KEY.DECODER_OPTIONS,
- value: {formatString, logLevelKey, timestampKey},
- });
- }
- if ("string" === typeof pageSize) {
- error ||= setConfig({
- key: CONFIG_KEY.PAGE_SIZE,
- value: Number(pageSize),
- });
- }
- if (null !== error) {
- // eslint-disable-next-line no-warning-comments
- // TODO: Show an error pop-up once NotificationProvider is implemented.
- // eslint-disable-next-line no-alert
- window.alert(error);
- } else {
- window.location.reload();
- }
-};
/**
*
*/
export const MenuBar = () => {
- const {setMode, mode} = useColorScheme();
const {logEventNum} = useContext(UrlContext);
const {fileName, loadFile, numEvents} = useContext(StateContext);
@@ -226,61 +155,7 @@ export const MenuBar = () => {
setSettingsModelOpen(false);
}}
>
-
+
);
diff --git a/new-log-viewer/src/components/modals/SettingsModal/ConfigDialog.tsx b/new-log-viewer/src/components/modals/SettingsModal/ConfigDialog.tsx
new file mode 100644
index 00000000..9d02ce99
--- /dev/null
+++ b/new-log-viewer/src/components/modals/SettingsModal/ConfigDialog.tsx
@@ -0,0 +1,209 @@
+import React, {forwardRef} from "react";
+
+import {
+ Button,
+ DialogActions,
+ DialogContent,
+ DialogTitle,
+ ModalDialog,
+ ToggleButtonGroup,
+ useColorScheme,
+} from "@mui/joy";
+import FormControl from "@mui/joy/FormControl/FormControl";
+import FormHelperText from "@mui/joy/FormHelperText";
+import FormLabel from "@mui/joy/FormLabel/FormLabel";
+import Input from "@mui/joy/Input";
+import type {Mode} from "@mui/system/cssVars/useCurrentColorScheme";
+
+import DarkMode from "@mui/icons-material/DarkMode";
+import LightMode from "@mui/icons-material/LightMode";
+import SettingsBrightnessIcon from "@mui/icons-material/SettingsBrightness";
+
+import {Nullable} from "../../../typings/common";
+import {
+ CONFIG_KEY,
+ LOCAL_STORAGE_KEY,
+ THEME_NAME,
+} from "../../../typings/config";
+import {
+ getConfig,
+ setConfig,
+} from "../../../utils/config";
+
+
+const CONFIG_FORM_FIELDS = [
+ {
+ helperText: "[JSON] Log messages conversion formats.",
+ initialValue: getConfig(CONFIG_KEY.DECODER_OPTIONS).formatString,
+ label: "Decoder: Format string",
+ name: LOCAL_STORAGE_KEY.DECODER_OPTIONS_FORMAT_STRING,
+ type: "text",
+ },
+ {
+ helperText: "[JSON] Key to extract the log level from.",
+ initialValue: getConfig(CONFIG_KEY.DECODER_OPTIONS).logLevelKey,
+ label: "Decoder: Log level key",
+ name: LOCAL_STORAGE_KEY.DECODER_OPTIONS_LOG_LEVEL_KEY,
+ type: "text",
+ },
+ {
+ helperText: "[JSON] Key to extract the log timestamp from.",
+ initialValue: getConfig(CONFIG_KEY.DECODER_OPTIONS).timestampKey,
+ label: "Decoder: Timestamp key",
+ name: LOCAL_STORAGE_KEY.DECODER_OPTIONS_TIMESTAMP_KEY,
+ type: "text",
+ },
+ {
+ helperText: "Number of log messages to display per page.",
+ initialValue: getConfig(CONFIG_KEY.PAGE_SIZE),
+ label: "View: Page size",
+ name: LOCAL_STORAGE_KEY.PAGE_SIZE,
+ type: "number",
+ },
+];
+
+/**
+ * Handles the reset event for the configuration form.
+ *
+ * @param ev The form event triggered by the reset action.
+ */
+const handleConfigFormReset = (ev: React.FormEvent) => {
+ ev.preventDefault();
+ window.localStorage.clear();
+ window.location.reload();
+};
+
+/**
+ * Handles the submit event for the configuration form.
+ *
+ * @param ev The form event triggered by the submit action.
+ */
+const handleConfigFormSubmit = (ev: React.FormEvent) => {
+ ev.preventDefault();
+ const formData = new FormData(ev.target as HTMLFormElement);
+ const getFormDataValue = (key: string) => formData.get(key) as string;
+
+ const formatString = getFormDataValue(LOCAL_STORAGE_KEY.DECODER_OPTIONS_FORMAT_STRING);
+ const logLevelKey = getFormDataValue(LOCAL_STORAGE_KEY.DECODER_OPTIONS_LOG_LEVEL_KEY);
+ const timestampKey = getFormDataValue(LOCAL_STORAGE_KEY.DECODER_OPTIONS_TIMESTAMP_KEY);
+ const pageSize = getFormDataValue(LOCAL_STORAGE_KEY.PAGE_SIZE);
+
+ let error: Nullable = null;
+ error ||= setConfig({
+ key: CONFIG_KEY.DECODER_OPTIONS,
+ value: {formatString, logLevelKey, timestampKey},
+ });
+ error ||= setConfig({
+ key: CONFIG_KEY.PAGE_SIZE,
+ value: Number(pageSize),
+ });
+
+ if (null !== error) {
+ // eslint-disable-next-line no-warning-comments
+ // TODO: Show an error pop-up once NotificationProvider is implemented.
+ // eslint-disable-next-line no-alert
+ window.alert(error);
+ } else {
+ window.location.reload();
+ }
+};
+
+/**
+ * Renders a configuration settings form.
+ *
+ * @return
+ */
+const ConfigDialog = forwardRef((_, ref) => {
+ const {setMode, mode} = useColorScheme();
+
+ return (
+
+ );
+});
+
+ConfigDialog.displayName = "ConfigDialog";
+
+export default ConfigDialog;
diff --git a/new-log-viewer/src/utils/theme.tsx b/new-log-viewer/src/components/theme.tsx
similarity index 54%
rename from new-log-viewer/src/utils/theme.tsx
rename to new-log-viewer/src/components/theme.tsx
index 6002a235..d05ad707 100644
--- a/new-log-viewer/src/utils/theme.tsx
+++ b/new-log-viewer/src/components/theme.tsx
@@ -8,31 +8,32 @@ const monacoTheme = extendTheme({
light: {
palette: {
primary: {
- solidBg: "#007acc",
- solidHoverBg: "#0062a3",
- solidActiveBg: "#0062a3",
+ solidBg: "#005fb8",
+ solidHoverBg: "#0258a8",
+ solidActiveBg: "#005fb8",
},
neutral: {
- solidBg: "#5f6a79",
- solidHoverBg: "#4c5561",
- solidActiveBg: "#4c5561",
+ solidBg: "#e5e5e5",
+ solidHoverBg: "#cccccc",
+ solidActiveBg: "#e5e5e5",
+ solidColor: "#3b3b3b",
},
- focusVisible: "#0090f1",
+ focusVisible: "#005fb8",
},
},
dark: {
palette: {
primary: {
- solidBg: "#0e639c",
- solidHoverBg: "#1177bb",
- solidActiveBg: "#1177bb",
+ solidBg: "#0078d4",
+ solidHoverBg: "#026ec1",
+ solidActiveBg: "#0078d4",
},
neutral: {
- solidBg: "#313131",
- solidHoverBg: "#45494e",
- solidActiveBg: "#45494e",
+ solidBg: "#181818",
+ solidHoverBg: "#323232",
+ solidActiveBg: "#181818",
},
- focusVisible: "#007fd4",
+ focusVisible: "#0078d4",
},
},
},
@@ -69,6 +70,18 @@ const monacoTheme = extendTheme({
},
},
},
+ JoyFormControl: {
+ styleOverrides: {
+ root: ({theme}) => ({
+ [theme.getColorSchemeSelector("dark")]: {
+ ":hover": {backgroundColor: "#232424"},
+ },
+ [theme.getColorSchemeSelector("light")]: {
+ ":hover": {backgroundColor: "#f8f8f8"},
+ },
+ }),
+ },
+ },
},
});
diff --git a/new-log-viewer/src/index.css b/new-log-viewer/src/index.css
index b21e3278..22de1ccc 100644
--- a/new-log-viewer/src/index.css
+++ b/new-log-viewer/src/index.css
@@ -13,6 +13,10 @@ html {
--ylv-ui-font-family: -apple-system, BlinkMacSystemFont, system-ui, Ubuntu, "Droid Sans",
Roboto;
+ /* size globals */
+ --ylv-status-bar-height: 32px;
+ --ylv-menu-bar-height: 32px;
+
/* z-index globals
*
* Other z-index values in the project for reference:
From 5d1f4d938af90492e500eb76988cc7872e775866 Mon Sep 17 00:00:00 2001
From: Henry <50559854+Henry8192@users.noreply.github.com>
Date: Tue, 10 Sep 2024 11:03:43 -0400
Subject: [PATCH 31/66] Move SettingsModal from MenuBar to SettingsModal folder
---
new-log-viewer/src/components/MenuBar.tsx | 12 ++++------
.../components/modals/SettingsModal/index.tsx | 24 +++++++++++++++++++
2 files changed, 28 insertions(+), 8 deletions(-)
create mode 100644 new-log-viewer/src/components/modals/SettingsModal/index.tsx
diff --git a/new-log-viewer/src/components/MenuBar.tsx b/new-log-viewer/src/components/MenuBar.tsx
index 5271ad62..f8c1d67e 100644
--- a/new-log-viewer/src/components/MenuBar.tsx
+++ b/new-log-viewer/src/components/MenuBar.tsx
@@ -5,7 +5,6 @@ import React, {
import {
IconButton,
- Modal,
Sheet,
Typography,
} from "@mui/joy";
@@ -34,7 +33,7 @@ import {
getFirstItemNumInNextChunk,
getLastItemNumInPrevChunk,
} from "../utils/math";
-import ConfigDialog from "./modals/SettingsModal/ConfigDialog";
+import ConfigModal from "./modals/SettingsModal";
/**
@@ -149,14 +148,11 @@ export const MenuBar = () => {
>
- {
setSettingsModelOpen(false);
- }}
- >
-
-
+ }}/>
);
};
diff --git a/new-log-viewer/src/components/modals/SettingsModal/index.tsx b/new-log-viewer/src/components/modals/SettingsModal/index.tsx
new file mode 100644
index 00000000..69f89e49
--- /dev/null
+++ b/new-log-viewer/src/components/modals/SettingsModal/index.tsx
@@ -0,0 +1,24 @@
+import Modal from "@mui/joy/Modal";
+
+import ConfigDialog from "./ConfigDialog";
+
+
+/**
+ *
+ * @param isOpen.isOpen
+ * @param isOpen
+ * @param onClose
+ * @param isOpen.onClose
+ */
+const ConfigModal = ({isOpen, onClose}: { isOpen: boolean, onClose: () => void }) => {
+ return (
+
+
+
+ );
+};
+
+export default ConfigModal;
From 5b6132015e46cda5a44875bf56bcb475b179aba4 Mon Sep 17 00:00:00 2001
From: Henry8192 <50559854+Henry8192@users.noreply.github.com>
Date: Tue, 10 Sep 2024 16:31:27 -0400
Subject: [PATCH 32/66] Apply suggestions from code review
Co-authored-by: Junhao Liao
---
new-log-viewer/src/App.tsx | 2 --
new-log-viewer/src/components/Layout.css | 2 --
new-log-viewer/src/components/MenuBar.tsx | 1 -
new-log-viewer/src/components/StatusBar.tsx | 2 +-
4 files changed, 1 insertion(+), 6 deletions(-)
diff --git a/new-log-viewer/src/App.tsx b/new-log-viewer/src/App.tsx
index 8c4089ee..afaaa4b3 100644
--- a/new-log-viewer/src/App.tsx
+++ b/new-log-viewer/src/App.tsx
@@ -10,13 +10,11 @@ import UrlContextProvider from "./contexts/UrlContextProvider";
*/
const App = () => {
return (
-
-
);
};
diff --git a/new-log-viewer/src/components/Layout.css b/new-log-viewer/src/components/Layout.css
index 1eea3732..2eff24a4 100644
--- a/new-log-viewer/src/components/Layout.css
+++ b/new-log-viewer/src/components/Layout.css
@@ -1,5 +1,3 @@
-
-
.layout {
height: 100vh;
display: flex;
diff --git a/new-log-viewer/src/components/MenuBar.tsx b/new-log-viewer/src/components/MenuBar.tsx
index f8c1d67e..8423d872 100644
--- a/new-log-viewer/src/components/MenuBar.tsx
+++ b/new-log-viewer/src/components/MenuBar.tsx
@@ -66,7 +66,6 @@ export const handleAction = (actionName: ACTION_NAME, logEventNum: number, numEv
}
};
-
/**
*
*/
diff --git a/new-log-viewer/src/components/StatusBar.tsx b/new-log-viewer/src/components/StatusBar.tsx
index 98949feb..67b2a155 100644
--- a/new-log-viewer/src/components/StatusBar.tsx
+++ b/new-log-viewer/src/components/StatusBar.tsx
@@ -11,7 +11,7 @@ interface StatusBarProps {
numEvents: number | null;
}
-export const StatusBar: React.FC = ({handleCopyLinkButtonClick, logEventNum, numEvents}) => {
+const StatusBar = ({handleCopyLinkButtonClick, logEventNum, numEvents}: StatusBarProps) => {
return (
Date: Wed, 11 Sep 2024 10:55:38 -0400
Subject: [PATCH 33/66] Extract MenuBar & StatusBar to their corresponding
component folders
---
new-log-viewer/src/components/Layout.css | 41 -------------
new-log-viewer/src/components/Layout.tsx | 21 +++----
.../src/components/MenuBar/index.css | 13 ++++
.../{MenuBar.tsx => MenuBar/index.tsx} | 61 ++++++-------------
.../components/{ => StatusBar}/StatusBar.tsx | 26 ++++++--
.../src/components/StatusBar/index.css | 15 +++++
.../modals/SettingsModal/ConfigDialog.tsx | 11 +---
.../components/modals/SettingsModal/index.css | 10 +++
.../components/modals/SettingsModal/index.tsx | 2 +
new-log-viewer/src/index.tsx | 1 +
new-log-viewer/src/utils/actions.ts | 37 +++++++++++
11 files changed, 127 insertions(+), 111 deletions(-)
create mode 100644 new-log-viewer/src/components/MenuBar/index.css
rename new-log-viewer/src/components/{MenuBar.tsx => MenuBar/index.tsx} (69%)
rename new-log-viewer/src/components/{ => StatusBar}/StatusBar.tsx (58%)
create mode 100644 new-log-viewer/src/components/StatusBar/index.css
create mode 100644 new-log-viewer/src/components/modals/SettingsModal/index.css
diff --git a/new-log-viewer/src/components/Layout.css b/new-log-viewer/src/components/Layout.css
index 2eff24a4..9ffba568 100644
--- a/new-log-viewer/src/components/Layout.css
+++ b/new-log-viewer/src/components/Layout.css
@@ -4,47 +4,6 @@
flex-direction: column;
}
-.menu-bar {
- display: flex;
- flexDirection: "row";
- height: var(--ylv-status-bar-height);
- alignItems: "center";
-}
-
-.menu-bar-typography {
- align-items: center;
- display: flex;
- flex-grow: 1;
- gap: 2px;
-}
-
-.settings-modal {
- display: flex;
- justify-content: space-between;
- align-items: center;
- flex-wrap: wrap;
-}
-
.editor {
height: calc(100vh - var(--ylv-menu-bar-height) - var(--ylv-status-bar-height));
}
-
-.status-bar {
- align-items: center;
- bottom: 0;
- display: flex;
- position: absolute;
- width: 100%;
-}
-
-.config-form-control {
- margin-top: 16px;
-}
-
-.status-message {
- flex-grow: 1;
-}
-
-.status-button {
- min-height: 0;
-}
diff --git a/new-log-viewer/src/components/Layout.tsx b/new-log-viewer/src/components/Layout.tsx
index 56637c73..f7e96a77 100644
--- a/new-log-viewer/src/components/Layout.tsx
+++ b/new-log-viewer/src/components/Layout.tsx
@@ -10,22 +10,19 @@ import * as monaco from "monaco-editor";
import {CssVarsProvider} from "@mui/joy/styles";
import {StateContext} from "../contexts/StateContextProvider";
-import {
- copyPermalinkToClipboard,
- UrlContext,
-} from "../contexts/UrlContextProvider";
+import {UrlContext} from "../contexts/UrlContextProvider";
import {Nullable} from "../typings/common";
import {CONFIG_KEY} from "../typings/config";
-import {ACTION_NAME} from "../utils/actions";
+import {
+ ACTION_NAME,
+ handleAction,
+} from "../utils/actions";
import {CONFIG_DEFAULT} from "../utils/config";
import DropFileContainer from "./DropFileContainer";
import Editor from "./Editor";
import {goToPositionAndCenter} from "./Editor/MonacoInstance/utils";
-import {
- handleAction,
- MenuBar,
-} from "./MenuBar";
-import {StatusBar} from "./StatusBar";
+import MenuBar from "./MenuBar";
+import StatusBar from "./StatusBar/StatusBar";
import monacoTheme from "./theme";
import "./Layout.css";
@@ -43,9 +40,6 @@ const Layout = () => {
const logEventNumRef = useRef>(logEventNum);
const numEventsRef = useRef>(numEvents);
- const handleCopyLinkButtonClick = () => {
- copyPermalinkToClipboard({}, {});
- };
const handleEditorCustomAction = useCallback((
editor: monaco.editor.IStandaloneCodeEditor,
@@ -97,7 +91,6 @@ const Layout = () => {
diff --git a/new-log-viewer/src/components/MenuBar/index.css b/new-log-viewer/src/components/MenuBar/index.css
new file mode 100644
index 00000000..f6282877
--- /dev/null
+++ b/new-log-viewer/src/components/MenuBar/index.css
@@ -0,0 +1,13 @@
+.menu-bar {
+ display: flex;
+ flexDirection: "row";
+ height: var(--ylv-status-bar-height);
+ alignItems: "center";
+}
+
+.menu-bar-typography {
+ align-items: center;
+ display: flex;
+ flex-grow: 1;
+ gap: 2px;
+}
diff --git a/new-log-viewer/src/components/MenuBar.tsx b/new-log-viewer/src/components/MenuBar/index.tsx
similarity index 69%
rename from new-log-viewer/src/components/MenuBar.tsx
rename to new-log-viewer/src/components/MenuBar/index.tsx
index 8423d872..9a74f098 100644
--- a/new-log-viewer/src/components/MenuBar.tsx
+++ b/new-log-viewer/src/components/MenuBar/index.tsx
@@ -19,57 +19,28 @@ import SkipNext from "@mui/icons-material/SkipNext";
import SkipPrevious from "@mui/icons-material/SkipPrevious";
import TipsAndUpdates from "@mui/icons-material/TipsAndUpdates";
-import {StateContext} from "../contexts/StateContextProvider";
+import {StateContext} from "../../contexts/StateContextProvider";
+import {UrlContext} from "../../contexts/UrlContextProvider";
+import {CURSOR_CODE} from "../../typings/worker";
import {
- updateWindowUrlHashParams,
- UrlContext,
-} from "../contexts/UrlContextProvider";
-import {CONFIG_KEY} from "../typings/config";
-import {CURSOR_CODE} from "../typings/worker";
-import {ACTION_NAME} from "../utils/actions";
-import {getConfig} from "../utils/config";
-import {openFile} from "../utils/file";
-import {
- getFirstItemNumInNextChunk,
- getLastItemNumInPrevChunk,
-} from "../utils/math";
-import ConfigModal from "./modals/SettingsModal";
+ ACTION_NAME,
+ handleAction,
+} from "../../utils/actions";
+import {openFile} from "../../utils/file";
+import ConfigModal from "../modals/SettingsModal";
+import "./index.css";
-/**
- *
- * @param actionName
- * @param logEventNum
- * @param numEvents
- */
-export const handleAction = (actionName: ACTION_NAME, logEventNum: number, numEvents: number) => {
- const pageSize = getConfig(CONFIG_KEY.PAGE_SIZE);
- switch (actionName) {
- case ACTION_NAME.FIRST_PAGE:
- updateWindowUrlHashParams({logEventNum: 1});
- break;
- case ACTION_NAME.PREV_PAGE:
- updateWindowUrlHashParams({
- logEventNum: getLastItemNumInPrevChunk(logEventNum, pageSize),
- });
- break;
- case ACTION_NAME.NEXT_PAGE:
- updateWindowUrlHashParams({
- logEventNum: getFirstItemNumInNextChunk(logEventNum, pageSize),
- });
- break;
- case ACTION_NAME.LAST_PAGE:
- updateWindowUrlHashParams({logEventNum: numEvents});
- break;
- default:
- break;
- }
-};
/**
+ * MenuBar component
+ *
+ * This component renders a menu bar with various navigation and action buttons.
+ * It uses context to access the current log event number, file name, and other state information.
*
+ * @return The rendered MenuBar component.
*/
-export const MenuBar = () => {
+const MenuBar = () => {
const {logEventNum} = useContext(UrlContext);
const {fileName, loadFile, numEvents} = useContext(StateContext);
@@ -155,3 +126,5 @@ export const MenuBar = () => {
);
};
+
+export default MenuBar;
diff --git a/new-log-viewer/src/components/StatusBar.tsx b/new-log-viewer/src/components/StatusBar/StatusBar.tsx
similarity index 58%
rename from new-log-viewer/src/components/StatusBar.tsx
rename to new-log-viewer/src/components/StatusBar/StatusBar.tsx
index 67b2a155..4b07711e 100644
--- a/new-log-viewer/src/components/StatusBar.tsx
+++ b/new-log-viewer/src/components/StatusBar/StatusBar.tsx
@@ -1,17 +1,33 @@
-import React from "react";
-
import Button from "@mui/joy/Button";
import Sheet from "@mui/joy/Sheet";
import Typography from "@mui/joy/Typography";
+import {copyPermalinkToClipboard} from "../../contexts/UrlContextProvider";
+
+import "./index.css";
+
interface StatusBarProps {
- handleCopyLinkButtonClick: () => void;
logEventNum: number | null;
numEvents: number | null;
}
-const StatusBar = ({handleCopyLinkButtonClick, logEventNum, numEvents}: StatusBarProps) => {
+/**
+ *
+ */
+const handleCopyLinkButtonClick = () => {
+ copyPermalinkToClipboard({}, {});
+};
+
+/**
+ * StatusBar component displays the current log event number and total number of events.
+ *
+ * @param props The properties object.
+ * @param props.logEventNum The current log event number.
+ * @param props.numEvents The total number of events.
+ * @return The rendered StatusBar component.
+ */
+const StatusBar = ({logEventNum, numEvents}: StatusBarProps) => {
return (
);
};
+
+export default StatusBar;
diff --git a/new-log-viewer/src/components/StatusBar/index.css b/new-log-viewer/src/components/StatusBar/index.css
new file mode 100644
index 00000000..884d0e6f
--- /dev/null
+++ b/new-log-viewer/src/components/StatusBar/index.css
@@ -0,0 +1,15 @@
+.status-bar {
+ align-items: center;
+ bottom: 0;
+ display: flex;
+ position: absolute;
+ width: 100%;
+}
+
+.status-message {
+ flex-grow: 1;
+}
+
+.status-button {
+ min-height: 0;
+}
diff --git a/new-log-viewer/src/components/modals/SettingsModal/ConfigDialog.tsx b/new-log-viewer/src/components/modals/SettingsModal/ConfigDialog.tsx
index 9d02ce99..eec8ab48 100644
--- a/new-log-viewer/src/components/modals/SettingsModal/ConfigDialog.tsx
+++ b/new-log-viewer/src/components/modals/SettingsModal/ConfigDialog.tsx
@@ -171,14 +171,9 @@ const ConfigDialog = forwardRef((_, ref) => {
{field.label}
+ defaultValue={field.initialValue}
+ name={field.name}
+ type={field.type}/>
{field.helperText}
diff --git a/new-log-viewer/src/components/modals/SettingsModal/index.css b/new-log-viewer/src/components/modals/SettingsModal/index.css
new file mode 100644
index 00000000..c0283b41
--- /dev/null
+++ b/new-log-viewer/src/components/modals/SettingsModal/index.css
@@ -0,0 +1,10 @@
+.settings-modal {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-wrap: wrap;
+}
+
+.config-form-control {
+ margin-top: 16px;
+}
diff --git a/new-log-viewer/src/components/modals/SettingsModal/index.tsx b/new-log-viewer/src/components/modals/SettingsModal/index.tsx
index 69f89e49..479c0f43 100644
--- a/new-log-viewer/src/components/modals/SettingsModal/index.tsx
+++ b/new-log-viewer/src/components/modals/SettingsModal/index.tsx
@@ -2,6 +2,8 @@ import Modal from "@mui/joy/Modal";
import ConfigDialog from "./ConfigDialog";
+import "./index.css";
+
/**
*
diff --git a/new-log-viewer/src/index.tsx b/new-log-viewer/src/index.tsx
index 4409e0de..c9ab6c08 100644
--- a/new-log-viewer/src/index.tsx
+++ b/new-log-viewer/src/index.tsx
@@ -13,3 +13,4 @@ root.render(
);
+export {handleAction} from "./utils/actions";
diff --git a/new-log-viewer/src/utils/actions.ts b/new-log-viewer/src/utils/actions.ts
index 65810e9c..f2347844 100644
--- a/new-log-viewer/src/utils/actions.ts
+++ b/new-log-viewer/src/utils/actions.ts
@@ -1,6 +1,13 @@
import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
+import {updateWindowUrlHashParams} from "../contexts/UrlContextProvider";
import {Nullable} from "../typings/common";
+import {CONFIG_KEY} from "../typings/config";
+import {getConfig} from "./config";
+import {
+ getFirstItemNumInNextChunk,
+ getLastItemNumInPrevChunk,
+} from "./math";
enum ACTION_NAME {
@@ -62,8 +69,38 @@ const EDITOR_ACTIONS : ActionType[] = [
];
/* eslint-enable sort-keys */
+/**
+ *
+ * @param actionName
+ * @param logEventNum
+ * @param numEvents
+ */
+const handleAction = (actionName: ACTION_NAME, logEventNum: number, numEvents: number) => {
+ const pageSize = getConfig(CONFIG_KEY.PAGE_SIZE);
+ switch (actionName) {
+ case ACTION_NAME.FIRST_PAGE:
+ updateWindowUrlHashParams({logEventNum: 1});
+ break;
+ case ACTION_NAME.PREV_PAGE:
+ updateWindowUrlHashParams({
+ logEventNum: getLastItemNumInPrevChunk(logEventNum, pageSize),
+ });
+ break;
+ case ACTION_NAME.NEXT_PAGE:
+ updateWindowUrlHashParams({
+ logEventNum: getFirstItemNumInNextChunk(logEventNum, pageSize),
+ });
+ break;
+ case ACTION_NAME.LAST_PAGE:
+ updateWindowUrlHashParams({logEventNum: numEvents});
+ break;
+ default:
+ break;
+ }
+};
export {
ACTION_NAME,
EDITOR_ACTIONS,
+ handleAction,
};
export type {ActionType};
From 51cfed3cd70aa759e705534659458df01296bd22 Mon Sep 17 00:00:00 2001
From: Junhao Liao
Date: Wed, 11 Sep 2024 13:16:27 -0400
Subject: [PATCH 34/66] Rearrange the layout to have CssVarsProvider as the
outer element wrapping the layout div to allow any style overrides in
`.layout` in the future.
---
new-log-viewer/src/components/Layout.tsx | 16 ++++++++--------
1 file changed, 8 insertions(+), 8 deletions(-)
diff --git a/new-log-viewer/src/components/Layout.tsx b/new-log-viewer/src/components/Layout.tsx
index f7e96a77..088b8f57 100644
--- a/new-log-viewer/src/components/Layout.tsx
+++ b/new-log-viewer/src/components/Layout.tsx
@@ -80,12 +80,12 @@ const Layout = () => {
}, [numEvents]);
return (
-
-
+
+
@@ -93,8 +93,8 @@ const Layout = () => {
-
-
+