Acknowledges: use tooltip instead inner table.

2016-07-31 11:17:22 +03:00
parent 78ca95a8de
commit 24969cd560
5 changed files with 185 additions and 98 deletions
--- a/src/panel-triggers/ack-tooltip.directive.js
+++ b/src/panel-triggers/ack-tooltip.directive.js
@@ -0,0 +1,113 @@
+import angular from 'angular';
+import $ from 'jquery';
+import Drop from 'tether-drop';
+
+/** @ngInject */
+angular
+  .module('grafana.directives')
+  .directive('ackTooltip', function($sanitize, $compile) {
+    let buttonTemplate = '<a bs-tooltip="\'Acknowledges ({{trigger.acknowledges.length}})\'"' +
+                          '<i ng-class="' +
+                            "{'fa fa-comments': trigger.acknowledges.length, " +
+                            "'fa fa-comments-o': !trigger.acknowledges.length, " +
+                          '}"></i></a>';
+
+    return {
+      scope: {
+        ack: "=",
+        trigger: "=",
+        onAck: "=",
+        context: "="
+      },
+      link: function(scope, element) {
+        let acknowledges = scope.ack;
+        let $button = $(buttonTemplate);
+        $button.appendTo(element);
+
+        $button.click(function() {
+          let tooltip = '<div>';
+
+          if (acknowledges && acknowledges.length) {
+            tooltip += '<table class="table"><thead><tr>' +
+                        '<th class="ack-time">Time</th>' +
+                        '<th class="ack-user">User</th>' +
+                        '<th class="ack-comments">Comments</th>' +
+                        '</tr></thead><tbody>';
+            for (let ack of acknowledges) {
+              tooltip += '<tr><td>' + ack.time + '</td>' +
+                         '<td>' + ack.user + '</td>' +
+                         '<td>' + ack.message + '</td></tr>';
+            }
+            tooltip += '</tbody></table>';
+          } else {
+            tooltip += 'Add acknowledge';
+          }
+
+          let addAckButtonTemplate = '<div class="ack-add-button">' +
+                                       '<button id="add-acknowledge-btn"' +
+                                         'class="btn btn-mini btn-inverse gf-form-button">' +
+                                         '<i class="fa fa-plus"></i>' +
+                                       '</button></div>';
+          tooltip += addAckButtonTemplate;
+          tooltip += '</div>';
+
+          let drop = new Drop({
+            target: element[0],
+            content: tooltip,
+            position: "bottom left",
+            classes: 'drop-popover ack-tooltip',
+            openOn: 'hover',
+            hoverCloseDelay: 500,
+            tetherOptions: {
+              constraints: [{to: 'window', pin: true, attachment: "both"}]
+            }
+          });
+
+          drop.open();
+          drop.on('close', closeDrop);
+
+          $('#add-acknowledge-btn').on('click', onAddAckButtonClick);
+
+          function onAddAckButtonClick() {
+            let inputTemplate = '<div class="ack-input-group">' +
+                                  '<input type="text" id="ack-message">' +
+                                  '<button id="send-ack-button"' +
+                                    'class="btn btn-mini btn-inverse gf-form-button">' +
+                                    'Acknowledge </button>' +
+                                  '<button id="cancel-ack-button"' +
+                                    'class="btn btn-mini btn-inverse gf-form-button">' +
+                                    'Cancel' +
+                                  '</button></input></div>';
+
+            let $input = $(inputTemplate);
+            let $addAckButton = $('.ack-tooltip .ack-add-button');
+            $addAckButton.replaceWith($input);
+            $('.ack-tooltip #cancel-ack-button').on('click', onAckCancelButtonClick);
+            $('.ack-tooltip #send-ack-button').on('click', onAckSendlButtonClick);
+          }
+
+          function onAckCancelButtonClick() {
+            $('.ack-tooltip .ack-input-group').replaceWith(addAckButtonTemplate);
+            $('#add-acknowledge-btn').on('click', onAddAckButtonClick);
+          }
+
+          function onAckSendlButtonClick() {
+            let message = $('.ack-tooltip #ack-message')[0].value;
+            let onAck = scope.onAck.bind(scope.context);
+            onAck(scope.trigger, message).then(() => {
+              closeDrop();
+            });
+          }
+
+          function closeDrop() {
+            setTimeout(function() {
+              drop.destroy();
+            });
+          }
+
+        });
+
+        $compile(element.contents())(scope);
+      }
+    };
+  });