diff options
Diffstat (limited to 'catalog-ui')
58 files changed, 469 insertions, 787 deletions
diff --git a/catalog-ui/package.json b/catalog-ui/package.json index 6e86b46dd0..3e13e69a2b 100644 --- a/catalog-ui/package.json +++ b/catalog-ui/package.json @@ -45,6 +45,7 @@ "raw-loader": "^0.5.1", "sass-loader": "^4.1.1", "script-loader": "^0.7.0", + "sdc-ui": "^1.6.2", "source-map-loader": "^0.1.5", "style-loader": "^0.13.1", "url-loader": "^0.5.7", @@ -105,7 +106,6 @@ "js-md5": "^0.4.2", "lodash": "^4.17.2", "ng-infinite-scroll": "^1.3.0", - "ng2-interceptors": "^1.3.0-1", "perfect-scrollbar": "^0.6.16", "qtip2": "^3.0.3", "reflect-metadata": "^0.1.10", diff --git a/catalog-ui/src/app/models.ts b/catalog-ui/src/app/models.ts index f3eb5d5fa6..ec70ebe8b1 100644 --- a/catalog-ui/src/app/models.ts +++ b/catalog-ui/src/app/models.ts @@ -95,6 +95,7 @@ export * from './models/member'; export * from './models/modules/base-module'; export * from './models/properties'; export * from './models/requirement'; +export * from './models/server-error-response'; export * from './models/tab'; export * from './models/tooltip-data'; export * from './models/user'; diff --git a/catalog-ui/src/app/models/modal.ts b/catalog-ui/src/app/models/modal.ts index 51aa5e19a7..b7bdf251fe 100644 --- a/catalog-ui/src/app/models/modal.ts +++ b/catalog-ui/src/app/models/modal.ts @@ -5,12 +5,14 @@ export class ModalModel { title: string; content: any; buttons: Array<ButtonModel>; + type: string; 'standard|error|alert' - constructor(size?: string, title?: string, content?: any, buttons?: Array<ButtonModel>) { + constructor(size?: string, title?: string, content?: any, buttons?: Array<ButtonModel>, type?:string) { this.size = size; this.title = title; this.content = content; this.buttons = buttons; + this.type = type || 'standard'; } } diff --git a/catalog-ui/src/app/models/server-error-response.ts b/catalog-ui/src/app/models/server-error-response.ts new file mode 100644 index 0000000000..61d09af48b --- /dev/null +++ b/catalog-ui/src/app/models/server-error-response.ts @@ -0,0 +1,84 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +/** + * Created by ngordon on 7/27/2017. + */ + +import { Response } from '@angular/http'; +import { SEVERITY, ServerErrors } from "../utils/constants"; + +export class ServerErrorResponse { + + title: string; + message: string; + messageId: string; + status: number; + severity: SEVERITY; + + constructor(response?: Response) { + + if (response) { + let rejectionObj: any = {}; + if (response.text().length) { + let rejection = response.json(); + rejectionObj = rejection.serviceException || rejection.requestError && (rejection.requestError.serviceException || rejection.requestError.policyException); + rejectionObj.text = this.getFormattedMessage(rejectionObj.text || ServerErrors.MESSAGE_ERROR, rejectionObj.variables); + } + + this.title = ServerErrors.ERROR_TITLE; + this.message = rejectionObj.text || response.statusText || ServerErrors.DEFAULT_ERROR; + this.messageId = rejectionObj.messageId; + this.status = response.status; + this.severity = SEVERITY.ERROR; + } + } + + + private getFormattedMessage = (text: string, variables: Array<string>): string => { //OLD CODE + // Remove the "Error: " text at the begining + if (text.trim().indexOf("Error:") === 0) { + text = text.replace("Error:", "").trim(); + } + + //mshitrit DE199895 bug fix + let count: number = 0; + variables.forEach(function (item) { + variables[count] = item ? item.replace('<', '<').replace('>', '>') : ''; + count++; + }); + + // Format the message in case has array to <ul><li> + text = text.replace(/\[%(\d+)\]/g, function (_, m) { + let tmp = []; + let list = variables[--m].split(";"); + list.forEach(function (item) { + tmp.push("<li>" + item + "</li>"); + }); + return "<ul>" + tmp.join("") + "</ul>"; + }); + + // Format the message %1 %2 + text = text.format(variables); + + return text; + + }; +}
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/app.module.ts b/catalog-ui/src/app/ng2/app.module.ts index 57adb8fd66..88c2d876c4 100644 --- a/catalog-ui/src/app/ng2/app.module.ts +++ b/catalog-ui/src/app/ng2/app.module.ts @@ -32,14 +32,13 @@ import { } from "./utils/ng1-upgraded-provider"; import {ConfigService} from "./services/config.service"; import {HttpModule} from '@angular/http'; +import {HttpService} from './services/http.service'; import {AuthenticationService} from './services/authentication.service'; import {Cookie2Service} from "./services/cookie.service"; import {ComponentServiceNg2} from "./services/component-services/component.service"; import {ServiceServiceNg2} from "./services/component-services/service.service"; import {ComponentInstanceServiceNg2} from "./services/component-instance-services/component-instance.service"; -import { InterceptorService } from 'ng2-interceptors'; import { XHRBackend, RequestOptions } from '@angular/http'; -import {HttpInterceptor} from "./services/http.interceptor.service"; import { SearchBarComponent } from './shared/search-bar/search-bar.component'; import { SearchWithAutoCompleteComponent } from './shared/search-with-autocomplete/search-with-autocomplete.component'; @@ -49,16 +48,6 @@ export function configServiceFactory(config:ConfigService) { return () => config.loadValidationConfiguration(); } -export function interceptorFactory(xhrBackend: XHRBackend, requestOptions: RequestOptions){ - let service = new InterceptorService(xhrBackend, requestOptions); - service.addInterceptor(new HttpInterceptor()); - return service; -} - - -// export function httpServiceFactory(backend: XHRBackend, options: RequestOptions) { -// return new HttpService(backend, options); -// } @NgModule({ declarations: [ @@ -87,6 +76,7 @@ export function interceptorFactory(xhrBackend: XHRBackend, requestOptions: Reque ConfigService, ComponentServiceNg2, ServiceServiceNg2, + HttpService, ComponentInstanceServiceNg2, { provide: APP_INITIALIZER, @@ -94,11 +84,6 @@ export function interceptorFactory(xhrBackend: XHRBackend, requestOptions: Reque deps: [ConfigService], multi: true }, - { - provide: InterceptorService, - useFactory: interceptorFactory, - deps: [XHRBackend, RequestOptions] - } ], bootstrap: [AppComponent] }) diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.ts index 8b27ab7e3a..3339b605ca 100644 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.ts +++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.ts @@ -35,7 +35,7 @@ export class UiElementIntegerInputComponent extends UiElementBase implements UiE onSave() { if (!this.control.invalid){ - this.baseEmitter.emit(JSON.parse(this.value)); + this.baseEmitter.emit(this.value ? JSON.parse(this.value) : this.value); } } } diff --git a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html index 38de3ce649..2b58d0f086 100644 --- a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html +++ b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html @@ -1,5 +1,5 @@ <div class="properties-table"> - <loader [display]="isLoading" size="large" [relative]="false"></loader> + <loader [display]="isLoading" [size]="'large'" [relative]="true"></loader> <div class="table-header"> <div class="table-cell col1">Property Name</div> <div class="table-cell col3">From Instance</div> diff --git a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts index 30cdb89d8e..736655f3f7 100644 --- a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts +++ b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts @@ -57,7 +57,7 @@ export class InputsTableComponent { openDeleteModal = (input:InputFEModel) => { this.selectedInputToDelete = input; - this.modalService.openActionModal("Delete Input", "Are you sure you want to delete this input?", "Delete", this.onDeleteInput, "Close"); + this.modalService.createActionModal("Delete Input", "Are you sure you want to delete this input?", "Delete", this.onDeleteInput, "Close").instance.open(); } } diff --git a/catalog-ui/src/app/ng2/components/loader/loader.component.html b/catalog-ui/src/app/ng2/components/loader/loader.component.html index 0e13cee674..a62aa114d9 100644 --- a/catalog-ui/src/app/ng2/components/loader/loader.component.html +++ b/catalog-ui/src/app/ng2/components/loader/loader.component.html @@ -1,4 +1,5 @@ -<div *ngIf="display" data-tests-id="tlv-loader"> +<div *ngIf="isVisible" data-tests-id="tlv-loader" [ngClass]="relative ? 'loader-relative' : 'loader-fixed'" + [style.top]="offset.top" [style.left]="offset.left" [style.width]="offset.width" [style.height]="offset.height"> <div class="tlv-loader-back" [ngClass]="{'tlv-loader-relative':relative}"></div> <div class="tlv-loader {{size}}"></div> </div> diff --git a/catalog-ui/src/app/ng2/components/loader/loader.component.less b/catalog-ui/src/app/ng2/components/loader/loader.component.less index 054b6021a1..ddb9915176 100644 --- a/catalog-ui/src/app/ng2/components/loader/loader.component.less +++ b/catalog-ui/src/app/ng2/components/loader/loader.component.less @@ -16,6 +16,22 @@ z-index: 10002; } +.loader-relative { + display: block; + position:absolute; + width: 100%; + height:100%; +} + +.loader-fixed { + display: block; + position:fixed; + top:0; + left:0; + width: 100%; + height:100%; +} + @keyframes fadein { from { opacity: 0; } to { opacity: 0.8; } diff --git a/catalog-ui/src/app/ng2/components/loader/loader.component.ts b/catalog-ui/src/app/ng2/components/loader/loader.component.ts index 92278d3ff5..f66aa551e2 100644 --- a/catalog-ui/src/app/ng2/components/loader/loader.component.ts +++ b/catalog-ui/src/app/ng2/components/loader/loader.component.ts @@ -21,7 +21,7 @@ /** * Created by rc2122 on 6/6/2017. */ -import {Component, Input, ElementRef, Renderer, SimpleChanges} from "@angular/core"; +import { Component, Input, ViewContainerRef, SimpleChanges} from "@angular/core"; @Component({ selector: 'loader', templateUrl: './loader.component.html', @@ -29,13 +29,20 @@ import {Component, Input, ElementRef, Renderer, SimpleChanges} from "@angular/co }) export class LoaderComponent { - @Input() display:boolean; - @Input() size:string;// small || medium || large - @Input() relative: boolean; - @Input() elementSelector: string; // optional. If is relative is set to true, option to pass in element that loader should be relative to. Otherwise, will be relative to parent element. + @Input() display: boolean; + @Input() size: string;// small || medium || large + @Input() relative: boolean; // If is relative is set to true, loader will appear over parent element. Otherwise, will be fixed over the entire page. + @Input() loaderDelay: number; //optional - number of ms to delay loader display. + private isVisible: boolean = false; + private offset : { + top: string; + left: string; + width: string; + height: string; + }; - constructor (private el: ElementRef, private renderer: Renderer){ + constructor(private viewContainerRef: ViewContainerRef) { } ngOnInit() { @@ -49,46 +56,31 @@ export class LoaderComponent { ngOnChanges(changes: SimpleChanges) { if(changes.display){ - if (this.display) { - this.changeLoaderDisplay(false); //display is set to true, so loader will appear unless we explicitly tell it not to. - window.setTimeout((): void => { - this.display && this.changeLoaderDisplay(true); //only show loader if we still need to display it. - }, 500); - } else { - window.setTimeout(():void => { - this.changeLoaderDisplay(false); - }, 0); - } + this.changeLoaderDisplay(this.display); } } - changeLoaderDisplay = (display: boolean): void => { + private changeLoaderDisplay = (display: boolean): void => { if (display) { - this.calculateLoaderPosition(); - this.renderer.setElementStyle(this.el.nativeElement, 'display', 'block'); + window.setTimeout((): void => { + this.display && this.showLoader(); //only show loader if this.display has not changed in the meanwhile. + }, this.loaderDelay || 0); } else { - this.renderer.setElementStyle(this.el.nativeElement, 'display', 'none'); + this.isVisible = false; } } - calculateLoaderPosition = () => { - if (this.relative === true) { // Can change the parent position to relative without causing style issues. - let parent = (this.elementSelector) ? angular.element(this.elementSelector).get(0) : this.el.nativeElement.parentElement; - this.renderer.setElementStyle(parent, 'position', 'relative'); - this.setLoaderPosition(0, 0); //will be relative to parent and appear over specified element - //TODO: DONT force parent to have position relative; set inner div's style instead of outer element - // let parentPos: ClientRect = this.el.nativeElement.parentElement.getBoundingClientRect(); - // this.setLoaderPosition(parentPos.top, parentPos.left, parentPos.width, parentPos.height); - } else { - this.setLoaderPosition(0, 0); //will appear over whole page + private showLoader = () => { + if (this.relative === true) { + let parentElement = this.viewContainerRef.element.nativeElement.parentElement; + this.offset = { + left: (parentElement.offsetLeft) ? parentElement.offsetLeft + "px" : undefined, + top: (parentElement.offsetTop) ? parentElement.offsetTop + "px" : undefined, + width: (parentElement.offsetWidth) ? parentElement.offsetWidth + "px" : undefined, + height: (parentElement.offsetHeight) ? parentElement.offsetHeight + "px" : undefined + }; } + this.isVisible = true; } - setLoaderPosition = (top:number, left:number, width?:number, height?:number): void => { - this.renderer.setElementStyle(this.el.nativeElement, 'position', 'absolute'); - this.renderer.setElementStyle(this.el.nativeElement, 'top', top? top.toString() : "0"); - this.renderer.setElementStyle(this.el.nativeElement, 'left', left? left.toString() : "0"); - this.renderer.setElementStyle(this.el.nativeElement, 'width', width? width.toString() : "100%"); - this.renderer.setElementStyle(this.el.nativeElement, 'height', height? height.toString() : "100%"); - }; } diff --git a/catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.html b/catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.html new file mode 100644 index 0000000000..433bd4fd6f --- /dev/null +++ b/catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.html @@ -0,0 +1,5 @@ +<div class="error-message-component"> + <div>Error code: {{input.messageId}}</div> + <div>Status code: {{input.status}}</div> + <div class="error-message">{{input.message}}</div> +</div>
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.ts b/catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.ts new file mode 100644 index 0000000000..c0d6673412 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.ts @@ -0,0 +1,38 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +/** + * Created by ngordon on 7/30/2017. + */ +import { Component, Input } from '@angular/core'; +import { ServerErrorResponse } from 'app/models'; + +@Component({ + selector: 'error-message', + templateUrl: './error-message.component.html' +}) + +export class ErrorMessageComponent { + @Input() input: ServerErrorResponse; + + constructor() { + } + +} diff --git a/catalog-ui/src/app/ng2/components/modal/modal.component.html b/catalog-ui/src/app/ng2/components/modal/modal.component.html index cc411bc751..d843867cdb 100644 --- a/catalog-ui/src/app/ng2/components/modal/modal.component.html +++ b/catalog-ui/src/app/ng2/components/modal/modal.component.html @@ -1,10 +1,14 @@ <div class="custom-modal {{input.size}}"> <div class="ng2-modal-content"> - <div class="ng2-modal-header"> + <div class="ng2-modal-header modal-type-{{input.type}}"> <span class="title">{{ input.title }}</span> <span class="close-button" (click)="close()"></span> </div> - <div class="ng2-modal-body" >{{input.content}}</div> + <div class="ng2-modal-body" > + <div *ngIf="input.content">{{input.content}}</div> + <div #dynamicContentContainer></div> + </div> + <div class="ng2-modal-footer"> <button *ngFor="let button of input.buttons" class="tlv-btn {{button.cssClass}}" diff --git a/catalog-ui/src/app/ng2/components/modal/modal.component.less b/catalog-ui/src/app/ng2/components/modal/modal.component.less index a35f829e6a..c87162afb0 100644 --- a/catalog-ui/src/app/ng2/components/modal/modal.component.less +++ b/catalog-ui/src/app/ng2/components/modal/modal.component.less @@ -37,12 +37,25 @@ display: -ms-flexbox; display: flex; text-align: left; - border-bottom: solid 1px @main_color_o; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0px 20px; + + &.modal-type-standard { + border-bottom: solid 3px @main_color_a; + } + + &.modal-type-error { + border-bottom: solid 3px @func_color_q; + } + + &.modal-type-alert{ + border-bottom: solid 3px @main_color_h; + } + .title{ + .s_18_m; -webkit-box-flex: 999; -ms-flex-positive: 999; flex-grow: 999; diff --git a/catalog-ui/src/app/ng2/components/modal/modal.component.ts b/catalog-ui/src/app/ng2/components/modal/modal.component.ts index 09fb9abdd1..89db8d1140 100644 --- a/catalog-ui/src/app/ng2/components/modal/modal.component.ts +++ b/catalog-ui/src/app/ng2/components/modal/modal.component.ts @@ -22,7 +22,7 @@ * Created by rc2122 on 6/1/2017. */ import { Component, ElementRef, Input, OnInit, OnDestroy } from '@angular/core'; -//import {ViewContainerRef, ViewChild} from '@angular/core'; +import {ViewContainerRef, ViewChild} from '@angular/core'; import * as $ from 'jquery'; import { ButtonsModelMap, ModalModel } from 'app/models'; @@ -34,9 +34,9 @@ import { ButtonsModelMap, ModalModel } from 'app/models'; export class ModalComponent implements OnInit, OnDestroy { @Input() input: ModalModel; + @Input() dynamicContent: any; + @ViewChild('dynamicContentContainer', { read: ViewContainerRef }) dynamicContentContainer: ViewContainerRef; //Allows for custom component as body instead of simple message. See ModalService.createActionModal for implementation details, and HttpService's catchError() for example. private modalElement: JQuery; - //@ViewChild('modalBody', { read: ViewContainerRef }) modalContainer: ViewContainerRef; //TODO: allow for custom component as body instead of simple message - constructor( el: ElementRef ) { this.modalElement = $(el.nativeElement); diff --git a/catalog-ui/src/app/ng2/components/modal/modal.module.ts b/catalog-ui/src/app/ng2/components/modal/modal.module.ts index d77be2cd23..892f6993dd 100644 --- a/catalog-ui/src/app/ng2/components/modal/modal.module.ts +++ b/catalog-ui/src/app/ng2/components/modal/modal.module.ts @@ -1,16 +1,19 @@ import { NgModule } from "@angular/core"; import { CommonModule } from '@angular/common'; import { ModalService } from 'app/ng2/services/modal.service'; -import { ModalComponent } from "app/ng2/components/modal/modal.component" +import { ModalComponent } from "app/ng2/components/modal/modal.component"; +import { ErrorMessageComponent } from "./error-message/error-message.component"; @NgModule({ declarations: [ ModalComponent, + ErrorMessageComponent ], imports: [CommonModule], exports: [], - entryComponents: [ - ModalComponent + entryComponents: [ //need to add anything that will be dynamically created + ModalComponent, + ErrorMessageComponent ], providers: [ModalService] }) diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html index c57998af5e..a9dc499e7d 100644 --- a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html +++ b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html @@ -1,5 +1,5 @@ <div class="properties-table"> - <loader [display]="isLoading" size="large" [relative]="false"></loader> + <loader [display]="isLoading" [size]="'large'" [relative]="true" [loaderDelay]="500"></loader> <div class="table-header"> <div class="table-cell col1">Property Name</div> <div class="table-cell col2">Type</div> diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.module.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.module.ts index 3a5daba711..1c6f51314d 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.module.ts +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.module.ts @@ -45,7 +45,6 @@ import { KeysPipe } from 'app/ng2/pipes/keys.pipe'; import {TooltipModule} from "../../components/tooltip/tooltip.module"; import { ComponentModeService } from "app/ng2/services/component-mode.service" import {LoaderComponent} from "app/ng2/components/loader/loader.component" -import {HttpInterceptor} from "../../services/http.interceptor.service"; @NgModule({ declarations: [ @@ -81,7 +80,7 @@ import {HttpInterceptor} from "../../services/http.interceptor.service"; // PopoverContentComponent, // PopoverComponent ], - providers: [PropertiesService, HierarchyNavService, PropertiesUtils, DataTypeService,HttpInterceptor, ContentAfterLastDotPipe, GroupByPipe, KeysPipe, ComponentModeService] + providers: [PropertiesService, HierarchyNavService, PropertiesUtils, DataTypeService, ContentAfterLastDotPipe, GroupByPipe, KeysPipe, ComponentModeService] }) export class PropertiesAssignmentModule { diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html index 0b50357a5c..be7e03dccd 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html @@ -43,7 +43,7 @@ <tabs #hierarchyNavTabs tabStyle="simple-tabs"> <tab tabTitle="Composition"> <div class="hierarchy-nav-container"> - <loader [display]="loadingInstances" size="medium" [relative]="true"></loader> + <loader [display]="loadingInstances" [size]="'medium'" [relative]="true" [loaderDelay]="500"></loader> <div class="hierarchy-header white-sub-header"> <span tooltip="{{component.name}}">{{component.name}}</span> </div> diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less index 8151d001e8..03974bf723 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less @@ -1,5 +1,5 @@ @import '../../../../assets/styles/variables'; -//@import url('https://fonts.googleapis.com/css?family=Open+Sans'); +@import '../../../../assets/styles/mixins'; @ng2-shadow-gray: #f8f8f8; @ng2-light-gray: #eaeaea; @ng2-medium-gray: #d2d2d2; @@ -36,7 +36,7 @@ /deep/ .tab { padding: 12px; flex: 1; - font-weight:bold; + font-family: @font-opensans-regular; &.active { color:#009fdb; @@ -44,6 +44,7 @@ border-top: solid 4px #009fdb; background-color: white; padding-top:9px; + font-family: @font-opensans-medium; } .tab-indication { @@ -129,8 +130,12 @@ flex: none; padding: 8px 20px 0; font-size: 14px; - font-weight:bold; line-height:30px; + font-family: @font-opensans-regular; + + &.active { + font-family: @font-opensans-medium; + } } } @@ -146,8 +151,6 @@ background-color: #fffefe; box-shadow: 0px 1px 0.99px 0.01px rgba(34, 31, 31, 0.15); border-bottom: #d2d2d2 solid 1px; - color:#009fdb; - font-weight:bold; font-size:14px; text-align:left; flex:0 0 auto; @@ -155,6 +158,8 @@ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; + .a_13_r; + text-transform: uppercase; &.hierarchy-header { padding-left:20px; diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts index 6782b72fa2..82754f13f0 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts @@ -105,7 +105,7 @@ export class PropertiesAssignmentComponent { }); this.loadingInputs = false; - }); + }, error => {}); //ignore error this.componentServiceNg2 .getComponentResourceInstances(this.component) .subscribe(response => { @@ -120,7 +120,7 @@ export class PropertiesAssignmentComponent { this.loadingProperties = false; } this.selectFirstInstanceByDefault(); - }); + }, error => {}); //ignore error }; @@ -159,7 +159,7 @@ export class PropertiesAssignmentComponent { this.processInstancePropertiesResponse(instanceBePropertiesMap, true); this.loadingProperties = false; - }); + }, error => {}); //ignore error } else { this.componentInstanceServiceNg2 .getComponentInstanceProperties(this.component, resourceInstance.uniqueId) @@ -167,7 +167,7 @@ export class PropertiesAssignmentComponent { instanceBePropertiesMap[resourceInstance.uniqueId] = response; this.processInstancePropertiesResponse(instanceBePropertiesMap, false); this.loadingProperties = false; - }); + }, error => {}); //ignore error } if(resourceInstance.componentName === "vnfConfiguration") { @@ -203,16 +203,16 @@ export class PropertiesAssignmentComponent { this.componentInstanceServiceNg2 .updateInstanceInput(this.component, this.selectedInstanceData.uniqueId, inputToUpdate) .subscribe(response => { - console.log("update resource instance input and got this response: ", response); - }) + console.log("Update resource instance input response: ", response); + }, error => {}); //ignore error } else { let propertyBe = new PropertyBEModel(event); this.componentInstanceServiceNg2 .updateInstanceProperty(this.component, this.selectedInstanceData.uniqueId, propertyBe) .subscribe(response => { - console.log("updated resource instance property and got this response: ", response); - }); + console.log("Update resource instance property response: ", response); + }, error => {}); //ignore error console.log(event); } @@ -226,7 +226,7 @@ export class PropertiesAssignmentComponent { .updateComponentInput(this.component, inputToUpdate) .subscribe(response => { console.log("updated the component input and got this response: ", response); - }) + }, error => {}); //ignore error }; @@ -322,7 +322,7 @@ export class PropertiesAssignmentComponent { this.inputs.push(newInput); this.updatePropertyValueAfterDeclare(newInput); }); - }); + }, error => {}); //ignore error }; @@ -373,7 +373,7 @@ export class PropertiesAssignmentComponent { // this.propertiesService.undoDisableRelatedProperties(propToEnable, response.inputPath); // } // } - }); + }, error => {}); //ignore error }; @@ -391,7 +391,7 @@ export class PropertiesAssignmentComponent { this.renderer.invokeElementMethod(this.hierarchyNavTabs, 'triggerTabChange', ['Composition']); this.propertiesNavigationData = []; this.displayClearSearch = true; - }); + }, error => {}); //ignore error }; diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts index a04d23a16a..d8d991d218 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts @@ -44,9 +44,7 @@ export class PropertiesUtils { let propertyFeArray: Array<PropertyFEModel> = []; _.forEach(properties, (property: PropertyBEModel) => { - if (!this.dataTypeService.getDataTypeByTypeName(property.type)) { // if type not exist in data types remove property from list - console.log("ERROR: missing type " + property.type + " in dataTypes , of property ", property); - } else { + if (this.dataTypeService.getDataTypeByTypeName(property.type)) { // if type not exist in data types remove property from list let newFEProp: PropertyFEModel = new PropertyFEModel(property); //Convert property to FE diff --git a/catalog-ui/src/app/ng2/services/component-instance-services/component-instance.service.ts b/catalog-ui/src/app/ng2/services/component-instance-services/component-instance.service.ts index 0c499facff..27de59de82 100644 --- a/catalog-ui/src/app/ng2/services/component-instance-services/component-instance.service.ts +++ b/catalog-ui/src/app/ng2/services/component-instance-services/component-instance.service.ts @@ -25,14 +25,14 @@ import {sdc2Config} from "../../../../main"; import {PropertyBEModel} from "app/models"; import {CommonUtils} from "app/utils"; import {Component, ComponentInstance, InputModel} from "app/models"; -import {InterceptorService} from "ng2-interceptors/index"; +import { HttpService } from '../http.service'; @Injectable() export class ComponentInstanceServiceNg2 { protected baseUrl; - constructor(private http: InterceptorService) { + constructor(private http: HttpService) { this.baseUrl = sdc2Config.api.root + sdc2Config.api.component_api_root; } diff --git a/catalog-ui/src/app/ng2/services/component-services/component.service.ts b/catalog-ui/src/app/ng2/services/component-services/component.service.ts index cd593d5e3e..c648711d5d 100644 --- a/catalog-ui/src/app/ng2/services/component-services/component.service.ts +++ b/catalog-ui/src/app/ng2/services/component-services/component.service.ts @@ -30,8 +30,8 @@ import {ComponentGenericResponse} from "../responses/component-generic-response" import {sdc2Config} from "../../../../main"; import {InstanceBePropertiesMap} from "../../../models/properties-inputs/property-fe-map"; import {API_QUERY_PARAMS} from "app/utils"; -import {ComponentType, ServerTypeUrl} from "../../../utils/constants"; -import {InterceptorService} from "ng2-interceptors/index"; +import { ComponentType, ServerTypeUrl } from "../../../utils/constants"; +import { HttpService } from '../http.service'; declare var angular:angular.IAngularStatic; @@ -40,7 +40,7 @@ export class ComponentServiceNg2 { protected baseUrl; - constructor(private http:InterceptorService) { + constructor(private http:HttpService) { this.baseUrl = sdc2Config.api.root + sdc2Config.api.component_api_root; } @@ -54,7 +54,7 @@ export class ComponentServiceNg2 { return this.http.get(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/filteredDataByParams', {search: params}) .map((res:Response) => { return new ComponentGenericResponse().deserialize(res.json()); - }).do(error => console.log('server data:', error)); + }); } private getServerTypeUrl = (componentType:string):string => { diff --git a/catalog-ui/src/app/ng2/services/component-services/service.service.ts b/catalog-ui/src/app/ng2/services/component-services/service.service.ts index 1f5de18c04..ec912bbcf5 100644 --- a/catalog-ui/src/app/ng2/services/component-services/service.service.ts +++ b/catalog-ui/src/app/ng2/services/component-services/service.service.ts @@ -26,7 +26,7 @@ import { Response } from '@angular/http'; import {Service} from "app/models"; import { downgradeInjectable } from '@angular/upgrade/static'; import {sdc2Config} from "../../../../main"; -import {InterceptorService} from "ng2-interceptors/index"; +import { HttpService } from '../http.service'; @Injectable() @@ -34,7 +34,7 @@ export class ServiceServiceNg2 { protected baseUrl = ""; - constructor(private http: InterceptorService) { + constructor(private http: HttpService) { this.baseUrl = sdc2Config.api.root + sdc2Config.api.component_api_root; } diff --git a/catalog-ui/src/app/ng2/services/data-type.service.ts b/catalog-ui/src/app/ng2/services/data-type.service.ts index 48d32b7e69..30c02a4141 100644 --- a/catalog-ui/src/app/ng2/services/data-type.service.ts +++ b/catalog-ui/src/app/ng2/services/data-type.service.ts @@ -38,12 +38,14 @@ export class DataTypeService { } public getDataTypeByTypeName(typeName: string): DataTypeModel { + if (!this.dataTypes[typeName]) console.log("MISSING Datatype: " + typeName); return this.dataTypes[typeName]; } public getDerivedDataTypeProperties(dataTypeObj: DataTypeModel, propertiesArray: Array<DerivedFEProperty>, parentName: string) { //push all child properties to array + if (!dataTypeObj) return; if (dataTypeObj.properties) { dataTypeObj.properties.forEach((derivedProperty) => { if(dataTypeObj.name !== PROPERTY_DATA.OPENECOMP_ROOT || derivedProperty.name !== PROPERTY_DATA.SUPPLEMENTAL_DATA){//The requirement is to not display the property supplemental_data diff --git a/catalog-ui/src/app/ng2/services/http.interceptor.service.ts b/catalog-ui/src/app/ng2/services/http.interceptor.service.ts deleted file mode 100644 index c90bfd2848..0000000000 --- a/catalog-ui/src/app/ng2/services/http.interceptor.service.ts +++ /dev/null @@ -1,162 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import 'rxjs/add/operator/map'; -import 'rxjs/add/operator/toPromise'; -import 'rxjs/Rx'; -import {sdc2Config} from './../../../main'; -import {Interceptor, InterceptedRequest, InterceptedResponse} from 'ng2-interceptors'; -import {SharingService} from "../../services/sharing-service"; -import {ReflectiveInjector} from '@angular/core'; -import {Cookie2Service} from "./cookie.service"; -import {UUID} from "angular2-uuid"; -import {Dictionary} from "../../utils/dictionary/dictionary"; -import {SEVERITY} from "../../utils/constants"; -import {IServerMessageModalModel} from "../../view-models/modals/message-modal/message-server-modal/server-message-modal-view-model"; - - -export class HttpInterceptor implements Interceptor { - - private cookieService:Cookie2Service; - private sharingService:SharingService; - - constructor() { - let injector = ReflectiveInjector.resolveAndCreate([Cookie2Service, SharingService]); - this.cookieService = injector.get(Cookie2Service); - this.sharingService = injector.get(SharingService); - } - - public interceptBefore(request:InterceptedRequest):InterceptedRequest { - /** - * For every request to the server, that the service id, or resource id is sent in the URL, need to pass UUID in the header. - * Check if the unique id exists in uuidMap, and if so get the UUID and add it to the header. - */ - request.options.headers.append(this.cookieService.getUserIdSuffix(), this.cookieService.getUserId()); - request.options.withCredentials = true; - var uuidValue = this.getUuidValue(request.url); - if (uuidValue != '') { - request.options.headers.set('X-ECOMP-ServiceID', uuidValue); - } - request.options.headers.set('X-ECOMP-RequestID', UUID.UUID()); - return request; - } - - public interceptAfter(response:InterceptedResponse):InterceptedResponse { - - if (response.response.status !== 200 && response.response.status !== 201) { - this.responseError(response.response.json()); - //console.log("Error from BE:",response); - } - return response; - } - - private getUuidValue = (url:string):string => { - let map:Dictionary<string, string> = this.sharingService.getUuidMap(); - if (map && url.indexOf(sdc2Config.api.root) > 0) { - map.forEach((key:string) => { - if (url.indexOf(key) !== -1) { - return this.sharingService.getUuidValue(key); - } - }); - } - return ''; - }; - - public formatMessageArrays = (message:string, variables:Array<string>)=> { - return message.replace(/\[%(\d+)\]/g, function (_, m) { - let tmp = []; - let list = variables[--m].split(";"); - list.forEach(function (item) { - tmp.push("<li>" + item + "</li>"); - }); - return "<ul>" + tmp.join("") + "</ul>"; - }); - }; - - public responseError = (rejection:any)=> { - - let text:string; - let variables; - let messageId:string = ""; - let isKnownException = false; - - if (rejection && rejection.serviceException) { - text = rejection.serviceException.text; - variables = rejection.serviceException.variables; - messageId = rejection.serviceException.messageId; - isKnownException = true; - } else if (rejection && rejection.requestError && rejection.requestError.serviceException) { - text = rejection.requestError.serviceException.text; - variables = rejection.requestError.serviceException.variables; - messageId = rejection.requestError.serviceException.messageId; - isKnownException = true; - } else if (rejection && rejection.requestError && rejection.requestError.policyException) { - text = rejection.requestError.policyException.text; - variables = rejection.requestError.policyException.variables; - messageId = rejection.requestError.policyException.messageId; - isKnownException = true; - } else if (rejection) { - text = 'Wrong error format from server'; - console.error(text); - isKnownException = false; - } - - let data:IServerMessageModalModel; - if (isKnownException) { - // Remove the "Error: " text at the begining - if (text.trim().indexOf("Error:") === 0) { - text = text.replace("Error:", "").trim(); - } - - //mshitrit DE199895 bug fix - let count:number = 0; - variables.forEach(function (item) { - variables[count] = item ? item.replace('<', '<').replace('>', '>') : ''; - count++; - }); - - // Format the message in case has array to <ul><li> - text = this.formatMessageArrays(text, variables); - - // Format the message %1 %2 - text = text.format(variables); - - // Need to inject the MessageService manually to prevent circular dependencies (because MessageService use $templateCache that use $http). - data = { - title: 'Error', - message: text, - messageId: messageId, - status: rejection.status, - severity: SEVERITY.ERROR - }; - } else { - // Need to inject the MessageService manually to prevent circular dependencies (because MessageService use $templateCache that use $http). - data = { - title: 'Error', - message: rejection.status !== -1 ? rejection.statusText : "Error getting response from server", - messageId: messageId, - status: rejection.status, - severity: SEVERITY.ERROR - }; - } - - console.error('ERROR data',data); - } -} diff --git a/catalog-ui/src/app/ng2/services/http.service.ts b/catalog-ui/src/app/ng2/services/http.service.ts index 5cd5a10000..21fe09023a 100644 --- a/catalog-ui/src/app/ng2/services/http.service.ts +++ b/catalog-ui/src/app/ng2/services/http.service.ts @@ -24,14 +24,18 @@ import {Observable} from 'rxjs/Observable'; import {UUID} from 'angular2-uuid'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/catch'; +import 'rxjs/add/observable/throw'; import {Dictionary} from "../../utils/dictionary/dictionary"; import {SharingService, CookieService} from "app/services"; import {sdc2Config} from './../../../main'; +import { ModalService } from "app/ng2/services/modal.service"; +import { ServerErrorResponse } from "app/models"; +import { ErrorMessageComponent } from 'app/ng2/components/modal/error-message/error-message.component'; @Injectable() export class HttpService extends Http { - constructor(backend:XHRBackend, options:RequestOptions, private sharingService:SharingService, private cookieService: CookieService) { + constructor(backend: XHRBackend, options: RequestOptions, private sharingService: SharingService, private cookieService: CookieService, private modalService: ModalService) { super(backend, options); this._defaultOptions.withCredentials = true; this._defaultOptions.headers.append(cookieService.getUserIdSuffix(), cookieService.getUserId()); @@ -64,7 +68,7 @@ export class HttpService extends Http { } request.headers.set('X-ECOMP-RequestID', UUID.UUID()); } - return super.request(request, options).catch(this.catchAuthError(this)); + return super.request(request, options).catch((err) => this.catchError(err)); } private getUuidValue = (url: string) :string => { @@ -79,15 +83,14 @@ export class HttpService extends Http { return ''; } - private catchAuthError(self:HttpService) { - // we have to pass HttpService's own instance here as `self` - return (res:Response) => { - console.log(res); - if (res.status === 401 || res.status === 403) { - // if not authenticated - console.log(res); - } - return Observable.throw(res); - }; - } + private catchError = (response: Response): Observable<any> => { + + let modalInstance = this.modalService.createErrorModal("OK"); + let errorResponse: ServerErrorResponse = new ServerErrorResponse(response); + this.modalService.addDynamicContentToModal(modalInstance, ErrorMessageComponent, errorResponse); + modalInstance.instance.open(); + + return Observable.throw(response); + }; + } diff --git a/catalog-ui/src/app/ng2/services/modal.service.ts b/catalog-ui/src/app/ng2/services/modal.service.ts index 32192f40c2..65ff870769 100644 --- a/catalog-ui/src/app/ng2/services/modal.service.ts +++ b/catalog-ui/src/app/ng2/services/modal.service.ts @@ -11,10 +11,10 @@ export class ModalService { constructor(private componentFactoryResolver: ComponentFactoryResolver, private applicationRef: ApplicationRef) { } - /* Shortcut method to open a simple modal with title, message, and close button that simply closes the modal. */ + /* Shortcut method to open an alert modal with title, message, and close button that simply closes the modal. */ public openAlertModal(title: string, message: string, closeButtonText?:string) { let closeButton: ButtonModel = new ButtonModel(closeButtonText || 'Close', 'grey', this.closeCurrentModal); - let modalModel: ModalModel = new ModalModel('sm', title, message, [closeButton]); + let modalModel: ModalModel = new ModalModel('sm', title, message, [closeButton], 'alert'); this.createCustomModal(modalModel).instance.open(); } @@ -22,19 +22,28 @@ export class ModalService { /** * Shortcut method to open a basic modal with title, message, and an action button with callback, as well as close button. * NOTE: To close the modal from within the callback, use modalService.closeCurrentModal() //if you run into zone issues with callbacks see:https://stackoverflow.com/questions/36566698/how-to-dynamically-create-bootstrap-modals-as-angular2-components + * NOTE: To add dynamic content to the modal, use modalService.addDynamicContentToModal(). First param is the return value of this function -- componentRef<ModalComponent>. * @param title Heading for modal * @param message Message for modal * @param actionButtonText Blue call to action button * @param actionButtonCallback function to invoke when button is clicked * @param cancelButtonText text for close/cancel button */ - public openActionModal = (title:string, message:string, actionButtonText:string, actionButtonCallback:Function, cancelButtonText:string) => { + public createActionModal = (title: string, message: string, actionButtonText: string, actionButtonCallback: Function, cancelButtonText: string): ComponentRef<ModalComponent> => { let actionButton: ButtonModel = new ButtonModel(actionButtonText, 'blue', actionButtonCallback); let cancelButton: ButtonModel = new ButtonModel(cancelButtonText, 'grey', this.closeCurrentModal); let modalModel: ModalModel = new ModalModel('sm', title, message, [actionButton, cancelButton]); - this.createCustomModal(modalModel).instance.open(); + let modalInstance: ComponentRef<ModalComponent> = this.createCustomModal(modalModel); + return modalInstance; + } + + + public createErrorModal = (closeButtonText?: string, errorMessage?: string):ComponentRef<ModalComponent> => { + let closeButton: ButtonModel = new ButtonModel(closeButtonText || 'Close', 'grey', this.closeCurrentModal); + let modalModel: ModalModel = new ModalModel('sm', 'Error', errorMessage, [closeButton], 'error'); + let modalInstance: ComponentRef<ModalComponent> = this.createCustomModal(modalModel); + return modalInstance; } - /* Use this method to create a modal with title, message, and completely custom buttons. Use response.instance.open() to open */ public createCustomModal = (customModalData: ModalModel): ComponentRef<ModalComponent> => { @@ -53,6 +62,14 @@ export class ModalService { } + public addDynamicContentToModal = (modalInstance: ComponentRef<ModalComponent>, dynamicComponentType: Type<any>, dynamicComponentInput: any) => { + + let dynamicContent = this.createDynamicComponent(dynamicComponentType, modalInstance.instance.dynamicContentContainer); + dynamicContent.instance.input = dynamicComponentInput; + modalInstance.instance.dynamicContent = dynamicContent; + return modalInstance; + } + //Creates a component dynamically (aka during runtime). If a view container is not specified, it will append the new component to the app root. //To subscribe to an event from invoking component: componentRef.instance.clicked.subscribe((m) => console.log(m.name)); private createDynamicComponent<T>(componentType: Type<T>, viewContainerRef?:ViewContainerRef): ComponentRef<any> { diff --git a/catalog-ui/src/app/services/event-listener-service.ts b/catalog-ui/src/app/services/event-listener-service.ts index 1c796230c6..96f9e17641 100644 --- a/catalog-ui/src/app/services/event-listener-service.ts +++ b/catalog-ui/src/app/services/event-listener-service.ts @@ -48,7 +48,7 @@ export class EventListenerService implements IEventListenerService { // Only insert the callback if the callback is different from existing callbacks. for (let i = 0; i < callbacks.length; i++) { - if (callbacks[i].toString() === callback.toString()) { + if (callbacks[i].callback.toString() === callback.toString()) { return; // Do not add this callback. } } diff --git a/catalog-ui/src/app/utils/constants.ts b/catalog-ui/src/app/utils/constants.ts index ffdf6fdaa2..6ec6a7762b 100644 --- a/catalog-ui/src/app/utils/constants.ts +++ b/catalog-ui/src/app/utils/constants.ts @@ -167,6 +167,12 @@ export class ModalType { static ALERT = 'alert'; } +export class ServerErrors { + static ERROR_TITLE = 'Error'; + static DEFAULT_ERROR = 'Error getting response from server'; + static MESSAGE_ERROR = 'Wrong error format from server'; +} + export class GraphColors { public static NOT_CERTIFIED_LINK = 'rgb(218,31,61)'; public static VL_LINK = 'rgb(216,216,216)'; diff --git a/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view-model.ts b/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view-model.ts index 37b9b9db9c..f77a29b003 100644 --- a/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view-model.ts +++ b/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view-model.ts @@ -22,6 +22,7 @@ import {IUserProperties} from "app/models"; import {MenuItemGroup, MenuItem} from "app/utils"; import {CacheService} from "app/services"; +declare var PunchOutRegistry; export class BreadcrumbsMenuItem { key:string; @@ -48,7 +49,7 @@ export interface IOnboardVendorViewModelScope extends ng.IScope { topNavRootMenu:MenuItemGroup; user:IUserProperties; version:string; - isLoading: boolean; + isLoading:boolean; } export class OnboardVendorViewModel { @@ -66,10 +67,13 @@ export class OnboardVendorViewModel { this.$scope.isLoading = true; - $.getScript("/onboarding/punch-outs_en.js", () => { + PunchOutRegistry.loadOnBoarding(()=> { this.$scope.isLoading = false; }); + this.initScope(); + } + private initScope = ():void => { this.$scope.vendorData = { breadcrumbs: { selectedKeys: [] @@ -89,6 +93,7 @@ export class OnboardVendorViewModel { this.$scope.topNavMenuModel = []; this.$scope.user = this.cacheService.get('user'); + } updateBreadcrumbsPath = (selectedKeys:Array<string>):ng.IPromise<boolean> => { @@ -140,6 +145,7 @@ export class OnboardVendorViewModel { let topNavRootMenu = topNavMenuModel[0]; let onboardItem = topNavRootMenu.menuItems[topNavRootMenu.selectedIndex]; let originalCallback = onboardItem.callback; + //noinspection TypeScriptValidateTypes onboardItem.callback = (...args) => { let ret = this.updateBreadcrumbsPath([]); return originalCallback && originalCallback.apply(undefined, args) || ret; diff --git a/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view.html b/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view.html index 56a36863e1..eec7c4758d 100644 --- a/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view.html +++ b/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view.html @@ -1,6 +1,6 @@ <div class="sdc-catalog-container"> - <loader ng-init="isLoading=true" data-display="isLoading"></loader> + <loader data-display="isLoading"></loader> <div class="w-sdc-main-container"> <punch-out name="'onboarding/vendor'" data="vendorData" user="user" on-event="onVendorEvent"></punch-out> </div> diff --git a/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.ts b/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.ts index f4ce1d8bc4..5d22d65f52 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.ts +++ b/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.ts @@ -54,7 +54,6 @@ export class ActivityLogViewModel { this.initScope(); this.$scope.setValidState(true); this.initSortedTableScope(); - this.$scope.updateSelectedMenuItem(); // Set default sorting this.$scope.sortBy = 'logDate'; diff --git a/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes-view-model.ts index ce7296cf04..312a663e8f 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes-view-model.ts +++ b/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes-view-model.ts @@ -53,7 +53,6 @@ export class AttributesViewModel { private ComponentServiceNg2: ComponentServiceNg2) { this.initComponentAttributes(); - this.$scope.updateSelectedMenuItem(); } private initComponentAttributes = () => { diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view-model.ts index 0e5a5fcd6c..4b9dd6fc00 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view-model.ts +++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view-model.ts @@ -47,6 +47,7 @@ export interface ICompositionViewModelScope extends IWorkspaceViewModelScope { onBackgroundClick():void; setSelectedInstance(componentInstance:ComponentInstance):void; printScreen():void; + isPNF():boolean; cacheComponentsInstancesFullData:Component; } @@ -90,7 +91,6 @@ export class CompositionViewModel { this.$scope.setValidState(true); this.initScope(); this.initGraphData(); - this.$scope.updateSelectedMenuItem(); this.registerGraphEvents(this.$scope); } @@ -242,7 +242,10 @@ export class CompositionViewModel { this.$scope.setComponent(this.$scope.currentComponent); this.$scope.updateSelectedComponent(); }; - + + this.$scope.isPNF = (): boolean => { + return this.$scope.selectedComponent.isResource() && (<Resource>this.$scope.selectedComponent).resourceType === ResourceType.PNF; + }; this.eventListenerService.registerObserverCallback(EVENTS.ON_CHECKOUT, this.$scope.reload); diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view-model.ts index c4c63fae06..f0c8b1d86b 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view-model.ts +++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view-model.ts @@ -249,7 +249,6 @@ export class ResourceArtifactsViewModel { this.$scope.isLoading = false; this.$scope.artifactType = this.artifactsUtils.getArtifactTypeByState(this.$state.current.name); - this.loadArtifacts(); this.$scope.getTitle = ():string => { return this.artifactsUtils.getTitle(this.$scope.artifactType, this.$scope.currentComponent); }; @@ -335,5 +334,7 @@ export class ResourceArtifactsViewModel { this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_NODE_SELECTED, this.loadArtifacts); this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_GRAPH_BACKGROUND_CLICKED, this.loadArtifacts); }); + + this.loadArtifacts(); } } diff --git a/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view-model.ts index 6990ad7241..86bc478048 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view-model.ts +++ b/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view-model.ts @@ -74,7 +74,6 @@ export class DeploymentArtifactsViewModel { private ModalsHandler:ModalsHandler, private ComponentServiceNg2: ComponentServiceNg2) { this.initScope(); - this.$scope.updateSelectedMenuItem(); } private initDescriptions = ():void => { diff --git a/catalog-ui/src/app/view-models/workspace/tabs/deployment/deployment-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/deployment/deployment-view-model.ts index 76be6c1141..feda7fe17f 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/deployment/deployment-view-model.ts +++ b/catalog-ui/src/app/view-models/workspace/tabs/deployment/deployment-view-model.ts @@ -86,7 +86,6 @@ export class DeploymentViewModel { this.$scope.setValidState(true); this.initScope(); this.initGraphData(); - this.$scope.updateSelectedMenuItem(); } diff --git a/catalog-ui/src/app/view-models/workspace/tabs/distribution/distribution-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/distribution/distribution-view-model.ts index 1852b6a83e..663361cd85 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/distribution/distribution-view-model.ts +++ b/catalog-ui/src/app/view-models/workspace/tabs/distribution/distribution-view-model.ts @@ -48,7 +48,6 @@ export class DistributionViewModel { private ModalsHandler:ModalsHandler) { this.initScope(); this.$scope.setValidState(true); - this.$scope.updateSelectedMenuItem(); } private initScope = ():void => { diff --git a/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts index 1dc326a7c0..98539d6a3b 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts +++ b/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts @@ -118,7 +118,6 @@ export class GeneralViewModel { this.initScopeValidation(); this.initScopeMethods(); this.initScope(); - this.$scope.updateSelectedMenuItem(); } diff --git a/catalog-ui/src/app/view-models/workspace/tabs/information-artifacts/information-artifacts-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/information-artifacts/information-artifacts-view-model.ts index ceaba3c187..b2fd4d68c0 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/information-artifacts/information-artifacts-view-model.ts +++ b/catalog-ui/src/app/view-models/workspace/tabs/information-artifacts/information-artifacts-view-model.ts @@ -65,7 +65,6 @@ export class InformationArtifactsViewModel { private ModalsHandler:ModalsHandler, private ComponentServiceNg2: ComponentServiceNg2) { this.initInformationalArtifacts(); - this.$scope.updateSelectedMenuItem(); } private initInformationalArtifacts = ():void => { diff --git a/catalog-ui/src/app/view-models/workspace/tabs/inputs/resource-input/resource-inputs-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/inputs/resource-input/resource-inputs-view-model.ts index 78865ac873..2e871a5f8d 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/inputs/resource-input/resource-inputs-view-model.ts +++ b/catalog-ui/src/app/view-models/workspace/tabs/inputs/resource-input/resource-inputs-view-model.ts @@ -45,7 +45,6 @@ export class ResourceInputsViewModel { constructor(private $scope:IInputsViewModelScope, private $q:ng.IQService, private ModalsHandler:ModalsHandler) { this.initScope(); - this.$scope.updateSelectedMenuItem(); } private initScope = ():void => { diff --git a/catalog-ui/src/app/view-models/workspace/tabs/inputs/service-input/service-inputs-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/inputs/service-input/service-inputs-view-model.ts index 013a0023f9..00f3347b74 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/inputs/service-input/service-inputs-view-model.ts +++ b/catalog-ui/src/app/view-models/workspace/tabs/inputs/service-input/service-inputs-view-model.ts @@ -62,7 +62,6 @@ export class ServiceInputsViewModel { private ModalsHandler:ModalsHandler, private DataTypesService:DataTypesService) { this.initScope(); - this.$scope.updateSelectedMenuItem(); this.$scope.isViewOnly = this.$scope.isViewMode(); } diff --git a/catalog-ui/src/app/view-models/workspace/tabs/management-workflow/management-workflow-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/management-workflow/management-workflow-view-model.ts index f8b29c4a9c..e44ed12c2a 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/management-workflow/management-workflow-view-model.ts +++ b/catalog-ui/src/app/view-models/workspace/tabs/management-workflow/management-workflow-view-model.ts @@ -18,130 +18,137 @@ * ============LICENSE_END========================================================= */ - 'use strict'; - import {ArtifactType} from "app/utils"; - import {ArtifactGroupModel} from "app/models"; - import {participant} from "app/view-models/workspace/tabs/network-call-flow/network-call-flow-view-model"; - import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model"; - import {ComponentGenericResponse} from "../../../../ng2/services/responses/component-generic-response"; - import {ComponentServiceNg2} from "../../../../ng2/services/component-services/component.service"; +'use strict'; +import {ArtifactType} from "app/utils"; +import {ArtifactGroupModel} from "app/models"; +import {participant} from "app/view-models/workspace/tabs/network-call-flow/network-call-flow-view-model"; +import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model"; +import {ComponentGenericResponse} from "../../../../ng2/services/responses/component-generic-response"; +import {ComponentServiceNg2} from "../../../../ng2/services/component-services/component.service"; +declare var PunchOutRegistry; - export interface IManagementWorkflowViewModelScope extends IWorkspaceViewModelScope { - vendorModel:VendorModel; - } +export interface IManagementWorkflowViewModelScope extends IWorkspaceViewModelScope { + vendorModel:VendorModel; + isLoading: boolean; +} - export class VendorModel { - artifacts: ArtifactGroupModel; - serviceID: string; - readonly: boolean; - sessionID: string; - requestID: string; - diagramType: string; - participants:Array<participant>; +export class VendorModel { + artifacts:ArtifactGroupModel; + serviceID:string; + readonly:boolean; + sessionID:string; + requestID:string; + diagramType:string; + participants:Array<participant>; - constructor(artifacts: ArtifactGroupModel, serviceID:string, readonly:boolean, sessionID:string, - requestID:string, diagramType:string, participants:Array<participant>){ - this.artifacts = artifacts; - this.serviceID = serviceID; - this.readonly = readonly; - this.sessionID = sessionID; - this.requestID = requestID; - this.diagramType = diagramType; - this.participants = participants; - } + constructor(artifacts:ArtifactGroupModel, serviceID:string, readonly:boolean, sessionID:string, + requestID:string, diagramType:string, participants:Array<participant>) { + this.artifacts = artifacts; + this.serviceID = serviceID; + this.readonly = readonly; + this.sessionID = sessionID; + this.requestID = requestID; + this.diagramType = diagramType; + this.participants = participants; } +} + +export class ManagementWorkflowViewModel { - export class ManagementWorkflowViewModel { + static '$inject' = [ + '$scope', + 'uuid4', + 'ComponentServiceNg2' + ]; - static '$inject' = [ - '$scope', - 'uuid4', - 'ComponentServiceNg2' - ]; + constructor(private $scope:IManagementWorkflowViewModelScope, + private uuid4:any, + private ComponentServiceNg2:ComponentServiceNg2) { - constructor(private $scope:IManagementWorkflowViewModelScope, - private uuid4:any, - private ComponentServiceNg2: ComponentServiceNg2) { + this.$scope.isLoading = true; + PunchOutRegistry.loadOnBoarding(()=> { + this.$scope.isLoading = false; this.initInformationalArtifacts(); - this.$scope.updateSelectedMenuItem(); - } + }); + } - private initInformationalArtifacts = ():void => { - if(!this.$scope.component.artifacts) { - this.$scope.isLoading = true; - this.ComponentServiceNg2.getComponentInformationalArtifacts(this.$scope.component).subscribe((response:ComponentGenericResponse) => { - this.$scope.component.artifacts = response.artifacts; - this.initScope(); - this.$scope.isLoading = false; - }); - } else { + private initInformationalArtifacts = ():void => { + if (!this.$scope.component.artifacts) { + this.$scope.isLoading = true; + this.ComponentServiceNg2.getComponentInformationalArtifacts(this.$scope.component).subscribe((response:ComponentGenericResponse) => { + this.$scope.component.artifacts = response.artifacts; this.initScope(); - } + this.$scope.isLoading = false; + }); + } else { + this.initScope(); } + } - private static getParticipants():Array<participant> { - return [ - { - "id": "1", - "name": "Customer"}, - { - "id": "2", - "name": "CCD" - }, - { - "id": "3", - "name": "Infrastructure" - }, - { - "id": "4", - "name": "MSO" - }, - { - "id": "5", - "name": "SDN-C" - }, - { - "id": "6", - "name": "A&AI" - }, - { - "id": "7", - "name": "APP-C" - }, - { - "id": "8", - "name": "Cloud" - }, - { - "id": "9", - "name": "DCAE" - }, - { - "id": "10", - "name": "ALTS" - }, - { - "id": "11", - "name": "VF" - } - ] - } + private static getParticipants():Array<participant> { + return [ + { + "id": "1", + "name": "Customer" + }, + { + "id": "2", + "name": "CCD" + }, + { + "id": "3", + "name": "Infrastructure" + }, + { + "id": "4", + "name": "MSO" + }, + { + "id": "5", + "name": "SDN-C" + }, + { + "id": "6", + "name": "A&AI" + }, + { + "id": "7", + "name": "APP-C" + }, + { + "id": "8", + "name": "Cloud" + }, + { + "id": "9", + "name": "DCAE" + }, + { + "id": "10", + "name": "ALTS" + }, + { + "id": "11", + "name": "VF" + } + ] + } - private initScope():void { - this.$scope.vendorModel = new VendorModel( - this.$scope.component.artifacts.filteredByType(ArtifactType.THIRD_PARTY_RESERVED_TYPES.WORKFLOW), - this.$scope.component.uniqueId, - this.$scope.isViewMode(), - this.$scope.user.userId, - this.uuid4.generate(), - ArtifactType.THIRD_PARTY_RESERVED_TYPES.WORKFLOW, - ManagementWorkflowViewModel.getParticipants() - ); + private initScope():void { + this.$scope.vendorModel = new VendorModel( + this.$scope.component.artifacts.filteredByType(ArtifactType.THIRD_PARTY_RESERVED_TYPES.WORKFLOW), + this.$scope.component.uniqueId, + this.$scope.isViewMode(), + this.$scope.user.userId, + this.uuid4.generate(), + ArtifactType.THIRD_PARTY_RESERVED_TYPES.WORKFLOW, + ManagementWorkflowViewModel.getParticipants() + ); - this.$scope.thirdParty = true; - this.$scope.setValidState(true); - } + this.$scope.thirdParty = true; + this.$scope.setValidState(true); } +} diff --git a/catalog-ui/src/app/view-models/workspace/tabs/management-workflow/management-workflow-view.html b/catalog-ui/src/app/view-models/workspace/tabs/management-workflow/management-workflow-view.html index bd196daec8..df570ccdca 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/management-workflow/management-workflow-view.html +++ b/catalog-ui/src/app/view-models/workspace/tabs/management-workflow/management-workflow-view.html @@ -1,3 +1,4 @@ -<div class="workspace-management-workflow"> - <punch-out name="'sequence-diagram'" data="vendorModel" user="user" on-event="onVendorEvent"></punch-out> +<loader data-display="isLoading"></loader> +<div class="workspace-management-workflow" ng-if="vendorModel"> + <punch-out name="'sequence-diagram'" data="vendorModel" user="user" on-event="onVendorEvent"></punch-out> </div> diff --git a/catalog-ui/src/app/view-models/workspace/tabs/network-call-flow/network-call-flow-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/network-call-flow/network-call-flow-view-model.ts index 6c7666d28c..488e4c774d 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/network-call-flow/network-call-flow-view-model.ts +++ b/catalog-ui/src/app/view-models/workspace/tabs/network-call-flow/network-call-flow-view-model.ts @@ -25,9 +25,11 @@ import {ResourceType, ArtifactType} from "app/utils"; import {ComponentInstance} from "app/models"; import {ComponentGenericResponse} from "../../../../ng2/services/responses/component-generic-response"; import {ComponentServiceNg2} from "../../../../ng2/services/component-services/component.service"; +declare var PunchOutRegistry; export interface INetworkCallFlowViewModelScope extends IWorkspaceViewModelScope { vendorMessageModel:VendorModel; + isLoading: boolean; } export class participant { @@ -53,8 +55,12 @@ export class NetworkCallFlowViewModel { private uuid4:any, private ComponentServiceNg2: ComponentServiceNg2) { - this.initComponentInstancesAndInformationalArtifacts(); - this.$scope.updateSelectedMenuItem(); + this.$scope.isLoading = true; + + PunchOutRegistry.loadOnBoarding(()=> { + this.$scope.isLoading = false; + this.initComponentInstancesAndInformationalArtifacts(); + }); } private getVFParticipantsFromInstances(instances:Array<ComponentInstance>):Array<participant> { diff --git a/catalog-ui/src/app/view-models/workspace/tabs/network-call-flow/network-call-flow-view.html b/catalog-ui/src/app/view-models/workspace/tabs/network-call-flow/network-call-flow-view.html index 6ce3e8e2b7..bc2d0643e0 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/network-call-flow/network-call-flow-view.html +++ b/catalog-ui/src/app/view-models/workspace/tabs/network-call-flow/network-call-flow-view.html @@ -1,3 +1,4 @@ -<div class="workspace-network-call-flow"> +<loader data-display="isLoading"></loader> +<div ng-if="vendorMessageModel" class="workspace-network-call-flow"> <punch-out name="'sequence-diagram'" data="vendorMessageModel" user="user" on-event="onVendorEvent"></punch-out> </div> diff --git a/catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view-model.ts index c9f2d0725f..3c9c7e9e4b 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view-model.ts +++ b/catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view-model.ts @@ -52,7 +52,6 @@ export class PropertiesViewModel { private ModalsHandler:ModalsHandler, private ComponentServiceNg2:ComponentServiceNg2) { this.initComponentProperties(); - this.$scope.updateSelectedMenuItem(); } private initComponentProperties = ():void => { diff --git a/catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-view-model.ts index c02900a413..b6cbf65cf0 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-view-model.ts +++ b/catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-view-model.ts @@ -67,7 +67,6 @@ export class ReqAndCapabilitiesViewModel { private ComponentServiceNg2: ComponentServiceNg2) { this.initCapabilitiesAndRequirements(); - this.$scope.updateSelectedMenuItem(); } private initCapabilitiesAndRequirements = (): void => { diff --git a/catalog-ui/src/app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts-view-model.ts index 5f724c48fd..77b5ab74eb 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts-view-model.ts +++ b/catalog-ui/src/app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts-view-model.ts @@ -50,7 +50,6 @@ export class ToscaArtifactsViewModel { private $filter:ng.IFilterService, private ComponentServiceNg2:ComponentServiceNg2) { this.initToscaArtifacts(); - this.$scope.updateSelectedMenuItem(); } private initToscaArtifacts = (): void => { diff --git a/catalog-ui/src/app/view-models/workspace/workspace-view-model.ts b/catalog-ui/src/app/view-models/workspace/workspace-view-model.ts index f529e79fa7..97a58402de 100644 --- a/catalog-ui/src/app/view-models/workspace/workspace-view-model.ts +++ b/catalog-ui/src/app/view-models/workspace/workspace-view-model.ts @@ -87,7 +87,7 @@ export interface IWorkspaceViewModelScope extends ng.IScope { getLatestVersion():void; getStatus():string; showLifecycleIcon():boolean; - updateSelectedMenuItem():void; + updateSelectedMenuItem(state:string):void; uploadFileChangedInGeneralTab():void; updateMenuComponentName(ComponentName:string):void; getTabTitle():string; @@ -136,6 +136,7 @@ export class WorkspaceViewModel { this.initScope(); this.initAfterScope(); + this.$scope.updateSelectedMenuItem(this.$state.current.name); } private role:string; @@ -216,6 +217,7 @@ export class WorkspaceViewModel { this.$scope.onMenuItemPressed = (state:string):ng.IPromise<boolean> => { let deferred = this.$q.defer(); let goToState = ():void => { + this.$scope.updateSelectedMenuItem(state); this.$state.go(state, { id: this.$scope.component.uniqueId, type: this.$scope.component.componentType.toLowerCase(), @@ -613,9 +615,9 @@ export class WorkspaceViewModel { return result; }; - this.$scope.updateSelectedMenuItem = ():void => { + this.$scope.updateSelectedMenuItem = (state:string):void => { let selectedItem:MenuItem = _.find(this.$scope.leftBarTabs.menuItems, (item:MenuItem) => { - return item.state === this.$state.current.name; + return item.state === state; }); this.$scope.leftBarTabs.selectedIndex = selectedItem ? this.$scope.leftBarTabs.menuItems.indexOf(selectedItem) : 0; }; diff --git a/catalog-ui/src/assets/styles/app.less b/catalog-ui/src/assets/styles/app.less index fde4cc8888..c19ace5823 100644 --- a/catalog-ui/src/assets/styles/app.less +++ b/catalog-ui/src/assets/styles/app.less @@ -8,6 +8,7 @@ @import 'mixins.less'; @import 'mixins_old.less'; @import 'global.less'; +@import '../../../node_modules/sdc-ui/css/style.css'; @import 'sprite-old.less'; @import 'sprite.less'; @@ -33,7 +34,6 @@ @import 'tooltips.less'; @import 'welcome-sprite.less'; @import 'welcome-style.less'; -@import 'sdc-ui.css'; @import 'notification-template.less'; // Less insides specific files. diff --git a/catalog-ui/src/assets/styles/sdc-ui.css b/catalog-ui/src/assets/styles/sdc-ui.css deleted file mode 100644 index ad96e7762a..0000000000 --- a/catalog-ui/src/assets/styles/sdc-ui.css +++ /dev/null @@ -1,361 +0,0 @@ -@charset "UTF-8"; -/* Colors */ -.sdc-bc-blue { - background-color: #009fdb; } - -.sdc-bc-dark-blue { - background-color: #0568ae; } - -.sdc-bc-light-blue { - background-color: #71c5e8; } - -.sdc-bc-green { - background-color: #4ca90c; } - -.sdc-bc-dark-green { - background-color: #007a3e; } - -.sdc-bc-light-green { - background-color: #b5bd00; } - -.sdc-bc-orange { - background-color: #ea7400; } - -.sdc-bc-yellow { - background-color: #ffb81c; } - -.sdc-bc-dark-purple { - background-color: #702f8a; } - -.sdc-bc-purple { - background-color: #9063cd; } - -.sdc-bc-light-purple { - background-color: #caa2dd; } - -.sdc-bc-black { - background-color: #000000; } - -.sdc-bc-dark-gray { - background-color: #5a5a5a; } - -.sdc-bc-gray { - background-color: #959595; } - -.sdc-bc-light-gray { - background-color: #d2d2d2; } - -.sdc-bc-white { - background-color: #ffffff; } - -/* Prefix */ -/* Value Prefix*/ -/* Box sizing */ -/* Borders & Shadows */ -/* Opacity */ -/* Ellipsis */ -/* Vertical placement of multuple lines of text */ -/* transform-rotate */ -/* transform-translate */ -/* transform-scale */ -/**/ -/**/ -/*body {*/ - /*-webkit-touch-callout: none;*/ - /*-webkit-user-select: none;*/ - /*-moz-user-select: none;*/ - /*-ms-user-select: none;*/ - /*user-select: none; }*/ - -html { - font-size: 100%; - height: 100%; } - -body { - /* scrollbar styling for Internet Explorer */ - scrollbar-face-color: #191919; - scrollbar-track-color: #191919; - height: 100%; } - -/* scrollbar styling for Google Chrome | Safari | Opera */ -::-webkit-scrollbar { - width: 8px; - height: 8px; } - -::-webkit-scrollbar-track { - background-color: transparent; - border-radius: 10px; } - -::-webkit-scrollbar-thumb { - border-radius: 10px; - background-color: #d2d2d2; - border-right: 2px solid #ffffff; } - -/* Mozilla Firefox currently doesn't support scrollbar styling */ -ul { - list-style: none; } - -h1, h2, h3, h4, h5, h6, ul { - margin: 0; - padding: 0; } - -.disabled { - opacity: 0.7 !important; } - -fieldset { - border: none; } - -fieldset label { - display: inline-block; } - -.nav-tabs > li > a:focus, -.btn:focus, -.btn:active:focus, -.btn.active:focus { - outline: none; } - -/* Fonts */ -.text-lowercase { - text-transform: lowercase; } - -.text-uppercase, .heading-3-light, .heading-3, .heading-3-medium { - text-transform: uppercase; } - -.text-capitalize { - text-transform: capitalize; } - -.heading-1 { - font-weight: 300; - font-size: 36px; } - -.heading-2 { - font-weight: 300; - font-size: 24px; } - -.heading-3-light { - font-weight: 300; - font-size: 20px; } - -.heading-3 { - font-weight: 400; - font-size: 20px; } - -.heading-3-medium { - font-weight: 600; - font-size: 20px; } - -.heading-4 { - font-weight: 400; - font-size: 18px; } - -.heading-4-medium { - font-weight: 600; - font-size: 18px; } - -.heading-5 { - font-weight: 400; - font-size: 16px; } - -.heading-5-medium, .catalog-tile .catalog-tile-top .catalog-tile-item-name, .sdc-tile-catalog .sdc-tile-content .sdc-tile-content-info .sdc-tile-content-info-item-name { - font-weight: 400; - line-height: 16px; - font-size: 14px; } - -.body-1 { - font-weight: 400; - font-size: 14px; } - -.body-1-medium { - font-weight: 600; - font-size: 14px; } - -.body-1-light { - font-weight: 300; - font-size: 14px; } - -.body-2, .catalog-tile .catalog-tile-top .catalog-tile-entity-details .catalog-tile-version-info .catalog-tile-item-version, .catalog-tile .catalog-tile-content .catalog-tile-locking-user-name, .sdc-tile-catalog .sdc-tile-content .sdc-tile-content-info .sdc-tile-content-info-version-info .sdc-tile-content-info-version-info-text, .sdc-tile-catalog .sdc-tile-footer .sdc-tile-footer-text { - font-weight: 400; - font-size: 12px; } - -.body-2-medium, .catalog-tile .catalog-tile-content { - font-weight: 600; - font-size: 13px; } - -.body-3 { - font-weight: 400; - font-size: 12px; } - -.body-3-medium, .catalog-tile .catalog-tile-top .catalog-tile-entity-details .catalog-tile-vendor-name, .catalog-tile.vendor-type .catalog-tile-top .catalog-tile-vsp-count, .sdc-tile-catalog .sdc-tile-content .sdc-tile-content-info .sdc-tile-content-info-vendor-name { - font-weight: 600; - font-size: 12px; } - -.body-3-light { - font-weight: 300; - font-size: 12px; } - -.circle-icon-text { - font-weight: 600; - font-size: 14px; } - -.sdc-icon { - display: inline-block; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - width: 16px; - height: 16px; } - -.sdc-icon-locked { - background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='15' viewBox='0 0 11 15' id='locked_icon'> <metadata><?xpacket begin='' id='W5M0MpCehiHzreSzNTczkc9d'?><x:xmpmeta xmlns:x='adobe:ns:meta/' x:xmptk='Adobe XMP Core 5.6-c138 79.159824, 2016/09/14-01:09:01 '> <rdf:RDF xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns#'> <rdf:Description rdf:about=''/> </rdf:RDF></x:xmpmeta><?xpacket end='w'?></metadata><defs> <style> .cls-1 { fill: #959595; fill-rule: evenodd; } </style> </defs> <path id='Shape_77_copy_10' data-name='Shape 77 copy 10' class='cls-1' d='M445,359a16.71,16.71,0,0,0-2.1-.009c-1.945.045-3.195,0.049-3.9,0.009v-5a1.743,1.743,0,0,1,2-2h1a1.743,1.743,0,0,1,2,2v5c0.474,0.063.343-.073,1,0,0.266,0.029,0,.279,0,0v-5a2.726,2.726,0,0,0-3-3h-1.142c-1.72-.125-2.715,1.562-2.858,3,0.088,0.009,0,7.338,0,5h0a1.891,1.891,0,0,0-2,1.689v3.461A1.823,1.823,0,0,0,437.775,366h7.448A1.823,1.823,0,0,0,447,364.15v-3.461A2.018,2.018,0,0,0,445,359Z' transform='translate(-436 -351)'/></svg>"); - background-repeat: no-repeat; } - -.sdc-icon-plus { - background-image: url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><svg version='1.1' id='plus_icon' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 19 19' style='enable-background:new 0 0 19 19;' xml:space='preserve'><g><rect y='8' width='19' height='3'/><path id='Rectangle_2139_copy' d='M8,19V0h3v19H8z'/></g></svg>"); - background-repeat: no-repeat; } - -.sdc-icon-unlocked { - background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='18' viewBox='0 0 11 18' id='unlocked_icon'> <metadata><?xpacket begin='' id='W5M0MpCehiHzreSzNTczkc9d'?><x:xmpmeta xmlns:x='adobe:ns:meta/' x:xmptk='Adobe XMP Core 5.6-c138 79.159824, 2016/09/14-01:09:01 '> <rdf:RDF xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns#'> <rdf:Description rdf:about=''/> </rdf:RDF></x:xmpmeta><?xpacket end='w'?></metadata><defs> <style> .cls-1 { fill: #959595; fill-rule: evenodd; } </style> </defs> <path id='Shape_77_copy_16' data-name='Shape 77 copy 16' class='cls-1' d='M663,358a16.723,16.723,0,0,0-2.1-.009c-1.944.045-3.194,0.049-3.9,0.009v-7a1.743,1.743,0,0,1,2-2h1a1.743,1.743,0,0,1,2,2v2c0.474,0.064.343-.073,1,0,0.266,0.029,0,.279,0,0v-2a2.726,2.726,0,0,0-3-3h-1.142c-1.72-.125-2.715,1.562-2.858,3,0.088,0.009,0,9.338,0,7h0a1.891,1.891,0,0,0-2,1.689v4.461a1.823,1.823,0,0,0,1.775,1.85h7.448A1.823,1.823,0,0,0,665,364.15v-4.461A2.018,2.018,0,0,0,663,358Zm1.05,6.15a0.827,0.827,0,0,1-.8.836H655.8a0.827,0.827,0,0,1-.8-0.836l0-4.15a1.164,1.164,0,0,1,.8-1.147h7.448A1.129,1.129,0,0,1,664,360Z' transform='translate(-654 -348)'/></svg>"); - background-repeat: no-repeat; } - -.sdc-icon-vendor { - background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 53 47' id='vendor_icon'><title>vendor</title><g id='Layer_2' data-name='Layer 2'><g id='vlm_icon' data-name='vlm icon'><path d='M49,7,38.5,7V5.92A5.92,5.92,0,0,0,32.58,0H20.42A5.92,5.92,0,0,0,14.5,5.92V7.15L4,7.2a3.8,3.8,0,0,0-4,3.5V43.5C0,45.4,2,47,4.2,47L49,46.8a3.8,3.8,0,0,0,4-3.5V10.5A3.8,3.8,0,0,0,49,7ZM16.5,5.92A3.92,3.92,0,0,1,20.42,2H32.58A3.92,3.92,0,0,1,36.5,5.92V7.06l-20,.09ZM2,10.8A1.9,1.9,0,0,1,4,9l45-.2a1.9,1.9,0,0,1,2,1.8v8.87L32.94,24.18a6.49,6.49,0,0,0-12.89,0L2,19.51V10.8ZM31,25a4.5,4.5,0,1,1-4.5-4.5A4.5,4.5,0,0,1,31,25ZM49,45,4,45.2A1.9,1.9,0,0,1,2,43.4V21.57l18.13,4.73a6.5,6.5,0,0,0,12.74,0L51,21.53V43.21A1.9,1.9,0,0,1,49,45Z'/></g></g></svg>"); - background-repeat: no-repeat; } - -.sdc-icon-vlm { - background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 53'><title>vlm_new_icon</title><g id='Layer_2' data-name='Layer 2'><g id='vlm_icon' data-name='vlm icon'><path d='M41,2a2,2,0,0,1,2,2l.19,45a2,2,0,0,1-2,2H4a2,2,0,0,1-2-2L1.81,4a2,2,0,0,1,2-2H41m-.15-2H4A4.2,4.2,0,0,0,0,4.24L.19,49a4,4,0,0,0,4,4H41a4,4,0,0,0,4-4L44.81,4a4,4,0,0,0-4-4Z'/><rect x='14' y='11' width='17' height='2'/><rect x='14' y='18' width='10' height='2'/><polygon points='20.56 38.85 13.87 33.14 15.16 31.62 20.39 36.08 29.08 26.63 30.55 27.98 20.56 38.85'/></g></g></svg>"); - background-repeat: no-repeat; } - -.sdc-icon-vsp { - background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 59.5 40' id='vsp_icon'><title>vsp_new_icon</title><g id='Layer_2' data-name='Layer 2'><g id='vlm_icon' data-name='vlm icon'><path d='M58.28,30.74c-1.49-1.82-3-2.7-4.67-2.74a8.5,8.5,0,0,0-16.22-2.44,6.93,6.93,0,0,0-4.06.66A7.23,7.23,0,0,0,36.42,40H53.5a6,6,0,0,0,6-6A5.18,5.18,0,0,0,58.28,30.74ZM53.5,38H36.42a5.25,5.25,0,0,1-5.21-5.91,5.32,5.32,0,0,1,3-4.06,5,5,0,0,1,2.21-.53,5.25,5.25,0,0,1,1.35.18l.92.24L39,27A6.5,6.5,0,0,1,51.67,29v1.3l1.17-.2c1-.17,2.17-.17,3.91,2a3.18,3.18,0,0,1,.76,2A4,4,0,0,1,53.5,38Z'/><path d='M49,0,4,.17A3.79,3.79,0,0,0,0,3.69V7.94H0v2H0V36.31C0,38.35,2,40,4.25,40l20.84-.08a1,1,0,0,0,0-1.92L4,38.08a1.89,1.89,0,0,1-2-1.76V10H51v7a1,1,0,0,0,2,0V3.53A3.79,3.79,0,0,0,49,0ZM2,8V3.76A1.89,1.89,0,0,1,4,2l45-.16a1.89,1.89,0,0,1,2,1.76V8Z'/></g></g></svg>"); - background-repeat: no-repeat; } - -.svg-icon.purple { - fill: #9063cd; } - -.svg-icon.purple-hover { - fill: #9063cd; } - .svg-icon.purple-hover:hover { - fill: #caa2dd; } - -.svg-icon.blue { - fill: #009fdb; } - -.svg-icon.blue-hover { - fill: #009fdb; } - .svg-icon.blue-hover:hover { - fill: #71c5e8; } - -.svg-icon.gray { - fill: #959595; } - -.svg-icon.gray-hover { - fill: #000000; } - .svg-icon.gray-hover:hover { - fill: #d2d2d2; } - -.svg-icon.black { - fill: #000000; } - -.svg-icon.black-hover { - fill: #000000; } - .svg-icon.black-hover:hover { - fill: #d2d2d2; } - -.sdc-tile, .sdc-tile-catalog { - box-sizing: border-box; - background-color: #ffffff; - display: flex; - flex-direction: column; - padding: 10px; - cursor: pointer; - border: 1px solid #eaeaea; - -webkit-box-shadow: 0.5px 0.8px 4px 0 rgba(24, 24, 25, 0.05); - -moz-box-shadow: 0.5px 0.8px 4px 0 rgba(24, 24, 25, 0.05); - box-shadow: 0.5px 0.8px 4px 0 rgba(24, 24, 25, 0.05); } - .sdc-tile:active, .sdc-tile-catalog:active { - border: 1px solid #71c5e8; } - .sdc-tile:hover, .sdc-tile-catalog:hover { - box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15); - border: 1px solid #d2d2d2; } - .sdc-tile .sdc-tile-header, .sdc-tile-catalog .sdc-tile-header { - position: relative; - flex-shrink: 0; - display: flex; - align-items: flex-start; - flex-direction: column; } - .sdc-tile .sdc-tile-content, .sdc-tile-catalog .sdc-tile-content { - position: relative; - flex: 1; - display: flex; - align-items: flex-start; - flex-direction: column; - overflow: auto; - justify-content: space-between; } - .sdc-tile .sdc-tile-footer, .sdc-tile-catalog .sdc-tile-footer { - position: relative; - flex-shrink: 0; - display: flex; - align-items: flex-start; - flex-direction: column; } - -.sdc-tile-catalog { - width: 204px; - height: 200px; } - .sdc-tile-catalog .sdc-tile-header { - line-height: 16px; } - .sdc-tile-catalog .sdc-tile-header .sdc-tile-header-type { - font-size: 14px; - text-transform: uppercase; } - .sdc-tile-catalog .sdc-tile-header .sdc-tile-header-type.purple { - color: #9063cd; } - .sdc-tile-catalog .sdc-tile-header .sdc-tile-header-type.blue { - color: #009fdb; } - .sdc-tile-catalog .sdc-tile-content .sdc-tile-content-icon { - align-items: center; - display: flex; - flex-direction: column; - width: 100%; - padding-top: 25px; } - .sdc-tile-catalog .sdc-tile-content .sdc-tile-content-icon svg { - width: 60px; - height: 40px; } - .sdc-tile-catalog .sdc-tile-content .sdc-tile-content-info { - padding-bottom: 4px; - width: 180px; - overflow: hidden; - text-overflow: ellipsis; - width: auto; - white-space: nowrap; - display: inline-block; - max-width: 178px; } - .sdc-tile-catalog .sdc-tile-content .sdc-tile-content-info .sdc-tile-content-info-vendor-name { - color: #959595; - line-height: 12px; } - .sdc-tile-catalog .sdc-tile-content .sdc-tile-content-info .sdc-tile-content-info-item-name { - color: #191919; } - .sdc-tile-catalog .sdc-tile-content .sdc-tile-content-info .sdc-tile-content-info-version-info { - display: flex; - justify-content: space-between; } - .sdc-tile-catalog .sdc-tile-footer { - display: flex; - flex-direction: row; - border-top: 1px solid #eaeaea; - padding: 0; - width: 180px; - height: 20px; } - .sdc-tile-catalog .sdc-tile-footer .sdc-tile-footer-text { - flex: 1; - padding-top: 5px; - overflow: hidden; - text-overflow: ellipsis; - width: auto; - white-space: nowrap; - display: inline-block; - max-width: 164px; } - .sdc-tile-catalog .sdc-tile-footer .sdc-tile-footer-icon { - flex-shrink: 1; - overflow: hidden; - padding-top: 5px; } - .sdc-tile-catalog .sdc-tile-footer .sdc-tile-footer-icon svg { - width: 16px; - height: 20px; } diff --git a/catalog-ui/src/index.html b/catalog-ui/src/index.html index 3a66d4da45..044eb374a6 100644 --- a/catalog-ui/src/index.html +++ b/catalog-ui/src/index.html @@ -19,7 +19,7 @@ <script src="/sdc1/scripts/inline.bundle.js"></script> <script src="/sdc1/scripts/polyfills.bundle.js"></script> <script src="/sdc1/scripts/vendor.bundle.js"></script> -<script src="/dcae/dcae-bundle.js" async></script> +<script src="/dcae/dcae-bundle.js"></script> <script id="main-bundle" src="/sdc1/scripts/main.bundle.js"></script> <script src="/sdc1/scripts/styles.bundle.js"></script> diff --git a/catalog-ui/src/third-party/PunchOutRegistry.js b/catalog-ui/src/third-party/PunchOutRegistry.js index db8e6875d6..506a785c79 100644 --- a/catalog-ui/src/third-party/PunchOutRegistry.js +++ b/catalog-ui/src/third-party/PunchOutRegistry.js @@ -18,7 +18,9 @@ * ============LICENSE_END========================================================= */ -(function(window) { + + +(function (window) { "use strict"; if (window.PunchOutRegistry) { @@ -29,9 +31,20 @@ var factoryPromises = new Map(); var instancePromises = new Map(); + function loadOnBoarding(callback) { + + if (factoryPromises.has("onboarding/vendor") && !queuedFactoryRequests.has("onboarding/vendor")) { + callback(); + } + else { + console.log("Load OnBoarding"); + $.getScript("/onboarding/punch-outs_en.js").then(callback); + } + } + function registerFactory(name, factory) { if (factoryPromises.has(name) && !queuedFactoryRequests.has(name)) { - console.error("PunchOut \"" + name + "\" has been already registered"); + // console.error("PunchOut \"" + name + "\" has been already registered"); return; } if (queuedFactoryRequests.has(name)) { @@ -58,7 +71,7 @@ var factoryPromise; var instancePromise = instancePromises.get(element); if (!instancePromise) { - instancePromise = getFactoryPromise(name).then(function(factory) { + instancePromise = getFactoryPromise(name).then(function (factory) { return factory(); }); instancePromises.set(element, instancePromise); @@ -69,7 +82,8 @@ function renderPunchOut(params, element) { var name = params.name; var options = params.options || {}; - var onEvent = params.onEvent || function () {}; + var onEvent = params.onEvent || function () { + }; getInstancePromise(name, element).then(function (punchOut) { punchOut.render({options: options, onEvent: onEvent}, element); @@ -81,7 +95,7 @@ console.error("There is no PunchOut in element", element); return; } - instancePromises.get(element).then(function(punchOut) { + instancePromises.get(element).then(function (punchOut) { punchOut.unmount(element); }); instancePromises.delete(element); @@ -90,7 +104,8 @@ var PunchOutRegistry = Object.freeze({ register: registerFactory, render: renderPunchOut, - unmount: unmountPunchOut + unmount: unmountPunchOut, + loadOnBoarding: loadOnBoarding }); window.PunchOutRegistry = PunchOutRegistry; diff --git a/catalog-ui/src/third-party/cytoscape.js-edge-editation/CytoscapeEdgeEditation.js b/catalog-ui/src/third-party/cytoscape.js-edge-editation/CytoscapeEdgeEditation.js index 5731019ff0..0e6ca8b3c2 100644 --- a/catalog-ui/src/third-party/cytoscape.js-edge-editation/CytoscapeEdgeEditation.js +++ b/catalog-ui/src/third-party/cytoscape.js-edge-editation/CytoscapeEdgeEditation.js @@ -459,7 +459,8 @@ var handle = handles[i]; var position = this._getHandlePosition(handle, this._hover); - if (VectorMath.distance(position, mousePoisition) < this.HANDLE_SIZE) { + var renderedHandleSize = this.HANDLE_SIZE * this._cy.zoom(); //actual number of pixels that handle uses. + if (VectorMath.distance(position, mousePoisition) < renderedHandleSize) { return { handle: handle, position: position |