kobsio · ricoberger · Dec 15, 2021 · Dec 15, 2021
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -32,6 +32,7 @@ NOTE: As semantic versioning states all 0.y.z releases can contain breaking chan
 - [#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.
 - [#232](https://github.com/kobsio/kobs/pull/232): [core] Change options handling for various plugins.
+- [#233](https://github.com/kobsio/kobs/pull/233): [resources] Highlight expanded row for containers in Pod details.
 
 ## [v0.7.0](https://github.com/kobsio/kobs/releases/tag/v0.7.0) (2021-11-19)
 

diff --git a/plugins/azure/src/components/containerinstances/DetailsContainerGroup.tsx b/plugins/azure/src/components/containerinstances/DetailsContainerGroup.tsx
@@ -175,12 +175,8 @@ const DetailsContainerGroup: React.FunctionComponent<IDetailsContainerGroupProps
                 </Tr>
               </Thead>
               <Tbody>
-                {data.properties?.initContainers?.map((initContainer, index) => (
-                  <DetailsContainerGroupInitContainer
-                    key={initContainer.name}
-                    rowIndex={index}
-                    initContainer={initContainer}
-                  />
+                {data.properties?.initContainers?.map((initContainer) => (
+                  <DetailsContainerGroupInitContainer key={initContainer.name} initContainer={initContainer} />
                 ))}
               </Tbody>
             </TableComposable>
@@ -202,8 +198,8 @@ const DetailsContainerGroup: React.FunctionComponent<IDetailsContainerGroupProps
                   <Th>Previous State</Th>
                 </Tr>
               </Thead>
-              {data.properties?.containers?.map((container, index) => (
-                <DetailsContainerGroupContainer key={container.name} rowIndex={index} container={container} />
+              {data.properties?.containers?.map((container) => (
+                <DetailsContainerGroupContainer key={container.name} container={container} />
               ))}
             </TableComposable>
           </React.Fragment>

diff --git a/plugins/azure/src/components/containerinstances/DetailsContainerGroupContainer.tsx b/plugins/azure/src/components/containerinstances/DetailsContainerGroupContainer.tsx
@@ -11,27 +11,21 @@ import DetailsContainerGroupEvent from './DetailsContainerGroupEvent';
 import { IContainer } from './interfaces';
 
 interface IDetailsContainerGroupContainerProps {
-  rowIndex: number;
   container: IContainer;
 }
 
 const DetailsContainerGroupContainer: React.FunctionComponent<IDetailsContainerGroupContainerProps> = ({
-  rowIndex,
   container,
 }: IDetailsContainerGroupContainerProps) => {
-  const [isExpanded, setIsExpaned] = useState<boolean>(false);
+  const [isExpanded, setIsExpanded] = useState<boolean>(false);
 
   return (
-    <Tbody key={rowIndex} isExpanded={isExpanded}>
+    <Tbody isExpanded={isExpanded}>
       <Tr>
         <Td
           noPadding={true}
           style={{ padding: 0 }}
-          expand={{
-            isExpanded: isExpanded,
-            onToggle: (): void => setIsExpaned(!isExpanded),
-            rowIndex: rowIndex,
-          }}
+          expand={{ isExpanded: isExpanded, onToggle: (): void => setIsExpanded(!isExpanded), rowIndex: 0 }}
         />
         <Td dataLabel="Name">{container.name}</Td>
         <Td dataLabel="Restarts">{container.properties?.instanceView?.restartCount || '-'}</Td>

diff --git a/plugins/azure/src/components/containerinstances/DetailsContainerGroupInitContainer.tsx b/plugins/azure/src/components/containerinstances/DetailsContainerGroupInitContainer.tsx
@@ -11,27 +11,21 @@ import DetailsContainerGroupEvent from './DetailsContainerGroupEvent';
 import { IInitContainer } from './interfaces';
 
 interface IDetailsContainerGroupInitContainerProps {
-  rowIndex: number;
   initContainer: IInitContainer;
 }
 
 const DetailsContainerGroupInitContainer: React.FunctionComponent<IDetailsContainerGroupInitContainerProps> = ({
-  rowIndex,
   initContainer,
 }: IDetailsContainerGroupInitContainerProps) => {
-  const [isExpanded, setIsExpaned] = useState<boolean>(false);
+  const [isExpanded, setIsExpanded] = useState<boolean>(false);
 
   return (
-    <Tbody key={rowIndex} isExpanded={isExpanded}>
+    <Tbody isExpanded={isExpanded}>
       <Tr>
         <Td
           noPadding={true}
           style={{ padding: 0 }}
-          expand={{
-            isExpanded: isExpanded,
-            onToggle: (): void => setIsExpaned(!isExpanded),
-            rowIndex: rowIndex,
-          }}
+          expand={{ isExpanded: isExpanded, onToggle: (): void => setIsExpanded(!isExpanded), rowIndex: 0 }}
         />
         <Td dataLabel="Name">{initContainer.name}</Td>
         <Td dataLabel="Restarts">{initContainer.properties?.instanceView?.restartCount || '-'}</Td>

diff --git a/plugins/azure/src/components/kubernetesservices/DetailsNodePools.tsx b/plugins/azure/src/components/kubernetesservices/DetailsNodePools.tsx
@@ -94,10 +94,9 @@ const DetailsNodePools: React.FunctionComponent<IDetailsNodePoolsProps> = ({
             <Th />
           </Tr>
         </Thead>
-        {data.map((nodePool, index) => (
+        {data.map((nodePool) => (
           <DetailsNodePoolsItem
             key={nodePool.id || ''}
-            rowIndex={index}
             name={name}
             resourceGroup={resourceGroup}
             managedCluster={managedCluster}

diff --git a/plugins/azure/src/components/kubernetesservices/DetailsNodePoolsItem.tsx b/plugins/azure/src/components/kubernetesservices/DetailsNodePoolsItem.tsx
@@ -13,7 +13,6 @@ import { Link } from 'react-router-dom';
 import { INodePool } from './interfaces';
 
 interface IDetailsNodePoolsItemProps {
-  rowIndex: number;
   name: string;
   resourceGroup: string;
   managedCluster: string;
@@ -22,26 +21,21 @@ interface IDetailsNodePoolsItemProps {
 }
 
 const DetailsNodePoolsItem: React.FunctionComponent<IDetailsNodePoolsItemProps> = ({
-  rowIndex,
   name,
   resourceGroup,
   managedCluster,
   nodeResourceGroup,
   nodePool,
 }: IDetailsNodePoolsItemProps) => {
-  const [isExpanded, setIsExpaned] = useState<boolean>(false);
+  const [isExpanded, setIsExpanded] = useState<boolean>(false);
 
   return (
-    <Tbody key={rowIndex} isExpanded={isExpanded}>
+    <Tbody isExpanded={isExpanded}>
       <Tr>
         <Td
           noPadding={true}
           style={{ padding: 0 }}
-          expand={{
-            isExpanded: isExpanded,
-            onToggle: (): void => setIsExpaned(!isExpanded),
-            rowIndex: rowIndex,
-          }}
+          expand={{ isExpanded: isExpanded, onToggle: (): void => setIsExpanded(!isExpanded), rowIndex: 0 }}
         />
         <Td dataLabel="Name">{nodePool.name || '-'}</Td>
         <Td dataLabel="Provisioning State">{nodePool.properties?.provisioningState || '-'}</Td>

diff --git a/plugins/azure/src/components/virtualmachinescalesets/DetailsVirtualMachines.tsx b/plugins/azure/src/components/virtualmachinescalesets/DetailsVirtualMachines.tsx
@@ -87,10 +87,9 @@ const DetailsVirtualMachines: React.FunctionComponent<IDetailsVirtualMachinesPro
             <Th>Latest Model</Th>
           </Tr>
         </Thead>
-        {data.map((virtualMachine, index) => (
+        {data.map((virtualMachine) => (
           <DetailsVirtualMachinesItem
             key={virtualMachine.id || ''}
-            rowIndex={index}
             name={name}
             resourceGroup={resourceGroup}
             virtualMachineScaleSet={virtualMachineScaleSet}

diff --git a/plugins/azure/src/components/virtualmachinescalesets/DetailsVirtualMachinesItem.tsx b/plugins/azure/src/components/virtualmachinescalesets/DetailsVirtualMachinesItem.tsx
@@ -10,33 +10,27 @@ import React, { useState } from 'react';
 import { IVirtualMachine } from './interfaces';
 
 interface IDetailsVirtualMachinesItemProps {
-  rowIndex: number;
   name: string;
   resourceGroup: string;
   virtualMachineScaleSet: string;
   virtualMachine: IVirtualMachine;
 }
 
 const DetailsVirtualMachinesItem: React.FunctionComponent<IDetailsVirtualMachinesItemProps> = ({
-  rowIndex,
   name,
   resourceGroup,
   virtualMachineScaleSet,
   virtualMachine,
 }: IDetailsVirtualMachinesItemProps) => {
-  const [isExpanded, setIsExpaned] = useState<boolean>(false);
+  const [isExpanded, setIsExpanded] = useState<boolean>(false);
 
   return (
-    <Tbody key={rowIndex} isExpanded={isExpanded}>
+    <Tbody isExpanded={isExpanded}>
       <Tr>
         <Td
           noPadding={true}
           style={{ padding: 0 }}
-          expand={{
-            isExpanded: isExpanded,
-            onToggle: (): void => setIsExpaned(!isExpanded),
-            rowIndex: rowIndex,
-          }}
+          expand={{ isExpanded: isExpanded, onToggle: (): void => setIsExpanded(!isExpanded), rowIndex: 0 }}
         />
         <Td dataLabel="Name">{virtualMachine.name || '-'}</Td>
         <Td dataLabel="Computer Name">{virtualMachine.properties?.osProfile?.computerName || '-'}</Td>

diff --git a/plugins/harbor/src/components/panel/details/Vulnerabilities.tsx b/plugins/harbor/src/components/panel/details/Vulnerabilities.tsx
@@ -70,7 +70,7 @@ const Vulnerabilities: React.FunctionComponent<IVulnerabilitiesProps> = ({
             <p>{error?.message}</p>
           </Alert>
         ) : data ? (
-          <TableComposable aria-label="Vulnerabilities" variant={TableVariant.compact} borders={false}>
+          <TableComposable aria-label="Vulnerabilities" variant={TableVariant.compact} borders={true}>
             <Thead>
               <Tr>
                 <Th />

diff --git a/plugins/harbor/src/components/panel/details/VulnerabilitiesRow.tsx b/plugins/harbor/src/components/panel/details/VulnerabilitiesRow.tsx
@@ -1,5 +1,5 @@
+import { ExpandableRowContent, Tbody, Td, Tr } from '@patternfly/react-table';
 import React, { useState } from 'react';
-import { Tbody, Td, Tr } from '@patternfly/react-table';
 
 import { COLOR_DANGER, COLOR_INFO, COLOR_WARNING } from '../../../utils/helpers';
 import { IVulnerabilityDetails } from '../../../utils/interfaces';
@@ -38,7 +38,7 @@ const VulnerabilitiesRow: React.FunctionComponent<IVulnerabilitiesRowProps> = ({
   const [isExpanded, setIsExpanded] = useState<boolean>(false);
 
   return (
-    <Tbody>
+    <Tbody isExpanded={isExpanded}>
       <Tr>
         <Td
           noPadding={true}
@@ -52,8 +52,9 @@ const VulnerabilitiesRow: React.FunctionComponent<IVulnerabilitiesRowProps> = ({
         <Td>{vulnerability.fix_version}</Td>
       </Tr>
       <Tr isExpanded={isExpanded}>
-        <Td />
-        <Td colSpan={5}>{vulnerability.description}</Td>
+        <Td colSpan={6}>
+          <ExpandableRowContent>{vulnerability.description}</ExpandableRowContent>
+        </Td>
       </Tr>
     </Tbody>
   );

diff --git a/plugins/resources/src/components/page/Page.tsx b/plugins/resources/src/components/page/Page.tsx
@@ -54,7 +54,7 @@ const Page: React.FunctionComponent<IPluginPageProps> = ({ name, displayName, de
         <DrawerContent panelContent={details}>
           <DrawerContentBody>
             <PageSection style={{ minHeight: '100%' }} variant={PageSectionVariants.default}>
-              {options.clusters.length === 0 || options.namespaces.length === 0 || options.resources.length === 0 ? (
+              {options.clusters.length === 0 || options.resources.length === 0 ? (
                 <Alert variant={AlertVariant.info} title="Select clusters, resources and namespaces">
                   <p>Select a list of clusters, resources and namespaces from the toolbar.</p>
                 </Alert>

diff --git a/plugins/resources/src/components/panel/details/overview/Container.tsx b/plugins/resources/src/components/panel/details/overview/Container.tsx
@@ -4,7 +4,7 @@ import {
   DescriptionListGroup,
   DescriptionListTerm,
 } from '@patternfly/react-core';
-import { ExpandableRowContent, Td, Tr } from '@patternfly/react-table';
+import { ExpandableRowContent, Tbody, Td, Tr } from '@patternfly/react-table';
 import React, { useState } from 'react';
 import { V1Container, V1ContainerState, V1ContainerStatus, V1EnvVarSource, V1Probe } from '@kubernetes/client-node';
 
@@ -111,11 +111,16 @@ const Container: React.FunctionComponent<IContainerProps> = ({
   containerStatus,
   containerMetric,
 }: IContainerProps) => {
-  const [isExpanded, setIsExpaned] = useState<boolean>(false);
+  const [isExpanded, setIsExpanded] = useState<boolean>(false);
 
   return (
-    <React.Fragment>
-      <Tr onClick={(): void => setIsExpaned(!isExpanded)}>
+    <Tbody isExpanded={isExpanded}>
+      <Tr>
+        <Td
+          noPadding={true}
+          style={{ padding: 0 }}
+          expand={{ isExpanded: isExpanded, onToggle: (): void => setIsExpanded(!isExpanded), rowIndex: 0 }}
+        />
         <Td dataLabel="Name">{container.name}</Td>
         <Td dataLabel="Ready">{containerStatus && containerStatus.ready ? 'True' : 'False'}</Td>
         <Td dataLabel="Restarts">{containerStatus ? containerStatus.restartCount : 0}</Td>
@@ -154,7 +159,7 @@ const Container: React.FunctionComponent<IContainerProps> = ({
         </Td>
       </Tr>
       <Tr isExpanded={isExpanded}>
-        <Td colSpan={10}>
+        <Td colSpan={11}>
           <ExpandableRowContent>
             <DescriptionList className="pf-u-text-break-word" isHorizontal={true}>
               <DescriptionListGroup>
@@ -224,7 +229,7 @@ const Container: React.FunctionComponent<IContainerProps> = ({
           </ExpandableRowContent>
         </Td>
       </Tr>
-    </React.Fragment>
+    </Tbody>
   );
 };
 

diff --git a/plugins/resources/src/components/panel/details/overview/Containers.tsx b/plugins/resources/src/components/panel/details/overview/Containers.tsx
@@ -1,4 +1,4 @@
-import { TableComposable, TableVariant, Tbody, Th, Thead, Tr } from '@patternfly/react-table';
+import { TableComposable, TableVariant, Th, Thead, Tr } from '@patternfly/react-table';
 import { V1Container, V1ContainerStatus } from '@kubernetes/client-node';
 import React from 'react';
 import { Title } from '@patternfly/react-core';
@@ -52,9 +52,10 @@ const Containers: React.FunctionComponent<IPodProps> = ({
       <Title headingLevel="h4" size="lg">
         {title}
       </Title>
-      <TableComposable aria-label={title} variant={TableVariant.compact} borders={false}>
+      <TableComposable aria-label={title} variant={TableVariant.compact} borders={true}>
         <Thead>
           <Tr>
+            <Th />
             <Th>Name</Th>
             <Th>Ready</Th>
             <Th>Restarts</Th>
@@ -67,16 +68,15 @@ const Containers: React.FunctionComponent<IPodProps> = ({
             <Th>Memory Limits</Th>
           </Tr>
         </Thead>
-        <Tbody>
-          {containers.map((container) => (
-            <Container
-              key={container.name}
-              container={container}
-              containerStatus={getContainerStatus(container.name, containerStatuses)}
-              containerMetric={getContainerMetric(container.name, containerMetrics)}
-            />
-          ))}
-        </Tbody>
+
+        {containers.map((container) => (
+          <Container
+            key={container.name}
+            container={container}
+            containerStatus={getContainerStatus(container.name, containerStatuses)}
+            containerMetric={getContainerMetric(container.name, containerMetrics)}
+          />
+        ))}
       </TableComposable>
     </React.Fragment>
   );