first commit

4 files changed, 387 insertions, 0 deletions

diff --git a/alpine-netviz.css b/alpine-netviz.css
new file mode 100644
index 0000000..2488fa6
--- /dev/null
+++ b/alpine-netviz.css
@@ -0,0 +1,35 @@
+.content {
+    position: absolute;
+    display: block;
+    width: 100%;
+    height: 100%;
+    background-color: #202020;
+}
+
+#network {
+    height: 100%;
+    width: 100%;
+}
+
+.logo-container {
+    position: absolute;
+    display: block;
+    z-index: 1000;
+    top: 16px;
+    left: 16px;
+    height: 60px;
+    width: 200px;
+    /*background-color: #fff; */
+}
+
+.logo {
+    margin-top: 8px;
+    margin-left: 10px;
+    height: 44px;
+    width: 180px;
+    background-image: url(logo.svg);
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-origin: content-box;
+    background-position: center;
+}
diff --git a/alpine-netviz.js b/alpine-netviz.js
new file mode 100644
index 0000000..0357fba
--- /dev/null
+++ b/alpine-netviz.js
@@ -0,0 +1,154 @@
+jQuery(document).ready(function($) {
+    "use strict";
+
+    function NetBox() {
+        this.url = "http://netbox.alpin.pw/api";
+        this.endpoints = {
+            circuits:       [
+                "providers", "circuit-types", "circuits",
+                "circuits-termination"
+            ],
+            dcim:           [
+                "regions", "sites", "rack-groups", "rack-roles", "racks",
+                "rack-reservations", "manufacturers", "device-types",
+                "console-port-templates", "console-server-port-templates",
+                "power-port-templates", "power-outlet-templates",
+                "interface-templates", "device-bay-templates", "device-roles",
+                "platforms", "devices", "console-ports",
+                "console-server-ports", "power-ports", "power-outlets",
+                "interfaces", "device-bays", "inventory-items",
+                "console-connections", "power-connections",
+                "interface-connections", "virtual-chassis", "connected-device"
+            ],
+            extras:         [
+                "graphs", "export-termplates", "topology-maps", "tags",
+                "image-attachments", "config-contexts", "reports",
+                "object-changes", "recent-activity"
+            ],
+            ipam:           [
+                "vrfs", "rirs", "aggregates", "roles", "prefixes",
+                "ip-addresses", "vlan-groups", "vlans", "services"
+            ],
+            secrets:        [
+                "secret-roles", "secrets", "get-session-key",
+                "generate-rsa-key-pair"
+            ],
+            tenancy:        [
+                "tenant-groups", "tenants"
+            ],
+            virtualization: [
+                "cluster-types", "cluster-groups", "clusters",
+                "virtual-machines", "interfaces"
+            ]
+        };
+    }
+
+    NetBox.prototype.visjs_data = function(cb) {
+        this.pull("virtualization", "virtual-machines", function(r_vms) {
+            let vms      = r_vms.results,
+                clusters = Array.from(new Set(vms.map(x => x.cluster.name))),
+                nodes    = [],
+                edges    = [];
+
+            // add virtual machines to the list of nodes
+            vms.forEach(function(el, idx) {
+                nodes.push({
+                    id:       el.name,
+                    label:    el.name,
+                    group:    "virtual_machines",
+                    _cluster: el.cluster.name
+                });
+            });
+
+            // add clusters to the list of nodes
+            clusters.forEach(function(el, idx) {
+                nodes.push({
+                    id:    el,
+                    label: el,
+                    group: "clusters"
+                });
+            });
+
+            // add edges between all non-cluster nodes
+            nodes
+            .filter(x => x.group !== "clusters")
+            .forEach(function(node) {
+                if (node._cluster) {
+                    edges.push({
+                        from: node.id,
+                        to:   node._cluster
+                    });
+                }
+            });
+
+            // filter out all netbox clusters from the list of nodes
+            let t_nodes = nodes.filter(x => x.group === "clusters");
+
+            // make edges between all but the first and last nodes
+            t_nodes.forEach(function(node, idx) {
+                if (idx !== t_nodes.length - 1) {
+                    edges.push({
+                        from: node.id,
+                        to: t_nodes[idx + 1].id
+                    });
+                }
+            });
+
+            // last link
+            edges.push({
+                from: t_nodes[0].id,
+                to:   t_nodes[t_nodes.length - 1].id
+            });
+
+            cb({
+                nodes: nodes,
+                edges: edges
+            });
+        });
+    }
+
+    NetBox.prototype.pull = function(category, item, cb) {
+        if (!Object.keys(this.endpoints).includes(category)) {
+            throw new Error(`the category '${category}' is not in the list ` +
+                            "of allowed categories");
+        }
+
+        if (!Object.values(this.endpoints[category]).includes(item)) {
+            throw new Error(`the item '${item}' is not in the list of ` +
+                            "allowed endpoints");
+        }
+
+        $.ajax({
+            url: `${this.url}/${category}/${item}/`,
+            data: {
+                format: "json",
+                limit: 1000
+            },
+            success: function(data) {
+                cb(data);
+            }
+        });
+    }
+
+    let nb = new NetBox();
+
+    nb.visjs_data(function(data) {
+        let container = document.getElementById("network"),
+            options = {
+                nodes: {
+                    shape: 'dot',
+                    size: 20,
+                    font: {
+                        size: 15,
+                        color: '#ffffff'
+                    },
+                    borderWidth: 2
+                },
+                edges: {
+                    width: 2
+                },
+                groups: {}
+            },
+            network = new vis.Network(container, data, options);
+    });
+});
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..f18f904
--- /dev/null
+++ b/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>alpine-netviz</title>
+
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css">
+        <link rel="stylesheet" href="alpine-netviz.css">
+    </head>
+    <body>
+        <div class="content">
+            <div class="logo-container">
+                <div class="logo"></div>
+            </div>
+
+            <div id="network"></div>
+        </div>
+
+        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
+        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
+        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
+        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
+        <script type="text/javascript" src="alpine-netviz.js"></script>
+    </body>
+</html>
diff --git a/logo.svg b/logo.svg
new file mode 100644
index 0000000..70f2f60
--- /dev/null
+++ b/logo.svg
@@ -0,0 +1,167 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.5 r10040"
+   width="665.16876"
+   height="161.78787"
+   xml:space="preserve"
+   sodipodi:docname="alpinelinux-logo.svg"><metadata
+     id="metadata8"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><defs
+     id="defs6"><clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath16"><path
+         d="M 0,560 960,560 960,0 0,0 0,560 z"
+         id="path18"
+         inkscape:connector-curvature="0" /></clipPath></defs><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1595"
+     inkscape:window-height="964"
+     id="namedview4"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:zoom="0.33333333"
+     inkscape:cx="-197.05676"
+     inkscape:cy="-80.4375"
+     inkscape:window-x="276"
+     inkscape:window-y="233"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="g10" /><g
+     id="g10"
+     inkscape:groupmode="layer"
+     inkscape:label="Alpine_Linux_logo_v4"
+     transform="matrix(1.25,0,0,-1.25,-267.55675,592.22537)"><g
+       id="g20"
+       transform="translate(686.7844,397.9583)"
+       style="fill:#0d597f;fill-opacity:1"><path
+         d="m 0,0 c -3.74,6.413 -3.73,19.372 0.023,26.161 1.64,2.969 6.622,9.559 28.367,9.559 4.468,0 7.739,-0.229 10.148,-0.554 5.278,-0.71 9.297,-2.509 9.297,-7.425 0,-6.49 -9.565,-6.55 -9.565,-6.55 l -20.27,0 C 9.392,21.191 8.734,9.287 8.734,9.287 l 9.17,0 20.366,0 c 10.375,0 21.125,4.649 21.125,18.258 0,9.047 -5.207,15.135 -13.71,17.468 -8.498,2.332 -11.809,2.206 -23.391,1.998 C 13.02,46.845 7.679,44.81 4.305,43.752 -1.609,41.896 -6.907,38.432 -10.48,31.966 -16.297,21.438 -16.244,4.03 -10.365,-6.047 -4.08,-16.821 6.696,-22.587 19.723,-22.597 l 39.672,0 10e-4,11.943 -39.714,0 C 8.246,-10.688 2.571,-4.408 0,0"
+         style="fill:#0d597f;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path22"
+         inkscape:connector-curvature="0" /></g><g
+       id="g24"
+       transform="translate(441.9298,442.9648)"
+       style="fill:#0d597f;fill-opacity:1"><path
+         d="m 0,0 c -10.527,5.817 -27.936,5.764 -38.013,-0.115 -14.384,-8.391 -19.841,-24.786 -14.594,-43.858 2.693,-9.79 9.965,-17.002 21.03,-20.855 7.818,-2.723 15.012,-2.801 15.31,-2.803 l -0.015,12 c -0.207,10e-4 -20.756,0.305 -24.755,14.842 -5.16,18.758 3.468,27.041 9.071,30.309 6.413,3.74 19.372,3.73 26.161,-0.023 7.212,-3.985 7.733,-12.297 7.733,-25.513 l 0,-24.358 c 0,-8.608 12,-9.171 12,-9.171 l 0,9.171 0,24.358 c 0,12.618 0,28.319 -13.928,36.016"
+         style="fill:#0d597f;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path26"
+         inkscape:connector-curvature="0" /></g><g
+       id="g28"
+       transform="translate(597.6101,375.3665)"
+       style="fill:#0d597f;fill-opacity:1"><path
+         d="m 0,0 0,37.405 c 0.011,13.027 5.776,23.803 16.55,30.088 10.078,5.878 27.486,5.932 38.013,0.115 13.928,-7.697 13.928,-23.399 13.928,-36.016 l 0,-24.319 0,-9.171 c 0,0 -12,0.563 -12,9.171 l 0,24.319 c 0,13.216 -0.521,21.528 -7.733,25.513 C 41.969,60.858 29.01,60.868 22.597,57.128 18.189,54.557 11.909,48.882 11.943,37.446 l 0,-37.447 L 0,0 z"
+         style="fill:#0d597f;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path30"
+         inkscape:connector-curvature="0" /></g><g
+       id="g32"
+       transform="translate(579.8309,375.3661)"
+       style="fill:#0d597f;fill-opacity:1"><path
+         d="m 0,0 0,47.562 0,9.171 c 0,0 11.904,-0.658 11.904,-9.267 L 11.904,0 0,0 z"
+         style="fill:#0d597f;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path34"
+         inkscape:connector-curvature="0" /></g><g
+       id="g36"
+       transform="translate(591.7351,443.8518)"
+       style="fill:#0d597f;fill-opacity:1"><path
+         d="m 0,0 0,-2.028 0,-9.171 c 0,0 -11.904,0.658 -11.904,9.267 L -11.904,0 0,0 z"
+         style="fill:#0d597f;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path38"
+         inkscape:connector-curvature="0" /></g><g
+       id="g40"
+       transform="translate(519.3928,442.6805)"
+       style="fill:#0d597f;fill-opacity:1"><path
+         d="m 0,0 c 10.527,5.817 27.936,5.764 38.013,-0.115 14.384,-8.391 19.841,-24.786 14.594,-43.858 -2.693,-9.79 -9.965,-17.002 -21.03,-20.855 -7.818,-2.723 -15.007,-2.447 -15.305,-2.449 l 0.01,11.899 c 0.207,10e-4 20.756,0.052 24.755,14.589 5.16,18.758 -3.468,27.041 -9.071,30.309 -6.413,3.74 -19.372,3.73 -26.161,-0.023 -7.212,-3.985 -7.733,-12.297 -7.733,-25.513 l 0,-12.612 c 0,-8.608 -12,-9.17 -12,-9.17 l 0,9.17 0,12.612 c 0,12.618 0,28.319 13.928,36.016"
+         style="fill:#0d597f;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path42"
+         inkscape:connector-curvature="0" /></g><g
+       id="g44"
+       transform="translate(517.3693,344.6278)"
+       style="fill:#0d597f;fill-opacity:1"><path
+         d="m 0,0 0,30.505 0,9.17 c 0,0 -11.904,-0.658 -11.904,-9.266 L -11.904,0 0,0 z"
+         style="fill:#0d597f;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path46"
+         inkscape:connector-curvature="0" /></g><g
+       id="g48"
+       transform="translate(473.349,473.7803)"
+       style="fill:#0d597f;fill-opacity:1"><path
+         d="m 0,0 0,-32.359 0,-9.17 c 0,0 -11.904,0.658 -11.904,9.266 L -11.904,0 0,0 z"
+         style="fill:#0d597f;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path50"
+         inkscape:connector-curvature="0" /></g><g
+       id="g52"
+       transform="translate(474.9603,402.1447)"
+       style="fill:#0d597f;fill-opacity:1"><path
+         d="m 0,0 c -1.039,3.777 -1.519,7.129 -1.577,10.101 l -0.034,10.255 c 0,8.608 -11.913,9.171 -11.913,9.171 l 0,-9.171 0,-10.193 c 0.037,-4.24 0.68,-8.714 1.954,-13.347 2.693,-9.79 9.966,-17.002 21.03,-20.855 7.818,-2.723 14.992,-2.743 15.289,-2.745 l 0.006,11.942 C 24.548,-14.841 3.999,-14.537 0,0"
+         style="fill:#0d597f;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path54"
+         inkscape:connector-curvature="0" /></g><g
+       id="g56"
+       transform="translate(268.1394,393.2718)"
+       style="fill:#0d597f;fill-opacity:1"><path
+         d="M 0,0 0,15.687 -11.296,4.379 C -10.079,3.532 -8.932,2.836 -7.853,2.27 -6.774,1.703 -5.764,1.265 -4.823,0.932 -3.882,0.598 -3.009,0.37 -2.206,0.222 -1.402,0.075 -0.667,0.009 0,0 m 57.751,1.304 c 0.02,-0.017 0.13,-0.11 0.333,-0.239 0.204,-0.13 0.502,-0.297 0.898,-0.462 0.395,-0.164 0.889,-0.327 1.485,-0.448 0.596,-0.122 1.294,-0.202 2.098,-0.202 0.671,0 1.411,0.059 2.222,0.2 0.812,0.142 1.693,0.367 2.645,0.699 0.953,0.333 1.976,0.773 3.07,1.344 1.094,0.572 2.259,1.276 3.495,2.136 L 65.425,12.729 37.015,41.245 24.549,28.776 7.733,46.117 -34.471,4.39 c 1.235,-0.86 2.398,-1.564 3.491,-2.136 1.093,-0.571 2.115,-1.011 3.067,-1.344 0.951,-0.332 1.832,-0.557 2.643,-0.698 0.81,-0.142 1.55,-0.201 2.22,-0.201 0.804,0 1.502,0.08 2.097,0.202 0.596,0.121 1.089,0.284 1.485,0.449 0.396,0.164 0.693,0.331 0.897,0.461 0.204,0.13 0.314,0.223 0.334,0.24 L 0.815,20.415 7.628,26.948 26.494,8.082 33.085,1.304 c 0.02,-0.017 0.13,-0.11 0.334,-0.239 0.204,-0.13 0.501,-0.297 0.897,-0.462 0.396,-0.164 0.89,-0.327 1.485,-0.448 0.596,-0.122 1.295,-0.202 2.099,-0.202 0.67,0 1.411,0.059 2.222,0.2 0.811,0.142 1.693,0.367 2.645,0.699 0.952,0.333 1.975,0.773 3.069,1.344 1.094,0.572 2.259,1.276 3.495,2.136 L 34.192,19.157 37.01,21.975 50.111,8.874 57.751,1.304 M 57.588,80.32 94.807,15.838 57.588,-48.644 l -74.463,0 -37.219,64.482 37.219,64.482 74.463,0 z"
+         style="fill:#0d597f;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path58"
+         inkscape:connector-curvature="0" /></g><g
+       id="g60"
+       transform="translate(302.5041,412.251)"
+       style="fill:#0d597f;fill-opacity:1"><path
+         d="M 0,0 -9.913,9.895 -9.208,10.604 0.775,0.73 0,0 z"
+         style="fill:#0d597f;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path62"
+         inkscape:connector-curvature="0" /></g><g
+       id="g64"
+       transform="translate(528.4338,353.235)"
+       style="fill:#0d597f;fill-opacity:1"><path
+         d="m 0,0 0,22.161 -2,0 L -2,0 c 0,-4.295 3.35,-8.885 12.75,-8.885 l 15.25,0 0,2 -15.25,0 C 0.775,-6.885 0,-1.615 0,0"
+         style="fill:#0d597f;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path66"
+         inkscape:connector-curvature="0" /></g><path
+       d="m 561.073,344.35 2,0 0,22.787 -2,0 0,-22.787 z"
+       style="fill:#0d597f;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       id="path68"
+       inkscape:connector-curvature="0" /><path
+       d="m 561.073,368.358 2,0 0,2.992 -2,0 0,-2.992 z"
+       style="fill:#0d597f;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       id="path70"
+       inkscape:connector-curvature="0" /><g
+       id="g72"
+       transform="translate(664.6232,367.1373)"
+       style="fill:#0d597f;fill-opacity:1"><path
+         d="m 0,0 -2.634,0 -8.469,-9.888 -8.481,9.888 -2.634,0 9.796,-11.428 -9.729,-11.359 2.62,0 8.422,9.827 8.423,-9.827 2.647,0 -9.75,11.367 L 0,0 z"
+         style="fill:#0d597f;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path74"
+         inkscape:connector-curvature="0" /></g><g
+       id="g76"
+       transform="translate(634.3527,353.11)"
+       style="fill:#0d597f;fill-opacity:1"><path
+         d="M 0,0 C 0,-0.691 -0.366,-6.76 -13.063,-6.76 -25.637,-6.76 -26,-0.691 -26,0 l 0,14.027 -2,0 L -28,0 c 0,-0.896 0.419,-8.76 14.937,-8.76 C 1.577,-8.76 2,-0.896 2,0 l 0,14.027 -2,0 L 0,0 z"
+         style="fill:#0d597f;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path78"
+         inkscape:connector-curvature="0" /></g><g
+       id="g80"
+       transform="translate(584.7756,367.1373)"
+       style="fill:#0d597f;fill-opacity:1"><path
+         d="m 0,0 c -14.64,0 -15.063,-7.863 -15.063,-8.76 l 0,-14.027 2,0 0,14.027 c 0,0.692 0.367,6.76 13.063,6.76 12.574,0 12.938,-6.068 12.938,-6.76 l 0,-14.027 2,0 0,14.027 C 14.938,-7.863 14.519,0 0,0"
+         style="fill:#0d597f;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path82"
+         inkscape:connector-curvature="0" /></g></g></svg>
\ No newline at end of file