TERR-425

- updated README to use default value of "names" in place of "pops" for endpoint identifier - updated demonstration dashboard.json for above change - updated networkMapPanel.json to align endpointId changes in initial layers - updated module.spec commented test for alignment when the component test is fixed.
esnet · Oct 21, 2024 · 20cd87f · 20cd87f
1 parent 3d2a422
commit 20cd87f
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 32 deletions.
diff --git a/README.md b/README.md
@@ -57,7 +57,7 @@ It also contains an example topology that will be used while setting up the Netw
 
 - Input your Google Sheets API key into the "API Key" input
 
-- Click [Test + Save] 
+- Click [Test + Save]
 
 ### 2. Setup a Test Dashboard
 
@@ -187,7 +187,7 @@ Leave this set to gray. It will help to show when we've correctly associated edg
 
 **Layer 1 Endpoint Identifier**
 
-This input specifies the attribute of "endpoint_identifiers" prop of each of the "edges" objects in your JSON topology. Each "endpoint_identifiers" entry in the JSON should have a key matching the value specified in this text box (although the assigned JSON value is an array of node names of length two, does not matter). The value for Grafana here should be left as the default "pops".
+This input specifies the attribute of "endpoint_identifiers" prop of each of the "edges" objects in your JSON topology. Each "endpoint_identifiers" entry in the JSON should have a key matching the value specified in this text box (although the assigned JSON value is an array of node names of length two, does not matter). The value for Grafana here should be left as the default "names".
 
 **Layer 1 Node Highlight Color**
 

diff --git a/demonstration/dashboard.json b/demonstration/dashboard.json
@@ -97,10 +97,10 @@
             "dstField": "dst",
             "dstFieldLabel": "To:",
             "edgeWidth": 3,
-            "endpointId": "pops",
+            "endpointId": "names",
             "inboundValueField": "in_bits",
             "legend": true,
-            "mapjson": "{\"edges\":[{\"name\":\"A--B\",\"meta\":{\"endpoint_identifiers\":{\"pops\":[\"A\",\"B\"]}},\"coordinates\":[[42.30619185993376,-106.00734642032997],[42.30619185993376,-92.30145333497663]],\"children\":[]},{\"name\":\"A--C\",\"meta\":{\"endpoint_identifiers\":{\"pops\":[\"A\",\"C\"]}},\"coordinates\":[[42.30619185993376,-106.00734642032997],[34.5952660320894,-99.10139879776413]],\"children\":[]},{\"name\":\"B--C\",\"meta\":{\"endpoint_identifiers\":{\"pops\":[\"B\",\"C\"]}},\"coordinates\":[[42.30619185993376,-92.30145333497663],[34.5952660320894,-99.10139879776413]],\"children\":[]}],\"nodes\":[{\"name\":\"A\",\"meta\":{\"display_name\":\"\",\"svg\":\"\",\"template\":\"\"},\"coordinate\":[42.30619185993376,-106.00734642032997]},{\"name\":\"B\",\"meta\":{\"display_name\":\"\",\"svg\":\"\",\"template\":\"\"},\"coordinate\":[42.30619185993376,-92.30145333497663]},{\"name\":\"C\",\"meta\":{\"display_name\":\"\",\"svg\":\"\",\"template\":\"\"},\"coordinate\":[34.5952660320894,-99.10139879776413]}]}",
+            "mapjson": "{\"edges\":[{\"name\":\"A--B\",\"meta\":{\"endpoint_identifiers\":{\"names\":[\"A\",\"B\"]}},\"coordinates\":[[42.30619185993376,-106.00734642032997],[42.30619185993376,-92.30145333497663]],\"children\":[]},{\"name\":\"A--C\",\"meta\":{\"endpoint_identifiers\":{\"names\":[\"A\",\"C\"]}},\"coordinates\":[[42.30619185993376,-106.00734642032997],[34.5952660320894,-99.10139879776413]],\"children\":[]},{\"name\":\"B--C\",\"meta\":{\"endpoint_identifiers\":{\"names\":[\"B\",\"C\"]}},\"coordinates\":[[42.30619185993376,-92.30145333497663],[34.5952660320894,-99.10139879776413]],\"children\":[]}],\"nodes\":[{\"name\":\"A\",\"meta\":{\"display_name\":\"\",\"svg\":\"\",\"template\":\"\"},\"coordinate\":[42.30619185993376,-106.00734642032997]},{\"name\":\"B\",\"meta\":{\"display_name\":\"\",\"svg\":\"\",\"template\":\"\"},\"coordinate\":[42.30619185993376,-92.30145333497663]},{\"name\":\"C\",\"meta\":{\"display_name\":\"\",\"svg\":\"\",\"template\":\"\"},\"coordinate\":[34.5952660320894,-99.10139879776413]}]}",
             "name": "Layer 1",
             "nodeHighlight": "dark-blue",
             "nodeNameMatchField": "Node",
@@ -123,7 +123,7 @@
             "dataFieldLabel": "Volume:",
             "dstFieldLabel": "To:",
             "edgeWidth": 1.5,
-            "endpointId": "pops",
+            "endpointId": "names",
             "legend": false,
             "mapjson": "{\"edges\":[],\"nodes\":[]}",
             "name": "Layer 2",
@@ -141,7 +141,7 @@
             "dataFieldLabel": "Volume:",
             "dstFieldLabel": "To:",
             "edgeWidth": 3,
-            "endpointId": "pops",
+            "endpointId": "names",
             "legend": false,
             "mapjson": "{\"edges\":[],\"nodes\":[]}",
             "name": "Layer 3",

diff --git a/e2e/mock.panel.json b/e2e/mock.panel.json
@@ -51,9 +51,9 @@
                 "dashboardEdgeSrcVar": "source",
                 "dashboardNodeVar": "node",
                 "edgeWidth": 3,
-                "endpointId": "pops",
+                "endpointId": "names",
                 "legend": true,
-                "mapjson": "{\"edges\":[{\"name\":\"A--B\",\"meta\":{\"endpoint_identifiers\":{\"pops\":[\"A\",\"B\"]}},\"coordinates\":[[37.54457732085584,-98.525390625],[41.409775832009565,-89.69238281250001]],\"children\":[]},{\"name\":\"C--B\",\"meta\":{\"endpoint_identifiers\":{\"pops\":[\"C\",\"B\"]}},\"coordinates\":[[39.027718840211605,-105.64453125000001],[41.409775832009565,-89.69238281250001]],\"children\":[]},{\"name\":\"A--C\",\"meta\":{\"endpoint_identifiers\":{\"pops\":[\"A\",\"C\"]}},\"coordinates\":[[37.54457732085584,-98.525390625],[39.027718840211605,-105.64453125000001]],\"children\":[]}],\"nodes\":[{\"name\":\"A\",\"meta\":{\"display_name\":\"\",\"svg\":\"\",\"template\":\"\"},\"coordinate\":[37.54457732085584,-98.525390625]},{\"name\":\"B\",\"meta\":{\"display_name\":\"\",\"svg\":\"\",\"template\":\"\"},\"coordinate\":[41.409775832009565,-89.69238281250001]},{\"name\":\"C\",\"meta\":{\"display_name\":\"\",\"svg\":\"\",\"template\":\"\"},\"coordinate\":[39.027718840211605,-105.64453125000001]}]}",
+                "mapjson": "{\"edges\":[{\"name\":\"A--B\",\"meta\":{\"endpoint_identifiers\":{\"names\":[\"A\",\"B\"]}},\"coordinates\":[[37.54457732085584,-98.525390625],[41.409775832009565,-89.69238281250001]],\"children\":[]},{\"name\":\"C--B\",\"meta\":{\"endpoint_identifiers\":{\"names\":[\"C\",\"B\"]}},\"coordinates\":[[39.027718840211605,-105.64453125000001],[41.409775832009565,-89.69238281250001]],\"children\":[]},{\"name\":\"A--C\",\"meta\":{\"endpoint_identifiers\":{\"names\":[\"A\",\"C\"]}},\"coordinates\":[[37.54457732085584,-98.525390625],[39.027718840211605,-105.64453125000001]],\"children\":[]}],\"nodes\":[{\"name\":\"A\",\"meta\":{\"display_name\":\"\",\"svg\":\"\",\"template\":\"\"},\"coordinate\":[37.54457732085584,-98.525390625]},{\"name\":\"B\",\"meta\":{\"display_name\":\"\",\"svg\":\"\",\"template\":\"\"},\"coordinate\":[41.409775832009565,-89.69238281250001]},{\"name\":\"C\",\"meta\":{\"display_name\":\"\",\"svg\":\"\",\"template\":\"\"},\"coordinate\":[39.027718840211605,-105.64453125000001]}]}",
                 "name": "Layer 1",
                 "nodeWidth": 5,
                 "pathOffset": 3,
@@ -76,7 +76,7 @@
                 "dashboardEdgeSrcVar": "source",
                 "dashboardNodeVar": "node",
                 "edgeWidth": 3,
-                "endpointId": "pops",
+                "endpointId": "names",
                 "legend": true,
                 "jsonFromUrl": false,
                 "mapjsonUrl": "",
@@ -93,7 +93,7 @@
                 "dashboardEdgeSrcVar": "source",
                 "dashboardNodeVar": "node",
                 "edgeWidth": 3,
-                "endpointId": "pops",
+                "endpointId": "names",
                 "legend": true,
                 "jsonFromUrl": false,
                 "mapjsonUrl": "",

diff --git a/e2e/networkMapPanel.json b/e2e/networkMapPanel.json
@@ -48,7 +48,7 @@
                 "dataFieldLabel": "Volume:",
                 "dstFieldLabel": "To:",
                 "edgeWidth": 3,
-                "endpointId": "pops",
+                "endpointId": "names",
                 "jsonFromUrl": false,
                 "legend": true,
                 "mapjson": "{\"edges\":[], \"nodes\":[]}",
@@ -67,7 +67,7 @@
                 "dataFieldLabel": "Volume:",
                 "dstFieldLabel": "To:",
                 "edgeWidth": 3,
-                "endpointId": "pops",
+                "endpointId": "names",
                 "jsonFromUrl": false,
                 "legend": true,
                 "mapjson": "{\"edges\":[], \"nodes\":[]}",
@@ -86,7 +86,7 @@
                 "dataFieldLabel": "Volume:",
                 "dstFieldLabel": "To:",
                 "edgeWidth": 3,
-                "endpointId": "pops",
+                "endpointId": "names",
                 "jsonFromUrl": false,
                 "legend": true,
                 "mapjson": "{\"edges\":[], \"nodes\":[]}",

diff --git a/test/module.spec.js b/test/module.spec.js
@@ -9,7 +9,7 @@ describe( "Class MapCanvas", () => {
         var canvas = document.querySelector("esnet-map-canvas");
         canvas.remove();
     })
-    beforeEach(async function(){  
+    beforeEach(async function(){
         var elem = document.createElement("esnet-map-canvas");
         elem.setAttribute('width', 800);
         elem.setAttribute('height', 400);
@@ -18,7 +18,7 @@ describe( "Class MapCanvas", () => {
 
         elem.setTopology(TOPOLOGY);
         elem.setOptions(OPTIONS);
-    }); 
+    });
     it( "should append a esnet-map-canvas element", async () => {
       let isInstance = document.querySelector("esnet-map-canvas") instanceof HTMLElement;
       expect(isInstance).toBeTruthy();
@@ -488,10 +488,10 @@ describe( "Class MapCanvas", () => {
       canvas.listen(signals.TOPOLOGY_UPDATED, () => {
         closureVar = "called";
       });
-      canvas.listen(signals.NODE_UPDATED, (e)=>{ 
+      canvas.listen(signals.NODE_UPDATED, (e)=>{
         closureVar3 = true;
       }, canvas);
-      canvas.listen(signals.EDGE_UPDATED, (e)=>{ 
+      canvas.listen(signals.EDGE_UPDATED, (e)=>{
         closureVar2 = true;
       }, canvas);
 
@@ -556,7 +556,7 @@ describe( "Class MapCanvas", () => {
     });
     it("should persist a topology change when a user drags an editable edge control point", ()=>{
       var canvas = document.querySelector("esnet-map-canvas");
-    
+
       var closureVar = null;
       canvas.listen(signals.TOPOLOGY_UPDATED, () => {
         closureVar = "called";
@@ -599,7 +599,7 @@ describe( "Class MapCanvas", () => {
       var newTopology = [
         {
             "edges": [
-                {"name":"A--B","meta":{"endpoint_identifiers":{"pops":["A","B"]}},
+                {"name":"A--B","meta":{"endpoint_identifiers":{"names":["A","B"]}},
                     "coordinates":[[39.02,-105.99],[35.81,-101.77],[34.59,-96.06]],
                     "children":[],
                     "azColor":LAVENDER,
@@ -623,7 +623,7 @@ describe( "Class MapCanvas", () => {
         },
         {
             "edges": [
-                {"name":"A--B","meta":{"endpoint_identifiers":{"pops":["A","B"]}},
+                {"name":"A--B","meta":{"endpoint_identifiers":{"names":["A","B"]}},
                     "coordinates":[[49.02,-115.99],[45.81,-111.77],[44.59,-106.06]],
                     "children":[],
                     "azColor":LAVENDER,
@@ -823,7 +823,7 @@ describe( "Class MapCanvas", () => {
                   "name":"A",
                   "meta":{},
                   "coordinate":[30.02,-105.99],
-                  "color":LAVENDER,                  
+                  "color":LAVENDER,
                 },
                 {
                   "name":"Z",
@@ -915,7 +915,7 @@ describe( "Class MapCanvas", () => {
       cPoint.dispatchEvent(downEvent);
       cPoint.dispatchEvent(dragEvent);
       cPoint = canvas.querySelector("circle.control");
-      // drag a node with weird name. 
+      // drag a node with weird name.
       cPoint.dispatchEvent(upEvent);
       // do edges move?
       var edgeAB = canvas.querySelector(".edge-az");
@@ -937,7 +937,7 @@ describe( "Class MapCanvas", () => {
       cPoint.dispatchEvent(dragEvent);
       cPoint = canvas.querySelector("circle.control");
       cPoint.dispatchEvent(upEvent);
-      // drag a node with weird name. 
+      // drag a node with weird name.
       var edgeAB = canvas.querySelector(".edge-az");
       var afterCoords = edgeAB.getBoundingClientRect();
       expect(beforeCoords.x).not.toEqual(afterCoords.x);
@@ -978,7 +978,7 @@ describe( "Class MapCanvas", () => {
         elem2.setTopology(TOPOLOGY);
         elem2.setOptions(newOptions);
         document.body.appendChild(elem2);
-  
+
         var edge = elem2.querySelector('.edge.edge-az');
         let mouseoverEvent = new Event('mouseover', { bubbles: true });
         edge.dispatchEvent(mouseoverEvent);
@@ -998,7 +998,7 @@ describe( "Class MapCanvas", () => {
         document.body.insertBefore(elem2, canvas);
 
         var selectionListenerFired = false;
-        elem2.listen(signals.SELECTION_SET, function(){ 
+        elem2.listen(signals.SELECTION_SET, function(){
           selectionListenerFired = true;
           expect(elem2.querySelectorAll(".dash-selected").length).not.toEqual(0);
         })
@@ -1063,7 +1063,7 @@ describe( "Class MapCanvas", () => {
         var node_matches = 0;
         for(var i=0; i<nodes.length; i++){
           var rect = nodes[i].getBoundingClientRect();
-          if(within(rect.x, newPos.x - 10, newPos.x + 10) && 
+          if(within(rect.x, newPos.x - 10, newPos.x + 10) &&
              within(rect.y, newPos.y - 10, newPos.y + 10)){
             node_matches++;
           }
@@ -1187,7 +1187,7 @@ describe( "Class MapCanvas", () => {
         var resize = new Event('resize');
         window.dispatchEvent(resize);
 
-        // check the positions of each of the nodes. All should be inside of map bounding box.        
+        // check the positions of each of the nodes. All should be inside of map bounding box.
         var nodes = canvas.querySelectorAll(".node.l0");
         var canvasBounds = canvas.getBoundingClientRect();
         var results = []
@@ -1212,7 +1212,7 @@ describe( "Class MapCanvas", () => {
         map.dispatchEvent(upEvent);
         window.dispatchEvent(resize);
 
-        // check the positions of each of the nodes. All should be inside of map bounding box.        
+        // check the positions of each of the nodes. All should be inside of map bounding box.
         var nodes = canvas.querySelectorAll(".node.l0");
         var canvasBounds = canvas.getBoundingClientRect();
         var results = []
@@ -1350,7 +1350,7 @@ describe( "Class MapCanvas", () => {
     })
     it("should support dragging parent-child nodes as groups", ()=>{
       var canvas = document.querySelector("esnet-map-canvas");
-      
+
       let newTopology = JSON.parse(JSON.stringify(TOPOLOGY));
       newTopology[0].nodes = newTopology[0].nodes.concat([
           {
@@ -1391,7 +1391,7 @@ describe( "Class MapCanvas", () => {
         cPoint.dispatchEvent(downEvent);
         cPoint.dispatchEvent(dragEvent);
         cPoint = canvas.querySelector("circle.control");
-        cPoint.dispatchEvent(upEvent);        
+        cPoint.dispatchEvent(upEvent);
       }
 
       // snapshot coordinates for C point and move E point, should change.
@@ -1454,7 +1454,7 @@ describe( "Class MapCanvas", () => {
       ]
       // this appears to be a "load-bearing" reassignment... removing it causes tests to fail?
       var topo = newTopology;
-      /*expect(function(){ 
+      /*expect(function(){
         canvas.setTopology(topo);
       }).toThrow();*/
     });
@@ -1467,7 +1467,7 @@ describe( "Class MapCanvas", () => {
             "meta": {},
             "coordinate": [40.75,-102.315],
             "children": ["A"]
-          },{ 
+          },{
             "name": "A",
             "meta": {},
             "coordinate": [37.553,-105.795]