Changes to webservice
- added more query parameters - started working on webinterface - tokens for authenticationpull/33/head
Trivernis
6 years ago
parent
72794a2f63
commit
c46f34fd59
@ -0,0 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Dashboard</title>
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="sass/style.sass"/>
|
||||
<script type="text/javascript" src="scripts/query.js"></script>
|
||||
<script type="text/javascript" src="http://momentjs.com/downloads/moment.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="content">
|
||||
<div class="column" id="column-left">
|
||||
<pre class="cell text-left" id="bot-config"></pre>
|
||||
<h2 class="cell">Logs</h2>
|
||||
<div id="log-container" class="listContainer"></div>
|
||||
</div>
|
||||
<div class="column" id="column-middle">
|
||||
<div id="avatar-container">
|
||||
<div id="status-indicator"></div>
|
||||
<img class="cell" id="user-avatar" src="" alt="Avatar"/>
|
||||
</div>
|
||||
<h3 class="cell" id="user-tag"></h3>
|
||||
<h4 class="cell" id="user-game"></h4>
|
||||
<div class="space"></div>
|
||||
<h2 class="cell">Status</h2>
|
||||
<div class="cell">
|
||||
<span class="label text-right">Ping: </span>
|
||||
<span class="text-left" id="client-ping"></span>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<span class="label text-right">Uptime: </span>
|
||||
<span class="text-left" id="client-uptime"></span>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<span class="label text-right">Socket Status: </span>
|
||||
<span class="text-left" id="client-status"></span>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<span class="label text-right">Guild Count: </span>
|
||||
<span class="text-left" id="client-guildCount"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" id="column-right">
|
||||
<p>right</p>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
startUpdating();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,166 @@
|
||||
@import url('https://fonts.googleapis.com/css?family=Ubuntu')
|
||||
@import vars
|
||||
|
||||
body
|
||||
font-family: $fNormal
|
||||
color: $cPrimary
|
||||
background-color: $cBackground
|
||||
overflow: hidden
|
||||
max-height: 100%
|
||||
max-width: 100%
|
||||
::-webkit-scrollbar
|
||||
width: 12px
|
||||
height: 12px
|
||||
::-webkit-scrollbar-thumb
|
||||
background: darken($cBackground, 5)
|
||||
border-radius: 10px
|
||||
::-webkit-scrollbar-track
|
||||
background: lighten($cBackground, 5)
|
||||
border-radius: 10px
|
||||
|
||||
.column
|
||||
display: table-column
|
||||
padding: 20px
|
||||
align-content: center
|
||||
margin: 0 auto
|
||||
text-align: center
|
||||
max-height: 100vh
|
||||
|
||||
.cell
|
||||
//display: table-cell
|
||||
align-content: center
|
||||
text-align: center
|
||||
margin: auto
|
||||
user-select: none
|
||||
|
||||
.space
|
||||
height: 20px
|
||||
|
||||
h2.cell
|
||||
padding: 5px
|
||||
|
||||
div.cell
|
||||
display: flex
|
||||
align-items: center
|
||||
width: 100%
|
||||
position: relative
|
||||
|
||||
div.cell > *
|
||||
display: table-cell
|
||||
align-items: center
|
||||
width: 100%
|
||||
padding: 2px 5px
|
||||
|
||||
.text-left
|
||||
text-align: left
|
||||
|
||||
.text-right
|
||||
text-align: right
|
||||
|
||||
.label
|
||||
font-weight: bold
|
||||
|
||||
.listContainer
|
||||
display: block
|
||||
width: 100%
|
||||
text-align: left
|
||||
overflow: auto
|
||||
display: inline-block
|
||||
position: relative
|
||||
max-height: 90vh
|
||||
|
||||
.logEntry
|
||||
display: list-item
|
||||
list-style: none
|
||||
padding: 5px
|
||||
border-radius: 10px
|
||||
margin: 5px
|
||||
color: $cOnSurfaceVariant
|
||||
user-select: none
|
||||
position: relative
|
||||
font-size: 110%
|
||||
|
||||
.logEntry[level=debug]
|
||||
background: $cDebug
|
||||
|
||||
.logEntry[level=verbose]
|
||||
background: $cVerbose
|
||||
|
||||
.logEntry[level=info]
|
||||
background: $cInfo
|
||||
|
||||
.logEntry[level=warn]
|
||||
background: $cWarn
|
||||
|
||||
.logEntry[level=warning]
|
||||
background: $cWarn
|
||||
user-select: all
|
||||
|
||||
.logEntry[level=error]
|
||||
background: $cError
|
||||
user-select: all
|
||||
|
||||
.logEntry .infodiv
|
||||
display: flex
|
||||
list-style: none
|
||||
font-size: 75%
|
||||
width: 100%
|
||||
|
||||
.logEntry .infodiv span
|
||||
padding: 0 2px
|
||||
margin: auto
|
||||
width: 50%
|
||||
display: table-cell
|
||||
|
||||
#content
|
||||
display: flex
|
||||
height: 100%
|
||||
width: 100%
|
||||
background-color: $cBackground
|
||||
|
||||
#column-left, #column-middle, #column-right
|
||||
width: 33%
|
||||
height: 100%
|
||||
|
||||
#column-middle
|
||||
background: $cBackgroundVariant
|
||||
border-radius: 20px
|
||||
|
||||
#user-avatar
|
||||
max-width: 300px
|
||||
width: 100%
|
||||
height: auto
|
||||
border-radius: 25%
|
||||
|
||||
#avatar-container
|
||||
max-width: 300px
|
||||
width: 100%
|
||||
margin: auto
|
||||
position: relative
|
||||
|
||||
#status-indicator
|
||||
height: 20%
|
||||
width: 20%
|
||||
position: absolute
|
||||
left: 0
|
||||
top: 0
|
||||
border-radius: 25%
|
||||
display: block
|
||||
z-index: 200
|
||||
|
||||
#status-indicator[status=online]
|
||||
background-color: $cOnline
|
||||
|
||||
#status-indicator[status=idle]
|
||||
background-color: $cIdle
|
||||
|
||||
#status-indicator[status=dnd]
|
||||
background-color: $cDnd
|
||||
|
||||
#status-indicator[status=offline]
|
||||
background-color: $cOffline
|
||||
|
||||
#bot-config
|
||||
background: darken($cBackground, 3)
|
||||
word-wrap: break-word
|
||||
display: none
|
||||
@ -0,0 +1,31 @@
|
||||
$cPrimary: #fff
|
||||
$cPrimaryVariant: #4c10a5
|
||||
$cSecondary: #c889f5
|
||||
$cSecondaryVariant: #740bce
|
||||
$cBackground: #77f
|
||||
$cBackgroundVariant: #55b
|
||||
$cSurface: #fff
|
||||
$cSurfaceVariant: #000
|
||||
$cError: #f59289
|
||||
$cErrorVariant: #b20a00
|
||||
$cOnPrimary: #fff
|
||||
$cOnSecondary: #000
|
||||
$cOnSurface: #000
|
||||
$cOnSurfaceShadow: lighten($cOnSurface, 30%)
|
||||
$cOnSurfaceVariant: #fff
|
||||
$cOnBackground: #000
|
||||
$cOnBackgroundShadow: lighten($cOnBackground, 30%)
|
||||
$cOnBackgroundVariant: #fff
|
||||
$cOnError: #000
|
||||
$cOnErrorVariant: #fff
|
||||
$cOnline: #0f0
|
||||
$cIdle: #ff0
|
||||
$cDnd: #f00
|
||||
$cOffline: #888
|
||||
$cDebug: #00f
|
||||
$cVerbose: #088
|
||||
$cInfo: #890
|
||||
$cWarn: #a60
|
||||
$cError: #a00
|
||||
|
||||
$fNormal: Ubuntu, sans-serif
|
||||
@ -0,0 +1,148 @@
|
||||
let latestLogs = [];
|
||||
|
||||
let status = {
|
||||
0: 'ready',
|
||||
1: 'connecting',
|
||||
2: 'reconnecting',
|
||||
3: 'idle',
|
||||
4: 'nearly',
|
||||
5: 'disconnected'
|
||||
};
|
||||
|
||||
function getSplitDuration (duration) {
|
||||
let dur = duration;
|
||||
let retObj = {};
|
||||
retObj.milliseconds = dur % 1000;
|
||||
dur = Math.round(dur / 1000);
|
||||
retObj.seconds = dur % 60;
|
||||
dur = Math.round(dur / 60);
|
||||
retObj.minutes = dur % 60;
|
||||
dur = Math.round(dur / 60);
|
||||
retObj.hours = dur % 24;
|
||||
dur = Math.round(dur / 24);
|
||||
retObj.days = dur;
|
||||
return retObj;
|
||||
}
|
||||
|
||||
function postQuery(query) {
|
||||
return new Promise((resolve) => {
|
||||
$.post({
|
||||
url: "/graphql",
|
||||
headers: {
|
||||
Authorization: `Bearer ${sessionStorage.apiToken}`
|
||||
},
|
||||
data: JSON.stringify({
|
||||
query: query
|
||||
}),
|
||||
contentType: "application/json"
|
||||
}).done((res) => resolve(res));
|
||||
})
|
||||
}
|
||||
|
||||
function queryStatic() {
|
||||
let query = `{
|
||||
client {
|
||||
user {
|
||||
tag
|
||||
avatar
|
||||
}
|
||||
}
|
||||
config
|
||||
}`;
|
||||
postQuery(query).then((res) => {
|
||||
let d = res.data;
|
||||
document.querySelector('#user-avatar').setAttribute('src', d.client.user.avatar);
|
||||
document.querySelector('#user-tag').innerText = d.client.user.tag;
|
||||
document.querySelector('#bot-config').innerText = d.config;
|
||||
})
|
||||
}
|
||||
|
||||
function queryStatus() {
|
||||
let query = `{
|
||||
client {
|
||||
ping
|
||||
status
|
||||
uptime
|
||||
guildCount
|
||||
user {
|
||||
presence {
|
||||
game
|
||||
status
|
||||
}
|
||||
}
|
||||
}
|
||||
}`;
|
||||
postQuery(query).then((res) => {
|
||||
let d = res.data;
|
||||
document.querySelector('#client-ping').innerText = Math.round(d.client.ping * 10)/10 + ' ms';
|
||||
document.querySelector('#client-status').innerText = status[d.client.status];
|
||||
|
||||
let sd = getSplitDuration(d.client.uptime);
|
||||
document.querySelector('#client-uptime')
|
||||
.innerText = `${sd.days}d ${sd.hours}h ${sd.minutes}min ${sd.seconds}s`;
|
||||
|
||||
document.querySelector('#client-guildCount').innerText = d.client.guildCount;
|
||||
document.querySelector('#status-indicator').setAttribute('status', d.client.user.presence.status);
|
||||
document.querySelector('#user-game').innerText = d.client.user.presence.game;
|
||||
|
||||
setTimeout(() => {
|
||||
let sd = getSplitDuration(d.client.uptime + 1000);
|
||||
document.querySelector('#client-uptime')
|
||||
.innerText = `${sd.days}d ${sd.hours}h ${sd.minutes}min ${sd.seconds}s`;
|
||||
}, 1000);
|
||||
})
|
||||
}
|
||||
|
||||
function queryLogs(count) {
|
||||
count = count || 5;
|
||||
let query = `{
|
||||
logs(last: ${count}, level: "verbose"){
|
||||
id
|
||||
level
|
||||
message
|
||||
timestamp
|
||||
}
|
||||
}`;
|
||||
postQuery(query).then((res) => {
|
||||
let d = res.data;
|
||||
for (let logEntry of d.logs) {
|
||||
if (!latestLogs.find((x) => x.id === logEntry.id)) {
|
||||
let entryElem = document.createElement('div');
|
||||
entryElem.setAttribute('class', 'logEntry text-left');
|
||||
entryElem.setAttribute('log-id', logEntry.id);
|
||||
entryElem.setAttribute('level', logEntry.level);
|
||||
let infoDiv = document.createElement('div');
|
||||
infoDiv.setAttribute('class', 'infodiv');
|
||||
let lvlSpan = document.createElement('span');
|
||||
lvlSpan.innerText = logEntry.level;
|
||||
lvlSpan.setAttribute('class', 'text-left');
|
||||
infoDiv.appendChild(lvlSpan);
|
||||
let tsSpan = document.createElement('span');
|
||||
tsSpan.setAttribute('timestamp', logEntry.timestamp);
|
||||
tsSpan.innerText = moment(logEntry.timestamp, 'YY-MM-DD-HH-mm-ss').format('MMM Do HH:mm:ss');
|
||||
tsSpan.setAttribute('class', 'text-right');
|
||||
infoDiv.appendChild(tsSpan);
|
||||
entryElem.appendChild(infoDiv);
|
||||
let msgSpan = document.createElement('span');
|
||||
msgSpan.innerText = logEntry.message;
|
||||
msgSpan.setAttribute('class', 'message');
|
||||
entryElem.appendChild(msgSpan);
|
||||
let logContainer = document.querySelector('#log-container');
|
||||
logContainer.insertBefore(entryElem, logContainer.firstChild);
|
||||
}
|
||||
}
|
||||
latestLogs = d.logs;
|
||||
})
|
||||
}
|
||||
|
||||
function startUpdating() {
|
||||
if (!sessionStorage.apiToken || sessionStorage.apiToken.length < 0) {
|
||||
sessionStorage.apiToken = prompt('Please provide an api token: ');
|
||||
}
|
||||
queryStatic();
|
||||
setInterval(queryStatic, 360000);
|
||||
queryStatus();
|
||||
setInterval(queryStatus, 2000);
|
||||
queryLogs(50);
|
||||
setInterval(queryLogs, 5000);
|
||||
}
|
||||
Loading…
Reference in New Issue