fix(logs): keep the logs console in-panel with latest-first rows

package.json

@@ -10,6 +10,7 @@
     "lint": "eslint .",
     "test:semantic-colors": "node --experimental-strip-types --test src/lib/semantic-colors.test.ts src/lib/reactflow-edge-colors.test.ts",
     "test:schema-fields": "node --experimental-strip-types --test src/lib/database/schema-field-definition.test.ts src/lib/database/system-schema-fields.test.ts",
+    "test:logs-viewer": "node --experimental-strip-types --test src/lib/models/logs-viewer/utils.test.ts",
     "build:docker": "docker build --platform linux/amd64 -t ghcr.io/conduitplatform/conduit-ui:latest .",
     "prepare": "husky",
     "release": "standard-version"

src/app/(dashboard)/logs-viewer/page.tsx

@@ -1,12 +1,13 @@
 import LogsViewer from '@/components/logs-viewer/LogsViewer';
 import { knownModuleNames } from '@/lib/models/logs-viewer/constants';
-import { LogsData } from '@/lib/models/logs-viewer';
+import { LogsData, LogsQueryParams } from '@/lib/models/logs-viewer';
 import {
   getLogsLevels,
   getLogsQueryRange,
   getModules,
 } from '@/lib/loki/requests';
 import { getLokiAvailabilityCore } from '@/lib/observability/lokiAvailabilityCore';
+import { EmptyState } from '@/components/ui/empty-state';
 
 export default async function LogsViewerPage() {
   const lokiAvailability = await getLokiAvailabilityCore();
@@ -16,26 +17,22 @@ export default async function LogsViewerPage() {
 
   if (lokiAvailability.state === 'not_configured') {
     return (
-      <div className="flex flex-col items-center justify-center mt-10 max-w-lg mx-auto text-center px-4">
-        <p className="text-sm font-medium">Logs viewer is not available</p>
-        <p className="text-xs text-muted-foreground mt-2">
-          Set <code className="rounded bg-muted px-1 py-0.5">LOKI_URL</code> for
-          this environment to enable log viewing.
-        </p>
+      <div className="flex h-full min-h-0 items-center justify-center px-4">
+        <EmptyState
+          title="Logs viewer is not available"
+          description="Set LOKI_URL for this environment to enable log viewing."
+        />
       </div>
     );
   }
 
   if (lokiAvailability.state === 'unreachable') {
     return (
-      <div className="flex flex-col items-center justify-center mt-10 max-w-lg mx-auto text-center px-4">
-        <p className="text-sm font-medium">Cannot reach Loki</p>
-        <p className="text-xs text-muted-foreground mt-2">
-          The UI could not connect to Loki at the configured URL. Check that
-          Loki is running and that{' '}
-          <code className="rounded bg-muted px-1 py-0.5">LOKI_URL</code> is
-          correct.
-        </p>
+      <div className="flex h-full min-h-0 items-center justify-center px-4">
+        <EmptyState
+          title="Cannot reach Loki"
+          description="The UI could not connect to Loki at the configured URL. Check that Loki is running and that LOKI_URL is correct."
+        />
       </div>
     );
   }
@@ -55,24 +52,13 @@ export default async function LogsViewerPage() {
     console.error('Failed to fetch logs levels: ', e);
   }
 
-  const refreshLogs = async (data: {
-    modules: string[];
-    levels: string[];
-    startDate: number | undefined;
-    endDate: number | undefined;
-    limit: string | undefined;
-  }) => {
+  const refreshLogs = async (data: LogsQueryParams) => {
     'use server';
     return await getLogsQueryRange({
       ...data,
-      modules: data.modules ? data.modules : modules,
+      modules: data.modules.length > 0 ? data.modules : modules,
       limit: data.limit ? data.limit : '100',
-    })
-      .then(res => res)
-      .catch(e => {
-        console.error('Failed to fetch logs levels: ', e);
-        return [];
-      });
+    });
   };
 
   return (

src/app/(dashboard)/template.tsx

@@ -102,10 +102,12 @@ export default function ModuleHeader({
 
   if (!moduleName)
     return (
-      <>
-        <LogsDrawer isSidebarOpen={false} />
-        <div className="page-enter-children h-full min-h-0">{children}</div>
-      </>
+      <div className="relative flex h-full min-h-0 flex-1 flex-col overflow-hidden">
+        <LogsDrawer />
+        <div className="page-enter-children min-h-0 flex-1 overflow-hidden">
+          {children}
+        </div>
+      </div>
     );
 
   const RESTDocs: {
@@ -170,7 +172,7 @@ export default function ModuleHeader({
     isCommunicationsSubRoute && pathSegments[1] === 'templates';
 
   return (
-    <div className="flex h-full min-h-0 flex-col overflow-hidden">
+    <div className="relative flex h-full min-h-0 flex-col overflow-hidden">
       <div className="flex min-h-10 w-full shrink-0 flex-row items-center justify-between border-b bg-background px-4 py-2">
         <div className="flex items-center gap-3 min-w-0">
           <Breadcrumb>
@@ -366,7 +368,7 @@ export default function ModuleHeader({
           {children}
         </div>
       </div>
-      <LogsDrawer isSidebarOpen={false} />
+      <LogsDrawer />
     </div>
   );
 }

src/components/logs-viewer/JsonViewer.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useTheme } from 'next-themes';
 import {
   JsonView,
@@ -8,12 +10,12 @@ import {
 import 'react-json-view-lite/dist/index.css';
 
 type JsonViewerProps = {
-  json: Record<string, any>;
+  json: Record<string, unknown>;
 };
 
 const customLightStyles = {
   ...defaultStyles,
-  container: `${defaultStyles.container} semantic-json-view m-3 rounded-lg p-3`,
+  container: `${defaultStyles.container} semantic-json-view m-3 min-w-0 max-w-full rounded-lg p-3`,
   label: `${defaultStyles.label} semantic-json-view__property`,
   clickableLabel: `${defaultStyles.clickableLabel} semantic-json-view__property`,
   nullValue: `${defaultStyles.nullValue} semantic-json-view__null`,
@@ -30,7 +32,7 @@ const customLightStyles = {
 
 const customDarkStyles = {
   ...darkStyles,
-  container: `${darkStyles.container} semantic-json-view m-3 rounded-lg p-3`,
+  container: `${darkStyles.container} semantic-json-view m-3 min-w-0 max-w-full rounded-lg p-3`,
   label: `${darkStyles.label} semantic-json-view__property`,
   clickableLabel: `${darkStyles.clickableLabel} semantic-json-view__property`,
   nullValue: `${darkStyles.nullValue} semantic-json-view__null`,
@@ -49,5 +51,11 @@ export default function JsonViewer({ json }: JsonViewerProps) {
   const { resolvedTheme } = useTheme();
   const styles =
     resolvedTheme === 'dark' ? customDarkStyles : customLightStyles;
-  return <JsonView data={json} shouldExpandNode={allExpanded} style={styles} />;
+  return (
+    <JsonView
+      data={json as object}
+      shouldExpandNode={allExpanded}
+      style={styles}
+    />
+  );
 }