Home

Awesome

alt text

Tests codecov License

Table of Contents

Skupper Console is a web-based graphical user interface (GUI) designed for easy observability and monitoring of your Skupper network resources. With Skupper Console, you can visualize your network topology, explore components and endpoints, and monitor traffic patterns to gain valuable insights into the health and performance of your Skupper infrastructure. Whether you are a developer or a network operator, Skupper Console makes it easy to stay on top of your Skupper network by providing an intuitive and user-friendly interface.

Status

Please access the Web console demo by clicking here.

This demo is synchronized with the latest version of the Skupper or a modified version of it, using the current main branch.

Enable the console from Skupper

To access the Web console in Skupper version 1.3 and above, please refer to the step-by-step instructions provided in this this guide. The guide will walk you through the process of enabling the console and accessing it in your Skupper deployment.

Development

We use yarn as the package manager, if adding dependencies to package.json make sure you install them with yarn and commit the yarn.lock file.

Quick start

To get started quickly, follow the steps below:

  1. Install the required dependencies by running yarn install.
  2. Start the application by running yarn start.
  3. Open http://localhost:3000 in your web browser.

Note:

The running application uses the data in the mock folder.

Run the console with demo routes

To run the console with demo routes, execute the following command:

COLLECTOR_URL=https://skupper-vb-boutique-a-demo.skupper-0-153f1de160110098c1928a6c05e19444-0000.us-east.containers.appdomain.cloud yarn start

These routes are associated with the boutique demo, which can be found at the following link https://github.com/skupperproject/skupper-example-grpc.

Run the console from Skupper

When running skupper, executing skupper init --enable-flow-collector will generate a publicly accessible route to the collector. This route can be secured or unsecured, depending on the desired level of security.

Use the Flow collector

COLLECTOR_URL=<skupper url> yarn start

Cross-Origin Resource Sharing (CORS) issue For security reasons, browsers forbid requests that come in from cross-domain sources. We need to allow the CORS manually:

kubectl set env <name of your skupper controller deployed> USE_CORS=yes

example:

kubectl set env deployment/skupper-service-controller USE_CORS=yes

Run skupper without authentication This standalone mode is intended for development purposes and does not work with a Skupper network that require authorization. However, in the case of Basic Auth, you can use any browser plugin to set the header property "Authorization: Basic < base64 of username:password >". In this last case the logout is does not work because we override the values of this header property every time.

Testing

Unit

To run unit tests, use the following command:

yarn test

Integration

To run integration tests, use the following command:

yarn cy

Development mode

To run integration tests in development mode and open the Cypress test runner, use the following command:

yarn cy:open

Note that the above commands assume that you have the necessary dependencies installed and configured for testing.

Project Structure

The project has the following directory structure:

Page sections

Each page section includes constants, interfaces, and enums that are specific to the React views and components used in that section. If you require more generic modules or API-related items, we recommend accessing them from the services folder modules.

Please note that the services folder contains utilities for data normalization, sanitization, and manipulation for a specific page, while other generic app functionalities such as date and formatting utilities can be found in the core/utils folder.