I've been working on a JS based topology visualisation for Netbox and proposed it to Jeremy to include in the distribution but my idea was rejected: https://github.com/digitalocean/netbox/issues/1827
You can try it on my demo server here: http://114.142.160.109:8000/dcim/sites/site-1/
There are multiple sites created so feel free to change anything you can. There are probably still bugs as I just started to work on adding Circuits to the topology diagram (it only had devices earlier).
Its the site I am developing on so demo might go down any moment. It is located in Australia, so don't be surprised if it is slow =)
The core stuff: draw, move, add/delete connections should be pretty stable now.
My idea of integration is to create a small archive of new files and linux patch file for existing files. A bash script would copy new files to your existing netbox installation and patch a couple of existing files. There would also be a uninstall script to revert all changes of course. I've already tried this approach and it is working fine with 2.2.8, 2.2.9 and 2.3-develop versions. I'll publish this soon if there would be any interest in it.
Yeah, I guess it can be implemented as a completely standalone app but the question would be is where to store coordinates? They are stored in a custom field in device model ATM.
--
You received this message because you are subscribed to the Google Groups "NetBox" group.
To unsubscribe from this group and stop receiving emails from it, send an email to netbox-discuss+unsubscribe@googlegroups.com.
To post to this group, send email to netbox-discuss@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/netbox-discuss/a3f2f34f-a524-45da-a92e-43073402649c%40googlegroups.com.
pip is the python package manager. "pip install pynetbox", etc.
On Tue, Feb 20, 2018 at 6:23 AM, Vas Sadvariy <sadv...@gmail.com> wrote:
pip? thats something new =)This feature has exactly 0 (zero) lines of python code in it. I am afraid I'll have to add some before they would let me to publish it as a python package...It works on the client side completely, it is purely JS based.
On Tuesday, 20 February 2018 22:06:41 UTC+11, Niels Dutry wrote:I would like to say this looks awesome, keep up the work man!Please let me know when the feature is available as standalone module installable via pip.Would definetly make use of this tool (if it's available that way), makes the topology views and creation of interface connections alot easier!Regards,N.
--
You received this message because you are subscribed to the Google Groups "NetBox" group.
To unsubscribe from this group and stop receiving emails from it, send an email to netbox-discus...@googlegroups.com.
To post to this group, send email to netbox-...@googlegroups.com.
/* Layout */* { margin: 0;}html { overflow-y: scroll;}html, body { height: 100%;}body { padding-top: 70px;}.container { width: auto; max-width: 1600px;}.wrapper { min-height: 100%; height: auto !important; margin: 0 auto -61px; /* the bottom margin is the negative value of the footer's height */ padding-bottom: 30px;}.navbar-brand { padding: 12px 15px 8px;}.footer, .push { height: 60px; /* .push must be the same height as .footer */}.footer { background-color: #f5f5f5; border-top: 1px solid #d0d0d0;}footer p { margin: 20px 0;}
/* Hide the username in the navigation menu on displays less than 1400px wide */@media (max-width: 1399px) { #navbar_user { display: none; }}
/* Hide the search bar in the navigation menu on displays less than 1200px wide */@media (max-width: 1199px) { #navbar_search { display: none; }}
/* Collapse the nav menu on displays less than 960px wide */@media (max-width: 959px) { .navbar-header { float: none; } .navbar-left,.navbar-right { float: none !important; } .navbar-toggle { display: block; } .navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); } .navbar-fixed-top { top: 0; border-width: 0 0 1px; } .navbar-collapse.collapse { display: none!important; max-height: none; } .navbar-nav { float: none !important; margin-top: 7.5px; } .navbar-nav>li { float: none; } .navbar-nav>li>a { padding-top: 10px; padding-bottom: 10px; } .collapse.in { display:block !important; } #navbar_user { display: inline; }}
/* Navigation menu */li.subnav > a { padding-left: 30px;}ul.dropdown-menu { width: 250px;}ul.dropdown-menu div.buttons { padding-right: 10px; padding-top: 2px;}ul.dropdown-menu div.buttons a { width: 26px;}ul.dropdown-menu > li > a { clear: left;}
/* Forms */label { font-weight: normal;}label.required { font-weight: bold;}input[name="pk"] { margin-top: 0;}
/* Tables */ padding-bottom: 6px; padding-top: 10px; width: 30px;}tfoot td { font-weight: bold;}table.attr-table td:nth-child(1) { width: 25%;}.table-headings th { background-color: #f5f5f5;}
/* Paginator */div.paginator { margin-bottom: 20px;}nav ul.pagination { margin-top: 0; margin-bottom: 8px !important;}
/* Racks */div.rack_header { margin-left: 36px; text-align: center; width: 230px;}ul.rack_legend { float: left; list-style-type: none; margin-right: 6px; padding: 0; width: 30px;}ul.rack_legend li { color: #c0c0c0; display: block; font-size: 10px; height: 20px; overflow: hidden; padding: 5px 0; text-align: right;}div.rack_frame { float: left; position: relative;}ul.rack { border: 2px solid #404040; float: left; list-style-type: none; padding: 0; position: absolute; width: 230px;}ul.rack li { border-top: 1px solid #e0e0e0; display: block; font-size: 13px; height: 20px; overflow: hidden; text-align: center;}ul.rack li.h2u { height: 40px; }ul.rack li.h2u a, ul.rack li.h2u span { padding: 10px 0; }ul.rack li.h3u { height: 60px; }ul.rack li.h3u a, ul.rack li.h3u span { padding: 20px 0; }ul.rack li.h4u { height: 80px; }ul.rack li.h4u a, ul.rack li.h4u span { padding: 30px 0; }ul.rack li.h5u { height: 100px; }ul.rack li.h5u a, ul.rack li.h5u span { padding: 40px 0; }ul.rack li.h6u { height: 120px; }ul.rack li.h6u a, ul.rack li.h6u span { padding: 50px 0; }ul.rack li.h7u { height: 140px; }ul.rack li.h7u a, ul.rack li.h7u span { padding: 60px 0; }ul.rack li.h8u { height: 160px; }ul.rack li.h8u a, ul.rack li.h8u span { padding: 70px 0; }ul.rack li.h9u { height: 180px; }ul.rack li.h9u a, ul.rack li.h9u span { padding: 80px 0; }ul.rack li.h10u { height: 200px; }ul.rack li.h10u a, ul.rack li.h10u span { padding: 90px 0; }ul.rack li.h11u { height: 220px; }ul.rack li.h11u a, ul.rack li.h11u span { padding: 100px 0; }ul.rack li.h12u { height: 240px; }ul.rack li.h12u a, ul.rack li.h12u span { padding: 110px 0; }ul.rack li.h13u { height: 260px; }ul.rack li.h13u a, ul.rack li.h13u span { padding: 120px 0; }ul.rack li.h14u { height: 280px; }ul.rack li.h14u a, ul.rack li.h14u span { padding: 130px 0; }ul.rack li.h15u { height: 300px; }ul.rack li.h15u a, ul.rack li.h15u span { padding: 140px 0; }ul.rack li.h16u { height: 320px; }ul.rack li.h16u a, ul.rack li.h16u span { padding: 150px 0; }ul.rack li.h17u { height: 340px; }ul.rack li.h17u a, ul.rack li.h17u span { padding: 160px 0; }ul.rack li.h18u { height: 360px; }ul.rack li.h18u a, ul.rack li.h18u span { padding: 170px 0; }ul.rack li.h19u { height: 380px; }ul.rack li.h19u a, ul.rack li.h19u span { padding: 180px 0; }ul.rack li.h20u { height: 400px; }ul.rack li.h20u a, ul.rack li.h20u span { padding: 190px 0; }ul.rack li.h21u { height: 420px; }ul.rack li.h21u a, ul.rack li.h21u span { padding: 200px 0; }ul.rack li.h22u { height: 440px; }ul.rack li.h22u a, ul.rack li.h22u span { padding: 210px 0; }ul.rack li.h23u { height: 460px; }ul.rack li.h23u a, ul.rack li.h23u span { padding: 220px 0; }ul.rack li.h24u { height: 480px; }ul.rack li.h24u a, ul.rack li.h24u span { padding: 230px 0; }ul.rack li.h25u { height: 500px; }ul.rack li.h25u a, ul.rack li.h25u span { padding: 240px 0; }ul.rack li.h26u { height: 520px; }ul.rack li.h26u a, ul.rack li.h26u span { padding: 250px 0; }ul.rack li.h27u { height: 540px; }ul.rack li.h27u a, ul.rack li.h27u span { padding: 260px 0; }ul.rack li.h28u { height: 560px; }ul.rack li.h28u a, ul.rack li.h28u span { padding: 270px 0; }ul.rack li.h29u { height: 580px; }ul.rack li.h29u a, ul.rack li.h29u span { padding: 280px 0; }ul.rack li.h30u { height: 600px; }ul.rack li.h30u a, ul.rack li.h30u span { padding: 290px 0; }ul.rack li.h31u { height: 620px; }ul.rack li.h31u a, ul.rack li.h31u span { padding: 300px 0; }ul.rack li.h32u { height: 640px; }ul.rack li.h32u a, ul.rack li.h32u span { padding: 310px 0; }ul.rack li.h33u { height: 660px; }ul.rack li.h33u a, ul.rack li.h33u span { padding: 320px 0; }ul.rack li.h34u { height: 680px; }ul.rack li.h34u a, ul.rack li.h34u span { padding: 330px 0; }ul.rack li.h35u { height: 700px; }ul.rack li.h35u a, ul.rack li.h35u span { padding: 340px 0; }ul.rack li.h36u { height: 720px; }ul.rack li.h36u a, ul.rack li.h36u span { padding: 350px 0; }ul.rack li.h37u { height: 740px; }ul.rack li.h37u a, ul.rack li.h37u span { padding: 360px 0; }ul.rack li.h38u { height: 760px; }ul.rack li.h38u a, ul.rack li.h38u span { padding: 370px 0; }ul.rack li.h39u { height: 780px; }ul.rack li.h39u a, ul.rack li.h39u span { padding: 380px 0; }ul.rack li.h40u { height: 800px; }ul.rack li.h40u a, ul.rack li.h40u span { padding: 390px 0; }ul.rack li.h41u { height: 820px; }ul.rack li.h41u a, ul.rack li.h41u span { padding: 400px 0; }ul.rack li.h42u { height: 840px; }ul.rack li.h42u a, ul.rack li.h42u span { padding: 410px 0; }ul.rack li.h43u { height: 860px; }ul.rack li.h43u a, ul.rack li.h43u span { padding: 420px 0; }ul.rack li.h44u { height: 880px; }ul.rack li.h44u a, ul.rack li.h44u span { padding: 430px 0; }ul.rack li.h45u { height: 900px; }ul.rack li.h45u a, ul.rack li.h45u span { padding: 440px 0; }ul.rack li.h46u { height: 920px; }ul.rack li.h46u a, ul.rack li.h46u span { padding: 450px 0; }ul.rack li.h47u { height: 940px; }ul.rack li.h47u a, ul.rack li.h47u span { padding: 460px 0; }ul.rack li.h48u { height: 960px; }ul.rack li.h48u a, ul.rack li.h48u span { padding: 470px 0; }ul.rack li.h49u { height: 980px; }ul.rack li.h49u a, ul.rack li.h49u span { padding: 480px 0; }ul.rack li.h50u { height: 1000px; }ul.rack li.h50u a, ul.rack li.h50u span { padding: 490px 0; }ul.rack_far_face { background-color: #f7f7f7; z-index: 100;}ul.rack_far_face li.occupied { background: repeating-linear-gradient( 45deg, #f7f7f7, #f7f7f7 7px, #f0f0f0 7px, #f0f0f0 14px );}ul.rack_far_face li.blocked { background: repeating-linear-gradient( 45deg, #f7f7f7, #f7f7f7 7px, #ffc7c7 7px, #ffc7c7 14px );}ul.rack_near_face li.reserved { background: repeating-linear-gradient( 45deg, #f7f7f7, #f7f7f7 7px, #c7c7ff 7px, #c7c7ff 14px );}ul.rack_near_face { z-index: 200;}ul.rack_near_face li.occupied { border-top: 1px solid #474747; color: #474747;}ul.rack_near_face li.occupied:hover { background-image: url('../img/tint_20.png');}ul.rack_near_face li:first-child { border-top: 0;}ul.rack_near_face li.available a { color: #0000ff; display: none; text-decoration: none;}ul.rack_near_face li.available:hover { background-color: #ffffff;}ul.rack_near_face li.available:hover a { display: block;}ul.rack li.occupied a { color: #ffffff; display: block; font-weight: bold;}ul.rack li.occupied a:hover { text-decoration: none;}ul.rack li.occupied span { cursor: default; display: block;}li.occupied + li.available { border-top: 1px solid #474747;}
/* Devices */table.component-list td.subtable { padding: 0; padding-left: 16px;}table.component-list td.subtable td { border: none; padding-bottom: 6px; padding-top: 6px;}
/* Reports */table.reports td.method { font-family: monospace; padding-left: 30px;}table.reports td.stats label { display: inline-block; line-height: 14px; margin-bottom: 0; min-width: 40px;}
/* AJAX loader */.loading { position: fixed; display: none; z-index: 999; height: 2em; width: 2em; overflow: show; margin: auto; top: 0; left: 0; bottom: 0; right: 0;}.loading:before { content: ''; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.3);}
/* Misc */.text-nowrap { white-space: nowrap;}.banner-bottom { margin-bottom: 50px;}.panel table { margin-bottom: 0;}.panel .table th { border-bottom-width: 1px;}.panel table tr.even:first-child td { border-top: 0;}.panel .list-group { max-height: 400px; overflow: auto;}ul.nav-tabs, ul.nav-pills { margin-bottom: 20px;}/* Fix progress bar margin inside table cells */td .progress { margin-bottom: 0;}textarea { font-family: Consolas, Lucida Console, monospace;}/* Vis JS hide built-in manipulation panel */.vis-edit, .vis-edit-mode, .vis-close, .vis-back, .vis-separator-line { display: none !important; background-image: none !important;}.vis-manipulation { background-color: #fff !important; border: 0 !important;}/* JQuery hide dialog close button */.ui-dialog-titlebar-close { display: none;}
To view this discussion on the web visit https://groups.google.com/d/msgid/netbox-discuss/98a5dd92-4cb3-4d10-a637-95e20b7cf416%40googlegroups.com.--
You received this message because you are subscribed to a topic in the Google Groups "NetBox" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/netbox-discuss/MRp0I6nS5xc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to netbox-discuss+unsubscribe@googlegroups.com.
To post to this group, send email to netbox-discuss@googlegroups.com.
Best regards,Vasily Sadvariy
To unsubscribe from this group and all its topics, send an email to netbox-discus...@googlegroups.com.
To post to this group, send email to netbox-...@googlegroups.com.
{% extends '_base.html' %}{% load static from staticfiles %}{% load tz %}{% load helpers %}
{% block header %} <div class="row"> <div class="col-sm-8 col-md-9"> <ol class="breadcrumb"> <li><a href="{% url 'dcim:site_list' %}">Sites</a></li> {% if site.region %} {% for region in site.region.get_ancestors %} <li><a href="{{ region.get_absolute_url }}">{{ region }}</a></li> {% endfor %} <li><a href="{{ site.region.get_absolute_url }}">{{ site.region }}</a></li> {% endif %} <li>{{ site }}</li> </ol> </div> <div class="col-sm-4 col-md-3"> <form action="{% url 'dcim:site_list' %}" method="get"> <div class="input-group"> <input type="text" name="q" class="form-control" placeholder="Search sites" /> <span class="input-group-btn"> <button type="submit" class="btn btn-primary"> <span class="fa fa-search" aria-hidden="true"></span> </button> </span> </div> </form> </div> </div> <div class="pull-right"> {% if show_graphs %} <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#graphs_modal" data-obj="{{ site.name }}" data-url="{% url 'dcim-api:site-graphs' pk=site.pk %}" title="Show graphs"> <i class="fa fa-signal" aria-hidden="true"></i> Graphs </button> {% endif %} {% if perms.dcim.change_site %} <a href="{% url 'dcim:site_edit' slug=site.slug %}" class="btn btn-warning"> <span class="fa fa-pencil" aria-hidden="true"></span> Edit this site </a> {% endif %} {% if perms.dcim.delete_site %} <a href="{% url 'dcim:site_delete' slug=site.slug %}" class="btn btn-danger"> <span class="fa fa-trash" aria-hidden="true"></span> Delete this site </a> {% endif %} </div> <h1>{% block title %}{{ site }}{% endblock %}</h1> {% include 'inc/created_updated.html' with obj=site %} <ul class="nav nav-tabs"> <li role="presentation"{% if not active_tab %} class="active"{% endif %}> <a href="{{ site.get_absolute_url }}">Site</a> </li> <li role="presentation"{% if active_tab == 'changelog' %} class="active"{% endif %}> <a href="{% url 'dcim:site_changelog' slug=site.slug %}">Changelog</a> </li> </ul>{% endblock %}
{% block stylesheet %} <link rel="stylesheet" href="{% static 'vis-4.21.0/vis-network.min.css' %}">{% endblock %}
{% block content %}<div class="row"> <div class="col-md-7"> <div class="panel panel-default"> <div class="panel-heading"> <strong>Site</strong> </div> <table class="table table-hover panel-body attr-table"> <tr> <td>Status</td> <td> <span class="label label-{{ site.get_status_class }}">{{ site.get_status_display }}</span> </td> </tr> <tr> <td>Region</td> <td> {% if site.region %} {% for region in site.region.get_ancestors %} <a href="{{ region.get_absolute_url }}">{{ region }}</a> <i class="fa fa-angle-right"></i> {% endfor %} <a href="{{ site.region.get_absolute_url }}">{{ site.region }}</a> {% else %} <span class="text-muted">None</span> {% endif %} </td> </tr> <tr> <td>Tenant</td> <td> {% if site.tenant %} {% if site.tenant.group %} <a href="{{ site.tenant.group.get_absolute_url }}">{{ site.tenant.group }}</a> <i class="fa fa-angle-right"></i> {% endif %} <a href="{{ site.tenant.get_absolute_url }}">{{ site.tenant }}</a> {% else %} <span class="text-muted">None</span> {% endif %} </td> </tr> <tr> <td>Facility</td> <td> {% if site.facility %} {{ site.facility }} {% else %} <span class="text-muted">N/A</span> {% endif %} </td> </tr> <tr> <td>AS Number</td> <td> {% if site.asn %} {{ site.asn }} {% else %} <span class="text-muted">N/A</span> {% endif %} </td> </tr> <tr> <td>Time Zone</td> <td> {% if site.time_zone %} {{ site.time_zone }} (UTC {{ site.time_zone|tzoffset }})<br /> <small class="text-muted">Site time: {% timezone site.time_zone %}{% now "SHORT_DATETIME_FORMAT" %}{% endtimezone %}</small> {% else %} <span class="text-muted">N/A</span> {% endif %} </td> </tr> <tr> <td>Description</td> <td> {% if site.description %} {{ site.description }} {% else %} <span class="text-muted">N/A</span> {% endif %} </td> </tr> </table> </div> <div class="panel panel-default"> <div class="panel-heading"> <strong>Contact Info</strong> </div> <table class="table table-hover panel-body attr-table"> <tr> <td>Physical Address</td> <td> {% if site.physical_address %} <div class="pull-right"> <a href="http://maps.google.com/?q={{ site.physical_address|oneline }}" target="_blank" class="btn btn-primary btn-xs"> <i class="glyphicon glyphicon-map-marker"></i> Map it </a> </div> <span>{{ site.physical_address|linebreaksbr }}</span> {% else %} <span class="text-muted">N/A</span> {% endif %} </td> </tr> <tr> <td>Shipping Address</td> <td> {% if site.shipping_address %} <span>{{ site.shipping_address|linebreaksbr }}</span> {% else %} <span class="text-muted">N/A</span> {% endif %} </td> </tr> <tr> <td>GPS Coordinates</td> <td> {% if site.latitude and site.longitude %} <div class="pull-right"> <a href="http://maps.google.com/?q={{ site.latitude }},{{ site.longitude }}" target="_blank" class="btn btn-primary btn-xs"> <i class="glyphicon glyphicon-map-marker"></i> Map it </a> </div> <span>{{ site.latitude }}, {{ site.longitude }}</span> {% else %} <span class="text-muted">N/A</span> {% endif %} </td> </tr> <tr> <td>Contact Name</td> <td> {% if site.contact_name %} <span>{{ site.contact_name }}</span> {% else %} <span class="text-muted">N/A</span> {% endif %} </td> </tr> <tr> <td>Contact Phone</td> <td> {% if site.contact_phone %} <a href="tel:{{ site.contact_phone }}">{{ site.contact_phone }}</a> {% else %} <span class="text-muted">N/A</span> {% endif %} </td> </tr> <tr> <td>Contact E-Mail</td> <td> {% if site.contact_email %} <a href="mailto:{{ site.contact_email }}">{{ site.contact_email }}</a> {% else %} <span class="text-muted">N/A</span> {% endif %} </td> </tr> </table> </div> {% include 'inc/custom_fields_panel.html' with obj=site %} {% include 'extras/inc/tags_panel.html' with tags=site.tags.all url='dcim:site_list' %} <div class="panel panel-default"> <div class="panel-heading"> <strong>Comments</strong> </div> <div class="panel-body"> {% if site.comments %} {{ site.comments|gfm }} {% else %} <span class="text-muted">None</span> {% endif %} </div> </div> </div> <div class="col-md-5"> <div class="panel panel-default"> <div class="panel-heading"> <strong>Stats</strong> </div> <div class="row panel-body"> <div class="col-md-4 text-center"> <h2><a href="{% url 'dcim:rack_list' %}?site={{ site.slug }}" class="btn {% if stats.rack_count %}btn-primary{% else %}btn-default{% endif %} btn-lg">{{ stats.rack_count }}</a></h2> <p>Racks</p> </div> <div class="col-md-4 text-center"> <h2><a href="{% url 'dcim:device_list' %}?site={{ site.slug }}" class="btn {% if stats.device_count %}btn-primary{% else %}btn-default{% endif %} btn-lg">{{ stats.device_count }}</a></h2> <p>Devices</p> </div> <div class="col-md-4 text-center"> <h2><a href="{% url 'ipam:prefix_list' %}?site={{ site.slug }}" class="btn {% if stats.prefix_count %}btn-primary{% else %}btn-default{% endif %} btn-lg">{{ stats.prefix_count }}</a></h2> <p>Prefixes</p> </div> <div class="col-md-4 text-center"> <h2><a href="{% url 'ipam:vlan_list' %}?site={{ site.slug }}" class="btn {% if stats.vlan_count %}btn-primary{% else %}btn-default{% endif %} btn-lg">{{ stats.vlan_count }}</a></h2> <p>VLANs</p> </div> <div class="col-md-4 text-center"> <h2><a href="{% url 'circuits:circuit_list' %}?site={{ site.slug }}" class="btn {% if stats.circuit_count %}btn-primary{% else %}btn-default{% endif %} btn-lg">{{ stats.circuit_count }}</a></h2> <p>Circuits</p> </div> <div class="col-md-4 text-center"> <h2><a href="{% url 'virtualization:virtualmachine_list' %}?site={{ site.slug }}" class="btn {% if stats.vm_count %}btn-primary{% else %}btn-default{% endif %} btn-lg">{{ stats.vm_count }}</a></h2> <p>Virtual Machines</p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <strong>Rack Groups</strong> </div> {% if rack_groups %} <table class="table table-hover panel-body"> {% for rg in rack_groups %} <tr> <td><i class="fa fa-fw fa-folder-o"></i> <a href="{{ rg.get_absolute_url }}">{{ rg }}</a></td> <td>{{ rg.rack_count }}</td> <td class="text-right"> <a href="{% url 'dcim:rack_elevation_list' %}?group_id={{ rg.pk }}" class="btn btn-xs btn-primary" title="View elevations"> <i class="fa fa-eye"></i> </a> </td> </tr> {% endfor %} </table> {% else %} <div class="panel-body text-muted"> None </div> {% endif %} </div> <div class="panel panel-default"> <div class="panel-heading"> <strong>Images</strong> </div> {% include 'inc/image_attachments.html' with images=site.images.all %} {% if perms.extras.add_imageattachment %} <div class="panel-footer text-right"> <a href="{% url 'dcim:site_add_image' object_id=site.pk %}" class="btn btn-primary btn-xs"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Attach an image </a> </div> {% endif %} </div> <!--<div class="panel panel-default"> <div class="panel-heading"> <strong>Topology Maps</strong> </div> {% if topology_maps %} <table class="table table-hover panel-body"> {% for tm in topology_maps %} <tr> <td><i class="fa fa-fw fa-map-o"></i> <a href="{% url 'extras-api:topologymap-render' pk=tm.pk %}" target="_blank">{{ tm }}</a></td> <td>{{ tm.description }}</td> </tr> {% endfor %} </table> {% else %} <div class="panel-body text-muted"> None </div> {% endif %} </div>!--> </div> </div>
<div class="row"> <div class="col-md-5"> <div class="panel panel-default"> <div class="panel-heading"> <strong>Topology</strong> </div> <div class="panel-body"> <div id="visjsgraph"></div> </div> {% if perms.dcim.delete_interfaceconnection or perms.dcim.add_interfaceconnection or perms.dcim.change_device%} <div class="panel-footer text-right"> {% if perms.dcim.delete_interfaceconnection %} <div id="topology_delete_edge" class="btn btn-primary btn-xs disabled"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> <span id="topology_delete_edge_label">Delete selected</span> </div> {% endif %} {% if perms.dcim.add_interfaceconnection %} <div id="topology_add_edge" class="btn btn-primary btn-xs"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> <span id="topology_add_edge_label">New connection</span> </div> {% endif %} {% if perms.dcim.change_device %} <div id="topology_reset_coordinates" class="btn btn-primary btn-xs"> <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> <span>Reset coordinates</span> </div> {% endif %} </div> {% endif %} </div> </div> <div id="add_connection_dialog" title="Creating a new connection" style="display: none;"> <div style="display: inline-block; margin-bottom:5px; width: 100%"> <label class="col-xs-5 control-label required" id="device_a_label" for="device_a_interfaces"></label> <div class="col-xs-7"> <select class="form-control" id="device_a_interfaces"></select> </div> </div> <div style="display: inline-block; margin-bottom:5px; width: 100%"> <label class="col-xs-5 control-label required" id="device_b_label" for="device_b_interfaces"></label> <div class="col-xs-7"> <select class="form-control" id="device_b_interfaces"></select> </div> </div> <div style="display: inline-block; margin-bottom:5px; width: 100%"> <label class="col-xs-5 control-label required" for="connection_status">Status</label> <div class="col-xs-7"> <select class="form-control" id="connection_status"> <option value='True'>Connected</option> <option value='False'>Planned</option> </select> </div> </div> </div> <div id="delete_connection_dialog" title="Deleting existing connection" style="display: none;"> <span id="delete_connection_label"></span> </div></div>
{% include 'inc/graphs_modal.html' %}{% endblock %}
{% block javascript %}<script src="{% static 'js/graphs.js' %}?v{{ settings.VERSION }}"></script><script src="{% static 'vis-4.21.0/vis-network.min.js' %}"></script><script>var TOPOLOGY_IMG_DIR = "{% static 'img/topology/' %}";var TOKEN = "{{ csrf_token }}";var SITE_SLUG = "{{ site.slug }}";{% if perms.dcim.change_device %}var CHANGE_DEVICE_ALLOWED = true;{% else %}var CHANGE_DEVICE_ALLOWED = false;{% endif %}</script><script src="{% static 'js/topology.js' %}"></script>{% endblock %}
Just had a quick look and it was a really easy fix actually.
Just had a quick look and it was a really easy fix actually.
Just had a quick look and it was a really easy fix actually.
Just had a quick look and it was a really easy fix actually.
Just had a quick look and it was a really easy fix actually.
--
You received this message because you are subscribed to a topic in the Google Groups "NetBox" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/netbox-discuss/MRp0I6nS5xc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to netbox-discus...@googlegroups.com.
To post to this group, send email to netbox-...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/netbox-discuss/23d5d53e-3e69-4657-85ab-3a457afecccf%40googlegroups.com.
--
You received this message because you are subscribed to a topic in the Google Groups "NetBox" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/netbox-discuss/MRp0I6nS5xc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to netbox-discus...@googlegroups.com.
To post to this group, send email to netbox-...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/netbox-discuss/a91f621a-2e21-44a9-84cc-2397b594d73d%40googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/netbox-discuss/cad2c797-a525-435d-b3a0-646649cdcdc9%40googlegroups.com.
api_call("/static/js/topology_config.json", "GET", undefined, function(config) {
var hidden_roles = config.hidden_roles;
// load devices
api_call("/api/dcim/devices/?limit=0&site="+SITE_SLUG, "GET", undefined, function(response) {
$.each(response.results, function(index, device) {
if (hidden_roles.includes(device.device_role.slug)) {
console.log(device.name+' has been hidden because of its role '+device.device_role.slug$
return undefined;
}
var node = {
id: device.id,
name: device.name,
label: '*'+device.name+'*\n'+device.device_type.model,
image: TOPOLOGY_IMG_DIR + device.device_role.slug+'.png',
title: device.device_role.name+'<br>'
+device.name+'<br>'
+device.device_type.manufacturer.name+' '+device.device_type.model+'<br>'
+'SN: '+device.serial,
}
if (device.custom_fields.coordinates){
var coordinates = device.custom_fields.coordinates.split(";");
node.x = parseInt(coordinates[0]);
node.y = parseInt(coordinates[1]);
node.physics = false;
}
if (device.device_role.name === 'MPLS'){
node.size = 80;
}
if (device.device_role.name === 'Internet'){
node.size = 80;
}
if (device.device_role.name === 'Core Switch'){
node.size = 80;
}
nodes.add(node);
});
// once all nodes a loaded fit them to viewport
topology.fit();
});
To view this discussion on the web visit https://groups.google.com/d/msgid/netbox-discuss/1bfa6764-41ca-4750-b020-deb027f55fc8%40googlegroups.com.
--
You received this message because you are subscribed to a topic in the Google Groups "NetBox" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/netbox-discuss/MRp0I6nS5xc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to netbox-discus...@googlegroups.com.
To post to this group, send email to netbox-...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/netbox-discuss/b238d672-4cb2-46ed-b2a7-0481b626c6ab%40googlegroups.com.
You received this message because you are subscribed to the Google Groups "NetBox" group.
To unsubscribe from this group and stop receiving emails from it, send an email to netbox-discus...@googlegroups.com.
To post to this group, send email to netbox-...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/netbox-discuss/CAH1ZNfU%2Bt27MGC2O%3D1w70zk%3Dzg9o9HGbUxxh1XPt_3gZe5vnRA%40mail.gmail.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/netbox-discuss/1e904538-0bee-428a-aacd-2d9108110620%40googlegroups.com.
To unsubscribe from this group and all its topics, send an email to netbox-...@googlegroups.com.