Sync Integ to Master

Change-Id: I71e3acc26fa612127756ac04073a522b9cc6cd74
Issue-ID: SDC-977
Signed-off-by: Gitelman, Tal (tg851x) <tg851x@intl.att.com>

14 files changed, 292 insertions, 6 deletions

diff --git a/catalog-ui/src/assets/styles/app.less b/catalog-ui/src/assets/styles/app.less
index 8042c0e7b7..f48fd864ef 100644
--- a/catalog-ui/src/assets/styles/app.less
+++ b/catalog-ui/src/assets/styles/app.less
@@ -14,6 +14,8 @@
 @import 'sprite.less';
 @import 'sprite-resource-icons.less';
 @import 'sprite-services-icons.less';
+@import 'sprite-group-icons.less';
+@import 'sprite-policy-icons.less';
 
 @import 'animation.less';
 @import 'buttons.less';
@@ -35,6 +37,7 @@
 @import 'welcome-sprite.less';
 @import 'welcome-style.less';
 @import 'notification-template.less';
+@import 'tables.less';
 
 // Less insides specific files.
 @import '../../app/directives/ecomp-header/ecomp-header.less';
diff --git a/catalog-ui/src/assets/styles/images/canvas-tagging-icons/adding.svg b/catalog-ui/src/assets/styles/images/canvas-tagging-icons/adding.svg
new file mode 100644
index 0000000000..1a9a507948
--- /dev/null
+++ b/catalog-ui/src/assets/styles/images/canvas-tagging-icons/adding.svg
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="44px" height="44px" viewBox="0 0 44 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
+    <title>Group 12</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <filter x="-79.5%" y="-65.9%" width="259.1%" height="259.1%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="3" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <linearGradient x1="0%" y1="0%" x2="104.899315%" y2="128.265625%" id="linearGradient-2">
+            <stop stop-color="#009E98" offset="0%"></stop>
+            <stop stop-color="#97D648" offset="100%"></stop>
+        </linearGradient>
+        <path d="M3,0 L19,0 C20.6568542,-3.04359188e-16 22,1.34314575 22,3 L22,19 C22,20.6568542 20.6568542,22 19,22 L3,22 C1.34314575,22 2.02906125e-16,20.6568542 0,19 L0,3 C-2.02906125e-16,1.34314575 1.34314575,3.04359188e-16 3,0 Z" id="path-3"></path>
+        <filter x="-11.4%" y="-11.4%" width="122.7%" height="122.7%" filterUnits="objectBoundingBox" id="filter-4">
+            <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
+            <feOffset dx="0" dy="0" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
+            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0.478431373   0 0 0 0 0.243137255  0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+        </filter>
+        <path d="M6,4 L6,1 C6,0.4 5.6,0 5,0 C4.4,0 4,0.4 4,1 L4,4 L1,4 C0.4,4 0,4.4 0,5 C0,5.6 0.4,6 1,6 L4,6 L4,9 C4,9.6 4.4,10 5,10 C5.6,10 6,9.6 6,9 L6,6 L9,6 C9.6,6 10,5.6 10,5 C10,4.4 9.6,4 9,4 L6,4 Z" id="path-5"></path>
+    </defs>
+    <g id="sdc" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group-12" transform="translate(11.000000, 8.000000)">
+            <g id="Group-4-Copy">
+                <g id="Group-3" filter="url(#filter-1)">
+                    <g id="Rectangle-15-Copy-5">
+                        <use fill="url(#linearGradient-2)" fill-rule="evenodd" xlink:href="#path-3"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
+                        <use stroke="#FFFFFF" stroke-width="2" xlink:href="#path-3"></use>
+                    </g>
+                </g>
+            </g>
+            <g id="color-/-gray-#5A5A5A-/-idle--Copy-34" transform="translate(6.000000, 6.000000)">
+                <mask id="mask-6" fill="white">
+                    <use xlink:href="#path-5"></use>
+                </mask>
+                <use id="Mask" fill="#FFFFFF" xlink:href="#path-5"></use>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/catalog-ui/src/assets/styles/images/canvas-tagging-icons/adding_group.svg b/catalog-ui/src/assets/styles/images/canvas-tagging-icons/adding_group.svg
new file mode 100644
index 0000000000..90920e9001
--- /dev/null
+++ b/catalog-ui/src/assets/styles/images/canvas-tagging-icons/adding_group.svg
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
+    <title>Group 12 Copy</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <filter x="-22.7%" y="-13.6%" width="145.5%" height="145.5%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <path d="M6,4 L6,1 C6,0.4 5.6,0 5,0 C4.4,0 4,0.4 4,1 L4,4 L1,4 C0.4,4 0,4.4 0,5 C0,5.6 0.4,6 1,6 L4,6 L4,9 C4,9.6 4.4,10 5,10 C5.6,10 6,9.6 6,9 L6,6 L9,6 C9.6,6 10,5.6 10,5 C10,4.4 9.6,4 9,4 L6,4 Z" id="path-2"></path>
+    </defs>
+    <g id="sdc" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group-12-Copy" transform="translate(3.000000, 1.000000)">
+            <g id="Group-4-Copy" filter="url(#filter-1)" fill="#009FDB" stroke="#FFFFFF">
+                <g id="Group-3">
+                    <path d="M3,0 L19,0 C20.6568542,-3.04359188e-16 22,1.34314575 22,3 L22,19 C22,20.6568542 20.6568542,22 19,22 L3,22 C1.34314575,22 2.02906125e-16,20.6568542 0,19 L0,3 C-2.02906125e-16,1.34314575 1.34314575,3.04359188e-16 3,0 Z" id="Rectangle-15-Copy-5"></path>
+                </g>
+            </g>
+            <g id="color-/-gray-#5A5A5A-/-idle--Copy-34" transform="translate(6.000000, 6.000000)">
+                <mask id="mask-3" fill="white">
+                    <use xlink:href="#path-2"></use>
+                </mask>
+                <use id="Mask" fill="#FFFFFF" xlink:href="#path-2"></use>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/catalog-ui/src/assets/styles/images/canvas-tagging-icons/adding_policy.svg b/catalog-ui/src/assets/styles/images/canvas-tagging-icons/adding_policy.svg
new file mode 100644
index 0000000000..217d92c654
--- /dev/null
+++ b/catalog-ui/src/assets/styles/images/canvas-tagging-icons/adding_policy.svg
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
+    <title>Group 12 Copy</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <filter x="-22.7%" y="-13.6%" width="145.5%" height="145.5%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <path d="M6,4 L6,1 C6,0.4 5.6,0 5,0 C4.4,0 4,0.4 4,1 L4,4 L1,4 C0.4,4 0,4.4 0,5 C0,5.6 0.4,6 1,6 L4,6 L4,9 C4,9.6 4.4,10 5,10 C5.6,10 6,9.6 6,9 L6,6 L9,6 C9.6,6 10,5.6 10,5 C10,4.4 9.6,4 9,4 L6,4 Z" id="path-2"></path>
+    </defs>
+    <g id="sdc" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group-12-Copy" transform="translate(3.000000, 1.000000)">
+            <g id="Group-4-Copy" filter="url(#filter-1)" fill="#0568AE" stroke="#FFFFFF">
+                <g id="Group-3">
+                    <path d="M3,0 L19,0 C20.6568542,-3.04359188e-16 22,1.34314575 22,3 L22,19 C22,20.6568542 20.6568542,22 19,22 L3,22 C1.34314575,22 2.02906125e-16,20.6568542 0,19 L0,3 C-2.02906125e-16,1.34314575 1.34314575,3.04359188e-16 3,0 Z" id="Rectangle-15-Copy-5"></path>
+                </g>
+            </g>
+            <g id="color-/-gray-#5A5A5A-/-idle--Copy-34" transform="translate(6.000000, 6.000000)">
+                <mask id="mask-3" fill="white">
+                    <use xlink:href="#path-2"></use>
+                </mask>
+                <use id="Mask" fill="#FFFFFF" xlink:href="#path-2"></use>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/catalog-ui/src/assets/styles/images/canvas-tagging-icons/group_added.svg b/catalog-ui/src/assets/styles/images/canvas-tagging-icons/group_added.svg
new file mode 100644
index 0000000000..d88e7ca343
--- /dev/null
+++ b/catalog-ui/src/assets/styles/images/canvas-tagging-icons/group_added.svg
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
+    <title>Group 13</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M3,0 L15,0 C16.6568542,-3.04359188e-16 18,1.34314575 18,3 L18,15 C18,16.6568542 16.6568542,18 15,18 L3,18 C1.34314575,18 -6.85272294e-16,16.6568542 -8.8817842e-16,15 L0,3 C-2.02906125e-16,1.34314575 1.34314575,-5.83819232e-16 3,-8.8817842e-16 Z" id="path-1"></path>
+        <filter x="-25.0%" y="-13.9%" width="150.0%" height="150.0%" filterUnits="objectBoundingBox" id="filter-2">
+            <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
+            <feOffset dx="0" dy="2" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+        <path d="M12.6603086,4.57405469 L8.30209375,11.5833406 L5.57568359,9.20957266 C5.13068359,8.77957266 4.46368359,8.77957266 4.01968359,9.20957266 C3.57568359,9.64057266 3.57568359,10.2865727 4.01968359,10.7175727 L7.52409375,13.8453406 C7.74609375,14.0603406 7.96809375,14.1683406 8.30209375,14.1683406 C8.63509375,14.1683406 8.85809375,14.0603406 9.07909375,13.8453406 L14.2163086,6.08105469 C14.6603086,5.65105469 14.6603086,5.00505469 14.2163086,4.57405469 C13.7723086,4.14305469 13.1053086,4.14305469 12.6603086,4.57405469 Z" id="path-3"></path>
+    </defs>
+    <g id="sdc" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group-13" transform="translate(3.000000, 1.000000)">
+            <g id="Group-4-Copy-9">
+                <g id="Group-3">
+                    <g id="Rectangle-15-Copy-5">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                        <use stroke="#FFFFFF" stroke-width="1" fill="#009FDB" fill-rule="evenodd" xlink:href="#path-1"></use>
+                    </g>
+                </g>
+            </g>
+            <mask id="mask-4" fill="white">
+                <use xlink:href="#path-3"></use>
+            </mask>
+            <use id="Mask" fill="#FFFFFF" xlink:href="#path-3"></use>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/catalog-ui/src/assets/styles/images/canvas-tagging-icons/indication.svg b/catalog-ui/src/assets/styles/images/canvas-tagging-icons/indication.svg
new file mode 100644
index 0000000000..7581d0447e
--- /dev/null
+++ b/catalog-ui/src/assets/styles/images/canvas-tagging-icons/indication.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
+    <title>Group 4 Copy 10</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M3,0 L15,0 C16.6568542,-3.04359188e-16 18,1.34314575 18,3 L18,15 C18,16.6568542 16.6568542,18 15,18 L3,18 C1.34314575,18 -6.85272294e-16,16.6568542 -8.8817842e-16,15 L0,3 C-2.02906125e-16,1.34314575 1.34314575,-5.83819232e-16 3,-8.8817842e-16 Z" id="path-1"></path>
+        <filter x="-41.7%" y="-30.6%" width="183.3%" height="183.3%" filterUnits="objectBoundingBox" id="filter-2">
+            <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
+            <feOffset dx="0" dy="2" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="sdc" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group-4-Copy-10" transform="translate(5.000000, 3.000000)">
+            <g id="Group-3">
+                <g id="Rectangle-15-Copy-5">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                    <use stroke="#FFFFFF" stroke-width="1" fill-opacity="0.3" fill="#009FDB" fill-rule="evenodd" xlink:href="#path-1"></use>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/catalog-ui/src/assets/styles/images/canvas-tagging-icons/policy_added.svg b/catalog-ui/src/assets/styles/images/canvas-tagging-icons/policy_added.svg
new file mode 100644
index 0000000000..9ff39019c7
--- /dev/null
+++ b/catalog-ui/src/assets/styles/images/canvas-tagging-icons/policy_added.svg
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
+    <title>Group 13 Copy</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M3,0 L15,0 C16.6568542,-3.04359188e-16 18,1.34314575 18,3 L18,15 C18,16.6568542 16.6568542,18 15,18 L3,18 C1.34314575,18 -6.85272294e-16,16.6568542 -8.8817842e-16,15 L0,3 C-2.02906125e-16,1.34314575 1.34314575,-5.83819232e-16 3,-8.8817842e-16 Z" id="path-1"></path>
+        <filter x="-25.0%" y="-13.9%" width="150.0%" height="150.0%" filterUnits="objectBoundingBox" id="filter-2">
+            <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
+            <feOffset dx="0" dy="2" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+        <path d="M12.6603086,4.57405469 L8.30209375,11.5833406 L5.57568359,9.20957266 C5.13068359,8.77957266 4.46368359,8.77957266 4.01968359,9.20957266 C3.57568359,9.64057266 3.57568359,10.2865727 4.01968359,10.7175727 L7.52409375,13.8453406 C7.74609375,14.0603406 7.96809375,14.1683406 8.30209375,14.1683406 C8.63509375,14.1683406 8.85809375,14.0603406 9.07909375,13.8453406 L14.2163086,6.08105469 C14.6603086,5.65105469 14.6603086,5.00505469 14.2163086,4.57405469 C13.7723086,4.14305469 13.1053086,4.14305469 12.6603086,4.57405469 Z" id="path-3"></path>
+    </defs>
+    <g id="sdc" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group-13-Copy" transform="translate(3.000000, 1.000000)">
+            <g id="Group-4-Copy-9">
+                <g id="Group-3">
+                    <g id="Rectangle-15-Copy-5">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                        <use stroke="#FFFFFF" stroke-width="1" fill="#0568AE" fill-rule="evenodd" xlink:href="#path-1"></use>
+                    </g>
+                </g>
+            </g>
+            <mask id="mask-4" fill="white">
+                <use xlink:href="#path-3"></use>
+            </mask>
+            <use id="Mask" fill="#FFFFFF" xlink:href="#path-3"></use>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/catalog-ui/src/assets/styles/images/resource-icons/monitoring_template.png b/catalog-ui/src/assets/styles/images/resource-icons/monitoring_template.png
new file mode 100644
index 0000000000..f5b73989a6
--- /dev/null
+++ b/catalog-ui/src/assets/styles/images/resource-icons/monitoring_template.png
diff --git a/catalog-ui/src/assets/styles/images/sprites/sprite-policy-groups-icons.png b/catalog-ui/src/assets/styles/images/sprites/sprite-policy-groups-icons.png
new file mode 100644
index 0000000000..fe1723e2fa
--- /dev/null
+++ b/catalog-ui/src/assets/styles/images/sprites/sprite-policy-groups-icons.png
diff --git a/catalog-ui/src/assets/styles/sprite-group-icons.less b/catalog-ui/src/assets/styles/sprite-group-icons.less
new file mode 100644
index 0000000000..47340adbb3
--- /dev/null
+++ b/catalog-ui/src/assets/styles/sprite-group-icons.less
@@ -0,0 +1,11 @@
+.sprite-group-icons {
+  background-image: url('images/sprites/sprite-policy-groups-icons.png');
+  display: inline-block;
+}
+
+.sprite-group-icons.disable               { opacity:0.5;}
+.sprite-group-icons.group                 { background-position: -43px -42px; width: 40px; height: 40px;}
+.sprite-group-icons.group-border          { background-position: -123px -36px; width: 55px; height: 55px;}
+
+sprite-group-icons.group-empty            { background-position: -40px -274px; width: 47px; height: 47px;}
+sprite-group-icons.group-empty-border     { background-position: -123px -270px; width: 55px; height: 55px;}
\ No newline at end of file
diff --git a/catalog-ui/src/assets/styles/sprite-policy-icons.less b/catalog-ui/src/assets/styles/sprite-policy-icons.less
new file mode 100644
index 0000000000..154cf0b6a3
--- /dev/null
+++ b/catalog-ui/src/assets/styles/sprite-policy-icons.less
@@ -0,0 +1,12 @@
+.sprite-policy-icons {
+  background-image: url('images/sprites/sprite-policy-groups-icons.png');
+  display: inline-block;
+}
+
+.sprite-policy-icons.disable              { opacity:0.5;}
+
+.sprite-policy-icons.policy               { background-position: -42px -130px; width: 40px; height: 40px;}
+.sprite-policy-icons.policy-border        { background-position: -123px -123px; width: 55px; height: 55px;}
+
+.sprite-policy-icons.policy-empty         { background-position: -40px -546px; width: 47px; height: 47px;}
+.sprite-policy-icons.policy-empty-border  { background-position: -123px -542px; width: 55px; height: 55px;}
diff --git a/catalog-ui/src/assets/styles/sprite-resource-icons.less b/catalog-ui/src/assets/styles/sprite-resource-icons.less
index 96993d5171..2f542d661c 100644
--- a/catalog-ui/src/assets/styles/sprite-resource-icons.less
+++ b/catalog-ui/src/assets/styles/sprite-resource-icons.less
@@ -195,10 +195,10 @@
 .sprite-resource-icons.ucpe.medium              { background-position: -141px -3137px; width: 41px; height: 41px;}
 .sprite-resource-icons.ucpe.large               { background-position: -70px -3119px; width: 60px; height: 60px;}
 
-.sprite-resource-icons.vrouter                  { background-position: -282px -3066px; width: 69px; height: 43px;}
-.sprite-resource-icons.vrouter.small            { background-position: -210px -3080px; width: 29px; height: 29px;}
-.sprite-resource-icons.vrouter.medium           { background-position: -141px -3068px; width: 41px; height: 41px;}
-.sprite-resource-icons.vrouter.large            { background-position:  -70px -3049px; width: 60px; height: 60px;}
+.sprite-resource-icons.vRouter                  { background-position: -282px -3066px; width: 69px; height: 43px;}
+.sprite-resource-icons.vRouter.small            { background-position: -210px -3080px; width: 29px; height: 29px;}
+.sprite-resource-icons.vRouter.medium           { background-position: -141px -3068px; width: 41px; height: 41px;}
+.sprite-resource-icons.vRouter.large            { background-position:  -70px -3049px; width: 60px; height: 60px;}
 
 .sprite-resource-icons.wanx                    { background-position: -283px -2992px; width: 58px; height: 47px;}
 .sprite-resource-icons.wanx.small              { background-position: -210px -3009px; width: 30px; height: 30px;}
diff --git a/catalog-ui/src/assets/styles/sprite.less b/catalog-ui/src/assets/styles/sprite.less
index 107cb815ee..aaf4f5529a 100644
--- a/catalog-ui/src/assets/styles/sprite.less
+++ b/catalog-ui/src/assets/styles/sprite.less
@@ -231,8 +231,8 @@
 .asc{background-position: -924px -71px;  width: 8px;  height: 12px;}
 .desc{background-position: -924px -101px;  width: 8px;  height: 12px;}
 
-.delete-item-icon       { background-position: -140px -1119px;  width: 11px;  height: 15px; }
-.delete-item-icon:hover { background-position: -167px -1119px;  width: 11px;  height: 15px; }
+.delete-item-icon       { background-position: -140px -1118px;  width: 11px;  height: 15px; }
+.delete-item-icon:hover { background-position: -167px -1118px;  width: 11px;  height: 15px; }
 .filter-icon            { background-position: -48px -1040px;  width: 19px;  height: 20px;}
 .filter-icon:hover      { background-position: -99px -1040px;  width: 19px;  height: 20px;}
 .filled-checkbox-icon   { background-position: -100px -1079px;  width: 14px;  height: 14px;}
diff --git a/catalog-ui/src/assets/styles/tables.less b/catalog-ui/src/assets/styles/tables.less
new file mode 100644
index 0000000000..6bac2588a4
--- /dev/null
+++ b/catalog-ui/src/assets/styles/tables.less
@@ -0,0 +1,54 @@
+.generic-table {
+  border: solid 1px @main_color_o;
+  color: @main_color_m;
+  background-color: @func_color_r;
+  font-size: 13px;
+  font-family: @font-opensans-regular;
+  overflow-y: auto;
+
+  .cell {
+    flex: 1;
+    padding: 10px;
+    border-right: @main_color_o solid 1px;
+    &:last-child {
+      margin: 0;
+      flex: 0.1;
+      border: none;
+    }
+  }
+
+  .header-row {
+    display: flex;
+    flex-basis: 100%;
+    background-color: @func_color_r;
+    color: @func_color_s;
+    font-weight: bold;
+    border-bottom: @main_color_o solid 1px;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    .header-cell {
+      padding: 10px;
+    }
+  }
+
+  .data-row {
+    display: flex;
+    flex-basis: 100%;
+    border-bottom: @main_color_o solid 1px;
+    background-color: @main_color_p;
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .no-row-text {
+    color: @main_color_m;
+    display: flex;
+    flex-basis: 100%;
+    background-color: @main_color_p;
+    padding: 20px;
+    justify-content: center;
+    font-size: 14px;
+  }
+}
\ No newline at end of file