UI Console

The React-based admin console provides real-time dashboards, protocol marketplace, compliance reporting, and system management.

Overview

The UI Console is a single-page application built with React, TypeScript, and Vite. It connects to the AI Engine REST API and provides a visual interface for all QBITEL Bridge features.

Technology Stack

Technology Purpose
React 18 Component framework with concurrent features
TypeScript Type-safe development
Vite Build tool with HMR
Material UI Enterprise component library
OIDC Client SSO and enterprise authentication

Project Structure

ui/console/
  src/
    App.tsx                  # Main application component
    api/                     # API client layer
      devices.ts             # Device management API
    auth/                    # Authentication (OIDC)
      oidc.ts                # OIDC configuration
    components/              # React components
      EnhancedDashboard.tsx  # Main dashboard
      ProductionDashboard.tsx # Production monitoring
      SystemSettings.tsx     # System configuration
      marketplace/           # Protocol marketplace
      responsive/            # Responsive layout
    config/                  # Production configuration
    theme/                   # Enterprise theme
    types/                   # TypeScript type definitions
  pages/
    index.tsx                # Landing page
  vite.config.ts             # Vite build configuration

Key Features

Real-Time Dashboard

The production dashboard displays live metrics including:

  • Active protocol discoveries and classification rates
  • Threat detection alerts and severity distribution
  • System health: CPU, memory, network throughput
  • AI agent activity and decision audit trail

Protocol Marketplace

The marketplace enables organizations to share and discover protocol definitions:

  • Browse & Search -- find protocols by name, industry, or use case
  • Submit -- upload discovered protocols with metadata
  • My Protocols -- manage your published protocol definitions
  • Details View -- grammar rules, parsers, and validation results

Enterprise Authentication

The console supports enterprise SSO via OIDC:

  • OpenID Connect (OIDC) with PKCE flow
  • Role-based access control (RBAC)
  • Session management with token refresh
  • Support for Okta, Azure AD, and Keycloak

Responsive Design

The console adapts to desktop, tablet, and mobile form factors with a responsive layout component that handles sidebar navigation, content panels, and data tables.

Configuration

The console is configured through environment variables in .env:

VITE_API_BASE_URL=http://localhost:8000
VITE_OIDC_AUTHORITY=https://auth.example.com
VITE_OIDC_CLIENT_ID=qbitel-console
VITE_ENABLE_MARKETPLACE=true
VITE_ENABLE_MONITORING=true

Next Steps