From ebad03c73ae4149059ad6cb5cb492a933af22063 Mon Sep 17 00:00:00 2001 From: ricoberger Date: Wed, 15 Dec 2021 19:50:12 +0100 Subject: [PATCH] [resources] Highlight expanded row The row of an container is now highlighted when expanded. So we now follow this style in all components which are using expanded rows. We also fixed a typo in several components where "setIsExpanded" was typed as "setIsExpaned" and we removed the "rowIndex" which was not used in all components which are using expanded rows. So that now all implementations of expanded rows should be similar. --- CHANGELOG.md | 1 + .../DetailsContainerGroup.tsx | 12 ++++------ .../DetailsContainerGroupContainer.tsx | 12 +++------- .../DetailsContainerGroupInitContainer.tsx | 12 +++------- .../kubernetesservices/DetailsNodePools.tsx | 3 +-- .../DetailsNodePoolsItem.tsx | 12 +++------- .../DetailsVirtualMachines.tsx | 3 +-- .../DetailsVirtualMachinesItem.tsx | 12 +++------- .../panel/details/Vulnerabilities.tsx | 2 +- .../panel/details/VulnerabilitiesRow.tsx | 9 +++---- .../resources/src/components/page/Page.tsx | 2 +- .../panel/details/overview/Container.tsx | 17 ++++++++----- .../panel/details/overview/Containers.tsx | 24 +++++++++---------- 13 files changed, 49 insertions(+), 72 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5ed967fea..280fddb0f 100644 --- 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 index 96d911e7f..a2a4b90be 100644 --- a/plugins/azure/src/components/containerinstances/DetailsContainerGroup.tsx +++ b/plugins/azure/src/components/containerinstances/DetailsContainerGroup.tsx @@ -175,12 +175,8 @@ const DetailsContainerGroup: React.FunctionComponent - {data.properties?.initContainers?.map((initContainer, index) => ( - + {data.properties?.initContainers?.map((initContainer) => ( + ))} @@ -202,8 +198,8 @@ const DetailsContainerGroup: React.FunctionComponentPrevious State - {data.properties?.containers?.map((container, index) => ( - + {data.properties?.containers?.map((container) => ( + ))} diff --git a/plugins/azure/src/components/containerinstances/DetailsContainerGroupContainer.tsx b/plugins/azure/src/components/containerinstances/DetailsContainerGroupContainer.tsx index adb184564..d861c319d 100644 --- 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 = ({ - rowIndex, container, }: IDetailsContainerGroupContainerProps) => { - const [isExpanded, setIsExpaned] = useState(false); + const [isExpanded, setIsExpanded] = useState(false); return ( - + setIsExpaned(!isExpanded), - rowIndex: rowIndex, - }} + expand={{ isExpanded: isExpanded, onToggle: (): void => setIsExpanded(!isExpanded), rowIndex: 0 }} /> {container.name} {container.properties?.instanceView?.restartCount || '-'} diff --git a/plugins/azure/src/components/containerinstances/DetailsContainerGroupInitContainer.tsx b/plugins/azure/src/components/containerinstances/DetailsContainerGroupInitContainer.tsx index d9a9b91db..2133beaf6 100644 --- 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 = ({ - rowIndex, initContainer, }: IDetailsContainerGroupInitContainerProps) => { - const [isExpanded, setIsExpaned] = useState(false); + const [isExpanded, setIsExpanded] = useState(false); return ( - + setIsExpaned(!isExpanded), - rowIndex: rowIndex, - }} + expand={{ isExpanded: isExpanded, onToggle: (): void => setIsExpanded(!isExpanded), rowIndex: 0 }} /> {initContainer.name} {initContainer.properties?.instanceView?.restartCount || '-'} diff --git a/plugins/azure/src/components/kubernetesservices/DetailsNodePools.tsx b/plugins/azure/src/components/kubernetesservices/DetailsNodePools.tsx index f38d4af76..7440423a2 100644 --- a/plugins/azure/src/components/kubernetesservices/DetailsNodePools.tsx +++ b/plugins/azure/src/components/kubernetesservices/DetailsNodePools.tsx @@ -94,10 +94,9 @@ const DetailsNodePools: React.FunctionComponent = ({ - {data.map((nodePool, index) => ( + {data.map((nodePool) => ( = ({ - rowIndex, name, resourceGroup, managedCluster, nodeResourceGroup, nodePool, }: IDetailsNodePoolsItemProps) => { - const [isExpanded, setIsExpaned] = useState(false); + const [isExpanded, setIsExpanded] = useState(false); return ( - + setIsExpaned(!isExpanded), - rowIndex: rowIndex, - }} + expand={{ isExpanded: isExpanded, onToggle: (): void => setIsExpanded(!isExpanded), rowIndex: 0 }} /> {nodePool.name || '-'} {nodePool.properties?.provisioningState || '-'} diff --git a/plugins/azure/src/components/virtualmachinescalesets/DetailsVirtualMachines.tsx b/plugins/azure/src/components/virtualmachinescalesets/DetailsVirtualMachines.tsx index 223f91ba8..b526542d6 100644 --- a/plugins/azure/src/components/virtualmachinescalesets/DetailsVirtualMachines.tsx +++ b/plugins/azure/src/components/virtualmachinescalesets/DetailsVirtualMachines.tsx @@ -87,10 +87,9 @@ const DetailsVirtualMachines: React.FunctionComponentLatest Model - {data.map((virtualMachine, index) => ( + {data.map((virtualMachine) => ( = ({ - rowIndex, name, resourceGroup, virtualMachineScaleSet, virtualMachine, }: IDetailsVirtualMachinesItemProps) => { - const [isExpanded, setIsExpaned] = useState(false); + const [isExpanded, setIsExpanded] = useState(false); return ( - + setIsExpaned(!isExpanded), - rowIndex: rowIndex, - }} + expand={{ isExpanded: isExpanded, onToggle: (): void => setIsExpanded(!isExpanded), rowIndex: 0 }} /> {virtualMachine.name || '-'} {virtualMachine.properties?.osProfile?.computerName || '-'} diff --git a/plugins/harbor/src/components/panel/details/Vulnerabilities.tsx b/plugins/harbor/src/components/panel/details/Vulnerabilities.tsx index 0d7d46519..bcfc47eb1 100644 --- 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 = ({

{error?.message}

) : data ? ( - + diff --git a/plugins/harbor/src/components/panel/details/VulnerabilitiesRow.tsx b/plugins/harbor/src/components/panel/details/VulnerabilitiesRow.tsx index 02020f979..9a20f8664 100644 --- 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 = ({ const [isExpanded, setIsExpanded] = useState(false); return ( - + = ({ {vulnerability.fix_version} - - {vulnerability.description} + + {vulnerability.description} + ); diff --git a/plugins/resources/src/components/page/Page.tsx b/plugins/resources/src/components/page/Page.tsx index c7bc27eab..5b798cefa 100644 --- a/plugins/resources/src/components/page/Page.tsx +++ b/plugins/resources/src/components/page/Page.tsx @@ -54,7 +54,7 @@ const Page: React.FunctionComponent = ({ name, displayName, de - {options.clusters.length === 0 || options.namespaces.length === 0 || options.resources.length === 0 ? ( + {options.clusters.length === 0 || options.resources.length === 0 ? (

Select a list of clusters, resources and namespaces from the toolbar.

 diff --git a/plugins/resources/src/components/panel/details/overview/Container.tsx b/plugins/resources/src/components/panel/details/overview/Container.tsx index 896165ad3..b063817fb 100644 --- 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 = ({ containerStatus, containerMetric, }: IContainerProps) => { - const [isExpanded, setIsExpaned] = useState(false); + const [isExpanded, setIsExpanded] = useState(false); return ( - - setIsExpaned(!isExpanded)}> + + + setIsExpanded(!isExpanded), rowIndex: 0 }} + /> {container.name} {containerStatus && containerStatus.ready ? 'True' : 'False'} {containerStatus ? containerStatus.restartCount : 0} @@ -154,7 +159,7 @@ const Container: React.FunctionComponent = ({ - + @@ -224,7 +229,7 @@ const Container: React.FunctionComponent = ({ - + ); }; diff --git a/plugins/resources/src/components/panel/details/overview/Containers.tsx b/plugins/resources/src/components/panel/details/overview/Containers.tsx index 34a041566..4ee2c5bdb 100644 --- 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 = ({ {title} - + + Name Ready Restarts @@ -67,16 +68,15 @@ const Containers: React.FunctionComponent = ({ Memory Limits - - {containers.map((container) => ( - - ))} - + + {containers.map((container) => ( + + ))} );