summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/components
diff options
context:
space:
mode:
Diffstat (limited to 'catalog-ui/src/app/ng2/components')
-rw-r--r--catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.component.ts32
-rw-r--r--catalog-ui/src/app/ng2/components/forms/artifacts-form/__snapshots__/artifact-form.component.spec.ts.snap40
-rw-r--r--catalog-ui/src/app/ng2/components/forms/artifacts-form/artifact-form.component.html55
-rw-r--r--catalog-ui/src/app/ng2/components/forms/artifacts-form/artifact-form.component.less23
-rw-r--r--catalog-ui/src/app/ng2/components/forms/artifacts-form/artifact-form.component.spec.ts242
-rw-r--r--catalog-ui/src/app/ng2/components/forms/artifacts-form/artifact-form.component.ts132
-rw-r--r--catalog-ui/src/app/ng2/components/forms/artifacts-form/artifact-form.module.ts21
-rw-r--r--catalog-ui/src/app/ng2/components/forms/artifacts-form/artifacts.service.ts175
-rw-r--r--catalog-ui/src/app/ng2/components/forms/env-params/__snapshots__/env-params.component.spec.ts.snap42
-rw-r--r--catalog-ui/src/app/ng2/components/forms/env-params/env-params.component.html71
-rw-r--r--catalog-ui/src/app/ng2/components/forms/env-params/env-params.component.less21
-rw-r--r--catalog-ui/src/app/ng2/components/forms/env-params/env-params.component.spec.ts98
-rw-r--r--catalog-ui/src/app/ng2/components/forms/env-params/env-params.component.ts91
-rw-r--r--catalog-ui/src/app/ng2/components/forms/env-params/env-params.module.ts28
-rw-r--r--catalog-ui/src/app/ng2/components/layout/layout.module.ts4
-rw-r--r--catalog-ui/src/app/ng2/components/layout/top-nav/__snapshots__/top-nav.comonent.spec.ts.snap47
-rw-r--r--catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.comonent.spec.ts161
-rw-r--r--catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.html2
-rw-r--r--catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.less2
-rw-r--r--catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.ts20
-rw-r--r--catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/__snapshots__/filter-properties-assignment.component.spec.ts.snap59
-rw-r--r--catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.html2
-rw-r--r--catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.spec.ts141
-rw-r--r--catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.html24
-rw-r--r--catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.ts4
-rw-r--r--catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.spec.ts52
-rw-r--r--catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.ts2
-rw-r--r--catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html10
-rw-r--r--catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts38
-rw-r--r--catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.component.ts65
-rw-r--r--catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.module.ts14
-rw-r--r--catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html10
-rw-r--r--catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less2
-rw-r--r--catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts28
-rw-r--r--catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html16
-rw-r--r--catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.spec.ts175
-rw-r--r--catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts80
-rw-r--r--catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts2
-rw-r--r--catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.ts12
-rw-r--r--catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.less2
-rw-r--r--catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.ts142
-rw-r--r--catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.module.ts16
-rw-r--r--catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less11
-rw-r--r--catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts200
-rw-r--r--catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.module.ts16
-rw-r--r--catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.html27
-rw-r--r--catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.less24
-rw-r--r--catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.ts133
-rw-r--r--catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.module.ts21
-rw-r--r--catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.html31
-rw-r--r--catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.less51
-rw-r--r--catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.ts84
-rw-r--r--catalog-ui/src/app/ng2/components/logic/service-path/service-path.module.ts39
-rw-r--r--catalog-ui/src/app/ng2/components/modals/comment-modal/comment-modal.component.html18
-rw-r--r--catalog-ui/src/app/ng2/components/modals/comment-modal/comment-modal.component.ts25
-rw-r--r--catalog-ui/src/app/ng2/components/modals/comment-modal/comment-modal.less3
-rw-r--r--catalog-ui/src/app/ng2/components/modals/modals.module.ts29
-rw-r--r--catalog-ui/src/app/ng2/components/modals/onboarding-modal/import-vsp.service.ts36
-rw-r--r--catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.html106
-rw-r--r--catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.less97
-rw-r--r--catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.spec.ts122
-rw-r--r--catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.ts193
-rw-r--r--catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.html28
-rw-r--r--catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.less62
-rw-r--r--catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.ts35
-rw-r--r--catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.html26
-rw-r--r--catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.less134
-rw-r--r--catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.ts110
-rw-r--r--catalog-ui/src/app/ng2/components/ui/download-artifact/download-artifact.component.ts145
-rw-r--r--catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts131
-rw-r--r--catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.module.ts10
-rw-r--r--catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.html23
-rw-r--r--catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.less48
-rw-r--r--catalog-ui/src/app/ng2/components/ui/file-opener/file-opener.component.html6
-rw-r--r--catalog-ui/src/app/ng2/components/ui/file-opener/file-opener.component.less0
-rw-r--r--catalog-ui/src/app/ng2/components/ui/file-opener/file-opener.component.ts45
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.ts2
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html2
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts16
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts31
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html31
-rw-r--r--catalog-ui/src/app/ng2/components/ui/forms/modal-forms.module.ts8
-rw-r--r--catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.html28
-rw-r--r--catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.less3
-rw-r--r--catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.ts25
-rw-r--r--catalog-ui/src/app/ng2/components/ui/loader/loader.component.html2
-rw-r--r--catalog-ui/src/app/ng2/components/ui/loader/loader.component.ts7
-rw-r--r--catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.ts6
-rw-r--r--catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.ts6
-rw-r--r--catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.ts6
-rw-r--r--catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.module.ts11
-rw-r--r--catalog-ui/src/app/ng2/components/ui/modal/modal.component.ts2
-rw-r--r--catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.ts6
-rw-r--r--catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.module.ts2
-rw-r--r--catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.html20
-rw-r--r--catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.less5
-rw-r--r--catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.ts71
-rw-r--r--catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.module.ts16
-rw-r--r--catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.html25
-rw-r--r--catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.less37
-rw-r--r--catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.ts88
-rw-r--r--catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.html11
-rw-r--r--catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.less55
-rw-r--r--catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.ts25
-rw-r--r--catalog-ui/src/app/ng2/components/ui/perfect-scroll-bar/perfect-scrollbar.directive.ts51
-rw-r--r--catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.html3
-rw-r--r--catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.ts3
-rw-r--r--catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.html8
-rw-r--r--catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.ts140
-rw-r--r--catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.html12
-rw-r--r--catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.less25
-rw-r--r--catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.ts69
-rw-r--r--catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.html24
-rw-r--r--catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.less10
-rw-r--r--catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.html6
-rw-r--r--catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.less12
-rw-r--r--catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.ts2
-rw-r--r--catalog-ui/src/app/ng2/components/ui/tile/sdc-tile.module.ts (renamed from catalog-ui/src/app/ng2/components/ui/tile/tile.module.ts)6
-rw-r--r--catalog-ui/src/app/ng2/components/ui/tile/tile.component.html43
-rw-r--r--catalog-ui/src/app/ng2/components/ui/tile/tile.component.less15
-rw-r--r--catalog-ui/src/app/ng2/components/ui/tile/tile.component.ts34
-rw-r--r--catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts157
122 files changed, 3664 insertions, 1775 deletions
diff --git a/catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.component.ts b/catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.component.ts
index 85d1899d96..269a8708fe 100644
--- a/catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.component.ts
+++ b/catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.component.ts
@@ -1,21 +1,19 @@
/*-
- * ============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=========================================================
+ <!--
+ ~ Copyright (C) 2018 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.
+ -->
*/
import { Component, Input } from '@angular/core';
diff --git a/catalog-ui/src/app/ng2/components/forms/artifacts-form/__snapshots__/artifact-form.component.spec.ts.snap b/catalog-ui/src/app/ng2/components/forms/artifacts-form/__snapshots__/artifact-form.component.spec.ts.snap
new file mode 100644
index 0000000000..8cd085e248
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/forms/artifacts-form/__snapshots__/artifact-form.component.spec.ts.snap
@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`artifact form component should match current snapshot of artifact form component 1`] = `
+<artifact-form
+ artifactTypesOptions={[Function Array]}
+ cacheService={[Function Object]}
+ initArtifactTypes={[Function Function]}
+ onDescriptionChange={[Function Function]}
+ onLabelChange={[Function Function]}
+ onTypeChange={[Function Function]}
+ onUploadFile={[Function Function]}
+ onValidationChange={[Function Subject]}
+ verifyTypeAndFileWereFilled={[Function Function]}
+>
+ <form
+ class="artifact-form"
+ name="artifactForm"
+ novalidate=""
+ >
+ <onap-file-upload />
+ <div
+ class="artifact-form-container"
+ >
+
+ <div
+ class="right-form-container"
+ >
+ <sdc-textarea
+ label="Description"
+ testid="description"
+ />
+ <sdc-validation>
+ <sdc-required-validator />
+ <sdc-regex-validator />
+ </sdc-validation>
+ </div>
+ </div>
+ </form>
+</artifact-form>
+`;
diff --git a/catalog-ui/src/app/ng2/components/forms/artifacts-form/artifact-form.component.html b/catalog-ui/src/app/ng2/components/forms/artifacts-form/artifact-form.component.html
new file mode 100644
index 0000000000..c84d6de512
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/forms/artifacts-form/artifact-form.component.html
@@ -0,0 +1,55 @@
+<form class="artifact-form" novalidate name="artifactForm">
+
+ <onap-file-upload [disabled]="isViewOnly || showTypeFields && !artifact.artifactType" [convertToBase64]="true" [(value)]="artifact.artifactName" (fileUpload)="onUploadFile($event)" [placeHolder]="'Select File'" [label]="'Upload File'" [testId]="'fileUploadElement'" [required]="true">
+
+ </onap-file-upload>
+ <div class="artifact-form-container">
+ <div class="left-form-container" *ngIf="showTypeFields">
+ <sdc-input #artifactLabel
+ required="true"
+ [(value)]="artifact.artifactLabel"
+ [maxLength]="25"
+ [label]="'Artifact Label'"
+ [disabled]="isViewOnly || artifact && artifact.uniqueId"
+ [testId]="'artifactLabel'"
+ (keyup)="verifyTypeAndFileWereFilled()">
+ </sdc-input>
+ <sdc-validation [validateElement]="artifactLabel" (validityChanged)="onLabelChange($event)">
+ <sdc-required-validator [message]="'ADD_ARTIFACT_ERROR_LABEL_REQUIRED' | translate"></sdc-required-validator>
+ <sdc-regex-validator [message]="'VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED' | translate"
+ [pattern]="validationPatterns['label']"></sdc-regex-validator>
+ </sdc-validation>
+
+ <sdc-dropdown #artifactType [disabled]="isViewOnly || artifact && artifact.uniqueId" label="Type" [required]="true"
+ [selectedOption]="selectedFileType" placeHolder="Please choose type" (changed)="onTypeChange($event)"
+ [options]="artifactTypesOptions" [testId]="'artifacttype'"></sdc-dropdown>
+ <sdc-validation [validateElement]="artifactType">
+ <sdc-required-validator
+ [message]="'ADD_ARTIFACT_ERROR_TYPE_REQUIRED' | translate"></sdc-required-validator>
+ </sdc-validation>
+ </div>
+
+ <div class="right-form-container">
+ <sdc-textarea #artifactDescription
+ [(value)]="artifact.description"
+ [required]="true"
+ testId="description"
+ [maxLength]="256"
+ label="Description"
+ [disabled]="isViewOnly"
+ (keyup)="verifyTypeAndFileWereFilled()">
+ </sdc-textarea>
+ <sdc-validation [validateElement]="artifactDescription" (validityChanged)="onDescriptionChange($event)">
+ <sdc-required-validator
+ [message]="'ADD_ARTIFACT_ERROR_DESCRIPTION_REQUIRED' | translate:{'field': 'Message' }"></sdc-required-validator>
+ <sdc-regex-validator [message]="'VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED' | translate"
+ [pattern]="validationPatterns['comment']"></sdc-regex-validator>
+ </sdc-validation>
+ </div>
+ </div>
+</form>
+
+<div *ngIf="artifact && artifact.esId">
+ <div>UUID: {{artifact.artifactUUID}}</div>
+ <div>Version: {{artifact.artifactVersion}}</div>
+</div> \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/forms/artifacts-form/artifact-form.component.less b/catalog-ui/src/app/ng2/components/forms/artifacts-form/artifact-form.component.less
new file mode 100644
index 0000000000..3b04122085
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/forms/artifacts-form/artifact-form.component.less
@@ -0,0 +1,23 @@
+.artifact-form {
+ display: flex;
+ justify-content: space-between;
+ flex-direction: column;
+
+ .artifact-form-container {
+ margin-top: 10px;
+ display: flex;
+ flex-direction: row;
+ .left-form-container {
+ flex: 1;
+ padding-right: 10px;
+ }
+
+ .right-form-container {
+ flex: 1;
+
+ /deep/.sdc-textarea .sdc-textarea__textarea{
+ min-height: 110px;
+ }
+ }
+ }
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/forms/artifacts-form/artifact-form.component.spec.ts b/catalog-ui/src/app/ng2/components/forms/artifacts-form/artifact-form.component.spec.ts
new file mode 100644
index 0000000000..fc69509ee9
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/forms/artifacts-form/artifact-form.component.spec.ts
@@ -0,0 +1,242 @@
+import {ArtifactFormComponent} from "./artifact-form.component";
+import {async, ComponentFixture} from "@angular/core/testing";
+import {ConfigureFn, configureTests} from "../../../../../jest/test-config.helper";
+import {NO_ERRORS_SCHEMA} from "@angular/core";
+import {TranslateModule} from "../../../shared/translator/translate.module";
+import {CacheService} from "../../../services/cache.service";
+import {TranslateService} from "../../../shared/translator/translate.service";
+import {ArtifactModel} from "../../../../models/artifacts";
+import {IDropDownOption} from "onap-ui-angular/dist/form-elements/dropdown/dropdown-models";
+import {Observable, Subject} from "rxjs";
+import {getValue} from "@ngxs/store";
+
+
+describe('artifact form component', () => {
+
+ let fixture: ComponentFixture<ArtifactFormComponent>;
+ let cacheServiceMock: Partial<CacheService>;
+ let onValidationChangeMock: Partial<Subject<boolean>>;
+
+ let artifactModel = new ArtifactModel();
+
+
+ beforeEach(
+ async(() => {
+
+ onValidationChangeMock = {
+ next: jest.fn()
+ }
+
+ cacheServiceMock = {
+ contains: jest.fn(),
+ remove: jest.fn(),
+ set: jest.fn(),
+ get: jest.fn()
+ }
+
+ const configure: ConfigureFn = testBed => {
+ testBed.configureTestingModule({
+ declarations: [ArtifactFormComponent],
+ imports: [TranslateModule],
+ schemas: [NO_ERRORS_SCHEMA],
+ providers: [
+ {provide: CacheService, useValue: cacheServiceMock},
+ {provide: TranslateService, useValue: {}}
+ ],
+ });
+ };
+
+ configureTests(configure).then(testBed => {
+ fixture = testBed.createComponent(ArtifactFormComponent);
+ });
+ })
+ );
+
+
+ it('should verify initArtifactTypes for DEPLOYMENT and ArtifactType = HEAT_ENV', () =>{
+
+ cacheServiceMock.get.mockImplementation(() =>{
+ return {
+ artifacts: {
+ deployment:{
+ resourceInstanceDeploymentArtifacts: [{name: "Dummy Value Returned from ui api"}],
+ }
+ }
+ }
+ });
+
+ fixture.componentInstance.artifactType = 'DEPLOYMENT';
+ fixture.componentInstance.artifact = artifactModel;
+ fixture.componentInstance.artifact.artifactType = 'HEAT_ENV';
+
+ fixture.componentInstance.initArtifactTypes();
+
+ expect(fixture.componentInstance.selectedFileType).toEqual(undefined);
+
+ });
+
+ it('should verify initArtifactTypes for DEPLOYMENT and ComponentType = RESOURCE', () =>{
+
+ cacheServiceMock.get.mockImplementation(() =>{
+ return {
+ artifacts: {
+ deployment:{
+ resourceDeploymentArtifacts: [{name: "Dummy Value Returned from ui api"}],
+ }
+ }
+ }
+ });
+
+ fixture.componentInstance.artifactType = 'DEPLOYMENT';
+ fixture.componentInstance.artifact = artifactModel;
+ fixture.componentInstance.componentType = 'RESOURCE';
+
+ fixture.componentInstance.initArtifactTypes();
+
+ expect(fixture.componentInstance.selectedFileType).toEqual(undefined);
+
+ });
+
+ it('should verify initArtifactTypes for DEPLOYMENT and NOT ComponentType = RESOURCE OR NOT ArtifactType = HEAT_ENV', () =>{
+
+ cacheServiceMock.get.mockImplementation(() =>{
+ return {
+ artifacts: {
+ deployment:{
+ serviceDeploymentArtifacts: [{name: "Dummy Value Returned from ui api"}],
+ }
+ }
+ }
+ });
+
+ fixture.componentInstance.artifactType = 'DEPLOYMENT';
+ fixture.componentInstance.artifact = artifactModel;
+ // fixture.componentInstance.componentType = 'RESOURCE';
+
+ fixture.componentInstance.initArtifactTypes();
+
+ expect(fixture.componentInstance.selectedFileType).toEqual(undefined);
+
+ });
+
+ it('should verify initArtifactTypes for INFORMATION', () =>{
+
+ cacheServiceMock.get.mockImplementation(() =>{
+ return {
+ artifacts: {
+ other: [{name: "Val1"}, {name: "ExpectedValToBeSelected"}, {name: "Val3"}]
+ }
+ }
+ });
+
+ fixture.componentInstance.artifactType = 'INFORMATIONAL';
+ fixture.componentInstance.artifact = artifactModel;
+ fixture.componentInstance.artifact.artifactType = 'ExpectedValToBeSelected';
+
+ fixture.componentInstance.initArtifactTypes();
+
+ expect(fixture.componentInstance.selectedFileType).toEqual({"label": "ExpectedValToBeSelected", "value": "ExpectedValToBeSelected"});
+
+ });
+
+
+ it('should match current snapshot of artifact form component', () => {
+ expect(fixture).toMatchSnapshot();
+ });
+
+ it('should verify onUploadFile -> file gets file name', () => {
+ let file = {
+ filename:'dummyFileName'
+ }
+
+ fixture.componentInstance.verifyTypeAndFileWereFilled = jest.fn();
+ fixture.componentInstance.artifact = artifactModel;
+ fixture.componentInstance.onUploadFile(file);
+
+ expect(fixture.componentInstance.artifact.artifactName).toBe('dummyFileName');
+
+ const spy1 = jest.spyOn(fixture.componentInstance,'verifyTypeAndFileWereFilled');
+ expect(spy1).toHaveBeenCalled();
+ });
+
+ it('should verify onUploadFile -> file is null', () => {
+ let file = null;
+ fixture.componentInstance.artifact = artifactModel;
+ fixture.componentInstance.onUploadFile(file);
+
+ expect(fixture.componentInstance.artifact.artifactName).toBe(null);
+ });
+
+ it('should verify onTypeChange -> verifyTypeAndFileWereFilled is being called', () => {
+ let selectedFileType:IDropDownOption;
+ selectedFileType = {"label": "dummyLabel", "value": "dummyValue"};
+ fixture.componentInstance.verifyTypeAndFileWereFilled = jest.fn();
+
+ fixture.componentInstance.artifact = artifactModel;
+ fixture.componentInstance.onTypeChange(selectedFileType);
+
+ const spy1 = jest.spyOn(fixture.componentInstance,'verifyTypeAndFileWereFilled');
+ expect(spy1).toHaveBeenCalled();
+ });
+
+ it('should verify onDescriptionChange -> verifyTypeAndFileWereFilled is being called', () => {
+ fixture.componentInstance.verifyTypeAndFileWereFilled = jest.fn();
+ fixture.componentInstance.onValidationChange.next = jest.fn(() => true);
+
+ fixture.componentInstance.artifact = artifactModel;
+ fixture.componentInstance.onDescriptionChange();
+
+ const spy1 = jest.spyOn(fixture.componentInstance,'verifyTypeAndFileWereFilled');
+ expect(spy1).toHaveBeenCalled();
+ });
+
+ it('should verify onLabelChange -> verifyTypeAndFileWereFilled is being called', () => {
+ fixture.componentInstance.verifyTypeAndFileWereFilled = jest.fn();
+ fixture.componentInstance.onValidationChange.next = jest.fn(() => true);
+
+ fixture.componentInstance.artifact = artifactModel;
+ fixture.componentInstance.onLabelChange(true);
+
+ const spy1 = jest.spyOn(fixture.componentInstance,'verifyTypeAndFileWereFilled');
+ expect(spy1).toHaveBeenCalled();
+ });
+
+ it('should verify verifyTypeAndFileWereFilled -> verify branch this.artifact.artifactType !== \'DEPLOYMENT\' ==>> onValidationChange.next(false)', () => {
+ fixture.componentInstance.artifact = artifactModel;
+ fixture.componentInstance.artifact.artifactType = 'NOT_DEPLOYMENT';
+ fixture.componentInstance.artifact.mandatory = true;
+ fixture.componentInstance.descriptionIsValid = false;
+
+ let onValidationChangeResult;
+
+ fixture.componentInstance.onValidationChange.subscribe((data) => {
+ onValidationChangeResult = data;
+ // console.log("Subscriber got data >>>>> "+ data);
+ });
+
+ fixture.componentInstance.verifyTypeAndFileWereFilled();
+
+ expect(onValidationChangeResult).toBe(false);
+ });
+
+ it('should verify verifyTypeAndFileWereFilled -> verify branch this.artifact.artifactType !== \'DEPLOYMENT\' ==>> onValidationChange.next(true)', () => {
+ fixture.componentInstance.artifact = artifactModel;
+ fixture.componentInstance.artifact.artifactType = 'NOT_DEPLOYMENT';
+ fixture.componentInstance.artifact.mandatory = true;
+ fixture.componentInstance.artifact.artifactName = 'Something';
+ fixture.componentInstance.descriptionIsValid = true;
+
+ let onValidationChangeResult;
+
+ fixture.componentInstance.onValidationChange.subscribe((data) => {
+ onValidationChangeResult = data;
+ // console.log("Subscriber got data >>>>> "+ data);
+ });
+
+ fixture.componentInstance.verifyTypeAndFileWereFilled();
+
+ expect(onValidationChangeResult).toBe(true);
+ });
+
+
+}); \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/forms/artifacts-form/artifact-form.component.ts b/catalog-ui/src/app/ng2/components/forms/artifacts-form/artifact-form.component.ts
new file mode 100644
index 0000000000..905d1a25ad
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/forms/artifacts-form/artifact-form.component.ts
@@ -0,0 +1,132 @@
+/**
+ * Created by rc2122 on 5/31/2018.
+ */
+import { Component, Input } from '@angular/core';
+import * as _ from 'lodash';
+import { IDropDownOption } from 'onap-ui-angular/dist/form-elements/dropdown/dropdown-models';
+import { Subject } from 'rxjs/Subject';
+import { ArtifactModel } from '../../../../models';
+import { ArtifactType, ComponentType } from '../../../../utils';
+import { Dictionary } from '../../../../utils/dictionary/dictionary';
+import { CacheService } from '../../../services/cache.service';
+
+@Component({
+ selector: 'artifact-form',
+ templateUrl: './artifact-form.component.html',
+ styleUrls: ['./artifact-form.component.less']
+})
+export class ArtifactFormComponent {
+
+ @Input() artifact: ArtifactModel;
+ @Input() artifactType: ArtifactType;
+ @Input() componentType: string;
+ @Input() instanceId: string;
+ @Input() isViewOnly: boolean;
+
+ public artifactTypesOptions: IDropDownOption[] = [];
+ public validationPatterns: Dictionary<string, RegExp>;
+ public selectedFileType: IDropDownOption;
+ public showTypeFields: boolean;
+ private onValidationChange: Subject<boolean> = new Subject();
+ private descriptionIsValid: boolean;
+ private labelIsValid: boolean;
+
+ constructor(private cacheService: CacheService) {
+ }
+
+ ngOnInit(): void {
+ this.validationPatterns = this.cacheService.get('validation').validationPatterns;
+ this.initArtifactTypes();
+ this.artifact.artifactGroupType = this.artifact.artifactGroupType || this.artifactType.toString();
+ this.showTypeFields = (this.artifact.artifactGroupType === 'DEPLOYMENT' || !this.artifact.mandatory) && this.artifact.artifactGroupType !== 'SERVICE_API';
+ }
+
+ public onTypeChange = (selectedFileType: IDropDownOption) => {
+ this.artifact.artifactType = selectedFileType.value;
+ this.verifyTypeAndFileWereFilled();
+ }
+
+ public onUploadFile = (file) => {
+ if (file) {
+ this.artifact.artifactName = file.filename;
+ this.artifact.payloadData = file.base64;
+ console.log('FILE UPLOADED', file);
+ } else {
+ this.artifact.artifactName = null;
+ }
+ this.verifyTypeAndFileWereFilled();
+ }
+
+ private initArtifactTypes = (): void => {
+ const artifactTypes: any = this.cacheService.get('UIConfiguration');
+ let validExtensions: string[];
+ let artifactTypesList: string[];
+
+ switch (this.artifactType) {
+ case ArtifactType.DEPLOYMENT:
+ if (this.artifact.artifactType === ArtifactType.HEAT_ENV || this.instanceId) {
+ validExtensions = artifactTypes.artifacts.deployment.resourceInstanceDeploymentArtifacts;
+ } else if (this.componentType === ComponentType.RESOURCE) {
+ validExtensions = artifactTypes.artifacts.deployment.resourceDeploymentArtifacts;
+ } else {
+ validExtensions = artifactTypes.artifacts.deployment.serviceDeploymentArtifacts;
+ }
+ if (validExtensions) {
+ artifactTypesList = Object.keys(validExtensions);
+ }
+ break;
+ case ArtifactType.INFORMATION:
+ artifactTypesList = artifactTypes.artifacts.other.map((element: any) => {
+ return element.name;
+ });
+ _.remove(artifactTypesList, (item: string) => {
+ return _.has(ArtifactType.THIRD_PARTY_RESERVED_TYPES, item) ||
+ _.has(ArtifactType.TOSCA, item);
+ });
+ break;
+ }
+
+ _.forEach(artifactTypesList, (artifactType: string) => {
+ this.artifactTypesOptions.push({ label: artifactType, value: artifactType });
+ });
+
+ this.selectedFileType = _.find(this.artifactTypesOptions, (artifactType) => {
+ return artifactType.value === this.artifact.artifactType;
+ });
+
+ }
+
+ // Verify that the Type and the Name (file) are filled in the Modal
+ // For Description and Label - I used this.descriptionIsValid:boolean & this.labelIsValid:boolean as part of the sdc-validation Element
+ private verifyTypeAndFileWereFilled = () => {
+ if (this.artifact.artifactType === 'DEPLOYMENT' || !this.artifact.mandatory && this.artifact.artifactGroupType !== 'SERVICE_API') {
+ // In case of all fields are required:
+ // File, Description, Type and Label
+ if (this.artifact.artifactType && this.artifact.artifactName && this.descriptionIsValid && this.labelIsValid) {
+ this.onValidationChange.next(true);
+ } else {
+ this.onValidationChange.next(false);
+ }
+ } else {
+ // In case of like Information Artifact
+ // Only file and description are required
+ if (this.descriptionIsValid && this.artifact.artifactName) {
+ this.onValidationChange.next(true);
+ } else {
+ this.onValidationChange.next(false);
+ }
+ }
+ }
+
+ // sdc-validation for Description
+ private onDescriptionChange = (isValid: boolean): void => {
+ this.descriptionIsValid = isValid;
+ this.onValidationChange.next(isValid) && this.verifyTypeAndFileWereFilled();
+ }
+
+ // sdc-validation for Label
+ private onLabelChange = (isValid: boolean): void => {
+ this.labelIsValid = isValid;
+ this.onValidationChange.next(isValid) && this.verifyTypeAndFileWereFilled();
+ }
+}
diff --git a/catalog-ui/src/app/ng2/components/forms/artifacts-form/artifact-form.module.ts b/catalog-ui/src/app/ng2/components/forms/artifacts-form/artifact-form.module.ts
new file mode 100644
index 0000000000..dba801212e
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/forms/artifacts-form/artifact-form.module.ts
@@ -0,0 +1,21 @@
+/**
+ * Created by rc2122 on 5/24/2018.
+ */
+import { NgModule } from "@angular/core";
+import { TranslateModule } from "app/ng2/shared/translator/translate.module";
+import { SdcUiComponentsModule } from "onap-ui-angular";
+import { CommonModule } from '@angular/common';
+import {ArtifactFormComponent} from "./artifact-form.component";
+
+@NgModule({
+ declarations: [ArtifactFormComponent],
+ imports: [TranslateModule,
+ SdcUiComponentsModule,
+ CommonModule],
+ exports: [ArtifactFormComponent],
+ entryComponents: [ArtifactFormComponent]
+})
+
+
+export class ArtifactFormModule {
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/forms/artifacts-form/artifacts.service.ts b/catalog-ui/src/app/ng2/components/forms/artifacts-form/artifacts.service.ts
new file mode 100644
index 0000000000..f9400e9d18
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/forms/artifacts-form/artifacts.service.ts
@@ -0,0 +1,175 @@
+import { Injectable } from '@angular/core';
+import { Store } from '@ngxs/store';
+import { SdcUiCommon, SdcUiComponents, SdcUiServices } from 'onap-ui-angular';
+import { ArtifactModel } from '../../../../models';
+import { ArtifactGroupType, ArtifactType } from '../../../../utils/constants';
+import { TopologyTemplateService } from '../../../services/component-services/topology-template.service';
+import { TranslateService } from '../../../shared/translator/translate.service';
+import { CreateOrUpdateArtifactAction, DeleteArtifactAction } from '../../../store/actions/artifacts.action';
+import { EnvParamsComponent } from '../env-params/env-params.component';
+import { ArtifactFormComponent } from './artifact-form.component';
+
+import {
+ CreateInstanceArtifactAction,
+ DeleteInstanceArtifactAction,
+ UpdateInstanceArtifactAction
+} from '../../../store/actions/instance-artifacts.actions';
+
+@Injectable()
+export class ArtifactsService {
+
+ constructor(private serviceLoader: SdcUiServices.LoaderService,
+ private modalService: SdcUiServices.ModalService,
+ private topologyTemplateService: TopologyTemplateService,
+ private translateService: TranslateService,
+ private store: Store) {
+ }
+
+ public dispatchArtifactAction = (componentId: string, componentType: string, artifact: ArtifactModel, artifactType: ArtifactGroupType, instanceId: string) => {
+ const artifactObj = {
+ componentType,
+ componentId,
+ instanceId,
+ artifact
+ };
+
+ // Create or update instance artifact
+ if (instanceId) {
+ if (!artifact.uniqueId) {
+ // create instance artifact
+ return this.store.dispatch(new CreateInstanceArtifactAction(artifactObj));
+ } else {
+ // update instance artifact
+ return this.store.dispatch(new UpdateInstanceArtifactAction(artifactObj));
+ }
+ } else {
+ // Create or update artifact
+ return this.store.dispatch(new CreateOrUpdateArtifactAction(artifactObj));
+ }
+ }
+
+ public openArtifactModal = (componentId: string, componentType: string, artifact: ArtifactModel, artifactType: ArtifactGroupType, isViewOnly?: boolean, instanceId?: string) => {
+
+ let modalInstance;
+
+ const onOkPressed = () => {
+ const updatedArtifact = modalInstance.innerModalContent.instance.artifact;
+ this.serviceLoader.activate();
+ this.dispatchArtifactAction(componentId, componentType, updatedArtifact, artifactType, instanceId)
+ .subscribe().add(() => this.serviceLoader.deactivate());
+ };
+
+ const addOrUpdateArtifactModalConfig = {
+ title: (artifact && artifact.uniqueId) ? 'Update Artifact' : 'Create Artifact',
+ size: 'md',
+ type: SdcUiCommon.ModalType.custom,
+ testId: 'upgradeVspModal',
+ buttons: [
+ {
+ id: 'done',
+ text: 'DONE',
+ disabled: isViewOnly,
+ size: 'Add Another',
+ closeModal: true,
+ callback: onOkPressed
+ },
+ {text: 'CANCEL', size: 'sm', closeModal: true, type: 'secondary'}
+ ] as SdcUiCommon.IModalButtonComponent[]
+ } as SdcUiCommon.IModalConfig;
+
+ modalInstance = this.modalService.openCustomModal(addOrUpdateArtifactModalConfig, ArtifactFormComponent, {
+ artifact: new ArtifactModel(artifact),
+ artifactType,
+ instanceId,
+ componentType,
+ isViewOnly
+ });
+
+ if (!isViewOnly) {
+ modalInstance.innerModalContent.instance.onValidationChange.subscribe((isValid) => {
+ modalInstance.getButtonById('done').disabled = !isValid;
+ });
+ }
+ }
+
+ public openViewEnvParams(componentType: string, componentId: string, artifact: ArtifactModel, instanceId?: string) {
+ const envParamsModal = {
+ title: artifact.artifactDisplayName,
+ size: 'xl',
+ type: SdcUiCommon.ModalType.custom,
+ testId: 'viewEnvParams',
+ isDisabled: false,
+ } as SdcUiCommon.IModalConfig;
+
+ this.modalService.openCustomModal(envParamsModal, EnvParamsComponent, {
+ isInstanceSelected: !!instanceId, // equals to instanceId ? true : false
+ artifact: new ArtifactModel(artifact),
+ isViewOnly: true
+ });
+ }
+
+ public openUpdateEnvParams(componentType: string, componentId: string, artifact: ArtifactModel, instanceId?: string) {
+ let modalInstance;
+ const onOkPressed = () => {
+ const updatedArtifact = modalInstance.innerModalContent.instance.artifact;
+ this.serviceLoader.activate();
+ this.dispatchArtifactAction(componentId, componentType, updatedArtifact, ArtifactType.DEPLOYMENT, instanceId)
+ .subscribe().add(() => this.serviceLoader.deactivate());
+ };
+
+ const envParamsModal = {
+ title: artifact.artifactDisplayName,
+ size: 'xl',
+ type: SdcUiCommon.ModalType.custom,
+ testId: 'envParams',
+ isDisabled: false,
+ buttons: [
+ {
+ id: 'save',
+ text: 'Save',
+ spinner_position: 'left',
+ size: 'sm',
+ callback: onOkPressed,
+ closeModal: true
+ },
+ {text: 'Cancel', size: 'sm', closeModal: true, type: 'secondary'}
+ ] as SdcUiCommon.IModalButtonComponent[]
+ } as SdcUiCommon.IModalConfig;
+
+ modalInstance = this.modalService.openCustomModal(envParamsModal, EnvParamsComponent, {
+ isInstanceSelected: !!instanceId, // equals to instanceId ? true : false
+ artifact: new ArtifactModel(artifact)
+ });
+
+ modalInstance.innerModalContent.instance.onValidationChange.subscribe((isValid) => {
+ modalInstance.getButtonById('save').disabled = !isValid;
+ });
+ }
+
+ public deleteArtifact = (componentType: string, componentId: string, artifact: ArtifactModel, instanceId?: string) => {
+
+ const artifactObject = {
+ componentType,
+ componentId,
+ artifact,
+ instanceId
+ };
+
+ const onOkPressed: Function = () => {
+ this.serviceLoader.activate();
+ this.store.dispatch((instanceId) ? new DeleteInstanceArtifactAction(artifactObject) : new DeleteArtifactAction(artifactObject))
+ .subscribe().add(() => this.serviceLoader.deactivate());
+ };
+
+ const title = this.translateService.translate('ARTIFACT_VIEW_DELETE_MODAL_TITLE');
+ const text = this.translateService.translate('ARTIFACT_VIEW_DELETE_MODAL_TEXT', {name: artifact.artifactDisplayName});
+ const okButton = {
+ testId: 'OK',
+ text: 'OK',
+ type: SdcUiCommon.ButtonType.warning,
+ callback: onOkPressed,
+ closeModal: true
+ } as SdcUiComponents.ModalButtonComponent;
+ this.modalService.openWarningModal(title, text, 'delete-information-artifact-modal', [okButton]);
+ }
+}
diff --git a/catalog-ui/src/app/ng2/components/forms/env-params/__snapshots__/env-params.component.spec.ts.snap b/catalog-ui/src/app/ng2/components/forms/env-params/__snapshots__/env-params.component.spec.ts.snap
new file mode 100644
index 0000000000..aa567bbef2
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/forms/env-params/__snapshots__/env-params.component.spec.ts.snap
@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`environment parameters component should match current snapshot of env-params component 1`] = `
+<env-params
+ cacheService={[Function Object]}
+ clearCurrentValue={[Function Function]}
+ copiedWorkingArtifactHeatParameters={[Function Array]}
+ defaultDeploymentTimeout={[Function Number]}
+ displayRegexValid={[Function String]}
+ maxDeploymentTimeout={[Function Number]}
+ minDeploymentTimeout={[Function Number]}
+ onValidationChange={[Function Subject]}
+ onValidityChange={[Function Function]}
+ openPopOver={[Function Function]}
+ popoverService={[Function Object]}
+ textArea="undefined"
+>
+ <div
+ class="filter-bar"
+ >
+ <sdc-filter-bar />
+ </div><ngx-datatable
+ class="material ngx-datatable"
+ >
+ <div
+ visibilityobserver=""
+ >
+
+ <datatable-body
+ class="datatable-body"
+ >
+ <datatable-selection>
+
+
+
+ </datatable-selection>
+ </datatable-body>
+
+ </div>
+ </ngx-datatable>
+</env-params>
+`;
diff --git a/catalog-ui/src/app/ng2/components/forms/env-params/env-params.component.html b/catalog-ui/src/app/ng2/components/forms/env-params/env-params.component.html
new file mode 100644
index 0000000000..f55aff5132
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/forms/env-params/env-params.component.html
@@ -0,0 +1,71 @@
+<div class="filter-bar">
+ <sdc-filter-bar
+ [placeHolder]="'Search...'"
+ [testId]="'search-env-param-name'"
+ (keyup)="updateFilter($event)">
+ </sdc-filter-bar>
+</div>
+
+<ngx-datatable
+ class='material'
+ [rows]='artifact.heatParameters'
+ [columnMode]="'flex'"
+ [headerHeight]="40"
+ [rowHeight]="'auto'"
+ [scrollbarV]="false">
+
+ <ngx-datatable-column name="Parameter" [flexGrow]="2">
+ <ng-template let-row="row" ngx-datatable-cell-template prop="name">
+ {{row.name}}
+ <span *ngIf="row.description.length > 0" class="info">
+ <svg-icon [name]="'comment'" (click)="openPopOver('',row.description,{x:$event.pageX , y:$event.pageY },'bottom')"></svg-icon>
+ </span>
+ </ng-template>
+ </ngx-datatable-column>
+
+ <ngx-datatable-column name="DefaultValue"[flexGrow]="1">
+ <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
+ {{row.defaultValue}}
+ </ng-template>
+ </ngx-datatable-column>
+
+ <ngx-datatable-column name="CurrentValue" [flexGrow]="2">
+ <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
+ <sdc-input class="sdc-input-wrapper" #numberValidator
+ [placeHolder]="'Enter text'"
+ [isViewMode]="isViewOnly"
+ [size]="'medium'"
+ [(value)]=row.currentValue
+ [isIconClickable]="true"
+ (onRighIconClicked)="clearCurrentValue(row.name)"
+ [righIconName]="'trash-o'"
+ [testId] = "'value-field-of-' + row.name">
+ </sdc-input>
+
+ <sdc-validation [validateElement]="numberValidator" (validityChanged)="onValidityChange($event)" [disabled]="false" [testId]="_testId">
+ <sdc-regex-validator *ngIf="displayRegexValid && row.type == 'number' && row.currentValue !== null" [message]="'Value should be of type number.'" [pattern]="displayRegexValid" [disabled]="false"></sdc-regex-validator>
+ </sdc-validation>
+ </ng-template>
+ </ngx-datatable-column>
+
+</ngx-datatable>
+
+<div *ngIf="isInstanceSelected" class="artifactTimeout">
+
+ <sdc-number-input
+ label="Deployment Timeout ({{minDeploymentTimeout}}-{{maxDeploymentTimeout}} minutes)"
+ [required]="true"
+ [disabled]="false"
+ name="artifactTimeout"
+ testId="deploymentTimeout"
+ value="{{artifact.timeout}}"
+ [maxValue]="maxDeploymentTimeout"
+ [minValue]="minDeploymentTimeout"
+ (valueChange)="timeoutChanged($event)"
+ [isViewMode]="isViewOnly"
+ [step]="1"
+ >
+
+ </sdc-number-input>
+
+</div> \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/forms/env-params/env-params.component.less b/catalog-ui/src/app/ng2/components/forms/env-params/env-params.component.less
new file mode 100644
index 0000000000..48b4cba184
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/forms/env-params/env-params.component.less
@@ -0,0 +1,21 @@
+.filter-bar {
+ padding-bottom: 25px;
+}
+
+:host ::ng-deep {
+
+ .ngx-datatable {
+ //border: 1px solid red;
+ .datatable-body-cell {
+ .info {
+ float: right;
+ }
+ }
+ }
+}
+
+.artifactTimeout{
+ padding-top: 25px;
+ justify-content: start;
+ width: 230px;
+}
diff --git a/catalog-ui/src/app/ng2/components/forms/env-params/env-params.component.spec.ts b/catalog-ui/src/app/ng2/components/forms/env-params/env-params.component.spec.ts
new file mode 100644
index 0000000000..f6b0eb4a21
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/forms/env-params/env-params.component.spec.ts
@@ -0,0 +1,98 @@
+import {async, ComponentFixture} from "@angular/core/testing";
+import {EnvParamsComponent} from "./env-params.component";
+import {SdcUiServices, SdcUiCommon} from "onap-ui-angular";
+import {ConfigureFn, configureTests} from "../../../../../jest/test-config.helper";
+import {NgxDatatableModule} from "@swimlane/ngx-datatable";
+import {NO_ERRORS_SCHEMA} from "@angular/core";
+import {ArtifactModel} from "../../../../models/artifacts";
+import { CacheService } from '../../../services/cache.service';
+
+describe('environment parameters component', () => {
+
+ let fixture: ComponentFixture<EnvParamsComponent>;
+ let popoverServiceMock: Partial<SdcUiServices.PopoverService>;
+ let regexPatterns: any;
+
+ let artifactModel = new ArtifactModel();
+
+ let mockHeatParameters = [
+ {currentValue: "1", defaultValue: null, description: "Description 1", empty:false, name: "Param1", ownerId: null, type: "string", uniqueId: null, envDisplayName:null, version: null, filterTerm:null},
+ {currentValue: "2", defaultValue: null, description: "Description 2", empty:false, name: "Param2", ownerId: null, type: "string", uniqueId: null, envDisplayName:null, version: null, filterTerm:null},
+ {currentValue: "3", defaultValue: null, description: "Description 3", empty:false, name: "Param3", ownerId: null, type: "string", uniqueId: null, envDisplayName:null, version: null, filterTerm:null}
+ ];
+
+ let keyboardEvent = new KeyboardEvent("keyup");
+
+ beforeEach(
+ async(() => {
+
+ popoverServiceMock = {
+ createPopOver : jest.fn()
+ }
+
+ const configure: ConfigureFn = testBed => {
+ testBed.configureTestingModule({
+ declarations: [EnvParamsComponent],
+ imports: [NgxDatatableModule],
+ schemas: [NO_ERRORS_SCHEMA],
+ providers: [
+ { provide: SdcUiServices.PopoverService, useValue: popoverServiceMock },
+ { provide: CacheService, useValue: { get: jest.fn() } }
+ ],
+ });
+ };
+
+ configureTests(configure).then(testBed => {
+ fixture = testBed.createComponent(EnvParamsComponent);
+ });
+ })
+ );
+
+ it('should match current snapshot of env-params component', () => {
+ expect(fixture).toMatchSnapshot();
+ });
+
+ it('should clear CurrentValue for a given name in the heat parameter', () => {
+ fixture.componentInstance.artifact = artifactModel;
+ fixture.componentInstance.artifact.heatParameters = mockHeatParameters;
+ expect(fixture.componentInstance.artifact.heatParameters.length).toBe(3);
+ expect(fixture.componentInstance.artifact.heatParameters[0].currentValue).toBe("1");
+ fixture.componentInstance.clearCurrentValue("Param1");
+ expect(fixture.componentInstance.artifact.heatParameters[0].currentValue).toBe("");
+ });
+
+ it("should update filter heatParameters so there won''t be any value to be displayed", () => {
+
+ fixture.componentInstance.artifact = artifactModel;
+ fixture.componentInstance.artifact.heatParameters = mockHeatParameters;
+ fixture.componentInstance.ngOnInit();
+
+ let event = {
+ target : {
+ value: 'paramNotExist'
+ }
+ }
+
+ expect(fixture.componentInstance.artifact.heatParameters.length).toBe(3);
+ fixture.componentInstance.updateFilter(event);
+ expect(fixture.componentInstance.artifact.heatParameters.length).toBe(0);
+ });
+
+ it("should update filter heatParameters so there will be only 1 value to be displayed", () => {
+
+ fixture.componentInstance.artifact = artifactModel;
+ fixture.componentInstance.artifact.heatParameters = mockHeatParameters;
+ fixture.componentInstance.ngOnInit();
+
+ let event = {
+ target : {
+ value: 'param1'
+ }
+ }
+
+ expect(fixture.componentInstance.artifact.heatParameters.length).toBe(3);
+ fixture.componentInstance.updateFilter(event);
+ expect(fixture.componentInstance.artifact.heatParameters.length).toBe(1);
+ });
+
+}); \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/forms/env-params/env-params.component.ts b/catalog-ui/src/app/ng2/components/forms/env-params/env-params.component.ts
new file mode 100644
index 0000000000..58d266a01d
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/forms/env-params/env-params.component.ts
@@ -0,0 +1,91 @@
+/*-
+ * ============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 { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import { SdcUiCommon, SdcUiServices } from 'onap-ui-angular';
+import { Subject } from 'rxjs/Rx';
+import { ArtifactModel } from '../../../../models/artifacts';
+import { CacheService } from '../../../services/cache.service';
+
+export interface IPoint {
+ x: number;
+ y: number;
+}
+
+@Component({
+ selector: 'env-params',
+ templateUrl: './env-params.component.html',
+ styleUrls: ['../../../../../assets/styles/table-style.less', './env-params.component.less']
+})
+export class EnvParamsComponent implements OnInit {
+
+ @Input() public artifact: ArtifactModel;
+ @Input() public isInstanceSelected: boolean;
+ @Input() public isViewOnly: boolean;
+
+ @ViewChild('textArea') textArea: ElementRef;
+ private copiedWorkingArtifactHeatParameters = [];
+ private onValidationChange: Subject<boolean> = new Subject();
+ private displayRegexValid = SdcUiCommon.RegexPatterns.numberOrEmpty;
+
+ // Deployment timeout in minutes
+ private maxDeploymentTimeout: number = 120;
+ private minDeploymentTimeout: number = 1;
+ private defaultDeploymentTimeout: number = 60;
+
+ constructor(private cacheService: CacheService, private popoverService: SdcUiServices.PopoverService) {
+ const configuration = cacheService.get('UIConfiguration');
+ if (configuration && configuration.heatDeploymentTimeout) {
+ this.maxDeploymentTimeout = configuration.heatDeploymentTimeout.maxMinutes;
+ this.minDeploymentTimeout = configuration.heatDeploymentTimeout.minMinutes;
+ this.defaultDeploymentTimeout = configuration.heatDeploymentTimeout.defaultMinutes;
+ }
+ }
+
+ ngOnInit(): void {
+ this.copiedWorkingArtifactHeatParameters = [...this.artifact.heatParameters];
+ }
+
+ public clearCurrentValue = (name: string) => {
+ this.artifact.heatParameters.filter((param) => param.name === name)[0].currentValue = '';
+ }
+
+ public timeoutChanged(timeout) {
+ this.artifact.timeout = timeout;
+ }
+
+ updateFilter(event) {
+ const val = event.target.value.toLowerCase();
+ // filter our data
+ const temp = this.copiedWorkingArtifactHeatParameters.filter((param) => {
+ return !val || param.name ? param.name.toLowerCase().indexOf(val) !== -1 : -1 || param.currentValue ? param.currentValue.toLowerCase().indexOf(val) !== -1 : -1;
+ });
+ // update the rows
+ this.artifact.heatParameters = temp;
+ }
+
+ private openPopOver = (title: string, content: string, positionOnPage: IPoint, location: string) => {
+ this.popoverService.createPopOver(title, content, positionOnPage, location);
+ }
+
+ private onValidityChange = (isValid: boolean): void => {
+ this.onValidationChange.next(isValid);
+ }
+}
diff --git a/catalog-ui/src/app/ng2/components/forms/env-params/env-params.module.ts b/catalog-ui/src/app/ng2/components/forms/env-params/env-params.module.ts
new file mode 100644
index 0000000000..85797bd45f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/forms/env-params/env-params.module.ts
@@ -0,0 +1,28 @@
+import { NgModule } from "@angular/core";
+import { EnvParamsComponent } from "./env-params.component";
+import { NgxDatatableModule } from "@swimlane/ngx-datatable";
+import { SdcUiComponentsModule, SdcUiServices } from "onap-ui-angular";
+
+
+@NgModule({
+ declarations: [
+ EnvParamsComponent
+ ],
+ imports: [
+ NgxDatatableModule,
+ SdcUiComponentsModule
+ ],
+ exports: [
+ EnvParamsComponent
+ ],
+ entryComponents: [ //need to add anything that will be dynamically created
+ EnvParamsComponent
+ ],
+ providers: [
+ SdcUiServices.ModalService
+ ]
+})
+
+export class EnvParamsModule {
+
+}
diff --git a/catalog-ui/src/app/ng2/components/layout/layout.module.ts b/catalog-ui/src/app/ng2/components/layout/layout.module.ts
index 827209326c..f6d2cf487e 100644
--- a/catalog-ui/src/app/ng2/components/layout/layout.module.ts
+++ b/catalog-ui/src/app/ng2/components/layout/layout.module.ts
@@ -13,7 +13,9 @@ import { TopNavComponent } from "./top-nav/top-nav.component";
FormsModule,
TranslateModule
],
- exports: [],
+ exports: [
+ TopNavComponent
+ ],
entryComponents: [ //need to add anything that will be dynamically created
TopNavComponent
],
diff --git a/catalog-ui/src/app/ng2/components/layout/top-nav/__snapshots__/top-nav.comonent.spec.ts.snap b/catalog-ui/src/app/ng2/components/layout/top-nav/__snapshots__/top-nav.comonent.spec.ts.snap
new file mode 100644
index 0000000000..c650a9ca56
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/layout/top-nav/__snapshots__/top-nav.comonent.spec.ts.snap
@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`artifact form component should match current snapshot of top-nav component 1`] = `
+<top-nav
+ $state={[Function Object]}
+ _getTopLvlSelectedIndexByState={[Function Function]}
+ authService={[Function Object]}
+ sdcConfig={[Function Object]}
+ searchTermChange={[Function EventEmitter]}
+ translateService={[Function Object]}
+>
+ <nav
+ class="top-nav"
+ >
+ <div
+ class="asdc-app-title-wrapper"
+ >
+ <a
+ class="asdc-app-title"
+ >
+
+ </a>
+ <div
+ class="asdc-version"
+ >
+ v.
+ </div>
+ </div>
+
+
+ <div
+ class="top-search"
+ >
+ <input
+ class="search-text"
+ data-tests-id="main-menu-input-search"
+ placeholder="Search"
+ type="text"
+ />
+ <span
+ class="w-sdc-search-icon magnification"
+ />
+ </div>
+
+ </nav>
+</top-nav>
+`;
diff --git a/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.comonent.spec.ts b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.comonent.spec.ts
new file mode 100644
index 0000000000..54fbb36dcf
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.comonent.spec.ts
@@ -0,0 +1,161 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture } from '@angular/core/testing';
+import { PluginsConfiguration } from 'app/models';
+import { Observable } from 'rxjs';
+import { Mock } from 'ts-mockery';
+import { ConfigureFn, configureTests } from '../../../../../jest/test-config.helper';
+import { MenuItem, MenuItemGroup } from '../../../../utils/menu-handler';
+import { SdcConfigToken } from '../../../config/sdc-config.config';
+import { AuthenticationService } from '../../../services/authentication.service';
+import { TranslateModule } from '../../../shared/translator/translate.module';
+import { TranslateService } from '../../../shared/translator/translate.service';
+import { TopNavComponent } from './top-nav.component';
+
+describe('artifact form component', () => {
+
+ let fixture: ComponentFixture<TopNavComponent>;
+ let translateServiceMock: Partial<TranslateService>;
+ let mockStateService;
+ let authServiceMock;
+
+ const designerUser = {
+ email: 'designer@sdc.com',
+ firstName: 'Carlos',
+ fullName: 'Carlos Santana',
+ lastLoginTime: 1555587266566,
+ lastName: 'Santana',
+ role: 'DESIGNER',
+ status: 'ACTIVE',
+ userId: 'cs0008'
+ };
+
+ const pluginDisplayOptions = {
+ displayName : '',
+ displayContext : new Array<string>(),
+ displayRoles : new Array<string>()
+ };
+
+ let roleToReturn = designerUser;
+
+ const map1 = new Map();
+ map1.otherValue = pluginDisplayOptions;
+
+ const map2 = new Map();
+ pluginDisplayOptions.displayRoles = ['DESIGNER'];
+ pluginDisplayOptions.displayName = 'DCAE-DS';
+ map2.tab = pluginDisplayOptions;
+
+ PluginsConfiguration.plugins =
+ [
+ {pluginId: 'DCAED', pluginDiscoveryUrl: 'DCAED_discoveryURL', pluginSourceUrl: 'DCAED_sourceURL', pluginStateUrl: 'DCAED_stateURL', pluginDisplayOptions: map1, isOnline: true},
+ {pluginId: 'DCAE-DS', pluginDiscoveryUrl: 'DCAE-DS_discoveryURL', pluginSourceUrl: 'DCAE-DS_sourceURL', pluginStateUrl: 'DCAE-DS_stateURL', pluginDisplayOptions: map2, isOnline: true}
+ ];
+
+ beforeEach(
+ async(() => {
+ authServiceMock = {
+ getLoggedinUser: jest.fn().mockImplementation(() => {
+ return roleToReturn;
+ })
+ };
+
+ mockStateService = {
+ go: jest.fn(),
+ includes: jest.fn(() => true),
+ current : {
+ name : 'plugins'
+ },
+ params : {}
+ };
+
+ translateServiceMock = {
+ languageChangedObservable: Mock.of<Observable<string>>( {
+ subscribe : jest.fn().mockImplementation((cb) => {
+ cb();
+ })
+ }),
+ translate: jest.fn((str: string) => {
+ if (str === 'TOP_MENU_HOME_BUTTON') {
+ return 'HOME';
+ } else if (str === 'TOP_MENU_CATALOG_BUTTON') {
+ return 'CATALOG';
+ } else if (str === 'TOP_MENU_ON_BOARD_BUTTON') {
+ return 'ONBOARD';
+ } else {
+ return 'TBD...';
+ }
+ })
+ };
+
+ const configure: ConfigureFn = (testBed) => {
+ testBed.configureTestingModule({
+ declarations: [TopNavComponent],
+ imports: [TranslateModule],
+ schemas: [NO_ERRORS_SCHEMA],
+ providers: [
+ {provide: TranslateService, useValue: translateServiceMock},
+ {provide: '$state', useValue: mockStateService},
+ {provide: AuthenticationService, useValue: authServiceMock},
+ {provide: SdcConfigToken, useValue: {csarFileExtension: 'csar', toscaFileExtension: 'yaml,yml'}},
+ ],
+ });
+ };
+
+ configureTests(configure).then((testBed) => {
+ fixture = testBed.createComponent(TopNavComponent);
+ });
+ })
+ );
+
+ it('should match current snapshot of top-nav component', () => {
+ expect(fixture).toMatchSnapshot();
+ });
+
+ it('Once a Designer logged in, Menu Items will contain HOME, CATALOG, ONBOARD & DCAE-DS; HOME will be selected', () => {
+
+ // topLvlSelectedIndex = 1 => Ignore the inner call to _getTopLvlSelectedIndexByState.
+ fixture.componentInstance.topLvlSelectedIndex = 0;
+ fixture.componentInstance.ngOnInit();
+
+ expect(fixture.componentInstance.topLvlMenu.itemClick).toBe(true);
+
+ expect(fixture.componentInstance.topLvlMenu.menuItems.length).toBe(4);
+
+ expect(fixture.componentInstance.topLvlMenu.menuItems[0]).toEqual({
+ action: 'goToState',
+ blockedForTypes: null,
+ callback: null,
+ params: null,
+ state: 'dashboard',
+ text: 'HOME'
+ });
+ expect(fixture.componentInstance.topLvlMenu.menuItems[1]).toEqual({
+ action: 'goToState',
+ blockedForTypes: null,
+ callback: null,
+ params: null,
+ state: 'catalog',
+ text: 'CATALOG'
+ });
+ expect(fixture.componentInstance.topLvlMenu.menuItems[2]).toEqual({
+ action: 'goToState',
+ blockedForTypes: null,
+ callback: null,
+ params: null,
+ state: 'onboardVendor',
+ text: 'ONBOARD'
+ });
+ expect(fixture.componentInstance.topLvlMenu.menuItems[3]).toEqual({
+ action: 'goToState',
+ blockedForTypes: null,
+ callback: null,
+ params:
+ {path: 'DCAE-DS_stateURL'},
+ state: 'plugins',
+ text: 'DCAE-DS'
+ });
+
+ expect(fixture.componentInstance.topLvlMenu.selectedIndex).toBe(0);
+ });
+
+});
diff --git a/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.html b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.html
index f82e110f1f..2636dd96bb 100644
--- a/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.html
+++ b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.html
@@ -65,6 +65,6 @@
<span class="w-sdc-search-icon magnification"></span>
</div>
- <div class="notification-icon" [ngClass]="{'disabled' : progress > 0}" *ngIf="user.role === 'DESIGNER' && notificationIconCallback" (click)="notificationIconCallback()" tooltip="Vendor Software Product Repository" tooltipPlacement="left" data-tests-id="repository-icon"></div>
+ <div class="notification-icon" [ngClass]="{'disabled' : progress > 0}" *ngIf="user && user.role === 'DESIGNER' && notificationIconCallback" (click)="notificationIconCallback()" tooltip="Vendor Software Product Repository" tooltipPlacement="left" data-tests-id="repository-icon"></div>
</nav>
diff --git a/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.less b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.less
index 5c99015e7d..2bcdfc28d5 100644
--- a/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.less
+++ b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.less
@@ -120,7 +120,7 @@
height: 35px;
background-color: white;
font-size: 13px;
- width: 150px;
+ width: auto;
line-height: 35px;
padding: 0 10px;
diff --git a/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.ts b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.ts
index a253b3a933..3bd2255488 100644
--- a/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.ts
+++ b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.ts
@@ -19,14 +19,17 @@
*/
import * as _ from "lodash";
-import {Component, Inject, Input, Output, EventEmitter} from "@angular/core";
+import {Component, Inject, Input, Output, EventEmitter, OnInit, OnDestroy, OnChanges} from "@angular/core";
import {IHostedApplication, IUserProperties} from "app/models";
import {MenuItemGroup, MenuItem} from "app/utils";
-import {UserService} from "../../../services/user.service";
+import {AuthenticationService} from "../../../services/authentication.service";
import {SdcConfigToken, ISdcConfig} from "../../../config/sdc-config.config";
import {TranslateService} from "../../../shared/translator/translate.service";
import {PluginsConfiguration, Plugin} from "app/models";
-
+import { Subscription } from "rxjs";
+// import { Store } from "@ngrx/store";
+// import { AppState } from "app/ng2/store/app.state";
+// import * as unsavedChangesReducer from 'app/ng2/store/reducers/unsaved-changes.reducer';
declare const window:any;
@Component({
@@ -34,7 +37,7 @@ declare const window:any;
templateUrl: './top-nav.component.html',
styleUrls:['./top-nav.component.less']
})
-export class TopNavComponent {
+export class TopNavComponent implements OnInit, OnChanges {
@Input() public version:string;
@Input() public menuModel:Array<MenuItemGroup>;
@Input() public topLvlSelectedIndex:number;
@@ -48,15 +51,18 @@ export class TopNavComponent {
this.searchTermChange.emit(event);
}
+ private subscription: Subscription;
+ private hasUnsavedChanges: boolean;
public topLvlMenu:MenuItemGroup;
public user:IUserProperties;
private topNavPlugins: Array<Plugin>;
constructor(private translateService:TranslateService,
@Inject('$state') private $state:ng.ui.IStateService,
- private userService:UserService,
+ private authService:AuthenticationService,
@Inject(SdcConfigToken) private sdcConfig:ISdcConfig) {
window.nav = this;
+
}
private _getTopLvlSelectedIndexByState = ():number => {
@@ -112,7 +118,7 @@ export class TopNavComponent {
ngOnInit() {
console.log('Nav is init!', this.menuModel);
- this.user = this.userService.getLoggedinUser();
+ this.user = this.authService.getLoggedinUser();
this.topNavPlugins = _.filter(PluginsConfiguration.plugins, (plugin: Plugin) => {
return plugin.pluginDisplayOptions["tab"] !== undefined;
});
@@ -142,7 +148,6 @@ export class TopNavComponent {
this.topLvlMenu = new MenuItemGroup(0, tmpArray, true);
this.topLvlMenu.selectedIndex = isNaN(this.topLvlSelectedIndex) ? this._getTopLvlSelectedIndexByState() : this.topLvlSelectedIndex;
-
this.generateMenu();
});
}
@@ -160,6 +165,7 @@ export class TopNavComponent {
});
}
+
menuItemClick(itemGroup:MenuItemGroup, item:MenuItem) {
let onSuccessFunction = () => {
diff --git a/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/__snapshots__/filter-properties-assignment.component.spec.ts.snap b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/__snapshots__/filter-properties-assignment.component.spec.ts.snap
new file mode 100644
index 0000000000..02e98e2219
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/__snapshots__/filter-properties-assignment.component.spec.ts.snap
@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`filter-properties-assignemnt component should match current snapshot of artifact-tab component 1`] = `
+<filter-properties-assignment
+ allSelected="false"
+ clearAll={[Function Function]}
+ close={[Function Function]}
+ filterData={[Function FilterPropertiesAssignmentData]}
+ filterPopover={[Function ElementRef]}
+ footerButtons={[Function Object]}
+ onTypeSelected={[Function Function]}
+ search={[Function Function]}
+ searchProperties={[Function EventEmitter]}
+ selectAll={[Function Function]}
+ selectedTypes={[Function Object]}
+ someTypesSelectedAndThereIsPropertyName={[Function Function]}
+>
+ <popover-content
+ placement="bottom-right"
+ >
+ <form>
+ <div
+ class="field"
+ >
+ <label>
+ Resource Type
+ </label>
+ <div>
+ <checkbox
+ data-tests-id="filter-checkbox-all"
+ />
+ </div>
+
+ </div>
+ <div
+ class="field"
+ >
+ <label>
+ Property Name
+ </label>
+ <input
+ class="i-sdc-form-input"
+ data-tests-id="filter-box"
+ name="propertyName"
+ placeholder="Type here"
+ required=""
+ />
+ </div>
+ </form>
+ </popover-content><div
+ class="open-filter-button"
+ >
+ <div
+ class="sprite-new filter-icon"
+ data-tests-id="filter-button"
+ />
+ </div>
+</filter-properties-assignment>
+`;
diff --git a/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.html b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.html
index 9593ade48b..1c2d77a728 100644
--- a/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.html
@@ -38,6 +38,6 @@
</div>
</form>
</popover-content>
-<div class="open-filter-button" [popover]="filterPopover" [ngClass]="{'open':showPopover}" (onShown)="showPopover = true" (onHidden)="showPopover = false">
+<div class="open-filter-button" [popover]="filterPopover" >
<div class="sprite-new filter-icon" data-tests-id="filter-button"></div>
</div>
diff --git a/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.spec.ts b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.spec.ts
new file mode 100644
index 0000000000..bcc5535b32
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.spec.ts
@@ -0,0 +1,141 @@
+import {async, ComponentFixture} from "@angular/core/testing";
+import {FilterPropertiesAssignmentComponent} from "./filter-properties-assignment.component";
+import {ConfigureFn, configureTests} from "../../../../../jest/test-config.helper";
+import {NO_ERRORS_SCHEMA} from "@angular/core";
+import {FilterPropertiesAssignmentData} from "../../../../models/filter-properties-assignment-data";
+import {PopoverComponent} from "../../ui/popover/popover.component";
+
+
+
+describe('filter-properties-assignemnt component', () => {
+
+ let fixture: ComponentFixture<FilterPropertiesAssignmentComponent>;
+
+ beforeEach(
+ async(() => {
+
+ const configure: ConfigureFn = testBed => {
+ testBed.configureTestingModule({
+ declarations: [FilterPropertiesAssignmentComponent],
+ imports: [],
+ schemas: [NO_ERRORS_SCHEMA],
+ providers: [],
+ });
+ };
+
+ configureTests(configure).then(testBed => {
+ fixture = testBed.createComponent(FilterPropertiesAssignmentComponent);
+
+ });
+ })
+ );
+
+
+ it('should match current snapshot of artifact-tab component', () => {
+ expect(fixture).toMatchSnapshot();
+ });
+
+ it('on selectAll', () => {
+ let filterData:FilterPropertiesAssignmentData = new FilterPropertiesAssignmentData();
+ filterData.propertyName = 'testVal';
+ let typesOptions:Array<string> = ['option1', 'option2', 'option3'];
+ let selectedTypes:Object = {};
+
+ fixture.componentInstance.filterData = filterData;
+ fixture.componentInstance.typesOptions = typesOptions;
+ fixture.componentInstance.selectedTypes = selectedTypes;
+
+ fixture.componentInstance.selectAll();
+
+ let expectedRes = {"option1": false,"option2": false,"option3": false};
+ expect(fixture.componentInstance.selectedTypes).toEqual(expectedRes);
+ });
+
+
+ it ('on onTypeSelected allSelected set to False', () => {
+ let selectedTypes:Object = {"option1": true,"option2": false,"option3": true};
+ fixture.componentInstance.selectedTypes = selectedTypes;
+ fixture.componentInstance.allSelected = true;
+ fixture.componentInstance.onTypeSelected('option2');
+
+ expect(fixture.componentInstance.allSelected).toBe(false);
+ });
+
+ it ('on onTypeSelected allSelected remains True', () => {
+ let selectedTypes:Object = {"option1": true,"option2": true,"option3": true};
+ fixture.componentInstance.selectedTypes = selectedTypes;
+ fixture.componentInstance.allSelected = true;
+ fixture.componentInstance.onTypeSelected('option2');
+
+ expect(fixture.componentInstance.allSelected).toBe(true);
+ });
+
+ it ('on clearAll', () => {
+ let filterData:FilterPropertiesAssignmentData = new FilterPropertiesAssignmentData();
+ filterData.propertyName = 'testVal';
+ let selectedTypes:Object = {"option1": true,"option2": false,"option3": true};
+
+ fixture.componentInstance.filterData = filterData;
+ fixture.componentInstance.selectedTypes = selectedTypes;
+ fixture.componentInstance.allSelected = true;
+
+ fixture.componentInstance.clearAll();
+
+ expect(fixture.componentInstance.filterData.propertyName).toBe('');
+ expect(fixture.componentInstance.allSelected).toBe(false);
+ });
+
+ it ('someTypesSelectedAndThereIsPropertyName return True', ()=> {
+ let res = fixture.componentInstance.someTypesSelectedAndThereIsPropertyName();
+
+ expect(res).toBe(true)
+ });
+
+ it ('someTypesSelectedAndThereIsPropertyName return Null', ()=> {
+ let selectedTypes:Object = {"option1": true,"option2": false,"option3": true};
+ let filterData:FilterPropertiesAssignmentData = new FilterPropertiesAssignmentData();
+ filterData.propertyName = 'testVal';
+
+ fixture.componentInstance.selectedTypes = selectedTypes;
+ fixture.componentInstance.filterData = filterData;
+
+ let res = fixture.componentInstance.someTypesSelectedAndThereIsPropertyName();
+
+ expect(res).toBe(null)
+ });
+
+ it ('search', ()=> {
+
+ let filterData:FilterPropertiesAssignmentData = new FilterPropertiesAssignmentData();
+ filterData.selectedTypes = ["CP"];
+ fixture.componentInstance.filterData = filterData;
+
+ let componentType: string = 'resource';
+ fixture.componentInstance.componentType = componentType;
+
+ let selectedTypes:Object = {"option1": true,"CP": true,"option3": true};
+ fixture.componentInstance.selectedTypes = selectedTypes;
+
+ let temp:any;
+ let filterPopover: PopoverComponent = new PopoverComponent(temp , temp );
+ fixture.componentInstance.filterPopover = filterPopover;
+ fixture.componentInstance.filterPopover.hide = jest.fn();
+
+ fixture.componentInstance.search();
+
+ expect(fixture.componentInstance.filterData.selectedTypes).toEqual(["CP"]);
+ expect(fixture.componentInstance.filterPopover.hide).toHaveBeenCalled();
+ });
+
+ it('close', () => {
+ let temp:any;
+ let filterPopover: PopoverComponent = new PopoverComponent(temp , temp );
+ fixture.componentInstance.filterPopover = filterPopover;
+ fixture.componentInstance.filterPopover.hide = jest.fn();
+
+ fixture.componentInstance.close();
+
+ expect(fixture.componentInstance.filterPopover.hide).toHaveBeenCalled();
+ });
+
+}); \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.html b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.html
index 41ecaa899e..9d1a2fa734 100644
--- a/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.html
@@ -29,8 +29,8 @@
[rowHeight]="200"
[reorderable]="false"
>
- <ngx-datatable-column prop="{{col.prop}}" [minWidth]="100" *ngFor="let col of columns">
- <template let-column="column" height="100" ngx-datatable-header-template>
+ <ngx-datatable-column *ngFor="let col of columns" prop="{{col.prop}}" [minWidth]="100" >
+ <ng-template let-column="column" height="100" ngx-datatable-header-template>
<span class="datatable-column-span">
<b>{{col.name}}</b>
<div *ngIf="canBeDeleted(col.name)" style="width: 45px !important; color: red; "
@@ -44,23 +44,23 @@
placeholder='Filter column...'
(keyup)='updateColumnFilter($event, col.prop)'
/>
- </template>
+ </ng-template>
</ngx-datatable-column>
<ngx-datatable-column *ngIf="addNewColumn" class="datatable-white-body-cell" [minWidth]="220" [maxWidth]="220" [width]="220" >
- <template ngx-datatable-header-template>
+ <ng-template ngx-datatable-header-template>
<gab-column-provider [pathsAndNames]="pathsandnames" (onCancel)="hideAddNewColumn()" (onSave)="refresh()"></gab-column-provider>
- </template>
- <template class="datatable-white-body-cell" ngx-datatable-cell-template>
- </template>
+ </ng-template>
+ <ng-template class="datatable-white-body-cell" ngx-datatable-cell-template>
+ </ng-template>
</ngx-datatable-column>
<ngx-datatable-column class="datatable-white-body-cell" [minWidth]="50" [maxWidth]="50" [width]="50" >
- <template ngx-datatable-header-template>
+ <ng-template ngx-datatable-header-template>
<div data-tests-id="gab-add-btn" class="add-btn add-btn-div" (click)="showAddNewColumn()">Add</div>
- </template>
- <template class="datatable-white-body-cell" ngx-datatable-cell-template>
- </template>
+ </ng-template>
+ <ng-template class="datatable-white-body-cell" ngx-datatable-cell-template>
+ </ng-template>
</ngx-datatable-column>
</ngx-datatable>
-</div> \ No newline at end of file
+</div>
diff --git a/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.ts b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.ts
index 4de7ff07d9..ea8039e1b4 100644
--- a/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.ts
@@ -64,8 +64,8 @@ export class GenericArtifactBrowserComponent {
this.gabService.getArtifact(this.artifactid, this.resourceid, paths)
.subscribe(
response => {
- let typedServerResponse: IServerResponse = response.json() as IServerResponse;
- this.normalizeDataForNgxDatatable(typedServerResponse.data);
+ // let typedServerResponse: IServerResponse = response.json() as IServerResponse;
+ this.normalizeDataForNgxDatatable(response['data']);
},
() => {
this.ready = false;
diff --git a/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.spec.ts b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.spec.ts
new file mode 100644
index 0000000000..fc76463970
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.spec.ts
@@ -0,0 +1,52 @@
+import { async, ComponentFixture } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { ConfigureFn, configureTests } from '../../../../../jest/test-config.helper';
+import 'jest-dom/extend-expect';
+import {HierarchyNavigationComponent} from "./hierarchy-navigation.component";
+import {HierarchyDisplayOptions} from "./hierarchy-display-options";
+
+
+describe('hierarchyNavigationComponent', () => {
+ let fixture: ComponentFixture<HierarchyNavigationComponent>;
+ let hierarchyDisplayOptions: HierarchyDisplayOptions;
+ beforeEach(
+ async(() => {
+ const configure: ConfigureFn = testBed => {
+ testBed.configureTestingModule({
+ declarations: [HierarchyNavigationComponent]
+ });
+ };
+
+ configureTests(configure).then(testBed => {
+ fixture = testBed.createComponent(HierarchyNavigationComponent);
+ hierarchyDisplayOptions = new HierarchyDisplayOptions("id", "name", "children");
+ fixture.componentInstance.displayOptions = hierarchyDisplayOptions;
+ fixture.detectChanges();
+ fixture.componentInstance.displayData = [{name: "aaa", id: "1", children: [{name: "bbb", id: "1.1"}, {name: "ccc", id: "1.2", children: [{name: "aaa", id: "1.2.1"}]}]}, {name: "bbb", id: "2"}];
+ fixture.detectChanges();
+ });
+ })
+ );
+
+ it('should have a selected class after user click on a tree node',
+ () => {
+ let firstNodeElement = fixture.debugElement.query(By.css('.node-item'));
+ fixture.componentInstance.updateSelected.subscribe((item) => {
+ fixture.componentInstance.selectedItem = item.id;
+ fixture.detectChanges();
+ });
+ firstNodeElement.nativeElement.click();
+ fixture.whenStable().then(() => {
+ expect(firstNodeElement.children[0].nativeElement).toHaveClass('selected');
+ });
+ });
+
+ it('should call onClick function when user click on a tree node',
+ () => {
+ spyOn(fixture.componentInstance, 'onClick');
+ let firstNodeElement = fixture.debugElement.query(By.css('.node-item')).nativeElement;
+ firstNodeElement.click();
+ expect(fixture.componentInstance.onClick).toHaveBeenCalled();
+ });
+
+}); \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.ts b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.ts
index 1698157e90..8b20aa28f8 100644
--- a/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.ts
@@ -21,7 +21,6 @@
import {Component, Input, Output, EventEmitter} from '@angular/core';
import {HierarchyDisplayOptions} from './hierarchy-display-options';
-
@Component({
selector: 'hierarchy-navigation',
templateUrl: './hierarchy-navigation.component.html',
@@ -32,7 +31,6 @@ export class HierarchyNavigationComponent {
@Input() displayData: Array<any>;
@Input() selectedItem: any;
@Input() displayOptions: HierarchyDisplayOptions;
-
@Output() updateSelected:EventEmitter<any> = new EventEmitter();
onClick = ($event, item) => {
diff --git a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html
index 3ef1f57bf2..eeba590046 100644
--- a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html
@@ -35,33 +35,37 @@
<div class="no-data" *ngIf="!inputs || !inputs.length">No data to display</div>
<div>
<div class="table-row" *ngFor="let input of inputs" (click)="selectedInputId = input.path" [ngClass]="{'selected': selectedInputId && selectedInputId === input.path}">
+ <!-- Property Name -->
<div class="table-cell col1">
<div class="inner-cell-div" tooltip="{{input.name}}"><span class="property-name">{{input.name}}</span></div>
<span *ngIf="input.description"
class="property-description-icon sprite-new show-desc"
tooltip="{{input.description}}" tooltipDelay="0"></span>
</div>
+ <!-- From Instance -->
<div class="table-cell col3">
<div class="inner-cell-div" tooltip="{{instanceNamesMap[input.instanceUniqueId]?.name}}">
<span>{{instanceNamesMap[input.instanceUniqueId]?.name}}</span>
</div>
</div>
+ <!-- Type -->
<div class="table-cell col2">
<div class="inner-cell-div" tooltip="{{input.type | contentAfterLastDot}}">
<span>{{input.type | contentAfterLastDot}}</span>
</div>
</div>
+ <!-- Value -->
<div class="table-cell valueCol input-value-col" [class.inner-table-container]="input.childrenProperties || !input.isSimpleType">
<dynamic-element class="value-input"
- *ngIf="input.isSimpleType"
+ *ngIf="checkInstanceFePropertiesMapIsFilled() && input.isSimpleType"
pattern="validationUtils.getValidationPattern(input.type)"
[value]="input.defaultValueObj"
[type]="input.type"
- [constraints]="input.constraints"
[name]="input.name"
(elementChanged)="onInputChanged(input, $event)"
[readonly]="readonly"
- [testId]="'input-' + input.name">
+ [testId]="'input-' + input.name"
+ [constraints] = "getConstraints(input)">
</dynamic-element>
<div class="delete-button-container">
<span *ngIf="input.instanceUniqueId && !readonly" class="sprite-new delete-btn" (click)="openDeleteModal(input)" data-tests-id="delete-input-button"></span>
diff --git a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts
index d95198f162..f45d5a85c7 100644
--- a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts
@@ -26,6 +26,8 @@ import { Component, Input, Output, EventEmitter } from "@angular/core";
import { InputFEModel } from "app/models";
import { ModalService } from "../../../services/modal.service";
import { InstanceFeDetails } from "app/models/instance-fe-details";
+import { InstanceFePropertiesMap } from "../../../../models/properties-inputs/property-fe-map";
+import { DataTypeService } from "../../../services/data-type.service";
@Component({
selector: 'inputs-table',
@@ -41,6 +43,8 @@ export class InputsTableComponent {
@Output() inputChanged: EventEmitter<any> = new EventEmitter<any>();
@Output() deleteInput: EventEmitter<any> = new EventEmitter<any>();
+ @Input() fePropertiesMap: InstanceFePropertiesMap;
+
sortBy: String;
reverse: boolean;
selectedInputToDelete: InputFEModel;
@@ -74,7 +78,8 @@ export class InputsTableComponent {
};
- constructor(private modalService: ModalService) {
+ constructor(private modalService: ModalService, private dataTypeService: DataTypeService){
+ var x = 5
}
@@ -89,9 +94,40 @@ export class InputsTableComponent {
};
openDeleteModal = (input: InputFEModel) => {
+ console.log('exist inputs: ' + this.inputs)
+
+
this.selectedInputToDelete = input;
this.modalService.createActionModal("Delete Input", "Are you sure you want to delete this input?", "Delete", this.onDeleteInput, "Close").instance.open();
}
+
+ getConstraints(input:InputFEModel): string[]{
+
+ if (input.inputPath){
+ const pathValuesName = input.inputPath.split('#');
+ const rootPropertyName = pathValuesName[0];
+ const propertyName = pathValuesName[1];
+ let filterredRootPropertyType = _.values(this.fePropertiesMap)[0].filter(property =>
+ property.name == rootPropertyName);
+ if (filterredRootPropertyType.length > 0){
+ let rootPropertyType = filterredRootPropertyType[0].type;
+ return this.dataTypeService.getConstraintsByParentTypeAndUniqueID(rootPropertyType, propertyName);
+ }else{
+ return null;
+ }
+
+ }
+ // else if(input.constraints.length > 0){
+ // return input.constraints[0].validValues
+ // }
+ else{
+ return null;
+ }
+ }
+
+ checkInstanceFePropertiesMapIsFilled(){
+ return _.keys(this.fePropertiesMap).length > 0
+ }
}
diff --git a/catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.component.ts b/catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.component.ts
index aa5f2420b3..9613439859 100644
--- a/catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.component.ts
@@ -14,12 +14,11 @@
* permissions and limitations under the License.
*/
-
-import { Component, Input, Output, EventEmitter } from "@angular/core";
-import { PolicyInstance } from "app/models";
-import { ModalService } from "../../../services/modal.service";
-import { InstanceFeDetails } from "app/models/instance-fe-details";
-import {TranslateService} from 'app/ng2/shared/translator/translate.service';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { PolicyInstance } from 'app/models';
+import { InstanceFeDetails } from 'app/models/instance-fe-details';
+import { TranslateService } from 'app/ng2/shared/translator/translate.service';
+import { ModalService } from '../../../services/modal.service';
@Component({
selector: 'policies-table',
@@ -28,13 +27,13 @@ import {TranslateService} from 'app/ng2/shared/translator/translate.service';
})
export class PoliciesTableComponent {
- @Input() policies: Array<PolicyInstance>;
+ @Input() policies: PolicyInstance[];
@Input() instanceNamesMap: Map<string, InstanceFeDetails>;
@Input() readonly: boolean;
@Input() isLoading: boolean;
@Output() deletePolicy: EventEmitter<any> = new EventEmitter<any>();
- sortBy: String;
+ sortBy: string;
reverse: boolean;
selectedPolicyToDelete: PolicyInstance;
deleteMsgTitle: string;
@@ -42,43 +41,39 @@ export class PoliciesTableComponent {
modalDeleteBtn: string;
modalCancelBtn: string;
+ constructor(private modalService: ModalService, private translateService: TranslateService) {
+ }
+
sort = (sortBy) => {
this.reverse = (this.sortBy === sortBy) ? !this.reverse : true;
- let reverse = this.reverse ? 1 : -1;
+ const reverse = this.reverse ? 1 : -1;
this.sortBy = sortBy;
- let instanceNameMapTemp = this.instanceNamesMap;
- let itemIdx1Val = "";
- let itemIdx2Val = "";
- this.policies.sort(function (itemIdx1, itemIdx2) {
- if (sortBy == 'instanceUniqueId') {
- itemIdx1Val = (itemIdx1[sortBy] && instanceNameMapTemp[itemIdx1[sortBy]] !== undefined) ? instanceNameMapTemp[itemIdx1[sortBy]].name : "";
- itemIdx2Val = (itemIdx2[sortBy] && instanceNameMapTemp[itemIdx2[sortBy]] !== undefined) ? instanceNameMapTemp[itemIdx2[sortBy]].name : "";
- }
- else {
+ const instanceNameMapTemp = this.instanceNamesMap;
+ let itemIdx1Val = '';
+ let itemIdx2Val = '';
+ this.policies.sort((itemIdx1, itemIdx2) => {
+ if (sortBy === 'instanceUniqueId') {
+ itemIdx1Val = (itemIdx1[sortBy] && instanceNameMapTemp[itemIdx1[sortBy]] !== undefined) ? instanceNameMapTemp[itemIdx1[sortBy]].name : '';
+ itemIdx2Val = (itemIdx2[sortBy] && instanceNameMapTemp[itemIdx2[sortBy]] !== undefined) ? instanceNameMapTemp[itemIdx2[sortBy]].name : '';
+ } else {
itemIdx1Val = itemIdx1[sortBy];
itemIdx2Val = itemIdx2[sortBy];
- }
+ }
if (itemIdx1Val < itemIdx2Val) {
return -1 * reverse;
- }
- else if (itemIdx1Val > itemIdx2Val) {
+ } else if (itemIdx1Val > itemIdx2Val) {
return 1 * reverse;
- }
- else {
+ } else {
return 0;
}
});
- };
-
-
- constructor(private modalService: ModalService, private translateService: TranslateService) {
}
ngOnInit() {
- this.translateService.languageChangedObservable.subscribe(lang => {
- this.deleteMsgTitle = this.translateService.translate("DELETE_POLICY_TITLE");
- this.modalDeleteBtn = this.translateService.translate("MODAL_DELETE");
- this.modalCancelBtn = this.translateService.translate("MODAL_CANCEL");
+ this.translateService.languageChangedObservable.subscribe((lang) => {
+ this.deleteMsgTitle = this.translateService.translate('DELETE_POLICY_TITLE');
+ this.modalDeleteBtn = this.translateService.translate('MODAL_DELETE');
+ this.modalCancelBtn = this.translateService.translate('MODAL_CANCEL');
});
}
@@ -86,15 +81,13 @@ export class PoliciesTableComponent {
onDeletePolicy = () => {
this.deletePolicy.emit(this.selectedPolicyToDelete);
this.modalService.closeCurrentModal();
- };
+ }
openDeleteModal = (policy: PolicyInstance) => {
this.selectedPolicyToDelete = policy;
- this.translateService.languageChangedObservable.subscribe(lang => {
- this.deleteMsgBodyTxt = this.translateService.translate("DELETE_POLICY_MSG", {policyName: policy.name});
+ this.translateService.languageChangedObservable.subscribe((lang) => {
+ this.deleteMsgBodyTxt = this.translateService.translate('DELETE_POLICY_MSG', {policyName: policy.name});
this.modalService.createActionModal(this.deleteMsgTitle, this.deleteMsgBodyTxt, this.modalDeleteBtn, this.onDeletePolicy, this.modalCancelBtn).instance.open();
});
}
}
-
-
diff --git a/catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.module.ts b/catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.module.ts
index f780c62c0b..57cb13c281 100644
--- a/catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.module.ts
+++ b/catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.module.ts
@@ -14,12 +14,12 @@
* permissions and limitations under the License.
*/
-import { NgModule } from "@angular/core";
-import {CommonModule} from "@angular/common";
-import {PoliciesTableComponent} from "./policies-table.component";
-import {TranslateModule} from 'app/ng2/shared/translator/translate.module';
-import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module";
-import {GlobalPipesModule} from "../../../pipes/global-pipes.module";
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { UiElementsModule } from 'app/ng2/components/ui/ui-elements.module';
+import { TranslateModule } from 'app/ng2/shared/translator/translate.module';
+import { GlobalPipesModule } from '../../../pipes/global-pipes.module';
+import { PoliciesTableComponent } from './policies-table.component';
@NgModule({
declarations: [
@@ -38,4 +38,4 @@ import {GlobalPipesModule} from "../../../pipes/global-pipes.module";
providers: []
})
export class PoliciesTableModule {
-} \ No newline at end of file
+}
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html
index c4639aeda0..f6396e6f2c 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html
@@ -12,8 +12,8 @@
* See the License for the specific language governing permissions and
* limitations under the License.
-->
-
-
+
+
<div *ngIf="!property.hidden" class="dynamic-property-row nested-level-{{nestedLevel}}" [@fadeIn]
[ngClass]="{'selected': selectedPropertyId && selectedPropertyId === property.propertiesName, 'readonly': property.isDisabled ||property.isDeclared}"
[class.with-top-border]="property.isChildOfListOrMap"
@@ -48,13 +48,13 @@
pattern="validationUtils.getValidationPattern(property.type)"
[value]="property.isDeclared ? property.value : property.valueObj"
[type]="property.isDeclared ? 'string' : property.type"
- [childType]="property.schema.property.type"
[name]="property.name"
[path]="property.propertiesName"
- [constraints]="property.constraints"
(elementChanged)="onElementChanged($event)"
[readonly]="readonly || property.isDeclared || property.isDisabled"
[testId]="'prop-' + propertyTestsId"
+ [declared] = "property.isDeclared"
+ [constraints] = "constraints"
></dynamic-element>
</div>
</ng-container>
@@ -69,7 +69,7 @@
<ng-container *ngIf="!property.isDeclared">
<a *ngIf="(propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && !property.isChildOfListOrMap" class="property-icon add-item" (click)="createNewChildProperty();" [ngClass]="{'disabled':readonly || preventInsertItem(property)}" [attr.data-tests-id]="'add-to-list-' + propertyTestsId">Add value to list</a>
<span *ngIf="property.isChildOfListOrMap" (click)="deleteItem.emit(property);" class="property-icon sprite-new delete-item-icon" [ngClass]="{'disabled':readonly}" [attr.data-tests-id]="'delete-from-list-' + propertyTestsId"></span>
- <span *ngIf="!isPropertyFEModel && (propType == derivedPropertyTypes.COMPLEX || ((propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && hasChildren))" (click)="expandChildById(propPath)" class="property-icon sprite-new round-expand-icon" [class.open]="expandedChildId.indexOf(propPath) == 0" [attr.data-tests-id]="'expand-' + propertyTestsId"></span>
+ <span *ngIf="!isPropertyFEModel && (propType == derivedPropertyTypes.COMPLEX || ((propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && hasChildren))" (click)="expandChildById(propPath)" class="property-icon sprite-new round-expand-icon" [class.open]="expandedChildId.indexOf(propPath) == 0" [attr.data-tests-id]="'expand-' + propertyTestsId" ></span>
</ng-container>
</div>
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less
index 0adce2c99d..1007292854 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less
@@ -60,7 +60,7 @@
align-self:center;
cursor:pointer;
}
-
+
}
.filtered {
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts
index 6e19c95003..715426f212 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts
@@ -23,7 +23,7 @@ import {Component, Input, Output, EventEmitter, ViewChild, ComponentRef} from "@
import { PropertyFEModel, DerivedFEProperty, DerivedPropertyType } from "app/models";
import { PROPERTY_TYPES } from 'app/utils';
import { DataTypeService } from "../../../../services/data-type.service";
-import { trigger, state, style, transition, animate } from '@angular/core';
+import { trigger, state, style, transition, animate } from '@angular/animations';
import {PropertiesUtils} from "../../../../pages/properties-assignment/services/properties.utils";
import {IUiElementChangeEvent} from "../../../ui/form-components/ui-element-base.component";
import {DynamicElementComponent} from "../../../ui/dynamic-element/dynamic-element.component";
@@ -42,6 +42,7 @@ export class DynamicPropertyComponent {
isPropertyFEModel: boolean;
nestedLevel: number;
propertyTestsId: string;
+ constraints:string[];
@Input() canBeDeclared: boolean;
@Input() property: PropertyFEModel | DerivedFEProperty;
@@ -72,7 +73,30 @@ export class DynamicPropertyComponent {
this.propPath = (this.property instanceof PropertyFEModel) ? this.property.name : this.property.propertiesName;
this.nestedLevel = (this.property.propertiesName.match(/#/g) || []).length;
this.rootProperty = (this.rootProperty) ? this.rootProperty : <PropertyFEModel>this.property;
- this.propertyTestsId = this.getPropertyTestsId();
+ this.propertyTestsId = this.getPropertyTestsId();
+
+ this.initConsraintsValues();
+
+
+ }
+
+ initConsraintsValues(){
+ let primitiveProperties = ['string', 'integer', 'float', 'boolean'];
+
+ //Property has constraints
+ if(this.property.constraints){
+ this.constraints = this.property.constraints[0].validValues
+ }
+
+ //Complex Type
+ else if (primitiveProperties.indexOf(this.rootProperty.type) == -1 && primitiveProperties.indexOf(this.property.type) >= 0 ){
+ this.constraints = this.dataTypeService.getConstraintsByParentTypeAndUniqueID(this.rootProperty.type, this.property.name);
+ }
+
+ else{
+ this.constraints = null;
+ }
+
}
ngDoCheck() {
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html
index 2068b170b3..89b85d3578 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html
@@ -37,18 +37,18 @@
<div class="no-data" *ngIf="!fePropertiesMap || !(fePropertiesMap | keys).length">No data to display</div>
<ng-container *ngFor="let instanceId of fePropertiesMap | keys; trackBy:vspId">
+ <!-- Icon & Instance Name -->
<div class="table-rows-header white-sub-header" *ngIf="feInstanceNamesMap">
-
-
<span [ngClass]="['prop-instance-icon', feInstanceNamesMap[instanceId].iconClass, 'small']"></span>
- {{feInstanceNamesMap[instanceId].name}}
+ {{feInstanceNamesMap[instanceId].name}}
<div class="sprite-new archive-label" *ngIf="feInstanceNamesMap[instanceId].originArchived == true"></div>
</div>
-
- <div class="table-row" *ngFor="let property of fePropertiesMap[instanceId] | searchFilter:'name':searchTerm | orderBy:{path: path, direction: direction}; trackBy:property?.name "
+
+ <div class="table-row" *ngFor="let property of fePropertiesMap[instanceId] | searchFilter:'name':searchTerm | propertiesOrderBy:{path: path, direction: direction}; trackBy:property?.name "
(click)="onClickPropertyRow(property, instanceId, $event)" [ngClass]="{'selected': selectedPropertyId && selectedPropertyId === property.name, 'readonly': property.isDisabled || property.isDeclared}">
<div class="table-cell col1" [ngClass]="{'filtered':property.name === propertyNameSearchText}" [class.round-checkbox]="property.isDeclared">
+ <!-- Property Name -->
<div class="property-name">
<checkbox *ngIf="hasDeclareOption" [(checked)]="property.isSelected" [disabled]="property.isDisabled || property.isDeclared || readonly"
(checkedChange)="propertyChecked(property)" [attr.data-tests-id]="property.name"></checkbox>
@@ -62,16 +62,19 @@
<span *ngIf="showDelete" class="sprite-new delete-btn" [ngClass]="{'disabled' : property.isDisabled || property.isDeclared}" (click)="openDeleteModal(property)" data-tests-id="delete-input-button"></span>
</div>
</div>
+ <!-- Property Type -->
<div class="table-cell col2" *ngIf="!hidePropertyType">
<div class="inner-cell-div" tooltip="{{property.type | contentAfterLastDot}}">
<span>{{property.type | contentAfterLastDot}}</span>
</div>
</div>
+ <!-- Property ES (Entry Schema) -->
<div class="table-cell col3" *ngIf="!hidePropertyType">
<div *ngIf="property.schema && property.schema.property && property.schema.property.type" class="inner-cell-div" tooltip="{{property.schema.property.type | contentAfterLastDot}}">
<span>{{property.schema.property.type | contentAfterLastDot}}</span>
</div>
</div>
+ <!-- Property Value -->
<div class="table-cell valueCol">
<!-- [ngClass]="{'filtered':property.name === propertyNameSearchText}" (selectProperty)="propertySelected(property, $event, flatProperty.propertiesName)" [propType]="property.type" [propSchema]="property.schema" [propKey]="" [propValue]="property.value"-->
<dynamic-property
@@ -86,9 +89,10 @@
(expandChild)="property.updateExpandedChildPropertyId($event)"
(clickOnPropertyRow)="onClickPropertyInnerRow($event, instanceId)"
(checkProperty)="propertyChecked(property, $event)"
+
>
+
</dynamic-property>
-
</div>
</div>
</ng-container>
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.spec.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.spec.ts
new file mode 100644
index 0000000000..ea524e54b1
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.spec.ts
@@ -0,0 +1,175 @@
+import { NO_ERRORS_SCHEMA, SimpleChange } from '@angular/core';
+import { ComponentFixture } from '@angular/core/testing';
+import { ConfigureFn, configureTests } from '../../../../../jest/test-config.helper';
+import { DerivedFEProperty } from '../../../../models/properties-inputs/derived-fe-property';
+import { PropertyBEModel } from '../../../../models/properties-inputs/property-be-model';
+import { PropertyFEModel } from '../../../../models/properties-inputs/property-fe-model';
+import { ContentAfterLastDotPipe } from '../../../pipes/contentAfterLastDot.pipe';
+import { KeysPipe } from '../../../pipes/keys.pipe';
+import { PropertiesOrderByPipe } from '../../../pipes/properties-order-by.pipe';
+import { SearchFilterPipe } from '../../../pipes/searchFilter.pipe';
+import { ModalService } from '../../../services/modal.service';
+import { PropertiesService } from '../../../services/properties.service';
+import { PropertiesTableComponent, PropertyRowSelectedEvent } from './properties-table.component';
+
+describe('properties-table component', () => {
+
+ let fixture: ComponentFixture<PropertiesTableComponent>;
+ let propertiesServiceMock: Partial<PropertiesService>;
+ let modalServiceMock: Partial<ModalService>;
+
+ beforeEach(
+ () => {
+ propertiesServiceMock = {
+ undoDisableRelatedProperties: jest.fn(),
+ disableRelatedProperties: jest.fn()
+ };
+ modalServiceMock = {
+
+ };
+
+ const configure: ConfigureFn = (testBed) => {
+ testBed.configureTestingModule({
+ declarations: [
+ PropertiesTableComponent,
+ KeysPipe,
+ PropertiesOrderByPipe,
+ SearchFilterPipe,
+ ContentAfterLastDotPipe
+ ],
+ imports: [],
+ schemas: [NO_ERRORS_SCHEMA],
+ providers: [
+ {provide: PropertiesService, useValue: propertiesServiceMock},
+ {provide: ModalService, useValue: modalServiceMock}
+ ],
+ });
+ };
+
+ configureTests(configure).then((testBed) => {
+ fixture = testBed.createComponent(PropertiesTableComponent);
+ });
+ }
+ );
+
+ it('When Properties assignment page is loaded, it is sorted by property name (acsending)', () => {
+ const fePropertiesMapValues = new SimpleChange('previousValue', 'currentValue', true);
+ const changes = {
+ fePropertiesMap: fePropertiesMapValues
+ };
+
+ // init values before ngOnChanges was called
+ fixture.componentInstance.sortBy = 'existingValue';
+
+ fixture.componentInstance.ngOnChanges(changes);
+
+ expect (fixture.componentInstance.reverse).toEqual(true);
+ // expect (fixture.componentInstance.direction).toEqual(1);
+ expect (fixture.componentInstance.direction).toEqual(fixture.componentInstance.ascUpperLettersFirst);
+ expect (fixture.componentInstance.sortBy).toEqual('name');
+ expect (fixture.componentInstance.path.length).toEqual(1);
+ expect (fixture.componentInstance.path[0]).toEqual('name');
+ });
+
+ it('When ngOnChanges is called without fePropertiesMap,' +
+ ' sortBy will remain as it was', () => {
+ const fePropertiesMapValues = new SimpleChange('previousValue', 'currentValue', true);
+ const changes = {
+ dummyKey: fePropertiesMapValues
+ };
+
+ // init values before ngOnChanges was called
+ fixture.componentInstance.sortBy = 'existingValue';
+ fixture.componentInstance.sort = jest.fn();
+
+ fixture.componentInstance.ngOnChanges(changes);
+
+ expect (fixture.componentInstance.sortBy).toEqual('existingValue');
+ });
+
+ it ('When sort is called init this.direction to 1', () => {
+ // init values
+ fixture.componentInstance.reverse = false;
+ fixture.componentInstance.direction = 0;
+ fixture.componentInstance.sortBy = 'initialize.Value';
+ fixture.componentInstance.path = [];
+
+ // call sore function
+ fixture.componentInstance.sort('initialize.Value');
+
+ // expect that
+ expect (fixture.componentInstance.reverse).toBe(true);
+ expect (fixture.componentInstance.direction).toBe(fixture.componentInstance.ascUpperLettersFirst);
+ expect (fixture.componentInstance.sortBy).toBe('initialize.Value');
+ expect (fixture.componentInstance.path.length).toBe(2);
+ expect (fixture.componentInstance.path[0]).toBe('initialize');
+ expect (fixture.componentInstance.path[1]).toBe('Value');
+ });
+
+ it ('When sort is called init this.direction to -1', () => {
+ // init values
+ fixture.componentInstance.reverse = true;
+ fixture.componentInstance.direction = 0;
+ fixture.componentInstance.sortBy = 'initialize.Value';
+ fixture.componentInstance.path = [];
+
+ // call sore function
+ fixture.componentInstance.sort('initialize.Value');
+
+ // expect that
+ expect (fixture.componentInstance.reverse).toBe(false);
+ expect (fixture.componentInstance.direction).toBe(fixture.componentInstance.descLowerLettersFirst);
+ });
+
+ it ('When onPropertyChanged is called, event is emitted' , () => {
+ spyOn(fixture.componentInstance.emitter, 'emit');
+ fixture.componentInstance.onPropertyChanged('testProperty');
+ expect(fixture.componentInstance.emitter.emit).toHaveBeenCalledWith('testProperty');
+ });
+
+ it ('When onClickPropertyRow is called, selectedPropertyId is updated and event is emitted.' , () => {
+ const propertyFEModel = new PropertyFEModel(new PropertyBEModel());
+ propertyFEModel.name = 'propertyName';
+ const propertyRowSelectedEvent: PropertyRowSelectedEvent = new PropertyRowSelectedEvent(propertyFEModel, 'instanceName');
+
+ spyOn(fixture.componentInstance.selectPropertyRow, 'emit');
+ fixture.componentInstance.onClickPropertyRow(propertyFEModel, 'instanceName');
+
+ expect (fixture.componentInstance.selectedPropertyId).toBe('propertyName');
+ expect (fixture.componentInstance.selectPropertyRow.emit).toHaveBeenCalledWith(propertyRowSelectedEvent);
+ });
+
+ it ('When onClickPropertyInnerRow is called, event is emitted.' , () => {
+ const derivedFEProperty = new DerivedFEProperty(new PropertyBEModel());
+ const propertyRowSelectedEvent: PropertyRowSelectedEvent = new PropertyRowSelectedEvent(derivedFEProperty, 'instanceName');
+ spyOn(fixture.componentInstance.selectPropertyRow, 'emit');
+ fixture.componentInstance.onClickPropertyInnerRow(derivedFEProperty, 'instanceName');
+
+ expect (fixture.componentInstance.selectPropertyRow.emit).toHaveBeenCalledWith(propertyRowSelectedEvent);
+ });
+
+ it ('When propertyChecked is called, propertiesService.undoDisableRelatedProperties is called and event is emitted.' , () => {
+
+ const propertyFEModel = new PropertyFEModel(new PropertyBEModel());
+ propertyFEModel.isSelected = false;
+ const propertyRowSelectedEvent: PropertyRowSelectedEvent = new PropertyRowSelectedEvent(propertyFEModel, 'instanceName1');
+
+ spyOn(fixture.componentInstance.updateCheckedPropertyCount, 'emit');
+ fixture.componentInstance.propertyChecked(propertyFEModel);
+ expect (propertiesServiceMock.undoDisableRelatedProperties).toHaveBeenCalledWith(propertyFEModel, undefined);
+ expect (fixture.componentInstance.updateCheckedPropertyCount.emit).toHaveBeenCalledWith(false);
+ });
+
+ it ('When propertyChecked is called, propertiesService.disableRelatedProperties is called and event is emitted.' , () => {
+
+ const propertyFEModel = new PropertyFEModel(new PropertyBEModel());
+ propertyFEModel.isSelected = true;
+ const propertyRowSelectedEvent: PropertyRowSelectedEvent = new PropertyRowSelectedEvent(propertyFEModel, 'instanceName1');
+
+ spyOn(fixture.componentInstance.updateCheckedPropertyCount, 'emit');
+ fixture.componentInstance.propertyChecked(propertyFEModel);
+ expect (propertiesServiceMock.disableRelatedProperties).toHaveBeenCalledWith(propertyFEModel, undefined);
+ expect (fixture.componentInstance.updateCheckedPropertyCount.emit).toHaveBeenCalledWith(true);
+ });
+
+});
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts
index 0cc188134f..e499b3786b 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts
@@ -8,9 +8,9 @@
* 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.
@@ -19,33 +19,33 @@
* ============LICENSE_END=========================================================
*/
-import { Component, Input, Output, EventEmitter} from "@angular/core";
-import {PropertyFEModel, DerivedFEProperty, InstanceFePropertiesMap} from "app/models";
-import {PropertiesService} from "../../../services/properties.service";
-import {ModalService} from "../../../services/modal.service";
-import { InstanceFeDetails } from "../../../../models/instance-fe-details";
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { DerivedFEProperty, InstanceFePropertiesMap, PropertyFEModel } from 'app/models';
+import { InstanceFeDetails } from '../../../../models/instance-fe-details';
+import { PropertiesService } from '../../../services/properties.service';
+import { ModalService } from '../../../services/modal.service';
@Component({
selector: 'properties-table',
templateUrl: './properties-table.component.html',
styleUrls: ['./properties-table.component.less']
})
-export class PropertiesTableComponent {
+export class PropertiesTableComponent implements OnChanges {
@Input() fePropertiesMap: InstanceFePropertiesMap;
@Input() feInstanceNamesMap: Map<string, InstanceFeDetails>;
@Input() selectedPropertyId: string;
- @Input() propertyNameSearchText:string;
- @Input() searchTerm:string;
- @Input() readonly:boolean;
- @Input() isLoading:boolean;
- @Input() hasDeclareOption:boolean;
- @Input() hidePropertyType:boolean;
+ @Input() propertyNameSearchText: string;
+ @Input() searchTerm: string;
+ @Input() readonly: boolean;
+ @Input() isLoading: boolean;
+ @Input() hasDeclareOption: boolean;
+ @Input() hidePropertyType: boolean;
@Input() showDelete:boolean;
-
+
@Output('propertyChanged') emitter: EventEmitter<PropertyFEModel> = new EventEmitter<PropertyFEModel>();
@Output() selectPropertyRow: EventEmitter<PropertyRowSelectedEvent> = new EventEmitter<PropertyRowSelectedEvent>();
- @Output() updateCheckedPropertyCount: EventEmitter<boolean> = new EventEmitter<boolean>();//only for hasDeclareOption and hasDeclareListOption
+ @Output() updateCheckedPropertyCount: EventEmitter<boolean> = new EventEmitter<boolean>(); // only for hasDeclareOption
@Output() updateCheckedChildPropertyCount: EventEmitter<boolean> = new EventEmitter<boolean>();//only for hasDeclareListOption
@Output() deleteProperty: EventEmitter<PropertyFEModel> = new EventEmitter<PropertyFEModel>();
private selectedPropertyToDelete: PropertyFEModel;
@@ -53,41 +53,48 @@ export class PropertiesTableComponent {
sortBy: String;
reverse: boolean;
direction: number;
- path:string[];
+ path: string[];
- sort(sortBy){
- this.reverse = (this.sortBy === sortBy) ? !this.reverse : true;
- this.direction = this.reverse ? 1 : -1;
- this.sortBy = sortBy;
- this.path = sortBy.split('.');
+ readonly ascUpperLettersFirst = 1;
+ readonly descLowerLettersFirst = -1;
+
+ constructor(private propertiesService: PropertiesService, private modalService: ModalService ) {
}
- constructor (private propertiesService:PropertiesService, private modalService: ModalService){
+ ngOnChanges(changes: SimpleChanges): void {
+ if (changes.fePropertiesMap) {
+ this.sortBy = '';
+ this.sort('name');
+ }
}
-
- ngOnInit() {
+
+ sort(sortBy) {
+ this.reverse = (this.sortBy === sortBy) ? !this.reverse : true;
+ this.direction = this.reverse ? this.ascUpperLettersFirst : this.descLowerLettersFirst;
+ this.sortBy = sortBy;
+ this.path = sortBy.split('.');
}
onPropertyChanged = (property) => {
this.emitter.emit(property);
- };
+ }
// Click on main row (row of propertyFEModel)
- onClickPropertyRow = (property:PropertyFEModel, instanceName:string, event?) => {
- //event && event.stopPropagation();
+ onClickPropertyRow = (property: PropertyFEModel, instanceName: string, event?) => {
+ // event && event.stopPropagation();
this.selectedPropertyId = property.name;
- let propertyRowSelectedEvent:PropertyRowSelectedEvent = new PropertyRowSelectedEvent(property, instanceName);
+ const propertyRowSelectedEvent: PropertyRowSelectedEvent = new PropertyRowSelectedEvent(property, instanceName);
this.selectPropertyRow.emit(propertyRowSelectedEvent);
- };
+ }
// Click on inner row (row of DerivedFEProperty)
- onClickPropertyInnerRow = (property:DerivedFEProperty, instanceName:string) => {
- let propertyRowSelectedEvent:PropertyRowSelectedEvent = new PropertyRowSelectedEvent(property, instanceName);
+ onClickPropertyInnerRow = (property: DerivedFEProperty, instanceName: string) => {
+ const propertyRowSelectedEvent: PropertyRowSelectedEvent = new PropertyRowSelectedEvent(property, instanceName);
this.selectPropertyRow.emit(propertyRowSelectedEvent);
}
propertyChecked = (prop: PropertyFEModel, childPropName?: string) => {
- let isChecked: boolean = (!childPropName)? prop.isSelected : prop.flattenedChildren.find(prop => prop.propertiesName == childPropName).isSelected;
+ const isChecked: boolean = (!childPropName) ? prop.isSelected : prop.flattenedChildren.find((prop) => prop.propertiesName == childPropName).isSelected;
if (!isChecked) {
this.propertiesService.undoDisableRelatedProperties(prop, childPropName);
@@ -116,11 +123,10 @@ export class PropertiesTableComponent {
}
export class PropertyRowSelectedEvent {
- propertyModel:PropertyFEModel | DerivedFEProperty;
- instanceName:string;
- constructor ( propertyModel:PropertyFEModel | DerivedFEProperty, instanceName:string ){
+ propertyModel: PropertyFEModel | DerivedFEProperty;
+ instanceName: string;
+ constructor( propertyModel: PropertyFEModel | DerivedFEProperty, instanceName: string ) {
this.propertyModel = propertyModel;
this.instanceName = instanceName;
}
}
-
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts
index cb8c9a694b..4d968a088c 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts
@@ -4,7 +4,6 @@ import {DynamicPropertyComponent} from "./dynamic-property/dynamic-property.comp
import {FormsModule} from "@angular/forms";
import {UiElementsModule} from "../../ui/ui-elements.module";
import {CommonModule} from "@angular/common";
-import {HttpModule} from "@angular/http";
import {FilterChildPropertiesPipe} from "./pipes/filterChildProperties.pipe";
import {GlobalPipesModule} from "../../../pipes/global-pipes.module";
import {PropertiesService} from "../../../services/properties.service";
@@ -13,7 +12,6 @@ import {MultilineEllipsisModule} from "../../../shared/multiline-ellipsis/multil
@NgModule({
imports: [
FormsModule,
- HttpModule,
CommonModule,
GlobalPipesModule,
UiElementsModule,
diff --git a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.ts b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.ts
index 2e3c21c210..d41b580514 100644
--- a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.ts
@@ -9,6 +9,7 @@ import {ComponentInstanceServiceNg2} from "../../../services/component-instance-
import {PropertiesUtils} from "app/ng2/pages/properties-assignment/services/properties.utils";
import {Requirement} from "../../../../models/requirement";
import {Capability, RequirementCapabilityModel} from "../../../../models/capability";
+import { WorkspaceService } from "app/ng2/pages/workspace/workspace.service";
const REQUIREMENT = 'Requirement';
const CAPABILITY = 'Capability';
@@ -24,14 +25,9 @@ export class SelectRequirementOrCapabilityComponent implements OnInit {
@Input() optionalRequirementsMap:Dictionary<Requirement[]>; //optional requirement map - key is type, value is array of requirements
@Input() optionalCapabilitiesMap:Dictionary<Capability[]>; //optional capabilities map - key is type, value is array of capabilities
-
@Input() selectedReqOrCapOption:string; // the selection value chosen by the user (options: requirement / capability )
-
- @Input() currentComponent:ComponentModel;
@Input() componentInstanceId:string;
-
@Input() selectedReqOrCapModel:RequirementCapabilityModel;
-
@Output() updateSelectedReqOrCap:EventEmitter<RequirementCapabilityModel> = new EventEmitter<RequirementCapabilityModel>();
types:Array<string> = [];
@@ -51,7 +47,8 @@ export class SelectRequirementOrCapabilityComponent implements OnInit {
private _loadingCapabilityProperties: Array<Capability>;
constructor(private componentInstanceServiceNg2:ComponentInstanceServiceNg2,
- private propertiesUtils:PropertiesUtils) {
+ private propertiesUtils:PropertiesUtils,
+ private workspaceService: WorkspaceService) {
this.selectOptions = [new RadioButtonModel(REQUIREMENT, REQUIREMENT), new RadioButtonModel(CAPABILITY, CAPABILITY)];
this._loadingCapabilityProperties = [];
}
@@ -171,14 +168,13 @@ export class SelectRequirementOrCapabilityComponent implements OnInit {
}
}
-
private setCapabilityProperties = ():void => {
let selectedCapability = <Capability>this.selectedReqOrCapModel;
if (!selectedCapability.properties) {
this.loadingCapabilityProperties = true;
if (this._loadingCapabilityProperties.indexOf(selectedCapability) == -1) {
this._loadingCapabilityProperties.push(selectedCapability);
- this.componentInstanceServiceNg2.getInstanceCapabilityProperties(this.currentComponent, this.componentInstanceId, selectedCapability)
+ this.componentInstanceServiceNg2.getInstanceCapabilityProperties(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, this.componentInstanceId, selectedCapability)
.subscribe((response: Array<PropertyModel>) => {
if (this.selectedReqOrCapModel === selectedCapability) {
delete this.loadingCapabilityProperties;
diff --git a/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.less b/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.less
index 5830c06972..f4d673d695 100644
--- a/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.less
@@ -50,7 +50,7 @@
}
.operation-name {
- .s_1;
+ // .s_1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
diff --git a/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.ts b/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.ts
index ebcf9eba22..08e6c36db1 100644
--- a/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.ts
@@ -14,34 +14,38 @@
* permissions and limitations under the License.
*/
-import {Component, Input, ComponentRef} from '@angular/core';
-import {ComponentServiceNg2} from 'app/ng2/services/component-services/component.service';
-import {ComponentInstanceServiceNg2} from 'app/ng2/services/component-instance-services/component-instance.service';
-import {ServiceServiceNg2} from "app/ng2/services/component-services/service.service";
-import {ModalService} from 'app/ng2/services/modal.service';
-import {ModalComponent} from 'app/ng2/components/ui/modal/modal.component';
+import { Component, ComponentRef, Input } from '@angular/core';
import {
- ModalModel,
ButtonModel,
- OperationModel,
- Service,
- ServiceInstanceObject,
- PropertyFEModel,
- PropertyBEModel,
+ CapabilitiesGroup,
+ Capability,
+ Component as TopologyTemplate,
InputBEModel,
InterfaceModel,
- CapabilitiesGroup,
- Capability
+ ModalModel,
+ OperationModel,
+ PropertyBEModel,
+ PropertyFEModel
} from 'app/models';
-import {ServiceConsumptionCreatorComponent} from 'app/ng2/pages/service-consumption-editor/service-consumption-editor.component';
-
+import { ModalComponent } from 'app/ng2/components/ui/modal/modal.component';
+import { ServiceConsumptionCreatorComponent } from 'app/ng2/pages/service-consumption-editor/service-consumption-editor.component';
+import { ComponentInstanceServiceNg2 } from 'app/ng2/services/component-instance-services/component-instance.service';
+import { ComponentServiceNg2 } from 'app/ng2/services/component-services/component.service';
+import { ModalService } from 'app/ng2/services/modal.service';
+import { ComponentMetadata } from '../../../../models/component-metadata';
+import { Resource } from '../../../../models/components/resource';
+import { FullComponentInstance } from '../../../../models/componentsInstances/fullComponentInstance';
+import { ServiceInstanceObject } from '../../../../models/service-instance-properties-and-interfaces';
+import { ComponentFactory } from '../../../../utils/component-factory';
+import { ComponentType } from '../../../../utils/constants';
+import { TopologyTemplateService } from '../../../services/component-services/topology-template.service';
export class ConsumptionInput extends PropertyFEModel{
inputId: string;
type: string;
source: string;
value: any;
- constraints: Array<any>;
+ constraints: any[];
constructor(input?: any) {
super(input);
@@ -49,19 +53,20 @@ export class ConsumptionInput extends PropertyFEModel{
this.inputId = input.inputId;
this.type = input.type;
this.source = input.source;
- this.value = input.value || "";
+ this.value = input.value || '';
this.constraints = input.constraints;
}
}
}
+// tslint:disable-next-line:max-classes-per-file
export class ConsumptionInputDetails extends ConsumptionInput {
name: string;
expanded: boolean;
assignValueLabel: string;
- associatedProps: Array<string>;
- associatedInterfaces: Array<any>;
- associatedCapabilities: Array<Capability>;
+ associatedProps: string[];
+ associatedInterfaces: any[];
+ associatedCapabilities: Capability[];
origVal: string;
isValid: boolean;
@@ -74,7 +79,7 @@ export class ConsumptionInputDetails extends ConsumptionInput {
this.associatedProps = input.associatedProps;
this.associatedInterfaces = input.associatedInterfaces;
this.associatedCapabilities = input.associatedCapabilities;
- this.origVal = input.value || "";
+ this.origVal = input.value || '';
this.isValid = input.isValid;
}
}
@@ -84,9 +89,10 @@ export class ConsumptionInputDetails extends ConsumptionInput {
}
}
+// tslint:disable-next-line:max-classes-per-file
export class ServiceOperation {
operation: OperationModel;
- consumptionInputs: Array<ConsumptionInputDetails>;
+ consumptionInputs: ConsumptionInputDetails[];
constructor(input?: any) {
if (input) {
@@ -96,24 +102,24 @@ export class ServiceOperation {
}
}
+// tslint:disable-next-line:max-classes-per-file
export class InterfaceWithServiceOperation {
interfaceId: string;
displayName: string;
- operationsList: Array<ServiceOperation>;
+ operationsList: ServiceOperation[];
isExpanded: boolean;
constructor(input?: InterfaceModel) {
if (input) {
this.interfaceId = input.uniqueId;
this.displayName = input.displayType();
- this.operationsList = _.map(input.operations, operation => new ServiceOperation({operation: operation}));
+ this.operationsList = _.map(input.operations, (operation) => new ServiceOperation({operation: operation}));
this.isExpanded = true;
}
}
}
-
-
+// tslint:disable-next-line:max-classes-per-file
@Component({
selector: 'service-consumption',
templateUrl: './service-consumption.component.html',
@@ -125,21 +131,23 @@ export class ServiceConsumptionComponent {
modalInstance: ComponentRef<ModalComponent>;
isLoading: boolean = false;
- interfacesList: Array<InterfaceWithServiceOperation>;
- operationsGroup: Array<ServiceOperation>;
- @Input() parentServiceInputs: Array<InputBEModel> = [];
- @Input() parentService: Service;
- @Input() selectedService: Service;
+ interfacesList: InterfaceWithServiceOperation[];
+ operationsGroup: ServiceOperation[];
+ @Input() parentServiceInputs: InputBEModel[] = [];
+ @Input() parentService: ComponentMetadata;
+ @Input() selectedService: TopologyTemplate | FullComponentInstance;
@Input() selectedServiceInstanceId: string;
- @Input() instancesMappedList: Array<ServiceInstanceObject>;
- @Input() instancesCapabilitiesMap: Map<string, Array<Capability>>;
+ @Input() instancesMappedList: ServiceInstanceObject[];
+ @Input() instancesCapabilitiesMap: Map<string, Capability[]>;
@Input() readonly: boolean;
- selectedInstanceSiblings: Array<ServiceInstanceObject>;
- selectedInstancePropertiesList: Array<PropertyBEModel> = [];
- selectedInstanceCapabilitisList: Array<Capability> = [];
+ selectedInstanceSiblings: ServiceInstanceObject[];
+ selectedInstancePropertiesList: PropertyBEModel[] = [];
+ selectedInstanceCapabilitisList: Capability[] = [];
- constructor(private ModalServiceNg2: ModalService, private serviceServiceNg2: ServiceServiceNg2, private componentServiceNg2: ComponentServiceNg2, private componentInstanceServiceNg2:ComponentInstanceServiceNg2) {}
+ constructor(private modalServiceNg2: ModalService, private topologyTemplateService: TopologyTemplateService,
+ private componentServiceNg2: ComponentServiceNg2, private componentInstanceServiceNg2: ComponentInstanceServiceNg2,
+ private componentFactory: ComponentFactory) {}
ngOnInit() {
this.updateSelectedInstancePropertiesAndSiblings();
@@ -147,15 +155,15 @@ export class ServiceConsumptionComponent {
}
ngOnChanges(changes) {
- if(changes.selectedServiceInstanceId && changes.selectedServiceInstanceId.currentValue !== changes.selectedServiceInstanceId.previousValue) {
+ if (changes.selectedServiceInstanceId && changes.selectedServiceInstanceId.currentValue !== changes.selectedServiceInstanceId.previousValue) {
this.selectedServiceInstanceId = changes.selectedServiceInstanceId.currentValue;
- if(changes.selectedService && changes.selectedService.currentValue !== changes.selectedService.previousValue) {
+ if (changes.selectedService && changes.selectedService.currentValue !== changes.selectedService.previousValue) {
this.selectedService = changes.selectedService.currentValue;
}
this.updateSelectedInstancePropertiesAndSiblings();
this.updateSelectedServiceCapabilities();
}
- if(changes.instancesMappedList && !_.isEqual(changes.instancesMappedList.currentValue, changes.instancesMappedList.previousValue)) {
+ if (changes.instancesMappedList && !_.isEqual(changes.instancesMappedList.currentValue, changes.instancesMappedList.previousValue)) {
this.updateSelectedInstancePropertiesAndSiblings();
this.updateSelectedServiceCapabilities();
}
@@ -163,22 +171,22 @@ export class ServiceConsumptionComponent {
updateSelectedInstancePropertiesAndSiblings() {
this.interfacesList = [];
- let selectedInstanceMetadata: ServiceInstanceObject = _.find(this.instancesMappedList, coInstance => coInstance.id === this.selectedServiceInstanceId);
+ const selectedInstanceMetadata: ServiceInstanceObject = _.find(this.instancesMappedList, (coInstance) => coInstance.id === this.selectedServiceInstanceId);
if (selectedInstanceMetadata) {
- _.forEach(selectedInstanceMetadata.interfaces, (interfaceData:InterfaceModel) => {
+ _.forEach(selectedInstanceMetadata.interfaces, (interfaceData: InterfaceModel) => {
this.interfacesList.push(new InterfaceWithServiceOperation(interfaceData));
});
}
- this.interfacesList.sort((interf1:InterfaceWithServiceOperation, interf2:InterfaceWithServiceOperation) => interf1.displayName.localeCompare(interf2.displayName));
+ this.interfacesList.sort((interf1: InterfaceWithServiceOperation, interf2: InterfaceWithServiceOperation) => interf1.displayName.localeCompare(interf2.displayName));
this.selectedInstancePropertiesList = selectedInstanceMetadata && selectedInstanceMetadata.properties;
- this.selectedInstanceSiblings = _.filter(this.instancesMappedList, coInstance => coInstance.id !== this.selectedServiceInstanceId);
+ this.selectedInstanceSiblings = _.filter(this.instancesMappedList, (coInstance) => coInstance.id !== this.selectedServiceInstanceId);
}
updateSelectedServiceCapabilities() {
this.selectedInstanceCapabilitisList = _.filter(
CapabilitiesGroup.getFlattenedCapabilities(this.selectedService.capabilities),
- cap => cap.properties && cap.ownerId === this.selectedService.uniqueId
+ (cap) => cap.properties && cap.ownerId === this.selectedService.uniqueId
);
}
@@ -186,15 +194,15 @@ export class ServiceConsumptionComponent {
currInterface.isExpanded = !currInterface.isExpanded;
}
- onSelectOperation(event, currInterface:InterfaceWithServiceOperation, opIndex: number) {
+ onSelectOperation(event, currInterface: InterfaceWithServiceOperation, opIndex: number) {
event.stopPropagation();
- if(!this.readonly) {
+ if (!this.readonly) {
this.operationsGroup = currInterface.operationsList;
- let cancelButton: ButtonModel = new ButtonModel('Cancel', 'outline white', this.ModalServiceNg2.closeCurrentModal);
- let saveButton: ButtonModel = new ButtonModel('Save', 'blue', this.createOrUpdateOperationInput, this.getDisabled);
- let modalModel: ModalModel = new ModalModel('l', 'Modify Operation Consumption', '', [saveButton, cancelButton], 'standard');
- this.modalInstance = this.ModalServiceNg2.createCustomModal(modalModel);
- this.ModalServiceNg2.addDynamicContentToModal(
+ const cancelButton: ButtonModel = new ButtonModel('Cancel', 'outline white', this.modalServiceNg2.closeCurrentModal);
+ const saveButton: ButtonModel = new ButtonModel('Save', 'blue', this.createOrUpdateOperationInput, this.getDisabled);
+ const modalModel: ModalModel = new ModalModel('l', 'Modify Operation Consumption', '', [saveButton, cancelButton], 'standard');
+ this.modalInstance = this.modalServiceNg2.createCustomModal(modalModel);
+ this.modalServiceNg2.addDynamicContentToModal(
this.modalInstance,
ServiceConsumptionCreatorComponent,
{
@@ -215,11 +223,11 @@ export class ServiceConsumptionComponent {
}
}
- createOrUpdateOperationInput = ():void => {
+ createOrUpdateOperationInput = (): void => {
this.isLoading = true;
- let consumptionInputsList:Array<{[id: string]: Array<ConsumptionInput>}> = _.map(this.operationsGroup, (serviceOp) => {
- let consumptionInputsArr: Array<any> = [];
- if(serviceOp.consumptionInputs) {
+ const consumptionInputsList: Array<{[id: string]: ConsumptionInput[]}> = _.map(this.operationsGroup, (serviceOp) => {
+ let consumptionInputsArr: any[] = [];
+ if (serviceOp.consumptionInputs) {
consumptionInputsArr = _.map(serviceOp.consumptionInputs, (input: ConsumptionInputDetails) => {
return {
inputId: input.inputId,
@@ -233,16 +241,24 @@ export class ServiceConsumptionComponent {
[serviceOp.operation.uniqueId]: consumptionInputsArr
};
});
- this.serviceServiceNg2.createOrUpdateServiceConsumptionInputs(this.parentService,this.selectedServiceInstanceId, consumptionInputsList).subscribe(() => {
+ this.topologyTemplateService.createOrUpdateServiceConsumptionInputs(this.convertMetaDataToComponent(this.parentService).uniqueId, this.selectedServiceInstanceId, consumptionInputsList)
+ .subscribe(() => {
this.isLoading = false;
- }, err=> {
+ }, (err) => {
this.isLoading = false;
});
- this.ModalServiceNg2.closeCurrentModal();
- };
+ this.modalServiceNg2.closeCurrentModal();
+ }
- getDisabled = ():boolean => {
+ getDisabled = (): boolean => {
return !this.modalInstance.instance.dynamicContent.instance.checkFormValidForSubmit();
- };
+ }
+
+ //TODO remove when workspace page convert to angular5
+ convertMetaDataToComponent(componentMetadata: ComponentMetadata) {
+ const newResource: Resource = this.componentFactory.createEmptyComponent(ComponentType.RESOURCE) as Resource;
+ newResource.setComponentMetadata(componentMetadata);
+ return newResource;
+ }
} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.module.ts b/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.module.ts
index 8593bef3eb..70b5911779 100644
--- a/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.module.ts
+++ b/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.module.ts
@@ -14,11 +14,11 @@
* permissions and limitations under the License.
*/
-import { NgModule } from "@angular/core";
-import {CommonModule} from "@angular/common";
-import {ServiceConsumptionComponent} from "./service-consumption.component";
-import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module";
-import {TranslateModule} from 'app/ng2/shared/translator/translate.module';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { UiElementsModule } from 'app/ng2/components/ui/ui-elements.module';
+import { TranslateModule } from 'app/ng2/shared/translator/translate.module';
+import { ServiceConsumptionComponent } from './service-consumption.component';
@NgModule({
declarations: [
@@ -29,11 +29,13 @@ import {TranslateModule} from 'app/ng2/shared/translator/translate.module';
UiElementsModule,
TranslateModule
],
- exports: [],
+ exports: [
+ ServiceConsumptionComponent
+ ],
entryComponents: [
ServiceConsumptionComponent
],
providers: []
})
export class ServiceConsumptionModule {
-} \ No newline at end of file
+}
diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less
index ae990dc85f..2fccfb414b 100644
--- a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less
@@ -38,7 +38,7 @@
justify-content: space-between;
.rule-details {
- .s_1;
+ // .s_1;
display: flex;
flex: 1;
align-items: center;
@@ -67,4 +67,13 @@
}
}
+ .w-sdc-designer-sidebar-section-footer {
+ margin-top: 10px;
+ text-align: center;
+ width: 100%;
+ }
+ .w-sdc-designer-sidebar-section-footer-action {
+ width: 180px;
+ margin-top: 10px;
+ }
} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts
index bc3531dc58..fa75a275aa 100644
--- a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts
@@ -13,22 +13,22 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {Component, Input, Output, EventEmitter, ComponentRef} from '@angular/core';
-import {ModalService} from 'app/ng2/services/modal.service';
+import { Component, ComponentRef, EventEmitter, Input, Output } from '@angular/core';
import {
- Service,
+ ButtonModel,
ComponentInstance,
+ InputBEModel,
ModalModel,
- ButtonModel,
PropertyBEModel,
- InputBEModel,
- ServiceInstanceObject
} from 'app/models';
-import {ServiceDependenciesEditorComponent} from 'app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component';
-import {ModalComponent} from 'app/ng2/components/ui/modal/modal.component';
-import {ComponentServiceNg2} from 'app/ng2/services/component-services/component.service';
-import {TranslateService} from 'app/ng2/shared/translator/translate.service';
-import {ComponentGenericResponse} from 'app/ng2/services/responses/component-generic-response';
+import { ModalComponent } from 'app/ng2/components/ui/modal/modal.component';
+import { ServiceDependenciesEditorComponent } from 'app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component';
+import { ModalService } from 'app/ng2/services/modal.service';
+import { ComponentGenericResponse } from 'app/ng2/services/responses/component-generic-response';
+import { TranslateService } from 'app/ng2/shared/translator/translate.service';
+import { ComponentMetadata } from '../../../../models/component-metadata';
+import { ServiceInstanceObject } from '../../../../models/service-instance-properties-and-interfaces';
+import { TopologyTemplateService } from '../../../services/component-services/topology-template.service';
export class ConstraintObject {
servicePropertyName: string;
@@ -48,12 +48,13 @@ export class ConstraintObject {
}
}
+// tslint:disable-next-line:max-classes-per-file
export class ConstraintObjectUI extends ConstraintObject{
isValidValue: boolean;
constructor(input?: any) {
super(input);
- if(input) {
+ if (input) {
this.isValidValue = input.isValidValue ? input.isValidValue : input.value !== '';
}
}
@@ -63,7 +64,7 @@ export class ConstraintObjectUI extends ConstraintObject{
}
public isValidRule(isStatic) {
- let isValidValue = isStatic ? this.isValidValue : true;
+ const isValidValue = isStatic ? this.isValidValue : true;
return this.servicePropertyName != null && this.servicePropertyName !== ''
&& this.value != null && this.value !== '' && isValidValue;
}
@@ -75,6 +76,7 @@ export const OPERATOR_TYPES = {
LESS_THAN: 'less_than'
};
+// tslint:disable-next-line:max-classes-per-file
class I18nTexts {
static uncheckModalTitle: string;
static uncheckModalText: string;
@@ -89,21 +91,21 @@ class I18nTexts {
static deleteRuleMsg: string;
public static translateTexts(translateService) {
- I18nTexts.uncheckModalTitle = translateService.translate("SERVICE_DEPENDENCY_UNCHECK_TITLE");
- I18nTexts.uncheckModalText = translateService.translate("SERVICE_DEPENDENCY_UNCHECK_TEXT");
- I18nTexts.modalApprove = translateService.translate("MODAL_APPROVE");
- I18nTexts.modalCancel = translateService.translate("MODAL_CANCEL");
- I18nTexts.modalCreate = translateService.translate("MODAL_CREATE");
- I18nTexts.modalSave = translateService.translate("MODAL_SAVE");
- I18nTexts.modalDelete = translateService.translate("MODAL_DELETE");
- I18nTexts.addRuleTxt = translateService.translate("SERVICE_DEPENDENCY_ADD_RULE");
- I18nTexts.updateRuleTxt = translateService.translate("SERVICE_DEPENDENCY_UPDATE_RULE");
- I18nTexts.deleteRuleTxt = translateService.translate("SERVICE_DEPENDENCY_DELETE_RULE");
- I18nTexts.deleteRuleMsg = translateService.translate("SERVICE_DEPENDENCY_DELETE_RULE_MSG");
+ I18nTexts.uncheckModalTitle = translateService.translate('SERVICE_DEPENDENCY_UNCHECK_TITLE');
+ I18nTexts.uncheckModalText = translateService.translate('SERVICE_DEPENDENCY_UNCHECK_TEXT');
+ I18nTexts.modalApprove = translateService.translate('MODAL_APPROVE');
+ I18nTexts.modalCancel = translateService.translate('MODAL_CANCEL');
+ I18nTexts.modalCreate = translateService.translate('MODAL_CREATE');
+ I18nTexts.modalSave = translateService.translate('MODAL_SAVE');
+ I18nTexts.modalDelete = translateService.translate('MODAL_DELETE');
+ I18nTexts.addRuleTxt = translateService.translate('SERVICE_DEPENDENCY_ADD_RULE');
+ I18nTexts.updateRuleTxt = translateService.translate('SERVICE_DEPENDENCY_UPDATE_RULE');
+ I18nTexts.deleteRuleTxt = translateService.translate('SERVICE_DEPENDENCY_DELETE_RULE');
+ I18nTexts.deleteRuleMsg = translateService.translate('SERVICE_DEPENDENCY_DELETE_RULE_MSG');
}
}
-
+// tslint:disable-next-line:max-classes-per-file
@Component({
selector: 'service-dependencies',
templateUrl: './service-dependencies.component.html',
@@ -115,56 +117,55 @@ export class ServiceDependenciesComponent {
modalInstance: ComponentRef<ModalComponent>;
isDependent: boolean;
isLoading: boolean;
- parentServiceInputs: Array<InputBEModel> = [];
- rulesList: Array<ConstraintObject> = [];
- operatorTypes: Array<any>;
+ parentServiceInputs: InputBEModel[] = [];
+ rulesList: ConstraintObject[] = [];
+ operatorTypes: any[];
@Input() readonly: boolean;
- @Input() compositeService: Service;
+ @Input() compositeService: ComponentMetadata;
@Input() currentServiceInstance: ComponentInstance;
- @Input() selectedInstanceSiblings: Array<ServiceInstanceObject>;
- @Input() selectedInstanceConstraints: Array<ConstraintObject> = [];
- @Input() selectedInstanceProperties: Array<PropertyBEModel> = [];
- @Output() updateRulesListEvent:EventEmitter<Array<ConstraintObject>> = new EventEmitter<Array<ConstraintObject>>();
+ @Input() selectedInstanceSiblings: ServiceInstanceObject[];
+ @Input() selectedInstanceConstraints: ConstraintObject[] = [];
+ @Input() selectedInstanceProperties: PropertyBEModel[] = [];
+ @Output() updateRulesListEvent: EventEmitter<ConstraintObject[]> = new EventEmitter<ConstraintObject[]>();
@Output() loadRulesListEvent:EventEmitter<any> = new EventEmitter();
@Output() dependencyStatus = new EventEmitter<boolean>();
-
- constructor(private componentServiceNg2: ComponentServiceNg2, private ModalServiceNg2: ModalService, private translateService: TranslateService) {
+ constructor(private topologyTemplateService: TopologyTemplateService, private modalServiceNg2: ModalService, private translateService: TranslateService) {
}
ngOnInit() {
this.isLoading = false;
this.operatorTypes = [
- {label: ">", value: OPERATOR_TYPES.GREATER_THAN},
- {label: "<", value: OPERATOR_TYPES.LESS_THAN},
- {label: "=", value: OPERATOR_TYPES.EQUAL}
+ {label: '>', value: OPERATOR_TYPES.GREATER_THAN},
+ {label: '<', value: OPERATOR_TYPES.LESS_THAN},
+ {label: '=', value: OPERATOR_TYPES.EQUAL}
];
- this.componentServiceNg2.getComponentInputsWithProperties(this.compositeService).subscribe((result: ComponentGenericResponse) => {
+ this.topologyTemplateService.getComponentInputsWithProperties(this.compositeService.componentType, this.compositeService.uniqueId).subscribe((result: ComponentGenericResponse) => {
this.parentServiceInputs = result.inputs;
});
this.loadRules();
- this.translateService.languageChangedObservable.subscribe(lang => {
+ this.translateService.languageChangedObservable.subscribe((lang) => {
I18nTexts.translateTexts(this.translateService);
});
}
ngOnChanges(changes) {
- if(changes.currentServiceInstance) {
+ if (changes.currentServiceInstance) {
this.currentServiceInstance = changes.currentServiceInstance.currentValue;
this.isDependent = this.currentServiceInstance.isDependent();
}
- if(changes.selectedInstanceConstraints && changes.selectedInstanceConstraints.currentValue !== changes.selectedInstanceConstraints.previousValue) {
+ if (changes.selectedInstanceConstraints && changes.selectedInstanceConstraints.currentValue !== changes.selectedInstanceConstraints.previousValue) {
this.selectedInstanceConstraints = changes.selectedInstanceConstraints.currentValue;
this.loadRules();
}
}
public openRemoveDependencyModal = (): ComponentRef<ModalComponent> => {
- let actionButton: ButtonModel = new ButtonModel(I18nTexts.modalApprove, 'blue', this.onUncheckDependency);
- let cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'grey', this.onCloseRemoveDependencyModal);
- let modalModel: ModalModel = new ModalModel('sm', I18nTexts.uncheckModalTitle, I18nTexts.uncheckModalText, [actionButton, cancelButton]);
- return this.ModalServiceNg2.createCustomModal(modalModel);
+ const actionButton: ButtonModel = new ButtonModel(I18nTexts.modalApprove, 'blue', this.onUncheckDependency);
+ const cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'grey', this.onCloseRemoveDependencyModal);
+ const modalModel: ModalModel = new ModalModel('sm', I18nTexts.uncheckModalTitle, I18nTexts.uncheckModalText, [actionButton, cancelButton]);
+ return this.modalServiceNg2.createCustomModal(modalModel);
}
loadRules() {
@@ -178,60 +179,59 @@ export class ServiceDependenciesComponent {
}
onUncheckDependency = () => {
- this.ModalServiceNg2.closeCurrentModal();
+ this.modalServiceNg2.closeCurrentModal();
this.isLoading = true;
- let isDepOrig = this.isDependent;
- let rulesListOrig = this.rulesList;
+ const isDepOrig = this.isDependent;
+ const rulesListOrig = this.rulesList;
this.currentServiceInstance.unmarkAsDependent();
this.updateComponentInstance(isDepOrig, rulesListOrig);
}
onCloseRemoveDependencyModal = () => {
this.isDependent = true;
- this.ModalServiceNg2.closeCurrentModal();
+ this.modalServiceNg2.closeCurrentModal();
}
onCheckDependency = () => {
- let isDepOrig = this.isDependent;
- let rulesListOrig = this.rulesList;
+ const isDepOrig = this.isDependent;
+ const rulesListOrig = this.rulesList;
this.currentServiceInstance.markAsDependent();
this.rulesList = [];
this.updateComponentInstance(isDepOrig, rulesListOrig);
}
onMarkAsDependent() {
- if(!this.currentServiceInstance.isDependent()) {
+ if (!this.currentServiceInstance.isDependent()) {
this.onCheckDependency();
- }
- else {
+ } else {
this.openRemoveDependencyModal().instance.open();
}
}
- updateComponentInstance(isDependent_origVal : boolean, rulesList_orig: Array<ConstraintObject>) {
+ updateComponentInstance(isDependentOrigVal: boolean, rulesListOrig: ConstraintObject[]) {
this.isLoading = true;
- this.componentServiceNg2.updateComponentInstance(this.compositeService, this.currentServiceInstance).subscribe((updatedServiceIns: ComponentInstance) => {
+ this.topologyTemplateService.updateComponentInstance(this.compositeService.uniqueId, this.currentServiceInstance).subscribe((updatedServiceIns: ComponentInstance) => {
this.currentServiceInstance = new ComponentInstance(updatedServiceIns);
this.isDependent = this.currentServiceInstance.isDependent();
this.dependencyStatus.emit(this.isDependent);
- if(this.isDependent) {
+ if (this.isDependent) {
this.loadRulesListEvent.emit();
}
this.isLoading = false;
- }, err=> {
- this.isDependent = isDependent_origVal;
- this.rulesList = rulesList_orig;
+ }, (err) => {
+ this.isDependent = isDependentOrigVal;
+ this.rulesList = rulesListOrig;
this.isLoading = false;
console.log('An error has occurred.');
});
}
- onAddRule () {
- let cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'outline white', this.ModalServiceNg2.closeCurrentModal);
- let saveButton: ButtonModel = new ButtonModel(I18nTexts.modalCreate, 'blue', this.createRule, this.getDisabled);
- let modalModel: ModalModel = new ModalModel('l', I18nTexts.addRuleTxt, '', [saveButton, cancelButton], 'standard');
- this.modalInstance = this.ModalServiceNg2.createCustomModal(modalModel);
- this.ModalServiceNg2.addDynamicContentToModal(
+ onAddRule() {
+ const cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'outline white', this.modalServiceNg2.closeCurrentModal);
+ const saveButton: ButtonModel = new ButtonModel(I18nTexts.modalCreate, 'blue', this.createRule, this.getDisabled);
+ const modalModel: ModalModel = new ModalModel('l', I18nTexts.addRuleTxt, '', [saveButton, cancelButton], 'standard');
+ this.modalInstance = this.modalServiceNg2.createCustomModal(modalModel);
+ this.modalServiceNg2.addDynamicContentToModal(
this.modalInstance,
ServiceDependenciesEditorComponent,
{
@@ -247,16 +247,16 @@ export class ServiceDependenciesComponent {
}
onSelectRule(index: number) {
- let cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'outline white', this.ModalServiceNg2.closeCurrentModal);
- let saveButton: ButtonModel = new ButtonModel(I18nTexts.modalSave, 'blue', () => this.updateRules(), this.getDisabled);
- let modalModel: ModalModel = new ModalModel('l', I18nTexts.updateRuleTxt, '', [saveButton, cancelButton], 'standard');
- this.modalInstance = this.ModalServiceNg2.createCustomModal(modalModel);
- this.ModalServiceNg2.addDynamicContentToModal(
+ const cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'outline white', this.modalServiceNg2.closeCurrentModal);
+ const saveButton: ButtonModel = new ButtonModel(I18nTexts.modalSave, 'blue', () => this.updateRules(), this.getDisabled);
+ const modalModel: ModalModel = new ModalModel('l', I18nTexts.updateRuleTxt, '', [saveButton, cancelButton], 'standard');
+ this.modalInstance = this.modalServiceNg2.createCustomModal(modalModel);
+ this.modalServiceNg2.addDynamicContentToModal(
this.modalInstance,
ServiceDependenciesEditorComponent,
{
serviceRuleIndex: index,
- serviceRules: _.map(this.rulesList, rule => new ConstraintObjectUI(rule)),
+ serviceRules: _.map(this.rulesList, (rule) => new ConstraintObjectUI(rule)),
currentServiceName: this.currentServiceInstance.name,
operatorTypes: this.operatorTypes,
compositeServiceName: this.compositeService.name,
@@ -268,40 +268,40 @@ export class ServiceDependenciesComponent {
this.modalInstance.instance.open();
}
- getDisabled = ():boolean => {
+ getDisabled = (): boolean => {
return !this.modalInstance.instance.dynamicContent.instance.checkFormValidForSubmit();
- };
+ }
- createRule = ():void => {
- let newRuleToCreate: ConstraintObject = new ConstraintObject(this.modalInstance.instance.dynamicContent.instance.currentRule);
+ createRule = (): void => {
+ const newRuleToCreate: ConstraintObject = new ConstraintObject(this.modalInstance.instance.dynamicContent.instance.currentRule);
this.isLoading = true;
- this.componentServiceNg2.createServiceFilterConstraints(
- this.compositeService,
- this.currentServiceInstance,
+ this.topologyTemplateService.createServiceFilterConstraints(
+ this.compositeService.uniqueId,
+ this.currentServiceInstance.uniqueId,
newRuleToCreate
).subscribe( (response) => {
this.updateRulesListEvent.emit(response.properties);
this.isLoading = false;
- }, err=> {
+ }, (err) => {
this.isLoading = false;
});
- this.ModalServiceNg2.closeCurrentModal();
- };
+ this.modalServiceNg2.closeCurrentModal();
+ }
- updateRules = ():void => {
- let allRulesToUpdate: Array<ConstraintObject> = this.modalInstance.instance.dynamicContent.instance.serviceRulesList.map(rule => new ConstraintObject(rule));
+ updateRules = (): void => {
+ const allRulesToUpdate: ConstraintObject[] = this.modalInstance.instance.dynamicContent.instance.serviceRulesList.map((rule) => new ConstraintObject(rule));
this.isLoading = true;
- this.componentServiceNg2.updateServiceFilterConstraints(
- this.compositeService,
- this.currentServiceInstance,
+ this.topologyTemplateService.updateServiceFilterConstraints(
+ this.compositeService.uniqueId,
+ this.currentServiceInstance.uniqueId,
allRulesToUpdate
).subscribe((response) => {
this.updateRulesListEvent.emit(response.properties);
this.isLoading = false;
- }, err => {
+ }, (err) => {
this.isLoading = false;
});
- this.ModalServiceNg2.closeCurrentModal();
+ this.modalServiceNg2.closeCurrentModal();
}
getSymbol(constraintOperator) {
@@ -312,23 +312,23 @@ export class ServiceDependenciesComponent {
}
}
- onDeleteRule = (index:number) => {
+ onDeleteRule = (index: number) => {
this.isLoading = true;
- this.componentServiceNg2.deleteServiceFilterConstraints(
- this.compositeService,
- this.currentServiceInstance,
+ this.topologyTemplateService.deleteServiceFilterConstraints(
+ this.compositeService.uniqueId,
+ this.currentServiceInstance.uniqueId,
index
).subscribe( (response) => {
this.updateRulesListEvent.emit(response.properties);
this.isLoading = false;
- }, err=> {
+ }, (err) => {
this.isLoading = false;
});
- this.ModalServiceNg2.closeCurrentModal();
- };
+ this.modalServiceNg2.closeCurrentModal();
+ }
- openDeleteModal = (index:number) => {
- this.ModalServiceNg2.createActionModal(I18nTexts.deleteRuleTxt, I18nTexts.deleteRuleMsg,
+ openDeleteModal = (index: number) => {
+ this.modalServiceNg2.createActionModal(I18nTexts.deleteRuleTxt, I18nTexts.deleteRuleMsg,
I18nTexts.modalDelete, () => this.onDeleteRule(index), I18nTexts.modalCancel).instance.open();
}
-} \ No newline at end of file
+}
diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.module.ts b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.module.ts
index 7e66ed99c7..5e2d03d26c 100644
--- a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.module.ts
+++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.module.ts
@@ -1,9 +1,9 @@
-import { NgModule } from "@angular/core";
-import {CommonModule} from "@angular/common";
-import {ServiceDependenciesComponent} from "./service-dependencies.component";
-import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module";
-import {TranslateModule} from 'app/ng2/shared/translator/translate.module';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { UiElementsModule } from 'app/ng2/components/ui/ui-elements.module';
+import { TranslateModule } from 'app/ng2/shared/translator/translate.module';
+import { ServiceDependenciesComponent } from './service-dependencies.component';
@NgModule({
declarations: [
@@ -14,11 +14,13 @@ import {TranslateModule} from 'app/ng2/shared/translator/translate.module';
UiElementsModule,
TranslateModule
],
- exports: [],
+ exports: [
+ ServiceDependenciesComponent
+ ],
entryComponents: [
ServiceDependenciesComponent
],
providers: []
})
export class ServiceDependenciesModule {
-} \ No newline at end of file
+}
diff --git a/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.html b/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.html
deleted file mode 100644
index e1a4f68a9b..0000000000
--- a/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!--
- ~ Copyright (C) 2018 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.
- -->
-
-<div class="service-path-selector">
- <label>Service Flows:</label>
- <ui-element-dropdown
- class="path-dropdown"
- data-tests-id="service-path-selector"
- [readonly]="dropdownOptions.length < 3"
- [(value)]="selectedPathId"
- [values]="dropdownOptions"
- (valueChange)="onSelectPath()">
- </ui-element-dropdown>
-</div>
diff --git a/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.less b/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.less
deleted file mode 100644
index f3cb4a3c34..0000000000
--- a/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.less
+++ /dev/null
@@ -1,24 +0,0 @@
-@import './../../../../../assets/styles/variables.less';
-.service-path-selector {
- margin: 10px 35px 10px 0;
- display: flex;
- font-size: 12px;
-
- /deep/ .path-dropdown {
- width: 150px;
- select {
- font-size: 14px;
- font-family: @font-opensans-regular;
- padding: 4px 10px;
- }
- }
-
- label {
- margin-right: 10px;
- align-self: center;
- font-size: 14px;
- font-family: @font-opensans-regular;
- font-weight: normal;
- margin-bottom: initial;
- }
-}
diff --git a/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.ts b/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.ts
deleted file mode 100644
index e09001fc6c..0000000000
--- a/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-import {Component, Input, KeyValueDiffer, IterableDiffers, KeyValueDiffers, DoCheck} from '@angular/core';
-import {Service} from "app/models/components/service";
-import {TranslateService} from "app/ng2/shared/translator/translate.service";
-import {ForwardingPath} from "app/models/forwarding-path";
-import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
-
-@Component({
- selector: 'service-path-selector',
- templateUrl: './service-path-selector.component.html',
- styleUrls:['service-path-selector.component.less'],
- providers: [TranslateService]
-})
-
-export class ServicePathSelectorComponent implements DoCheck {
-
- defaultSelectedId: string;
- hideAllValue: string;
- hideAllId: string = '0';
- showAllValue: string;
- showAllId: string = '1';
-
- paths: Array<ForwardingPath> = [];
- dropdownOptions: Array<DropdownValue>;
- differ: KeyValueDiffer;
-
- @Input() service: Service;
- @Input() drawPath: Function;
- @Input() deletePaths: Function;
- @Input() selectedPathId: string;
-
- constructor(private differs: KeyValueDiffers, private translateService: TranslateService) {
-
- this.defaultSelectedId = this.hideAllId;
- this.convertPathsToDropdownOptions();
-
- this.translateService.languageChangedObservable.subscribe(lang => {
- this.hideAllValue = this.translateService.translate("SERVICE_PATH_SELECTOR_HIDE_ALL_VALUE");
- this.showAllValue = this.translateService.translate("SERVICE_PATH_SELECTOR_SHOW_ALL_VALUE");
- this.convertPathsToDropdownOptions();
- });
-
- }
-
- ngOnInit(): void {
-
- this.selectedPathId = this.defaultSelectedId;
- this.differ = this.differs.find(this.service.forwardingPaths).create(null);
-
- }
-
- ngDoCheck(): void {
-
- const pathsChanged = this.differ.diff(this.service.forwardingPaths);
-
- if (pathsChanged) {
- let oldPaths = _.cloneDeep(this.paths);
- this.populatePathsFromService();
-
- if (!(_.isEqual(oldPaths, this.paths))) {
- this.convertPathsToDropdownOptions();
-
- let temp = this.selectedPathId;
- this.selectedPathId = '-1';
-
- setTimeout(() => {
- this.selectedPathId = temp;
- this.onSelectPath();
- }, 0);
- }
- }
-
- }
-
- populatePathsFromService(): void {
-
- this.paths = [];
- let {forwardingPaths} = this.service;
-
- _.forEach(forwardingPaths, path => {
- this.paths.push(path);
- });
- this.paths.sort((a:ForwardingPath, b:ForwardingPath)=> {
- return a.name.localeCompare(b.name);
- });
-
- }
-
- convertPathsToDropdownOptions(): void {
-
- let result = [
- new DropdownValue(this.hideAllId, this.hideAllValue),
- new DropdownValue(this.showAllId, this.showAllValue)
- ];
-
- _.forEach(this.paths, (value: ForwardingPath) => {
- result[result.length] = new DropdownValue(value.uniqueId, value.name);
- });
-
- this.dropdownOptions = result;
-
- }
-
- onSelectPath = (): void => {
-
- if (this.selectedPathId !== '-1') {
- this.deletePaths();
-
- switch (this.selectedPathId) {
- case this.hideAllId:
- break;
-
- case this.showAllId:
- _.forEach(this.paths, path =>
- this.drawPath(path)
- );
- break;
-
- default:
- let path = this.paths.find(path =>
- path.uniqueId === this.selectedPathId
- );
- if (!path) {
- this.selectedPathId = this.defaultSelectedId;
- this.onSelectPath(); // currently does nothing in default case, but if one day it does, we want the selection to behave accordingly.
- break;
- }
- this.drawPath(path);
- break;
- }
- }
-
- }
-}
diff --git a/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.module.ts b/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.module.ts
deleted file mode 100644
index c07061ce9a..0000000000
--- a/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.module.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { NgModule } from "@angular/core";
-import {CommonModule} from "@angular/common";
-import {ServicePathSelectorComponent} from "./service-path-selector.component";
-import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module";
-
-@NgModule({
- declarations: [
- ServicePathSelectorComponent
- ],
- imports: [
- CommonModule,
- UiElementsModule
- ],
- exports: [],
- entryComponents: [
- ServicePathSelectorComponent
- ],
- providers: []
-})
-export class ServicePathSelectorModule {
-} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.html b/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.html
deleted file mode 100644
index 2a6a72ab7a..0000000000
--- a/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!--
- ~ Copyright (C) 2018 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.
- -->
-
-<div class='service-path'>
- <button class='zoom-icons create-path-button' data-tests-id="pathsMenuBtn" (click)="showServicePathMenu = !showServicePathMenu">...</button>
- <div class="service-path-menu" *ngIf="showServicePathMenu">
- <div >
- <ul>
- <li *ngIf='!isViewOnly'><div class="hand" (click)="onCreateServicePath()" data-tests-id="createPathMenuItem">
- Create Service Flow
- </div></li>
- <li><div class="hand" (click)="onListServicePath()" data-tests-id="pathsListMenuItem">
- Service Flows List
- </div></li>
- </ul>
- </div>
- </div>
-</div> \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.less b/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.less
deleted file mode 100644
index 777b206714..0000000000
--- a/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.less
+++ /dev/null
@@ -1,51 +0,0 @@
-//@import 'src/assets/styles/variables.less';
-@import './../../../../../assets/styles/variables.less';
-.service-path {
- position: relative;
- .create-path-button{
- &:extend(.search-bar-button);
- width: 30px;
- height: 30px;
- &:hover {
- color: @main_color_a;
- }
- &:active {
- background: @main_color_a;
- color: @main_color_p;
- }
- &:focus {
- outline: none;
- }
- }
- .service-path-menu {
- border: 1px solid @main_color_o;
- border-radius: 0 0 2px 2px;
- border-top-color: @main_color_a;
- border-top-width: 3px;
-
- box-sizing: border-box;
- box-shadow: 0 2px 4px 0 rgba(0,0,0,0.30);
-
- background-color: @main_color_p;
-
- padding: 5px 0;
- right: 34px;
- position: absolute;
- top: 10px;
- width: 150px;
- font-size: 13px;
- font-family: @font-opensans-regular;
-
- li {
- color: @main_color_m;
- padding: 0 10px;
- line-height: 20px;
- &:hover {
- cursor: pointer;
- color: @main_color_a;
- background-color: fade(@main_color_a, 5%);
- }
- }
-
- }
-}
diff --git a/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.ts b/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.ts
deleted file mode 100644
index d66c5f0132..0000000000
--- a/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.ts
+++ /dev/null
@@ -1,84 +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 {Component, Input, ComponentRef} from '@angular/core';
-import {ModalService} from 'app/ng2/services/modal.service';
-import {ModalModel, ButtonModel} from 'app/models';
-import {ServicePathCreatorComponent} from 'app/ng2/pages/service-path-creator/service-path-creator.component';
-import {ModalComponent} from 'app/ng2/components/ui/modal/modal.component';
-import ServicePathsListComponent from "app/ng2/pages/service-paths-list/service-paths-list.component";
-import {Service} from "app/models/components/service";
-
-@Component({
- selector: 'service-path',
- templateUrl: './service-path.component.html',
- styleUrls: ['service-path.component.less'],
- providers: [ModalService]
-})
-
-export class ServicePathComponent {
- showServicePathMenu: boolean = false;
- modalInstance: ComponentRef<ModalComponent>;
- @Input() service: Service;
- @Input() onCreate: Function;
- @Input() onSave: Function;
- @Input() isViewOnly:boolean;
-
- constructor(private ModalServiceNg2: ModalService) {}
-
- onCreateServicePath = ():void => {
- this.showServicePathMenu = false;
- let cancelButton: ButtonModel = new ButtonModel('Cancel', 'outline white', this.ModalServiceNg2.closeCurrentModal);
- let saveButton: ButtonModel = new ButtonModel('Create', 'blue', this.createPath, this.getDisabled );
- let modalModel: ModalModel = new ModalModel('l', 'Create Service Flow', '', [saveButton, cancelButton], 'standard', true);
- this.modalInstance = this.ModalServiceNg2.createCustomModal(modalModel);
- this.ModalServiceNg2.addDynamicContentToModal(this.modalInstance, ServicePathCreatorComponent, {service: this.service});
- this.modalInstance.instance.open();
- };
-
- onListServicePath = ():void => {
- this.showServicePathMenu = false;
- let cancelButton: ButtonModel = new ButtonModel('Close', 'outline white', this.ModalServiceNg2.closeCurrentModal);
- let modalModel: ModalModel = new ModalModel('md', 'Service Flows List','', [cancelButton], 'standard', true);
- this.modalInstance = this.ModalServiceNg2.createCustomModal(modalModel);
- this.ModalServiceNg2.addDynamicContentToModal(this.modalInstance, ServicePathsListComponent, {service: this.service,
- onCreateServicePath: this.onCreateServicePath, onEditServicePath: this.onEditServicePath, isViewOnly: this.isViewOnly});
- this.modalInstance.instance.open();
- };
-
- createPath = ():void => {
- this.onCreate(this.modalInstance.instance.dynamicContent.instance.createServicePathData());
- this.ModalServiceNg2.closeCurrentModal();
- };
-
- onEditServicePath = (id:string):void => {
- let cancelButton: ButtonModel = new ButtonModel('Cancel', 'outline white', this.ModalServiceNg2.closeCurrentModal);
- let saveButton: ButtonModel = new ButtonModel('Save', 'blue', this.createPath, this.getDisabled );
- let modalModel: ModalModel = new ModalModel('l', 'Edit Path', '', [saveButton, cancelButton], 'standard', true);
- this.modalInstance = this.ModalServiceNg2.createCustomModal(modalModel);
- this.ModalServiceNg2.addDynamicContentToModal(this.modalInstance, ServicePathCreatorComponent, {service: this.service, pathId: id});
- this.modalInstance.instance.open();
- };
-
- getDisabled = ():boolean => {
- return this.isViewOnly || !this.modalInstance.instance.dynamicContent.instance.checkFormValidForSubmit();
- };
-}
-
diff --git a/catalog-ui/src/app/ng2/components/logic/service-path/service-path.module.ts b/catalog-ui/src/app/ng2/components/logic/service-path/service-path.module.ts
deleted file mode 100644
index 96af247086..0000000000
--- a/catalog-ui/src/app/ng2/components/logic/service-path/service-path.module.ts
+++ /dev/null
@@ -1,39 +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 { NgModule } from "@angular/core";
-import {CommonModule} from "@angular/common";
-import {ServicePathComponent} from "./service-path.component";
-import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module";
-
-@NgModule({
- declarations: [
- ServicePathComponent
- ],
- imports: [CommonModule,
- UiElementsModule],
- exports: [],
- entryComponents: [
- ServicePathComponent
- ],
- providers: []
-})
-export class ServicePathModule {
-} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/modals/comment-modal/comment-modal.component.html b/catalog-ui/src/app/ng2/components/modals/comment-modal/comment-modal.component.html
new file mode 100644
index 0000000000..127531bfab
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modals/comment-modal/comment-modal.component.html
@@ -0,0 +1,18 @@
+<form>
+ <div>
+ <div class="comment-modal-text" [innerHTML]="message"></div>
+ <sdc-textarea #comment1
+ [(value)]="comment.text"
+ placeHolder="{{'CONFIRMATION_MODAL_PLACEHOLDER' | translate }}"
+ [required]="true"
+ name="comment1"
+ testId="checkindialog"
+ [maxLength]="256">
+ </sdc-textarea>
+ <sdc-validation [validateElement]="comment1" (validityChanged)="onValidityChange($event)">
+ <sdc-required-validator message="{{ 'VALIDATION_ERROR_REQUIRED' | translate:{'field': 'Comment' } }}"></sdc-required-validator>
+ <sdc-regex-validator message="{{ 'VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED' | translate}}"
+ [pattern]="commentValidationPattern"></sdc-regex-validator>
+ </sdc-validation>
+ </div>
+</form>
diff --git a/catalog-ui/src/app/ng2/components/modals/comment-modal/comment-modal.component.ts b/catalog-ui/src/app/ng2/components/modals/comment-modal/comment-modal.component.ts
new file mode 100644
index 0000000000..c66f60b5e7
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modals/comment-modal/comment-modal.component.ts
@@ -0,0 +1,25 @@
+/**
+ * Created by rc2122 on 5/31/2018.
+ */
+import { Component, Input } from "@angular/core";
+import { ValidationConfiguration } from "app/models";
+import { Subject } from "rxjs/Subject";
+
+@Component({
+ selector: 'comment-modal',
+ templateUrl: './comment-modal.component.html',
+ styleUrls: ['./comment-modal.less']
+})
+
+export class CommentModalComponent {
+
+ @Input() message:string;
+ onValidationChange: Subject<boolean> = new Subject();
+ //@Input() showComment:boolean;
+ private comment = {"text": ''};
+ private commentValidationPattern = ValidationConfiguration.validation.validationPatterns.comment;
+
+ private onValidityChange = (isValid: boolean):void => {
+ this.onValidationChange.next(isValid);
+ }
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/modals/comment-modal/comment-modal.less b/catalog-ui/src/app/ng2/components/modals/comment-modal/comment-modal.less
new file mode 100644
index 0000000000..8e20e81115
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modals/comment-modal/comment-modal.less
@@ -0,0 +1,3 @@
+.comment-modal-text {
+ padding-bottom: 5px;
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/modals/modals.module.ts b/catalog-ui/src/app/ng2/components/modals/modals.module.ts
new file mode 100644
index 0000000000..5aa7f08b60
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modals/modals.module.ts
@@ -0,0 +1,29 @@
+/**
+ * Created by rc2122 on 5/24/2018.
+ */
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { NgxDatatableModule } from '@swimlane/ngx-datatable';
+import { CommentModalComponent } from 'app/ng2/components/modals/comment-modal/comment-modal.component';
+import { PopoverModule } from 'app/ng2/components/ui/popover/popover.module';
+import { TranslateModule } from 'app/ng2/shared/translator/translate.module';
+import { SdcUiComponentsModule } from 'onap-ui-angular';
+import { OnboardingService } from '../../services/onboarding.service';
+import { ImportVSPService } from './onboarding-modal/import-vsp.service';
+import { OnboardingModalComponent } from './onboarding-modal/onboarding-modal.component';
+
+@NgModule({
+ declarations: [CommentModalComponent, OnboardingModalComponent],
+ imports: [TranslateModule,
+ SdcUiComponentsModule,
+ CommonModule,
+ PopoverModule,
+ NgxDatatableModule],
+ exports: [CommentModalComponent, OnboardingModalComponent],
+ entryComponents: [CommentModalComponent, OnboardingModalComponent],
+ providers: [OnboardingService, ImportVSPService],
+ bootstrap: []
+})
+
+export class ModalsModule {
+}
diff --git a/catalog-ui/src/app/ng2/components/modals/onboarding-modal/import-vsp.service.ts b/catalog-ui/src/app/ng2/components/modals/onboarding-modal/import-vsp.service.ts
new file mode 100644
index 0000000000..8e7364660f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modals/onboarding-modal/import-vsp.service.ts
@@ -0,0 +1,36 @@
+import { Injectable, Inject } from "@angular/core";
+import { OnboardingModalComponent } from "./onboarding-modal.component";
+import { SdcUiServices, SdcUiCommon } from "onap-ui-angular";
+import { Observable, Subject } from "rxjs";
+import { CHANGE_COMPONENT_CSAR_VERSION_FLAG } from "../../../../utils/constants";
+import { CacheService } from "../../../services/cache.service";
+
+
+@Injectable()
+export class ImportVSPService {
+
+ constructor(private modalService: SdcUiServices.ModalService,
+ private cacheService:CacheService,
+ @Inject("$state") private $state:ng.ui.IStateService){
+
+ }
+
+ openOnboardingModal(csarUUID?: string, csarVersion?: string): Observable<any> {
+ var subject = new Subject<any>();
+ const onboardingModalConfig = {
+ size: SdcUiCommon.ModalSize.xlarge,
+ title: 'Import VSP',
+ type: SdcUiCommon.ModalType.custom,
+ testId: 'sampleTestIdModal1',
+ } as SdcUiCommon.IModalConfig;
+ const onboardingModalInstance = this.modalService.openCustomModal(onboardingModalConfig, OnboardingModalComponent, {currentCsarUUID: csarUUID, currentCsarVersion: csarVersion});
+ onboardingModalInstance.innerModalContent.instance.closeModalEvent.subscribe(
+ (result: any) => {
+ subject.next(result);
+ onboardingModalInstance.closeModal();
+ }, (err) =>{}
+ )
+ return subject.asObservable();
+ }
+}
+
diff --git a/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.html b/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.html
new file mode 100644
index 0000000000..6ba1f428a1
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.html
@@ -0,0 +1,106 @@
+<div class="onboarding-modal">
+ <div class="search-wrapper">
+ <span class="sub-title-wrapper">
+ <svg-icon class="info-button"
+ (click) = "openPopover($event, 'ON_BOARDING_GENERAL_INFO')"
+ [name]="'info-circle-o'" [mode]="'primary'"
+ [size]="'medium'"></svg-icon>
+ <span class="sub-title">{{ 'ON_BOARDING_MODAL_SUB_TITLE' | translate }}</span>
+ </span>
+ <span class="sdc-filter-bar-wrapper">
+ <sdc-filter-bar
+ [placeHolder]="'Search'"
+ (keyup)="updateFilter($event)"
+ [testId]="'onboarding-search'">
+ </sdc-filter-bar>
+ </span>
+ </div>
+ <div class="datatable-components-wapper">
+ <ngx-datatable #componentsMetadataTable
+ columnMode="flex"
+ [headerHeight]="40"
+ [rowHeight]="35"
+ [rows]="componentsMetadataList"
+ [sorts]="[{prop: 'name', dir: 'asc'}]"
+ (select)='onSelectComponent($event)'
+ [selectionType]="'single'">
+ <ngx-datatable-row-detail [rowHeight]="undefiend">
+ <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template >
+ <div class="onboarding-components-details">
+ <span class="row-details-description">
+ <div>
+ <div class="th">VSP Description:</div>
+ <div>{{row.description}}</div>
+ </div>
+ </span>
+ <span class="row-details-metadata1">
+ <div *ngIf="isCsarComponentExists">
+ <div class="th">VF'S Meta Data:</div>
+ <div><span class="th">Name:</span>{{componentFromServer.name}}</div>
+ <div><span class="th">Lifecycle:</span>{{componentFromServer.lifecycleState}}</div>
+ <div><span class="th">Creator:</span>{{componentFromServer.creatorFullName}}</div>
+ </div>
+ </span>
+ <span class="row-details-metadata2">
+ <div *ngIf="isCsarComponentExists">
+ <div class="th">&nbsp;</div>
+ <div><span class="th">UUID:</span> {{componentFromServer.uuid}}</div>
+ <div><span class="th">Version:</span> {{componentFromServer.version}}</div>
+ <div><span class="th">Modifier:</span> {{componentFromServer.lastUpdaterFullName}}</div>
+ <div *ngIf="checkNotCertified()">
+ <span class="note">Designers cannot update a VSP if the VF is <br>checked out by another user.</span>
+ </div>
+ </div>
+ </span>
+ <span class="row-details-metadata3">
+ <svg-icon class="info-button"
+ (click) = "openPopover($event, isCsarComponentExists ? 'ON_BOARDING_UPDATE_INFO' : 'ON_BOARDING_IMPORT_INFO')"
+ [name]="'info-circle-o'" [mode]="'primary'"
+ [size]="'medium'"></svg-icon>
+ </span>
+ <span class="row-details-icon">
+ <div>
+ <sdc-button class="import-update-file-btn"
+ [text]="isCsarComponentExists ? 'Update VSP' : 'Import VSP'"
+ [testId]="isCsarComponentExists ? 'update-csar' : 'import-csar'"
+ [type]="'primary'"
+ [icon_name]="isCsarComponentExists ? 'sync-o' : 'alert-triangle-o'"
+ [icon_position]="'left'"
+ [icon_mode] = "'white'"
+ [size] = "'medium'"
+ (click)="importOrUpdateCsar()"
+ [disabled]="checkNotCertified()"
+ >
+ </sdc-button>
+ <svg-icon class="download-file-btn" sdc-tooltip [tooltip-text]="'Download-csar'"
+ [mode]="'primary'" [clickable]="true" [name]="'download-o'"
+ [testId]="'download-csar'" [size]="'medium'" (click)="downloadCsar(row.packageId)">
+ </svg-icon>
+ </div>
+ </span>
+ </div>
+ <sdc-loader [global]="false" [active]="isLoad" [size]="'small'"[relative]="true"></sdc-loader>
+ </ng-template>
+ </ngx-datatable-row-detail>
+ <ngx-datatable-column *ngFor="let column of columns" [ngSwitch]="column.prop" [resizeable]="false" [draggable]="false" name={{column.name}}
+ [flexGrow]="column.flexGrow">
+ <ng-template ngx-datatable-cell-template let-row="row" *ngSwitchCase="'name'">
+ <span data-tests-id="csar-row" class="sprite table-arrow" [ngClass]="{'opened': selectedComponent && row.packageId === selectedComponent.packageId}"></span>
+ {{row[column.prop]}}
+ </ng-template>
+ <ng-template ngx-datatable-cell-template let-row="row" *ngSwitchCase="'categories'">
+ <span *ngIf="row[column.prop][0]">
+ {{row[column.prop][0].name}}&nbsp;
+ <span *ngIf="row[column.prop][0].subcategories[0]">{{row[column.prop][0].subcategories[0].name}}</span>
+ </span>
+ </ng-template>
+ <ng-template ngx-datatable-cell-template let-row="row" *ngSwitchDefault>
+ {{row[column.prop]}}
+ </ng-template>
+ </ngx-datatable-column>
+ </ngx-datatable>
+</div>
+</div>
+
+
+
diff --git a/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.less b/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.less
new file mode 100644
index 0000000000..2e4abda35e
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.less
@@ -0,0 +1,97 @@
+@import "../../../../../assets/styles/variables";
+@import "../../../../../assets/styles/mixins";
+
+
+.onboarding-components-details{
+ display: flex;
+}
+.row-details-description,
+.row-details-metadata1,
+.row-details-metadata2,
+.row-details-metadata3{
+ .th { .m_14_m; }
+ flex-basis: 0;
+ overflow: hidden;
+ padding: 5px 15px;
+ white-space: normal;
+}
+.row-details-description,
+.row-details-metadata3 {
+ border-right: 1px solid @main_color_o;
+}
+
+.row-details-icon {
+ flex-basis: 0;
+ overflow: hidden;
+ padding: 5px 10px;
+ align-self: center;
+}
+
+.row-details-description {
+ flex-grow: 19;
+}
+.row-details-metadata1 {
+ flex-grow: 26.5;
+}
+.row-details-metadata2 {
+ flex-grow: 35;
+ .note {
+ color: @func_color_q;
+ }
+}
+.row-details-metadata3 {
+ flex-grow: 8;
+}
+.info-button{
+ cursor: pointer;
+ float: right;
+}
+.row-details-icon {
+ flex-grow: 18;
+}
+.download-file-btn {
+ cursor: pointer;
+ margin-left: 6px;
+}
+
+.import-update-file-btn {
+ cursor: pointer;
+}
+.sprite.table-arrow{
+ margin-right: 7px;
+}
+.search-wrapper {
+ .sdc-filter-bar-wrapper {
+ flex: 0 0 30%;
+ }
+ .sub-title-wrapper {
+ flex: 0 0 70%;
+ font-size: 15px;
+ line-height: 35px;
+ font-family: OpenSans-Regular, sans-serif;
+ align-items: center;
+ display: inline-flex;
+ .sub-title{
+ padding-left: 5px;
+ }
+ }
+ display: flex;
+ margin-top: 15px;
+ margin-bottom: 10px;
+ }
+
+ :host ::ng-deep {
+ .datatable-row-detail{
+ width: 1120px;
+ }
+ .datatable-body-row {
+ cursor: pointer;
+ }
+ }
+
+
+
+
+
+
+
diff --git a/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.spec.ts b/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.spec.ts
new file mode 100644
index 0000000000..565398b6ad
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.spec.ts
@@ -0,0 +1,122 @@
+import {async, ComponentFixture, TestBed} from "@angular/core/testing";
+import { NO_ERRORS_SCHEMA} from "@angular/core";
+import {ConfigureFn, configureTests} from "../../../../../jest/test-config.helper";
+
+import {Observable} from "rxjs/Observable";
+import {NgxDatatableModule} from "@swimlane/ngx-datatable";
+import {SdcUiServices, SdcUiCommon} from "onap-ui-angular";
+import 'rxjs/add/observable/of';
+import {OnboardingService} from "../../../services/onboarding.service";
+import {TranslateService} from "../../../shared/translator/translate.service";
+import {CacheService} from "../../../services/cache.service";
+import {FileUtilsService} from "../../../services/file-utils.service";
+import {onboardingModalVSPMock, onboardingModalUniqueVSPMock, vspFromServerMock} from "../../../../../jest/mocks/onboarding-vsp.mock";
+import {OnboardingModalComponent} from "./onboarding-modal.component";
+import {TranslatePipe} from "../../../shared/translator/translate.pipe";
+
+describe('onboarding modal component', () => {
+
+ let fixture: ComponentFixture<OnboardingModalComponent>;
+ let onboardingServiceMock: Partial<OnboardingService>;
+ let translateServiceMock: Partial<TranslateService>;
+ let cacheServiceMock: Partial<CacheService>;
+ let fileUtilsServiceMock: Partial<FileUtilsService>;
+ let popoverServiceMock: Partial<SdcUiServices.PopoverService>;
+ let loaderServiceMock: Partial<SdcUiServices.LoaderService>;
+
+ beforeEach(
+ async(() => {
+
+ onboardingServiceMock = {
+ getOnboardingComponents: jest.fn().mockImplementation(()=> Observable.of(onboardingModalUniqueVSPMock)),
+ getComponentFromCsarUuid: jest.fn().mockImplementation(()=> Observable.of(vspFromServerMock))
+ };
+
+ cacheServiceMock = {
+ set: jest.fn()
+ };
+
+ loaderServiceMock = {
+ activate: jest.fn(),
+ deactivate: jest.fn()
+ }
+
+
+ const configure: ConfigureFn = testBed => {
+ testBed.configureTestingModule({
+ declarations: [OnboardingModalComponent, TranslatePipe],
+ imports: [NgxDatatableModule],
+ schemas: [NO_ERRORS_SCHEMA],
+ providers: [
+ { provide: OnboardingService, useValue: onboardingServiceMock },
+ { provide: TranslateService, useValue: translateServiceMock },
+ { provide: CacheService, useValue: cacheServiceMock },
+ { provide: FileUtilsService, useValue: fileUtilsServiceMock },
+ { provide: SdcUiServices.PopoverService, useValue: popoverServiceMock },
+ { provide: SdcUiServices.LoaderService, useValue: loaderServiceMock }
+ ],
+ });
+ };
+ configureTests(configure).then(testBed => {
+ fixture = testBed.createComponent(OnboardingModalComponent);
+ });
+ })
+ );
+
+ /*it('should match current snapshot of onboarding modal component', () => {
+ expect(fixture).toMatchSnapshot();
+ });*/
+
+ it('should see exactly 2 vsp in onboarding modal and call initOnboardingComponentsList', () => {
+ fixture.componentInstance.initOnboardingComponentsList();
+ expect(fixture.componentInstance.componentsMetadataList.length).toBe(2);
+ });
+
+ it('should see exactly 1 vsp in onboarding modal and call initOnboardingComponentsList', () => {
+ fixture.componentInstance.currentCsarUUID = "6348841e79a64871ba064ce340a968a4";
+ fixture.componentInstance.initOnboardingComponentsList();
+ expect(fixture.componentInstance.componentsMetadataList.length).toBe(1);
+ });
+
+ it('when get a list of vsp initMaxVersionOfItemsInList will return a list with unique items with the latest versions for each packageId', () => {
+ onboardingServiceMock.getOnboardingComponents = jest.fn().mockImplementation(() => Observable.of(onboardingModalVSPMock));
+ fixture.componentInstance.initOnboardingComponentsList();
+ expect(fixture.componentInstance.componentsMetadataList.length).toBe(2);
+ });
+
+ it('should filter out 1 vsp when searching and call updateFilter function', () => {
+ fixture.componentInstance.initOnboardingComponentsList();
+ let event = {
+ target : {
+ value : 'test new vsp'
+ }
+ }
+
+ expect(fixture.componentInstance.componentsMetadataList.length).toBe(2);
+ fixture.componentInstance.updateFilter(event);
+ expect(fixture.componentInstance.componentsMetadataList.length).toBe(1);
+ });
+
+ it('When select the selected vsp the row details closed and call onSelectComponent function', () => {
+ fixture.componentInstance.initOnboardingComponentsList();
+ fixture.componentInstance.onSelectComponent({selected: []});
+ expect(fixture.componentInstance.selectedComponent).toEqual(undefined);
+ expect(fixture.componentInstance.componentFromServer).toEqual(undefined);
+ });
+
+ it('When select vsp a row with its details will be opened and call onSelectComponent function', () => {
+ fixture.componentInstance.initOnboardingComponentsList();
+ fixture.componentInstance.onSelectComponent({selected: onboardingModalVSPMock});
+ expect(fixture.componentInstance.selectedComponent).not.toEqual(null);
+ expect(fixture.componentInstance.componentFromServer).not.toEqual(undefined);
+ expect(fixture.componentInstance.isCsarComponentExists).toEqual(true);
+ });
+ it('When select new vsp a row with import and download buttons will be opened and call onSelectComponent function', () => {
+ fixture.componentInstance.initOnboardingComponentsList();
+ onboardingServiceMock.getComponentFromCsarUuid.mockImplementation(() => Observable.of(undefined));
+ fixture.componentInstance.onSelectComponent({selected: onboardingModalVSPMock});
+ expect(fixture.componentInstance.selectedComponent).not.toEqual(null);
+ expect(fixture.componentInstance.componentFromServer).toEqual(undefined);
+ expect(fixture.componentInstance.isCsarComponentExists).toEqual(false);
+ });
+});
diff --git a/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.ts b/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.ts
new file mode 100644
index 0000000000..2e41716e0b
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.ts
@@ -0,0 +1,193 @@
+/**
+ * Created by rc2122 on 6/3/2018.
+ */
+import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import * as _ from 'lodash';
+import { SdcUiServices } from 'onap-ui-angular';
+import { ComponentMetadata, IComponentMetadata } from '../../../../models/component-metadata';
+import { IUserProperties } from '../../../../models/user';
+
+import { Resource } from '../../../../models/components/resource';
+import { ComponentType } from '../../../../utils/constants';
+import { CacheService } from '../../../services/cache.service';
+import { FileUtilsService } from '../../../services/file-utils.service';
+import { OnboardingService } from '../../../services/onboarding.service';
+import { TranslateService } from '../../../shared/translator/translate.service';
+
+export interface ImportVSPdata {
+ componentCsar: Resource;
+ previousComponent?: Resource;
+ type: string;
+}
+
+// tslint:disable-next-line:interface-name
+export interface IPoint {
+ x: number;
+ y: number;
+}
+
+@Component({
+ selector: 'onboarding-modal',
+ templateUrl: './onboarding-modal.component.html',
+ styleUrls: ['onboarding-modal.component.less', '../../../../../assets/styles/table-style.less']
+})
+export class OnboardingModalComponent implements OnInit {
+ @Input() currentCsarUUID: string;
+ @Input() currentCsarVersion: string;
+ @ViewChild('componentsMetadataTable') table: any;
+ @Output() closeModalEvent: EventEmitter<ImportVSPdata> = new EventEmitter<ImportVSPdata>();
+
+ private columns = [
+ {name: 'Name', prop: 'name', flexGrow: 22},
+ {name: 'Vendor', prop: 'vendorName', flexGrow: 26},
+ {name: 'Category', prop: 'categories', flexGrow: 33},
+ {name: 'Version', prop: 'csarVersion', flexGrow: 10},
+ {name: 'Type', prop: 'resourceType', flexGrow: 10},
+ {name: '#', prop: '', flexGrow: 20}
+ ];
+ private componentsMetadataList: IComponentMetadata[] = [];
+ private temp: IComponentMetadata[] = [];
+ private componentFromServer: ComponentMetadata;
+ private isCsarComponentExists: boolean = false;
+ private selectedComponent: ComponentMetadata;
+ private isLoading: boolean;
+ private user: IUserProperties;
+
+ constructor(private onBoardingService: OnboardingService,
+ private translateService: TranslateService,
+ private cacheService: CacheService,
+ private fileUtilsService: FileUtilsService,
+ private popoverService: SdcUiServices.PopoverService,
+ private loaderService: SdcUiServices.LoaderService) {
+ }
+
+ public ngOnInit(): void {
+ this.initOnboardingComponentsList();
+ this.user = this.cacheService.get('user');
+ }
+
+ initMaxVersionOfItemsInList = (onboardingResponse: IComponentMetadata[]): void => {
+ // Get only the latest version of each item
+ this.componentsMetadataList = [];
+
+ // group all items according to packageId
+ const groupByPackageIdItems = _.groupBy(onboardingResponse, 'packageId');
+ // Loop on all the groups and push to componentsMetadataList the max version for each package
+ _.each(groupByPackageIdItems, (items: any): void => {
+ let maxItem: any = items[0];
+ items.forEach((item) => {
+ if (parseFloat(maxItem.csarVersion) < parseFloat(item.csarVersion)) {
+ maxItem = item;
+ }
+ });
+ if (maxItem) {
+ this.componentsMetadataList.push(maxItem);
+ }
+ });
+ }
+
+ onSelectComponent({selected}) {
+ this.table.rowDetail.collapseAllRows();
+ if (selected[0] === this.selectedComponent) {
+ this.selectedComponent = undefined;
+ this.componentFromServer = undefined;
+ this.table.rowDetail.toggleExpandRow(null);
+ return;
+ }
+ this.isLoading = true;
+ this.componentFromServer = undefined;
+ this.selectedComponent = selected[0];
+ this.onBoardingService.getComponentFromCsarUuid(this.selectedComponent.csarUUID).subscribe(
+ (componentFromServer: ComponentMetadata) => {
+ this.isLoading = false;
+ if (componentFromServer) {
+ this.componentFromServer = componentFromServer;
+ this.populateRowDetails(true);
+ } else {
+ this.populateRowDetails(false);
+ }
+ }, (error) => {
+ this.isLoading = false;
+ this.populateRowDetails(false);
+ });
+ }
+
+ populateRowDetails(isCsarComponentExists: boolean) {
+ this.isCsarComponentExists = isCsarComponentExists;
+ this.table.rowDetail.toggleExpandRow(this.selectedComponent);
+ }
+
+ importOrUpdateCsar = (): void => {
+ const selectedComponentConverted = this.onBoardingService.convertMetaDataToComponent(this.selectedComponent);
+ const componentFromServerConverted = this.componentFromServer ?
+ this.onBoardingService.convertMetaDataToComponent(this.componentFromServer) : undefined;
+ const importVSPdata: ImportVSPdata = {
+ componentCsar: selectedComponentConverted,
+ previousComponent: componentFromServerConverted,
+ type: ComponentType.RESOURCE.toLowerCase()
+ };
+ this.closeModalEvent.emit(importVSPdata);
+ }
+
+ downloadCsar = (packageId: string): void => {
+ this.isLoading = true;
+ this.onBoardingService.downloadOnboardingCsar(packageId).subscribe(
+ (file: any): void => {
+ this.isLoading = false;
+ if (file.body) {
+ this.fileUtilsService.downloadFile(file.body, packageId + '.csar');
+ }
+ }, (): void => {
+ this.isLoading = false;
+ }
+ );
+ }
+
+ updateFilter(event) {
+ const val = event.target.value.toLowerCase();
+
+ // filter our data
+ const temp = this.temp.filter((componentMetadata: ComponentMetadata) => {
+ return !val ||
+ (componentMetadata.name && componentMetadata.name.toLowerCase().indexOf(val) !== -1) ||
+ (componentMetadata.vendorName && componentMetadata.vendorName.toLowerCase().indexOf(val) !== -1) ||
+ (componentMetadata.categories[0] && componentMetadata.categories[0].name.toLowerCase().indexOf(val) !== -1) ||
+ (componentMetadata.categories[0] && componentMetadata.categories[0].subcategories[0] && componentMetadata.categories[0].subcategories[0].name.toLowerCase().indexOf(val) !== -1) ||
+ (componentMetadata.csarVersion && componentMetadata.csarVersion.toLowerCase().indexOf(val) !== -1) ||
+ (componentMetadata.description && componentMetadata.description.toLowerCase().indexOf(val) !== -1);
+ });
+
+ // update the rows
+ this.componentsMetadataList = temp;
+ }
+
+ checkNotCertified = (): boolean => {
+ return this.componentFromServer && this.componentFromServer.lifecycleState === 'NOT_CERTIFIED_CHECKOUT' &&
+ this.componentFromServer.lastUpdaterUserId !== this.user.userId;
+ }
+
+ openPopover = ($event: any, popoverContent): void => {
+ this.popoverService.createPopOver('', this.translateService.translate(popoverContent), {
+ x: $event.pageX,
+ y: $event.pageY
+ }, 'bottom');
+ }
+
+ private initOnboardingComponentsList = (): void => {
+ this.loaderService.activate();
+ this.onBoardingService.getOnboardingComponents().subscribe(
+ (onboardingResponse: IComponentMetadata[]) => {
+ this.loaderService.deactivate();
+ if (this.currentCsarUUID) {
+ onboardingResponse = _.filter(onboardingResponse, (input): boolean => {
+ return (input as ComponentMetadata).csarUUID === this.currentCsarUUID;
+ });
+ }
+ this.initMaxVersionOfItemsInList(onboardingResponse);
+ this.temp = [...this.componentsMetadataList];
+ }, (error) => {
+ this.loaderService.deactivate();
+ }
+ );
+ }
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.html b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.html
deleted file mode 100644
index 50a93fac3c..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<!--
- ~ Copyright (C) 2018 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.
- -->
-
-
-<div class="sdc-canvas-zone {{class}}-zone" [class.minimized]="minimized" [class.hidden]="!visible" (click)="backgroundClicked()">
- <div class="sdc-canvas-zone__header" (click)="unminifyZone(); $event.stopPropagation();" >
- <div class="sdc-canvas-zone__title">{{title}}
- <span class="sdc-canvas-zone__counter">{{count}}</span>
- </div>
- <span class="sdc-canvas-zone__state-button">&ndash;</span>
- </div>
- <div class="sdc-canvas-zone__container" #scrollDiv >
- <ng-content></ng-content>
- </div>
-</div> \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.less b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.less
deleted file mode 100644
index 02880a9202..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.less
+++ /dev/null
@@ -1,62 +0,0 @@
-.sdc-canvas-zone {
- width: 285px;
- max-height:186px;
- display:flex;
- flex-direction:column;
- align-self: flex-end;
- color:white;
- font-family:OpenSans-Regular, sans-serif;
- transition: width .2s ease-in-out, max-height .2s ease-in-out .1s;
- position:relative;
- bottom:0px;
-
- .sdc-canvas-zone__header {
- background: #5A5A5A;
- border-radius: 2px 2px 0 0;
- padding: 5px 10px;
- display:flex;
- justify-content: space-between;
- font-size: 14px;
- text-transform:uppercase;
- .sdc-canvas-zone__state-button {
- font-weight:bold;
- cursor:pointer;
- }
- }
-
- .sdc-canvas-zone__container {
- padding:5px;
- background-color: #5A5A5A;
- opacity:0.9;
- flex: 1;
- display:flex;
- flex-direction: row;
- align-items: flex-start;
- flex-wrap:wrap;
- overflow-y:auto;
- min-height: 80px;
- max-height: 170px;
- }
-
-
- &.minimized {
- max-height:30px;
- width:120px;
- cursor:pointer;
-
- .sdc-canvas-zone__state-button {
- display:none;
- }
- .sdc-canvas-zone__container {
- flex: 0 0 0;
- min-height: 0;
- padding: 0;
- overflow-y:hidden;
- transition: min-height .2s ease-in-out .2s;
- transition: padding .1s ease-in-out 0s;
- }
- }
- &.hidden {
- display:none;
- }
-} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.ts b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.ts
deleted file mode 100644
index 4059ad6cae..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Component, Input, Output, ViewEncapsulation, EventEmitter, OnInit } from '@angular/core';
-import { ZoneInstanceType } from '../../../../models/graph/zones/zone-instance';
-
-@Component({
- selector: 'zone-container',
- templateUrl: './zone-container.component.html',
- styleUrls: ['./zone-container.component.less'],
- encapsulation: ViewEncapsulation.None
-})
-
-export class ZoneContainerComponent implements OnInit {
- @Input() title:string;
- @Input() type:ZoneInstanceType;
- @Input() count:number;
- @Input() visible:boolean;
- @Input() minimized:boolean;
- @Output() minimize: EventEmitter<any> = new EventEmitter<any>();
- @Output() backgroundClick: EventEmitter<void> = new EventEmitter<void>();
- private class:string;
-
- constructor() {}
-
- ngOnInit() {
- this.class = ZoneInstanceType[this.type].toLowerCase();
- }
-
- private unminifyZone = () => {
- this.minimize.emit();
- }
-
- private backgroundClicked = () => {
- this.backgroundClick.emit();
- }
-
-} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.html b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.html
deleted file mode 100644
index 728764c427..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<!--
- ~ Copyright (C) 2018 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.
- -->
-
-
-<div tooltip="{{zoneInstance.instanceData.name}}" #currentComponent
- class="zone-instance mode-{{zoneInstance.mode}}" [class.locked]="activeInstanceMode > MODE.HOVER" [class.hiding]="hidden"
- (mouseenter)="setMode(MODE.HOVER)" (mouseleave)="setMode(MODE.NONE)" (click)="setMode(MODE.SELECTED, $event)">
- <div *ngIf="zoneInstance.handle" class="target-handle {{zoneInstance.handle}}" (click)="tagHandleClicked($event)"></div>
- <div *ngIf="!isViewOnly" class="zone-instance__handle" (click)="setMode(MODE.TAG, $event)">+</div>
- <div class="zone-instance__body">
- <div class="zone-instance__body-content">{{zoneInstance.assignments.length || defaultIconText}}</div>
- </div>
- <div class="zone-instance__name">{{zoneInstance.instanceData.name}}</div>
-</div> \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.less b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.less
deleted file mode 100644
index b562c08514..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.less
+++ /dev/null
@@ -1,134 +0,0 @@
-@import '../../../../../../assets/styles/variables';
-
-.zone-instance {
- position:relative;
- width:76px;
- margin:5px;
- opacity:1;
-
- .zone-instance__handle {
- display:none;
- position:absolute;
- right:4px;
- top:10px;
- width:22px;
- height:22px;
- cursor:pointer;
- border: solid @main_color_p 1px;
- border-radius: 2px;
- text-align: center;
- font-weight:bold;
- }
-
- .zone-instance__body {
- margin:0 auto;
- width:43px;
- height:43px;
- display:flex;
- padding:3px;
- }
-
- .zone-instance__body-content {
- border-radius: 2px;
- flex:1;
- color:@main_color_p;
- font-size:16px;
- text-align:center;
- display:flex;
- align-items: center;
- justify-content: center;
- box-shadow:none;
- transition:box-shadow 5s;
- }
-
- .zone-instance__name {
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- text-align:center;
- }
- /* Dynamic classes below */
-
- .target-handle {
- position:absolute;
- width:18px;
- height:18px;
- display:block;
- top: -4px;
- right: 10px;
- background-size: 100% 100%;
- cursor: url("../../../../../../assets/styles/images/canvas-tagging-icons/policy_2.svg"), pointer;
-
- &.tagged-policy {
- background-image: url('../../../../../../assets/styles/images/canvas-tagging-icons/policy_added.svg');
- }
-
- &.tag-available {
- background-image: url('../../../../../../assets/styles/images/canvas-tagging-icons/indication.svg');
- }
- }
-
-
- &.mode-1, &.mode-2, &.mode-3 { //hover, selected, tag
- .zone-instance__body {
- border:solid 2px;
- border-radius: 2px;
- padding:2px;
- cursor:pointer;
- }
- }
-
- &.mode-1, &.mode-2:hover{
- .zone-instance__handle{
- display:block;
- }
- }
-
- &.locked {
- cursor: inherit;
- }
-
- &.hiding {
- opacity:0;
- .zone-instance__body-content {
- box-shadow: #CCC 0px 0px 15px;
- }
- }
-
-
- &.mode-3 .zone-instance__handle {
- width:24px;
- height:24px;
- right:3px;
- top:9px;
- display:block;
- background-image: linear-gradient(-140deg, #009E98 0%, #97D648 100%);
- border: 2px solid @main_color_p;
- border-radius: 2px;
- box-shadow: inset 2px -2px 3px 0 #007A3E;
- }
-
-}
-.sdc-canvas-zone.group-zone {
- .zone-instance__handle {
- background-color:@main_color_a;
- }
- .zone-instance__body {
- border-color:@main_color_a;
- .zone-instance__body-content {
- background: @main_color_a;
- }
- }
-}
-
-.sdc-canvas-zone.policy-zone {
- .zone-instance__handle {
- background-color:@main_color_r;
- }
- .zone-instance__body {
- border-color:@main_color_r;
- .zone-instance__body-content {
- background: @main_color_r;
- }
- }
-} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.ts b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.ts
deleted file mode 100644
index 3c2dd45db5..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-import { Component, Input, Output, EventEmitter, ViewEncapsulation, OnInit, SimpleChange, ElementRef, ViewChild, SimpleChanges } from '@angular/core';
-import {
- ZoneInstance, ZoneInstanceMode, ZoneInstanceType,
- IZoneInstanceAssignment
-} from 'app/models/graph/zones/zone-instance';
-import { PoliciesService } from '../../../../services/policies.service';
-import { GroupsService } from '../../../../services/groups.service';
-import { IZoneService } from "../../../../../models/graph/zones/zone";
-import { EventListenerService } from 'app/services';
-import { GRAPH_EVENTS } from '../../../../../utils';
-import { Subject, Observable } from 'rxjs';
-
-@Component({
- selector: 'zone-instance',
- templateUrl: './zone-instance.component.html',
- styleUrls: ['./zone-instance.component.less'],
- encapsulation: ViewEncapsulation.None
-})
-export class ZoneInstanceComponent implements OnInit {
-
- @Input() zoneInstance:ZoneInstance;
- @Input() defaultIconText:string;
- @Input() isActive:boolean;
- @Input() isViewOnly:boolean;
- @Input() activeInstanceMode: ZoneInstanceMode;
- @Input() hidden:boolean;
- @Input() forceSave:Subject<Function>;
- @Output() modeChange: EventEmitter<any> = new EventEmitter<any>();
- @Output() assignmentSaveStart: EventEmitter<void> = new EventEmitter<void>();
- @Output() assignmentSaveComplete: EventEmitter<boolean> = new EventEmitter<boolean>();
- @Output() tagHandleClick: EventEmitter<ZoneInstance> = new EventEmitter<ZoneInstance>();
- @ViewChild('currentComponent') currentComponent: ElementRef;
- private MODE = ZoneInstanceMode;
- private zoneService:IZoneService;
-
- constructor(private policiesService:PoliciesService, private groupsService:GroupsService, private eventListenerService:EventListenerService){}
-
- ngOnInit(){
- if(this.zoneInstance.type == ZoneInstanceType.POLICY){
- this.zoneService = this.policiesService;
- } else {
- this.zoneService = this.groupsService;
- }
- this.forceSave.subscribe((afterSaveFunction:Function) => {
- this.setMode(ZoneInstanceMode.TAG, null, afterSaveFunction);
- })
- }
-
- ngOnChanges(changes:SimpleChanges) {
- if(changes.hidden){
- this.currentComponent.nativeElement.scrollIntoView({behavior: "smooth", block: "nearest", inline:"end"});
- }
- }
-
- ngOnDestroy() {
- this.forceSave.unsubscribe();
- }
-
- private setMode = (mode:ZoneInstanceMode, event?:any, afterSaveCallback?:Function):void => {
-
- if(event){ //prevent event from handle and then repeat event from zone instance
- event.stopPropagation();
- }
-
- if(!this.isActive && this.activeInstanceMode === ZoneInstanceMode.TAG) {
- return; //someone else is tagging. No events allowed
- }
-
- if(this.isActive && this.zoneInstance.mode === ZoneInstanceMode.TAG){
- if(mode !== ZoneInstanceMode.TAG) {
- return; //ignore all other events. The only valid option is saving changes.
- }
-
- let oldAssignments:Array<IZoneInstanceAssignment> = this.zoneInstance.instanceData.getSavedAssignments();
- if(this.zoneInstance.isZoneAssignmentChanged(oldAssignments, this.zoneInstance.assignments)) {
-
- this.assignmentSaveStart.emit();
-
- this.zoneService.updateZoneInstanceAssignments(this.zoneInstance.parentComponentType, this.zoneInstance.parentComponentID, this.zoneInstance.instanceData.uniqueId, this.zoneInstance.assignments).subscribe(
- (success) => {
- this.zoneInstance.instanceData.setSavedAssignments(this.zoneInstance.assignments);
- if(this.zoneInstance.type === ZoneInstanceType.POLICY){
- this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_POLICY_INSTANCE_UPDATE, this.zoneInstance.instanceData);
- } else {
- this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_GROUP_INSTANCE_UPDATE, this.zoneInstance.instanceData);
- }
- this.assignmentSaveComplete.emit(true);
- if(afterSaveCallback) afterSaveCallback();
- }, (error) => {
- this.zoneInstance.assignments = oldAssignments;
- this.assignmentSaveComplete.emit(false);
- });
- } else {
- if(afterSaveCallback) afterSaveCallback();
- }
- this.modeChange.emit({newMode: ZoneInstanceMode.NONE, instance: this.zoneInstance});
-
- } else {
- this.modeChange.emit({newMode: mode, instance: this.zoneInstance});
- }
-
-
- }
-
- private tagHandleClicked = (event:Event) => {
- this.tagHandleClick.emit(this.zoneInstance);
- event.stopPropagation();
- };
-
-} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/download-artifact/download-artifact.component.ts b/catalog-ui/src/app/ng2/components/ui/download-artifact/download-artifact.component.ts
new file mode 100644
index 0000000000..8f47456a8f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/download-artifact/download-artifact.component.ts
@@ -0,0 +1,145 @@
+import { Component, Input } from "@angular/core";
+import {IFileDownload, Component as TopologyTemplate, ArtifactModel, FullComponentInstance} from "app/models";
+import {EventListenerService} from "app/services";
+import {CacheService} from "app/services-ng2";
+import {EVENTS} from "app/utils";
+import { TopologyTemplateService } from "app/ng2/services/component-services/topology-template.service";
+import { WorkspaceService } from "app/ng2/pages/workspace/workspace.service";
+import { ComponentInstanceServiceNg2 } from "app/ng2/services/component-instance-services/component-instance.service";
+
+@Component({
+ selector: 'download-artifact',
+ template: `
+ <svg-icon [mode]="'primary2'" [disabled]="disabled" [clickable]="!disabled" [name]="iconType" [testId]="testId" mode="info" clickable="true" size="medium" (click)="download($event)"></svg-icon>
+`
+})
+export class DownloadArtifactComponent {
+
+ @Input() showLoader:boolean;
+ @Input() artifact:ArtifactModel;
+ @Input() isInstance: boolean;
+ @Input() downloadIconClass: string;
+ @Input() componentType: string;
+ @Input() componentId: string;
+ @Input() testId: string;
+ @Input() disabled: boolean;
+
+ public iconType:string;
+
+ private DOWNLOAD_CSS_CLASSES = {
+ DOWNLOAD_ICON: "download-o",
+ LOADER_ICON: "spinner"
+ }
+ constructor(private cacheService:CacheService, private EventListenerService:EventListenerService, private topologyTemplateService:TopologyTemplateService,
+ private componentInstanceService: ComponentInstanceServiceNg2, private workspaceService:WorkspaceService) {
+
+ }
+
+ ngOnInit () {
+ this.iconType = this.DOWNLOAD_CSS_CLASSES.DOWNLOAD_ICON;
+ this.initDownloadLoader();
+
+ }
+
+ private initDownloadLoader = ()=> {
+ //if the artifact is in a middle of download progress register form callBack & change icon from download to loader
+ if (this.showLoader && this.cacheService.get(this.artifact.uniqueId)) {
+ this.EventListenerService.registerObserverCallback(EVENTS.DOWNLOAD_ARTIFACT_FINISH_EVENT + this.artifact.uniqueId, this.updateDownloadIcon);
+ window.setTimeout(():void => {
+ if (this.cacheService.get(this.artifact.uniqueId)) {
+ this.iconType = this.DOWNLOAD_CSS_CLASSES.LOADER_ICON;
+ }
+ }, 1000);
+ }
+ };
+
+ private updateDownloadIcon = () => {
+ this.iconType = this.downloadIconClass || this.DOWNLOAD_CSS_CLASSES.DOWNLOAD_ICON;
+ };
+
+ public download = (event) => {
+ event.stopPropagation();
+ let onFaild = (response):void => {
+ console.info('onFaild', response);
+ this.removeDownloadedFileLoader();
+ };
+
+ let onSuccess = (data:IFileDownload):void => {
+ this.downloadFile(data);
+ this.removeDownloadedFileLoader();
+ };
+
+ this.setDownloadedFileLoader();
+
+ if (this.isInstance) {
+ this.componentInstanceService.downloadInstanceArtifact(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, this.componentId, this.artifact.uniqueId).subscribe(onSuccess, onFaild);
+ } else {
+ this.topologyTemplateService.downloadArtifact(this.componentType, this.componentId, this.artifact.uniqueId).subscribe(onSuccess, onFaild);
+ }
+ };
+
+ private setDownloadedFileLoader = ()=> {
+ if (this.showLoader) {
+ //set in cache service thet the artifact is in download progress
+ this.cacheService.set(this.artifact.uniqueId, true);
+ this.initDownloadLoader();
+ }
+ };
+
+ private removeDownloadedFileLoader = ()=> {
+ if (this.showLoader) {
+ this.cacheService.set(this.artifact.uniqueId, false);
+ this.EventListenerService.notifyObservers(EVENTS.DOWNLOAD_ARTIFACT_FINISH_EVENT + this.artifact.uniqueId);
+ }
+ };
+
+ private downloadFile = (file:IFileDownload):void => {
+ if (file) {
+ let blob = this.base64toBlob(file.base64Contents, '');
+ let fileName = file.artifactName;
+ this.triggerFileDownload(blob, fileName);
+ }
+ };
+
+ public base64toBlob = (base64Data, contentType):any => {
+ let byteCharacters = atob(base64Data);
+ return this.byteCharactersToBlob(byteCharacters, contentType);
+ };
+
+ public byteCharactersToBlob = (byteCharacters, contentType):any => {
+ contentType = contentType || '';
+ let sliceSize = 1024;
+ let bytesLength = byteCharacters.length;
+ let slicesCount = Math.ceil(bytesLength / sliceSize);
+ let byteArrays = new Array(slicesCount);
+
+ for (let sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
+ let begin = sliceIndex * sliceSize;
+ let end = Math.min(begin + sliceSize, bytesLength);
+
+ let bytes = new Array(end - begin);
+ for (let offset = begin, i = 0; offset < end; ++i, ++offset) {
+ bytes[i] = byteCharacters[offset].charCodeAt(0);
+ }
+ byteArrays[sliceIndex] = new Uint8Array(bytes);
+ }
+ return new Blob(byteArrays, {type: contentType});
+ };
+
+ public triggerFileDownload = (blob, fileName):void=> {
+ let url = window.URL.createObjectURL(blob);
+ let downloadLink = document.createElement("a");
+
+ downloadLink.setAttribute('href', url);
+ downloadLink.setAttribute('download', fileName);
+ document.body.appendChild(downloadLink);
+
+ var clickEvent = new MouseEvent("click", {
+ "view": window,
+ "bubbles": true,
+ "cancelable": true
+ });
+ downloadLink.dispatchEvent(clickEvent);
+
+ }
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts
index 049d40831a..5e3214d888 100644
--- a/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts
@@ -37,11 +37,13 @@ enum DynamicElementComponentCreatorIdentifier {
BOOLEAN,
SUBNETPOOLID,
ENUM,
+ LIST,
DEFAULT
}
@Component({
selector: 'dynamic-element',
+ // Span - if constraints not empty
template: `<div #target></div>`,
styleUrls: ['./dynamic-element.component.less'],
entryComponents: [
@@ -61,6 +63,7 @@ export class DynamicElementComponent {
@Input() readonly:boolean;
@Input() constraints: Array<any>;
@Input() path:string;//optional param. used only for for subnetpoolid type
+ @Input() declared:boolean;
@Input() value: any;
@Output() valueChange: EventEmitter<any> = new EventEmitter<any>();
@@ -72,16 +75,19 @@ export class DynamicElementComponent {
validation = ValidationConfiguration.validation;
constructor(
+
private componentFactoryResolver: ComponentFactoryResolver,
private compiler: Compiler,
private el: ElementRef) {
+
+
}
updateComponent() {
if (!this.isViewInitialized) {
return;
}
-
+
// Factory to create component based on type or other property attributes.
const prevElementCreatorIdentifier: DynamicElementComponentCreatorIdentifier = this.elementCreatorIdentifier;
switch(true) {
@@ -112,7 +118,7 @@ export class DynamicElementComponent {
}
// In case the dynamic element creator is changed, then destroy old and build new.
- if (this.elementCreatorIdentifier !== prevElementCreatorIdentifier) {
+ if (this.declared || this.elementCreatorIdentifier !== prevElementCreatorIdentifier) {
if (this.cmpRef) {
this.cmpRef.destroy();
}
@@ -149,64 +155,81 @@ export class DynamicElementComponent {
}
createComponentByIdentifier() {
- switch(this.elementCreatorIdentifier) {
- case DynamicElementComponentCreatorIdentifier.SUBNETPOOLID:
- if(this.name.toUpperCase().indexOf("SUBNETPOOLID") == -1){//if it's an item of subnetpoolid list get the parent name
- let pathArray = this.path.split("#");
- this.name = pathArray[pathArray.length - 2];
- }
- this.createComponent(UiElementPopoverInputComponent);
- break;
+ // if(!this.constraints || this.declared){
+ switch(this.elementCreatorIdentifier) {
+ case DynamicElementComponentCreatorIdentifier.SUBNETPOOLID:
+ if(this.name.toUpperCase().indexOf("SUBNETPOOLID") == -1){//if it's an item of subnetpoolid list get the parent name
+ let pathArray = this.path.split("#");
+ this.name = pathArray[pathArray.length - 2];
+ }
+ this.createComponent(UiElementPopoverInputComponent);
+ break;
+ case DynamicElementComponentCreatorIdentifier.ENUM:
+ this.createComponent(UiElementDropDownComponent);
+ let validVals:Array<DropdownValue> = [...this.getValidValues()].map(val => new DropdownValue(val, val));
+ if (this.type === 'float' || this.type === 'integer') {
+ this.value = this.value && Number(this.value);
+ validVals = _.map(
+ validVals,
+ (val) => new DropdownValue(Number(val.value), val.value)
+ );
+ }
+ this.cmpRef.instance.values = validVals;
+ break;
+ case DynamicElementComponentCreatorIdentifier.INTEGER:
+ this.createComponent(UiElementIntegerInputComponent);
+ this.cmpRef.instance.pattern = this.validation.validationPatterns.integer;
+ break;
- case DynamicElementComponentCreatorIdentifier.ENUM:
- this.createComponent(UiElementDropDownComponent);
- let validVals:Array<DropdownValue> = [...this.getValidValues()].map(val => new DropdownValue(val, val));
- if (this.type === 'float' || this.type === 'integer') {
- this.value = this.value && Number(this.value);
- validVals = _.map(
- validVals,
- val => new DropdownValue(Number(val.value), val.value)
- );
- }
- this.cmpRef.instance.values = validVals;
- break;
+ case DynamicElementComponentCreatorIdentifier.FLOAT:
+ this.createComponent(UiElementIntegerInputComponent);
+ this.cmpRef.instance.pattern = /^[-+]?[0-9]+(\.[0-9]+)?([eE][-+]?[0-9]+)?$/.source;
+ break;
- case DynamicElementComponentCreatorIdentifier.INTEGER:
- this.createComponent(UiElementIntegerInputComponent);
- this.cmpRef.instance.pattern = this.validation.validationPatterns.integer;
- break;
+ case DynamicElementComponentCreatorIdentifier.STRING:
+ this.createComponent(UiElementInputComponent);
+ break;
- case DynamicElementComponentCreatorIdentifier.FLOAT:
- this.createComponent(UiElementIntegerInputComponent);
- this.cmpRef.instance.pattern = /^[-+]?[0-9]+(\.[0-9]+)?([eE][-+]?[0-9]+)?$/.source;
- break;
+ case DynamicElementComponentCreatorIdentifier.BOOLEAN:
+ this.createComponent(UiElementDropDownComponent);
- case DynamicElementComponentCreatorIdentifier.STRING:
- this.createComponent(UiElementInputComponent);
- break;
-
- case DynamicElementComponentCreatorIdentifier.BOOLEAN:
- this.createComponent(UiElementDropDownComponent);
-
- // Build drop down values
- let tmp = [];
- tmp.push(new DropdownValue(true,'TRUE'));
- tmp.push(new DropdownValue(false,'FALSE'));
- this.cmpRef.instance.values = tmp;
- try {
- if (typeof this.value === 'string') {
- this.value = JSON.parse(this.value);
+ // Build drop down values
+ let tmp = [];
+ tmp.push(new DropdownValue(true,'TRUE'));
+ tmp.push(new DropdownValue(false,'FALSE'));
+ this.cmpRef.instance.values = tmp;
+ try {
+ if(typeof this.value === 'string'){
+ this.value = JSON.parse(this.value);
+ }
+ } catch (err) {
+ this.value = null;
}
- } catch(err) {
- this.value = null;
- }
- break;
+ break;
- case DynamicElementComponentCreatorIdentifier.DEFAULT:
- default:
- this.createComponent(UiElementInputComponent);
- console.log("ERROR: No ui-models component to handle type: " + this.type);
- }
+ case DynamicElementComponentCreatorIdentifier.DEFAULT:
+ default:
+ this.createComponent(UiElementInputComponent);
+ console.log("ERROR: No ui-models component to handle type: " + this.type);
+ }
+ // }
+ // //There are consraints
+ // else {
+
+ // this.createComponent(UiElementDropDownComponent);
+
+ // // Build drop down values
+ // let items = [];
+ // this.constraints.forEach( (element) => {
+ // items.push(new DropdownValue(element,element));
+ // });
+
+ // items.push(new DropdownValue(this.value,this.value, true, true));
+ // this.cmpRef.instance.values = items;
+
+
+
+ // }
// Subscribe to change event of of ui-models-element-basic and fire event to change the value
this.cmpRef.instance.baseEmitter.subscribe((event) => { this.emitter.emit(event); });
diff --git a/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.module.ts b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.module.ts
index 50b22505a9..dc12551e8f 100644
--- a/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.module.ts
+++ b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.module.ts
@@ -23,6 +23,12 @@ import {PopoverModule} from "../popover/popover.module";
import {TooltipModule} from "../tooltip/tooltip.module";
import {DynamicElementComponent} from "./dynamic-element.component";
import {FormElementsModule} from "../form-components/form-elements.module";
+// import {SdcUiComponentsModule} from "sdc-ui/lib/angular";
+// import {SdcUiComponentsModule} from "sdc-ui/lib/angular/index";
+// import {SdcUiComponentsModule} from "onap-ui/lib/angular";
+import { SdcUiComponentsModule } from "onap-ui-angular";
+
+import { CommonModule } from '@angular/common';
@NgModule({
declarations: [
@@ -31,7 +37,9 @@ import {FormElementsModule} from "../form-components/form-elements.module";
imports: [
PopoverModule,
TooltipModule,
- FormElementsModule
+ FormElementsModule,
+ SdcUiComponentsModule,
+ CommonModule
],
exports: [
DynamicElementComponent
diff --git a/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.html b/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.html
index fde7bca6d2..9b678b2790 100644
--- a/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.html
@@ -14,16 +14,15 @@
~ limitations under the License.
-->
-<h1 class="w-sdc-designer-sidebar-section-title"
- tooltip="{{titleTooltip}}"
- [ngClass]="{'expanded': state == 0, 'collapsed': state == 1}"
- (click)="toggleState()">
- {{caption}}<span class="w-sdc-designer-sidebar-section-title-icon"></span>
- <ng-content select="header"></ng-content>
- <span class="w-sdc-designer-sidebar-section-title-icon"></span>
-</h1>
+<div class="expand-collapse-container">
+ <h1 class="expand-collapse-title" [ngClass]="{'expanded': state == 0, 'collapsed': state == 1}"
+ tooltip="{{titleTooltip}}" (click)="toggleState()">{{caption}}
+ <ng-content select="header"></ng-content>
+ <svg-icon name="caret1-down-o" mode="info" size="small" class="expand-collapse-title-icon"></svg-icon>
+ </h1>
-<div class="expand-collapse-content" [ngClass]="{'visible': state === 0, 'hidden': state === 1}">
- <ng-content></ng-content>
- <ng-content select="content"></ng-content>
-</div>
+ <div class="expand-collapse-content" [ngClass]="{'expanded': state === 0, 'collapsed': state === 1}">
+ <ng-content></ng-content>
+ <ng-content select="content"></ng-content>
+ </div>
+</div> \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.less b/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.less
index e5dd2527c1..deda687a09 100644
--- a/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.less
@@ -5,3 +5,51 @@
text-decoration: underline;
text-align: left;
}
+
+
+.expand-collapse-title {
+ display:flex;
+ align-items: center;
+ cursor: pointer;
+ font-size: 14px;
+ text-transform: uppercase;
+ line-height: 32px;
+ padding: 0 10px 0 20px;
+
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+
+ header {
+ flex: 1;
+ }
+
+ .expand-collapse-title-icon {
+ padding-top: 10px;
+ padding-left: 2px;
+ transition: transform .3s ease-out;
+
+ }
+
+ &.expanded .expand-collapse-title-icon {
+ transform: rotate(0);
+ }
+
+ &.collapsed .expand-collapse-title-icon {
+ transform: rotate(-180deg);
+ }
+
+}
+
+.expand-collapse-content {
+ overflow: hidden;
+ transition: max-height .3s ease-in;
+
+ &.collapsed {
+ max-height: 0px;
+ overflow:hidden;
+ transition: all .3s cubic-bezier(0, 1, 0, 1);
+
+ }
+
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/file-opener/file-opener.component.html b/catalog-ui/src/app/ng2/components/ui/file-opener/file-opener.component.html
new file mode 100644
index 0000000000..14fc6eefc7
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/file-opener/file-opener.component.html
@@ -0,0 +1,6 @@
+<label>
+ <input type="file" class="i-sdc-dashboard-item-upload-input"
+ (change)="onFileSelect($event)"
+ [accept]="extensionsWithDot"
+ [attr.data-tests-id]="'file-' + testsId" />
+</label>
diff --git a/catalog-ui/src/app/ng2/components/ui/file-opener/file-opener.component.less b/catalog-ui/src/app/ng2/components/ui/file-opener/file-opener.component.less
new file mode 100644
index 0000000000..e69de29bb2
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/file-opener/file-opener.component.less
diff --git a/catalog-ui/src/app/ng2/components/ui/file-opener/file-opener.component.ts b/catalog-ui/src/app/ng2/components/ui/file-opener/file-opener.component.ts
new file mode 100644
index 0000000000..1d1d4cef0d
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/file-opener/file-opener.component.ts
@@ -0,0 +1,45 @@
+import {Component, Input, Output, EventEmitter, SimpleChanges} from "@angular/core";
+
+@Component({
+ selector: 'file-opener',
+ templateUrl: './file-opener.component.html',
+ styleUrls: ['./file-opener.component.less']
+})
+export class FileOpenerComponent {
+ @Input() public testsId: string;
+ @Input() public extensions: string;
+ @Output() public onFileUpload: EventEmitter<any>;
+
+ public extensionsWithDot: string;
+
+ constructor() {
+ this.onFileUpload = new EventEmitter<any>();
+ }
+
+ public ngOnChanges(changes:SimpleChanges) {
+ if (changes.extensions) {
+ this.extensionsWithDot = this.getExtensionsWithDot(changes.extensions.currentValue);
+ }
+ }
+
+ public onFileSelect(event) {
+ const importFile:any = event.target.files[0];
+ const reader = new FileReader();
+ reader.readAsBinaryString(importFile);
+ reader.onload = () => {
+ this.onFileUpload.emit({
+ filename: importFile.name,
+ filetype: importFile.type,
+ filesize: importFile.size,
+ base64: btoa(reader.result)
+ });
+ };
+ }
+
+ public getExtensionsWithDot(extensions:string):string {
+ extensions = extensions || this.extensions || '';
+ return extensions.split(',')
+ .map(ext => '.' + ext.toString())
+ .join(',');
+ }
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.ts
index c8da016174..c7b0af6ecf 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.ts
@@ -19,7 +19,7 @@
*/
import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
-//import { trigger, state, style, transition, animate, keyframes } from '@angular/core';
+//import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';
@Component({
selector: 'checkbox',
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html
index 45fd77ee61..9dca01eb61 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html
@@ -15,5 +15,5 @@
-->
<select name='{{name}}' [(ngModel)]="value" (change)="onChange()" [ngClass]="{'disabled':readonly}" [attr.data-tests-id]="'value-' + testId">
- <option *ngFor="let ddvalue of values" [ngValue]="ddvalue.label != undefined ? ddvalue.value : ddvalue">{{ddvalue.label||ddvalue}}</option>
+ <option *ngFor="let ddvalue of values" [ngValue]="ddvalue.label != undefined ? ddvalue.value : ddvalue" [hidden]="ddvalue.hidden" [selected] = "ddvalue.selected">{{ddvalue.label||ddvalue}}</option>
</select>
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts
index 03a1fc6040..6db233529b 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts
@@ -24,11 +24,21 @@ import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.comp
export class DropdownValue {
value:any;
label:string;
+ hidden?: boolean;
+ selected?: boolean;
- constructor(value:any,label:string) {
+
+ constructor(value:any,label:string, hidden: boolean = false, selected: boolean = false) {
this.value = value;
this.label = label;
+ this.hidden = hidden;
+ this.selected = selected;
+
+ // this.hidden = hidden ? true : "hidden": "";
+ // this.selected = selected ? true : "selected": "";
}
+
+
}
@Component({
@@ -37,8 +47,8 @@ export class DropdownValue {
styleUrls: ['./ui-element-dropdown.component.less'],
})
export class UiElementDropDownComponent extends UiElementBase implements UiElementBaseInterface {
- @Input()
- values: DropdownValue[]|string[];
+
+ @Input() values: DropdownValue[];
constructor() {
super();
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts b/catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts
index e5bdf1f557..b35d3ae3f4 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts
@@ -1,19 +1,19 @@
/**
* Created by rc2122 on 9/5/2017.
*/
-import {NgModule} from "@angular/core";
-import {BrowserModule} from "@angular/platform-browser";
-import {FormsModule, ReactiveFormsModule} from "@angular/forms";
-import {UiElementPopoverInputComponent} from "./popover-input/ui-element-popover-input.component";
-import {UiElementIntegerInputComponent} from "./integer-input/ui-element-integer-input.component";
-import {UiElementInputComponent} from "./input/ui-element-input.component";
-import {UiElementDropDownComponent} from "./dropdown/ui-element-dropdown.component";
-import {UiElementBase} from "./ui-element-base.component";
-import {CheckboxModule} from "./checkbox/checkbox.module";
-import {RadioButtonComponent} from "./radio-buttons/radio-buttons.component";
-import {PopoverModule} from "../popover/popover.module";
-import {TooltipModule} from "../tooltip/tooltip.module";
-
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+import { SdcUiComponentsModule } from 'onap-ui-angular/dist';
+import { PopoverModule } from '../popover/popover.module';
+import { TooltipModule } from '../tooltip/tooltip.module';
+import { CheckboxModule } from './checkbox/checkbox.module';
+import { UiElementDropDownComponent } from './dropdown/ui-element-dropdown.component';
+import { UiElementInputComponent } from './input/ui-element-input.component';
+import { UiElementIntegerInputComponent } from './integer-input/ui-element-integer-input.component';
+import { UiElementPopoverInputComponent } from './popover-input/ui-element-popover-input.component';
+import { RadioButtonComponent } from './radio-buttons/radio-buttons.component';
+import { UiElementBase } from './ui-element-base.component';
@NgModule({
imports: [
@@ -22,7 +22,8 @@ import {TooltipModule} from "../tooltip/tooltip.module";
PopoverModule,
ReactiveFormsModule,
TooltipModule,
- CheckboxModule],
+ CheckboxModule,
+ SdcUiComponentsModule],
declarations: [UiElementDropDownComponent,
UiElementInputComponent,
@@ -39,4 +40,4 @@ import {TooltipModule} from "../tooltip/tooltip.module";
TooltipModule,
CheckboxModule]
})
-export class FormElementsModule { } \ No newline at end of file
+export class FormElementsModule { }
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html
index 85089f12b8..f9cf17f087 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html
@@ -13,19 +13,18 @@
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->
-
-<input
- class="value-input"
- [ngClass]="{'error': control.invalid, 'disabled':readonly}"
- type="text"
- [name]="name"
- [(ngModel)]="value"
- (input)="onChange()"
- [attr.maxlength]="validation.propertyValue.max"
- [attr.minlength]="validation.propertyValue.min"
- [pattern]="pattern"
- [formControl]="control"
- tooltip="{{value}}"
- [readonly]="readonly"
- [attr.data-tests-id]="'value-' + testId"
- />
+<div sdc-tooltip [tooltip-text]="value">
+ <input
+ class="value-input"
+ [ngClass]="{'error': control.invalid, 'disabled':readonly}"
+ type="text"
+ [name]="name"
+ [(ngModel)]="value"
+ (input)="onChange()"
+ [attr.maxlength]="validation.propertyValue.max"
+ [attr.minlength]="validation.propertyValue.min"
+ [pattern]="pattern"
+ [formControl]="control"
+ [attr.data-tests-id]="'value-' + testId"
+ />
+</div> \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/forms/modal-forms.module.ts b/catalog-ui/src/app/ng2/components/ui/forms/modal-forms.module.ts
index 34404e50a5..b401778bc2 100644
--- a/catalog-ui/src/app/ng2/components/ui/forms/modal-forms.module.ts
+++ b/catalog-ui/src/app/ng2/components/ui/forms/modal-forms.module.ts
@@ -1,15 +1,11 @@
import { NgModule } from "@angular/core";
import { CommonModule } from '@angular/common';
-import { SdcUiComponentsModule } from "sdc-ui/lib/angular";
-import { ValueEditComponent } from './value-edit/value-edit.component';
+import { SdcUiComponentsModule } from "onap-ui-angular";
import { UnsavedChangesComponent } from "./unsaved-changes/unsaved-changes.component";
import { UiElementsModule } from "../ui-elements.module";
-
-
@NgModule({
declarations: [
- ValueEditComponent,
UnsavedChangesComponent
],
imports: [
@@ -17,7 +13,7 @@ import { UiElementsModule } from "../ui-elements.module";
SdcUiComponentsModule,
UiElementsModule
],
- exports: [ValueEditComponent, UnsavedChangesComponent],
+ exports: [UnsavedChangesComponent],
entryComponents: [ UnsavedChangesComponent
],
providers: []
diff --git a/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.html b/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.html
deleted file mode 100644
index 75ee2d520f..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<!--
- ~ Copyright (C) 2018 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.
- -->
-
-<div class="name-update-container">
- <sdc-input #updateNameInput
- label="Instance Name"
- required="true"
- [maxLength]="50"
- [(value)]="name"
- testId="instanceName"></sdc-input>
- <sdc-validation [validateElement]="updateNameInput" (validityChanged)="validityChanged($event)">
- <sdc-required-validator message="Name is required."></sdc-required-validator>
- <sdc-regex-validator message="Special characters not allowed." [pattern]="pattern"></sdc-regex-validator>
- </sdc-validation>
-</div> \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.less b/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.less
deleted file mode 100644
index b958ca17b7..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.less
+++ /dev/null
@@ -1,3 +0,0 @@
-.name-update-container {
- min-height: 90px;
-} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.ts b/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.ts
deleted file mode 100644
index 08bc0586c7..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Component, Input } from "@angular/core";
-
-@Component({
- selector: 'value-edit',
- templateUrl: './value-edit.component.html',
- styleUrls: ['./value-edit.component.less']
-})
-export class ValueEditComponent {
-
- @Input() name:String;
- @Input() validityChangedCallback: Function;
-
- private pattern:string = "^[\\s\\w\&_.:-]{1,1024}$"
- constructor(){
- }
-
- private validityChanged = (value):void => {
- if(this.validityChangedCallback) {
- this.validityChangedCallback(value);
- }
- }
-
-
-
-} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/loader/loader.component.html b/catalog-ui/src/app/ng2/components/ui/loader/loader.component.html
index bfb9e1b1ae..00083050d8 100644
--- a/catalog-ui/src/app/ng2/components/ui/loader/loader.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/loader/loader.component.html
@@ -14,7 +14,7 @@
~ limitations under the License.
-->
-<div *ngIf="isVisible" data-tests-id="tlv-loader" [ngClass]="relative ? 'loader-relative' : 'loader-fixed'"
+<div *ngIf="isVisible" data-tests-id="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>
diff --git a/catalog-ui/src/app/ng2/components/ui/loader/loader.component.ts b/catalog-ui/src/app/ng2/components/ui/loader/loader.component.ts
index 585c36660e..9658e6b65c 100644
--- a/catalog-ui/src/app/ng2/components/ui/loader/loader.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/loader/loader.component.ts
@@ -79,6 +79,13 @@ export class LoaderComponent {
width: (parentElement.offsetWidth !== undefined) ? parentElement.offsetWidth + "px" : undefined,
height: (parentElement.offsetHeight !== undefined) ? parentElement.offsetHeight + "px" : undefined
};
+ } else {
+ this.offset = {
+ left: '0px',
+ top: '0px',
+ width: '100%',
+ height: '100%'
+ }
}
this.isVisible = true;
}
diff --git a/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.ts b/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.ts
index 3820573e58..8b2006634e 100644
--- a/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.ts
@@ -1,5 +1,9 @@
/*-
+ * ============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
@@ -11,9 +15,9 @@
* 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 { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
diff --git a/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.ts b/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.ts
index 939599f0bc..290c8d06af 100644
--- a/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.ts
@@ -1,5 +1,9 @@
/*-
+ * ============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
@@ -11,9 +15,9 @@
* 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 { Component, Input, ContentChildren, SimpleChanges, QueryList } from '@angular/core';
import { MenuItemComponent } from "./menu-item.component";
import { Point } from "app/models";
diff --git a/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.ts b/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.ts
index 1d05b27d68..ab367529d8 100644
--- a/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.ts
@@ -1,9 +1,9 @@
/**
* Created by ob0695 on 11.04.2018.
*/
-import {Component, Input} from "@angular/core";
-import {UiBaseObject} from "../../../../../models/ui-models/ui-base-object";
-import {IDropDownOption} from "sdc-ui/lib/angular/form-elements/dropdown/dropdown-models";
+import { Component, Input } from "@angular/core";
+import { UiBaseObject } from "../../../../../models/ui-models/ui-base-object";
+import { IDropDownOption } from "onap-ui-angular/dist/form-elements/dropdown/dropdown-models";
@Component({
selector: 'add-elements',
diff --git a/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.module.ts b/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.module.ts
index a1c34f5686..70ad0a389c 100644
--- a/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.module.ts
+++ b/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.module.ts
@@ -1,14 +1,11 @@
/**
* Created by ob0695 on 11.04.2018.
*/
-import {NgModule} from "@angular/core";
-import {SdcUiComponentsModule} from "sdc-ui/lib/angular/index";
-import {AddElementsComponent} from "./add-elements.component";
-import {CommonModule} from "@angular/common";
+import { NgModule } from "@angular/core";
+import { SdcUiComponentsModule } from "onap-ui-angular";
+import { AddElementsComponent } from "./add-elements.component";
+import { CommonModule } from "@angular/common";
-/**
- * Created by ob0695 on 9.04.2018.
- */
@NgModule({
declarations: [
AddElementsComponent
diff --git a/catalog-ui/src/app/ng2/components/ui/modal/modal.component.ts b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.ts
index 777e9bdc06..2432c3bb37 100644
--- a/catalog-ui/src/app/ng2/components/ui/modal/modal.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.ts
@@ -36,7 +36,7 @@ export class ModalComponent implements OnInit, OnDestroy {
@Input() isMovable: boolean;
@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.
+ @ViewChild('dynamicContentContainer', { read: ViewContainerRef }) dynamicContentContainer: ViewContainerRef; //Allows for custom component as body instead of simple message. See ModalService.createActionModal for implementation details, and HttpHelperService's catchError() for example.
private modalElement: JQuery;
constructor( el: ElementRef ) {
diff --git a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.ts b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.ts
index 9219a30738..1986e34914 100644
--- a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.ts
@@ -20,10 +20,8 @@
* limitations under the License.
* ============LICENSE_END=========================================================
*/
-import {
- Component, ElementRef, forwardRef, Inject, Input, trigger, state, style,
- transition, animate, ViewChild, ViewContainerRef, ComponentRef
-} from "@angular/core";
+import { Component, ElementRef, forwardRef, Inject, Input, ViewChild, ViewContainerRef, ComponentRef} from "@angular/core";
+import {trigger, state, style, transition, animate} from '@angular/animations';
import {StepModel} from "app/models";
import {ModalService} from "../../../services/modal.service";
import {ModalComponent} from "../modal/modal.component";
diff --git a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.module.ts b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.module.ts
index 3db217d282..81a90b8a9b 100644
--- a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.module.ts
+++ b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.module.ts
@@ -4,7 +4,7 @@
import { NgModule } from "@angular/core";
import {MultiStepsWizardComponent} from "./multi-steps-wizard.component";
import {CommonModule} from "@angular/common";
-import {ConnectionWizardModule} from "../../../pages/connection-wizard/connection-wizard.module";
+import {ConnectionWizardModule} from "app/ng2/pages/composition/graph/connection-wizard/connection-wizard.module";
@NgModule({
declarations: [
diff --git a/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.html b/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.html
deleted file mode 100644
index efd619687c..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!--
- ~ Copyright (C) 2018 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.
- -->
-
-<div class="palette-animation-wrapper" [style.top]="from.y + 50 + 'px'" [style.left]="from.x + 'px'" [style.transform]="transformStyle" [class.hidden]="!visible"
- (transitionend)="animationComplete()">
-<div class="medium small sprite-resource-icons sprite-{{iconName}}-icons {{iconName}}" ></div>
-</div>
diff --git a/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.less b/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.less
deleted file mode 100644
index 54f04189c0..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.less
+++ /dev/null
@@ -1,5 +0,0 @@
-.palette-animation-wrapper{
- position: absolute;
- z-index: 100;
- transition: all 2s ease-in-out;
-} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.ts b/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.ts
deleted file mode 100644
index 7e45b9e55b..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.ts
+++ /dev/null
@@ -1,71 +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 {Component, Input } from '@angular/core';
-import {BrowserModule} from '@angular/platform-browser';
-import { setTimeout } from 'core-js/library/web/timers';
-import { EventListenerService } from 'app/services';
-import { GRAPH_EVENTS } from 'app/utils';
-import { Point } from 'app/models';
-import { ZoneInstanceType, ZoneInstance } from '../../../../models/graph/zones/zone-instance';
-
-
-
-@Component({
- selector: 'palette-animation',
- templateUrl: './palette-animation.component.html',
- styleUrls:['./palette-animation.component.less'],
-})
-
-export class PaletteAnimationComponent {
-
- @Input() from : Point;
- @Input() to : Point;
- @Input() type: ZoneInstanceType;
- @Input() iconName : string;
- @Input() zoneInstance : ZoneInstance;
-
- public animation;
- private visible:boolean = false;
- private transformStyle:string = "";
-
-
- constructor(private eventListenerService:EventListenerService) {}
-
-
- ngOnDestroy(){
- this.zoneInstance.hidden = false; //if animation component is destroyed before animation is complete
- }
-
- public runAnimation() {
- this.visible = true;
- let positionDiff:Point = new Point(this.to.x - this.from.x, this.to.y - this.from.y);
- setTimeout(()=>{
- this.transformStyle = 'translate('+ positionDiff.x + 'px,' + positionDiff.y +'px)';
- }, 0);
- };
-
- public animationComplete = (e) => {
- this.visible = false;
- this.zoneInstance.hidden = false;
- };
-
-
-}
diff --git a/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.module.ts b/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.module.ts
deleted file mode 100644
index 8674571138..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.module.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { NgModule } from "@angular/core";
-import { CommonModule } from "@angular/common";
-import { PaletteAnimationComponent } from "./palette-animation.component";
-
-
-@NgModule({
- declarations: [
- PaletteAnimationComponent
- ],
- imports: [ CommonModule ],
- exports: [ PaletteAnimationComponent ]
-})
-
-export class PaletteAnimationModule {
-
-} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.html b/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.html
deleted file mode 100644
index 11261e95b4..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<!--
- ~ Copyright (C) 2018 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.
- -->
-
-<div class="popup-panel" [ngClass]="{'hide':!isShowPanel}" [style.left]="popupPanelPosition.x + 'px'" [style.top]="popupPanelPosition.y + 'px'"
- (mousedown)="addZoneInstance()"
- (mouseenter)="onMouseEnter()"
- (mouseleave)="onMouseLeave()">
- <div class="popup-panel-group">
- <div class="popup-panel-plus">+</div>
- <div class="popup-panel-title">{{panelTitle}}</div>
- </div>
-</div>
diff --git a/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.less b/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.less
deleted file mode 100644
index 24f0485e76..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.less
+++ /dev/null
@@ -1,37 +0,0 @@
-.popup-panel {
- position: absolute;
- display: inline-block;
- background-color: white;
- border: solid 1px #d2d2d2;
- border-top: solid 3px #13a7df;
- left: 208px; top: 0px;
- width: 140px;
- height: 40px;
- z-index: 10000;
-
- &:hover {
- background-color: whitesmoke;
- }
-
- .popup-panel-group {
- padding-left: 8px;
- padding-top: 8px;
- cursor: pointer;
-
- .popup-panel-plus {
- border-radius: 50%;
- color: white;
- background-color: #13a7df;
- width: 20px;
- text-align: center;
- display: inline-block;
- }
-
- .popup-panel-title {
- padding-left: 10px;
- display: inline-block;
- }
-
- }
-
-}
diff --git a/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.ts b/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.ts
deleted file mode 100644
index a10ca7dc81..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import {Component, OnInit} from '@angular/core';
-import {GRAPH_EVENTS} from "app/utils";
-import {LeftPaletteComponent, Point} from "app/models";
-import {EventListenerService} from "app/services";
-import {LeftPaletteMetadataTypes} from "../../../../models/components/displayComponent";
-
-@Component({
- selector: 'app-palette-popup-panel',
- templateUrl: './palette-popup-panel.component.html',
- styleUrls: [ './palette-popup-panel.component.less' ],
-})
-export class PalettePopupPanelComponent implements OnInit {
-
- public panelTitle: string;
- public isShowPanel: boolean;
- private component: Component;
- private displayComponent: LeftPaletteComponent;
- private popupPanelPosition:Point = new Point(0,0);
-
- constructor(private eventListenerService: EventListenerService) {
- this.isShowPanel = false;
- }
-
- ngOnInit() {
- this.registerObserverCallbacks();
- }
-
- public onMouseEnter() {
- this.isShowPanel = true;
- }
-
- public onMouseLeave() {
- this.isShowPanel = false;
- }
-
- public addZoneInstance(): void {
- if(this.displayComponent) {
- this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_ADD_ZONE_INSTANCE_FROM_PALETTE, this.component, this.displayComponent, this.popupPanelPosition);
- this.hidePopupPanel();
- }
- }
-
- private registerObserverCallbacks() {
-
- this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_SHOW_POPUP_PANEL,
- (component: Component, displayComponent: LeftPaletteComponent, sectionElem: HTMLElement) => {
-
- this.component = component;
- this.showPopupPanel(displayComponent, sectionElem);
- });
-
- this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HIDE_POPUP_PANEL, () => this.hidePopupPanel());
- }
-
- private getPopupPanelPosition (sectionElem: HTMLElement):Point {
- let pos: ClientRect = sectionElem.getBoundingClientRect();
- let offsetX: number = -30;
- const offsetY: number = pos.height / 2;
- return new Point((pos.right + offsetX), (pos.top - offsetY + window.pageYOffset));
- };
-
- private setPopupPanelTitle(component: LeftPaletteComponent): void {
- if (component.categoryType === LeftPaletteMetadataTypes.Group) {
- this.panelTitle = "Add Group";
- return;
- }
-
- if (component.categoryType === LeftPaletteMetadataTypes.Policy) {
- this.panelTitle = "Add Policy";
- return;
- }
- }
-
- private showPopupPanel(displayComponent:LeftPaletteComponent, sectionElem: HTMLElement) {
- if(!this.isShowPanel){
- this.displayComponent = displayComponent;
- this.setPopupPanelTitle(displayComponent);
- this.popupPanelPosition = this.getPopupPanelPosition(sectionElem);
- this.isShowPanel = true;
- }
- };
-
- private hidePopupPanel() {
- if(this.isShowPanel){
- this.isShowPanel = false;
- }
- };
-}
diff --git a/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.html b/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.html
new file mode 100644
index 0000000000..277702e336
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.html
@@ -0,0 +1,11 @@
+<div class="w-sdc-designer-sidebar-toggle" [class.active]="(withSidebar$ | async)" (click)="toggleSidebarDisplay()">
+ <div class="w-sdc-designer-sidebar-toggle-icon sprite-new pointer menu-open-left"></div>
+</div>
+
+<div class="w-sdc-designer-sidebar">
+ <ng-content></ng-content>
+</div>
+
+
+
+
diff --git a/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.less b/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.less
new file mode 100644
index 0000000000..cacb85d6b1
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.less
@@ -0,0 +1,55 @@
+@import '../../../../../assets/styles/variables';
+
+.w-sdc-designer-sidebar {
+ background-color:@main_color_p ;
+ font-family: @font-opensans-regular;
+ font-size: 13px;
+ color: #191919;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ bottom: 0;
+ position: fixed;
+ right: -302px;
+ width: 302px;
+ top: 103px;
+ transition: right 0.2s;
+ z-index: 1010;
+ box-shadow: -7px -3px 6px -8px @main_color_n;
+}
+
+.w-sdc-designer-sidebar-toggle {
+ background-color: @main_color_p;
+ border-left: 1px solid @main_color_o;
+ border-bottom: 1px solid @main_color_o;
+ height: 21px;
+ position: absolute;
+ right: 0;
+ top: 53px;
+ width: 17px;
+ transition: right 0.2s;
+ z-index: 1005;
+ box-shadow: -1px 1px 3px 0 @main_color_n;
+ cursor: pointer;
+
+ &.active {
+ right: 302px;
+ .w-sdc-designer-sidebar-toggle-icon{
+ transform: rotate(180deg);
+ }
+ }
+}
+
+.w-sdc-designer-sidebar-toggle-icon {
+ margin-left: 6px;
+ margin-top: 6px;
+}
+
+.w-sdc-designer-sidebar-toggle.active + .w-sdc-designer-sidebar {
+ right: 0;
+ display: flex;
+ flex-direction: column;
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.ts b/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.ts
new file mode 100644
index 0000000000..e9c4a7d354
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.ts
@@ -0,0 +1,25 @@
+import {Component} from "@angular/core";
+import {Select, Store} from "@ngxs/store";
+import {Subscription} from "rxjs/Subscription";
+import {GraphState} from "../../../pages/composition/common/store/graph.state";
+import {OnSidebarOpenOrCloseAction} from "../../../pages/composition/common/store/graph.actions";
+
+@Component({
+ selector: 'panel-wrapper-component',
+ templateUrl: './panel-wrapper.component.html',
+ styleUrls: ['./panel-wrapper.component.less']
+})
+export class PanelWrapperComponent {
+ @Select(GraphState.withSidebar) withSidebar$: boolean;
+
+ tabs: Array<any>;
+ subscription: Subscription;
+
+ constructor(public store: Store) {
+ }
+
+ private toggleSidebarDisplay = () => {
+ // this.withSidebar = !this.withSidebar;
+ this.store.dispatch(new OnSidebarOpenOrCloseAction());
+ }
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/perfect-scroll-bar/perfect-scrollbar.directive.ts b/catalog-ui/src/app/ng2/components/ui/perfect-scroll-bar/perfect-scrollbar.directive.ts
new file mode 100644
index 0000000000..ccc1e2181e
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/perfect-scroll-bar/perfect-scrollbar.directive.ts
@@ -0,0 +1,51 @@
+import {Directive, Input, ElementRef} from '@angular/core';
+import * as PerfectScrollbar from 'perfect-scrollbar';
+
+interface IPerfectScrollbarOptions {
+ wheelSpeed?: number;
+ wheelPropagation?: boolean;
+ minScrollbarLength?: number;
+ useBothWheelAxes?: boolean;
+ useKeyboard?: boolean;
+ suppressScrollX?: boolean;
+ suppressScrollY?: boolean;
+ scrollXMarginOffset?: number;
+ scrollYMarginOffset?: number;
+ includePadding?: boolean;
+}
+
+@Directive({
+ selector: '[perfectScrollbar]'
+})
+export class PerfectScrollbarDirective {
+ @Input() public perfectScrollbarOptions: IPerfectScrollbarOptions;
+
+ private psOptions: IPerfectScrollbarOptions;
+ private updatingPS: boolean;
+
+ constructor(public elemRef:ElementRef) {
+ console.log('PSbar: Constructor');
+ this.psOptions = Object.assign({}, this.perfectScrollbarOptions);
+ this.updatingPS = false;
+ }
+
+ public ngOnInit() {
+ console.log('PSbar: Initializing');
+ PerfectScrollbar.initialize(this.elemRef.nativeElement, this.psOptions);
+ }
+
+ public ngAfterContentChecked() {
+ // update perfect-scrollbar after content is checked (updated) - bounced
+ if (!this.updatingPS) {
+ this.updatingPS = true;
+ setTimeout(() => {
+ this.updatingPS = false;
+ PerfectScrollbar.update(this.elemRef.nativeElement);
+ }, 100);
+ }
+ }
+
+ public ngOnDestroy() {
+ PerfectScrollbar.destroy(this.elemRef.nativeElement);
+ }
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.html b/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.html
index cce1c40765..5294c67e31 100644
--- a/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.html
@@ -17,6 +17,7 @@
<div class="plugin-frame">
<div class="w-sdc-main-container">
<iframe *ngIf="plugin.isOnline" class="plugin-iframe" [src]="pluginUrl | safeUrlSanitizer"></iframe>
- <plugin-not-connected [pluginName]="plugin.pluginId" *ngIf="!plugin.isOnline && isPluginCheckDone"></plugin-not-connected>
+ <plugin-not-connected [pluginName]="plugin.pluginId"
+ *ngIf="!plugin.isOnline && isPluginCheckDone"></plugin-not-connected>
</div>
</div>
diff --git a/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.ts b/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.ts
index d70c448984..d94f24da28 100644
--- a/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.ts
@@ -38,8 +38,7 @@ export class PluginFrameComponent implements OnInit {
} else {
this.onLoadingDone.emit();
}
- })
-
+ });
}
private initPlugin() {
diff --git a/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.html b/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.html
index 88906d96fa..9a280e169d 100644
--- a/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.html
@@ -19,7 +19,7 @@
[style.left]="left + 'px'"
[class.in]="isIn"
[class.fade]="animation"
- style="display: block"
+ [style.display] = "displayType"
role="popover"
[ngClass]="{'hide-arrow':hideArrow}">
<div [hidden]="!closeOnMouseOutside" class="virtual-area"></div>
@@ -29,13 +29,11 @@
<span class="close-button" (click)="popover.hide()"></span>
</div>
<ng-content></ng-content>
- <div class="popover-footer">
+ <div class="popover-footer" *ngIf="buttons">
<button *ngFor="let buttonName of buttonsNames"
- class="tlv-btn {{buttons[buttonName].cssClass}}"
+ class="tlv-btn {{buttons[buttonName].cssClass}}"
[attr.data-tests-id]="'filter-' + buttons[buttonName].text.toLowerCase() + '-button'"
[disabled] = "buttons[buttonName].getDisabled && buttons[buttonName].getDisabled()"
(click) = "buttons[buttonName].callback()">{{buttons[buttonName].text}}</button>
</div>
</div>
-
-
diff --git a/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.ts b/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.ts
index 6eb36287d0..bea592d2a6 100644
--- a/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.ts
@@ -7,9 +7,9 @@
* 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.
@@ -18,25 +18,25 @@
* ============LICENSE_END=========================================================
*/
-import {Component, Input, Output, AfterViewInit, ElementRef, ChangeDetectorRef, OnDestroy, ViewChild, EventEmitter, Renderer } from "@angular/core";
-import {ButtonsModelMap} from "app/models";
-import {PopoverComponent} from "./popover.component";
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnDestroy, Output, Renderer, ViewChild } from '@angular/core';
+import { ButtonsModelMap } from 'app/models';
+import { PopoverComponent } from './popover.component';
@Component({
- selector: "popover-content",
- templateUrl:'./popover-content.component.html',
- styleUrls:['popover-content.component.less']
+ selector: 'popover-content',
+ templateUrl: './popover-content.component.html',
+ styleUrls: ['popover-content.component.less']
})
export class PopoverContentComponent implements AfterViewInit, OnDestroy {
@Input() public title: string;
- @Input() public buttons:ButtonsModelMap;
+ @Input() public buttons: ButtonsModelMap;
@Input()
content: string;
@Input()
- placement: "top"|"bottom"|"left"|"right"|"auto"|"auto top"|"auto bottom"|"auto left"|"auto right" = "bottom";
+ placement: 'top'|'bottom'|'left'|'right'|'auto'|'auto top'|'auto bottom'|'auto left'|'auto right' = 'bottom';
@Input()
animation: boolean = true;
@@ -50,52 +50,56 @@ export class PopoverContentComponent implements AfterViewInit, OnDestroy {
@Input()
hideArrow: boolean = false;
- @ViewChild("popoverDiv")
+ @ViewChild('popoverDiv')
popoverDiv: ElementRef;
- buttonsNames:Array<string>;
+ buttonsNames: string[];
popover: PopoverComponent;
onCloseFromOutside = new EventEmitter();
- top: number = -10000;
- left: number = -10000;
+ top: number = 250;
+ left: number = 300;
isIn: boolean = false;
- displayType: string = "none";
+ displayType: string = 'none';
effectivePlacement: string;
- onDocumentMouseDown = (event: any) => {
- const element = this.element.nativeElement;
- if (!element || !this.popover) return;
- if (element.contains(event.target) || this.popover.getElement().contains(event.target)) return;
- this.hide();
- this.onCloseFromOutside.emit(undefined);
- };
-
+ listenClickFunc: any;
+ listenMouseFunc: any;
constructor(protected element: ElementRef,
protected cdr: ChangeDetectorRef,
protected renderer: Renderer) {
}
- listenClickFunc: any;
- listenMouseFunc: any;
+ onDocumentMouseDown = (event: any) => {
+ const element = this.element.nativeElement;
+ if (!element || !this.popover) { return; }
+ if (element.contains(event.target) || this.popover.getElement().contains(event.target)) { return; }
+ this.hide();
+ this.onCloseFromOutside.emit(undefined);
+ }
ngAfterViewInit(): void {
- this.buttonsNames = Object.keys(this.buttons);
- if (this.closeOnClickOutside)
- this.listenClickFunc = this.renderer.listenGlobal("document", "mousedown", (event: any) => this.onDocumentMouseDown(event));
- if (this.closeOnMouseOutside)
- this.listenMouseFunc = this.renderer.listenGlobal("document", "mouseover", (event: any) => this.onDocumentMouseDown(event));
+ if ( this.buttons ) {
+ this.buttonsNames = Object.keys(this.buttons);
+ }
+ if (this.closeOnClickOutside) {
+ this.listenClickFunc = this.renderer.listenGlobal('document', 'mousedown', (event: any) => this.onDocumentMouseDown(event));
+ }
+ if (this.closeOnMouseOutside) {
+ this.listenMouseFunc = this.renderer.listenGlobal('document', 'mouseover', (event: any) => this.onDocumentMouseDown(event));
+ }
- this.show();
this.cdr.detectChanges();
}
ngOnDestroy() {
- if (this.closeOnClickOutside)
+ if (this.closeOnClickOutside) {
this.listenClickFunc();
- if (this.closeOnMouseOutside)
+ }
+ if (this.closeOnMouseOutside) {
this.listenMouseFunc();
+ }
}
// -------------------------------------------------------------------------
@@ -103,11 +107,12 @@ export class PopoverContentComponent implements AfterViewInit, OnDestroy {
// -------------------------------------------------------------------------
show(): void {
- if (!this.popover || !this.popover.getElement())
+ if (!this.popover || !this.popover.getElement()) {
return;
+ }
const p = this.positionElements(this.popover.getElement(), this.popoverDiv.nativeElement, this.placement);
- this.displayType = "block";
+ this.displayType = 'block';
this.top = p.top;
this.left = p.left;
this.isIn = true;
@@ -121,8 +126,7 @@ export class PopoverContentComponent implements AfterViewInit, OnDestroy {
}
hideFromPopover() {
- this.top = -10000;
- this.left = -10000;
+ this.displayType = 'none';
this.isIn = true;
}
@@ -131,56 +135,56 @@ export class PopoverContentComponent implements AfterViewInit, OnDestroy {
// -------------------------------------------------------------------------
protected positionElements(hostEl: HTMLElement, targetEl: HTMLElement, positionStr: string, appendToBody: boolean = false): { top: number, left: number } {
- let positionStrParts = positionStr.split("-");
+ const positionStrParts = positionStr.split('-');
let pos0 = positionStrParts[0];
- let pos1 = positionStrParts[1] || "center";
- let hostElPos = appendToBody ? this.offset(hostEl) : this.position(hostEl);
- let targetElWidth = targetEl.offsetWidth;
- let targetElHeight = targetEl.offsetHeight;
+ const pos1 = positionStrParts[1] || 'center';
+ const hostElPos = appendToBody ? this.offset(hostEl) : this.position(hostEl);
+ const targetElWidth = targetEl.offsetWidth;
+ const targetElHeight = targetEl.offsetHeight;
this.effectivePlacement = pos0 = this.getEffectivePlacement(pos0, hostEl, targetEl);
- let shiftWidth: any = {
- center: function (): number {
+ const shiftWidth: any = {
+ center(): number {
return hostElPos.left + hostElPos.width / 2 - targetElWidth / 2;
},
- left: function (): number {
+ left(): number {
return hostElPos.left;
},
- right: function (): number {
+ right(): number {
return hostElPos.left + hostElPos.width - targetElWidth;
}
};
- let shiftHeight: any = {
- center: function (): number {
+ const shiftHeight: any = {
+ center(): number {
return hostElPos.top + hostElPos.height / 2 - targetElHeight / 2;
},
- top: function (): number {
+ top(): number {
return hostElPos.top;
},
- bottom: function (): number {
+ bottom(): number {
return hostElPos.top + hostElPos.height - targetElHeight;
}
};
let targetElPos: { top: number, left: number };
switch (pos0) {
- case "right":
+ case 'right':
targetElPos = {
top: shiftHeight[pos1](),
left: hostElPos.left + hostElPos.width
};
break;
- case "left":
+ case 'left':
targetElPos = {
top: shiftHeight[pos1](),
left: hostElPos.left - targetElWidth
};
break;
- case "bottom":
+ case 'bottom':
targetElPos = {
top: hostElPos.top + hostElPos.height,
left: shiftWidth[pos1]()
@@ -228,18 +232,20 @@ export class PopoverContentComponent implements AfterViewInit, OnDestroy {
}
protected getStyle(nativeEl: HTMLElement, cssProp: string): string {
- if ((nativeEl as any).currentStyle) // IE
+ if ((nativeEl as any).currentStyle) { // IE
return (nativeEl as any).currentStyle[cssProp];
+ }
- if (window.getComputedStyle)
+ if (window.getComputedStyle) {
return (window.getComputedStyle as any)(nativeEl)[cssProp];
+ }
// finally try and get inline style
return (nativeEl.style as any)[cssProp];
}
protected isStaticPositioned(nativeEl: HTMLElement): boolean {
- return (this.getStyle(nativeEl, "position") || "static" ) === "static";
+ return (this.getStyle(nativeEl, 'position') || 'static' ) === 'static';
}
protected parentOffsetEl(nativeEl: HTMLElement): any {
@@ -251,26 +257,26 @@ export class PopoverContentComponent implements AfterViewInit, OnDestroy {
}
protected getEffectivePlacement(placement: string, hostElement: HTMLElement, targetElement: HTMLElement): string {
- const placementParts = placement.split(" ");
- if (placementParts[0] !== "auto") {
+ const placementParts = placement.split(' ');
+ if (placementParts[0] !== 'auto') {
return placement;
}
const hostElBoundingRect = hostElement.getBoundingClientRect();
- const desiredPlacement = placementParts[1] || "bottom";
+ const desiredPlacement = placementParts[1] || 'bottom';
- if (desiredPlacement === "top" && hostElBoundingRect.top - targetElement.offsetHeight < 0) {
- return "bottom";
+ if (desiredPlacement === 'top' && hostElBoundingRect.top - targetElement.offsetHeight < 0) {
+ return 'bottom';
}
- if (desiredPlacement === "bottom" && hostElBoundingRect.bottom + targetElement.offsetHeight > window.innerHeight) {
- return "top";
+ if (desiredPlacement === 'bottom' && hostElBoundingRect.bottom + targetElement.offsetHeight > window.innerHeight) {
+ return 'top';
}
- if (desiredPlacement === "left" && hostElBoundingRect.left - targetElement.offsetWidth < 0) {
- return "right";
+ if (desiredPlacement === 'left' && hostElBoundingRect.left - targetElement.offsetWidth < 0) {
+ return 'right';
}
- if (desiredPlacement === "right" && hostElBoundingRect.right + targetElement.offsetWidth > window.innerWidth) {
- return "left";
+ if (desiredPlacement === 'right' && hostElBoundingRect.right + targetElement.offsetWidth > window.innerWidth) {
+ return 'left';
}
return desiredPlacement;
diff --git a/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.html b/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.html
new file mode 100644
index 0000000000..fba99ca8b5
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.html
@@ -0,0 +1,12 @@
+<div class="sdc-element-icon">
+ <svg-icon [ngClass]="{'service-proxy': elementType === 'ServiceProxy'}"
+ [type]="elementIcon.type"
+ [name]="elementIcon.iconName"
+ [mode]="elementIcon.color"
+ [size]="elementIcon.size"
+ [backgroundShape]="elementIcon.shape"
+ [backgroundColor]="elementIcon.backgroundColor"></svg-icon>
+ <span *ngIf="uncertified" class="uncertified-icon-wapper">
+ <svg-icon class="element-non-certified" [name]="'alert-circle'" [mode]="'error'"></svg-icon>
+ </span>
+</div>
diff --git a/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.less b/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.less
new file mode 100644
index 0000000000..7fd5cbd53e
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.less
@@ -0,0 +1,25 @@
+@import "./../../../../../assets/styles/override";
+.service-proxy {
+ /deep/.svg-icon.bg-type-circle {
+ border: 2px solid @sdcui_color_blue;
+ }
+}
+
+.element-non-certified {
+ position: absolute;
+ top: 0.4px;
+ left: 0.4px;
+}
+.sdc-element-icon {
+ position: relative;
+}
+
+.uncertified-icon-wapper{
+ height: 17px;
+ width: 17px;
+ background-color: white;
+ border-radius: 50%;
+ position: absolute;
+ top: -2px;
+ left: -1px;
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.ts b/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.ts
new file mode 100644
index 0000000000..baadbd8e02
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.ts
@@ -0,0 +1,69 @@
+import {Component, Input, OnInit} from "@angular/core";
+import {ComponentType, SdcElementType, ResourceType} from "../../../../utils/constants";
+
+
+export class ElementIcon {
+ iconName: string;
+ color: string;
+ backgroundColor: string;
+ type: string
+ shape: string;
+ size: string;
+
+ constructor(name?: string, type?:string, backgroundColor?:string, color?:string, shape?: string, size?:string) {
+ this.iconName = name || 'default';
+ this.type = type || 'resource_24';
+ this.backgroundColor = backgroundColor || 'primary';
+ this.color = color || "white";
+ this.shape = shape || "circle";
+ this.size = size || "x_large";
+ }
+}
+
+@Component({
+ selector: 'sdc-element-icon',
+ templateUrl: './sdc-element-icon.component.html',
+ styleUrls: ['./sdc-element-icon.component.less']
+})
+export class SdcElementIconComponent {
+
+ @Input() iconName: string;
+ @Input() elementType: string;
+ @Input() uncertified: boolean = false;
+
+ public elementIcon;
+
+ private createIconForDisplay = () => {
+ switch (this.elementType) {
+
+ case ComponentType.SERVICE:
+ this.elementIcon = new ElementIcon(this.iconName, "services_24", "lightBlue");
+ break;
+ case ComponentType.SERVICE_PROXY:
+ this.elementIcon = new ElementIcon(this.iconName, "services_24", "white", "primary");
+ break;
+ case ResourceType.CONFIGURATION:
+ this.elementIcon = new ElementIcon(this.iconName, "resources_24", "purple", "white", 'circle', "medium");
+ break;
+ case SdcElementType.GROUP:
+ this.elementIcon = new ElementIcon("group", "resources_24", "blue", 'white', 'rectangle');
+ break;
+ case SdcElementType.POLICY:
+ this.elementIcon = new ElementIcon("policy", "resources_24", "darkBlue2", 'white', 'rectangle');
+ break;
+ case ResourceType.CP:
+ case ResourceType.VL:
+ this.elementIcon = new ElementIcon(this.iconName, "resources_24", "purple", '', '', 'medium');
+ break;
+ default:
+ this.elementIcon = new ElementIcon(this.iconName, "resources_24", "purple");
+ }
+ }
+
+ ngOnChanges():void {
+ this.createIconForDisplay();
+ }
+}
+
+
+
diff --git a/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.html b/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.html
index 8682473d14..1f952c46f5 100644
--- a/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.html
@@ -1,21 +1,5 @@
-<!--
- ~ Copyright (C) 2018 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.
- -->
-
-<div class="search-bar-container {{class}}">
- <input class="search-bar-input" type="text" [placeholder]="placeholder" [(ngModel)]="searchQuery" (ngModelChange)="searchQueryChange($event)"/>
- <span class="clear-search-x" *ngIf="searchQuery" (click)="clearSearchQuery()">x</span>
- <button class="search-bar-button" (click)="searchButtonClick()"></button>
+<div class="sdc-search-bar-container {{class}}">
+ <input class="sdc-search-bar-input" type="text" [placeholder]="placeholder" [(ngModel)]="searchQuery" (ngModelChange)="searchQueryChange($event)"/>
+ <span class="sdc-clear-search-x" *ngIf="searchQuery" (click)="clearSearchQuery()">x</span>
+ <button class="sdc-search-bar-button" (click)="searchButtonClick()"></button>
</div> \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.less b/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.less
index 751fceec35..c09951a284 100644
--- a/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.less
@@ -1,9 +1,9 @@
-.search-bar-container {
+.sdc-search-bar-container {
display:flex;
border-radius: 4px;
box-shadow: 0px 2px 3.88px 0.12px rgba(0, 0, 0, 0.29);
- .search-bar-input {
+ .sdc-search-bar-input {
border: 1px solid #cdcdcd;
border-radius: 4px;
border-right:none;
@@ -14,9 +14,11 @@
color: #5a5a5a;
font-size: 1em;
font-style: italic;
+
+
}
- .clear-search-x {
+ .sdc-clear-search-x {
position:absolute;
right:40px;
top:5px;
@@ -29,7 +31,7 @@
}
}
- .search-bar-button {
+ .sdc-search-bar-button {
background: url('../../../../../assets/styles/images/sprites/sprite-global.png') no-repeat -206px -1275px;
background-color: rgba(234, 234, 234, 0.88);
width: 30px;
diff --git a/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.html b/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.html
index 82dbbf33d3..da9b2c9e24 100644
--- a/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.html
@@ -14,9 +14,9 @@
~ limitations under the License.
-->
-<div class="search-with-autocomplete-container {{searchBarClass}}" [class.autocomplete-visible]="autoCompleteValues && autoCompleteValues.length" [class.active]="searchQuery && searchQuery.length">
+<div class="sdc-search-with-autocomplete-container {{searchBarClass}}" [class.sdc-autocomplete-visible]="autoCompleteValues && autoCompleteValues.length" [class.active]="searchQuery && searchQuery.length">
<search-bar [placeholder]="searchPlaceholder" [searchQuery]="searchQuery" (searchButtonClicked)="updateSearch($event)" (searchChanged)="searchChange($event)"></search-bar>
- <div class="autocomplete-results">
- <div *ngFor="let item of autoCompleteValues" class="autocomplete-result-item" (click)="updateSearch(item)">{{item}}</div>
+ <div class="sdc-autocomplete-results">
+ <div *ngFor="let item of autoCompleteValues" class="sdc-autocomplete-result-item" (click)="updateSearch(item)">{{item}}</div>
</div>
</div> \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.less b/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.less
index f1830846d3..9cd312adcb 100644
--- a/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.less
@@ -1,13 +1,13 @@
-.search-with-autocomplete-container{
- &.autocomplete-visible {
+.sdc-search-with-autocomplete-container{
+ &.sdc-autocomplete-visible {
- .search-bar-input {
+ .sdc-search-bar-input {
border-bottom-left-radius: 0;
}
- .search-bar-button {
+ .sdc-search-bar-button {
border-bottom-right-radius: 0;
}
- .autocomplete-results {
+ .sdc-autocomplete-results {
border: solid 1px #d2d2d2;
border-top:none;
border-bottom-left-radius: 4px;
@@ -20,7 +20,7 @@
overflow-y: scroll;
}
- .autocomplete-result-item {
+ .sdc-autocomplete-result-item {
color:#5a5a5a;
padding: 5px 0;
cursor:pointer;
diff --git a/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.ts b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.ts
index f4b410347b..cabac121f7 100644
--- a/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.ts
@@ -21,7 +21,7 @@
import { Component, ContentChildren, QueryList, AfterContentInit, Input, Output, EventEmitter } from '@angular/core';
import { Tab } from './tab/tab.component';
import { ViewEncapsulation } from '@angular/core';
-import { trigger, state, style, transition, animate, keyframes } from '@angular/core';
+import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';
export {Tab};
diff --git a/catalog-ui/src/app/ng2/components/ui/tile/tile.module.ts b/catalog-ui/src/app/ng2/components/ui/tile/sdc-tile.module.ts
index 55b34400d6..5dec67e495 100644
--- a/catalog-ui/src/app/ng2/components/ui/tile/tile.module.ts
+++ b/catalog-ui/src/app/ng2/components/ui/tile/sdc-tile.module.ts
@@ -3,13 +3,13 @@ import { BrowserModule } from '@angular/platform-browser';
import { TileComponent } from './tile.component';
import { GlobalPipesModule } from "../../../pipes/global-pipes.module";
import { TooltipModule } from "../tooltip/tooltip.module";
-import {MultilineEllipsisModule} from "../../../shared/multiline-ellipsis/multiline-ellipsis.module";
+import {SdcUiComponentsModule} from "onap-ui-angular";
@NgModule({
- imports: [BrowserModule, GlobalPipesModule, TooltipModule, MultilineEllipsisModule],
+ imports: [BrowserModule, GlobalPipesModule, SdcUiComponentsModule, TooltipModule],
declarations: [TileComponent],
exports: [TileComponent],
entryComponents: [TileComponent]
})
-export class TileModule { }
+export class SdcTileModule { }
diff --git a/catalog-ui/src/app/ng2/components/ui/tile/tile.component.html b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.html
index 018384db1f..239053e9f8 100644
--- a/catalog-ui/src/app/ng2/components/ui/tile/tile.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.html
@@ -23,15 +23,21 @@
<div class='sdc-tile-content' data-tests-id="dashboard-Elements" (click)="tileClicked()">
<div class='sdc-tile-content-icon'>
- <div [ngClass]="[component.iconSprite, component.icon]" [ngClass]="{'sprite-resource-icons': component.isResource(), 'sprite-services-icons': component.isService()}"
+ <div [ngClass]="[component.iconSprite, component.icon]"
+ [ngClass]="{'sprite-resource-icons': component.isResource(), 'sprite-services-icons': component.isService()}"
[attr.data-tests-id]="component.name"></div>
</div>
<div class='sdc-tile-content-info'>
- <div class="sdc-tile-info-line title" [attr.data-tests-id]="component.name | resourceName" [tooltip]="component.name | resourceName" [tooltipDisabled]="!hasEllipsis">
- <multiline-ellipsis className="w-sdc-tile-multiline-ellipsis" [lines]="3" (hasEllipsisChanged)="hasEllipsis = $event">{{component.name | resourceName}}</multiline-ellipsis>
+ <div class="sdc-tile-info-line title" [attr.data-tests-id]="component.name | resourceName"
+ [tooltip]="component.name | resourceName" [tooltipDisabled]="!hasEllipsis">
+ <multiline-ellipsis className="w-sdc-tile-multiline-ellipsis" [lines]="3"
+ (hasEllipsisChanged)="hasEllipsis = $event">{{component.name | resourceName}}
+ </multiline-ellipsis>
+ </div>
+ <div class="sdc-tile-info-line subtitle" [attr.data-tests-id]="component.name+'Version'">V
+ {{component.version}}
</div>
- <div class="sdc-tile-info-line subtitle" [attr.data-tests-id]="component.name+'Version'">V {{component.version}}</div>
</div>
</div>
@@ -42,3 +48,32 @@
</div>
</div>
+
+<!--<sdc-tile>-->
+<!--<sdc-tile-header>-->
+<!--<div [ngClass]="{'blue': component.isService(), 'purple': component.isResource()}">{{component.isResource() ?-->
+<!--component.getComponentSubType(): 'S' }}-->
+<!--</div>-->
+<!--</sdc-tile-header>-->
+<!--<sdc-tile-content>-->
+<!--<div class='sdc-tile-content-icon blue'>-->
+<!--<svg-icon-->
+<!--[type]="catalogIcon.type"-->
+<!--[name]="catalogIcon.iconName"-->
+<!--[size]="catalogIcon.size"-->
+<!--[mode]="catalogIcon.color"-->
+<!--[backgroundShape]="catalogIcon.shape"-->
+<!--[backgroundColor]="catalogIcon.backgroundColor"-->
+<!--[disabled]="false"-->
+<!--&gt;-->
+<!--</svg-icon>-->
+<!--</div>-->
+<!--<div class="sdc-tile-content-info">-->
+<!--<span class="sdc-tile-info-line title">{{component.name | resourceName}}</span>-->
+<!--<div class="sdc-tile-info-line subtitle">{{'V'+ component.version}}</div>-->
+<!--</div>-->
+<!--</sdc-tile-content>-->
+<!--<sdc-tile-footer>-->
+<!--<span class="sdc-tile-footer-cell">{{component.getStatus(sdcMenu)}}</span>-->
+<!--</sdc-tile-footer>-->
+<!--</sdc-tile>--> \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/tile/tile.component.less b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.less
index e69de29bb2..febf46e99c 100644
--- a/catalog-ui/src/app/ng2/components/ui/tile/tile.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.less
@@ -0,0 +1,15 @@
+
+
+//This was done as a fix for the wrong dispaly that was in every ui-tile.
+//All other styles located in mail.less
+
+.sdc-tile {
+ display: block;
+
+ .sdc-tile-content {
+ overflow: visible;
+ height: 80%;
+ .sdc-tile-content-icon {
+ }
+ }
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/tile/tile.component.ts b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.ts
index b6f63584be..f5d9e88934 100644
--- a/catalog-ui/src/app/ng2/components/ui/tile/tile.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.ts
@@ -1,6 +1,8 @@
import {Component, Input, Output, Inject, EventEmitter} from '@angular/core';
import {Component as ComponentModel} from 'app/models';
import {SdcMenuToken, IAppMenu} from "../../../config/sdc-menu.config";
+import {ElementIcon} from "../sdc-element-icon/sdc-element-icon.component";
+import {ComponentType, ResourceType, SdcElementType} from "../../../../utils/constants";
@Component({
selector: 'ui-tile',
@@ -10,14 +12,42 @@ import {SdcMenuToken, IAppMenu} from "../../../config/sdc-menu.config";
export class TileComponent {
@Input() public component: ComponentModel;
@Output() public onTileClick: EventEmitter<ComponentModel>;
-
+ public catalogIcon: ElementIcon;
public hasEllipsis: boolean;
- constructor(@Inject(SdcMenuToken) public sdcMenu:IAppMenu) {
+ constructor(@Inject(SdcMenuToken) public sdcMenu: IAppMenu) {
this.onTileClick = new EventEmitter<ComponentModel>();
this.hasEllipsis = false;
}
+ ngOnInit(): void {
+ switch (this.component.componentType) {
+
+ case ComponentType.SERVICE:
+ if (this.component.icon === 'defaulticon') {
+ this.catalogIcon = new ElementIcon(this.component.icon, "services_60", 'lightBlue', 'white');
+ } else {
+ this.catalogIcon = new ElementIcon(this.component.icon, "services_60", '', 'lightBlue');
+ }
+ break;
+ case ComponentType.RESOURCE:
+ switch (this.component.getComponentSubType()) {
+ case ResourceType.CP:
+ case ResourceType.VL:
+ this.catalogIcon = new ElementIcon(this.component.icon, "resources_24", "purple", "white", "circle", 'medium');
+ break;
+ default:
+ if (this.component.icon === 'defaulticon') {
+ this.catalogIcon = new ElementIcon(this.component.icon, "resources_60", "purple", "white", "circle", 'x_large');
+ } else {
+ this.catalogIcon = new ElementIcon(this.component.icon, "resources_60", '', "error");
+ }
+
+ }
+
+ }
+ }
+
public tileClicked() {
this.onTileClick.emit(this.component);
}
diff --git a/catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts b/catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts
index e905db73a6..cdb173cb12 100644
--- a/catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts
+++ b/catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts
@@ -18,82 +18,89 @@
* ============LICENSE_END=========================================================
*/
-import { NgModule } from '@angular/core';
-import { NavbarModule } from "./navbar/navbar.module";
-import { DynamicElementModule } from "./dynamic-element/dynamic-element.module";
-import { FormElementsModule } from "./form-components/form-elements.module";
-import { LoaderComponent } from "./loader/loader.component";
-import { ModalModule } from "./modal/modal.module";
-import { PopoverModule } from "./popover/popover.module";
-import { SearchBarComponent } from "./search-bar/search-bar.component";
-import { SearchWithAutoCompleteComponent } from "./search-with-autocomplete/search-with-autocomplete.component";
-import { PalettePopupPanelComponent } from "./palette-popup-panel/palette-popup-panel.component";
-import { ZoneContainerComponent } from "./canvas-zone/zone-container.component";
-import { ZoneInstanceComponent } from "./canvas-zone/zone-instance/zone-instance.component";
-import { PaletteAnimationComponent } from "./palette-animation/palette-animation.component"
-import { TabModule } from "./tabs/tabs.module";
-import { TooltipModule } from "./tooltip/tooltip.module";
-import { CommonModule } from "@angular/common";
-import { FormsModule } from "@angular/forms";
-import { BrowserModule } from "@angular/platform-browser";
-import { MultiStepsWizardModule } from "./multi-steps-wizard/multi-steps-wizard.module";
-import { MenuListModule } from "./menu/menu-list.module";
-import { MenuListNg2Module } from "../downgrade-wrappers/menu-list-ng2/menu-list-ng2.module";
-import { ExpandCollapseComponent } from './expand-collapse/expand-collapse.component';
-import { SdcUiComponentsModule } from "sdc-ui/lib/angular";
-import { TileModule } from "./tile/tile.module";
+import {NgModule} from '@angular/core';
+import {NavbarModule} from "./navbar/navbar.module";
+import {DynamicElementModule} from "./dynamic-element/dynamic-element.module";
+import {FormElementsModule} from "./form-components/form-elements.module";
+import {LoaderComponent} from "./loader/loader.component";
+import {ModalModule} from "./modal/modal.module";
+import {PopoverModule} from "./popover/popover.module";
+import {SearchBarComponent} from "./search-bar/search-bar.component";
+import {SearchWithAutoCompleteComponent} from "./search-with-autocomplete/search-with-autocomplete.component";
+import { PaletteAnimationComponent } from "app/ng2/pages/composition/palette/palette-animation/palette-animation.component";
+import {TabModule} from "./tabs/tabs.module";
+import {TooltipModule} from "./tooltip/tooltip.module";
+import {CommonModule} from "@angular/common";
+import {FormsModule} from "@angular/forms";
+import {BrowserModule} from "@angular/platform-browser";
+import {MultiStepsWizardModule} from "./multi-steps-wizard/multi-steps-wizard.module";
+import {MenuListModule} from "./menu/menu-list.module";
+import {MenuListNg2Module} from "../downgrade-wrappers/menu-list-ng2/menu-list-ng2.module";
+import {ExpandCollapseComponent} from './expand-collapse/expand-collapse.component';
+import {SdcUiComponentsModule} from "onap-ui-angular";
+import {SdcTileModule} from "./tile/sdc-tile.module";
+import {PerfectScrollbarDirective} from "./perfect-scroll-bar/perfect-scrollbar.directive";
+import {FileOpenerComponent} from "./file-opener/file-opener.component";
+import {DownloadArtifactComponent} from "app/ng2/components/ui/download-artifact/download-artifact.component";
+import {SdcElementIconComponent} from "./sdc-element-icon/sdc-element-icon.component";
+import {PanelWrapperComponent} from "./panel-wrapper/panel-wrapper.component";
@NgModule({
- declarations: [
- LoaderComponent,
- SearchBarComponent,
- SearchWithAutoCompleteComponent,
- PalettePopupPanelComponent,
- ZoneContainerComponent,
- ZoneInstanceComponent,
- PaletteAnimationComponent,
- ExpandCollapseComponent
-],
-
- imports: [
- SdcUiComponentsModule,
- BrowserModule,
- FormsModule,
- CommonModule,
- DynamicElementModule,
- NavbarModule,
- FormElementsModule,
- ModalModule,
- PopoverModule,
- TabModule,
- TooltipModule,
- MultiStepsWizardModule,
- MenuListModule,
- MenuListNg2Module,
- TileModule
- ],
- exports: [
- LoaderComponent,
- MultiStepsWizardModule,
- SearchBarComponent,
- SearchWithAutoCompleteComponent,
- PalettePopupPanelComponent,
- ZoneContainerComponent,
- ZoneInstanceComponent,
- DynamicElementModule,
- NavbarModule,
- FormElementsModule,
- ModalModule,
- PopoverModule,
- TabModule,
- TooltipModule,
- MenuListModule,
- MenuListNg2Module,
- PaletteAnimationComponent,
- ExpandCollapseComponent,
- TileModule
- ],
- entryComponents: [SearchWithAutoCompleteComponent, PalettePopupPanelComponent, ZoneContainerComponent, ZoneInstanceComponent, PaletteAnimationComponent]
+ declarations: [
+ LoaderComponent,
+ SearchBarComponent,
+ SearchWithAutoCompleteComponent,
+ PaletteAnimationComponent,
+ ExpandCollapseComponent,
+ PerfectScrollbarDirective,
+ FileOpenerComponent,
+ SdcElementIconComponent,
+ DownloadArtifactComponent,
+ PanelWrapperComponent
+ ],
+
+ imports: [
+ SdcUiComponentsModule,
+ BrowserModule,
+ FormsModule,
+ CommonModule,
+ DynamicElementModule,
+ NavbarModule,
+ FormElementsModule,
+ ModalModule,
+ PopoverModule,
+ TabModule,
+ TooltipModule,
+ MultiStepsWizardModule,
+ MenuListModule,
+ MenuListNg2Module,
+ SdcTileModule
+ ],
+ exports: [
+ LoaderComponent,
+ MultiStepsWizardModule,
+ SearchBarComponent,
+ SearchWithAutoCompleteComponent,
+ DynamicElementModule,
+ NavbarModule,
+ FormElementsModule,
+ ModalModule,
+ PopoverModule,
+ TabModule,
+ TooltipModule,
+ MenuListModule,
+ MenuListNg2Module,
+ PaletteAnimationComponent,
+ ExpandCollapseComponent,
+ SdcTileModule,
+ PerfectScrollbarDirective,
+ SdcElementIconComponent,
+ FileOpenerComponent,
+ DownloadArtifactComponent,
+ PanelWrapperComponent
+ ],
+ entryComponents: [SearchWithAutoCompleteComponent, SdcElementIconComponent, PaletteAnimationComponent]
})
-export class UiElementsModule {}
+export class UiElementsModule {
+}