Implementation:LMCache LMCache Controller App JS

Knowledge Sources	LMCache
Domains	Web Frontend, Monitoring Dashboard
Last Updated	2026-02-09 00:00 GMT

Overview

controller_app.js is the JavaScript frontend application that powers the LMCache Controller web dashboard for monitoring and managing cache instances and workers.

Description

This JavaScript module implements a single-page dashboard for the LMCache Controller. It provides functionality for connecting to a controller backend via HTTP, browsing instances and workers, viewing key statistics, loading Prometheus-style metrics, inspecting running threads, and examining environment variables. The application uses Bootstrap for UI components and communicates with controller REST endpoints using the Fetch API. It supports auto-connection via URL query parameters and provides real-time status indicators based on worker heartbeat timestamps.

Usage

This file is served as a static asset by the cache controller's built-in web server. It is loaded by the controller's HTML frontend page and is not imported programmatically. Access the dashboard by navigating to the controller's HTTP address in a web browser.

Code Reference

Source Location

Repository: LMCache
File: lmcache/v1/cache_controller/frontend/static/js/controller_app.js
Lines: 1-660

Signature

// Global state
let controllerBaseUrl = "";
let isConnected = false;
let currentInstances = [];
let currentWorkers = [];
let currentKeyPool = [];
let envVariablesData = null;

// Core functions
function updateCurrentTime() { ... }
async function connectToController() { ... }
async function refreshAllData() { ... }
function loadTabData(tabId) { ... }
async function loadOverview() { ... }
async function loadInstances() { ... }
async function addInstance() { ... }
async function removeInstance(instanceId) { ... }
async function loadWorkers() { ... }
async function removeKey(key) { ... }
async function loadMetrics() { ... }
async function loadEnvironment() { ... }
function filterEnvVariables() { ... }
async function loadThreads() { ... }

Import

<!-- Loaded via HTML script tag in the controller frontend -->
<script src="/static/js/controller_app.js"></script>

I/O Contract

Inputs

Name	Type	Required	Description
host	string (URL param or input)	Yes	The hostname of the LMCache controller
port	string (URL param or input)	Yes	The port of the LMCache controller

Outputs

Name	Type	Description
Dashboard UI	HTML DOM	Rendered tables, status badges, and statistics panels for instances, workers, metrics, threads, and environment

Usage Examples

// The dashboard auto-connects on page load using the current host/port
// or URL parameters:
// http://controller-host:8080/?host=controller-host&port=8080

// Programmatic connection (from browser console):
document.getElementById('controllerHostInput').value = 'localhost';
document.getElementById('controllerPortInput').value = '8080';
connectToController();

// Refresh all data on the active tab:
refreshAllData();

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment