History js
This commit is contained in:
aceberg
parent
0d10123d12
commit
b86ee2ba73
11 changed files with 145 additions and 125 deletions
|
|
@ -16,10 +16,10 @@ func Get(path string) (config models.Conf) {
|
|||
viper.SetDefault("COLOR", "dark")
|
||||
viper.SetDefault("NODEPATH", "")
|
||||
// viper.SetDefault("SCANER", "arpscan")
|
||||
viper.SetDefault("ARPARGS", "")
|
||||
viper.SetDefault("ARP_ARGS", "")
|
||||
viper.SetDefault("IFACES", "")
|
||||
viper.SetDefault("TIMEOUT", 60)
|
||||
viper.SetDefault("IGNOREIP", "no")
|
||||
viper.SetDefault("TRIM_HIST", 48)
|
||||
|
||||
viper.SetConfigFile(path)
|
||||
viper.SetConfigType("yaml")
|
||||
|
|
@ -34,10 +34,10 @@ func Get(path string) (config models.Conf) {
|
|||
config.Color = viper.Get("COLOR").(string)
|
||||
config.NodePath = viper.Get("NODEPATH").(string)
|
||||
// config.Scaner = viper.Get("SCANER").(string)
|
||||
config.ArpArgs = viper.Get("ARPARGS").(string)
|
||||
config.ArpArgs = viper.Get("ARP_ARGS").(string)
|
||||
config.Ifaces = viper.Get("IFACES").(string)
|
||||
config.Timeout = viper.GetInt("TIMEOUT")
|
||||
config.IgnoreIP = viper.Get("IGNOREIP").(string)
|
||||
config.TrimHist = viper.GetInt("TRIM_HIST")
|
||||
|
||||
return config
|
||||
}
|
||||
|
|
@ -54,10 +54,10 @@ func Write(config models.Conf) {
|
|||
viper.Set("COLOR", config.Color)
|
||||
viper.Set("NODEPATH", config.NodePath)
|
||||
// viper.Set("SCANER", config.Scaner)
|
||||
viper.Set("ARPARGS", config.ArpArgs)
|
||||
viper.Set("ARP_ARGS", config.ArpArgs)
|
||||
viper.Set("IFACES", config.Ifaces)
|
||||
viper.Set("TIMEOUT", config.Timeout)
|
||||
viper.Set("IGNOREIP", config.IgnoreIP)
|
||||
viper.Set("TRIM_HIST", config.TrimHist)
|
||||
|
||||
err := viper.WriteConfig()
|
||||
check.IfError(err)
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ type Conf struct {
|
|||
// Scaner string
|
||||
ArpArgs string
|
||||
Timeout int
|
||||
IgnoreIP string
|
||||
TrimHist int
|
||||
}
|
||||
|
||||
// Host - one host
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ package web
|
|||
import (
|
||||
"log/slog"
|
||||
"net/http"
|
||||
"strconv"
|
||||
|
||||
"github.com/gin-gonic/gin"
|
||||
|
||||
|
|
@ -34,10 +35,14 @@ func saveConfigHandler(c *gin.Context) {
|
|||
appConfig.Theme = c.PostForm("theme")
|
||||
appConfig.Color = c.PostForm("color")
|
||||
appConfig.NodePath = c.PostForm("node")
|
||||
appConfig.IgnoreIP = c.PostForm("ignore")
|
||||
appConfig.ArpArgs = c.PostForm("arpargs")
|
||||
appConfig.Ifaces = c.PostForm("ifaces")
|
||||
|
||||
timeout := c.PostForm("timeout")
|
||||
trimHist := c.PostForm("trim")
|
||||
appConfig.Timeout, _ = strconv.Atoi(timeout)
|
||||
appConfig.TrimHist, _ = strconv.Atoi(trimHist)
|
||||
|
||||
conf.Write(appConfig)
|
||||
|
||||
slog.Info("writing new config to " + appConfig.ConfPath)
|
||||
|
|
|
|||
20
internal/web/public/js/hist-html.js
Normal file
20
internal/web/public/js/hist-html.js
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
|
||||
function getHistHTML(hist) {
|
||||
|
||||
let html = '', col, title;
|
||||
|
||||
for (let h of hist) {
|
||||
if (h.Now != 0) {
|
||||
col = `fill:var(--bs-success);stroke:var(--bs-primary);`;
|
||||
} else {
|
||||
col = `fill:var(--bs-gray-500);stroke:var(--bs-primary);`;
|
||||
}
|
||||
title = `title="Date: ${h.Date}\nIface: ${h.Iface}\nIP: ${h.IP}\nKnown: ${h.Known}"`;
|
||||
|
||||
html = html + `<i ${title}><svg width="10" height="20">
|
||||
<rect width="10" height="20" style="${col}"/>
|
||||
Sorry, your browser does not support inline SVG.
|
||||
</svg></i>`;
|
||||
}
|
||||
return html;
|
||||
}
|
||||
|
|
@ -1,46 +1,60 @@
|
|||
var addrsArray = {};
|
||||
let show = 500;
|
||||
let addrsArray;
|
||||
|
||||
loadAddrs();
|
||||
|
||||
function createHTML(addr, i) {
|
||||
let now = '';
|
||||
|
||||
if (addr.Now == 0) {
|
||||
now = `<i class="bi bi-circle-fill" style="color:var(--bs-gray-500);"></i>`;
|
||||
} else {
|
||||
now = `<i class="bi bi-check-circle-fill" style="color:var(--bs-success);"></i>`;
|
||||
}
|
||||
|
||||
let html = `
|
||||
<tr>
|
||||
<td style="opacity: 45%;">${i}.</td>
|
||||
<td>${addr.Name}</td>
|
||||
<td>${addr.Iface}</td>
|
||||
<td>
|
||||
<a href="http://${addr.IP}">${addr.IP}</a>
|
||||
</td>
|
||||
<td>${addr.Mac}</td>
|
||||
<td>${addr.Hw}</td>
|
||||
<td>${addr.Date}</td>
|
||||
<td>${addr.Known}</td>
|
||||
<td>${now}</td>
|
||||
</tr>
|
||||
`;
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
async function loadAddrs() {
|
||||
|
||||
let url = '/api/history';
|
||||
let addrsMap = await (await fetch(url)).json();
|
||||
if (addrsMap != null) {
|
||||
addrsArray = Object.values(addrsMap);
|
||||
const n = localStorage.getItem("histShow");
|
||||
if (n != null) {
|
||||
show = n;
|
||||
}
|
||||
|
||||
displayArrayData(addrsArray);
|
||||
const url = '/api/all';
|
||||
addrsArray = await (await fetch(url)).json();
|
||||
|
||||
loadHistory();
|
||||
}
|
||||
|
||||
function sortBy(field) {
|
||||
sortByAny(addrsArray, field);
|
||||
async function loadHistory() {
|
||||
|
||||
let tr, td, url, hist;
|
||||
let i = 0;
|
||||
|
||||
document.getElementById('showHist').innerHTML = '';
|
||||
|
||||
for (let a of addrsArray) {
|
||||
url = '/api/history/'+a.Mac;
|
||||
hist = await (await fetch(url)).json();
|
||||
if (show > 0) {
|
||||
hist = hist.slice(0, show);
|
||||
}
|
||||
|
||||
td = getHistHTML(hist); // hist-html.js
|
||||
i = i + 1;
|
||||
|
||||
tr = `
|
||||
<tr>
|
||||
<td style="opacity: 45%;">${i}.</td>
|
||||
<td>
|
||||
<p>${a.Name}</p>
|
||||
<p><a href="http://${a.IP}" target="blank">${a.IP}</a></p>
|
||||
<p><a href="/host/${a.ID}">${a.Mac}</a></p>
|
||||
</td>
|
||||
<td>${td}</td>
|
||||
</tr>`;
|
||||
|
||||
document.getElementById('showHist').insertAdjacentHTML('beforeend', tr);
|
||||
}
|
||||
}
|
||||
|
||||
function showHist(n) {
|
||||
show = n;
|
||||
localStorage.setItem("histShow", show);
|
||||
loadHistory();
|
||||
}
|
||||
|
||||
function manualShow() {
|
||||
const n = document.getElementById('man-show').value;
|
||||
showHist(n);
|
||||
}
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
let show = 500;
|
||||
let mac;
|
||||
|
||||
async function delHost(id) {
|
||||
|
||||
|
|
@ -8,11 +10,20 @@ async function delHost(id) {
|
|||
window.location.href = '/';
|
||||
}
|
||||
|
||||
async function loadHistory(mac) {
|
||||
async function loadHistory(m) {
|
||||
|
||||
const n = localStorage.getItem("hostShow");
|
||||
if (n != null) {
|
||||
show = n;
|
||||
}
|
||||
|
||||
mac = m;
|
||||
const url = '/api/history/'+mac;
|
||||
|
||||
let hist = await (await fetch(url)).json();
|
||||
if (show > 0) {
|
||||
hist = hist.slice(0, show);
|
||||
}
|
||||
|
||||
// console.log("HIST", hist);
|
||||
displayHistory(hist);
|
||||
|
|
@ -20,22 +31,16 @@ async function loadHistory(mac) {
|
|||
|
||||
function displayHistory(hist) {
|
||||
|
||||
let html, col, title;
|
||||
document.getElementById('showHist').innerHTML = getHistHTML(hist); // hist-html.js
|
||||
}
|
||||
|
||||
for (let h of hist) {
|
||||
if (h.Now != 0) {
|
||||
col = `fill:var(--bs-success);stroke:var(--bs-primary);`;
|
||||
} else {
|
||||
col = `fill:var(--bs-gray-500);stroke:var(--bs-primary);`;
|
||||
}
|
||||
title = `title="Date: ${h.Date}\nIface: ${h.Iface}\nIP: ${h.IP}\nKnown: ${h.Known}"`;
|
||||
function showHist(n) {
|
||||
show = n;
|
||||
localStorage.setItem("hostShow", show);
|
||||
loadHistory(mac);
|
||||
}
|
||||
|
||||
html = `<i ${title}><svg width="10" height="20">
|
||||
<rect width="10" height="20" style="${col}"/>
|
||||
Sorry, your browser does not support inline SVG.
|
||||
</svg></i>`;
|
||||
|
||||
// html = `<i class="bi bi-file-fill" style="${col}" ${title}></i>`;
|
||||
document.getElementById('showHist').insertAdjacentHTML('beforeend', html);
|
||||
}
|
||||
function manualShow() {
|
||||
const n = document.getElementById('man-show').value;
|
||||
showHist(n);
|
||||
}
|
||||
|
|
@ -26,7 +26,7 @@ function createHTML(addr, i) {
|
|||
<td>${name}</td>
|
||||
<td>${addr.Iface}</td>
|
||||
<td>
|
||||
<a href="http://${addr.IP}">${addr.IP}</a>
|
||||
<a href="http://${addr.IP}" target="blank">${addr.IP}</a>
|
||||
</td>
|
||||
<td><a href="/host/${addr.ID}">${addr.Mac}</a></td>
|
||||
<td>${addr.Hw}</td>
|
||||
|
|
|
|||
|
|
@ -1,45 +0,0 @@
|
|||
var histArray = {};
|
||||
|
||||
loadHistory();
|
||||
|
||||
function createHTML(hist, i) {
|
||||
|
||||
let allState = "";
|
||||
let color = "";
|
||||
|
||||
for (let state of hist.State){
|
||||
if (state.State) {
|
||||
color = `bi-check-circle-fill" style="color:var(--bs-success);"`;
|
||||
} else {
|
||||
color = `bi-dash-circle-fill" style="color:var(--bs-danger);"`;
|
||||
}
|
||||
allState = allState + `<i class="bi ${color} title="${state.Date}"></i>`;
|
||||
}
|
||||
|
||||
let html = `
|
||||
<tr>
|
||||
<td style="opacity: 45%;">${i}.</td>
|
||||
<td><a href="/scan/?addr=${hist.Addr}">${hist.Name}</a></td>
|
||||
<td><a href="/scan/?addr=${hist.Addr}">${hist.Addr}</a></td>
|
||||
<td><a href="http://${hist.Addr}:${hist.Port}">${hist.Port}</a></td>
|
||||
<td><a href="http://${hist.Addr}:${hist.Port}">${hist.PortName}</a></td>
|
||||
<td>${allState}</td>
|
||||
</tr>`;
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
async function loadHistory() {
|
||||
|
||||
let url = '/api/history';
|
||||
let histMap = await (await fetch(url)).json();
|
||||
if (histMap != null) {
|
||||
histArray = Object.values(histMap);
|
||||
}
|
||||
|
||||
displayArrayData(histArray);
|
||||
}
|
||||
|
||||
function sortBy(field) {
|
||||
sortByAny(histArray, field);
|
||||
}
|
||||
|
|
@ -43,17 +43,17 @@
|
|||
<td><input name="ifaces" type="text" class="form-control" value="{{ .Config.Ifaces }}"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ignore IP</td>
|
||||
<td><select name="ignore" class="form-select">
|
||||
<option selected>{{ .Config.IgnoreIP }}</option>
|
||||
<option value="yes">yes</option>
|
||||
<option value="no">no</option>
|
||||
</select></td>
|
||||
<td>Timeout</td>
|
||||
<td><input name="timeout" type="number" class="form-control" value="{{ .Config.Timeout }}"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Args for arpscan</td>
|
||||
<td><input name="arpargs" type="text" class="form-control" value="{{ .Config.ArpArgs }}"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Trim History (hours)</td>
|
||||
<td><input name="trim" type="number" class="form-control" value="{{ .Config.TrimHist }}"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><button type="submit" class="btn btn-primary">Save</button></td>
|
||||
<td></td>
|
||||
|
|
|
|||
|
|
@ -1,27 +1,35 @@
|
|||
{{ define "history.html" }}
|
||||
</head>
|
||||
<script src="/fs/public/js/history.js"></script>
|
||||
<script src="/fs/public/js/sort.js"></script>
|
||||
<script src="/fs/public/js/hist-html.js"></script>
|
||||
|
||||
<body>
|
||||
<div class="container-lg">
|
||||
<div class="row">
|
||||
<div class="col-md mt-4 mb-4">
|
||||
<div class="card border-primary">
|
||||
<div class="card-header">
|
||||
<div class="input-group">
|
||||
<button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Show</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" onclick="showHist(500)">500</a></li>
|
||||
<li><a class="dropdown-item" onclick="showHist(1000)">1000</a></li>
|
||||
<li><a class="dropdown-item" onclick="showHist(2000)">2000</a></li>
|
||||
<li><a class="dropdown-item" onclick="showHist(5000)">5000</a></li>
|
||||
<li><a class="dropdown-item" onclick="showHist(0)">All</a></li>
|
||||
</ul>
|
||||
<input class="form-control" id="man-show" onchange="manualShow()" placeholder="Show elements" style="max-width: 10em;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body table-responsive">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<th style="width: 3em;"></th>
|
||||
<th>Name <i class="bi bi-sort-down-alt my-btn" onclick="sortBy('Name')"></i></th>
|
||||
<th>Iface <i class="bi bi-sort-down-alt my-btn" onclick="sortBy('Iface')"></i></th>
|
||||
<th>IP <i class="bi bi-sort-down-alt my-btn" onclick="sortBy('IP')"></i></th>
|
||||
<th>MAC <i class="bi bi-sort-down-alt my-btn" onclick="sortBy('Mac')"></i></th>
|
||||
<th>Hardware <i class="bi bi-sort-down-alt my-btn" onclick="sortBy('Hw')"></i></th>
|
||||
<th>Date <i class="bi bi-sort-down-alt my-btn" onclick="sortBy('Date')"></i></th>
|
||||
<th>Known <i class="bi bi-sort-down-alt my-btn" onclick="sortBy('Known')"></i></th>
|
||||
<th>Online <i class="bi bi-sort-down-alt my-btn" onclick="sortBy('Now')"></i></th>
|
||||
<th>Host</th>
|
||||
<th>History</th>
|
||||
</thead>
|
||||
<tbody id="tBody"></tbody>
|
||||
<!-- index.js -->
|
||||
<tbody id="showHist"></tbody>
|
||||
<!-- history.js -->
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
|
||||
<script src="/fs/public/js/host-scan.js"></script>
|
||||
<script src="/fs/public/js/host.js"></script>
|
||||
<script src="/fs/public/js/hist-html.js"></script>
|
||||
<body>
|
||||
<div class="container-lg">
|
||||
<div class="row">
|
||||
|
|
@ -91,7 +92,19 @@
|
|||
<div class="row">
|
||||
<div class="col-md mb-4">
|
||||
<div class="card border-primary">
|
||||
<div class="card-header">History</div>
|
||||
<div class="card-header">
|
||||
<div class="input-group">
|
||||
<button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Show</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" onclick="showHist(500)">500</a></li>
|
||||
<li><a class="dropdown-item" onclick="showHist(1000)">1000</a></li>
|
||||
<li><a class="dropdown-item" onclick="showHist(2000)">2000</a></li>
|
||||
<li><a class="dropdown-item" onclick="showHist(5000)">5000</a></li>
|
||||
<li><a class="dropdown-item" onclick="showHist(0)">All</a></li>
|
||||
</ul>
|
||||
<input class="form-control" id="man-show" onchange="manualShow()" placeholder="Show elements" style="max-width: 10em;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="showHist"></div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue