implement first device tab - details
This commit is contained in:
69
Netdisco/views/ajax/device/details.tt
Normal file
69
Netdisco/views/ajax/device/details.tt
Normal file
@@ -0,0 +1,69 @@
|
||||
<table class="condensed-table zebra-striped">
|
||||
</tbody>
|
||||
<tr>
|
||||
<td>System Name</td>
|
||||
<td>[% d.name %]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Location</td>
|
||||
<td>
|
||||
<a rel="twipsy" data-placement="above" data-offset="5" title="Find Similar Devices"
|
||||
href="/search?tab=device&q=[% d.dns | uri %]&location=[% d.location | uri %]">[% d.location %]</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Contact</td>
|
||||
<td>[% d.contact %]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Model</td>
|
||||
<td>
|
||||
<a rel="twipsy" data-placement="above" data-offset="5" title="Find Similar Devices"
|
||||
href="/search?tab=device&q=[% d.dns | uri %]&model=[% d.model | uri %]">[% d.model %]</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>OS / Version</td>
|
||||
<td>[% d.os %] /
|
||||
<a rel="twipsy" data-placement="above" data-offset="5"
|
||||
title="Find Similar Devices" href="/search?tab=device&q=[% d.dns | uri %]&os_ver=[% d.os_ver | uri %]">[% d.os_ver %]</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Serial Number</td>
|
||||
<td>[% d.serial %]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Description</td>
|
||||
<td>[% d.description.replace(', ',",<br/>") %]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Uptime</td>
|
||||
<td>[% d.uptime %]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Last Discover</td>
|
||||
<td>[% d.last_discover %]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Last Arpnip</td>
|
||||
<td>[% d.last_arpnip %]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Last Macsuck</td>
|
||||
<td>[% d.last_macsuck %]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hardware Status</td>
|
||||
<td>Fan: [% d.fan %]
|
||||
<br/>PS1 [[% d.ps1_type %]]: [% d.ps1_status %]
|
||||
<br/>PS2 [[% d.ps2_type %]]: [% d.ps2_status %]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>MAC Address</td>
|
||||
<td>[% d.mac %]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>VTP Domain</td>
|
||||
<td>[% d.vtp_domain %]</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -11,7 +11,7 @@
|
||||
[% WHILE (row = results.next) %]
|
||||
<tr>
|
||||
<td>[% row.name %]</td>
|
||||
<td><a href="/device?q=[% row.ip %]&port=[% row.port %]">[% row.ip %] [ [% row.port %] ]</a>
|
||||
<td><a href="/device?ip=[% row.ip %]&port=[% row.port %]">[% row.ip %] [ [% row.port %] ]</a>
|
||||
[% ' (' _ row.device.dns.remove(settings.domain_suffix) _ ')' IF row.device.dns %]
|
||||
</td>
|
||||
<td>[% row.descr %]</td>
|
||||
32
Netdisco/views/device.tt
Normal file
32
Netdisco/views/device.tt
Normal file
@@ -0,0 +1,32 @@
|
||||
<div class="container-fluid">
|
||||
<div class="sidebar">
|
||||
<div class="well">
|
||||
<div class="tab-content">
|
||||
[% FOREACH tab IN vars.tabs %]
|
||||
<div id="[% tab.id %]_search" class="tab-pane [% 'active' IF params.tab == tab.id %]">
|
||||
<div class="clearfix">
|
||||
<h3>[% d.ip %]</h3><p>[% d.dns.remove(settings.domain_suffix) %]</p>
|
||||
</div>
|
||||
[%+ TRY %][% INCLUDE "inc/device/${tab.id}.tt" %][% CATCH %]<!-- no "[% tab.id %]" search options -->[% END %]
|
||||
</div> <!-- /tab-pane -->
|
||||
[% END %]
|
||||
</div> <!-- /tab-content -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nd_content content">
|
||||
<ul id="search_results" class="tabs" data-tabs="on">
|
||||
[% FOREACH tab IN vars.tabs %]
|
||||
<li[% ' class="active"' IF params.tab == tab.id %]><a href="#[% tab.id %]_pane">[% tab.label %]</a></li>
|
||||
[% END %]
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
[% FOREACH tab IN vars.tabs %]
|
||||
<div class="tab-pane[% ' active' IF params.tab == tab.id %]" id="[% tab.id %]_pane"></div>
|
||||
[% END %]
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
[%+ INCLUDE 'inc/js/device.js' -%]
|
||||
</script>
|
||||
4
Netdisco/views/inc/device/addresses.tt
Normal file
4
Netdisco/views/inc/device/addresses.tt
Normal file
@@ -0,0 +1,4 @@
|
||||
|
||||
<form id="[% tab.id %]_form" class="nd_sidesearchform form-stacked" method="get" action="/device">
|
||||
<input name="ip" value="[% d.ip %]" type="hidden"/>
|
||||
</form>
|
||||
4
Netdisco/views/inc/device/details.tt
Normal file
4
Netdisco/views/inc/device/details.tt
Normal file
@@ -0,0 +1,4 @@
|
||||
|
||||
<form id="[% tab.id %]_form" class="nd_sidesearchform form-stacked" method="get" action="/device">
|
||||
<input name="ip" value="[% d.ip %]" type="hidden"/>
|
||||
</form>
|
||||
4
Netdisco/views/inc/device/modules.tt
Normal file
4
Netdisco/views/inc/device/modules.tt
Normal file
@@ -0,0 +1,4 @@
|
||||
|
||||
<form id="[% tab.id %]_form" class="nd_sidesearchform form-stacked" method="get" action="/device">
|
||||
<input name="ip" value="[% d.ip %]" type="hidden"/>
|
||||
</form>
|
||||
12
Netdisco/views/inc/device/ports.tt
Normal file
12
Netdisco/views/inc/device/ports.tt
Normal file
@@ -0,0 +1,12 @@
|
||||
|
||||
<form id="[% tab.id %]_form" class="nd_sidesearchform form-stacked" method="get" action="/search">
|
||||
<input name="ip" value="[% d.ip %]" type="hidden"/>
|
||||
<input name="tab" value="[% tab.id %]" type="hidden"/>
|
||||
<div class="nd_search clearfix">
|
||||
<button id="[% tab.id %]_submit" type="submit" class="btn info">Update View</button>
|
||||
<a id="[% tab.id %]_bookmark" href="#"
|
||||
rel="twipsy" data-placement="right" data-offset="5" title="Bookmark these Settings">
|
||||
<img class="nd_bookmark" src="/images/glyphicons_072_bookmark.png">
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
75
Netdisco/views/inc/js/device.js
Normal file
75
Netdisco/views/inc/js/device.js
Normal file
@@ -0,0 +1,75 @@
|
||||
$(document).ready(function() {
|
||||
// parameterised for the active tab - submits search form and injects
|
||||
// HTML response into the tab pane, or an error/empty-results message
|
||||
function do_search (event, tab) {
|
||||
var form = '#' + tab + '_form';
|
||||
var target = '#' + tab + '_pane';
|
||||
var mark = '#' + tab + '_bookmark';
|
||||
|
||||
// stop form from submitting normally
|
||||
event.preventDefault();
|
||||
|
||||
// get the form params
|
||||
var query = $(form).serialize();
|
||||
|
||||
// in case of slow data load, let the user know
|
||||
$(target).html(
|
||||
'<div class="span3 alert-message notice"><p>Waiting for results...</p></div>'
|
||||
);
|
||||
|
||||
// submit the query and put results into the tab pane
|
||||
$(target).load( '/ajax/content/device/' + tab + '?' + query,
|
||||
function(response, status, xhr) {
|
||||
if (status !== "success") {
|
||||
$(target).html(
|
||||
'<div class="span6 alert-message error">' +
|
||||
'<p>Search failed! Please contact your site administrator.</p></div>'
|
||||
);
|
||||
return;
|
||||
}
|
||||
if (response === "") {
|
||||
$(target).html(
|
||||
'<div class="span3 alert-message info"><p>No matching records.</p></div>'
|
||||
);
|
||||
}
|
||||
// looks good, update the bookmark for this search
|
||||
$(mark).attr('href', '/device?' + query);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// search hook for each tab
|
||||
[% FOREACH tab IN vars.tabs %]
|
||||
$('[% "#${tab.id}_form" %]').submit(function(event){ do_search(event, '[% tab.id %]'); });
|
||||
[% END %]
|
||||
|
||||
// on page load, load the content for the active tab
|
||||
[% IF params.tab %]
|
||||
$('#[% params.tab %]_form').trigger("submit");
|
||||
[% END %]
|
||||
|
||||
// on tab change, hide previous tab's search form and show new tab's
|
||||
// search form. also trigger to load the content for the newly active tab.
|
||||
$('#search_results').bind('change', function(e) {
|
||||
var to = $(e.target).attr('href').replace(/^#/,"").replace(/_pane$/,"");
|
||||
var from = $(e.relatedTarget).attr('href').replace(/^#/,"").replace(/_pane$/,"");
|
||||
|
||||
$('#' + from + '_search').toggleClass('active');
|
||||
$('#' + to + '_search').toggleClass('active');
|
||||
|
||||
var to_form = '#' + to + '_form';
|
||||
var from_form = '#' + from + '_form';
|
||||
// copy current search string to new form's input box
|
||||
$(to_form).find("input[name=q]").val(
|
||||
$(from_form).find("input[name=q]").val()
|
||||
);
|
||||
$(to_form).trigger("submit");
|
||||
});
|
||||
|
||||
// fix green background on search checkboxes
|
||||
// https://github.com/twitter/bootstrap/issues/742
|
||||
syncCheckBox = function() {
|
||||
$(this).parents('.add-on').toggleClass('active', $(this).is(':checked'));
|
||||
};
|
||||
$('.add-on :checkbox').each(syncCheckBox).click(syncCheckBox);
|
||||
});
|
||||
@@ -13,6 +13,12 @@
|
||||
<p>You are now logged out.</p>
|
||||
</div>
|
||||
[% END %]
|
||||
[% IF params.nosuchdevice %]
|
||||
<div class="nd_loginalert alert-message notice fade in" data-alert="on">
|
||||
<a class="close" href="#">×</a>
|
||||
<p>Sorry, no such device is known.</p>
|
||||
</div>
|
||||
[% END %]
|
||||
[% IF vars.notfound %]
|
||||
<div class="nd_loginalert alert-message notice fade in" data-alert="on">
|
||||
<a class="close" href="#">×</a>
|
||||
|
||||
Reference in New Issue
Block a user