new network map (neighbors) implementation
also link to manual topology from device ports fix tooltip reinit on datatables paging Squashed commit of the following: commit85d52ed174Merge:66e3536607446ed7Author: Oliver Gorwits <oliver@cpan.org> Date: Sun Dec 31 08:59:19 2017 +0000 Merge branch 'master' into og-newnetmap commit66e353669dAuthor: Oliver Gorwits <oliver@cpan.org> Date: Sun Dec 31 00:16:49 2017 +0000 add docs link commit809f1ede76Author: Oliver Gorwits <oliver@cpan.org> Date: Sun Dec 31 00:11:29 2017 +0000 node links to other devices commit187e1ea803Author: Oliver Gorwits <oliver@cpan.org> Date: Sat Dec 30 23:58:56 2017 +0000 add node infostring commit6453f99b28Author: Oliver Gorwits <oliver@cpan.org> Date: Sat Dec 30 23:41:19 2017 +0000 link infostrings! commitf3ba260142Author: Oliver Gorwits <oliver@cpan.org> Date: Sat Dec 30 22:42:09 2017 +0000 maxnoderadius is now based on dynamic size calc commit0af415e391Author: Oliver Gorwits <oliver@cpan.org> Date: Sat Dec 30 22:33:22 2017 +0000 fix to get aggregate ports in matching order on left and right side commit3f36121a4cAuthor: Oliver Gorwits <oliver@cpan.org> Date: Sat Dec 30 22:07:28 2017 +0000 initial aggregate link summing commite5b96b0781Author: Oliver Gorwits <oliver@cpan.org> Date: Sat Dec 30 14:55:00 2017 +0000 tidy and refactor commit79f22a47b3Author: Oliver Gorwits <oliver@cpan.org> Date: Sat Dec 30 13:42:58 2017 +0000 get rid of d3 v3/v4 and only have v3 commit18c3f16c8fAuthor: Oliver Gorwits <oliver@cpan.org> Date: Sat Dec 30 12:54:45 2017 +0000 fullscreen exit now works commit93f8181fc8Author: Oliver Gorwits <oliver@cpan.org> Date: Sat Dec 30 08:58:04 2017 +0000 implement show link speeds on links commit72961f172dAuthor: Oliver Gorwits <oliver@cpan.org> Date: Thu Dec 28 23:51:26 2017 +0000 add speed to retrieved devicelinks commitae5496310eAuthor: Oliver Gorwits <oliver@cpan.org> Date: Tue Dec 26 11:21:12 2017 +0000 remove annealing on label change commit885cb92bd3Author: Oliver Gorwits <oliver@cpan.org> Date: Tue Dec 26 11:15:21 2017 +0000 reorder options commit015a1debe0Author: Oliver Gorwits <oliver@cpan.org> Date: Tue Dec 26 11:11:01 2017 +0000 fix d3-force debug link messing up svg text elements commit10ccaa78b1Author: Oliver Gorwits <oliver@cpan.org> Date: Tue Dec 26 10:52:47 2017 +0000 show ips functionality; improvement to maximise icon; bugfix d3-force label wrap commit71a1a20909Author: Oliver Gorwits <oliver@cpan.org> Date: Mon Dec 25 13:21:23 2017 +0000 move labels on neighbor view commit9578215349Author: Oliver Gorwits <oliver@cpan.org> Date: Mon Dec 25 13:13:13 2017 +0000 force running spinner commit6618fba548Author: Oliver Gorwits <oliver@cpan.org> Date: Sun Dec 24 23:13:33 2017 +0000 fix neighbors pinning commit938848551eAuthor: Oliver Gorwits <oliver@cpan.org> Date: Sun Dec 24 18:12:04 2017 +0000 implement dynamic sizing option commite4b19be5d7Author: Oliver Gorwits <oliver@cpan.org> Date: Sun Dec 24 13:25:00 2017 +0000 zoom to device on neighbor show; do not save positions on neighbor show commit58b576b464Author: Oliver Gorwits <oliver@cpan.org> Date: Sun Dec 24 13:10:48 2017 +0000 better neighbors/save interaction commit2c77660f2fAuthor: Oliver Gorwits <oliver@cpan.org> Date: Sun Dec 24 13:03:46 2017 +0000 fix labels on checkboxes to be clickable commit2c2dc62cdaAuthor: Oliver Gorwits <oliver@cpan.org> Date: Sun Dec 24 12:50:26 2017 +0000 prevent save positions when in neighbor view mode commit78c558b5beAuthor: Oliver Gorwits <oliver@cpan.org> Date: Sun Dec 24 12:37:51 2017 +0000 add tooltip to show why host groups radio is disabled commit7000d4b0ebAuthor: Oliver Gorwits <oliver@cpan.org> Date: Sun Dec 24 12:12:29 2017 +0000 allow port control role to edit manual topology commit547d2934cbAuthor: Oliver Gorwits <oliver@cpan.org> Date: Sun Dec 24 12:09:40 2017 +0000 working save/restore node positions with groups commitbf7e231ffeAuthor: Oliver Gorwits <oliver@cpan.org> Date: Sun Dec 24 10:09:26 2017 +0000 node colors! commite23594b041Author: Oliver Gorwits <oliver@cpan.org> Date: Sat Dec 23 23:42:17 2017 +0000 wooo device group selection is working commitb1b22c9811Author: Oliver Gorwits <oliver@cpan.org> Date: Sat Dec 23 22:31:23 2017 +0000 send full query str from netmap for json commit9a13bb7f9bAuthor: Oliver Gorwits <oliver@cpan.org> Date: Sat Dec 23 22:06:24 2017 +0000 implement host_group_displaynames and fix vlan save bug commit35ed34ed2fAuthor: Oliver Gorwits <oliver@cpan.org> Date: Sat Dec 23 17:52:14 2017 +0000 when neighbors only can restrict the links search commitf9e5ec02abAuthor: Oliver Gorwits <oliver@cpan.org> Date: Sat Dec 23 17:44:41 2017 +0000 tweak mapshow commit9f9971ff4eAuthor: Oliver Gorwits <oliver@cpan.org> Date: Sat Dec 23 00:47:17 2017 +0000 better sidebar look and layout commit1def41da67Author: Oliver Gorwits <oliver@cpan.org> Date: Thu Dec 21 23:54:44 2017 +0000 sidebar with many options!! commit4203cbb225Merge:7c12df6b7db65932Author: Oliver Gorwits <oliver@cpan.org> Date: Thu Dec 21 20:14:55 2017 +0000 Merge branch 'master' into og-newnetmap commit7c12df6b83Author: Oliver Gorwits <oliver@cpan.org> Date: Thu Dec 21 00:13:03 2017 +0000 refresh tooltips when the datatables table is updated commit081b89d5dcAuthor: Oliver Gorwits <oliver@cpan.org> Date: Wed Dec 20 23:59:15 2017 +0000 shortcut from device port to manual topology commit9520438960Author: Oliver Gorwits <oliver@cpan.org> Date: Wed Dec 20 23:34:44 2017 +0000 tighten the sql for neighbor links commitd6b0275931Author: Oliver Gorwits <oliver@cpan.org> Date: Wed Dec 20 23:26:22 2017 +0000 tweak layout again commit9e5e2f0ed5Author: Oliver Gorwits <oliver@cpan.org> Date: Wed Dec 20 23:18:57 2017 +0000 fullscreen mode for netmap commitaba359d2a9Author: Oliver Gorwits <oliver@cpan.org> Date: Wed Dec 20 22:05:51 2017 +0000 save and load netmap positions for same device groups commitb7cd0251ffAuthor: Oliver Gorwits <oliver@cpan.org> Date: Tue Dec 19 23:24:47 2017 +0000 basic positions upload commit786115ebdaAuthor: Oliver Gorwits <oliver@cpan.org> Date: Tue Dec 19 22:13:16 2017 +0000 working group drag commit91f98d4f33Author: Oliver Gorwits <oliver@cpan.org> Date: Mon Dec 18 23:00:16 2017 +0000 drag all selected nodes commitba48eee5f7Merge:60412cd67f8e3edfAuthor: Oliver Gorwits <oliver@cpan.org> Date: Mon Dec 18 20:14:20 2017 +0000 Merge branch 'master' into og-newnetmap commit60412cd6e6Merge:39ca14917dc79f72Author: Oliver Gorwits <oliver@cpan.org> Date: Sun Dec 17 20:23:41 2017 +0000 Merge branch 'master' into og-newnetmap commit39ca1491b0Merge:69622582c8806beaAuthor: Oliver Gorwits <oliver@cpan.org> Date: Sun Dec 17 19:52:49 2017 +0000 Merge branch 'master' into og-newnetmap commit6962258223Author: Oliver Gorwits <oliver@cpan.org> Date: Sun Dec 17 19:52:26 2017 +0000 bleed versions commit444e82b8a3Author: Oliver Gorwits <oliver@cpan.org> Date: Sat Dec 16 15:33:41 2017 +0000 use d3 v4 only commit01cd7a908dAuthor: Oliver Gorwits <oliver@cpan.org> Date: Sat Dec 16 15:22:08 2017 +0000 two d3 connected commit854f37fc94Author: Oliver Gorwits <oliver@cpan.org> Date: Thu Dec 14 21:34:49 2017 +0000 more fiddling with d3 commit61a3a9e06dAuthor: Oliver Gorwits <oliver@cpan.org> Date: Thu Dec 14 19:15:21 2017 +0000 working worker commitebadebe69aAuthor: Oliver Gorwits <oliver@cpan.org> Date: Thu Dec 14 07:57:55 2017 +0000 borken worker commitc327b28513Author: Oliver Gorwits <oliver@cpan.org> Date: Wed Dec 13 13:45:03 2017 +0000 fix node center commit33bd9d39daAuthor: Oliver Gorwits <oliver@cpan.org> Date: Wed Dec 13 01:14:50 2017 +0000 improvements to graphing commit6178bf2298Merge:1c627eaf925940c9Author: Oliver Gorwits <oliver@cpan.org> Date: Tue Dec 12 23:44:48 2017 +0000 Merge branch 'master' into og-newnetmap commit1c627eaf3cMerge:77ca8f96000cbaa1Author: Oliver Gorwits <oliver@cpan.org> Date: Tue Dec 12 23:38:00 2017 +0000 Merge branch 'master' into og-newnetmap commit77ca8f96e1Author: Oliver Gorwits <oliver@cpan.org> Date: Mon Dec 11 00:09:08 2017 +0000 working rendering using d3-force plugin commit187265fc03Author: Oliver Gorwits <oliver@cpan.org> Date: Sun Dec 10 23:19:23 2017 +0000 initial work on moving to d3-force-apex-plugin - json data
This commit is contained in:
Oliver Gorwits
@@ -87,20 +87,20 @@ web_plugins:
|
||||
extra_web_plugins: []
|
||||
sidebar_defaults:
|
||||
search_node:
|
||||
stamps: {default: checked }
|
||||
deviceports: {default: checked }
|
||||
show_vendor: {default: null }
|
||||
archived: {default: null }
|
||||
partial: {default: null }
|
||||
age_invert: {default: null }
|
||||
daterange: {default: null }
|
||||
mac_format: {default: IEEE }
|
||||
stamps: { default: checked }
|
||||
deviceports: { default: checked }
|
||||
show_vendor: { default: null }
|
||||
archived: { default: null }
|
||||
partial: { default: null }
|
||||
age_invert: { default: null }
|
||||
daterange: { default: null }
|
||||
mac_format: { default: IEEE }
|
||||
search_port:
|
||||
partial: {default: null }
|
||||
uplink: {default: null }
|
||||
ethernet: {default: checked }
|
||||
partial: { default: null }
|
||||
uplink: { default: null }
|
||||
ethernet: { default: checked }
|
||||
search_device:
|
||||
matchall: {default: checked }
|
||||
matchall: { default: checked }
|
||||
device_ports:
|
||||
c_admin: { label: 'Port Controls', default: null, idx: 0 }
|
||||
c_port: { label: 'Port', default: checked, idx: 1 }
|
||||
@@ -132,9 +132,15 @@ sidebar_defaults:
|
||||
age_unit: { default: months }
|
||||
mac_format: { default: IEEE }
|
||||
neigh_id: { default: null }
|
||||
device_netmap:
|
||||
showips: { default: null }
|
||||
showspeed: { default: null }
|
||||
mapshow: { default: neighbors }
|
||||
colorgroups: { default: checked }
|
||||
dynamicsize: { default: null }
|
||||
report_moduleinventory:
|
||||
fruonly: {default: checked }
|
||||
matchall: {default: checked }
|
||||
fruonly: { default: checked }
|
||||
matchall: { default: checked }
|
||||
device_port_col_idx_left: 0
|
||||
device_port_col_idx_mid: 2
|
||||
device_port_col_idx_right: -1
|
||||
@@ -172,10 +178,13 @@ login_logo: ""
|
||||
# mibhome is discovered from environment
|
||||
# mibdirs defaults to contents of mibhome
|
||||
host_groups:
|
||||
__ANY__:
|
||||
- 'any'
|
||||
__LOCAL_ADDRESSES__:
|
||||
- '::1'
|
||||
- 'fe80::/10'
|
||||
- '127.0.0.0/8'
|
||||
host_group_displaynames: {}
|
||||
device_identity: []
|
||||
community: []
|
||||
community_rw: []
|
||||
|
||||
329
share/public/css/awesome-bootstrap-checkbox.css
Normal file
329
share/public/css/awesome-bootstrap-checkbox.css
Normal file
@@ -0,0 +1,329 @@
|
||||
/*
|
||||
.checkbox {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.checkbox label {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
padding-left: 5px;
|
||||
}
|
||||
.checkbox label::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
left: 0;
|
||||
margin-left: -20px;
|
||||
border: 1px solid #cccccc;
|
||||
border-radius: 3px;
|
||||
background-color: #fff;
|
||||
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
|
||||
-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
|
||||
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
|
||||
}
|
||||
.checkbox label::after {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin-left: -20px;
|
||||
padding-left: 3px;
|
||||
padding-top: 1px;
|
||||
font-size: 11px;
|
||||
color: #555555;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.checkbox input[type="checkbox"],
|
||||
.checkbox input[type="radio"] {
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
.checkbox input[type="checkbox"]:focus + label::before,
|
||||
.checkbox input[type="radio"]:focus + label::before {
|
||||
outline: thin dotted;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
.checkbox input[type="checkbox"]:checked + label::after,
|
||||
.checkbox input[type="radio"]:checked + label::after {
|
||||
font-family: "FontAwesome";
|
||||
content: "\f00c";
|
||||
}
|
||||
.checkbox input[type="checkbox"]:indeterminate + label::after,
|
||||
.checkbox input[type="radio"]:indeterminate + label::after {
|
||||
display: block;
|
||||
content: "";
|
||||
width: 10px;
|
||||
height: 3px;
|
||||
background-color: #555555;
|
||||
border-radius: 2px;
|
||||
margin-left: -16.5px;
|
||||
margin-top: 7px;
|
||||
}
|
||||
.checkbox input[type="checkbox"]:disabled,
|
||||
.checkbox input[type="radio"]:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.checkbox input[type="checkbox"]:disabled + label,
|
||||
.checkbox input[type="radio"]:disabled + label {
|
||||
opacity: 0.65;
|
||||
}
|
||||
.checkbox input[type="checkbox"]:disabled + label::before,
|
||||
.checkbox input[type="radio"]:disabled + label::before {
|
||||
background-color: #eeeeee;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.checkbox.checkbox-circle label::before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.checkbox.checkbox-inline {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.checkbox-primary input[type="checkbox"]:checked + label::before,
|
||||
.checkbox-primary input[type="radio"]:checked + label::before {
|
||||
background-color: #337ab7;
|
||||
border-color: #337ab7;
|
||||
}
|
||||
.checkbox-primary input[type="checkbox"]:checked + label::after,
|
||||
.checkbox-primary input[type="radio"]:checked + label::after {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.checkbox-danger input[type="checkbox"]:checked + label::before,
|
||||
.checkbox-danger input[type="radio"]:checked + label::before {
|
||||
background-color: #d9534f;
|
||||
border-color: #d9534f;
|
||||
}
|
||||
.checkbox-danger input[type="checkbox"]:checked + label::after,
|
||||
.checkbox-danger input[type="radio"]:checked + label::after {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.checkbox-info input[type="checkbox"]:checked + label::before,
|
||||
.checkbox-info input[type="radio"]:checked + label::before {
|
||||
background-color: #5bc0de;
|
||||
border-color: #5bc0de;
|
||||
}
|
||||
.checkbox-info input[type="checkbox"]:checked + label::after,
|
||||
.checkbox-info input[type="radio"]:checked + label::after {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.checkbox-warning input[type="checkbox"]:checked + label::before,
|
||||
.checkbox-warning input[type="radio"]:checked + label::before {
|
||||
background-color: #f0ad4e;
|
||||
border-color: #f0ad4e;
|
||||
}
|
||||
.checkbox-warning input[type="checkbox"]:checked + label::after,
|
||||
.checkbox-warning input[type="radio"]:checked + label::after {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.checkbox-success input[type="checkbox"]:checked + label::before,
|
||||
.checkbox-success input[type="radio"]:checked + label::before {
|
||||
background-color: #5cb85c;
|
||||
border-color: #5cb85c;
|
||||
}
|
||||
.checkbox-success input[type="checkbox"]:checked + label::after,
|
||||
.checkbox-success input[type="radio"]:checked + label::after {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.checkbox-primary input[type="checkbox"]:indeterminate + label::before,
|
||||
.checkbox-primary input[type="radio"]:indeterminate + label::before {
|
||||
background-color: #337ab7;
|
||||
border-color: #337ab7;
|
||||
}
|
||||
|
||||
.checkbox-primary input[type="checkbox"]:indeterminate + label::after,
|
||||
.checkbox-primary input[type="radio"]:indeterminate + label::after {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.checkbox-danger input[type="checkbox"]:indeterminate + label::before,
|
||||
.checkbox-danger input[type="radio"]:indeterminate + label::before {
|
||||
background-color: #d9534f;
|
||||
border-color: #d9534f;
|
||||
}
|
||||
|
||||
.checkbox-danger input[type="checkbox"]:indeterminate + label::after,
|
||||
.checkbox-danger input[type="radio"]:indeterminate + label::after {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.checkbox-info input[type="checkbox"]:indeterminate + label::before,
|
||||
.checkbox-info input[type="radio"]:indeterminate + label::before {
|
||||
background-color: #5bc0de;
|
||||
border-color: #5bc0de;
|
||||
}
|
||||
|
||||
.checkbox-info input[type="checkbox"]:indeterminate + label::after,
|
||||
.checkbox-info input[type="radio"]:indeterminate + label::after {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.checkbox-warning input[type="checkbox"]:indeterminate + label::before,
|
||||
.checkbox-warning input[type="radio"]:indeterminate + label::before {
|
||||
background-color: #f0ad4e;
|
||||
border-color: #f0ad4e;
|
||||
}
|
||||
|
||||
.checkbox-warning input[type="checkbox"]:indeterminate + label::after,
|
||||
.checkbox-warning input[type="radio"]:indeterminate + label::after {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.checkbox-success input[type="checkbox"]:indeterminate + label::before,
|
||||
.checkbox-success input[type="radio"]:indeterminate + label::before {
|
||||
background-color: #5cb85c;
|
||||
border-color: #5cb85c;
|
||||
}
|
||||
|
||||
.checkbox-success input[type="checkbox"]:indeterminate + label::after,
|
||||
.checkbox-success input[type="radio"]:indeterminate + label::after {
|
||||
background-color: #fff;
|
||||
}
|
||||
*/
|
||||
|
||||
.radio {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.radio label {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
padding-left: 5px;
|
||||
}
|
||||
.radio label::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
left: 0;
|
||||
margin-left: -20px;
|
||||
border: 1px solid #cccccc;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
-webkit-transition: border 0.15s ease-in-out;
|
||||
-o-transition: border 0.15s ease-in-out;
|
||||
transition: border 0.15s ease-in-out;
|
||||
}
|
||||
.radio label::after {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
content: " ";
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
left: 4px;
|
||||
top: 4px;
|
||||
margin-left: -20px;
|
||||
border-radius: 50%;
|
||||
background-color: #555555;
|
||||
-webkit-transform: scale(0, 0);
|
||||
-ms-transform: scale(0, 0);
|
||||
-o-transform: scale(0, 0);
|
||||
transform: scale(0, 0);
|
||||
-webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
|
||||
-moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
|
||||
-o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
|
||||
transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
|
||||
}
|
||||
.radio input[type="radio"] {
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
.radio input[type="radio"]:focus + label::before {
|
||||
outline: thin dotted;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
.radio input[type="radio"]:checked + label::after {
|
||||
-webkit-transform: scale(1, 1);
|
||||
-ms-transform: scale(1, 1);
|
||||
-o-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
.radio input[type="radio"]:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.radio input[type="radio"]:disabled + label {
|
||||
opacity: 0.65;
|
||||
}
|
||||
.radio input[type="radio"]:disabled + label::before {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.radio.radio-inline {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.radio-primary input[type="radio"] + label::after {
|
||||
background-color: #337ab7;
|
||||
}
|
||||
.radio-primary input[type="radio"]:checked + label::before {
|
||||
border-color: #337ab7;
|
||||
}
|
||||
.radio-primary input[type="radio"]:checked + label::after {
|
||||
background-color: #337ab7;
|
||||
}
|
||||
|
||||
.radio-danger input[type="radio"] + label::after {
|
||||
background-color: #d9534f;
|
||||
}
|
||||
.radio-danger input[type="radio"]:checked + label::before {
|
||||
border-color: #d9534f;
|
||||
}
|
||||
.radio-danger input[type="radio"]:checked + label::after {
|
||||
background-color: #d9534f;
|
||||
}
|
||||
|
||||
.radio-info input[type="radio"] + label::after {
|
||||
background-color: #5bc0de;
|
||||
}
|
||||
.radio-info input[type="radio"]:checked + label::before {
|
||||
border-color: #5bc0de;
|
||||
}
|
||||
.radio-info input[type="radio"]:checked + label::after {
|
||||
background-color: #5bc0de;
|
||||
}
|
||||
|
||||
.radio-warning input[type="radio"] + label::after {
|
||||
background-color: #f0ad4e;
|
||||
}
|
||||
.radio-warning input[type="radio"]:checked + label::before {
|
||||
border-color: #f0ad4e;
|
||||
}
|
||||
.radio-warning input[type="radio"]:checked + label::after {
|
||||
background-color: #f0ad4e;
|
||||
}
|
||||
|
||||
.radio-success input[type="radio"] + label::after {
|
||||
background-color: #5cb85c;
|
||||
}
|
||||
.radio-success input[type="radio"]:checked + label::before {
|
||||
border-color: #5cb85c;
|
||||
}
|
||||
.radio-success input[type="radio"]:checked + label::after {
|
||||
background-color: #5cb85c;
|
||||
}
|
||||
|
||||
/* input[type="checkbox"].styled:checked + label:after, */
|
||||
input[type="radio"].styled:checked + label:after {
|
||||
font-family: 'FontAwesome';
|
||||
content: "\f00c";
|
||||
}
|
||||
/* input[type="checkbox"] .styled:checked + label::before, */
|
||||
input[type="radio"] .styled:checked + label::before {
|
||||
color: #fff;
|
||||
}
|
||||
/* input[type="checkbox"] .styled:checked + label::after, */
|
||||
input[type="radio"] .styled:checked + label::after {
|
||||
color: #fff;
|
||||
}
|
||||
32
share/public/css/bootstrap2-toggle.min.css
vendored
Normal file
32
share/public/css/bootstrap2-toggle.min.css
vendored
Normal file
@@ -0,0 +1,32 @@
|
||||
/*! ========================================================================
|
||||
* Bootstrap Toggle: bootstrap2-toggle.css v2.2.0
|
||||
* http://www.bootstraptoggle.com
|
||||
* ========================================================================
|
||||
* Copyright 2014 Min Hur, The New York Times Company
|
||||
* Licensed under MIT
|
||||
* ======================================================================== */
|
||||
label.checkbox .toggle,label.checkbox.inline .toggle{margin-left:-20px;margin-right:5px}
|
||||
.toggle{min-width:40px;height:20px;position:relative;overflow:hidden}
|
||||
.toggle input[type=checkbox]{display:none}
|
||||
.toggle-group{position:absolute;width:200%;top:0;bottom:0;left:0;transition:left .35s;-webkit-transition:left .35s;-moz-user-select:none;-webkit-user-select:none}
|
||||
.toggle.off .toggle-group{left:-100%}
|
||||
.toggle-on{position:absolute;top:0;bottom:0;left:0;right:50%;margin:0;border:0;border-radius:0}
|
||||
.toggle-off{position:absolute;top:0;bottom:0;left:50%;right:0;margin:0;border:0;border-radius:0}
|
||||
.toggle-handle{position:relative;margin:0 auto;padding-top:0;padding-bottom:0;height:100%;width:0;border-width:0 1px}
|
||||
.toggle-handle.btn-mini{top:-1px}
|
||||
.toggle.btn{min-width:30px}
|
||||
.toggle-on.btn{padding-right:24px}
|
||||
.toggle-off.btn{padding-left:24px}
|
||||
.toggle.btn-large{min-width:40px}
|
||||
.toggle-on.btn-large{padding-right:35px}
|
||||
.toggle-off.btn-large{padding-left:35px}
|
||||
.toggle.btn-small{min-width:25px}
|
||||
.toggle-on.btn-small{padding-right:20px}
|
||||
.toggle-off.btn-small{padding-left:20px}
|
||||
.toggle.btn-mini{min-width:20px}
|
||||
.toggle-on.btn-mini{padding-right:12px}
|
||||
.toggle-off.btn-mini{padding-left:12px}
|
||||
/* added for netdisco */
|
||||
div.checkbox.pull-left {padding-left:5px}
|
||||
label.btn.btn-success.btn-small.toggle-on {left:-4px}
|
||||
|
||||
197
share/public/css/d3-force-network-chart.css
Normal file
197
share/public/css/d3-force-network-chart.css
Normal file
@@ -0,0 +1,197 @@
|
||||
.net_gobrechts_d3_force,
|
||||
.net_gobrechts_d3_force_customize,
|
||||
.net_gobrechts_d3_force_customize td,
|
||||
.net_gobrechts_d3_force_tooltip {
|
||||
box-sizing: content-box;
|
||||
font-family: Arial, Helvetica, Sans Serif;
|
||||
font-size: 10px;
|
||||
background-color: #fff
|
||||
}
|
||||
.net_gobrechts_d3_force.border {
|
||||
border: 1px solid silver;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.net_gobrechts_d3_force circle.highlighted {
|
||||
stroke: #555;
|
||||
stroke-width: 2px;
|
||||
stroke-opacity: 1.0;
|
||||
}
|
||||
.net_gobrechts_d3_force circle.selected {
|
||||
stroke: #555;
|
||||
stroke-width: 4px;
|
||||
stroke-dasharray: 4 2;
|
||||
stroke-opacity: 1.0;
|
||||
}
|
||||
.net_gobrechts_d3_force text.label,
|
||||
.net_gobrechts_d3_force text.labelCircular {
|
||||
fill: black;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.net_gobrechts_d3_force text.label{
|
||||
text-anchor: middle;
|
||||
}
|
||||
.net_gobrechts_d3_force text.highlighted {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.net_gobrechts_d3_force text.link {
|
||||
font-size: 12px;
|
||||
fill: #2a7ae2;
|
||||
cursor: pointer;
|
||||
}
|
||||
.net_gobrechts_d3_force line.link,
|
||||
.net_gobrechts_d3_force path.link {
|
||||
fill: none;
|
||||
stroke: #bbb;
|
||||
stroke-width: 1.5px;
|
||||
stroke-opacity: 0.8;
|
||||
}
|
||||
.net_gobrechts_d3_force line.dotted,
|
||||
.net_gobrechts_d3_force path.dotted {
|
||||
stroke-dasharray: .01 3;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
.net_gobrechts_d3_force line.dashed,
|
||||
.net_gobrechts_d3_force path.dashed {
|
||||
stroke-dasharray: 4 2;
|
||||
}
|
||||
.net_gobrechts_d3_force line.highlighted,
|
||||
.net_gobrechts_d3_force path.highlighted {
|
||||
stroke: #555 !important;
|
||||
stroke-opacity: 1.0;
|
||||
}
|
||||
.net_gobrechts_d3_force marker.normal {
|
||||
stroke: none;
|
||||
fill: #bbb;
|
||||
}
|
||||
.net_gobrechts_d3_force marker.highlighted {
|
||||
stroke: none;
|
||||
fill: #555;
|
||||
}
|
||||
.net_gobrechts_d3_force .graphOverlay,
|
||||
.net_gobrechts_d3_force .graphOverlaySizeHelper {
|
||||
fill: none;
|
||||
pointer-events: all;
|
||||
}
|
||||
.net_gobrechts_d3_force .lasso path {
|
||||
stroke: #505050;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
.net_gobrechts_d3_force .lasso .drawn {
|
||||
fill-opacity: 0.05 ;
|
||||
}
|
||||
.net_gobrechts_d3_force .lasso .loop_close {
|
||||
fill: none;
|
||||
stroke-dasharray: 4,4;
|
||||
}
|
||||
.net_gobrechts_d3_force .lasso .origin {
|
||||
fill: #3399FF;
|
||||
fill-opacity: 0.5;
|
||||
}
|
||||
.net_gobrechts_d3_force .loading rect {
|
||||
fill: black;
|
||||
fill-opacity: 0.2;
|
||||
}
|
||||
.net_gobrechts_d3_force .loading text {
|
||||
fill: white;
|
||||
font-size: 36px;
|
||||
text-anchor: middle;
|
||||
}
|
||||
.net_gobrechts_d3_force_tooltip {
|
||||
position: absolute;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
background-color: silver;
|
||||
opacity: 0.9;
|
||||
width: 150px;
|
||||
overflow: auto;
|
||||
font-size: 12px;
|
||||
z-index: 100000;
|
||||
pointer-events: none;
|
||||
display: none;
|
||||
}
|
||||
.net_gobrechts_d3_force_customize {
|
||||
border: 1px solid silver;
|
||||
border-radius: 5px;
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
padding: 5px;
|
||||
background-color:white;
|
||||
box-shadow: 1px 1px 6px #666;
|
||||
z-index: 200000;
|
||||
}
|
||||
.net_gobrechts_d3_force_customize .drag {
|
||||
border: 1px dashed silver;
|
||||
border-radius: 3px;
|
||||
display: block;
|
||||
cursor: move;
|
||||
font-weight: bold;
|
||||
height: 24px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.net_gobrechts_d3_force_customize .title {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
.net_gobrechts_d3_force_customize .close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
.net_gobrechts_d3_force_customize table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
border: none;
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
.net_gobrechts_d3_force_customize tr.hidden {
|
||||
display: none;
|
||||
}
|
||||
.net_gobrechts_d3_force_customize td {
|
||||
padding: 1px;
|
||||
font-size: 12px;
|
||||
vertical-align: middle;
|
||||
border: none;
|
||||
}
|
||||
.net_gobrechts_d3_force_customize .label {
|
||||
text-align: right;
|
||||
}
|
||||
.net_gobrechts_d3_force_customize .warning {
|
||||
background-color: orange;
|
||||
}
|
||||
.net_gobrechts_d3_force_customize input,
|
||||
.net_gobrechts_d3_force_customize select,
|
||||
.net_gobrechts_d3_force_customize textarea,
|
||||
.net_gobrechts_d3_force_customize a {
|
||||
border: 1px solid silver;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: auto;
|
||||
}
|
||||
.net_gobrechts_d3_force_customize a {
|
||||
border: 1px solid transparent;
|
||||
color: #2a7ae2;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.net_gobrechts_d3_force_customize input:focus,
|
||||
.net_gobrechts_d3_force_customize select:focus,
|
||||
.net_gobrechts_d3_force_customize textarea:focus,
|
||||
.net_gobrechts_d3_force_customize a:focus {
|
||||
outline: none !important;
|
||||
border: 1px solid #2a7ae2 !important;
|
||||
background-color: #ffff99 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.net_gobrechts_d3_force_customize textarea {
|
||||
font-size: 10px !important;
|
||||
padding: 2px;
|
||||
width: 160px;
|
||||
height: 85px;
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
@@ -425,6 +425,14 @@ td > form.nd_inline-form {
|
||||
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
/* style customization for many items which appear in the sidebar */
|
||||
|
||||
/* horizontal rule */
|
||||
.nd_sidebar-hr {
|
||||
color: black;
|
||||
background-color: black;
|
||||
height: 2px;
|
||||
margin: 12px 0px 12px 0px;
|
||||
}
|
||||
|
||||
/* text in the sidebar */
|
||||
.nd_sidebar-title {
|
||||
margin-left: 10px;
|
||||
@@ -432,11 +440,49 @@ td > form.nd_inline-form {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
/* Flabels in netmap sidebar (not in a collapser) */
|
||||
/* labels in netmap sidebar (not in a collapser) */
|
||||
.nd_sidebar-label {
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
/* to allow display of tooltip on a disabled control
|
||||
http://jsfiddle.net/cSSUA/209/ */
|
||||
.tooltip-wrapper {
|
||||
display: inline-block;
|
||||
}
|
||||
.tooltip-wrapper .input[disabled] {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* vlan entry box for netmap */
|
||||
#nd_vlan-label {
|
||||
margin-left: 5px;
|
||||
margin-bottom: -7px;
|
||||
}
|
||||
#nd_vlan-label-text {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
#nd_vlan-entry {
|
||||
width: 56px;
|
||||
}
|
||||
|
||||
/* netmap maximise icon */
|
||||
#nd2_fullscreen-netmap {
|
||||
fill: black;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
/* netmap link labels */
|
||||
.nd_netmap-linklabel {
|
||||
pointer-events: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* netmap tooltip box */
|
||||
#netmap_pane_tooltip {
|
||||
width: unset;
|
||||
}
|
||||
|
||||
/* fixup for prepended checkbox in sidebar */
|
||||
.nd_searchcheckbox {
|
||||
width: 121px;
|
||||
@@ -614,8 +660,12 @@ form .clearfix.success input {
|
||||
}
|
||||
|
||||
.nd_netmap-sidebar {
|
||||
margin-top: 7px;
|
||||
margin-left: -9px;
|
||||
margin-top: 0px;
|
||||
margin-left: -8px;
|
||||
}
|
||||
|
||||
.nd_netmap-sidebar > .input-prepend {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.nd_netmap-sidebar-help {
|
||||
@@ -629,6 +679,7 @@ form .clearfix.success input {
|
||||
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
/* D3 SVG */
|
||||
|
||||
/*
|
||||
.node circle {
|
||||
fill: #fff;
|
||||
stroke: steelblue;
|
||||
@@ -651,6 +702,7 @@ form .clearfix.success input {
|
||||
stroke-width: 2px;
|
||||
display: none;
|
||||
}
|
||||
*/
|
||||
|
||||
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
/* dataTables */
|
||||
|
||||
9
share/public/javascripts/bootstrap2-toggle.min.js
vendored
Normal file
9
share/public/javascripts/bootstrap2-toggle.min.js
vendored
Normal file
@@ -0,0 +1,9 @@
|
||||
/*! ========================================================================
|
||||
* Bootstrap Toggle: bootstrap2-toggle.js v2.2.0
|
||||
* http://www.bootstraptoggle.com
|
||||
* ========================================================================
|
||||
* Copyright 2014 Min Hur, The New York Times Company
|
||||
* Licensed under MIT
|
||||
* ======================================================================== */
|
||||
+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.toggle"),f="object"==typeof b&&b;e||d.data("bs.toggle",e=new c(this,f)),"string"==typeof b&&e[b]&&e[b]()})}var c=function(b,c){this.$element=a(b),this.options=a.extend({},this.defaults(),c),this.render()};c.VERSION="2.2.0",c.DEFAULTS={on:"On",off:"Off",onstyle:"primary",offstyle:"default",size:"normal",style:"",width:null,height:null},c.prototype.defaults=function(){return{on:this.$element.attr("data-on")||c.DEFAULTS.on,off:this.$element.attr("data-off")||c.DEFAULTS.off,onstyle:this.$element.attr("data-onstyle")||c.DEFAULTS.onstyle,offstyle:this.$element.attr("data-offstyle")||c.DEFAULTS.offstyle,size:this.$element.attr("data-size")||c.DEFAULTS.size,style:this.$element.attr("data-style")||c.DEFAULTS.style,width:this.$element.attr("data-width")||c.DEFAULTS.width,height:this.$element.attr("data-height")||c.DEFAULTS.height}},c.prototype.render=function(){this._onstyle="btn-"+this.options.onstyle,this._offstyle="btn-"+this.options.offstyle;var b="large"===this.options.size?"btn-large":"small"===this.options.size?"btn-small":"mini"===this.options.size?"btn-mini":"",c=a('<label class="btn">').html(this.options.on).addClass(this._onstyle+" "+b),d=a('<label class="btn">').html(this.options.off).addClass(this._offstyle+" "+b+" active"),e=a('<span class="toggle-handle btn btn-default">').addClass(b),f=a('<div class="toggle-group">').append(c,d,e),g=a('<div class="toggle btn" data-toggle="toggle">').addClass(this.$element.prop("checked")?this._onstyle:this._offstyle+" off").addClass(b).addClass(this.options.style);this.$element.wrap(g),a.extend(this,{$toggle:this.$element.parent(),$toggleOn:c,$toggleOff:d,$toggleGroup:f}),this.$toggle.append(f);var h=this.options.width||Math.max(c.width(),d.width())+e.outerWidth()/2,i=this.options.height||Math.max(c.height(),d.height());c.addClass("toggle-on"),d.addClass("toggle-off"),this.$toggle.css({width:h,height:i}),this.options.height&&(c.css("line-height",c.height()+"px"),d.css("line-height",d.height()+"px")),this.update(!0),this.trigger(!0)},c.prototype.toggle=function(){this.$element.prop("checked")?this.off():this.on()},c.prototype.on=function(a){return this.$element.prop("disabled")?!1:(this.$toggle.removeClass(this._offstyle+" off").addClass(this._onstyle),this.$element.prop("checked",!0),void(a||this.trigger()))},c.prototype.off=function(a){return this.$element.prop("disabled")?!1:(this.$toggle.removeClass(this._onstyle).addClass(this._offstyle+" off"),this.$element.prop("checked",!1),void(a||this.trigger()))},c.prototype.enable=function(){this.$toggle.removeAttr("disabled"),this.$element.prop("disabled",!1)},c.prototype.disable=function(){this.$toggle.attr("disabled","disabled"),this.$element.prop("disabled",!0)},c.prototype.update=function(a){this.$element.prop("disabled")?this.disable():this.enable(),this.$element.prop("checked")?this.on(a):this.off(a)},c.prototype.trigger=function(b){this.$element.off("change.bs.toggle"),b||this.$element.change(),this.$element.on("change.bs.toggle",a.proxy(function(){this.update()},this))},c.prototype.destroy=function(){this.$element.off("change.bs.toggle"),this.$toggleGroup.remove(),this.$element.removeData("bs.toggle"),this.$element.unwrap()};var d=a.fn.bootstrapToggle;a.fn.bootstrapToggle=b,a.fn.bootstrapToggle.Constructor=c,a.fn.toggle.noConflict=function(){return a.fn.bootstrapToggle=d,this},a(function(){a("input[type=checkbox][data-toggle^=toggle]").bootstrapToggle()}),a(document).on("click.bs.toggle","div[data-toggle^=toggle]",function(b){var c=a(this).find("input[type=checkbox]");c.bootstrapToggle("toggle"),b.preventDefault()})}(jQuery);
|
||||
//# sourceMappingURL=bootstrap2-toggle.min.js.map
|
||||
5198
share/public/javascripts/d3-force-network-chart.js
vendored
Normal file
5198
share/public/javascripts/d3-force-network-chart.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
9
share/public/javascripts/d3.min.js
vendored
9
share/public/javascripts/d3.min.js
vendored
File diff suppressed because one or more lines are too long
11
share/schema_versions/App-Netdisco-DB-45-46-PostgreSQL.sql
Normal file
11
share/schema_versions/App-Netdisco-DB-45-46-PostgreSQL.sql
Normal file
@@ -0,0 +1,11 @@
|
||||
BEGIN;
|
||||
|
||||
CREATE TABLE "netmap_positions" (
|
||||
"id" serial PRIMARY KEY,
|
||||
"device_groups" text[] NOT NULL,
|
||||
"vlan" integer NOT NULL DEFAULT 0,
|
||||
"positions" text NOT NULL,
|
||||
UNIQUE ("device_groups", "vlan")
|
||||
);
|
||||
|
||||
COMMIT;
|
||||
@@ -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') %]?tab=netmap&q=[% row.ip | uri %]&firstsearch=on">
|
||||
[% row.dns || row.name || row.ip | html_entity %]</a></td>
|
||||
<td>
|
||||
[% IF row.location %]
|
||||
|
||||
@@ -12,13 +12,13 @@
|
||||
<tr>
|
||||
<td class="nd_center-cell">
|
||||
<div class="input-append">
|
||||
<input data-form="add" class="nd_topo_dev nd_topo_dev1" name="dev1" type="text">
|
||||
<input data-form="add" class="nd_topo_dev nd_topo_dev1" name="dev1" type="text" value="[% params.dev1 | html_entity %]">
|
||||
<span class="add-on nd_topo_dev_caret"><i class="icon-caret-down icon-large"></i></span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="nd_center-cell">
|
||||
<div class="input-append">
|
||||
<input data-form="add" class="nd_topo_port nd_topo_dev1" name="port1" type="text">
|
||||
<input data-form="add" class="nd_topo_port nd_topo_dev1" name="port1" type="text" value="[% params.port1 | html_entity %]">
|
||||
<span class="add-on nd_topo_port_caret"><i class="icon-caret-down icon-large"></i></span>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
@@ -1,187 +1,287 @@
|
||||
<div id="netmap_pane_tooltip" class="net_gobrechts_d3_force_tooltip" style="top: 0px; left: 0px;"></div>
|
||||
<script>
|
||||
|
||||
var winHeight = window.innerHeight;
|
||||
var winWidth = window.innerWidth;
|
||||
// ***********************************************
|
||||
// ************ retrieve network map *************
|
||||
// ***********************************************
|
||||
|
||||
// links in the initial tree drawing use this generator
|
||||
var treeLink = d3.svg.diagonal.radial()
|
||||
.projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });
|
||||
$.getJSON('[% uri_for('/ajax/data/device/netmap') %]?[% my_query %]', function(mapdata) {
|
||||
|
||||
// actual device neighbor links use this generator
|
||||
var neighLink = d3.svg.diagonal.radial();
|
||||
jQuery(document).ready(function() {
|
||||
window.graph = netGobrechtsD3Force('netmap_pane')
|
||||
// .debug(true)
|
||||
.width( parseInt(jQuery('#netmap_pane').parent().css('width')) )
|
||||
.height( window.innerHeight - 100 )
|
||||
.showSelfLinks(true)
|
||||
.wrapLabels(true)
|
||||
.lassoMode(true)
|
||||
.dragMode(true)
|
||||
.zoomMode(true)
|
||||
.pinMode(true)
|
||||
[% '.showLegend(false)' IF NOT params.colorgroups %]
|
||||
.showLinkDirection(false)
|
||||
.colorScheme('color20')
|
||||
.preventLabelOverlappingOnForceEnd(
|
||||
(mapdata['newnodes'] && ('[% params.mapshow %]' == 'neighbors'))
|
||||
? true : false
|
||||
)
|
||||
.nodeEventToStopPinMode('none')
|
||||
.showTooltips(true)
|
||||
.tooltipPosition('svgTopLeft')
|
||||
.nodeEventToOpenLink('dblclick')
|
||||
.nodeLinkTarget('none')
|
||||
.minNodeRadius(4)
|
||||
.maxNodeRadius(4 + (mapdata['numsizes'] || 0))
|
||||
.minZoomFactor(0.1)
|
||||
.maxZoomFactor(10)
|
||||
.labelDistance(2)
|
||||
.linkDistance(120)
|
||||
.charge(-550)
|
||||
.gravity(0.3);
|
||||
|
||||
// store x,y for all circles on the map
|
||||
var loc = {};
|
||||
// store actual links between all nodes
|
||||
var neighbors_data = {};
|
||||
graph['nd2'] = {};
|
||||
graph['nd2']['centernode'] = mapdata['centernode'];
|
||||
graph['nd2']['dragging'] = false;
|
||||
|
||||
// main SVG background, with support for pan/zoom
|
||||
var svg = d3.select("#netmap_pane").append("svg")
|
||||
.attr("width", winWidth - 50)
|
||||
.attr("height", winHeight - 100)
|
||||
.attr("pointer-events", "all")
|
||||
.append('g')
|
||||
.call(d3.behavior.zoom().on("zoom", redraw))
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + winHeight / 2 + "," + winHeight / 2 + ")");
|
||||
// ***************************************
|
||||
// *********** fullscreen icon ***********
|
||||
// ***************************************
|
||||
|
||||
// this is the image background
|
||||
// XXX there must be a way to discover the radial tree's size?
|
||||
svg.append('rect')
|
||||
.attr("x", (0 - (winHeight * 2)))
|
||||
.attr('width', "400%")
|
||||
.attr("y", (0 - (winHeight * 2)))
|
||||
.attr('height', "400%")
|
||||
.attr('fill', 'white');
|
||||
|
||||
// handle pan and zoom
|
||||
function redraw() {
|
||||
svg.attr("transform",
|
||||
"translate(" + d3.event.translate + ")"
|
||||
+ "scale(" + d3.event.scale + ")"
|
||||
+ "translate(" + (winHeight / 2) + "," + (winHeight / 2) + ")");
|
||||
}
|
||||
|
||||
// save the x,y of an element into the loc dictionary
|
||||
function recordLocation(d,i) {
|
||||
var rect = this.getBoundingClientRect();
|
||||
loc[d.ip] = {
|
||||
'x': (rect.left + ((rect.right - rect.left) / 2))
|
||||
,'y': (rect.top + ((rect.bottom - rect.top) / 2))
|
||||
};
|
||||
}
|
||||
|
||||
// convert a device ip to a valid CSS class name
|
||||
function to_class(ip) { return 'nd_' + ip.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.ip
|
||||
+ '&depth=[% params.depth | uri %]'
|
||||
+ '&vlan=[% params.vlan | uri %]';
|
||||
}
|
||||
|
||||
// handler for mouseover on a circle - show that device's real neighbors
|
||||
function circleOver(d) {
|
||||
$('.link').hide();
|
||||
$('path.' + to_class(d.ip)).show();
|
||||
$(this).css('cursor', 'pointer');
|
||||
|
||||
$.each(neighbors_data[d.ip], function(idx, target) {
|
||||
if (! (target in loc)) { return true }
|
||||
$('circle.' + to_class(target)).css('fill', '#e96cfa');
|
||||
});
|
||||
}
|
||||
|
||||
// handler for mouseout on a circle - hide real neighbours and show treeLinks
|
||||
function circleOut(d) {
|
||||
$.each(neighbors_data[d.ip], function(idx, target) {
|
||||
if (! (target in loc)) { return true }
|
||||
$('circle.' + to_class(target)).css('fill', '#fff');
|
||||
});
|
||||
|
||||
$(this).css('cursor', 'auto');
|
||||
$('path.' + to_class(d.ip)).hide();
|
||||
$('.link').show();
|
||||
}
|
||||
|
||||
// load all device connections into neighbors_data dictionary
|
||||
$.getJSON('[% uri_for('/ajax/data/device/alldevicelinks') %]', function(data) {
|
||||
neighbors_data = data;
|
||||
|
||||
// draw the tree
|
||||
d3.json("[% uri_for('/ajax/data/device/netmap') %]?"
|
||||
+ '&q=[% params.q | uri %]'
|
||||
+ '&depth=[% params.depth | uri %]'
|
||||
+ '&vlan=[% params.vlan | uri %]', function(error, root) {
|
||||
var tree = d3.layout.tree()
|
||||
// magic number "8" for scaling (network depth). seems to make things look right for me.
|
||||
.size([360, (winHeight / 8 * (root['scale'] || 0))])
|
||||
.separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
|
||||
|
||||
var nodes = tree.nodes(root),
|
||||
links = tree.links(nodes);
|
||||
|
||||
var link = svg.selectAll(".link")
|
||||
.data(links)
|
||||
.enter().append("path")
|
||||
.attr("class", "link")
|
||||
.attr("d", treeLink);
|
||||
|
||||
var node = svg.selectAll(".node")
|
||||
.data(nodes)
|
||||
.enter().append("g")
|
||||
.attr("class", "node")
|
||||
.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; });
|
||||
|
||||
// begin to draw...
|
||||
d3.select("#nd_waiting").remove();
|
||||
|
||||
node.append("circle")
|
||||
.attr("r", 4.5)
|
||||
// circle has class name of its device, so we can show/hide it
|
||||
.attr("class", function(d) { return to_class(d.ip) })
|
||||
// store the x,y of every circle we've just drawn
|
||||
.each(recordLocation)
|
||||
// handlers for mouse interaction with the circles
|
||||
.on("click", circleClick)
|
||||
.on("mouseover", circleOver)
|
||||
.on("mouseout", circleOut);
|
||||
|
||||
node.append("text")
|
||||
.attr("dy", ".31em")
|
||||
.attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
|
||||
.attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; })
|
||||
.text(function(d) { return d.name; });
|
||||
|
||||
// reorient text on the root node
|
||||
svg.select(".node")
|
||||
.attr("transform", function(d) {
|
||||
return d.x < 180 ? "rotate(0)translate(0)" : "rotate(180)translate(0)"; });
|
||||
|
||||
// key (ip) of the root node in our locations store
|
||||
var rootname = svg.select(".node").data()[0].ip;
|
||||
// reformatted neighbors_data for the real neighbor links
|
||||
var neighbors = [];
|
||||
|
||||
// need to build neighbors array only after we have built loc dictionary,
|
||||
// after drawing the circles and storing their x,y
|
||||
$.each(neighbors_data, function(key, val) {
|
||||
if (! (key in loc)) { return true }
|
||||
|
||||
$.each(val, function(idx, ip) {
|
||||
if (! (ip in loc)) { return true }
|
||||
|
||||
neighbors.push({
|
||||
'source': {
|
||||
'ip': key
|
||||
,'x': loc[key]['x']
|
||||
,'y': loc[key]['y']
|
||||
}
|
||||
,'target': {
|
||||
'ip': ip
|
||||
,'x': loc[ip]['x']
|
||||
,'y': loc[ip]['y']
|
||||
}
|
||||
});
|
||||
graph.inspect().dom.svg
|
||||
.append("g")
|
||||
.attr("id", "nd2_fullscreen-netmap-container")
|
||||
.attr("transform", "translate(" + (graph.width() - 17) + ",17)")
|
||||
.append("svg:text")
|
||||
.attr("id", "nd2_fullscreen-netmap")
|
||||
.attr("class", "link")
|
||||
.attr("text-anchor", "start")
|
||||
.attr("font-family", "FontAwesome")
|
||||
.text('\uf065')
|
||||
.on("click", function() {
|
||||
requestFullScreen(document.getElementById('netmap_pane'));
|
||||
});
|
||||
|
||||
// **************************************************
|
||||
// *********** force running spinner icon ***********
|
||||
// **************************************************
|
||||
|
||||
graph.inspect().dom.svg
|
||||
.append("g")
|
||||
.attr("id", "nd2_netmap-spinner-container")
|
||||
.attr("transform", "translate(" + (graph.width() - 15) + "," + (graph.height() - 15) + ")")
|
||||
.append("path")
|
||||
.attr("id", "nd2_netmap-spinner");
|
||||
|
||||
graph.inspect().main.force.on('start.nd2spinner', function() {
|
||||
d3.select("#nd2_netmap-spinner").call(spin);
|
||||
});
|
||||
|
||||
// insert Netdisco neighbor links below circles but above tree links
|
||||
svg.selectAll(".neighbor")
|
||||
.data(neighbors)
|
||||
.enter().insert("path", ".node")
|
||||
// add class name of source device, so we can show/hide the link
|
||||
// (also "neighbor" class)
|
||||
.attr("class", function(d) { return ("neighbor " + to_class( d.source.ip )) })
|
||||
.attr("d", neighLink)
|
||||
.attr("transform", "translate(-" + loc[rootname]['x'] + ",-" + loc[rootname]['y'] + ")");
|
||||
});
|
||||
// *****************************************************
|
||||
// *********** link labels which track links ***********
|
||||
// *****************************************************
|
||||
|
||||
}); // jquery getJSON for all connections
|
||||
graph.inspect().main.force.on('tick.movelinklabel', function() {
|
||||
graph.inspect().dom.svg.selectAll('text.nd_netmap-linklabel')
|
||||
.attr('x', function(d) {
|
||||
var sx = graph.nodeDataById($(this).attr('data-source'));
|
||||
var tx = graph.nodeDataById($(this).attr('data-target'));
|
||||
if (!(sx && tx)) { return 0 }
|
||||
return ((sx.x + tx.x) / 2);
|
||||
})
|
||||
.attr('y', function(d) {
|
||||
var sy = graph.nodeDataById($(this).attr('data-source'));
|
||||
var ty = graph.nodeDataById($(this).attr('data-target'));
|
||||
if (!(sy && ty)) { return 0 }
|
||||
return ((sy.y + ty.y) / 2);
|
||||
});
|
||||
});
|
||||
|
||||
graph.inspect().main.force.on('start.movelinklabel', function() {
|
||||
mapdata['data']['links'].forEach(function(link) {
|
||||
graph.inspect().dom.svg.select('g.graph')
|
||||
.append('svg:text')
|
||||
.attr('class', 'nd_netmap-linklabel')
|
||||
.attr('data-source', link['FROMID'])
|
||||
.attr('data-target', link['TOID'])
|
||||
.attr('text-anchor', 'middle')
|
||||
[% ".attr('fill', 'black')" IF params.showspeed %]
|
||||
.text(link['SPEED']);
|
||||
});
|
||||
|
||||
graph.inspect().main.force.on('start.movelinklabel', null);
|
||||
});
|
||||
|
||||
// **********************************************************
|
||||
// ********* node lasso and group-dragging support **********
|
||||
// **********************************************************
|
||||
|
||||
graph.inspect().main.force.on('start.draggednode', function() {
|
||||
graph.inspect().main.nodes.on('mousedown.dragall', function(n) {
|
||||
if (this.nodeName !== 'circle') { return }
|
||||
graph['nd2']['dragging'] = true;
|
||||
graph['nd2']['dragStartX'] = n.x;
|
||||
graph['nd2']['dragStartY'] = n.y;
|
||||
graph['nd2']['draggedNode'] = n.index;
|
||||
console.log(graph['nd2']);
|
||||
});
|
||||
|
||||
graph.inspect().main.nodes.on('mousemove.dragall', function(draggedNode) {
|
||||
var evt = window.event;
|
||||
if (!("buttons" in evt) || (evt.buttons !== 1)) { return }
|
||||
if (!(graph['nd2']['dragging']) || !(graph['nd2']['draggedNode'])) { return }
|
||||
if (draggedNode.index !== graph['nd2']['draggedNode']) { return }
|
||||
|
||||
var dx = (draggedNode.x - graph['nd2']['dragStartX']),
|
||||
dy = (draggedNode.y - graph['nd2']['dragStartY']);
|
||||
graph['nd2']['dragStartX'] += dx;
|
||||
graph['nd2']['dragStartY'] += dy;
|
||||
|
||||
graph.inspect().main.nodes
|
||||
.filter(function(n) { return (n.selected && (n.index !== draggedNode.index)) })
|
||||
.each(function(n) {
|
||||
n.x += dx; n.y += dy;
|
||||
n.px += dx; n.py += dy;
|
||||
});
|
||||
});
|
||||
|
||||
graph.inspect().main.nodes.on('mouseup.dragall', function(n) {
|
||||
graph['nd2']['dragging'] = false;
|
||||
});
|
||||
|
||||
graph.inspect().main.force.on('start.draggednode', null);
|
||||
});
|
||||
|
||||
// ********************************************************
|
||||
// ********* save new node positions back to DB ***********
|
||||
// ********************************************************
|
||||
|
||||
graph.inspect().main.force.on('end.savepositions', function() {
|
||||
graph.inspect().main.nodes.each(function(n) { n.fixed = true });
|
||||
|
||||
if (mapdata['newnodes'] && ('[% params.mapshow %]' != 'neighbors')) {
|
||||
$.post(
|
||||
'[% uri_for('/ajax/data/device/netmappositions') %]'
|
||||
,$("#nd_vlan-entry, #nd_devgrp-select, input[name='mapshow']").serialize()
|
||||
+ '&positions=' + JSON.stringify(graph.positions())
|
||||
);
|
||||
}
|
||||
|
||||
graph.inspect().main.force.on('end.savepositions', null);
|
||||
});
|
||||
|
||||
// *****************************
|
||||
// ********* DO IT!! ***********
|
||||
// *****************************
|
||||
|
||||
graph.start(mapdata);
|
||||
|
||||
// about a second after render starts, zoom in a bit
|
||||
if ('[% params.mapshow %]' == 'neighbors') {
|
||||
setTimeout(function() {
|
||||
if ('[% params.dynamicsize %]' == 'on') {
|
||||
graph.zoomToFit();
|
||||
} else {
|
||||
var node = graph.nodeDataById( graph['nd2']['centernode'] );
|
||||
graph.zoomSmooth(node.x, node.y, node.radius * 125);
|
||||
}
|
||||
}, 1500);
|
||||
}
|
||||
}); // document.onReady
|
||||
|
||||
}); // getJSON
|
||||
|
||||
// ***********************************************
|
||||
// ******** force engine status spinner *********
|
||||
// ***********************************************
|
||||
|
||||
var radius = 12;
|
||||
var tau = 2 * Math.PI;
|
||||
|
||||
var arc = d3.svg.arc()
|
||||
.innerRadius(radius * 0.5)
|
||||
.outerRadius(radius * 0.8)
|
||||
.startAngle(0)
|
||||
.endAngle(0.33 * tau);
|
||||
|
||||
var circle = d3.svg.arc()
|
||||
.innerRadius(radius * 0.5)
|
||||
.outerRadius(radius * 0.8)
|
||||
.startAngle(0)
|
||||
.endAngle(tau);
|
||||
|
||||
function spin(selection, duration) {
|
||||
duration = duration || 1500;
|
||||
if (! graph.inspect().status.forceRunning) {
|
||||
d3.select('#nd2_netmap-spinner').style('fill', '#CCFFCC').attr('d', circle);
|
||||
return;
|
||||
}
|
||||
d3.select('#nd2_netmap-spinner').style('fill', '#FFE4B5').attr('d', arc);
|
||||
selection.transition()
|
||||
.ease("linear")
|
||||
.duration(duration)
|
||||
.attrTween("transform", function() {
|
||||
return d3.interpolateString("rotate(0)", "rotate(360)");
|
||||
});
|
||||
setTimeout(function() { spin(selection, duration); }, duration);
|
||||
}
|
||||
|
||||
// ***********************************************
|
||||
// ************ full screen handling *************
|
||||
// ***********************************************
|
||||
|
||||
function isFullScreen() {
|
||||
return (document.webkitFullscreenElement || document.mozFullScreenElement || document.fullscreenElement);
|
||||
}
|
||||
|
||||
function requestFullScreen(elt) {
|
||||
if (isFullScreen()) {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen();
|
||||
} else if (document.msExitFullscreen) {
|
||||
document.msExitFullscreen();
|
||||
} else if (document.mozCancelFullScreen) {
|
||||
document.mozCancelFullScreen();
|
||||
} else if (document.webkitExitFullscreen) {
|
||||
document.webkitExitFullscreen();
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (elt.requestFullscreen) {
|
||||
elt.requestFullscreen();
|
||||
} else if (elt.msRequestFullscreen) {
|
||||
elt.msRequestFullscreen();
|
||||
} else if (elt.mozRequestFullScreen) {
|
||||
elt.mozRequestFullScreen();
|
||||
} else if (elt.webkitRequestFullscreen) {
|
||||
elt.webkitRequestFullscreen();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function() {
|
||||
resizeGraphContainer();
|
||||
$('#nd2_fullscreen-netmap').text(function() {
|
||||
return (isFullScreen() ? '\uf066' : '\uf065');
|
||||
});
|
||||
});
|
||||
|
||||
// custom resize function as there is no event to fire and we need
|
||||
// to react to the sidebar.
|
||||
function resizeGraphContainer() {
|
||||
setTimeout(function(){
|
||||
var netmap_pane = jQuery('#netmap_pane');
|
||||
graph.width( parseInt(netmap_pane.parent().css('width')) ).resume();
|
||||
graph.height( window.innerHeight - 100 ).resume();
|
||||
d3.select("#nd2_netmap-spinner-container").attr("transform",
|
||||
"translate(" + (graph.width() - 15) + "," + (graph.height() - 15) + ")");
|
||||
d3.select("#nd2_fullscreen-netmap-container").attr("transform",
|
||||
"translate(" + (graph.width() - 17) + ",17)");
|
||||
}, 500)
|
||||
}
|
||||
|
||||
$('#nd_sidebar-toggle-img-in').on("click", resizeGraphContainer);
|
||||
$('#nd_sidebar-toggle-img-out').on("click", resizeGraphContainer);
|
||||
$(window).on("resize", resizeGraphContainer);
|
||||
|
||||
// vim: ft=javascript
|
||||
</script>
|
||||
|
||||
<div id="nd_waiting" class="span2 alert"><i class="icon-spinner icon-spin"></i> Waiting for results...</div>
|
||||
|
||||
@@ -345,6 +345,14 @@
|
||||
[% END %]
|
||||
[% END %]
|
||||
[% END %]
|
||||
[% IF user_can_port_control AND params.c_admin %]
|
||||
<a class="nd_log-icon"
|
||||
href="[% uri_for('/admin/topology') %]?dev1=[% device.ip | uri %]&port1=[% row.port | uri %]">
|
||||
<i class="icon-bolt"
|
||||
rel="tooltip" data-placement="top" data-offset="3"
|
||||
data-animation="" data-title="Manual Topology"></i>
|
||||
[% END %]
|
||||
</a>
|
||||
</td>
|
||||
[% END %]
|
||||
|
||||
|
||||
@@ -23,6 +23,13 @@
|
||||
$('.nd_modal').modal({show: false});
|
||||
$("[rel=tooltip]").tooltip({live: true});
|
||||
$("[rel=popover]").popover({live: true});
|
||||
|
||||
// positions save not available in netmap neighbors view
|
||||
if ($("input[name='mapshow']:checked").val() == 'neighbors') {
|
||||
$('#nd_netmap-save').prop('disabled', true).removeClass('btn-info');
|
||||
} else {
|
||||
$('#nd_netmap-save').prop('disabled', false).addClass('btn-info');
|
||||
}
|
||||
}
|
||||
|
||||
// on load, establish global delegations for now and future
|
||||
@@ -95,6 +102,66 @@
|
||||
}
|
||||
});
|
||||
|
||||
// refresh tooltips when the datatables table is updated
|
||||
$('#ports_pane').on('draw.dt', function() {
|
||||
$("[rel=tooltip]").tooltip({live: true});
|
||||
});
|
||||
|
||||
// netmap show controls
|
||||
$('#nd_showips').change(function() {
|
||||
if ($(this).prop('checked')) {
|
||||
graph.inspect().main.nodes.each(function(n) {
|
||||
if (n['ORIG_LABEL'] != n['ID']) {
|
||||
n['LABEL'] = n['ORIG_LABEL'] + ' ' + n['ID'];
|
||||
}
|
||||
});
|
||||
graph.wrapLabels(true).start();
|
||||
} else {
|
||||
graph.inspect().main.nodes.each(function(n) {
|
||||
n['LABEL'] = n['ORIG_LABEL'];
|
||||
});
|
||||
graph.wrapLabels(false).start();
|
||||
}
|
||||
});
|
||||
$('#nd_showspeed').change(function() {
|
||||
$('.nd_netmap-linklabel').css('fill',
|
||||
($(this).prop('checked') ? 'black' : 'none')
|
||||
);
|
||||
});
|
||||
|
||||
// netmap pin/release controls
|
||||
$('#nd_netmap-releaseall').on('click', function(event) {
|
||||
event.preventDefault();
|
||||
graph.releaseFixedNodes().resume();
|
||||
});
|
||||
$('#nd_netmap-releaseonly').on('click', function(event) {
|
||||
event.preventDefault();
|
||||
graph.inspect().main.nodes
|
||||
.filter(function(n) { return n.selected })
|
||||
.each(function(n) { n.fixed = false });
|
||||
graph.resume();
|
||||
});
|
||||
$('#nd_netmap-pinonly').on('click', function(event) {
|
||||
event.preventDefault();
|
||||
graph.inspect().main.nodes
|
||||
.filter(function(n) { return n.selected })
|
||||
.each(function(n) { n.fixed = true });
|
||||
});
|
||||
$('#nd_netmap-save').on('click', function(event) {
|
||||
event.preventDefault();
|
||||
// if user enters vlan but does not submit this will save wrong data
|
||||
$.post(
|
||||
'[% uri_for('/ajax/data/device/netmappositions') %]'
|
||||
,$("#nd_vlan-entry, #nd_devgrp-select, input[name='mapshow']").serialize()
|
||||
+ '&positions=' + JSON.stringify(graph.positions())
|
||||
);
|
||||
});
|
||||
$('#nd_netmap-zoomtodevice').on('click', function(event) {
|
||||
event.preventDefault();
|
||||
var node = graph.nodeDataById( graph['nd2']['centernode'] );
|
||||
graph.zoomSmooth(node.x, node.y, node.radius * 100);
|
||||
});
|
||||
|
||||
// activity for admin tasks in device details
|
||||
$('#details_pane').on('click', '.nd_adminbutton', function(event) {
|
||||
// stop form from submitting normally
|
||||
|
||||
@@ -18,9 +18,11 @@
|
||||
<!-- <script type="text/javascript" src="[% uri_base %]/javascripts/jquery.cookie.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>
|
||||
<script type="text/javascript" src="[% uri_base %]/javascripts/bootstrap2-toggle.min.js"></script>
|
||||
<script type="text/javascript" src="[% uri_base %]/javascripts/underscore.min.js"></script>
|
||||
<script type="text/javascript" src="[% uri_base %]/javascripts/jquery.qtip.min.js"></script>
|
||||
<script type="text/javascript" src="[% uri_base %]/javascripts/d3.min.js"></script>
|
||||
<script type="text/javascript" src="[% uri_base %]/javascripts/d3-force-network-chart.js"></script>
|
||||
<script type="text/javascript" src="[% uri_base %]/javascripts/toastr.js"></script>
|
||||
<script type="text/javascript" src="[% uri_base %]/javascripts/jquery.floatThead.js"></script>
|
||||
<script type="text/javascript" src="[% uri_base %]/javascripts/daterangepicker.js"></script>
|
||||
@@ -48,10 +50,13 @@
|
||||
[% END %]
|
||||
|
||||
<link rel="stylesheet" href="[% uri_base %]/css/bootstrap.min.css"/>
|
||||
<link rel="stylesheet" href="[% uri_base %]/css/bootstrap2-toggle.min.css"/>
|
||||
<link rel="stylesheet" href="[% uri_base %]/css/awesome-bootstrap-checkbox.css"/>
|
||||
<link rel="stylesheet" href="[% uri_base %]/css/jquery.qtip.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/toastr.css"/>
|
||||
<link rel="stylesheet" href="[% uri_base %]/css/d3-force-network-chart.css"/>
|
||||
<link rel="stylesheet" href="[% uri_base %]/css/netdisco.css"/>
|
||||
<link rel="stylesheet" href="[% uri_base %]/css/bootstrap-tree.css"/>
|
||||
<link rel="stylesheet" href="[% uri_base %]/css/daterangepicker-bs2.css"/>
|
||||
|
||||
5
share/views/sidebar/admintask/topology.tt
Normal file
5
share/views/sidebar/admintask/topology.tt
Normal file
@@ -0,0 +1,5 @@
|
||||
|
||||
|
||||
<input name="dev1" value="[% params.dev1 | html_entity %]" type="hidden"/>
|
||||
<input name="port1" value="[% params.port1 | html_entity %]" type="hidden"/>
|
||||
<script type="text/javascript">has_sidebar["topology"] = 0;</script>
|
||||
@@ -5,20 +5,125 @@
|
||||
<ul class="muted nd_netmap-sidebar-help">
|
||||
<li>Click and drag to pan</li>
|
||||
<li>Scroll to zoom</li>
|
||||
<li>Hover shows neighbors</li>
|
||||
<li>Click to center device</li>
|
||||
<li><a href="https://github.com/netdisco/netdisco/wiki/NetworkMap" target="_blank">Full Instructions
|
||||
<i class="icon-external-link"></i></a></li>
|
||||
</ul>
|
||||
|
||||
<em class="muted nd_sidebar-label">Draw to Depth:</em><br/>
|
||||
<input id="nd_port-query" placeholder="" type="number"
|
||||
name="depth" value="[% params.depth || 8 | html_entity %]" type="text"
|
||||
rel="tooltip" data-placement="left" data-offset="5" data-title="Max Depth"/>
|
||||
|
||||
<em class="muted nd_sidebar-label">Filter by VLAN:</em><br/>
|
||||
<input id="nd_port-query" placeholder="" type="number"
|
||||
name="vlan" value="[% params.vlan | html_entity %]" type="text"
|
||||
rel="tooltip" data-placement="left" data-offset="5" data-title="VLAN"/>
|
||||
</div>
|
||||
<button id="[% tab.tag %]_submit" type="submit" class="btn btn-info">
|
||||
<i class="icon-pencil icon-large pull-left nd_navbar-icon"></i> Redraw Map</button>
|
||||
|
||||
<div class="clearfix nd_netmap-sidebar">
|
||||
<div class="checkbox pull-left">
|
||||
<label>
|
||||
<input type="checkbox" name="showips" id="nd_showips"
|
||||
[% 'checked="checked"' IF vars.sidebar_defaults.device_netmap.showips %]
|
||||
data-toggle="toggle" data-size="small" data-width="30"
|
||||
data-on="Show" data-off=" " data-onstyle="success">
|
||||
<span onclick="$('#nd_showips').bootstrapToggle('toggle')"> Management IPs</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox pull-left">
|
||||
<label>
|
||||
<input type="checkbox" name="showspeed" id="nd_showspeed"
|
||||
[% 'checked="checked"' IF vars.sidebar_defaults.device_netmap.showspeed %]
|
||||
data-toggle="toggle" data-size="small" data-width="30"
|
||||
data-on="Show" data-off=" " data-onstyle="success">
|
||||
<span onclick="$('#nd_showspeed').bootstrapToggle('toggle')"> Link Speed</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="nd_netmap-releaseall" class="btn btn-info">
|
||||
<i class="icon-unlock icon-large pull-left nd_navbar-icon"></i>
|
||||
Release All</button>
|
||||
|
||||
<button id="nd_netmap-releaseonly" class="btn btn-info">
|
||||
<i class="icon-unlock icon-large pull-left nd_navbar-icon"></i>
|
||||
Release Selected</button>
|
||||
|
||||
<button id="nd_netmap-pinonly" class="btn btn-info">
|
||||
<i class="icon-lock icon-large pull-left nd_navbar-icon"></i>
|
||||
Pin Selected</button>
|
||||
|
||||
<button id="nd_netmap-save" class="btn" disabled>
|
||||
<i class="icon-save icon-large pull-left nd_navbar-icon"></i>
|
||||
Save Positions</button>
|
||||
|
||||
<button id="nd_netmap-zoomtodevice" class="btn btn-info">
|
||||
<i class="icon-search icon-large pull-left nd_navbar-icon"></i>
|
||||
Zoom to this Device</button>
|
||||
|
||||
<hr class="nd_sidebar-hr"/>
|
||||
|
||||
<div class="radio radio-success">
|
||||
<input type="radio" name="mapshow" id="nd_mapshow-all"
|
||||
[% 'checked' IF vars.sidebar_defaults.device_netmap.mapshow == 'all' %] value="all">
|
||||
<label for="nd_mapshow-all">All Devices</label>
|
||||
</div>
|
||||
<div class="radio radio-success">
|
||||
<input type="radio" name="mapshow" id="nd_mapshow-neighbors"
|
||||
[% 'checked' IF vars.sidebar_defaults.device_netmap.mapshow == 'neighbors' %] value="neighbors">
|
||||
<label for="nd_mapshow-neighbors">Neighbors Only</label>
|
||||
</div>
|
||||
|
||||
[% IF devgrp_list.size %]
|
||||
<div class="radio radio-success">
|
||||
[% ELSE %]
|
||||
<div class="radio radio-success tooltip-wrapper"
|
||||
rel="tooltip" data-placement="left" data-offset="5" data-title="No Named Groups Defined">
|
||||
[% END %]
|
||||
<input type="radio" name="mapshow" id="nd_mapshow-only"
|
||||
[% 'checked' IF vars.sidebar_defaults.device_netmap.mapshow == 'only' %]
|
||||
[% 'disabled' IF NOT devgrp_list.size %] value="only">
|
||||
<label for="nd_mapshow-only">Host Groups</label>
|
||||
</div>
|
||||
|
||||
[% IF devgrp_list.size %]
|
||||
<div class="clearfix">
|
||||
<select class="nd_side-select" size="[% devgrp_list.size > 5 ? 5 : devgrp_list.size %]"
|
||||
multiple="on" name="devgrp" id="nd_devgrp-select"
|
||||
rel="tooltip" data-placement="left" data-offset="5" data-title="Host Groups"/>
|
||||
[% FOREACH opt IN devgrp_list.pairs %]
|
||||
<option[% ' selected="selected"' IF devgrp_lkp.exists(opt.key) %]
|
||||
value="[% opt.key %]">[% opt.value | html_entity %]</option>
|
||||
[% END %]
|
||||
</select>
|
||||
</div>
|
||||
[% END %]
|
||||
|
||||
<div class="clearfix nd_netmap-sidebar">
|
||||
|
||||
<div id="nd_vlan-label" class="control-group">
|
||||
<div class="controls">
|
||||
<label><span id="nd_vlan-label-text">Carrying VLAN: </span>
|
||||
<input name="vlan" id="nd_vlan-entry" class="input-mini" type="number" placeholder="ID"
|
||||
value="[% params.vlan | html_entity %]" type="text"/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
[% IF devgrp_list.size %]
|
||||
<div class="clearfix input-prepend">
|
||||
<label class="add-on">
|
||||
<input type="checkbox" id="colorgroups" name="colorgroups"
|
||||
[% 'checked="checked"' IF vars.sidebar_defaults.device_netmap.colorgroups %]/>
|
||||
</label>
|
||||
<label class="nd_checkboxlabel" for="colorgroups">
|
||||
<span class="nd_searchcheckbox uneditable-input">Color Groups</span>
|
||||
</label>
|
||||
</div>
|
||||
[% END %]
|
||||
|
||||
<div class="clearfix input-prepend">
|
||||
<label class="add-on">
|
||||
<input type="checkbox" id="dynamicsize" name="dynamicsize"
|
||||
[% 'checked="checked"' IF vars.sidebar_defaults.device_netmap.dynamicsize %]/>
|
||||
</label>
|
||||
<label class="nd_checkboxlabel" for="dynamicsize">
|
||||
<span class="nd_searchcheckbox uneditable-input">Dynamic Size</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<button id="[% tab.tag %]_submit" type="submit" class="btn btn-info">
|
||||
<i class="icon-pencil icon-large pull-left nd_navbar-icon"></i>
|
||||
Redraw Map</button>
|
||||
|
||||
Reference in New Issue
Block a user