update logs

zjy365 · Jan 21, 2025 · 944095a · 944095a
1 parent 74a847e
commit 944095a
Show file tree

Hide file tree

Showing 11 changed files with 176 additions and 93 deletions.
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
diff --git a/frontend/providers/applaunchpad/src/api/app.ts b/frontend/providers/applaunchpad/src/api/app.ts
@@ -9,7 +9,7 @@ import {
 } from '@/utils/adapt';
 import type { AppPatchPropsType, PodDetailType } from '@/types/app';
 import { MonitorDataResult, MonitorQueryKey } from '@/types/monitor';
-import { LogQueryPayload } from '@/pages/api/log/get';
+import { LogQueryPayload } from '@/pages/api/log/queryLogs';
 
 export const postDeployApp = (yamlList: string[]) => POST('/api/applyApp', { yamlList });
 
@@ -63,11 +63,4 @@ export const getAppMonitorData = (payload: {
   end?: number;
 }) => GET<MonitorDataResult[]>(`/api/monitor/getMonitorData`, payload);
 
-export const getAppLogs = (payload: LogQueryPayload) =>
-  POST<
-    {
-      logs_total: string;
-      _msg: string;
-      _time: string;
-    }[]
-  >('/api/log/get', payload);
+export const getAppLogs = (payload: LogQueryPayload) => POST<string>('/api/log/queryLogs', payload);
diff --git a/frontend/providers/applaunchpad/src/components/BaseTable/index.tsx b/frontend/providers/applaunchpad/src/components/BaseTable/index.tsx
@@ -84,7 +84,14 @@ export function BaseTable<T extends unknown>({
                       <Td
                         key={cell.id}
                         p={'10px 24px'}
-                        bg={isPinned ? 'white' : ''}
+                        bg={
+                          // @ts-ignore
+                          cell.column.columnDef.meta?.isError?.(item.original)
+                            ? '#FFFAEB'
+                            : isPinned
+                            ? 'white'
+                            : ''
+                        }
                         borderBottom={'1px solid'}
                         borderBottomColor={
                           index !== table.getRowModel().rows.length - 1 ? '#F0F1F6' : 'transparent'

diff --git a/frontend/providers/applaunchpad/src/components/DatePicker/index.tsx b/frontend/providers/applaunchpad/src/components/DatePicker/index.tsx
@@ -316,15 +316,15 @@ const DatePicker = ({ isDisabled = false, ...props }: DatePickerProps) => {
             <MyIcon name="calendar" />
           </Button>
         </PopoverTrigger>
-        <PopoverContent zIndex={99} w={'fit-content'}>
+        <PopoverContent zIndex={99} w={'fit-content'} borderRadius={'12px'}>
           <Grid
             templateColumns="repeat(9,1fr)"
             templateRows={'repeat(10,1fr)'}
-            w={'500px'}
+            w={'460px'}
             h={'fit-content'}
           >
             <GridItem colSpan={6} rowSpan={9}>
-              <Flex flexDir={'column'} gap={'5px'} mb={'-1px'} pl={'10px'}>
+              <Flex flexDir={'column'} gap={'5px'} mb={'-1px'}>
                 <DayPicker
                   mode="range"
                   selected={selectedRange}
@@ -380,7 +380,7 @@ const DatePicker = ({ isDisabled = false, ...props }: DatePickerProps) => {
             <GridItem colSpan={3} rowSpan={9}>
               <Flex h={'100%'}>
                 <Divider orientation="vertical" />
-                <Flex flexDir={'column'} gap={'4px'} p={'12px'} w={'100%'}>
+                <Flex flexDir={'column'} gap={'4px'} p={'12px 8px'} w={'100%'}>
                   {recentDateList.map((item) => (
                     <Button
                       key={JSON.stringify(item.value)}
@@ -393,6 +393,9 @@ const DatePicker = ({ isDisabled = false, ...props }: DatePickerProps) => {
                         bg: 'brightBlue.50',
                         color: 'brightBlue.600'
                       })}
+                      _hover={{
+                        bg: 'rgba(17, 24, 36, 0.05)'
+                      }}
                       onClick={() => handleRecentDateClick(item)}
                     >
                       {item.label}

diff --git a/frontend/providers/applaunchpad/src/components/app/detail/logs/Filter.tsx b/frontend/providers/applaunchpad/src/components/app/detail/logs/Filter.tsx
@@ -76,11 +76,8 @@ export const Filter = ({
             variant={'primary'}
             leftIcon={<MyIcon name={'search'} color={'white'} w={'16px'} h={'16px'} />}
             onClick={() => {
-              if (isJsonMode) {
-                formHook.setValue('keyword', inputKeyword);
-              } else {
-                refetchData();
-              }
+              formHook.setValue('keyword', inputKeyword);
+              refetchData();
             }}
           >
             {t('search')}

diff --git a/frontend/providers/applaunchpad/src/components/app/detail/logs/LogCounts.tsx b/frontend/providers/applaunchpad/src/components/app/detail/logs/LogCounts.tsx
@@ -15,7 +15,7 @@ export const LogCounts = ({
   const [onOpenChart, setOnOpenChart] = useState(true);
 
   const processChartData = (rawData: Array<{ _time: string; logs_total: string }>) => {
-    const sortedData = rawData.sort(
+    const sortedData = [...rawData].sort(
       (a, b) => new Date(a._time).getTime() - new Date(b._time).getTime()
     );
     const xData = sortedData.map((item) => Math.floor(new Date(item._time).getTime() / 1000));

diff --git a/frontend/providers/applaunchpad/src/components/app/detail/logs/LogTable.tsx b/frontend/providers/applaunchpad/src/components/app/detail/logs/LogTable.tsx
@@ -23,6 +23,7 @@ import MyIcon from '@/components/Icon';
 import { formatTime } from '@/utils/tools';
 import { LogsFormData } from '@/pages/app/detail/logs';
 import { UseFormReturn } from 'react-hook-form';
+import { useLogStore } from '@/store/logStore';
 
 interface FieldItem {
   value: string;
@@ -31,6 +32,15 @@ interface FieldItem {
   accessorKey: string;
 }
 
+interface LogData {
+  stream: string;
+  [key: string]: any;
+}
+
+interface LogColumnMeta {
+  isError?: (row: LogData) => boolean;
+}
+
 export const LogTable = ({
   data,
   isLoading,
@@ -47,7 +57,7 @@ export const LogTable = ({
   const [hiddenFieldCount, setHiddenFieldCount] = useState(0);
   const [visibleFieldCount, setVisibleFieldCount] = useState(0);
   const isJsonMode = formHook.watch('isJsonMode');
-  const globalFilter = formHook.watch('keyword');
+  const { exportLogs } = useLogStore();
 
   const generateFieldList = useCallback(
     (data: any[]) => {
@@ -85,7 +95,7 @@ export const LogTable = ({
         .map((key) => ({
           value: key,
           label: key,
-          checked: ['_time', 'stream', 'id', 'ctx'].includes(key),
+          checked: true,
           accessorKey: key
         }));
     },
@@ -122,10 +132,18 @@ export const LogTable = ({
           }
 
           return (
-            <Text color={'grayModern.600'} fontSize={'12px'} fontWeight={400} lineHeight={'16px'}>
+            <Text
+              color={row.original.stream === 'stderr' ? '#B42318' : 'grayModern.600'}
+              fontSize={'12px'}
+              fontWeight={400}
+              lineHeight={'16px'}
+            >
               {value?.toString() || ''}
             </Text>
           );
+        },
+        meta: {
+          isError: (row: any) => row.stream === 'stderr'
         }
       }));
   }, [fieldList]);
@@ -134,10 +152,7 @@ export const LogTable = ({
     data: data,
     columns,
     getCoreRowModel: getCoreRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    state: {
-      globalFilter: globalFilter
-    }
+    getFilteredRowModel: getFilteredRowModel()
   });
 
   return (
@@ -222,6 +237,7 @@ export const LogTable = ({
           variant={'outline'}
           h={'28px'}
           leftIcon={<MyIcon name="export" />}
+          onClick={() => exportLogs()}
         >
           {t('export_log')}
         </Button>
@@ -277,8 +293,7 @@ export const LogTable = ({
         maxH={'500px'}
         tdStyle={{
           p: '10px 24px',
-          borderBottom: '1px solid',
-          borderBottomColor: '#F0F1F6'
+          borderBottom: 'none'
         }}
       />
     </Flex>

diff --git a/...ers/applaunchpad/src/pages/api/log/get.ts → ...plaunchpad/src/pages/api/log/queryLogs.ts b/...ers/applaunchpad/src/pages/api/log/get.ts → ...plaunchpad/src/pages/api/log/queryLogs.ts
@@ -3,7 +3,7 @@ import { authSession } from '@/services/backend/auth';
 import { getK8s } from '@/services/backend/kubernetes';
 import { jsonRes } from '@/services/backend/response';
 import { ApiResp } from '@/services/kubernet';
-import { monitorFetch } from '@/services/monitorFetch';
+
 import type { NextApiRequest, NextApiResponse } from 'next';
 
 export interface LogQueryPayload {
@@ -19,6 +19,7 @@ export interface LogQueryPayload {
   container?: string[]; // 可选，默认 []
   keyword?: string; // 可选，默认 ""
   jsonQuery?: JsonFilterItem[]; // 可选，默认 []
+  exportMode?: boolean; // 新增：是否导出文件模式
 }
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse<ApiResp>) {
@@ -54,7 +55,8 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
       pod = [],
       container = [],
       keyword = '',
-      jsonQuery = []
+      jsonQuery = [],
+      exportMode = false
     } = req.body as LogQueryPayload;
 
     const params: LogQueryPayload = {
@@ -87,37 +89,16 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
       }
     });
     const contentType = result.headers.get('content-type');
-    console.log(contentType, 'contentType');
-    const data = await result.text();
-    // 按行分割并过滤空行
-    const logLines = data.split('\n').filter((line) => line.trim());
-    console.log(logLines, 'logLines');
 
-    // 解析每行日志
-    const parsedLogs = logLines.map((line) => {
-      try {
-        const logEntry = JSON.parse(line);
-        // 如果_msg是JSON字符串，也将其解析
-        // if (logEntry._msg) {
-        //   try {
-        //     logEntry._msg = JSON.parse(logEntry._msg);
-        //   } catch (e) {
-        //     // 如果_msg不是JSON格式，保持原样
-        //   }
-        // }
-        return logEntry;
-      } catch (e) {
-        throw new Error('parse log error');
-      }
-    });
+    console.log(result.status, contentType);
+    const data = await result.text();
 
     jsonRes(res, {
       code: 200,
-      data: parsedLogs
+      data: data
     });
   } catch (error) {
     console.log(error, 'error');
-
     jsonRes(res, {
       code: 500,
       error: error

diff --git a/frontend/providers/applaunchpad/src/pages/app/detail/logs.tsx b/frontend/providers/applaunchpad/src/pages/app/detail/logs.tsx
@@ -17,6 +17,8 @@ import useDateTimeStore from '@/store/date';
 import { getAppLogs } from '@/api/app';
 import { useForm } from 'react-hook-form';
 import { formatTimeRange } from '@/utils/timeRange';
+import { downLoadBold } from '@/utils/tools';
+import { useLogStore } from '@/store/logStore';
 
 export interface JsonFilterItem {
   key: string;
@@ -46,6 +48,7 @@ export default function LogsPage({ appName }: { appName: string }) {
   const { appDetail, appDetailPods } = useAppStore();
   const [isInitialized, setIsInitialized] = useState(false);
   const { refreshInterval, setRefreshInterval, startDateTime, endDateTime } = useDateTimeStore();
+  const { setLogs, exportLogs, parsedLogs, logCounts, setLogCounts } = useLogStore();
 
   const formHook = useForm<LogsFormData>({
     defaultValues: {
@@ -88,19 +91,15 @@ export default function LogsPage({ appName }: { appName: string }) {
   const selectedContainers = formHook.watch('containers').filter((container) => container.checked);
   const timeRange = formatTimeRange(startDateTime, endDateTime);
 
-  const {
-    data: logsData,
-    isLoading,
-    refetch: refetchLogsData
-  } = useQuery(
+  const { isLoading, refetch: refetchLogsData } = useQuery(
     [
       'logs-data',
       appName,
       timeRange,
       formHook.watch('isOnlyStderr'),
       formHook.watch('limit'),
       formHook.watch('isJsonMode'),
-      formHook.watch('jsonFilters')
+      formHook.watch('keyword')
     ],
     () =>
       getAppLogs({
@@ -109,35 +108,56 @@ export default function LogsPage({ appName }: { appName: string }) {
         limit: formHook.watch('limit').toString(),
         jsonMode: formHook.watch('isJsonMode').toString(),
         stderrMode: formHook.watch('isOnlyStderr').toString(),
-        jsonQuery: formHook.watch('jsonFilters')
+        jsonQuery: formHook
+          .watch('jsonFilters')
+          .filter((item) => item.key && item.key.trim() !== ''),
+        keyword: formHook.watch('keyword')
       }),
     {
       refetchInterval: refreshInterval,
       onError: (error: any) => {
         console.log(error, 'error');
         setRefreshInterval(0);
       },
+      onSuccess: (data) => {
+        setLogs(data);
+      },
       retry: 1
     }
   );
 
-  const {
-    data: logCountsData,
-    refetch: refetchLogCountsData,
-    isLoading: isLogCountsLoading
-  } = useQuery(['log-counts-data', appName, timeRange, formHook.watch('isOnlyStderr')], () =>
-    getAppLogs({
-      app: appName,
-      numberMode: 'true',
-      numberLevel: timeRange.slice(-1),
-      time: timeRange,
-      stderrMode: formHook.watch('isOnlyStderr').toString()
-    })
+  const { refetch: refetchLogCountsData, isLoading: isLogCountsLoading } = useQuery(
+    [
+      'log-counts-data',
+      appName,
+      timeRange,
+      formHook.watch('isOnlyStderr'),
+      formHook.watch('jsonFilters'),
+      formHook.watch('keyword')
+    ],
+    () =>
+      getAppLogs({
+        app: appName,
+        numberMode: 'true',
+        numberLevel: timeRange.slice(-1),
+        time: timeRange,
+        stderrMode: formHook.watch('isOnlyStderr').toString()
+        // jsonQuery: formHook
+        //   .watch('jsonFilters')
+        //   .filter((item) => item.key && item.key.trim() !== ''),
+        // keyword: formHook.watch('keyword')
+      }),
+    {
+      onSuccess: (data) => {
+        setLogCounts(data);
+      }
+    }
   );
 
-  console.log(formHook.getValues(), logsData, logCountsData, 'logsData');
+  console.log(formHook.getValues(), logCounts, parsedLogs, 'logsData');
 
   const refetchData = () => {
+    console.log('refetchData');
     refetchLogsData();
     refetchLogCountsData();
   };
@@ -165,10 +185,7 @@ export default function LogsPage({ appName }: { appName: string }) {
             borderRadius={'lg'}
             flexShrink={0}
           >
-            <LogCounts
-              logCountsData={logCountsData || []}
-              isLogCountsLoading={isLogCountsLoading}
-            />
+            <LogCounts logCountsData={logCounts || []} isLogCountsLoading={isLogCountsLoading} />
           </Box>
           <Box
             bg={'white'}
@@ -178,7 +195,7 @@ export default function LogsPage({ appName }: { appName: string }) {
             flex={1}
             minH={'400px'}
           >
-            <LogTable data={logsData || []} isLoading={isLoading} formHook={formHook} />
+            <LogTable data={parsedLogs || []} isLoading={isLoading} formHook={formHook} />
           </Box>
         </>
       </Box>