frontend: PluginSettings: Rework fetching and storing plugin information

This PR reduces the size of plugin information saved in local storage,
it also introduces the getPlugins hook for fetching plugin information.

Signed-off-by: Vincent T <[email protected]>

Author: vyncent-t

frontend/src/components/App/PluginSettings/PluginSettings.tsx

@@ -7,6 +7,7 @@ import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import helpers from '../../../helpers';
+import { usePlugins } from '../../../lib/k8s/api/v2/plugins';
 import { useFilterFunc } from '../../../lib/util';
 import { PluginInfo, reloadPage, setPluginSettings } from '../../../plugin/pluginsSlice';
 import { useTypedSelector } from '../../../redux/reducers/reducers';
@@ -285,9 +286,15 @@ export default function PluginSettings() {
 
   const pluginSettings = useTypedSelector(state => state.plugins.pluginSettings);
 
+  const { data: plugins } = usePlugins(pluginSettings);
+
+  if (!plugins?.length) {
+    return null;
+  }
+
   return (
     <PluginSettingsPure
-      plugins={pluginSettings}
+      plugins={plugins}
       onSave={plugins => {
         dispatch(setPluginSettings(plugins));
         dispatch(reloadPage());

frontend/src/components/App/PluginSettings/PluginSettingsDetails.tsx

@@ -9,6 +9,7 @@ import { useParams } from 'react-router-dom';
 import { useHistory } from 'react-router-dom';
 import helpers from '../../../helpers';
 import { getCluster } from '../../../lib/cluster';
+import { usePlugins } from '../../../lib/k8s/api/v2/plugins';
 import { deletePlugin } from '../../../lib/k8s/apiProxy';
 import { ConfigStore } from '../../../plugin/configStore';
 import { PluginInfo, reloadPage } from '../../../plugin/pluginsSlice';
@@ -66,13 +67,14 @@ const PluginSettingsDetailsInitializer = (props: { plugin: PluginInfo }) => {
 };
 
 export default function PluginSettingsDetails() {
-  const pluginSettings = useTypedSelector(state => state.plugins.pluginSettings);
   const { name } = useParams<{ name: string }>();
+  const pluginSettings = useTypedSelector(state => state.plugins.pluginSettings);
+  const { data: plugins } = usePlugins(pluginSettings);
 
   const plugin = useMemo(() => {
     const decodedName = decodeURIComponent(name);
-    return pluginSettings.find(plugin => plugin.name === decodedName);
-  }, [pluginSettings, name]);
+    return plugins?.find((plugin: PluginInfo) => plugin.name === decodedName);
+  }, [plugins, name]);
 
   if (!plugin) {
     return <NotFoundComponent />;

frontend/src/lib/k8s/api/v2/fetch.ts

@@ -17,7 +17,7 @@ export const BASE_HTTP_URL = helpers.getAppUrl();
  *
  * @returns fetch Response
  */
-async function backendFetch(url: string | URL, init: RequestInit) {
+export async function backendFetch(url: string | URL, init?: RequestInit) {
   const response = await fetch(makeUrl([BASE_HTTP_URL, url]), init);
 
   // The backend signals through this header that it wants a reload.

frontend/src/lib/k8s/api/v2/plugins.ts

@@ -0,0 +1,101 @@
+import '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
+import semver from 'semver';
+import helpers from '../../../../helpers';
+import { PluginInfo, PluginSettings } from '../../../../plugin/pluginsSlice';
+import { backendFetch } from './fetch';
+
+/*
+ * this function is used to check the compatibility of the plugin version with the headlamp version
+ *
+ * @param compatibleVersion headlamp-plugin version this build is compatible with.
+ *     If the plugin engine version is not compatible, the plugin will not be loaded.
+ *     Can be set to a semver range, e.g. '>= 0.6.0' or '0.6.0 - 0.7.0'.
+ *     If set to an empty string, all plugin versions will be loaded.
+ */
+export function checkCompatibleVersion(packageInfo: PluginInfo, checkAllVersions: boolean = false) {
+  /*
+   * this is the compatible version of the plugin with the headlamp version
+   */
+  const compatibleVersion = !checkAllVersions ? '>=0.8.0-alpha.3' : '';
+
+  // Can set this to a semver version range like '>=0.8.0-alpha.3'.
+  // '' means all versions.
+  const isCompatible = semver.satisfies(
+    semver.coerce(packageInfo.devDependencies?.['@kinvolk/headlamp-plugin']) || '',
+    compatibleVersion
+  );
+
+  return isCompatible;
+}
+
+export async function getPluginPaths() {
+  const pluginPaths = (await fetch(`${helpers.getAppUrl()}plugins`).then(resp =>
+    resp.json()
+  )) as string[];
+
+  return pluginPaths;
+}
+
+/*
+ * this function is used for the plugin settings and is extended from the original `fetchAndExecutePlugins` function in the Plugins.tsx file
+ * - the function is used to fetch the plugins from the backend and return the plugins with their settings
+ * - it will also do a compatibility check for the plugins and return the plugins with their compatibility status,
+ * - the compatibility check is needed to render the plugin switches
+ */
+export async function getPlugins(pluginSettings: PluginSettings[]) {
+  const pluginPaths = await getPluginPaths();
+
+  const packageInfosPromise = await Promise.all<PluginInfo>(
+    pluginPaths.map(path =>
+      backendFetch(`${path}/package.json`).then(resp => {
+        if (!resp.ok) {
+          if (resp.status !== 404) {
+            return Promise.reject(resp);
+          }
+
+          console.warn(
+            'Missing package.json. ' +
+              `Please upgrade the plugin ${path}` +
+              ' by running "headlamp-plugin extract" again.' +
+              ' Please use headlamp-plugin >= 0.8.0'
+          );
+
+          return {
+            name: path.split('/').slice(-1)[0],
+            version: '0.0.0',
+            author: 'unknown',
+            description: '',
+          };
+        }
+        return resp.json();
+      })
+    )
+  );
+
+  const packageInfos = await packageInfosPromise;
+
+  const pluginsWithIsEnabled = packageInfos.map(plugin => {
+    const matchedSetting = pluginSettings.find(p => plugin.name === p.name);
+    if (matchedSetting) {
+      const isCompatible = checkCompatibleVersion(plugin);
+
+      return {
+        ...plugin,
+        settingsComponent: matchedSetting.settingsComponent,
+        displaySettingsComponentWithSaveButton:
+          matchedSetting.displaySettingsComponentWithSaveButton,
+        isEnabled: matchedSetting.isEnabled,
+        isCompatible: isCompatible,
+      };
+    }
+    return plugin;
+  });
+
+  return pluginsWithIsEnabled;
+}
+
+export function usePlugins(pluginSettings: { name: string; isEnabled: boolean }[]) {
+  // takes two params, the key and the function that will be called to get the data
+  return useQuery({ queryKey: ['plugins'], queryFn: () => getPlugins(pluginSettings) });
+}

frontend/src/plugin/filterSources.test.ts

@@ -8,13 +8,7 @@ describe('filterSources', () => {
     const settingsPackages = undefined;
     const appMode = false;
 
-    const { sourcesToExecute } = filterSources(
-      sources,
-      packageInfos,
-      appMode,
-      '>=0.8.0-alpha.3',
-      settingsPackages
-    );
+    const { sourcesToExecute } = filterSources(sources, packageInfos, appMode, settingsPackages);
     expect(sourcesToExecute.length).toBe(0);
   });
 
@@ -39,7 +33,6 @@ describe('filterSources', () => {
       sources,
       packageInfos,
       appMode,
-      '>=0.8.0-alpha.3',
       settingsPackages
     );
     expect(Object.keys(incompatiblePlugins).length).toBe(0);
@@ -68,13 +61,7 @@ describe('filterSources', () => {
       },
     ];
     const appMode = true;
-    const { sourcesToExecute } = filterSources(
-      sources,
-      packageInfos,
-      appMode,
-      '>=0.8.0-alpha.3',
-      settingsPackages
-    );
+    const { sourcesToExecute } = filterSources(sources, packageInfos, appMode, settingsPackages);
 
     expect(sourcesToExecute.length).toBe(0);
   });
@@ -122,13 +109,7 @@ describe('filterSources', () => {
       },
     ];
     const appMode = true;
-    const { sourcesToExecute } = filterSources(
-      sources,
-      packageInfos,
-      appMode,
-      '>=0.8.0-alpha.3',
-      settingsPackages
-    );
+    const { sourcesToExecute } = filterSources(sources, packageInfos, appMode, settingsPackages);
 
     expect(sourcesToExecute.length).toBe(1);
     expect(sourcesToExecute[0]).toBe('source1');
@@ -181,7 +162,6 @@ describe('filterSources', () => {
       sources,
       packageInfos,
       appMode,
-      '>=0.8.0-alpha.3',
       settingsPackages
     );
 
@@ -194,8 +174,8 @@ describe('filterSources', () => {
       sources,
       packageInfos,
       appMode,
-      '', // empty string disables compatibility check
-      settingsPackages
+      settingsPackages,
+      true
     );
 
     expect(disabledCompatCheck.sourcesToExecute.length).toBe(2);

frontend/src/plugin/index.ts

@@ -18,10 +18,10 @@ import * as ReactDOM from 'react-dom';
 import * as ReactRedux from 'react-redux';
 import * as ReactRouter from 'react-router-dom';
 import * as Recharts from 'recharts';
-import semver from 'semver';
 import * as CommonComponents from '../components/common';
 import helpers from '../helpers';
 import * as K8s from '../lib/k8s';
+import { checkCompatibleVersion, getPluginPaths, getPlugins } from '../lib/k8s/api/v2/plugins';
 import * as ApiProxy from '../lib/k8s/apiProxy';
 import * as Crd from '../lib/k8s/crd';
 import * as Notification from '../lib/notification';
@@ -125,10 +125,6 @@ export async function initializePlugins() {
  * @param sources array of source to execute. Has the same order as packageInfos.
  * @param packageInfos array of package.json contents
  * @param appMode if we are in app mode
- * @param compatibleVersion headlamp-plugin version this build is compatible with.
- *     If the plugin engine version is not compatible, the plugin will not be loaded.
- *     Can be set to a semver range, e.g. '>= 0.6.0' or '0.6.0 - 0.7.0'.
- *     If set to an empty string, all plugin versions will be loaded.
  * @param settingsPackages the packages from settings
  *
  * @returns the sources to execute and incompatible PackageInfos
@@ -138,8 +134,8 @@ export function filterSources(
   sources: string[],
   packageInfos: PluginInfo[],
   appMode: boolean,
-  compatibleVersion: string,
-  settingsPackages?: PluginInfo[]
+  settingsPackages?: PluginInfo[],
+  disableCompatibilityCheck?: boolean
 ) {
   const incompatiblePlugins: Record<string, PluginInfo> = {};
 
@@ -167,11 +163,11 @@ export function filterSources(
     return enabledInSettings;
   });
 
+  const checkAllVersion = disableCompatibilityCheck;
+
   const compatible = enabledSourcesAndPackageInfos.filter(({ packageInfo }) => {
-    const isCompatible = semver.satisfies(
-      semver.coerce(packageInfo.devDependencies?.['@kinvolk/headlamp-plugin']) || '',
-      compatibleVersion
-    );
+    const isCompatible = checkCompatibleVersion(packageInfo, checkAllVersion);
+
     if (!isCompatible) {
       incompatiblePlugins[packageInfo.name] = packageInfo;
       return false;
@@ -199,17 +195,21 @@ export function filterSources(
  */
 export function updateSettingsPackages(
   backendPlugins: PluginInfo[],
-  settingsPlugins: PluginInfo[]
+  settingsPlugins: { name: string; isEnabled: boolean }[]
 ): PluginInfo[] {
   if (backendPlugins.length === 0) return [];
 
   const pluginsChanged =
     backendPlugins.length !== settingsPlugins.length ||
-    backendPlugins.map(p => p.name + p.version).join('') !==
-      settingsPlugins.map(p => p.name + p.version).join('');
+    JSON.stringify(backendPlugins.map(p => p.name).sort()) !==
+      JSON.stringify(settingsPlugins.map(p => p.name).sort());
 
   if (!pluginsChanged) {
-    return settingsPlugins;
+    const updatedPlugins = backendPlugins.filter(plugin =>
+      settingsPlugins.some(setting => setting.name === plugin.name)
+    );
+
+    return updatedPlugins;
   }
 
   return backendPlugins.map(plugin => {
@@ -241,46 +241,19 @@ export function updateSettingsPackages(
  *
  */
 export async function fetchAndExecutePlugins(
-  settingsPackages: PluginInfo[],
+  settingsPackages: { name: string; isEnabled: boolean }[],
   onSettingsChange: (plugins: PluginInfo[]) => void,
   onIncompatible: (plugins: Record<string, PluginInfo>) => void
 ) {
-  const pluginPaths = (await fetch(`${helpers.getAppUrl()}plugins`).then(resp =>
-    resp.json()
-  )) as string[];
+  const pluginPaths = await getPluginPaths();
 
   const sourcesPromise = Promise.all(
     pluginPaths.map(path =>
       fetch(`${helpers.getAppUrl()}${path}/main.js`).then(resp => resp.text())
     )
   );
 
-  const packageInfosPromise = await Promise.all<PluginInfo>(
-    pluginPaths.map(path =>
-      fetch(`${helpers.getAppUrl()}${path}/package.json`).then(resp => {
-        if (!resp.ok) {
-          if (resp.status !== 404) {
-            return Promise.reject(resp);
-          }
-          {
-            console.warn(
-              'Missing package.json. ' +
-                `Please upgrade the plugin ${path}` +
-                ' by running "headlamp-plugin extract" again.' +
-                ' Please use headlamp-plugin >= 0.8.0'
-            );
-            return {
-              name: path.split('/').slice(-1)[0],
-              version: '0.0.0',
-              author: 'unknown',
-              description: '',
-            };
-          }
-        }
-        return resp.json();
-      })
-    )
-  );
+  const packageInfosPromise = await getPlugins(settingsPackages);
 
   const sources = await sourcesPromise;
   const packageInfos = await packageInfosPromise;
@@ -291,15 +264,10 @@ export async function fetchAndExecutePlugins(
     onSettingsChange(updatedSettingsPackages);
   }
 
-  // Can set this to a semver version range like '>=0.8.0-alpha.3'.
-  // '' means all versions.
-  const compatibleHeadlampPluginVersion = '>=0.8.0-alpha.3';
-
   const { sourcesToExecute, incompatiblePlugins } = filterSources(
     sources,
     packageInfos,
     helpers.isElectron(),
-    compatibleHeadlampPluginVersion,
     updatedSettingsPackages
   );