refactor(logs-viewer): api integration (logs fetching, filtering) (#263)

* feat(logs): create logs-viewer page and basic ui components: select, multiselect, drawer

* refactor(logs): refactor/restyle logs components; refactor style login page; add json viewer

* feat(logs): add date-time picker

* feat(logs-viewer): api implementation

* refactor(logs-viewer): remove parallel route for drawer; update logs queries

* refactor(logs-viewer): update folder structure, add logs filters, improve drawer ui

* Update LogsFiltersPanel.tsx

---------

Co-authored-by: Konstantinos Kopanidis <[email protected]>

apps/admin/app/(dashboard)/layout.tsx

@@ -1,60 +1,14 @@
-'use client';
-import { Sidebar } from '@/components/navigation/sidebar';
-import { SidebarItem } from '@/components/navigation/sidebarItem';
-import { SidebarItemWithSub } from '@/components/navigation/sidebarItemWithSub';
-import { navList } from '@/app/(dashboard)/navList';
-import { usePathname } from 'next/navigation';
-
-export default function Layout({ children }: { children: React.ReactNode }) {
-  const pathname = usePathname();
-  const isActive = (href: string) => pathname === href;
-  const isSubActive = (href: string) => pathname.includes(href);
+import SidebarList from '@/components/navigation/sidebarList';
 
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
   return (
     <div className={'flex'}>
-      <Sidebar>
-        {navList.map(item => {
-          if (item.children) {
-            return (
-              <SidebarItemWithSub
-                key={item.href}
-                active={isActive(item.href) || isSubActive(item.href)}
-              >
-                <SidebarItem href={item.href} key={item.href}>
-                  {item.icon}
-                  {item.name}
-                </SidebarItem>
-                {item.children.map(child => (
-                  <SidebarItem
-                    href={child.href}
-                    active={
-                      isActive(child.href) ||
-                      (child.href !== item.href && isSubActive(child.href))
-                    }
-                    key={child.href}
-                  >
-                    {child.icon}
-                    {child.name}
-                  </SidebarItem>
-                ))}
-              </SidebarItemWithSub>
-            );
-          }
-          return (
-            <SidebarItem
-              href={item.href}
-              active={isActive(item.href)}
-              key={item.href}
-            >
-              {item.icon}
-              {item.name}
-            </SidebarItem>
-          );
-        })}
-      </Sidebar>
-      <div className="relative flex-grow h-screen overflow-auto main-scrollbar">
-        {children}
-      </div>
+      <SidebarList />
+      <div className="relative flex-grow h-screen">{children}</div>
     </div>
   );
 }

apps/admin/app/(dashboard)/logs-viewer/page.tsx

@@ -1,7 +1,36 @@
 import LogsViewer from '@/components/logs-viewer/LogsViewer';
-import { getModules } from '@/lib/api/modules';
+import { getLogsLevels, getLogsQueryRange } from '@/lib/api/logs-viewer';
+import { knownModuleNames } from '@/lib/models/logs-viewer/constants';
 
 export default async function LogsViewerPage() {
-  const modules = await getModules();
-  return <LogsViewer modules={modules} />;
+  const levelsData = await getLogsLevels();
+
+  const logsData = await getLogsQueryRange({
+    modules: knownModuleNames,
+    limit: '100',
+  });
+
+  const refreshLogs = async (data: {
+    modules: string[];
+    levels: string[];
+    startDate: number | undefined;
+    endDate: number | undefined;
+    limit: string | undefined;
+  }) => {
+    'use server';
+    const logs = await getLogsQueryRange({
+      ...data,
+      modules: data.modules ? data.modules : knownModuleNames,
+      limit: data.limit ? data.limit : '100',
+    });
+    return logs;
+  };
+
+  return (
+    <LogsViewer
+      levelsData={levelsData}
+      logsData={logsData}
+      refreshLogs={refreshLogs}
+    />
+  );
 }

apps/admin/app/(dashboard)/template.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { usePathname } from 'next/navigation';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import Link from 'next/link';
 import Image from 'next/image';
 import React, { useEffect, useState } from 'react';
@@ -42,6 +42,7 @@ export default function ModuleHeader({
   const [sockets, setSockets] = useState<boolean>(false); // client sockets
   const [graphqlAdmin, setGraphqlAdmin] = useState<boolean>(false);
   const [restAdmin, setRestAdmin] = useState<boolean>(false);
+
   const [baseUrl, setBaseUrl] = useState<string>('');
   const [adminUrl, setAdminUrl] = useState<string>('');
   const pathname = usePathname();
@@ -62,7 +63,13 @@ export default function ModuleHeader({
     });
   }, []);
 
-  if (!moduleName) return <>{children}</>;
+  if (!moduleName)
+    return (
+      <>
+        <LogsDrawer />
+        {children}
+      </>
+    );
 
   const RESTDocs: {
     title: string;
@@ -223,6 +230,7 @@ export default function ModuleHeader({
         </div>
       </div>
       <div className="container py-10 mx-auto">{children}</div>
+      <LogsDrawer />
     </div>
   );
 }

apps/admin/app/layout.tsx

@@ -12,19 +12,14 @@ export const metadata = {
 
 export default function RootLayout({
   children,
-  logsdrawer,
 }: {
-  logsdrawer: React.ReactNode;
   children: React.ReactNode;
 }) {
   return (
     <html lang="en">
       <body className={inter.className} style={{ overflow: 'hidden' }}>
         <main className={'h-dvh min-w-[1080px] overflow-auto'}>
-          <ProviderInjector>
-            {children}
-            {logsdrawer}
-          </ProviderInjector>
+          <ProviderInjector>{children}</ProviderInjector>
         </main>
         <Toaster />
       </body>