Merge pull request #44 from moda20/Feature/Add-log-files-management-to-the-loki-logs-drawer

Author: moda20

package.json

@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.1",
-    "@melloware/react-logviewer": "^6.3.4",
+    "@melloware/react-logviewer": "^6.3.5",
     "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-alert-dialog": "^1.1.2",
     "@radix-ui/react-avatar": "^1.1.10",

src/components/custom/DrawerLokiLogs.tsx

@@ -180,8 +180,10 @@ export default function DrawerLokiLogs(props: DrawerLokiLogsProps) {
                           (e: any) => e.fullMessage,
                         )}
                         wrapLines={false}
+                        follow={false}
                         scrollToLine={1}
                         extraLines={4}
+                        enableLinks={true}
                       />
                     </TabsContent>
                   )

src/components/custom/general/FileItem.tsx

@@ -15,6 +15,7 @@ export interface FileItemProps {
   canPreview?: boolean
   className?: string
   index?: number
+  style?: React.CSSProperties
 }
 
 export default function FileItem({
@@ -26,13 +27,18 @@ export default function FileItem({
   canDelete,
   canPreview,
   className,
+  style,
 }: FileItemProps) {
   const titleName = item.fileName.split("/").pop()
   const parsedCreatedAt = useMemo(() => {
     return `${moment(item.createAt).format("YYYY-MM-DD HH")}h`
   }, [item])
   return (
-    <div key={index} className={cn("flex flex-col gap-2 w-full", className)}>
+    <div
+      key={index}
+      className={cn("flex flex-col gap-2 w-full", className)}
+      style={style}
+    >
       {item.blockId && item.index === 0 && (
         <div className="flex flex-row gap-1.5 items-center">
           <div className="separator h-[0.1px] bg-foreground opacity-50 w-1/6"></div>

src/components/custom/general/LogFileList.tsx

@@ -20,7 +20,7 @@ export default function LogFileList(props: LogfileListProps) {
     count: props.logFiles.length,
     getScrollElement: () => parentRef.current,
     estimateSize: () => 68.5,
-    overscan: 68.5,
+    overscan: 24,
     gap: 8,
     lanes: 1,
   })
@@ -56,8 +56,14 @@ export default function LogFileList(props: LogfileListProps) {
           height: `${rowVirtualizer.getTotalSize()}px`,
         }}
       >
-        {rowVirtualizer.getVirtualItems().map(virtualRow => (
-          <FileItem className="mb-2" {...FileList[virtualRow.index]} />
+        {rowVirtualizer.getVirtualItems().map((virtualRow, index) => (
+          <FileItem
+            className="mb-2 absolute"
+            style={{
+              transform: `translateY(${virtualRow.start}px)`,
+            }}
+            {...FileList[virtualRow?.index ?? index]}
+          />
         ))}
       </div>
     </div>

src/components/custom/general/LogViewer.tsx

@@ -54,9 +54,11 @@ export const LiveLogViewer: React.FC<LiveLogViewerProps> = ({
           !askForLogs
         )
           return onScroll
+        const listRef = internalRef.current.listRef.current
         if (
           fetchedCountRef.current < buffer.length &&
-          internalRef.current.listRef.current.findEndIndex() + 50 >
+          listRef.findItemIndex(listRef.scrollOffset + listRef.viewportSize) +
+            50 >
             buffer.length
         ) {
           fetchedCountRef.current = buffer.length

src/components/sheet-action-dialog.tsx

@@ -75,7 +75,6 @@ export default function SheetActionDialog(
         >
           {props.children}
         </div>
-        <SheetFooter></SheetFooter>
       </SheetContent>
     </Sheet>
   )

src/features/system/eventLog.tsx

@@ -3,12 +3,18 @@ import { useSocketLogs } from "@/lib/socketUtils"
 import { Card, CardContent, CardHeader } from "@/components/ui/card"
 import { LiveLogViewer } from "@/components/custom/general/LogViewer"
 import { DatePickerWithPresets } from "@/components/ui/date-picker-presets"
-import { useCallback, useState } from "react"
+import { useCallback, useMemo, useState } from "react"
 import type { DateRange } from "react-day-picker"
 import { defaultLogPeriod } from "@/features/jobsTable/interfaces"
+import TabButtonGroup from "@/components/custom/general/TabButtonGroup"
+import LogFileList from "@/components/custom/general/LogFileList"
+import { useJobLogs } from "@/hooks/useLogs"
+import Spinner from "@/components/custom/LoadingOverlay"
 
+const tabList = ["Events", "Files"]
 export function EventLog() {
   const [period, setPeriod] = useState<DateRange>(defaultLogPeriod)
+  const [activeLogTypeTab, setActiveLogTypeTab] = useState<string>(tabList[0])
   const { latestLogs, logs } = useSocketLogs({
     actions: [MiscNotificationTopics.EventLog],
     format: (data: any) => ({
@@ -25,6 +31,18 @@ export function EventLog() {
     setPeriod(period ?? defaultLogPeriod)
   }, [])
 
+  const isEventsTabActive = useMemo(
+    () => activeLogTypeTab === "Events",
+    [activeLogTypeTab],
+  )
+
+  const {
+    systemLogFiles,
+    loading: logFileLoading,
+    readLogFile,
+    downloadLogFile,
+  } = useJobLogs({})
+
   return (
     <div className="flex flex-col gap-4 h-full">
       <div className={"flex flex-col gap-1 mb-4"}>
@@ -39,21 +57,45 @@ export function EventLog() {
           <div className="text-l font-bold tracking-tight italic flex-col gap-2 items-left">
             <div>Event logs</div>
             <div className="italic text-sm">
-              All system event logs, updated in real time
+              {isEventsTabActive
+                ? "All system event logs, updated in real time"
+                : "All system event log files"}
             </div>
           </div>
-          <DatePickerWithPresets
-            onChange={onPeriodFilterChange}
-            defaultValue={period}
-          />
+          <div className="flex gap-2">
+            <DatePickerWithPresets
+              onChange={onPeriodFilterChange}
+              defaultValue={period}
+              disabled={!isEventsTabActive}
+            />
+            <TabButtonGroup
+              tabList={tabList}
+              setActiveTab={setActiveLogTypeTab}
+              activeTab={activeLogTypeTab}
+            />
+          </div>
         </CardHeader>
         <CardContent className="p-4 pt-0 h-full">
           <div className="flex flex-col gap-2 h-full">
             <div className="space-y-1 rounded bg-background text-foreground text-sm min-h-[500px] w-full flex-grow">
-              <LiveLogViewer
-                initialLogs={logs.map(e => e.fullMessage)}
-                newLogs={latestLogs.map(e => e.fullMessage)}
-              />
+              {isEventsTabActive ? (
+                <LiveLogViewer
+                  initialLogs={logs.map(e => e.fullMessage)}
+                  newLogs={latestLogs.map(e => e.fullMessage)}
+                />
+              ) : (
+                <Spinner
+                  isLoading={logFileLoading}
+                  className="flex flex-col max-h-[calc(100vh-18rem)]"
+                >
+                  <LogFileList
+                    logFiles={systemLogFiles}
+                    readLogFile={readLogFile}
+                    originName="System"
+                    downloadLogFile={downloadLogFile}
+                  />
+                </Spinner>
+              )}
             </div>
           </div>
         </CardContent>

src/hooks/useLogs.tsx

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useState } from "react"
 import {
   downloadLogfile,
   getJobLogs,
+  getSystemLogFiles as getSysLogFiles,
   readLogfile as readLogService,
 } from "@/services/components/logsService"
 
@@ -12,6 +13,7 @@ export interface useLogsHookProps {
 
 export function useJobLogs({ jobId }: useLogsHookProps) {
   const [logFiles, setLogFiles] = useState<LogFileMetadata[]>([])
+  const [systemLogFiles, setSystemLogFiles] = useState<LogFileMetadata[]>([])
   const [loading, setLoading] = useState(false)
 
   const getJobLogFiles = useCallback(() => {
@@ -20,12 +22,22 @@ export function useJobLogs({ jobId }: useLogsHookProps) {
     })
   }, [jobId])
 
+  const getSystemLogFiles = useCallback(() => {
+    return getSysLogFiles().then(d => {
+      setSystemLogFiles([...d.sysEvents.data, ...d.scheduleEvents.data])
+    })
+  }, [])
+
   useEffect(() => {
     setLoading(true)
     if (jobId) {
       getJobLogFiles().finally(() => {
         setLoading(false)
       })
+    } else {
+      getSystemLogFiles().finally(() => {
+        setLoading(false)
+      })
     }
   }, [getJobLogFiles, jobId])
 
@@ -66,6 +78,7 @@ export function useJobLogs({ jobId }: useLogsHookProps) {
   return {
     logFiles,
     loading,
+    systemLogFiles,
     readLogFile,
     downloadLogFile,
   }

src/services/components/logsService.ts

@@ -59,6 +59,9 @@ export const getJobLogs = (jobId: number) => {
   })
 }
 
+export const getSystemLogFiles = (): Promise<any> => {
+  return axios.get("/files/logs/systemLogfiles")
+}
 export const readLogfile = (
   fileName: string,
   limit: number,