From 3a0b2cca53346e0d992e09d4f6467667eda9dfce Mon Sep 17 00:00:00 2001
From: ricoberger <mail@ricoberger.de>
Date: Tue, 14 Dec 2021 19:56:14 +0100
Subject: [PATCH] [klogs] Highlight expanded row

An expanded row is now highlighted in the klogs plugin. Besides that we
are not using the "index" as "key" anymore, so that already expanded
rows are not expanded when switching to another page.

The same change was also applied for the Elasticsearch plugin, but
instead of using the "timestamp" of the document we are using the "_id"
of the document.
---
 CHANGELOG.md                                  |  1 +
 .../src/components/panel/LogsDocument.tsx     |  6 ++--
 .../src/components/panel/LogsDocuments.tsx    | 32 +++++++++----------
 .../src/components/panel/LogsDocument.tsx     |  2 +-
 .../src/components/panel/LogsDocuments.tsx    |  5 +--
 5 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index eb06ba709..bc82520ea 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -30,6 +30,7 @@ NOTE: As semantic versioning states all 0.y.z releases can contain breaking chan
 - [#225](https://github.com/kobsio/kobs/pull/225): [core] :warning: _Breaking change:_ :warning: Change options handling accross all plugins and re-add `time` property.
 - [#229](https://github.com/kobsio/kobs/pull/229): [opsgenie] Allow users to overwrite the selected time range in a dashboard for an Opsgenie panel via the new `interval` property.
 - [#230](https://github.com/kobsio/kobs/pull/230): [dashboards] Add special variables `__timeStart` and `__timeEnd` for dashboards.
+- [#231](https://github.com/kobsio/kobs/pull/231): [klogs] Highlight expanded row and do not use index as key. The same changes were also applied for the Elasticsearch plugin.
 
 ## [v0.7.0](https://github.com/kobsio/kobs/releases/tag/v0.7.0) (2021-11-19)
 
diff --git a/plugins/elasticsearch/src/components/panel/LogsDocument.tsx b/plugins/elasticsearch/src/components/panel/LogsDocument.tsx
index 011323bf0..466643865 100644
--- a/plugins/elasticsearch/src/components/panel/LogsDocument.tsx
+++ b/plugins/elasticsearch/src/components/panel/LogsDocument.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { TableText, Td, Tr } from '@patternfly/react-table';
+import { TableText, Tbody, Td, Tr } from '@patternfly/react-table';
 
 import { formatTime, getProperty } from '../../utils/helpers';
 import { IDocument } from '../../utils/interfaces';
@@ -36,7 +36,7 @@ const LogsDocument: React.FunctionComponent<ILogsDocumentProps> = ({
   ];
 
   return (
-    <React.Fragment>
+    <Tbody isExpanded={isExpanded}>
       <Tr>
         <Td
           noPadding={true}
@@ -66,7 +66,7 @@ const LogsDocument: React.FunctionComponent<ILogsDocumentProps> = ({
         </Td>
         <Td />
       </Tr>
-    </React.Fragment>
+    </Tbody>
   );
 };
 
diff --git a/plugins/elasticsearch/src/components/panel/LogsDocuments.tsx b/plugins/elasticsearch/src/components/panel/LogsDocuments.tsx
index 200aef2e8..dcb8fbcf5 100644
--- a/plugins/elasticsearch/src/components/panel/LogsDocuments.tsx
+++ b/plugins/elasticsearch/src/components/panel/LogsDocuments.tsx
@@ -26,7 +26,7 @@ const LogsDocuments: React.FunctionComponent<ILogsDocumentsProps> = ({
   const [page, setPage] = useState<IPage>({ page: 1, perPage: 100 });
 
   return (
-    <TableComposable aria-label="Logs" variant={TableVariant.compact} borders={false}>
+    <TableComposable aria-label="Logs" variant={TableVariant.compact} borders={true}>
       <Thead>
         <Tr>
           <Th />
@@ -39,21 +39,21 @@ const LogsDocuments: React.FunctionComponent<ILogsDocumentsProps> = ({
           <Th />
         </Tr>
       </Thead>
-      <Tbody>
-        {documents
-          ? documents
-              .slice((page.page - 1) * page.perPage, page.page * page.perPage)
-              .map((document, index) => (
-                <LogsDocument
-                  key={index}
-                  document={document}
-                  fields={fields}
-                  addFilter={addFilter}
-                  selectField={selectField}
-                />
-              ))
-          : null}
-      </Tbody>
+
+      {documents
+        ? documents
+            .slice((page.page - 1) * page.perPage, page.page * page.perPage)
+            .map((document, index) => (
+              <LogsDocument
+                key={document['_id'] + index}
+                document={document}
+                fields={fields}
+                addFilter={addFilter}
+                selectField={selectField}
+              />
+            ))
+        : null}
+
       {documents && (
         <Tbody>
           <Tr>
diff --git a/plugins/klogs/src/components/panel/LogsDocument.tsx b/plugins/klogs/src/components/panel/LogsDocument.tsx
index dd07fd6f9..d6c272834 100644
--- a/plugins/klogs/src/components/panel/LogsDocument.tsx
+++ b/plugins/klogs/src/components/panel/LogsDocument.tsx
@@ -35,7 +35,7 @@ const LogsDocument: React.FunctionComponent<ILogsDocumentProps> = ({
   ];
 
   return (
-    <Tbody>
+    <Tbody isExpanded={isExpanded}>
       <Tr>
         <Td
           noPadding={true}
diff --git a/plugins/klogs/src/components/panel/LogsDocuments.tsx b/plugins/klogs/src/components/panel/LogsDocuments.tsx
index ceac423a7..b4227b884 100644
--- a/plugins/klogs/src/components/panel/LogsDocuments.tsx
+++ b/plugins/klogs/src/components/panel/LogsDocuments.tsx
@@ -49,7 +49,7 @@ const LogsDocuments: React.FunctionComponent<ILogsDocumentsProps> = ({
   }, [documents]);
 
   return (
-    <TableComposable aria-label="Logs" variant={TableVariant.compact} borders={false}>
+    <TableComposable aria-label="Logs" variant={TableVariant.compact} borders={true}>
       <Thead>
         <Tr>
           <Th />
@@ -99,12 +99,13 @@ const LogsDocuments: React.FunctionComponent<ILogsDocumentsProps> = ({
           <Th />
         </Tr>
       </Thead>
+
       {documents
         ? documents
             .slice((page.page - 1) * page.perPage, page.page * page.perPage)
             .map((document, index) => (
               <LogsDocument
-                key={index}
+                key={document['timestamp'] + index}
                 document={document}
                 fields={fields}
                 addFilter={addFilter}