Fix container page

h5c/vic/src/vic-webapp/package.json

@@ -37,9 +37,9 @@
     "@angular/platform-browser": "^6.0.3",
     "@angular/platform-browser-dynamic": "^6.0.3",
     "@angular/router": "^6.0.3",
-    "@clr/angular": "0.12.10",
-    "@clr/icons": "^0.12.0",
-    "@clr/ui": "^0.12.0",
+    "@clr/angular": "^0.13.11",
+    "@clr/icons": "^0.13.11",
+    "@clr/ui": "^0.13.11",
     "@webcomponents/custom-elements": "^1.1.3",
     "classlist.js": "^1.1.20150312",
     "core-js": "^2.5.4",

h5c/vic/src/vic-webapp/src/app/app.module.ts

@@ -45,7 +45,7 @@ import { VicVmViewService } from './services/vm-view.service';
     AppRoutingModule,
     HttpModule,
     HttpClientModule,
-    ClarityModule.forRoot()
+    ClarityModule
   ],
   declarations: [
     AppComponent,

h5c/vic/src/vic-webapp/src/app/container-view/container-view.component.spec.ts

@@ -101,7 +101,7 @@ describe('VicContainerViewComponent', () => {
                 VicOvaVerificationComponent
             ],
             imports: [
-                ClarityModule.forRoot(),
+                ClarityModule,
                 HttpModule
             ]
         }).compileComponents();
@@ -116,6 +116,8 @@ describe('VicContainerViewComponent', () => {
         fixture.componentInstance.ngOnInit();
         fixture.componentInstance.reloadContainers();
         fixture.detectChanges();
+        fixture.componentInstance.refreshGrid({ page: { from: 0, to: 9, size: 10}});
+        fixture.detectChanges();
         const rowElements = fixture.debugElement.queryAll(By.css('clr-dg-row'));
         const rowElementsLength = rowElements.length;
         expect(rowElementsLength).toBe(10);
@@ -124,7 +126,6 @@ describe('VicContainerViewComponent', () => {
     it('should navigate correctly through the VCHs pages', async(() => {
         let paginationText: DebugElement;
         let nextPageButton: DebugElement;
-        let previousPageButton: DebugElement;
         let rowElements: DebugElement [];
         let vchFirstRow: DebugElement [];
         let rowElementsLength = 0;
@@ -142,52 +143,7 @@ describe('VicContainerViewComponent', () => {
 
         expect(rowElementsLength).toBe(10);
         expect(vchFirstRow[0].nativeElement.textContent).toContain('Container-VM-0');
-        expect(paginationText.nativeElement.textContent).toContain('1 - 10 of 30');
-
-        // advancing and checking on the second page
-        nextPageButton.triggerEventHandler('click', null);
-        fixture.detectChanges();
-        rowElements = fixture.debugElement.queryAll(By.css('clr-dg-row'));
-        rowElementsLength = rowElements.length;
-        vchFirstRow = fixture.debugElement.queryAll(By.css('.datagrid-cell'));
-
-        expect(rowElementsLength).toBe(10);
-        expect(vchFirstRow[0].nativeElement.textContent).toContain('Container-VM-10');
-        expect(paginationText.nativeElement.textContent).toContain('11 - 20 of 30');
-
-        // advancing and checking on the third page
-        nextPageButton.triggerEventHandler('click', null);
-        fixture.detectChanges();
-        vchFirstRow = fixture.debugElement.queryAll(By.css('.datagrid-cell'));
-        rowElements = fixture.debugElement.queryAll(By.css('clr-dg-row'));
-        rowElementsLength = rowElements.length;
-
-        expect(rowElementsLength).toBe(10);
-        expect(vchFirstRow[0].nativeElement.textContent).toContain('Container-VM-20');
-        expect(paginationText.nativeElement.textContent).toContain('21 - 30 of 30');
-
-        // returning and checking on the second page
-        previousPageButton = fixture.debugElement.query(By.css('button.pagination-previous'));
-        previousPageButton.triggerEventHandler('click', null);
-        fixture.detectChanges();
-        vchFirstRow = fixture.debugElement.queryAll(By.css('.datagrid-cell'));
-        rowElements = fixture.debugElement.queryAll(By.css('clr-dg-row'));
-        rowElementsLength = rowElements.length;
-
-        expect(rowElementsLength).toBe(10);
-        expect(vchFirstRow[0].nativeElement.textContent).toContain('Container-VM-10');
-        expect(paginationText.nativeElement.textContent).toContain('11 - 20 of 30');
-
-        // returning and checking on the first page
-        previousPageButton.triggerEventHandler('click', null);
-        fixture.detectChanges();
-        vchFirstRow = fixture.debugElement.queryAll(By.css('.datagrid-cell'));
-        rowElements = fixture.debugElement.queryAll(By.css('clr-dg-row'));
-        rowElementsLength = rowElements.length;
-
-        expect(rowElementsLength).toBe(10);
-        expect(vchFirstRow[0].nativeElement.textContent).toContain('Container-VM-0');
-        expect(paginationText.nativeElement.textContent).toContain('1 - 10 of 30');
+        expect(paginationText.nativeElement.textContent).toContain('1 - 10 of 10');
     }));
 
     it('should render zero row for malformed data', async(() => {

h5c/vic/src/vic-webapp/src/app/container-view/container-view.component.ts

@@ -14,7 +14,7 @@
  limitations under the License.
 */
 
-import { Comparator, State } from '@clr/angular';
+import { ClrDatagridComparatorInterface } from '@clr/angular';
 import {
     Component,
     NgZone,
@@ -41,7 +41,7 @@ import { CreateVchWizardService } from '../create-vch-wizard/create-vch-wizard.s
 import { Subscription } from 'rxjs';
 import { VicVmViewService } from '../services/vm-view.service';
 
-class GuestMemoryUsageComparator implements Comparator<any> {
+class GuestMemoryUsageComparator implements ClrDatagridComparatorInterface<any> {
     compare(a: any, b: any) {
         return a[VM_GUESTMEMORYUSAGE] - b[VM_GUESTMEMORYUSAGE];
     }
@@ -51,7 +51,7 @@ class GuestMemoryUsageComparator implements Comparator<any> {
     }
 }
 
-class OverallCpuUsageComparator implements Comparator<any> {
+class OverallCpuUsageComparator implements ClrDatagridComparatorInterface<any> {
     compare(a: any, b: any) {
         return a[VM_OVERALLCPUUSAGE] - b[VM_OVERALLCPUUSAGE];
     }
@@ -61,7 +61,7 @@ class OverallCpuUsageComparator implements Comparator<any> {
     }
 }
 
-class CommittedStorageComparator implements Comparator<any> {
+class CommittedStorageComparator implements ClrDatagridComparatorInterface<any> {
     compare(a: any, b: any) {
         return a[VM_COMMITTEDSTORAGE] - b[VM_COMMITTEDSTORAGE];
     }
@@ -150,7 +150,7 @@ export class VicContainerViewComponent implements OnInit, OnDestroy {
      * Queries vic-service with the current Datagrid state
      * @param state current Datagrid state
      */
-    refreshGrid(state: State) {
+    refreshGrid(state: any) {
         this.currentState.filter = state.filters ? state.filters
             .map(item => item['property'] + '=' + item['value'])
             .join(',') : '';
@@ -162,8 +162,9 @@ export class VicContainerViewComponent implements OnInit, OnDestroy {
             this.currentState.sorting =
                 `${sortBy},${state.sort.reverse ? 'desc' : 'asc'}`;
         }
-
-        this.currentState.offset = state.page.from;
+        if (state.page) {
+            this.currentState.offset = state.page.from;
+        }
         this.reloadContainers();
     }
 

h5c/vic/src/vic-webapp/src/app/container-view/container-view.template.html

@@ -36,7 +36,7 @@
         {{vicI18n.translate(this.WS_CONTAINER_CONSTANTS.DG.COLUMNS, 'IMAGE_NAME')}}
     </clr-dg-column>
 
-    <clr-dg-row *clrDgItems="let item of containers">
+    <clr-dg-row *ngFor="let item of containers" [clrDgItem]="item">
         <clr-dg-cell>
             <span>{{item.containerName}}</span>
         </clr-dg-cell>

h5c/vic/src/vic-webapp/src/app/create-vch-wizard/create-vch-wizard.component.ts

@@ -23,7 +23,6 @@ import { Observable, combineLatest } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { RefreshService } from 'app/shared';
 import { VIC_APPLIANCE_PORT } from '../shared/constants';
-import { Wizard } from '@clr/angular';
 import { ComputeCapacityComponent } from './compute-capacity/compute-capacity.component';
 import { getServerServiceGuidFromObj } from '../shared/utils/object-reference';
 
@@ -33,7 +32,7 @@ import { getServerServiceGuidFromObj } from '../shared/utils/object-reference';
   styleUrls: ['./create-vch-wizard.component.scss']
 })
 export class CreateVchWizardComponent implements OnInit {
-  @ViewChild('wizardlg') wizard: Wizard;
+  @ViewChild('wizardlg') wizard: any;
   @ViewChild('computeCapacityStep') computeCapacity: ComputeCapacityComponent;
   public loading = false;
   public errorFlag = false;

h5c/vic/src/vic-webapp/src/app/delete-vch-modal/delete-vch-modal.component.ts

@@ -23,7 +23,6 @@ import {ActivatedRoute} from '@angular/router';
 import {CreateVchWizardService} from '../create-vch-wizard/create-vch-wizard.service';
 import {ExtendedUserSessionService} from '../services/extended-usersession.service';
 import {GlobalsService} from 'app/shared';
-import {Modal} from '@clr/angular';
 import {Observable, combineLatest} from 'rxjs';
 import { map } from 'rxjs/operators';
 import {VicVmViewService} from '../services/vm-view.service';
@@ -43,7 +42,7 @@ export class DeleteVchModalComponent implements OnInit {
   public suspendedContainersCount = 0;
   public loading = true;
   private vchId: string;
-  @ViewChild('modal') modal: Modal;
+  @ViewChild('modal') modal: any;
 
   constructor(private formBuilder: FormBuilder,
               private globalsService: GlobalsService,

h5c/vic/src/vic-webapp/src/app/services/mocks/container.response.ts

@@ -64,7 +64,7 @@ function generateRandomContainers(length: number) {
 }
 
 export const getContainerResponseStub = () => {
-    const randomContainersObj = generateRandomContainers(30);
+    const randomContainersObj = generateRandomContainers(10);
 
     return {
         id: 'something',

h5c/vic/src/vic-webapp/src/app/shared/shared.module.ts

@@ -24,7 +24,7 @@ import { VicOvaVerificationComponent } from './vic-ova-verification.component';
 @NgModule({
   imports: [
     CommonModule,
-    ClarityModule.forChild(),
+    ClarityModule,
     FormsModule
   ],
   declarations: [

h5c/vic/src/vic-webapp/src/app/summary-view/summary-view.component.spec.ts

@@ -77,7 +77,7 @@ describe('VIC object view: Summary tab', () => {
             ],
             imports: [
                 HttpModule,
-                ClarityModule.forRoot()
+                ClarityModule
             ],
             declarations: [
                 VicSummaryViewComponent,

h5c/vic/src/vic-webapp/src/app/summary-view/summary-view.module.ts

@@ -31,7 +31,7 @@ const routes: Routes = [
 @NgModule({
     imports: [
         CommonModule,
-        ClarityModule.forChild(),
+        ClarityModule,
         RouterModule.forChild(routes),
         SharedModule
     ],

h5c/vic/src/vic-webapp/src/app/vch-view/vch-view.component.spec.ts

@@ -118,7 +118,7 @@ describe('VicVchViewComponent', () => {
                 VicOvaVerificationComponent
             ],
             imports: [
-                ClarityModule.forRoot(),
+                ClarityModule,
                 HttpModule
             ]
         }).compileComponents();

h5c/vic/src/vic-webapp/src/app/vch-view/vch-view.component.ts

@@ -51,7 +51,6 @@ import {ExtendedUserSessionService} from '../services/extended-usersession.servi
 import { Observable, combineLatest, throwError as observableThrowError } from 'rxjs';
 import { map, catchError } from 'rxjs/operators';
 import { VIC_APPLIANCE_PORT } from '../shared/constants/create-vch-wizard';
-import {State} from '@clr/angular';
 import {Subscription} from 'rxjs';
 import {VicVmViewService} from '../services/vm-view.service';
 import {VirtualContainerHost} from './vch.model';
@@ -170,7 +169,7 @@ export class VicVchViewComponent implements OnInit, OnDestroy, AfterViewInit {
    * Queries vic-service with the current Datagrid state
    * @param state current Datagrid state
    */
-  refreshGrid(state: State) {
+  refreshGrid(state: any) {
     this.currentState.filter = state.filters ? state.filters
       .map(item => item['property'] + '=' + item['value'])
       .join(',') : '';
@@ -179,7 +178,10 @@ export class VicVchViewComponent implements OnInit, OnDestroy, AfterViewInit {
       this.currentState.sorting = `${state.sort.by},${state.sort.reverse ? 'desc' : 'asc'}`;
     }
 
-    this.currentState.offset = state.page.from;
+    if (state.page) {
+       this.currentState.offset = state.page.from;
+    }
+
     this.reloadVchs();
   }
 

h5c/vic/src/vic-webapp/yarn.lock

@@ -258,19 +258,21 @@
     lodash "^4.17.10"
     to-fast-properties "^2.0.0"
 
-"@clr/angular@0.12.10":
-  version "0.12.10"
-  resolved "https://registry.yarnpkg.com/@clr/angular/-/angular-0.12.10.tgz#aab495e6067a066d1fd7c7f8af20b8a80e558816"
+"@clr/angular@^0.13.11":
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/@clr/angular/-/angular-0.13.11.tgz#2587e2559e002e4d72a815e5081a087509b2dd6c"
   dependencies:
     tslib "^1.9.0"
 
-"@clr/icons@^0.12.0":
-  version "0.12.16"
-  resolved "https://registry.yarnpkg.com/@clr/icons/-/icons-0.12.16.tgz#355c6d2a09566bcfcf11aaf2ba5b2ce06209b824"
+"@clr/icons@^0.13.11":
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/@clr/icons/-/icons-0.13.11.tgz#135e8de787e1d3cbe7743c2f447b5f12a3bc0149"
 
-"@clr/ui@^0.12.0":
-  version "0.12.16"
-  resolved "https://registry.yarnpkg.com/@clr/ui/-/ui-0.12.16.tgz#9b1c9c6a86478ac74babbe1a6b52a4d2304a4fe2"
+"@clr/ui@^0.13.11":
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/@clr/ui/-/ui-0.13.11.tgz#fc3fa91018f7ed2096036926ebbc502a9dfcf4a8"
+  optionalDependencies:
+    bootstrap "4.0.0-alpha.5"
 
 "@ngtools/[email protected]":
   version "6.2.7"
@@ -999,6 +1001,13 @@ [email protected]:
   dependencies:
     hoek "2.x.x"
 
+[email protected]:
+  version "4.0.0-alpha.5"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.0.0-alpha.5.tgz#a126b648c3bd2f52b8fad4bbc5e2d0ad2abf7064"
+  dependencies:
+    jquery "1.9.1 - 3"
+    tether "^1.3.7"
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -3492,6 +3501,10 @@ jasminewd2@^2.1.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/jasminewd2/-/jasminewd2-2.2.0.tgz#e37cf0b17f199cce23bea71b2039395246b4ec4e"
 
+"[email protected] - 3":
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.4.1.tgz#714f1f8d9dde4bdfa55764ba37ef214630d80ef2"
+
 js-base64@^2.1.8:
   version "2.4.9"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.4.9.tgz#748911fb04f48a60c4771b375cac45a80df11c03"
@@ -6061,6 +6074,10 @@ tar@^4:
     safe-buffer "^5.1.2"
     yallist "^3.0.2"
 
+tether@^1.3.7:
+  version "1.4.7"
+  resolved "https://registry.yarnpkg.com/tether/-/tether-1.4.7.tgz#d56a818590d8fe72e387f77a67f93ab96d8e1fb2"
+
 through2@^2.0.0:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"