Custom App View - View does not change

[SohrabTa]

I want to get familiar with the custom app view feature of Kubeapps. I used the documentation.

I followed every step:

First I used the given file in docs\reference\examples\CustomAppView.jsx and modified it a bit to add two new buttons. Here is the modified file.

After that I added

 customAppViews:
  - plugin: helm.packages
    name: apache
    repository: bitnami

to chart\kubeapps\values.yaml

and in the last step

And just like the custom form components the bundle can be added via the command line:

helm install  bitnami/kubeapps --set-file dashboard.customComponents=*path to file* <other_flags>

The *path to file* has to point to the js or min js file that I modified in the first step, right?

I am asking because the steps of the installation work fine, without errors etc. but when I deploy apache in the custom Kubeapps the view does not change.

Do I need to render a custom component, like in the custom form documentation?

I am sure I am missing some action. Help would be very appreciated.

[absoludity]

Hi there @SohrabTa . This functionality was added by the community, specifically by @aanthonyrizzo , who is the main user, I believe. I'll see if he can jump in to help you debug, as it's not something we (the core team) are using.

[aanthonyrizzo]

Hi @SohrabTa! Yes I use this feature in my deployment of kubeapps. Does it not even try to render the custom component or is it trying to fetch it and returning a 404? If you set the bundle file to '' do you get a blank page or an error? I have not tested this on the latest version of Kubeapps however I know it runs on (2.4.1).

[SohrabTa]

Hi @aanthonyrizzo! Oh how cool I get to talk to the creator 😄

When I go through the steps described in my first post and I deploy an Apache app from the bitnami repo, the Apache's app page looks like the default one, so nothing changes. I don't know if it tries to fetch a new one or not. Is there a way for me to enable a debug log?

When I set the bundle file to '', so I run helm install kubeapps-custom bitnami/kubeapps --set-file dashboard.customComponents='' without a space inbetween the '' it starts the installation and when I run kubectl get pods -w --namespace default to check its status i get this output. This keeps going and does not resolve.

When I set the bundle file to ' ', so with a space inbetween, I get
Error: INSTALLATION FAILED: failed parsing --set-file data: open : The system cannot find the path specified.

[aanthonyrizzo]

All of the logic for the rendering of new components is in the dashboard but there are a couple of things you can check. In the Network tab of your browser there should be a request for a config.json. In that, there are 2 relevant values, customAppViews (which indicates to the frontend which charts should try to load the custom view from the remote bundle logic here) and remoteComponentsUrl (which tells the frontend where to look for the JS components logic here). If those 2 values are set, then when you go to the application view, you should again check the network tab and see if there is a request for the components. To test this I would set remoteComponentsUrl: http://localhost:9090 and see if there is a request for localhost when you go to the page (and there should be a 404 error message in the UI and network tab). If there isn't there could be a possible regression (I wont have time to test this myself until later this week the earliest). Feel free to reply with your config.json as well!

[SohrabTa]

I think until now I did not inject the custom values.yaml into the kubeapps installation. Maybe that's why it did not change. Now when I install Kubeapps by running

helm install -f values.yaml kubeapps-custom --namespace kubeapps-custom bitnami/kubeapps --set-file dashboard.customComponents='C:\Users\<USERNAME>\Desktop\code\kubeapps\docs\reference\examples\CustomAppView.jsx'

and then I check the progress by running kubectl get pods -w --namespace kubeapps-custom I get the following output. So it seems like synching the apprepo with the bitnami repo fails. This also explains why now when I open the Kubeapps dashboard and I click on the Catalog tab I get the error message

An error occurred while fetching the catalog: Invalid GetAvailablePackageSummaries response from the plugin helm.packages: rpc error: code = Internal desc = Unable to fetch chart categories: pq: password authentication failed for user "postgres".

When I check the two values that you pointed out, the customAppViews is set but the remoteComponentsUrl is not set. I cannot attach the json file but here is a pastebin.

Unfortunately I cannot go to the application view, because I cannot deploy an application, because the apprepo fails to sync with the bitnami one.

I am very thankful for your support up until now 😄 💙

[SohrabTa]

Thanks a lot @absoludity. I uninstalled my test environment aka a minikube container one-node cluster and clean installed it. Now it works!

I added all the relevant parameters to my custom Kubeapps values.yaml and upgraded the default Kubeapps installation by running helm upgrade -f values.yaml kubeapps bitnami/kubeapps --namespace kubeapps

When I deploy an Apache app I usually get redirected to the Application view of the Apache app. Now I get redirected as well but an error is shown: Unknown Error: SyntaxError: invalid regular expression flag o. Is that flag connected to my CustomAppView.js, @aanthonyrizzo?

Attached you can find an archive with my custom values.yaml, CustomAppView.jsx and CustomAppView.js (which was converted from jsx using this. In the archive is also a screenshot of the Apache app view in Kubeapps so you have a better idea of what I am refering to.
custom_view_files.zip

Thanks a lot for your efforts!

[SohrabTa]

I tried the same approach with the templates CustomAppView.jsx and CustomAppView.min.js provided by you and I still get the same error. So it does not break because of me changing the default templates.

Google research suggests that there is a supposed to be syntax error in the JS files, but the JS linters do not find any errors. I am really out of ideas now... I will research more.

[SohrabTa]

I am still stuck with this problem, I tried researching my way out of it, but was not able to do it. Maybe you have an idea @aanthonyrizzo?

[aanthonyrizzo]

Hi @SohrabTa sorry I missed these. That's a very interesting error. I would try going even simpler and using just a component that renders hello world into the DOM. There should be a console error that propagates from that as well, and its coming from the included JS bundle?

[SohrabTa]

Hi @aanthonyrizzo thanks a lot for your reply. I followed your suggestion and created a hello_world.js but I still get the same error when deploying apache (the app with the intended CustomAppView). The relevant parameters in Kubeapps chart's values.yaml:

customAppViews:
    - plugin: helm.packages
      name: apache
      repository: bitnami

customComponents: r"C:\path\to\hello_world.js" -> error: Unknown Error: SyntaxError: unexpected token: string literal

Also here is the HAR archive of a failing GetResources call. when I click on the deployed apache's app view.

There should be a console error that propagates from that as well, and its coming from the included JS bundle?

I don't know what you mean by that sorry. How can I check for a console error ?