From 28436f7402e1c04de42ff3fc4159379db22d30fe Mon Sep 17 00:00:00 2001 From: s-vamshi Date: Thu, 31 Oct 2024 16:50:24 +0530 Subject: [PATCH 1/3] feat(cyclops-ui): Filter Modules by TargetNamespace --- cyclops-ctrl/internal/mapper/modules.go | 13 +-- .../src/components/pages/Modules/Modules.tsx | 93 +++++++++++++++---- 2 files changed, 82 insertions(+), 24 deletions(-) diff --git a/cyclops-ctrl/internal/mapper/modules.go b/cyclops-ctrl/internal/mapper/modules.go index 2ed94ffe..6a42456d 100644 --- a/cyclops-ctrl/internal/mapper/modules.go +++ b/cyclops-ctrl/internal/mapper/modules.go @@ -62,12 +62,13 @@ func ModuleListToDTO(modules []cyclopsv1alpha1.Module) []dto.Module { for _, module := range modules { values := make(map[string]interface{}) out = append(out, dto.Module{ - Name: module.Name, - Namespace: module.Namespace, - Version: module.Spec.TemplateRef.Version, - Template: k8sTemplateRefToDTO(module.Spec.TemplateRef, module.Status.TemplateResolvedVersion), - Values: values, - IconURL: module.Status.IconURL, + Name: module.Name, + Namespace: module.Namespace, + TargetNamespace: mapTargetNamespace(module.Spec.TargetNamespace), + Version: module.Spec.TemplateRef.Version, + Template: k8sTemplateRefToDTO(module.Spec.TemplateRef, module.Status.TemplateResolvedVersion), + Values: values, + IconURL: module.Status.IconURL, }) } diff --git a/cyclops-ui/src/components/pages/Modules/Modules.tsx b/cyclops-ui/src/components/pages/Modules/Modules.tsx index 8f8519a2..1eaad3f2 100644 --- a/cyclops-ui/src/components/pages/Modules/Modules.tsx +++ b/cyclops-ui/src/components/pages/Modules/Modules.tsx @@ -24,9 +24,27 @@ import { mapResponseError } from "../../../utils/api/errors"; const { Title } = Typography; +interface ModuleInterface { + name: string; + namespace: string; + targetNamespace: string; + template: { + repo: string; + path: string; + version: string; + resolvedVersion: string; + sourceType: string; + }; + version: string; + values: { [key: string]: any }; + status: string; + iconURL: string; + reconciliationStatus: { [key: string]: any }; +} + const Modules = () => { - const [allData, setAllData] = useState([]); - const [filteredData, setFilteredData] = useState([]); + const [allData, setAllData] = useState([]); + const [filteredData, setFilteredData] = useState([]); const [loadingModules, setLoadingModules] = useState(false); const [moduleHealthFilter, setModuleHealthFilter] = useState([ "Healthy", @@ -34,8 +52,12 @@ const Modules = () => { "Progressing", "Unknown", ]); + const [moduleNamespaceFilter, setModuleNamespaceFilter] = useState( + [], + ); const [searchInputFilter, setsearchInputFilter] = useState(""); const resourceFilter = ["Healthy", "Unhealthy", "Progressing", "Unknown"]; + const [namespaceFilterData, setNamespaceFilterData] = useState([]); const [error, setError] = useState({ message: "", description: "", @@ -49,6 +71,7 @@ const Modules = () => { .get(`/api/modules/list`) .then((res) => { setAllData(res.data); + populateNamespaceData(res.data); setLoadingModules(false); }) .catch((error) => { @@ -64,6 +87,16 @@ const Modules = () => { }; }, []); + const populateNamespaceData = (allData: ModuleInterface[]) => { + const namespaceData = allData + .map((module) => module.targetNamespace) + .filter((targetNamespace, index, self) => { + return self.indexOf(targetNamespace) === index; + }); + setNamespaceFilterData(namespaceData); + setModuleNamespaceFilter(namespaceData); + }; + useEffect(() => { var updatedList = [...allData]; updatedList = updatedList.filter((module: any) => { @@ -72,13 +105,17 @@ const Modules = () => { -1 ); }); - const newfilteredData = updatedList.filter((module: any) => - moduleHealthFilter - .map((status) => status.toLowerCase()) - .includes(module.status.toLowerCase()), + const newfilteredData = updatedList.filter( + (module: any) => + moduleHealthFilter + .map((status) => status.toLowerCase()) + .includes(module.status.toLowerCase()) && + moduleNamespaceFilter + .map((targetNamespace) => targetNamespace.toLowerCase()) + .includes(module.targetNamespace.toLowerCase()), ); setFilteredData(newfilteredData); - }, [moduleHealthFilter, allData, searchInputFilter]); + }, [moduleNamespaceFilter, moduleHealthFilter, allData, searchInputFilter]); const handleClick = () => { window.location.href = "/modules/new"; @@ -86,20 +123,40 @@ const Modules = () => { const handleSelectItem = (selectedItems: any[]) => { setModuleHealthFilter(selectedItems); }; + const handleNamespaceSelectItem = (selectedItems: any[]) => { + setModuleNamespaceFilter(selectedItems); + }; const resourceFilterPopover = () => { return ( - - {resourceFilter.map((item, index) => ( - - {item} - - ))} - + <> + + Health +
+ {resourceFilter.map((item, index) => ( + + {item} + + ))} + + + Namespace +
+ {namespaceFilterData.map((item, index) => ( + + {item} + + ))} + + ); }; const handleSearch = (event: any) => { From 14fa7f8792231d8e46048a355f04d9cb7c44bd74 Mon Sep 17 00:00:00 2001 From: s-vamshi Date: Sat, 2 Nov 2024 14:11:43 +0530 Subject: [PATCH 2/3] /api/namespaces api used and interface removed --- .../src/components/pages/Modules/Modules.tsx | 55 +++++++------------ 1 file changed, 21 insertions(+), 34 deletions(-) diff --git a/cyclops-ui/src/components/pages/Modules/Modules.tsx b/cyclops-ui/src/components/pages/Modules/Modules.tsx index 1eaad3f2..b4d8364c 100644 --- a/cyclops-ui/src/components/pages/Modules/Modules.tsx +++ b/cyclops-ui/src/components/pages/Modules/Modules.tsx @@ -22,29 +22,11 @@ import styles from "./styles.module.css"; import { PlusCircleOutlined, FilterOutlined } from "@ant-design/icons"; import { mapResponseError } from "../../../utils/api/errors"; -const { Title } = Typography; - -interface ModuleInterface { - name: string; - namespace: string; - targetNamespace: string; - template: { - repo: string; - path: string; - version: string; - resolvedVersion: string; - sourceType: string; - }; - version: string; - values: { [key: string]: any }; - status: string; - iconURL: string; - reconciliationStatus: { [key: string]: any }; -} +const { Title, Text } = Typography; const Modules = () => { - const [allData, setAllData] = useState([]); - const [filteredData, setFilteredData] = useState([]); + const [allData, setAllData] = useState([]); + const [filteredData, setFilteredData] = useState([]); const [loadingModules, setLoadingModules] = useState(false); const [moduleHealthFilter, setModuleHealthFilter] = useState([ "Healthy", @@ -66,12 +48,27 @@ const Modules = () => { useEffect(() => { setLoadingModules(true); + function populateNamespaceData() { + axios + .get(`/api/namespaces`) + .then((res) => { + setNamespaceFilterData(res.data); + setModuleNamespaceFilter(res.data); + setLoadingModules(false); + }) + .catch((error) => { + setError(mapResponseError(error)); + setLoadingModules(false); + }); + } + + populateNamespaceData(); + function fetchModules() { axios .get(`/api/modules/list`) .then((res) => { setAllData(res.data); - populateNamespaceData(res.data); setLoadingModules(false); }) .catch((error) => { @@ -87,16 +84,6 @@ const Modules = () => { }; }, []); - const populateNamespaceData = (allData: ModuleInterface[]) => { - const namespaceData = allData - .map((module) => module.targetNamespace) - .filter((targetNamespace, index, self) => { - return self.indexOf(targetNamespace) === index; - }); - setNamespaceFilterData(namespaceData); - setModuleNamespaceFilter(namespaceData); - }; - useEffect(() => { var updatedList = [...allData]; updatedList = updatedList.filter((module: any) => { @@ -135,7 +122,7 @@ const Modules = () => { onChange={handleSelectItem} value={moduleHealthFilter} > - Health + Health
{resourceFilter.map((item, index) => ( @@ -148,7 +135,7 @@ const Modules = () => { onChange={handleNamespaceSelectItem} value={moduleNamespaceFilter} > - Namespace + Namespace
{namespaceFilterData.map((item, index) => ( From df2a3185fee31f196b8cc80686a2af18ad94937a Mon Sep 17 00:00:00 2001 From: s-vamshi Date: Wed, 6 Nov 2024 22:49:47 +0530 Subject: [PATCH 3/3] populateNamespaceData function and setLoadingModule usage removed --- .../src/components/pages/Modules/Modules.tsx | 24 +++++++------------ 1 file changed, 9 insertions(+), 15 deletions(-) diff --git a/cyclops-ui/src/components/pages/Modules/Modules.tsx b/cyclops-ui/src/components/pages/Modules/Modules.tsx index b4d8364c..2873dab8 100644 --- a/cyclops-ui/src/components/pages/Modules/Modules.tsx +++ b/cyclops-ui/src/components/pages/Modules/Modules.tsx @@ -48,21 +48,15 @@ const Modules = () => { useEffect(() => { setLoadingModules(true); - function populateNamespaceData() { - axios - .get(`/api/namespaces`) - .then((res) => { - setNamespaceFilterData(res.data); - setModuleNamespaceFilter(res.data); - setLoadingModules(false); - }) - .catch((error) => { - setError(mapResponseError(error)); - setLoadingModules(false); - }); - } - - populateNamespaceData(); + axios + .get(`/api/namespaces`) + .then((res) => { + setNamespaceFilterData(res.data); + setModuleNamespaceFilter(res.data); + }) + .catch((error) => { + setError(mapResponseError(error)); + }); function fetchModules() { axios