milvus/internal/http/webui/index.html
jaime 1e8ea4a7e7
feat: add segment/channel/task/slow query render (#37561)
issue: #36621

Signed-off-by: jaime <yun.zhang@zilliz.com>
2024-11-12 17:44:29 +08:00

123 lines
4.1 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Milvus WebUI</title>
<meta name="description" content="Milvus Management WebUI">
<link href="./static/css/bootstrap.min.css" rel="stylesheet">
<link href="./static/css/style.css" rel="stylesheet">
<script src="./static/js/jquery.min.js"></script>
<script src="./static/js/bootstrap.min.js"></script>
<script src="./static/js/bootstrap.bundle.min.js"></script>
<script src="./static/js/render.js"></script>
<script src="./static/js/common.js"></script>
<script src="./static/js/mockdata.js"></script>
</head>
<body>
<div class="container-fluid">
<div id="header"></div>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
<h2>
System Information
</h2>
<table id="sysInfo" class="table table-hover"></table>
<h2>
Component Information
</h2>
<!-- Navigation Tabs -->
<ul class="nav nav-tabs" id="componentTabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="base-stats-tab" data-toggle="tab" href="#base-stats" role="tab" aria-controls="base-stats" aria-selected="true">Base Stats</a>
</li>
<li class="nav-item">
<a class="nav-link" id="runtime-metrics-tab" data-toggle="tab" href="#runtime-metrics" role="tab" aria-controls="runtime-metrics" aria-selected="false">Runtime Metrics</a>
</li>
<li class="nav-item">
<a class="nav-link" id="request-tab" data-toggle="tab" href="#request-metrics" role="tab" aria-controls="request-metrics" aria-selected="false">Requests</a>
</li>
</ul>
<!-- Tab Content -->
<div class="tab-content" id="componentTabsContent">
<!-- Components Table (Base Stats) -->
<div class="tab-pane fade show active" id="base-stats" role="tabpanel" aria-labelledby="base-stats-tab">
<table id="components" class="table table-hover mt-3"></table>
</div>
<!-- Node Metrics Table (Runtime Metrics) -->
<div class="tab-pane fade" id="runtime-metrics" role="tabpanel" aria-labelledby="runtime-metrics-tab">
<table id="nodeMetrics" class="table table-hover mt-3"></table>
</div>
<!-- Node Request Table -->
<div class="tab-pane fade" id="request-metrics" role="tabpanel" aria-labelledby="request-tab">
<table id="nodeRequests" class="table table-hover mt-3"></table>
</div>
</div>
<h2>
Connected Clients
</h2>
<table id="clients" class="table table-hover"></table>
<h2>
System Dependencies
</h2>
<table id="3rdDependency" class="table table-hover"></table>
</div>
<div class="col-md-2">
</div>
</div>
<div id="footer"></div>
</div>
<script>
$(document).ready(function(){
$('#header').load("header.html");
$('#footer').load("footer.html");
});
document.addEventListener("DOMContentLoaded", function() {
fetchData(MILVUS_URI + "/_cluster/info", sysmetrics)
.then(data => {
renderSysInfo(data);
renderComponentInfo(data);
renderNodesMetrics(data)
})
.catch(error => {
handleError(error);
});
// fetchData(MILVUS_URI + "/_node/requests", nodeRequests)
// .then(data => {
// renderNodeRequests(data)
// })
// .catch(error => {
// handleError(error);
// });
fetchData(MILVUS_URI + "/_cluster/clients", clientInfos)
.then(data => {
renderClientsInfo(data);
})
.catch(error => {
handleError(error);
});
fetchData(MILVUS_URI + "/_cluster/dependencies", dependencies)
.then(data => {
renderDependencies(data);
})
.catch(error => {
handleError(error);
});
});
</script>
</body>
</html>