Fix SoL and KVM refresh bug

Clicking the refresh button in the app header on the SoL and
KVM pages would fail to reload because the wrong element reference
is passed to the contructor after the reload. Angular recommends
using directives for any DOM manipulation.

- Use the $element ref availble in serial-console.js directive to
  select DOM element to open the terminal
- Switch kvm controller to directive to be able to use element ref
  in the link function to select DOM element to pass as target

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Ia7391e42bf335b8c3558d25df15c052db245ee3d
diff --git a/app/server-control/directives/kvm-console.js b/app/server-control/directives/kvm-console.js
new file mode 100644
index 0000000..224e5d2
--- /dev/null
+++ b/app/server-control/directives/kvm-console.js
@@ -0,0 +1,60 @@
+/**
+ * Directive for KVM (Kernel-based Virtual Machine)
+ *
+ * @module app/serverControl
+ * @exports kvmConsole
+ * @name kvmConsole
+ */
+
+import RFB from '@novnc/novnc/core/rfb.js';
+
+window.angular && (function(angular) {
+  'use strict';
+
+  angular.module('app.serverControl').directive('kvmConsole', [
+    '$log', '$location',
+    function($log, $location) {
+      return {
+        restrict: 'E', template: require('./kvm-console.html'),
+            link: function(scope, element) {
+              var rfb;
+
+              element.on('$destroy', function() {
+                if (rfb) {
+                  rfb.disconnect();
+                }
+              });
+
+              function sendCtrlAltDel() {
+                rfb.sendCtrlAltDel();
+                return false;
+              };
+
+              function connected(e) {
+                $log.debug('RFB Connected');
+              }
+              function disconnected(e) {
+                $log.debug('RFB disconnected');
+              }
+
+              var host = $location.host();
+              var port = $location.port();
+              var target = element[0].firstElementChild;
+              try {
+                rfb = new RFB(
+                    target, 'wss://' + host + ':' + port + '/kvm/0', {});
+
+                rfb.addEventListener('connect', connected);
+                rfb.addEventListener('disconnect', disconnected);
+              } catch (exc) {
+                $log.error(exc);
+                updateState(
+                    null, 'fatal', null,
+                    'Unable to create RFB client -- ' + exc);
+                return;  // don't continue trying to connect
+              };
+            }
+      }
+    }
+  ]);
+})(window.angular);