Hide navigation
Components

Console

Overview

The Console is a web-based administrative UI for Kyma. It allows you to administer the Kyma functionality and manage the basic Kubernetes resources.

The Console uses the Luigi framework to extend the UI functionality with custom micro front-ends and bring more functionality to the existing UI. You can define the micro front-ends using dedicated CustomResourceDefinitions (CRDs).

Use the following CRs to modify the Console UI:

  • The MicroFrontend custom resource allows you to plug in micro front-ends for a specific Namespace.
  • The ClusterMicroFrontend custom resource allows you to plug in micro front-ends for the entire Cluster.
  • The BackendModule custom resource allows you to enable Console Backend Service modules.

UI extensibility

The Kyma Console UI uses the Luigi framework to allow you to seamlessly extend the UI content with custom micro front-ends.

Console UI interaction with micro front-ends

When rendering the navigation, the Kyma Console UI calls a dedicated API endpoint to check if there are any micro front-ends defined in the current context. The current context comprises the current Namespace and all global cluster micro front-ends. All the defined micro front-ends and cluster micro front-ends are mapped to the navigation model as navigation nodes with remote viewUrls. When you click the navigation node, the system loads the content of the micro front-end into the content area of the Console. At the same time, the Console sends the current context data to the micro front-end to ensure it is initialized properly.

Micro front-end

A micro front-end is a standalone web application which is developed, tested and deployed independently from the Kyma Console application. It uses the Luigi Client library to ensure proper communication with the Console application. When you implement and deploy a micro front-end, you can plug it to the Kyma Console as a UI extension using dedicated CustomResourceDefinitions.

Luigi Client

The Luigi Client enables communication between the micro front-end and the Console application. Include Luigi Client in the micro front-end's codebase as an npm dependency.

Click to copy
npm i @kyma-project/luigi-client

It helps to read the context data that is sent by the Console when the user activates the micro front-end in the UI. Use the following example to read the context data:

Click to copy
LuigiClient.addInitListener((data)=>{
// do stuff with the context data
});

The Luigi Client facilitates communication between the micro front-end and the Console. Use the Luigi Client API to request the Console to navigate from the micro front-end to any other route available in the application:

Click to copy
LuigiClient.linkManager().navigate('/targetRoute', null, true)

For API details, see Luigi Client API documentation.

Add a micro front-end

Use the CustomResourceDefinitions to extend the Console functionality and configure different scopes for your micro front-ends.

Micro front-end for a specific Namespace

You can define a micro front-end visible only in the context of a specific Namespace.

Here you can find a sample micro front-end entity using the namespace metadata attribute to enable the micro front-end only for the production Namespace.

Using this yaml file in your Kyma cluster results in a Tractors Overview micro front-end navigation node displayed under the Hardware category. It is available only in the production Namespace.

MF-one-namespace

Cluster-wide micro front-end

You can define a cluster-wide micro front-end available for all Namespaces in the side navigation.

Here you can find a sample ClusterMicroFrontend entity using the namespace value for the placement attribute to make the micro front-end available for all Namespaces in the cluster.

Using this yaml file in your Kyma cluster results in a Tractors Overview micro front-end navigation node displayed under the Hardware category. It is available for every Namespace in your cluster.

Cluster-wide micro front-end for the administration section

You can define a cluster micro front-end visible in the Administration section of the Console.

Here you can find a sample of such ClusterMicroFrontend entity using the cluster value for placement attribute to ensure the micro front-end is visible in the Administration section.

CMF-admin-section

Console Backend Service

The Console Backend Service is a backend service which provides an API for all views of the Console UI. This service consumes the Kubernetes API and exposes a simplified GraphQL API to allow frontends to perform Kubernetes resource operations.

NOTE: Read this security document for more information about the Kyma GraphQL implementation.

Cache

For GraphQL queries, the Console Backend Service uses caching which is based on Informers from the Kubernetes Go client. There are separate cache stores for every Kubernetes resource. The stores are synchronized when the service starts. After cache synchronization, a single connection with the Kubernetes API server is established and any event related to one of the observed resources updates the corresponding cache store. This logic ensures that cache stores are always up-to-date without sending multiple requests to the Kubernetes API server.

Modularization

The Console Backend Service consists of the Kubernetes resource logic and cache for different domains, such as the Service Catalog, Application, or Kubeless. The Console Backend Service introduces modularization changes which are based on toggling modules while the server is running. The enabled module synchronizes cache for its resource and enables the module's logic for all server requests. If you disable a given module, every GraphQL query, mutation, and subscription related to this module returns an error.

These are the available Console Backend Service pluggable modules which contain the GraphQL resolver logic, where:

  • apicontroller relates to the API Controller.
  • authentication relates to IDP Presets.
  • application relates to the Application Connector.
  • content relates to documentation.
  • kubeless relates to Serverless.
  • servicecatalog relates to the Service Catalog, including Service Classes, Service Instances, and Service Bindings.
  • servicecatalogaddons relates to the Service Catalog add-ons, such as ServiceBindingUsage, and UsageKinds.

To enable a given module, install the corresponding Kyma component. It includes the BackendModule custom resource with the same name as the name of a given module.

Security guidelines for MicroFrontend and ClusterMicroFrontend CRs

For security reasons, follow the listed guidelines when you configure the web server for the MicroFrontend or ClusterMicroFrontend:

  • Make the MicroFrontend or ClusterMicroFrontend accessible only through HTTPS.
  • Make the Access-Control-Allow-Origin HTTP header as restrictive as possible.
  • Set the X-Content-Type HTTP header to nosniff.
  • Set the X-Frame-Options HTTP header to sameorigin or allow-from ALLOWED_URL.
  • Add Content Security Policies (CSPs).

MicroFrontend

The microfrontends.ui.kyma-project.io CustomResourceDefinition (CRD) is a detailed description of the kind of data and the format used to extend the Kyma Console. It allows you to extend the Console for the specific Namespace. A micro frontend is added to the Console automatically based on the yaml file. To avoid naming conflicts with the core system, the root node receives the mf- prefix in the URL. Additionally, the navigationContext and viewGroup node configuration parameters are set to allow simple navigation. To get the up-to-date CRD and show the output in the yaml format, run this command:

Click to copy
kubectl get crd microfrontends.ui.kyma-project.io -o yaml

Sample custom resource

This is a sample CR that extends the Console.

Click to copy
apiVersion: ui.kyma-project.io/v1alpha1
kind: MicroFrontend
metadata:
name: sample-microfrontend
namespace: production
spec:
version: 0.0.1
category: Sample Category
viewBaseUrl: https://sample-microfrontend-url.com
navigationNodes:
- label: Sample List
navigationPath: items
viewUrl: /
- label: Details
navigationPath: items/:id
showInNavigation: false
viewUrl: /:id

This table lists all the possible parameters of a given resource together with their descriptions:

FieldMandatory?Description
metadata.nameYESSpecifies the name of the CR.
metadata.namespaceYESSpecifies the target Namespace for the CR.
spec.versionNOSpecifies the version of the micro front-end.
spec.categoryNOSpecifies the category name under which the micro front-end appears in the navigation.
spec.viewBaseUrlYESSpecifies the address of the micro front-end. The address has to begin with https://.
spec.navigationNodesYESThe list of navigation nodes specified for the micro front-end.
spec.navigationNodes.labelYESSpecifies the name used to display the micro front-end's node in the Console UI.
spec.navigationNodes.navigationPathNOSpecifies the path used for routing within the Console.
spec.navigationNodes.viewUrlNOSpecifies the URL used to display the content of a micro front-end.
spec.navigationNodes.showInNavigationNOThe Boolean that specifies if the micro front-end's node is visible in the navigation or not.

ClusterMicroFrontend

The clustermicrofrontends.ui.kyma-project.io CustomResourceDefinition (CRD) is a detailed description of the kind of data and the format used to extend the Kyma Console. It allows you to extend the Console for the entire Cluster. The cluster micro frontend is added to Console automatically based on the yaml file. To avoid naming conflicts with the core system, the root node receives the cmf- prefix in the URL. Additionally, navigationContext and viewGroup node configuration parameters are set to allow simple navigation. To get the up-to-date CRD and show the output in the yaml format, run this command:

Click to copy
kubectl get crd clustermicrofrontends.ui.kyma-project.io -o yaml

Sample custom resource

This is a sample CR that extends the Console.

Click to copy
apiVersion: ui.kyma-project.io/v1alpha1
kind: ClusterMicroFrontend
metadata:
name: sample-microfrontend
spec:
version: 0.0.1
category: category-name
viewBaseUrl: https://sample-microfrontend-url.com
placement: cluster
navigationNodes:
- label: Sample List
navigationPath: items
viewUrl: /
- label: Details
navigationPath: items/:id
showInNavigation: false
viewUrl: /:id

This table lists all the possible parameters of a given resource together with their descriptions:

FieldMandatory?Description
metadata.nameYESSpecifies the name of the CR.
spec.versionNOSpecifies the version of the cluster micro front-end.
spec.categoryNODefines the category name under which the cluster micro front-end appears in the navigation.
spec.viewBaseUrlYESSpecifies the address of the cluster micro front-end. The address has to begin with https://.
spec.placementNOSpecifies if the cluster micro front-end should be visible in the Namespace navigation or settings navigation. The placement value has to be either namespace or cluster.
spec.navigationNodesYESThe list of navigation nodes specified for the cluster micro front-end.
spec.navigationNodes.labelYESSpecifies the name used to display the cluster micro front-end's node in the Console UI.
spec.navigationNodes.navigationPathNOSpecifies the path that is used for routing within the Console.
spec.navigationNodes.viewUrlNOSpecifies the URL used to display the content of the cluster micro-front end.
spec.navigationNodes.showInNavigationNOThe Boolean that specifies if the cluster micro front-end's node is visible in the navigation or not.

BackendModule

The backendmodules.ui.kyma-project.io CustomResourceDefinition (CRD) is a detailed description of the kind of data and the format used to enable Console Backend Service modules.

To get the up-to-date CRD and show the output in the yaml format, run this command:

Click to copy
kubectl get crd backendmodules.ui.kyma-project.io -o yaml

Sample custom resource

This is a sample CR that enables the servicecatalog module in the Console Backend Service:

Click to copy
apiVersion: ui.kyma-project.io/v1alpha1
kind: BackendModule
metadata:
name: servicecatalog

Custom resource parameters

This table lists all the possible parameters of a given resource together with their descriptions:

ParameterMandatoryDescription
metadata.nameYESSpecifies the name of the CR. It must be the same as the name of a given Console Backend Service module.

These components use this CR:

ComponentDescription
Console Backend ServiceThe component reacts to every action of adding or deleting the BackendModule custom resource and enables or disables a given Console Backend Service module accordingly.