Change from ?tab=tabname param to .../tabname path

The reason for this is that DataTables keys local data on the page path, so
each tab should have its own path. We're already doing this for reports and
admin tasks, so it also makes sense to have consistency with search and device
tabs.

Squashed commit of the following:

commit 4ad33a23a81122496adfe561ad14f039e6255eff
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sat Oct 25 14:46:17 2014 +0100

    fix search preference selection

commit 363e094935d386961e8773f787af41c46b83129a
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sat Oct 25 14:36:45 2014 +0100

    fix css selector to match begins with /search

commit 43c972ee0d9401f74dcc3bd30052dba130b0d068
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sat Oct 25 14:18:24 2014 +0100

    fix history push

commit 84f83eb46874b0222c0484014389713e4f027c8a
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sat Oct 25 14:06:44 2014 +0100

    update sidebar form for tab-path, remove hidden tab name field

commit 344d4679a83f714c998cd475c041f8effab0c696
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sat Oct 25 14:05:49 2014 +0100

    update template links for tab path

commit 9cf370d7eb4413aac6fc19c2c13a9bf670600965
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sat Oct 25 14:04:57 2014 +0100

    move tab-specific JS from common into specific includes files

commit c2d8592a18e389535368d1e74fed29fe5a0eabd8
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sat Oct 25 14:02:46 2014 +0100

    fix mode

commit 52487cea47eaaea7f5c74536ad6d4bb2a8d6ba4c
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sat Oct 25 14:01:15 2014 +0100

    move from tab param to tabname template var

commit b5a2424631a0050d5de3bc658746a40cd822e869
Merge: 531782b d8102bf
Author: Oliver Gorwits <oliver@cpan.org>
Date:   Sat Oct 25 10:50:00 2014 +0100

    Merge branch 'master' into em-device-ports-json
This commit is contained in:
Oliver Gorwits
2014-10-25 14:51:15 +01:00
parent f7985c08ba
commit ca6a08ef46
22 changed files with 128 additions and 127 deletions

0
Netdisco/share/public/javascripts/dataTables.colVis.js Executable file → Normal file
View File

View File

@@ -94,7 +94,7 @@ function update_content(from, to) {
is_from_history_plugin = 1;
window.History.pushState(
{name: to, fields: $(to_form).serializeArray()},
pgtitle, uri_base + '/' + path + '?' + $(to_form).serialize()
pgtitle, uri_base + '/' + path + '/' + to + '?' + $(to_form).serialize()
);
is_from_history_plugin = 0;
}
@@ -145,7 +145,7 @@ function device_form_state(e) {
$(id).show();
// if form still has any field val, set strikethough
if (e.parents('form[action="/search"]').length > 0 && with_val != 0) {
if (e.parents('form[action^="/search"]').length > 0 && with_val != 0) {
$('#nq').css('text-decoration', 'line-through');
}
@@ -184,8 +184,8 @@ $(document).ready(function() {
if ($('#nq').val()) {
$(this).parents('form').append(
$(document.createElement('input')).attr('type', 'hidden')
.attr('name', 'tab')
.attr('value', $(this).data('tab'))
.attr('name', 'prefer')
.attr('value', $(this).data('prefer'))
).submit();
}
});

View File

@@ -75,7 +75,7 @@
<tbody>
[% FOREACH row IN network %]
<tr>
<td><a href="[% uri_for('/device') %]?tab=netmap&q=[% row.ip | uri %]">
<td><a href="[% uri_for('/device/netmap') %]?q=[% row.ip | uri %]">
[% row.dns || row.name || row.ip | html_entity %]</a></td>
<td>
[% IF row.location %]

View File

@@ -56,8 +56,8 @@ function to_class(name) { return 'nd_' + name.replace(/\./g, "_") }
// handler for clicking on a circle - redirect to that device's netmap
function circleClick(d) {
window.location = '[% uri_for('/device') %]?tab=netmap'
+ '&q=' + d.fullname
window.location = '[% uri_for('/device/netmap') %]'
+ '?q=' + d.fullname
+ '&depth=[% params.depth | uri %]'
+ '&vlan=[% params.vlan | uri %]';
}

View File

@@ -254,7 +254,7 @@ $(document).ready(function() {
[% ELSE %]
"render": function ( data, type, row, meta ) {
if (row.native_vlan && type === 'display') {
return '<a class="nd_linkcell" href="[% uri_for('/search') %]?tab=vlan&q=' + encodeURIComponent(data) + '">' + data + '</a>';
return '<a class="nd_linkcell" href="[% uri_for('/search/vlan') %]?q=' + encodeURIComponent(data) + '">' + data + '</a>';
}
else {
return data;
@@ -272,7 +272,7 @@ $(document).ready(function() {
var arr = row.vlan_membership;
arr = arr.sort(function(a, b){return a-b});
arr = jQuery.map( arr, function( a ) {
return '<a href="[% uri_for('/search') %]?tab=vlan&q=' + a + '">' + a + '</a>';
return '<a href="[% uri_for('/search/vlan') %]?q=' + a + '">' + a + '</a>';
});
if (row.vlan_membership.length > 10) {
return '<div class="nd_vlan-total">('

View File

@@ -25,7 +25,7 @@ function groupString(d) {
"use strict";
var s = '';
s = s + 'Device: ';
s = s + '<a href="[% uri_for('/device') %]?tab=details&q=' + encodeURIComponent(d.ip) + '">';
s = s + '<a href="[% uri_for('/device/details') %]?q=' + encodeURIComponent(d.ip) + '">';
s = s + he.encode(d.dns || d.device_name || d.ip);
if (d.dns || d.device_name) {
s = s + ' (' + he.encode(d.ip) + ') ';

View File

@@ -51,7 +51,7 @@ function groupString(d) {
"use strict";
var s = '';
s = s + 'Device: ';
s = s + '<a href="[% uri_for('/device') %]?tab=details&q=' + encodeURIComponent(d.ip) + '">';
s = s + '<a href="[% uri_for('/device/details') %]?q=' + encodeURIComponent(d.ip) + '">';
s = s + he.encode(d.dns || d.name || d.ip);
if (d.dns || d.name) {
s = s + ' (' + he.encode(d.ip) + ') ';

View File

@@ -39,7 +39,7 @@ $(document).ready(function() {
{
"data": 'ip',
"render": function(data, type, row, meta) {
return '<a href="[% uri_for('/device') %]?tab=modules&q=' + encodeURIComponent(data) + '">' + he.encode(row.device.dns || row.device.name || row.ip) + '</a>';
return '<a href="[% uri_for('/device/modules') %]?q=' + encodeURIComponent(data) + '">' + he.encode(row.device.dns || row.device.name || row.ip) + '</a>';
}
}, {
"data": 'description',

View File

@@ -18,12 +18,12 @@ $(document).ready(function() {
{
"data": 'vlan',
"render": function(data, type, row, meta) {
return '<a href="[% uri_for('/search') %]?tab=vlan&q=' + encodeURIComponent(data) + '">' + data + '</a>';
return '<a href="[% uri_for('/search/vlan') %]?q=' + encodeURIComponent(data) + '">' + data + '</a>';
}
}, {
"data": 'description',
"render": function(data, type, row, meta) {
return '<a href="[% uri_for('/search') %]?tab=vlan&q=' + encodeURIComponent(data) + '">' + he.encode(data || '') + '</a>';
return '<a href="[% uri_for('/search/vlan') %]?q=' + encodeURIComponent(data) + '">' + he.encode(data || '') + '</a>';
}
}, {
"data": 'dcount',

View File

@@ -13,10 +13,9 @@
</a>
<div class="tab-content">
[% FOREACH tab IN settings._device_tabs %]
<div id="[% tab.tag %]_search" class="tab-pane [% 'active' IF params.tab == tab.tag %]">
<div id="[% tab.tag %]_search" class="tab-pane [% 'active' IF tabname == tab.tag %]">
<form id="[% tab.tag %]_form" class="nd_sidebar-form form-stacked"
method="get" action="[% uri_for('/device') %]">
<input name="tab" value="[% tab.tag %]" type="hidden"/>
method="get" action="[% uri_for("/device/${tab.tag}") %]">
[% TRY %]
<script type="text/javascript">has_sidebar["[% tab.tag %]"] = 1;</script>
[% INCLUDE "sidebar/device/${tab.tag}.tt" %]
@@ -36,7 +35,9 @@
<div class="content">
<ul id="nd_search-results" class="nav nav-tabs">
[% FOREACH tab IN settings._device_tabs %]
<li[% ' class="active"' IF params.tab == tab.tag %]><a id="[% tab.tag %]_link" href="#[% tab.tag %]_pane">[% tab.label %]</a></li>
<li[% ' class="active"' IF tabname == tab.tag %]>
<a id="[% tab.tag %]_link" href="#[% tab.tag %]_pane">[% tab.label %]</a>
</li>
[% END %]
<span id="nd_device-name">
[% display_name | html_entity %]
@@ -47,7 +48,7 @@
</ul>
<div class="tab-content">
[% FOREACH tab IN settings._device_tabs %]
<div class="tab-pane[% ' active' IF params.tab == tab.tag %]" id="[% tab.tag %]_pane"></div>
<div class="tab-pane[% ' active' IF tabname == tab.tag %]" id="[% tab.tag %]_pane"></div>
[% END %]
</div>
</div>

View File

@@ -179,4 +179,11 @@
}
});
});
// for the admin pages
$('[% "#${task.tag}_form" %]').submit(function (event) {
update_page_title('[% task.tag %]');
update_csv_download_link('admin', '[% task.tag %]', '1');
do_search(event, '[% task.tag %]');
});
});

View File

@@ -36,16 +36,15 @@
if (window.History && window.History.enabled) {
is_from_history_plugin = 1;
var target = uri_base + '/' + path + '/' + tab + query;
if (push.length) {
var target = uri_base + '/' + path + '/' + tab + query;
if (location.pathname == target) { return };
window.History.pushState(
{name: tab, fields: $(form).serializeArray()}, pgtitle, target
);
}
else {
var target = uri_base + '/' + path + query;
window.History.replaceState(
{name: tab, fields: $(form).serializeArray()}, pgtitle, target
);
@@ -70,81 +69,12 @@
}
$(document).ready(function() {
[% IF search %]
// search tabs
[% FOREACH tab IN settings._search_tabs %]
$('[% "#${tab.tag}_form" %]').submit(function (event) {
var pgtitle = update_page_title('[% tab.tag %]');
copy_navbar_to_sidebar('[% tab.tag %]');
update_browser_history('[% tab.tag %]', pgtitle, '');
update_csv_download_link('search', '[% tab.tag %]', '[% tab.provides_csv %]');
do_search(event, '[% tab.tag %]');
});
[% END %]
[% END %]
[% IF device %]
// device tabs
[% FOREACH tab IN settings._device_tabs %]
$('[% "#${tab.tag}_form" %]').submit(function (event) {
var pgtitle = update_page_title('[% tab.tag %]');
copy_navbar_to_sidebar('[% tab.tag %]');
update_browser_history('[% tab.tag %]', pgtitle, '');
update_csv_download_link('device', '[% tab.tag %]', '[% tab.provides_csv %]');
[% IF tab.tag == 'ports' %]
// to be fair I can't remember why we do this in JS and not from the app
// perhaps because selecting form fields to go in the cookie is easier?
var cookie = $('#ports_form').find('input,select')
.not('#nd_port-query,input[name="q"],input[name="tab"]')
.serializeArray();
$('#ports_form').find('input[type="checkbox"]').map(function() {
cookie.push({'name': 'columns', 'value': $(this).attr('name')});
});
$.cookie('nd_ports-form', $.param(cookie) ,{ expires: 365 });
// form reset icon on ports tab
$('#nd_sidebar-reset-link').attr('href', uri_base + '/device?tab=[% tab.tag %]&reset=on&' +
$('#ports_form')
.find('input[name="q"],input[name="f"],input[name="partial"],input[name="invert"]')
.serialize());
[% ELSIF tab.tag == 'netmap' %]
// form reset icon on netmap tab
$('#nd_sidebar-reset-link').attr('href', uri_base + '/device?tab=[% tab.tag %]&reset=on&' +
$('#netmap_form').find('input[name="q"]').serialize());
[% END %]
do_search(event, '[% tab.tag %]');
});
[% END %]
[% END %]
[% IF report %]
// for the report pages
$('[% "#${report.tag}_form" %]').submit(function (event) {
var pgtitle = update_page_title('[% report.tag %]');
update_browser_history('[% report.tag %]', pgtitle, '1');
update_csv_download_link('report', '[% report.tag %]', '1');
do_search(event, '[% report.tag %]');
});
[% END -%]
[% IF task %]
// for the admin pages
$('[% "#${task.tag}_form" %]').submit(function (event) {
update_page_title('[% task.tag %]');
update_csv_download_link('admin', '[% task.tag %]', '1');
do_search(event, '[% task.tag %]');
});
[% END %]
// on page load, load the content for the active tab
[% IF params.tab %]
[% IF params.tab == 'ipinventory' OR params.tab == 'subnets' %]
$('#[% params.tab %]_submit').click();
[% IF tabname %]
[% IF tabname == 'ipinventory' OR tabname == 'subnets' %]
$('#[% tabname %]_submit').click();
[% ELSE %]
$('#[% params.tab %]_form').trigger("submit");
$('#[% tabname %]_form').trigger("submit");
[% END %]
[% END %]
});

View File

@@ -138,4 +138,39 @@
$('#nd_devdel-log').val('');
$('#nd_devdel-archive').attr('checked', false);
});
// device tabs
[% FOREACH tab IN settings._device_tabs %]
$('[% "#${tab.tag}_form" %]').submit(function (event) {
var pgtitle = update_page_title('[% tab.tag %]');
copy_navbar_to_sidebar('[% tab.tag %]');
update_browser_history('[% tab.tag %]', pgtitle, '');
update_csv_download_link('device', '[% tab.tag %]', '[% tab.provides_csv %]');
[% IF tab.tag == 'ports' %]
// to be fair I can't remember why we do this in JS and not from the app
// perhaps because selecting form fields to go in the cookie is easier?
var cookie = $('#ports_form').find('input,select')
.not('#nd_port-query,input[name="q"],input[name="tab"]')
.serializeArray();
$('#ports_form').find('input[type="checkbox"]').map(function() {
cookie.push({'name': 'columns', 'value': $(this).attr('name')});
});
$.cookie('nd_ports-form', $.param(cookie) ,{ expires: 365 });
// form reset icon on ports tab
$('#nd_sidebar-reset-link').attr('href', uri_base + '/device/[% tab.tag %]?reset=on&' +
$('#ports_form')
.find('input[name="q"],input[name="f"],input[name="partial"],input[name="invert"]')
.serialize());
[% ELSIF tab.tag == 'netmap' %]
// form reset icon on netmap tab
$('#nd_sidebar-reset-link').attr('href', uri_base + '/device/[% tab.tag %]?reset=on&' +
$('#netmap_form').find('input[name="q"]').serialize());
[% END %]
do_search(event, '[% tab.tag %]');
});
[% END %]
});

View File

@@ -52,4 +52,12 @@
,delay: 150
,minLength: 3
});
// for the report pages
$('[% "#${report.tag}_form" %]').submit(function (event) {
var pgtitle = update_page_title('[% report.tag %]');
update_browser_history('[% report.tag %]', pgtitle, '1');
update_csv_download_link('report', '[% report.tag %]', '1');
do_search(event, '[% report.tag %]');
});
});

View File

@@ -36,4 +36,15 @@
input.val('');
device_form_state(input); // will hide copy icons
});
// search tabs
[% FOREACH tab IN settings._search_tabs %]
$('[% "#${tab.tag}_form" %]').submit(function (event) {
var pgtitle = update_page_title('[% tab.tag %]');
copy_navbar_to_sidebar('[% tab.tag %]');
update_browser_history('[% tab.tag %]', pgtitle, '');
update_csv_download_link('search', '[% tab.tag %]', '[% tab.provides_csv %]');
do_search(event, '[% tab.tag %]');
});
[% END %]
});

View File

@@ -148,10 +148,10 @@
<span class="caret" style="border-top-color: #999; border-bottom-color: #999"></span>
</button>
<ul class="dropdown-menu">
<li><a class="nd_navsearchgo-specific" href="" data-tab="device">Search Devices</a></li>
<li><a class="nd_navsearchgo-specific" href="" data-tab="node">Search Nodes</a></li>
<li><a class="nd_navsearchgo-specific" href="" data-tab="vlan">Search VLANs</a></li>
<li><a class="nd_navsearchgo-specific" href="" data-tab="port">Search Ports</a></li>
<li><a class="nd_navsearchgo-specific" href="" data-prefer="device">Search Devices</a></li>
<li><a class="nd_navsearchgo-specific" href="" data-prefer="node">Search Nodes</a></li>
<li><a class="nd_navsearchgo-specific" href="" data-prefer="vlan">Search VLANs</a></li>
<li><a class="nd_navsearchgo-specific" href="" data-prefer="port">Search Ports</a></li>
</ul>
</div>
</form>

View File

@@ -9,9 +9,9 @@
rel="tooltip" data-placement="left" data-offset="5" data-title="Pin Sidebar" data-container="body"></i>
<div class="tab-content">
[% FOREACH tab IN settings._search_tabs %]
<div id="[% tab.tag %]_search" class="tab-pane [% 'active' IF params.tab == tab.tag %]">
<form id="[% tab.tag %]_form" class="nd_sidebar-form form-stacked" method="get" action="[% uri_for('/search') %]">
<input name="tab" value="[% tab.tag %]" type="hidden"/>
<div id="[% tab.tag %]_search" class="tab-pane [% 'active' IF tabname == tab.tag %]">
<form id="[% tab.tag %]_form" class="nd_sidebar-form form-stacked"
method="get" action="[% uri_for("/search/${tab.tag}") %]">
[% TRY %]
<script type="text/javascript">has_sidebar["[% tab.tag %]"] = 1;</script>
[% INCLUDE "sidebar/search/${tab.tag}.tt" %]
@@ -30,7 +30,7 @@
<div class="content">
<ul id="nd_search-results" class="nav nav-tabs">
[% FOREACH tab IN settings._search_tabs %]
<li[% ' class="active"' IF params.tab == tab.tag %]><a id="[% tab.tag %]_link" href="#[% tab.tag %]_pane">[% tab.label %]</a></li>
<li[% ' class="active"' IF tabname == tab.tag %]><a id="[% tab.tag %]_link" href="#[% tab.tag %]_pane">[% tab.label %]</a></li>
[% END %]
<span id="nd_device-name">
<a id="nd_csv-download" href="#" download="netdisco.csv">
@@ -40,7 +40,7 @@
</ul>
<div class="tab-content">
[% FOREACH tab IN settings._search_tabs %]
<div class="tab-pane[% ' active' IF params.tab == tab.tag %]" id="[% tab.tag %]_pane"></div>
<div class="tab-pane[% ' active' IF tabname == tab.tag %]" id="[% tab.tag %]_pane"></div>
[% END %]
</div>
</div>