diff --git a/src/components/content/catalog/services/tree/CatalogFullView.tsx b/src/components/content/catalog/services/tree/CatalogFullView.tsx
index 6ab88cca7..535fc60c9 100644
--- a/src/components/content/catalog/services/tree/CatalogFullView.tsx
+++ b/src/components/content/catalog/services/tree/CatalogFullView.tsx
@@ -17,6 +17,7 @@ import {
serviceVersionKeyQuery,
} from '../../../../utils/constants';
import { getAllKeysFromCatalogTree } from '../../../common/catalog/catalogProps';
+import { filterNodes } from '../../../common/tree/filterTreeData';
import ServiceProvider from '../details/ServiceProvider';
import { ServiceTree } from './ServiceTree';
@@ -30,6 +31,8 @@ export function CatalogFullView({
category: category;
}): React.JSX.Element {
const [urlParams] = useSearchParams();
+ const [searchValue, setSearchValue] = useState('');
+
const serviceNameInQuery = useMemo(() => {
const queryInUri = decodeURI(urlParams.get(serviceNameKeyQuery) ?? '');
if (queryInUri.length > 0) {
@@ -102,6 +105,23 @@ export function CatalogFullView({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectKey]);
+ function isParentTreeSelected(selectedKeyInTree: React.Key): boolean {
+ let isParentNode: boolean = false;
+ treeData.forEach((dataNode: DataNode) => {
+ if (dataNode.key === selectedKeyInTree) {
+ isParentNode = true;
+ }
+ });
+ return isParentNode;
+ }
+
+ const onSelect = (selectedKeys: React.Key[]) => {
+ if (selectedKeys.length === 0 || isParentTreeSelected(selectedKeys[0])) {
+ return;
+ }
+ setSelectKey(selectedKeys[0]);
+ };
+
return (
<>
@@ -110,9 +130,10 @@ export function CatalogFullView({
Service Tree
diff --git a/src/components/content/catalog/services/tree/ServiceTree.tsx b/src/components/content/catalog/services/tree/ServiceTree.tsx
index 78991ce22..178a77187 100644
--- a/src/components/content/catalog/services/tree/ServiceTree.tsx
+++ b/src/components/content/catalog/services/tree/ServiceTree.tsx
@@ -3,47 +3,47 @@
* SPDX-FileCopyrightText: Huawei Inc.
*/
-import { Tree } from 'antd';
+import { Input, Tree } from 'antd';
import { DataNode } from 'antd/es/tree';
import React from 'react';
+const { Search } = Input;
+
export function ServiceTree({
treeData,
selectKey,
- setSelectKey,
+ onSelect,
+ setSearchValue,
isViewDisabled,
}: {
treeData: DataNode[];
selectKey: React.Key;
- setSelectKey: (selectedKey: React.Key) => void;
+ onSelect: (selectedKey: React.Key[]) => void;
+ setSearchValue: (searchValue: string) => void;
isViewDisabled: boolean;
}): React.JSX.Element {
- function isParentTreeSelected(selectKey: React.Key): boolean {
- let isParentNode: boolean = false;
- treeData.forEach((dataNode: DataNode) => {
- if (dataNode.key === selectKey) {
- isParentNode = true;
- }
- });
- return isParentNode;
- }
-
- const onSelect = (selectedKeys: React.Key[]) => {
- if (selectedKeys.length === 0 || isParentTreeSelected(selectedKeys[0])) {
- return;
- }
- setSelectKey(selectedKeys[0]);
- };
-
return (
-
+ <>
+ {
+ setSearchValue(e.target.value);
+ }}
+ onSearch={(e) => {
+ setSearchValue(e);
+ }}
+ />
+
+ >
);
}
diff --git a/src/components/content/common/tree/filterTreeData.ts b/src/components/content/common/tree/filterTreeData.ts
new file mode 100644
index 000000000..184fdf320
--- /dev/null
+++ b/src/components/content/common/tree/filterTreeData.ts
@@ -0,0 +1,20 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ * SPDX-FileCopyrightText: Huawei Inc.
+ */
+
+import { DataNode } from 'antd/es/tree';
+
+export function filterNodes(nodes: DataNode[], searchValue: string): DataNode[] {
+ return nodes
+ .map((node) => {
+ const matches = node.key.toString().toLowerCase().includes(searchValue.toLowerCase());
+
+ if (!node.children) {
+ return matches ? node : null;
+ }
+ const filteredChildren = filterNodes(node.children, searchValue);
+ return filteredChildren.length > 0 || matches ? { ...node, children: filteredChildren } : null;
+ })
+ .filter(Boolean) as DataNode[];
+}
diff --git a/src/components/content/registeredServices/tree/RegisteredServicesFullView.tsx b/src/components/content/registeredServices/tree/RegisteredServicesFullView.tsx
index dd850adde..6e4ef71b9 100644
--- a/src/components/content/registeredServices/tree/RegisteredServicesFullView.tsx
+++ b/src/components/content/registeredServices/tree/RegisteredServicesFullView.tsx
@@ -17,6 +17,7 @@ import {
serviceVersionKeyQuery,
} from '../../../utils/constants.tsx';
import { getFourthLevelKeysFromAvailableServicesTree } from '../../common/registeredServices/registeredServiceProps.ts';
+import { filterNodes } from '../../common/tree/filterTreeData';
import { RegisteredServicesTree } from './RegisteredServicesTree.tsx';
import ServiceContent from './ServiceContent.tsx';
@@ -28,6 +29,7 @@ export function RegisteredServicesFullView({
availableServiceList: ServiceTemplateDetailVo[];
}): React.JSX.Element {
const [urlParams] = useSearchParams();
+ const [searchValue, setSearchValue] = useState('');
const serviceNamespaceInQuery = useMemo(() => {
const queryInUri = decodeURI(urlParams.get(serviceNamespaceQuery) ?? '');
@@ -121,6 +123,23 @@ export function RegisteredServicesFullView({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedKeyInTree]);
+ function isParentTreeSelected(selectedKeyInTree: React.Key): boolean {
+ let isParentNode: boolean = false;
+ treeData.forEach((dataNode: DataNode) => {
+ if (dataNode.key === selectedKeyInTree) {
+ isParentNode = true;
+ }
+ });
+ return isParentNode;
+ }
+
+ const onSelect = (selectedKeys: React.Key[]) => {
+ if (selectedKeys.length === 0 || isParentTreeSelected(selectedKeys[0])) {
+ return;
+ }
+ setSelectedKeyInTree(selectedKeys[0]);
+ };
+
return (
<>
@@ -129,9 +148,10 @@ export function RegisteredServicesFullView({
Services
diff --git a/src/components/content/registeredServices/tree/RegisteredServicesTree.tsx b/src/components/content/registeredServices/tree/RegisteredServicesTree.tsx
index c7b3e4b92..48fdf63d4 100644
--- a/src/components/content/registeredServices/tree/RegisteredServicesTree.tsx
+++ b/src/components/content/registeredServices/tree/RegisteredServicesTree.tsx
@@ -3,44 +3,44 @@
* SPDX-FileCopyrightText: Huawei Inc.
*/
-import { Tree } from 'antd';
+import { Input, Tree } from 'antd';
import { DataNode } from 'antd/es/tree';
import React from 'react';
+const { Search } = Input;
+
export function RegisteredServicesTree({
treeData,
selectedKeyInTree,
- setSelectedKeyInTree,
+ onSelect,
+ setSearchValue,
}: {
treeData: DataNode[];
selectedKeyInTree: React.Key;
- setSelectedKeyInTree: (selectedKey: React.Key) => void;
+ onSelect: (selectedKey: React.Key[]) => void;
+ setSearchValue: (searchValue: string) => void;
}): React.JSX.Element {
- function isParentTreeSelected(selectedKeyInTree: React.Key): boolean {
- let isParentNode: boolean = false;
- treeData.forEach((dataNode: DataNode) => {
- if (dataNode.key === selectedKeyInTree) {
- isParentNode = true;
- }
- });
- return isParentNode;
- }
-
- const onSelect = (selectedKeys: React.Key[]) => {
- if (selectedKeys.length === 0 || isParentTreeSelected(selectedKeys[0])) {
- return;
- }
- setSelectedKeyInTree(selectedKeys[0]);
- };
-
return (
-
+ <>
+ {
+ setSearchValue(e.target.value);
+ }}
+ onSearch={(e) => {
+ setSearchValue(e);
+ }}
+ />
+
+ >
);
}
diff --git a/src/styles/catalog.module.css b/src/styles/catalog.module.css
index 638af5fa4..e1ac26a27 100644
--- a/src/styles/catalog.module.css
+++ b/src/styles/catalog.module.css
@@ -14,8 +14,8 @@
.catalog-middleware .left-class {
height: 100%;
- padding: 24px;
- width: 300px;
+ padding: 8px;
+ width: 18%;
}
.catalog-middleware .left-title-class {