Show live data from nodes

.gitignore

@@ -133,7 +133,8 @@ docker/etc/lighttpd/lighttpd.conf
 docker/etc/lighttpd/conf.d/dirlisting.conf
 docker/etc/lighttpd/conf.d/mime.conf
 docker/bin/clabg
-docker/default/default.json
+docker/default/topology-data.json
 docker/webssh2/
+docker/node-data/
 docker/bootstrap-3.4.1-dist
 docker/bin/envsubst

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "docker/node-data"]
+	path = docker/node-data
+	url = https://github.com/netreplica/node-data.git

Dockerfile

@@ -1,4 +1,59 @@
-FROM alpine:latest
+##########################################
+# NODEDATA-IMAGE
+##########################################
+
+FROM alpine:3.15 AS nodedata-image
+# Install packages
+RUN apk add --no-cache \
+  curl \
+  build-base \
+  python3 \
+  python3-dev \
+  && rm -rf /var/cache/apk/* \
+  && curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py \
+  && python3 get-pip.py \
+  && pip3 install virtualenv
+
+# Node-data
+ENV NODEDATA="/usr/local/node-data"
+ENV VIRTUAL_ENV="${NODEDATA}/venv"
+ENV PATH="$VIRTUAL_ENV/bin:$PATH"
+RUN mkdir -p ${NODEDATA}/instance && mkdir -p ${NODEDATA}/venv
+COPY docker/node-data/ ${NODEDATA}/
+COPY docker/nodedata.cfg.template ${NODEDATA}/nodedata.cfg.template
+WORKDIR ${NODEDATA}
+RUN python3 -m venv $VIRTUAL_ENV \
+  && pip3 install --no-cache-dir -r requirements.txt -r requirements_prod.txt \
+  && pip install -e .
+
+##########################################
+# WEBSSH-IMAGE
+##########################################
+
+FROM alpine:3.15 AS webssh-image
+
+RUN apk add --no-cache \
+  npm \
+  && rm -rf /var/cache/apk/*
+
+# webssh2
+ENV WEBSSH2=/usr/local/webssh2
+RUN mkdir -p ${WEBSSH2}
+WORKDIR ${WEBSSH2}
+COPY docker/webssh2/ ${WEBSSH2}/
+COPY docker/webssh2.config.template ${WEBSSH2}/config.template
+# Add webssh2 user to run node.js
+RUN addgroup --system webssh2 \
+  && adduser -S -G webssh2 -H -s /bin/sh -h ${WEBSSH2} webssh2 \
+  && chown webssh2:webssh2 ${WEBSSH2} \
+  && npm install --production
+#  && npm audit fix
+
+##########################################
+# RELEASE-IMAGE
+##########################################
+
+FROM alpine:3.15 AS release-image
 
 ENV LIGHTTPD_VERSION=1.4.64-r0
 
@@ -10,33 +65,37 @@ RUN apk add --no-cache \
   git \
   npm \
   curl \
+  openssh-client \
+  python3 \
   && rm -rf /var/cache/apk/*
 
 # Clone Graphite dependencies
 ENV WWW_HOME=/htdocs
 RUN git clone --single-branch https://github.com/netreplica/next-bower.git ${WWW_HOME}/next-bower
 
-# Default configuration
+# HTTPd configuration and assets
+RUN mkdir -p $WWW_HOME/lab/default && mkdir -p $WWW_HOME/bootstrap-3.4.1-dist
 COPY docker/etc/lighttpd/ /etc/lighttpd/
-RUN mkdir -p $WWW_HOME/default
-# Bootstrap
-RUN mkdir -p $WWW_HOME/bootstrap-3.4.1-dist
 COPY docker/bootstrap-3.4.1-dist/ $WWW_HOME/bootstrap-3.4.1-dist/
 
+# Node-data
+ENV NODEDATA=/usr/local/node-data
+ENV VIRTUAL_ENV=${NODEDATA}/venv
+ENV PATH="$VIRTUAL_ENV/bin:$PATH"
+COPY --from=nodedata-image /usr/local/node-data /usr/local/node-data
+RUN addgroup --system uwsgi \
+  && adduser -S -G uwsgi -H -s /bin/sh -h ${NODEDATA} uwsgi \
+  && chown uwsgi:uwsgi ${NODEDATA}
+
 # webssh2
 ENV WEBSSH2=/usr/local/webssh2
-RUN mkdir -p ${WEBSSH2} 
-WORKDIR ${WEBSSH2}
-# Add webssh2 user to run node.js
-RUN addgroup --system webssh2
-RUN adduser -S -G webssh2 -H -s /bin/sh -h ${WEBSSH2} webssh2
-RUN chown webssh2:webssh2 ${WEBSSH2}
-COPY docker/webssh2/ ${WEBSSH2}/
-COPY docker/webssh2.config.template ${WEBSSH2}/config.template
-RUN npm install --production
+COPY --from=webssh-image ${WEBSSH2} ${WEBSSH2}
+RUN addgroup --system webssh2 \
+  && adduser -S -G webssh2 -H -s /bin/sh -h ${WEBSSH2} webssh2 \
+  && chown webssh2:webssh2 ${WEBSSH2}
 
 # Default data
-COPY docker/default/ $WWW_HOME/default/
+COPY docker/default/ $WWW_HOME/lab/default/
 
 # Scripts and binaries
 COPY docker/bin/ /usr/local/bin/
@@ -50,8 +109,8 @@ EXPOSE 80/tcp
 # Volume with configuration
 #VOLUME /etc/lighttpd
 
-# Volume with Containerlab topology assets
-VOLUME ${WWW_HOME}/clab
+# Volume with lab topology assets
+VOLUME ${WWW_HOME}/lab
 
 # Run lighttpd webserver
 CMD ["start.sh"]

README.md

@@ -26,14 +26,15 @@ The easiest way to use Graphite with Containerlab is to add the following code t
       env:
         CLAB_SSH_CONNECTION: ${SSH_CONNECTION}
       binds:
-        - __clabDir__/topology-data.json:/htdocs/default/default.json:ro
+        - __clabDir__/topology-data.json:/htdocs/lab/default/topology-data.json:ro
+        - __clabDir__/ansible-inventory.yml:/htdocs/lab/default/ansible-inventory.yml:ro
       ports:
         - 8080:80
       exec:
         - sh -c 'graphite_motd.sh 8080'
       labels:
         graph-hide: yes
-````
+```
 
 Once added, deploy the topology with `sudo -E containerlab deploy -t <topology.yaml>`. Note `-E` parameter for `sudo` – it is needed to pass `SSH_CONNECTION` variable.
 
@@ -57,7 +58,7 @@ Graphite was conceived as part of [NANOG-84 Hackathon](https://www.nanog.org/eve
 
 ## Copyright notice
 
-Copyright 2022 Netreplica Team
+Copyright 2022-2023 Netreplica Team
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

app/css/graphite.css

@@ -65,3 +65,20 @@
   transform-box: fill-box;
   transform-origin: 100% 0%;
 }
+.m-fadeOut {
+  visibility: hidden;
+  opacity: 0;
+  transition: visibility 0s linear 300ms, opacity 300ms;
+}
+.m-fadedOut {
+  visibility: hidden;
+  opacity: 0;
+}
+.m-fadeIn {
+  visibility: visible;
+  opacity: 1;
+  transition: visibility 0s linear 0s, opacity 300ms;
+}
+.popover {
+  max-width: 400px;
+}

app/index.html

@@ -13,7 +13,7 @@
     <link rel="icon" type="image/png" href="assets/favicon.png" />
   </head>
   <body>
-    
+
     <nav class="navbar navbar-inverse navbar-static-top">
       <div class="container">
         <div class="navbar-header">
@@ -34,9 +34,9 @@
         </div>
       </div>
     </nav>
-    
-    
-    <div id="topology-diagram" class="container"> 
+
+
+    <div id="topology-diagram" class="container">
       <div class="row">
         <div class="col-md-14">
           <div class="panel panel-default">
@@ -54,17 +54,21 @@ <h3 class="panel-title">
             <div class="panel-footer">
               <ul class="nav nav-pills">
                 <li role="presentation" class="disabled"><a href="#">Layout</a></li>
-                <li role="presentation" id="nav-auto" class="active"><a href="#" onClick="window.location.reload();">Auto</a></li>
+                <li role="presentation" id="nav-auto" class="active"><a href="#" onClick='autolayout()'>Auto</a></li>
                 <li role="presentation" id="nav-horizontal"><a href="#" onClick='horizontal()'>Horizontal</a></li>
                 <li role="presentation" id="nav-vertical"><a href="#" onClick='vertical()'>Vertical</a></li>
+                <!-- below is aligned to the right -->
+                <li role="presentation" id="nav-live" class="m-fadedOut active pull-right"><a href="#" onClick='label_types_live()'>Live</a></li>
+                <li role="presentation" id="nav-static" class="m-fadedOut pull-right"><a href="#" onClick='label_types_static()'>Static</a></li>
+                <li role="presentation" id="nav-labels" class="m-fadedOut disabled pull-right"><a href="#">Labels</a></li>
               </ul>
             </div>
         </div>
         </div>
       </div>
     </div>
 
-    <div id="footnote" class="container"> 
+    <div id="footnote" class="container">
       <div class="row">
         <p class="text-muted pull-right">Copyright (c) 2022 <a href="https://twitter.com/netreplica" target="_blank">Netreplica</a></p>
       </div>

app/js/clab.js

@@ -14,37 +14,6 @@
    limitations under the License.
 */
 
-const interface_full_name_map = {
-  'e1-': 'ethernet1-',
-  'Eth': 'Ethernet',
-  'Fa' : 'FastEthernet',
-  'Gi' : 'GigabitEthernet',
-  'Te' : 'TenGigabitEthernet',
-  'Ma' : 'Management'
-};
-
-function if_fullname(ifname) {
-  //TODO ifname = dequote(ifname)
-  for (k in interface_full_name_map){
-    var v = interface_full_name_map[k];
-    if (ifname.toLowerCase().startsWith(k.toLowerCase())) {
-      return ifname.toLowerCase().replace(k.toLowerCase(), v);
-    }
-  }
-  return ifname;
-}
-
-function if_shortname(ifname) {
-  //TODO ifname = dequote(ifname)
-  for (k in interface_full_name_map){
-    var v = interface_full_name_map[k];
-    if (ifname.toLowerCase().startsWith(v.toLowerCase())) {
-      return ifname.toLowerCase().replace(v.toLowerCase(), k);
-    }
-  }
-  return ifname;
-}
-
 function port_mode_node_name(n, i) {
   return i + "@" + n;
 }
@@ -96,27 +65,28 @@ function convert_clab_to_cmt(c){
 function convert_clab_topology_data_to_cmt(c){
   var cmt = {"nodes": [], "links": [], "type": "clab", "name": ""};
   var node_id_map = {};
-  
+
   // topology name
   if (c.hasOwnProperty("name")) {
     cmt.name = c.name;
   }
-  
+
   if (!c.hasOwnProperty("nodes")) {
     return cmt;
   }
-  
+
   var i = -1; // We will increment the index to 0 right away in the cycle below
   for (var node in c.nodes) { // node is a string with a node name
     i++;
     var n = c.nodes[node]; // retrieve the full object
-    
+
     var cmt_node = {
   //  "id": int,
   //  "name": string,
+  //  "fullname": string,
   //  "websshDeviceLink": string,
   //  "websshDeviceLinkIPv6": string,
-  //  "model": string,
+  //  "kind": string,
   //  "image": string,
   //  "group": string,
   //  "mgmtIPv4": string,
@@ -130,7 +100,7 @@ function convert_clab_topology_data_to_cmt(c){
     cmt_node["id"] = i;
     cmt_node["name"] = node;
     cmt_node["icon"] = "router";
-    
+
     if (n.hasOwnProperty("labels")) {
       if (n.labels.hasOwnProperty("graph-hide") && equals_true(n.labels["graph-hide"])) {
         continue; // do not visualize this node
@@ -142,10 +112,11 @@ function convert_clab_topology_data_to_cmt(c){
         cmt_node["layerSortPreference"] = n.labels["graph-level"];
       }
     }
-
-    cmt_node["model"] = n.kind;
-    cmt_node["image"] = n.image;
-    cmt_node["group"] = n.group;
+
+    cmt_node["fullname"] = n.longname;
+    cmt_node["kind"]     = n.kind;
+    cmt_node["image"]    = n.image;
+    cmt_node["group"]    = n.group;
 
     if (n.hasOwnProperty("mgmt-ipv4-address")) {
       cmt_node["mgmtIPv4"] = n["mgmt-ipv4-address"];
@@ -163,8 +134,8 @@ function convert_clab_topology_data_to_cmt(c){
       }
     }
 
-    // This must be the last section, any other cmt_node properties shoud be set above
-    if (n.labels.hasOwnProperty("graph-mode") && n.labels["graph-mode"] == "port") {
+    // This must be the last section, any other cmt_node properties should be set above
+    if (n.hasOwnProperty("labels") && n.labels.hasOwnProperty("graph-mode") && n.labels["graph-mode"] == "port") {
       // display each port of this node as it's own individual node
       for (var l of c.links) {
         // TODO handle when the same interface is encountered more than once
@@ -189,7 +160,7 @@ function convert_clab_topology_data_to_cmt(c){
       cmt.nodes.push(cmt_node);
     }
   }
-  
+
   for (var i =0; i < c.links.length; i++) {
     var l = c.links[i];
     var src_i = node_id_map[l["a"]["node"]];
@@ -198,6 +169,9 @@ function convert_clab_topology_data_to_cmt(c){
     var tgt_d_name = l["z"]["node"];
     var src_i_name = l["a"]["interface"];
     var tgt_i_name = l["z"]["interface"];
+    var src_i_mac  = l["a"]["mac"];
+    var tgt_i_mac  = l["z"]["mac"];
+    // for port mode display, do not show interface name as a label
     if (node_id_map.hasOwnProperty(port_mode_node_name(l["a"]["node"], l["a"]["interface"]))) {
       src_i = node_id_map[port_mode_node_name(l["a"]["node"], l["a"]["interface"])];
       src_i_name = "";
@@ -213,8 +187,10 @@ function convert_clab_topology_data_to_cmt(c){
       "source": src_i,
       "target": tgt_i,
       "srcIfName": src_i_name,
+      "srcIfMAC":  src_i_mac,
       "srcDevice": src_d_name,
       "tgtIfName": tgt_i_name,
+      "tgtIfMAC":  tgt_i_mac,
       "tgtDevice": tgt_d_name,
     })
   }
@@ -258,7 +234,7 @@ function convert_clab_graph_to_cmt(c){
       "name": n.name,
       "websshDeviceLink": websshDeviceLink,
       "websshDeviceLinkIPv6": websshDeviceLinkIPv6,
-      "model": n.kind,
+      "kind": n.kind,
       "image": n.image,
       "group": n.group,
       "mgmtIPv4": mgmtIPv4,