Add new mapping options "table+json" and "table+jsonp" to retrieve

location information from JSON endpoint, even for table data. The lookup key is the value from the obtained "labelField".
grafana-toolbox · Apr 20, 2019 · 6c63d85 · 6c63d85
1 parent b7896ce
commit 6c63d85
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 14 deletions.
diff --git a/src/data_formatter.ts b/src/data_formatter.ts
@@ -183,9 +183,25 @@ export default class DataFormatter {
           key = `${latitude}_${longitude}`;
         }
 
+        // Attempt to resolve value from table's "labelField" against key from JSON/JSONP result.
+        let locationKey = datapoint[this.ctrl.panel.tableQueryOptions.labelField];
+        let location = _.find(this.ctrl.locations, function (loc) {
+            return loc.key === locationKey;
+        });
+
+        // Compute effective location name.
+        let locationNameFromTable = locationKey;
+        let locationNameFromJson  = location ? location.name : undefined;
+        let locationNameEffective = locationNameFromJson || locationNameFromTable || 'n/a';
+
+        // Add suffix
+        if (locationNameFromJson && locationNameFromTable != locationNameFromJson) {
+            locationNameEffective += ' (' + locationNameFromTable + ')';
+        }
+
         const dataValue = {
           key: key,
-          locationName: datapoint[this.ctrl.panel.tableQueryOptions.labelField] || 'n/a',
+          locationName: locationNameEffective,
           locationLatitude: latitude,
           locationLongitude: longitude,
           value: datapoint[this.ctrl.panel.tableQueryOptions.metricField],

diff --git a/src/partials/editor.html b/src/partials/editor.html
@@ -52,7 +52,7 @@ <h5 class="section-heading">Map Data Options</h5>
       <div class="gf-form">
         <label class="gf-form-label width-12">Location Data</label>
         <div class="gf-form-select-wrapper max-width-10">
-          <select class="input-small gf-form-input" ng-model="ctrl.panel.locationData" ng-options="t for t in ['countries', 'countries_3letter', 'states', 'probes', 'geohash', 'json endpoint', 'jsonp endpoint', 'json result', 'table']"
+          <select class="input-small gf-form-input" ng-model="ctrl.panel.locationData" ng-options="t for t in ['countries', 'countries_3letter', 'states', 'probes', 'geohash', 'json endpoint', 'jsonp endpoint', 'json result', 'table', 'table+json', 'table+jsonp']"
             ng-change="ctrl.changeLocationData()"></select>
         </div>
       </div>
@@ -63,17 +63,17 @@ <h5 class="section-heading">Map Data Options</h5>
             ng-change="ctrl.refresh()"></select>
         </div>
       </div>
-      <div class="gf-form" ng-show="ctrl.panel.locationData === 'json endpoint'">
+      <div class="gf-form" ng-show="ctrl.panel.locationData === 'json endpoint' || ctrl.panel.locationData === 'table+json'">
         <label class="gf-form-label width-12">Endpoint url</label>
         <input type="text" class="input-small gf-form-input width-10" ng-model="ctrl.panel.jsonUrl" ng-change="ctrl.refresh()" ng-model-onblur
         />
       </div>
-      <div class="gf-form" ng-show="ctrl.panel.locationData === 'jsonp endpoint'">
+      <div class="gf-form" ng-show="ctrl.panel.locationData === 'jsonp endpoint' || ctrl.panel.locationData === 'table+jsonp'">
         <label class="gf-form-label width-12">Endpoint url</label>
         <input type="text" class="input-small gf-form-input width-10" ng-model="ctrl.panel.jsonpUrl" ng-change="ctrl.refresh()" ng-model-onblur
         />
       </div>
-      <div class="gf-form" ng-show="ctrl.panel.locationData === 'jsonp endpoint'">
+      <div class="gf-form" ng-show="ctrl.panel.locationData === 'jsonp endpoint' || ctrl.panel.locationData === 'table+jsonp'">
         <label class="gf-form-label width-12">Jsonp Callback</label>
         <input type="text" class="input-small gf-form-input width-10" ng-model="ctrl.panel.jsonpCallback" ng-change="ctrl.refresh()"
           ng-model-onblur />
@@ -138,20 +138,20 @@ <h5>Mapping Between Table Query and Worldmap</h5>
           how large the circle is.</li>
       </ul>
     </div>
-    <h6 ng-show="ctrl.panel.locationData === 'table' || ctrl.panel.locationData === 'geohash'">Field Mapping</h6>
-    <div class="gf-form" ng-show="ctrl.panel.locationData === 'table'">
+    <h6 ng-show="ctrl.showTableOptions() || ctrl.panel.locationData === 'geohash'">Field Mapping</h6>
+    <div class="gf-form" ng-show="ctrl.showTableOptions()">
       <label class="gf-form-label width-12">Table Query Format</label>
       <div class="gf-form-select-wrapper max-width-10">
         <select class="input-small gf-form-input" ng-model="ctrl.panel.tableQueryOptions.queryType" ng-options="t for t in ['geohash', 'coordinates']"
           ng-change="ctrl.refresh()"></select>
       </div>
     </div>
-    <div class="gf-form" ng-show="ctrl.panel.locationData === 'table'">
+    <div class="gf-form" ng-show="ctrl.showTableOptions()">
       <label class="gf-form-label width-12">Location Name Field</label>
       <input type="text" class="input-small gf-form-input width-10" ng-model="ctrl.panel.tableQueryOptions.labelField" ng-change="ctrl.refresh()"
         ng-model-onblur />
     </div>
-    <div class="gf-form" ng-show="ctrl.panel.locationData === 'table'">
+    <div class="gf-form" ng-show="ctrl.showTableOptions()">
       <label class="gf-form-label width-12">Metric Field</label>
       <input type="text" class="input-small gf-form-input width-10" ng-model="ctrl.panel.tableQueryOptions.metricField" ng-change="ctrl.refresh()"
         ng-model-onblur />

diff --git a/src/worldmap_ctrl.ts b/src/worldmap_ctrl.ts
@@ -105,7 +105,7 @@ export default class WorldmapCtrl extends MetricsPanelCtrl {
       return;
     }
 
-    if (this.panel.locationData === "jsonp endpoint") {
+    if (this.panel.locationData === "jsonp endpoint" || this.panel.locationData === "table+jsonp") {
       if (!this.panel.jsonpUrl || !this.panel.jsonpCallback) {
         return;
       }
@@ -121,7 +121,7 @@ export default class WorldmapCtrl extends MetricsPanelCtrl {
           this.render();
         }
       });
-    } else if (this.panel.locationData === "json endpoint") {
+    } else if (this.panel.locationData === "json endpoint" || this.panel.locationData === "table+json") {
       if (!this.panel.jsonUrl) {
         return;
       }
@@ -149,16 +149,20 @@ export default class WorldmapCtrl extends MetricsPanelCtrl {
     this.refresh();
   }
 
+  showTableOptions() {
+    return _.startsWith(this.panel.locationData, "table");
+  }
+
   showTableGeohashOptions() {
     return (
-      this.panel.locationData === "table" &&
+      this.showTableOptions() &&
       this.panel.tableQueryOptions.queryType === "geohash"
     );
   }
 
   showTableCoordinateOptions() {
     return (
-      this.panel.locationData === "table" &&
+      this.showTableOptions() &&
       this.panel.tableQueryOptions.queryType === "coordinates"
     );
   }
@@ -190,7 +194,7 @@ export default class WorldmapCtrl extends MetricsPanelCtrl {
 
     if (this.panel.locationData === "geohash") {
       this.dataFormatter.setGeohashValues(dataList, data);
-    } else if (this.panel.locationData === "table") {
+    } else if (this.showTableOptions()) {
       const tableData = dataList.map(DataFormatter.tableHandler.bind(this));
       this.dataFormatter.setTableValues(tableData, data);
     } else if (this.panel.locationData === "json result") {