fix(ie-errors): Fix several errors in IE. (#907)

#897

src/app/account/account/card-item/account-card-item.component.html

@@ -5,17 +5,15 @@
 >
   <mat-card-header>
     <mat-card-title>
+      <span
+        class="state-icon"
+        [matTooltip]="stateTranslations[item.state] | translate"
+        [ngClass]="item.state"
+      ></span>
       <h2
         class="mat-card-title-text"
-      >
-        <span
-          class="state-icon"
-          [matTooltip]="stateTranslations[item.state] | translate"
-          [ngClass]="item.state"
-        ></span>
-        <span
-          [matTooltip]="item.name"
-        > {{ item.name }} </span>
+        [matTooltip]="item.name"
+      >{{ item.name }}
       </h2>
     </mat-card-title>
     <div class="mat-card-header-menu" *ngIf="isAdmin() && !isSelf">

src/app/auth/login.component.scss

@@ -32,6 +32,7 @@
   padding: 8px 8px 8px 24px;
   display: flex;
   flex-direction: row-reverse;
+  justify-content: space-between;
   margin: 0;
 }
 

src/app/home/home.component.ts

@@ -32,7 +32,7 @@ export class HomeComponent extends WithUnsubscribe() implements OnInit {
       .subscribe(() => {
         this.store.dispatch(new serviceOfferingActions.LoadCompatibilityPolicyRequest());
         this.store.dispatch(new authActions.LoadUserAccountRequest({
-          mame: this.auth.user.account,
+          name: this.auth.user.account,
           domainid: this.auth.user.domainid
         }));
         this.disableSecurityGroups = this.auth.isSecurityGroupEnabled();

src/app/reducers/disk-offerings/redux/disk-offerings.reducers.ts

@@ -171,7 +171,7 @@ const isOfferingAvailableInZone = (
   offeringAvailability: OfferingAvailability,
   zone: Zone
 ) => {
-  return offeringAvailability[zone.id] && offeringAvailability[zone.id].diskOfferings.includes(offering.id);
+  return offeringAvailability[zone.id] && offeringAvailability[zone.id].diskOfferings.indexOf(offering.id) !== -1;
 };
 
 

src/app/reducers/service-offerings/redux/service-offerings.reducers.ts

@@ -437,7 +437,7 @@ export const isOfferingAvailableInZone = (
   if (!availability[zone.id] || !availability[zone.id].filterOfferings) {
     return true;
   }
-  return availability[zone.id].serviceOfferings.includes(offering.id);
+  return availability[zone.id].serviceOfferings.indexOf(offering.id) !== -1;
 };
 
 export const getAvailableByResourcesSync = (

src/app/reducers/vm/redux/vm-creation.effects.ts

@@ -2,7 +2,12 @@ import { Injectable } from '@angular/core';
 import { Action, Store } from '@ngrx/store';
 import { Rules } from '../../../shared/components/security-group-builder/rules';
 import { BaseTemplateModel } from '../../../template/shared';
-import { AffinityGroupType, DiskOffering, ServiceOffering, Zone } from '../../../shared/models';
+import {
+  AffinityGroupType,
+  DiskOffering,
+  ServiceOffering,
+  Zone
+} from '../../../shared/models';
 import { Observable } from 'rxjs/Observable';
 import { TemplateResourceType } from '../../../template/shared/base-template.service';
 import { Actions, Effect } from '@ngrx/effects';
@@ -12,7 +17,10 @@ import {
   ProgressLoggerMessageData,
   ProgressLoggerMessageStatus
 } from '../../../shared/components/progress-logger/progress-logger-message/progress-logger-message';
-import { NotSelected, VmCreationState } from '../../../vm/vm-creation/data/vm-creation-state';
+import {
+  NotSelected,
+  VmCreationState
+} from '../../../vm/vm-creation/data/vm-creation-state';
 import { VmCreationSecurityGroupData } from '../../../vm/vm-creation/security-group/vm-creation-security-group-data';
 // tslint:disable-next-line
 import { VmCreationAgreementComponent } from '../../../vm/vm-creation/template/agreement/vm-creation-agreement.component';
@@ -99,7 +107,7 @@ export class VirtualMachineCreationEffects {
           const insufficientResources = [];
 
           Object.keys(resourceUsage.available)
-            .filter(key => ['instances', 'volumes', 'cpus', 'memory', 'primaryStorage'].includes(key))
+            .filter(key => ['instances', 'volumes', 'cpus', 'memory', 'primaryStorage'].indexOf(key) !== -1)
             .forEach(key => {
               const available = resourceUsage.available[key];
               if (available === 0) {

src/app/shared/services/config.service.ts

@@ -26,7 +26,7 @@ export class ConfigService {
     const result = {};
 
     for (const key in this.config) {
-      if (this.config.hasOwnProperty(key) && keyArray.includes(key)) {
+      if (this.config.hasOwnProperty(key) && keyArray.indexOf(key) !== -1) {
         result[key] = this.config[key];
       }
     }

src/app/shared/services/disk-offering.service.ts

@@ -35,6 +35,6 @@ export class DiskOfferingService extends OfferingService<DiskOffering> {
     offeringAvailability: OfferingAvailability,
     zone: Zone
   ): boolean {
-    return offeringAvailability[zone.id].diskOfferings.includes(offering.id);
+    return offeringAvailability[zone.id].diskOfferings.indexOf(offering.id) !== -1;
   }
 }

src/app/shared/services/service-offering.service.ts

@@ -61,6 +61,6 @@ export class ServiceOfferingService extends OfferingService<ServiceOffering> {
     if (!availability[zone.id] || !availability[zone.id].filterOfferings) {
       return true;
     }
-    return availability[zone.id].serviceOfferings.includes(offering.id);
+    return availability[zone.id].serviceOfferings.indexOf(offering.id) !== -1;
   }
 }

src/app/vm/container/vm.container.ts

@@ -1,9 +1,4 @@
-import {
-  AfterViewInit,
-  ChangeDetectorRef,
-  Component,
-  OnInit
-} from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { State } from '../../reducers';
 import { Store } from '@ngrx/store';
 import * as fromVMs from '../../reducers/vm/redux/vm.reducers';
@@ -30,6 +25,7 @@ const getGroupName = (vm: VirtualMachine) => {
   template: `
     <cs-vm-page
       [vms]="vms$ | async"
+      [query]="query$ | async" 
       [volumes]="volumes$ | async"
       [osTypesMap]="osTypesMap$ | async"
       [isLoading]="loading$ | async"
@@ -40,6 +36,7 @@ const getGroupName = (vm: VirtualMachine) => {
 export class VirtualMachinePageContainerComponent implements OnInit, AfterViewInit {
 
   readonly vms$ = this.store.select(fromVMs.selectFilteredVMs);
+  readonly query$ = this.store.select(fromVMs.filterQuery);
   readonly volumes$ = this.store.select(fromVolumes.selectAll);
   readonly osTypesMap$ = this.store.select(fromOsTypes.selectEntities);
   readonly loading$ = this.store.select(fromVMs.isLoading);

src/app/vm/shared/vm-actions.service.ts

@@ -1,8 +1,5 @@
 import { VmActions } from '../vm-actions/vm-action';
-import {
-  VirtualMachine,
-  VmState
-} from './vm.model';
+import { VirtualMachine, VmState } from './vm.model';
 
 const isIpAvailable = (vm) => {
   return vm.nic.length && !!vm.nic[0].ipaddress;
@@ -40,7 +37,7 @@ const VmRestoreAction = {
   canActivate: (vm: VirtualMachine) => !!vm && [
     VmState.Running,
     VmState.Stopped
-  ].includes(vm.state)
+  ].indexOf(vm.state) !== -1
 };
 
 const VmDestroyAction = {
@@ -51,7 +48,7 @@ const VmDestroyAction = {
   canActivate: (vm: VirtualMachine) => !!vm && [
     VmState.Running, VmState.Stopped,
     VmState.Error
-  ].includes(vm.state)
+  ].indexOf(vm.state) !== -1
 };
 
 const VmResetPasswordAction = {
@@ -60,7 +57,7 @@ const VmResetPasswordAction = {
   icon: 'vpn_key',
   confirmMessage: 'DIALOG_MESSAGES.VM.CONFIRM_RESET_PASSWORD',
   canActivate: (vm: VirtualMachine) => !!vm
-    && [VmState.Running, VmState.Stopped].includes(vm.state)
+    && [VmState.Running, VmState.Stopped].indexOf(vm.state) !== -1
     && vm.passwordEnabled
     && isIpAvailable(vm)
 };

src/app/vm/vm-list-item/card-item/vm-list-card-item.component.html

@@ -7,15 +7,12 @@
 >
   <mat-card-header>
     <mat-card-title>
-      <h2 class="mat-card-title-text">
-        <span
-          class="state-icon"
-          [ngClass]="statusClass"
-          [matTooltip]="stateTranslationToken | translate"
-        ></span>
-        <span [matTooltip]="item.name" [innerHTML]="item.name | highlight:query">
-          {{ item.name }}
-        </span>
+      <span
+        class="state-icon"
+        [ngClass]="statusClass"
+        [matTooltip]="stateTranslationToken | translate"
+      ></span>
+      <h2 class="mat-card-title-text" [matTooltip]="item.name" [innerHTML]="item.name | highlight:query">
       </h2>
     </mat-card-title>
     <div class="mat-card-header-menu">

src/app/vm/vm-list-item/row-item/vm-list-row-item.component.html

@@ -10,9 +10,7 @@
     [ngClass]="statusClass"
     [matTooltip]="stateTranslationToken | translate"
   ></span>
-  <h2 class="row-title">
-    <span [matTooltip]="item.name" [innerHTML]="item.name | highlight:query">
-      {{ item.name }} </span>
+  <h2 class="row-title" [matTooltip]="item.name" [innerHTML]="item.name | highlight:query">
   </h2>
 
   <div class="info">{{ item.nic[0]?.ipaddress ? item.nic[0].ipaddress : ('VM_PAGE.CARD.IP_NA' | translate) }}</div>

src/app/vm/vm-page/vm-page.component.ts

@@ -1,12 +1,5 @@
-import {
-  Component,
-  Input,
-  OnInit,
-} from '@angular/core';
-import {
-  ActivatedRoute,
-  Router
-} from '@angular/router';
+import { Component, Input, OnInit, } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 import { DialogService } from '../../dialog/dialog-service/dialog.service';
 import { ListService } from '../../shared/components/list/list.service';
 import { UserTagService } from '../../shared/services/tags/user-tag.service';
@@ -25,6 +18,7 @@ import { Dictionary } from '@ngrx/entity/src/models';
 })
 export class VmPageComponent implements OnInit {
   @Input() public vms: Array<VirtualMachine>;
+  @Input() public query: string;
   @Input() public volumes: Array<Volume>;
   @Input() public osTypesMap: Dictionary<OsType>;
   @Input() public isLoading: boolean;

src/app/volume/container/volume.container.ts

@@ -12,6 +12,7 @@ import { AuthService } from '../../shared/services/auth.service';
   template: `
     <cs-volume-page
       [volumes]="volumes$ | async"
+      [query]="query$ | async"
       [isLoading]="loading$ | async"
       [groupings]="groupings"
       [selectedGroupings]="selectedGroupings$ | async"
@@ -20,6 +21,7 @@ import { AuthService } from '../../shared/services/auth.service';
 export class VolumePageContainerComponent implements OnInit, AfterViewInit {
 
   readonly volumes$ = this.store.select(fromVolumes.selectFilteredVolumes);
+  readonly query$ = this.store.select(fromVolumes.filterQuery);
   readonly loading$ = this.store.select(fromVolumes.isLoading);
   readonly selectedGroupings$ = this.store.select(fromVolumes.filterSelectedGroupings);
 

src/app/volume/volume-item/card-item/volume-card-item.component.html

@@ -10,9 +10,7 @@
         class="mat-card-title-text"
         [matTooltip]="item.name"
         [innerHTML]="item.name | highlight:query"
-      >
-        {{ item.name }}
-      </h2>
+      ></h2>
     </mat-card-title>
     <div class="mat-card-header-menu">
       <button mat-icon-button [matMenuTriggerFor]="actionsMenu">

src/app/volume/volume-item/row-item/volume-row-item.component.html

@@ -8,9 +8,7 @@
     class="row-title"
     [matTooltip]="item.name"
     [innerHTML]="item.name | highlight:query"
-  >
-    {{ item.name }}
-  </h2>
+  ></h2>
 
   <div class="size">
     <span>{{ 'VOLUME_PAGE.CARD.SIZE' | translate }}: </span>

src/app/volume/volume-page/volume-page.component.ts

@@ -1,12 +1,5 @@
-import {
-  Component,
-  Input,
-  OnInit,
-} from '@angular/core';
-import {
-  ActivatedRoute,
-  Router
-} from '@angular/router';
+import { Component, Input, OnInit, } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 import { DialogService } from '../../dialog/dialog-service/dialog.service';
 import { Volume } from '../../shared';
 import { ListService } from '../../shared/components/list/list.service';
@@ -23,6 +16,7 @@ import { ViewMode } from '../../shared/components/view-mode-switch/view-mode-swi
 })
 export class VolumePageComponent extends WithUnsubscribe() implements OnInit {
   @Input() public volumes: Array<Volume>;
+  @Input() public query: string;
   @Input() public isLoading: boolean;
   @Input() public groupings: Array<any>;
   @Input() public selectedGroupings: Array<any>;

src/polyfills.ts

@@ -32,6 +32,7 @@ import 'core-js/es6/map';
 import 'core-js/es6/set';
 import 'core-js/es6/weak-map';
 import 'core-js/es7/object';
+import 'core-js/es7/array';
 /** IE10 and IE11 requires the following for NgClass support on SVG elements */
 // import 'classlist.js';  // Run `npm install --save classlist.js`.
 /** IE10 and IE11 requires the following to support `@angular/animation`. */

src/style/app.scss

@@ -358,8 +358,7 @@ mat-card-actions {
   border-radius: 50%;
   width: 10px;
   height: 10px;
-  margin-left: 8px;
-  margin-right: 8px;
+  margin: 8px 8px 5px;
   box-shadow: 0 0 1px 1px white;
 
   &.destroyed {