Add separate logs viewer
This commit is contained in:
Johannes Zellner
128
webadmin/src/js/logs.js
Normal file
128
webadmin/src/js/logs.js
Normal file
@@ -0,0 +1,128 @@
|
||||
'use strict';
|
||||
|
||||
/* global moment */
|
||||
|
||||
// create main application module
|
||||
var app = angular.module('Application', ['angular-md5', 'ui-notification']);
|
||||
|
||||
app.controller('LogsController', ['$scope', '$timeout', '$location', 'Client', function ($scope, $timeout, $location, Client) {
|
||||
var search = decodeURIComponent(window.location.search).slice(1).split('&').map(function (item) { return item.split('='); }).reduce(function (o, k) { o[k[0]] = k[1]; return o; }, {});
|
||||
|
||||
$scope.initialized = false;
|
||||
$scope.installedApps = Client.getInstalledApps();
|
||||
$scope.client = Client;
|
||||
$scope.logs = [];
|
||||
$scope.selected = '';
|
||||
$scope.activeEventSource = null;
|
||||
$scope.lines = 10;
|
||||
$scope.selectedAppInfo = null;
|
||||
|
||||
// Add built-in log types for now
|
||||
$scope.logs.push({ name: 'System (All)', type: 'platform', value: 'all', url: Client.makeURL('/api/v1/cloudron/logs?units=all') });
|
||||
$scope.logs.push({ name: 'Box', type: 'platform', value: 'box', url: Client.makeURL('/api/v1/cloudron/logs?units=box') });
|
||||
$scope.logs.push({ name: 'Mail', type: 'platform', value: 'mail', url: Client.makeURL('/api/v1/cloudron/logs?units=mail') });
|
||||
|
||||
$scope.error = function (error) {
|
||||
console.error(error);
|
||||
window.location.href = '/error.html';
|
||||
};
|
||||
|
||||
function ab2str(buf) {
|
||||
return String.fromCharCode.apply(null, new Uint16Array(buf));
|
||||
}
|
||||
|
||||
$scope.clear = function () {
|
||||
var logViewer = $('.logs-container');
|
||||
logViewer.empty();
|
||||
};
|
||||
|
||||
function showLogs() {
|
||||
if (!$scope.selected) return;
|
||||
|
||||
var func = $scope.selected.type === 'platform' ? Client.getPlatformLogs : Client.getAppLogs;
|
||||
func($scope.selected.value, true, $scope.lines, function handleLogs(error, result) {
|
||||
if (error) return console.error(error);
|
||||
|
||||
$scope.activeEventSource = result;
|
||||
result.onmessage = function handleMessage(message) {
|
||||
var data;
|
||||
|
||||
try {
|
||||
data = JSON.parse(message.data);
|
||||
} catch (e) {
|
||||
return console.error(e);
|
||||
}
|
||||
|
||||
// check if we want to auto scroll (this is before the appending, as that skews the check)
|
||||
var tmp = $('.logs-container');
|
||||
var autoScroll = tmp[0].scrollTop > (tmp[0].scrollTopMax - 24);
|
||||
|
||||
var logLine = $('<div class="log-line">');
|
||||
var timeString = moment.utc(data.realtimeTimestamp/1000).format('MMM DD HH:mm:ss');
|
||||
logLine.html('<span class="time">' + timeString + ' </span>' + window.ansiToHTML(typeof data.message === 'string' ? data.message : ab2str(data.message)));
|
||||
tmp.append(logLine);
|
||||
|
||||
if (autoScroll) tmp[0].lastChild.scrollIntoView({ behavior: 'instant', block: 'end' });
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
Client.onApps(function () {
|
||||
if ($scope.selected.type !== 'app') return;
|
||||
|
||||
var appId = $scope.selected.value;
|
||||
|
||||
Client.getApp(appId, function (error, result) {
|
||||
if (error) return console.error(error);
|
||||
|
||||
$scope.selectedAppInfo = result;
|
||||
});
|
||||
});
|
||||
|
||||
Client.getStatus(function (error, status) {
|
||||
if (error) return $scope.error(error);
|
||||
|
||||
if (!status.activated) {
|
||||
console.log('Not activated yet, redirecting', status);
|
||||
window.location.href = '/';
|
||||
return;
|
||||
}
|
||||
|
||||
Client.refreshConfig(function (error) {
|
||||
if (error) return $scope.error(error);
|
||||
|
||||
// check version and force reload if needed
|
||||
if (!localStorage.version) {
|
||||
localStorage.version = Client.getConfig().version;
|
||||
} else if (localStorage.version !== Client.getConfig().version) {
|
||||
localStorage.version = Client.getConfig().version;
|
||||
window.location.reload(true);
|
||||
}
|
||||
|
||||
Client.refreshInstalledApps(function (error) {
|
||||
if (error) return $scope.error(error);
|
||||
|
||||
Client.getInstalledApps().forEach(function (app) {
|
||||
$scope.logs.push({
|
||||
type: 'app',
|
||||
value: app.id,
|
||||
name: app.fqdn + ' (' + app.manifest.title + ')',
|
||||
url: Client.makeURL('/api/v1/apps/' + app.id + '/logs'),
|
||||
addons: app.manifest.addons
|
||||
});
|
||||
});
|
||||
|
||||
// activate pre-selected log from query otherwise choose the first one
|
||||
$scope.selected = $scope.logs.find(function (e) { return e.value === search.id; });
|
||||
if (!$scope.selected) $scope.selected = $scope.logs[0];
|
||||
|
||||
// now mark the Client to be ready
|
||||
Client.setReady();
|
||||
|
||||
$scope.initialized = true;
|
||||
|
||||
showLogs();
|
||||
});
|
||||
});
|
||||
});
|
||||
}]);
|
||||
67
webadmin/src/logs.html
Normal file
67
webadmin/src/logs.html
Normal file
@@ -0,0 +1,67 @@
|
||||
<!DOCTYPE html>
|
||||
<html ng-app="Application" ng-controller="LogsController">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
|
||||
|
||||
<!-- this gets changed once we get the config (because angular has not loaded yet, we see template string for a flash) -->
|
||||
<title> Cloudron Logs </title>
|
||||
|
||||
<link id="favicon" href="/api/v1/cloudron/avatar" rel="icon" type="image/png">
|
||||
|
||||
<!-- CSS -->
|
||||
<link rel="stylesheet" type="text/css" href="/3rdparty/angular-ui-notification.min.css"/>
|
||||
<link href="theme.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom Fonts -->
|
||||
<link href="3rdparty/css/font-awesome.min.css" rel="stylesheet" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- jQuery-->
|
||||
<script src="3rdparty/js/jquery.min.js"></script>
|
||||
|
||||
<!-- Bootstrap Core JavaScript -->
|
||||
<script src="3rdparty/js/bootstrap.min.js"></script>
|
||||
|
||||
<!-- Angularjs scripts -->
|
||||
<script src="3rdparty/js/angular.min.js"></script>
|
||||
<script src="3rdparty/js/angular-loader.min.js"></script>
|
||||
<script src="3rdparty/js/angular-animate.min.js"></script>
|
||||
<script src="3rdparty/js/angular-base64.min.js"></script>
|
||||
<script src="3rdparty/js/angular-md5.min.js"></script>
|
||||
<script src="3rdparty/js/angular-sanitize.min.js"></script>
|
||||
<script src="3rdparty/js/angular-ui-notification.min.js"></script>
|
||||
|
||||
|
||||
<!-- Angular directives for bootstrap https://angular-ui.github.io/bootstrap/ -->
|
||||
<script src="3rdparty/js/ui-bootstrap-tpls-1.3.3.min.js"></script>
|
||||
<!-- colors -->
|
||||
<script type="text/javascript" src="3rdparty/js/colors.js"></script>
|
||||
|
||||
<!-- moment -->
|
||||
<script type="text/javascript" src="3rdparty/js/moment.min.js"></script>
|
||||
|
||||
<!-- Main Application -->
|
||||
<script src="js/logs.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body class="logs">
|
||||
|
||||
<div class="animateMe ng-hide layout-root" ng-show="initialized">
|
||||
|
||||
<div class="logs-controls">
|
||||
<h3 style="display: inline-block;">{{ selected.name }} Logs</h3>
|
||||
|
||||
<!-- logs actions -->
|
||||
<div class="pull-right">
|
||||
<a class="btn btn-primary" ng-click="clear()"><i class="fa fa-trash"></i> Clear View</a>
|
||||
<a class="btn btn-primary" ng-href="{{ selected.url }}&format=short&lines=800"><i class="fa fa-download"></i> Download Full Logs</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="logs-container"></div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1122,47 +1122,45 @@ footer {
|
||||
// Logs
|
||||
// ----------------------------
|
||||
|
||||
.logs-controls {
|
||||
margin-top: 25px;
|
||||
margin-bottom: 10px;
|
||||
.logs {
|
||||
background: black;
|
||||
|
||||
.ng-isolate-scope {
|
||||
float: left;
|
||||
}
|
||||
.logs-controls {
|
||||
margin: 5px;
|
||||
|
||||
h3 {
|
||||
display: inline-block;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
select {
|
||||
display: inline-block;
|
||||
width: 250px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.logs-container {
|
||||
flex-grow: 1;
|
||||
margin-left: calc(8.33% + 15px);
|
||||
margin-right: calc(8.33% + 15px);
|
||||
margin-bottom: 20px;
|
||||
background-color: black;
|
||||
color: white;
|
||||
overflow: auto;
|
||||
padding: 5px;
|
||||
font-family: monospace;
|
||||
|
||||
.log-line {
|
||||
line-height: 1.2;
|
||||
|
||||
&:hover {
|
||||
background-color: #333333;
|
||||
.ng-isolate-scope {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.time {
|
||||
color: #00FFFF;
|
||||
h3 {
|
||||
margin: 5px 0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
select {
|
||||
display: inline-block;
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
.logs-container {
|
||||
flex-grow: 1;
|
||||
margin-bottom: 5px;
|
||||
color: white;
|
||||
overflow: auto;
|
||||
padding: 5px;
|
||||
font-family: monospace;
|
||||
|
||||
.log-line {
|
||||
line-height: 1.2;
|
||||
|
||||
&:hover {
|
||||
background-color: #333333;
|
||||
}
|
||||
|
||||
.time {
|
||||
color: #00FFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
<div class="logs-controls">
|
||||
<div class="col-md-10 col-md-offset-1">
|
||||
<h3 style="display: inline-block;">Logs</h3>
|
||||
<select class="form-control pull-right inline" ng-options="log.name for log in logs track by log.value" ng-model="selected"></select>
|
||||
|
||||
<!-- logs actions -->
|
||||
<a class="btn btn-default pull-right" ng-href="{{ selected.url }}&format=short&lines=800" ng-hide="terminalVisible"><i class="fa fa-download"></i> Download Logs</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="logs-container"</div>
|
||||
|
||||
@@ -1,119 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
/* global moment */
|
||||
|
||||
angular.module('Application').controller('LogsController', ['$scope', '$location', '$route', '$routeParams', 'Client', function ($scope, $location, $route, $routeParams, Client) {
|
||||
Client.onReady(function () { if (!Client.getUserInfo().admin) $location.path('/'); });
|
||||
|
||||
$scope.config = Client.getConfig();
|
||||
$scope.user = Client.getUserInfo();
|
||||
|
||||
$scope.logs = [];
|
||||
$scope.selected = '';
|
||||
$scope.activeEventSource = null;
|
||||
$scope.lines = 10;
|
||||
$scope.selectedAppInfo = null;
|
||||
|
||||
function ab2str(buf) {
|
||||
return String.fromCharCode.apply(null, new Uint16Array(buf));
|
||||
}
|
||||
|
||||
$scope.populateLogTypes = function () {
|
||||
$scope.logs.push({ name: 'System (All)', type: 'platform', value: 'all', url: Client.makeURL('/api/v1/cloudron/logs?units=all') });
|
||||
$scope.logs.push({ name: 'Box', type: 'platform', value: 'box', url: Client.makeURL('/api/v1/cloudron/logs?units=box') });
|
||||
$scope.logs.push({ name: 'Mail', type: 'platform', value: 'mail', url: Client.makeURL('/api/v1/cloudron/logs?units=mail') });
|
||||
|
||||
Client.getInstalledApps().forEach(function (app) {
|
||||
$scope.logs.push({
|
||||
type: 'app',
|
||||
value: app.id,
|
||||
name: app.fqdn + ' (' + app.manifest.title + ')',
|
||||
url: Client.makeURL('/api/v1/apps/' + app.id + '/logs'),
|
||||
addons: app.manifest.addons
|
||||
});
|
||||
});
|
||||
|
||||
// activate pre-selected log from query
|
||||
$scope.selected = $scope.logs.find(function (e) { return e.value === $routeParams.id; });
|
||||
|
||||
if (!$scope.selected) {
|
||||
$scope.selected = $scope.logs[0];
|
||||
}
|
||||
};
|
||||
|
||||
function reset() {
|
||||
// close the old event source so we wont receive any new logs
|
||||
if ($scope.activeEventSource) {
|
||||
$scope.activeEventSource.close();
|
||||
$scope.activeEventSource = null;
|
||||
}
|
||||
|
||||
var logViewer = $('.logs-container');
|
||||
logViewer.empty();
|
||||
|
||||
$scope.selectedAppInfo = null;
|
||||
}
|
||||
|
||||
$scope.showLogs = function () {
|
||||
reset();
|
||||
|
||||
if (!$scope.selected) return;
|
||||
|
||||
var func = $scope.selected.type === 'platform' ? Client.getPlatformLogs : Client.getAppLogs;
|
||||
func($scope.selected.value, true, $scope.lines, function handleLogs(error, result) {
|
||||
if (error) return console.error(error);
|
||||
|
||||
$scope.activeEventSource = result;
|
||||
result.onmessage = function handleMessage(message) {
|
||||
var data;
|
||||
|
||||
try {
|
||||
data = JSON.parse(message.data);
|
||||
} catch (e) {
|
||||
return console.error(e);
|
||||
}
|
||||
|
||||
// check if we want to auto scroll (this is before the appending, as that skews the check)
|
||||
var tmp = $('.logs-container');
|
||||
var autoScroll = tmp[0].scrollTop > (tmp[0].scrollTopMax - 24);
|
||||
|
||||
var logLine = $('<div class="log-line">');
|
||||
var timeString = moment.utc(data.realtimeTimestamp/1000).format('MMM DD HH:mm:ss');
|
||||
logLine.html('<span class="time">' + timeString + ' </span>' + window.ansiToHTML(typeof data.message === 'string' ? data.message : ab2str(data.message)));
|
||||
tmp.append(logLine);
|
||||
|
||||
if (autoScroll) tmp[0].lastChild.scrollIntoView({ behavior: 'instant', block: 'end' });
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
$scope.$watch('selected', function (newVal) {
|
||||
if (!newVal) return;
|
||||
|
||||
$route.updateParams({ id: newVal.value });
|
||||
$scope.showLogs();
|
||||
});
|
||||
|
||||
Client.onReady($scope.populateLogTypes);
|
||||
|
||||
Client.onApps(function () {
|
||||
if ($scope.$$destroyed) return;
|
||||
if ($scope.selected.type !== 'app') return;
|
||||
|
||||
var appId = $scope.selected.value;
|
||||
|
||||
Client.getApp(appId, function (error, result) {
|
||||
if (error) return console.error(error);
|
||||
|
||||
$scope.selectedAppInfo = result;
|
||||
});
|
||||
});
|
||||
|
||||
$scope.$on('$destroy', function () {
|
||||
if ($scope.activeEventSource) {
|
||||
$scope.activeEventSource.onmessage = function () {};
|
||||
$scope.activeEventSource.close();
|
||||
$scope.activeEventSource = null;
|
||||
}
|
||||
});
|
||||
}]);
|
||||
Reference in New Issue
Block a user