From 25c4f26c293da801969b5c67bccb2bb0f6a4f77e Mon Sep 17 00:00:00 2001 From: ricoberger Date: Mon, 29 Mar 2021 20:43:15 +0200 Subject: [PATCH] Fix resources tab of an application The specified resources of an application were loaded multiple times. We are using React.memo for the ResourcesListItem component, to avoid that the resources are loaded multiple times. Now the fetchResources function of the component is only triggered, when the properties of the component are changing. --- CHANGELOG.md | 1 + app/src/components/resources/ResourcesListItem.tsx | 6 ++++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b8c70a1d7..d3c457c2c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,6 +22,7 @@ NOTE: As semantic versioning states all 0.y.z releases can contain breaking chan - [#1](https://github.com/kobsio/kobs/pull/1): Fix mobile layout for the cluster and namespace filter by using a Toolbar instead of FlexItems. - [#9](https://github.com/kobsio/kobs/pull/9): Fix time parsing for the datasource options. - [#14](https://github.com/kobsio/kobs/pull/14): Fix loading of Jaeger services, when a user opend the Jaeger plugin, where the `service` query parameter was already present. +- [#15](https://github.com/kobsio/kobs/pull/15): Fix resources tab of an Application, where resources were loaded multiple times. ### Changed diff --git a/app/src/components/resources/ResourcesListItem.tsx b/app/src/components/resources/ResourcesListItem.tsx index 9f4c2fc8d..aae24c15b 100644 --- a/app/src/components/resources/ResourcesListItem.tsx +++ b/app/src/components/resources/ResourcesListItem.tsx @@ -1,5 +1,5 @@ import { IRow, Table, TableBody, TableHeader } from '@patternfly/react-table'; -import React, { useCallback, useEffect, useState } from 'react'; +import React, { memo, useCallback, useEffect, useState } from 'react'; import { ClustersPromiseClient, GetResourcesRequest, GetResourcesResponse } from 'proto/clusters_grpc_web_pb'; import { IResource, emptyState } from 'utils/resources'; @@ -77,4 +77,6 @@ const ResourcesListItem: React.FunctionComponent = ({ ); }; -export default ResourcesListItem; +export default memo(ResourcesListItem, () => { + return true; +});