--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/app/components/jvm-info/jvm-memory/jvm-memory.component.js	Fri Sep 08 11:23:07 2017 -0400
@@ -0,0 +1,42 @@
+/**
+ * Copyright 2012-2017 Red Hat, Inc.
+ *
+ * Thermostat is distributed under the GNU General Public License,
+ * version 2 or any later version (with a special exception described
+ * below, commonly known as the "Classpath Exception").
+ *
+ * A copy of GNU General Public License (GPL) is included in this
+ * distribution, in the file COPYING.
+ *
+ * Linking Thermostat code with other modules is making a combined work
+ * based on Thermostat.  Thus, the terms and conditions of the GPL
+ * cover the whole combination.
+ *
+ * As a special exception, the copyright holders of Thermostat give you
+ * permission to link this code with independent modules to produce an
+ * executable, regardless of the license terms of these independent
+ * modules, and to copy and distribute the resulting executable under
+ * terms of your choice, provided that you also meet, for each linked
+ * independent module, the terms and conditions of the license of that
+ * module.  An independent module is a module which is not derived from
+ * or based on Thermostat code.  If you modify Thermostat, you may
+ * extend this exception to your version of the software, but you are
+ * not obligated to do so.  If you do not wish to do so, delete this
+ * exception statement from your version.
+ */
+
+import jvmMemoryController from './jvm-memory.controller.js';
+import service from './jvm-memory.service.js';
+import components from 'shared/components/components.module.js';
+
+export default angular
+  .module('jvmMemoryComponent', [
+    jvmMemoryController,
+    service,
+    components
+  ])
+  .component('jvmMemory', {
+    controller: 'JvmMemoryController',
+    template: require('./jvm-memory.html')
+  })
+  .name;

--- a/src/app/components/jvm-info/jvm-memory/jvm-memory.controller.js	Fri Sep 08 11:22:57 2017 -0400
+++ b/src/app/components/jvm-info/jvm-memory/jvm-memory.controller.js	Fri Sep 08 11:23:07 2017 -0400
@@ -31,22 +31,19 @@
 import service from './jvm-memory.service.js';
 
 class JvmMemoryController {
-  constructor (jvmId, $scope, $interval, jvmMemoryService, metricToBigIntFilter,
+  constructor ($stateParams, $scope, $interval, jvmMemoryService, metricToBigIntFilter,
     bigIntToStringFilter, stringToNumberFilter, scaleBytesService, sanitizeService) {
     'ngInject';
 
-    this.jvmId = jvmId;
-    this.scope = $scope;
-    this.interval = $interval;
-    this.jvmMemoryService = jvmMemoryService;
+    this.jvmId = $stateParams.jvmId;
+    this._interval = $interval;
+    this._jvmMemoryService = jvmMemoryService;
+    this._sanitizeService = sanitizeService;
 
-    this.metricToBigInt = metricToBigIntFilter;
-    this.bigIntToString = bigIntToStringFilter;
-    this.stringToNumber = stringToNumberFilter;
-    this.scaleBytes = scaleBytesService;
-    this.scope.sanitize = sanitizeService.sanitize;
-
-    this.scope.refreshRate = '2000';
+    this._metricToBigInt = metricToBigIntFilter;
+    this._bigIntToString = bigIntToStringFilter;
+    this._stringToNumber = stringToNumberFilter;
+    this._scaleBytes = scaleBytesService;
 
     this.metaspaceData = {
       used: 0,
@@ -62,30 +59,34 @@
 
     this.generationData = {};
 
-    this.scope.$watch('refreshRate', cur => this.setRefreshRate(cur));
+    $scope.$on('$destroy', () => this.cancel());
 
-    this.scope.$on('$destroy', () => this.cancel());
-
-    this.update();
+    this.refreshRate = '2000';
   }
 
   cancel () {
-    if (angular.isDefined(this.refresh)) {
-      this.interval.cancel(this.refresh);
+    if (angular.isDefined(this._refresh)) {
+      this._interval.cancel(this._refresh);
+      delete this._refresh;
     }
   }
 
-  setRefreshRate (val) {
+  set refreshRate (val) {
     this.cancel();
-    if (val > 0) {
-      this.refresh = this.interval(() => this.update(), val);
+    this._refreshRate = parseInt(val);
+    if (this._refreshRate > 0) {
+      this._refresh = this._interval(() => this.update(), this._refreshRate);
       this.update();
     }
   }
 
+  get refreshRate () {
+    return this._refreshRate.toString();
+  }
+
   multichartMetaspace () {
     return new Promise(resolve =>
-      this.jvmMemoryService.getJvmMemory(this.jvmId).then(resp =>
+      this._jvmMemoryService.getJvmMemory(this.jvmId).then(resp =>
         resolve(this.convertMemStat(resp.data.response[0].metaspaceUsed))
       )
     );
@@ -93,7 +94,7 @@
 
   multichartSpace (generationIndex, spaceIndex) {
     return new Promise(resolve =>
-      this.jvmMemoryService.getJvmMemory(this.jvmId).then(resp => {
+      this._jvmMemoryService.getJvmMemory(this.jvmId).then(resp => {
         generationIndex = parseInt(generationIndex);
         spaceIndex = parseInt(spaceIndex);
         let data = resp.data.response[0];
@@ -105,10 +106,10 @@
   }
 
   update () {
-    this.jvmMemoryService.getJvmMemory(this.jvmId).then(resp => {
+    this._jvmMemoryService.getJvmMemory(this.jvmId).then(resp => {
       let data = resp.data.response[0];
 
-      let metaspaceScale = this.scaleBytes.format(data.metaspaceUsed);
+      let metaspaceScale = this._scaleBytes.format(data.metaspaceUsed);
       this.metaspaceData.used = this.convertMemStat(data.metaspaceUsed, metaspaceScale.scale);
       this.metaspaceData.total = this.convertMemStat(data.metaspaceCapacity, metaspaceScale.scale);
       this.metaspaceConfig.units = metaspaceScale.unit;
@@ -129,7 +130,7 @@
         for (let j = 0; j < generation.spaces.length; j++) {
           let space = generation.spaces[j];
 
-          let genScale = this.scaleBytes.format(space.used);
+          let genScale = this._scaleBytes.format(space.used);
 
           if (gen.spaces.hasOwnProperty(space.index)) {
             gen.spaces[space.index].used = this.convertMemStat(space.used, genScale.scale);
@@ -158,11 +159,16 @@
   }
 
   convertMemStat (stat, scale) {
-    let bigInt = this.metricToBigInt(stat, scale);
-    let str = this.bigIntToString(bigInt);
-    let num = this.stringToNumber(str);
+    let bigInt = this._metricToBigInt(stat, scale);
+    let str = this._bigIntToString(bigInt);
+    let num = this._stringToNumber(str);
     return _.ceil(num);
   }
+
+  sanitize (str) {
+    return this._sanitizeService.sanitize(str);
+  }
+
 }
 
 export default angular

--- a/src/app/components/jvm-info/jvm-memory/jvm-memory.controller.spec.js	Fri Sep 08 11:22:57 2017 -0400
+++ b/src/app/components/jvm-info/jvm-memory/jvm-memory.controller.spec.js	Fri Sep 08 11:23:07 2017 -0400
@@ -29,7 +29,7 @@
 
   beforeEach(angular.mock.module('jvmMemory.controller'));
 
-  let scope, interval, memSvc, scaleSvc, promise, ctrl;
+  let scope, interval, memSvc, scaleSvc, promise, ctrl, sanitizeSvc;
   beforeEach(inject($controller => {
     'ngInject';
 
@@ -54,21 +54,24 @@
       })
     };
 
+    sanitizeSvc = {
+      sanitize: sinon.stub().returns('sanitized-mock')
+    };
+
     ctrl = $controller('JvmMemoryController', {
-      jvmId: 'foo-jvmId',
+      $stateParams: { jvmId: 'foo-jvmId' },
       $scope: scope,
       $interval: interval,
       jvmMemoryService: memSvc,
-      scaleBytesService: scaleSvc
+      scaleBytesService: scaleSvc,
+      sanitizeService: sanitizeSvc
     });
 
-    sinon.spy(ctrl, 'setRefreshRate');
     sinon.spy(ctrl, 'update');
     sinon.spy(ctrl, 'cancel');
   }));
 
   afterEach(() => {
-    ctrl.setRefreshRate.restore();
     ctrl.update.restore();
     ctrl.cancel.restore();
   });
@@ -97,31 +100,31 @@
     memSvc.getJvmMemory.should.be.calledWith('foo-jvmId');
   });
 
-  it('should reset interval on refreshRate change', () => {
-    ctrl.should.not.have.ownProperty('refresh');
-    ctrl.setRefreshRate(1);
-    interval.should.be.calledWith(sinon.match.func, sinon.match(1));
-    ctrl.should.have.ownProperty('refresh');
-    ctrl.refresh.should.equal('interval-sentinel');
+  it('should initialize refreshRate to \'2000\'', () => {
+    ctrl.refreshRate.should.equal('2000');
   });
 
-  it('should disable when setRefreshRate is called with a non-positive value', () => {
+  it('should reset interval on refreshRate change', () => {
+    ctrl.should.have.ownProperty('_refresh');
+    ctrl.refreshRate = 1;
+    interval.should.be.calledWith(sinon.match.func, sinon.match(1));
+    ctrl.should.have.ownProperty('_refresh');
+    ctrl._refresh.should.equal('interval-sentinel');
+  });
+
+  it('should disable when set refreshRate is called with a non-positive value', () => {
     ctrl.cancel.should.not.be.called();
-    ctrl.setRefreshRate.should.not.be.called();
     ctrl.update.should.not.be.called();
 
-    ctrl.setRefreshRate(-1);
+    ctrl.refreshRate = -1;
 
     ctrl.cancel.should.be.calledOnce();
-    ctrl.setRefreshRate.should.be.calledOnce(); // the call we just made manually
     ctrl.update.should.not.be.called();
-    ctrl.should.not.have.ownProperty('refresh');
+    ctrl.should.not.have.ownProperty('_refresh');
   });
 
   it('should call controller#update() on refresh', () => {
-    scope.$watch.should.be.calledWith(sinon.match('refreshRate'), sinon.match.func);
-    let f = scope.$watch.args[0][1];
-    f(1);
+    ctrl.refreshRate = 1;
     let func = interval.args[0][0];
     let callCount = ctrl.update.callCount;
     func();
@@ -134,14 +137,14 @@
     });
 
     it('should cancel refresh', () => {
-      ctrl.refresh = 'interval-sentinel';
+      ctrl._refresh = 'interval-sentinel';
       let func = scope.$on.args[0][1];
       func();
       interval.cancel.should.be.calledWith('interval-sentinel');
     });
 
     it('should do nothing if refresh is undefined', () => {
-      ctrl.refresh = undefined;
+      ctrl._refresh = undefined;
       let func = scope.$on.args[0][1];
       func();
       interval.cancel.should.not.be.called();
@@ -322,4 +325,11 @@
     });
   });
 
+  it('should delegate sanitization to sanitizeService', () => {
+    sanitizeSvc.sanitize.should.not.be.called();
+    ctrl.sanitize('foo').should.equal('sanitized-mock');
+    sanitizeSvc.sanitize.should.be.calledOnce();
+    sanitizeSvc.sanitize.should.be.calledWith('foo');
+  });
+
 });

--- a/src/app/components/jvm-info/jvm-memory/jvm-memory.html	Fri Sep 08 11:22:57 2017 -0400
+++ b/src/app/components/jvm-info/jvm-memory/jvm-memory.html	Fri Sep 08 11:23:07 2017 -0400
@@ -3,7 +3,7 @@
   <div class="row" style="margin-top:2vh">
     <div class="col-xs-12 col-md-3">
       <label for="refreshCombo" class="label label-info" translate>jvmMemory.REFRESH_RATE_LABEL</label>
-      <select name="refreshCombo" class="combobox form-control" ng-model="refreshRate">
+      <select name="refreshCombo" class="combobox form-control" ng-model="$ctrl.refreshRate">
         <option value="-1" translate>jvmMemory.refresh.DISABLED</option>
         <option value="1000" translate="jvmMemory.refresh.SECONDS" translate-values="{ SECONDS: 1 }" translate-interpolation="messageformat"></option>
         <option value="2000" translate="jvmMemory.refresh.SECONDS" translate-values="{ SECONDS: 2, DEFAULT: true }" translate-interpolation="messageformat"></option>
@@ -23,8 +23,8 @@
             <label class="card-pf-title" translate>jvmMemory.METASPACE</label>
           </div>
           <div class="card-pf-body">
-            <mc-add class="pull-right" svc-name="{{ctrl.jvmId}}-metaspace" get-fn="ctrl.multichartMetaspace()"></mc-add>
-            <pf-donut-pct-chart id="metaspaceChart" config="ctrl.metaspaceConfig" data="ctrl.metaspaceData"></pf-donut-pct-chart>
+            <mc-add class="pull-right" svc-name="{{$ctrl.jvmId}}-metaspace" get-fn="$ctrl.multichartMetaspace()"></mc-add>
+            <pf-donut-pct-chart id="metaspaceChart" config="$ctrl.metaspaceConfig" data="$ctrl.metaspaceData"></pf-donut-pct-chart>
           </div>
         </div>
       </div>
@@ -36,7 +36,7 @@
   <div class="row row-cards-pf">
     <div class="container-fluid container-cards-pf">
 
-        <div ng-repeat="(index, generation) in ctrl.generationData" class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
+        <div ng-repeat="(index, generation) in $ctrl.generationData" class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
           <div class="card-pf card-pf-view">
             <div class="card-pf-heading">
               <label class="card-pf-title" translate="jvmMemory.COLLECTOR" translate-values="{ name: generation.name, collector: generation.collector }"></label>
@@ -44,10 +44,10 @@
             <div ng-repeat="space in generation.spaces">
               <div class="card-pf-body text-center">
                 <label translate="jvmMemory.SPACE" translate-values="{ index: space.index }"></label>
-                <mc-add class="pull-right" svc-name="{{ctrl.jvmId}}-{{sanitize(generation.name)}}-space{{space.index}}"
-                                           get-fn="ctrl.multichartSpace(index, space.index)"></mc-add>
+                <mc-add class="pull-right" svc-name="{{$ctrl.jvmId}}-{{sanitize(generation.name)}}-space{{space.index}}"
+                                           get-fn="$ctrl.multichartSpace(index, space.index)"></mc-add>
                 <pf-donut-pct-chart id="gen-{{gen.index}}-space-{{space.index}}"
-                  config="ctrl.spaceConfigs['gen-' + generation.index + '-space-' + space.index]" data="space"></pf-donut-pct-chart>
+                  config="$ctrl.spaceConfigs['gen-' + generation.index + '-space-' + space.index]" data="space"></pf-donut-pct-chart>
               </div>
             </div>
           </div>

--- a/src/app/components/jvm-info/jvm-memory/jvm-memory.module.js	Fri Sep 08 11:22:57 2017 -0400
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,38 +0,0 @@
-/**
- * Copyright 2012-2017 Red Hat, Inc.
- *
- * Thermostat is distributed under the GNU General Public License,
- * version 2 or any later version (with a special exception described
- * below, commonly known as the "Classpath Exception").
- *
- * A copy of GNU General Public License (GPL) is included in this
- * distribution, in the file COPYING.
- *
- * Linking Thermostat code with other modules is making a combined work
- * based on Thermostat.  Thus, the terms and conditions of the GPL
- * cover the whole combination.
- *
- * As a special exception, the copyright holders of Thermostat give you
- * permission to link this code with independent modules to produce an
- * executable, regardless of the license terms of these independent
- * modules, and to copy and distribute the resulting executable under
- * terms of your choice, provided that you also meet, for each linked
- * independent module, the terms and conditions of the license of that
- * module.  An independent module is a module which is not derived from
- * or based on Thermostat code.  If you modify Thermostat, you may
- * extend this exception to your version of the software, but you are
- * not obligated to do so.  If you do not wish to do so, delete this
- * exception statement from your version.
- */
-
-import JvmMemoryController from './jvm-memory.controller.js';
-import service from './jvm-memory.service.js';
-import components from 'shared/components/components.module.js';
-
-export default angular
-  .module('jvmMemory', [
-    JvmMemoryController,
-    service,
-    components
-  ])
-  .name;

--- a/src/app/components/jvm-info/jvm-memory/jvm-memory.routing.js	Fri Sep 08 11:22:57 2017 -0400
+++ b/src/app/components/jvm-info/jvm-memory/jvm-memory.routing.js	Fri Sep 08 11:23:07 2017 -0400
@@ -30,20 +30,13 @@
 
   $stateProvider.state('jvmInfo.jvmMemory', {
     url: '/memory',
-    controller: 'JvmMemoryController as ctrl',
-    templateProvider: $q => {
-      'ngInject';
-      return $q(resolve =>
-        require.ensure([], () => resolve(require('./jvm-memory.html'))
-        )
-      );
-    },
+    component: 'jvmMemory',
     resolve: {
-      loadJvmMemory: (loadJvmInfo, $q, $ocLazyLoad) => {
+      lazyLoad: ($q, $ocLazyLoad) => {
         'ngInject';
         return $q(resolve => {
-          require.ensure(['./jvm-memory.module.js'], () => {
-            let module = require('./jvm-memory.module.js');
+          require.ensure(['./jvm-memory.component.js'], () => {
+            let module = require('./jvm-memory.component.js');
             $ocLazyLoad.load({ name: module.default });
             resolve(module);
           });

--- a/src/app/components/jvm-info/jvm-memory/jvm-memory.routing.spec.js	Fri Sep 08 11:22:57 2017 -0400
+++ b/src/app/components/jvm-info/jvm-memory/jvm-memory.routing.spec.js	Fri Sep 08 11:23:07 2017 -0400
@@ -55,33 +55,17 @@
       args[1].url.should.equal('/memory');
     });
 
-    it('template provider should return jvm-memory.html', done => {
-      let providerFn = args[1].templateProvider[1];
-      providerFn.should.be.a.Function();
-      providerFn(q);
+    it('resolve should load jvm-memory module', done => {
+      let resolveFn = args[1].resolve.lazyLoad[2];
+      resolveFn.should.be.a.Function();
+      resolveFn(q, ocLazyLoad);
       q.should.be.calledOnce();
 
       let deferred = q.args[0][0];
       deferred.should.be.a.Function();
 
       let resolve = sinon.stub().callsFake(val => {
-        val.should.equal(require('./jvm-memory.html'));
-        done();
-      });
-      deferred(resolve);
-    });
-
-    it('resolve should load jvm-memory module', done => {
-      let resolveFn = args[1].resolve.loadJvmMemory[3];
-      resolveFn.should.be.a.Function();
-      resolveFn({}, q, ocLazyLoad);
-      q.should.be.calledOnce();
-
-      let deferred = q.args[0][0];
-      deferred.should.be.a.Function();
-
-      let resolve = sinon.stub().callsFake(val => {
-        let mod = require('./jvm-memory.module.js');
+        let mod = require('./jvm-memory.component.js');
         ocLazyLoad.load.should.be.calledWith({ name: mod.default });
         val.should.equal(mod);
         done();