ATLAS-2102 : Atlas UI Improvements: Search results page. patch has (ATLAS-2103,2104,2105,2107,2108)

dashboardv2/public/css/scss/__mixin.scss

+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@mixin clearfix() {
+    &:before,
+    &:after {
+        content: " "; // 1
+        display: table; // 2
+    }
+    &:after {
+        clear: both;
+    }
+}
+
+@mixin ellipsis() {
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+@mixin transition($transition...) {
+    -webkit-transition: $transition;
+    -moz-transition: $transition;
+    -o-transition: $transition;
+    transition: $transition;
+}
+
+@mixin transition-property($properties...) {
+    -webkit-transition-property: $properties;
+    -moz-transition-property: $properties;
+    -o-transition-property: $properties;
+    transition-property: $properties;
+}
+
+@mixin btn-action-effect($color) {
+    @if $color=='default' {
+        border: 1px $color_keppel_approx solid;
+        color: $color_keppel_approx;
+    }
+
+    @else if $color=='blue' {
+        border: 1px $color_havelock_blue_approx solid;
+        color: $color_havelock_blue_approx;
+    }
+}
+
+@mixin btn-action-hover-effect($color1) {
+    @if $color1=='default' {
+        background-color: $color_keppel_approx;
+        color: $white;
+    }
+
+    @else if $color1=='blue' {
+        color: $white;
+        background-color: $tag_color;
+    }
+}
\ No newline at end of file

dashboardv2/public/css/scss/breadcrumb.scss

@@ -25,9 +25,9 @@
     margin-bottom: 0;
     font-weight: 600;
     line-height: 44px;
-    > li {
+    >li {
         display: inline-block;
-        + li:before {
+        +li:before {
             padding: 0 10px;
             font-family: $font_2;
             color: $color_ironside_gray_approx;
@@ -37,8 +37,8 @@
 }
 
 .breadcrumb-menu,
-.breadcrumb-dropdown + li:before,
-.breadcrumb-ellipsis + li:before {
+.breadcrumb-dropdown+li:before,
+.breadcrumb-ellipsis+li:before {
     display: none;
 }
 

dashboardv2/public/css/scss/business-catlog.scss

@@ -22,10 +22,8 @@
 .main-search {
     .form-control {
         border: none;
-        border-left: 1px $color_mystic_approx solid;
-        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
-        border-radius: 0;
-        //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+        border-left: 1px $color_mystic_approx solid; //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+        border-radius: 0; //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
         box-shadow: none;
         height: 60px;
         font-size: 18px;
@@ -47,12 +45,11 @@
     display: block !important;
 }
 
-.dropdown-menu > li > a {
+.dropdown-menu>li>a {
     color: $color_jungle_green_approx;
     padding: 6px 20px;
-    text-overflow: ellipsis;
     max-width: 276px;
-    overflow: hidden;
+    @include ellipsis();
 }
 
 .branchListParent {
@@ -81,10 +78,8 @@ ul[data-id=branchList] {
     padding-bottom: 18px;
     display: list-item;
     .form-control {
-        border-right: none;
-        //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
-        box-shadow: none;
-        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+        border-right: none; //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+        box-shadow: none; //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
         border-radius: 4px;
     }
     .input-group-addon {
@@ -96,14 +91,37 @@ ul[data-id=branchList] {
     padding-bottom: 5px;
 }
 
-.lineageLabel {
-    padding-bottom: 10px;
-}
-
-.detailLabel {
-    padding-bottom: 10px;
-}
-
 .termNote {
     padding-top: 10px;
 }
+
+.termTableBreadcrumb {
+    >div {
+        @include clearfix();
+        display: block;
+        width: 100%;
+    }
+    .hide {
+        opacity: 0;
+        overflow: hidden;
+        height: 0px;
+        display: block !important;
+    }
+    .show {
+        opacity: 1;
+        overflow: visible;
+        height: auto;
+    }
+    .liContent {
+        float: left;
+        line-height: 21px !important;
+        padding: 0px 10px 0px 0px !important;
+    }
+    >div a {
+        .fa-trash,
+        .fa-ellipsis-h {
+            color: $tag_color;
+            cursor: pointer;
+        }
+    }
+}
\ No newline at end of file

dashboardv2/public/css/scss/form.scss

@@ -19,16 +19,53 @@
 
 /* form.scss */
 
-.form-control {
+.form-horizontal {
+    .control-label-sm {
+        padding-top: 3px;
+    }
+    .control-label-sm-pl {
+        @extend .control-label-sm;
+        padding-left: 10px;
+    }
+    .control-label-sm-pr {
+        @extend .control-label-sm;
+        padding-right: 10px;
+    }
+}
+
+.form-group {
+    .required:after {
+        content: "*";
+        padding-left: 1%;
+        color: $red
+    }
+
+    .control-label {
+        &.text-left {
+            text-align: left;
+        }
+        &.text-right {
+            text-align: right;
+        }
+    }
+
+    .form-control {
         //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
-    background-color: $color_white_lilac_approx;
+        background-color: $color_mystic_approx;
         border: 1px $color_mystic_approx solid;
         &:focus {
             border-color: $color_bali_hai_approx;
-        outline: 0;
-        //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+            outline: 0; //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
             box-shadow: inset 0 1px 1px $black_7_5, 0 0 2px $color_bali_hai_approx;
         }
+    }
+}
+
+.form-color {
+    .form-group span[class^="select2-selection select2-selection--"],
+    .form-control {
+        background-color: #e8e8e8 !important;
+    }
 }
 
 .sidebar-wrapper {
@@ -51,13 +88,28 @@ textarea {
     }
 }
 
+label {
+    font-weight: 600;
+}
+
 button:focus {
     outline: none !important;
 }
 
 .btn {
     //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
-    border-radius: 0;
+    border-radius: 4px;
+    &:hover {
+        text-decoration: none;
+    }
+}
+
+[class^="col-md-"],
+[class^="col-sm-"] {
+    .btn.checkbox-inline,
+    .btn.radio-inline {
+        padding-left: 19px;
+    }
 }
 
 .btn-primary {
@@ -80,6 +132,11 @@ button:focus {
         background-color: $color_jungle_green_approx;
         border-color: $color_jungle_green_approx;
     }
+    &:focus {
+        color: $white;
+        background-color: $color_jungle_green_approx;
+        border-color: $color_jungle_green_approx;
+    }
 }
 
 .btn-info {
@@ -91,6 +148,11 @@ button:focus {
         background-color: $color_curious_blue_approx;
         border-color: $color_curious_blue_approx;
     }
+    &:focus {
+        color: $white;
+        background-color: $color_curious_blue_approx;
+        border-color: $color_curious_blue_approx;
+    }
 }
 
 .btn-warning {
@@ -102,6 +164,11 @@ button:focus {
         background-color: $color_gamboge_approx;
         border-color: $color_gamboge_approx;
     }
+    &:focus {
+        color: $white;
+        background-color: $color_gamboge_approx;
+        border-color: $color_gamboge_approx;
+    }
 }
 
 .btn-danger {
@@ -113,79 +180,161 @@ button:focus {
         background-color: $color_grenadier_approx;
         border-color: $color_grenadier_approx;
     }
+    &:focus {
+        color: $white;
+        background-color: $color_grenadier_approx;
+        border-color: $color_grenadier_approx;
+    }
 }
 
 .btn-atlas {
     padding: 10px 20px;
     background-color: $color_keppel_approx;
     color: $white;
-    border: 1px $color_keppel_approx solid;
-    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
-    border-radius: 4px;
-    //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
+    margin-bottom: 10px;
+    border: 1px $color_keppel_approx solid; //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+    border-radius: 4px; //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
     transition: all .3s ease;
     margin: 2px;
-    &.cancel {
-        background-color: $transparent;
-        color: $color_keppel_approx;
     &:hover {
-            color: $color_keppel_approx;
+        @include btn-action-effect('default');
         background-color: $transparent;
     }
     &:focus {
+        @include btn-action-effect('default');
         background-color: $transparent;
-            color: $color_keppel_approx;
     }
+    &.btn-sm {
+        padding: 2px 6px;
     }
-    &:focus {
-        background-color: $color_keppel_approx;
-        color: $white;
+    &.btn-md {
+        padding: 5px 10px;
     }
-    &:hover {
-        color: $white;
+}
+
+.btn-inline {
+    .btn-action {
+        margin: 0px 3px 3px 0px;
+        display: inline-block;
     }
 }
 
-.btn-tag {
-    color: $color_havelock_blue_approx;
-    border: 1px $color_havelock_blue_approx solid;
-    background-color: $white;
-    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
-    border-radius: 4px;
-    //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
-    transition: all .3s ease;
-    &:hover {
-        color: $white;
-        background-color: $color_havelock_blue_approx;
+.btn-fixed-width {
+    .btn-icon>span {
+        @include ellipsis();
+        float: left;
+        width: 100px;
+        padding: 2px 5px !important;
+    }
+    >i {
+        float: right;
     }
 }
 
-.btn-atlasAction {
-    background-color: $transparent;
-    color: $color_keppel_approx;
-    margin-bottom: 10px;
+.btn-action {
+    @extend .btn-atlas;
+    @include btn-action-effect('default');
     border-radius: 4px;
+    font-size: 14px;
+    background-color: $transparent;
+    &.active {
+        @include btn-action-hover-effect('default');
+    }
+
+    &:hover {
+        @include btn-action-hover-effect('default');
+        color: $white !important;
+    }
+
+    &:focus {
+        @include btn-action-effect('default');
+    }
+
+    &.btn-sm {
+        padding: 2px 6px;
+    }
+    &.btn-md {
         padding: 5px 10px;
+    }
+
+    &.btn-blue {
+        @include btn-action-effect('blue');
         &.active {
-        background-color: $color_keppel_approx;
-        color: $white;
+            @include btn-action-hover-effect('blue');
         }
         &:hover {
-        background-color: $color_keppel_approx;
-        color: $white;
+            @include btn-action-hover-effect('blue');
         }
         &:focus {
+            @include btn-action-effect('blue');
+        }
+        &.btn-icon {
+            @include btn-action-effect('blue');
+            color: $tag_color !important;
+            &:hover {
+                color: $color_havelock_blue_approx;
                 background-color: $transparent;
-        color: $color_keppel_approx;
             }
-}
+            >span {
+                &:hover {
+                    @include btn-action-hover-effect('blue');
+                }
+            }
+            i.fa {
+                &:hover {
+                    @include btn-action-hover-effect('blue');
+                }
+            }
+        }
+    }
+
+    &.btn-disabled {
+        border: 1px $action_gray solid;
+        color: $action_gray;
+        cursor: default;
+        i.fa {
+            position: relative;
+            right: -5px;
+        }
+        &:hover {
+            color: $white;
+            background-color: $action_gray;
+        }
+    }
 
-.input-spacing {
-    padding-bottom: 10px!important;
+    &.btn-icon {
+        padding: 0px;
+        overflow: hidden;
+        background-color: $transparent;
+        &:hover {
+            color: $color_keppel_approx;
+            background-color: $transparent;
+        }
+        >span {
+            padding: 5px;
+            &:hover {
+                @include btn-action-hover-effect('default');
+            }
+        }
+        i.fa {
+            position: relative;
+            padding: 5px;
+            cursor: pointer;
+            &:hover {
+                @include btn-action-hover-effect('default');
+            }
+        }
+    }
+    &.btn-icon-pd {
+        i.fa {
+            padding: 5px;
+            cursor: pointer;
+        }
+    }
 }
 
-.pagination > .active {
-    > a {
+.pagination>.active {
+    >a {
         background-color: $color_curious_blue_approx;
         border-color: $color_curious_blue_approx;
         &:focus {
@@ -197,7 +346,8 @@ button:focus {
             border-color: $color_curious_blue_approx;
         }
     }
-    > span {
+
+    >span {
         background-color: $color_curious_blue_approx;
         border-color: $color_curious_blue_approx;
         &:focus {
@@ -218,9 +368,10 @@ button:focus {
     margin: 5px 10px;
     &:hover {
         border-color: $color_mountain_mist_approx;
-        color: $color_mountain_mist_approx;
+        color: $color_mountain_mist_approx !important;
         background-color: $transparent;
     }
+
     &:focus {
         border-color: $color_mountain_mist_approx;
         color: $color_mountain_mist_approx;
@@ -232,22 +383,6 @@ button:focus {
     display: block !important;
 }
 
-.editBtn {
-    border-color: $color_mountain_mist_approx;
-    color: $color_mountain_mist_approx;
-    cursor: default;
-    margin: 5px 10px;
-    font-size: 14px;
-    cursor: pointer;
-    padding: 0px 5px;
-    &:hover {
-        border-color: $color_mountain_mist_approx;
-        color: $color_mountain_mist_approx;
-        background-color: $transparent;
-    }
-    &:focus {
-        border-color: $color_mountain_mist_approx;
-        color: $color_mountain_mist_approx;
-        background-color: $transparent;
-    }
+.list-style-disc {
+    list-style: disc;
 }
\ No newline at end of file

dashboardv2/public/css/scss/graph.scss

@@ -94,8 +94,7 @@
     background: $black_80;
     color: $white;
     z-index: 999;
-    max-width: 300px;
-    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+    max-width: 300px; //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
     border-radius: 2px;
     .tip-inner-scroll {
         overflow: auto;
@@ -108,7 +107,7 @@
     }
 }
 
-g.type-TK > rect {
+g.type-TK>rect {
     fill: $color_bright_turquoise_approx;
 }
 
@@ -120,8 +119,8 @@ g.type-TK > rect {
 }
 
 .legends {
-    > i {
-        > span {
+    >i {
+        >span {
             font-family: 'Source Sans Pro';
         }
     }

dashboardv2/public/css/scss/loader.scss

@@ -45,6 +45,17 @@
     }
 }
 
+.contentLoading {
+    position: absolute;
+    background: rgba(247, 247, 247, 0.24);
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 99;
+    bottom: 0;
+    display: none;
+}
+
 .fontLoader {
     top: 50%;
     left: 50%;

dashboardv2/public/css/scss/login.scss

@@ -45,8 +45,7 @@
     padding: 15px;
     background: $color_tuna_approx;
     color: $color_gallery_approx;
-    padding: 15px;
-    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+    padding: 15px; //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
     border-radius: 5px;
     h2 {
         margin-bottom: 40px;
@@ -55,21 +54,19 @@
         margin: 20px 0;
     }
     .form-control {
-        background-color: transparent;
-        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+        background-color: transparent; //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
         border-radius: 0;
         border-left: none;
         color: $color_gallery_approx;
         &:focus {
             border-color: $color_celeste_approx;
-            + .input-group-addon {
+            +.input-group-addon {
                 border-color: $color_cornflower_blue_approx;
             }
         }
     }
     .input-group-addon {
-        background-color: transparent;
-        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+        background-color: transparent; //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
         border-radius: 0;
         border-right: none;
         color: $color_celeste_approx;
@@ -78,10 +75,8 @@
         padding: 10px 20px;
         background-color: $color_keppel_approx;
         color: $white;
-        border: 1px $color_keppel_approx solid;
-        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
-        border-radius: 4px;
-        //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
+        border: 1px $color_keppel_approx solid; //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+        border-radius: 4px; //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
         transition: all .3s ease;
     }
 }

dashboardv2/public/css/scss/main.scss

@@ -31,6 +31,7 @@ $color_celeste_approx: #ccc;
 $color_cornflower_blue_approx: #66afe9;
 $color_mystic_approx: #e8e9ee;
 $color_jungle_green_approx: #38BB9B;
+$color_jungle_green_light:#7ed3be;
 $color_froly_approx: #ee6e73;
 $color_manatee_approx: #9398a0;
 $black: #000;
@@ -105,203 +106,14 @@ $tag_color:#4A90E2;
 $delete_link:#BB5838;
 //urls
 $url_0: url(img/loading.gif);
-.card {
-    background: $white none repeat scroll 0 0;
-    //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
-    box-shadow: 0 1px 3px $black_30;
-    margin-bottom: 30px;
-}
-
-body {
-    font-family: $font_0, $font_1;
-    color: $color_ironside_gray_approx;
-}
-
-.gray-bg {
-    background-color: #f6f7fb;
-    padding-bottom: 4%;
-}
-
-header {
-    background-color: $white;
-    border-bottom: 1px $color_mystic_approx solid;
-}
-
-a {
-    color: $color_jungle_green_approx;
-    &:focus {
-        color: $color_puerto_rico_approx;
-        text-decoration: none;
-        outline: none;
-    }
-    &:hover {
-        color: $color_puerto_rico_approx;
-        text-decoration: none;
-    }
-}
-
-th {
-    text-transform: capitalize;
-}
-
-ul {
-    list-style: none;
-}
-
-.table {
-    background-color: $white;
-    .table {
-        width: auto;
-    }
-}
-
-.close {
-    font-size: 2em;
-}
-
-#sideNav-wrapper {
-    color: $white;
-    font-size: 16px !important;
-}
-
-.contentLoading {
-    position: absolute;
-    background: rgba(247, 247, 247, 0.24);
-    top: 0;
-    right: 0;
-    left: 0;
-    z-index: 99;
-    bottom: 0;
-    display: none;
-}
-
-.auditDetailBtn {
-    padding: 5px 10px;
-    font-size: 14px;
-    line-height: 1;
-    color: $color_jungle_green_approx;
-    text-align: center;
-    white-space: nowrap;
-    vertical-align: baseline;
-    border-radius: 4px;
-    font-weight: 100;
-    background-color: $transparent;
-    border: 1px solid $color_jungle_green_approx;
-    cursor: pointer;
-    &+.auditDetailBtn {
-        margin-left: 5px;
-    }
-}
-
-.add-seperator {
-    margin-bottom: 10px;
-    border-bottom: 1px solid $color_mirage_approx
-}
 
-.termTableBreadcrumb {
-    /* min-width: 200px; */
-    /*   width: 200px; */
-    /*  display: inline-block; */
-    i {
-        cursor: pointer;
-    }
-    >div {
-        display: inline-block;
-        // padding: 10px 0px;
-        width: 100%;
-    }
-    .hide {
-        opacity: 0;
-        overflow: hidden;
-        height: 0px;
-        display: block !important;
-    }
-    .show {
-        opacity: 1;
-        overflow: visible;
-        height: auto;
-    }
-    .liContent {
-        /*  width: 150px; */
-        float: left;
-        line-height: 21px !important;
-        padding: 0px 10px 0px 0px !important;
-    }
-}
+$switchTransition: .4s ease-out;
 
-.table-quickMenu > tbody > tr > td {
-    &.searchTerm {
-        overflow: visible;
-    }
-    &.searchTag {}
-}
-
-.tab-content >.tab-pane {
-    display: block;
-    opacity: 0;
-    height: 0;
-    padding: 0px;
-    overflow: hidden;
-    &.active {
-        padding: 25px;
-        opacity: 1;
-        height: auto;
-        overflow: auto;
-    }
-}
-
-.ellipsis {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    margin-bottom: 10px;
-}
-
-.modal-body {
-    .table {
-        table-layout: fixed;
-        word-wrap: break-word;
-    }
-}
-
-.readOnlyLink {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    .deleteBtn {
-        padding: 0px 5px;
-    }
-    a {
-        color: $delete_link;
-    }
-}
 
 .readOnly {
-    .addTag-dropdown {
-        display: none;
-    }
-    span {
-        &.inputTag[data-id="tagClick"] {
-            span {
-                display: block;
-                padding: 3px 5px 3px 5px;
-            }
-            i.fa-close[data-id="deleteTag"] {
-                display: none;
-            }
-        }
-    }
+    span,
+    button,
     a {
-        &.inputTagAdd[data-id="addTag"] {
-            display: none;
-        }
-        &.inputTag[data-id="tagClick"] {
-            span {
-                display: block;
-                padding: 3px 5px 3px 5px;
-            }
-            i.fa-times[data-id="delete"] {
-                display: none;
-            }
-        }
         i {
             &.fa-trash[data-guid] {
                 display: none;
@@ -310,11 +122,9 @@ ul {
                 display: none;
             }
         }
-        &.inputAssignTag[data-id="addTerm"] {
+        &.btn[data-id="addTag"] {
             display: none;
         }
-    }
-    button {
         &.editbutton[data-id="editButton"] {
             display: none !important;
         }
@@ -322,64 +132,19 @@ ul {
         &[data-id="edit"] {
             display: none;
         }
+        &.btn[data-id="addTerm"] {
+            display: none;
+        }
+        &.btn[data-id="tagClick"] {
+            span {
+                display: block;
+                padding: 3px 5px 3px 5px;
+            }
+            i.fa-close[data-id="deleteTag"],
+            i.fa-times[data-id="deleteTag"],
+            i.fa-times[data-id="delete"] {
+                display: none;
+            }
         }
-}
-
-@media (min-width: 768px) {
-    .col-sm-custom {
-        //width: 92%;
-        margin: 25px 25px 0px;
-        position: relative;
     }
-}
-
-.panel-fullscreen {
-    position: fixed;
-    height: 100%;
-    top: 0px;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    right: 0;
-    z-index: 999;
-}
-
-.no-padding {
-    padding: 0px !important;
-}
-
-.no-padding-bottom {
-    padding-bottom: 0px !important;
-}
-
-.no-padding-top {
-    padding-top: 0px !important;
-}
-
-.no-padding-left {
-    padding-left: 0px !important;
-}
-
-.no-padding-right {
-    padding-right: 0px !important;
-}
-
-.no-margin {
-    margin: 0px !important;
-}
-
-.no-margin-bottom {
-    margin-bottom: 0px !important;
-}
-
-.no-margin-top {
-    margin-top: 0px !important;
-}
-
-.no-margin-left {
-    margin-left: 0px !important;
-}
-
-.no-margin-right {
-    margin-right: 0px !important;
 }
\ No newline at end of file

dashboardv2/public/css/scss/nav.scss

@@ -20,13 +20,12 @@
 /* nav.scss */
 
 .navbar-atlas {
-    background-color: $color_tuna_approx;
-    //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+    background-color: $color_tuna_approx; //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
     box-shadow: inset 0 0 0 $black_10, 0 1px 10px $black_10;
     .navbar-brand {
         color: $white;
     }
-    .nav > li > a {
+    .nav>li>a {
         color: $white;
         padding-top: 18px;
         padding-bottom: 18px;
@@ -44,7 +43,7 @@
     background-color: $white;
 }
 
-.navbar-fixed-top + .wrapper {
+.navbar-fixed-top+.wrapper {
     margin-top: 90px;
     padding-bottom: 90px;
 }
@@ -62,8 +61,7 @@
         padding: 6px 0;
         background-color: transparent;
         color: $white;
-        border: none;
-        //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+        border: none; //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
         box-shadow: 0 2px $white;
     }
 }
\ No newline at end of file

dashboardv2/public/css/scss/old-style.scss

@@ -23,12 +23,10 @@
 //original selectors
 //.inputs button.addAttr, .inputs button.saveAttr
 %extend_1 {
-    height: 40px;
-    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+    height: 40px; //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
     border-radius: 4px;
     border: 1px solid $white;
-    color: $white;
-    //Instead of the line below you could use @include text-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+    color: $white; //Instead of the line below you could use @include text-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
     text-shadow: 0 -1px 0 $black_25;
     font-weight: bold;
 }
@@ -65,6 +63,8 @@
 }
 
 
+
+
 /* .switch {
     float: left;
     margin-top: 4px;

dashboardv2/public/css/scss/override.scss

@@ -40,6 +40,9 @@
     padding: 15px;
     text-align: right;
     border-top: 1px solid #DEDEDE;
+    .btn+.btn {
+        margin-bottom: 0;
+    }
 }
 
 .modal-body {
@@ -48,10 +51,9 @@
     max-height: 400px;
     min-height: 70px;
     overflow: auto;
-}
-
-.cancel {
-    float: left;
+    .btn+.btn {
+        margin-bottom: 2px;
+    }
 }
 
 .switch.pull-left {
@@ -116,30 +118,61 @@ td {
     display: inline-block;
     padding-left: 0;
     margin: 20px 0;
-    border-radius: 4px;
-    border: 1px #DDDDDD solid;
+    border: 1px $color_keppel_approx solid;
     margin: 0px;
     float: right;
-    border-radius: 10px;
+    border-radius: 4px;
     overflow: hidden;
-    >.disabled>span,
-    >.disabled>a {
+
+    >.active>span,
+    >.active>a,
+    >.active>a:hover {
+        background: none;
+        color: $color_keppel_approx;
+        background: none;
+        color: #37bb9b;
+        font-weight: 600;
+        font-family: sans-serif;
+    }
+
+    >li>a,
+    >li>span,
+    >li>button {
+        width: 30px;
+        height: 30px;
+        padding: 0;
+        line-height: 30px;
+        text-decoration: none;
+        border: none;
+        float: left;
+        background: $transparent;
+        color: $color_keppel_approx;
+        @include ellipsis();
+        i {
+            font-weight: bold;
+        }
         &:hover {
-            cursor: not-allowed;
-            background-color: #7ed3be !important;
+            color: $white;
+            background: $color_keppel_approx
         }
     }
-    >.active>span,
-    >.active>a,
-    >li>a:hover {
-        background-color: #2EBC9A !important;
-        color: #fff !important;
+
+    >.disabled>span,
+    >.disabled>a,
+    >li>button[disabled] {
+        color: $color_mountain_mist_approx;
         &:hover {
-            background-color: none;
+            cursor: not-allowed;
+            color: $white;
+            background: $color_jungle_green_light !important;
         }
     }
 }
 
+.select2-container {
+    width: 100% !important;
+}
+
 .select2-container--default {
     .select2-selection--multiple {
         background-color: $color_white_lilac_approx !important;
@@ -209,7 +242,7 @@ td {
     }
 }
 
-.fixedPopover {
+.fixed-popover {
     position: fixed;
 }
 
@@ -221,23 +254,6 @@ td {
 
 .pager {
     margin: 0px;
-    li {
-        >button {
-            display: inline-block;
-            padding: 5px 14px;
-            background-color: #fff;
-            border: 1px solid #ddd;
-            border-radius: 15px;
-            color: $color_jungle_green_approx;
-        }
-        >button,
-        >span {
-            &:hover {
-                background-color: $color_jungle_green_approx;
-                color: $white;
-            }
-        }
-    }
 }
 
 .popover {
@@ -245,6 +261,8 @@ td {
 }
 
 .popover-content {
+    max-height: 150px;
+    overflow: auto;
     ul {
         color: $dark_gray;
         padding: 0px 5px;
@@ -261,25 +279,18 @@ td {
     overflow-x: hidden;
 }
 
-.ui-pnotify-text {
-    word-break: break-all;
-}
-
-.checkbox-inline,
-.radio-inline {
-    padding-left: 0px;
-    font-weight: bold;
-}
-
 .advancedInfo {
     margin-left: 5px;
     cursor: pointer;
 }
 
 .query-builder {
-    .rule-container .rule-value-container {
+    .rule-container {
+        margin: 6px 0;
+        .rule-value-container {
             display: inline-block !important;
         }
+    }
     .rules-list>:first-child::before {
         top: -8px;
     }
@@ -289,6 +300,10 @@ td {
     .rule-value-container input {
         padding: 6px 12px !important;
     }
+    .rules-group-container {
+        border: none;
+        background: none;
+    }
 }
 
 
@@ -299,7 +314,7 @@ td {
 div.columnmanager-visibilitycontrol {
     width: auto;
     margin-bottom: 5px;
-    &.open .btn-atlasAction {
+    &.open .btn-action {
         background-color: #37bb9b;
         color: #fff;
     }
@@ -313,3 +328,33 @@ div.columnmanager-dropdown-container {
         width: auto;
     }
 }
+
+.stack-modal[aria-role="alertdialog"] {
+    .alert.ui-pnotify-container {
+        color: $color_ironside_gray_approx;
+        background-color: $white;
+        border: 1px solid rgba(0, 0, 0, .2);
+        padding: 0px;
+        outline: 0;
+        -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
+        box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
+        .ui-pnotify-icon,
+        .ui-pnotify-title {
+            padding: 15px;
+        }
+        .ui-pnotify-text {
+            position: relative;
+            padding: 15px;
+            max-height: 400px;
+            min-height: 70px;
+            overflow: auto;
+            border-top: 1px solid #DEDEDE
+        }
+
+        .ui-pnotify-action-bar {
+            padding: 15px;
+            text-align: right;
+            border-top: 1px solid #DEDEDE;
+        }
+    }
+}
\ No newline at end of file

dashboardv2/public/css/scss/profile-table.scss

@@ -67,6 +67,5 @@ th.renderable.nonNullData {
 .profileGraphDetail>div div {
     text-align: right;
     white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    @include ellipsis();
 }
\ No newline at end of file

dashboardv2/public/css/scss/search.scss

@@ -18,21 +18,6 @@
 
 //colors
 $color_celeste_approx: #1D1F2B;
-$switchTransition: .4s ease-out;
-@mixin transition($transition...) {
-    -webkit-transition: $transition;
-    -moz-transition: $transition;
-    -o-transition: $transition;
-    transition: $transition;
-}
-
-@mixin transition-property($properties...) {
-    -webkit-transition-property: $properties;
-    -moz-transition-property: $properties;
-    -o-transition-property: $properties;
-    transition-property: $properties;
-}
-
 .switch {
     position: relative;
     width: 50px;
@@ -74,31 +59,12 @@ $switchTransition: .4s ease-out;
         box-shadow: inset 0 1px rgba(black, .02);
         @include transition(inherit)
     }
-    .switch-input:checked ~ & {
+    .switch-input:checked~& {
         left: 30px;
         box-shadow: -1px 1px 5px rgba(black, .2);
     }
 }
 
-.advanceSearchBtn {
-    float: right;
-}
-
-.advanceSearchTagInput {
-    margin-bottom: 20px;
-}
-
-.advanceSearchTermInput {
-    margin-bottom: 20px;
-}
-
-.clearAdvanceSearch {
-    display: inline-block;
-    float: left;
-    margin-top: 10px;
-    cursor: pointer
-}
-
 .labelShowRecord {
     line-height: 40px;
 }
@@ -131,3 +97,13 @@ $switchTransition: .4s ease-out;
         color: $tag_color;
     }
 }
+
+.popup-tag {
+    display: none;
+}
+
+.popover-tag {
+    .btn {
+        display: block;
+    }
+}
\ No newline at end of file

dashboardv2/public/css/scss/style.scss

@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 
+@import "__mixin.scss";
 @import "main.scss";
 @import "tab.scss";
 @import "form.scss";

dashboardv2/public/css/scss/tab.scss

@@ -23,15 +23,14 @@
     margin: 25px 0;
     .nav-tabs {
         border-bottom: 1px solid $color_mystic_approx;
-        > li {
-            > a {
+        >li {
+            >a {
                 padding: 15px 30px;
                 text-transform: uppercase;
-                letter-spacing: 1px;
-                //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+                letter-spacing: 1px; //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
                 border-radius: 2px 2px 0 0;
             }
-            &.active > a {
+            &.active>a {
                 border: 1px solid $color_mystic_approx;
                 border-bottom-color: transparent;
                 &:focus {
@@ -57,12 +56,26 @@ ul.tabs li.tab {
     padding: 0;
 }
 
+.tab-content>.tab-pane {
+    display: block;
+    opacity: 0;
+    height: 0;
+    padding: 0px;
+    overflow: hidden;
+    &.active {
+        padding: 25px;
+        opacity: 1;
+        height: auto;
+        overflow: auto;
+    }
+}
+
 .tagsList .atlast-tabbable {
     margin: 0;
     .tab-content {
         padding: 10px 22px;
     }
-    .nav-tabs > li > a {
+    .nav-tabs>li>a {
         padding: 10px 20px;
     }
 }
@@ -100,8 +113,7 @@ ul.tabs li.tab {
             display: block;
             text-decoration: none;
             width: 100%;
-            height: 100%;
-            //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
+            height: 100%; //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
             transition: color 0.28s ease;
             /*  color: $color_manatee_approx; */
             /*    &:hover {
@@ -122,15 +134,14 @@ ul.tabs li.tab {
     margin: 25px 0;
     .nav-tabs {
         border-bottom: 1px solid $color_mystic_approx;
-        > li {
-            > a {
+        >li {
+            >a {
                 padding: 15px 30px;
                 text-transform: uppercase;
-                letter-spacing: 1px;
-                //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+                letter-spacing: 1px; //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
                 border-radius: 2px 2px 0 0;
             }
-            &.active > a {
+            &.active>a {
                 border: 1px solid $color_mystic_approx;
                 border-bottom-color: transparent;
                 &:focus {

dashboardv2/public/css/scss/tag.scss

@@ -19,7 +19,7 @@
 //tag.scss
 .tag-tree {
     padding: 0; // overflow: auto;
-    li {
+    >li {
         list-style: none;
         cursor: pointer;
         &.parent-node {
@@ -55,18 +55,22 @@
                 padding: 5px 10px;
             }
         }
-        a {
+        >a,
+        >div>a {
             display: block;
-            color: #f2f2f2;
+            color: $white !important;
             white-space: nowrap;
             padding: 5px 10px;
-            text-overflow: ellipsis;
             max-width: 91%;
-            overflow: hidden;
+            @include ellipsis();
             font-size: 14px;
+            &:hover {
+                color: $white !important;
+                text-decoration: none !important;
+            }
         }
     }
-    ul {
+    >ul {
         padding-left: 20px;
         li {}
     }
@@ -96,316 +100,6 @@
     border-color: $color_bali_hai_approx;
 }
 
-.select2-container {
-    width: 100% !important;
-    /*margin:15px 0px;*/
-}
-
-.tagListSelect {
-    margin: 15px 0px;
-}
-
-.inputTag {
-    display: inline-block;
-    border: 1px $tag_color solid;
-    color: $tag_color;
-    font-size: 14px;
-    border-radius: 4px;
-    margin-right: 3px;
-    margin-bottom: 3px;
-    float: left;
-    cursor: pointer;
-    background-color: $white;
-    white-space: nowrap;
-    overflow: hidden;
-    &:hover {
-        color: $tag_color;
-    }
-    i.fa {
-        position: relative;
-        padding: 5px;
-        cursor: pointer;
-        &:hover {
-            color: $white;
-            background-color: $tag_color;
-        }
-    }
-    >.inputValue {
-        padding: 5px;
-        &:hover {
-            color: $white;
-            background-color: $tag_color;
-        }
-    }
-}
-
-.inputTagAdd {
-    display: inline-block;
-    border: 1px $color_havelock_blue_approx solid;
-    color: $color_havelock_blue_approx;
-    font-size: 14px;
-    border-radius: 4px;
-    margin-right: 3px;
-    margin-bottom: 3px;
-    float: left;
-    cursor: pointer;
-    background-color: #fff;
-    white-space: nowrap;
-    overflow: hidden;
-    padding: 2px 6px;
-    &:hover {
-        color: $white;
-        background-color: $tag_color;
-    }
-}
-
-.inputTagGreen {
-    border: 1px $color_jungle_green_approx solid;
-    background-color: $white;
-    color: $color_jungle_green_approx;
-    padding-left: 5px;
-    &:hover {
-        color: $white;
-        background-color: $color_jungle_green_approx;
-    }
-    i.fa {
-        &:hover {
-            background-color: $color_jungle_green_approx;
-        }
-    }
-}
-
-.addTagBase {
-    padding: 2px 8px;
-    border: 1px solid $action_gray;
-    color: $action_gray;
-    border-radius: 4px;
-    cursor: pointer;
-    &:hover {
-        color: $color_dark_grey_approx;
-        background-color: $color_mercury_approx;
-    }
-}
-
-.noTags {
-    font-size: 24px;
-    font-weight: bold;
-    text-align: center;
-}
-
-.addTag-dropdown {
-    display: inline-block;
-    float: left;
-}
-
-.addTagText {
-    font-size: 14px;
-    font-weight: 600;
-}
-
-.addTagPlus {
-    font-size: 14px;
-    font-weight: 600;
-}
-
-.inputSearchTag {
-    max-width: 200px;
-}
-
-.appendList {
-    max-height: 200px;
-    overflow: auto;
-    max-width: 200px;
-    overflow-x: hidden;
-    div {
-        padding: 3px;
-    }
-}
-
-.editbutton {
-    padding: 4px 8px;
-    border: 1px solid $color_celeste_approx;
-    color: $action_gray;
-    border-radius: 4px;
-}
-
-.inputAttribute {
-    display: inline-block;
-    padding: 2px 10px;
-    border: 1px $action_gray solid;
-    color: $action_gray;
-    font-size: 14px;
-    border-radius: 4px;
-    margin-right: 3px;
-    margin-bottom: 3px;
-    float: left;
-    cursor: pointer;
-    background-color: $white;
-    i.fa {
-        position: relative;
-        right: -5px;
-        cursor: pointer;
-    }
-    &:hover {
-        color: $white;
-        background-color: $action_gray;
-    }
-}
-
-.superType {
-    margin-bottom: 15px;
-}
-
-form-control .tagInpput {
-    margin-bottom: 15px;
-    margin-top: 15px;
-}
-
-.attributeText {
-    color: $color_star_dust_approx;
-}
-
-.termTagLine {
-    border-top: none;
-}
-
-.tagTerm {
-    margin-top: 10px;
-    div {
-        display: inline-block;
-    }
-}
-
-.tagSpan,
-.termSpan {
-    float: left;
-    padding: 2px 10px 2px 0px;
-    font-weight: 600;
-    width: 45px
-}
-
-.attrLabel {
-    float: left;
-    padding: 2px 10px 2px 0px;
-    font-weight: 600;
-    width: 70px;
-    margin-right: 5px;
-}
-
-.superTypeLabel {
-    font-weight: 600;
-    width: 90px;
-    margin-right: 5px;
-    float: left;
-}
-
-.inputAssignTag {
-    display: block;
-    padding: 2px 5px;
-    border: 1px $action_gray solid;
-    color: $action_gray;
-    font-size: 14px;
-    border-radius: 4px;
-    margin-right: 3px;
-    margin-bottom: 3px;
-    float: left;
-    cursor: pointer;
-    background-color: $white;
-    white-space: nowrap;
-    &:hover {
-        color: $color_dark_grey_approx;
-        background-color: $color_mercury_approx;
-    }
-}
-
-.multiSelect {
-    float: right;
-}
-
-.multiSelectTerm {
-    float: right;
-}
-
-.multiSelectTag {
-    float: right;
-}
-
-.inputAssignTag.multiSelectTag {
-    margin-right: 10px;
-}
-
-.popover.popoverTag {
-    display: block;
-}
-
-.popoverContainer .inputTag {
-    display: block;
-    float: none;
-    margin-top: 10px;
-}
-
-.popoverContainer .inputTag>.inputValue {
-    padding: 2px 5px;
-    display: inline-block;
-    width: 100px;
-}
-
-.tagAttributeLabel {
-    color: $color_star_dust_approx;
-}
-
-fieldset.scheduler-border {
-    border-top: 1px solid #999 !important;
-    padding: 0 1em 0em 1em !important;
-    margin: 0 0 .5em 0 !important;
-}
-
-legend.scheduler-border {
-    width: auto;
-    padding: 0 5px;
-    border-bottom: none;
-    font-size: 16px;
-    margin-left: 50%;
-    margin-bottom: 10px;
-    color: #555;
-}
-
-.requiredInput {
-    color: #d20606;
-}
-
-.spanEntityType {
-    cursor: help;
-    width: 100%;
-    display: block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-size: 14px;
-    color: #a7a19f;
-}
-
-.errorClass {
-    border: 1px solid red !important;
-    box-shadow: none !important;
-}
-
-.attributeTag {
-    padding: 5px 8px;
-    border: 1px solid #999999;
-    color: #999999;
-    border-radius: 1px;
-    cursor: pointer
-}
-
-.attrTopMargin {
-    margin-top: 15px;
-}
-
-.topMargin {
-    margin-top: 13px;
-}
-
 .entityLink {
     font-size: 16px;
 }

dashboardv2/public/css/scss/theme.scss

@@ -19,8 +19,18 @@
 
 /* theme.scss */
 
+body {
+    font-family: $font_0, $font_1;
+    color: $color_ironside_gray_approx;
+}
+
+header {
+    background-color: $white;
+    border-bottom: 1px $color_mystic_approx solid;
+}
+
 .header-menu {
-    .dropdown-menu > li > a {
+    .dropdown-menu>li>a {
         color: $color_ironside_gray_approx;
         &:hover {
             color: $color_jungle_green_approx;
@@ -51,10 +61,8 @@
 .main-search {
     .form-control {
         border: none;
-        border-left: 1px $color_mystic_approx solid;
-        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
-        border-radius: 0;
-        //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+        border-left: 1px $color_mystic_approx solid; //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+        border-radius: 0; //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
         box-shadow: none;
         height: 60px;
         font-size: 18px;
@@ -68,16 +76,25 @@
     }
 }
 
+
+.close {
+    font-size: 2em;
+}
+
+#sideNav-wrapper {
+    color: $white;
+    font-size: 16px !important;
+}
+
 .page-title {
     background-color: $white;
     padding: 25px;
     h1 {
-        margin-top: 50px;
+        // margin-top: 50px;
         margin-bottom: 10px;
         font-weight: 600;
-        text-overflow: ellipsis;
+        @include ellipsis();
         max-width: 91%;
-        overflow: hidden;
         display: inline-block;
         small {
             position: relative;
@@ -96,26 +113,82 @@
     }
 }
 
-.atlas-tag {
-    padding: 6px 12px;
-    background-color: $color_havelock_blue_approx;
-    color: $white;
-    font-size: 14px;
-    text-transform: uppercase;
-    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
-    border-radius: 4px;
-    i.fa {
-        position: relative;
-        right: -5px;
-        cursor: pointer;
+a {
+    color: $color_jungle_green_approx;
+    &:focus {
+        color: $color_puerto_rico_approx;
+        text-decoration: none;
+        outline: none;
+    }
+    &:hover {
+        color: $color_puerto_rico_approx;
+        text-decoration: none;
+    }
+}
+
+a[href^="#!/"]:not(.btn, .not-blue-link) {
+    color: $color_havelock_blue_approx;
+    &:focus {
+        color: $color_havelock_blue_approx;
+        text-decoration: none;
+        outline: none;
+    }
+    &:hover {
+        color: $color_havelock_blue_approx;
+        text-decoration: underline;
+    }
+}
+
+th {
+    text-transform: capitalize;
+}
+
+ul {
+    list-style: none;
+}
+
+hr[size="10"] {
+    margin: 10px 0px;
+}
+
+.table {
+    margin-bottom: 2px;
+    background-color: $white;
+    .table {
+        width: auto;
     }
 }
 
+
+.table-quickMenu>tbody>tr>td {
+    &.searchTerm {
+        overflow: visible;
+    }
+    &.searchTag {}
+}
+
+.card {
+    background: $white none repeat scroll 0 0; //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+    box-shadow: 0 1px 3px $black_30;
+    margin-bottom: 30px;
+}
+
+// Colors Class
 .white-bg {
     background-color: $white;
     padding: 30px 0;
 }
 
+.gray-text {
+    color: $color_star_dust_approx;
+}
+
+.gray-bg {
+    background-color: #f6f7fb;
+    padding-bottom: 4%;
+}
+
+
 .comment-input {
     background-color: $color_white_lilac_approx;
     padding: 20px;
@@ -139,6 +212,66 @@
     }
 }
 
+
+@media (min-width: 768px) {
+    .col-sm-custom {
+        //width: 92%;
+        margin: 25px 25px 0px;
+        position: relative;
+    }
+}
+
+.panel-fullscreen {
+    position: fixed;
+    height: 100%;
+    top: 0px;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    right: 0;
+    z-index: 999;
+}
+
+.no-padding {
+    padding: 0px !important;
+}
+
+.no-padding-bottom {
+    padding-bottom: 0px !important;
+}
+
+.no-padding-top {
+    padding-top: 0px !important;
+}
+
+.no-padding-left {
+    padding-left: 0px !important;
+}
+
+.no-padding-right {
+    padding-right: 0px !important;
+}
+
+.no-margin {
+    margin: 0px !important;
+}
+
+.no-margin-bottom {
+    margin-bottom: 0px !important;
+}
+
+.no-margin-top {
+    margin-top: 0px !important;
+}
+
+.no-margin-left {
+    margin-left: 0px !important;
+}
+
+.no-margin-right {
+    margin-right: 0px !important;
+}
+
 .backButton {
     display: block;
     margin: 0px 13px;
@@ -153,3 +286,74 @@
 .position-relative {
     position: relative;
 }
+
+.pagination-box {
+    margin-top: 15px;
+}
+
+.ellipsis {
+    @include ellipsis();
+    margin-bottom: 10px;
+}
+
+.readOnlyLink {
+    @include ellipsis();
+    .deleteBtn {
+        padding: 0px 5px;
+    }
+    a {
+        color: $delete_link !important;
+    }
+}
+
+.add-seperator {
+    margin-bottom: 10px;
+    border-bottom: 1px solid $color_mirage_approx
+}
+
+.legend-sm {
+    font-size: 17px;
+}
+
+.errorClass {
+    border: 1px solid red !important;
+    box-shadow: none !important;
+}
+
+fieldset.fieldset-child-pd>div {
+    padding-left: 12px;
+}
+
+.inline-content {
+    >.inline {
+        display: inline-block;
+        &+.inline {
+            margin-left: 5px;
+        }
+    }
+}
+
+.inline-content-fl {
+    @extend .inline-content;
+    >.inline {
+        display: block;
+        float: left;
+    }
+}
+
+.inline-content-fr {
+    @extend .inline-content-fl;
+    >.inline {
+        float: right;
+        &+.inline {
+            margin-right: 5px;
+        }
+    }
+}
+
+.has-error {
+    .select2-selection--single,
+    .select2-selection--multiple {
+        border-color: $color_apple_blossom_approx;
+    }
+}
\ No newline at end of file

dashboardv2/public/css/scss/tree.scss

@@ -57,7 +57,7 @@
             }
         }
         &.parentChild {
-            ul {
+            >ul {
                 padding-left: 9%;
             }
             li {
@@ -74,6 +74,11 @@
                 background-color: $color_star_dust_approx;
             }
         }
+        &.listTerm {
+            a {
+                display: inline;
+            }
+        }
         &.active {
             background-color: $color_jungle_green_approx !important;
             border: none;
@@ -90,8 +95,7 @@
             color: $concrete;
             white-space: nowrap;
             padding: 5px 25px;
-            text-overflow: ellipsis;
-            overflow: hidden;
+            @include ellipsis();
             cursor: pointer;
         }
         .tools {
@@ -126,6 +130,7 @@
 }
 
 
+
 /**Css changes**/
 
 .modal-body {

dashboardv2/public/js/router/Router.js

@@ -193,9 +193,7 @@ define([
                         Utils.setUrl({
                             url: url,
                             trigger: false,
-                            updateTabState: function() {
-                                return { tagUrl: this.url, stateChanged: true };
-                            }
+                            updateTabState: true
                         });
                     }
                     App.rSideNav.show(new SideNavLayoutView(
@@ -208,9 +206,7 @@ define([
                         Utils.setUrl({
                             url: url,
                             trigger: false,
-                            updateTabState: function() {
-                                return { tagUrl: this.url, stateChanged: true };
-                            }
+                            updateTabState: true
                         });
                     }
                     App.rSideNav.currentView.RTagLayoutView.currentView.manualRender(tagName);
@@ -224,7 +220,8 @@ define([
                     }
                     App.rNContent.show(new TagDetailLayoutView(
                         _.extend({
-                            'tag': tagName
+                            'tag': tagName,
+                            'value': paramObj
                         }, that.preFetchedCollectionLists, that.sharedObj)
                     ));
                 }
@@ -307,10 +304,8 @@ define([
             Utils.setUrl({
                 url: '#!/search',
                 mergeBrowserUrl: false,
-                updateTabState: function() {
-                    return { searchUrl: this.url, stateChanged: false };
-                },
-                trigger: true
+                trigger: true,
+                updateTabState: true
             });
 
             console.log('No route:', actions);

dashboardv2/public/js/templates/audit/AuditTableLayoutView_tmpl.html

@@ -21,15 +21,28 @@
         <i class="fa fa-refresh fa-spin-custom"></i>
     </div>
     <div class="auditTable" style="display: none">
+        <div>
             <span class="labelShowRecord pull-left" data-id="pageRecordText"></span>
-        <ul class="pager pull-right">
+        </div>
+        <div id="r_auditTableLayoutView"></div>
+        <div class="pagination-box">
+            <div class="backgrid-paginator pull-right">
+                <ul>
                     <li>
-                <button type="button" class="btn" data-id="previousAuditData">Previous</button>
+                        <button type="button" data-id="previousAuditData" title="Previous" disabled=true>
+                            <i class="fa fa-angle-left" aria-hidden="true"></i>
+                        </button>
+                    </li>
+                    <li class="active">
+                        <a href="javascript:void(0)" data-id="activePage"></a>
                     </li>
                     <li>
-                <button type="button" class="btn" data-id="nextAuditData">Next</button>
+                        <button type="button" data-id="nextAuditData" title="Next">
+                            <i class="fa fa-angle-right" aria-hidden="true"></i>
+                        </button>
                     </li>
                 </ul>
-        <div id="r_auditTableLayoutView"></div>
+            </div>
+        </div>
     </div>
 </div>
\ No newline at end of file

dashboardv2/public/js/templates/audit/CreateAuditTableLayoutView_tmpl.html

@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 -->
-<h4>Name: <span data-id="tagHeader"></span></h4>
+<h4>Name: <span data-id="name"></span></h4>
 <table class="table table-bordered table-striped" data-id="tableAudit">
     <thead>
         <tr data-id="auditHeaderValue">

dashboardv2/public/js/templates/business_catalog/AddTermView_tmpl.html

@@ -14,17 +14,25 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 -->
-<form name="tagDefinitionform" class="css-form" onsubmit="return false;">
+<form name="tagDefinitionform" class="form-horizontal" onsubmit="return false;">
     <div class="form-group">
+        <label class="control-label col-sm-2 required" for="name">Name</label>
         {{#if defaultTerm}}
+        <div class="col-sm-10">
             <input class="form-control" data-id="termName" placeholder="Enter Taxonomy Name" autofocus>
             <p class='alertTerm' style='display:none'>Taxonomy name should not have spaces</p>
+        </div>
         {{else}}
+        <div class="col-sm-10">
             <input class="form-control" data-id="termName" placeholder="Name(Required)" autofocus>
             <p class='alertTerm' style='display:none'>Term name should not have spaces</p>
+        </div>
         {{/if}}
     </div>
     <div class="form-group">
+        <label class="control-label col-sm-2" for="description">Description</label>
+        <div class="col-sm-10">
             <textarea class="form-control" data-id="termDetail" placeholder="Description"></textarea>
         </div>
+    </div>
 </form>
\ No newline at end of file

dashboardv2/public/js/templates/business_catalog/BusinessCatalogDetailLayoutView_tmpl.html

@@ -19,9 +19,9 @@
         <i class="fa fa-refresh fa-spin-custom"></i>
     </div>
     <div class="catlogDetail">
-        <h1><span data-id="title"></span></h1>
-        <button type="button" data-id="editButton" class="btn btn-default pull-right editbutton" id="editText"><i class="fa fa-pencil"></i></button>
-        <p class="sub-title" data-id="description">Description</p>
+        <h1 class="form-group"><span data-id="title"></span></h1>
+        <button type="button" data-id="editButton" class="btn btn-sm btn-action pull-right"><i class="fa fa-pencil"></i></button>
+        <p class="form-group" data-id="description">Description</p>
     </div>
 </div>
 <div class="container-fluid gray-bg">

dashboardv2/public/js/templates/business_catalog/TreeLayoutView_tmpl.html

@@ -16,8 +16,8 @@
 -->
 <div class="clearfix add-seperator">
     <p data-id="descriptionAssign" style="display:none">Assign a term to this asset</p>
-    <button type="button" class="btn btn-atlasAction btn-atlas pull-left" data-id="backTaxanomy"><i class="fa fa-chevron-left"></i> Back</button>
-    <button type="button" class="btn btn-atlasAction btn-atlas pull-right" onclick="this.blur();" title="Refresh" data-id="refreshTaxanomy"><i class="fa fa-refresh"></i></button>
+    <button type="button" class="btn btn-action btn-md pull-left" data-id="backTaxanomy"><i class="fa fa-chevron-left"></i> Back</button>
+    <button type="button" class="btn btn-action btn-md pull-right" onclick="this.blur();" title="Refresh" data-id="refreshTaxanomy"><i class="fa fa-refresh"></i></button>
 </div>
 <div>
     <select type="text" class="form-control" data-id="searchTermInput"></select>

dashboardv2/public/js/templates/common/TableLayout_tmpl.html

@@ -15,28 +15,43 @@
  * limitations under the License.
 -->
 <div>
-<div class="t_tableOverlay"></div>
-<div class="row banded">
-    <div data-id="r_footerRecords" class="col-sm-6 margin-top-10"></div>
-    <div data-id="r_pagination" class="col-sm-6 text-right"></div>
-</div>
-<div class="clearfix">
+    <div class="clearfix">
         <div class="form-group pull-right no-margin">
+            {{#unless columnOpts.el}}
             <div data-id="control" class="pull-right"></div>
-        <label class="select pull-right">
-            <select data-id="pageSize" class="form-control">
-                <option selected>10</option>
-                <option>25</option>
-                <option>50</option>
-                <option>100</option>
-            </select>
-        </label>
+            {{/unless}}
         </div>
-</div>
-<div class="position-relative thick-border">
+    </div>
+    {{#if includePagination}}
+    <div class="clearfix banded">
+        <div data-id="r_footerRecords" class="margin-top-10"></div>
+    </div>
+    {{/if}}
+    <div class="position-relative thick-border">
         <div data-id="r_tableList" class="table-responsive tableBorder"> </div>
+        {{#if includeTableLoader}}
         <div data-id="r_tableSpinner" class="fontLoader for-ignore">
             <i class="fa fa-refresh fa-spin-custom"></i>
         </div>
-</div>
+        {{/if}}
+    </div>
+    {{#if includePagination}}
+    <div class="row clearfix banded pagination-box">
+        <div class="col-md-offset-4 col-md-8">
+            <div class="inline-content-fr">
+                <div data-id="r_pagination" class="inline"></div>
+                {{#if includePageSize}}
+                <div class="inline">
+                    <div class="form-group inline-content">
+                        <span class="control-label-sm inline ">Page Limit :</span>
+                        <div class="select inline" style="width: 80px;">
+                            <select data-id="pageSize" class="form-control"></select>
+                        </div>
+                    </div>
+                </div>
+                {{/if}}
+            </div>
+        </div>
+    </div>
+    {{/if}}
 </div>
\ No newline at end of file

dashboardv2/public/js/templates/common/buttons_tmpl.html

+<!--
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+-->
+{{#if btn_edit}}
+<button data-id="editButton" title="Edit Entity" class="btn btn-action btn-sm pull-right"><i class="fa fa-pencil"></i></button>
+{{/if}}
\ No newline at end of file

dashboardv2/public/js/templates/common/modal.html

@@ -32,9 +32,9 @@
         {{#if showFooter}}
         <div class="modal-footer">
             {{#if buttons}} {{#each buttons}}
-             <button type="button" class="btn btn-atlas {{this.btnClass}}">{{this.text}}</button>
+            <button type="button" {{#if this.title}} title="{{this.title}}" {{/if}} class="btn {{this.btnClass}}">{{this.text}}</button>
             {{/each}} {{else}} {{#if allowCancel}} {{#if cancelText}}
-            <button type="button" class="btn btn-atlas cancel">{{tt cancelText}}</button>
+            <button type="button" class="btn btn-action cancel">{{tt cancelText}}</button>
             {{/if}} {{/if}}
             <button type="button" class="btn btn-atlas ok">{{tt okText}}</button>
             {{/if}}

dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html

@@ -18,30 +18,30 @@
     <div class="fontLoader">
         <i class="fa fa-refresh fa-spin-custom"></i>
     </div>
-    <div class="entityDetail">
+    <div class="entityDetail form-horizontal col-md-12">
         <div class="row">
             <a href="javascript:void(0);" class="backButton" data-id="backButton"><i class="fa fa-chevron-left"></i>  Back To Results</a>
         </div>
-        <h1><span  data-id="title"></span></h1> {{#if entityUpdate}}
-        <button data-id="editButton" title="Edit Entity" style="display:none" class="btn btn-default pull-right editbutton" id="editText"><i class="fa fa-pencil"></i></button>
+        <h1 class="form-group"><span  data-id="title"></span></h1> {{#if entityUpdate}}
+        <div data-id="editButtonContainer" class="pull-right"></div>
         {{/if}}
-        <div class="tagTerm">
-            <span class="tagSpan">Tags:</span>
-            <div class="" data-id="tagList">
-                <div class="addTag-dropdown" data-id="addTag">
-                    <div class="addTagBase tagBox" title="Add Tag" data-id="addTagPlus"><i class="fa fa-plus"></i></div>
+        <div class="form-group">
+            <span class="control-label-sm-pr pull-left">Tags:</span>
+            <div class="pull-left" data-id="tagList">
+                <button class="btn btn-action btn-sm" title="Add Tag" data-id="addTag">
+                    <i class="fa fa-plus"> </i>
+                </button>
             </div>
         </div>
-            <hr class="termTagLine"> {{#if taxonomy}}
-            <span class="termSpan">Terms:</span>
-            <div class="" data-id="termList">
-                <div class="addTag-dropdown" data-id="addTerm">
-                    <div class="addTagBase termBox" title="Add Term" data-id="addTermPlus"><i class="fa fa-plus"></i></div>
+        {{#if taxonomy}}
+        <div class="form-group">
+            <span class="control-label-sm-pr pull-left">Terms:</span>
+            <div class="pull-left" data-id="termList">
+                <button class="btn btn-action btn-sm" title="Add Term" data-id="addTerm"><i class="fa fa-plus"></i></button>
             </div>
         </div>
         {{/if}}
     </div>
-    </div>
 </div>
 <div class="container-fluid gray-bg">
     <div class="row">

dashboardv2/public/js/templates/entity/CreateEntityLayoutView_tmpl.html

@@ -14,9 +14,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 -->
-<form name="entityDefinitionform" class="css-form">
-    <div class="form-group clearfix">
-        <div class="col-sm-12">
+<form name="entityDefinitionform">
+    <div class="clearfix">
+        <div class="col-sm-12 form-group">
             <div class="row">
                 {{#if guid}}
                 <div class="col-md-8">
@@ -37,7 +37,7 @@
                 </div>
             </div>
         </div>
-        <div class="control-group entityInputData" data-id="entityInputData"></div>
+        <div class="col-md-12 entityInputData" data-id="entityInputData"></div>
     </div>
 </form>
 <div class="" style="position: relative;height: 8px;">

dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html

@@ -18,13 +18,13 @@
     <div class="fontLoader">
         <i class="fa fa-refresh fa-spin-custom"></i>
     </div>
-    <svg width="100%" height="100%"></svg>
+    <svg width="100%" height="100%" " viewBox="0 0 854 330" enable-background="new 0 0 854 330" xml:space="preserve"></svg>
     <div class="legends" style="height: 20px">
         <i class="fa fa-long-arrow-right" aria-hidden="true" style="margin-right: 12px; color:#8bc152;">&nbsp<span>Lineage</span></i>
         <i class="fa fa-long-arrow-right" aria-hidden="true" style="color:#fb4200;">&nbsp<span>Impact</span></i>
     </div>
     <div class="zoomButtonGroup">
-        <span type="button" id="zoom_in" class="btn btn-atlasAction btn-atlas lineageZoomButton" title="Zoom In" data-id="refreshBtn"> <i class="fa fa-search-plus"></i></span>
-        <span type="button" id="zoom_out" class="btn btn-atlasAction btn-atlas lineageZoomButton" title="Zoom Out" data-id="refreshBtn"> <i class="fa fa-search-minus"></i></span>
+        <span type="button" id="zoom_in" class="btn btn-action btn-md lineageZoomButton" title="Zoom In" data-id="refreshBtn"> <i class="fa fa-search-plus"></i></span>
+        <span type="button" id="zoom_out" class="btn btn-action btn-md lineageZoomButton" title="Zoom Out" data-id="refreshBtn"> <i class="fa fa-search-minus"></i></span>
     </div>
 </div>

dashboardv2/public/js/templates/schema/SchemaTableLayoutView_tmpl.html

@@ -21,7 +21,7 @@
             <input type="checkbox" class="input" name="queryType" value="text" name="check" value="1" />Include historical entities</label>
     </div>
     <div class="clearfix">
-        <a href="javascript:void(0)" class="inputAssignTag multiSelectTerm btnAssign" style="display:none" data-id="addTerm"><i class="fa fa-folder-o"></i> Assign Term</a>
+        <a href="javascript:void(0)" class="inputAssignTag multiSelectTerm btnAssign" style="display:none" data-id="addTerm"><i class="fa fa-plus"></i></a>
         <a href="javascript:void(0)" class="inputAssignTag multiSelectTag assignTag btnAssign" style="display:none" data-id="addAssignTag"><i class="fa fa-plus"></i> Assign Tag</a>
     </div>
     <div id="r_schemaTableLayoutView">

dashboardv2/public/js/templates/search/AdvancedSearchInfo_tmpl.html

@@ -15,24 +15,22 @@
  * limitations under the License.
 -->
 <div class="">
-    <h4>Use DSL (Doamin Specific Language) to build queries</h4>
-    <ul>
-    <li><b>Entity Name</b></li>
-    <li>name="string"</li>
-    </ul>
-    <ul>
-    <li><b>Joining queries</b></li>
-    <li>name="sales_fact",columns as column select column.name</li>
-    </ul>
-    <ul>
-    <li><b>Query Name</b></li>
-    <li>Query Example</li>
-    </ul>
-    <ul>
-    <li><b>Query Name</b></li>
-    <li>Query Example</li>
-    </ul>
-    <ul>
-    <a href="http://atlas.apache.org/Search.html" target="_blank">More sample queries and use-cases >></a>
+    <h4>Use DSL (Domain Specific Language) to build queries</h4>
+    <ul class="list-style-disc">
+        <li><b>Single Query</b>
+            <p>DB where name="Reporting" select name, owner</p>
+        </li>
+        <li><b>GROUPBY</b>
+            <p>select count(CustomerID), Country from Customers group by Country</p>
+        </li>
+        <li><b>ORDERBY</b>
+            <p>DB where name="Reporting" select name, owner orderby name limit 10 offset 5</p>
+        </li>
+        <li><b>LIMIT</b>
+            <p>DB where name="Reporting" select name, owner limit 10 offset 0</p>
+        </li>
     </ul>
+    <h5 style="padding-left: 22.5px;">
+        <a href="http://atlas.apache.org/Search.html" target="_blank"><i class="fa fa-info-circle" aria-hidden="true"></i> &nbsp; More sample queries and use-cases</a>
+    </h5>
 </div>
\ No newline at end of file

dashboardv2/public/js/templates/search/SearchLayoutView_tmpl.html

@@ -27,7 +27,7 @@
                 <span class="advancedInfo" data-id="advancedInfo"><i class="fa fa-question-circle-o"></i></span>
             </div>
             <div class="col-md-3">
-                <button type="button" class="btn btn-atlasAction btn-atlas pull-right typeLOV" title="Refresh" data-id="refreshBtn"><i class="fa fa-refresh"></i></button>
+                <button type="button" class="btn btn-action btn-md pull-right typeLOV" title="Refresh" data-id="refreshBtn"><i class="fa fa-refresh"></i></button>
             </div>
         </div>
     </div>
@@ -40,7 +40,7 @@
                         <select data-id="typeLOV"></select>
                     </div>
                     <div class="col-sm-2 no-padding temFilterBtn">
-                        <button type="button" class="btn btn-atlasAction btn-atlas pull-right typeLOV active" title="Entity Attribute Filter" data-id="typeAttrFilter"><i class="fa fa-filter"></i></button>
+                        <button type="button" class="btn btn-action btn-md pull-right typeLOV active" title="Entity Attribute Filter" data-id="typeAttrFilter"><i class="fa fa-filter"></i></button>
                     </div>
                 </div>
             </div>
@@ -51,7 +51,7 @@
                         <select data-id="tagLOV"></select>
                     </div>
                     <div class="col-sm-2 no-padding">
-                        <button type="button" class="btn btn-atlasAction btn-atlas pull-right active" title="Tag Attribute Filter" data-id="tagAttrFilter"><i class="fa fa-filter"></i></button>
+                        <button type="button" class="btn btn-action btn-md pull-right active" title="Tag Attribute Filter" data-id="tagAttrFilter"><i class="fa fa-filter"></i></button>
                     </div>
                 </div>
             </div>
@@ -60,8 +60,8 @@
                 <input type="text" class="form-control" data-id="searchInput" placeholder="Search using a query string: e.g. sales_fact" style="margin: 5px 0px;">
             </div>
         </div>
-        <div class="clearAdvanceSearch" data-id="clearSearch">Clear</div>
-        <button type="button" class="btn btn-atlas advanceSearchBtn" data-id="searchBtn" disabled="disabled">Search</button>
+        <button class="btn btn-action" data-id="clearSearch">Clear</button>
+        <button type="button" class="btn btn-atlas pull-right" data-id="searchBtn" disabled="disabled">Search</button>
     </div>
     <div id="searchResult"></div>
 </div>
\ No newline at end of file

dashboardv2/public/js/templates/search/SearchResultLayoutView_tmpl.html

@@ -21,25 +21,26 @@
         <i class="fa fa-refresh fa-spin-custom"></i>
     </div>
     <div class="ellipsis" style="display: none;"><span class="searchResult" style=" font-size: 16px;"></span>
-        <a href="javascript:void(0)" class="inputAssignTag multiSelectTerm btnAssign" style="display:none" data-id="addTerm"><i class="fa fa-folder-o"></i> Assign Term</a>
-        <a href="javascript:void(0)" class="inputAssignTag multiSelectTag assignTag btnAssign" style="display:none" data-id="addAssignTag"><i class="fa fa-plus"></i> Assign Tag</a>
     </div>
     <div class="searchTable">
-        <div data-id="containerCheckBox" style="display: none;">
-            <input type="checkbox" id="inputLabel" class="checkbox-inline" name="queryType" name="check" data-id="checkDeletedEntity" />
-            <label class="checkbox-inline" for="inputLabel">
-                <b>Include historical entities</b></label>
-        </div>
-        <span style="display: none;" class="labelShowRecord pull-left" data-id="pageRecordText"></span>
-        <div data-id="paginationDiv" style="display:none">
-            <ul class="pager pull-right">
-                <li>
-                    <button type="button" class="btn" data-id="previousData" disabled=true>Previous</button>
-                </li>
-                <li>
-                    <button type="button" class="btn" data-id="nextData">Next</button>
-                </li>
-            </ul>
+        <div class="row well">
+            <div class="row form-group pagination-box" style="display: none;">
+                <div class="col-md-4">
+                    <span class="labelShowRecord pull-left" data-id="pageRecordText"> </span>
+                </div>
+                <div class="col-md-8 inline-content-fr">
+                    <div class="inline" data-id="colManager"></div>
+                    <div class="inline" data-id="containerCheckBox" style="display: none;">
+                        <label class="checkbox-inline btn" for="inputLabel">
+                            <input type="checkbox" id="inputLabel" name="queryType" name="check" data-id="checkDeletedEntity" />
+                            <b>Show historical entities</b></label>
+                    </div>
+                    <div class="inline">
+                        {{#if taxonomy}}
+                        <a href="javascript:void(0)" class=" multiSelectTerm btn btn-action btn-sm inline" style="display:none" data-id="addTerm"><i class="fa fa-plus"></i> Assign Term</a> {{/if}}
+                        <a href="javascript:void(0)" class=" multiSelectTag assignTag btn btn-action btn-sm" style="display:none" data-id="addAssignTag"><i class="fa fa-plus"></i> Assign Tag</a>
+                    </div>
+                </div>
             </div>
             <div id="r_searchResultTableLayoutView">
                 {{#if entityCreate}}
@@ -51,6 +52,47 @@
                 </div>
                 {{/if}}
             </div>
+            <div class="row pagination-box" style="display: none">
+                <div class="col-md-offset-4 col-md-8">
+                    <div class="inline-content-fr">
+                        <div class="backgrid-paginator inline">
+                            <ul class="" data-id="paginationDiv" style="display:none">
+                                <li>
+                                    <button type="button" data-id="previousData" title="Previous" disabled=true>
+                                        <i class="fa fa-angle-left" aria-hidden="true"></i>
+                                    </button>
+                                </li>
+                                <li class="active">
+                                    <a href="javascript:void(0)" data-id="activePage"></a>
+                                </li>
+                                <li>
+                                    <button type="button" data-id="nextData" title="Next">
+                                        <i class="fa fa-angle-right" aria-hidden="true"></i>
+                                    </button>
+                                </li>
+                            </ul>
+                        </div>
+                        <div class="inline col-md-4" data-id="paginationDiv">
+                            <div class="input-group" data-id="goToPageDiv">
+                                <input type="text" class="form-control number-input" data-id="gotoPage" placeholder="Goto Page" />
+                                <span class="input-group-btn">
+                                    <button class="btn btn-secondary" type="button" data-id="gotoPagebtn" title="Goto Page" disabled="disabled">Go!</button>
+                                </span>
+                            </div>
+                        </div>
+                        <div class="inline">
+                            <div class="form-group inline-content">
+                                <span class="control-label-sm inline ">Page Limit :</span>
+                                <div class="inline" style="width: 80px;">
+                                    <select data-id="showPage" multiple="multiple" class="form-control">
+                                    </select>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 </div>
 <div class="text-center" data-id="columnEmptyInfo" style="display: none;">

dashboardv2/public/js/templates/tag/AddTagAttributeView_tmpl.html

@@ -19,10 +19,10 @@
 </div>
 <div class="row row-margin-bottom hide">
     <div class="col-sm-12">
-        <div class="clearfix">
-            <button type="button" class="btn btn-success btn-sm pull-right" data-id="attributeData"><i class="fa fa-plus"></i> Add New Attribute</button>
+        <div class="clearfix form-group">
+            <button type="button" class="btn btn-action btn-sm" data-id="attributeData"><i class="fa fa-plus"></i> Add New Attributes</button>
         </div>
-        <div class="form-group" data-id="addAttributeDiv">
+        <div class="row" data-id="addAttributeDiv">
         </div>
     </div>
 </div>

dashboardv2/public/js/templates/tag/TagAttributeDetailLayoutView_tmpl.html

@@ -18,24 +18,21 @@
     <div class="fontLoader">
         <i class="fa fa-refresh fa-spin-custom"></i>
     </div>
-    <div class="tagDetail">
-        <h1><span data-id="title"></span></h1>
-        <button type="button" data-id="editButton" class="btn btn-default pull-right editbutton" id="editText"><i class="fa fa-pencil"></i></button>
-        <p class="sub-title" data-id="description"></p>
-        <div class="superType" style="display:none">
-            <span class="superTypeLabel">Derived From:</span>
-            <div data-id="showSuperType" style="display: inline-block;">
+    <div class="tagDetail clearfix form-horizontal col-md-12">
+        <h1 class="form-group"><span data-id="title"></span></h1>
+        <button type="button" data-id="editButton" class="btn btn-sm btn-action pull-right"><i class="fa fa-pencil"></i></button>
+        <p class="form-group" data-id="description"></p>
+        <div class="superType form-group" style="display:none">
+            <label class="control-label-sm-pr pull-left">Derived From:</label>
+            <div data-id="showSuperType" class="btn-inline">
             </div>
         </div>
-        <div class="attributes">
-            <span class="attrLabel">Attributes:</span>
-            <div data-id="showAttribute">
-            </div>
-            <div class="dropdown addTag-dropdown" data-id="addTagListBtn">
-                <div class=" addTagBase dropdown-toggle" data-id="addTagBtn" data-toggle="dropdown">
-                    <div class="addTagText" data-id="addTagtext" style="display: block">ADD Attribute &nbsp; <i class="fa fa-plus"></i></div>
-                    <div class="addTagPlus" data-id="addTagPlus" style="display: none"><i class="fa fa-plus"></i></div>
+        <div class="attributes form-group">
+            <label class="pull-left control-label-sm-pr">Attributes:</label>
+            <div class="btn-inline">
+                <div data-id="showAttribute" class="pull-left">
                 </div>
+                <button type="button" data-id="addAttribute" class="btn btn-action btn-sm pull-left"><i class="fa fa-plus"></i></button>
             </div>
         </div>
     </div>

dashboardv2/public/js/templates/tag/TagAttributeItemView_tmpl.html

@@ -14,12 +14,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 -->
-<div class="row">
-    <div class="col-md-7 attrTopMargin">
+<div class="form-group clearfix">
+    <div class="col-md-7">
         <input class="form-control attributeInput" data-id="attributeInput" placeholder="Attribute name">
         </input>
     </div>
-    <div class="col-md-3 attrTopMargin">
+    <div class="col-md-3">
         <select class="form-control dataTypeSelector" data-id="dataTypeSelector">
             <option selected="selected">string</option>
             <option>boolean</option>
@@ -31,7 +31,7 @@
             <option>date</option>
         </select>
     </div>
-    <div class="col-md-2 attrTopMargin attributePlusData" align="right">
+    <div class="col-md-2 attributePlusData" align="right">
         <button type="button" class="btn btn-danger btn-sm closeInput" data-id="close"><i class="fa fa-times"></i></button>
     </div>
 </div>
\ No newline at end of file

dashboardv2/public/js/templates/tag/TagLayoutView_tmpl.html

@@ -15,8 +15,8 @@
  * limitations under the License.
 -->
 <div class="clearfix add-seperator">
-    <button type="button" class="btn btn-atlasAction btn-atlas pull-left" data-id="createTag" type="button"><i class="fa fa-plus"></i> Create Tag</button>
-    <button type="button" class="btn btn-atlasAction btn-atlas pull-right" title="Refresh" data-id="refreshTag" onclick="this.blur();" type="button"><i class="fa fa-refresh"></i></button>
+    <button type="button" class="btn btn-action btn-md pull-left" data-id="createTag" type="button"><i class="fa fa-plus"></i> Create Tag</button>
+    <button type="button" class="btn btn-action btn-md pull-right" title="Refresh" data-id="refreshTag" onclick="this.blur();" type="button"><i class="fa fa-refresh"></i></button>
 </div>
 <input type="text" class="form-control" data-id="offlineSearchTag" placeholder="Search Tags">
 <ul class="tag-tree" data-id="tagsParent">

dashboardv2/public/js/templates/tag/addTagModalView_tmpl.html

@@ -30,7 +30,7 @@
         </div>
         <div class="col-sm-12" style="display:none">
             <p>Tag Attributes(optional)</p>
-            <p class="tagAttributeLabel">Add attribute values for this tag</p>
+            <p class="text-gray">Add attribute values for this tag</p>
             <div data-id="tagAttribute"></div>
         </div>
     </div>

dashboardv2/public/js/templates/tag/createTagLayoutView_tmpl.html

@@ -17,28 +17,35 @@
 <div class="fontLoader">
     <i class="fa fa-refresh fa-spin-custom"></i>
 </div>
-<form name="tagDefinitionform" class="css-form hide" data-id="createTagForm">
+<form name="tagDefinitionform" class="hide form-horizontal" data-id="createTagForm">
     <div class="form-group">
+        <label class="control-label col-sm-2 {{#if create}}required{{/if}}" for="name">Name</label>
         {{#if create}}
-        <input class="form-control row-margin-bottom" data-id="tagName" placeholder="Name(required)" autofocus>
-        </input>
+        <div class="col-sm-10">
+            <input class="form-control" data-id="tagName" placeholder="Name(required)" autofocus/>
+        </div>
         {{else}}
-        <h4 class="ellipsis"><span data-id="title"></span></h4>
-        </input>
-        {{/if}}
-        <input class="form-control row-margin-bottom" data-id="description" value="{{description}}" placeholder="Description">
-        </input>
+        <span class="ellipsis control-label text-left col-sm-10" data-id="title"></span> {{/if}}
+    </div>
+    <div class="form-group">
+        <label class="control-label col-sm-2" for="description">Description</label>
+        <div class="col-sm-10">
+            <input class="form-control" data-id="description" value="{{description}}" placeholder="Description" />
+        </div>
+    </div>
     {{#if create}}
-        <div class="row row-margin-bottom">
+    <div class="form-group">
         <div class="col-md-12">
-                <span>Select tags to inherit attributes(optional)</span>
-                <p class="attributeText">Attributes define additional properties for the tag</p>
+            <label>Select tags to inherit attributes(optional)</label>
+            <p class="text-gray">Attributes define additional properties for the tag</p>
             <select class="form-control" data-id="parentTagList" multiple="multiple"></select>
         </div>
     </div>
-        <div class="clearfix">
-            <span class="pull-left">Attributes(optional)</span>
-            <button type="button" class="btn btn-success btn-sm pull-right" data-id="attributeData"><i class="fa fa-plus"></i> Add New Attribute</button>
+    <div class="form-group">
+        <label class="col-sm-12">Attributes(optional)</label>
+        <div class="col-sm-12">
+            <button title="Add New Attribute" type="button" class="btn btn-action btn-sm" data-id="attributeData"><i class="fa fa-plus"></i> Add New Attributes</button>
+        </div>
     </div>
     {{/if}}
     <div data-id="addAttributeDiv">

dashboardv2/public/js/utils/CommonViewFunction.js

@@ -94,7 +94,7 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
                         var id = "";
                         if (data.guid) {
                             if (Enums.entityStateReadOnly[data.status]) {
-                                deleteButton += '<button title="Deleted" class="btn btn-atlasAction btn-atlas deleteBtn"><i class="fa fa-trash"></i></button>';
+                                deleteButton += '<button title="Deleted" class="btn btn-action btn-md deleteBtn"><i class="fa fa-trash"></i></button>';
                             }
                             id = data.guid;
                         }
@@ -177,7 +177,7 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
                     }
                     if (readOnly) {
                         if (!fetch) {
-                            tempLink += '<button title="Deleted" class="btn btn-atlasAction btn-atlas deleteBtn"><i class="fa fa-trash"></i></button>';
+                            tempLink += '<button title="Deleted" class="btn btn-action btn-md deleteBtn"><i class="fa fa-trash"></i></button>';
                             subLink += '<div class="block readOnlyLink">' + tempLink + '</div>';
                         } else {
                             fetch = false;
@@ -310,7 +310,7 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
                 var checkTagOrTerm = Utils.checkTagOrTerm(term);
                 if (checkTagOrTerm.term) {
                     terms.push({
-                        deleteHtml: '<a class="pull-left" title="Remove Term"><i class="fa fa-trash" data-id="tagClick" data-type="term" data-assetname="' + entityName + '" data-name="' + term + '" data-guid="' + obj.guid + '" ></i></a>',
+                        deleteHtml: '<a href="javascript:void(0)" class="pull-left" title="Remove Term"><i class="fa fa-trash" data-id="tagClick" data-type="term" data-assetname="' + entityName + '" data-name="' + term + '" data-guid="' + obj.guid + '" ></i></a>',
                         url: _.unescape(term).split(".").join("/"),
                         name: term
                     });
@@ -326,17 +326,17 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
             html += '<div class="' + className + '" dataterm-name="' + obj.name + '"><div class="liContent"></div>' + obj.deleteHtml + '</div>';
         })
         if (terms.length > 1) {
-            html += '<div><a  href="javascript:void(0)" data-id="showMoreLessTerm" class="inputTag inputTagGreen"><span>Show More </span><i class="fa fa-angle-right"></i></a></div>'
+            html += '<div><a  href="javascript:void(0)" data-id="showMoreLessTerm" class="btn btn-action btn-sm btn-icon-pd"><span>Show More </span><i class="fa fa-angle-right"></i></a></div>'
         }
         if (!Enums.entityStateReadOnly[obj.status]) {
             if (obj.guid) {
-                html += '<div><a href="javascript:void(0)" class="inputAssignTag" data-id="addTerm" data-guid="' + (obj.guid) + '"><i class="fa fa-folder-o"></i>' + " " + 'Assign Term</a></div>'
+                html += '<div><a href="javascript:void(0)" class="btn btn-action btn-sm" data-id="addTerm" data-guid="' + (obj.guid) + '"><i class="fa fa-plus"></i></a></div>'
             } else {
-                html += '<div><a href="javascript:void(0)" class="inputAssignTag" data-id="addTerm"><i class="fa fa-folder-o"></i>' + " " + 'Assign Term</a></div>'
+                html += '<div><a href="javascript:void(0)" class="btn btn-action btn-sm" data-id="addTerm"><i class="fa fa-plus"></i></a></div>'
             }
         }
         return {
-            html: '<div class="termTableBreadcrumb" dataterm-id="' + id + '">' + html + '</div>',
+            html: '<div class="termTableBreadcrumb btn-inline" dataterm-id="' + id + '">' + html + '</div>',
             object: { scopeId: id, value: terms }
         }
 
@@ -352,8 +352,8 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
             traits.map(function(tag) {
                 var checkTagOrTerm = Utils.checkTagOrTerm(tag);
                 if (checkTagOrTerm.tag) {
-                    var className = "inputTag",
-                        tagString = '<a class="' + className + '" data-id="tagClick"><span class="inputValue">' + tag + '</span><i class="fa fa-times" data-id="delete"  data-assetname="' + entityName + '"data-name="' + tag + '" data-type="tag" data-guid="' + obj.guid + '" ></i></a>';
+                    var className = "btn btn-action btn-sm btn-blue btn-icon",
+                        tagString = '<a class="' + className + '" data-id="tagClick"><span title="' + tag + '">' + tag + '</span><i class="fa fa-times" data-id="delete"  data-assetname="' + entityName + '"data-name="' + tag + '" data-type="tag" data-guid="' + obj.guid + '" ></i></a>';
                     if (count >= 1) {
                         popTag += tagString;
                     } else {
@@ -365,15 +365,50 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
         }
         if (!Enums.entityStateReadOnly[obj.status]) {
             if (obj.guid) {
-                addTag += '<a href="javascript:void(0)" data-id="addTag" class="inputTagAdd assignTag" data-guid="' + obj.guid + '" ><i class="fa fa-plus"></i></a>';
+                addTag += '<a href="javascript:void(0)" data-id="addTag" class="btn btn-action btn-sm assignTag" data-guid="' + obj.guid + '" ><i class="fa fa-plus"></i></a>';
             } else {
-                addTag += '<a href="javascript:void(0)" data-id="addTag" class="inputTagAdd assignTag"><i style="right:0" class="fa fa-plus"></i></a>';
+                addTag += '<a href="javascript:void(0)" data-id="addTag" class="btn btn-action btn-sm assignTag"><i style="right:0" class="fa fa-plus"></i></a>';
             }
         }
         if (count > 1) {
-            addTag += '<div data-id="showMoreLess" class="inputTagAdd assignTag tagDetailPopover"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></div>'
+            addTag += '<div data-id="showMoreLess" class="btn btn-action btn-sm assignTag"><i class="fa fa-ellipsis-h" aria-hidden="true"></i><div class="popup-tag">' + popTag + '</div></div>'
+        }
+        return '<div class="tagList btn-inline btn-fixed-width">' + atags + addTag + '</div>';
+    }
+    CommonViewFunction.generateQueryOfFilter = function(value) {
+        var entityFilters = CommonViewFunction.attributeFilter.extractUrl(value.entityFilters),
+            tagFilters = CommonViewFunction.attributeFilter.extractUrl(value.tagFilters),
+            queryArray = [],
+            objToString = function(filterObj) {
+                var tempObj = [];
+                _.each(filterObj, function(obj) {
+                    tempObj.push('<span class="key">' + _.escape(obj.id) + '</span>&nbsp<span class="operator">' + _.escape(obj.operator) + '</span>&nbsp<span class="value">' + _.escape(obj.value) + "</span>")
+                });
+                return tempObj.join('&nbsp<span class="operator">AND</span>&nbsp');
+            }
+        if (value.type) {
+            var typeKeyValue = '<span class="key">Type:</span>&nbsp<span class="value">' + _.escape(value.type) + '</span>';
+            if (entityFilters) {
+                typeKeyValue += '&nbsp<span class="operator">AND</span>&nbsp' + objToString(entityFilters);
+            }
+            queryArray.push(typeKeyValue)
+        }
+        if (value.tag) {
+            var tagKeyValue = '<span class="key">Tag:</span>&nbsp<span class="value">' + _.escape(value.tag) + '</span>';
+            if (tagFilters) {
+                tagKeyValue += '&nbsp<span class="operator">AND</span>&nbsp' + objToString(tagFilters);
+            }
+            queryArray.push(tagKeyValue);
+        }
+        if (value.query) {
+            queryArray.push('<span class="key">Query:</span>&nbsp<span class="value">' + _.escape(value.query) + '</span>&nbsp');
+        }
+        if (queryArray.length == 1) {
+            return queryArray.join();
+        } else {
+            return "<span>(</span>&nbsp" + queryArray.join('<span>&nbsp)</span>&nbsp<span>AND</span>&nbsp<span>(</span>&nbsp') + "&nbsp<span>)</span>";
+
         }
-        return '<div class="tagList">' + atags + addTag + '<div class="popover popoverTag bottom" style="display:none"><div class="arrow"></div><div class="popover-content popoverContainer">' + popTag + '</div></div></div>';
     }
     CommonViewFunction.saveTermToAsset = function(options, that) {
         require(['models/VCatalog'], function(Vcatalog) {

dashboardv2/public/js/utils/Messages.js

@@ -31,11 +31,17 @@ define(['require'], function(require) {
         deleteErrorMessage: " could not be deleted",
         removeSuccessMessage: " has been removed successfully",
         removeErrorMessage: " could not be removed",
+        editSuccessMessage: " has been updated successfully",
+        assignDeletedEntity: " is deleted, tag cannot be assigned",
+        search: {
+            noRecordForPage: "No record found at ",
+            onSamePage : "You are on the same page!"
+        },
+        tag: {
             addAttributeSuccessMessage: "Tag attribute is added successfully",
             updateTagDescriptionMessage: "Tag description is updated successfully",
             updateTermDescriptionMessage: "Term description is updated successfully",
-        editSuccessMessage: " has been updated successfully",
-        assignDeletedEntity: " is deleted, tag cannot be assigned"
+        }
     };
     return Messages;
 });
\ No newline at end of file

dashboardv2/public/js/utils/Overrides.js

@@ -49,6 +49,31 @@ define(['require', 'utils/Utils', 'marionette', 'backgrid', 'asBreadcrumbs', 'jq
             }
         }
     });
+    var getPopoverEl = function(e) {
+        return $(e.target).parent().data("bs.popover") || $(e.target).data("bs.popover") || $(e.target).parents('.popover').length;
+    }
+    $('body').on('click DOMMouseScroll mousewheel', function(e) {
+        if (e.originalEvent) {
+            // Do action if it is triggered by a human.
+            //e.isImmediatePropagationStopped();
+            var isPopOverEl = getPopoverEl(e)
+            if (!isPopOverEl) {
+                $('.popover').popover('hide');
+            }
+        }
+    });
+    $('body').on('hidden.bs.popover', function(e) {
+        $(e.target).data("bs.popover").inState = { click: false, hover: false, focus: false }
+    });
+    $('body').on('show.bs.popover', '[data-js="popover"]', function() {
+        $('.popover').not(this).popover('hide');
+    });
+    $('body').on('keypress', 'input.number-input,.number-input .select2-search__field', function(e) {
+        if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
+            return false;
+        }
+    });
+
     // For placeholder support 
     if (!('placeholder' in HTMLInputElement.prototype)) {
         var originalRender = Backbone.Marionette.LayoutView.prototype.render;
@@ -62,6 +87,12 @@ define(['require', 'utils/Utils', 'marionette', 'backgrid', 'asBreadcrumbs', 'jq
         function(n) {
             return (this.length > n) ? this.substr(0, n - 1) + '...' : this;
         };
+    String.prototype.capitalize = function() {
+        return this.charAt(0).toUpperCase() + this.slice(1);
+    }
+
+
+
     /*
      * Overriding Cell for adding custom className to Cell i.e <td>
      */
@@ -107,6 +138,55 @@ define(['require', 'utils/Utils', 'marionette', 'backgrid', 'asBreadcrumbs', 'jq
         }
     });
 
+
+    /*
+     * Backgrid Header render listener when resize or re-ordered
+     */
+    var BackgridHeaderInitializeMethod = function(options) {
+        this.columns = options.columns;
+        if (!(this.columns instanceof Backbone.Collection)) {
+            this.columns = new Backgrid.Columns(this.columns);
+        }
+        this.createHeaderRow();
+
+        this.listenTo(this.columns, "sort", _.bind(function() {
+            this.createHeaderRow();
+            this.render();
+        }, this));
+    };
+
+    /**
+     * Sets up a new headerRow and attaches it to the view
+     * Tested with backgrid 0.3.5
+     */
+    var BackgridHeaderCreateHeaderRowMethod = function() {
+        this.row = new Backgrid.HeaderRow({
+            columns: this.columns,
+            collection: this.collection
+        });
+    };
+
+    /**
+     * Tested with backgrid 0.3.5
+     */
+    var BackgridHeaderRenderMethod = function() {
+        this.$el.empty();
+        this.$el.append(this.row.render().$el);
+        this.delegateEvents();
+
+        // Trigger event
+        this.trigger("backgrid:header:rendered", this);
+
+        return this;
+    };
+
+    // Backgrid patch
+    Backgrid.Header.prototype.initialize = BackgridHeaderInitializeMethod;
+    Backgrid.Header.prototype.createHeaderRow = BackgridHeaderCreateHeaderRowMethod;
+    Backgrid.Header.prototype.render = BackgridHeaderRenderMethod;
+
+    /* End: Backgrid Header render listener when resize or re-ordered */
+
     var UriCell = Backgrid.UriCell = Backgrid.Cell.extend({
         className: "uri-cell",
         title: null,
@@ -140,8 +220,4 @@ define(['require', 'utils/Utils', 'marionette', 'backgrid', 'asBreadcrumbs', 'jq
             return this;
         }
     });
-
-    String.prototype.capitalize = function() {
-        return this.charAt(0).toUpperCase() + this.slice(1);
-    }
 });
\ No newline at end of file

dashboardv2/public/js/utils/TableLayout.js

@@ -37,6 +37,9 @@ define(['require',
             _viewName: 'FSTableLayout',
 
             template: FSTablelayoutTmpl,
+            templateHelpers: function() {
+                return this.options;
+            },
 
             /** Layout sub regions */
             regions: {
@@ -86,22 +89,16 @@ define(['require',
                page handlers for pagination
             */
             controlOpts: {
-                rewind: {
-                    label: "《",
-                    title: "First"
-                },
+                rewind: null,
                 back: {
-                    label: "〈",
+                    label: "<i class='fa fa-angle-left'></i>",
                     title: "Previous"
                 },
                 forward: {
-                    label: "&#12297;",
+                    label: "<i class='fa fa-angle-right'></i>",
                     title: "Next"
                 },
-                fastForward: {
-                    label: "&#12299;",
-                    title: "Last"
-                }
+                fastForward: null
             },
             columnOpts: {
                 opts: {
@@ -110,7 +107,8 @@ define(['require',
                     saveState: false,
                     loadStateOnInit: true
                 },
-                visibilityControlOpts: {}
+                visibilityControlOpts: {},
+                el: null
             },
 
             includePagination: true,
@@ -129,8 +127,6 @@ define(['require',
 
             includeOrderAbleColumns: false,
 
-            includeOverlayLoader: false,
-
             includeTableLoader: true,
 
 
@@ -148,7 +144,7 @@ define(['require',
             initialize: function(options) {
                 _.extend(this, _.pick(options, 'collection', 'columns', 'includePagination',
                     'includeHeaderSearch', 'includeFilter', 'includePageSize',
-                    'includeFooterRecords', 'includeColumnManager', 'includeSizeAbleColumns', 'includeOrderAbleColumns', 'includeOverlayLoader', 'includeTableLoader'));
+                    'includeFooterRecords', 'includeColumnManager', 'includeSizeAbleColumns', 'includeOrderAbleColumns', 'includeTableLoader'));
 
                 _.extend(this.gridOpts, options.gridOpts, { collection: this.collection, columns: this.columns });
                 _.extend(this.filterOpts, options.filterOpts);
@@ -162,22 +158,10 @@ define(['require',
             /** all events binding here */
             bindEvents: function() {
                 this.listenTo(this.collection, 'request', function() {
-                    if (this.includeTableLoader) {
                     this.$('div[data-id="r_tableSpinner"]').addClass('show');
-                    }
-                    if (this.includeOverlayLoader) {
-                        this.$('.t_tableOverlay').addClass('fontLoader');
-                        this.$('.t_tableOverlay').show();
-                    }
                 }, this);
                 this.listenTo(this.collection, 'sync error', function() {
-                    if (this.includeTableLoader) {
                     this.$('div[data-id="r_tableSpinner"]').removeClass('show');
-                    }
-                    if (this.includeOverlayLoader) {
-                        this.$('.t_tableOverlay').removeClass('fontLoader');
-                        this.$('.t_tableOverlay').hide();
-                    }
                 }, this);
 
                 this.listenTo(this.collection, 'reset', function(collection, response) {
@@ -222,9 +206,6 @@ define(['require',
                 if (this.includeFilter) {
                     this.renderFilter();
                 }
-                if (!this.includePageSize) {
-                    this.ui.selectPageSize.remove();
-                }
                 if (this.includeFooterRecords) {
                     this.renderFooterRecords(this.collection.state);
                 }
@@ -237,8 +218,15 @@ define(['require',
                 if (this.includeOrderAbleColumns) {
                     this.renderOrderAbleColumns();
                 }
-                this.$('[data-id="pageSize"]').val(this.collection.state.pageSize);
-
+                if (this.includePageSize) {
+                    this.ui.selectPageSize.select2({
+                        data: _.sortBy(_.union([25, 50, 100, 150, 200, 250, 300, 350, 400, 450, 500], [this.collection.state.pageSize])),
+                        tags: true,
+                        dropdownCssClass: "number-input",
+                        multiple: false
+                    });
+                    this.ui.selectPageSize.val(this.collection.state.pageSize).trigger('change', { "skipViewChange": true });
+                }
 
             },
             /**
@@ -316,13 +304,21 @@ define(['require',
              */
             renderColumnManager: function() {
                 var that = this,
-                    $el = this.$("[data-id='control']"),
+                    $el = this.columnOpts.el || this.$("[data-id='control']"),
                     colManager = new Backgrid.Extension.ColumnManager(this.columns, this.columnOpts.opts),
                     // Add control
                     colVisibilityControl = new Backgrid.Extension.ColumnManagerVisibilityControl(_.extend({
                         columnManager: colManager,
                     }, this.columnOpts.visibilityControlOpts));
+                if (!$el.jquery) {
+                    $el = $($el)
+                }
+                if (this.columnOpts.el) {
+                    $el.html(colVisibilityControl.render().el);
+                } else {
                     $el.append(colVisibilityControl.render().el);
+                }
+
                 colManager.on("state-changed", function(state) {
                     that.collection.trigger("state-changed", state);
                 });
@@ -387,18 +383,23 @@ define(['require',
              * handle change event on page size select box
              * @param  {Object} e event
              */
-            onPageSizeChange: function(e) {
+            onPageSizeChange: function(e, options) {
+                if (!options || !options.skipViewChange) {
                     var pagesize = $(e.currentTarget).val();
                     this.collection.state.pageSize = parseInt(pagesize, 10);
 
                     this.collection.state.currentPage = this.collection.state.firstPage;
-
+                    if (this.collection.mode == "client") {
+                        this.collection.reset(this.collection.toJSON());
+                    } else {
                         this.collection.fetch({
                             sort: false,
                             reset: true,
                             cache: false
                         });
                     }
+                }
+            }
         });
 
     return FSTableLayout;

dashboardv2/public/js/utils/Utils.js

@@ -35,6 +35,27 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums',
             return entityMap[s];
         });
     }
+
+    Utils.generatePopover = function(options) {
+        if (options.el) {
+            return options.el.popover(_.extend({
+                placement: 'auto bottom',
+                html: true,
+                template: '<div class="popover fixed-popover fade bottom"><div class="arrow"></div><h3 class="popover-title"></h3><div class="' + (options.contentClass ? options.contentClass : '') + ' popover-content"></div></div>'
+            }, options.popoverOptions));
+        }
+    }
+
+    Utils.getNumberSuffix = function(options) {
+        if (options && options.number) {
+            var n = options.number,
+                s = ["th", "st", "nd", "rd"],
+                v = n % 100,
+                suffix = (s[(v - 20) % 10] || s[v] || s[0]);
+            return n + (options.sup ? '<sup>' + suffix + '</sup>' : suffix);
+        }
+    }
+
     Utils.generateUUID = function() {
         var d = new Date().getTime();
         if (window.performance && typeof window.performance.now === "function") {
@@ -47,7 +68,7 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums',
         });
         return uuid;
     };
-
+    pnotify.prototype.options.styling = "bootstrap3";
     var notify = function(options) {
         return new pnotify(_.extend({
             icon: true,
@@ -102,7 +123,24 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums',
             title: 'Confirmation',
             hide: false,
             confirm: {
-                confirm: true
+                confirm: true,
+                buttons: [{
+                        text: 'cancel',
+                        addClass: 'btn-action btn-md',
+                        click: function(notice) {
+                            options.cancel(notice);
+                            notice.remove();
+                        }
+                    },
+                    {
+                        text: 'Ok',
+                        addClass: 'btn-atlas btn-md',
+                        click: function(notice) {
+                            options.ok(notice);
+                            notice.remove();
+                        }
+                    }
+                ]
             },
             buttons: {
                 closer: false,
@@ -228,10 +266,19 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums',
                 });
                 urlParams = urlParams.slice(0, -1);
                 options.url += urlParams;
-
             }
             if (options.updateTabState) {
-                $.extend(Globals.saveApplicationState.tabState, options.updateTabState());
+                var urlUpdate = {
+                    stateChanged: true
+                };
+                if (Utils.getUrlState.isTagTab(options.url)) {
+                    urlUpdate['tagUrl'] = options.url;
+                } else if (Utils.getUrlState.isTaxonomyTab(options.url)) {
+                    urlUpdate['taxonomyUrl'] = options.url;
+                } else if (Utils.getUrlState.isSearchTab(options.url)) {
+                    urlUpdate['searchUrl'] = options.url;
+                }
+                $.extend(Globals.saveApplicationState.tabState, urlUpdate);
             }
             Backbone.history.navigate(options.url, { trigger: options.trigger != undefined ? options.trigger : true });
         }
@@ -253,17 +300,17 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums',
         isInitial: function() {
             return this.getQueryUrl().firstValue == undefined ? true : false;
         },
-        isTagTab: function() {
-            return this.getQueryUrl().firstValue == "tag" ? true : false;
+        isTagTab: function(url) {
+            return this.getQueryUrl(url).firstValue == "tag" ? true : false;
         },
-        isTaxonomyTab: function() {
-            return this.getQueryUrl().firstValue == "taxonomy" ? true : false;
+        isTaxonomyTab: function(url) {
+            return this.getQueryUrl(url).firstValue == "taxonomy" ? true : false;
         },
-        isSearchTab: function() {
-            return this.getQueryUrl().firstValue == "search" ? true : false;
+        isSearchTab: function(url) {
+            return this.getQueryUrl(url).firstValue == "search" ? true : false;
         },
-        isDetailPage: function() {
-            return this.getQueryUrl().firstValue == "detailPage" ? true : false;
+        isDetailPage: function(url) {
+            return this.getQueryUrl(url).firstValue == "detailPage" ? true : false;
         },
         getLastValue: function() {
             return this.getQueryUrl().lastValue;

dashboardv2/public/js/views/audit/AuditTableLayoutView.js

@@ -42,7 +42,8 @@ define(['require',
                 auditCreate: "[data-id='auditCreate']",
                 previousAuditData: "[data-id='previousAuditData']",
                 nextAuditData: "[data-id='nextAuditData']",
-                pageRecordText: "[data-id='pageRecordText']"
+                pageRecordText: "[data-id='pageRecordText']",
+                activePage: "[data-id='activePage']"
             },
             /** ui events hash */
             events: function() {
@@ -92,21 +93,11 @@ define(['require',
             },
             bindEvents: function() {},
             getToOffset: function() {
-                var toOffset = 0;
-                if (this.entityCollection.models.length < this.limit) {
-                    toOffset = (this.getFromOffset() + (this.entityCollection.models.length));
-                } else {
-                    toOffset = (this.getFromOffset() + (this.entityCollection.models.length - 1));
-                }
-                return toOffset;
+                return ((this.limit - 1) * this.currPage);
             },
-            getFromOffset: function(options) {
-                var count = (this.currPage - 1) * (this.limit - 1);
-                if (options && (options.nextClick || options.previousClick || this.entityCollection.models.length)) {
-                    return count + 1;
-                } else {
-                    return count;
-                }
+            getFromOffset: function(toOffset) {
+                // +2 because of toOffset is alrady in minus and limit is +1;
+                return ((toOffset - this.limit) + 2);
             },
             renderOffset: function(options) {
                 var entityLength;
@@ -122,12 +113,16 @@ define(['require',
                         this.currPage--;
                     }
                 }
-                if (this.entityCollection.models.length > 25) {
+                if (this.entityCollection.models.length === this.limit) {
+                    // Because we have 1 extra record.
                     entityLength = this.entityCollection.models.length - 1;
                 } else {
                     entityLength = this.entityCollection.models.length
                 }
-                this.ui.pageRecordText.html("Showing  <u>" + entityLength + " records</u> From " + this.getFromOffset(options) + " - " + this.getToOffset());
+                this.ui.activePage.attr('title', "Page " + this.currPage);
+                this.ui.activePage.text(this.currPage);
+                var toOffset = this.getToOffset();
+                this.ui.pageRecordText.html("Showing  <u>" + entityLength + " records</u> From " + this.getFromOffset(toOffset) + " - " + toOffset);
             },
             fetchCollection: function(options) {
                 var that = this;
@@ -222,7 +217,7 @@ define(['require',
                         sortable: false,
                         formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
                             fromRaw: function(rawValue, model) {
-                                return '<div class="label label-success auditDetailBtn" data-id="auditCreate" data-action="' + Enums.auditAction[model.get('action')] + '" data-modalId="' + model.get('eventKey') + '">Detail</div>';
+                                return '<div class="btn btn-action btn-sm" data-id="auditCreate" data-action="' + Enums.auditAction[model.get('action')] + '" data-modalId="' + model.get('eventKey') + '">Detail</div>';
                             }
                         })
                     },

dashboardv2/public/js/views/audit/CreateAuditTableLayoutView.js

@@ -42,7 +42,7 @@ define(['require',
                 noData: "[data-id='noData']",
                 tableAudit: "[data-id='tableAudit']",
                 auditHeaderValue: "[data-id='auditHeaderValue']",
-                tagHeader: "[data-id='tagHeader']"
+                name: "[data-id='name']"
             },
             /** ui events hash */
             events: function() {
@@ -81,8 +81,8 @@ define(['require',
                     }
                     var values = parseDetailsObject.values;
                     if (parseDetailsObject && parseDetailsObject.values) {
-                        var tagHeader = ((name ? name : this.entityName));
-                        this.ui.tagHeader.append(tagHeader);
+                        var name = ((name ? name : this.entityName));
+                        this.ui.name.text(name);
                         this.ui.auditHeaderValue.html('<th>Key</th><th>New Value</th>');
                         table = CommonViewFunction.propertyTable({ scope: this, valueObject: values, attributeDefs: this.attributeDefs, extractJSON: { extractKey: 'value' } });
                         if (table.length) {
@@ -97,8 +97,9 @@ define(['require',
                         this.ui.auditHeaderValue.html('<th>' + this.action + '</th>');
                         this.ui.auditValue.html("<tr><td>" + (name ? name : this.entityName) + "</td></tr>");
                     }
+                } else if (detailObj == "Deleted entity") {
+                    this.ui.name.text(this.entityName);
                 }
-
             },
         });
     return CreateAuditTableLayoutView;

dashboardv2/public/js/views/business_catalog/BusinessCatalogDetailLayoutView.js

@@ -139,7 +139,7 @@ define(['require',
             },
             onSaveDescriptionClick: function(view) {
                 view.description = view.ui.description.val();
-                this.onSaveButton(this.collection.first().toJSON(), Messages.updateTermDescriptionMessage, view);
+                this.onSaveButton(this.collection.first().toJSON(), Messages.tag.updateTermDescriptionMessage, view);
                 this.ui.description.show();
             },
             onSaveButton: function(saveObject, message, view) {

dashboardv2/public/js/views/business_catalog/SideNavLayoutView.js

@@ -75,9 +75,7 @@ define(['require',
                     url: urlString,
                     mergeBrowserUrl: false,
                     trigger: true,
-                    updateTabState: function() {
-                        return { stateChanged: true };
-                    },
+                    updateTabState: true
                 });
             };
             return events;

dashboardv2/public/js/views/business_catalog/TreeLayoutView.js

@@ -61,10 +61,8 @@ define(['require',
                         Utils.setUrl({
                             url: '#!/taxonomy/detailCatalog' + that.url,
                             mergeBrowserUrl: false,
-                            updateTabState: function() {
-                                return { taxonomyUrl: this.url, stateChanged: true };
-                            },
-                            trigger: true
+                            trigger: true,
+                            updateTabState: true
                         });
                     }
                 };
@@ -79,9 +77,7 @@ define(['require',
                             url: "#!/taxonomy/detailCatalog" + termUrl,
                             mergeBrowserUrl: false,
                             trigger: true,
-                            updateTabState: function() {
-                                return { taxonomyUrl: this.url, stateChanged: true };
-                            }
+                            updateTabState: true
                         });
                     }
                 };
@@ -130,17 +126,6 @@ define(['require',
                 this.bindEvents();
                 that.ui.backTaxanomy.hide();
                 this.fetchCollection(this.url, true);
-                this.$el.on("click", '.termPopoverList li', function(e) {
-                    that[$(this).find("a").data('fn')](e);
-                });
-                $('body').click(function(e) {
-                    if (that.$('.termPopoverList').length) {
-                        if ($(e.target).hasClass('termPopover')) {
-                            return;
-                        }
-                        that.$('.termPopover').popover('hide');
-                    }
-                });
                 this.fetchTaxanomyCollections();
                 if (!this.viewBased) {
                     this.ui.descriptionAssign.show();
@@ -163,9 +148,7 @@ define(['require',
                             url: currentURL,
                             mergeBrowserUrl: false,
                             trigger: true,
-                            updateTabState: function() {
-                                return { taxonomyUrl: this.url, stateChanged: true };
-                            }
+                            updateTabState: true
                         });
                     }
                 }
@@ -185,9 +168,7 @@ define(['require',
                                 url: "#!/taxonomy/detailCatalog" + url,
                                 mergeBrowserUrl: false,
                                 trigger: false,
-                                updateTabState: function() {
-                                    return { taxonomyUrl: this.url, stateChanged: true };
-                                }
+                                updateTabState: true
                             });
                         }
                         this.fetchCollection(url, true);
@@ -223,9 +204,7 @@ define(['require',
                                 url: "#!/taxonomy/detailCatalog" + url,
                                 mergeBrowserUrl: false,
                                 trigger: true,
-                                updateTabState: function() {
-                                    return { taxonomyUrl: this.url, stateChanged: true };
-                                }
+                                updateTabState: true
                             });
                         }
                     } else {
@@ -327,11 +306,9 @@ define(['require',
                         searchType: "dsl",
                         dslChecked: true
                     },
-                    updateTabState: function() {
-                        return { searchUrl: this.url, stateChanged: true };
-                    },
                     mergeBrowserUrl: false,
-                    trigger: true
+                    trigger: true,
+                    updateTabState: true
                 });
             },
             selectFirstElement: function() {
@@ -343,9 +320,7 @@ define(['require',
                             url: "#!/taxonomy/detailCatalog" + dataURL,
                             mergeBrowserUrl: false,
                             trigger: true,
-                            updateTabState: function() {
-                                return { taxonomyUrl: this.url, stateChanged: true };
-                            }
+                            updateTabState: true
                         });
                     }
                 }
@@ -425,29 +400,26 @@ define(['require',
                 }
                 this.hideLoader();
                 if (this.viewBased) {
-                    this.$('.termPopover').popover({
-                        placement: 'bottom',
-                        html: true,
-                        trigger: 'manual',
+
+
+                    Utils.generatePopover({
+                        el: this.$('.termPopover'),
                         container: this.$el,
-                        template: '<div class="popover fixedPopover fade bottom in"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
+                        popoverOptions: {
                             content: function() {
-                            var li = "<li class='listTerm'><i class='fa fa-plus'></i> <a href='javascript:void(0)' data-fn='onAddTerm'>Create Subterm</a></li>";
-                            /* "<li class='listTerm' ><i class='fa fa-arrow-right'></i> <a href='javascript:void(0)' data-fn='moveTerm'>Move Term</a></li>" +
-                             "<li class='listTerm' ><i class='fa fa-edit'></i> <a href='javascript:void(0)' data-fn='onEditTerm'>Edit Term</a></li>" +*/
+                                var lis = "<li class='listTerm'><i class='fa fa-plus'></i> <a href='javascript:void(0)' data-fn='onAddTerm'>Create Subterm</a></li>";
                                 var termDataURL = Utils.getUrlState.getQueryUrl().hash.split("terms");
                                 if (termDataURL.length > 1) {
-                                li = "<li class='listTerm' ><i class='fa fa-search'></i> <a href='javascript:void(0)' data-fn='onSearchTerm'>Search Assets</a></li>" + li;
-                                li += "<li class='listTerm'><i class='fa fa-trash'></i> <a href='javascript:void(0)' data-fn='deleteTerm'>Delete Term</a></li>";
+                                    lis = "<li class='listTerm' ><i class='fa fa-search'></i> <a href='javascript:void(0)' data-fn='onSearchTerm'>Search Assets</a></li>" + lis;
+                                    lis += "<li class='listTerm'><i class='fa fa-trash'></i> <a href='javascript:void(0)' data-fn='deleteTerm'>Delete Term</a></li>";
                                 }
-                            return "<ul class='termPopoverList'>" + li + "</ul>";
+                                return "<ul>" + lis + "</ul>";
                             }
-                    });
-                    this.$('.termPopover').off('click').on('click', function(e) {
-                        // if any other popovers are visible, hide them
-                        e.preventDefault();
-                        that.$('.termPopover').not(this).popover('hide');
-                        $(this).popover('show');
+                        }
+                    }).parent('.tools').off('click').on('click', 'li', function(e) {
+                        e.stopPropagation();
+                        that.$('.termPopover').popover('hide');
+                        that[$(this).find('a').data('fn')](e);
                     });
                 }
             },
@@ -458,7 +430,7 @@ define(['require',
                     'modules/Modal'
                 ], function(AddTermLayoutView, Modal) {
                     var view = new AddTermLayoutView({
-                        url: that.$('.taxonomyTree').find('li.active').find("a").data("href"),
+                        url: that.$('.taxonomyTree').find('li.active').find(">a[data-name]").data("href"),
                         model: new that.parentCollection.model()
                     });
                     var modal = new Modal({
@@ -545,9 +517,7 @@ define(['require',
                                     url: "#!/taxonomy/detailCatalog" + termURL,
                                     mergeBrowserUrl: false,
                                     trigger: true,
-                                    updateTabState: function() {
-                                        return { taxonomyUrl: this.url, stateChanged: true };
-                                    }
+                                    updateTabState: true
                                 });
                             }
                             that.fetchCollection(termURL, true);

dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js

@@ -19,6 +19,7 @@
 define(['require',
     'backbone',
     'hbs!tmpl/detail_page/DetailPageLayoutView_tmpl',
+    'hbs!tmpl/common/buttons_tmpl',
     'utils/Utils',
     'utils/CommonViewFunction',
     'utils/Globals',
@@ -26,7 +27,7 @@ define(['require',
     'utils/Messages',
     'utils/UrlLinks',
     'jquery-ui'
-], function(require, Backbone, DetailPageLayoutViewTmpl, Utils, CommonViewFunction, Globals, Enums, Messages, UrlLinks) {
+], function(require, Backbone, DetailPageLayoutViewTmpl, ButtonsTmpl, Utils, CommonViewFunction, Globals, Enums, Messages, UrlLinks) {
     'use strict';
 
     var DetailPageLayoutView = Backbone.Marionette.LayoutView.extend(
@@ -52,6 +53,7 @@ define(['require',
                 tagClick: '[data-id="tagClick"]',
                 title: '[data-id="title"]',
                 editButton: '[data-id="editButton"]',
+                editButtonContainer: '[data-id="editButtonContainer"]',
                 description: '[data-id="description"]',
                 editBox: '[data-id="editBox"]',
                 deleteTag: '[data-id="deleteTag"]',
@@ -77,7 +79,6 @@ define(['require',
                         var scope = $(e.currentTarget);
                         if (scope.hasClass('term')) {
                             var url = scope.data('href').split(".").join("/terms/");
-                            Globals.saveApplicationState.tabState.stateChanged = false;
                             Utils.setUrl({
                                 url: '#!/taxonomy/detailCatalog' + UrlLinks.taxonomiesApiUrl() + '/' + url,
                                 mergeBrowserUrl: false,
@@ -141,7 +142,7 @@ define(['require',
                                 this.ui.title.show();
                                 var titleName = '<span>' + this.name + '</span>';
                                 if (this.readOnly) {
-                                    titleName += '<button title="Deleted" class="btn btn-atlasAction btn-atlas deleteBtn"><i class="fa fa-trash"></i> Deleted</button>';
+                                    titleName += '<button title="Deleted" class="btn btn-action btn-md deleteBtn"><i class="fa fa-trash"></i> Deleted</button>';
                                 }
                                 this.ui.title.html(titleName);
                             } else {
@@ -160,10 +161,10 @@ define(['require',
                             this.addTagToTerms([]);
                         }
                         if (Globals.entityTypeConfList && _.isEmptyArray(Globals.entityTypeConfList)) {
-                            this.ui.editButton.show();
+                            this.ui.editButtonContainer.html(ButtonsTmpl({ btn_edit: true }));
                         } else {
                             if (_.contains(Globals.entityTypeConfList, collectionJSON.typeName)) {
-                                this.ui.editButton.show();
+                                this.ui.editButtonContainer.html(ButtonsTmpl({ btn_edit: true }));
                             }
                         }
                         if (collectionJSON.attributes && collectionJSON.attributes.columns) {
@@ -330,13 +331,13 @@ define(['require',
                 _.each(tagObject, function(val) {
                     var checkTagOrTerm = Utils.checkTagOrTerm(val);
                     if (checkTagOrTerm.term) {
-                        termData += '<span class="inputTag term" data-id="tagClick" data-href="' + val.typeName + '"><span class="inputValue">' + val.typeName + '</span><i class="fa fa-close" data-id="deleteTag" data-type="term"></i></span>';
+                        termData += '<span class="btn btn-action btn-sm btn-blue btn-icon term" data-id="tagClick" data-href="' + val.typeName + '"><span>' + val.typeName + '</span><i class="fa fa-close" data-id="deleteTag" data-type="term"></i></span>';
                     } else {
-                        tagData += '<span class="inputTag" data-id="tagClick"><span class="inputValue">' + val.typeName + '</span><i class="fa fa-close" data-id="deleteTag" data-type="tag"></i></span>';
+                        tagData += '<span class="btn btn-action btn-sm btn-icon btn-blue" data-id="tagClick"><span>' + val.typeName + '</span><i class="fa fa-close" data-id="deleteTag" data-type="tag"></i></span>';
                     }
                 });
-                this.ui.tagList.find("span.inputTag").remove();
-                this.ui.termList.find("span.inputTag").remove();
+                this.ui.tagList.find("span.btn").remove();
+                this.ui.termList.find("span.btn").remove();
                 this.ui.tagList.prepend(tagData);
                 this.ui.termList.prepend(termData);
             },

dashboardv2/public/js/views/entity/CreateEntityLayoutView.js

@@ -97,7 +97,7 @@ define(['require',
                     okText: okLabel,
                     allowCancel: true,
                     okCloses: false,
-                    width: '70%'
+                    width: '50%'
                 }).open();
                 this.modal.$el.find('button.ok').attr("disabled", true);
                 this.modal.on('ok', function(e) {
@@ -400,13 +400,13 @@ define(['require',
             },
             getContainer: function(value) {
                 var entityLabel = this.capitalize(value.name);
-                return '<div class="row row-margin-bottom ' + value.isOptional + '"><span class="col-md-3">' +
-                    '<label class="' + value.isOptional + '">' + entityLabel + (value.isOptional == true ? '' : ' <span class="requiredInput">*</span>') + '</label>' + '<span class="spanEntityType" title="Data Type : ' + value.typeName + '">' + '(' + Utils.escapeHtml(value.typeName) + ')' + '</span>' + '</span>' +
-                    '<span class="col-md-9 position-relative">' + (this.getElement(value)) +
+                return '<div class="row form-group ' + value.isOptional + '"><span class="col-md-3">' +
+                    '<label><span class="' + (value.isOptional ? 'true' : 'false required') + '">' + entityLabel + '</span><span class="center-block ellipsis text-gray" title="Data Type : ' + value.typeName + '">' + '(' + Utils.escapeHtml(value.typeName) + ')' + '</span></label></span>' +
+                    '<span class="col-md-9">' + (this.getElement(value)) +
                     '</input></span></div>';
             },
             getFieldSet: function(name, alloptional, attributeInput) {
-                return '<fieldset class="scheduler-border' + (alloptional ? " alloptional" : "") + '"><legend class="scheduler-border">' + name + '</legend>' + attributeInput + '</fieldset>';
+                return '<fieldset class="form-group fieldset-child-pd ' + (alloptional ? "alloptional" : "") + '"><legend class="legend-sm">' + name + '</legend>' + attributeInput + '</fieldset>';
             },
             getSelect: function(value, entityValue) {
                 if (value.typeName === "boolean") {

dashboardv2/public/js/views/schema/SchemaLayoutView.js

@@ -68,14 +68,6 @@ define(['require',
                         });
                     }
                 };
-                events["click " + this.ui.showMoreLess] = function(e) {
-                    this.$('.popover.popoverTag').hide();
-                    $(e.currentTarget).parent().find("div.popover").show();
-                    var positionContent = $(e.currentTarget).position();
-                    positionContent.top = positionContent.top + 26;
-                    positionContent.left = positionContent.left - 41;
-                    $(e.currentTarget).parent().find("div.popover").css(positionContent);
-                };
                 events["click " + this.ui.showMoreLessTerm] = function(e) {
                     $(e.currentTarget).find('i').toggleClass('fa fa-angle-right fa fa-angle-up');
                     $(e.currentTarget).parents('.searchTerm').find('div.termTableBreadcrumb>div.showHideDiv').toggleClass('hide');
@@ -173,15 +165,6 @@ define(['require',
                         that.deleteObj.push(obj);
                     }
                 });
-                $('body').click(function(e) {
-                    var iconEvnt = e.target.nodeName;
-                    if (that.$('.popoverContainer').length) {
-                        if ($(e.target).hasClass('tagDetailPopover') || iconEvnt == "I") {
-                            return;
-                        }
-                        that.$('.popover.popoverTag').hide();
-                    }
-                });
                 if (this.schemaCollection.length === 0 && this.deleteObj.length) {
                     this.ui.checkDeletedEntity.find("input").prop('checked', true);
                     this.schemaCollection.fullCollection.reset(this.deleteObj, { silent: true });
@@ -210,6 +193,16 @@ define(['require',
                     that.$('.multiSelectTerm').hide();
                     that.$('.multiSelectTag').hide();
                     that.renderBreadcrumb();
+                    Utils.generatePopover({
+                        el: that.$('[data-id="showMoreLess"]'),
+                        container: that.$el,
+                        contentClass: 'popover-tag',
+                        popoverOptions: {
+                            content: function() {
+                                return $(this).find('.popup-tag').children().clone();
+                            }
+                        }
+                    });
                 });
             },
             renderBreadcrumb: function() {

dashboardv2/public/js/views/search/SearchLayoutView.js

@@ -87,13 +87,18 @@ define(['require',
                 this.query = {
                     dsl: {
                         query: null,
-                        type: null
+                        type: null,
+                        pageOffset: null,
+                        pageLimit: null
                     },
                     basic: {
                         query: null,
                         type: null,
                         tag: null,
-                        attributes: null
+                        attributes: null,
+                        pageOffset: null,
+                        pageLimit: null,
+                        includeDE: null
                     }
                 };
                 if (!this.value) {
@@ -182,6 +187,8 @@ define(['require',
                                 var temp = {};
                                 temp[key] = value;
                                 _.extend(this.value, temp);
+                                // on change of type/tag change the offset.
+                                this.query[this.type].pageOffset = 0;
                             } else {
                                 // Initial loading handle.
                                 var filterObj = this.searchTableFilters[filterType];
@@ -230,12 +237,17 @@ define(['require',
                 _.extend(this.query[this.type],
                     (this.type == "dsl" ? {
                         query: null,
-                        type: null
+                        type: null,
+                        pageOffset: null,
+                        pageLimit: null
                     } : {
                         query: null,
                         type: null,
                         tag: null,
-                        attributes: null
+                        attributes: null,
+                        pageOffset: null,
+                        pageLimit: null,
+                        includeDE: null
                     }), param);
             },
             fetchCollection: function(value) {
@@ -384,7 +396,6 @@ define(['require',
                 this.triggerSearch(this.ui.searchInput.val());
             },
             triggerSearch: function(value) {
-                this.query[this.type].query = value || null;
                 var params = {
                     searchType: this.type,
                     dslChecked: this.ui.searchType.is(':checked'),
@@ -409,22 +420,34 @@ define(['require',
                         params['attributes'] = columnList.join(',');
                     }
                     if (this.value.includeDE) {
-                        params['includeDE'] = this.value.includeDE
+                        params['includeDE'] = this.value.includeDE;
+                    }
+                }
+                if (this.value.pageLimit) {
+                    this.query[this.type].pageLimit = this.value.pageLimit;
+                }
+                if (this.value.pageOffset) {
+                    if (this.query[this.type].query != value) {
+                        this.query[this.type].pageOffset = 0;
+                    } else {
+                        this.query[this.type].pageOffset = this.value.pageOffset;
                     }
                 }
+                this.query[this.type].query = value || null;
 
                 Utils.setUrl({
                     url: '#!/search/searchResult',
-                    urlParams: _.extend(this.query[this.type], params),
-                    updateTabState: function() {
-                        return { searchUrl: this.url, stateChanged: true };
-                    },
+                    urlParams: _.extend({}, this.query[this.type], params),
                     mergeBrowserUrl: false,
-                    trigger: true
+                    trigger: true,
+                    updateTabState: true
                 });
             },
             dslFulltextToggle: function(e) {
                 var paramObj = Utils.getUrlState.getQueryParams();
+                if (paramObj && this.type == paramObj.searchType) {
+                    this.updateQueryObject(paramObj);
+                }
                 if (e.currentTarget.checked) {
                     this.type = "dsl";
                     this.dsl = true;
@@ -440,25 +463,20 @@ define(['require',
                     this.dsl = false;
                     this.type = "basic";
                 }
-                if (paramObj && this.type == paramObj.searchType) {
-                    this.updateQueryObject(paramObj);
-                }
                 if (paramObj && this.type == "basic") {
                     this.query[this.type].attributes = paramObj.attributes ? paramObj.attributes : null;
+                    this.query[this.type].includeDE = this.value.includeDE;
                 }
                 if (Utils.getUrlState.isSearchTab()) {
                     Utils.setUrl({
                         url: '#!/search/searchResult',
                         urlParams: _.extend(this.query[this.type], {
                             searchType: this.type,
-                            dslChecked: this.ui.searchType.is(':checked'),
-                            includeDE: this.value.includeDE
+                            dslChecked: this.ui.searchType.is(':checked')
                         }),
-                        updateTabState: function() {
-                            return { searchUrl: this.url, stateChanged: true };
-                        },
                         mergeBrowserUrl: false,
-                        trigger: true
+                        trigger: true,
+                        updateTabState: true
                     });
                 }
             },

dashboardv2/public/js/views/search/SearchQueryView.js

@@ -60,15 +60,18 @@ define(['require',
                     okCloses: false,
                     width: '50%',
                     buttons: [{
+                            text: 'Cancel',
+                            btnClass: "cancel btn-action",
+                            title: 'Cancel'
+                        }, {
                             text: 'Apply',
-                            btnClass: "ok"
+                            btnClass: "ok btn-atlas",
+                            title: "Apply the filters and close popup (won't perform search)"
                         },
                         {
-                            text: 'Apply & Search',
-                            btnClass: "ok search"
-                        }, {
-                            text: 'Cancel',
-                            btnClass: "cancel"
+                            text: 'Search',
+                            btnClass: "ok search btn-atlas",
+                            title: 'Apply the filters and do search'
                         }
                     ]
                 }).open();

dashboardv2/public/js/views/search/SearchResultLayoutView.js

@@ -59,21 +59,27 @@ define(['require',
                 nextData: "[data-id='nextData']",
                 pageRecordText: "[data-id='pageRecordText']",
                 addAssignTag: "[data-id='addAssignTag']",
-                editEntityButton: "[data-id='editEntityButton']",
                 createEntity: "[data-id='createEntity']",
                 checkDeletedEntity: "[data-id='checkDeletedEntity']",
+                colManager: "[data-id='colManager']",
                 containerCheckBox: "[data-id='containerCheckBox']",
-                columnEmptyInfo: "[data-id='columnEmptyInfo']"
+                columnEmptyInfo: "[data-id='columnEmptyInfo']",
+                showPage: "[data-id='showPage']",
+                gotoPage: "[data-id='gotoPage']",
+                gotoPagebtn: "[data-id='gotoPagebtn']",
+                activePage: "[data-id='activePage']",
             },
             templateHelpers: function() {
                 return {
                     entityCreate: Globals.entityCreate,
-                    searchType: this.searchType
+                    searchType: this.searchType,
+                    taxonomy: Globals.taxonomy
                 };
             },
             /** ui events hash */
             events: function() {
-                var events = {};
+                var events = {},
+                    that = this;
                 events["click " + this.ui.tagClick] = function(e) {
                     var scope = $(e.currentTarget);
                     if (e.target.nodeName.toLocaleLowerCase() == "i") {
@@ -81,33 +87,45 @@ define(['require',
                     } else {
                         if (scope.hasClass('term')) {
                             var url = scope.data('href').split(".").join("/terms/");
-                            Globals.saveApplicationState.tabState.stateChanged = false;
-                            Utils.setUrl({
+                            this.triggerUrl({
                                 url: '#!/taxonomy/detailCatalog' + UrlLinks.taxonomiesApiUrl() + '/' + url,
+                                urlParams: null,
                                 mergeBrowserUrl: false,
-                                trigger: true
+                                trigger: true,
+                                updateTabState: null
                             });
                         } else {
-                            Utils.setUrl({
+                            this.triggerUrl({
                                 url: '#!/tag/tagAttribute/' + scope.text(),
+                                urlParams: null,
                                 mergeBrowserUrl: false,
-                                trigger: true
+                                trigger: true,
+                                updateTabState: null
                             });
                         }
                     }
                 };
+                events["keyup " + this.ui.gotoPage] = function(e) {
+                    var code = e.which,
+                        goToPage = parseInt(e.currentTarget.value);
+                    if (e.currentTarget.value) {
+                        that.ui.gotoPagebtn.attr('disabled', false);
+                    } else {
+                        that.ui.gotoPagebtn.attr('disabled', true);
+                    }
+                    if (code == 13) {
+                        if (e.currentTarget.value) {
+                            that.gotoPagebtn();
+                        }
+                    }
+                };
+                events["change " + this.ui.showPage] = 'changePageLimit';
+                events["click " + this.ui.gotoPagebtn] = 'gotoPagebtn';
                 events["click " + this.ui.addTag] = 'checkedValue';
                 events["click " + this.ui.addTerm] = 'checkedValue';
                 events["click " + this.ui.addAssignTag] = 'checkedValue';
-                events["click " + this.ui.showMoreLess] = function(e) {
-                    $(e.currentTarget).parents('tr').siblings().find("div.popover.popoverTag").hide();
-                    $(e.currentTarget).parent().find("div.popover").toggle();
-                    var positionContent = $(e.currentTarget).position();
-                    positionContent.top = positionContent.top + 26;
-                    positionContent.left = positionContent.left - 67;
-                    $(e.currentTarget).parent().find("div.popover").css(positionContent);
-                };
                 events["click " + this.ui.showMoreLessTerm] = function(e) {
+                    e.stopPropagation();
                     $(e.currentTarget).find('i').toggleClass('fa fa-angle-right fa fa-angle-up');
                     $(e.currentTarget).parents('.searchTerm').find('div.termTableBreadcrumb>div.showHideDiv').toggleClass('hide');
                     if ($(e.currentTarget).find('i').hasClass('fa-angle-right')) {
@@ -118,7 +136,6 @@ define(['require',
                 };
                 events["click " + this.ui.nextData] = "onClicknextData";
                 events["click " + this.ui.previousData] = "onClickpreviousData";
-                events["click " + this.ui.editEntityButton] = "onClickEditEntity";
                 events["click " + this.ui.createEntity] = 'onClickCreateEntity';
                 events["click " + this.ui.checkDeletedEntity] = 'onCheckDeletedEntity';
                 return events;
@@ -134,37 +151,33 @@ define(['require',
                 this.limit = 25;
                 this.asyncFetchCounter = 0;
                 this.offset = 0;
-                this.commonTableOptions = {
-                    collection: this.searchCollection,
-                    includePagination: false,
-                    includeFooterRecords: false,
-                    includeColumnManager: (Utils.getUrlState.isSearchTab() && this.value && this.value.searchType === "basic" && !this.value.profileDBView ? true : false),
-                    includeOrderAbleColumns: false,
-                    includeSizeAbleColumns: false,
-                    includeTableLoader: false,
-                    columnOpts: {
-                        opts: {
-                            initialColumnsVisible: null,
-                            saveState: false
-                        },
-                        visibilityControlOpts: {
-                            buttonTemplate: _.template("<button class='btn btn-atlasAction btn-atlas'>Columns&nbsp<i class='fa fa-caret-down'></i></button>")
-                        }
-                    },
-                    gridOpts: {
-                        emptyText: 'No Record found!',
-                        className: 'table table-hover backgrid table-quickMenu'
-                    },
-                    filterOpts: {},
-                    paginatorOpts: {}
-                };
                 this.bindEvents();
                 this.bradCrumbList = [];
                 this.arr = [];
                 this.searchType = 'Basic Search';
-                if (this.value && this.value.searchType && this.value.searchType == 'dsl') {
+                if (this.value) {
+                    if (this.value.searchType && this.value.searchType == 'dsl') {
                         this.searchType = 'Advanced Search';
                     }
+                    if (this.value.pageLimit) {
+                        var pageLimit = parseInt(this.value.pageLimit, 10);
+                        if (_.isNaN(pageLimit) || pageLimit == 0 || pageLimit <= -1) {
+                            this.value.pageLimit = this.limit;
+                            this.triggerUrl();
+                        } else {
+                            this.limit = pageLimit;
+                        }
+                    }
+                    if (this.value.pageOffset) {
+                        var pageOffset = parseInt(this.value.pageOffset, 10);
+                        if (_.isNaN(pageOffset) || pageLimit <= -1) {
+                            this.value.pageOffset = this.offset;
+                            this.triggerUrl();
+                        } else {
+                            this.offset = pageOffset;
+                        }
+                    }
+                }
             },
             bindEvents: function() {
                 var that = this;
@@ -226,16 +239,7 @@ define(['require',
                                 this.ui.columnEmptyInfo.hide();
                             }
                         }
-
-                        Utils.setUrl({
-                            url: '#!/search/searchResult',
-                            urlParams: this.value,
-                            mergeBrowserUrl: false,
-                            trigger: false,
-                            updateTabState: function() {
-                                return { searchUrl: this.url, stateChanged: true };
-                            }
-                        });
+                        this.triggerUrl();
                         if (excludeDefaultColumn.length > this.searchCollection.filterObj.attributes.length) {
                             this.fetchCollection(this.value);
                         }
@@ -247,6 +251,32 @@ define(['require',
                 }, this);
             },
             onRender: function() {
+                var that = this;
+                this.commonTableOptions = {
+                    collection: this.searchCollection,
+                    includePagination: false,
+                    includeFooterRecords: false,
+                    includeColumnManager: (Utils.getUrlState.isSearchTab() && this.value && this.value.searchType === "basic" && !this.value.profileDBView ? true : false),
+                    includeOrderAbleColumns: false,
+                    includeSizeAbleColumns: false,
+                    includeTableLoader: false,
+                    columnOpts: {
+                        opts: {
+                            initialColumnsVisible: null,
+                            saveState: false
+                        },
+                        visibilityControlOpts: {
+                            buttonTemplate: _.template("<button class='btn btn-action btn-md pull-right'>Columns&nbsp<i class='fa fa-caret-down'></i></button>")
+                        },
+                        el: this.ui.colManager
+                    },
+                    gridOpts: {
+                        emptyText: 'No Record found!',
+                        className: 'table table-hover backgrid table-quickMenu'
+                    },
+                    filterOpts: {},
+                    paginatorOpts: {}
+                };
                 if (!this.initialView) {
                     var value = {},
                         that = this;
@@ -267,21 +297,30 @@ define(['require',
                     } else {
                         this.ui.columnEmptyInfo.hide();
                     }
-                    this.fetchCollection(value);
-                    $('body').click(function(e) {
-                        var iconEvnt = e.target.nodeName;
-                        if (that.$('.popoverContainer').length) {
-                            if ($(e.target).hasClass('tagDetailPopover') || iconEvnt == "I") {
-                                return;
-                            }
-                            that.$('.popover.popoverTag').hide();
-                        }
-                    });
+                    this.fetchCollection(value, _.extend({ 'fromUrl': true }, (this.value && this.value.pageOffset ? { 'next': true } : null)));
                 } else {
                     if (Globals.entityTypeConfList) {
                         this.$(".entityLink").show();
                     }
                 }
+                this.ui.showPage.select2({
+                    data: _.sortBy(_.union([25, 50, 100, 150, 200, 250, 300, 350, 400, 450, 500], [this.limit])),
+                    tags: true,
+                    dropdownCssClass: "number-input",
+                    multiple: false
+                });
+                if (this.value && this.value.pageLimit) {
+                    this.ui.showPage.val(this.limit).trigger('change', { "skipViewChange": true });
+                }
+            },
+            triggerUrl: function(options) {
+                Utils.setUrl(_.extend({
+                    url: Utils.getUrlState.getQueryUrl().queyParams[0],
+                    urlParams: this.value,
+                    mergeBrowserUrl: false,
+                    trigger: false,
+                    updateTabState: true
+                }, options));
             },
             updateColumnList: function(updatedList) {
                 if (updatedList) {
@@ -301,48 +340,18 @@ define(['require',
                     this.searchTableColumns[this.value.type] = this.value.attributes.split(",");
                 }
             },
-            generateQueryOfFilter: function() {
-                var value = this.value,
-                    entityFilters = CommonViewFunction.attributeFilter.extractUrl(value.entityFilters),
-                    tagFilters = CommonViewFunction.attributeFilter.extractUrl(value.tagFilters),
-                    queryArray = [],
-                    objToString = function(filterObj) {
-                        var tempObj = [];
-                        _.each(filterObj, function(obj) {
-                            tempObj.push('<span class="key">' + _.escape(obj.id) + '</span>&nbsp<span class="operator">' + _.escape(obj.operator) + '</span>&nbsp<span class="value">' + _.escape(obj.value) + "</span>")
-                        });
-                        return tempObj.join('&nbsp<span class="operator">AND</span>&nbsp');
-                    }
-                if (value.type) {
-                    var typeKeyValue = '<span class="key">Type:</span>&nbsp<span class="value">' + _.escape(value.type) + '</span>';
-                    if (entityFilters) {
-                        typeKeyValue += '&nbsp<span class="operator">AND</span>&nbsp' + objToString(entityFilters);
-                    }
-                    queryArray.push(typeKeyValue)
-                }
-                if (value.tag) {
-                    var tagKeyValue = '<span class="key">Tag:</span>&nbsp<span class="value">' + _.escape(value.tag) + '</span>';
-                    if (tagFilters) {
-                        tagKeyValue += '&nbsp<span class="operator">AND</span>&nbsp' + objToString(tagFilters);
-                    }
-                    queryArray.push(tagKeyValue);
-                }
-                if (value.query) {
-                    queryArray.push('<span class="key">Query:</span>&nbsp<span class="value">' + _.escape(value.query) + '</span>&nbsp');
-                }
-                if (queryArray.length == 1) {
-                    return queryArray.join();
-                } else {
-                    return "<span>(</span>&nbsp" + queryArray.join('<span>&nbsp)</span>&nbsp<span>AND</span>&nbsp<span>(</span>&nbsp') + "&nbsp<span>)</span>";
-
-                }
-            },
-            fetchCollection: function(value, clickObj) {
+            fetchCollection: function(value, options) {
                 var that = this,
-                    isPostMethod = this.value.searchType === "basic" && Utils.getUrlState.isSearchTab(),
-                    tagFilters = CommonViewFunction.attributeFilter.generateAPIObj(this.value.tagFilters),
+                    isPostMethod = (this.value && this.value.searchType === "basic"),
+                    isSearchTab = Utils.getUrlState.isSearchTab(),
+                    tagFilters = null,
+                    entityFilters = null;
+                if (isSearchTab) {
+                    tagFilters = CommonViewFunction.attributeFilter.generateAPIObj(this.value.tagFilters);
                     entityFilters = CommonViewFunction.attributeFilter.generateAPIObj(this.value.entityFilters);
-                if (isPostMethod) {
+                }
+
+                if (isPostMethod && isSearchTab) {
                     var excludeDefaultColumn = this.value.type && this.searchTableColumns ? _.without(this.searchTableColumns[this.value.type], "selected", "name", "description", "typeName", "owner", "tag", "terms") : null,
                         filterObj = {
                             'entityFilters': entityFilters,
@@ -360,43 +369,86 @@ define(['require',
                     sort: false,
                     success: function(dataOrCollection, response) {
                         Globals.searchApiCallRef = undefined;
+                        var isFirstPage = that.offset === 0,
+                            dataLength = 0,
+                            goToPage = that.ui.gotoPage.val();
                         if (!(that.ui.pageRecordText instanceof jQuery)) {
                             return;
                         }
-                        if ((isPostMethod ? !dataOrCollection.entities : !dataOrCollection.length) && that.offset >= that.limit) {
+                        if (isPostMethod && dataOrCollection && dataOrCollection.entities) {
+                            dataLength = dataOrCollection.entities.length;
+                        } else {
+                            dataLength = dataOrCollection.length;
+                        }
+
+                        if (!dataLength && that.offset >= that.limit && ((options && options.next) || goToPage) && (options && !options.fromUrl)) {
+                            /* User clicks on next button and server returns 
+                            empty response then disabled the next button without rendering table*/
+
+                            that.hideLoader();
+                            var pageNumber = that.activePage + 1;
+                            if (goToPage) {
+                                pageNumber = goToPage;
+                                that.offset = that.offset - ((parseInt(pageNumber, 10) - 1) * that.limit);
+                            } else {
                                 that.ui.nextData.attr('disabled', true);
                                 that.offset = that.offset - that.limit;
-                            that.hideLoader();
+                            }
+                            if (that.value) {
+                                that.value.pageOffset = that.offset;
+                                that.triggerUrl();
+                            }
+                            Utils.notifyInfo({
+                                html: true,
+                                content: Messages.search.noRecordForPage + '<b>' + Utils.getNumberSuffix({ number: pageNumber, sup: true }) + '</b> page'
+                            });
                             return;
                         }
                         if (isPostMethod) {
-                            that.searchCollection.referredEntities = dataOrCollection.referredEntities;
+                            that.searchCollection.referredEntities = dataOrCollection.rnoRecordFoeferredEntities;
                             that.searchCollection.reset(dataOrCollection.entities);
                         }
-                        if (that.searchCollection.models.length < that.limit) {
+
+                        /*Next button check.
+                        It's outside of Previous button else condition 
+                        because when user comes from 2 page to 1 page than we need to check next button.*/
+                        if (dataLength < that.limit) {
                             that.ui.nextData.attr('disabled', true);
                         } else {
                             that.ui.nextData.attr('disabled', false);
                         }
-                        if (that.offset === 0) {
+
+                        if (isFirstPage && (!dataLength || dataLength < that.limit)) {
+                            that.ui.paginationDiv.hide();
+                        } else {
+                            that.ui.paginationDiv.show();
+                        }
+
+                        // Previous button check.
+                        if (isFirstPage) {
+                            that.ui.previousData.attr('disabled', true);
                             that.pageFrom = 1;
                             that.pageTo = that.limit;
-                        } else if (clickObj && clickObj.next) {
+                        } else {
+                            that.ui.previousData.attr('disabled', false);
+                        }
+
+                        if (options && options.next) {
                             //on next click, adding "1" for showing the another records.
                             that.pageTo = that.offset + that.limit;
                             that.pageFrom = that.offset + 1;
-                        } else if (clickObj && clickObj.previous) {
+                        } else if (!isFirstPage && options && options.previous) {
                             that.pageTo = that.pageTo - that.limit;
                             that.pageFrom = (that.pageTo - that.limit) + 1;
                         }
                         that.ui.pageRecordText.html("Showing  <u>" + that.searchCollection.models.length + " records</u> From " + that.pageFrom + " - " + that.pageTo);
-                        if (that.offset < that.limit && that.pageFrom < 26) {
-                            that.ui.previousData.attr('disabled', true);
-                        }
+                        that.activePage = Math.round(that.pageTo / that.limit);
+                        that.ui.activePage.attr('title', "Page " + that.activePage);
+                        that.ui.activePage.text(that.activePage);
                         that.renderTableLayoutView();
 
                         if (value && !value.profileDBView) {
-                            var searchString = 'Results for: <span class="filterQuery">' + that.generateQueryOfFilter() + "</span>";
+                            var searchString = 'Results for: <span class="filterQuery">' + CommonViewFunction.generateQueryOfFilter(that.value) + "</span>";
                             if (Globals.entityCreate && Globals.entityTypeConfList && Utils.getUrlState.isSearchTab()) {
                                 searchString += "<p>If you do not find the entity in search result below then you can" + '<a href="javascript:void(0)" data-id="createEntity"> create new entity</a></p>';
                             }
@@ -410,20 +462,20 @@ define(['require',
                     if (value.searchType) {
                         this.searchCollection.url = UrlLinks.searchApiUrl(value.searchType);
                     }
-                    _.extend(this.searchCollection.queryParams, { 'limit': this.limit, 'query': (value.query ? value.query.trim() : null), 'typeName': value.type || null, 'classification': value.tag || null });
+                    _.extend(this.searchCollection.queryParams, { 'limit': this.limit, 'offset': this.offset, 'query': (value.query ? value.query.trim() : null), 'typeName': value.type || null, 'classification': value.tag || null });
                     if (value.profileDBView && value.guid) {
                         var profileParam = {};
                         profileParam['guid'] = value.guid;
                         profileParam['relation'] = '__hive_table.db';
                         profileParam['sortBy'] = 'name';
                         profileParam['sortOrder'] = 'ASCENDING';
-                        $.extend(this.searchCollection.queryParams, profileParam);
+                        _.extend(this.searchCollection.queryParams, profileParam);
                     }
                     if (isPostMethod) {
                         this.searchCollection.filterObj = _.extend({}, filterObj);
                         apiObj['data'] = _.extend({
                             'excludeDeletedEntities': (this.value && this.value.includeDE ? false : true)
-                        }, filterObj, _.pick(this.searchCollection.queryParams, 'query', 'limit', 'offset', 'typeName', 'classification'))
+                        }, filterObj, _.pick(this.searchCollection.queryParams, 'query', 'excludeDeletedEntities', 'limit', 'offset', 'typeName', 'classification'))
                         Globals.searchApiCallRef = this.searchCollection.getBasicRearchResult(apiObj);
                     } else {
                         apiObj.data = null;
@@ -434,7 +486,7 @@ define(['require',
                     if (isPostMethod) {
                         apiObj['data'] = _.extend({
                             'excludeDeletedEntities': (this.value && this.value.includeDE ? false : true)
-                        }, filterObj, _.pick(this.searchCollection.queryParams, 'query', 'limit', 'offset', 'typeName', 'classification'));
+                        }, filterObj, _.pick(this.searchCollection.queryParams, 'query', 'excludeDeletedEntities', 'limit', 'offset', 'typeName', 'classification'));
                         Globals.searchApiCallRef = this.searchCollection.getBasicRearchResult(apiObj);
                     } else {
                         apiObj.data = null;
@@ -477,7 +529,6 @@ define(['require',
                     } else {
                         that.ui.containerCheckBox.hide();
                     }
-                    that.ui.paginationDiv.show();
                     that.$(".ellipsis .inputAssignTag").hide();
                     that.renderBreadcrumb();
                     that.checkTableFetch();
@@ -495,6 +546,16 @@ define(['require',
             checkTableFetch: function() {
                 if (this.asyncFetchCounter <= 0) {
                     this.hideLoader();
+                    Utils.generatePopover({
+                        el: this.$('[data-id="showMoreLess"]'),
+                        container: this.$el,
+                        contentClass: 'popover-tag',
+                        popoverOptions: {
+                            content: function() {
+                                return $(this).find('.popup-tag').children().clone();
+                            }
+                        }
+                    });
                 }
             },
             getFixedDslColumn: function() {
@@ -535,21 +596,11 @@ define(['require',
                                 nameHtml = '<span title="' + name + '">' + name + '</span>';
                             }
                             if (obj.status && Enums.entityStateReadOnly[obj.status]) {
-                                nameHtml += '<button type="button" title="Deleted" class="btn btn-atlasAction btn-atlas deleteBtn"><i class="fa fa-trash"></i></button>';
+                                nameHtml += '<button type="button" title="Deleted" class="btn btn-action btn-md deleteBtn"><i class="fa fa-trash"></i></button>';
                                 return '<div class="readOnly readOnlyLink">' + nameHtml + '</div>';
-                            } else {
-                                if (Globals.entityUpdate) {
-                                    if (Globals.entityTypeConfList && _.isEmptyArray(Globals.entityTypeConfList)) {
-                                        nameHtml += '<button title="Edit" data-id="editEntityButton"  data-giud= "' + obj.guid + '" class="btn btn-atlasAction btn-atlas editBtn"><i class="fa fa-pencil"></i></button>'
-                                    } else {
-                                        if (_.contains(Globals.entityTypeConfList, obj.typeName)) {
-                                            nameHtml += '<button title="Edit" data-id="editEntityButton"  data-giud= "' + obj.guid + '" class="btn btn-atlasAction btn-atlas editBtn"><i class="fa fa-pencil"></i></button>'
-                                        }
-                                    }
                             }
                             return nameHtml;
                         }
-                        }
                     })
                 };
                 col['owner'] = {
@@ -751,7 +802,6 @@ define(['require',
                 } else {
                     return [];
                 }
-
             },
             showLoader: function() {
                 this.$('.fontLoader:not(.for-ignore)').show();
@@ -759,7 +809,7 @@ define(['require',
             },
             hideLoader: function() {
                 this.$('.fontLoader:not(.for-ignore)').hide();
-                this.$('.ellipsis,.labelShowRecord').show(); // only for first time
+                this.$('.ellipsis,.pagination-box').show(); // only for first time
                 this.$('.tableOverlay').hide();
             },
             checkedValue: function(e) {
@@ -845,45 +895,38 @@ define(['require',
                 });
             },
             onClicknextData: function() {
-                var that = this;
-                this.ui.previousData.removeAttr("disabled");
-                that.offset = that.offset + that.limit;
-                $.extend(this.searchCollection.queryParams, {
-                    offset: that.offset
+                this.offset = this.offset + this.limit;
+                _.extend(this.searchCollection.queryParams, {
+                    offset: this.offset
                 });
+                if (this.value) {
+                    this.value.pageOffset = this.offset;
+                    this.triggerUrl();
+                }
+                this.ui.gotoPage.val('');
+                this.ui.gotoPage.parent().removeClass('has-error');
                 this.fetchCollection(null, {
                     next: true
                 });
             },
             onClickpreviousData: function() {
-                var that = this;
-                this.ui.nextData.removeAttr("disabled");
-                that.offset = that.offset - that.limit;
-                $.extend(this.searchCollection.queryParams, {
-                    offset: that.offset
+                this.offset = this.offset - this.limit;
+                if (this.offset <= -1) {
+                    this.offset = 0;
+                }
+                _.extend(this.searchCollection.queryParams, {
+                    offset: this.offset
                 });
+                if (this.value) {
+                    this.value.pageOffset = this.offset;
+                    this.triggerUrl();
+                }
+                this.ui.gotoPage.val('');
+                this.ui.gotoPage.parent().removeClass('has-error');
                 this.fetchCollection(null, {
                     previous: true
                 });
             },
-
-            onClickEditEntity: function(e) {
-                var that = this;
-                $(e.currentTarget).blur();
-                var guid = $(e.currentTarget).data('giud');
-                require([
-                    'views/entity/CreateEntityLayoutView'
-                ], function(CreateEntityLayoutView) {
-                    var view = new CreateEntityLayoutView({
-                        guid: guid,
-                        entityDefCollection: that.entityDefCollection,
-                        typeHeaders: that.typeHeaders,
-                        callback: function() {
-                            that.fetchCollection();
-                        }
-                    });
-                });
-            },
             onClickCreateEntity: function(e) {
                 var that = this;
                 $(e.currentTarget).blur();
@@ -906,18 +949,56 @@ define(['require',
                 }
                 if (this.value) {
                     this.value.includeDE = includeDE;
-                    Utils.setUrl({
-                        url: '#!/search/searchResult',
-                        urlParams: this.value,
-                        mergeBrowserUrl: false,
-                        trigger: false,
-                        updateTabState: function() {
-                            return { searchUrl: this.url, stateChanged: true };
+                    this.triggerUrl();
                 }
-                    });
+                _.extend(this.searchCollection.queryParams, { limit: this.limit, offset: this.offset });
+                this.fetchCollection();
+            },
+            changePageLimit: function(e, obj) {
+                if (!obj || (obj && !obj.skipViewChange)) {
+                    var limit = parseInt(this.ui.showPage.val());
+                    if (limit == 0) {
+                        this.ui.showPage.data('select2').$container.addClass('has-error');
+                        return;
+                    } else {
+                        this.ui.showPage.data('select2').$container.removeClass('has-error');
                     }
+                    this.limit = limit;
+                    this.offset = 0;
+                    if (this.value) {
+                        this.value.pageLimit = this.limit;
+                        this.value.pageOffset = this.offset;
+                        this.triggerUrl();
+                    }
+                    this.ui.gotoPage.val('');
+                    this.ui.gotoPage.parent().removeClass('has-error');
+                    _.extend(this.searchCollection.queryParams, { limit: this.limit, offset: this.offset });
                     this.fetchCollection();
                 }
+            },
+            gotoPagebtn: function(e) {
+                var that = this;
+                var goToPage = parseInt(this.ui.gotoPage.val());
+                if (!(_.isNaN(goToPage) || goToPage <= -1)) {
+                    this.offset = (goToPage - 1) * this.limit;
+                    if (this.offset <= -1) {
+                        this.offset = 0;
+                    }
+                    _.extend(this.searchCollection.queryParams, { limit: this.limit, offset: this.offset });
+                    if (this.offset == (this.pageFrom - 1)) {
+                        Utils.notifyInfo({
+                            content: Messages.search.onSamePage
+                        });
+                    } else {
+                        if (this.value) {
+                            this.value.pageOffset = this.offset;
+                            this.triggerUrl();
+                        }
+                        // this.offset is updated in gotoPagebtn function so use next button calculation.
+                        this.fetchCollection(null, { 'next': true });
+                    }
+                }
+            }
         });
     return SearchResultLayoutView;
 });
\ No newline at end of file

dashboardv2/public/js/views/tag/TagAttributeDetailLayoutView.js

@@ -41,9 +41,7 @@ define(['require',
                 editBox: '[data-id="editBox"]',
                 saveButton: "[data-id='saveButton']",
                 showAttribute: "[data-id='showAttribute']",
-                addTagListBtn: '[data-id="addTagListBtn"]',
-                addTagPlus: '[data-id="addTagPlus"]',
-                addTagBtn: '[data-id="addTagBtn"]',
+                addAttribute: '[data-id="addAttribute"]',
                 description: '[data-id="description"]',
                 publishButton: '[data-id="publishButton"]',
                 showSuperType: "[data-id='showSuperType']"
@@ -51,7 +49,7 @@ define(['require',
             /** ui events hash */
             events: function() {
                 var events = {};
-                events["click " + this.ui.addTagListBtn] = 'onClickAddTagAttributeBtn';
+                events["click " + this.ui.addAttribute] = 'onClickAddTagAttributeBtn';
                 events["click " + this.ui.editButton] = 'onEditButton';
                 return events;
             },
@@ -113,14 +111,14 @@ define(['require',
                         attributeDefs = [attributeDefs];
                     }
                     _.each(attributeDefs, function(value, key) {
-                        attributeData += '<span class="inputAttribute">' + (Utils.getName(value)) + '</span>';
+                        attributeData += '<button class="btn btn-action btn-disabled btn-sm">' + (Utils.getName(value)) + '</button>';
                     });
                     this.ui.showAttribute.html(attributeData);
                 }
                 if (superTypeArr.length > 0) {
                     this.$(".superType").show();
                     _.each(superTypeArr, function(value, key) {
-                        supertypeData += ' <a class="inputAttribute" href="#!/tag/tagAttribute/' + value + '">' + value + '</a>';
+                        supertypeData += ' <a class="btn btn-action btn-sm" href="#!/tag/tagAttribute/' + value + '">' + value + '</a>';
                     });
                     this.ui.showSuperType.html(supertypeData);
                 }
@@ -221,7 +219,7 @@ define(['require',
                                     confirm: true,
                                     buttons: [{
                                             text: 'Ok',
-                                            addClass: 'btn-primary',
+                                            addClass: 'btn-atlas btn-md',
                                             click: function(notice) {
                                                 notice.remove();
                                             }
@@ -231,7 +229,7 @@ define(['require',
                                 }
                             }
                             if (saveObj && !duplicateAttributeList.length) {
-                                that.onSaveButton(saveObj, Messages.addAttributeSuccessMessage);
+                                that.onSaveButton(saveObj, Messages.tag.addAttributeSuccessMessage);
                             } else {
                                 if (duplicateAttributeList.length < 2) {
                                     var text = "Attribute <b>" + duplicateAttributeList.join(",") + "</b> is duplicate !"
@@ -240,7 +238,7 @@ define(['require',
                                         var text = "Attributes: <b>" + duplicateAttributeList.join(",") + "</b> are duplicate ! Do you want to continue with other attributes ?"
                                         notifyObj = {
                                             ok: function(argument) {
-                                                that.onSaveButton(saveObj, Messages.addAttributeSuccessMessage);
+                                                that.onSaveButton(saveObj, Messages.tag.addAttributeSuccessMessage);
                                             },
                                             cancel: function(argument) {}
                                         }
@@ -266,7 +264,7 @@ define(['require',
             },
             onPublishClick: function(view) {
                 var saveObj = _.extend(this.model.toJSON(), { 'description': view.ui.description.val() });
-                this.onSaveButton(saveObj, Messages.updateTagDescriptionMessage);
+                this.onSaveButton(saveObj, Messages.tag.updateTagDescriptionMessage);
                 this.ui.description.show();
             },
             onEditButton: function(e) {

dashboardv2/public/js/views/tag/TagDetailLayoutView.js

@@ -44,7 +44,7 @@ define(['require',
              * @constructs
              */
             initialize: function(options) {
-                _.extend(this, _.pick(options, 'tag', 'classificationDefCollection', 'entityDefCollection', 'typeHeaders', 'enumDefCollection'));
+                _.extend(this, _.pick(options, 'tag', 'value', 'classificationDefCollection', 'entityDefCollection', 'typeHeaders', 'enumDefCollection'));
                 this.collection = this.classificationDefCollection;
             },
             bindEvents: function() {},
@@ -61,7 +61,7 @@ define(['require',
                     };
                     if (that.RSearchResultLayoutView) {
                         that.RSearchResultLayoutView.show(new SearchResultLayoutView({
-                            value: value,
+                            value: _.extend({}, that.value, value),
                             entityDefCollection: that.entityDefCollection,
                             typeHeaders: that.typeHeaders,
                             tagCollection: that.collection,

dashboardv2/public/js/views/tag/TagDetailTableLayoutView.js

@@ -164,13 +164,15 @@ define(['require',
                             sortable: false,
                             formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
                                 fromRaw: function(rawValue, model) {
-                                    var deleteData = '<button class="btn btn-atlasAction btn-atlas no-margin-bottom typeLOV" data-id="delete" data-name="' + model.get('typeName') + '"><i class="fa fa-trash"></i></button>',
-                                        editData = '<button class="btn btn-atlasAction btn-atlas no-margin-bottom typeLOV" data-id="edit" data-name="' + model.get('typeName') + '"><i class="fa fa-pencil"></i></button>';
+                                    var deleteData = '<button title="Delete" class="btn btn-action btn-sm" data-id="delete" data-name="' + model.get('typeName') + '"><i class="fa fa-trash"></i></button>',
+                                        editData = '<button title="Edit" class="btn btn-action btn-sm" data-id="edit" data-name="' + model.get('typeName') + '"><i class="fa fa-pencil"></i></button>',
+                                        btnObj = null;
                                     if (model.get('attributes') === undefined) {
-                                        return deleteData;
+                                        btnObj = deleteData;
                                     } else {
-                                        return deleteData + editData;
+                                        btnObj = deleteData + editData;
                                     }
+                                    return '<div class="btn-inline">' + btnObj + '</div>'
                                 }
                             })
                         },

dashboardv2/public/js/views/tag/TagLayoutView.js

@@ -74,17 +74,6 @@ define(['require',
                 var that = this;
                 this.bindEvents();
                 this.tagsGenerator();
-                $('body').on("click", '.tagPopoverList li', function(e) {
-                    that[$(this).find("a").data('fn')](e);
-                });
-                $('body').click(function(e) {
-                    if ($('.tagPopoverList').length) {
-                        if ($(e.target).hasClass('tagPopover')) {
-                            return;
-                        }
-                        that.$('.tagPopover').popover('hide');
-                    }
-                });
             },
             fetchCollections: function() {
                 this.collection.fetch({ reset: true });
@@ -107,9 +96,7 @@ define(['require',
                             Utils.setUrl({
                                 url: $firstEl.attr("href"),
                                 mergeBrowserUrl: false,
-                                updateTabState: function() {
-                                    return { tagUrl: this.url, stateChanged: true };
-                                }
+                                updateTabState: true
                             });
                         }
                     } else {
@@ -125,9 +112,7 @@ define(['require',
                         Utils.setUrl({
                             url: url,
                             urlParams: query,
-                            updateTabState: function() {
-                                return { tagUrl: this.url, stateChanged: true };
-                            }
+                            updateTabState: true
                         });
                         if (!presentTag) {
                             return false;
@@ -274,7 +259,7 @@ define(['require',
                             confirm: true,
                             buttons: [{
                                     text: 'Ok',
-                                    addClass: 'btn-primary',
+                                    addClass: 'btn-atlas btn-md',
                                     click: function(notice) {
                                         notice.remove();
                                     }
@@ -330,9 +315,7 @@ define(['require',
                     url: url,
                     mergeBrowserUrl: false,
                     trigger: true,
-                    updateTabState: function() {
-                        return { tagUrl: this.url, stateChanged: true };
-                    }
+                    updateTabState: true
                 });
             },
             onTagList: function(e, toggle) {
@@ -345,45 +328,39 @@ define(['require',
             },
             createTagAction: function() {
                 var that = this;
-                this.$('.tagPopover').popover({
-                    placement: 'bottom',
-                    html: true,
-                    trigger: 'manual',
-                    container: 'body',
+                Utils.generatePopover({
+                    el: this.$('.tagPopover'),
+                    container: this.$el,
+                    popoverOptions: {
                         content: function() {
-                        return "<ul class='tagPopoverList'>" +
+                            return "<ul>" +
                                 "<li class='listTerm' ><i class='fa fa-search'></i> <a href='javascript:void(0)' data-fn='onSearchTag'>Search Tag</a></li>" +
                                 "<li class='listTerm' ><i class='fa fa-trash-o'></i> <a href='javascript:void(0)' data-fn='onDeleteTag'>Delete Tag</a></li>" +
                                 "</ul>";
                         }
-                });
-                this.$('.tagPopover').off('click').on('click', function(e) {
-                    // if any other popovers are visible, hide them
-                    e.preventDefault();
-                    that.$('.tagPopover').not(this).popover('hide');
-                    $(this).popover('toggle');
+                    }
+                }).parent('.tools').on('click', 'li', function(e) {
+                    e.stopPropagation();
+                    that.$('.tagPopover').popover('hide');
+                    that[$(this).find('a').data('fn')](e)
                 });
             },
             onSearchTag: function() {
                 Utils.setUrl({
                     url: '#!/search/searchResult',
                     urlParams: {
-                        tag: this.ui.tagsParent.find('li.active').find("a").data('name'),
+                        tag: this.ui.tagsParent.find('li.active').find('>a[data-name]').data('name'),
                         searchType: "basic",
                         dslChecked: false
                     },
-                    updateTabState: function() {
-                        return { searchUrl: this.url, stateChanged: true };
-                    },
                     mergeBrowserUrl: false,
-                    trigger: true
+                    trigger: true,
+                    updateTabState: true
                 });
             },
             onDeleteTag: function() {
-                var that = this;
-                this.tagName = this.ui.tagsParent.find('li.active').find("a").data('name');
-                this.tagDeleteData = this.ui.tagsParent.find('li.active');
-                var notifyObj = {
+                var that = this,
+                    notifyObj = {
                         modal: true,
                         ok: function(argument) {
                             that.onNotifyOk();
@@ -396,7 +373,7 @@ define(['require',
             },
             onNotifyOk: function(data) {
                 var that = this,
-                    deleteTagData = this.collection.fullCollection.findWhere({ name: this.tagName }),
+                    deleteTagData = this.collection.fullCollection.findWhere({ name: this.tag }),
                     classificationData = deleteTagData.toJSON(),
                     deleteJson = {
                         classificationDefs: [classificationData],
@@ -408,12 +385,12 @@ define(['require',
                     data: JSON.stringify(deleteJson),
                     success: function() {
                         Utils.notifySuccess({
-                            content: "Tag " + that.tagName + Messages.deleteSuccessMessage
+                            content: "Tag " + that.tag + Messages.deleteSuccessMessage
                         });
                         // if deleted tag is prviously searched then remove that tag url from save state of tab.
                         var searchUrl = Globals.saveApplicationState.tabState.searchUrl;
                         var urlObj = Utils.getUrlState.getQueryParams(searchUrl);
-                        if (urlObj && urlObj.tag && urlObj.tag === that.tagName) {
+                        if (urlObj && urlObj.tag && urlObj.tag === that.tag) {
                             Globals.saveApplicationState.tabState.searchUrl = "#!/search";
                         }
                         that.collection.remove(deleteTagData);

dashboardv2/public/js/views/tag/addTagModalView.js

@@ -147,7 +147,7 @@ define(['require',
                                 confirm: true,
                                 buttons: [{
                                         text: 'Ok',
-                                        addClass: 'btn-primary',
+                                        addClass: 'btn-atlas btn-md',
                                         click: function(notice) {
                                             notice.remove();
                                             obj = {