mirror of
https://gitee.com/milvus-io/milvus.git
synced 2025-12-30 07:25:37 +08:00
4746f47282
issue: #36784 1. Implement an embedded web server for WebUI access. 2. Complete the homepage development. Home page demo: <img width="2177" alt="iShot_2024-10-10_17 57 34" src="https://github.com/user-attachments/assets/38539917-ce09-4e54-a5b5-7f4f7eaac353"> Signed-off-by: jaime <yun.zhang@zilliz.com>
197 lines
6.3 KiB
HTML
197 lines
6.3 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 - Segments</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/scripts.js"></script>
|
|
<script>
|
|
$(document).ready(function(){
|
|
$('#header').load("header.html");
|
|
$('#footer').load("footer.html");
|
|
});
|
|
|
|
// load cluster information data
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
fetch(MILVUS_URI + "/_cluster/info")
|
|
.then(response => response.json())
|
|
.then(text => {
|
|
data = JSON.parse(text)
|
|
// renderSysInfo(data)
|
|
// renderComponentInfo(data)
|
|
|
|
})
|
|
.catch(error => {
|
|
handleError(error);
|
|
});
|
|
});
|
|
</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>
|
|
Loading Segments
|
|
</h2>
|
|
<!-- TODO: -->
|
|
<table id="loadingSegments" class="table table-hover">
|
|
<thead class="thead-light">
|
|
<tr>
|
|
<th scope="col">segmentID</th>
|
|
<th scope="col">collectionName</th>
|
|
<th scope="col">isIndexed</th>
|
|
<th scope="col">segmentSize</th>
|
|
<th scope="col">queryNode</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>111</td>
|
|
<td>coll1</td>
|
|
<td>false</td>
|
|
<td>6</td>
|
|
<td>faked-querynode1</td>
|
|
</tr>
|
|
<tr>
|
|
<td>111</td>
|
|
<td>coll1</td>
|
|
<td>false</td>
|
|
<td>6</td>
|
|
<td>faked-querynode2</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
|
|
<h2>
|
|
Releasing Segments
|
|
</h2>
|
|
<!-- TODO: -->
|
|
<table id="releasingSegments" class="table table-hover">
|
|
<thead class="thead-light">
|
|
<tr>
|
|
<th scope="col">segmentID</th>
|
|
<th scope="col">collectionName</th>
|
|
<th scope="col">isIndexed</th>
|
|
<th scope="col">segmentSize</th>
|
|
<th scope="col">queryNode</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>111</td>
|
|
<td>coll1</td>
|
|
<td>false</td>
|
|
<td>6</td>
|
|
<td>faked-querynode1</td>
|
|
</tr>
|
|
<tr>
|
|
<td>111</td>
|
|
<td>coll1</td>
|
|
<td>false</td>
|
|
<td>6</td>
|
|
<td>faked-querynode2</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
|
|
<h2>
|
|
Loaded Segments
|
|
</h2>
|
|
<!-- TODO: -->
|
|
<table id="loadedSegments" class="table table-hover">
|
|
<thead class="thead-light">
|
|
<tr>
|
|
<th scope="col">segmentID</th>
|
|
<th scope="col">collectionName</th>
|
|
<th scope="col">isIndexed</th>
|
|
<th scope="col">segmentSize</th>
|
|
<th scope="col">queryNode</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>111</td>
|
|
<td>coll1</td>
|
|
<td>false</td>
|
|
<td>6</td>
|
|
<td>faked-querynode1</td>
|
|
</tr>
|
|
<tr>
|
|
<td>111</td>
|
|
<td>coll1</td>
|
|
<td>11</td>
|
|
<td>6</td>
|
|
<td>faked-querynode2</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
|
|
|
|
<h2>
|
|
All Segments
|
|
</h2>
|
|
<!-- TODO: data from data component -->
|
|
<table id="segments" class="table table-hover">
|
|
<thead class="thead-light">
|
|
<tr>
|
|
<th scope="col">segmentID</th>
|
|
<th scope="col">collectionName</th>
|
|
<th scope="col">state</th>
|
|
<th scope="col">rowCount</th>
|
|
<th scope="col">binlog count</th>
|
|
<th scope="col">binlogs size</th>
|
|
<th scope="col">statslogs size</th>
|
|
<th scope="col">dmlChannel</th>
|
|
<th scope="col">level</th>
|
|
<th scope="col">datanode</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>111</td>
|
|
<td>coll1</td>
|
|
<td>Flushing</td>
|
|
<td>11</td>
|
|
<td>11</td>
|
|
<td>11</td>
|
|
<td>11</td>
|
|
<td>faked-channel-1</td>
|
|
<td>L0</td>
|
|
<td>faked-datanode1</td>
|
|
</tr>
|
|
<tr>
|
|
<td>22222</td>
|
|
<td>coll1</td>
|
|
<td>Flushing</td>
|
|
<td>11</td>
|
|
<td>11</td>
|
|
<td>11</td>
|
|
<td>11</td>
|
|
<td>faked-channel-2</td>
|
|
<td>L0</td>
|
|
<td>faked-datanode2</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="col-md-2">
|
|
</div>
|
|
</div>
|
|
<div id="footer"></div>
|
|
</div>
|
|
</body>
|
|
</html> |