Merge pull request #141 from flant/release_0_3_4

release: 0.3.4

.gitattributes

@@ -0,0 +1,2 @@
+/dist linguist-generated
+/src/libs/d3-scale-chromatic linguist-vendored

CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## v0.3.4
+
+- Fix to work in Grafana 7.2.0,7.2.1
+- Fix 'name' in tooltip for opacity and gradient modes
+- Fix color scale for opacity and gradient modes
+
+## v0.3.3
+
+- Fix fallback to string events for older versions of Grafana
+
+## v0.3.2
+
+- Fix plugin metadata for Grafana repository
+
+## v0.3.1
+
+- Fix to work in Grafana 7.1.0
+
 ## v0.3.0
 
 - Tooltip freeze on click

README.md

@@ -1,6 +1,8 @@
-[![Download from Github](https://img.shields.io/github/tag-date/flant/grafana-statusmap.svg?logo=github&label=latest)](https://github.com/flant/grafana-statusmap/releases/latest)
+<p align="center">
-[![Telegram chat RU](https://img.shields.io/badge/@statusmap_ru-RU-informational.svg?logo=telegram)](https://t.me/statusmap_ru)
+<a href="https://github.com/flant/grafana-statusmap/releases/latest"><img src="https://img.shields.io/github/tag-date/flant/grafana-statusmap.svg?logo=github&label=latest" alt="Download from Github"/></a>
-[![Slack chat EN](https://img.shields.io/badge/%23grafana--statusmap-EN-informational.svg?logo=slack)](https://cloud-native.slack.com/messages/CHGSGTAHY)
+<a href="https://community.flant.com/c/grafana-statusmap/8"><img src="https://img.shields.io/discourse/status?server=https%3A%2F%2Fcommunity.flant.com" alt="Discourse forum for discussions"/></a>
+<a href="https://t.me/statusmap_ru"><img src="https://img.shields.io/badge/@statusmap_ru-RU-informational.svg?logo=telegram" alt="Telegram chat RU"/></a>
+</p>
 
 # Statusmap panel for Grafana
 
@@ -26,9 +28,9 @@
   - InfluxDB
   - Mysql
 * Tested with Grafana:
-  - 5.4.3
+  - 7.0, 7.1, 7.2
   - 6.3, 6.6, 6.7
-  - 7.0
+  - 5.4.3
 
 ## Installation
 
@@ -184,7 +186,7 @@ __Rows sort__ can be used to sort labels on Y axis. Metrics — sort y labels a
 
 #### Pagination
 
-![Pagination controls](src/img/pagination-graph.png)
+![Pagination controls](https://raw.githubusercontent.com/flant/grafana-statusmap/master/src/img/pagination-graph.png)
 
 __Enable pagination__ toggles pagination controls on graph.
 
@@ -192,7 +194,7 @@ __Rows per page__ a number of rows to display on graph.
 
 #### Tooltip
 
-![Tooltip in frozen state](src/img/tooltip-frozen.png)
+![Tooltip in frozen state](https://raw.githubusercontent.com/flant/grafana-statusmap/master/src/img/tooltip-frozen.png)
 
 __Show tooltip__ toggles tooltip display on mouse over buckets.
 
@@ -204,7 +206,7 @@ __Items__ is a list of definitions to display URLs in tooltip.
 
 Each URL has a template, icon, label and formating options: lowercase and date format for variables.
 
-![Tooltip items editor](src/img/tooltip-editor.png)
+![Tooltip items editor](https://raw.githubusercontent.com/flant/grafana-statusmap/master/src/img/tooltip-editor.png)
 
 ## Development
 
@@ -215,7 +217,7 @@ the directory containing Statusmap plugin):
 docker run --rm -it -v $PWD:/var/lib/grafana/plugins/flant-statusmap-panel \
            -p 3000:3000 --name grafana.docker \
            --env=GF_USERS_DEFAULT_THEME=light \
-           grafana/grafana:5.1.3
+           grafana/grafana:7.1.3
 ```
 
 This will expose local plugin from your machine to Grafana container. Now run `grunt` to compile

dist/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## v0.3.4
+
+- Fix to work in Grafana 7.2.0,7.2.1
+- Fix 'name' in tooltip for opacity and gradient modes
+- Fix color scale for opacity and gradient modes
+
+## v0.3.3
+
+- Fix fallback to string events for older versions of Grafana
+
+## v0.3.2
+
+- Fix plugin metadata for Grafana repository
+
+## v0.3.1
+
+- Fix to work in Grafana 7.1.0
+
 ## v0.3.0
 
 - Tooltip freeze on click

dist/README.md

@@ -1,6 +1,8 @@
-[![Download from Github](https://img.shields.io/github/tag-date/flant/grafana-statusmap.svg?logo=github&label=latest)](https://github.com/flant/grafana-statusmap/releases/latest)
+<p align="center">
-[![Telegram chat RU](https://img.shields.io/badge/@statusmap_ru-RU-informational.svg?logo=telegram)](https://t.me/statusmap_ru)
+<a href="https://github.com/flant/grafana-statusmap/releases/latest"><img src="https://img.shields.io/github/tag-date/flant/grafana-statusmap.svg?logo=github&label=latest" alt="Download from Github"/></a>
-[![Slack chat EN](https://img.shields.io/badge/%23grafana--statusmap-EN-informational.svg?logo=slack)](https://cloud-native.slack.com/messages/CHGSGTAHY)
+<a href="https://community.flant.com/c/grafana-statusmap/8"><img src="https://img.shields.io/discourse/status?server=https%3A%2F%2Fcommunity.flant.com" alt="Discourse forum for discussions"/></a>
+<a href="https://t.me/statusmap_ru"><img src="https://img.shields.io/badge/@statusmap_ru-RU-informational.svg?logo=telegram" alt="Telegram chat RU"/></a>
+</p>
 
 # Statusmap panel for Grafana
 
@@ -26,9 +28,9 @@
   - InfluxDB
   - Mysql
 * Tested with Grafana:
-  - 5.4.3
+  - 7.0, 7.1, 7.2
   - 6.3, 6.6, 6.7
-  - 7.0
+  - 5.4.3
 
 ## Installation
 
@@ -184,7 +186,7 @@ __Rows sort__ can be used to sort labels on Y axis. Metrics — sort y labels a
 
 #### Pagination
 
-![Pagination controls](src/img/pagination-graph.png)
+![Pagination controls](https://raw.githubusercontent.com/flant/grafana-statusmap/master/src/img/pagination-graph.png)
 
 __Enable pagination__ toggles pagination controls on graph.
 
@@ -192,7 +194,7 @@ __Rows per page__ a number of rows to display on graph.
 
 #### Tooltip
 
-![Tooltip in frozen state](src/img/tooltip-frozen.png)
+![Tooltip in frozen state](https://raw.githubusercontent.com/flant/grafana-statusmap/master/src/img/tooltip-frozen.png)
 
 __Show tooltip__ toggles tooltip display on mouse over buckets.
 
@@ -204,7 +206,7 @@ __Items__ is a list of definitions to display URLs in tooltip.
 
 Each URL has a template, icon, label and formating options: lowercase and date format for variables.
 
-![Tooltip items editor](src/img/tooltip-editor.png)
+![Tooltip items editor](https://raw.githubusercontent.com/flant/grafana-statusmap/master/src/img/tooltip-editor.png)
 
 ## Development
 
@@ -215,7 +217,7 @@ the directory containing Statusmap plugin):
 docker run --rm -it -v $PWD:/var/lib/grafana/plugins/flant-statusmap-panel \
            -p 3000:3000 --name grafana.docker \
            --env=GF_USERS_DEFAULT_THEME=light \
-           grafana/grafana:5.1.3
+           grafana/grafana:7.1.3
 ```
 
 This will expose local plugin from your machine to Grafana container. Now run `grunt` to compile

dist/color_legend.js

@@ -366,17 +366,17 @@ System.register(["lodash", "jquery", "d3", "./libs/d3-scale-chromatic/index", "a
               if (ctrl.bucketMatrix) {
                 var rangeFrom = ctrl.bucketMatrix.minValue;
                 var rangeTo = ctrl.bucketMatrix.maxValue;
-                var maxValue = panel.color.max || rangeTo;
+                var maxValue = panel.color.max != null ? panel.color.max : rangeTo;
-                var minValue = panel.color.min || rangeFrom;
+                var minValue = panel.color.min != null ? panel.color.min : rangeFrom;
 
                 if (ctrl.bucketMatrix.noDatapoints) {
-                  if (!panel.color.max) {
+                  if (panel.color.max != null) {
                     rangeTo = maxValue = 100;
                   } else {
                     rangeTo = 100;
                   }
 
-                  if (!panel.color.min) {
+                  if (panel.color.min != null) {
                     rangeFrom = minValue = 0;
                   } else {
                     rangeFrom = 0;

dist/module.js

@@ -157,27 +157,25 @@ System.register(["lodash", "./color_legend", "./options_editor", "./tooltip_edit
 
       _export("renderComplete", renderComplete = {
         name: 'statusmap-render-complete'
-      }); // eventFactory('statusmap-render-complete');
+      });
-
 
       _export("PanelCtrl", _export("StatusHeatmapCtrl", StatusHeatmapCtrl =
       /*#__PURE__*/
       function (_MetricsPanelCtrl) {
-        StatusHeatmapCtrl.$inject = ["$scope", "$injector", "timeSrv", "annotationsSrv", "$window", "datasourceSrv", "variableSrv", "templateSrv"];
+        StatusHeatmapCtrl.$inject = ["$scope", "$injector", "annotationsSrv"];
 
         _inherits(StatusHeatmapCtrl, _MetricsPanelCtrl);
 
         // TODO remove this transient variable: use ng-model-options="{ getterSetter: true }"
 
         /** @ngInject */
-        function StatusHeatmapCtrl($scope, $injector, timeSrv, annotationsSrv, $window, datasourceSrv, variableSrv, templateSrv) {
+        function StatusHeatmapCtrl($scope, $injector, annotationsSrv) {
           var _this;
 
           _classCallCheck(this, StatusHeatmapCtrl);
 
           _this = _possibleConstructorReturn(this, _getPrototypeOf(StatusHeatmapCtrl).call(this, $scope, $injector));
           _this.annotationsSrv = annotationsSrv;
-          _this.variableSrv = variableSrv;
 
           _defineProperty(_assertThisInitialized(_this), "data", void 0);
 
@@ -268,7 +266,12 @@ System.register(["lodash", "./color_legend", "./options_editor", "./tooltip_edit
             CoreEvents.fallbackToStringEvents();
             PanelEvents.fallbackToStringEvents();
 
-            _export("renderComplete", renderComplete = renderComplete.name);
+            _export("renderComplete", renderComplete = 'statusmap-render-complete');
+          } // Grafana 7.2 workaround
+
+
+          if (typeof kbn["intervalToMs"] === "function") {
+            kbn.interval_to_ms = kbn.intervalToMs;
           }
 
           migratePanelConfig(_this.panel);
@@ -312,7 +315,6 @@ System.register(["lodash", "./color_legend", "./options_editor", "./tooltip_edit
           };
           _this.annotations = [];
           _this.annotationsSrv = annotationsSrv;
-          _this.timeSrv = timeSrv;
 
           _this.events.on(PanelEvents.render, _this.onRender.bind(_assertThisInitialized(_this)));
 

dist/partials/options_editor.html

@@ -81,9 +81,7 @@
           </div>
           <div class="gf-form">
             <label class="gf-form-label">
-              <a class="pointer" tabindex="1" ng-click="editor.onRemoveThreshold($index)">
+              <i class="fa fa-trash pointer" ng-click="editor.onRemoveThreshold($index)"></i>
-                <i class="fa fa-trash"/>
-              </a>
             </label>
           </div>
         </div>

dist/plugin.json

@@ -24,11 +24,12 @@
       {"name": "Color mapping", "path": "img/color-mapping.png"},
       {"name": "Queries example", "path": "img/queries-example.png"}
     ],
-    "version": "0.3.0",
+    "version": "0.3.4",
-    "updated": "2020-07-14"
+    "updated": "2020-09-12"
   },
 
   "dependencies": {
+    "grafanaDependency": ">=5.4.3",
     "grafanaVersion": "5.4.x",
     "plugins": [ ]
   }

dist/rendering.js

@@ -462,8 +462,8 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
           value: function addStatusmap() {
             var _this = this;
 
-            var maxValue = this.panel.color.max || this.bucketMatrix.maxValue;
+            var maxValue = this.panel.color.max != null ? this.panel.color.max : this.bucketMatrix.maxValue;
-            var minValue = this.panel.color.min || this.bucketMatrix.minValue;
+            var minValue = this.panel.color.min != null ? this.panel.color.min : this.bucketMatrix.minValue;
 
             if (this.panel.color.mode !== 'discrete') {
               this.colorScale = this.getColorScale(maxValue, minValue);

dist/tooltip.js

@@ -186,9 +186,9 @@ System.register(["d3", "jquery", "lodash"], function (_export, _context) {
               }), ""), "\n        </ul>\n      </div>");
             } else {
               if (values.length === 1) {
-                tooltipHtml += "<div> \n      name: <b>".concat(name, "</b> <br>\n      value: <b>").concat(value, "</b> <br>\n      </div>");
+                tooltipHtml += "<div> \n      name: <b>".concat(yLabel, "</b> <br>\n      value: <b>").concat(value, "</b> <br>\n      </div>");
               } else {
-                tooltipHtml += "<div>\n      name: <b>".concat(name, "</b> <br>\n      values:\n      <ul>\n        ").concat(_.join(_.map(values, function (v) {
+                tooltipHtml += "<div>\n      name: <b>".concat(yLabel, "</b> <br>\n      values:\n      <ul>\n        ").concat(_.join(_.map(values, function (v) {
                   return "<li>".concat(v, "</li>");
                 }), ""), "\n      </ul>\n      </div>");
               }

package-lock.json

@@ -3580,7 +3580,7 @@
     },
     "chalk": {
       "version": "1.1.3",
-      "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
       "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
       "dev": true,
       "requires": {
@@ -7794,9 +7794,9 @@
       }
     },
     "lodash": {
-      "version": "4.17.15",
+      "version": "4.17.19",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz",
-      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
+      "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ=="
     },
     "lodash.memoize": {
       "version": "4.1.2",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flant-statusmap-panel",
-  "version": "0.2.0",
+  "version": "0.3.4",
   "description": "Grafana panel plugin to visualize status of multiple objects over time",
   "main": "README.md",
   "scripts": {
@@ -56,7 +56,7 @@
   "dependencies": {
     "d3": "4.13.0",
     "d3-scale-chromatic": "1.5.0",
-    "lodash": "4.17.15",
+    "lodash": "4.17.19",
     "moment": "2.24.0"
   }
 }

src/color_legend.ts

@@ -68,16 +68,16 @@ coreModule.directive('statusHeatmapLegend', function() {
         if (ctrl.bucketMatrix) {
           let rangeFrom = ctrl.bucketMatrix.minValue;
           let rangeTo = ctrl.bucketMatrix.maxValue;
-          let maxValue = panel.color.max || rangeTo;
+          let maxValue = panel.color.max != null ? panel.color.max : rangeTo;
-          let minValue = panel.color.min || rangeFrom;
+          let minValue = panel.color.min != null ? panel.color.min : rangeFrom;
 
           if (ctrl.bucketMatrix.noDatapoints) {
-            if (!panel.color.max) {
+            if (panel.color.max != null) {
               rangeTo = maxValue = 100;
             } else {
               rangeTo = 100;
             }
-            if (!panel.color.min) {
+            if (panel.color.min != null) {
               rangeFrom = minValue = 0;
             } else {
               rangeFrom = 0;

src/module.ts

@@ -63,7 +63,7 @@ loadPluginCss({
   light: 'plugins/flant-statusmap-panel/css/statusmap.light.css'
 });
 
-export var renderComplete:any = {name:'statusmap-render-complete'}; // eventFactory('statusmap-render-complete');
+export var renderComplete:any = {name:'statusmap-render-complete'};
 
 class StatusHeatmapCtrl extends MetricsPanelCtrl {
   static templateUrl = 'module.html';
@@ -144,13 +144,18 @@ class StatusHeatmapCtrl extends MetricsPanelCtrl {
   };
 
   /** @ngInject */
-  constructor($scope: any, $injector: auto.IInjectorService, timeSrv, private annotationsSrv: AnnotationsSrv, $window, datasourceSrv, public variableSrv: any, templateSrv) {
+  constructor($scope: any, $injector: auto.IInjectorService, private annotationsSrv: AnnotationsSrv) {
     super($scope, $injector);
 
     if(!Polygrafill.hasAppEventCompatibleEmitter(this.events)){
       CoreEvents.fallbackToStringEvents();
       PanelEvents.fallbackToStringEvents();
-      renderComplete = renderComplete.name;
+      renderComplete = 'statusmap-render-complete';
+    }
+
+    // Grafana 7.2 workaround
+    if (typeof kbn["intervalToMs"] === "function") {
+      kbn.interval_to_ms = kbn.intervalToMs;
     }
 
     migratePanelConfig(this.panel);
@@ -197,8 +202,6 @@ class StatusHeatmapCtrl extends MetricsPanelCtrl {
     this.annotations = [];
     this.annotationsSrv = annotationsSrv;
 
-    this.timeSrv = timeSrv;
-
     this.events.on(PanelEvents.render, this.onRender.bind(this));
     this.events.on(PanelEvents.dataReceived, this.onDataReceived.bind(this));
     this.events.on(PanelEvents.dataError, this.onDataError.bind(this));

src/partials/options_editor.html

@@ -81,9 +81,7 @@
           </div>
           <div class="gf-form">
             <label class="gf-form-label">
-              <a class="pointer" tabindex="1" ng-click="editor.onRemoveThreshold($index)">
+              <i class="fa fa-trash pointer" ng-click="editor.onRemoveThreshold($index)"></i>
-                <i class="fa fa-trash"/>
-              </a>
             </label>
           </div>
         </div>

src/plugin.json

@@ -24,11 +24,12 @@
       {"name": "Color mapping", "path": "img/color-mapping.png"},
       {"name": "Queries example", "path": "img/queries-example.png"}
     ],
-    "version": "0.3.0",
+    "version": "0.3.4",
-    "updated": "2020-07-14"
+    "updated": "2020-09-12"
   },
 
   "dependencies": {
+    "grafanaDependency": ">=5.4.3",
     "grafanaVersion": "5.4.x",
     "plugins": [ ]
   }

src/rendering.ts

@@ -364,8 +364,8 @@ export class StatusmapRenderer {
   }
 
   addStatusmap():void {
-    let maxValue = this.panel.color.max || this.bucketMatrix.maxValue;
+    let maxValue = this.panel.color.max != null ? this.panel.color.max : this.bucketMatrix.maxValue;
-    let minValue = this.panel.color.min || this.bucketMatrix.minValue;
+    let minValue = this.panel.color.min != null ? this.panel.color.min : this.bucketMatrix.minValue;
 
     if (this.panel.color.mode !== 'discrete') {
       this.colorScale = this.getColorScale(maxValue, minValue);

src/tooltip.ts

@@ -154,12 +154,12 @@ export class StatusmapTooltip {
     } else {
       if (values.length === 1) {
         tooltipHtml += `<div> 
-      name: <b>${name}</b> <br>
+      name: <b>${yLabel}</b> <br>
       value: <b>${value}</b> <br>
       </div>`;
       } else {
         tooltipHtml += `<div>
-      name: <b>${name}</b> <br>
+      name: <b>${yLabel}</b> <br>
       values:
       <ul>
         ${_.join(_.map(values, v => `<li>${v}</li>`), "")}