Explore: refactors LogRowContextProvider to get rid of unnecessary dimensions (#24899)

* Chore: refactors LogRowContextProvider to get rid of unnecessary array dimensions

* Chore: removes unnecessary array dimensions from LogRowContextProvider test

* Chore: changes LogRowContextProvider test to use jest mock

* Chore: updates LogRowContextProvider test

* Chore: removes unnecessary wrapper variable in LogRowContextProvider test

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

@@ -34,7 +34,13 @@ describe('getRowContexts', () => {
 
       const result = await getRowContexts(getRowContextMock, row, 10);
 
-      expect(result).toEqual({ data: [[['3', '2']], [['6', '5', '4']]], errors: ['', ''] });
+      expect(result).toEqual({
+        data: [
+          ['3', '2'],
+          ['6', '5', '4'],
+        ],
+        errors: ['', ''],
+      });
     });
 
     it('then the result should be in correct format and filtered without uid', async () => {
@@ -63,7 +69,13 @@ describe('getRowContexts', () => {
 
       const result = await getRowContexts(getRowContextMock, row, 10);
 
-      expect(result).toEqual({ data: [[['3', '2', '1']], [['6', '5']]], errors: ['', ''] });
+      expect(result).toEqual({
+        data: [
+          ['3', '2', '1'],
+          ['6', '5'],
+        ],
+        errors: ['', ''],
+      });
     });
   });
 
@@ -93,17 +105,17 @@ describe('LogRowContextProvider', () => {
       const firstResult = new MutableDataFrame({
         refId: 'B',
         fields: [
-          { name: 'ts', type: FieldType.time, values: [10, 9, 8, 7, 6, 5, 4, 3, 2, 1] },
+          { name: 'ts', type: FieldType.time, values: [10, 9, 8, 7, 6, 5] },
           {
             name: 'line',
             type: FieldType.string,
-            values: ['10', '9', '8', '7', '6', '5', '4', '3', '2', '1'],
+            values: ['10', '9', '8', '7', '6', '5'],
             labels: {},
           },
           {
             name: 'id',
             type: FieldType.string,
-            values: ['10', '9', '8', '7', '6', '5', '4', '3', '2', '1'],
+            values: ['10', '9', '8', '7', '6', '5'],
             labels: {},
           },
         ],
@@ -126,42 +138,34 @@ describe('LogRowContextProvider', () => {
         }
         return Promise.resolve({ data: [secondResult] });
       };
-      let wrapper: any;
+      let updateLimitCalled = false;
+
+      const mockedChildren = jest.fn((mockState: any) => {
+        const { result, errors, hasMoreContextRows, updateLimit, limit } = mockState;
+        if (!updateLimitCalled && result.before.length === 0) {
+          expect(result).toEqual({ before: [], after: [] });
+          expect(errors).toEqual({ before: undefined, after: undefined });
+          expect(hasMoreContextRows).toEqual({ before: true, after: true });
+          expect(limit).toBe(10);
+          return <></>;
+        }
+        if (!updateLimitCalled && result.before.length > 0) {
+          expect(result).toEqual({ before: ['10', '9', '8', '7', '6', '5'], after: ['14', '13', '12'] });
+          expect(errors).toEqual({ before: '', after: '' });
+          expect(hasMoreContextRows).toEqual({ before: true, after: true });
+          expect(limit).toBe(10);
+          updateLimit();
+          updateLimitCalled = true;
+          return <></>;
+        }
+        if (updateLimitCalled && result.before.length > 0 && limit > 10) {
+          expect(limit).toBe(20);
+        }
+        return <></>;
+      });
       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>
-        );
+        await mount(<LogRowContextProvider row={row} getRowContext={getRowContextMock} children={mockedChildren} />);
       });
-      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');
     });
   });
 });

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

 import { LogRowModel, toDataFrame, Field, FieldCache } from '@grafana/data';
 import React, { useState, useEffect } from 'react';
-import flatten from 'lodash/flatten';
 import useAsync from 'react-use/lib/useAsync';
 
 import { DataQueryResponse, DataQueryError } from '@grafana/data';
@@ -101,11 +100,7 @@ export const getRowContexts = async (
           const lineField: Field<string> = dataFrame.fields.filter(field => field.name === 'line')[0];
           const line = lineField.values.get(fieldIndex); // assuming that both fields have same length
 
-          if (data.length === 0) {
-            data[0] = [line];
-          } else {
-            data[0].push(line);
-          }
+          data.push(line);
         }
       }
 
@@ -161,10 +156,10 @@ export const LogRowContextProvider: React.FunctionComponent<LogRowContextProvide
         let hasMoreLogsBefore = true,
           hasMoreLogsAfter = true;
 
-        const currentResultBefore = currentResult?.data[0][0];
-        const currentResultAfter = currentResult?.data[1][0];
-        const valueBefore = value.data[0][0];
-        const valueAfter = value.data[1][0];
+        const currentResultBefore = currentResult?.data[0];
+        const currentResultAfter = currentResult?.data[1];
+        const valueBefore = value.data[0];
+        const valueAfter = value.data[1];
 
         // checks if there are more log rows in a given direction
         // if after fetching additional rows the length of result is the same,
@@ -189,8 +184,8 @@ export const LogRowContextProvider: React.FunctionComponent<LogRowContextProvide
 
   return children({
     result: {
-      before: result ? flatten(result.data[0]) : [],
-      after: result ? flatten(result.data[1]) : [],
+      before: result ? result.data[0] : [],
+      after: result ? result.data[1] : [],
     },
     errors: {
       before: result ? result.errors[0] : undefined,