From 0f8d4db934a0428afc1e6142be3b32a3f9b45b20 Mon Sep 17 00:00:00 2001
From: Sven Grossmann <sven.grossmann@grafana.com>
Date: Tue, 9 Jan 2024 11:56:48 +0100
Subject: [PATCH] Log Context: Add highlighted words to log rows (#80119)

* Log Context: Add highlighted words to log rows

* Update public/app/features/logs/components/log-context/LogRowContextModal.tsx

Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>

---------

Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
---
 .../log-context/LogRowContextModal.test.tsx   | 111 ++++++++++++++++++
 .../log-context/LogRowContextModal.tsx        |   5 +-
 2 files changed, 115 insertions(+), 1 deletion(-)

diff --git a/public/app/features/logs/components/log-context/LogRowContextModal.test.tsx b/public/app/features/logs/components/log-context/LogRowContextModal.test.tsx
index f36f51b8ad3..a7995848129 100644
--- a/public/app/features/logs/components/log-context/LogRowContextModal.test.tsx
+++ b/public/app/features/logs/components/log-context/LogRowContextModal.test.tsx
@@ -292,6 +292,117 @@ describe('LogRowContextModal', () => {
     });
   });
 
+  it('should highlight the same `foo123` searchwords', async () => {
+    const dfBeforeNs = createDataFrame({
+      fields: [
+        {
+          name: 'time',
+          type: FieldType.time,
+          values: [1, 1],
+        },
+        {
+          name: 'message',
+          type: FieldType.string,
+          values: ['this contains foo123', 'this contains foo123'],
+        },
+        {
+          name: 'tsNs',
+          type: FieldType.string,
+          values: ['1', '2'],
+        },
+      ],
+    });
+    const dfNowNs = createDataFrame({
+      fields: [
+        {
+          name: 'time',
+          type: FieldType.time,
+          values: [1],
+        },
+        {
+          name: 'message',
+          type: FieldType.string,
+          values: ['this contains foo123'],
+        },
+        {
+          name: 'tsNs',
+          type: FieldType.string,
+          values: ['2'],
+        },
+      ],
+    });
+    const dfAfterNs = createDataFrame({
+      fields: [
+        {
+          name: 'time',
+          type: FieldType.time,
+          values: [1, 1],
+        },
+        {
+          name: 'message',
+          type: FieldType.string,
+          values: ['this contains foo123', 'this contains foo123'],
+        },
+        {
+          name: 'tsNs',
+          type: FieldType.string,
+          values: ['2', '3'],
+        },
+      ],
+    });
+
+    let uniqueRefIdCounter = 1;
+    const logs = dataFrameToLogsModel([dfNowNs]);
+    const row = logs.rows[0];
+    row.searchWords = ['foo123'];
+    const getRowContext = jest.fn().mockImplementation(async (_, options) => {
+      uniqueRefIdCounter += 1;
+      const refId = `refid_${uniqueRefIdCounter}`;
+      if (uniqueRefIdCounter === 2) {
+        return {
+          data: [
+            {
+              refId,
+              ...dfBeforeNs,
+            },
+          ],
+        };
+      } else if (uniqueRefIdCounter === 3) {
+        return {
+          data: [
+            {
+              refId,
+              ...dfAfterNs,
+            },
+          ],
+        };
+      }
+      return { data: [] };
+    });
+
+    render(
+      <LogRowContextModal
+        row={row}
+        open={true}
+        onClose={() => {}}
+        getRowContext={getRowContext}
+        timeZone={timeZone}
+        logsSortOrder={LogsSortOrder.Descending}
+      />
+    );
+
+    // there need to be 3 lines with that message, all `foo123` should be highlighted
+    await waitFor(() => {
+      expect(screen.getAllByText('foo123').length).toBe(3);
+      for (const el of screen.getAllByText('foo123')) {
+        // highlights are done in `<mark>` tags
+        expect(el.tagName).toBe('MARK');
+      }
+      // test that the rest is not in a MARK
+      expect(screen.getAllByText('this contains')[0].tagName).not.toBe('MARK');
+    });
+  });
+
   it('should show a split view button', async () => {
     const getRowContextQuery = jest.fn().mockResolvedValue({ datasource: { uid: 'test-uid' } });
 
diff --git a/public/app/features/logs/components/log-context/LogRowContextModal.tsx b/public/app/features/logs/components/log-context/LogRowContextModal.tsx
index 0759c8ac287..8daf1cb5edd 100644
--- a/public/app/features/logs/components/log-context/LogRowContextModal.tsx
+++ b/public/app/features/logs/components/log-context/LogRowContextModal.tsx
@@ -363,7 +363,10 @@ export const LogRowContextModal: React.FunctionComponent<LogRowContextModalProps
       // this way this array of rows will never be empty
       const allRows = [...above.rows, row, ...below.rows];
 
-      const newRows = await loadMore(place, allRows);
+      const newRows = (await loadMore(place, allRows)).map((r) =>
+        // apply the original row's searchWords to all the rows for highlighting
+        !r.searchWords || !r.searchWords?.length ? { ...r, searchWords: row.searchWords } : r
+      );
       const [older, newer] = partition(newRows, (newRow) => newRow.timeEpochNs > row.timeEpochNs);
       const newAbove = logsSortOrder === LogsSortOrder.Ascending ? newer : older;
       const newBelow = logsSortOrder === LogsSortOrder.Ascending ? older : newer;