ligreman/king

King UI for Kong API Gateway

King for Kong API Gateway

Complete administration UI for Kong API Gateway.

https://ligreman.github.io/king

King is not official, and does not have any affiliation with Kong.

Summary

• Features
• Compatibility
• Prerequisites
• Installation
• Configuration
• Development
• Author

Features

• Manage multiple Kong Nodes.
• Manage all Kong API Objects with an interactive graph interface, or a more table-like traditional one.
• Helpful and intuitive forms.
• Monitor nodes using health checks.

See some screenshots in the wiki: https://github.com/ligreman/king/wiki/Screenshots-of-features

Compatibility

King for Kong has been developed to be compatible with Kong API Gateway 2.8.x version and newer. It may be compatible backwards, but it has not been tested. It supports Kong 3.X new features like the new router flavour "expressions".

Supported Authentication plugins

• Key Auth
• JWT
• OAuth 2.0
• LDAP Authentication
• Session

Prerequisites

• A Kong API Gateway instance running
• A web server (Apache, Nginx...)

Installation

Download the latest .zip release package, and unzip it into a web application server (Apache, Nginx...).

Configuration

King for Kong is an Angular web application without a backend. This is a limitation when you want to have configuration parameters persisted among sessions. To cover part of this feature you can have a JSON config file served by an application server (apache, nginx... maybe the same server serving King) as a static file. Then you can set in King the url to access this configuration file, and King will load it on start.

Steps to set this up:

1. Create a JSON file with the configuration desired (you have a template in the Examples folder)
2. Serve it with your web server as an static file. For improved security make sure that only the web server is able to access the file.
3. Open the settings dialog (gear icon on the left of the Kong nodw url field in the header).
4. Type the config file url.

Note: If no config url is set, King by default will look for the config file at /config.json. Example: if you are accessing King at http://king.com:8080, King will look for the file at http://king.com:8080/config.json.

Field description of the config file:

• kong_admin_url: default kong url node to connect to. Note: it can be the Kong loopback url if you are using "Kong loopback security method".
• kong_admin_authorization_method: method used to send the credentials/token. If filled, King will send the credentials along with all requests, using the method selected. Values: "header", "query" or "body". Leave empty if no authorization credentials are needed.
• kong_admin_authorization_field: name of the field where the credentials/token will be sent. For example: "Authorization" (for an authorization header). Other example: "token" (in a query param).
• kong_admin_authorization_token: can be used to send Basic or Bearer tokens in base64 encoding. King will send this in the field indicated, using the method selected. Format: 'Basic <insert here base64 token calculated like base64(username:password)>'. Example: 'Basic dXNlcm5hbWU6cGFzc3dvcmQ='.

King Globals configuration

Some parameters can be set at code level (they are hardcoded in the source files). You can change them to change King's default behaviour to a certain level.

The file containing the global configuration is located at src/app/services/globals.service.ts

There you have these variables:

// Default url for the configuration JSON file
private _CONFIG_URL = '/config.json';

// Enable or disable the config dialog in the interface
private _ALLOW_CONFIG = false;

// Allow users to change the url of the Kong node to connect to
private _ALLOW_CHANGE_KONG_URL = true;

// Allow users to change the url of the JSON configuration file to load
private _ALLOW_CHANGE_CONFIG_FILE_URL = true;

Development

Prepare environment

Clone the repository to your local machine and install npm dependencies:

npm install

Running

npm start

King for Kong will be available at http://localhost:4200

How to upgrade

To upgrade Angular and Angular Material libraries, use the npx tool included with Angular. Example:

npx @angular/cli@13 update @angular/core@13 @angular/cli@13 --force

npx @angular/cli@13 update @angular/material@13 --force

Author

Ligreman (LigreSoftware)

king's Issues

Health bar for upstream

Add a progress health bar for the Upstream Health in the Upstream Info dialog.

Comparison to Konga, compatibility

I think this project is great, but what stops me for even try it is some comparison to Konga, which I am using right now - and it works, but it is not maintaned anymore.

It is possible to do all stuff, what is possible in Konga ? If yes, then also simple screenshot of adding/editing route/service is welcomed.

Also what is compatibility with 3.1.x kong ?

Bug: Error with plugin fields of type "array of integers"

Error in plugins like "proxy-cache" that have a field with type array of integers: [200,300,404....].

It is not parsed as an array when sending the request to Kong.

Add Screen for Creating OAuth Credentials

Currently, there is no user interface screen available for creating OAuth credentials for consumers. This makes it difficult for users to manage their OAuth credentials.

To enhance the user experience, I propose adding a new user interface screen that will allow users to easily create OAuth credentials for the consumers. This screen should include the following fields:

name, client_id, client_secret, redirect_uris

Docker image available?

Is there a Docker image available?

Proxy Cache Support

Proxy Cache interface support: configuration, get keys, delete...

custom_fields_by_lua not being parsed properly

Hello, thanks for this program. That this is pure-frontend interface to kong gateway itself is quite nice.

King seems to be having a similar custom_fields_by_lua problem as Konga does, see for reference: pantsel/konga#809

Screenshot:

Looking into the api call made to Kong by King, I can see where the problem lies: here's the raw payload:

{"name":"file-log","instance_name":"filelog1","route":null,"service":null,"consumer":null,"protocols":["http","https"],"enabled":true,"tags":[],"config":{"path":"/data/hello.txt","reopen":true,"custom_fields_by_lua":{"{ \"request":{"headers.postman-token\"":" \"return nil\", \"authenticated_entity\""}}}}

Seeing the config part:

"config": {
    "path": "/data/hello.txt",
    "reopen": true,
    "custom_fields_by_lua": {
      "{ \"request": {
        "headers.postman-token\"": " \"return nil\", \"authenticated_entity\""
      }
    }
  }

I guess custom_fields_by_lua is not being processed properly.

This is what I entered into the field :

{ "request.headers.postman-token": "return nil", "authenticated_entity": "return nil" }

This is what the api call to Kong needs to have:

"config": {
    "path": "/data/hello.txt",
    "reopen": true,
    "custom_fields_by_lua": {
          "request.headers.postman-token": "return nil",
          "authenticated_entity": "return nil"
    }
  }

Basically the json we enter needs to faithfully make its way through without mutilation.

Maybe there's some script trying to parse things in a different way, but that doesn't make sense to me : Sticking to the format that the original Kong gateway expects seems to be the best way forward IMHO.

New global field for plugins: instance_name

Kong 3.2.X added this field to all plugins.

Angular 18 Upgrade

Hi,

Is there a plan to upgrade to Angular 18 along with the support for latest version of Kong?

Add support for authentication in the config file retrieval

Add support for:

• username
• password

They will be sent as an Authorization Basic header.

Support for ACL management

Add suppor for the ACL plugin API management

CRUD Support for API Key tokens

Add support for creating, assigning and deleting API Key tokens (Key auth plugin)

Conflict between protocol validator and path validator

After selecting the gRPC or TCP, it will prompt "Selected protocol does not allow any path param, leave it empty".

When I delete the path, another verification error appeared.

In addition, a small problem related to the path:

The path field is optional in the API document.

Okta integration

Does King support Okta integration?

Update Angular to last versions

Angular 15+ deprecated the @angular/flex-layout module. King uses it in all the layouts.

In order to upgrade Angular, all flex-layout design must be refactored to flex CSS properties.

Creating Kong objects without tags using the api throws TypeError

How to recreate
Create objects using Kong's API. Go to the King architect page.

Error

ERROR Error: Uncaught (in promise): TypeError: K.tags is null
createGraphNodesAndEdges... 

Temporary Solution
Adding tags to the new created objects seems to solve the issue.

Versions used:
King version 68d7b0d
Kong version 3.0.1

Is there any official Docker image?

Or just build your own?

Support for Vault in proxy-cache-redis-cluster

Support vault in the username and password

Plugin request transformer and response transformer configuration

The fields in these plugins are arrays optional, but in the schema they are required, with default value [].

In King these fields become required, all the fields.

Change the behaviour so if a field is an array, required and default value is [], turn it not required.

Add Basic Auth Credentials

How to add credentials to my Consumer?

I've looked through all the menus, but I can't find a way to add credentials for basic-auth. For now I am using existing api based on kong documentation.

Sorry for noobs question, maybe there is something i am missing, can you guys help me.

Connecting to private kong admin UI?

I am working with an environment where the Kong Admin UI is accessible within the same VPC. It's not exposed to internet. When I run King UI, and it asks me to enter the URL of Kong Admin, it always shows 404 which is understandable because it tries to connect from my browser.

Is there a way to solve this?

Support for "record in array" plugin config

Plugin doc

Cannot create it using king. After create plugin by api, plugin config can be viewed using king, but cannot be modified.

Because it is a record, not a string 🤨

Config Scheme

{
    "fields": [
        {
            "protocols": {
                "type": "set",
                "elements": {
                    "type": "string",
                    "one_of": [
                        "grpc",
                        "grpcs",
                        "http",
                        "https"
                    ]
                },
                "required": true,
                "default": [
                    "grpc",
                    "grpcs",
                    "http",
                    "https"
                ]
            }
        },
        {
            "config": {
                "type": "record",
                "fields": [
                    {
                        "rules": {
                            "type": "array",
                            "elements": {
                                "type": "record",
                                "fields": [
                                    {
                                        "upstream_name": {
                                            "type": "string",
                                            "required": true
                                        }
                                    },
                                    {
                                        "condition": {
                                            "type": "map",
                                            "keys": {
                                                "type": "string"
                                            },
                                            "len_min": 1,
                                            "required": true,
                                            "values": {
                                                "type": "string"
                                            }
                                        }
                                    }
                                ]
                            },
                            "default": []
                        }
                    }
                ],
                "required": true
            }
        }
    ]
}

User's manual

Create online user's manual

Search by capabilities?

I see a filter by tags box, does that box allow searching by other field values(maybe broadly searches the JSON resources of each kong resource in question? )? Is there any way similar to konga where I can paste in search box route UUID or service UUID or route /uri/path/here or by Service name etc. or consumer name etc. to pull up a specific type of resource to edit when I am browsing existing resources?

Do consumer credentials jwt/oauth2.0 tokens also show up in the UI for CRUD actions? I think it says in docs they are supported so guessing yes.

Add option to preset kong-admin url and not change it

I would like to be able to have a docker image with a kong admin url as environment variable und not be able to change it in the UI
This way I can deploy it for multiple clusters with different urls, without the need to know the admin url.

CRUD support for JWT tokens

Add support for creating, assigning and deleting JWT tokens (JWT auth plugin)

Add Kong`s loopback support

Few things that would be needed to make this as good as Konga in my use cases:

1. Loopback support for the admin API, loopback support endpoint typically want authenticated so I would say allowing a configurable admin API endpoint that has a auth token or even a HS256 JWT token key/secret like Konga does would allow king a secure pattern to access a kong instance when not localized to its env. Otherwise need a way to password protect the UI itself so can't even use King without a login at least. Both of these feats are ideal.

2. Taking the approach of reading the plugins from the admin API and allowing dynamic populations of fields for create from their schema.lua outputs is a neat feature of Konga I think may be missing here.

If I come up with any others will add them in here, but with Konga getting no dev love this could become the new defacto OSS UI tooling people move to. Konga still works well though for even not being updated any for the time being.

I can't connect to kong admin

Any setting should be made on kong, because I can't connect to kong admin
right now, I'm use Konga as Kong UI, and no problem found

Bugs in edit upstream

• The field Host/IP is marked as required when editing.

Implement pagination in all resources list

install and setup were easy, love the UI, but I can't figure out how to display all my consumers... I have around 160'000 consumers in kong, but I can only get 1000 in king... is there a limit that can be set somewhere ?