milvus/internal/http/webui/segments.html
jaime 9d16b972ea
feat: add tasks page into management WebUI (#37002)
issue: #36621

1. Add API to access task runtime metrics, including:
  - build index task
  - compaction task
  - import task
- balance (including load/release of segments/channels and some leader
tasks on querycoord)
  - sync task
2. Add a debug model to the webpage by using debug=true or debug=false
in the URL query parameters to enable or disable debug mode.

Signed-off-by: jaime <yun.zhang@zilliz.com>
2024-10-28 10:13:29 +08:00

196 lines
6.2 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/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>
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>
<script>
$(document).ready(function(){
$('#header').load("header.html");
$('#footer').load("footer.html");
});
document.addEventListener("DOMContentLoaded", function() {
fetchData(MILVUS_URI + "/", sysmetrics)
.then(data => {
//TODO add segment render
})
.catch(error => {
handleError(new Error("Unimplemented API"));
});
});
</script>
</body>
</html>