plugin: Add plugin catalog plugin #35

yolossn · 2024-04-12T13:11:52Z

Plugin catalog is a plugin that helps
install and manage headlamp plugins
from artifacthub

Video.Project.1.mp4

How to use

From headlamp repo current main branch:

cd app
npm i
npm start

From plugins repo:

cd plugin-catalog
npm i
npm start

Now the Plugin Catalog link appears in the sidebar.

joaquimrocha

Thanks for the video. I took a quick look at the code but may have more comments later when I look again in more detail.
I also think that for the UX, instead of a dialog showing that the plugin is installing, we should have a progress bar with a cancel button which replace the install button in the plugin view.

plugin-store/.gitignore

plugin-store/src/components/plugins/Detail.tsx

joaquimrocha · 2024-04-16T15:31:50Z

plugin-store/src/components/plugins/Detail.tsx

+    const headlampPlugin = runCommand('electron-node', [
+      'plugin-management.js',
+      'update',
+      pluginName,
+      '-j',
+    ]);


I think this should be rather a new Headlamp. API call that does this transparently for the plugin.

joaquimrocha · 2024-04-16T15:32:48Z

plugin-store/src/index.tsx

+
+registerSidebarEntry({
+  name: 'store',
+  url: '/plugin_store',


Let's use the route as plugin-catalog.

illume · 2024-06-18T10:44:46Z

Hrmm. There's a problem with the build command, which is causing the failure in CI. Which I think is unrelated to this PR.

illume

Nice one.

I did a first pass review, and left a few notes for your consideration.

A few more component stories would be appreciated for ones without.

I didn't run it myself and test locally yet.

plugin-catalog/src/components/plugins/List.tsx

plugin-catalog/src/components/plugins/LoadingButton.tsx

plugin-catalog/src/components/plugins/InstalledList.tsx

plugin-catalog/src/components/plugins/List.tsx

plugin-catalog/README.md

plugin-catalog/package.json

plugin-catalog/src/components/plugins/Detail.tsx

plugin-catalog/dist/main.js

plugin-catalog/src/components/plugins/Loading.stories.tsx

illume · 2024-06-18T11:09:26Z

I guess it makes sense to add artifact hub badges as well? (as app-catalog did recently)

plugin-catalog/src/components/plugins/LoadingButton.stories.tsx

illume

Nice one.

Could you please add a "How to test" section in the PR description?

plugin-catalog/src/components/plugins/List.tsx

plugin-catalog/src/components/plugins/Detail.tsx

plugin-catalog/README.md

illume · 2024-07-03T06:19:51Z

I was thinking the "Store" part doesn't fit. Because it's not a store really. What do you think? /cc @joaquimrocha @blixtra

Just "Plugins" or "Plugin Catalog" ?

illume · 2024-07-03T06:50:05Z

I'm getting this error:

Maybe it's this error:
http://localhost:4466/externalproxy, no allowed proxy url match, request denied

yolossn · 2024-07-03T06:52:13Z

Maybe it's this error: http://localhost:4466/externalproxy, no allowed proxy url match, request denied

Add this to your env before running backend
export HEADLAMP_CONFIG_PROXY_URLS=https://artifacthub.io/*

illume · 2024-07-03T06:53:35Z

We have a Settings -> Plugins (that looks like the screenshot here). I'm wondering if this should be inside there or not?

illume · 2024-07-03T06:56:57Z

Maybe it's this error: http://localhost:4466/externalproxy, no allowed proxy url match, request denied

Add this to your env before running backend export HEADLAMP_CONFIG_PROXY_URLS=https://artifacthub.io/*

I guess this needs to be a default when the app is run?

Or at least cd app && npm start should be modified so it's a default.

yolossn · 2024-07-03T07:01:58Z

I guess this needs to be a default when the app is run?

Or at least cd app && npm start should be modified so it's a default.

I usually run the backend separately when developing and add the env there, I am not sure if this should be added in the app/start.js. It gets added in the app/electron/main.ts automatically from the app-build-manifest.json

illume · 2024-07-03T08:42:18Z

I guess this needs to be a default when the app is run?

Or at least cd app && npm start should be modified so it's a default.

I usually run the backend separately when developing and add the env there, I am not sure if this should be added in the app/start.js. It gets added in the app/electron/main.ts automatically from the app-build-manifest.json

Hrmm. I'm still getting an error with the proxy added.

ps. I made a PR for adding artifact hub proxy URL by default in the dev mode for 'make run-backend' headlamp-k8s/headlamp#2130

joaquimrocha

Left a few comments about the UX. The functionality worked fine for me when I tried it.

plugin-catalog/src/components/plugins/Detail.tsx

plugin-catalog/src/components/plugins/List.tsx

plugin-catalog/src/components/plugins/Detail.tsx

plugin-catalog/src/components/plugins/InstalledList.tsx

plugin-catalog/src/components/plugins/List.tsx

joaquimrocha · 2024-07-03T09:16:18Z

I have now tried this:

Stop the backend, to simulate issues.
Try installing a plugin: it still shows the stop button briefly and proceeds to indicate it's installed 🤔

yolossn · 2024-07-03T09:17:39Z

I have now tried this:

Stop the backend, to simulate issues.

Try installing a plugin: it still shows the stop button briefly and proceeds to indicate it's installed 🤔

The plugin installation isn't dependent on the backend. the backend is used only for the externalproxy to get plugin info from ArtifactHub.

illume · 2024-07-03T09:22:25Z

The error I'm getting is coming from PluginManager.list inside InstallList.tsx So I guess it has something to do with plugins I have installed (or not installed).

Error loading Installed plugins: TypeError: Cannot read properties of undefined (reading 'list')

illume · 2024-07-18T17:53:32Z

btw. The DCO check is failing, and probably those fixup commits should be applied.

illume

Noticed a lint issue, ~~and a required dependency update.~~

plugin-catalog/src/components/plugins/Detail.tsx

plugin-catalog/package.json

Plugin catalog is a plugin that helps install and manage headlamp plugins from artifacthub Signed-off-by: yolossn <sannagaraj@microsoft.com>

…Card Passing an object's members as props to a component is not a good practice. So these changes instead pass the package itself. Signed-off-by: Joaquim Rocha <joaquim.rocha@microsoft.com>

Signed-off-by: Joaquim Rocha <joaquim.rocha@microsoft.com>

…tory Signed-off-by: Joaquim Rocha <joaquim.rocha@microsoft.com>

Signed-off-by: Joaquim Rocha <joaquim.rocha@microsoft.com>

Now instead of showing Learn More, we have the link for the repo in the repo name. Signed-off-by: Joaquim Rocha <joaquim.rocha@microsoft.com>

Signed-off-by: Joaquim Rocha <joaquim.rocha@microsoft.com>

This patch adds links to the repo and org of the plugin and renames some of the labels to be more descriptive to what they do. Signed-off-by: Joaquim Rocha <joaquim.rocha@microsoft.com>

Signed-off-by: Joaquim Rocha <joaquim.rocha@microsoft.com>

This goes to the whole plugin settings list instead of the actual individual plugin settings until we have a way to do that more easily. Signed-off-by: Joaquim Rocha <joaquim.rocha@microsoft.com>

When one plugin was installed, they were higher than others. Signed-off-by: Joaquim Rocha <joaquim.rocha@microsoft.com>

Signed-off-by: Joaquim Rocha <joaquim.rocha@microsoft.com>

With npm run lint -- --fix. Signed-off-by: Joaquim Rocha <joaquim.rocha@microsoft.com>

illume

👍

yolossn requested review from illume and joaquimrocha April 12, 2024 13:12

yolossn force-pushed the plugin_store branch from b1be69e to a70bbb6 Compare April 12, 2024 13:14

joaquimrocha requested changes Apr 16, 2024

View reviewed changes

joaquimrocha mentioned this pull request Apr 16, 2024

Plugin Catalog prerequisites headlamp-k8s/headlamp#1907

Merged

yolossn force-pushed the plugin_store branch 2 times, most recently from 4a3abc9 to 3afef29 Compare April 29, 2024 21:49

yolossn force-pushed the plugin_store branch from 558ed99 to 8e71881 Compare May 13, 2024 20:28

yolossn force-pushed the plugin_store branch from 8e71881 to db8da72 Compare May 21, 2024 08:43

yolossn requested a review from joaquimrocha May 21, 2024 08:46

illume requested changes Jun 18, 2024

View reviewed changes

yolossn force-pushed the plugin_store branch from db8da72 to e86d8a8 Compare June 30, 2024 19:13

yolossn requested a review from illume July 1, 2024 10:13

illume changed the title ~~plugin: Add plugin store plugin~~ plugin: Add plugin catalog plugin Jul 3, 2024

illume reviewed Jul 3, 2024

View reviewed changes

plugin-catalog/src/components/plugins/LoadingButton.stories.tsx Show resolved Hide resolved

illume reviewed Jul 3, 2024

View reviewed changes

plugin-catalog/README.md Show resolved Hide resolved

joaquimrocha requested changes Jul 3, 2024

View reviewed changes

yolossn force-pushed the plugin_store branch 2 times, most recently from 49b1e8e to 0ccfdfa Compare July 18, 2024 16:39

yolossn force-pushed the plugin_store branch 2 times, most recently from 421adcc to 2db6573 Compare July 19, 2024 09:57

joaquimrocha force-pushed the plugin_store branch from dd776d2 to 5c7b842 Compare July 23, 2024 15:50

illume mentioned this pull request Jul 25, 2024

Create plugin catalog headlamp-k8s/headlamp#1654

Closed

illume requested changes Jul 25, 2024

View reviewed changes

plugin-catalog/src/components/plugins/Detail.tsx Show resolved Hide resolved

plugin-catalog/package.json Outdated Show resolved Hide resolved

yolossn and others added 18 commits July 25, 2024 13:58

plugin: Add plugin catalog plugin

3bb9a82

Plugin catalog is a plugin that helps install and manage headlamp plugins from artifacthub Signed-off-by: yolossn <sannagaraj@microsoft.com>

plugin-catalog: Don't pass all the package members as props in Plugin…

57d3bf8

…Card Passing an object's members as props to a component is not a good practice. So these changes instead pass the package itself. Signed-off-by: Joaquim Rocha <joaquim.rocha@microsoft.com>

plugin-catalog: Rename the Packages interface as PluginPackage

765d206

Signed-off-by: Joaquim Rocha <joaquim.rocha@microsoft.com>

plugin-catalog: Add missing organization_name to PluginPackage.reposi…

f021873

…tory Signed-off-by: Joaquim Rocha <joaquim.rocha@microsoft.com>

plugin-catalog: Replace style by sx in PluginCard

448c5c7

Signed-off-by: Joaquim Rocha <joaquim.rocha@microsoft.com>

plugin-catalog: Change the link to repo

48f80d0

Now instead of showing Learn More, we have the link for the repo in the repo name. Signed-off-by: Joaquim Rocha <joaquim.rocha@microsoft.com>

plugin-catalog: Show org name instead of repo name in PluginCard

b7a5d75

Signed-off-by: Joaquim Rocha <joaquim.rocha@microsoft.com>

plugin-catalog: Revamp the details

d701c40

This patch adds links to the repo and org of the plugin and renames some of the labels to be more descriptive to what they do. Signed-off-by: Joaquim Rocha <joaquim.rocha@microsoft.com>

plugin-catalog: Add plugin logo to details view

96f328f

Signed-off-by: Joaquim Rocha <joaquim.rocha@microsoft.com>

plugin-catalog: Add building icon next to plugin card's origin

d65ca8f

Signed-off-by: Joaquim Rocha <joaquim.rocha@microsoft.com>

plugin-catalog: Do not fail if the plugin directory doesn't exist

5914ddf

Signed-off-by: Joaquim Rocha <joaquim.rocha@microsoft.com>

plugin-catalog: Change the empty message for the installation list

0135f48

Signed-off-by: Joaquim Rocha <joaquim.rocha@microsoft.com>

plugin-catalog: Do not show error if the plugins dir is not found

ff437e5

Signed-off-by: Joaquim Rocha <joaquim.rocha@microsoft.com>

plugin-catalog: Add link to settings from the plugin details

ce8005c

This goes to the whole plugin settings list instead of the actual individual plugin settings until we have a way to do that more easily. Signed-off-by: Joaquim Rocha <joaquim.rocha@microsoft.com>

plugin-catalog: Make sure the plugins have the same veritical height

ac05442

When one plugin was installed, they were higher than others. Signed-off-by: Joaquim Rocha <joaquim.rocha@microsoft.com>

plugin-catalog: Sort so that plugins with logos appear first

a99b107

Signed-off-by: Joaquim Rocha <joaquim.rocha@microsoft.com>

plugin-catalog: Update headlamp-plugin dep to 0.10.0-alpha.1

c7489a0

Signed-off-by: Joaquim Rocha <joaquim.rocha@microsoft.com>

plugin-catalog: Fix format/linting issues

1559c8e

With npm run lint -- --fix. Signed-off-by: Joaquim Rocha <joaquim.rocha@microsoft.com>

joaquimrocha force-pushed the plugin_store branch from 69406b3 to 1559c8e Compare July 25, 2024 12:58

illume approved these changes Jul 25, 2024

View reviewed changes

joaquimrocha merged commit b0c34ca into main Jul 25, 2024
9 checks passed

joaquimrocha deleted the plugin_store branch July 25, 2024 13:16

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

plugin: Add plugin catalog plugin #35

plugin: Add plugin catalog plugin #35

yolossn commented Apr 12, 2024 •

edited by illume

Loading

joaquimrocha left a comment

joaquimrocha Apr 16, 2024

joaquimrocha Apr 16, 2024

illume commented Jun 18, 2024

illume left a comment

illume commented Jun 18, 2024

illume left a comment

illume commented Jul 3, 2024

illume commented Jul 3, 2024

yolossn commented Jul 3, 2024

illume commented Jul 3, 2024

illume commented Jul 3, 2024

yolossn commented Jul 3, 2024

illume commented Jul 3, 2024

joaquimrocha left a comment

joaquimrocha commented Jul 3, 2024

yolossn commented Jul 3, 2024

illume commented Jul 3, 2024

illume commented Jul 18, 2024

illume left a comment •

edited

Loading

illume left a comment

plugin: Add plugin catalog plugin #35

plugin: Add plugin catalog plugin #35

Conversation

yolossn commented Apr 12, 2024 • edited by illume Loading

How to use

joaquimrocha left a comment

Choose a reason for hiding this comment

joaquimrocha Apr 16, 2024

Choose a reason for hiding this comment

joaquimrocha Apr 16, 2024

Choose a reason for hiding this comment

illume commented Jun 18, 2024

illume left a comment

Choose a reason for hiding this comment

illume commented Jun 18, 2024

illume left a comment

Choose a reason for hiding this comment

illume commented Jul 3, 2024

illume commented Jul 3, 2024

yolossn commented Jul 3, 2024

illume commented Jul 3, 2024

illume commented Jul 3, 2024

yolossn commented Jul 3, 2024

illume commented Jul 3, 2024

joaquimrocha left a comment

Choose a reason for hiding this comment

joaquimrocha commented Jul 3, 2024

yolossn commented Jul 3, 2024

illume commented Jul 3, 2024

illume commented Jul 18, 2024

illume left a comment • edited Loading

Choose a reason for hiding this comment

illume left a comment

Choose a reason for hiding this comment

yolossn commented Apr 12, 2024 •

edited by illume

Loading

illume left a comment •

edited

Loading