[GEN-1795]: add filters by programming language (#1869)

frontend/webapp/components/common/dropdowns/error-dropdown/index.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import { useSourceCRUD } from '@/hooks';
 import { DropdownOption } from '@/types';
+import { BACKEND_BOOLEAN } from '@/utils';
 import { Dropdown } from '@/reuseable-components';
 
 interface Props {
@@ -21,7 +22,7 @@ export const ErrorDropdown: React.FC<Props> = ({ title = 'Error Message', value,
 
     sources.forEach(({ instrumentedApplicationDetails: { conditions } }) => {
       conditions.forEach(({ type, status, message }) => {
-        if (status === 'False' && !payload.find((opt) => opt.value === message)) {
+        if (status === BACKEND_BOOLEAN.FALSE && !payload.find((opt) => opt.id === message)) {
           payload.push({ id: message, value: message });
         }
       });

frontend/webapp/components/common/dropdowns/index.ts

@@ -1,4 +1,5 @@
 export * from './error-dropdown';
+export * from './language-dropdown';
 export * from './monitor-dropdown';
 export * from './namespace-dropdown';
 export * from './type-dropdown';

frontend/webapp/components/common/dropdowns/language-dropdown/index.tsx

@@ -0,0 +1,34 @@
+import React, { useMemo } from 'react';
+import { useSourceCRUD } from '@/hooks';
+import { DropdownOption } from '@/types';
+import { Dropdown } from '@/reuseable-components';
+
+interface Props {
+  title?: string;
+  value?: DropdownOption[];
+  onSelect: (val: DropdownOption) => void;
+  onDeselect: (val: DropdownOption) => void;
+  isMulti?: boolean;
+  required?: boolean;
+  showSearch?: boolean;
+}
+
+export const LanguageDropdown: React.FC<Props> = ({ title = 'Programming Languages', value, onSelect, onDeselect, ...props }) => {
+  const { sources } = useSourceCRUD();
+
+  const options = useMemo(() => {
+    const payload: DropdownOption[] = [];
+
+    sources.forEach(({ instrumentedApplicationDetails: { containers } }) => {
+      containers.forEach(({ language }) => {
+        if (!payload.find((opt) => opt.id === language)) {
+          payload.push({ id: language, value: language });
+        }
+      });
+    });
+
+    return payload.sort((a, b) => a.id.localeCompare(b.id));
+  }, [sources]);
+
+  return <Dropdown title={title} placeholder='All' options={options} value={value} onSelect={onSelect} onDeselect={onDeselect} {...props} />;
+};

frontend/webapp/containers/main/overview/overview-actions-menu/filters/index.tsx

@@ -5,7 +5,7 @@ import { useKeyDown, useOnClickOutside } from '@/hooks';
 import { AbsoluteContainer, RelativeContainer } from '../styled';
 import { Button, SelectionButton, Toggle } from '@/reuseable-components';
 import { type FiltersState, useFilterStore } from '@/store/useFilterStore';
-import { ErrorDropdown, MonitorDropdown, NamespaceDropdown, TypeDropdown } from '@/components';
+import { ErrorDropdown, LanguageDropdown, MonitorDropdown, NamespaceDropdown, TypeDropdown } from '@/components';
 
 const FormWrapper = styled.div`
   display: flex;
@@ -30,22 +30,23 @@ const getFilterCount = (params: FiltersState) => {
   if (!!params.namespace) count++;
   count += params.types.length;
   count += params.monitors.length;
+  count += params.languages.length;
   count += params.errors.length;
   if (!!params.onlyErrors) count++;
   return count;
 };
 
 const Filters = () => {
-  const { namespace, types, monitors, errors, onlyErrors, setAll, clearAll } = useFilterStore();
+  const { namespace, types, monitors, languages, errors, onlyErrors, setAll, clearAll, getEmptyState } = useFilterStore();
 
-  const [filters, setFilters] = useState<FiltersState>({ namespace, types, monitors, errors, onlyErrors });
+  const [filters, setFilters] = useState<FiltersState>({ namespace, types, monitors, languages, errors, onlyErrors });
   const [filterCount, setFilterCount] = useState(getFilterCount(filters));
   const [focused, setFocused] = useState(false);
   const toggleFocused = () => setFocused((prev) => !prev);
 
   useEffect(() => {
     if (!focused) {
-      const payload = { namespace, types, monitors, errors, onlyErrors };
+      const payload = { namespace, types, monitors, languages, errors, onlyErrors };
       setFilters(payload);
       setFilterCount(getFilterCount(payload));
     }
@@ -63,7 +64,7 @@ const Filters = () => {
 
   const onReset = () => {
     clearAll();
-    setFilters({ namespace: undefined, types: [], monitors: [], errors: [], onlyErrors: false });
+    setFilters(getEmptyState());
     setFilterCount(0);
     setFocused(false);
   };
@@ -81,7 +82,7 @@ const Filters = () => {
           <FormWrapper>
             <NamespaceDropdown
               value={filters['namespace']}
-              onSelect={(val) => setFilters({ namespace: val, types: [], monitors: [], errors: [], onlyErrors: false })}
+              onSelect={(val) => setFilters({ ...getEmptyState(), namespace: val })}
               onDeselect={(val) => setFilters((prev) => ({ ...prev, namespace: undefined }))}
               showSearch={false}
               required
@@ -102,6 +103,13 @@ const Filters = () => {
               required
               isMulti
             />
+            <LanguageDropdown
+              value={filters['languages']}
+              onSelect={(val) => setFilters((prev) => ({ ...prev, languages: [...prev.languages, val] }))}
+              onDeselect={(val) => setFilters((prev) => ({ ...prev, languages: prev.languages.filter((opt) => opt.id !== val.id) }))}
+              required
+              isMulti
+            />
 
             <ToggleWrapper>
               <Toggle title='Show only sources with errors' initialValue={filters['onlyErrors']} onChange={(bool) => setFilters((prev) => ({ ...prev, errors: [], onlyErrors: bool }))} />

frontend/webapp/hooks/compute-platform/useComputePlatform.ts

@@ -59,6 +59,11 @@ export const useComputePlatform = (): UseComputePlatformHook => {
     if (!!filters.errors.length) {
       k8sActualSources = k8sActualSources.filter((source) => !!filters.errors.find((error) => !!source.instrumentedApplicationDetails?.conditions?.find((cond) => cond.message === error.id)));
     }
+    if (!!filters.languages.length) {
+      k8sActualSources = k8sActualSources.filter(
+        (source) => !!filters.languages.find((language) => !!source.instrumentedApplicationDetails?.containers?.find((cont) => cont.language === language.id)),
+      );
+    }
     if (!!filters.monitors.length) {
       destinations = destinations.filter((destination) => !!filters.monitors.find((metric) => destination.exportedSignals[metric.id]));
       actions = actions.filter(

frontend/webapp/store/useFilterStore.ts

@@ -5,6 +5,7 @@ export interface FiltersState {
   namespace: DropdownOption | undefined;
   types: DropdownOption[];
   monitors: DropdownOption[];
+  languages: DropdownOption[];
   errors: DropdownOption[];
   onlyErrors: boolean;
 }
@@ -19,6 +20,9 @@ interface StoreState {
   monitors: FiltersState['monitors'];
   setMonitors: (metrics: FiltersState['monitors']) => void;
 
+  languages: FiltersState['languages'];
+  setLanguages: (metrics: FiltersState['languages']) => void;
+
   errors: FiltersState['errors'];
   setErrors: (metrics: FiltersState['errors']) => void;
 
@@ -27,8 +31,18 @@ interface StoreState {
 
   setAll: (params: FiltersState) => void;
   clearAll: () => void;
+  getEmptyState: () => FiltersState;
 }
 
+const getEmptyState = () => ({
+  namespace: undefined,
+  types: [],
+  monitors: [],
+  languages: [],
+  errors: [],
+  onlyErrors: false,
+});
+
 export const useFilterStore = create<StoreState>((set) => ({
   namespace: undefined,
   setNamespace: (namespace) => set({ namespace }),
@@ -39,12 +53,16 @@ export const useFilterStore = create<StoreState>((set) => ({
   monitors: [],
   setMonitors: (monitors) => set({ monitors }),
 
+  languages: [],
+  setLanguages: (languages) => set({ languages }),
+
   errors: [],
   setErrors: (errors) => set({ errors }),
 
   onlyErrors: false,
   setOnlyErrors: (onlyErrors) => set({ onlyErrors }),
 
   setAll: (params) => set(params),
-  clearAll: () => set({ namespace: undefined, types: [], monitors: [], errors: [], onlyErrors: false }),
+  clearAll: () => set(getEmptyState()),
+  getEmptyState,
 }));