mirror of
https://github.com/lucheng0127/virtuallan.git
synced 2025-09-26 20:51:11 +08:00
Add endpoint monitor index page
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
port: 6123
|
||||
ip: 192.168.123.254/24
|
||||
bridge: br0
|
||||
log-level: debug
|
||||
log-level: info
|
||||
web:
|
||||
enable: true
|
||||
port: 8000
|
@@ -45,8 +45,12 @@ func (svc *webServe) Serve() {
|
||||
gin.DefaultWriter = io.Discard
|
||||
|
||||
router := gin.Default()
|
||||
router.LoadHTMLFiles("./static/index.html")
|
||||
|
||||
router.GET("/endpoints", listEpEntries)
|
||||
router.GET("/", func(c *gin.Context) {
|
||||
c.HTML(http.StatusOK, "index.html", nil)
|
||||
})
|
||||
|
||||
router.Run(fmt.Sprintf(":%d", svc.port))
|
||||
}
|
||||
|
80
static/index.html
Normal file
80
static/index.html
Normal file
@@ -0,0 +1,80 @@
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
table, th, td {
|
||||
border: 1px solid black;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
td, th {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body onload="convert();">
|
||||
<h3> VirtualLan Endpoints: </h3>
|
||||
<div id="container"></div>
|
||||
<script>
|
||||
|
||||
setInterval(convert, 5000)
|
||||
|
||||
// Function to convert JSON data to HTML table
|
||||
function convert() {
|
||||
|
||||
// Sample JSON data
|
||||
let jsonData = []
|
||||
fetch("/endpoints")
|
||||
.then(res => res.json())
|
||||
.then(out =>
|
||||
{
|
||||
jsonData = out
|
||||
|
||||
// Get the container element where the table will be inserted
|
||||
let container = document.getElementById("container");
|
||||
|
||||
// Create the table element
|
||||
if (document.contains(document.getElementById("table"))) {
|
||||
document.getElementById("table").remove();
|
||||
}
|
||||
let table = document.createElement("table");
|
||||
table.setAttribute("id", "table")
|
||||
|
||||
// Get the keys (column names) of the first object in the JSON data
|
||||
if (jsonData) {
|
||||
let cols = Object.keys(jsonData[0]);
|
||||
|
||||
// Create the header element
|
||||
let thead = document.createElement("thead");
|
||||
let tr = document.createElement("tr");
|
||||
|
||||
// Loop through the column names and create header cells
|
||||
cols.forEach((item) => {
|
||||
let th = document.createElement("th");
|
||||
th.innerText = item; // Set the column name as the text of the header cell
|
||||
tr.appendChild(th); // Append the header cell to the header row
|
||||
});
|
||||
thead.appendChild(tr); // Append the header row to the header
|
||||
table.append(tr) // Append the header to the table
|
||||
|
||||
// Loop through the JSON data and create table rows
|
||||
jsonData.forEach((item) => {
|
||||
let tr = document.createElement("tr");
|
||||
|
||||
// Get the values of the current object in the JSON data
|
||||
let vals = Object.values(item);
|
||||
|
||||
// Loop through the values and create table cells
|
||||
vals.forEach((elem) => {
|
||||
let td = document.createElement("td");
|
||||
td.innerText = elem; // Set the value as the text of the table cell
|
||||
tr.appendChild(td); // Append the table cell to the table row
|
||||
});
|
||||
table.appendChild(tr); // Append the table row to the table
|
||||
});
|
||||
container.appendChild(table) // Append the table to the container element
|
||||
}
|
||||
})
|
||||
.catch(err => { throw err });
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
Reference in New Issue
Block a user