1 files changed, 38 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.html b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.html
new file mode 100644
index 0000000000..25e8672db8
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.html
@@ -0,0 +1,38 @@
+<div class="interface-operation">
+    <div
+        class="add-btn"
+        [ngClass]="{'disabled': readonly}"
+        data-tests-id="addInterfaceOperation"
+        (click)="onAddOperation()">
+        Add Operation
+    </div>
+
+    <div class="operation-list" [ngClass]="{'disabled': readonly}">
+
+        <div
+            class="operation-row"
+            *ngFor="let operation of operationList"
+            (click)="onEditOperation(operation)">
+
+            <span class="operation-info-container">
+                <span class="operation-title">
+                    <p class="operation-text" data-tests-id="interfaceOperationType">{{operation.operationType}}</p>
+                </span>
+
+                <span class="operation-description">
+                    <p class="operation-text" data-tests-id="interfaceOperationDescription">{{operation.description}}</p>
+                </span>
+            </span>
+
+            <span class="operation-dumbo">
+                <span
+                    class="sprite-new delete-item-icon"
+                    data-tests-id="deleteInterfaceOperation"
+                    (click)="onRemoveOperation($event, operation)">
+                </span>
+            </span>
+
+        </div>
+    </div>
+
+</div>