Merge pull request #81 from sreemukha/master

Updates for grafana v6
GlobalNOC · Apr 24, 2019 · 03979df · 03979df
2 parents 0488f0b + 769ff21
commit 03979df
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 46 deletions.
diff --git a/Makefile b/Makefile
@@ -1,5 +1,5 @@
 NAME = grnoc-grafana-worldview
-VERSION = 1.1.0
+VERSION = 1.1.1
 
 rpm:    dist
 		rpmbuild -ta dist/$(NAME)-$(VERSION).tar.gz

diff --git a/grnoc-grafana-worldview.spec b/grnoc-grafana-worldview.spec
@@ -1,5 +1,5 @@
 Name: grnoc-grafana-worldview
-Version: 1.1.0
+Version: 1.1.1
 Release: 1%{?dist}
 Summary: GRNOC Worldview Grafana Plugin
 Group: GRNOC

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Network-Map" ,
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "GlobalNOC Networkmap Panel for Grafana",
   "main": "index.js",
   "scripts": {

diff --git a/src/atlas3.js b/src/atlas3.js
@@ -39,6 +39,8 @@ const panelDefaults = {
     layers: [],
     hide_layers: false,
     twin_tubes: false,
+    nodeFillColor: "rgb(200,200,200)",
+    downLinkColor: "rgb(200,200,200)",
     color: {
         mode: 'spectrum',
         colorScale: 'linear',
@@ -52,7 +54,7 @@ const panelDefaults = {
         mode: 'spectrum',
         legend_colors: [],
         opacity: [],
-        thresholds: []
+        thresholds: ["50"]
     },
     tooltip:{
         show: true,
@@ -77,12 +79,12 @@ var tempArray=[];
 
 export class Atlas3 extends MetricsPanelCtrl {
     constructor($scope, $injector) {
-        super($scope, $injector);	
+        super($scope, $injector);
         _.defaults(this.panel, panelDefaults);
         this.map_holder_id = 'map_' + this.panel.id;
         this.containerDivId = 'container_'+this.map_holder_id;
         this.recentData = [];
-        this.map_drawn = false; 
+        this.map_drawn = false;
         this.layer_ids = [];
         this.show_legend = true;
         this.opacity = [];
@@ -93,12 +95,17 @@ export class Atlas3 extends MetricsPanelCtrl {
         this.json_content = '';
         this.custom_hover = new CustomHover();
         this.scale = new Scale($scope,this.panel.colorScheme);
-        this.colorSchemes=this.scale.getColorSchemes(); 
+        this.colorSchemes=this.scale.getColorSchemes();
         this.events.on('data-received', this.onDataReceived.bind(this));
         this.events.on('data-error', this.onDataError.bind(this));
         this.events.on('data-snapshot-load', this.onDataReceived.bind(this));
         this.events.on('init-edit-mode', this.onInitEditMode.bind(this));
         this.events.on('init-panel-actions', this.onInitPanelActions.bind(this));
+
+        // Color picker event handlers
+        this.onDefaultNodeColor = this.onDefaultNodeColor.bind(this);
+        this.onDownLinkChange = this.onDownLinkChange.bind(this);
+        this.onOpacityLegendColor = this.onOpacityLegendColor.bind(this);
     }
 
     onDataReceived(dataList) {
@@ -123,27 +130,27 @@ export class Atlas3 extends MetricsPanelCtrl {
                 if(typeof layer.active !== "function"){
                     return;
                 }
-		
+
                 if(layer.topology() === undefined){
                     return;
                 }
-		
+
                 var links = layer.topology().links();
                 var endpoints = layer.topology().endpoints();
 
                 // Hide layers without data
                 if(self.panel.hide_layers){
                     _.forEach(links, function(l){
                         _.forEach(l.endpoints, function(ep){
-                            if(!data_targets.includes(ep.name)){       
+                            if(!data_targets.includes(ep.name)){
                                 layer.toggle(false);
                             }
-                        }); 
-                    }); 
+                        });
+                    });
                 }
                 var target;
                 var dir;
-                
+
                 // Match endpoints to visualize the data
                 var target_endpoints = [];
                 if(endpoints) {
@@ -153,7 +160,7 @@ export class Atlas3 extends MetricsPanelCtrl {
                         }
                     });
                 }
-                
+
 
                 // Match links to visualize the data
                 var target_links = [];
@@ -199,7 +206,7 @@ export class Atlas3 extends MetricsPanelCtrl {
                         if(value > max){
                             max = value;
                         }
-			
+
                         if(cur === undefined){
                             cur = value;
                         }
@@ -211,7 +218,7 @@ export class Atlas3 extends MetricsPanelCtrl {
                     var end = data.datapoints[1][1];
                     interval = start - end;
                 }
-	           
+
                 // if target_endpoints is not empty, visualize the data
                 if(target_endpoints.length > 0){
                     _.forEach(target_endpoints, function(obj){
@@ -226,7 +233,7 @@ export class Atlas3 extends MetricsPanelCtrl {
                         e.count = count;
                         avg = sum/count;
                         e.avg = avg.toFixed(2);
-                        let color_value; 
+                        let color_value;
                         if(color_criteria === "Average"){
                             color_value = ((avg - layer_min) / (layer_max-layer_min)) * 100;
                         } else if(color_criteria === "Minimum") {
@@ -258,11 +265,11 @@ export class Atlas3 extends MetricsPanelCtrl {
                         }
                     });
                 }
-                
+
 
                 // updating link information with the calculated values
                 // set line color for the lines based on these values
-                        
+
                 _.forEach(target_links, function(obj){
                     let layer_max = layer.max();
                     let layer_min = layer.min();
@@ -329,7 +336,7 @@ export class Atlas3 extends MetricsPanelCtrl {
                         l.za.now = self.toSI(cur);
                         l.arrow = 2;
                     }
-		            if(!self.panel.twin_tubes){ 
+		            if(!self.panel.twin_tubes){
                         if(l.az.cur != null && l.za.cur != null){
                             if(l.az.cur > l.za.cur){
                                 l.lineColor = l.azLineColor;
@@ -342,10 +349,10 @@ export class Atlas3 extends MetricsPanelCtrl {
                             }
                         }
                     }
-                });	
+                });
             });
         });
-	
+
         _.forEach(this.panel.layers, function(layer){
             if(typeof layer.active !== "function"){
                 return;
@@ -355,37 +362,60 @@ export class Atlas3 extends MetricsPanelCtrl {
     }
 
     toSI(num){
-        if(this.panel.to_si === 0){ 
+        if(this.panel.to_si === 0){
             num = num / panelDefaults.to_si;
         } else{
             num = num / this.panel.to_si;
         }
         return num.toFixed(2);
     }
-    
+
     onDataError(err) {
         this.dataRaw = [];
     }
-    
+
     onInitEditMode() {
         this.addEditorTab('Options', 'public/plugins/globalnoc-networkmap-panel/editor.html', 2);
         this.addEditorTab('Display', 'public/plugins/globalnoc-networkmap-panel/display_editor.html', 3);
         tempArray=this.scale.displayColor(this.panel.colorScheme);
-    } 
-   
+    }
+
     onInitPanelActions(actions) {
          this.render();
     }
-
+
+    onOpacityLegendColor(color){
+        this.panel.color.cardColor = color;
+        this.render();
+    }
+
+    onThresholdColorChange(index) {
+        return color => {
+            this.panel.threshold_colors[index] = color;
+            this.render();
+        }
+    }
+
+    onDownLinkChange(color) {
+        this.panel.downLinkColor = color;
+        this.scale.setDownLinkColor(color);
+        this.render();
+    }
+
+    onDefaultNodeColor(color) {
+        this.panel.nodeFillColor = color;
+        this.render();
+    }
+
     jsonModal(){
         var modalScope = this.$scope.$new(false);
-        modalScope.panel = this.panel; 
+        modalScope.panel = this.panel;
         appEvents.emit('show-modal', {
             src: 'public/plugins/globalnoc-networkmap-panel/json_editor.html',
             scope: modalScope,
         });
     }
-      
+
     addNewChoice() {
         var num = this.panel.choices.length + 1;
         this.panel.choices.push(num);
@@ -397,7 +427,7 @@ export class Atlas3 extends MetricsPanelCtrl {
         //not sure
         this.panel.size.push('')
     }
-    
+
     useValidator(index) {
         this.jsonModal();
         let json = this.panel.mapSrc[index];
@@ -410,7 +440,7 @@ export class Atlas3 extends MetricsPanelCtrl {
         }
         this.json_index = index;
     }
-    
+
     saveToMapSrc(index){
         if(index===null) return;
         this.panel.mapSrc[index] = this.json_content;
@@ -445,9 +475,9 @@ export class Atlas3 extends MetricsPanelCtrl {
         this.opacity = this.scale.getOpacityScale(options, legendWidth);
         if(this.panel.legend.invert){
             _.reverse(this.opacity);
-        } 
+        }
     }
-    
+
     isSorted(arr){
         let original = arr.toString();
         arr.sort(function(a,b){
@@ -456,15 +486,15 @@ export class Atlas3 extends MetricsPanelCtrl {
         return arr.toString() === original;
     }
 
-    displayThresholds(){ 
+    displayThresholds(){
         this.t_colors = this.scale.getThresholdScale(this.panel.legend.thresholds, this.panel.threshold_colors);
         return this.t_colors;
     }
 
     getState(){
         this.show_legend = this.panel.legend.show;
     }
-   
+
     getHtml(htmlContent){
         return this.custom_hover.parseHtml(htmlContent);
     }
@@ -484,7 +514,7 @@ export class Atlas3 extends MetricsPanelCtrl {
             ctrl.panel.legend.adjLoadLegend = {
                 horizontal: true,
             }
-            let zoom = ctrl.panel.zoom; 
+            let zoom = ctrl.panel.zoom;
             let html_content = ctrl.getHtml(ctrl.panel.tooltip.content);
             ctrl.panel.tooltip.content = html_content;
             let node_content = ctrl.getHtml(ctrl.panel.tooltip.node_content);
@@ -671,8 +701,10 @@ export class Atlas3 extends MetricsPanelCtrl {
                     ctrl.process_data(self.recentData);
                 }
             }
+            setTimeout(function() {
+                ctrl.map.validateSize();
+            }, 0);
         });
-
     }
 }
 

diff --git a/src/partials/display_editor.html b/src/partials/display_editor.html
@@ -14,7 +14,7 @@ <h5 class="section-heading">Colors</h5>
             <div class="gf-form">
                 <label class="gf-form-label width-9">Color</label>
                 <span class="gf-form-label">
-                    <spectrum-picker ng-model="ctrl.panel.color.cardColor" ng-change="ctrl.render()" ></spectrum-picker>
+                    <color-picker color="ctrl.panel.color.cardColor" onChange="ctrl.onOpacityLegendColor" ></color-picker>
                 </span>
             </div>
 
@@ -62,12 +62,12 @@ <h5 class="section-heading">Colors</h5>
             <div class="gf-form">
                 <label class="gf-form-label width-8">Colors</label>
                 <span class="gf-form-label" ng-hide="ctrl.panel.legend.thresholds.length < 1 || !ctrl.panel.legend.thresholds[0]">
-                    <spectrum-picker ng-model="ctrl.panel.threshold_colors[0]" ng-change="ctrl.render()"></spectrum-picker>
+                    <color-picker color="ctrl.panel.threshold_colors[0]" onChange="ctrl.onThresholdColorChange(0)"></color-picker>
                 </span>
 
                 <div ng-repeat="x in ctrl.panel.legend.thresholds track by $index">
                     <span class="gf-form-label" ng-show="ctrl.panel.legend.thresholds[$index]"> 
-                        <spectrum-picker ng-model="ctrl.panel.threshold_colors[$index+1]" ng-change="ctrl.render()"></spectrum-picker>
+                        <color-picker color="ctrl.panel.threshold_colors[$index+1]" onChange="ctrl.onThresholdColorChange($index+1)"></color-picker>
                     </span>
                 </div>
             </div>
@@ -76,14 +76,14 @@ <h5 class="section-heading">Colors</h5>
         <div class="gf-form">
             <label class="gf-form-label width-9">Default Node color</label>
             <span class="gf-form-label">
-                <spectrum-picker ng-model="ctrl.panel.nodeFillColor" ng-change="ctrl.render()" ></spectrum-picker>
+                <color-picker color="ctrl.panel.nodeFillColor" onChange="ctrl.onDefaultNodeColor" ></color-picker>
             </span>
         </div>
 
         <div class="gf-form">
             <label class="gf-form-label width-9">Down Links color</label>
             <span class="gf-form-label">
-                <spectrum-picker ng-model="ctrl.panel.downLinkColor" ng-change="ctrl.render()" ></spectrum-picker>
+                <color-picker color="ctrl.panel.downLinkColor" onChange="ctrl.onDownLinkChange"></color-picker>
             </span>
         </div>
 

diff --git a/src/plugin.json b/src/plugin.json
@@ -14,8 +14,8 @@
         {"name": "Github", "url": "https://github.com/GlobalNOC/globalnoc-networkmap-panel"},
         {"name": "Apache License", "url": "https://raw.githubusercontent.com/globalnoc/globalnoc-networkmap-panel/master/LICENSE"}
     ],
-    "version": "1.1.0",
-    "updated": "2019-03-21"
+    "version": "1.1.1",
+    "updated": "2019-04-24"
   },
 
   "dependencies": {

diff --git a/src/scale.js b/src/scale.js
@@ -48,13 +48,14 @@ export class Scale {
         this.rgbArray = [];
         this.opacity_values = [];
         this.downLinkColor = $scope.ctrl.panel.downLinkColor;
+
     }
 
     setColorScheme(colorScheme)  {
         this.colorScheme = colorScheme;
     }
 
-    getColorSchemes()  {	
+    getColorSchemes() {
         return colorSchemes;
     }
 
@@ -73,6 +74,10 @@ export class Scale {
         }
     }
 
+    setDownLinkColor(color) {
+        this.downLinkColor = color;
+    }
+
     getColor(percentage) {
         if(!percentage){
             return this.downLinkColor;