From ca5a95cdd43010dd07f21f0e7b75b76336a55c9e Mon Sep 17 00:00:00 2001
From: ricoberger <mail@ricoberger.de>
Date: Tue, 14 Jun 2022 21:04:03 +0200
Subject: [PATCH] [app] Fix plugin filter

This commit fixes the filter on the plugin instances page. We didn't
used the plugin id as key for rendering the plugin gallery items, which
lead to some strange behaviour, so that plugins were still shown also
when the filter was changed. This should be fixed now.

It is now also possible to filter the list of plugins by the name of a
satellite, so that only plugins are shown that are configured at the
specific satellite instance.
---
 CHANGELOG.md                                  |  1 +
 .../components/plugins/PluginInstances.tsx    | 39 +++++++++++++++++--
 plugins/app/src/context/PluginsContext.tsx    | 20 ++++++++--
 3 files changed, 53 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5263cee7f..fd7d022dd 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/plugins/app/src/components/plugins/PluginInstances.tsx b/plugins/app/src/components/plugins/PluginInstances.tsx
index 424ef7d18..7e247f7e9 100644
--- a/plugins/app/src/components/plugins/PluginInstances.tsx
+++ b/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}
diff --git a/plugins/app/src/context/PluginsContext.tsx b/plugins/app/src/context/PluginsContext.tsx
index 601a416fb..4bc8f7405 100644
--- a/plugins/app/src/context/PluginsContext.tsx
+++ b/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,
       }}