[app] Fix plugin filter

CHANGELOG.md

@@ -15,6 +15,7 @@ NOTE: As semantic versioning states all 0.y.z releases can contain breaking chan
 - [#349](https://github.com/kobsio/kobs/pull/#349): [app] Fix the creation of a VirtualService in the Helm chart when no `additionalRoutes` are set.
 - [#350](https://github.com/kobsio/kobs/pull/#350): [app] Fix Docker image and request proxy.
 - [#351](https://github.com/kobsio/kobs/pull/#351): [jaeger] Fix links and colors in Jaeger plugin.
+- [#352](https://github.com/kobsio/kobs/pull/#352): [app] Fix plugin filter and allow filtering by the name of a satellite.
 
 ### Changed
 

plugins/app/src/components/plugins/PluginInstances.tsx

@@ -29,10 +29,20 @@ const PluginInstances: React.FunctionComponent = () => {
   const [state, setState] = useState<{
     page: number;
     perPage: number;
+    pluginSatellite: string;
+    pluginSatelliteIsOpen: boolean;
     pluginType: string;
     pluginTypeIsOpen: boolean;
     searchTerm: string;
-  }>({ page: 1, perPage: 10, pluginType: '', pluginTypeIsOpen: false, searchTerm: '' });
+  }>({
+    page: 1,
+    perPage: 10,
+    pluginSatellite: '',
+    pluginSatelliteIsOpen: false,
+    pluginType: '',
+    pluginTypeIsOpen: false,
+    searchTerm: '',
+  });
   const debouncedSearchTerm = useDebounce<string>(state.searchTerm, 500);
 
   return (
@@ -47,6 +57,27 @@ const PluginInstances: React.FunctionComponent = () => {
         toolbarContent={
           <ToolbarContent>
             <ToolbarGroup variant={ToolbarGroupVariant['filter-group']}>
+              <ToolbarItem>
+                <Select
+                  variant={SelectVariant.single}
+                  aria-label="Select satellite input"
+                  placeholderText="Satellite"
+                  onToggle={(): void => setState({ ...state, pluginSatelliteIsOpen: !state.pluginSatelliteIsOpen })}
+                  onSelect={(
+                    event: React.MouseEvent<Element, MouseEvent> | React.ChangeEvent<Element>,
+                    value: string | SelectOptionObject,
+                  ): void =>
+                    setState({ ...state, page: 1, pluginSatellite: value.toString(), pluginSatelliteIsOpen: false })
+                  }
+                  onClear={(): void => setState({ ...state, page: 1, pluginSatellite: '' })}
+                  selections={state.pluginSatellite}
+                  isOpen={state.pluginSatelliteIsOpen}
+                >
+                  {pluginsContext.getPluginSatellites().map((option) => (
+                    <SelectOption key={option} value={option} />
+                  ))}
+                </Select>
+              </ToolbarItem>
               <ToolbarItem>
                 <Select
                   variant={SelectVariant.single}
@@ -81,11 +112,11 @@ const PluginInstances: React.FunctionComponent = () => {
       >
         <Gallery hasGutter={true}>
           {pluginsContext
-            .getInstances(state.pluginType, debouncedSearchTerm)
+            .getInstances(state.pluginSatellite, state.pluginType, debouncedSearchTerm)
             .slice((state.page - 1) * state.perPage, state.page * state.perPage)
             .map((instance) => (
               <Module
-                key={`${instance.type}-${instance.name}`}
+                key={instance.id}
                 name={instance.type}
                 module="./Instance"
                 props={instance}
@@ -103,7 +134,7 @@ const PluginInstances: React.FunctionComponent = () => {
         variant={PageSectionVariants.light}
       >
         <Pagination
-          itemCount={pluginsContext.getInstances(state.pluginType, debouncedSearchTerm).length}
+          itemCount={pluginsContext.getInstances(state.pluginSatellite, state.pluginType, debouncedSearchTerm).length}
           perPage={state.perPage}
           page={state.page}
           variant={PaginationVariant.bottom}

plugins/app/src/context/PluginsContext.tsx

@@ -7,7 +7,8 @@ import { IPluginInstance } from '@kobsio/shared';
 // IPluginsContext is the plugin context, is contains all the instances of all configured plugins.
 export interface IPluginsContext {
   getInstance: (satellite: string, type: string, name: string) => IPluginInstance | undefined;
-  getInstances: (type: string, name: string) => IPluginInstance[];
+  getInstances: (satellite: string, type: string, name: string) => IPluginInstance[];
+  getPluginSatellites: () => string[];
   getPluginTypes: () => string[];
   instances: IPluginInstance[];
 }
@@ -16,6 +17,7 @@ export interface IPluginsContext {
 export const PluginsContext = React.createContext<IPluginsContext>({
   getInstance: () => undefined,
   getInstances: () => [],
+  getPluginSatellites: () => [],
   getPluginTypes: () => [],
   instances: [],
 });
@@ -69,13 +71,24 @@ export const PluginsContextProvider: React.FunctionComponent<IPluginsContextProv
   // getInstances returns a list of instances, with the given type and name. The type filter is only applied if it is
   // not an empty string. The same counts for the name filter. This means when no type and name is provided all plugin
   // instances will be returned.
-  const getInstances = (type: string, name: string): IPluginInstance[] => {
-    const instancesFilteredByType = type ? data?.filter((instance) => instance.type === type) : data;
+  const getInstances = (satellite: string, type: string, name: string): IPluginInstance[] => {
+    const instancesFilteredBySatellite = satellite
+      ? data?.filter((instance) => instance.satellite === satellite)
+      : data;
+    const instancesFilteredByType = type
+      ? instancesFilteredBySatellite?.filter((instance) => instance.type === type)
+      : instancesFilteredBySatellite;
     const instancesFilteredByName = instancesFilteredByType?.filter((instance) => instance.name.includes(name));
 
     return instancesFilteredByName || [];
   };
 
+  // getPluginSatellites returns a list of strings with the unique satellites of the plugin instances.
+  const getPluginSatellites = (): string[] => {
+    const satellites = data?.map((instance) => instance.satellite);
+    return satellites ? satellites.filter((value, index, self) => self.indexOf(value) === index).sort() : [];
+  };
+
   // getPluginTypes returns a list of strings with the unique types of the plugin instances.
   const getPluginTypes = (): string[] => {
     const types = data?.map((instance) => instance.type);
@@ -119,6 +132,7 @@ export const PluginsContextProvider: React.FunctionComponent<IPluginsContextProv
       value={{
         getInstance: getInstance,
         getInstances: getInstances,
+        getPluginSatellites: getPluginSatellites,
         getPluginTypes: getPluginTypes,
         instances: data,
       }}