From d74538f93d8cff83c7e48db3d9eb6c937f88804b Mon Sep 17 00:00:00 2001
From: Austin Akers <austin@harperdb.io>
Date: Thu, 23 Jan 2025 13:33:23 -0800
Subject: [PATCH 01/20] create logs page

---
 src/components/instance/logs/LogRow.js |  23 ++++++
 src/components/instance/logs/Logs.js   | 105 +++++++++++++++++++++++++
 src/components/instance/logs/index.js  |  18 +++++
 src/components/instance/routes.js      |  12 ++-
 4 files changed, 156 insertions(+), 2 deletions(-)
 create mode 100644 src/components/instance/logs/LogRow.js
 create mode 100644 src/components/instance/logs/Logs.js
 create mode 100644 src/components/instance/logs/index.js

diff --git a/src/components/instance/logs/LogRow.js b/src/components/instance/logs/LogRow.js
new file mode 100644
index 000000000..d81c3a784
--- /dev/null
+++ b/src/components/instance/logs/LogRow.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Row, Col } from 'reactstrap';
+
+import isObject from '../../../functions/util/isObject';
+
+function LogsRow({ level, timestamp, message, tags, thread }) {
+	return (
+		<div className="item-row">
+			<Row>
+				<Col className={`text-nowrap ${level?.toLowerCase()}`}>{level?.toUpperCase() || 'UNKNOWN'}</Col>
+				<Col className="text-nowrap">{new Date(timestamp || null).toLocaleDateString()}</Col>
+				<Col className="text-nowrap">{new Date(timestamp || null).toLocaleTimeString()}</Col>
+				<Col className="text-nowrap">{thread}</Col>
+				<Col className="text-nowrap">{tags?.join(', ')}</Col>
+				<Col xs="12" className="mt-1">
+					{isObject(message) && message.error ? message.error : JSON.stringify(message).slice(1, -1)}
+				</Col>
+			</Row>
+		</div>
+	);
+}
+
+export default LogsRow;
diff --git a/src/components/instance/logs/Logs.js b/src/components/instance/logs/Logs.js
new file mode 100644
index 000000000..9d59527eb
--- /dev/null
+++ b/src/components/instance/logs/Logs.js
@@ -0,0 +1,105 @@
+import React, { useState, useEffect } from 'react';
+import { useStoreState } from 'pullstate';
+import { Card, CardBody, Row, Col, Button } from 'reactstrap';
+import useInterval from 'use-interval';
+import { ErrorBoundary } from 'react-error-boundary';
+import { useParams } from 'react-router-dom';
+
+import instanceState from '../../../functions/state/instanceState';
+import config from '../../../config';
+
+import readLog from '../../../functions/api/instance/readLog';
+import LogRow from './LogRow';
+import ErrorFallback from '../../shared/ErrorFallback';
+import addError from '../../../functions/api/lms/addError';
+
+let controller;
+
+function Logs() {
+	const { compute_stack_id } = useParams();
+	const auth = useStoreState(instanceState, (s) => s.auth);
+	const url = useStoreState(instanceState, (s) => s.url);
+	const logs = useStoreState(instanceState, (s) => s.logs, [compute_stack_id]);
+	const logsError = useStoreState(instanceState, (s) => s.logsError);
+	const [autoRefresh, setAutoRefresh] = useState(false);
+	const [loading, setLoading] = useState(true);
+	const [lastUpdate, setLastUpdate] = useState(true);
+
+	useEffect(() => {
+		let isMounted = true;
+
+		const fetchData = async () => {
+			setLoading(true);
+			controller = new AbortController();
+			await readLog({ auth, url, signal: controller.signal, currentLogCount: logs?.length || 0 });
+			if (isMounted) setLoading(false);
+		};
+
+		if (auth) fetchData();
+
+		return () => {
+			controller?.abort();
+			isMounted = false;
+		};
+		// eslint-disable-next-line
+	}, [auth, lastUpdate]);
+
+	useInterval(() => auth && autoRefresh && setLastUpdate(Date.now()), config.refresh_content_interval);
+
+	return (
+		<ErrorBoundary
+			onError={(error, componentStack) => addError({ error: { message: error.message, componentStack } })}
+			FallbackComponent={ErrorFallback}
+		>
+			<Row className="floating-card-header">
+				<Col>logs</Col>
+				<Col className="text-end">
+					<Button color="link" title="Update Logs" className="me-2" onClick={() => setLastUpdate(Date.now())}>
+						<i className={`fa ${loading ? 'fa-spinner fa-spin' : 'fa-sync-alt'}`} />
+					</Button>
+					<Button color="link" title="Turn on autofresh" onClick={() => setAutoRefresh(!autoRefresh)}>
+						<span className="me-2">auto</span>
+						<i className={`fa fa-lg fa-toggle-${autoRefresh ? 'on' : 'off'}`} />
+					</Button>
+				</Col>
+			</Row>
+			<Card className="my-3">
+				<CardBody className="item-list">
+					<Row xs="5" className="header">
+						<Col className="text-bold text-nowrap">status</Col>
+						<Col className="text-bold text-nowrap">date</Col>
+						<Col className="text-left text-bold text-nowrap">
+							{!loading && logsError ? (
+								<span className="text-danger">log fetch error: {new Date().toLocaleTimeString().toLowerCase()}</span>
+							) : (
+								<span>time</span>
+							)}
+						</Col>
+						<Col className="text-bold text-nowrap">thread</Col>
+						<Col className="text-bold text-nowrap">tags</Col>
+					</Row>
+					<hr className="mt-1 mb-0" />
+					<div className="item-scroller">
+						{loading && !logs && !autoRefresh ? (
+							<div className="pt-5 text-center">
+								<i className="fa fa-spinner fa-spin text-lightgrey" />
+							</div>
+						) : logs && logs.length ? (
+							logs.map((l, i) => (
+								// eslint-disable-next-line
+								<LogRow key={i} {...l} />
+							))
+						) : logs && !logs.length ? (
+							<div className="pt-5 text-center">no logs found</div>
+						) : (
+							<div className="pt-5 text-center">no logs found in this view</div>
+						)}
+					</div>
+				</CardBody>
+			</Card>
+			<br />
+		</ErrorBoundary>
+	);
+}
+
+export default Logs;
diff --git a/src/components/instance/logs/index.js b/src/components/instance/logs/index.js
new file mode 100644
index 000000000..960c6b06f
--- /dev/null
+++ b/src/components/instance/logs/index.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Col, Row } from 'reactstrap';
+import Logs from './Logs';
+
+function LogsIndex() {
+	return (
+		<Row id="config">
+			<Col lg="2" xs="12">
+				<h1>Logs Sidebar</h1>
+			</Col>
+			<Col lg="10" xs="12">
+				<Logs />
+			</Col>
+		</Row>
+	);
+}
+
+export default LogsIndex;
diff --git a/src/components/instance/routes.js b/src/components/instance/routes.js
index c2f97bcfc..9dced4a0b 100644
--- a/src/components/instance/routes.js
+++ b/src/components/instance/routes.js
@@ -10,6 +10,7 @@ import supportsApplications from '../../functions/instance/functions/supportsApp
 const Cluster = lazy(() => import(/* webpackChunkName: "instance-cluster" */ './replication'));
 const Config = lazy(() => import(/* webpackChunkName: "instance-config" */ './config'));
 const Metrics = lazy(() => import(/* webpackChunkName: "instance-status" */ './status'));
+const LogsIndex = lazy(() => import(/* webpackChunkName: "instance-logs" */ './logs'));
 const Users = lazy(() => import(/* webpackChunkName: "instance-users" */ './users'));
 const Roles = lazy(() => import(/* webpackChunkName: "instance-roles" */ './roles'));
 const Functions = lazy(() => import(/* webpackChunkName: "custom-functions" */ './functions'));
@@ -90,6 +91,13 @@ const routes = ({ super_user, version = null }) => {
 		label: 'status',
 		icon: 'tachometer-alt',
 	};
+	const logs = {
+		element: <LogsIndex />,
+		path: `logs`,
+		link: 'logs',
+		label: 'logs',
+		icon: 'tachometer-alt',
+	};
 
 	const configure = {
 		element: <Config />,
@@ -100,11 +108,11 @@ const routes = ({ super_user, version = null }) => {
 	};
 
 	if (config.is_local_studio && super_user) {
-		return [browse, users, roles, cluster, useApplications ? applications : functions, metrics, configure];
+		return [browse, users, roles, cluster, useApplications ? applications : functions, metrics, configure, logs];
 	}
 
 	if (super_user) {
-		return [browse, users, roles, cluster, useApplications ? applications : functions, metrics, configure];
+		return [browse, users, roles, cluster, useApplications ? applications : functions, metrics, configure, logs];
 	}
 
 	if (config.is_local_studio) {

From 21e222c1f7f22fb65782bb8c4b75c74477686e41 Mon Sep 17 00:00:00 2001
From: Austin Akers <austin@harperdb.io>
Date: Thu, 23 Jan 2025 13:51:46 -0800
Subject: [PATCH 02/20] parsed the logs and put them in a code preview tag

---
 src/components/instance/logs/LogRow.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/instance/logs/LogRow.js b/src/components/instance/logs/LogRow.js
index d81c3a784..6b146be24 100644
--- a/src/components/instance/logs/LogRow.js
+++ b/src/components/instance/logs/LogRow.js
@@ -12,8 +12,15 @@ function LogsRow({ level, timestamp, message, tags, thread }) {
 				<Col className="text-nowrap">{new Date(timestamp || null).toLocaleTimeString()}</Col>
 				<Col className="text-nowrap">{thread}</Col>
 				<Col className="text-nowrap">{tags?.join(', ')}</Col>
+				{
+					// TODO: Create a "more info" button to show the full log details with the message
+					// TODO: Move the message to a full logs details tray/modal
+				}
 				<Col xs="12" className="mt-1">
-					{isObject(message) && message.error ? message.error : JSON.stringify(message).slice(1, -1)}
+					{/* {isObject(message) && message.error ? message.error : JSON.stringify(message).slice(1, -1)} */}
+					<pre>
+						<code>{isObject(message) ? JSON.stringify(message) : message}</code>
+					</pre>
 				</Col>
 			</Row>
 		</div>

From 3cd59e21e203572c8e26fb865c6dcb8414d7a84e Mon Sep 17 00:00:00 2001
From: Austin Akers <austin@harperdb.io>
Date: Thu, 23 Jan 2025 14:18:34 -0800
Subject: [PATCH 03/20] fixed linting issues

---
 src/app.scss                             |   1 +
 src/assets/styles/pages/_logs.scss       |  62 +++++++++++++
 src/components/instance/logs/Logs.js     |  11 ++-
 src/components/instance/logs/index.js    |   2 +-
 src/components/instance/status/LogRow.js |  23 -----
 src/components/instance/status/Logs.js   | 105 -----------------------
 src/components/instance/status/index.js  |   8 +-
 7 files changed, 74 insertions(+), 138 deletions(-)
 create mode 100644 src/assets/styles/pages/_logs.scss
 delete mode 100644 src/components/instance/status/LogRow.js
 delete mode 100644 src/components/instance/status/Logs.js

diff --git a/src/app.scss b/src/app.scss
index 00327507f..d7cbb705f 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -24,6 +24,7 @@
 @import 'assets/styles/pages/organizations';
 @import 'assets/styles/pages/organization';
 @import 'assets/styles/pages/auth';
+@import 'assets/styles/pages/logs';
 @import 'assets/styles/pages/config';
 @import 'assets/styles/pages/clustering';
 @import 'assets/styles/pages/resources';
diff --git a/src/assets/styles/pages/_logs.scss b/src/assets/styles/pages/_logs.scss
new file mode 100644
index 000000000..327d8ef52
--- /dev/null
+++ b/src/assets/styles/pages/_logs.scss
@@ -0,0 +1,62 @@
+#logs {
+	.instance-details {
+		.card-body {
+			padding-bottom: 0;
+		}
+
+		.nowrap-scroll {
+			overflow: hidden;
+			overflow-x: auto;
+			white-space: nowrap;
+		}
+	}
+
+	.item-list {
+		font-size: 0.65rem;
+		padding: 0;
+
+		.header {
+			padding: 16px 16px 8px;
+		}
+
+		hr {
+			background-color: $color-grey !important;
+		}
+
+		.item-scroller {
+			height: calc(100vh - 434px);
+			overflow: hidden auto;
+
+			.item-row {
+				border-bottom: 1px solid $lightest-grey-overlay;
+				padding: 16px;
+
+				.text-nowrap {
+					overflow: hidden;
+					text-overflow: ellipsis;
+				}
+
+				.error,
+				.fatal {
+					color: $color-danger;
+				}
+
+				.warn {
+					color: $color-warning;
+				}
+
+				.complete,
+				.notify {
+					color: $color-success;
+				}
+			}
+		}
+	}
+
+	.configLoader {
+		height: 38px;
+		padding-top: 15px;
+		text-align: center;
+		width: 100%;
+	}
+}
diff --git a/src/components/instance/logs/Logs.js b/src/components/instance/logs/Logs.js
index 9d59527eb..43b7ba66f 100644
--- a/src/components/instance/logs/Logs.js
+++ b/src/components/instance/logs/Logs.js
@@ -85,9 +85,14 @@ function Logs() {
 								<i className="fa fa-spinner fa-spin text-lightgrey" />
 							</div>
 						) : logs && logs.length ? (
-							logs.map((l, i) => (
-								// eslint-disable-next-line
-								<LogRow key={i} {...l} />
+							logs.map((log) => (
+								<LogRow
+									level={log.level}
+									timestamp={log.timestamp}
+									message={log.message}
+									tags={log.tags}
+									thread={log.thread}
+								/>
 							))
 						) : logs && !logs.length ? (
 							<div className="pt-5 text-center">no logs found</div>
diff --git a/src/components/instance/logs/index.js b/src/components/instance/logs/index.js
index 960c6b06f..aae590c69 100644
--- a/src/components/instance/logs/index.js
+++ b/src/components/instance/logs/index.js
@@ -4,7 +4,7 @@ import Logs from './Logs';
 
 function LogsIndex() {
 	return (
-		<Row id="config">
+		<Row id="logs">
 			<Col lg="2" xs="12">
 				<h1>Logs Sidebar</h1>
 			</Col>
diff --git a/src/components/instance/status/LogRow.js b/src/components/instance/status/LogRow.js
deleted file mode 100644
index d81c3a784..000000000
--- a/src/components/instance/status/LogRow.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import { Row, Col } from 'reactstrap';
-
-import isObject from '../../../functions/util/isObject';
-
-function LogsRow({ level, timestamp, message, tags, thread }) {
-	return (
-		<div className="item-row">
-			<Row>
-				<Col className={`text-nowrap ${level?.toLowerCase()}`}>{level?.toUpperCase() || 'UNKNOWN'}</Col>
-				<Col className="text-nowrap">{new Date(timestamp || null).toLocaleDateString()}</Col>
-				<Col className="text-nowrap">{new Date(timestamp || null).toLocaleTimeString()}</Col>
-				<Col className="text-nowrap">{thread}</Col>
-				<Col className="text-nowrap">{tags?.join(', ')}</Col>
-				<Col xs="12" className="mt-1">
-					{isObject(message) && message.error ? message.error : JSON.stringify(message).slice(1, -1)}
-				</Col>
-			</Row>
-		</div>
-	);
-}
-
-export default LogsRow;
diff --git a/src/components/instance/status/Logs.js b/src/components/instance/status/Logs.js
deleted file mode 100644
index 9d59527eb..000000000
--- a/src/components/instance/status/Logs.js
+++ /dev/null
@@ -1,105 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useStoreState } from 'pullstate';
-import { Card, CardBody, Row, Col, Button } from 'reactstrap';
-import useInterval from 'use-interval';
-import { ErrorBoundary } from 'react-error-boundary';
-import { useParams } from 'react-router-dom';
-
-import instanceState from '../../../functions/state/instanceState';
-import config from '../../../config';
-
-import readLog from '../../../functions/api/instance/readLog';
-import LogRow from './LogRow';
-import ErrorFallback from '../../shared/ErrorFallback';
-import addError from '../../../functions/api/lms/addError';
-
-let controller;
-
-function Logs() {
-	const { compute_stack_id } = useParams();
-	const auth = useStoreState(instanceState, (s) => s.auth);
-	const url = useStoreState(instanceState, (s) => s.url);
-	const logs = useStoreState(instanceState, (s) => s.logs, [compute_stack_id]);
-	const logsError = useStoreState(instanceState, (s) => s.logsError);
-	const [autoRefresh, setAutoRefresh] = useState(false);
-	const [loading, setLoading] = useState(true);
-	const [lastUpdate, setLastUpdate] = useState(true);
-
-	useEffect(() => {
-		let isMounted = true;
-
-		const fetchData = async () => {
-			setLoading(true);
-			controller = new AbortController();
-			await readLog({ auth, url, signal: controller.signal, currentLogCount: logs?.length || 0 });
-			if (isMounted) setLoading(false);
-		};
-
-		if (auth) fetchData();
-
-		return () => {
-			controller?.abort();
-			isMounted = false;
-		};
-		// eslint-disable-next-line
-	}, [auth, lastUpdate]);
-
-	useInterval(() => auth && autoRefresh && setLastUpdate(Date.now()), config.refresh_content_interval);
-
-	return (
-		<ErrorBoundary
-			onError={(error, componentStack) => addError({ error: { message: error.message, componentStack } })}
-			FallbackComponent={ErrorFallback}
-		>
-			<Row className="floating-card-header">
-				<Col>logs</Col>
-				<Col className="text-end">
-					<Button color="link" title="Update Logs" className="me-2" onClick={() => setLastUpdate(Date.now())}>
-						<i className={`fa ${loading ? 'fa-spinner fa-spin' : 'fa-sync-alt'}`} />
-					</Button>
-					<Button color="link" title="Turn on autofresh" onClick={() => setAutoRefresh(!autoRefresh)}>
-						<span className="me-2">auto</span>
-						<i className={`fa fa-lg fa-toggle-${autoRefresh ? 'on' : 'off'}`} />
-					</Button>
-				</Col>
-			</Row>
-			<Card className="my-3">
-				<CardBody className="item-list">
-					<Row xs="5" className="header">
-						<Col className="text-bold text-nowrap">status</Col>
-						<Col className="text-bold text-nowrap">date</Col>
-						<Col className="text-left text-bold text-nowrap">
-							{!loading && logsError ? (
-								<span className="text-danger">log fetch error: {new Date().toLocaleTimeString().toLowerCase()}</span>
-							) : (
-								<span>time</span>
-							)}
-						</Col>
-						<Col className="text-bold text-nowrap">thread</Col>
-						<Col className="text-bold text-nowrap">tags</Col>
-					</Row>
-					<hr className="mt-1 mb-0" />
-					<div className="item-scroller">
-						{loading && !logs && !autoRefresh ? (
-							<div className="pt-5 text-center">
-								<i className="fa fa-spinner fa-spin text-lightgrey" />
-							</div>
-						) : logs && logs.length ? (
-							logs.map((l, i) => (
-								// eslint-disable-next-line
-								<LogRow key={i} {...l} />
-							))
-						) : logs && !logs.length ? (
-							<div className="pt-5 text-center">no logs found</div>
-						) : (
-							<div className="pt-5 text-center">no logs found in this view</div>
-						)}
-					</div>
-				</CardBody>
-			</Card>
-			<br />
-		</ErrorBoundary>
-	);
-}
-
-export default Logs;
diff --git a/src/components/instance/status/index.js b/src/components/instance/status/index.js
index c04c0f2d9..7ff017c65 100644
--- a/src/components/instance/status/index.js
+++ b/src/components/instance/status/index.js
@@ -2,7 +2,6 @@ import React from 'react';
 import { Col, Row } from 'reactstrap';
 
 import SystemInfo from './SystemInfo';
-import Logs from './Logs';
 import Jobs from './Jobs';
 import Alarms from './Alarms';
 import config from '../../../config';
@@ -13,14 +12,11 @@ function MetricsIndex() {
 			<Col xs="12">
 				<SystemInfo />
 			</Col>
-			<Col lg="6" xs="12">
-				<Logs />
-			</Col>
-			<Col lg={config.is_local_studio ? 6 : 3} xs="12">
+			<Col lg={6} xs="12">
 				<Jobs />
 			</Col>
 			{!config.is_local_studio && (
-				<Col lg="3" xs="12">
+				<Col lg="6" xs="12">
 					<Alarms />
 				</Col>
 			)}

From 396ef571a5671b9c045ff2f5e12dcaf99f35a3b3 Mon Sep 17 00:00:00 2001
From: Austin Akers <austin@harperdb.io>
Date: Fri, 24 Jan 2025 13:10:05 -0800
Subject: [PATCH 04/20] added row clicking

---
 src/components/instance/logs/LogRow.js | 38 ++++++++++++--------------
 src/components/instance/logs/Logs.js   | 17 +++++++-----
 src/components/instance/logs/index.js  |  2 +-
 3 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/src/components/instance/logs/LogRow.js b/src/components/instance/logs/LogRow.js
index 6b146be24..bf2b9f2df 100644
--- a/src/components/instance/logs/LogRow.js
+++ b/src/components/instance/logs/LogRow.js
@@ -3,27 +3,25 @@ import { Row, Col } from 'reactstrap';
 
 import isObject from '../../../functions/util/isObject';
 
-function LogsRow({ level, timestamp, message, tags, thread }) {
+function LogsRow({ onRowClick, level, timestamp, message, tags, thread }) {
 	return (
-		<div className="item-row">
-			<Row>
-				<Col className={`text-nowrap ${level?.toLowerCase()}`}>{level?.toUpperCase() || 'UNKNOWN'}</Col>
-				<Col className="text-nowrap">{new Date(timestamp || null).toLocaleDateString()}</Col>
-				<Col className="text-nowrap">{new Date(timestamp || null).toLocaleTimeString()}</Col>
-				<Col className="text-nowrap">{thread}</Col>
-				<Col className="text-nowrap">{tags?.join(', ')}</Col>
-				{
-					// TODO: Create a "more info" button to show the full log details with the message
-					// TODO: Move the message to a full logs details tray/modal
-				}
-				<Col xs="12" className="mt-1">
-					{/* {isObject(message) && message.error ? message.error : JSON.stringify(message).slice(1, -1)} */}
-					<pre>
-						<code>{isObject(message) ? JSON.stringify(message) : message}</code>
-					</pre>
-				</Col>
-			</Row>
-		</div>
+		<Row className="item-row" onClick={onRowClick}>
+			<Col className={`text-nowrap ${level?.toLowerCase()}`}>{level?.toUpperCase() || 'UNKNOWN'}</Col>
+			<Col className="text-nowrap">{new Date(timestamp || null).toLocaleDateString()}</Col>
+			<Col className="text-nowrap">{new Date(timestamp || null).toLocaleTimeString()}</Col>
+			<Col className="text-nowrap">{thread}</Col>
+			<Col className="text-nowrap">{tags?.join(', ')}</Col>
+			{
+				// TODO: Create a "more info" button to show the full log details with the message
+				// TODO: Move the message to a full logs details tray/modal
+			}
+			<Col xs="12" className="mt-1">
+				{/* {isObject(message) && message.error ? message.error : JSON.stringify(message).slice(1, -1)} */}
+				<pre>
+					<code>{isObject(message) ? JSON.stringify(message) : message}</code>
+				</pre>
+			</Col>
+		</Row>
 	);
 }
 
diff --git a/src/components/instance/logs/Logs.js b/src/components/instance/logs/Logs.js
index 43b7ba66f..e8e0e18ce 100644
--- a/src/components/instance/logs/Logs.js
+++ b/src/components/instance/logs/Logs.js
@@ -65,18 +65,18 @@ function Logs() {
 			</Row>
 			<Card className="my-3">
 				<CardBody className="item-list">
-					<Row xs="5" className="header">
-						<Col className="text-bold text-nowrap">status</Col>
-						<Col className="text-bold text-nowrap">date</Col>
+					<Row xs="6" className="header">
+						<Col className="text-bold text-nowrap">Status</Col>
+						<Col className="text-bold text-nowrap">Date</Col>
 						<Col className="text-left text-bold text-nowrap">
 							{!loading && logsError ? (
 								<span className="text-danger">log fetch error: {new Date().toLocaleTimeString().toLowerCase()}</span>
 							) : (
-								<span>time</span>
+								<span>Time</span>
 							)}
 						</Col>
-						<Col className="text-bold text-nowrap">thread</Col>
-						<Col className="text-bold text-nowrap">tags</Col>
+						<Col className="text-bold text-nowrap">Thread</Col>
+						<Col className="text-bold text-nowrap">Tags</Col>
 					</Row>
 					<hr className="mt-1 mb-0" />
 					<div className="item-scroller">
@@ -85,13 +85,16 @@ function Logs() {
 								<i className="fa fa-spinner fa-spin text-lightgrey" />
 							</div>
 						) : logs && logs.length ? (
-							logs.map((log) => (
+							logs.map((log, index) => (
 								<LogRow
+									// eslint-disable-next-line react/no-array-index-key
+									key={log.timestamp + index} // NOTE - Timestamp is not entirely unique, but it's the best we have for now, added index for "improved" uniqueness
 									level={log.level}
 									timestamp={log.timestamp}
 									message={log.message}
 									tags={log.tags}
 									thread={log.thread}
+									onRowClick={() => {}}
 								/>
 							))
 						) : logs && !logs.length ? (
diff --git a/src/components/instance/logs/index.js b/src/components/instance/logs/index.js
index aae590c69..b25d4bfa0 100644
--- a/src/components/instance/logs/index.js
+++ b/src/components/instance/logs/index.js
@@ -6,7 +6,7 @@ function LogsIndex() {
 	return (
 		<Row id="logs">
 			<Col lg="2" xs="12">
-				<h1>Logs Sidebar</h1>
+				<p>Logs Sidebar</p>
 			</Col>
 			<Col lg="10" xs="12">
 				<Logs />

From 5fa4ef57e6323b4c82163535e092b90bd5e5ec08 Mon Sep 17 00:00:00 2001
From: Austin Akers <austin@harperdb.io>
Date: Fri, 24 Jan 2025 14:45:43 -0800
Subject: [PATCH 05/20] created modal on row click

---
 src/components/instance/logs/LogRow.js | 10 ------
 src/components/instance/logs/Logs.js   | 44 +++++++++++++++++++++++---
 2 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/src/components/instance/logs/LogRow.js b/src/components/instance/logs/LogRow.js
index bf2b9f2df..24601647a 100644
--- a/src/components/instance/logs/LogRow.js
+++ b/src/components/instance/logs/LogRow.js
@@ -11,16 +11,6 @@ function LogsRow({ onRowClick, level, timestamp, message, tags, thread }) {
 			<Col className="text-nowrap">{new Date(timestamp || null).toLocaleTimeString()}</Col>
 			<Col className="text-nowrap">{thread}</Col>
 			<Col className="text-nowrap">{tags?.join(', ')}</Col>
-			{
-				// TODO: Create a "more info" button to show the full log details with the message
-				// TODO: Move the message to a full logs details tray/modal
-			}
-			<Col xs="12" className="mt-1">
-				{/* {isObject(message) && message.error ? message.error : JSON.stringify(message).slice(1, -1)} */}
-				<pre>
-					<code>{isObject(message) ? JSON.stringify(message) : message}</code>
-				</pre>
-			</Col>
 		</Row>
 	);
 }
diff --git a/src/components/instance/logs/Logs.js b/src/components/instance/logs/Logs.js
index e8e0e18ce..75c881ed7 100644
--- a/src/components/instance/logs/Logs.js
+++ b/src/components/instance/logs/Logs.js
@@ -1,12 +1,14 @@
 import React, { useState, useEffect } from 'react';
 import { useStoreState } from 'pullstate';
-import { Card, CardBody, Row, Col, Button } from 'reactstrap';
+import { Card, CardBody, Row, Col, Button, Modal, ModalHeader, ModalBody } from 'reactstrap';
 import useInterval from 'use-interval';
 import { ErrorBoundary } from 'react-error-boundary';
 import { useParams } from 'react-router-dom';
 
 import instanceState from '../../../functions/state/instanceState';
+import appState from '../../../functions/state/appState';
 import config from '../../../config';
+import isObject from '../../../functions/util/isObject';
 
 import readLog from '../../../functions/api/instance/readLog';
 import LogRow from './LogRow';
@@ -21,9 +23,14 @@ function Logs() {
 	const url = useStoreState(instanceState, (s) => s.url);
 	const logs = useStoreState(instanceState, (s) => s.logs, [compute_stack_id]);
 	const logsError = useStoreState(instanceState, (s) => s.logsError);
+	const theme = useStoreState(appState, (s) => s.theme);
 	const [autoRefresh, setAutoRefresh] = useState(false);
 	const [loading, setLoading] = useState(true);
 	const [lastUpdate, setLastUpdate] = useState(true);
+	const [isModalOpen, setIsModalOpen] = useState(false);
+	const [selectedLogInfo, setSelectedLogInfo] = useState({});
+
+	const toggleModal = () => setIsModalOpen(!isModalOpen);
 
 	useEffect(() => {
 		let isMounted = true;
@@ -65,7 +72,7 @@ function Logs() {
 			</Row>
 			<Card className="my-3">
 				<CardBody className="item-list">
-					<Row xs="6" className="header">
+					<Row xs="5" className="header">
 						<Col className="text-bold text-nowrap">Status</Col>
 						<Col className="text-bold text-nowrap">Date</Col>
 						<Col className="text-left text-bold text-nowrap">
@@ -88,13 +95,16 @@ function Logs() {
 							logs.map((log, index) => (
 								<LogRow
 									// eslint-disable-next-line react/no-array-index-key
-									key={log.timestamp + index} // NOTE - Timestamp is not entirely unique, but it's the best we have for now, added index for "improved" uniqueness
+									key={log.timestamp + index} // NOTE - Timestamp is not entirely unique, but it's the best we have for now, added index for "improved" uniqueness in rendering this list of logs,
 									level={log.level}
 									timestamp={log.timestamp}
 									message={log.message}
 									tags={log.tags}
 									thread={log.thread}
-									onRowClick={() => {}}
+									onRowClick={() => {
+										setSelectedLogInfo(log);
+										toggleModal();
+									}}
 								/>
 							))
 						) : logs && !logs.length ? (
@@ -106,6 +116,32 @@ function Logs() {
 				</CardBody>
 			</Card>
 			<br />
+			<Modal isOpen={isModalOpen} className={theme} centered fade={false}>
+				<ModalHeader toggle={toggleModal}>View Log Info</ModalHeader>
+				<ModalBody>
+					{selectedLogInfo && (
+						<div>
+							<b>Level:</b> {selectedLogInfo?.level}
+							<br />
+							<b>Timestamp:</b> {selectedLogInfo?.timestamp}
+							<br />
+							<b>Thread:</b> {selectedLogInfo?.thread}
+							<br />
+							<b>Tags:</b> {selectedLogInfo?.tags?.join(', ')}
+							<br />
+							{/* <b>Message:</b> {isObject(logs[selectedLogInfo]?.message) ? JSON.stringify(logs[selectedLogInfo]?.message) : logs[selectedLogInfo]?.message} */}
+							<pre>
+								<code>
+									{isObject(selectedLogInfo?.message)
+										? JSON.stringify(selectedLogInfo?.message)
+										: selectedLogInfo?.message}
+								</code>
+							</pre>
+						</div>
+					)}
+					testing
+				</ModalBody>
+			</Modal>
 		</ErrorBoundary>
 	);
 }

From 4ea5e4b07b03cec4e41005253afa195eef5ab611 Mon Sep 17 00:00:00 2001
From: Austin Akers <austin@harperdb.io>
Date: Fri, 24 Jan 2025 20:53:23 -0800
Subject: [PATCH 06/20] updated log table view and styling/rendering

---
 src/assets/styles/pages/_logs.scss     |  5 +-
 src/components/instance/logs/LogRow.js | 31 +++++++++---
 src/components/instance/logs/Logs.js   | 66 +++++++++++++++++---------
 3 files changed, 71 insertions(+), 31 deletions(-)

diff --git a/src/assets/styles/pages/_logs.scss b/src/assets/styles/pages/_logs.scss
index 327d8ef52..1eee5ede3 100644
--- a/src/assets/styles/pages/_logs.scss
+++ b/src/assets/styles/pages/_logs.scss
@@ -1,4 +1,5 @@
 #logs {
+	height: 100%;
 	.instance-details {
 		.card-body {
 			padding-bottom: 0;
@@ -24,12 +25,12 @@
 		}
 
 		.item-scroller {
-			height: calc(100vh - 434px);
+			height: calc(100vh - 275px);
 			overflow: hidden auto;
 
 			.item-row {
 				border-bottom: 1px solid $lightest-grey-overlay;
-				padding: 16px;
+				padding: 8px;
 
 				.text-nowrap {
 					overflow: hidden;
diff --git a/src/components/instance/logs/LogRow.js b/src/components/instance/logs/LogRow.js
index 24601647a..3d30b0f72 100644
--- a/src/components/instance/logs/LogRow.js
+++ b/src/components/instance/logs/LogRow.js
@@ -5,12 +5,31 @@ import isObject from '../../../functions/util/isObject';
 
 function LogsRow({ onRowClick, level, timestamp, message, tags, thread }) {
 	return (
-		<Row className="item-row" onClick={onRowClick}>
-			<Col className={`text-nowrap ${level?.toLowerCase()}`}>{level?.toUpperCase() || 'UNKNOWN'}</Col>
-			<Col className="text-nowrap">{new Date(timestamp || null).toLocaleDateString()}</Col>
-			<Col className="text-nowrap">{new Date(timestamp || null).toLocaleTimeString()}</Col>
-			<Col className="text-nowrap">{thread}</Col>
-			<Col className="text-nowrap">{tags?.join(', ')}</Col>
+		<Row xs="12" md="12" className="item-row" onClick={onRowClick}>
+			<Col xs="2" md="1" className={`text-nowrap ${level?.toLowerCase()}`}>
+				{level?.toUpperCase() || 'UNKNOWN'}
+			</Col>
+			<Col xs="2" md="2" className="">
+				{new Date(timestamp || null).toLocaleDateString()}
+			</Col>
+			<Col xs="2" md="2" className="">
+				{new Date(timestamp || null).toLocaleTimeString()}
+			</Col>
+			<Col xs="2" md="1" className="">
+				{thread}
+			</Col>
+			<Col xs="2" md="2" className="">
+				{tags?.join(', ')}
+			</Col>
+			<Col xs="2" md="4" className="">
+				{isObject(message) && message.error ? (
+					message.error
+				) : (
+					<pre>
+						<code>{message}</code>
+					</pre>
+				)}
+			</Col>
 		</Row>
 	);
 }
diff --git a/src/components/instance/logs/Logs.js b/src/components/instance/logs/Logs.js
index 75c881ed7..fee083dee 100644
--- a/src/components/instance/logs/Logs.js
+++ b/src/components/instance/logs/Logs.js
@@ -72,18 +72,29 @@ function Logs() {
 			</Row>
 			<Card className="my-3">
 				<CardBody className="item-list">
-					<Row xs="5" className="header">
-						<Col className="text-bold text-nowrap">Status</Col>
-						<Col className="text-bold text-nowrap">Date</Col>
-						<Col className="text-left text-bold text-nowrap">
+					<Row xs="12" md="12" className="header">
+						<Col xs="2" md="1" className="text-bold text-nowrap">
+							Status
+						</Col>
+						<Col xs="2" md="2" className="text-bold text-nowrap">
+							Date
+						</Col>
+						<Col xs="2" md="2" className="text-left text-bold text-nowrap">
 							{!loading && logsError ? (
 								<span className="text-danger">log fetch error: {new Date().toLocaleTimeString().toLowerCase()}</span>
 							) : (
 								<span>Time</span>
 							)}
 						</Col>
-						<Col className="text-bold text-nowrap">Thread</Col>
-						<Col className="text-bold text-nowrap">Tags</Col>
+						<Col xs="2" md="1" className="text-bold text-nowrap">
+							Thread
+						</Col>
+						<Col xs="2" md="2" className="text-bold text-nowrap">
+							Tags
+						</Col>
+						<Col xs="2" md="3" className="text-bold text-nowrap">
+							Message
+						</Col>
 					</Row>
 					<hr className="mt-1 mb-0" />
 					<div className="item-scroller">
@@ -121,25 +132,34 @@ function Logs() {
 				<ModalBody>
 					{selectedLogInfo && (
 						<div>
-							<b>Level:</b> {selectedLogInfo?.level}
-							<br />
-							<b>Timestamp:</b> {selectedLogInfo?.timestamp}
-							<br />
-							<b>Thread:</b> {selectedLogInfo?.thread}
-							<br />
-							<b>Tags:</b> {selectedLogInfo?.tags?.join(', ')}
-							<br />
-							{/* <b>Message:</b> {isObject(logs[selectedLogInfo]?.message) ? JSON.stringify(logs[selectedLogInfo]?.message) : logs[selectedLogInfo]?.message} */}
-							<pre>
-								<code>
-									{isObject(selectedLogInfo?.message)
-										? JSON.stringify(selectedLogInfo?.message)
-										: selectedLogInfo?.message}
-								</code>
-							</pre>
+							<p>
+								<span>Level:</span> {selectedLogInfo?.level}
+							</p>
+
+							<p>
+								<b>Timestamp:</b>
+								{new Date(selectedLogInfo?.timestamp || null).toLocaleDateString()}
+							</p>
+							<p>{selectedLogInfo?.timestamp}</p>
+							<p>
+								<b>Thread:</b> {selectedLogInfo?.thread}
+							</p>
+							<p>
+								<b>Tags:</b> {selectedLogInfo?.tags?.join(', ')}
+							</p>
+							{/* <p>{isObject(selectedLogInfo?.message) && selectedLogInfo?.message.error ? selectedLogInfo?.message.error : JSON.stringify(selectedLogInfo?.message).slice(1, -1)}</p> */}
+							<p className="mb-0">
+								<b>Message:</b>
+							</p>
+							{typeof selectedLogInfo?.message === 'object' ? (
+								<pre>
+									<code>{JSON.stringify(selectedLogInfo?.message)}</code>
+								</pre>
+							) : (
+								<p>{selectedLogInfo?.message}</p>
+							)}
 						</div>
 					)}
-					testing
 				</ModalBody>
 			</Modal>
 		</ErrorBoundary>

From bb9485b42b31e8364a09ffe9cbcb3fc3e46349ce Mon Sep 17 00:00:00 2001
From: Austin Akers <austin@harperdb.io>
Date: Fri, 24 Jan 2025 21:34:23 -0800
Subject: [PATCH 07/20] added styling for Log info modal, added filters to
 readLog api call

---
 src/assets/styles/components/_modal.scss | 19 +++++++++++
 src/components/instance/logs/Logs.js     | 43 ++++++++++++++----------
 src/functions/api/instance/readLog.js    |  4 +--
 3 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/src/assets/styles/components/_modal.scss b/src/assets/styles/components/_modal.scss
index 12f6b4f49..0977ffb9a 100644
--- a/src/assets/styles/components/_modal.scss
+++ b/src/assets/styles/components/_modal.scss
@@ -66,3 +66,22 @@
 		}
 	}
 }
+
+#log-info-modal {
+	.error,
+	.fatal {
+		color: $color-danger;
+	}
+
+	.warn {
+		color: $color-warning;
+	}
+
+	.complete,
+	.notify {
+		color: $color-success;
+	}
+	code {
+		color: initial;
+	}
+}
diff --git a/src/components/instance/logs/Logs.js b/src/components/instance/logs/Logs.js
index fee083dee..f92e722f8 100644
--- a/src/components/instance/logs/Logs.js
+++ b/src/components/instance/logs/Logs.js
@@ -38,7 +38,18 @@ function Logs() {
 		const fetchData = async () => {
 			setLoading(true);
 			controller = new AbortController();
-			await readLog({ auth, url, signal: controller.signal, currentLogCount: logs?.length || 0 });
+			await readLog({
+				auth,
+				url,
+				signal: controller.signal,
+				currentLogCount: logs?.length || 0,
+				filters: {
+					limit: 1000,
+					// from: lastUpdate,
+					// until: Date.now(),
+					// level: '',
+				},
+			});
 			if (isMounted) setLoading(false);
 		};
 
@@ -127,37 +138,33 @@ function Logs() {
 				</CardBody>
 			</Card>
 			<br />
-			<Modal isOpen={isModalOpen} className={theme} centered fade={false}>
+			<Modal isOpen={isModalOpen} className={theme} centered fade={false} id="log-info-modal">
 				<ModalHeader toggle={toggleModal}>View Log Info</ModalHeader>
 				<ModalBody>
 					{selectedLogInfo && (
 						<div>
 							<p>
-								<span>Level:</span> {selectedLogInfo?.level}
+								<b>Level:</b>{' '}
+								<span className={`${selectedLogInfo?.level?.toLowerCase()}`}>
+									{selectedLogInfo?.level?.toUpperCase()}
+								</span>
 							</p>
-
-							<p>
-								<b>Timestamp:</b>
-								{new Date(selectedLogInfo?.timestamp || null).toLocaleDateString()}
+							<p className="mb-1">
+								<b>Timestamp(UTC):</b>
 							</p>
-							<p>{selectedLogInfo?.timestamp}</p>
-							<p>
+							<span>{selectedLogInfo?.timestamp}</span>
+							<p className="mt-4">
 								<b>Thread:</b> {selectedLogInfo?.thread}
 							</p>
 							<p>
 								<b>Tags:</b> {selectedLogInfo?.tags?.join(', ')}
 							</p>
-							{/* <p>{isObject(selectedLogInfo?.message) && selectedLogInfo?.message.error ? selectedLogInfo?.message.error : JSON.stringify(selectedLogInfo?.message).slice(1, -1)}</p> */}
-							<p className="mb-0">
+							<p className="mb-2">
 								<b>Message:</b>
 							</p>
-							{typeof selectedLogInfo?.message === 'object' ? (
-								<pre>
-									<code>{JSON.stringify(selectedLogInfo?.message)}</code>
-								</pre>
-							) : (
-								<p>{selectedLogInfo?.message}</p>
-							)}
+							<code>
+								{selectedLogInfo?.message?.error ? selectedLogInfo?.message?.error : selectedLogInfo?.message}
+							</code>
 						</div>
 					)}
 				</ModalBody>
diff --git a/src/functions/api/instance/readLog.js b/src/functions/api/instance/readLog.js
index 93955afee..7bed3f3da 100644
--- a/src/functions/api/instance/readLog.js
+++ b/src/functions/api/instance/readLog.js
@@ -1,11 +1,11 @@
 import queryInstance from '../queryInstance';
 import instanceState from '../../state/instanceState';
 
-export default async ({ auth, url, signal }) => {
+export default async ({ auth, url, signal, filters }) => {
 	const logs = await queryInstance({
 		operation: {
 			operation: 'read_log',
-			limit: 1000,
+			...filters,
 			order: 'desc',
 		},
 		auth,

From ff5557abc1caaed5d11f40bd7d87e7d7c499e7ae Mon Sep 17 00:00:00 2001
From: Austin Akers <austin@harperdb.io>
Date: Fri, 24 Jan 2025 22:20:14 -0800
Subject: [PATCH 08/20] added filter inputs to logs and filter object to
 readLog call

---
 src/components/instance/logs/Logs.js  |  9 ++---
 src/components/instance/logs/index.js | 51 ++++++++++++++++++++++++---
 src/functions/api/instance/readLog.js |  2 +-
 3 files changed, 50 insertions(+), 12 deletions(-)

diff --git a/src/components/instance/logs/Logs.js b/src/components/instance/logs/Logs.js
index f92e722f8..70f501719 100644
--- a/src/components/instance/logs/Logs.js
+++ b/src/components/instance/logs/Logs.js
@@ -17,7 +17,7 @@ import addError from '../../../functions/api/lms/addError';
 
 let controller;
 
-function Logs() {
+function Logs({ logsFilter }) {
 	const { compute_stack_id } = useParams();
 	const auth = useStoreState(instanceState, (s) => s.auth);
 	const url = useStoreState(instanceState, (s) => s.url);
@@ -43,12 +43,7 @@ function Logs() {
 				url,
 				signal: controller.signal,
 				currentLogCount: logs?.length || 0,
-				filters: {
-					limit: 1000,
-					// from: lastUpdate,
-					// until: Date.now(),
-					// level: '',
-				},
+				logsFilter, // default log limit is 1000
 			});
 			if (isMounted) setLoading(false);
 		};
diff --git a/src/components/instance/logs/index.js b/src/components/instance/logs/index.js
index b25d4bfa0..798c2fca9 100644
--- a/src/components/instance/logs/index.js
+++ b/src/components/instance/logs/index.js
@@ -1,15 +1,58 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Col, Row } from 'reactstrap';
 import Logs from './Logs';
-
+/*
+logFilter object:
+	limit: <number>
+	level: 'notify' | 'error', | 'warn' | 'info' | 'debug' | 'trace'
+	from: DATE (UTC) timestamp
+	until: DATE (UTC) timestamp
+	order: 'asc' | 'desc'
+*/
 function LogsIndex() {
+	const [logsFilter, setLogsFilter] = useState({});
+	const applyFilters = (event) => {
+		event.preventDefault();
+		setLogsFilter({
+			limit: event.target.elements.logLimitInput.value,
+			level: event.target.elements.logLevelSelect.value,
+		});
+	};
+
+	const resetForm = () => {
+		const logsFilterForm = document.getElementById('logs-filter-form');
+		setLogsFilter({});
+		logsFilterForm.reset();
+	};
 	return (
 		<Row id="logs">
 			<Col lg="2" xs="12">
-				<p>Logs Sidebar</p>
+				<h3>Filters</h3>
+				<form onSubmit={applyFilters} id="logs-filter-form">
+					<input name="limit" id="logLimitInput" type="number" max={1000} min={1} placeholder="Log Limit" />
+					<select name="level" id="logLevelSelect">
+						<option hidden disabled value>
+							{' '}
+							-- Select a log level --{' '}
+						</option>
+						<option />
+						<option value="notify">Notify</option>
+						<option value="error">Error</option>
+						<option value="warn">Warn</option>
+						<option value="info">Info</option>
+						<option value="debug">Debug</option>
+						<option value="trace">Trace</option>
+					</select>
+					{/* <input name="from" id="log-from" type='datetime-local' />
+					<input name="until" id="log-until" type='datetime-local' /> */}
+					<button type="submit">Apply</button>
+					<button type="reset" onClick={resetForm}>
+						Reset
+					</button>
+				</form>
 			</Col>
 			<Col lg="10" xs="12">
-				<Logs />
+				<Logs logsFilter={logsFilter} />
 			</Col>
 		</Row>
 	);
diff --git a/src/functions/api/instance/readLog.js b/src/functions/api/instance/readLog.js
index 7bed3f3da..68101d67e 100644
--- a/src/functions/api/instance/readLog.js
+++ b/src/functions/api/instance/readLog.js
@@ -1,7 +1,7 @@
 import queryInstance from '../queryInstance';
 import instanceState from '../../state/instanceState';
 
-export default async ({ auth, url, signal, filters }) => {
+export default async ({ auth, url, signal, logFilter: filters }) => {
 	const logs = await queryInstance({
 		operation: {
 			operation: 'read_log',

From 05e224c2fb3c7126aa60d4135ec1852d493a3bb8 Mon Sep 17 00:00:00 2001
From: Austin Akers <austin@harperdb.io>
Date: Mon, 27 Jan 2025 11:17:30 -0800
Subject: [PATCH 09/20] basic filtering works

---
 src/components/instance/logs/Logs.js  | 34 +++++++++++++--------------
 src/components/instance/logs/index.js |  8 +++++--
 src/functions/api/instance/readLog.js |  6 ++---
 3 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/src/components/instance/logs/Logs.js b/src/components/instance/logs/Logs.js
index 70f501719..eac1fb5f1 100644
--- a/src/components/instance/logs/Logs.js
+++ b/src/components/instance/logs/Logs.js
@@ -17,6 +17,18 @@ import addError from '../../../functions/api/lms/addError';
 
 let controller;
 
+const fetchData = async ({ auth, url, logsFilter }) => {
+	console.log('logsFilter', logsFilter);
+	controller = new AbortController();
+	await readLog({
+		auth,
+		url,
+		signal: controller.signal,
+		// currentLogCount: logs?.length || 0,
+		logsFilter, // default log limit is 1000
+	});
+};
+
 function Logs({ logsFilter }) {
 	const { compute_stack_id } = useParams();
 	const auth = useStoreState(instanceState, (s) => s.auth);
@@ -33,29 +45,17 @@ function Logs({ logsFilter }) {
 	const toggleModal = () => setIsModalOpen(!isModalOpen);
 
 	useEffect(() => {
-		let isMounted = true;
-
-		const fetchData = async () => {
+		if (auth) {
 			setLoading(true);
-			controller = new AbortController();
-			await readLog({
-				auth,
-				url,
-				signal: controller.signal,
-				currentLogCount: logs?.length || 0,
-				logsFilter, // default log limit is 1000
-			});
-			if (isMounted) setLoading(false);
-		};
-
-		if (auth) fetchData();
+			fetchData({ auth, url, logsFilter });
+			setLoading(false);
+		}
 
 		return () => {
 			controller?.abort();
-			isMounted = false;
 		};
 		// eslint-disable-next-line
-	}, [auth, lastUpdate]);
+	}, [auth, lastUpdate, logsFilter]);
 
 	useInterval(() => auth && autoRefresh && setLastUpdate(Date.now()), config.refresh_content_interval);
 
diff --git a/src/components/instance/logs/index.js b/src/components/instance/logs/index.js
index 798c2fca9..d418179d8 100644
--- a/src/components/instance/logs/index.js
+++ b/src/components/instance/logs/index.js
@@ -14,8 +14,12 @@ function LogsIndex() {
 	const applyFilters = (event) => {
 		event.preventDefault();
 		setLogsFilter({
-			limit: event.target.elements.logLimitInput.value,
-			level: event.target.elements.logLevelSelect.value,
+			start: 0,
+			limit: parseInt(event.target.elements.logLimitInput.value, 10) || 1000,
+			level: event.target.elements.logLevelSelect.value || undefined,
+			from: undefined,
+			until: undefined,
+			order: 'desc',
 		});
 	};
 
diff --git a/src/functions/api/instance/readLog.js b/src/functions/api/instance/readLog.js
index 68101d67e..ff1cf290f 100644
--- a/src/functions/api/instance/readLog.js
+++ b/src/functions/api/instance/readLog.js
@@ -1,12 +1,12 @@
 import queryInstance from '../queryInstance';
 import instanceState from '../../state/instanceState';
 
-export default async ({ auth, url, signal, logFilter: filters }) => {
+export default async ({ auth, url, signal, logsFilter }) => {
+	console.log('readLog', logsFilter);
 	const logs = await queryInstance({
 		operation: {
 			operation: 'read_log',
-			...filters,
-			order: 'desc',
+			...logsFilter,
 		},
 		auth,
 		url,

From 923c61836ded192865e9625a17e3f5ab85d3daec Mon Sep 17 00:00:00 2001
From: Austin Akers <austin@harperdb.io>
Date: Mon, 27 Jan 2025 14:33:58 -0800
Subject: [PATCH 10/20] filtering logs work

---
 src/components/instance/logs/Logs.js  |  4 +--
 src/components/instance/logs/index.js | 47 +++++++++++++++++++++++----
 src/functions/api/instance/readLog.js |  1 -
 3 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/src/components/instance/logs/Logs.js b/src/components/instance/logs/Logs.js
index eac1fb5f1..4385cd562 100644
--- a/src/components/instance/logs/Logs.js
+++ b/src/components/instance/logs/Logs.js
@@ -8,7 +8,6 @@ import { useParams } from 'react-router-dom';
 import instanceState from '../../../functions/state/instanceState';
 import appState from '../../../functions/state/appState';
 import config from '../../../config';
-import isObject from '../../../functions/util/isObject';
 
 import readLog from '../../../functions/api/instance/readLog';
 import LogRow from './LogRow';
@@ -18,7 +17,6 @@ import addError from '../../../functions/api/lms/addError';
 let controller;
 
 const fetchData = async ({ auth, url, logsFilter }) => {
-	console.log('logsFilter', logsFilter);
 	controller = new AbortController();
 	await readLog({
 		auth,
@@ -70,7 +68,7 @@ function Logs({ logsFilter }) {
 					<Button color="link" title="Update Logs" className="me-2" onClick={() => setLastUpdate(Date.now())}>
 						<i className={`fa ${loading ? 'fa-spinner fa-spin' : 'fa-sync-alt'}`} />
 					</Button>
-					<Button color="link" title="Turn on autofresh" onClick={() => setAutoRefresh(!autoRefresh)}>
+					<Button color="link" title="Turn on auto refresh" onClick={() => setAutoRefresh(!autoRefresh)}>
 						<span className="me-2">auto</span>
 						<i className={`fa fa-lg fa-toggle-${autoRefresh ? 'on' : 'off'}`} />
 					</Button>
diff --git a/src/components/instance/logs/index.js b/src/components/instance/logs/index.js
index d418179d8..b7c92abac 100644
--- a/src/components/instance/logs/index.js
+++ b/src/components/instance/logs/index.js
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { Col, Row } from 'reactstrap';
+import { useAlert } from 'react-alert';
 import Logs from './Logs';
 /*
 logFilter object:
@@ -9,16 +10,50 @@ logFilter object:
 	until: DATE (UTC) timestamp
 	order: 'asc' | 'desc'
 */
+
+const formatDate = (date) =>
+	new Intl.DateTimeFormat('en-US', {
+		year: 'numeric',
+		month: '2-digit',
+		day: '2-digit',
+		hour: '2-digit',
+		minute: '2-digit',
+		second: '2-digit',
+		hour12: false,
+	}).format(date);
+
+const isValidDateRange = (startDate, endDate) => {
+	if (!startDate && !endDate) return true;
+	if (!startDate || !endDate) return true;
+
+	const start = new Date(startDate);
+	const end = new Date(endDate);
+	return start <= end;
+};
+
 function LogsIndex() {
-	const [logsFilter, setLogsFilter] = useState({});
+	const [logsFilter, setLogsFilter] = useState({
+		start: 0,
+		limit: 1000,
+		level: undefined,
+		from: undefined,
+		until: undefined,
+		order: 'desc',
+	});
+	const alert = useAlert();
 	const applyFilters = (event) => {
 		event.preventDefault();
+		if (!isValidDateRange(event.target.elements.logFromInput.value, event.target.elements.logUntilInput.value)) {
+			alert.error('Please provide a valid date range.');
+			return;
+		}
+
 		setLogsFilter({
 			start: 0,
 			limit: parseInt(event.target.elements.logLimitInput.value, 10) || 1000,
 			level: event.target.elements.logLevelSelect.value || undefined,
-			from: undefined,
-			until: undefined,
+			from: event.target.elements.logFromInput.value || undefined,
+			until: event.target.elements.logUntilInput.value || undefined,
 			order: 'desc',
 		});
 	};
@@ -47,10 +82,10 @@ function LogsIndex() {
 						<option value="debug">Debug</option>
 						<option value="trace">Trace</option>
 					</select>
-					{/* <input name="from" id="log-from" type='datetime-local' />
-					<input name="until" id="log-until" type='datetime-local' /> */}
+					<input name="from" id="logFromInput" onChange={isValidDateRange} type="datetime-local" />
+					<input name="until" id="logUntilInput" type="datetime-local" />
 					<button type="submit">Apply</button>
-					<button type="reset" onClick={resetForm}>
+					<button type="button" onClick={resetForm}>
 						Reset
 					</button>
 				</form>
diff --git a/src/functions/api/instance/readLog.js b/src/functions/api/instance/readLog.js
index ff1cf290f..01ee8dee8 100644
--- a/src/functions/api/instance/readLog.js
+++ b/src/functions/api/instance/readLog.js
@@ -2,7 +2,6 @@ import queryInstance from '../queryInstance';
 import instanceState from '../../state/instanceState';
 
 export default async ({ auth, url, signal, logsFilter }) => {
-	console.log('readLog', logsFilter);
 	const logs = await queryInstance({
 		operation: {
 			operation: 'read_log',

From 153c098e9e57b0c5de78acbbfa0f2125e18f3a18 Mon Sep 17 00:00:00 2001
From: Austin Akers <austin@harperdb.io>
Date: Mon, 27 Jan 2025 14:36:06 -0800
Subject: [PATCH 11/20] set default form state

---
 src/components/instance/logs/index.js | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/instance/logs/index.js b/src/components/instance/logs/index.js
index b7c92abac..847268465 100644
--- a/src/components/instance/logs/index.js
+++ b/src/components/instance/logs/index.js
@@ -30,16 +30,16 @@ const isValidDateRange = (startDate, endDate) => {
 	const end = new Date(endDate);
 	return start <= end;
 };
-
+const defaultFormState = {
+	start: 0,
+	limit: 1000,
+	level: undefined,
+	from: undefined,
+	until: undefined,
+	order: 'desc',
+};
 function LogsIndex() {
-	const [logsFilter, setLogsFilter] = useState({
-		start: 0,
-		limit: 1000,
-		level: undefined,
-		from: undefined,
-		until: undefined,
-		order: 'desc',
-	});
+	const [logsFilter, setLogsFilter] = useState(defaultFormState);
 	const alert = useAlert();
 	const applyFilters = (event) => {
 		event.preventDefault();
@@ -60,7 +60,7 @@ function LogsIndex() {
 
 	const resetForm = () => {
 		const logsFilterForm = document.getElementById('logs-filter-form');
-		setLogsFilter({});
+		setLogsFilter(defaultFormState);
 		logsFilterForm.reset();
 	};
 	return (

From 8320e3d25f3c0d068d1db0cc401a8889e4003b1f Mon Sep 17 00:00:00 2001
From: Austin Akers <austin@harperdb.io>
Date: Mon, 27 Jan 2025 19:45:25 -0800
Subject: [PATCH 12/20] fixed form reset and refactored select elements to use
 <Select />

---
 src/components/instance/logs/index.js | 75 ++++++++++++++++++---------
 1 file changed, 50 insertions(+), 25 deletions(-)

diff --git a/src/components/instance/logs/index.js b/src/components/instance/logs/index.js
index 847268465..88f367a20 100644
--- a/src/components/instance/logs/index.js
+++ b/src/components/instance/logs/index.js
@@ -1,5 +1,6 @@
-import React, { useState } from 'react';
-import { Col, Row } from 'reactstrap';
+import React, { useState, useRef } from 'react';
+import { Button, Col, Input, Row } from 'reactstrap';
+import Select from 'react-select';
 import { useAlert } from 'react-alert';
 import Logs from './Logs';
 /*
@@ -40,9 +41,13 @@ const defaultFormState = {
 };
 function LogsIndex() {
 	const [logsFilter, setLogsFilter] = useState(defaultFormState);
+	const logsFilterFormRef = useRef();
+	const logLimitSelectRef = useRef();
+	const logLevelSelectRef = useRef();
 	const alert = useAlert();
 	const applyFilters = (event) => {
 		event.preventDefault();
+
 		if (!isValidDateRange(event.target.elements.logFromInput.value, event.target.elements.logUntilInput.value)) {
 			alert.error('Please provide a valid date range.');
 			return;
@@ -50,7 +55,7 @@ function LogsIndex() {
 
 		setLogsFilter({
 			start: 0,
-			limit: parseInt(event.target.elements.logLimitInput.value, 10) || 1000,
+			limit: event.target.elements.logLimitSelect.value || 1000,
 			level: event.target.elements.logLevelSelect.value || undefined,
 			from: event.target.elements.logFromInput.value || undefined,
 			until: event.target.elements.logUntilInput.value || undefined,
@@ -59,35 +64,55 @@ function LogsIndex() {
 	};
 
 	const resetForm = () => {
-		const logsFilterForm = document.getElementById('logs-filter-form');
+		logsFilterFormRef.current.reset();
+		logLimitSelectRef.current.clearValue();
+		logLevelSelectRef.current.clearValue();
 		setLogsFilter(defaultFormState);
-		logsFilterForm.reset();
 	};
 	return (
 		<Row id="logs">
 			<Col lg="2" xs="12">
 				<h3>Filters</h3>
-				<form onSubmit={applyFilters} id="logs-filter-form">
-					<input name="limit" id="logLimitInput" type="number" max={1000} min={1} placeholder="Log Limit" />
-					<select name="level" id="logLevelSelect">
-						<option hidden disabled value>
-							{' '}
-							-- Select a log level --{' '}
-						</option>
-						<option />
-						<option value="notify">Notify</option>
-						<option value="error">Error</option>
-						<option value="warn">Warn</option>
-						<option value="info">Info</option>
-						<option value="debug">Debug</option>
-						<option value="trace">Trace</option>
-					</select>
-					<input name="from" id="logFromInput" onChange={isValidDateRange} type="datetime-local" />
-					<input name="until" id="logUntilInput" type="datetime-local" />
-					<button type="submit">Apply</button>
-					<button type="button" onClick={resetForm}>
+				<form onSubmit={applyFilters} ref={logsFilterFormRef}>
+					<Select
+						name="logLimitSelect"
+						ref={logLimitSelectRef}
+						placeholder="Log Limit"
+						isSearchable={false}
+						options={[
+							{ value: 1000, label: '1000' },
+							{ value: 500, label: '500' },
+							{ value: 250, label: '250' },
+							{ value: 100, label: '100' },
+							{ value: 10, label: '10' },
+						]}
+					/>
+					<Select
+						name="logLevelSelect"
+						isSearchable={false}
+						className="mt-2"
+						ref={logLevelSelectRef}
+						placeholder="Log Level"
+						defaultValue={null}
+						options={[
+							{ value: null, label: 'All' },
+							{ value: 'notify', label: 'Notify' },
+							{ value: 'error', label: 'Error' },
+							{ value: 'warn', label: 'Warn' },
+							{ value: 'info', label: 'Info' },
+							{ value: 'debug', label: 'Debug' },
+							{ value: 'trace', label: 'Trace' },
+						]}
+					/>
+
+					<Input name="logFromInput" onChange={isValidDateRange} type="datetime-local" />
+					<Input name="logUntilInput" type="datetime-local" />
+					<Button type="submit" className="btn btn-purple px-4 m-2">
+						Apply
+					</Button>
+					<Button type="button" className="btn btn-purple px-4 m-2" onClick={resetForm}>
 						Reset
-					</button>
+					</Button>
 				</form>
 			</Col>
 			<Col lg="10" xs="12">

From e1e118dc68585c7eda4c49b929e8ed7a41f3b4e4 Mon Sep 17 00:00:00 2001
From: Austin Akers <austin@harperdb.io>
Date: Mon, 27 Jan 2025 20:42:02 -0800
Subject: [PATCH 13/20] css styling for logs filters header

---
 src/assets/styles/overrides/_akamai.scss |  4 ++
 src/assets/styles/overrides/_dark.scss   |  4 ++
 src/assets/styles/overrides/_light.scss  |  4 ++
 src/assets/styles/pages/_logs.scss       |  7 ++++
 src/components/instance/logs/index.js    | 52 +++++++++---------------
 src/functions/api/instance/readLog.js    |  2 +
 6 files changed, 40 insertions(+), 33 deletions(-)

diff --git a/src/assets/styles/overrides/_akamai.scss b/src/assets/styles/overrides/_akamai.scss
index 99c871f86..9934cf959 100644
--- a/src/assets/styles/overrides/_akamai.scss
+++ b/src/assets/styles/overrides/_akamai.scss
@@ -234,6 +234,10 @@ $partner-brand-color: #017ac6;
 		color: $color-grey !important;
 	}
 
+	.filters-header {
+		color: $color-black !important;
+	}
+
 	.modal-content {
 		background: $color-white !important;
 		color: $color-grey !important;
diff --git a/src/assets/styles/overrides/_dark.scss b/src/assets/styles/overrides/_dark.scss
index 2b8c1a21b..0709a6340 100644
--- a/src/assets/styles/overrides/_dark.scss
+++ b/src/assets/styles/overrides/_dark.scss
@@ -189,6 +189,10 @@
 		color: $color-lightgrey !important;
 	}
 
+	.filters-header {
+		color: $color-white !important;
+	}
+
 	#replaceFile {
 		color: $color-white;
 	}
diff --git a/src/assets/styles/overrides/_light.scss b/src/assets/styles/overrides/_light.scss
index f3a993e14..68e331531 100644
--- a/src/assets/styles/overrides/_light.scss
+++ b/src/assets/styles/overrides/_light.scss
@@ -225,6 +225,10 @@
 		color: $color-grey !important;
 	}
 
+	.filters-header {
+		color: $color-black !important;
+	}
+
 	.modal-content {
 		background: $color-white !important;
 		color: $color-grey !important;
diff --git a/src/assets/styles/pages/_logs.scss b/src/assets/styles/pages/_logs.scss
index 1eee5ede3..4007b58b2 100644
--- a/src/assets/styles/pages/_logs.scss
+++ b/src/assets/styles/pages/_logs.scss
@@ -1,5 +1,12 @@
 #logs {
 	height: 100%;
+	.filters-header {
+		color: $color-white;
+		font-weight: $font-weight-bold;
+		white-space: nowrap;
+		font-size: 13px !important;
+	}
+
 	.instance-details {
 		.card-body {
 			padding-bottom: 0;
diff --git a/src/components/instance/logs/index.js b/src/components/instance/logs/index.js
index 88f367a20..6b28432f1 100644
--- a/src/components/instance/logs/index.js
+++ b/src/components/instance/logs/index.js
@@ -3,25 +3,6 @@ import { Button, Col, Input, Row } from 'reactstrap';
 import Select from 'react-select';
 import { useAlert } from 'react-alert';
 import Logs from './Logs';
-/*
-logFilter object:
-	limit: <number>
-	level: 'notify' | 'error', | 'warn' | 'info' | 'debug' | 'trace'
-	from: DATE (UTC) timestamp
-	until: DATE (UTC) timestamp
-	order: 'asc' | 'desc'
-*/
-
-const formatDate = (date) =>
-	new Intl.DateTimeFormat('en-US', {
-		year: 'numeric',
-		month: '2-digit',
-		day: '2-digit',
-		hour: '2-digit',
-		minute: '2-digit',
-		second: '2-digit',
-		hour12: false,
-	}).format(date);
 
 const isValidDateRange = (startDate, endDate) => {
 	if (!startDate && !endDate) return true;
@@ -31,13 +12,18 @@ const isValidDateRange = (startDate, endDate) => {
 	const end = new Date(endDate);
 	return start <= end;
 };
+/*
+logFilter object:
+ limit: 1000 | 500 | 250 | 100 | 10 || 1000
+ level: 'notify' | 'error', | 'warn' | 'info' | 'debug' | 'trace' || undefined
+ from: DATE (UTC) timestamp || undefined
+ until: DATE (UTC) timestamp || undefined
+*/
 const defaultFormState = {
-	start: 0,
 	limit: 1000,
 	level: undefined,
 	from: undefined,
 	until: undefined,
-	order: 'desc',
 };
 function LogsIndex() {
 	const [logsFilter, setLogsFilter] = useState(defaultFormState);
@@ -54,12 +40,10 @@ function LogsIndex() {
 		}
 
 		setLogsFilter({
-			start: 0,
 			limit: event.target.elements.logLimitSelect.value || 1000,
 			level: event.target.elements.logLevelSelect.value || undefined,
 			from: event.target.elements.logFromInput.value || undefined,
 			until: event.target.elements.logUntilInput.value || undefined,
-			order: 'desc',
 		});
 	};
 
@@ -72,7 +56,7 @@ function LogsIndex() {
 	return (
 		<Row id="logs">
 			<Col lg="2" xs="12">
-				<h3>Filters</h3>
+				<h2 className="mb-3 filters-header">Log Filters</h2>
 				<form onSubmit={applyFilters} ref={logsFilterFormRef}>
 					<Select
 						name="logLimitSelect"
@@ -90,7 +74,7 @@ function LogsIndex() {
 					<Select
 						name="logLevelSelect"
 						isSearchable={false}
-						className="mt-2"
+						className="mt-3"
 						ref={logLevelSelectRef}
 						placeholder="Log Level"
 						defaultValue={null}
@@ -105,14 +89,16 @@ function LogsIndex() {
 						]}
 					/>
 
-					<Input name="logFromInput" onChange={isValidDateRange} type="datetime-local" />
-					<Input name="logUntilInput" type="datetime-local" />
-					<Button type="submit" className="btn btn-purple px-4 m-2">
-						Apply
-					</Button>
-					<Button type="button" className="btn btn-purple px-4 m-2" onClick={resetForm}>
-						Reset
-					</Button>
+					<Input name="logFromInput" type="datetime-local" className="mt-3" />
+					<Input name="logUntilInput" type="datetime-local" className="mt-3" />
+					<div className=" mt-3">
+						<Button type="submit" className="btn btn-purple px-4 w-100">
+							Apply
+						</Button>
+						<Button type="button" className="btn btn-purple px-4 w-100 mt-3" onClick={resetForm}>
+							Reset
+						</Button>
+					</div>
 				</form>
 			</Col>
 			<Col lg="10" xs="12">
diff --git a/src/functions/api/instance/readLog.js b/src/functions/api/instance/readLog.js
index 01ee8dee8..d949cf09b 100644
--- a/src/functions/api/instance/readLog.js
+++ b/src/functions/api/instance/readLog.js
@@ -5,7 +5,9 @@ export default async ({ auth, url, signal, logsFilter }) => {
 	const logs = await queryInstance({
 		operation: {
 			operation: 'read_log',
+			start: 0,
 			...logsFilter,
+			order: 'desc',
 		},
 		auth,
 		url,

From e09b4da54db3c3b4fd37266f4f98d4dbd8639fde Mon Sep 17 00:00:00 2001
From: Austin Akers <austin@harperdb.io>
Date: Mon, 27 Jan 2025 21:36:54 -0800
Subject: [PATCH 14/20] fixed themes for log filters form

---
 src/assets/styles/overrides/_dark.scss  |  13 +++
 src/assets/styles/overrides/_light.scss |   9 ++
 src/assets/styles/pages/_logs.scss      |  20 +++++
 src/components/instance/logs/index.js   | 106 ++++++++++++++----------
 4 files changed, 106 insertions(+), 42 deletions(-)

diff --git a/src/assets/styles/overrides/_dark.scss b/src/assets/styles/overrides/_dark.scss
index 0709a6340..fd5630e01 100644
--- a/src/assets/styles/overrides/_dark.scss
+++ b/src/assets/styles/overrides/_dark.scss
@@ -58,6 +58,19 @@
 		background-color: $color-pureblack !important;
 		border: 1px solid $faint-white-overlay !important;
 	}
+	#logs {
+		.react-select__control {
+			background-color: $color-pureblack !important;
+		}
+
+		.react-select__single-value {
+			color: $color-white !important;
+		}
+
+		.react-select__placeholder {
+			color: $color-white !important;
+		}
+	}
 
 	input,
 	select,
diff --git a/src/assets/styles/overrides/_light.scss b/src/assets/styles/overrides/_light.scss
index 68e331531..cc1738282 100644
--- a/src/assets/styles/overrides/_light.scss
+++ b/src/assets/styles/overrides/_light.scss
@@ -141,6 +141,15 @@
 		}
 	}
 
+	#logs {
+		.react-select__single-value {
+			color: $color-darkgrey !important;
+		}
+
+		.react-select__placeholder {
+			color: $color-darkgrey !important;
+		}
+	}
 	input,
 	select,
 	textarea,
diff --git a/src/assets/styles/pages/_logs.scss b/src/assets/styles/pages/_logs.scss
index 4007b58b2..cfd61367e 100644
--- a/src/assets/styles/pages/_logs.scss
+++ b/src/assets/styles/pages/_logs.scss
@@ -19,6 +19,26 @@
 		}
 	}
 
+	.react-select__control {
+		background-color: $color-white !important;
+	}
+
+	.react-select__single-value {
+		color: $color-darkgrey !important;
+	}
+
+	.react-select__placeholder {
+		color: $color-darkgrey !important;
+	}
+
+	.input-label {
+		color: $color-white;
+		font-weight: $font-weight-bold;
+		white-space: nowrap;
+		font-size: 13px !important;
+		display: block;
+	}
+
 	.item-list {
 		font-size: 0.65rem;
 		padding: 0;
diff --git a/src/components/instance/logs/index.js b/src/components/instance/logs/index.js
index 6b28432f1..617f627a7 100644
--- a/src/components/instance/logs/index.js
+++ b/src/components/instance/logs/index.js
@@ -1,5 +1,5 @@
 import React, { useState, useRef } from 'react';
-import { Button, Col, Input, Row } from 'reactstrap';
+import { Button, Col, Input, Label, Row } from 'reactstrap';
 import Select from 'react-select';
 import { useAlert } from 'react-alert';
 import Logs from './Logs';
@@ -57,48 +57,70 @@ function LogsIndex() {
 		<Row id="logs">
 			<Col lg="2" xs="12">
 				<h2 className="mb-3 filters-header">Log Filters</h2>
-				<form onSubmit={applyFilters} ref={logsFilterFormRef}>
-					<Select
-						name="logLimitSelect"
-						ref={logLimitSelectRef}
-						placeholder="Log Limit"
-						isSearchable={false}
-						options={[
-							{ value: 1000, label: '1000' },
-							{ value: 500, label: '500' },
-							{ value: 250, label: '250' },
-							{ value: 100, label: '100' },
-							{ value: 10, label: '10' },
-						]}
-					/>
-					<Select
-						name="logLevelSelect"
-						isSearchable={false}
-						className="mt-3"
-						ref={logLevelSelectRef}
-						placeholder="Log Level"
-						defaultValue={null}
-						options={[
-							{ value: null, label: 'All' },
-							{ value: 'notify', label: 'Notify' },
-							{ value: 'error', label: 'Error' },
-							{ value: 'warn', label: 'Warn' },
-							{ value: 'info', label: 'Info' },
-							{ value: 'debug', label: 'Debug' },
-							{ value: 'trace', label: 'Trace' },
-						]}
-					/>
+				<form onSubmit={applyFilters} onReset={resetForm} ref={logsFilterFormRef}>
+					<Row>
+						<Col xs="6" lg="12" className="mb-3">
+							<Select
+								name="logLimitSelect"
+								isSearchable={false}
+								className="react-select-container"
+								classNamePrefix="react-select"
+								ref={logLimitSelectRef}
+								placeholder="Log Limit"
+								options={[
+									{ value: 1000, label: '1000' },
+									{ value: 500, label: '500' },
+									{ value: 250, label: '250' },
+									{ value: 100, label: '100' },
+									{ value: 10, label: '10' },
+								]}
+							/>
+						</Col>
 
-					<Input name="logFromInput" type="datetime-local" className="mt-3" />
-					<Input name="logUntilInput" type="datetime-local" className="mt-3" />
-					<div className=" mt-3">
-						<Button type="submit" className="btn btn-purple px-4 w-100">
-							Apply
-						</Button>
-						<Button type="button" className="btn btn-purple px-4 w-100 mt-3" onClick={resetForm}>
-							Reset
-						</Button>
-					</div>
+						<Col xs="6" lg="12" className="mb-3">
+							<Select
+								name="logLevelSelect"
+								isSearchable={false}
+								className="react-select-container"
+								classNamePrefix="react-select"
+								ref={logLevelSelectRef}
+								placeholder="Log Level"
+								defaultValue={null}
+								options={[
+									{ value: null, label: 'All' },
+									{ value: 'notify', label: 'Notify' },
+									{ value: 'error', label: 'Error' },
+									{ value: 'warn', label: 'Warn' },
+									{ value: 'info', label: 'Info' },
+									{ value: 'debug', label: 'Debug' },
+									{ value: 'trace', label: 'Trace' },
+								]}
+							/>
+						</Col>
+						<Col xs="8" lg="12" className="mb-3">
+							<Label htmlFor="logFromInput" className="input-label">
+								Start Date:
+							</Label>
+							<Input name="logFromInput" type="datetime-local" />
+						</Col>
+						<Col xs="8" lg="12" className="mb-3">
+							<Label htmlFor="logUntilInput" className="input-label">
+								End Date:
+							</Label>
+							<Input name="logUntilInput" type="datetime-local" />
+						</Col>
+
+						<Col xs="6" lg="12" className="mb-3">
+							<Button type="submit" className="btn btn-purple px-4 w-100">
+								Apply
+							</Button>
+						</Col>
+						<Col xs="6" lg="12" className="mb-3">
+							<Button type="reset" className="btn btn-purple px-4 w-100">
+								Reset
+							</Button>
+						</Col>
+					</Row>
 				</form>
 			</Col>
 			<Col lg="10" xs="12">

From 057a09f4dc7f250786c1d9583e50cfeaaaba850c Mon Sep 17 00:00:00 2001
From: Austin Akers <austin@harperdb.io>
Date: Tue, 28 Jan 2025 13:30:28 -0800
Subject: [PATCH 15/20] fixed modal message color in dark mode, changed row
 sizing in large screens

---
 src/assets/styles/overrides/_dark.scss |  4 ++++
 src/components/instance/logs/LogRow.js | 10 +++++-----
 src/components/instance/logs/Logs.js   | 10 +++++-----
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/assets/styles/overrides/_dark.scss b/src/assets/styles/overrides/_dark.scss
index fd5630e01..1fa5a7415 100644
--- a/src/assets/styles/overrides/_dark.scss
+++ b/src/assets/styles/overrides/_dark.scss
@@ -217,6 +217,10 @@
 		.modal-header {
 			background: $dark-grey-overlay !important;
 		}
+
+		code {
+			color: $color-white !important;
+		}
 	}
 
 	.auth-form-container {
diff --git a/src/components/instance/logs/LogRow.js b/src/components/instance/logs/LogRow.js
index 3d30b0f72..b35baab8a 100644
--- a/src/components/instance/logs/LogRow.js
+++ b/src/components/instance/logs/LogRow.js
@@ -9,19 +9,19 @@ function LogsRow({ onRowClick, level, timestamp, message, tags, thread }) {
 			<Col xs="2" md="1" className={`text-nowrap ${level?.toLowerCase()}`}>
 				{level?.toUpperCase() || 'UNKNOWN'}
 			</Col>
-			<Col xs="2" md="2" className="">
+			<Col xs="2" md="2" lg="1" className="">
 				{new Date(timestamp || null).toLocaleDateString()}
 			</Col>
-			<Col xs="2" md="2" className="">
+			<Col xs="2" md="2" lg="1" className="">
 				{new Date(timestamp || null).toLocaleTimeString()}
 			</Col>
-			<Col xs="2" md="1" className="">
+			<Col xs="2" md="1" lg="1" className="">
 				{thread}
 			</Col>
-			<Col xs="2" md="2" className="">
+			<Col xs="2" md="2" lg="1" className="">
 				{tags?.join(', ')}
 			</Col>
-			<Col xs="2" md="4" className="">
+			<Col xs="2" md="4" lg="7" className="">
 				{isObject(message) && message.error ? (
 					message.error
 				) : (
diff --git a/src/components/instance/logs/Logs.js b/src/components/instance/logs/Logs.js
index 4385cd562..a60839459 100644
--- a/src/components/instance/logs/Logs.js
+++ b/src/components/instance/logs/Logs.js
@@ -80,23 +80,23 @@ function Logs({ logsFilter }) {
 						<Col xs="2" md="1" className="text-bold text-nowrap">
 							Status
 						</Col>
-						<Col xs="2" md="2" className="text-bold text-nowrap">
+						<Col xs="2" md="2" lg="1" className="text-bold text-nowrap">
 							Date
 						</Col>
-						<Col xs="2" md="2" className="text-left text-bold text-nowrap">
+						<Col xs="2" md="2" lg="1" className="text-left text-bold text-nowrap">
 							{!loading && logsError ? (
 								<span className="text-danger">log fetch error: {new Date().toLocaleTimeString().toLowerCase()}</span>
 							) : (
 								<span>Time</span>
 							)}
 						</Col>
-						<Col xs="2" md="1" className="text-bold text-nowrap">
+						<Col xs="2" md="1" lg="1" className="text-bold text-nowrap">
 							Thread
 						</Col>
-						<Col xs="2" md="2" className="text-bold text-nowrap">
+						<Col xs="2" md="2" lg="1" className="text-bold text-nowrap">
 							Tags
 						</Col>
-						<Col xs="2" md="3" className="text-bold text-nowrap">
+						<Col xs="2" md="3" lg="7" className="text-bold text-nowrap">
 							Message
 						</Col>
 					</Row>

From 3365ede801cbb1923bd4ffbf7b2147c6c437cec3 Mon Sep 17 00:00:00 2001
From: Austin Akers <austin@harperdb.io>
Date: Tue, 28 Jan 2025 15:28:15 -0800
Subject: [PATCH 16/20] fixed scrollbar width

---
 src/assets/styles/pages/_logs.scss     | 14 ++++++++++++++
 src/components/instance/logs/LogRow.js | 10 +++++-----
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/assets/styles/pages/_logs.scss b/src/assets/styles/pages/_logs.scss
index cfd61367e..5eb95aaf5 100644
--- a/src/assets/styles/pages/_logs.scss
+++ b/src/assets/styles/pages/_logs.scss
@@ -55,9 +55,14 @@
 			height: calc(100vh - 275px);
 			overflow: hidden auto;
 
+			&::-webkit-scrollbar {
+				width: 10px;
+			}
+
 			.item-row {
 				border-bottom: 1px solid $lightest-grey-overlay;
 				padding: 8px;
+				height: 75px;
 
 				.text-nowrap {
 					overflow: hidden;
@@ -77,6 +82,15 @@
 				.notify {
 					color: $color-success;
 				}
+				pre {
+					height: 100%;
+					overflow-x: auto;
+					margin-bottom: 0;
+					font-size: 12px;
+				}
+				code {
+					overflow-x: auto;
+				}
 			}
 		}
 	}
diff --git a/src/components/instance/logs/LogRow.js b/src/components/instance/logs/LogRow.js
index b35baab8a..2f37c66ba 100644
--- a/src/components/instance/logs/LogRow.js
+++ b/src/components/instance/logs/LogRow.js
@@ -9,19 +9,19 @@ function LogsRow({ onRowClick, level, timestamp, message, tags, thread }) {
 			<Col xs="2" md="1" className={`text-nowrap ${level?.toLowerCase()}`}>
 				{level?.toUpperCase() || 'UNKNOWN'}
 			</Col>
-			<Col xs="2" md="2" lg="1" className="">
+			<Col xs="2" md="2" lg="1">
 				{new Date(timestamp || null).toLocaleDateString()}
 			</Col>
-			<Col xs="2" md="2" lg="1" className="">
+			<Col xs="2" md="2" lg="1">
 				{new Date(timestamp || null).toLocaleTimeString()}
 			</Col>
-			<Col xs="2" md="1" lg="1" className="">
+			<Col xs="2" md="1" lg="1">
 				{thread}
 			</Col>
-			<Col xs="2" md="2" lg="1" className="">
+			<Col xs="2" md="2" lg="1">
 				{tags?.join(', ')}
 			</Col>
-			<Col xs="2" md="4" lg="7" className="">
+			<Col xs="2" md="4" lg="7">
 				{isObject(message) && message.error ? (
 					message.error
 				) : (

From 480c44fe9e29124f5b8c1c81efbbe23eef9cfdf5 Mon Sep 17 00:00:00 2001
From: Austin Akers <austin@harperdb.io>
Date: Wed, 29 Jan 2025 10:11:00 -0800
Subject: [PATCH 17/20] fixed log limit filter

---
 src/components/instance/logs/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/instance/logs/index.js b/src/components/instance/logs/index.js
index 617f627a7..d633201f6 100644
--- a/src/components/instance/logs/index.js
+++ b/src/components/instance/logs/index.js
@@ -40,7 +40,7 @@ function LogsIndex() {
 		}
 
 		setLogsFilter({
-			limit: event.target.elements.logLimitSelect.value || 1000,
+			limit: parseInt(event.target.elements.logLimitSelect.value, 10) || 1000,
 			level: event.target.elements.logLevelSelect.value || undefined,
 			from: event.target.elements.logFromInput.value || undefined,
 			until: event.target.elements.logUntilInput.value || undefined,

From 990eabc2e908d1a158c4e247d63b4c67e18761ba Mon Sep 17 00:00:00 2001
From: Austin Akers <austin@harperdb.io>
Date: Wed, 29 Jan 2025 11:49:18 -0800
Subject: [PATCH 18/20] fixed message sizing

---
 src/assets/styles/pages/_logs.scss   | 7 +++----
 src/components/instance/logs/Logs.js | 6 ++++--
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/assets/styles/pages/_logs.scss b/src/assets/styles/pages/_logs.scss
index 5eb95aaf5..c105e2f0a 100644
--- a/src/assets/styles/pages/_logs.scss
+++ b/src/assets/styles/pages/_logs.scss
@@ -61,7 +61,7 @@
 
 			.item-row {
 				border-bottom: 1px solid $lightest-grey-overlay;
-				padding: 8px;
+				padding: 4px;
 				height: 75px;
 
 				.text-nowrap {
@@ -83,13 +83,12 @@
 					color: $color-success;
 				}
 				pre {
-					height: 100%;
-					overflow-x: auto;
+					height: 70px;
 					margin-bottom: 0;
 					font-size: 12px;
 				}
 				code {
-					overflow-x: auto;
+					height: 70px;
 				}
 			}
 		}
diff --git a/src/components/instance/logs/Logs.js b/src/components/instance/logs/Logs.js
index a60839459..0571b41be 100644
--- a/src/components/instance/logs/Logs.js
+++ b/src/components/instance/logs/Logs.js
@@ -155,9 +155,11 @@ function Logs({ logsFilter }) {
 							<p className="mb-2">
 								<b>Message:</b>
 							</p>
-							<code>
+							<pre>
+								{/* <code> */}
 								{selectedLogInfo?.message?.error ? selectedLogInfo?.message?.error : selectedLogInfo?.message}
-							</code>
+								{/* </code> */}
+							</pre>
 						</div>
 					)}
 				</ModalBody>

From a67e9ce25e4bfd9178d9bdb03cc9e73c6edf27d2 Mon Sep 17 00:00:00 2001
From: Austin Akers <austin@harperdb.io>
Date: Wed, 29 Jan 2025 13:16:41 -0800
Subject: [PATCH 19/20] updated row sizing

---
 src/assets/styles/pages/_logs.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/assets/styles/pages/_logs.scss b/src/assets/styles/pages/_logs.scss
index c105e2f0a..e8eb778d6 100644
--- a/src/assets/styles/pages/_logs.scss
+++ b/src/assets/styles/pages/_logs.scss
@@ -62,7 +62,7 @@
 			.item-row {
 				border-bottom: 1px solid $lightest-grey-overlay;
 				padding: 4px;
-				height: 75px;
+				max-height: 75px;
 
 				.text-nowrap {
 					overflow: hidden;
@@ -83,12 +83,12 @@
 					color: $color-success;
 				}
 				pre {
-					height: 70px;
+					max-height: 70px;
 					margin-bottom: 0;
 					font-size: 12px;
 				}
 				code {
-					height: 70px;
+					max-height: 70px;
 				}
 			}
 		}

From e5d711951568933364aba8942efc157d6fb2a190 Mon Sep 17 00:00:00 2001
From: Austin Akers <austin@harperdb.io>
Date: Wed, 29 Jan 2025 13:18:40 -0800
Subject: [PATCH 20/20] update logs row height to be the size of the content

---
 src/assets/styles/pages/_logs.scss | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/assets/styles/pages/_logs.scss b/src/assets/styles/pages/_logs.scss
index e8eb778d6..8d126a39d 100644
--- a/src/assets/styles/pages/_logs.scss
+++ b/src/assets/styles/pages/_logs.scss
@@ -62,7 +62,6 @@
 			.item-row {
 				border-bottom: 1px solid $lightest-grey-overlay;
 				padding: 4px;
-				max-height: 75px;
 
 				.text-nowrap {
 					overflow: hidden;
@@ -83,13 +82,9 @@
 					color: $color-success;
 				}
 				pre {
-					max-height: 70px;
 					margin-bottom: 0;
 					font-size: 12px;
 				}
-				code {
-					max-height: 70px;
-				}
 			}
 		}
 	}