[BUGFIX] Logstable: all quries results must be included (perses#533)

Signed-off-by: Mahmoud Shahrokni <seyedmahmoud.shahrokni@amadeus.com>

Author: shahrokni

logstable/src/LogsTableComponent.tsx

@@ -19,7 +19,12 @@ import { LogsList } from './components/LogsList';
 export function LogsTableComponent(props: LogsTableProps): ReactElement | null {
   const { queryResults, spec } = props;
 
-  if (queryResults[0]?.data.logs === undefined) {
+  // all queries results must be included
+  const logs = queryResults
+    .flatMap((result) => result?.data.logs?.entries ?? [])
+    .sort((a, b) => b.timestamp - a.timestamp);
+
+  if (!logs.length) {
     return (
       <Box
         sx={{
@@ -33,7 +38,6 @@ export function LogsTableComponent(props: LogsTableProps): ReactElement | null {
       </Box>
     );
   }
-  const logs = queryResults[0]?.data.logs.entries;
 
   return <LogsList logs={logs} spec={spec} />;
 }

logstable/src/LogsTablePanel.test.tsx

@@ -13,7 +13,7 @@
 
 import { ChartsProvider, SnackbarProvider, testChartsTheme } from '@perses-dev/components';
 import { render, screen, fireEvent } from '@testing-library/react';
-import { MOCK_LOGS_QUERY_RESULT, MOCK_LOGS_QUERY_DEFINITION } from './test/mock-query-results';
+import { MOCK_LOGS_QUERY_RESULT, MOCK_LOGS_QUERY_DEFINITION, MOCK_LOGS_QUERY_RESULTS } from './test/mock-query-results';
 import { LogsTablePanel } from './LogsTablePanel';
 import { LogsQueryData, LogsTableProps } from './model';
 
@@ -36,13 +36,17 @@ const TEST_LOGS_TABLE_PROPS: Omit<LogsTableProps, 'queryResults'> = {
 
 describe('LogsTablePanel', () => {
   // Helper to render the panel with some context set
-  const renderPanel = (data: LogsQueryData): void => {
+  const renderPanel = (data: LogsQueryData | LogsQueryData[]): void => {
     render(
       <SnackbarProvider>
         <ChartsProvider chartsTheme={testChartsTheme}>
           <LogsTablePanel
             {...TEST_LOGS_TABLE_PROPS}
-            queryResults={[{ definition: MOCK_LOGS_QUERY_DEFINITION, data }]}
+            queryResults={
+              !Array.isArray(data)
+                ? [{ definition: MOCK_LOGS_QUERY_DEFINITION, data }]
+                : data.map((d) => ({ definition: MOCK_LOGS_QUERY_DEFINITION, data: d }))
+            }
           />
         </ChartsProvider>
       </SnackbarProvider>
@@ -62,6 +66,12 @@ describe('LogsTablePanel', () => {
     expect(await screen.findAllByText('2022-10-24T15:31:31.000Z')).toHaveLength(1); // second timestamp appear once per line
   });
 
+  it('should include results from multiple queries', async () => {
+    renderPanel(MOCK_LOGS_QUERY_RESULTS);
+    const items = screen.getAllByTestId(/^log-row-container-/);
+    expect(items.length).toBe(2);
+  });
+
   it('should select multiple rows with Cmd+Click', () => {
     renderPanel(MOCK_LOGS_QUERY_RESULT);
     const items = screen.getByTestId('virtuoso-item-list');

logstable/src/components/LogRow/LogRow.tsx

@@ -154,6 +154,7 @@ const DefaultLogRow: React.FC<LogRowProps> = ({
         }
       }}
       data-log-index={index}
+      data-testid={`log-row-container-${index}`}
     >
       <LogRowContent
         onMouseDown={handleRowMouseDown}

logstable/src/test/mock-query-results.ts

@@ -22,7 +22,7 @@ export const MOCK_LOGS_QUERY_RESULT: LogsQueryData = {
     },
     entries: [
       {
-        timestamp: 1666625490,
+        timestamp: 1666625491,
         line: 'foo',
         labels: {
           device: '/dev/vda1',
@@ -34,7 +34,7 @@ export const MOCK_LOGS_QUERY_RESULT: LogsQueryData = {
         },
       },
       {
-        timestamp: 1666625491,
+        timestamp: 1666625490,
         line: 'bar',
         labels: {
           device: '/dev/vda15',
@@ -49,6 +49,61 @@ export const MOCK_LOGS_QUERY_RESULT: LogsQueryData = {
   },
 };
 
+export const MOCK_LOGS_QUERY_RESULTS: LogsQueryData[] = [
+  {
+    logs: {
+      entries: [
+        {
+          timestamp: 1769009811.4465687,
+          line: '{"host":"120.180.160.121", "user-identifier":"-", "datetime":"21/Jan/2026:15:32:31 +0000", "method": "DELETE", "request": "/killer/pixy", "protocol":"HTTP/2.0", "status":200, "bytes":9821, "referer": "http://www.internationalend-to-end.com/e-business/web services"}',
+          labels: {
+            app: 'log-generator',
+            bytes: '9821',
+            datetime: '21/Jan/2026:15:32:31 +0000',
+            detected_level: 'unknown',
+            filename: '/var/log/fake/fake.log',
+            host: '120.180.160.121',
+            method: 'DELETE',
+            protocol: 'HTTP/2.0',
+            referer: 'http://www.internationalend-to-end.com/e-business/web services',
+            request: '/killer/pixy',
+            service_name: 'log-generator',
+            status: '200',
+            user_identifier: '-',
+          },
+        },
+      ],
+      totalCount: 1,
+    },
+  },
+  {
+    logs: {
+      entries: [
+        {
+          timestamp: 1769009890.5294495,
+          line: '{"host":"18.178.231.77", "user-identifier":"cormier2584", "datetime":"21/Jan/2026:15:33:49 +0000", "method": "POST", "request": "/facilitate/mesh/methodologies/deploy", "protocol":"HTTP/1.1", "status":503, "bytes":9892, "referer": "http://www.direct.com/holistic"}',
+          labels: {
+            app: 'log-generator',
+            bytes: '9892',
+            datetime: '21/Jan/2026:15:33:49 +0000',
+            detected_level: 'unknown',
+            filename: '/var/log/fake/fake.log',
+            host: '18.178.231.77',
+            method: 'POST',
+            protocol: 'HTTP/1.1',
+            referer: 'http://www.direct.com/holistic',
+            request: '/facilitate/mesh/methodologies/deploy',
+            service_name: 'log-generator',
+            status: '503',
+            user_identifier: 'cormier2584',
+          },
+        },
+      ],
+      totalCount: 1,
+    },
+  },
+];
+
 export const MOCK_LOGS_QUERY_DEFINITION = {
   kind: 'LogsQuery',
   spec: {