Genie Web Client

An AI-powered, extensible UI framework built on the OpenShift Console dynamic plugin, enabling unified, intelligent experiences across Red Hat products.

Status

This README is a work in progress (WIP).

Getting started

Development

Option 1: Local

In one terminal window, run:

1. yarn install
2. yarn run start

In another terminal window, run:

1. oc login (requires oc and an OpenShift cluster)
2. yarn run start-console (requires Docker or podman 3.2.0+)

This will run the OpenShift console in a container connected to the cluster you've logged into. The plugin HTTP server runs on port 9001 with CORS enabled. Navigate to http://localhost:9000/example to see the running plugin.

Running start-console with Apple silicon and podman

If you are using podman on a Mac with Apple silicon, yarn run start-console might fail since it runs an amd64 image. You can workaround the problem with qemu-user-static by running these commands:

podman machine ssh
sudo -i
rpm-ostree install qemu-user-static
systemctl reboot

Option 2: Docker + VSCode Remote Container

Make sure the Remote Containers extension is installed. This method uses Docker Compose where one container is the OpenShift console and the second container is the plugin. It requires that you have access to an existing OpenShift cluster. After the initial build, the cached containers will help you start developing in seconds.

1. Create a dev.env file inside the .devcontainer folder with the correct values for your cluster:

OC_PLUGIN_NAME=console-plugin-template
OC_URL=https://api.example.com:6443
OC_USER=kubeadmin
OC_PASS=<password>

2. (Ctrl+Shift+P) => Remote Containers: Open Folder in Container...
3. yarn run start
4. Navigate to http://localhost:9000/genie

Testing

Unit Tests

This project uses Jest and React Testing Library for unit testing.

Running Tests

# Run all tests once
yarn test

# Run tests in watch mode (re-runs on file changes)
yarn test:watch

# Run tests with coverage report
yarn test:coverage

Writing Tests

Tests should be placed alongside the components they test with a .test.tsx extension. For components with multiple test files, use a __tests__/ directory.

File Organization:

• Single test file: src/components/MyComponent.test.tsx (co-located)
• Multiple test files: src/components/my-component/__tests__/ (organized)

Example test:

import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('renders correctly', () => {
    render(<MyComponent />);
    expect(screen.getByText('Expected Text')).toBeInTheDocument();
  });
});

Integration Tests

Integration tests using Cypress are available. See the integration-tests directory for more details.

# Run Cypress in interactive mode
yarn test-cypress

# Run Cypress in headless mode
yarn test-cypress-headless

Contributing

See CONTRIBUTING.md for guidelines. A PR template is in place (see .github/pull_request_template.md) prompting for a summary and testing details.