Catalog alignment

Issue-ID: SDC-2724
Signed-off-by: ys9693 <ys9693@att.com>
Change-Id: I52b4aacb58cbd432ca0e1ff7ff1f7dd52099c6fe

5 files changed, 31 insertions, 31 deletions

diff --git a/catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.component.html b/catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.component.html
index bee493f2ae..7b9a5ff700 100644
--- a/catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.component.html
+++ b/catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.component.html
@@ -13,7 +13,6 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
   -->
- 
 <div class="multiline-ellipsis-container" [ngClass]="className" [ngStyle]="stylesContainer" #multilineEllipsisContainer>
 	<div class="multiline-ellipsis-content" [ngStyle]="stylesContent" #multilineEllipsisContent>
 		<ng-content></ng-content>
diff --git a/catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.component.ts b/catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.component.ts
index 68cfedb32b..4cff9de72a 100644
--- a/catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.component.ts
+++ b/catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnChanges, AfterViewChecked, ViewChild, ElementRef, Input, Output, SimpleChanges, EventEmitter} from "@angular/core";
+import {Component, OnChanges, AfterContentInit, ViewChild, ElementRef, Input, Output, SimpleChanges, EventEmitter} from "@angular/core";
 import {WindowRef} from "../../services/window.service";
 
 @Component({
@@ -6,7 +6,7 @@ import {WindowRef} from "../../services/window.service";
 	templateUrl: 'multiline-ellipsis.component.html',
 	styleUrls: ['multiline-ellipsis.component.less']
 })
-export class MultilineEllipsisComponent implements OnChanges, AfterViewChecked {
+export class MultilineEllipsisComponent implements OnChanges, AfterContentInit {
 
 	@Input() public lines: number;
 	@Input() public lineHeight: string;
@@ -30,7 +30,7 @@ export class MultilineEllipsisComponent implements OnChanges, AfterViewChecked {
 		this.prepareStyles()
 	}
 
-	public ngAfterViewChecked() {
+	public ngAfterContentInit() {
 		const hasEllipsis = (this.elmContainer.nativeElement.offsetHeight < this.elmContent.nativeElement.offsetHeight);
 		if (hasEllipsis !== this.hasEllipsis) {
 			this.hasEllipsis = hasEllipsis;
diff --git a/catalog-ui/src/app/ng2/shared/translator/translate.pipe.ts b/catalog-ui/src/app/ng2/shared/translator/translate.pipe.ts
index 4ec756bcc2..04f6650f38 100644
--- a/catalog-ui/src/app/ng2/shared/translator/translate.pipe.ts
+++ b/catalog-ui/src/app/ng2/shared/translator/translate.pipe.ts
@@ -19,38 +19,32 @@
  */
 
 import { Pipe, PipeTransform } from '@angular/core';
-import { TranslateService, ITranslateArgs } from "./translate.service";
+import { ITranslateArgs, TranslateService } from './translate.service';
 
+// tslint:disable-next-line:interface-name
+interface ITranslateParams {
+    phrase: string;
+    args: ITranslateArgs;
+    language: string;
+}
 
 @Pipe({
     name: 'translate',
     pure: false
 })
 export class TranslatePipe implements PipeTransform {
-    private translated:string;
-    private lastParams: {
-        phrase: string;
-        args: {[index: string]: any};
-        language: string;
-    } = {
+    private translated: string;
+    private lastParams: ITranslateParams = {
         phrase: undefined,
         args: undefined,
         language: undefined
     };
 
-    constructor(private translateService:TranslateService) {
-    }
-
-    private shouldUpdate(curParams:{[index:string]: any}) : boolean {
-        return (
-            curParams.language !== this.lastParams.language ||
-            curParams.args !== this.lastParams.args ||
-            curParams.phrase !== this.lastParams.phrase
-        );
+    constructor(private translateService: TranslateService) {
     }
 
-    public transform(phrase:string, args:ITranslateArgs, language:string=this.translateService.activeLanguage) : string {
-        const curParams = { phrase, args, language };
+    public transform(phrase: string, args: ITranslateArgs, language: string = this.translateService.activeLanguage): string {
+        const curParams: ITranslateParams = { phrase, args, language };
         if (this.shouldUpdate(curParams)) {
             this.lastParams = curParams;
             this.translated = this.translateService.translate(phrase, args, language);
@@ -58,4 +52,12 @@ export class TranslatePipe implements PipeTransform {
 
         return this.translated;
     }
+
+    private shouldUpdate(curParams: ITranslateParams): boolean {
+        return (
+            curParams.language !== this.lastParams.language ||
+            curParams.args !== this.lastParams.args ||
+            curParams.phrase !== this.lastParams.phrase
+        );
+    }
 }
diff --git a/catalog-ui/src/app/ng2/shared/translator/translate.service.config.ts b/catalog-ui/src/app/ng2/shared/translator/translate.service.config.ts
index a1d7833062..6413f6a64e 100644
--- a/catalog-ui/src/app/ng2/shared/translator/translate.service.config.ts
+++ b/catalog-ui/src/app/ng2/shared/translator/translate.service.config.ts
@@ -18,9 +18,9 @@
  * ============LICENSE_END=========================================================
  */
 
-import { OpaqueToken } from "@angular/core";
+import { InjectionToken } from "@angular/core";
 
-export const TranslateServiceConfigToken = new OpaqueToken('TranslateServiceConfigToken');
+export const TranslateServiceConfigToken = new InjectionToken('TranslateServiceConfigToken');
 
 export interface ITranslateServiceConfig {
     filePrefix:string;
diff --git a/catalog-ui/src/app/ng2/shared/translator/translate.service.ts b/catalog-ui/src/app/ng2/shared/translator/translate.service.ts
index ff7c643b46..0b5ddae557 100644
--- a/catalog-ui/src/app/ng2/shared/translator/translate.service.ts
+++ b/catalog-ui/src/app/ng2/shared/translator/translate.service.ts
@@ -19,9 +19,9 @@
  */
 
 import { Injectable, Inject } from "@angular/core";
-import { Response, Http } from "@angular/http";
-import { Observable, Observer, ConnectableObservable, Subscription } from "rxjs";
 import { ITranslateServiceConfig, TranslateServiceConfigToken } from "./translate.service.config";
+import { Observer, Subscription, Observable, ConnectableObservable } from 'rxjs/Rx';
+import { HttpClient } from "@angular/common/http";
 
 export { ITranslateServiceConfig, TranslateServiceConfigToken };
 
@@ -145,7 +145,7 @@ export class TranslateService {
     private _cacheLanguagesJsons:{[index:string]:ITranslateLanguageJson} = {};
     private _cacheLanguagesLoaders:{[index:string]:Observable<ITranslateLanguageJson>} = {};
 
-    constructor(@Inject(TranslateServiceConfigToken) private config:ITranslateServiceConfig, private http:Http) {
+    constructor(@Inject(TranslateServiceConfigToken) private config:ITranslateServiceConfig, private http: HttpClient) {
         this.initLanguageObservable();
         this.loadAndActivateLanguage(this.config.defaultLanguage);
     }
@@ -176,8 +176,7 @@ export class TranslateService {
 
         if (!(language in this._cacheLanguagesLoaders)) {
             const filePath = `${this.config.filePrefix}${language}${this.config.fileSuffix}`;
-            this._cacheLanguagesLoaders[language] = this.http.get(filePath)
-                .map<Response, ITranslateLanguageJson>(resp => resp.json())
+            this._cacheLanguagesLoaders[language] = this.http.get<ITranslateLanguageJson>(filePath)
                 .catch(() => Observable.throw(`Failed to load language file for "${language}"`))
                 .publish();
             (<ConnectableObservable<ITranslateLanguageJson>>this._cacheLanguagesLoaders[language]).connect();
@@ -204,12 +203,12 @@ export class TranslateService {
         return false;
     }
 
-    public loadAndActivateLanguage(language:string) : Observable<ITranslateLanguageJson> {
+    public loadAndActivateLanguage(language:string) : void {
+
         const loadLanguageObservable = this.loadLanguageJsonFile(language, false);
         loadLanguageObservable.subscribe(() => {
             this.activateLanguage(language);
         }, () => {});
-        return loadLanguageObservable;
     }
 
     public translate(phraseKey:string, args:ITranslateArgs={}, language:string=this._activeLanguage) : string {