Skip to content

GitLab

Commit 25ed25b3 authored by Francesc Guasch's avatar Francesc Guasch
Browse files

refactor(frontend): turn list machines into a hash 

- Removed order by other fields
- Also tweaked ping backed so it is more accurate

issue #1276
parent ab68ce43
Hide whitespace changes
Inline Side-by-side
lib/Ravada/WebSocket.pm
View file @ 25ed25b3
...@@ -11,6 +11,7 @@ no warnings "experimental::signatures"; ...@@ -11,6 +11,7 @@ no warnings "experimental::signatures";
use feature qw(signatures); use feature qw(signatures);
my $DEBUG=0; my $DEBUG=0;
my $T0 = time;
has clients => ( has clients => (
is => 'ro' is => 'ro'
...@@ -205,17 +206,31 @@ sub _different_list($list1, $list2) { ...@@ -205,17 +206,31 @@ sub _different_list($list1, $list2) {
} }
sub _different_hash($h1,$h2) { sub _different_hash($h1,$h2) {
return 1 if keys %$h1 != keys %$h2; my $different = 0;
for my $key (keys %$h1) { for my $key (keys %$h1) {
next if $key =~ /^_/;
next if !defined $h1->{$key} && !defined $h2->{$key}; next if !defined $h1->{$key} && !defined $h2->{$key};
if (!exists $h2->{$key} if (!exists $h2->{$key}
|| !defined $h1->{$key} && defined $h2->{$key} || !defined $h1->{$key} && defined $h2->{$key}
|| defined $h1->{$key} && !defined $h2->{$key} || defined $h1->{$key} && !defined $h2->{$key}
|| _different($h1->{$key}, $h2->{$key})) { || _different($h1->{$key}, $h2->{$key})) {
return 1; unlock_hash(%$h1);
$h1->{_timestamp} = time - $T0;
lock_hash(%$h1);
$different = 1;
} }
} }
return 0; if (!exists $h1->{_timestamp}) {
unlock_hash(%$h1);
if (exists $h2->{_timestamp}) {
$h1->{_timestamp} = $h2->{_timestamp}
} else {
$h1->{_timestamp} = time - $T0;
}
lock_hash(%$h1);
}
return $different;
} }
sub _different($var1, $var2) { sub _different($var1, $var2) {
return 1 if !defined $var1 && defined $var2; return 1 if !defined $var1 && defined $var2;
......
public/js/admin.js
View file @ 25ed25b3
...@@ -10,6 +10,20 @@ ravadaApp.directive("solShowMachine", swMach) ...@@ -10,6 +10,20 @@ ravadaApp.directive("solShowMachine", swMach)
.controller("new_node", newNodeCtrl) .controller("new_node", newNodeCtrl)
; ;
ravadaApp.filter('orderObjectBy', function() {
return function(items, field, reverse) {
var filtered = [];
angular.forEach(items, function(item) {
filtered.push(item);
});
filtered.sort(function (a, b) {
return (a[field] > b[field] ? 1 : -1);
});
if(reverse) filtered.reverse();
return filtered;
};
});
function swMach() { function swMach() {
return { return {
restrict: "E", restrict: "E",
...@@ -165,20 +179,33 @@ ravadaApp.directive("solShowMachine", swMach) ...@@ -165,20 +179,33 @@ ravadaApp.directive("solShowMachine", swMach)
var data = JSON.parse(event.data); var data = JSON.parse(event.data);
$scope.$apply(function () { $scope.$apply(function () {
$scope.list_machines = [];
var mach; var mach;
if (Object.keys($scope.list_machines).length != data.length) {
$scope.list_machines = {};
}
for (var i=0, iLength = data.length; i<iLength; i++){ for (var i=0, iLength = data.length; i<iLength; i++){
mach = data[i]; mach = data[i];
if (!mach.id_base){ if (!mach.id_base
&& (typeof $scope.list_machines[mach.id] == 'undefined'
|| $scope.list_machines[mach.id]._timestamp != mach._timestamp)
){
$scope.list_machines[mach.id] = mach; $scope.list_machines[mach.id] = mach;
$scope.list_machines[mach.id].childs = []; $scope.list_machines[mach.id].childs = {};
} }
} }
$scope.n_clones = 0; $scope.n_clones = 0;
for (var i=0, iLength = data.length; i<iLength; i++){ for (var i=0, iLength = data.length; i<iLength; i++){
mach = data[i]; mach = data[i];
if (mach.id_base){ var childs;
$scope.list_machines[mach.id_base].childs.push(mach); if (mach.id_base) {
childs = $scope.list_machines[mach.id_base].childs;
}
if (mach.id_base
&& ( typeof childs[mach.id] == 'undefined'
|| childs[mach.id]._timestamp != mach._timestamp
)
){
childs[mach.id] = mach;
$scope.n_clones++; $scope.n_clones++;
} }
} }
...@@ -188,10 +215,7 @@ ravadaApp.directive("solShowMachine", swMach) ...@@ -188,10 +215,7 @@ ravadaApp.directive("solShowMachine", swMach)
$scope.hide_clones = true; $scope.hide_clones = true;
} }
} }
for (var i = $scope.list_machines.length-1; i >= 0; i--){ for (var i in $scope.list_machines){
if (!$scope.list_machines[i]){
$scope.list_machines.splice(i,1);
}
mach = $scope.list_machines[i]; mach = $scope.list_machines[i];
if (!mach.id_base && typeof $scope.show_clones[mach.id] == 'undefined' if (!mach.id_base && typeof $scope.show_clones[mach.id] == 'undefined'
&& typeof mach.childs != 'undefined' && typeof mach.childs != 'undefined'
...@@ -238,6 +262,7 @@ ravadaApp.directive("solShowMachine", swMach) ...@@ -238,6 +262,7 @@ ravadaApp.directive("solShowMachine", swMach)
} }
}; };
$scope.list_machines = {};
$scope.orderParam = ['name']; $scope.orderParam = ['name'];
$scope.auto_hide_clones = true; $scope.auto_hide_clones = true;
$scope.orderMachineList = function(type1,type2){ $scope.orderMachineList = function(type1,type2){
...@@ -251,7 +276,7 @@ ravadaApp.directive("solShowMachine", swMach) ...@@ -251,7 +276,7 @@ ravadaApp.directive("solShowMachine", swMach)
$scope.showClones = function(value){ $scope.showClones = function(value){
$scope.auto_hide_clones = false; $scope.auto_hide_clones = false;
$scope.hide_clones = !value; $scope.hide_clones = !value;
for (var i = $scope.list_machines.length-1; i >= 0; i--){ for (var i in $scope.list_machines){
mach = $scope.list_machines[i]; mach = $scope.list_machines[i];
if (!mach.id_base) { if (!mach.id_base) {
$scope.show_clones[mach.id] = value; $scope.show_clones[mach.id] = value;
...@@ -305,12 +330,15 @@ ravadaApp.directive("solShowMachine", swMach) ...@@ -305,12 +330,15 @@ ravadaApp.directive("solShowMachine", swMach)
$scope.cancel_modal=function(){ $scope.cancel_modal=function(){
$scope.modalOpened=false; $scope.modalOpened=false;
} }
$scope.toggle_show_clones =function(id) {
$scope.show_clones[id] = !$scope.show_clones[id];
}
//On load code //On load code
$scope.modalOpened=false; $scope.modalOpened=false;
$scope.rename= {new_name: 'new_name'}; $scope.rename= {new_name: 'new_name'};
$scope.show_rename = false; $scope.show_rename = false;
$scope.new_name_duplicated=false; $scope.new_name_duplicated=false;
$scope.show_clones = {}; $scope.show_clones = { '0': false };
}; };
function usersPageC($scope, $http, $interval, request) { function usersPageC($scope, $http, $interval, request) {
......
templates/main/admin_machines.html.ep
View file @ 25ed25b3
...@@ -101,7 +101,7 @@ ...@@ -101,7 +101,7 @@
<div class="col-md-4" align="right"> <div class="col-md-4" align="right">
% if ($_user->can_create_machine){ % if ($_user->can_create_machine){
<h2> <h2>
<button class="btn btn-warning" ng-click="list_machines=[];subscribe_all('<%= url_for('ws_subscribe')->to_abs %>');"><i class="fa fa-sync-alt" aria-hidden="true"></i></button> <button class="btn btn-warning" ng-click="list_machines={};subscribe_all('<%= url_for('ws_subscribe')->to_abs %>');"><i class="fa fa-sync-alt" aria-hidden="true"></i></button>
<a type="button" class="btn btn-success" href="/new_machine.html"> <a type="button" class="btn btn-success" href="/new_machine.html">
<b><%=l 'New Machine' %></b> <b><%=l 'New Machine' %></b>
<i ng-show="download_working" <i ng-show="download_working"
...@@ -120,14 +120,7 @@ ...@@ -120,14 +120,7 @@
<table class="table admin-cont-body" border="0" ng-show="list_machines" ng-cloak="1"> <table class="table admin-cont-body" border="0" ng-show="list_machines" ng-cloak="1">
<thead> <thead>
<tr> <tr>
<th ><div class="lgMachName machine-button" style="display:inline;float:down" <th ><div class="lgMachName machine-button" style="display:inline;float:down">
ng-click="orderMachineList('name','')">
<i class="fas fa-exchange fa-rotate-90"
ng-hide="orderParam[0] === 'name' || orderParam[0] === '-name'"></i>
<i class="fas fa-arrow-down" ng-cloak
ng-hide="orderParam[0] !== 'name'"></i>
<i class="fas fa-arrow-up" ng-cloak
ng-hide="orderParam[0] !== '-name'"></i>
<%=l 'Machine Name' %></div> <%=l 'Machine Name' %></div>
<div style="float:right" ng-show="n_clones"> <div style="float:right" ng-show="n_clones">
<a ng-show="hide_clones" ng-click="showClones(true)" <a ng-show="hide_clones" ng-click="showClones(true)"
...@@ -147,27 +140,23 @@ ...@@ -147,27 +140,23 @@
% if ($autostart) { % if ($autostart) {
<th class="lgMachToggle"><%=l 'Autostart'%></th> <th class="lgMachToggle"><%=l 'Autostart'%></th>
% } % }
<th class="lgMachToggle machine-button" <th class="lgMachToggle machine-button">
ng-click="orderMachineList('is_active','is_paused')">
<div style="float:right"> <div style="float:right">
<i class="fas fa-exchange-alt fa-rotate-90" ng-hide="orderParam[0] === 'is_active' || orderParam[0] === '-is_active'"></i>
<i class="fas fa-arrow-down" ng-cloak ng-hide="orderParam[0] !== 'is_active'"></i>
<i class="fas fa-arrow-up" ng-cloak ng-hide="orderParam[0] !== '-is_active'"></i>
<%=l 'Status' %></div></th> <%=l 'Status' %></div></th>
<th class="lgMachActions"><%=l 'Actions' %></th> <th class="lgMachActions"><%=l 'Actions' %></th>
<th class="lgMachNode"><%=l 'Node' %></th> <th class="lgMachNode"><%=l 'Node' %></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr ng-repeat-start="machine in list_machines | orderBy : orderParam" class="bg-light"> <tr ng-repeat-start="machine in list_machines| orderObjectBy:'name'" class="bg-light">
<td class="lgMachName"> <td class="lgMachName">
<a align="right" href="/machine/manage/{{machine.id}}.html" <a align="right" href="/machine/manage/{{machine.id}}.html"
ng-class="{disabled: !machine.can_manage}" ng-class="{disabled: !machine.can_manage}"
title ="<%=l 'Manage machine' %>"><b title ="<%=l 'Manage machine' %>"><b
ng-cloak>{{machine.name}}</b></a> {{machine.comment}} >{{machine.name}}</b></a> {{machine.comment}}
<button ng-show="machine.has_clones" type="button" <button ng-show="machine.has_clones" type="button"
class="badge badge-light text-blue" class="badge badge-light text-blue"
ng-click="show_clones[machine.id] = !show_clones[machine.id]" ng-click="toggle_show_clones(machine.id)"
title="<%=l 'Show/Hide clones' %>"> title="<%=l 'Show/Hide clones' %>">
<b ng-show="show_clones[machine.id]" >-</b> <b ng-show="show_clones[machine.id]" >-</b>
<b ng-show="!show_clones[machine.id]">+</b> <b ng-show="!show_clones[machine.id]">+</b>
...@@ -293,7 +282,7 @@ ...@@ -293,7 +282,7 @@
</td> </td>
<td class="lgMachNode"></td> <td class="lgMachNode"></td>
</tr> </tr>
<tr ng-show="show_clones[machine.id]" ng-repeat="child in machine.childs | orderBy : orderParam"> <tr ng-show="show_clones[machine.id]" ng-repeat="child in machine.childs | orderObjectBy:'name'">
<td class="lgMachName"> <td class="lgMachName">
&nbsp;<i title="[cloned]" class="fa fa-fw fa-long-arrow-right" &nbsp;<i title="[cloned]" class="fa fa-fw fa-long-arrow-right"
style="color:white"></i> style="color:white"></i>
...@@ -302,7 +291,7 @@ ...@@ -302,7 +291,7 @@
<a align="right" href="/machine/manage/{{child.id}}.html" <a align="right" href="/machine/manage/{{child.id}}.html"
ng-class="{disabled: !child.can_manage}" ng-class="{disabled: !child.can_manage}"
title ="Manage machine"><i title ="Manage machine"><i
ng-cloak>&nbsp;{{child.name}}</i></a> {{child.comment}} ng-cloak>&nbsp;{{child.name}}</i></a>{{child.comment}}
</td> </td>
<td class="lgMachToggle"> <td class="lgMachToggle">
% if ($_user->can_create_base ) { % if ($_user->can_create_base ) {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment