Explore: fixes loading more logs in logs context view (#24135)

packages/grafana-ui/src/components/Logs/LogRowContextProvider.test.ts → packages/grafana-ui/src/components/Logs/LogRowContextProvider.test.tsx

+import React from 'react';
 import { FieldType, LogRowModel, MutableDataFrame, Labels, LogLevel, DataQueryResponse } from '@grafana/data';
-import { getRowContexts } from './LogRowContextProvider';
+import { getRowContexts, LogRowContextProvider } from './LogRowContextProvider';
+import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
 
 describe('getRowContexts', () => {
   describe('when called with a DataFrame and results are returned', () => {
@@ -84,6 +87,85 @@ describe('getRowContexts', () => {
   });
 });
 
+describe('LogRowContextProvider', () => {
+  describe('when requesting longer context', () => {
+    it('can request more log lines', async () => {
+      const firstResult = new MutableDataFrame({
+        refId: 'B',
+        fields: [
+          { name: 'ts', type: FieldType.time, values: [10, 9, 8, 7, 6, 5, 4, 3, 2, 1] },
+          {
+            name: 'line',
+            type: FieldType.string,
+            values: ['10', '9', '8', '7', '6', '5', '4', '3', '2', '1'],
+            labels: {},
+          },
+          {
+            name: 'id',
+            type: FieldType.string,
+            values: ['10', '9', '8', '7', '6', '5', '4', '3', '2', '1'],
+            labels: {},
+          },
+        ],
+      });
+
+      const secondResult = new MutableDataFrame({
+        refId: 'B',
+        fields: [
+          { name: 'ts', type: FieldType.time, values: [14, 13, 12] },
+          { name: 'line', type: FieldType.string, values: ['14', '13', '12'], labels: {} },
+          { name: 'id', type: FieldType.string, values: ['14', '13', '12'], labels: {} },
+        ],
+      });
+
+      let called = false;
+      const getRowContextMock = (row: LogRowModel, options?: any): Promise<DataQueryResponse> => {
+        if (!called) {
+          called = true;
+          return Promise.resolve({ data: [firstResult] });
+        }
+        return Promise.resolve({ data: [secondResult] });
+      };
+      let wrapper: any;
+      await act(async () => {
+        wrapper = await mount(
+          <LogRowContextProvider row={row} getRowContext={getRowContextMock}>
+            {({ result, errors, hasMoreContextRows, updateLimit, limit }) => {
+              return (
+                <div>
+                  <div className="result">
+                    <p className="result-before">{result.before?.toString()}</p>
+                    <p className="result-after">{result.after?.toString()}</p>
+                  </div>
+                  <div className="errors">
+                    <p className="errors-before">{errors.before}</p>
+                    <p className="errors-after">{errors.after}</p>
+                  </div>
+                  <div className="hasMoreContextRows">
+                    <p className="hasMoreContextRows-before">{String(hasMoreContextRows.before)}</p>
+                    <p className="hasMoreContextRows-after">{String(hasMoreContextRows.after)}</p>
+                  </div>
+                  <div className="limit">{limit}</div>
+                  <button className="updateLimit" onClick={updateLimit}>
+                    Update limit
+                  </button>
+                </div>
+              );
+            }}
+          </LogRowContextProvider>
+        );
+      });
+      expect(wrapper.find('.hasMoreContextRows-before').text()).toBe('true');
+      expect(wrapper.find('.hasMoreContextRows-after').text()).toBe('true');
+      expect(wrapper.find('.limit').text()).toBe('10');
+      await act(async () => wrapper.find('.updateLimit').simulate('click'));
+      expect(wrapper.find('.limit').text()).toBe('20');
+      expect(wrapper.find('.hasMoreContextRows-before').text()).toBe('true');
+      expect(wrapper.find('.hasMoreContextRows-after').text()).toBe('false');
+    });
+  });
+});
+
 const row: LogRowModel = {
   entryFieldIndex: 0,
   rowIndex: 0,

packages/grafana-ui/src/components/Logs/LogRowContextProvider.tsx

@@ -37,6 +37,7 @@ interface LogRowContextProviderProps {
     errors: LogRowContextQueryErrors;
     hasMoreContextRows: HasMoreContextRows;
     updateLimit: () => void;
+    limit: number;
   }) => JSX.Element;
 }
 
@@ -160,11 +161,19 @@ export const LogRowContextProvider: React.FunctionComponent<LogRowContextProvide
         let hasMoreLogsBefore = true,
           hasMoreLogsAfter = true;
 
-        if (currentResult && currentResult.data[0].length === value.data[0].length) {
+        const currentResultBefore = currentResult?.data[0][0];
+        const currentResultAfter = currentResult?.data[1][0];
+        const valueBefore = value.data[0][0];
+        const valueAfter = value.data[1][0];
+
+        // checks if there are more log rows in a given direction
+        // if after fetching additional rows the length of result is the same,
+        // we can assume there are no logs in that direction within a given time range
+        if (currentResult && (!valueBefore || currentResultBefore.length === valueBefore.length)) {
           hasMoreLogsBefore = false;
         }
 
-        if (currentResult && currentResult.data[1].length === value.data[1].length) {
+        if (currentResult && (!valueAfter || currentResultAfter.length === valueAfter.length)) {
           hasMoreLogsAfter = false;
         }
 
@@ -189,5 +198,6 @@ export const LogRowContextProvider: React.FunctionComponent<LogRowContextProvide
     },
     hasMoreContextRows,
     updateLimit: () => setLimit(limit + 10),
+    limit,
   });
 };