Restructure longhorn UI proxy link to contain dynamic namespace

[jordojordo]

Summary

Fixes #10259

The Longhorn frontend UI would fail to load as the namespace was hard-coded to longhorn-system. Although setting this namespace is the recommended approach when installing Longhorn with Helm, users may still determine their own namespace.

Occurred changes and/or fixed issues

This adds a computed property to find the Longhorn UI based on the label app=longhorn-ui which is defined in the Longhorn Helm chart.
If the service is found, the externalLinks will contain the correct namespace of this service in the link property.

Technical notes summary

I've also added a banner to display an error when no external links have been populated.

Screenshot/Video

longhorn-ui.mp4

[nwmac]

There might be a large number of services, so for performance, we can use the label selector to look just for the longhorn one.

[jordojordo]

That was my original approach with:

  async mounted() {
    if ( this.$store.getters['cluster/schemaFor'](SERVICE) ) {
      const uiService = await this.$store.dispatch('cluster/findMatching', {
        type:     SERVICE,
        selector: 'app=longhorn-ui'
      });

      if ( !isEmpty(uiService) && uiService.metadata?.namespace ) {
        this.externalLinks = [
          {
            enabled:     true,
            iconSrc:     this.longhornImgSrc,
            label:       'longhorn.overview.linkedList.longhorn.label',
            description: 'longhorn.overview.linkedList.longhorn.description',
            link:        `/k8s/clusters/${ this.currentCluster.id }/api/v1/namespaces/${ uiService.metadata.namespace }/services/http:longhorn-frontend:80/proxy/`
          },
        ];
      }
    }
  },

The service is never found even when it exists. If I fetch all of the services with findAll, then run findMatching this will work but defeats the purpose. Am I using findMatching incorrectly?

longhorn-ui-2.mp4

[jordojordo]

I looked further into this issue with findMatching and it seems that this is expected behavior. When findMatching is dispatched, it will return getters.matching which only has access to the resources that have already been stored within the getters.

[nwmac]

You can supply force: true in the options to bypass that behaviour.

[nwmac]

@jordojordo I had a look and the issue is that findMatching returns an array of matching services, not a single service which your code was looking for.

This worked for me:

  async mounted() {
    if ( this.$store.getters['cluster/schemaFor'](SERVICE) ) {
      await this.$store.dispatch('cluster/findAll', { type: SERVICE });

      const uiServices = await this.$store.dispatch('cluster/findMatching', { type: SERVICE, selector: 'app=longhorn-ui' });

      console.error(uiServices);

      if (uiServices && uiServices.length ===1 && uiServices[0].metadata?.namespace) {
        this.externalLinks = [
          {
            enabled:     true,
            iconSrc:     this.longhornImgSrc,
            label:       'longhorn.overview.linkedList.longhorn.label',
            description: 'longhorn.overview.linkedList.longhorn.description',
            link:        `/k8s/clusters/${ this.currentCluster.id }/api/v1/namespaces/${ uiServices[0].metadata.namespace }/services/http:longhorn-frontend:80/proxy/`
          },
        ];
      }
    }
  },

You might want to use fetch rather than mounted as with this, the red banner flicks up briefly before the service is found.

I would also suggest we use a vertical IconMessage rather than the error banner, eg:

Lastly, if we can avoid using lodash that would be great - generally I think we want to try and get that out of the code base, espcially for things like isEmpty (code above does not use that)

[nwmac]

See comment

[jordojordo]

I updated this to use the fetch method rather than the mounted when fetching the services, converted the externalLinks into a computed property, and switched the Banner to an IconMessage component with a more specific message. Also updated the tests to fit this new structure.

longhorn.mp4

[jordojordo]

Restructured this to use the findMatching action.

longhorn.mp4

[enneitex]

Hey,

I know this is a bit late as this has been merged for a long time but this change means that users need mors RBAC than before to access longhorn UI. They need to be able to list services in every namespaces, this was not required before