From b5112daee86773fcbbb576b4681e1b7840bbf7a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20T=C3=B6rnblom?= Date: Mon, 24 Feb 2014 12:00:42 +0100 Subject: [PATCH] webui: added bandwidth monitor for stream input --- src/webui/static/app/status.js | 113 +++++++++++++++++++++++++++++---- 1 file changed, 102 insertions(+), 11 deletions(-) diff --git a/src/webui/static/app/status.js b/src/webui/static/app/status.js index c080275c..168e5f04 100644 --- a/src/webui/static/app/status.js +++ b/src/webui/static/app/status.js @@ -69,7 +69,7 @@ tvheadend.status_subs = function() { function renderBw(value, item, store) { var txt = parseInt(value / 125); - var href = 'javascript:tvheadend.status_bandwidth_monitor(' + store.id + ');'; + var href = 'javascript:tvheadend.subscription_bw_monitor(' + store.id + ');'; return '' + txt + ''; } @@ -151,7 +151,7 @@ tvheadend.status_subs = function() { */ tvheadend.status_streams = function() { - var stream_store = new Ext.data.JsonStore({ + tvheadend.streamStatusStore = new Ext.data.JsonStore({ root : 'entries', totalProperty : 'totalCount', fields : [ { @@ -184,9 +184,9 @@ tvheadend.status_streams = function() { }); tvheadend.comet.on('input_status', function(m){ - if (m.reload != null) stream_store.reload(); + if (m.reload != null) tvheadend.streamStatusStore.reload(); if (m.update != null) { - var r = stream_store.getById(m.uuid); + var r = tvheadend.streamStatusStore.getById(m.uuid); if (r) { r.data.subs = m.subs; r.data.weight = m.weight; @@ -195,10 +195,14 @@ tvheadend.status_streams = function() { r.data.unc = m.unc; r.data.snr = m.snr; r.data.bps = m.bps; - stream_store.afterEdit(r); - stream_store.fireEvent('updated', stream_store, r, Ext.data.Record.COMMIT); + + tvheadend.streamStatusStore.afterEdit(r); + tvheadend.streamStatusStore.fireEvent('updated', + tvheadend.streamStatusStore, + r, + Ext.data.Record.COMMIT); } else { - stream_store.reload(); + tvheadend.streamStatusStore.reload(); } } }); @@ -211,8 +215,10 @@ tvheadend.status_streams = function() { colored : true }); - function renderBw(value) { - return parseInt(value / 1024); + function renderBw(value, item, store) { + var txt = parseInt(value / 1024); + var href = "javascript:tvheadend.stream_bw_monitor('" + store.id + "');"; + return '' + txt + ''; } var cm = new Ext.grid.ColumnModel([{ @@ -264,7 +270,7 @@ tvheadend.status_streams = function() { disableSelection : true, title : 'Stream', iconCls : 'hardware', - store : stream_store, + store : tvheadend.streamStatusStore, cm : cm, flex: 1, viewConfig : { @@ -366,7 +372,7 @@ tvheadend.status = function() { } -tvheadend.status_bandwidth_monitor = function(id) { +tvheadend.subscription_bw_monitor = function(id) { var inputSeries = new TimeSeries(); var outputSeries = new TimeSeries(); var chart = new SmoothieChart({ @@ -465,3 +471,88 @@ tvheadend.status_bandwidth_monitor = function(id) { Ext.TaskMgr.start(task); }; + + +tvheadend.stream_bw_monitor = function(id) { + var inputSeries = new TimeSeries(); + var chart = new SmoothieChart({ + minValue: 0, + grid: { + sharpLines: true, + fillStyle: 'transparent', + verticalSections: 0, + millisPerLine: 0 + }, + labels: { + disabled: false, + fillStyle: '#000000', + fontSize: 12 + } + }); + + chart.addTimeSeries(inputSeries, { + strokeStyle: 'rgb(0, 255, 0)', + fillStyle: 'rgba(0, 255, 0, 0.5)', + lineWidth: 3 + }); + + var inputLbl = new Ext.form.Label(); + + var win = new Ext.Window({ + title: 'Bandwidth monitor', + layout:'fit', + resizable: false, + width : 450 + 30, + height : 150 + 50, + constrainHeader : true, + tbar : [inputLbl], + items: { + xtype: 'box', + autoEl: { + tag: 'canvas', + width: 450, + height: 150 + }, + listeners: { + render: { + scope: this, + fn: function(item) { + chart.streamTo(item.el.dom, 1000); + } + }, + resize: { + scope: this, + fn: function(item) { + chart.render(item.el.dom, 1000); + } + } + } + } + }); + + var task = { + interval: 1000, + run: function() { + r = tvheadend.streamStatusStore.getById(id); + if (typeof r === 'undefined') { + chart.stop(); + Ext.TaskMgr.stop(task); + return; + } + + win.setTitle(r.data.input + ' (' + r.data.stream + ')'); + var input = Math.round(r.data.bps / 1024); + inputLbl.setText('Input: ' + input + ' kb/s'); + inputSeries.append(new Date().getTime(), input); + } + }; + + win.on('close', function() { + chart.stop(); + Ext.TaskMgr.stop(task); + }); + + win.show(); + + Ext.TaskMgr.start(task); +};