milvus/internal/http/webui/tasks.html
jaime 4746f47282
feat: management WebUI homepage (#36822)
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>
2024-10-23 11:29:28 +08:00

171 lines
4.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 - Tasks</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 + "")
.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>
QueryCoord Tasks
</h2>
<table id="channelCP" class="table table-hover">
<thead class="thead-light">
<tr>
<th scope="col">Task ID</th>
<th scope="col">Source</th>
<th scope="col">Actions</th>
<th scope="col">Type</th>
<th scope="col">State</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>indexChecker</td>
<td>querynode1</td>
<td>querynode2</td>
<td>queued</td>
</tr>
<tr>
<td>2</td>
<td>loadChannel</td>
<td>querynode1</td>
<td>querynode2</td>
<td>queued</td>
</tr>
</tbody>
</table>
<h2>
Compaction Tasks
</h2>
<table id="compactionTasks" class="table table-hover">
<thead class="thead-light">
<tr>
<th scope="col">Task ID</th>
<th scope="col">Plan</th>
<th scope="col">State</th>
<th scope="col">Datanode</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>fake-plan</td>
<td>running</td>
<td>datanode1</td>
</tr>
<tr>
<td>2</td>
<td>fake-plan</td>
<td>running</td>
<td>datanode2</td>
</tr>
</tbody>
</table>
<h2>
Flush Tasks
</h2>
<table id="flushTasks" class="table table-hover">
<thead class="thead-light">
<tr>
<th scope="col">Task ID</th>
<th scope="col">Segment ID</th>
<th scope="col">Insertion Size(MB)</th>
<th scope="col">Deletion Size(MB)</th>
<th scope="col">State</th>
<th scope="col">Datanode</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1111</td>
<td>10</td>
<td>5</td>
<td>running</td>
<td>datanode1</td>
</tr>
<tr>
<td>2</td>
<td>2222</td>
<td>5</td>
<td>5</td>
<td>running</td>
<td>datanode2</td>
</tr>
</tbody>
</table>
<h2>
Index Build Tasks
</h2>
<table id="indexBuildTasks" class="table table-hover">
<thead class="thead-light">
<tr>
<th scope="col">Task ID</th>
<th scope="col">Plan</th>
<th scope="col">State</th>
<th scope="col">Indexnode</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>fake-plan</td>
<td>running</td>
<td>datanode1</td>
</tr>
<tr>
<td>2</td>
<td>fake-plan</td>
<td>running</td>
<td>datanode2</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-2">
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>