Health Checks, various new features, bugfixes

[bloqhead]

New Features and Bugfixes

• Health checks view in place and added to the sidebar (within Policies for now, and alphabetized)
• Colorized JSON to YAML block for the entity view feature (present on all views). Includes a button for easily allowing the user to copy the entity to the clipboard.
• The bug that caused the caching issue is resolved now. When the user runs the GUI, it will check the /config endpoint every time so that if anything is different it will be refreshed. So if a user switches from universal to Kubernetes (or vice-versa) they will be sent through the wizard again. This is completely unrelated to the caching issue on the website.
• Status column and functionality added to the wizard dataplanes table
• Button hover fade effect removed globally
• Status on all data tables is moved to the first column
• Status is now colorized based on if the dataplane is online or offline (green for online, red for offline). A dot is included to show status, similar to the status in the top right of the app that shows the current version and environment
• "View Entity" changed to "View" and now present on all views (Policies, Dataplanes, Health Checks, etc)
• All doc links go to the docs for the version of Kuma the user is running, instead of simply going to the latest docs.

In Progress

• Fixing breadcrumbs (requires the modification of the breadcrumbs component from Kong Admin)
• Finalizing functionality for pagination (requires the modification of a few components)
• Detecting and handling when the API is unreachable
• Detecting if a dataplane is offline and returning a blank page with a message for the user
• Refresh button for optional reloading of the dataplanes list on step 1 of the wizard in case any of the dataplanes appear offline and the user has since changed their status

If you want to test via this repo with your currently running Kuma, follow these steps:

1. npm i -g @vue/cli (or yarn global add @vue/cli)
2. yarn serve
3. View the app at http://localhost:8080/

Testing the Kuma environment check functionality

The app uses a local JSON file for getting the config information (apiUrl and environment) but uses the Kuma /config endpoint in production. If you want to see what happens if the user launches Kuma in a different environment than what they had running prior, changed the "universal" string in this file to "kubernetes" and refresh the page. You should be sent back through the wizard and you'll see that the page information changes accordingly.

The reason I use a local file here is because the development version of the GUI runs from port 8080 and the /config endpoint in production does not. So trying to fetch it from port 8080 throws a CORS error. Since the GUI runs from the same port as the /config endpoint in production, this is not an issue.

[bloqhead]

I've added a new feature that will check that the Kuma HTTP API is running and if not, the user is presented with a message. This works in both the wizard and the dashboard and does not cache the status of the API.

Please review and provide feedback on the content for it.

Testing the API error functionality

This is an easy way to test this functionality without actually having to go through the trouble of starting and restarting Kuma.

1. Install the Vue.js devtools extension for Chrome browsers
2. Open Chrome devtools and go to the "Vue" tab that has been added (you may have to reload Chrome after installing the extension for it to activate)
3. Under the "Vuex" tab, look for status under the state heading
4. Hover over it and click the pencil icon to edit the value
5. Change it to anything other than "OK" ("OK" is the statusText returned from the API)

You should see the error message that will display when the HTTP API is unavailable.

[subnetmarco]

I started the GUI without starting kuma-cp. I was expecting the GUI to tell me that for whatever reason it could not connect to Kuma, but that was not the case. This is what I am seeing:

Do we have a check in place that verifies the connectivity to the CP?

[bloqhead]

@subnetmarco I've added functionality that checks to see whether or not the API is online. Please give it a try and let me know your thoughts and what can be done to improve the message to the user.

[subnetmarco]

@bloqhead yes, can you please also include what address are you trying to use in order to connect to Kuma, and change the message to:

[bloqhead]

• Some small fixes for the detail view endpoints on all policies, health checks, etc.
• the API offline message is now improved (per your feedback, @subnetmarco)
• Proxy Templates view is now present
• Made the 404 page more consistent and helpful
• Resolved the issue where old entities or policies that once existed were still working pages when the user went to them. Now if a user goes to a policy, health check, etc. that was removed, they will be sent to the 404 page

[subnetmarco]

I found a glitch in the Refresh of dataplanes when they are offline: https://share.getcloudapp.com/mXumKr1W

The table is flashing when hitting the Refresh button.

[subnetmarco]

These links are broken, but I think this may be caused by the version number:

[subnetmarco]

Moving across empty tables creates a flashing effect: https://share.getcloudapp.com/L1ukrRLD

[bloqhead]

These links are broken, but I think this may be caused by the version number:

Yeah, It's because I'm grabbing the version from Kuma itself and if you're on something like an RC version, it's grabbing the semver as is. So as long as we have the version number aligned with the latest version on the website, this won't be a problem.

[bloqhead]

I've added pagination to all table views. If you have more than 12 of any item, the pagination goes into effect (I can adjust that number as needed if you guys think it should be more or less).

[subnetmarco]

Breadcrumbs should be in the form of:

Meshes > {mesh_name} > {policy type} > {name of entity}

like:

Meshes > default > Traffic Permissions > hello_world

[bloqhead]

@subnetmarco the breadcrumbs are now modeled after your example. Working on the other aforementioned items now.

[bloqhead]

• Added a very subtle page transition to account for any issues where table data is fetching and hasn't yet rendered (resolves this)
• Fixed the dataplane refresh function on the initial step of the wizard. There was a setTimeout that was no longer needed (resolves this)

[bloqhead]

• Multiple small improvements to the way each entity view handles and displays data
• The general dataplane overview page now displays a total count for all policies -- example
• There is now a button present on all table views for refreshing the data table without having to do a full page reload

I've created a short video walkthrough to provide an idea of what to expect if you haven't yet tested with the new changes and fixes. Please provide any feedback or questions so that I can address them and get a compiled version ready for the next release.

[jakubdyszkiewicz]

shouldn't this be 'policies'?

[bloqhead]

Marco wanted the Health Checks menu item to be housed under the "Policies" heading along with Proxy Templates and all of the Traffic items. "Policies" under the "Policies" heading would be redundant.

[jakubdyszkiewicz]

Did you test the GUI with Dataplane in Gateway mode? Here is example of such dataplane

type: Dataplane
mesh: default
name: kong-01
networking:
  gateway:
    tags:
      service: kong
  outbound:
  - interface: :33033
    service: backend

[bloqhead]

I haven't. If I wanted to test this locally with Kuma, how would I do it? If it's in gateway mode, does gateway output the same data as inbound does?

[bloqhead]

I've opened a new PR with a compiled build for review. Please test with the API URL (/api) change and let me know if you run into trouble. The app will always look in the /config endpoint for apiUrl and will use that, so you should be okay. I'm here to help!

https://github.com/Kong/kuma/pull/538