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,