From a238093a2226d44bff86cae9e71bf2fad1ac3349 Mon Sep 17 00:00:00 2001 From: Alon Braymok <138359965+alonkeyval@users.noreply.github.com> Date: Tue, 27 Aug 2024 17:41:36 +0300 Subject: [PATCH] [GEN-1344] feat: filter sources by lan (#1474) --- .../sources/managed.sources.table/index.tsx | 3 + .../sources.table.header.tsx | 70 +++++++++++++++++++ .../containers/main/sources/managed/index.tsx | 2 + frontend/webapp/hooks/sources/useSources.ts | 10 +++ 4 files changed, 85 insertions(+) diff --git a/frontend/webapp/components/overview/sources/managed.sources.table/index.tsx b/frontend/webapp/components/overview/sources/managed.sources.table/index.tsx index e73b3b60f..7367ac979 100644 --- a/frontend/webapp/components/overview/sources/managed.sources.table/index.tsx +++ b/frontend/webapp/components/overview/sources/managed.sources.table/index.tsx @@ -15,6 +15,7 @@ type TableProps = { sortSources?: (condition: string) => void; filterSourcesByKind?: (kinds: string[]) => void; filterSourcesByNamespace?: (namespaces: string[]) => void; + filterSourcesByLanguage?: (languages: string[]) => void; toggleActionStatus?: (ids: string[], disabled: boolean) => void; deleteSourcesHandler?: (sources: ManagedSource[]) => void; }; @@ -30,6 +31,7 @@ export const ManagedSourcesTable: React.FC = ({ filterSourcesByKind, deleteSourcesHandler, filterSourcesByNamespace, + filterSourcesByLanguage, }) => { const [selectedCheckbox, setSelectedCheckbox] = useState([]); const [showModal, setShowModal] = useState(false); @@ -95,6 +97,7 @@ export const ManagedSourcesTable: React.FC = ({ toggleActionStatus={toggleActionStatus} filterSourcesByKind={filterSourcesByKind} filterSourcesByNamespace={filterSourcesByNamespace} + filterSourcesByLanguage={filterSourcesByLanguage} selectedCheckbox={selectedCheckbox} onSelectedCheckboxChange={onSelectedCheckboxChange} deleteSourcesHandler={() => setShowModal(true)} diff --git a/frontend/webapp/components/overview/sources/managed.sources.table/sources.table.header.tsx b/frontend/webapp/components/overview/sources/managed.sources.table/sources.table.header.tsx index 98cefbb72..8423cdb66 100644 --- a/frontend/webapp/components/overview/sources/managed.sources.table/sources.table.header.tsx +++ b/frontend/webapp/components/overview/sources/managed.sources.table/sources.table.header.tsx @@ -59,6 +59,7 @@ interface ActionsTableHeaderProps { selectedCheckbox: string[]; onSelectedCheckboxChange: (id: string) => void; deleteSourcesHandler: () => void; + filterSourcesByLanguage?: (languages: string[]) => void; } export function SourcesTableHeader({ @@ -67,12 +68,20 @@ export function SourcesTableHeader({ sortSources, filterSourcesByKind, filterSourcesByNamespace, + filterSourcesByLanguage, deleteSourcesHandler, selectedCheckbox, onSelectedCheckboxChange, }: ActionsTableHeaderProps) { const [currentSortId, setCurrentSortId] = useState(''); const [groupNamespaces, setGroupNamespaces] = useState([]); + const [groupLanguages, setGroupLanguages] = useState([ + 'javascript', + 'python', + 'java', + 'go', + 'dotnet', + ]); const [groupKinds, setGroupKinds] = useState([ K8SSourceTypes.DEPLOYMENT, K8SSourceTypes.STATEFUL_SET, @@ -118,6 +127,19 @@ export function SourcesTableHeader({ filterSourcesByKind && filterSourcesByKind(newGroup); } + function onLanguageClick(id: string) { + let newGroup: string[] = []; + if (groupLanguages.includes(id)) { + setGroupLanguages(groupLanguages.filter((item) => item !== id)); + newGroup = groupLanguages.filter((item) => item !== id); + } else { + setGroupLanguages([...groupLanguages, id]); + newGroup = [...groupLanguages, id]; + } + + filterSourcesByLanguage && filterSourcesByLanguage(newGroup); + } + const sourcesGroups = useMemo(() => { if (!namespaces) return []; @@ -140,6 +162,54 @@ export function SourcesTableHeader({ })); return [ + { + label: 'Language', + subTitle: 'Filter', + condition: true, + items: [ + { + label: 'Javascript', + onClick: () => onLanguageClick('javascript'), + id: 'javascript', + selected: groupLanguages.includes('javascript'), + disabled: + groupLanguages.length === 1 && + groupLanguages.includes('javascript'), + }, + { + label: 'Python', + onClick: () => onLanguageClick('python'), + id: 'python', + selected: groupLanguages.includes('python'), + disabled: + groupLanguages.length === 1 && groupLanguages.includes('python'), + }, + { + label: 'Java', + onClick: () => onLanguageClick('java'), + id: 'java', + selected: groupLanguages.includes('java'), + disabled: + groupLanguages.length === 1 && groupLanguages.includes('java'), + }, + { + label: 'Go', + onClick: () => onLanguageClick('go'), + id: 'go', + selected: groupLanguages.includes('go'), + disabled: + groupLanguages.length === 1 && groupLanguages.includes('go'), + }, + { + label: '.NET', + onClick: () => onLanguageClick('dotnet'), + id: 'dotnet', + selected: groupLanguages.includes('dotnet'), + disabled: + groupLanguages.length === 1 && groupLanguages.includes('dotnet'), + }, + ], + }, { label: 'Kind', subTitle: 'Filter', diff --git a/frontend/webapp/containers/main/sources/managed/index.tsx b/frontend/webapp/containers/main/sources/managed/index.tsx index 10d533c09..4f857f9ab 100644 --- a/frontend/webapp/containers/main/sources/managed/index.tsx +++ b/frontend/webapp/containers/main/sources/managed/index.tsx @@ -38,6 +38,7 @@ export function ManagedSourcesContainer() { refetchSources, filterSourcesByKind, deleteSourcesHandler, + filterSourcesByLanguage, instrumentedNamespaces, filterSourcesByNamespace, } = useSources(); @@ -121,6 +122,7 @@ export function ManagedSourcesContainer() { deleteSourcesHandler={deleteSourcesHandler} namespaces={instrumentedNamespaces} filterSourcesByKind={filterSourcesByKind} + filterSourcesByLanguage={filterSourcesByLanguage} data={searchInput ? filterSources() : sources} filterSourcesByNamespace={filterSourcesByNamespace} /> diff --git a/frontend/webapp/hooks/sources/useSources.ts b/frontend/webapp/hooks/sources/useSources.ts index 9f5c59724..1aed8ca86 100644 --- a/frontend/webapp/hooks/sources/useSources.ts +++ b/frontend/webapp/hooks/sources/useSources.ts @@ -158,6 +158,15 @@ export function useSources() { setSortedSources(filtered); } + function filterSourcesByLanguage(languages: string[]) { + const filtered = sources?.filter((source) => + languages.includes( + source.instrumented_application_details?.languages?.[0]?.language || '' + ) + ); + setSortedSources(filtered); + } + function filterSourcesByKind(kind: string[]) { const filtered = sources?.filter((source) => kind.includes(source.kind.toLowerCase()) @@ -173,6 +182,7 @@ export function useSources() { isLoading, sortSources, filterSourcesByNamespace, + filterSourcesByLanguage, filterSourcesByKind, instrumentedNamespaces, namespaces: namespaces?.namespaces || [],