feat: Copy to clipboard now works in query troubleshooter

public/app/core/directives/misc.js

@@ -19,17 +19,26 @@ function (angular, require, coreModule, kbn) {
     };
   });
 
-  coreModule.default.directive('clipboardButton',function() {
-    return function(scope, elem) {
-      require(['vendor/clipboard/dist/clipboard'], function(Clipboard) {
-        scope.clipboard = new Clipboard(elem[0]);
-      });
+  coreModule.default.directive('clipboardButton', function() {
+    return {
+      scope: {
+        getText: '&clipboardButton'
+      },
+      link: function(scope, elem) {
+        require(['vendor/clipboard/dist/clipboard'], function(Clipboard) {
+          scope.clipboard = new Clipboard(elem[0], {
+            text: function() {
+              return scope.getText();
+            }
+          });
+        });
 
-      scope.$on('$destroy', function() {
-        if (scope.clipboard) {
-          scope.clipboard.destroy();
-        }
-      });
+        scope.$on('$destroy', function() {
+          if (scope.clipboard) {
+            scope.clipboard.destroy();
+          }
+        });
+      }
     };
   });
 
@@ -78,10 +87,10 @@ function (angular, require, coreModule, kbn) {
           text + tip + '</label>';
 
         var template =
-          '<input class="cr1" id="' + scope.$id + model + '" type="checkbox" ' +
-          '       ng-model="' + model + '"' + ngchange +
-          '       ng-checked="' + model + '"></input>' +
-          ' <label for="' + scope.$id + model + '" class="cr1"></label>';
+        '<input class="cr1" id="' + scope.$id + model + '" type="checkbox" ' +
+        '       ng-model="' + model + '"' + ngchange +
+        '       ng-checked="' + model + '"></input>' +
+        ' <label for="' + scope.$id + model + '" class="cr1"></label>';
 
         template = template + label;
         elem.addClass('gf-form-checkbox');
@@ -106,7 +115,7 @@ function (angular, require, coreModule, kbn) {
         var li = '<li' + (item.submenu && item.submenu.length ? ' class="dropdown-submenu"' : '') + '>' +
           '<a tabindex="-1" ng-href="' + (item.href || '') + '"' + (item.click ? ' ng-click="' + item.click + '"' : '') +
           (item.target ? ' target="' + item.target + '"' : '') + (item.method ? ' data-method="' + item.method + '"' : '') +
-          '>' + (item.text || '') + '</a>';
+            '>' + (item.text || '') + '</a>';
 
         if (item.submenu && item.submenu.length) {
           li += buildTemplate(item.submenu).join('\n');

public/app/features/dashboard/partials/shareModal.html

@@ -86,7 +86,7 @@
 							<input type="text" data-share-panel-url class="gf-form-input" ng-model="shareUrl"></input>
 						</div>
 						<div class="gf-form">
-							<button class="btn btn-inverse" data-clipboard-text="{{shareUrl}}" clipboard-button><i class="fa fa-clipboard"></i> Copy</button>
+							<button class="btn btn-inverse" clipboard-button="getShareUrl()"><i class="fa fa-clipboard"></i> Copy</button>
 						</div>
 					</div>
 				</div>
@@ -143,7 +143,7 @@
 								{{snapshotUrl}}
 							</a>
 							<br>
-							<button class="btn btn-inverse" data-clipboard-text="{{snapshotUrl}}" clipboard-button><i class="fa fa-clipboard"></i> Copy Link</button>
+							<button class="btn btn-inverse" clipboard-button="getSnapshotUrl()"><i class="fa fa-clipboard"></i> Copy Link</button>
 						</div>
 					</div>
 				</div>

public/app/features/dashboard/shareModalCtrl.js

@@ -88,6 +88,10 @@ function (angular, _, $, moment, config) {
       $scope.imageUrl += '&tz=UTC' + encodeURIComponent(moment().format("Z"));
     };
 
+    $scope.getShareUrl = function() {
+      return $scope.shareUrl;
+    };
+
   });
 
 });

public/app/features/dashboard/shareSnapshotCtrl.js

@@ -96,6 +96,10 @@ function (angular, _) {
       });
     };
 
+    $scope.getSnapshotUrl = function() {
+      return $scope.snapshotUrl;
+    };
+
     $scope.scrubDashboard = function(dash) {
       // change title
       dash.title = $scope.snapshot.name;

public/app/features/panel/query_troubleshooter.ts

@@ -14,7 +14,7 @@ const template = `
     <a class="pointer" ng-click="ctrl.toggleExpand()" ng-show="ctrl.allNodesExpanded">
       <i class="fa fa-expand"></i> Collapse All
     </a>
-    <a class="pointer" data-clipboard-text="adasda" clipboard-button><i class="fa fa-clipboard"></i> Copy to Clipboard</a>
+    <a class="pointer" clipboard-button="ctrl.getClipboardText()"><i class="fa fa-clipboard"></i> Copy to Clipboard</a>
   </collapse-box-actions>
   <collapse-box-body>
     <div class="query-troubleshooter-json"></div>
@@ -62,6 +62,12 @@ export class QueryTroubleshooterCtrl {
     }
   }
 
+  getClipboardText() {
+    if (this.jsonExplorer) {
+      return JSON.stringify(this.jsonExplorer.json, null, 2);
+    }
+  }
+
   onRequestResponse(data) {
     data = _.cloneDeep(data);