Update to support netbox v3.1 (#82)
* init for v3.1 * added coords + bump version * fix filter + added preselected roles * added draw_default_layout * upgraded packages * fixed edge/node labels * fixed enable_circuit_terminations * added filter for unconnected devices * added ignore_cable_type * fixed old settings using a string instead of array * removed distutils * fixed coords check * added coor saving * added doc img * updated docs * bump version * bump version
This commit is contained in:
mattieserver
@@ -34,344 +34,101 @@ var options = {
|
||||
};
|
||||
var selected_regions = [];
|
||||
var selected_sites = [];
|
||||
var coord_save_checkbox = null;
|
||||
|
||||
function getCookie(name) {
|
||||
var cookieValue = null;
|
||||
if (document.cookie && document.cookie !== '') {
|
||||
var cookies = document.cookie.split(';');
|
||||
for (var i = 0; i < cookies.length; i++) {
|
||||
var cookie = cookies[i].trim();
|
||||
// Does this cookie string begin with the name we want?
|
||||
if (cookie.substring(0, name.length + 1) === (name + '=')) {
|
||||
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
return cookieValue;
|
||||
}
|
||||
|
||||
|
||||
function htmlTitle(html) {
|
||||
container = document.createElement("div");
|
||||
container.innerHTML = html;
|
||||
return container;
|
||||
}
|
||||
|
||||
function addEdge(item) {
|
||||
item.title = htmlTitle( item.title );
|
||||
edges.add(item);
|
||||
}
|
||||
|
||||
function addNode(item) {
|
||||
item.title = htmlTitle( item.title );
|
||||
nodes.add(item);
|
||||
}
|
||||
|
||||
function iniPlotboxIndex() {
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
csrftoken = getCookie('csrftoken');
|
||||
container = document.getElementById('visgraph');
|
||||
csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
|
||||
startLoadSearchBar();
|
||||
handleButtonPress();
|
||||
handleLoadData();
|
||||
downloadButton = document.getElementById('btnDownloadImage');
|
||||
btnFullView = document.getElementById('btnFullView');
|
||||
coord_save_checkbox = document.getElementById('id_save_coords');
|
||||
}, false);
|
||||
}
|
||||
|
||||
function startLoadSearchBar() {
|
||||
$('#device-roles').select2({
|
||||
allowClear: true,
|
||||
placeholder: "---------",
|
||||
theme: "bootstrap",
|
||||
multiple: true,
|
||||
ajax: {
|
||||
url: "../../api/dcim/device-roles/?brief=true",
|
||||
dataType: "json",
|
||||
type: "GET",
|
||||
data: function (params) {
|
||||
var queryParameters = {
|
||||
q: params.term
|
||||
}
|
||||
return queryParameters;
|
||||
},
|
||||
processResults: function (data) {
|
||||
return {
|
||||
results: $.map(data.results, function (item) {
|
||||
return {
|
||||
text: item.name,
|
||||
id: item.id
|
||||
}
|
||||
})
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
$('#sites').select2({
|
||||
allowClear: true,
|
||||
placeholder: "---------",
|
||||
theme: "bootstrap",
|
||||
multiple: true,
|
||||
ajax: {
|
||||
url: function (params) {
|
||||
var base_url = "../../api/dcim/sites/?brief=true";
|
||||
if (selected_regions.length == 0) {
|
||||
return base_url;
|
||||
}
|
||||
else {
|
||||
for (var i = 0; i < selected_regions.length; i++) {
|
||||
var tmp = "®ion_id=" + selected_regions[i];
|
||||
base_url = base_url + tmp;
|
||||
function handleLoadData() {
|
||||
if (topology_data !== null) {
|
||||
graph = null;
|
||||
nodes = new vis.DataSet();
|
||||
edges = new vis.DataSet();
|
||||
graph = new vis.Network(container, { nodes: nodes, edges: edges }, options);
|
||||
|
||||
topology_data.edges.forEach(addEdge);
|
||||
topology_data.nodes.forEach(addNode);
|
||||
|
||||
graph.fit();
|
||||
canvas = document.getElementById('visgraph').getElementsByTagName('canvas')[0];
|
||||
|
||||
graph.on('afterDrawing', function () {
|
||||
var image = canvas.toDataURL(MIME_TYPE);
|
||||
downloadButton.href = image;
|
||||
downloadButton.download = "topology";
|
||||
});
|
||||
|
||||
graph.on("dragEnd", function (params) {
|
||||
dragged = this.getPositions(params.nodes);
|
||||
|
||||
if (coord_save_checkbox.checked) {
|
||||
if (Object.keys(dragged).length !== 0) {
|
||||
for (dragged_device in dragged) {
|
||||
var node_id = dragged_device;
|
||||
|
||||
var url = "/api/plugins/netbox_topology_views/save-coords/save_coords/";
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open("PATCH", url);
|
||||
xhr.setRequestHeader('X-CSRFToken', csrftoken );
|
||||
xhr.setRequestHeader("Accept", "application/json");
|
||||
xhr.setRequestHeader("Content-Type", "application/json");
|
||||
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4) {
|
||||
console.log(xhr.status);
|
||||
console.log(xhr.responseText);
|
||||
}};
|
||||
|
||||
var data = JSON.stringify({
|
||||
'node_id': node_id,
|
||||
'x': dragged[node_id].x,
|
||||
'y': dragged[node_id].y});
|
||||
|
||||
xhr.send(data);
|
||||
}
|
||||
return base_url;
|
||||
}
|
||||
|
||||
},
|
||||
dataType: "json",
|
||||
type: "GET",
|
||||
data: function (params) {
|
||||
var queryParameters = {
|
||||
q: params.term
|
||||
}
|
||||
return queryParameters;
|
||||
},
|
||||
processResults: function (data) {
|
||||
return {
|
||||
results: $.map(data.results, function (item) {
|
||||
return {
|
||||
text: item.name,
|
||||
id: item.id
|
||||
}
|
||||
})
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('#sites').on('select2:select', function (e) {
|
||||
var data = e.params.data;
|
||||
var index = selected_sites.indexOf(data.id.toString());
|
||||
if (index == -1) {
|
||||
selected_sites.push(data.id.toString());
|
||||
}
|
||||
});
|
||||
$('#sites').on('select2:unselect', function (e) {
|
||||
var data = e.params.data;
|
||||
var index = selected_sites.indexOf(data.id.toString());
|
||||
if (index > -1) {
|
||||
selected_sites.splice(index, 1);
|
||||
}
|
||||
});
|
||||
$('#sites').on('select2:clear', function (e) {
|
||||
selected_sites = [];
|
||||
});
|
||||
|
||||
$('#tags').select2({
|
||||
allowClear: true,
|
||||
placeholder: "---------",
|
||||
theme: "bootstrap",
|
||||
multiple: true,
|
||||
ajax: {
|
||||
url: "../../api/extras/tags/?brief=true",
|
||||
dataType: "json",
|
||||
type: "GET",
|
||||
data: function (params) {
|
||||
var queryParameters = {
|
||||
q: params.term
|
||||
}
|
||||
return queryParameters;
|
||||
},
|
||||
processResults: function (data) {
|
||||
return {
|
||||
results: $.map(data.results, function (item) {
|
||||
return {
|
||||
text: item.name,
|
||||
id: item.id
|
||||
}
|
||||
})
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
$('#regions').select2({
|
||||
allowClear: true,
|
||||
placeholder: "---------",
|
||||
theme: "bootstrap",
|
||||
multiple: true,
|
||||
ajax: {
|
||||
url: "../../api/dcim/regions/?brief=true",
|
||||
dataType: "json",
|
||||
type: "GET",
|
||||
data: function (params) {
|
||||
var queryParameters = {
|
||||
q: params.term
|
||||
}
|
||||
return queryParameters;
|
||||
},
|
||||
processResults: function (data) {
|
||||
return {
|
||||
results: $.map(data.results, function (item) {
|
||||
return {
|
||||
text: item.name,
|
||||
id: item.id
|
||||
}
|
||||
})
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('#regions').on('select2:select', function (e) {
|
||||
var data = e.params.data;
|
||||
var index = selected_regions.indexOf(data.id.toString());
|
||||
if (index == -1) {
|
||||
selected_regions.push(data.id.toString());
|
||||
}
|
||||
});
|
||||
$('#regions').on('select2:unselect', function (e) {
|
||||
var data = e.params.data;
|
||||
var index = selected_regions.indexOf(data.id.toString());
|
||||
if (index > -1) {
|
||||
selected_regions.splice(index, 1);
|
||||
}
|
||||
});
|
||||
$('#regions').on('select2:clear', function (e) {
|
||||
selected_regions = [];
|
||||
});
|
||||
|
||||
$('#locations').select2({
|
||||
allowClear: true,
|
||||
placeholder: "---------",
|
||||
theme: "bootstrap",
|
||||
multiple: true,
|
||||
ajax: {
|
||||
url: function (params) {
|
||||
var base_url = "../../api/dcim/locations/?brief=true";
|
||||
if (selected_sites.length == 0) {
|
||||
return base_url;
|
||||
}
|
||||
else {
|
||||
for (var i = 0; i < selected_sites.length; i++) {
|
||||
var tmp = "&site_id=" + selected_sites[i];
|
||||
base_url = base_url + tmp;
|
||||
}
|
||||
return base_url;
|
||||
}
|
||||
|
||||
},
|
||||
dataType: "json",
|
||||
type: "GET",
|
||||
data: function (params) {
|
||||
var queryParameters = {
|
||||
q: params.term
|
||||
}
|
||||
return queryParameters;
|
||||
},
|
||||
processResults: function (data) {
|
||||
return {
|
||||
results: $.map(data.results, function (item) {
|
||||
return {
|
||||
text: item.name,
|
||||
id: item.id
|
||||
}
|
||||
})
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
var deviceRolesSelect = $('#device-roles');
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: '../../api/plugins/topology-views/preselectdeviceroles/'
|
||||
}).then(function (data) {
|
||||
$.each(data.results, function (index, device_role_to_preload) {
|
||||
var option = new Option(device_role_to_preload.name, device_role_to_preload.id, true, true);
|
||||
deviceRolesSelect.append(option).trigger('change');
|
||||
deviceRolesSelect.trigger({
|
||||
type: 'select2:select',
|
||||
params: {
|
||||
data: device_role_to_preload
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
var tagsSelect = $('#tags');
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: '../../api/plugins/topology-views/preselecttags/'
|
||||
}).then(function (data) {
|
||||
$.each(data.results, function (index, tags_to_preload) {
|
||||
var option = new Option(tags_to_preload.name, tags_to_preload.id, true, true);
|
||||
tagsSelect.append(option).trigger('change');
|
||||
tagsSelect.trigger({
|
||||
type: 'select2:select',
|
||||
params: {
|
||||
data: tags_to_preload
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function handleButtonPress() {
|
||||
$("#search-form").submit(function (event) {
|
||||
$("#status").html('<span class="label label-info">Loading data</span>');
|
||||
event.preventDefault();
|
||||
var value = $("#name").val();
|
||||
var value2 = $("#device-roles").val();
|
||||
var value3 = $("#sites").val();
|
||||
var value4 = $("#tags").val();
|
||||
var value5 = $("#regions").val();
|
||||
var value6 = $('#checkHideUnconnected').is(":checked");
|
||||
var value7 = $("#locations").val();
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: "../../api/plugins/topology-views/search/search/",
|
||||
data: {
|
||||
'name': value,
|
||||
'devicerole[]': value2,
|
||||
'sites[]': value3,
|
||||
'tags[]': value4,
|
||||
'regions[]': value5,
|
||||
'hide_unconnected': value6,
|
||||
'locations[]': value7
|
||||
},
|
||||
headers: { "X-CSRFToken": csrftoken },
|
||||
contentType: "application/json; charset=utf-8",
|
||||
dataType: "json",
|
||||
beforeSend: function(){
|
||||
new_url = this.url.split("../../api/plugins/topology-views/search/search/?");
|
||||
new_url = new_url[1];
|
||||
new_url = "../../plugins/topology-views/full?" + new_url
|
||||
|
||||
btnFullView.classList.remove("disabled");
|
||||
btnFullView.href = new_url;
|
||||
},
|
||||
success: function (data_result, status, xhr) {
|
||||
$("#status").html('<span class="label label-info">Drawing network</span>');
|
||||
graph = null;
|
||||
nodes = new vis.DataSet();
|
||||
edges = new vis.DataSet();
|
||||
graph = new vis.Network(container, { nodes: nodes, edges: edges }, options);
|
||||
$.each(data_result["nodes"], function (index, device) {
|
||||
nodes.add(device);
|
||||
});
|
||||
$.each(data_result["edges"], function (index, edge) {
|
||||
edges.add(edge);
|
||||
});
|
||||
graph.fit();
|
||||
canvas = document.getElementById('visgraph').getElementsByTagName('canvas')[0];
|
||||
|
||||
graph.on('afterDrawing', function () {
|
||||
$("#status").html('<span class="label label-success">Ready</span>');
|
||||
var image = canvas.toDataURL(MIME_TYPE);
|
||||
downloadButton.href = image;
|
||||
downloadButton.download = "topology";
|
||||
});
|
||||
|
||||
graph.on("dragEnd", function (params) {
|
||||
dragged = this.getPositions(params.nodes);
|
||||
$.each(dragged, function (node_id, coordinates) {
|
||||
$("#coordstatus").html('');
|
||||
if ($('#checkSaveCoordinates').is(":checked")) {
|
||||
//nodes.update({ id: node_id, physics: false });
|
||||
$.ajax({
|
||||
url: "../../api/plugins/topology-views/save-coords/save_coords/",
|
||||
type: 'PATCH',
|
||||
dataType: 'json',
|
||||
headers: { "X-CSRFToken": csrftoken },
|
||||
contentType: "application/json; charset=utf-8",
|
||||
processData: false,
|
||||
data: JSON.stringify({
|
||||
'node_id': node_id,
|
||||
'x': coordinates.x,
|
||||
'y': coordinates.y
|
||||
}),
|
||||
error: function (error_result) {
|
||||
$("#coordstatus").html('<span class="label label-warning">Failed to update coordinates</span>');
|
||||
},
|
||||
success: function (data_result) {
|
||||
$("#coordstatus").html('<span class="label label-success">Updated coordinates</span>');
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
},
|
||||
error: function (error_result) {
|
||||
$("#status").html('<span class="label label-warning">Something went wrong</span>');
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user