1 files changed, 63 insertions, 0 deletions
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
new file mode 100644
index 0000000000..933b80f577
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html
@@ -0,0 +1,63 @@
+<div class="properties-table">
+    <loader [display]="isLoading" [size]="'large'" [relative]="true" [loaderDelay]="500"></loader>
+    <div class="table-header">
+        <div class="table-cell col1">Property Name</div>
+        <div class="table-cell col2" *ngIf="!hidePropertyType">Type</div>
+        <div class="table-cell col3" *ngIf="!hidePropertyType">ES</div>
+        <div class="table-cell valueCol">Value</div>
+    </div>
+    <div class="table-body" [ngClass]="{'view-mode': readonly}">
+        <div class="no-data" *ngIf="!fePropertiesMap || !(fePropertiesMap | keys).length">No data to display</div>
+
+        <ng-container *ngFor="let instanceId of fePropertiesMap | keys; trackBy:instanceId">
+            <div class="table-rows-header white-sub-header" *ngIf="feInstanceNamesMap">{{feInstanceNamesMap[instanceId]}}</div>
+
+            <div class="table-row"
+                *ngFor="let property of fePropertiesMap[instanceId] | searchFilter:'name':searchTerm; 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">
+                <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>
+                    <div class="inner-cell-div" tooltip="{{property.name}}">
+                        <span>{{property.name}}</span>
+                    </div>
+                </div>
+                <span *ngIf="property.description" class="property-description-icon sprite-new show-desc" tooltip="{{property.description}}" tooltipDelay="0"></span>
+                </div>
+                <div class="table-cell col2" *ngIf="!hidePropertyType">
+                    <div class="inner-cell-div" tooltip="{{property.type | contentAfterLastDot}}">
+                        <span>{{property.type | contentAfterLastDot}}</span>
+                    </div>
+                </div>
+                <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>
+                <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
+                        [selectedPropertyId]="selectedPropertyId"
+                        [hasDeclareOption]="hasDeclareOption"
+                        [canBeDeclared]="hasDeclareOption && true"
+                        [property]="property"
+                        [expandedChildId]="property.expandedChildPropertyId"
+                        [propertyNameSearchText]="propertyNameSearchText"
+                        [readonly]="readonly"
+                        (valueChanged)="propValueChanged(property);"
+                        (expandChild)="property.updateExpandedChildPropertyId($event)"
+                        (clickOnPropertyRow)="onClickPropertyInnerRow($event, instanceId)"
+                        (checkProperty)="propertyChecked(property, $event)"
+                        >
+                    </dynamic-property>
+
+                </div>
+            </div>
+        </ng-container>
+
+    </div>
+</div>