sidebar live toggling of node properties

This commit is contained in:
Oliver Gorwits
2014-10-11 13:01:03 +01:00
parent df6f2dc3c7
commit 33880ce8b3
4 changed files with 56 additions and 61 deletions

View File

@@ -130,15 +130,13 @@ get '/ajax/content/device/ports' => require_login sub {
} }
# retrieve active/all connected nodes, if asked for # retrieve active/all connected nodes, if asked for
$rs $rs = $rs->search_rs( {},
= $rs->search_rs( {},
{ prefetch => 'nodes', bind => [ $device->ip ], { prefetch => 'nodes', bind => [ $device->ip ],
order_by => [ order_by => [
{ -desc => 'nodes.active' }, { -desc => 'nodes.active' },
{ -asc => 'nodes.mac' }, { -asc => 'nodes.mac' },
{ -asc => 'nodes.ip' }, { -asc => 'nodes.ip' },
] }) ] });
if param('c_nodes');
my @results = $rs->hri->all; my @results = $rs->hri->all;
return unless scalar @results; return unless scalar @results;

View File

@@ -381,13 +381,8 @@ $(document).ready(function() {
} }
} }
}, { }, {
[% IF params.c_nodes %]
"title": 'Connected Devices and Nodes', "title": 'Connected Devices and Nodes',
"name": 'c_nodes', "name": 'c_nodes',
[% ELSE %]
"title": 'Connected Devices',
"name": 'c_neighbors',
[% END %]
"data": "null", "data": "null",
"defaultContent": "", "defaultContent": "",
"render": function ( data, type, row, meta ) { "render": function ( data, type, row, meta ) {
@@ -418,18 +413,16 @@ $(document).ready(function() {
+ '&prefer=port">' + he.encode(row.remote_port || '') + '</a>'; + '&prefer=port">' + he.encode(row.remote_port || '') + '</a>';
} }
cell_str += '<br/>'; cell_str += '<br/>';
[% IF params.neigh_id %]
if (row.remote_id || row.remote_type) { if (row.remote_id || row.remote_type) {
cell_str += '('; cell_str += '<span class="neigh_id"> (';
if (row.remote_id) { if (row.remote_id) {
cell_str += ' id: ' + he.encode(row.remote_id); cell_str += ' id: ' + he.encode(row.remote_id);
} }
else if (row.remote_type) { else if (row.remote_type) {
cell_str += ' type: ' + he.encode(row.remote_type); cell_str += ' type: ' + he.encode(row.remote_type);
} }
cell_str += ' )<br/>'; cell_str += ' )<br/> </span>';
} }
[% END %]
} }
else if (row.remote_ip) { else if (row.remote_ip) {
cell_str += '<i class="icon-unlink text-error"></i>&nbsp;'; cell_str += '<i class="icon-unlink text-error"></i>&nbsp;';
@@ -446,38 +439,33 @@ $(document).ready(function() {
cell_str += ' - ' + he.encode(row.remote_port || ''); cell_str += ' - ' + he.encode(row.remote_port || '');
} }
cell_str += '</a><br/>'; cell_str += '</a><br/>';
[% IF params.neigh_id %]
if (row.remote_id || row.remote_type) { if (row.remote_id || row.remote_type) {
cell_str += '('; cell_str += '<span class="neigh_id"> (';
if (row.remote_id) { if (row.remote_id) {
cell_str += ' id: ' + he.encode(row.remote_id); cell_str += ' id: ' + he.encode(row.remote_id);
} }
else if (row.remote_type) { else if (row.remote_type) {
cell_str += ' type: ' + he.encode(row.remote_type); cell_str += ' type: ' + he.encode(row.remote_type);
} }
cell_str += ' )<br/>'; cell_str += ' )<br/> </span>';
} }
[% END %]
} }
else { else {
cell_str += '<i class="icon-unlink text-error"></i>&nbsp; (possible uplink)'; cell_str += '<i class="icon-unlink text-error"></i>&nbsp; (possible uplink)';
} }
} }
[% IF params.c_nodes %] cell_str += '<span class="c_nodes">';
var macfmt = '[% params.mac_format %]'; var macfmt = '[% params.mac_format %]';
for (index = 0; index < row.nodes.length; ++index) { for (index = 0; index < row.nodes.length; ++index) {
if ((row.remote_ip || row.is_uplink) && index === 0 ) { if ((row.remote_ip || row.is_uplink) && index === 0 ) {
cell_str += '<br/>'; cell_str += '<br/>';
} }
if (row.nodes[index].active === 0) { if (row.nodes[index].active === 0) {
[% IF params.n_archived %] cell_str += '<span class="n_archived">';
if (index > 0 ) { if (index > 0 ) {
cell_str += '<br/>'; cell_str += '<br/>';
} }
cell_str += '<i class="icon-book"></i>&nbsp; '; cell_str += '<i class="icon-book"></i>&nbsp; ';
[% ELSE %]
continue;
[% END %]
} }
else if (index > 0 && row.nodes[index].active !== 0) { else if (index > 0 && row.nodes[index].active !== 0) {
cell_str += '<br/>'; cell_str += '<br/>';
@@ -492,19 +480,21 @@ $(document).ready(function() {
var fmac = formatMacAddress(row.nodes[index].mac, macfmt); var fmac = formatMacAddress(row.nodes[index].mac, macfmt);
cell_str += encodeURIComponent(fmac) + '">' cell_str += encodeURIComponent(fmac) + '">'
+ he.encode(fmac) + '</a>'; + he.encode(fmac) + '</a>';
[% IF params.n_vendor %]
// n_vendor
if (row.nodes[index].abbrev) { if (row.nodes[index].abbrev) {
cell_str += '<span class="n_vendor"> (' cell_str += '<span class="n_vendor"> ('
+ '<a href="[%+ uri_for('/report/nodevendor') %]?vendor=' + '<a href="[%+ uri_for('/report/nodevendor') %]?vendor='
+ encodeURIComponent(row.nodes[index].abbrev) + '">' + encodeURIComponent(row.nodes[index].abbrev) + '">'
+ he.encode(row.nodes[index].abbrev || '') + '</a>)</span>'; + he.encode(row.nodes[index].abbrev || '') + '</a>)</span>';
} }
[% END %]
if (row.nodes[index].vlans.length > 0) { if (row.nodes[index].vlans.length > 0) {
var vl = row.nodes[index].vlans ? row.nodes[index].vlans.join(", ") : ""; var vl = row.nodes[index].vlans ? row.nodes[index].vlans.join(", ") : "";
cell_str += ' (on vlan ' + vl + ')'; cell_str += ' (on vlan ' + vl + ')';
} }
[% IF params.n_ssid %]
// n_ssid
if (row.nodes[index].ssids && row.nodes[index].ssids.length > 0) { if (row.nodes[index].ssids && row.nodes[index].ssids.length > 0) {
var arr = row.nodes[index].ssids; var arr = row.nodes[index].ssids;
arr = arr.sort(); arr = arr.sort();
@@ -513,23 +503,20 @@ $(document).ready(function() {
}); });
cell_str += '<span class="n_ssid"> (SSID: ' + arr.join(" ") + ')</span>'; cell_str += '<span class="n_ssid"> (SSID: ' + arr.join(" ") + ')</span>';
} }
[% END %]
[% IF params.n_age %] // n_age
cell_str += '<span class="n_age"> ('; cell_str += '<span class="n_age"> (';
var now = moment(); var now = moment();
var t_last = moment(row.nodes[index].time_last); var t_last = moment(row.nodes[index].time_last);
cell_str += t_last.from(now) + ')</span>'; cell_str += t_last.from(now) + ')</span>';
[% END %]
[% IF params.n_ip %] // n_ip
if (row.nodes[index].ip && row.nodes[index].ip.length > 0) { if (row.nodes[index].ip && row.nodes[index].ip.length > 0) {
cell_str += '<span class="n_ip">'; cell_str += '<span class="n_ip">';
for (idx = 0; idx < row.nodes[index].ip.length; ++idx) { for (idx = 0; idx < row.nodes[index].ip.length; ++idx) {
if (row.nodes[index].ip_active[idx] === 0) { if (row.nodes[index].ip_active[idx] === 0) {
[% IF params.n_archived %] cell_str += '<span class="n_archived">';
cell_str += '<br/>&nbsp; <i class="icon-book"></i>&nbsp; '; cell_str += '<br/>&nbsp; <i class="icon-book"></i>&nbsp; ';
[% ELSE %]
continue;
[% END %]
} }
else { else {
cell_str += '<br/>&nbsp;'; cell_str += '<br/>&nbsp;';
@@ -543,11 +530,14 @@ $(document).ready(function() {
else { else {
cell_str += he.encode(row.nodes[index].ip[idx]) + '</a>'; cell_str += he.encode(row.nodes[index].ip[idx]) + '</a>';
} }
if (row.nodes[index].ip_active[idx] === 0) {
cell_str += '</span>';
}
} }
cell_str += '</span>'; cell_str += '</span>';
} }
[% END %]
[% IF params.n_netbios %] // n_netbios
if (row.nodes[index].nbname) { if (row.nodes[index].nbname) {
cell_str += '<span class="n_netbios">' cell_str += '<span class="n_netbios">'
+ '<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\\\\<a href="[% uri_for('/report/netbios') %]?domain='; + '<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\\\\<a href="[% uri_for('/report/netbios') %]?domain=';
@@ -563,9 +553,12 @@ $(document).ready(function() {
+ encodeURIComponent(row.nodes[index].nb_ip) + '">' + encodeURIComponent(row.nodes[index].nb_ip) + '">'
+ he.encode(row.nodes[index].nb_ip) + '</a></span>'; + he.encode(row.nodes[index].nb_ip) + '</a></span>';
} }
[% END %]
if (row.nodes[index].active === 0) {
cell_str += '</span>';
} }
[% END %] }
cell_str += '</span>';
return cell_str; return cell_str;
} }
}, { }, {

View File

@@ -95,6 +95,12 @@
} }
}); });
// dynamic show/hide data in device ports connected nodes/devices column
$('#ports_form').on('change', "input[type=checkbox].nd_dynamic-dp", function(event) {
var target = $(this).attr('id');
$('span.' + target).toggle();
});
// activity for admin tasks in device details // activity for admin tasks in device details
$('#details_pane').on('click', '.nd_adminbutton', function(event) { $('#details_pane').on('click', '.nd_adminbutton', function(event) {
// stop form from submitting normally // stop form from submitting normally

View File

@@ -57,6 +57,22 @@
</label></span> </label></span>
<div id="nd_columns" class="collapse in"> <div id="nd_columns" class="collapse in">
<ul id="nd_column-controls" class="nd_inputs-list unstyled"> <ul id="nd_column-controls" class="nd_inputs-list unstyled">
[% FOREACH item IN vars.port_columns %]
[% NEXT IF item.name == 'c_admin' AND NOT user_has_role('port_control') %]
[% IF item.name == 'c_admin' OR item.name == 'c_nodes' %]
<li>
<label class="checkbox">
<input type="checkbox" class="nd_dynamic-dp" id="[% item.name | html_entity %]"
name="[% item.name | html_entity %]"[% ' checked="checked"' IF params.${item.name} %] />
[% IF item.name == 'c_admin' %]
<span class="label label-info">[% item.label | html_entity %]</span>
[% ELSE %]
[% item.label | html_entity %]
[% END %]
</label>
</li>
[% END %]
[% END %]
</ul> </ul>
</div> </div>
</div> </div>
@@ -93,7 +109,7 @@
</li> </li>
<li> <li>
<label class="checkbox"> <label class="checkbox">
<input type="checkbox" id="neigh_id" <input type="checkbox" class="nd_dynamic-dp" id="neigh_id"
name="neigh_id"[% ' checked="checked"' IF params.neigh_id %] /> name="neigh_id"[% ' checked="checked"' IF params.neigh_id %] />
Connected Device ID Connected Device ID
</label> </label>
@@ -119,7 +135,7 @@
[% FOREACH item IN vars.connected_properties %] [% FOREACH item IN vars.connected_properties %]
<li> <li>
<label class="checkbox"> <label class="checkbox">
<input type="checkbox" id="[% item.name | html_entity %]" <input type="checkbox" class="nd_dynamic-dp" id="[% item.name | html_entity %]"
name="[% item.name | html_entity %]"[% ' checked="checked"' IF params.${item.name} %] /> name="[% item.name | html_entity %]"[% ' checked="checked"' IF params.${item.name} %] />
[% item.label | html_entity %] [% item.label | html_entity %]
</label> </label>
@@ -128,24 +144,6 @@
</ul> </ul>
</div> </div>
</div> </div>
<ul class="nd_inputs-list unstyled">
[% FOREACH item IN vars.port_columns %]
[% NEXT IF item.name == 'c_admin' AND NOT user_has_role('port_control') %]
[% IF item.name == 'c_admin' OR item.name == 'c_nodes' %]
<li>
<label class="checkbox">
<input type="checkbox" id="[% item.name | html_entity %]"
name="[% item.name | html_entity %]"[% ' checked="checked"' IF params.${item.name} %] />
[% IF item.name == 'c_admin' %]
<span class="label label-info">[% item.label | html_entity %]</span>
[% ELSE %]
[% item.label | html_entity %]
[% END %]
</label>
</li>
[% END %]
[% END %]
</ul>
<div class="btn-group"> <div class="btn-group">
<button id="[% tab.tag %]_submit" type="submit" class="btn btn-info nd_sidebar-btn-drop"> <button id="[% tab.tag %]_submit" type="submit" class="btn btn-info nd_sidebar-btn-drop">
<i class="icon-search icon-large pull-left nd_navbar-icon"></i> Update View</button> <i class="icon-search icon-large pull-left nd_navbar-icon"></i> Update View</button>