mirror of
https://github.com/taigrr/log-socket
synced 2025-01-18 04:53:14 -08:00
breaks browser out into package
This commit is contained in:
parent
2e01f23b30
commit
1ea76f4ab1
GPG Key ID:
D00C269A87614812
199
browser/main.go
Normal file
199
browser/main.go
Normal file
@ -0,0 +1,199 @@
|
||||
package browser
|
||||
|
||||
import (
|
||||
"html/template"
|
||||
"net/http"
|
||||
)
|
||||
|
||||
func LogSocketViewHandler(w http.ResponseWriter, r *http.Request) {
|
||||
homeTemplate.Execute(w, "ws://"+r.Host+"/logs")
|
||||
}
|
||||
|
||||
var homeTemplate = template.Must(template.New("").Parse(`
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<center>
|
||||
<input type="text" id="search" onkeyup="filterTable()" placeholder="Filter...">
|
||||
<table id="logHeaders" style="text-align:left; width:80%;" >
|
||||
<tbody>
|
||||
<tr class="header">
|
||||
<th style="width:20%;">TimeStamp</th>
|
||||
<th style="width:5%;">Level</th>
|
||||
<th style="width:65%;">Output</th>
|
||||
<th style="width:10%;">Source</th>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div id="tableWrapper">
|
||||
<table id="logs" style="text-align:left; width:100%;" >
|
||||
<tbody id="tbodylogs">
|
||||
<tr class="header">
|
||||
<th style="width:20%;"></th>
|
||||
<th style="width:5%;"></th>
|
||||
<th style="width:65%;"></th>
|
||||
<th style="width:10%;"></th>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<br>
|
||||
<input class="button" type="button" id="download" value="Download Logs" style="background-color:#3f51b5;"/>
|
||||
<input class="button" type="button" id="delete" value="Delete Logs" style="background-color:#f44336"/>
|
||||
</center>
|
||||
</body>
|
||||
<footer>
|
||||
<style>
|
||||
#tableWrapper{
|
||||
overflow-y: scroll;
|
||||
display: flow-root;
|
||||
width: 80%;
|
||||
height: 80vh;
|
||||
}
|
||||
td,tr{
|
||||
height: min-content;
|
||||
}
|
||||
.button{
|
||||
display: inline-block;
|
||||
width: 5vw;
|
||||
height: 5vh;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
var logTable = document.getElementById("logs");
|
||||
var logTableB = document.getElementById("tbodylogs");
|
||||
var ws = null;
|
||||
var application = "demo-commit"
|
||||
var logs = [];
|
||||
function sleep(ms) {
|
||||
return new Promise(resolve => setTimeout(resolve, ms));
|
||||
}
|
||||
function download(filename, text) {
|
||||
var element = document.createElement('a');
|
||||
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
|
||||
element.setAttribute('download', filename);
|
||||
element.style.display = 'none';
|
||||
document.body.appendChild(element);
|
||||
element.click();
|
||||
document.body.removeChild(element);
|
||||
}
|
||||
function openSocket() {
|
||||
if (ws) {
|
||||
return false;
|
||||
}
|
||||
ws = new WebSocket("{{.}}");
|
||||
ws.onclose = async function(evt) {
|
||||
ws = null;
|
||||
while(ws == null){
|
||||
openSocket()
|
||||
await sleep(5000);
|
||||
}
|
||||
}
|
||||
ws.onmessage = function(evt) {
|
||||
var entry = JSON.parse(evt.data)
|
||||
logs.push(entry)
|
||||
var row = document.createElement('tr');
|
||||
var ts = document.createElement('td');
|
||||
var tst = document.createTextNode(entry.timestamp);
|
||||
ts.appendChild(tst);
|
||||
row.appendChild(ts);
|
||||
var ts = document.createElement('td');
|
||||
var tst = document.createTextNode(entry.level);
|
||||
ts.appendChild(tst);
|
||||
row.appendChild(ts);
|
||||
var ts = document.createElement('td');
|
||||
var tst = document.createTextNode(entry.output);
|
||||
ts.appendChild(tst);
|
||||
row.appendChild(ts);
|
||||
var ts = document.createElement('td');
|
||||
var tst = document.createTextNode(entry.file);
|
||||
ts.appendChild(tst);
|
||||
row.appendChild(ts);
|
||||
var bg="";
|
||||
switch(entry.level){
|
||||
case "INFO":
|
||||
bg="white";
|
||||
break;
|
||||
case "ERROR":
|
||||
bg="#f44336";
|
||||
break;
|
||||
case "WARN":
|
||||
bg="#fb8c00"
|
||||
break;
|
||||
case "TRACE":
|
||||
bg="#E1F5FE"
|
||||
break;
|
||||
case "DEBUG":
|
||||
bg="#B3E5FC"
|
||||
break;
|
||||
default:
|
||||
bg="white"
|
||||
break;
|
||||
}
|
||||
row.style.backgroundColor=bg
|
||||
logTableB.append(row)
|
||||
filterTable()
|
||||
}
|
||||
ws.onerror = function(evt) {
|
||||
if (evt != null && evt.data != null){
|
||||
// handle error here
|
||||
}
|
||||
}
|
||||
}
|
||||
function clearTable(){
|
||||
if(!window.confirm("Are you sure you want to delete all logs?")){
|
||||
return
|
||||
}
|
||||
logs = []
|
||||
|
||||
while (logTableB.childNodes.length > 1) {
|
||||
logTableB.removeChild(logTableB.childNodes[1]);
|
||||
}
|
||||
}
|
||||
function filterTable() {
|
||||
var cols, input, filter, table, tr, td, i, txtValue, w;
|
||||
input = document.getElementById("search");
|
||||
filter = input.value;
|
||||
table = logTableB;
|
||||
tr = table.getElementsByTagName("tr");
|
||||
for (i = 1; i < tr.length; i++) {
|
||||
cols = tr[i].getElementsByTagName("td");
|
||||
var visible = false;
|
||||
for (w = 0; w < cols.length; w++){
|
||||
if (!visible && cols[w]) {
|
||||
td = cols[w]
|
||||
txtValue = td.textContent || td.innerText;
|
||||
if (txtValue.indexOf(filter) > -1) {
|
||||
visible = true
|
||||
}
|
||||
}
|
||||
}
|
||||
if(visible){
|
||||
|
||||
tr[i].style.display = "";
|
||||
} else {
|
||||
|
||||
tr[i].style.display = "none";
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
document.getElementById("delete").addEventListener("click", function(){
|
||||
|
||||
clearTable()
|
||||
}, false);
|
||||
document.getElementById("download").addEventListener("click", function(){
|
||||
|
||||
download(application+'.json',JSON.stringify(logs));
|
||||
}, false);
|
||||
openSocket();
|
||||
</script>
|
||||
|
||||
</footer>
|
||||
</html>
|
||||
`))
|
||||
200
main.go
200
main.go
@ -2,21 +2,16 @@ package main
|
||||
|
||||
import (
|
||||
"flag"
|
||||
"html/template"
|
||||
"log"
|
||||
"net/http"
|
||||
"time"
|
||||
|
||||
"github.com/taigrr/log-socket/browser"
|
||||
"github.com/taigrr/log-socket/logger"
|
||||
"github.com/taigrr/log-socket/ws"
|
||||
)
|
||||
|
||||
var addr = flag.String("addr", "0.0.0.0:8080", "http service address")
|
||||
|
||||
func home(w http.ResponseWriter, r *http.Request) {
|
||||
homeTemplate.Execute(w, "ws://"+r.Host+"/logs")
|
||||
}
|
||||
|
||||
func generateLogs() {
|
||||
for {
|
||||
logger.Info("This is an info log!")
|
||||
@ -32,196 +27,7 @@ func main() {
|
||||
defer logger.Flush()
|
||||
flag.Parse()
|
||||
http.HandleFunc("/logs", ws.LogSocketHandler)
|
||||
http.HandleFunc("/", home)
|
||||
http.HandleFunc("/", browser.LogSocketViewHandler)
|
||||
go generateLogs()
|
||||
log.Fatal(http.ListenAndServe(*addr, nil))
|
||||
logger.Fatal(http.ListenAndServe(*addr, nil))
|
||||
}
|
||||
|
||||
var homeTemplate = template.Must(template.New("").Parse(`
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<center>
|
||||
<input type="text" id="search" onkeyup="filterTable()" placeholder="Filter...">
|
||||
<table id="logHeaders" style="text-align:left; width:80%;" >
|
||||
<tbody>
|
||||
<tr class="header">
|
||||
<th style="width:20%;">TimeStamp</th>
|
||||
<th style="width:5%;">Level</th>
|
||||
<th style="width:65%;">Output</th>
|
||||
<th style="width:10%;">Source</th>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div id="tableWrapper">
|
||||
<table id="logs" style="text-align:left; width:100%;" >
|
||||
<tbody id="tbodylogs">
|
||||
<tr class="header">
|
||||
<th style="width:20%;"></th>
|
||||
<th style="width:5%;"></th>
|
||||
<th style="width:65%;"></th>
|
||||
<th style="width:10%;"></th>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<br>
|
||||
<input class="button" type="button" id="download" value="Download Logs" style="background-color:#3f51b5;"/>
|
||||
<input class="button" type="button" id="delete" value="Delete Logs" style="background-color:#f44336"/>
|
||||
</center>
|
||||
</body>
|
||||
<footer>
|
||||
<style>
|
||||
#tableWrapper{
|
||||
overflow-y: scroll;
|
||||
display: flow-root;
|
||||
width: 80%;
|
||||
height: 80vh;
|
||||
}
|
||||
td,tr{
|
||||
height: min-content;
|
||||
}
|
||||
.button{
|
||||
display: inline-block;
|
||||
width: 5vw;
|
||||
height: 5vh;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
var logTable = document.getElementById("logs");
|
||||
var logTableB = document.getElementById("tbodylogs");
|
||||
var ws = null;
|
||||
var application = "demo-commit"
|
||||
var logs = [];
|
||||
function sleep(ms) {
|
||||
return new Promise(resolve => setTimeout(resolve, ms));
|
||||
}
|
||||
function download(filename, text) {
|
||||
var element = document.createElement('a');
|
||||
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
|
||||
element.setAttribute('download', filename);
|
||||
element.style.display = 'none';
|
||||
document.body.appendChild(element);
|
||||
element.click();
|
||||
document.body.removeChild(element);
|
||||
}
|
||||
function openSocket() {
|
||||
if (ws) {
|
||||
return false;
|
||||
}
|
||||
ws = new WebSocket("{{.}}");
|
||||
ws.onclose = async function(evt) {
|
||||
ws = null;
|
||||
while(ws == null){
|
||||
openSocket()
|
||||
await sleep(5000);
|
||||
}
|
||||
}
|
||||
ws.onmessage = function(evt) {
|
||||
var entry = JSON.parse(evt.data)
|
||||
logs.push(entry)
|
||||
var row = document.createElement('tr');
|
||||
var ts = document.createElement('td');
|
||||
var tst = document.createTextNode(entry.timestamp);
|
||||
ts.appendChild(tst);
|
||||
row.appendChild(ts);
|
||||
var ts = document.createElement('td');
|
||||
var tst = document.createTextNode(entry.level);
|
||||
ts.appendChild(tst);
|
||||
row.appendChild(ts);
|
||||
var ts = document.createElement('td');
|
||||
var tst = document.createTextNode(entry.output);
|
||||
ts.appendChild(tst);
|
||||
row.appendChild(ts);
|
||||
var ts = document.createElement('td');
|
||||
var tst = document.createTextNode(entry.file);
|
||||
ts.appendChild(tst);
|
||||
row.appendChild(ts);
|
||||
var bg="";
|
||||
switch(entry.level){
|
||||
case "INFO":
|
||||
bg="white";
|
||||
break;
|
||||
case "ERROR":
|
||||
bg="#f44336";
|
||||
break;
|
||||
case "WARN":
|
||||
bg="#fb8c00"
|
||||
break;
|
||||
case "TRACE":
|
||||
bg="#E1F5FE"
|
||||
break;
|
||||
case "DEBUG":
|
||||
bg="#B3E5FC"
|
||||
break;
|
||||
default:
|
||||
bg="white"
|
||||
break;
|
||||
}
|
||||
row.style.backgroundColor=bg
|
||||
logTableB.append(row)
|
||||
filterTable()
|
||||
}
|
||||
ws.onerror = function(evt) {
|
||||
if (evt != null && evt.data != null){
|
||||
// handle error here
|
||||
}
|
||||
}
|
||||
}
|
||||
function clearTable(){
|
||||
if(!window.confirm("Are you sure you want to delete all logs?")){
|
||||
return
|
||||
}
|
||||
logs = []
|
||||
|
||||
while (logTableB.childNodes.length > 1) {
|
||||
logTableB.removeChild(logTableB.childNodes[1]);
|
||||
}
|
||||
}
|
||||
function filterTable() {
|
||||
var cols, input, filter, table, tr, td, i, txtValue, w;
|
||||
input = document.getElementById("search");
|
||||
filter = input.value;
|
||||
table = logTableB;
|
||||
tr = table.getElementsByTagName("tr");
|
||||
for (i = 1; i < tr.length; i++) {
|
||||
cols = tr[i].getElementsByTagName("td");
|
||||
var visible = false;
|
||||
for (w = 0; w < cols.length; w++){
|
||||
if (!visible && cols[w]) {
|
||||
td = cols[w]
|
||||
txtValue = td.textContent || td.innerText;
|
||||
if (txtValue.indexOf(filter) > -1) {
|
||||
visible = true
|
||||
}
|
||||
}
|
||||
}
|
||||
if(visible){
|
||||
|
||||
tr[i].style.display = "";
|
||||
} else {
|
||||
|
||||
tr[i].style.display = "none";
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
document.getElementById("delete").addEventListener("click", function(){
|
||||
|
||||
clearTable()
|
||||
}, false);
|
||||
document.getElementById("download").addEventListener("click", function(){
|
||||
|
||||
download(application+'.json',JSON.stringify(logs));
|
||||
}, false);
|
||||
openSocket();
|
||||
</script>
|
||||
|
||||
</footer>
|
||||
</html>
|
||||
`))
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user