From 997d21f6e560573e9aa78886122c1bbced647747 Mon Sep 17 00:00:00 2001
From: Sven Grossmann <sven.grossmann@grafana.com>
Date: Tue, 22 Aug 2023 15:19:51 +0200
Subject: [PATCH] Logs: Fix log samples not present with empty first frame
 (#73612)

* fix log samples not present with empty first frame

* also test with empty frames

* rename test file

* remove import
---
 ...mple.test.tsx => LogsSamplePanel.test.tsx} | 68 ++++++++++++++++++-
 .../features/explore/Logs/LogsSamplePanel.tsx |  2 +-
 2 files changed, 66 insertions(+), 4 deletions(-)
 rename public/app/features/explore/Logs/{LogsSample.test.tsx => LogsSamplePanel.test.tsx} (64%)

diff --git a/public/app/features/explore/Logs/LogsSample.test.tsx b/public/app/features/explore/Logs/LogsSamplePanel.test.tsx
similarity index 64%
rename from public/app/features/explore/Logs/LogsSample.test.tsx
rename to public/app/features/explore/Logs/LogsSamplePanel.test.tsx
index 61bf838c98e..ad48e63839d 100644
--- a/public/app/features/explore/Logs/LogsSample.test.tsx
+++ b/public/app/features/explore/Logs/LogsSamplePanel.test.tsx
@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React, { ComponentProps } from 'react';
 
-import { FieldType, LoadingState, MutableDataFrame, SupplementaryQueryType, DataSourceApi } from '@grafana/data';
+import { FieldType, LoadingState, SupplementaryQueryType, DataSourceApi, createDataFrame } from '@grafana/data';
 import { DataQuery } from '@grafana/schema';
 
 import { LogsSamplePanel } from './LogsSamplePanel';
@@ -28,7 +28,8 @@ const createProps = (propOverrides?: Partial<ComponentProps<typeof LogsSamplePan
   return { ...props, ...propOverrides };
 };
 
-const sampleDataFrame = new MutableDataFrame({
+const emptyDataFrame = createDataFrame({ fields: [] });
+const sampleDataFrame = createDataFrame({
   meta: {
     custom: { frameType: 'LabeledTimeValues' },
   },
@@ -53,6 +54,31 @@ const sampleDataFrame = new MutableDataFrame({
     },
   ],
 });
+const sampleDataFrame2 = createDataFrame({
+  meta: {
+    custom: { frameType: 'LabeledTimeValues' },
+  },
+  fields: [
+    {
+      name: 'labels',
+      type: FieldType.other,
+      values: [
+        { place: 'luna', source: 'data' },
+        { place: 'luna', source: 'data' },
+      ],
+    },
+    {
+      name: 'Time',
+      type: FieldType.time,
+      values: ['2023-02-22T09:28:11.352440161Z', '2023-02-22T14:42:50.991981292Z'],
+    },
+    {
+      name: 'Line',
+      type: FieldType.string,
+      values: ['line3', 'line4'],
+    },
+  ],
+});
 
 describe('LogsSamplePanel', () => {
   it('shows empty panel if no data', () => {
@@ -65,11 +91,18 @@ describe('LogsSamplePanel', () => {
     expect(screen.getByText('Logs sample is loading...')).toBeInTheDocument();
   });
 
-  it('shows no data message', () => {
+  it('shows no data message with no dataframe', () => {
     render(<LogsSamplePanel {...createProps({ queryResponse: { data: [], state: LoadingState.Done } })} />);
     expect(screen.getByText('No logs sample data.')).toBeInTheDocument();
   });
 
+  it('shows no data message with an empty dataframe', () => {
+    render(
+      <LogsSamplePanel {...createProps({ queryResponse: { data: [emptyDataFrame], state: LoadingState.Done } })} />
+    );
+    expect(screen.getByText('No logs sample data.')).toBeInTheDocument();
+  });
+
   it('shows logs sample data', () => {
     render(
       <LogsSamplePanel {...createProps({ queryResponse: { data: [sampleDataFrame], state: LoadingState.Done } })} />
@@ -80,6 +113,35 @@ describe('LogsSamplePanel', () => {
     expect(screen.getByText('line2')).toBeInTheDocument();
   });
 
+  it('shows logs sample data with multiple frames', () => {
+    render(
+      <LogsSamplePanel
+        {...createProps({ queryResponse: { data: [sampleDataFrame, sampleDataFrame2], state: LoadingState.Done } })}
+      />
+    );
+    expect(screen.getByText('2022-02-22 04:28:11.352')).toBeInTheDocument();
+    expect(screen.getByText('line1')).toBeInTheDocument();
+    expect(screen.getByText('2022-02-22 09:42:50.991')).toBeInTheDocument();
+    expect(screen.getByText('line2')).toBeInTheDocument();
+
+    expect(screen.getByText('2023-02-22 04:28:11.352')).toBeInTheDocument();
+    expect(screen.getByText('line3')).toBeInTheDocument();
+    expect(screen.getByText('2023-02-22 09:42:50.991')).toBeInTheDocument();
+    expect(screen.getByText('line4')).toBeInTheDocument();
+  });
+
+  it('shows logs sample data with multiple frames and first frame empty', () => {
+    render(
+      <LogsSamplePanel
+        {...createProps({ queryResponse: { data: [emptyDataFrame, sampleDataFrame2], state: LoadingState.Done } })}
+      />
+    );
+    expect(screen.getByText('2023-02-22 04:28:11.352')).toBeInTheDocument();
+    expect(screen.getByText('line3')).toBeInTheDocument();
+    expect(screen.getByText('2023-02-22 09:42:50.991')).toBeInTheDocument();
+    expect(screen.getByText('line4')).toBeInTheDocument();
+  });
+
   it('shows log details', async () => {
     render(
       <LogsSamplePanel {...createProps({ queryResponse: { data: [sampleDataFrame], state: LoadingState.Done } })} />
diff --git a/public/app/features/explore/Logs/LogsSamplePanel.tsx b/public/app/features/explore/Logs/LogsSamplePanel.tsx
index 0df421f23ad..c3afeb696e9 100644
--- a/public/app/features/explore/Logs/LogsSamplePanel.tsx
+++ b/public/app/features/explore/Logs/LogsSamplePanel.tsx
@@ -82,7 +82,7 @@ export function LogsSamplePanel(props: Props) {
     );
   } else if (queryResponse.state === LoadingState.Loading) {
     LogsSamplePanelContent = <span>Logs sample is loading...</span>;
-  } else if (queryResponse.data.length === 0 || queryResponse.data[0].length === 0) {
+  } else if (queryResponse.data.length === 0 || queryResponse.data.every((frame) => frame.length === 0)) {
     LogsSamplePanelContent = <span>No logs sample data.</span>;
   } else {
     const logs = dataFrameToLogsModel(queryResponse.data);