Add a button to quickly copy the contents of hawtio's drop-down javas…

…cript console
hawtio · Oct 29, 2013 · 9661f61 · 9661f61
1 parent f94e168
commit 9661f61
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 14 deletions.
diff --git a/hawtio-web/src/main/webapp/app/core/js/app.ts b/hawtio-web/src/main/webapp/app/core/js/app.ts
@@ -1,5 +1,33 @@
 module Core {
 
+  export function ConsoleController($scope, $element, $templateCache) {
+
+    $scope.setHandler = (clip) => {
+
+      clip.addEventListener('mouseDown', function(client, args) {
+
+
+        // this is apparently a global event handler for zero clipboard
+        // so you have to make sure you're handling the right click event
+        var icon = $element.find('.icon-copy');
+        if (this !== icon.get(0)) {
+          return;
+        }
+
+        var text = $templateCache.get("logClipboardTemplate").lines();
+        text.removeAt(0);
+        text.removeAt(text.length - 1);
+        $element.find('#log-panel-statements').children().each(function(index, child) {
+          text.push('  <li>' + child.innerHTML + '</li>');
+        });
+        text.push('</ul>');
+        clip.setText(text.join('\n'));
+        Core.$apply($scope);
+      });
+    };
+
+  }
+
   export function AppController($scope, $location, workspace, jolokiaStatus, $document, pageTitle:Core.PageTitle, localStorage, userDetails, lastLocation, jolokiaUrl, branding) {
 
     if (userDetails.username === null) {

diff --git a/hawtio-web/src/main/webapp/app/core/js/corePlugin.ts b/hawtio-web/src/main/webapp/app/core/js/corePlugin.ts
@@ -48,7 +48,7 @@ interface IMyAppScope extends ng.IRootScopeService, ng.IScope {
 
 hawtioPluginLoader.addModule('hawtioCore');
 
-angular.module('hawtioCore', ['bootstrap', 'ngResource', 'ui', 'ui.bootstrap.dialog']).
+angular.module('hawtioCore', ['bootstrap', 'ngResource', 'ui', 'ui.bootstrap.dialog', 'hawtio-ui']).
         config(($routeProvider, $dialogProvider) => {
 
           $dialogProvider.options({

diff --git a/hawtio-web/src/main/webapp/app/ui/js/uiPlugin.ts b/hawtio-web/src/main/webapp/app/ui/js/uiPlugin.ts
@@ -40,8 +40,8 @@ module UI {
         return new UI.JSPlumb();
       //}).directive('connectTo', () => {
       //  return new UI.JSPlumbConnection();
-      }).directive('zeroClipboard', () => {
-        return new UI.ZeroClipboardDirective();
+      }).directive('zeroClipboard', ($parse) => {
+        return UI.ZeroClipboardDirective($parse);
       }).directive('hawtioAutoDropdown', () => {
         return UI.AutoDropDown;
       }).directive('hawtioMessagePanel', () => {

diff --git a/hawtio-web/src/main/webapp/app/ui/js/zeroclipboard.ts b/hawtio-web/src/main/webapp/app/ui/js/zeroclipboard.ts
@@ -1,17 +1,28 @@
 module UI {
 
-  export class ZeroClipboardDirective {
-    public restrict = 'A';
+  export function ZeroClipboardDirective($parse) {
+    return {
+      restrict:'A',
+      link: ($scope, $element, $attr) => {
+        var clip = new (<any>window).ZeroClipboard($element.get(0), {
+          moviePath: "img/ZeroClipboard.swf"
+        });
 
-    public link = ($scope, $element, $attr) => {
-      var clip = new (<any>window).ZeroClipboard($element.get(0), {
-        moviePath: "img/ZeroClipboard.swf"
-      });
+        clip.on('complete', (client, args) => {
 
-      clip.on('complete', (client, args) => {
-        notification('info', "Copied text to clipboard: " + args.text);
-      });
+          if (args.text && angular.isString(args.text)) {
+            notification('info', "Copied text to clipboard: " + args.text.truncate(20));
+          }
+          Core.$apply($scope);
+        });
 
+        if ('useCallback' in $attr) {
+          var func = $parse($attr['useCallback']);
+          if (func) {
+            func($scope, { clip: clip });
+          }
+        }
+      }
     };
   }
 }
diff --git a/hawtio-web/src/main/webapp/css/site-base.css b/hawtio-web/src/main/webapp/css/site-base.css
@@ -99,6 +99,20 @@ a:focus {
   opacity: 1;
 }
 
+#log-panel #copy {
+  position: absolute;
+  right: 23px;
+  bottom: 26px;
+  background: inherit;
+  transition: opacity 1s ease-in-out;
+  opacity: 0.4;
+  color: white;
+  cursor: pointer;
+}
+
+#log-panel #copy:hover {
+  opacity: 1;
+}
 
 #canvas {
   display: inline-block;

diff --git a/hawtio-web/src/main/webapp/index.html b/hawtio-web/src/main/webapp/index.html
@@ -49,17 +49,37 @@
     <script type="text/javascript" src="lib/html5shiv.js"></script>
     <![endif]-->
 
+    <script type="text/ng-template" id="logClipboardTemplate">
+<!--
+<style type="text/css">
+ul li {
+  list-style-type: none;
+}
+span.green {
+  color: green;
+}
+</style>
+<ul>
+-->
+    </script>
+
+
+
   </head>
 
 
   <body>
-
-    <div id="log-panel" style="bottom: 110%">
+    <div id="log-panel" style="bottom: 110%" ng-controller="Core.ConsoleController">
       <div>
         <ul id="log-panel-statements"></ul>
         <div id="close" log-toggler>
           <i class="icon-chevron-up"></i>
         </div>
+        <div id="copy">
+          <i class="icon-copy" title="Click to copy log to clipboard"
+             zero-clipboard
+             use-callback="setHandler(clip)"></i>
+        </div>
       </div>
     </div>