[GEN-1344] feat: filter sources by lan (#1474)

odigos-io · Aug 27, 2024 · a238093 · a238093
1 parent 25ee2f6
commit a238093
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 0 deletions.
diff --git 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<TableProps> = ({
   filterSourcesByKind,
   deleteSourcesHandler,
   filterSourcesByNamespace,
+  filterSourcesByLanguage,
 }) => {
   const [selectedCheckbox, setSelectedCheckbox] = useState<string[]>([]);
   const [showModal, setShowModal] = useState(false);
@@ -95,6 +97,7 @@ export const ManagedSourcesTable: React.FC<TableProps> = ({
           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
@@ -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<string[]>([]);
+  const [groupLanguages, setGroupLanguages] = useState<string[]>([
+    'javascript',
+    'python',
+    'java',
+    'go',
+    'dotnet',
+  ]);
   const [groupKinds, setGroupKinds] = useState<string[]>([
     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
@@ -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
@@ -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 || [],