[klogs] Highlight expanded row

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)
 

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>
   );
 };
 

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>

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}

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}