135/netdisco
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Manual Device Topology

Browse Source 
Needed to add the 'autocomplete' jQuery UI component because
it can do minLength=0 properly. Used the smoothness UI theme.

Added typeahead AJAX calls to support the topology searching.

Added new plugin and template for the topology editing page.
This commit is contained in:
Oliver Gorwits
2013-05-07 00:56:19 +01:00
parent bf7a419d08
commit 11d55e0129
25 changed files with 231 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Netdisco/share/views/ajax/admintask/pseudodevice.tt
View File

@@ -24,7 +24,7 @@
<td class="center_cell"><a class="nd_linkcell"
href="[% device_ports %]&q=[% row.dns | uri %]">[% row.dns | html_entity %]</a></td>
<td class="center_cell">[% row.ip | html_entity %]</td>
<td class="center_cell"><input name="ports" type="number" value="[% row.port_count | html_entity %]"</td>
<td class="center_cell"><input name="ports" type="number" value="[% row.port_count | html_entity %]"></td>
<td class="center_cell">
<input name="dns" type="hidden" value="[% row.dns | html_entity %]">
<input name="ip" type="hidden" value="[% row.ip | html_entity %]">

44
Netdisco/share/views/ajax/admintask/topology.tt Normal file
View File

@@ -0,0 +1,44 @@
<table class="table-bordered table-condensed table-striped">
<thead>
<tr>
<th class="center_cell">Left Device</th>
<th class="center_cell">Left Port</th>
<th class="center_cell">Right Device</th>
<th class="center_cell">Right Port</th>
<th class="center_cell">Action</th>
</tr>
</thead>
</tbody>
<tr>
<form name="add">
<td class="center_cell"><input class="nd_topo_dev nd_topo_dev1" name="dev1" type="text"></td>
<td class="center_cell"><input class="nd_topo_port nd_topo_dev1" name="port1" type="text"></td>
<td class="center_cell"><input class="nd_topo_dev nd_topo_dev2" name="dev2" type="text"></td>
<td class="center_cell"><input class="nd_topo_port nd_topo_dev2" name="port2" type="text"></td>
<td class="center_cell">
<button class="btn btn-small" name="add" type="submit"><i class="icon-plus-sign"></i> Add</button>
</td>
</form>
</tr>
[% WHILE (row = results.next) %]
<tr>
<form name="update">
<td class="center_cell"><a class="nd_linkcell"
href="[% device_ports %]&q=[% row.dev1 | uri %]">[% row.dev1 | html_entity %]</a></td>
<td class="center_cell">[% row.port1 | html_entity %]</td>
<td class="center_cell"><a class="nd_linkcell"
href="[% device_ports %]&q=[% row.dev2 | uri %]">[% row.dev2 | html_entity %]</a></td>
<td class="center_cell">[% row.port2 | html_entity %]</td>
<td class="center_cell">
<input name="dev1" type="hidden" value="[% row.dev1 | html_entity %]">
<input name="port1" type="hidden" value="[% row.port1 | html_entity %]">
<input name="dev2" type="hidden" value="[% row.dev2 | html_entity %]">
<input name="port2" type="hidden" value="[% row.port2 | html_entity %]">
<button class="btn" name="del" type="submit"><i class="icon-trash text-error"></i></button>
</form>
</td>
</tr>
[% END %]
</tbody>
</table>

40
Netdisco/share/views/js/admintask.js
View File

@@ -5,9 +5,43 @@
// this is called by do_search to support local code
// here, when tab changes need to strike/unstrike the navbar search
function inner_view_processing(tab) {
var target = '#pseudodevice_pane';
var target = '#' + tab + '_pane';
// activity for add pseudo device
// activate typeahead on the topo boxes
$('.nd_topo_dev').autocomplete({
source: '/ajax/data/deviceip/typeahead'
,minLength: 0
});
// get all devices on device input focus
$(".nd_topo_dev").on('focus', function(e) { $(this).autocomplete('search', '%') });
// activate typeahead on the topo boxes
$('.nd_topo_port.nd_topo_dev1').autocomplete({
source: function (request, response) {
var query = $('.nd_topo_dev1').serialize();
return $.get('/ajax/data/port/typeahead', query, function (data) {
return response(data);
});
}
,minLength: 0
});
// activate typeahead on the topo boxes
$('.nd_topo_port.nd_topo_dev2').autocomplete({
source: function (request, response) {
var query = $('.nd_topo_dev2').serialize();
return $.get('/ajax/data/port/typeahead', query, function (data) {
return response(data);
});
}
,minLength: 0
});
// get all ports on port input focus
$(".nd_topo_port").on('focus', function(e) { $(this).autocomplete('search') });
// activity for admin task tables
// dynamically bind to all forms in the table
$(target).on('submit', 'form', function() {
// stop form from submitting normally
@@ -18,7 +52,7 @@
type: 'POST'
,async: false
,dataType: 'html'
,url: uri_base + '/ajax/content/admin/pseudodevice/' + $(this).attr('name')
,url: uri_base + '/ajax/content/admin/' + tab + '/' + $(this).attr('name')
,data: $(this).serializeArray()
,beforeSend: function() {
$(target).html(

2
Netdisco/share/views/layouts/main.tt
View File

@@ -13,6 +13,7 @@
<script type="text/javascript" src="[% uri_base %]/javascripts/jquery-latest.min.js"></script>
<!-- <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.1.1.js"></script> -->
<script type="text/javascript" src="[% uri_base %]/javascripts/jquery-ui.custom.min.js"></script>
<script type="text/javascript" src="[% uri_base %]/javascripts/jquery-history.js"></script>
<script type="text/javascript" src="[% uri_base %]/javascripts/jquery-deserialize.js"></script>
<script type="text/javascript" src="[% uri_base %]/javascripts/bootstrap.min.js"></script>
@@ -32,6 +33,7 @@
[% END %]
<link rel="stylesheet" href="[% uri_base %]/css/bootstrap.min.css"/>
<link rel="stylesheet" href="[% uri_base %]/css/smoothness/jquery-ui.custom.min.css"/>
<link rel="stylesheet" href="[% uri_base %]/css/font-awesome.min.css"/>
<link rel="stylesheet" href="[% uri_base %]/css/netdisco.css"/>
<link rel="stylesheet" href="[% uri_base %]/css/nd_print.css" media="print"/>