Clickable cells (#41)

README.md

@@ -205,7 +205,7 @@ Logic is same as background color. But the value to be displayed can be altered
 
 `_row_name_` will be replaced by row name. This will be useful when you hide the first column.
 
-`_col_name_` will be replaced by row name. This will be useful when you hide the table header.
+`_col_name_` will be replaced by col name. This will be useful when you hide the table header.
 
 Example transformation patterns :
 
@@ -226,6 +226,20 @@ Sample value transformation: (Assume your metrics results, 95 and it is percenta
     HOT (_value_ > threshold of 80%)     -->     HOT (95% > threshold of 80%)
     Contact helpdesk        -->     Contact helpdesk
 
+Table Cell links
+----------------
+
+Table cells can be clickable and open links in new tabs.
+
+If the URL contains `_row_name_`, it will be replaced by row name.
+
+If the URL contains `_col_name_`, it will be replaced by col name.
+
+Note : If the row_name / col_name contains font awesome keywords like `_fa-circle_`, they will be ignored.
+
+
+Example : `https://mysite.com/_row_name_/_col_name_/?foo=bar`
+
 Filter
 ------
 
@@ -301,6 +315,7 @@ Same as other time series data sources. You need to properly format your legend
 * Filter option to hide rows based on value
 * Option to hide the first column and table header 
 * Font Awesome icons support (From 0.4.6)
+* Clickable cells (From 0.4.7)
 
 **Version 0.3.x**
 

dist/README.md

@@ -205,7 +205,7 @@ Logic is same as background color. But the value to be displayed can be altered
 
 `_row_name_` will be replaced by row name. This will be useful when you hide the first column.
 
-`_col_name_` will be replaced by row name. This will be useful when you hide the table header.
+`_col_name_` will be replaced by col name. This will be useful when you hide the table header.
 
 Example transformation patterns :
 
@@ -226,6 +226,20 @@ Sample value transformation: (Assume your metrics results, 95 and it is percenta
     HOT (_value_ > threshold of 80%)     -->     HOT (95% > threshold of 80%)
     Contact helpdesk        -->     Contact helpdesk
 
+Table Cell links
+----------------
+
+Table cells can be clickable and open links in new tabs.
+
+If the URL contains `_row_name_`, it will be replaced by row name.
+
+If the URL contains `_col_name_`, it will be replaced by col name.
+
+Note : If the row_name / col_name contains font awesome keywords like `_fa-circle_`, they will be ignored.
+
+
+Example : `https://mysite.com/_row_name_/_col_name_/?foo=bar`
+
 Filter
 ------
 
@@ -301,6 +315,7 @@ Same as other time series data sources. You need to properly format your legend
 * Filter option to hide rows based on value
 * Option to hide the first column and table header 
 * Font Awesome icons support (From 0.4.6)
+* Clickable cells (From 0.4.7)
 
 **Version 0.3.x**
 

dist/partials/patterns.html

@@ -128,6 +128,19 @@ <h5 class="text-warning">Patterns</h5>
                                 ng-blur="ctrl.render()" data-ng-change="ctrl.render();">
                         </div>
                     </div>
+                    <div class="gr-form-inline">
+                        <div class="gf-form">
+                            <label class="gf-form-label width-13">Enable Cell links</label>
+                            <input type="checkbox" class="gf-form-input width-4" ng-model="pattern.enable_clickable_cells" ng-blur="ctrl.render()" ng-change="ctrl.render()">
+                        </div>
+                    </div>
+                    <div class="gr-form-inline" data-ng-if="pattern.enable_clickable_cells">
+                        <div class="gf-form">
+                            <label class="gf-form-label width-13">Cells target URL</label>
+                            <input type="text" placeholder="#" class="gf-form-input width-18" ng-model="pattern.clickable_cells_link" bs-tooltip="'Cell target URL'"
+                                ng-blur="ctrl.render()" data-ng-change="ctrl.render();">
+                        </div>
+                    </div>
                 </div>
             </div>
             <div class="editor-row">

dist/plugin.json

@@ -25,7 +25,7 @@
         "url": "https://github.com/yesoreyeram/yesoreyeram-boomtable-panel"
       }
     ],
-    "version": "0.4.6"
+    "version": "0.4.7"
   },
   "dependencies": {
     "grafanaVersion": "4.x.x",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "yesoreyeram-boomtable-panel",
-  "version": "0.4.6",
+  "version": "0.4.7",
   "description": "Boom table panel for Graphite, InfluxDB, Prometheus",
   "main": "dist/module.js",
   "scripts": {

plugin.json

@@ -25,7 +25,7 @@
         "url": "https://github.com/yesoreyeram/yesoreyeram-boomtable-panel"
       }
     ],
-    "version": "0.4.6"
+    "version": "0.4.7"
   },
   "dependencies": {
     "grafanaVersion": "4.x.x",

src/app/app.ts

@@ -36,6 +36,8 @@ const config: any = {
             format: "none",
             null_color: "darkred",
             null_value: "No data",
+            enable_clickable_cells : false,
+            clickable_cells_link : "",
             filter : {
                 value_below : "",
                 value_above : ""

src/module.ts

@@ -58,6 +58,8 @@ class GrafanaBoomTableCtrl extends MetricsPanelCtrl {
       format: "none",
       null_color: "darkred",
       null_value: "No data",
+      enable_clickable_cells : false,
+      clickable_cells_link : "",
       filter : {
           value_below : "",
           value_above : "",
@@ -409,6 +411,15 @@ GrafanaBoomTableCtrl.prototype.render = function () {
         if(series.col_name && series.col_name.indexOf("_fa-")>-1)             series.col_name      = this.replaceFontAwesomeIcons(series.col_name)
         return series;
       });
+      this.dataComputed = this.dataComputed.map(series => {
+        if(series.pattern.enable_clickable_cells){
+          let targetLink = series.pattern.clickable_cells_link || "#";
+          targetLink = targetLink.replace(new RegExp("_row_name_", "g"), this.getActualNameWithoutFA(series.actual_row_name).trim());
+          targetLink = targetLink.replace(new RegExp("_col_name_", "g"), this.getActualNameWithoutFA(series.actual_col_name).trim());
+          series.displayValue = `<a href="${targetLink}" target="_blank">${series.displayValue}</a>`
+        }
+        return series;
+      });
       // Grouping
       const rows_found = utils.getFields(this.dataComputed, "row_name");
       const cols_found = utils.getFields(this.dataComputed, "col_name");

src/partials/patterns.html

@@ -128,6 +128,19 @@ <h5 class="text-warning">Patterns</h5>
                                 ng-blur="ctrl.render()" data-ng-change="ctrl.render();">
                         </div>
                     </div>
+                    <div class="gr-form-inline">
+                        <div class="gf-form">
+                            <label class="gf-form-label width-13">Enable Cell links</label>
+                            <input type="checkbox" class="gf-form-input width-4" ng-model="pattern.enable_clickable_cells" ng-blur="ctrl.render()" ng-change="ctrl.render()">
+                        </div>
+                    </div>
+                    <div class="gr-form-inline" data-ng-if="pattern.enable_clickable_cells">
+                        <div class="gf-form">
+                            <label class="gf-form-label width-13">Cells target URL</label>
+                            <input type="text" placeholder="#" class="gf-form-input width-18" ng-model="pattern.clickable_cells_link" bs-tooltip="'Cell target URL'"
+                                ng-blur="ctrl.render()" data-ng-change="ctrl.render();">
+                        </div>
+                    </div>
                 </div>
             </div>
             <div class="editor-row">