LSP: on the Overview page

- Last 5 recent errors in the logs
- Enabled and disabled protocol list
This commit is contained in:
Cat 2016-11-08 11:09:54 +01:00 committed by Thulinma
parent 109366e81c
commit 8ec2f6ac90
2 changed files with 144 additions and 28 deletions

View file

@ -848,6 +848,19 @@ button.return:before {
color: rgba(0,0,0,0.8); color: rgba(0,0,0,0.8);
margin-bottom: 1em; margin-bottom: 1em;
} }
.logs {
text-indent: 0;
}
.logs > div {
display: flex;
flex-flow: row nowrap;
}
.logs > div > * {
margin-right: 1em;
}
.logs .content > * {
margin-right: 0.5em;
}
@font-face { @font-face {
font-family: FuturaICGLight; font-family: FuturaICGLight;

View file

@ -2004,9 +2004,13 @@ var UI = {
break; break;
case 'Overview': case 'Overview':
var $versioncheck = $('<span>').text('Loading..'); var $versioncheck = $('<span>').text('Loading..');
var $streamsonline = $('<span>'); var $streamsactive = $('<span>');
var $errors = $('<span>').addClass('logs');
var $viewers = $('<span>'); var $viewers = $('<span>');
var $servertime = $('<span>'); var $servertime = $('<span>');
var $protocols_on = $('<span>');
var $protocols_off = $('<span>');
$main.append(UI.buildUI([ $main.append(UI.buildUI([
{ {
type: 'help', type: 'help',
@ -2029,12 +2033,28 @@ var UI = {
value: $servertime value: $servertime
},{ },{
type: 'span', type: 'span',
label: 'Current streams', label: 'Configured streams',
value: $streamsonline value: (mist.data.streams ? Object.keys(mist.data.streams).length : 0)
},{
type: 'span',
label: 'Active streams',
value: $streamsactive
},{ },{
type: 'span', type: 'span',
label: 'Current connections', label: 'Current connections',
value: $viewers value: $viewers
},{
type: 'span',
label: 'Enabled protocols',
value: $protocols_on
},{
type: 'span',
label: 'Disabled protocols',
value: $protocols_off
},{
type: 'span',
label: 'Recent problems',
value: $errors
},$('<br>'),{ },$('<br>'),{
type: 'str', type: 'str',
label: 'Human readable name', label: 'Human readable name',
@ -2122,15 +2142,19 @@ var UI = {
$versioncheck.text(''); $versioncheck.text('');
} }
function updateViewers() { function updateViewers() {
mist.send(function(d){ var request = {
enterStats()
},{
totals:{ totals:{
fields: ['clients'], fields: ['clients'],
start: -10 start: -10
}, },
active_streams: true active_streams: true
}); };
if (!('cabailities' in mist.data)) {
request.capabilities = true;
}
mist.send(function(d){
enterStats()
},request);
} }
function enterStats() { function enterStats() {
if ('active_streams' in mist.data) { if ('active_streams' in mist.data) {
@ -2139,7 +2163,7 @@ var UI = {
else { else {
var active = '?'; var active = '?';
} }
$streamsonline.text(active+' active, '+(mist.data.streams ? Object.keys(mist.data.streams).length : 0)+' configured'); $streamsactive.text(active);
if (('totals' in mist.data) && ('all_streams' in mist.data.totals)) { if (('totals' in mist.data) && ('all_streams' in mist.data.totals)) {
var clients = mist.data.totals.all_streams.all_protocols.clients; var clients = mist.data.totals.all_streams.all_protocols.clients;
clients = (clients.length ? UI.format.number(clients[clients.length-1][1]) : 0); clients = (clients.length ? UI.format.number(clients[clients.length-1][1]) : 0);
@ -2149,6 +2173,55 @@ var UI = {
} }
$viewers.text(clients); $viewers.text(clients);
$servertime.text(UI.format.dateTime(mist.data.config.time,'long')); $servertime.text(UI.format.dateTime(mist.data.config.time,'long'));
$errors.html('');
var n = 0;
for (var i in mist.data.log) {
var l = mist.data.log[i];
if (['FAIL','ERROR'].indexOf(l[1]) > -1) {
n++;
var $content = $('<span>').addClass('content').addClass('red');
var split = l[2].split('|');
for (var i in split) {
$content.append(
$('<span>').text(split[i])
);
}
$errors.append(
$('<div>').append(
$('<span>').append(UI.format.time(l[0]))
).append(
$content
)
);
if (n == 5) { break; }
}
}
if (n == 0) {
$errors.html('None.');
}
var protocols = {
on: [],
off: []
};
for (var i in mist.data.config.protocols) {
var p = mist.data.config.protocols[i];
if (protocols.on.indexOf(p.connector) > -1) { continue; }
protocols.on.push(p.connector);
}
$protocols_on.text((protocols.on.length ? protocols.on.join(', ') : 'None.'));
if ('capabilities' in mist.data) {
for (var i in mist.data.capabilities.connectors) {
if (protocols.on.indexOf(i) == -1) {
protocols.off.push(i);
}
}
$protocols_off.text((protocols.off.length ? protocols.off.join(', ') : 'None.'));
}
else {
$protocols_off.text('Loading..')
}
} }
updateViewers(); updateViewers();
enterStats(); enterStats();
@ -2882,14 +2955,21 @@ var UI = {
var host = parseURL(mist.user.host); var host = parseURL(mist.user.host);
var passw = $main.find('[name=source]').val().match(/@.*/); var passw = $main.find('[name=source]').val().match(/@.*/);
if (passw) { passw = passw[0].substring(1); } if (passw) { passw = passw[0].substring(1); }
var ip = $main.find('[name=source]').val().replace(/(?:.+?):\/\//,'');
ip = ip.split('/');
ip = ip[0];
ip = ip.split(':');
ip = ip[0];
var port = { var port = {
RTMP: mist.data.capabilities.connectors.RTMP.optional.port['default'], RTMP: mist.data.capabilities.connectors.RTMP.optional.port['default'],
RTSP: mist.data.capabilities.connectors.RTSP.optional.port['default'] RTSP: mist.data.capabilities.connectors.RTSP.optional.port['default'],
TS: mist.data.capabilities.connectors.TS.optional.port['default']
}; };
var defport = { var defport = {
RTMP: 1935, RTMP: 1935,
RTSP: 554 RTSP: 554,
TS: -1
} }
for (var protocol in port) { for (var protocol in port) {
for (var i in mist.data.config.protocols) { for (var i in mist.data.config.protocols) {
@ -2907,6 +2987,7 @@ var UI = {
$livestreamhint.find('.field.RTMP').setval('rtmp://'+host.host+port.RTMP+'/'+(passw ? passw : 'live')+'/'+(streamname == '' ? 'STREAMNAME' : streamname)) $livestreamhint.find('.field.RTMP').setval('rtmp://'+host.host+port.RTMP+'/'+(passw ? passw : 'live')+'/'+(streamname == '' ? 'STREAMNAME' : streamname))
$livestreamhint.find('.field.RTSP').setval('rtsp://'+host.host+port.RTSP+'/'+(streamname == '' ? 'STREAMNAME' : streamname)+(passw ? '?pass='+passw : '')) $livestreamhint.find('.field.RTSP').setval('rtsp://'+host.host+port.RTSP+'/'+(streamname == '' ? 'STREAMNAME' : streamname)+(passw ? '?pass='+passw : ''))
$livestreamhint.find('.field.TS').setval('udp://'+(ip == '' ? host.host : ip)+port.TS+'/')
} }
$main.append(UI.buildUI([ $main.append(UI.buildUI([
@ -2969,22 +3050,36 @@ var UI = {
if (input.name == 'Folder') { if (input.name == 'Folder') {
$main.append($style); $main.append($style);
} }
if (input.name == 'Buffer') { else if (['Buffer','TS'].indexOf(input.name) > -1) {
$livestreamhint.html('<br>').append(UI.buildUI([ var fields = [$('<span>').text('Configure your source to push to:')];
$('<span>').text('Configure your source to push to:') switch (input.name) {
,{ case 'Buffer':
label: 'RTMP', fields.push({
type: 'span', label: 'RTMP',
clipboard: true, type: 'span',
readonly: true, clipboard: true,
classes: ['RTMP'] readonly: true,
},{ classes: ['RTMP']
label: 'RTSP', });
type: 'span', fields.push({
clipboard: true, label: 'RTSP',
readonly: true, type: 'span',
classes: ['RTSP'] clipboard: true,
}])); readonly: true,
classes: ['RTSP']
});
break;
case 'TS':
fields.push({
label: 'TS',
type: 'span',
clipboard: true,
readonly: true,
classes: ['TS']
});
break;
}
$livestreamhint.html('<br>').append(UI.buildUI(fields));
updateLiveStreamHint(); updateLiveStreamHint();
} }
} }
@ -4557,7 +4652,7 @@ var UI = {
); );
var $tbody = $('<tbody>').css('font-size','0.9em'); var $tbody = $('<tbody>').css('font-size','0.9em');
$main.append( $main.append(
$('<table>').append($tbody) $('<table>').addClass('logs').append($tbody)
); );
function color(string){ function color(string){
@ -4583,13 +4678,21 @@ var UI = {
$tbody.html(''); $tbody.html('');
for (var index in logs) { for (var index in logs) {
var $content = $('<span>').addClass('content');
var split = logs[index][2].split('|');
for (var i in split) {
$content.append(
$('<span>').text(split[i])
);
}
$tbody.append( $tbody.append(
$('<tr>').html( $('<tr>').html(
$('<td>').text(UI.format.dateTime(logs[index][0],'long')).css('white-space','nowrap') $('<td>').text(UI.format.dateTime(logs[index][0],'long')).css('white-space','nowrap')
).append( ).append(
$('<td>').html(color(logs[index][1])).css('text-align','center') $('<td>').html(color(logs[index][1])).css('text-align','center')
).append( ).append(
$('<td>').text(logs[index][2]).css('text-align','left') $('<td>').html($content).css('text-align','left')
) )
); );
} }