mirror/iopsys-feed
1
0
Fork 0
mirror of https://dev.iopsys.eu/feed/iopsys.git synced 2026-03-02 15:34:05 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added expandable widget to optimize panel in status page

Browse source
This commit is contained in:
Martin Schröder 2015-05-21 16:21:10 +02:00 • committed by Martin Schröder
parent a4e06c7c8f
commit f12fbcbd4d
7 changed files with 103 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
luciexpress/htdocs/plugins/core/plugin.json
View file

@ -14,13 +14,14 @@
"widgets/luci.navbar",
"widgets/luci.top_bar",
"widgets/luci.slider",
"widgets/luci.expandable",
"widgets/luci.errors",
"widgets/core.modal",
"widgets/luci.input.port",
"widgets/luci.input.port.range",
"widgets/luci.input.timespan",
"widgets/luci.input.radio",
"widgets/luci.input.ipaddress"
"widgets/luci.input.ipaddress"
],
"pages": {
"overview": {

15
luciexpress/htdocs/plugins/core/widgets/luci.expandable.html Normal file
View file

@ -0,0 +1,15 @@
<div class="panel panel-default">
<div class="panel-heading">
<div class="btn-group pull-right">
<span ng-show="status == 'ok'" class="btn pull-right"><i style="color: green;" class="fa fa-check-circle fa-2x"></i></span>
<span ng-show="status == 'progress'" class="btn pull-right"><i style="color: orange;" class="fa fa-spinner fa-2x fa-spin"></i></span>
<span ng-show="status == 'error'" class="btn pull-right"><i style="color: red;" class="fa fa-exclamation-circle fa-2x"></i></span>
</div>
<h3 class="panel-title" style="font-size: 1.5em; padding-top: 0.4em; font-weight: bold; font-family: 'vodafont';">
{{title | translate}}
</h3>
<div style="clear: both;"></div>
</div>
<div class="panel-body" ng-transclude>
</div>
</div>

16
luciexpress/htdocs/plugins/core/widgets/luci.expandable.js Normal file
View file

@ -0,0 +1,16 @@
JUCI.app
.directive("luciExpandable", function(){
var plugin_root = $juci.module("core").plugin_root;
return {
templateUrl: plugin_root + "/widgets/luci.expandable.html",
replace: true,
scope: {
title: "@",
status: "="
},
transclude: true,
link: function (scope, element, attrs) {
}
};
})

22
luciexpress/htdocs/plugins/status/pages/status.status.dsl.js
View file

@ -30,6 +30,28 @@ JUCI.app
$rpc.router.dslstats().done(function(dslstats){
dslstats = dslstats.dslstats;
// compute floating point values (because ubus blobs do not support floats yet)
function reconstruct_floats(obj) {
for (var property in obj) {
if (obj.hasOwnProperty(property)) {
if (typeof obj[property] == "object") {
reconstruct_floats(obj[property]);
} else {
var matches = property.match(/(.*)_x([\d]*)/);
if(matches && matches.length == 3){
try {
obj[matches[1]] = parseFloat(String(obj[property])) / parseFloat(matches[2]);
} catch(e) {
obj[matches[1]] = "Err";
}
}
}
}
}
}
reconstruct_floats(dslstats);
$scope.online = dslstats.status && dslstats.status.length > 0;
// todo fields

61
luciexpress/htdocs/plugins/status/pages/status.status.html
View file

@ -4,43 +4,28 @@
<luci-config-heading>{{ 'Status' | translate }}</luci-config-heading>
<luci-config-info>{{ 'status.status.info' | translate }}</luci-config-info>
</luci-config-section>
<div class="panel panel-default" ng-repeat="sec in sections" ng-show="sec.interface">
<div class="panel-heading">
<div class="btn-group pull-right">
<!--<span class="btn pull-right" ng-show="sec.interface.up" ng-click="expanded = !expanded">
<i class="fa fa-caret-down fa-2x" ng-show="expanded"></i>
<i class="fa fa-caret-left fa-2x" ng-hide="expanded"></i>
</span>-->
<span ng-show="sec.interface.up" class="btn pull-right"><i style="color: green;" class="fa fa-check-circle fa-2x"></i></span>
<span ng-show="sec.interface.pending" class="btn pull-right"><i style="color: orange;" class="fa fa-spinner fa-2x fa-spin"></i></span>
<span ng-show="!sec.interface.up && !sec.interface.pending" class="btn pull-right"><i style="color: red;" class="fa fa-exclamation-circle fa-2x"></i></span>
</div>
<h3 class="panel-title" style="font-size: 1.5em; padding-top: 0.4em; font-weight: bold; font-family: 'vodafont';">
{{sec.name | translate}}
</h3>
<div style="clear: both;"></div>
</div>
<div class="panel-body "> <!-- ng-show="sec.interface.up && expanded" >-->
<div ng-show="sec.interface.errors" class="alert alert-danger">
<ul>
<li ng-repeat="err in sec.interface.errors">{{err.subsystem}}: {{err.code}}</li>
</ul>
</div>
<luci-config-lines ng-hide="sec.interface.errors" >
<luci-config-line title="{{'IP Address'|translate}}">
<strong>{{sec.interface["ipv4-address"][0].address}}</strong>
</luci-config-line>
<luci-config-line title="{{'Gateway'|translate}}" ng-show="sec.interface['route'][0].nexthop">
<strong>{{sec.interface["route"][0].nexthop}}</strong>
</luci-config-line>
<luci-config-line title="{{'Primary DNS'|translate}}" ng-show="sec.interface['dns-server'][0]">
<strong>{{sec.interface["dns-server"][0]}}</strong>
</luci-config-line>
<luci-config-line title="{{'Secondary DNS'|translate}}" ng-show="sec.interface['dns-server'][1]">
<strong>{{sec.interface["dns-server"][1]}}</strong>
</luci-config-line>
</luci-config-lines>
</div>
</div>
<luci-expandable title="{{sec.name}}" status="sec.status" ng-repeat="sec in sections" ng-show="sec.interface">
<luci-config-lines ng-hide="sec.interface.errors" >
<luci-config-line title="{{'IP Address'|translate}}">
<strong>{{sec.interface["ipv4-address"][0].address}}</strong>
</luci-config-line>
<luci-config-line title="{{'Gateway'|translate}}" ng-show="sec.interface['route'][0].nexthop">
<strong>{{sec.interface["route"][0].nexthop}}</strong>
</luci-config-line>
<luci-config-line title="{{'Primary DNS'|translate}}" ng-show="sec.interface['dns-server'][0]">
<strong>{{sec.interface["dns-server"][0]}}</strong>
</luci-config-line>
<luci-config-line title="{{'Secondary DNS'|translate}}" ng-show="sec.interface['dns-server'][1]">
<strong>{{sec.interface["dns-server"][1]}}</strong>
</luci-config-line>
</luci-config-lines>
</luci-expandable>
<luci-expandable title="DSL" status="dsl_status">
<luci-config-lines >
<luci-config-line title="{{'Line Status'|translate}}">
<strong>{{dslinfo.status}}</strong>
</luci-config-line>
</luci-config-lines>
</luci-expandable>
</div>
</luci-layout-with-sidebar>

20
luciexpress/htdocs/plugins/status/pages/status.status.js
View file

@ -31,11 +31,27 @@ JUCI.app
});
});
sections = sections.sort(function(a, b) { return a.interface.up > b.interface.up; });
for(var c = 0; c < $scope.sections.length; c++){
Object.assign($scope.sections[c], sections[c]);
for(var c = 0; c < sections.length; c++){
var sec = sections[c];
if(sec.interface.up) sec.status = "ok";
else if(sec.interface.pending) sec.status = "progress";
else sec.status = "error";
Object.assign($scope.sections[c], sec);
}
$scope.$apply();
next();
},
function(next){
$rpc.router.dslstats().done(function(result){
switch(result.dslstats.status){
case 'Idle': $scope.dsl_status = 'error'; break;
case 'Showtime': $scope.dsl_status = 'ok'; break;
default: $scope.dsl_status = 'progress'; break;
}
$scope.dslinfo = result.dslstats;
$scope.$apply();
next();
});
}
], function(){
resume();

7
luciexpress/htdocs/plugins/status/tests/test-status.js
View file

@ -20,4 +20,11 @@ describe("Status", function(){
expect($rpc.router).to.be.ok();
expect($rpc.router.info).to.be.ok();
});
it("should have accessible router.igmptable call", function(){
expect($rpc.router).to.be.ok();
expect($rpc.router.igmptable).to.be.ok();
$rpc.router.igmptable()
.done(function(){ done(); })
.fail(function(){ throw new Error("Was unable to call router.igmptable"); });
});
});