Mercurial > hg > thermostat-ng > web-client

changeset 214:b1248ac0b1af

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Remove $scope from jvm-list Reviewed-by: jkang Review-thread: http://icedtea.classpath.org/pipermail/thermostat/2017-September/025054.html
author Andrew Azores <aazores@redhat.com>
date Mon, 18 Sep 2017 14:12:07 -0400
parents c6f39f7d58e0
children 2554d338104f
files src/app/components/jvm-list/jvm-list.controller.js src/app/components/jvm-list/jvm-list.controller.spec.js src/app/components/jvm-list/jvm-list.html
diffstat 3 files changed, 83 insertions(+), 85 deletions(-) [+]
line wrap: on
line diff
--- a/src/app/components/jvm-list/jvm-list.controller.js	Mon Sep 18 14:11:59 2017 -0400
+++ b/src/app/components/jvm-list/jvm-list.controller.js	Mon Sep 18 14:12:07 2017 -0400
@@ -31,40 +31,38 @@
 import systemInfoService from 'components/system-info/system-info.service.js';
 
 class JvmListController {
-  constructor (jvmListService, systemInfoService, $scope, $location, $timeout, $translate) {
+  constructor (jvmListService, systemInfoService, $location, $timeout, $translate) {
     'ngInject';
     this.jvmListService = jvmListService;
     this.systemInfoService = systemInfoService;
-    this.scope = $scope;
     this.location = $location;
     this.timeout = $timeout;
     this.translate = $translate;
     this.systemsOpen = {};
 
-    $scope.pageConfig = { showPaginationControls: false };
-    $scope.sortConfig = {};
-    $scope.filterConfig = {};
-    $scope.listConfig = {
+    this.pageConfig = { showPaginationControls: false };
+    this.sortConfig = {};
+    this.filterConfig = {};
+    this.listConfig = {
       showSelectBox: false,
       useExpandingRows: true,
       onClick: item => $location.hash(this.changeLocationHash(item))
     };
-    $scope.jvmConfig = {
+    this.jvmConfig = {
       showSelectBox: false,
       useExpandingRows: false
     };
 
-    // Settings for pfPagination
-    $scope.pageNumber = 1;
-    $scope.pageSize = 10;
-
-    $scope.emptyStateConfig = {
+    this.emptyStateConfig = {
       icon: 'pficon-warning-triangle-o',
     };
-    $translate('jvmList.ERR_TITLE').then(s => $scope.emptyStateConfig.title = s);
-    $translate('jvmList.ERR_MESSAGE').then(s => $scope.emptyStateConfig.info = s);
+  }
 
-    $location.hash('');
+  $onInit () {
+    this.translate('jvmList.ERR_TITLE').then(s => this.emptyStateConfig.title = s);
+    this.translate('jvmList.ERR_MESSAGE').then(s => this.emptyStateConfig.info = s);
+
+    this.location.hash('');
     this.aliveOnly = true;
     let aliveOnlySwitch = angular.element('#aliveOnlyState');
     aliveOnlySwitch.bootstrapSwitch();
@@ -111,8 +109,8 @@
   }
 
   loadData () {
-    this.scope.allItems = [];
-    this.scope.items = this.scope.allItems;
+    this.allItems = [];
+    this.items = this.allItems;
     this.jvmListService.getSystems(this.aliveOnly).then(
       resp => {
         this.showErr = false;
@@ -122,7 +120,7 @@
           this.systemsOpen[system.systemId] = false;
           this.systemInfoService.getSystemInfo(system.systemId).then(
             resp => {
-              this.scope.allItems.push({
+              this.allItems.push({
                 systemId: system.systemId,
                 hostname: resp.data.response[0].hostname,
                 jvms: system.jvms,
@@ -138,23 +136,23 @@
         if (this.systems.length === 1) {
           this.systemsOpen[this.systems[0].systemId] = true;
         }
-        this.scope.pageConfig.numTotalItems = this.scope.allItems.length;
-        this.scope.pageConfig.pageSize = this.scope.allItems.length;
-        this.scope.pageConfig.pageNumber = 1;
-        this.scope.listConfig.itemsAvailable = true;
-        this.scope.toolbarConfig.filterConfig.resultsCount = this.systems.length;
+        this.pageConfig.numTotalItems = this.allItems.length;
+        this.pageConfig.pageSize = this.allItems.length;
+        this.pageConfig.pageNumber = 1;
+        this.listConfig.itemsAvailable = true;
+        this.toolbarConfig.filterConfig.resultsCount = this.systems.length;
       },
       () => {
-        this.scope.listConfig.itemsAvailable = false;
-        this.scope.pageConfig.pageSize = 0;
-        this.scope.pageConfig.pageNumber = 0;
+        this.listConfig.itemsAvailable = false;
+        this.pageConfig.pageSize = 0;
+        this.pageConfig.pageNumber = 0;
         this.showErr = true;
       }
     );
   }
 
   constructToolbarSettings () {
-    this.scope.filterConfig = {
+    this.filterConfig = {
       fields: [
         {
           id: 'hostname',
@@ -165,20 +163,20 @@
           filterType: 'text'
         }
       ],
-      resultsCount: this.scope.items.length,
-      totalCount: this.scope.allItems.length,
+      resultsCount: this.items.length,
+      totalCount: this.allItems.length,
       appliedFilters: [],
       onFilterChange: filters => {
         this.applyFilters(filters);
-        this.scope.toolbarConfig.filterConfig.resultsCount = this.scope.items.length;
+        this.toolbarConfig.filterConfig.resultsCount = this.items.length;
       }
     };
-    this.translate('jvmList.HOSTNAME_TITLE').then(s => this.scope.filterConfig.fields[0].title = s);
-    this.translate('jvmList.filterConfig.HOSTNAME_PLACEHOLDER').then(s => this.scope.filterConfig.fields[0].placeholder = s);
-    this.translate('jvmList.filterConfig.JVM_NAME_TITLE').then(s => this.scope.filterConfig.fields[1].title = s);
-    this.translate('jvmList.filterConfig.JVM_NAME_PLACEHOLDER').then(s => this.scope.filterConfig.fields[1].placeholder = s);
+    this.translate('jvmList.HOSTNAME_TITLE').then(s => this.filterConfig.fields[0].title = s);
+    this.translate('jvmList.filterConfig.HOSTNAME_PLACEHOLDER').then(s => this.filterConfig.fields[0].placeholder = s);
+    this.translate('jvmList.filterConfig.JVM_NAME_TITLE').then(s => this.filterConfig.fields[1].title = s);
+    this.translate('jvmList.filterConfig.JVM_NAME_PLACEHOLDER').then(s => this.filterConfig.fields[1].placeholder = s);
 
-    this.scope.sortConfig = {
+    this.sortConfig = {
       fields: [
         {
           id: 'name',
@@ -197,13 +195,13 @@
         this.sortItems();
       }
     };
-    this.translate('jvmList.HOSTNAME_TITLE').then(s => this.scope.sortConfig.fields[0].title = s);
-    this.translate('jvmList.sortConfig.TIME_CREATED_TITLE').then(s => this.scope.sortConfig.fields[1].title = s);
-    this.translate('jvmList.sortConfig.NUM_JVMS_TITLE').then(s => this.scope.sortConfig.fields[2].title = s);
+    this.translate('jvmList.HOSTNAME_TITLE').then(s => this.sortConfig.fields[0].title = s);
+    this.translate('jvmList.sortConfig.TIME_CREATED_TITLE').then(s => this.sortConfig.fields[1].title = s);
+    this.translate('jvmList.sortConfig.NUM_JVMS_TITLE').then(s => this.sortConfig.fields[2].title = s);
 
-    this.scope.toolbarConfig = {
-      filterConfig: this.scope.filterConfig,
-      sortConfig: this.scope.sortConfig
+    this.toolbarConfig = {
+      filterConfig: this.filterConfig,
+      sortConfig: this.sortConfig
     };
   }
 
@@ -242,35 +240,35 @@
   }
 
   applyFilters (filters) {
-    this.scope.items = [];
+    this.items = [];
     if (filters && filters.length > 0) {
-      this.scope.allItems.forEach(item => {
+      this.allItems.forEach(item => {
         if (this.matchesFilters(item, filters)) {
-          this.scope.items.push(item);
+          this.items.push(item);
         }
       });
     } else {
-      this.scope.items = this.scope.allItems;
+      this.items = this.allItems;
     }
   }
 
   compareFn (item1, item2) {
     let compValue = 0;
-    if (this.scope.sortConfig.currentField.id === 'name') {
+    if (this.sortConfig.currentField.id === 'name') {
       compValue = item1.hostname.localeCompare(item2.systemId);
-    } else if (this.scope.sortConfig.currentField.id === 'timeCreated') {
+    } else if (this.sortConfig.currentField.id === 'timeCreated') {
       compValue = item1.timeCreated.$numberLong > item2.timeCreated.$numberLong ? 1 : -1;
-    } else if (this.scope.sortConfig.currentField.id === 'numJvms') {
+    } else if (this.sortConfig.currentField.id === 'numJvms') {
       compValue = item1.jvms.length > item2.jvms.length ? 1 : -1;
     }
-    if (!this.scope.sortConfig.isAscending) {
+    if (!this.sortConfig.isAscending) {
       compValue = compValue * -1;
     }
     return compValue;
   }
 
   sortItems () {
-    this.scope.items.sort((item1, item2) => this.compareFn(item1, item2));
+    this.items.sort((item1, item2) => this.compareFn(item1, item2));
   }
 
 }
--- a/src/app/components/jvm-list/jvm-list.controller.spec.js	Mon Sep 18 14:11:59 2017 -0400
+++ b/src/app/components/jvm-list/jvm-list.controller.spec.js	Mon Sep 18 14:12:07 2017 -0400
@@ -29,7 +29,7 @@
 
   beforeEach(angular.mock.module('jvmList.controller'));
 
-  let controller, jvmListSvc, systemInfoSvc, scope, promise, location, timeout, translate;
+  let rootScope, controller, jvmListSvc, systemInfoSvc, promise, location, timeout, translate;
 
   let fooItem = {
     hostname: 'foo',
@@ -78,11 +78,11 @@
 
   beforeEach(inject(($q, $rootScope, $controller) => {
     'ngInject';
+    rootScope = $rootScope;
     sinon.stub(angular, 'element').withArgs('#aliveOnlyState').returns({
       bootstrapSwitch: sinon.spy(),
       on: sinon.spy()
     });
-    scope = $rootScope;
     promise = $q.defer();
     location = {
       hash: sinon.stub().returns('')
@@ -101,18 +101,18 @@
     controller = $controller('JvmListController', {
       jvmListService: jvmListSvc,
       systemInfoService: systemInfoSvc,
-      $scope: scope,
       $location: location,
       $timeout: timeout,
       $translate: translate
     });
+    controller.$onInit();
     sinon.spy(controller, 'applyFilters');
     sinon.spy(controller, 'changeLocationHash');
     sinon.spy(controller, 'compareFn');
     sinon.spy(controller, 'matchesFilter');
     sinon.spy(controller, 'matchesFilters');
     sinon.spy(controller, 'sortItems');
-    sinon.spy(scope.items, 'sort');
+    sinon.spy(controller.items, 'sort');
   }));
 
   afterEach(() => {
@@ -125,7 +125,7 @@
 
   describe('listConfig', () => {
     it('should use a fn (changeLocationHash) for onClick attribute', () => {
-      let fn = scope.listConfig.onClick;
+      let fn = controller.listConfig.onClick;
       fn.should.be.a.Function();
       fn('');
       controller.changeLocationHash.should.be.calledOnce();
@@ -201,7 +201,7 @@
         ]
       };
       promise.resolve({ data: data });
-      scope.$apply();
+      rootScope.$apply();
       controller.should.have.ownProperty('systems');
       controller.systems.should.deepEqual(data.response);
       controller.showErr.should.equal(false);
@@ -209,7 +209,7 @@
         foo: false,
         bar: false
       });
-      scope.listConfig.itemsAvailable = true;
+      controller.listConfig.itemsAvailable = true;
       done();
     });
 
@@ -225,12 +225,12 @@
         ]
       };
       promise.resolve({ data: data });
-      scope.$apply();
+      rootScope.$apply();
       controller.systemsOpen.should.deepEqual({
         foo: false,
         bar: false
       });
-      scope.listConfig.itemsAvailable = true;
+      controller.listConfig.itemsAvailable = true;
       done();
     });
 
@@ -243,28 +243,28 @@
         ]
       };
       promise.resolve({ data: data });
-      scope.$apply();
+      rootScope.$apply();
       controller.systemsOpen.should.deepEqual({
         foo: true
       });
-      scope.listConfig.itemsAvailable = true;
+      controller.listConfig.itemsAvailable = true;
       done();
     });
 
     it('should set error flag when service rejects', done => {
       promise.reject();
-      scope.$apply();
+      rootScope.$apply();
       controller.should.have.ownProperty('showErr');
       controller.showErr.should.equal(true);
-      scope.listConfig.itemsAvailable = false;
+      controller.listConfig.itemsAvailable = false;
       done();
     });
   });
 
   describe('constructToolbarSettings', () => {
     it('should use a function for filterConfig.onFilterChange', () => {
-      scope.items.length = 2;
-      let fn = scope.filterConfig.onFilterChange;
+      controller.items.length = 2;
+      let fn = controller.filterConfig.onFilterChange;
       fn.should.be.a.Function();
       let filter = {
         id: 'hostname',
@@ -273,11 +273,11 @@
       };
       fn(filter);
       controller.applyFilters.should.be.calledOnce();
-      scope.toolbarConfig.filterConfig.resultsCount.should.equal(2);
+      controller.toolbarConfig.filterConfig.resultsCount.should.equal(2);
     });
 
     it('should use fn sortItems() for sortConfig.onSortChange', () => {
-      let fn = scope.sortConfig.onSortChange;
+      let fn = controller.sortConfig.onSortChange;
       fn.should.be.a.Function();
       fn();
       controller.sortItems.should.be.calledOnce();
@@ -339,29 +339,29 @@
     });
 
     it('applyFilters should delegate filtering to matchesFilters', () => {
-      scope.allItems = [fooItem, barbazItem];
+      controller.allItems = [fooItem, barbazItem];
       controller.applyFilters(filters);
       controller.matchesFilters.should.be.calledTwice();
-      scope.items[0].should.equal(scope.allItems[0]);
-      scope.items.length.should.equal(1);
+      controller.items[0].should.equal(controller.allItems[0]);
+      controller.items.length.should.equal(1);
     });
 
     it('sortItems should sort the array using the compareFn', () => {
-      controller.scope.sortConfig = generateSortConfig(true, 'hostname');
-      scope.items = [fooItem, barbazItem];
+      controller.sortConfig = generateSortConfig(true, 'hostname');
+      controller.items = [fooItem, barbazItem];
       controller.sortItems();
       controller.compareFn.should.be.calledOnce();
     });
 
     describe('compareFn', () => {
       it('compareFn should compare hostnames', () => {
-        controller.scope.sortConfig = generateSortConfig(true, 'name');
+        controller.sortConfig = generateSortConfig(true, 'name');
         let result = controller.compareFn(fooItem, barbazItem);
         result.should.equal(1);
       });
 
       it('compareFn should compare by timeCreated', () => {
-        controller.scope.sortConfig = generateSortConfig(true, 'timeCreated');
+        controller.sortConfig = generateSortConfig(true, 'timeCreated');
         let result = controller.compareFn(fooItem, barbazItem);
         result.should.equal(1);
 
@@ -370,7 +370,7 @@
       });
 
       it('compareFn should compare by numJvms', () => {
-        controller.scope.sortConfig = generateSortConfig(true, 'numJvms');
+        controller.sortConfig = generateSortConfig(true, 'numJvms');
 
         let result = controller.compareFn(fooItem, barbazItem);
         result.should.equal(-1);
@@ -380,8 +380,8 @@
       });
 
       it('compareFn should allow for descending order', () => {
-        controller.scope.sortConfig = generateSortConfig(false, 'numJvms');
-        scope.sortConfig.currentField.id = 'numJvms';
+        controller.sortConfig = generateSortConfig(false, 'numJvms');
+        controller.sortConfig.currentField.id = 'numJvms';
         let result = controller.compareFn(fooItem, barbazItem);
         result.should.equal(1);
 
@@ -390,8 +390,8 @@
       });
 
       it('compareFn should return 0 if an invalid field id is supplied', () => {
-        controller.scope.sortConfig = generateSortConfig(true, 'numJvms');
-        scope.sortConfig.currentField.id = 'fakeId';
+        controller.sortConfig = generateSortConfig(true, 'numJvms');
+        controller.sortConfig.currentField.id = 'fakeId';
         let result = controller.compareFn(fooItem, barbazItem);
         result.should.equal(0);
       });
--- a/src/app/components/jvm-list/jvm-list.html	Mon Sep 18 14:11:59 2017 -0400
+++ b/src/app/components/jvm-list/jvm-list.html	Mon Sep 18 14:12:07 2017 -0400
@@ -10,13 +10,13 @@
       <button type="button" class="btn btn-default" id="refreshButton" ng-click="$ctrl.loadData()"><span class="fa fa-refresh"></span></button>
     </div>
     <div class="pfToolbar col-md-12">
-      <pf-toolbar id="jvmListToolbar" config="toolbarConfig"></pf-toolbar>
+      <pf-toolbar id="jvmListToolbar" config="$ctrl.toolbarConfig"></pf-toolbar>
     </div>
     <div class="pfListView col-md-12">
-      <pf-list-view config="listConfig"
-                    items="items"
-                    page-config="pageConfig"
-                    empty-state-config="emptyStateConfig">
+      <pf-list-view config="$ctrl.listConfig"
+                    items="$ctrl.items"
+                    page-config="$ctrl.pageConfig"
+                    empty-state-config="$ctrl.emptyStateConfig">
         <div class="list-view-pf-left">
           <span class="pficon pficon-screen list-view-pf-icon-med"></span>
         </div>
@@ -45,7 +45,7 @@
                 custom-scope="{ systemId: $parent.item.systemId }"
                 items="$parent.item.jvms"
                 page-config="$parent.item.pageConfig"
-                config="jvmConfig">
+                config="$ctrl.jvmConfig">
 
             <div class="list-view-pf-left">
               <span class="pficon pficon-virtual-machine list-view-pf-icon-med"></span>