Revert "Fix 46 CRITICAL BUGs"

This reverts commit eb57d1efc197968a4073b331b2dc8f40d8109847.

Reason for revert: some UI components are broken

Change-Id: I533a827e9913250d5cb29ed2cc4736fd8c57a8e5
Signed-off-by: Vasyl Razinkov <vasyl.razinkov@est.tech>
Issue-ID: SDC-3529

6 files changed, 589 insertions, 695 deletions

diff --git a/catalog-ui/src/app/ng2/components/logic/attributes-table/attributes-table.component.less b/catalog-ui/src/app/ng2/components/logic/attributes-table/attributes-table.component.less
index 774b7eb798..26ae0d4d74 100644
--- a/catalog-ui/src/app/ng2/components/logic/attributes-table/attributes-table.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/attributes-table/attributes-table.component.less
@@ -1,292 +1,264 @@
 @import './../../../../../assets/styles/mixins.less';
 @import '../../../../../assets/styles/sprite';
-
 @smaller-screen: ~"only screen and (max-width: 1580px)";
 
-:host /deep/ input {
-  width: 100%;
-}
+:host /deep/ input { width:100%;}
 
 .attributes-table {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  height: 100%;
-  text-align: left;
-
-
-  .inner-cell-div {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    height: 20px;
-  }
-
-  .inner-cell-div-multiline {
-    max-width: 100%;
-  }
-
-  .table-header {
-    display: flex;
-    flex-direction: row;
-    flex: 0 0 auto;
-    font-weight: bold;
-    border-top: #d2d2d2 solid 1px;
-    background-color: #f2f2f2;
-
-    .table-cell {
-      color: #191919;
-      font-size: 13px;
-
-      .table-header-sort-arrow {
-        display: inline-block;
-        background-color: transparent;
-        border: none;
-        color: #AAA;
-        margin: 8px 0 0 5px;
-
-        &.up {
-          border-left: 5px solid transparent;
-          border-right: 5px solid transparent;
-          border-bottom: 5px solid;
-          height: 5px;
-        }
-
-        &.down {
-          border-left: 5px solid transparent;
-          border-right: 5px solid transparent;
-          border-top: 5px solid;
-        }
-      }
-    }
-  }
-
-  .table-rows-header {
-    border: #d2d2d2 solid 1px;
-    border-top: none;
-    display: flex;
-    align-items: center;
-
-    .archive-label {
-      margin-left: 10px;
-    }
-  }
-
-  .table-body {
     display: flex;
     flex-direction: column;
-    overflow-y: auto;
     flex: 1;
-    background-color: @main_color_p;
-
-    .no-data {
-      border: #d2d2d2 solid 1px;
-      border-top: none;
-      text-align: center;
-      height: 100%;
-      padding: 20px;
-    }
+    height: 100%;
+    text-align: left;
 
-    /deep/ .selected {
-      background-color: #e6f6fb;
-      color: #009fdb;
-    }
-
-    &.view-mode {
-      /deep/ .dynamic-property-row:not(.selected) {
-        background-color: #f8f8f8;
-      }
-    }
-
-    .table-row {
-      display: flex;
-      flex-direction: row;
-      flex: 0 0 auto;
-
-      &.readonly {
-        background-color: #f8f8f8;
-        cursor: auto;
-      }
-
-      &:hover:not(.selected) {
-        background-color: #f8f8f8;
-        cursor: pointer;
-
-        /deep/ .dynamic-property-row:not(.selected) {
-          background-color: #f8f8f8;
-          cursor: pointer;
-        }
-      }
 
-      .selected-row {
-        background-color: #e6f6fb;
-      }
-
-      .table-cell.valueCol {
-        padding: 0px;
-
-      }
+    .inner-cell-div {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        height: 20px;
     }
-  }
 
-  .table-cell {
-    font-size: 13px;
-    flex: 1;
-    border: #d2d2d2 solid 1px;
-    border-right: none;
-    border-top: none;
-    padding: 10px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    display: flex;
-    min-height: 40px;
-
-    &:last-child {
-      border-right: #d2d2d2 solid 1px;
+    .inner-cell-div-multiline {
+        max-width: 100%;
     }
 
-    // Column: Property Name
-    &.col1 {
-      flex: 1 0 190px;
-      max-width: 300px;
-      display: flex;
-      @media @smaller-screen {
-        flex: 0 0 25%;
-      }
-
-      .attribute-name {
-        flex: 1;
+    .table-header {
         display: flex;
-        overflow: hidden;
-        //max-width: 90%; fix bug 327139
-      }
-
-      .property-description-icon {
-        float: right;
-        margin-top: 4px;
-        margin-left: 15px;
+        flex-direction:row;
         flex: 0 0 auto;
-      }
-    }
-
-    // Column: Type
-    &.col2 {
-      flex: 0 0 150px;
-      max-width: 150px;
-      @media @smaller-screen {
-        flex: 0 0 20%;
-      }
+        font-weight:bold;
+        border-top: #d2d2d2 solid 1px;
+        background-color: #f2f2f2;
+
+        .table-cell {
+            color:#191919;
+            font-size:13px;
+            .table-header-sort-arrow {
+                display: inline-block;
+                background-color: transparent;
+                border: none;
+                color: #AAA;
+                margin: 8px 0 0 5px;
+                &.up {
+                    border-left: 5px solid transparent;
+                    border-right: 5px solid transparent;
+                    border-bottom: 5px solid;
+                    height:5px;
+                }
+                &.down {
+                    border-left: 5px solid transparent;
+                    border-right: 5px solid transparent;
+                    border-top: 5px solid;
+                }
+            }
+        }
     }
 
-    // Column: ES
-    &.col3 {
-      flex: 0 0 120px;
-      max-width: 120px;
-      @media @smaller-screen {
-        flex: 0 0 15%;
-      }
+    .table-rows-header {
+        border: #d2d2d2 solid 1px;
+        border-top:none;
+        display: flex;
+        align-items: center;
+        .archive-label{
+            margin-left: 10px;
+        }
     }
 
-    // Column: Value
-    &.valueCol {
-      flex: 2 0 250px;
-      display: flex;
-      @media @smaller-screen {
-        flex: 1 0 40%;
-      }
+    .table-body {
+        display:flex;
+        flex-direction: column;
+        overflow-y:auto;
+        flex: 1;
+        background-color: @main_color_p;
+
+        .no-data {
+            border: #d2d2d2 solid 1px;
+            border-top:none;
+            text-align: center;
+            height: 100%;
+            padding: 20px;
+        }
+        /deep/.selected{
+            background-color: #e6f6fb;
+            color:  #009fdb;
+        }
+        &.view-mode{
+            /deep/ .dynamic-property-row:not(.selected){
+                background-color:#f8f8f8;
+            }
+        }
+        .table-row {
+            display: flex;
+            flex-direction:row;
+            flex: 0 0 auto;
+            &.readonly{
+                background-color: #f8f8f8;
+                cursor: auto;
+            }
+
+            &:hover:not(.selected){
+                background-color:#f8f8f8; cursor:pointer;
+                /deep/ .dynamic-property-row:not(.selected){
+                    background-color:#f8f8f8; cursor:pointer;
+                }
+            }
+
+            .selected-row {
+                background-color:#e6f6fb;
+            }
+
+            .table-cell.valueCol {
+                padding:0px;
+
+            }
+        }
     }
+    .table-cell {
+        font-size:13px;
+        flex:1;
+        border: #d2d2d2 solid 1px;
+        border-right:none;
+        border-top:none;
+        padding:10px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow:hidden;
+        display: flex;
+        min-height:40px;
 
+        &:last-child {
+            border-right:#d2d2d2 solid 1px;
+        }
 
-    /deep/ .checkbox-container {
-      margin-right: 10px;
-    }
-
-    /deep/ &.round-checkbox {
-      .checkbox-container input[type=checkbox].checkbox-hidden {
-        &:checked ~ .checkbox-icon::before {
-          .sprite-new;
-          .round-checked-icon;
+        // Column: Property Name
+        &.col1 {
+            flex: 1 0 190px;
+            max-width:300px;
+            display: flex;
+            @media @smaller-screen { flex: 0 0 25%;}
+
+            .attribute-name {
+                flex: 1;
+                display: flex;
+                overflow: hidden;
+                //max-width: 90%; fix bug 327139
+            }
+
+            .property-description-icon {
+                float: right;
+                margin-top: 4px;
+                margin-left: 15px;
+                flex: 0 0 auto;
+            }
         }
 
-        &[disabled] ~ .checkbox-icon::before {
-          .sprite-new;
-          .round-checked-icon.disabled;
-          background-color: inherit;
-          border: none;
-          //animation: addDisabledCheck 4s linear;
+        // Column: Type
+        &.col2 {
+            flex: 0 0 150px;
+            max-width:150px;
+            @media @smaller-screen { flex: 0 0 20%;}
         }
-      }
-    }
-  }
 
-  .delete-button-container {
-    max-height: 24px;
-    cursor: pointer;
-  }
+        // Column: ES
+        &.col3 {
+            flex:0 0 120px;
+            max-width:120px;
+            @media @smaller-screen { flex: 0 0 15%;}
+        }
 
-  .filtered {
-    /deep/ .checkbox-label-content {
-      background-color: yellow;
-    }
-  }
+        // Column: Value
+        &.valueCol {
+            flex: 2 0 250px;
+            display: flex;
+            @media @smaller-screen { flex: 1 0 40%;}
+        }
 
-  .dynamic-property {
-    width: 100%;
 
-    &:last-child /deep/ .dynamic-property-row {
-      border-bottom: none;
-    }
-  }
+        /deep/ .checkbox-container {
+            margin-right: 10px;
+        }
 
-  .table-row {
-    /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
-      background: linear-gradient(to right, transparent 0%, #ffffff 80%);
-      padding-left: 1em;
+        /deep/ &.round-checkbox {
+            .checkbox-container input[type=checkbox].checkbox-hidden {
+                &:checked ~ .checkbox-icon::before {
+                    .sprite-new;
+                    .round-checked-icon;
+                }
+                &[disabled] ~ .checkbox-icon::before {
+                    .sprite-new;
+                    .round-checked-icon.disabled;
+                    background-color:inherit;
+                    border:none;
+                    //animation: addDisabledCheck 4s linear;
+                }
+            }
+        }
     }
 
-    &.selected /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
-      background: linear-gradient(to right, transparent 0%, #e6f6fb 80%);
-      padding-left: 1em;
+    .delete-button-container {
+        max-height: 24px;
+        cursor: pointer;
     }
 
-    &.readonly /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
-      background: linear-gradient(to right, transparent 0%, #f8f8f8 80%);
-      padding-left: 1em;
+    .filtered {
+        /deep/ .checkbox-label-content{
+            background-color: yellow;
+        }
     }
 
-    &:hover:not(.selected) /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
-      background: linear-gradient(to right, transparent 0%, #f8f8f8 80%);
-      padding-left: 1em;
+    dynamic-property {
+        width:100%;
+        &:last-child /deep/ .dynamic-property-row {
+            border-bottom:none;
+        }
     }
-  }
 
-  .prop-instance-icon {
-    vertical-align: middle;
-    margin-right: 7px;
+    .table-row {
+        /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
+            background: linear-gradient(to right, transparent 0%, #ffffff 80%);
+            padding-left: 1em;
+        }
 
-    &.defaulticon.small {
-      background-color: @main_color_q;
-      border-radius: 14px;
-    }
+        &.selected /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
+            background: linear-gradient(to right, transparent 0%, #e6f6fb 80%);
+            padding-left: 1em;
+        }
 
-    // square icons
-    &.icon-group {
-      .square-icon();
-      background-color: @main_color_a;
+        &.readonly /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
+            background: linear-gradient(to right, transparent 0%, #f8f8f8 80%);
+            padding-left: 1em;
+        }
 
-      &::before {
-        content: "G";
-      }
+        &:hover:not(.selected) /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
+            background: linear-gradient(to right, transparent 0%, #f8f8f8 80%);
+            padding-left: 1em;
+        }
     }
 
-    &.icon-policy {
-      .square-icon();
-      background-color: @main_color_r;
+    .prop-instance-icon {
+        vertical-align: middle;
+        margin-right: 7px;
+        &.defaulticon.small {
+            background-color: @main_color_q;
+            border-radius:14px;
+        }
+        // square icons
+        &.icon-group {
+            .square-icon();
+            background-color: @main_color_a;
+
+            &::before {
+                content: "G";
+            }
+        }
+        &.icon-policy {
+            .square-icon();
+            background-color: @main_color_r;
 
-      &::before {
-        content: "P";
-      }
-    }
+            &::before {
+                content: "P";
+            }
+        }
 
-  }
+    }
 }
diff --git a/catalog-ui/src/app/ng2/components/logic/attributes-table/dynamic-attribute/dynamic-attribute.component.less b/catalog-ui/src/app/ng2/components/logic/attributes-table/dynamic-attribute/dynamic-attribute.component.less
index 38339bdb8e..fd572b0f2d 100644
--- a/catalog-ui/src/app/ng2/components/logic/attributes-table/dynamic-attribute/dynamic-attribute.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/attributes-table/dynamic-attribute/dynamic-attribute.component.less
@@ -1,92 +1,82 @@
 @import '../../../../../../assets/styles/variables.less';
-
 .flat-children-container {
-  .dynamic-property-row {
-    /*create nested left border classes for up to 10 levels of nesting*/
-    .nested-border-loop(@i) when (@i > 0) {
-      @size: (@i - 1) *2;
-      &.nested-level-@{i} .table-cell:first-child {
-        border-left: ~"solid @{size}px #009fdb";
-      }
-      .nested-border-loop(@i - 1)
+    .dynamic-property-row {
+        /*create nested left border classes for up to 10 levels of nesting*/
+        .nested-border-loop(@i) when (@i > 0) {
+            @size: (@i - 1) *2;
+            &.nested-level-@{i} .table-cell:first-child {
+                border-left: ~"solid @{size}px #009fdb";
+            }
+            .nested-border-loop(@i - 1)
+        }
+        .nested-border-loop(10);
     }
-    .nested-border-loop(10);
-  }
-
-  .dynamic-property {
-    &:first-child .dynamic-property-row.with-top-border {
-      border-top: solid 1px #d2d2d2;
+    dynamic-property {
+        &:first-child .dynamic-property-row.with-top-border {
+            border-top:solid 1px #d2d2d2;
+        }
+        &:not(:last-child) .dynamic-property-row {
+            border-bottom:solid 1px #d2d2d2;
+        }
     }
-
-    &:not(:last-child) .dynamic-property-row {
-      border-bottom: solid 1px #d2d2d2;
-    }
-  }
 }
-
 .dynamic-property-row {
-  display: flex;
-  flex-direction: row;
-  align-items: stretch;
+    display:flex;
+    flex-direction:row;
+    align-items: stretch;
 
-  &.readonly {
-    background-color: @tlv_color_t;
-    cursor: auto;
-  }
-
-  //for the case that the parent is disabled but the child is enabled
-  &:not(.readonly) {
-    background-color: @main_color_p;
-  }
-
-  .table-cell {
-    flex: 1;
-    padding: 9px;
-    justify-content: center;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    &.readonly{
+        background-color: @tlv_color_t;
+        cursor: auto;
+    }
+    //for the case that the parent is disabled but the child is enabled
+    &:not(.readonly){
+        background-color: @main_color_p;
+    }
 
-    &:first-child {
-      flex: 0 0 50%;
-      border-right: #d2d2d2 solid 1px;
+    .table-cell {
+        flex: 1;
+        padding:9px;
+        justify-content: center;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
 
-      &:only-of-type {
-        flex: 1 1 100%;
-        border-right: none;
-      }
+        &:first-child {
+            flex: 0 0 50%;
+            border-right:#d2d2d2 solid 1px;
+            &:only-of-type {
+                flex: 1 1 100%;
+                border-right:none;
+            }
+        }
+        &.empty {
+            height:40px;
+        }
     }
-
-    &.empty {
-      height: 40px;
+    .property-icon {
+        flex: 0 0 auto;
+        margin-right:10px;
+        align-self:center;
+        cursor:pointer;
     }
-  }
-
-  .property-icon {
-    flex: 0 0 auto;
-    margin-right: 10px;
-    align-self: center;
-    cursor: pointer;
-  }
 }
 
 .filtered {
-  /deep/ .checkbox-label-content {
-    background-color: yellow;
-  }
+    /deep/ .checkbox-label-content{
+        background-color: yellow;
+    }
 }
-
-.inner-cell-div {
-  max-width: 100%;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  display: inline;
-  padding-left: 8px;
+.inner-cell-div{
+    max-width: 100%;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: inline;
+    padding-left: 8px;
 }
-
 .error {
-  border: solid 1px @func_color_q;
-  color: @func_color_q;
-  outline: none;
-  box-sizing: border-box;
+    border: solid 1px @func_color_q;
+    color: @func_color_q;
+    outline: none;
+    box-sizing: border-box;
 }
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 601aaae2f9..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
@@ -1,94 +1,84 @@
 @import '../../../../../../assets/styles/variables.less';
-
 .flat-children-container {
-  .dynamic-property-row {
-    /*create nested left border classes for up to 10 levels of nesting*/
-    .nested-border-loop(@i) when (@i > 0) {
-      @size: (@i - 1) *2;
-      &.nested-level-@{i} .table-cell:first-child {
-        border-left: ~"solid @{size}px #009fdb";
-      }
-      .nested-border-loop(@i - 1)
+    .dynamic-property-row {
+        /*create nested left border classes for up to 10 levels of nesting*/
+        .nested-border-loop(@i) when (@i > 0) {
+            @size: (@i - 1) *2;
+            &.nested-level-@{i} .table-cell:first-child {
+                border-left: ~"solid @{size}px #009fdb";
+            }
+            .nested-border-loop(@i - 1)
+        }
+        .nested-border-loop(10);
     }
-    .nested-border-loop(10);
-  }
-
-  .dynamic-property {
-    &:first-child .dynamic-property-row.with-top-border {
-      border-top: solid 1px #d2d2d2;
+    dynamic-property {
+        &:first-child .dynamic-property-row.with-top-border {
+            border-top:solid 1px #d2d2d2;
+        }
+        &:not(:last-child) .dynamic-property-row {
+            border-bottom:solid 1px #d2d2d2;
+        }
     }
-
-    &:not(:last-child) .dynamic-property-row {
-      border-bottom: solid 1px #d2d2d2;
-    }
-  }
 }
-
 .dynamic-property-row {
-  display: flex;
-  flex-direction: row;
-  align-items: stretch;
-
-  &.readonly {
-    background-color: @tlv_color_t;
-    cursor: auto;
-  }
-
-  //for the case that the parent is disabled but the child is enabled
-  &:not(.readonly) {
-    background-color: @main_color_p;
-  }
-
-  .table-cell {
-    flex: 1;
-    padding: 9px;
-    justify-content: center;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    display:flex;
+    flex-direction:row;
+    align-items: stretch;
 
-    &:first-child {
-      flex: 0 0 50%;
-      border-right: #d2d2d2 solid 1px;
-
-      &:only-of-type {
-        flex: 1 1 100%;
-        border-right: none;
-      }
+    &.readonly{
+        background-color: @tlv_color_t;
+        cursor: auto;
     }
-
-    &.empty {
-      height: 40px;
+    //for the case that the parent is disabled but the child is enabled
+    &:not(.readonly){
+        background-color: @main_color_p;
     }
-  }
-
-  .property-icon {
-    flex: 0 0 auto;
-    margin-right: 10px;
-    align-self: center;
-    cursor: pointer;
-  }
 
+    .table-cell {
+        flex: 1;
+        padding:9px;
+        justify-content: center;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        &:first-child {
+            flex: 0 0 50%;
+            border-right:#d2d2d2 solid 1px;
+            &:only-of-type {
+                flex: 1 1 100%;
+                border-right:none;
+            }
+        }
+        &.empty {
+            height:40px;
+        }
+    }
+    .property-icon {
+        flex: 0 0 auto;
+        margin-right:10px;
+        align-self:center;
+        cursor:pointer;
+    }
+    
 }
 
 .filtered {
-  /deep/ .checkbox-label-content {
-    background-color: yellow;
-  }
+    /deep/ .checkbox-label-content{
+        background-color: yellow;
+    }
 }
-
-.inner-cell-div {
-  max-width: 100%;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  display: inline;
-  padding-left: 8px;
+.inner-cell-div{
+    max-width: 100%;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: inline;
+    padding-left: 8px;
 }
-
 .error {
-  border: solid 1px @func_color_q;
-  color: @func_color_q;
-  outline: none;
-  box-sizing: border-box;
+    border: solid 1px @func_color_q;
+    color: @func_color_q;
+    outline: none;
+    box-sizing: border-box;
 }
 
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 ed5db0bc64..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
@@ -1,293 +1,265 @@
 @import './../../../../../assets/styles/mixins.less';
 @import '../../../../../assets/styles/sprite';
-
 @smaller-screen: ~"only screen and (max-width: 1580px)";
 
-:host /deep/ input {
-  width: 100%;
-}
+:host /deep/ input { width:100%;}
 
 .properties-table {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  height: 100%;
-  text-align: left;
-
-
-  .inner-cell-div {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    height: 20px;
-  }
-
-  .inner-cell-div-multiline {
-    max-width: 100%;
-  }
-
-  .table-header {
-    display: flex;
-    flex-direction: row;
-    flex: 0 0 auto;
-    font-weight: bold;
-    border-top: #d2d2d2 solid 1px;
-    background-color: #f2f2f2;
-
-    .table-cell {
-      color: #191919;
-      font-size: 13px;
-
-      .table-header-sort-arrow {
-        display: inline-block;
-        background-color: transparent;
-        border: none;
-        color: #AAA;
-        margin: 8px 0 0 5px;
-
-        &.up {
-          border-left: 5px solid transparent;
-          border-right: 5px solid transparent;
-          border-bottom: 5px solid;
-          height: 5px;
-        }
-
-        &.down {
-          border-left: 5px solid transparent;
-          border-right: 5px solid transparent;
-          border-top: 5px solid;
-        }
-      }
-    }
-  }
-
-  .table-rows-header {
-    border: #d2d2d2 solid 1px;
-    border-top: none;
-    display: flex;
-    align-items: center;
-
-    .archive-label {
-      margin-left: 10px;
-    }
-  }
-
-  .table-body {
-    display: flex;
-    flex-direction: column;
-    overflow-y: auto;
+    display:flex;
+    flex-direction:column;
     flex: 1;
-    background-color: @main_color_p;
-
-    .no-data {
-      border: #d2d2d2 solid 1px;
-      border-top: none;
-      text-align: center;
-      height: 100%;
-      padding: 20px;
-    }
-
-    /deep/ .selected {
-      background-color: #e6f6fb;
-      color: #009fdb;
-    }
-
-    &.view-mode {
-      /deep/ .dynamic-property-row:not(.selected) {
-        background-color: #f8f8f8;
-      }
-    }
+    height:100%;
+    text-align:left;
 
-    .table-row {
-      display: flex;
-      flex-direction: row;
-      flex: 0 0 auto;
-
-      &.readonly {
-        background-color: #f8f8f8;
-        cursor: auto;
-      }
 
-      &:hover:not(.selected) {
-        background-color: #f8f8f8;
-        cursor: pointer;
-
-        /deep/ .dynamic-property-row:not(.selected) {
-          background-color: #f8f8f8;
-          cursor: pointer;
-        }
-      }
-
-      .selected-row {
-        background-color: #e6f6fb;
-      }
-
-      .table-cell.valueCol {
-        padding: 0px;
-
-      }
+    .inner-cell-div {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        height: 20px;
     }
-  }
 
-  .table-cell {
-    font-size: 13px;
-    flex: 1;
-    border: #d2d2d2 solid 1px;
-    border-right: none;
-    border-top: none;
-    padding: 10px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    display: flex;
-    min-height: 40px;
-
-    &:last-child {
-      border-right: #d2d2d2 solid 1px;
+    .inner-cell-div-multiline {
+        max-width: 100%;
     }
 
-    // Column: Property Name
-    &.col1 {
-      flex: 1 0 190px;
-      max-width: 300px;
-      display: flex;
-      @media @smaller-screen {
-        flex: 0 0 25%;
-      }
-
-      .property-name {
-        flex: 1;
+    .table-header {
         display: flex;
-        overflow: hidden;
-        //max-width: 90%; fix bug 327139
-      }
-
-      .property-description-icon {
-        float: right;
-        margin-top: 4px;
-        margin-left: 15px;
+        flex-direction:row;
         flex: 0 0 auto;
-      }
-    }
-
-    // Column: Type
-    &.col2 {
-      flex: 0 0 150px;
-      max-width: 150px;
-      @media @smaller-screen {
-        flex: 0 0 20%;
-      }
+        font-weight:bold;
+        border-top: #d2d2d2 solid 1px;
+        background-color: #f2f2f2;
+
+        .table-cell {
+            color:#191919;
+            font-size:13px;
+            .table-header-sort-arrow {
+                display: inline-block;
+                background-color: transparent;
+                border: none;
+                color: #AAA;
+                margin: 8px 0 0 5px;
+                &.up {
+                    border-left: 5px solid transparent;
+                    border-right: 5px solid transparent;
+                    border-bottom: 5px solid;
+                    height:5px;
+                }
+                &.down {
+                    border-left: 5px solid transparent;
+                    border-right: 5px solid transparent;
+                    border-top: 5px solid;                    
+                }
+            }
+        }
     }
 
-    // Column: ES
-    &.col3 {
-      flex: 0 0 120px;
-      max-width: 120px;
-      @media @smaller-screen {
-        flex: 0 0 15%;
-      }
+    .table-rows-header {
+        border: #d2d2d2 solid 1px;
+        border-top:none;
+        display: flex;
+        align-items: center;
+        .archive-label{
+            margin-left: 10px;
+        }
     }
 
-    // Column: Value
-    &.valueCol {
-      flex: 2 0 250px;
-      display: flex;
-      @media @smaller-screen {
-        flex: 1 0 40%;
-      }
+    .table-body {
+        display:flex;
+        flex-direction: column;
+        overflow-y:auto;
+        flex: 1;
+        background-color: @main_color_p;
+
+        .no-data {
+            border: #d2d2d2 solid 1px;
+            border-top:none;
+            text-align: center;
+            height: 100%;
+            padding: 20px;
+        }
+        /deep/.selected{
+            background-color: #e6f6fb;
+            color:  #009fdb;
+        }
+        &.view-mode{
+            /deep/ .dynamic-property-row:not(.selected){
+                background-color:#f8f8f8;
+            }
+        }
+        .table-row {
+            display: flex;
+            flex-direction:row;
+            flex: 0 0 auto;
+            &.readonly{
+                background-color: #f8f8f8;
+                cursor: auto;
+            }
+
+            &:hover:not(.selected){
+                background-color:#f8f8f8; cursor:pointer;
+                /deep/ .dynamic-property-row:not(.selected){
+                    background-color:#f8f8f8; cursor:pointer;
+                }
+            }
+
+            .selected-row {
+                background-color:#e6f6fb;
+            }
+
+            .table-cell.valueCol {
+                padding:0px;
+
+            }
+        }
     }
+    .table-cell {
+        font-size:13px;
+        flex:1;
+        border: #d2d2d2 solid 1px;
+        border-right:none;
+        border-top:none;
+        padding:10px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow:hidden;
+        display: flex;
+        min-height:40px;
 
+        &:last-child {
+            border-right:#d2d2d2 solid 1px;
+        }
 
-    /deep/ .checkbox-container {
-      margin-right: 10px;
-    }
-
-    /deep/ &.round-checkbox {
-      .checkbox-container input[type=checkbox].checkbox-hidden {
-        &:checked ~ .checkbox-icon::before {
-          .sprite-new;
-          .round-checked-icon;
+        // Column: Property Name
+        &.col1 {
+            flex: 1 0 190px;
+            max-width:300px;
+            display: flex;            
+            @media @smaller-screen { flex: 0 0 25%;}
+
+            .property-name {
+                flex: 1;
+                display: flex;
+                overflow: hidden;
+                //max-width: 90%; fix bug 327139
+            }
+
+            .property-description-icon {
+                float: right;
+                margin-top: 4px;
+                margin-left: 15px;
+                flex: 0 0 auto;
+            }
         }
 
-        &[disabled] ~ .checkbox-icon::before {
-          .sprite-new;
-          .round-checked-icon.disabled;
-          background-color: inherit;
-          border: none;
-          //animation: addDisabledCheck 4s linear;
+        // Column: Type
+        &.col2 {
+            flex: 0 0 150px;
+            max-width:150px;
+            @media @smaller-screen { flex: 0 0 20%;}
         }
-      }
-    }
-  }
 
-  .delete-button-container {
-    max-height: 24px;
-    cursor: pointer;
-  }
+        // Column: ES
+        &.col3 {
+            flex:0 0 120px;
+            max-width:120px;
+            @media @smaller-screen { flex: 0 0 15%;}
+        }
 
-  .filtered {
-    /deep/ .checkbox-label-content {
-      background-color: yellow;
-    }
-  }
+        // Column: Value
+        &.valueCol {
+            flex: 2 0 250px;
+            display: flex;
+            @media @smaller-screen { flex: 1 0 40%;}
+        }
 
-  .dynamic-property {
-    width: 100%;
 
-    &:last-child /deep/ .dynamic-property-row {
-      border-bottom: none;
-    }
-  }
+        /deep/ .checkbox-container {
+            margin-right: 10px;
+        }
 
-  .table-row {
-    /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
-      background: linear-gradient(to right, transparent 0%, #ffffff 80%);
-      padding-left: 1em;
+        /deep/ &.round-checkbox {
+            .checkbox-container input[type=checkbox].checkbox-hidden {
+                &:checked ~ .checkbox-icon::before {
+                    .sprite-new;
+                    .round-checked-icon;
+                }
+                &[disabled] ~ .checkbox-icon::before {
+                    .sprite-new;
+                    .round-checked-icon.disabled;
+                    background-color:inherit;
+                    border:none;
+                    //animation: addDisabledCheck 4s linear;
+                }
+            }
+        }
     }
 
-    &.selected /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
-      background: linear-gradient(to right, transparent 0%, #e6f6fb 80%);
-      padding-left: 1em;
+    .delete-button-container {
+        max-height: 24px;
+        cursor: pointer;
     }
 
-    &.readonly /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
-      background: linear-gradient(to right, transparent 0%, #f8f8f8 80%);
-      padding-left: 1em;
+    .filtered {
+        /deep/ .checkbox-label-content{
+            background-color: yellow;
+        }
     }
 
-    &:hover:not(.selected) /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
-      background: linear-gradient(to right, transparent 0%, #f8f8f8 80%);
-      padding-left: 1em;
+    dynamic-property {
+        width:100%;
+        &:last-child /deep/ .dynamic-property-row {
+            border-bottom:none;
+        }
     }
-  }
 
-  .prop-instance-icon {
-    vertical-align: middle;
-    margin-right: 7px;
-
-    &.defaulticon.small {
-      background-color: @main_color_q;
-      border-radius: 14px;
-    }
+    .table-row {
+        /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
+            background: linear-gradient(to right, transparent 0%, #ffffff 80%);
+            padding-left: 1em;
+        }
 
-    // square icons
+        &.selected /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
+            background: linear-gradient(to right, transparent 0%, #e6f6fb 80%);
+            padding-left: 1em;
+        }
 
-    &.icon-group {
-      .square-icon();
-      background-color: @main_color_a;
+        &.readonly /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
+            background: linear-gradient(to right, transparent 0%, #f8f8f8 80%);
+            padding-left: 1em;
+        }
 
-      &::before {
-        content: "G";
-      }
+        &:hover:not(.selected) /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
+            background: linear-gradient(to right, transparent 0%, #f8f8f8 80%);
+            padding-left: 1em;
+        }
     }
 
-    &.icon-policy {
-      .square-icon();
-      background-color: @main_color_r;
+    .prop-instance-icon {
+        vertical-align: middle;
+        margin-right: 7px;
+        &.defaulticon.small {
+            background-color: @main_color_q;
+            border-radius:14px;           
+        }
+        // square icons
+ 
+        &.icon-group {
+            .square-icon();
+            background-color: @main_color_a;
+
+            &::before {
+                content: "G";
+            }
+        }
+        &.icon-policy {
+            .square-icon();
+            background-color: @main_color_r;
+
+            &::before {
+                content: "P";
+            }
+        }
 
-      &::before {
-        content: "P";
-      }
     }
-
-  }
 }
diff --git a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-reqiurement-or-capability.component.less b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-reqiurement-or-capability.component.less
index df3797e069..edcb87db3d 100644
--- a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-reqiurement-or-capability.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-reqiurement-or-capability.component.less
@@ -1,94 +1,76 @@
 @import './../../../../../assets/styles/variables.less';
 @import './../../../../../assets/styles/mixins.less';
-
-.main-container {
+.main-container{
   color: @main_color_m;
 }
-
 .select-req-or-cap-span {
   float: left;
   margin-right: 15px;
   font-size: 13px;
 }
-
-.select-type-label {
+.select-type-label{
   .m_12_m;
   margin-bottom: 2px;
 }
-
-.select-type {
+.select-type{
   display: flex;
   margin-bottom: 10px;
-
-  .ui-element-dropdown {
+  ui-element-dropdown{
     width: 40%;
     font-size: 13px;
-
-    /deep/ select {
+    /deep/ select{
       height: 31px;
     }
   }
 }
-
-.table-and-list-container {
+.table-and-list-container{
   display: flex;
   padding-top: 10px;
-
-  .inner-container {
+  .inner-container{
     height: 300px;
     overflow-y: auto;
     border: @main_color_o solid 1px;
   }
-
-  .inner-container:not(:last-of-type) {
+  .inner-container:not(:last-of-type){
     border-right: none;
   }
-
   .requirements-or-capabilities-container {
     width: 40%;
-
-    &.empty-list {
+    &.empty-list{
       background-color: @tlv_color_t;
       text-align: center;
-
-      &:before {
+      &:before{
         content: 'Select "type" above';
         line-height: 298px;
       }
     }
-
-    .req-or-cap-item {
+    .req-or-cap-item{
       border-bottom: @main_color_o solid 1px;
       padding: 10px;
       font-size: 13px;
-
-      &:hover:not(.selected) {
-        background-color: @tlv_color_t;
-        cursor: pointer;
+      &:hover:not(.selected){
+        background-color:@tlv_color_t; cursor:pointer;
       }
     }
   }
-
-  .properties-table-container {
+  .properties-table-container{
     width: 60%;
     display: flex;
-
-    &.cap-selected {
+    &.cap-selected{
       background-color: @tlv_color_t;
       border: @main_color_a solid 1px;
-      -webkit-box-shadow: inset 8px -2px 7px -9px rgba(84, 84, 84, 1);
-      -moz-box-shadow: inset 8px -2px 7px -9px rgba(84, 84, 84, 1);
-      box-shadow: inset 8px -2px 7px -9px rgba(84, 84, 84, 1);
+      -webkit-box-shadow: inset 8px -2px 7px -9px rgba(84,84,84,1);
+      -moz-box-shadow: inset 8px -2px 7px -9px rgba(84,84,84,1);
+      box-shadow: inset 8px -2px 7px -9px rgba(84,84,84,1);
     }
-
-    .properties-table {
+    properties-table{
       margin: 15px;
       width: 100%;
     }
   }
 }
 
-.selected {
+.selected{
   color: @main_color_a;
   background-color: @tlv_color_v;
   border-left: @main_color_a solid 4px;
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 f854f809d8..9b1535864e 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
@@ -12,26 +12,22 @@
     color: @main_color_a;
     box-shadow: 0 2px 7px @main_color_o;
     border-bottom: 1px solid @main_color_o;
-
     .checkbox-label {
       margin-top: 14px;
-
       .checkbox-label-content {
         font-size: 14px;
       }
     }
-
     .checkbox-container input[type=checkbox].checkbox-hidden[disabled] ~ .checkbox-label-content {
       opacity: 0.5;
     }
-
     .delete-btn {
       background-position: -137px -415px;
       width: 24px;
       height: 24px
     }
 
-    .loader {
+    loader {
       top: 20px;
     }
   }
@@ -54,24 +50,19 @@
         justify-content: space-between;
         margin-left: 5px;
         width: 180px;
-
         .delete-icon {
           visibility: hidden;
         }
-
         &:not(.readonly):hover {
           .a_1;
         }
-
-        &:hover .delete-icon {
+        &:hover .delete-icon{
           visibility: visible;
         }
-
         &.readonly {
           opacity: 0.5;
         }
       }
-
       .filter-desc {
         .sdc-ellipsis;
         width: 220px;
@@ -81,21 +72,19 @@
 
     }
   }
-
   .w-sdc-designer-sidebar-section-node-filter-footer {
     margin-top: 10px;
     margin-bottom: 10px;
     text-align: center;
     width: 100%;
   }
-
   .w-sdc-designer-sidebar-section-node-filter-footer-action {
     width: 180px;
     margin-top: 10px;
   }
 }
 
-/deep/ .sdc-accordion {
+/deep/.sdc-accordion {
   margin-bottom: 0;
   display: grid;
 
@@ -115,12 +104,11 @@
   .sdc-accordion-body.open {
     padding-left: 0;
     padding-top: 0;
-
     .sdc-accordion-header { /*Second level - nested accordion */
       background-color: #f8f8f8;
       padding: 4px 20px 4px 37px;
       border-bottom: 1px solid #d2d2d2;
-      border-left: none;
+      border-left:none;
       height: 30px;
     }
   }