summaryrefslogtreecommitdiffstats
path: root/catalog-ui
diff options
context:
space:
mode:
Diffstat (limited to 'catalog-ui')
-rw-r--r--catalog-ui/package.json2
-rw-r--r--catalog-ui/src/app/models.ts1
-rw-r--r--catalog-ui/src/app/models/modal.ts4
-rw-r--r--catalog-ui/src/app/models/server-error-response.ts84
-rw-r--r--catalog-ui/src/app/ng2/app.module.ts19
-rw-r--r--catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.ts2
-rw-r--r--catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html2
-rw-r--r--catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts2
-rw-r--r--catalog-ui/src/app/ng2/components/loader/loader.component.html3
-rw-r--r--catalog-ui/src/app/ng2/components/loader/loader.component.less16
-rw-r--r--catalog-ui/src/app/ng2/components/loader/loader.component.ts66
-rw-r--r--catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.html5
-rw-r--r--catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.ts38
-rw-r--r--catalog-ui/src/app/ng2/components/modal/modal.component.html8
-rw-r--r--catalog-ui/src/app/ng2/components/modal/modal.component.less15
-rw-r--r--catalog-ui/src/app/ng2/components/modal/modal.component.ts6
-rw-r--r--catalog-ui/src/app/ng2/components/modal/modal.module.ts9
-rw-r--r--catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html2
-rw-r--r--catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.module.ts3
-rw-r--r--catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html2
-rw-r--r--catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less15
-rw-r--r--catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts24
-rw-r--r--catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts4
-rw-r--r--catalog-ui/src/app/ng2/services/component-instance-services/component-instance.service.ts4
-rw-r--r--catalog-ui/src/app/ng2/services/component-services/component.service.ts8
-rw-r--r--catalog-ui/src/app/ng2/services/component-services/service.service.ts4
-rw-r--r--catalog-ui/src/app/ng2/services/data-type.service.ts2
-rw-r--r--catalog-ui/src/app/ng2/services/http.interceptor.service.ts162
-rw-r--r--catalog-ui/src/app/ng2/services/http.service.ts29
-rw-r--r--catalog-ui/src/app/ng2/services/modal.service.ts27
-rw-r--r--catalog-ui/src/app/services/event-listener-service.ts2
-rw-r--r--catalog-ui/src/app/utils/constants.ts6
-rw-r--r--catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view-model.ts10
-rw-r--r--catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view.html2
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.ts1
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes-view-model.ts1
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view-model.ts7
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view-model.ts3
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view-model.ts1
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/deployment/deployment-view-model.ts1
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/distribution/distribution-view-model.ts1
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts1
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/information-artifacts/information-artifacts-view-model.ts1
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/inputs/resource-input/resource-inputs-view-model.ts1
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/inputs/service-input/service-inputs-view-model.ts1
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/management-workflow/management-workflow-view-model.ts225
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/management-workflow/management-workflow-view.html5
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/network-call-flow/network-call-flow-view-model.ts10
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/network-call-flow/network-call-flow-view.html3
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view-model.ts1
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-view-model.ts1
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts-view-model.ts1
-rw-r--r--catalog-ui/src/app/view-models/workspace/workspace-view-model.ts8
-rw-r--r--catalog-ui/src/assets/styles/app.less2
-rw-r--r--catalog-ui/src/assets/styles/sdc-ui.css361
-rw-r--r--catalog-ui/src/index.html2
-rw-r--r--catalog-ui/src/third-party/PunchOutRegistry.js27
-rw-r--r--catalog-ui/src/third-party/cytoscape.js-edge-editation/CytoscapeEdgeEditation.js3
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('<', '&lt').replace('>', '&gt') : '';
+ 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('<', '&lt').replace('>', '&gt') : '';
- 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