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

5 files changed, 66 insertions, 61 deletions

diff --git a/app/server-control/controllers/kvm-controller.html b/app/server-control/controllers/kvm-controller.html
index 40e4d97..2b30c99 100644
--- a/app/server-control/controllers/kvm-controller.html
+++ b/app/server-control/controllers/kvm-controller.html
@@ -1,5 +1 @@
-<div id="noVNC_container">
-    <div id="noVNC_status_bar">
-        <div id="noVNC_left_dummy_elem"></div>
-    </div>
-</div>
+<kvm-console></kvm-console>
\ No newline at end of file
diff --git a/app/server-control/controllers/kvm-controller.js b/app/server-control/controllers/kvm-controller.js
deleted file mode 100644
index a43f169..0000000
--- a/app/server-control/controllers/kvm-controller.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * Controller for KVM (Kernel-based Virtual Machine)
- *
- * @module app/serverControl
- * @exports kvmController
- * @name kvmController
- */
-
-import RFB from '@novnc/novnc/core/rfb.js';
-
-window.angular && (function(angular) {
-  'use strict';
-
-  angular.module('app.serverControl').controller('kvmController', [
-    '$scope', '$location', '$log',
-    function($scope, $location, $log) {
-      var rfb;
-
-      $scope.$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 =
-          angular.element(document.querySelector('#noVNC_container'))[0];
-
-      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
-      };
-    }
-  ]);
-})(angular);
diff --git a/app/server-control/directives/kvm-console.html b/app/server-control/directives/kvm-console.html
new file mode 100644
index 0000000..40e4d97
--- /dev/null
+++ b/app/server-control/directives/kvm-console.html
@@ -0,0 +1,5 @@
+<div id="noVNC_container">
+    <div id="noVNC_status_bar">
+        <div id="noVNC_left_dummy_elem"></div>
+    </div>
+</div>
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);
diff --git a/app/server-control/index.js b/app/server-control/index.js
index 8bf03b4..8b8b215 100644
--- a/app/server-control/index.js
+++ b/app/server-control/index.js
@@ -50,7 +50,6 @@ window.angular && (function(angular) {
               })
               .when('/server-control/kvm', {
                 'template': require('./controllers/kvm-controller.html'),
-                'controller': 'kvmController',
                 authenticated: true
               })
               .when('/server-control/virtual-media', {