Consul UI Improvements

This is the third post of the blog series highlighting new features in Consul service mesh.

Recent releases of Consul have included many updates to the Consul UI. Some of these might have gone unnoticed, but make a big impact on the user experience of the UI. In this article we will explore the changes made to the UI in the recent updates and take a look at what is coming in future updates.

To make these features possible, there have also been changes to the underlying APIs which besides powering these features can also be used separately for other purposes.

»Services views

When you visit the Consul UI, one of the changes that you will immediately see is the new Services View. Health checks for services are now split up into Node health checks and Service health checks, giving you a better understanding of which checks are failing.

In the Service Instances View, each instance is now listed with it's corresponding status and can be viewed separately in the Service Instance Detail View. All related information for a service, such as the node the instance is running on, and the sidecar proxies that are registered for that service are now clearly displayed. This allows you to more easily navigate between the related components such as services, nodes and proxies.

»Sidecar proxies

Since Consul 1.5, sidecar proxies are now a first class citizen in the UI. They have their own detail pages showing the service it is connected to and the upstreams that are configured for that service.

This section will display even more information about the proxy configuration with the coming releases of Consul.

»Blocking queries

Consul 1.5 added the option to enable Blocking Queries. By enabling this setting, the Consul UI will automatically update the service list when there are changes in services without refreshing your browser, giving you a realtime view of the system.

To enable this setting, go to Settings in the top right and toggle the Blocking Queries on. The setting will then be persisted in local storage of the browser. With the release of Consul 1.6 the default value for this setting will be on. If you have previously disabled this setting, it will use the previously persisted value.

»Filtering

Consul 1.5 introduced an API for filtering of services and other data. For example; you can use the filter parameter to return services from the catalog which are running on Linux. Any data returned from a query can be used as a filter parameter, making scripts or processing the results of API calls dramatically simpler.

$ curl -G localhost:8500/v1/catalog/service/api-internal --data-urlencode 'filter=NodeMeta.os == linux'
[
    {
        "ID": "b4faf93a-5c7d-11e9-840d-8c8590bd0966",
        "Node": "node-2",
        "Address": "198.18.0.2",
        "Datacenter": "dc1",
        "TaggedAddresses": null,
        "NodeMeta": {
            "arch": "arm",
            "os": "linux"
        },
        "ServiceKind": "",
        "ServiceID": "api-internal",
        "ServiceName": "api-internal",
        "ServiceTags": [
            "test",
            "tag"
        ],
        "ServiceAddress": "",
        "ServiceWeights": {
            "Passing": 1,
            "Warning": 1
        },
        "ServiceMeta": {
            "environment": "production"
        },
        "ServicePort": 9090,
        "ServiceEnableTagOverride": false,
        "ServiceProxyDestination": "",
        "ServiceProxy": {},
        "ServiceConnect": {},
        "CreateIndex": 29,
        "ModifyIndex": 29
    }
]

The UI has taken a first step to supporting this richer filtering ability and has begun to modify the user interface for making it easier to find the exact services you are looking for.

With the upcoming Consul 1.6 release we'll begin to take advantage of these new APIs, making it far easier to search Consul without downloading large datasets first and allowing the user to perform much finer grained searching.

»Conclusion

Often the small incremental improvements that are made in the UI are easily overlooked in changelogs, but can have a big impact on the users' experience. We will keep rolling out new improvements to the Consul UI both by adding new and exciting Consul features, and improving the overall user experience with more general UI features.