summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/components/logic
diff options
context:
space:
mode:
authorSatoshi Fujii <fujii-satoshi@jp.fujitsu.com>2020-02-26 15:39:38 +0900
committerOfir Sonsino <ofir.sonsino@intl.att.com>2020-03-31 05:19:29 +0000
commit407bbefe5b0b932f6c6bed65193815c78b4d41b5 (patch)
tree3b6661c29df42df59d72790b91cfaace4a0dd019 /catalog-ui/src/app/ng2/components/logic
parent4f02f33f309c3869d231926582f559aa04816063 (diff)
Add 'required in runtime' for service inputs
User may want to set required to true for some inputs so that make sure those input values are given at service instantiation time. By this change 'required in runtime' column is introduced into service inputs table in Properties Assignment screen and user can select required true/false for each input. Change-Id: I0d676d2d20e02c975d51c7f4d2bb63c699743d66 Issue-ID: SDC-2659 Signed-off-by: Satoshi Fujii <fujii-satoshi@jp.fujitsu.com>
Diffstat (limited to 'catalog-ui/src/app/ng2/components/logic')
-rw-r--r--catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html13
-rw-r--r--catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less21
-rw-r--r--catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts7
-rw-r--r--catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html2
-rw-r--r--catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less10
5 files changed, 44 insertions, 9 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 eeba590046..d3db53aa43 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
@@ -29,6 +29,9 @@
<span *ngIf="sortBy === 'type'" class="table-header-sort-arrow" [ngClass]="{'down': reverse, 'up':!reverse}">
</span>
</div>
+ <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 valueCol">Value</div>
</div>
<div class="table-body">
@@ -37,7 +40,9 @@
<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>
+ <div class="inner-cell-div">
+ <span class="property-name" tooltip="{{input.name}}">{{input.name}}</span>
+ </div>
<span *ngIf="input.description"
class="property-description-icon sprite-new show-desc"
tooltip="{{input.description}}" tooltipDelay="0"></span>
@@ -54,6 +59,12 @@
<span>{{input.type | contentAfterLastDot}}</span>
</div>
</div>
+ <!-- Required in runtime -->
+ <div class="table-cell col4" *ngIf="componentType == 'SERVICE'">
+ <sdc-checkbox [(checked)]="input.required"
+ (checkedChange)="onRequiredChanged(input, $event)"
+ [disabled]="readonly"></sdc-checkbox>
+ </div>
<!-- Value -->
<div class="table-cell valueCol input-value-col" [class.inner-table-container]="input.childrenProperties || !input.isSimpleType">
<dynamic-element class="value-input"
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 72e19f3f51..77c002c899 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
@@ -101,9 +101,11 @@
&:last-child {
border-right:#d2d2d2 solid 1px;
}
+
+ // Column: Property Name
&.col1 {
flex: 1 0 130px;
- max-width:130px;
+ max-width: 250px;
justify-content: space-between;
@@ -118,16 +120,27 @@
flex: 0 0 auto;
}
}
+
+ // Column: Type
&.col2 {
flex: 0 0 140px;
- max-width:140px;
+ max-width: 140px;
}
+ // Column: From Instance
&.col3 {
- flex:0 0 120px;
- max-width:120px;
+ flex: 0 0 120px;
+ max-width: 120px;
+ }
+
+ // Column: Required in Runtime
+ &.col4 {
+ flex: 0 0 80px;
+ max-width: 80px;
+ text-align: center;
}
+ // Column: Value
&.valueCol {
.value-input {
flex: 1;
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 f45d5a85c7..682a3e2463 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
@@ -40,6 +40,7 @@ export class InputsTableComponent {
@Input() instanceNamesMap: Map<string, InstanceFeDetails>;
@Input() readonly: boolean;
@Input() isLoading: boolean;
+ @Input() componentType: string;
@Output() inputChanged: EventEmitter<any> = new EventEmitter<any>();
@Output() deleteInput: EventEmitter<any> = new EventEmitter<any>();
@@ -47,7 +48,7 @@ export class InputsTableComponent {
sortBy: String;
reverse: boolean;
- selectedInputToDelete: InputFEModel;
+ selectedInputToDelete: InputFEModel;
sort = (sortBy) => {
this.reverse = (this.sortBy === sortBy) ? !this.reverse : true;
@@ -88,6 +89,10 @@ export class InputsTableComponent {
this.inputChanged.emit(input);
};
+ onRequiredChanged = (input: InputFEModel, event) => {
+ this.inputChanged.emit(input);
+ }
+
onDeleteInput = () => {
this.deleteInput.emit(this.selectedInputToDelete);
this.modalService.closeCurrentModal();
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 89b85d3578..af7a61204c 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
@@ -27,7 +27,7 @@
<span *ngIf="sortBy === 'type'" class="table-header-sort-arrow" [ngClass]="{'down': reverse, 'up':!reverse}">
</span>
</div>
- <div class="table-cell col3" (click)="sort('schema.property.type')" *ngIf="!hidePropertyType">ES
+ <div class="table-cell col3" (click)="sort('schema.property.type')" *ngIf="!hidePropertyType">EntrySchema
<span *ngIf="sortBy === 'schema.property.type'" class="table-header-sort-arrow" [ngClass]="{'down': reverse, 'up':!reverse}">
</span>
</div>
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less
index 86832e57f0..8c2c6ce940 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less
@@ -129,8 +129,10 @@
&:last-child {
border-right:#d2d2d2 solid 1px;
}
+
+ // Column: Property Name
&.col1 {
- flex: 1 0 210px;
+ flex: 1 0 190px;
max-width:300px;
display: flex;
@media @smaller-screen { flex: 0 0 25%;}
@@ -149,20 +151,24 @@
flex: 0 0 auto;
}
}
+
+ // Column: Type
&.col2 {
flex: 0 0 150px;
max-width:150px;
@media @smaller-screen { flex: 0 0 20%;}
}
+ // Column: ES
&.col3 {
flex:0 0 120px;
max-width:120px;
@media @smaller-screen { flex: 0 0 15%;}
}
+ // Column: Value
&.valueCol {
- flex: 2 0 300px;
+ flex: 2 0 250px;
display: flex;
@media @smaller-screen { flex: 1 0 40%;}
}