aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/components
diff options
context:
space:
mode:
authorMichaelMorris <michael.morris@est.tech>2020-11-27 17:26:46 +0000
committerVasyl Razinkov <vasyl.razinkov@est.tech>2020-12-15 14:24:59 +0000
commit08fee6aa89ec2a0fd021c969af78ba422f86949f (patch)
treeffdb1001016bde3fdf265ad95db8f2ea21a564da /catalog-ui/src/app/ng2/components
parent3f816f6fdeb32061c77ab9799e18f2cb41ce8ea7 (diff)
Add metadata to topology inputs1.8.0
Change-Id: If57e16003532d59552fa0b5cacc69a792e5b877a Issue-ID: SDC-3399 Signed-off-by: MichaelMorris <michael.morris@est.tech>
Diffstat (limited to 'catalog-ui/src/app/ng2/components')
-rw-r--r--catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html49
-rw-r--r--catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less87
-rw-r--r--catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts48
3 files changed, 171 insertions, 13 deletions
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 d3db53aa43..ee090245f0 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
@@ -32,6 +32,9 @@
<div class="table-cell col4" (click)="sort('required')" *ngIf="componentType == 'SERVICE'">
<span tooltip="Required in Runtime" tooltipDelay="400">Req. in RT</span>
</div>
+ <div class="table-cell" [class.metadata-col-small]="!hasInputMetadata()" [class.metadata-col-wide]="hasInputMetadata()">
+ <div [class.metadata-col-wide-text]="hasInputMetadata()">Metadata</div>
+ </div>
<div class="table-cell valueCol">Value</div>
</div>
<div class="table-body">
@@ -65,8 +68,51 @@
(checkedChange)="onRequiredChanged(input, $event)"
[disabled]="readonly"></sdc-checkbox>
</div>
+ <!-- Metadata -->
+ <div class="table-cell" [class.metadata-col-small]="!hasInputMetadata()" [class.metadataCol]="hasInputMetadata()">
+ <div class="inner-cell-div metadata-add" tooltip="Add key value pair">
+ <a class="property-icon add-item" (click)="createNewMetadataEntry(input);" [ngClass]="{'disabled':readonly}">Add metadata</a>
+ </div>
+ <ng-container >
+ <div class="metadata-container">
+ <ng-container *ngFor="let metadataEntry of input.metadataEntries;">
+ <div class="metadata-entry">
+ <ng-container>
+ <div class="metadata-key-value metadata-key" >
+ <dynamic-element #metadataViewChildren
+ class="value-input"
+ pattern="validationUtils.getValidationPattern(string)"
+ [value]="metadataEntry.key"
+ type="string"
+ name="{{input.name}}_{{metadataEntry.key}}"
+ (elementChanged)="onMetadataKeyChanged(input, $event, metadataEntry)"
+ [readonly]="readonly"
+ [testId]="'prop-key-' + propertyTestsId"
+ ></dynamic-element>
+ </div>
+ </ng-container>
+ <ng-container>
+ <div class="metadata-key-value">
+ <dynamic-element
+ class="value-input"
+ pattern="validationUtils.getValidationPattern(string)"
+ [value]="metadataEntry.value"
+ type="string"
+ [name]="metadataEntry.key"
+ (elementChanged)="onMetadataValueChanged(input, $event, metadataEntry)"
+ [readonly]="readonly"
+ [testId]="'prop-key-' + propertyTestsId"
+ ></dynamic-element>
+ </div>
+ <span (click)="deleteMetadataEntry(input, metadataEntry);" class="delete-icon sprite-new delete-item-icon" [ngClass]="{'disabled':readonly}"></span>
+ </ng-container>
+ </div>
+ </ng-container>
+ </div>
+ </ng-container>
+ </div>
<!-- Value -->
- <div class="table-cell valueCol input-value-col" [class.inner-table-container]="input.childrenProperties || !input.isSimpleType">
+ <div class="table-cell valueCol" [class.inner-table-container]="input.childrenProperties || !input.isSimpleType">
<dynamic-element class="value-input"
*ngIf="checkInstanceFePropertiesMapIsFilled() && input.isSimpleType"
pattern="validationUtils.getValidationPattern(input.type)"
@@ -82,7 +128,6 @@
<span *ngIf="input.instanceUniqueId && !readonly" class="sprite-new delete-btn" (click)="openDeleteModal(input)" data-tests-id="delete-input-button"></span>
</div>
</div>
-
</div>
</div>
</div>
diff --git a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less
index 77c002c899..74520b6314 100644
--- a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less
@@ -3,6 +3,37 @@
:host /deep/ input { width:100%;}
+.metadata-container {
+ .metadata-entry {
+ border-top:solid 1px #d2d2d2;
+ flex: 1;
+ display:flex;
+ flex-direction:row;
+ align-items: stretch;
+
+ .metadata-key-value {
+ flex: 1;
+ padding:8px;
+ justify-content: center;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ .metadata-key {
+ flex: 0 0 50%;
+ border-right:#d2d2d2 solid 1px;
+ }
+
+ .delete-icon {
+ flex: 0 0 auto;
+ margin-right:10px;
+ align-self:center;
+ cursor:pointer;
+ }
+ }
+}
+
.properties-table {
display:flex;
flex-direction:column;
@@ -46,7 +77,22 @@
}
.valueCol {
justify-content: flex-start;
+ padding: 10px 8px 10px 8px;
+ }
+
+ .metadata-col-small {
padding: 10px;
+ flex: 0 0 115px;
+ }
+ .metadata-col-wide {
+ justify-content: flex-start;
+ padding: 0px;
+ flex: 1;
+
+ .metadata-col-wide-text {
+ justify-content: flex-start;
+ padding: 10px;
+ }
}
}
.table-header, .table-row {
@@ -85,6 +131,37 @@
.selected-row {
background-color:#e6f6fb;
}
+ .table-cell.valueCol {
+ padding:8px;
+ }
+ .table-cell.metadataCol {
+ padding:0px;
+ .value-input {
+ flex: 1;
+ border: none;
+ background-color: inherit;
+
+ &:focus, &:active {
+ border:none;
+ outline:none;
+ }
+ }
+ .metadata-add {
+ padding: 10px;
+ height: 40px;
+ }
+ }
+
+ .table-cell.metadata-col-small {
+ flex: 0 0 115px;
+ padding: 0px 10px 0px 10px;
+ .metadata-add {
+ padding: 10px 0px 10px 0px;
+ height: 40px;
+ margin-right: 0px;
+ }
+ }
+
}
.table-cell {
@@ -123,13 +200,13 @@
// Column: Type
&.col2 {
- flex: 0 0 140px;
+ flex: 0 1 140px;
max-width: 140px;
}
// Column: From Instance
&.col3 {
- flex: 0 0 120px;
+ flex: 0 1 120px;
max-width: 120px;
}
@@ -169,12 +246,6 @@
}
}
}
-
- &.input-value-col {
- padding: 8px;
- }
-
-
}
.filtered {
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 682a3e2463..3fa7ab4a80 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
@@ -22,12 +22,14 @@
/**
* Created by rc2122 on 5/4/2017.
*/
-import { Component, Input, Output, EventEmitter } from "@angular/core";
+import { Component, Input, Output, EventEmitter, ViewChildren, QueryList } 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";
+import { MetadataEntry } from "app/models/metadataEntry";
+import { DynamicElementComponent } from "../../ui/dynamic-element/dynamic-element.component";
@Component({
selector: 'inputs-table',
@@ -41,10 +43,13 @@ export class InputsTableComponent {
@Input() readonly: boolean;
@Input() isLoading: boolean;
@Input() componentType: string;
+
@Output() inputChanged: EventEmitter<any> = new EventEmitter<any>();
@Output() deleteInput: EventEmitter<any> = new EventEmitter<any>();
@Input() fePropertiesMap: InstanceFePropertiesMap;
+
+ @ViewChildren('metadataViewChildren') public metadataViewChildren: QueryList<DynamicElementComponent>;
sortBy: String;
reverse: boolean;
@@ -93,6 +98,35 @@ export class InputsTableComponent {
this.inputChanged.emit(input);
}
+ onMetadataKeyChanged = (input: InputFEModel, event, metadataEntry: MetadataEntry) => {
+ let dynamicElementComponent = this.metadataViewChildren.filter(element => element.name == input.name + "_" + metadataEntry.key).pop();
+
+ input.updateMetadataKey(metadataEntry, event.value);
+ this.inputChanged.emit(input);
+
+ var mapKeyError = input.metadataMapKeyError;
+ if(input.metadataMapKeyError){
+ dynamicElementComponent.cmpRef.instance.control.setErrors({mapKeyError});
+ }
+ };
+
+ onMetadataValueChanged = (input: InputFEModel, event, metadataEntry: MetadataEntry) => {
+ input.updateMetadataValue(metadataEntry, event.value);
+ this.inputChanged.emit(input);
+ };
+
+
+ createNewMetadataEntry = (input: InputFEModel): void => {
+ let metadataEntry = new MetadataEntry("", "");
+ input.addMetadataEntry(metadataEntry);
+ this.inputChanged.emit(input);
+ }
+
+ deleteMetadataEntry = (input: InputFEModel, metadataEntry: MetadataEntry) => {
+ input.deleteMetadataEntry(metadataEntry);
+ this.inputChanged.emit(input);
+ }
+
onDeleteInput = () => {
this.deleteInput.emit(this.selectedInputToDelete);
this.modalService.closeCurrentModal();
@@ -100,8 +134,6 @@ 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();
}
@@ -133,6 +165,16 @@ export class InputsTableComponent {
checkInstanceFePropertiesMapIsFilled(){
return _.keys(this.fePropertiesMap).length > 0
}
+
+ hasInputMetadata(){
+ for(let input of this.inputs){
+ if (input.metadataEntries.length > 0){
+ return true;
+ }
+ }
+ return false;
+ }
+
}