UI Features

This section details the user-facing modules of the LIKPI CMDB, covering workspaces, configuration interfaces, and administrative tools.

Core Workspaces & Dashboards

1. Graph Explorer

The primary interactive canvas for visualising infrastructure topology and relationships (powered by React Flow).

  • Visualise Topology: Drag, zoom, and pan the canvas for a bird’s-eye view of your architecture.
  • Quick Locate: Built-in search bar to find a specific CI and instantly snap/zoom the camera to it.
  • Algorithmic Layouts: Apply automatic directional arrangements (Top-to-Bottom, Bottom-to-Top, Left-to-Right, Right-to-Left) to untangle complex webs of CIs.
  • Lasso Multi-Select: Draw a boundary box to select, move, or hide multiple CIs simultaneously.
  • Dynamic Styling & Badges: Nodes dynamically render icons based on their class, and feature live status indicator badges (e.g., Red for DOWN, Orange for active Incidents). Edge lines change colour based on the relation type.
  • Contextual Actions: Right-click any node or edge to access a context menu for editing, deletion, or triggering deep analytics.

2. Data Explorer

The advanced tabular interface for bulk data management and granular searching.

  • Tabular View: Browse and sort CIs and Relations in a highly responsive, spreadsheet-like grid.
  • Advanced Query Builder: Create complex AND/OR nested conditions across any core field or custom JSON attribute.
  • Saved Filters: Save specific complex queries (e.g., “All Linux Servers in Production with Critical Vulnerabilities”) and load them with one click.
  • Dynamic Columns: Toggle visibility of columns on the fly, seamlessly blending standard database columns with dynamic schema-less JSON attributes.
  • Push to Graph: Select specific rows via checkboxes and push them straight to the Graph Explorer to instantly map their connections.

3. CI & Relation Editor

The unified inspection and modification panel for all configuration items and edges.

  • Tabbed Interface: Logically organises vast amounts of data into categories: Core Identity, Classification, Status & Health, Lifecycle, People & Support, Extended Details, and Custom Attributes.
  • Smart Validation Enforcement: Proactively fetches Identification Rules from the backend and blocks saving/promotion if mandatory identification keys (like unique_identifier) are missing.
  • Dynamic Input Rendering: Automatically renders the correct input types (Date pickers, Dropdowns, Number inputs, Boolean toggles) based on the specific Class’s custom attribute schema.
  • Unmapped Data Handling: Safely captures and displays “Unmapped JSON Attributes” (data sent via API that doesn’t yet have a strict schema definition).
  • Drafting & Locking: Enforces read-only views for unauthorised users, while editors can manipulate records safely in a draft state before promoting to production.

4. Dashboard Factory & Viewer

The no-code analytical engine for building and viewing operational intelligence.

  • Drag-and-Drop CSS Grid: Visually design dashboards by dragging, dropping, and resizing widgets on a flexible grid.
  • SQL-Driven Insights: Power widgets with raw PostgreSQL queries, utilising aliases (value, label) to easily map complex database joins to visual UI elements.
  • Rich Visualization Types: Supports multiple visual formats out of the box via Recharts: Single-value Scalars, Pie Charts, Bar Charts, Line/Curve Histograms, Radar Charts, and Tables.
  • Visual Theming: Configure primary colour themes, add value suffixes (e.g., MB, %, CIs), and rely on automatically generated smart legends and tooltips.

5. Ontology & Configuration Management

The administrative suite that allows you to configure the CMDB’s data model without writing any code.

  • Class Registry & Manager: Visually define new CI Classes, establish their hierarchical inheritance (all deriving from the BASE_ELEMENT mother class), and assign custom JSON attributes to them.
  • Dataset Manager: Create and govern isolated data environments (e.g., specific Discovery Sandboxes vs. the live Production dataset).
  • Identification Rules Manager: Define the unique keys (e.g., serial_number, unique_identifier) required to deduplicate CIs during the reconciliation process. This automatically binds to the View Configuration Item to enforce mandatory fields.
  • Relation Type Manager: Govern the valid types of connections between CIs (e.g., HostedService, SystemDevice) and attach custom attributes to the relationship edges.
  • Attribute Precedence Manager: Configure which datasets are trusted most during merges (e.g., prioritising an AWS Discovery dataset for IP addresses over manual entry).
  • Criteria Manager: Map your IT taxonomy, allowing the classification of CIs strictly by Category, Type, Item, and Model.
  • Lifecycle & Trigger Management: Configure automated state transitions (like auto-retiring stale CIs) and set up database-level event triggers for external webhooks.

6. Advanced Analytics & Intelligence

Modules dedicated to analysing topological risks and leveraging AI for operations.

  • Impact Analysis: Select a CI and visually calculate its “blast radius” to see exactly which downstream applications and business services will fail if that component goes down.
  • Dependency Mapping: Select a CI and trace upstream to find its root-cause dependencies (e.g., figuring out which database server an application relies on).
  • AIOps & Cognitive Engine (NL2SQL): An integrated AI Assistant window where users can type natural language questions (e.g., “Show me all Linux servers in Production that have open incidents”) and the AI will translate it into a complex PostgreSQL query, execute it, and return the data.
  • Prompt Configuration: Admins can tweak the underlying System Prompts used by the AI to align its behaviour with internal company standards.

7. Auditing, Governance & User Management

Modules ensuring the CMDB remains secure, compliant, and traceable.

  • User Management & RBAC: Create users and assign granular Role-Based Access Control (Admin, Editor, Viewer). The UI dynamically locks down “Edit Mode” and promotion capabilities based on these roles.
  • CI Audit Timeline: A visual, chronological history log attached to every single CI in the database. It tracks exactly who changed what attribute (e.g., IP address changed from X to Y), and when, ensuring total accountability for infrastructure drift.
  • Activity Manager: A real-time monitoring interface for background tasks. Allows admins to track the success, failure, and execution logs of asynchronous operations like Sandbox-to-Production merges.
  • Access Logs: A centralised security view tracking API access, login attempts, and system interactions for compliance reviews.

8. Admin Access Management & System Configuration

The System Configuration Manager is a centralised, restricted administrative dashboard designed to manage the core behaviour, security parameters, background processing, and directory synchronisation of the CMDB platform. The interface is divided into two primary sections: Core Config and LDAP Mappings.

8.1 Core Configuration (Global System Settings)

This tab provides granular control over the backend Vert.x engine and background reconciliation tasks. Changes made here apply globally and trigger a hot-reload of the relevant backend services.

8.1.1 LDAP / Active Directory Engine

Configures the connection to enterprise directory services for user authentication.

  • Enable LDAP Authentication: Global toggle to switch between internal database authentication and external LDAP authentication.
  • LDAP URL: The connection URI for the directory server (e.g., ldaps://your-dc.company.local:636).
  • Bind DN & Bind Password: The credentials of the service account used to query the directory.
  • User Base DN & Group Base DN: The root organisational units (OUs) where the system will search for users and security groups.

8.1.2 Security

Manages the platform’s API security and session lifecycle.

  • JWT Session Timeout (Minutes): Defines the strict duration before an active user’s session token expires, requiring re-authentication.
  • JWT Secret: The cryptographic key used by the backend to sign and verify authentication tokens.

8.1.3 Timers & Polling

Provides fine-grained control over the heartbeat and execution frequencies of the backend asynchronous tasks (measured in milliseconds).

  • Queue Polling: The interval at which the standard job queue is checked for new tasks.
  • Sandbox Polling: The interval for the staging fast-lane processor.
  • Scheduler Check: How often the cron-based scheduled activity engine evaluates pending routines.
  • Log Cleanup: The frequency of the routine that purges expired system logs.
  • Zombie Job Check: The interval for the watchdog to sweep for stuck or hung background processes.
  • Heartbeat Frequency: How often active cluster nodes announce their health to the HA registry.
  • WebSocket Ping: The keep-alive interval to maintain persistent real-time UI connections.

8.1.4 SMTP & Email Settings

Configures outbound email notifications for system alerts, password resets, and reports.

  • Enable Notifications: Global toggle to turn the mail engine on or off.
  • Connection Details: Configures the From Address, SMTP Host, and Port (e.g., 587).
  • Security & Authentication: Selectable TLS strategies (NONE, STARTTLS, SSL/TLS) and Auth methods (NONE, LOGIN, PLAIN), along with the designated Username and Password.

8.1.5 Data Processing & Merge Limits

Governs the memory footprints and chunking behaviour of the Activity & Reconciliation Engine to prevent Out-Of-Memory (OOM) crashes during massive integrations.

  • CI Batch Size: The maximum number of Configuration Items pulled into memory per merge cycle.
  • Relation Batch Size: The total number of edges/relationships processed per data wave.
  • Relation Chunk Size: The subset size defining how relations are chunked and parallelised during heavy processing.

8.1.6 UI Display Limits

Prevents browser memory exhaustion by limiting payload sizes to the frontend.

  • History Timeline Limit: The maximum number of audit logs the backend will fetch and render in the CiAuditTimeline view at one time.

8.1.7 Multi-Tenancy & Graph Traversal

  • Cache Refresh Interval (ms): Defines how long multi-tenant configuration data is cached in memory before forcing a database refresh (defaults to 10 minutes).
  • Max Graph Depth: A crucial circuit breaker that limits how many layers deep the recursive SQL queries will traverse when building topological maps or calculating Impact Analysis, preventing infinite loops.

8.1.8 System Maintenance Policies (Orphan, Aging, Audit, Access Logs)

  • Orphan Detection: Sets the Max Rows to Scan per sweep and allows admins to define Excluded Classes that should never be flagged as orphaned.
  • Aging Policy: Allows administrators to define Excluded Classes that are immune to automatic stale-data retirement.
  • Audit History: Features a global Enable Auditing toggle and an Excluded Classes tag input to prevent high-churn, low-value CIs from bloating the audit tables.
  • Access Logs: Sets the Retention Days, automatically purging historical login and API access records older than the specified threshold.
  • Job Scheduler: Configures the Stale Timeout (Minutes), marking hanging or locked background processes as failed if they exceed this limit.

8.2 Identity Synchronization (LDAP Mappings)

This tab translates external LDAP/Active Directory group memberships into internal CMDB Role-Based Access Control (RBAC) groups.

  • Mapping Grid: Displays a live, persistent table mapping the LDAP Group DN to the internal Target CMDB Group.
  • Create Mapping: Allows administrators to define a new synchronisation rule by inputting a valid LDAP DN (e.g., CN=AppAdmins,OU=Groups,DC=company,DC=com) and selecting an existing internal CMDB group from a dropdown list.
  • Just-in-Time Provisioning: Upon successful login, the CMDB will read the user’s LDAP group memberships, cross-reference this mapping table, and automatically provision the correct RBAC permissions (e.g., Admin, Editor, Viewer) dynamically.

8.3 Hybrid AI Architecture Configuration

The Hybrid AI Architecture Configuration module allows administrators to configure an agnostic, multi-provider AI pipeline that drives the Natural Language to SQL (NL2SQL) and data summarisation features. This interface ensures the CMDB is not locked into a single AI vendor and can mix local inference with cloud APIs.

8.3.1 Provider & Model Selection (Dual-Engine Pipeline)

The system divides AI workloads into two distinct categories to optimise for cost, speed, and reasoning capability.

  • Heavy Provider & Heavy Model: Dedicated to the highly complex task of interpreting the PostgreSQL schema and translating human questions into precise SQL queries.
    • Configuration: Administrators can assign powerful reasoning models (e.g., OpenAI gpt-4o, DeepSeek deepseek-coder, or local llama3) to this engine.
  • Fast Provider & Fast Model: Dedicated to consuming the resulting JSON data from the database and quickly summarising it into human-readable text.
    • Configuration: Administrators can assign fast, low-latency models (e.g., gpt-3.5-turbo, or local mistral) to process the final output without incurring high token costs.

8.3.2 Connection & Authentication

Allows the platform to bridge between internal, air-gapped AI deployments and external SaaS providers.

  • Ollama (Local/On-Premise): Fields for Ollama Host (e.g., localhost) and Port (e.g., 11434). The UI dynamically connects to the Ollama /api/tags endpoint to fetch and populate the dropdown with all installed local models.
  • External API (Cloud): Field for the External API Host (e.g., api.openai.com).
  • AI API Key: A secure, hidden input to store the Bearer token required for external API authentication.

8.3.3 System Prompt Engineering

Provides embedded code editors (powered by Monaco Editor) for administrators to define the underlying behaviour, rules, and schema context given to the AI.

  • SQL Generator Prompt (System Context): The critical prompt injected into the “Heavy” model. Administrators use this space to define the CMDB ontology, table structures (e.g., cmdb_base_element), JSONB attribute paths, and strict rules to prevent destructive operations (e.g., “Always use SELECT, never DROP”).
  • Summarizer Prompt: The template injected into the “Fast” model. It utilises dynamic payload variables ({QUESTION} and {JSON_DATA}) to instruct the AI on how to format the final textual response for the end-user.

8.3.4 Version Control & Rollback Management

Because tweaking AI prompts can cause unexpected behavioural degradation (hallucinations or invalid SQL syntax), the module features an immutable version history system.

  • Audit Trail: Every time a new configuration or prompt is published, the backend generates a new version number (e.g., v1, v2, v3), recording the timestamp and the administrator who made the change.
  • Version Viewer: Administrators can click on any historical version in the timeline to inspect the exact prompts and models that were used at that time.
  • Instant Rollback: If a newly published prompt breaks the AI Assistant, administrators can click “Restore” on a previous stable version. The system immediately reverts the active configuration to the selected historical state, ensuring zero downtime for end-users.

9. UI Configuration File (config.ts)

9.1 Overview

The config.ts file acts as the primary configuration gateway for the CMDB React Frontend. It dictates global display thresholds, AI settings, and visual semantics (icons and colours) for the Graph Explorer and Data Explorer.

To enable Zero-Rebuild Theming, this file implements a dynamic injection mechanism. It attempts to load configurations from the global window.APP_CONFIG object (which can be modified externally via public/config.js on the live server) and gracefully falls back to a hardcoded DEFAULT_CONFIG if the external file is missing.

9.2 Loading Mechanism

The core export logic ensures that runtime configuration is always prioritised over build-time configuration:

declare global {
  interface Window {
    APP_CONFIG: typeof DEFAULT_CONFIG;
  }
}

export const GRAPH_CONFIG = window.APP_CONFIG || DEFAULT_CONFIG;

9.3 Configuration Parameters

The configuration object is divided into four main sections: Global Limits, Visual Ontology Mapping, Status Indicators, and Status Colors.

9.3.1 Global Limits & Thresholds
  • maxVisibleCIs (Integer): The maximum number of Configuration Items (CIs) allowed on the Graph Explorer canvas before blocking further additions. Prevents browser memory exhaustion and UI lag. (Default: 300)
  • groupingThreshold (Integer): The threshold used by the layout engine to determine when densely packed adjacent nodes should be collapsed into a cluster/group. (Default: 2)
  • maxAiChatMessages (Integer): Limits the length of the conversational memory passed to the AIOps/NL2SQL engine to conserve tokens and reduce API costs. (Default: 5)
9.3.2 Visual Ontology Mapping

Maps the CMDB data dictionary (Classes and Relations) to visual assets on the frontend.

  • defaultIcon (String): The fallback Lucide-React icon applied to a CI if its class is not explicitly mapped. (Default: “Circle”)

  • classIcons (Record<string, string>): A key-value map linking CI Class Names to their corresponding Lucide icon names. Used instantly across both the Graph topology and Data Explorer tables.

    Example:

    classIcons: {
  "COMPUTERSYSTEM": "pc-case",
  "DATABASE": "database",
  "LAN": "network"
}

  • relationColors (Record<string, string>): A key-value map associating Relationship Class Names to HEX colour codes. This visually categorises graph edges (e.g., distinguishing infrastructure paths from dependency paths).

    Example:

    relationColors: {
  "BASE_RELATIONSHIP": "#3b82f6", // Blue
  "DEPENDENCY": "#ef4444"         // Red
}
9.3.3 Health & Status Indicators

Defines the interactive badges that float on the corners of CI nodes within the Graph Explorer.

  • statusIndicators (Object): Maps the physical corners of a node (topLeft, topRight, bottomLeft, bottomRight) to specific JSON attributes in the CI payload.

    • attribute: The exact JSON key to parse (e.g., vulnerability).
    • icon: The Lucide icon to display inside the badge.
    • label: The tooltip text shown on hover.

    Example:

    statusIndicators: {
  topRight: { attribute: 'incident_status', icon: 'AlertTriangle', label: 'Incident' }
}

  • statusColors (Record<string, Record<string, string>>): A deeply nested map that assigns semantic HEX colours to the values returned by the attributes monitored in statusIndicators. It supports a default fallback for unmapped values.

    Example:

    statusColors: {
  ci_status: {
    'UP': '#22c55e',          // Green
    'DOWN': '#ef4444',        // Red
    'MAINTENANCE': '#f97316', // Orange
    'RETIRED': '#94a3b8',     // Grey
    'default': '#22c55e'
  }
}

9.4 Extensibility

Because the file utilises Record<string, string> TypeScript definitions, administrators can safely inject new classes and custom status colours at runtime without altering the underlying React components. Any new CI Class created via the backend Class Manager can instantly be assigned an icon and colour by appending it to the external config.js payload.