Changes to webservice
- added more query parameters - started working on webinterface - tokens for authenticationpull/33/head
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