Skip to content

Commit

Permalink
tdf#114982 - AdminConsole: control logging
Browse files Browse the repository at this point in the history
Change-Id: I53cf4b0ff81ea9d6bf4ad595077f7365e7e34c00
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/94130
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Tested-by: Jenkins
Reviewed-by: Michael Meeks <michael.meeks@collabora.com>
  • Loading branch information
gokaysatir authored and mmeeks committed May 30, 2020
1 parent b761ab8 commit ac68277
Show file tree
Hide file tree
Showing 12 changed files with 360 additions and 6 deletions.
3 changes: 2 additions & 1 deletion loleaflet/Makefile.am
Expand Up @@ -94,7 +94,8 @@ LOLEAFLET_ADMIN_JS =\
admin/src/AdminSocketOverview.js \
admin/src/AdminSocketAnalytics.js \
admin/src/AdminSocketSettings.js \
admin/src/AdminSocketHistory.js
admin/src/AdminSocketHistory.js \
admin/src/AdminSocketLog.js

NODE_MODULES_SRC =\
autolinker@3.14.1 \
Expand Down
1 change: 1 addition & 0 deletions loleaflet/admin/admin.html
Expand Up @@ -59,6 +59,7 @@
<li class="active"><a href="#"><script>document.write(l10nstrings.strOverview)</script> <span class="sr-only"><script>document.write(l10nstrings.strCurrent)</script></span></a></li>
<li><a href="adminAnalytics.html"><script>document.write(l10nstrings.strAnalytics)</script></a></li>
<li><a href="adminHistory.html"><script>document.write(l10nstrings.strHistory)</script></a></li>
<li><a href="adminLog.html"><script>document.write(l10nstrings.strLog)</script></a></li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
Expand Down
3 changes: 2 additions & 1 deletion loleaflet/admin/admin.strings.js
Expand Up @@ -9,6 +9,7 @@ l10nstrings.strOverview = _('Overview');
l10nstrings.strCurrent = _('(current)');
l10nstrings.strAnalytics = _('Analytics');
l10nstrings.strHistory = _('History');
l10nstrings.strLog = _('Log');
l10nstrings.strDashboard = _('Dashboard');
l10nstrings.strUsersOnline = _('Users online');
l10nstrings.strUserName = _('User Name');
Expand Down Expand Up @@ -40,7 +41,7 @@ l10nstrings.strDocuments = _('Documents:');
l10nstrings.strExpired = _('Expired:');
l10nstrings.strRefresh = _('Refresh');
l10nstrings.strShutdown = _('Shutdown Server');
l10nstrings.strServerUptime = _('Server uptime')
l10nstrings.strServerUptime = _('Server uptime');

if (module) {
module.exports = l10nstrings;
Expand Down
1 change: 1 addition & 0 deletions loleaflet/admin/adminAnalytics.html
Expand Up @@ -59,6 +59,7 @@
<li><a href="admin.html"><script>document.write(l10nstrings.strOverview)</script></a></li>
<li class="active"><a href="adminAnalytics.html"><script>document.write(l10nstrings.strAnalytics)</script> <span class="sr-only"><script>document.write(l10nstrings.strCurrent)</script></span></a></li>
<li><a href="adminHistory.html"><script>document.write(l10nstrings.strHistory)</script></a></li>
<li><a href="adminLog.html"><script>document.write(l10nstrings.strLog)</script></a></li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
Expand Down
1 change: 1 addition & 0 deletions loleaflet/admin/adminHistory.html
Expand Up @@ -59,6 +59,7 @@
<li><a href="admin.html"><script>document.write(l10nstrings.strOverview)</script></a></li>
<li><a href="adminAnalytics.html"><script>document.write(l10nstrings.strAnalytics)</script></a></li>
<li class="active"><a href="adminHistory.html"><script>document.write(l10nstrings.strHistory)</script> <span class="sr-only"><script>document.write(l10nstrings.strCurrent)</script></span></a></li>
<li><a href="adminLog.html"><script>document.write(l10nstrings.strLog)</script></a></li>
</ul>
</div>

Expand Down
105 changes: 105 additions & 0 deletions loleaflet/admin/adminLog.html
@@ -0,0 +1,105 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content=""/>
<meta name="author" content=""/>

<title>LibreOffice Online - Admin console</title>

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="localizations" href="%SERVICE_ROOT%/loleaflet/%VERSION%/l10n/admin-localizations.json" type="application/vnd.oftn.l10n+json"/>
</head>
<body>
<script src="%SERVICE_ROOT%/loleaflet/%VERSION%/admin-bundle.js"></script>
<!--%BRANDING_JS%-->
<script>if (typeof brandProductName !== 'undefined') {l10nstrings.strProductName = brandProductName}</script>
<script>document.title = l10nstrings.strProductName + ' - ' + l10nstrings.strAdminConsole</script>
<script>
if (window.location.protocol == "https:") {
var host = 'wss://' + window.location.host + '%SERVICE_ROOT%/lool/adminws/';
}
else {
host = 'ws://' + window.location.host + '%SERVICE_ROOT%/lool/adminws/';
}

Admin.Log(host)
</script>

<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><script>document.write(l10nstrings.strProductName + ' - ' + l10nstrings.strAdminConsole)</script></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="adminSettings.html"><script>document.write(l10nstrings.strSettings)</script></a></li>
</ul>
</div>
</div>
</nav>

<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li><a href="admin.html"><script>document.write(l10nstrings.strOverview)</script> <span class="sr-only"><script>document.write(l10nstrings.strCurrent)</script></span></a></li>
<li><a href="adminAnalytics.html"><script>document.write(l10nstrings.strAnalytics)</script></a></li>
<li><a href="adminHistory.html"><script>document.write(l10nstrings.strHistory)</script></a></li>
<li class="active"><a href="adminLog.html"><script>document.write(l10nstrings.strLog)</script></a></li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header"><script>document.write(l10nstrings.strLog)</script></h1>
<div class="form-group text-right" style="width:100%">
<button type="button" class="btn btn-primary float-right" id="refresh-log" style="width:120px;">Refresh Log</button>
<button type="button" id="button-open-log-list-modal" class="btn btn-primary float-right" data-toggle="modal" style="width:120px;" data-target="#channel-list-modal">Set Log Levels</button>
</div>
<div class="form-group">
<textarea id="log-lines" style="width:100%;height:100%;min-height: calc(100vh - 250px);resize:vertical;" readonly="true"></textarea>
</div>
</div>
</div>
</div>

<!-- Modal -->
<div class="modal fade" id="channel-list-modal" tabindex="-1" role="dialog" aria-labelledby="log-level-list-label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="log-level-list-label">
<i class="fa fa-spinner fa-spin"></i>
Log Levels
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form class="form-horizontal" id="form-channel-list" ></form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" form="form-channel-list" id="update-log-levels" class="btn btn-primary">Update Log Levels</button>
</div>
</div>
</div>
</div>


<!--%FOOTER%-->
</body>
</html>
1 change: 1 addition & 0 deletions loleaflet/admin/adminSettings.html
Expand Up @@ -59,6 +59,7 @@
<li><a href="admin.html"><script>document.write(l10nstrings.strOverview)</script> <span class="sr-only"><script>document.write(l10nstrings.strCurrent)</script></span></a></li>
<li><a href="adminAnalytics.html"><script>document.write(l10nstrings.strAnalytics)</script></a></li>
<li><a href="adminHistory.html"><script>document.write(l10nstrings.strHistory)</script></a></li>
<li><a href="adminLog.html"><script>document.write(l10nstrings.strLog)</script></a></li>
</ul>
<hr />
<div style="position:absolute; bottom:0px">
Expand Down
121 changes: 121 additions & 0 deletions loleaflet/admin/src/AdminSocketLog.js
@@ -0,0 +1,121 @@
/* -*- js-indent-level: 8 -*- */
/*
Socket to be intialized on opening the log page in Admin console
*/
/* global Admin $ AdminSocketBase */
var AdminSocketLog = AdminSocketBase.extend({
constructor: function(host) {
this.base(host);
// There is a "$" is never used error. Let's get rid of this. This is vanilla script and has not more lines than the one with JQuery.
$('#form-channel-list').id;
},

refreshLog: function() {
this.socket.send('log_lines');
},

pullChannelList: function() {
this.socket.send('channel_list');
},

sendChannelListLogLevels: function(e) {
e.stopPropagation();

// We change the colour of the button when we send the data and change it back when the task is done (in function applyChannelList). But it is happening too fast.
document.getElementById('update-log-levels').classList.add('btn-warning');
document.getElementById('update-log-levels').classList.remove('btn-primary');

// Get the form.
var form = document.getElementById('form-channel-list');

// Get channel select elements.
var selectList = form.querySelectorAll('select');

// Prepare the statement.
var textToSend = 'update-log-levels';
for (var i = 0; i < selectList.length; i++) {
textToSend += ' ' + selectList[i].getAttribute('name').replace('channel-', '') + '=' + selectList[i].value;
}

this.socket.send(textToSend);
},

onSocketOpen: function() {
// Base class' onSocketOpen handles authentication
this.base.call(this);

document.getElementById('refresh-log').onclick = this.refreshLog.bind(this);
document.getElementById('update-log-levels').onclick = this.sendChannelListLogLevels.bind(this);

this.pullChannelList();
this.refreshLog();
},

applyChannelList: function(channelListStr) {
var channelListArr = channelListStr.split(' '); // Every item holds: channel name + = + log level.

// Here we have the log channel list and their respective log levels.
// We will create items for them. User will be able to set the log level for each channel.
var channelForm = document.getElementById('form-channel-list');
channelForm.innerHTML = ''; // Clear and refill it.
var optionList = Array('none', 'fatal', 'critical', 'error', 'warning', 'notice', 'information', 'debug', 'trace');
var innerHTML = ''; // Of select elements.
for (var i = 0; i < optionList.length; i++) {
innerHTML += '<option value="' + optionList[i] + '">' + optionList[i] + '</option>';
}

for (i = 0; i < channelListArr.length; i++) {
if (channelListArr[i].split('=').length === 2) {
var channelName = channelListArr[i].split('=')[0];
var channelLogLevel = channelListArr[i].split('=')[1];

var newDiv = document.createElement('div');
newDiv.className = 'form-group';

var newLabel = document.createElement('label');
newLabel.className = 'control-label col-sm-6';
newLabel.setAttribute('for', 'channel-' + channelName);
newLabel.innerText = channelName;

var newSubDivision = document.createElement('div');
newSubDivision.className = 'col-sm-6';

var newSelectElement = document.createElement('select');
newSelectElement.name = 'channel-' + channelName;
newSelectElement.id = 'channel-' + channelName;
newSelectElement.innerHTML = innerHTML;
newSelectElement.value = channelLogLevel;
newSelectElement.style.width = '120px';
newSelectElement.className = 'form-control';

channelForm.appendChild(newDiv);
newDiv.appendChild(newLabel);
newDiv.appendChild(newSubDivision);
newSubDivision.appendChild(newSelectElement);
}
}

document.getElementById('update-log-levels').classList.remove('btn-warning');
document.getElementById('update-log-levels').classList.add('btn-primary');
},

onSocketMessage: function(e) {
if (e.data.startsWith('log_lines')) {
var result = e.data;
result = result.substring(10, result.length);
document.getElementById('log-lines').value = result;
}
else if (e.data.startsWith('channel_list')) {
var channelListStr = e.data.substring(13, e.data.length);
this.applyChannelList(channelListStr);
}
},

onSocketClose: function() {

}
});

Admin.Log = function(host) {
return new AdminSocketLog(host);
};

0 comments on commit ac68277

Please sign in to comment.