ATLAS-2150: UI to support search-history and favorites

dashboardv2/public/css/scss/loader.scss

@@ -63,6 +63,13 @@
     display: none;
 }
 
+.fontLoader-relative {
+    @extend .fontLoader;
+    position: relative;
+    left: 0%;
+    text-align: center;
+}
+
 .initialLoading {
     display: block;
     position: absolute;

dashboardv2/public/css/scss/tag.scss

@@ -19,6 +19,10 @@
 //tag.scss
 .tag-tree {
     padding: 0; // overflow: auto;
+    &.saveSearchList {
+        height: 150px;
+        overflow-y: auto;
+    }
     >li {
         list-style: none;
         cursor: pointer;
@@ -52,6 +56,7 @@
                 display: none;
                 position: absolute;
                 right: 0;
+                color: $white;
                 padding: 5px 10px;
             }
         }

dashboardv2/public/css/scss/theme.scss

@@ -84,6 +84,10 @@ header {
 #sideNav-wrapper {
     color: $white;
     font-size: 16px !important;
+    .well {
+        background-color: $color_tuna_approx;
+        border: 1px solid #666363;
+    }
 }
 
 .page-title {
@@ -272,17 +276,6 @@ hr[size="10"] {
     margin-right: 0px !important;
 }
 
-.backButton {
-    display: block;
-    margin: 0px 13px;
-    &:hover {
-        color: $color_jungle_green_approx;
-    }
-    &:active {
-        color: $color_jungle_green_approx;
-    }
-}
-
 .position-relative {
     position: relative;
 }
@@ -308,7 +301,8 @@ hr[size="10"] {
 
 .add-seperator {
     margin-bottom: 10px;
-    border-bottom: 1px solid $color_mirage_approx
+    border-bottom: 1px solid $color_mirage_approx;
+    padding-bottom: 10px;
 }
 
 .legend-sm {

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

@@ -20,7 +20,7 @@
     </div>
     <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>
+            <a href="javascript:void(0);" data-id="backButton"><i class="fa fa-chevron-left"></i>  Back To Results</a>
         </div>
         <h1 class="form-group"><span  data-id="title"></span></h1> {{#if entityUpdate}}
         <div data-id="editButtonContainer" class="pull-right"></div>
@@ -95,43 +95,43 @@
                     </div>
                     <div class="tab-content">
                         <div id="tab-details" role="properties" class="tab-pane active">
-                            <div id="r_entityDetailTableLayoutView" style="position: relative;">
-                                <div class="fontLoader">
+                            <div id="r_entityDetailTableLayoutView">
+                                <div class="fontLoader-relative">
                                     <i class="fa fa-refresh fa-spin-custom"></i>
                                 </div>
                             </div>
                         </div>
                         <div id="tab-tagTable" role="tags" class="tab-pane fade">
-                            <div id="r_tagTableLayoutView" style="position: relative;">
-                                <div class="fontLoader">
+                            <div id="r_tagTableLayoutView">
+                                <div class="fontLoader-relative">
                                     <i class="fa fa-refresh fa-spin-custom"></i>
                                 </div>
                             </div>
                         </div>
                         <div id="tab-termTable" role="terms" class="tab-pane">
-                            <div id="r_termTableLayoutView" style="position: relative;">
-                                <div class="fontLoader">
+                            <div id="r_termTableLayoutView">
+                                <div class="fontLoader-relative">
                                     <i class="fa fa-refresh fa-spin-custom"></i>
                                 </div>
                             </div>
                         </div>
                         <div id="tab-audit" role="audits" class="tab-pane">
-                            <div id="r_auditTableLayoutView" style="position: relative;">
-                                <div class="fontLoader">
+                            <div id="r_auditTableLayoutView">
+                                <div class="fontLoader-relative">
                                     <i class="fa fa-refresh fa-spin-custom"></i>
                                 </div>
                             </div>
                         </div>
                         <div id="tab-schema" role="schema" class="tab-pane">
-                            <div id="r_schemaTableLayoutView" style="position: relative;">
-                                <div class="fontLoader">
+                            <div id="r_schemaTableLayoutView">
+                                <div class="fontLoader-relative">
                                     <i class="fa fa-refresh fa-spin-custom"></i>
                                 </div>
                             </div>
                         </div>
                         <div id="tab-profile" role="profile" class="tab-pane">
-                            <div id="r_profileLayoutView" style="position: relative;">
-                                <div class="fontLoader">
+                            <div id="r_profileLayoutView">
+                                <div class="fontLoader-relative">
                                     <i class="fa fa-refresh fa-spin-custom"></i>
                                 </div>
                             </div>

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

@@ -40,8 +40,6 @@
         <div class="col-md-12 entityInputData" data-id="entityInputData"></div>
     </div>
 </form>
-<div class="" style="position: relative;height: 8px;">
-    <div class="fontLoader entityLoader" style="display:none">
+<div class="fontLoader-relative entityLoader" style="display:none">
     <i class="fa fa-refresh fa-spin-custom"></i>
-    </div>
 </div>
\ No newline at end of file

dashboardv2/public/js/templates/profile/ProfileColumnLayoutView_tmpl.html

@@ -35,7 +35,7 @@
     <h4 class="col-md-12">{{typeObject.label}}</h4>
 </div>
 <div class="row">
-    <a href="javascript:void(0);" class="backButton" data-id="backToYear" style="display: none"><i class="fa fa-chevron-left"></i>  Back To Year</a>
+    <a href="javascript:void(0);" data-id="backToYear" style="display: none"><i class="fa fa-chevron-left"></i>  Back To Year</a>
 </div>
 </br>
 <div class="row">

dashboardv2/public/js/templates/search/SaveAsLayoutView_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.
+-->
+<form name="saveAsform" class="form-horizontal" data-id="">
+    <div class="form-group">
+        <label class="control-label col-sm-2 required" for="name">Name</label>
+        <div class="col-sm-10">
+            <input class="form-control" data-id="saveAsName" placeholder="Name(required)" autofocus/>
+        </div>
+    </div>
+</form>
\ No newline at end of file

dashboardv2/public/js/templates/search/SaveSearchItemView_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.
+-->
+<!-- <div class="row">
+    <div class="col-md-10"><span>{{name}}</span></div>
+    <div class="col-md-2">
+        <button type="button" class="btn btn-danger btn-sm closeInput" data-id="close"><i class="fa fa-times"></i></button>
+    </div>
+</div> -->
+<div data-id="{{guid}}" class="item">
+    <div class="tools">
+        <i class="fa fa-ellipsis-h tagPopover" data-original-title="" title="" data-id=""></i>
+    </div>
+    <a href="javascript:void(0)">{{name}}</a>
+</div>
\ No newline at end of file

dashboardv2/public/js/templates/search/SaveSearch_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.
+-->
+<div class="inline-content add-seperator">
+    <div class="inline">
+        <h4>Favorite Search</h4></div>
+    <div class="pull-right">
+        <button type="button" class="btn btn-action btn-sm" disabled="disabled" data-id="saveBtn">Save</button>
+        <button type="button" class="btn btn-action btn-sm" data-id="saveAsBtn">Save As</button>
+    </div>
+</div>
+<ul data-id="itemViewContent" class="tag-tree saveSearchList gray-text">
+    <div class="fontLoader-relative" style="display: block;">
+        <i class="fa fa-refresh fa-spin-custom"></i>
+    </div>
+</ul>
\ No newline at end of file

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

@@ -31,7 +31,7 @@
             </div>
         </div>
     </div>
-    <div class="col-sm-12">
+    <div class="col-sm-12 form-group">
         <div class="form-group">
             <div class="srchType clearfix">
                 <span class="srchTitle">Search By Type</span>
@@ -64,4 +64,10 @@
         <button type="button" class="btn btn-atlas pull-right" data-id="searchBtn" disabled="disabled">Search</button>
     </div>
     <div id="searchResult"></div>
+    <div class="col-md-12">
+        <div class="col-md-12 well basicSaveSearch" data-id="r_saveSearchBasic"></div>
+    </div>
+    <div class="col-md-12">
+        <div class="col-md-12 well advanceSaveSearch" data-id="r_saveSearchAdvance" style="display: none"></div>
+    </div>
 </div>
\ No newline at end of file

dashboardv2/public/js/utils/CommonViewFunction.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enums'], function(require, Utils, Modal, Messages, Enums) {
+define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enums', 'moment'], function(require, Utils, Modal, Messages, Enums, moment) {
     'use strict';
 
     var CommonViewFunction = {};
@@ -436,12 +436,110 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
             });
         })
     }
+    CommonViewFunction.generateObjectForSaveSearchApi = function(options) {
+        var obj = {
+            name: options.name,
+            searchParameters: {
+                excludeDeletedEntities: true
+            }
+        };
+        var value = options.value;
+        if (value) {
+            _.each(Enums.extractFromUrlForSearch, function(v, k) {
+                var val = value[k];
+                if (!_.isUndefinedNull(val)) {
+                    if (k == "attributes") {
+                        val = val.split(',');
+                    } else if (k == "tagFilters") {
+                        val = CommonViewFunction.attributeFilter.generateAPIObj(val);
+                    } else if (k == "entityFilters") {
+                        val = CommonViewFunction.attributeFilter.generateAPIObj(val);
+                    } else if (k == "includeDE") {
+                        if (val) {
+                            val = false;
+                        } else {
+                            val = true;
+                        }
+                    }
+                }
+                obj.searchParameters[v] = val;
+            });
+            return obj;
+        }
+    }
+    CommonViewFunction.generateUrlFromSaveSearchObject = function(options) {
+        var value = options.value,
+            classificationDefCollection = options.classificationDefCollection,
+            entityDefCollection = options.entityDefCollection,
+            obj = {};
+        if (value) {
+            _.each(Enums.extractFromUrlForSearch, function(v, k) {
+                var val = value[v];
+                if (!_.isUndefinedNull(val)) {
+                    if (k == "attributes") {
+                        val = val.join(',');
+                    } else if (k == "tagFilters") {
+                        if (classificationDefCollection) {
+                            var classificationDef = classificationDefCollection.fullCollection.findWhere({ 'name': value.classification })
+                            attributeDefs = Utils.getNestedSuperTypeObj({
+                                collection: classificationDefCollection,
+                                attrMerge: true,
+                                data: classificationDef.toJSON()
+                            });
+                            _.each(val.criterion, function(obj) {
+                                var attributeDef = _.findWhere(attributeDefs, { 'name': obj.attributeName });
+                                if (attributeDef) {
+                                    if (attributeDef.typeName == "date") {
+                                        obj.attributeValue = moment(parseInt(obj.attributeValue)).format('MM/DD/YYYY h:mm A');
+                                    }
+                                    obj['attributeType'] = attributeDef.typeName;
+                                }
+                            });
+                        }
+                        val = CommonViewFunction.attributeFilter.generateUrl(val.criterion);
+                    } else if (k == "entityFilters") {
+                        if (entityDefCollection) {
+                            var entityDef = entityDefCollection.fullCollection.findWhere({ 'name': value.typeName }),
+                                attributeDefs = Utils.getNestedSuperTypeObj({
+                                    collection: entityDefCollection,
+                                    attrMerge: true,
+                                    data: entityDef.toJSON()
+                                });
+                            _.each(val.criterion, function(obj) {
+                                var attributeDef = _.findWhere(attributeDefs, { 'name': obj.attributeName });
+                                if (attributeDef) {
+                                    if (attributeDef.typeName == "date") {
+                                        obj.attributeValue = moment(parseInt(obj.attributeValue)).format('MM/DD/YYYY h:mm A');
+                                    }
+                                    obj['attributeType'] = attributeDef.typeName;
+                                }
+                            });
+                        }
+                        val = CommonViewFunction.attributeFilter.generateUrl(val.criterion);
+                    } else if (k == "includeDE") {
+                        if (val) {
+                            val = false;
+                        } else {
+                            val = true;
+                        }
+                    }
+                }
+                obj[k] = val;
+            });
+            return obj;
+        }
+    }
     CommonViewFunction.attributeFilter = {
         generateUrl: function(attrObj) {
             var attrQuery = [];
             if (attrObj) {
                 _.each(attrObj, function(obj) {
-                    attrQuery.push(obj.id + "::" + obj.operator + "::" + obj.value + "::" + obj.type);
+                    var url = [(obj.id || obj.attributeName), mapApiOperatorToUI(obj.operator), (obj.value || obj.attributeValue)],
+                        type = (obj.type || obj.attributeType);
+                    if (type) {
+                        url.push(type);
+                    }
+                    attrQuery.push(url.join("::"));
                 });
                 if (attrQuery.length) {
                     return attrQuery.join();
@@ -451,13 +549,40 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
             } else {
                 return null;
             }
+
+            function mapApiOperatorToUI(oper) {
+                if (oper == "eq") {
+                    return "=";
+                } else if (oper == "neq") {
+                    return "!=";
+                } else if (oper == "lt") {
+                    return "<";
+                } else if (oper == "lte") {
+                    return "<=";
+                } else if (oper == "gt") {
+                    return ">";
+                } else if (oper == "gte") {
+                    return ">=";
+                } else if (oper == "startsWith") {
+                    return "begins_with";
+                } else if (oper == "endsWith") {
+                    return "ends_with";
+                } else if (oper == "contains") {
+                    return "contains";
+                }
+                return oper;
+            }
         },
         extractUrl: function(urlObj) {
             var attrObj = [];
             if (urlObj && urlObj.length) {
                 _.each(urlObj.split(","), function(obj) {
                     var temp = obj.split("::");
-                    attrObj.push({ id: temp[0], operator: temp[1], value: temp[2], type: temp[3] });
+                    var finalObj = { id: temp[0], operator: temp[1], value: temp[2] }
+                    if (temp[3]) {
+                        finalObj['type'] = temp[3];
+                    }
+                    attrObj.push(finalObj);
                 });
                 return attrObj;
             } else {
@@ -479,23 +604,38 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
                 var convertObj = [];
                 _.each(rules, function(rulObj) {
                     var tempObj = {};
-                    // For nested 
-                    // if (rulObj.rules) {
-                    //     tempObj = {
-                    //         "condition": "AND",
-                    //         "criterion": convertKeyAndExtractObj(rulObj.rules)
-                    //     }
-                    // } else {
-                    // }
                     tempObj = {
                         "attributeName": rulObj.id,
-                        "operator": rulObj.operator,
+                        "operator": mapUiOperatorToAPI(rulObj.operator),
                         "attributeValue": (rulObj.type === "date" ? Date.parse(rulObj.value) : rulObj.value)
                     }
                     convertObj.push(tempObj);
                 });
                 return convertObj;
             }
+
+            function mapUiOperatorToAPI(oper) {
+                if (oper == "=") {
+                    return "eq";
+                } else if (oper == "!=") {
+                    return "neq";
+                } else if (oper == "<") {
+                    return "lt";
+                } else if (oper == "<=") {
+                    return "lte";
+                } else if (oper == ">") {
+                    return "gt";
+                } else if (oper == ">=") {
+                    return "gte";
+                } else if (oper == "begins_with") {
+                    return "startsWith";
+                } else if (oper == "ends_with") {
+                    return "endsWith";
+                } else if (oper == "contains") {
+                    return "contains";
+                }
+                return oper;
+            }
         }
     }
     CommonViewFunction.addRestCsrfCustomHeader = function(xhr, settings) {

dashboardv2/public/js/utils/Enums.js

@@ -56,6 +56,17 @@ define(['require'], function(require) {
         'decile-frequency': "Decile Frequency Distribution",
         'annual': "Annual Distribution"
     }
+    Enums.extractFromUrlForSearch = {
+        "pageLimit": "limit",
+        "type": "typeName",
+        "tag": "classification",
+        "query": "query",
+        "pageOffset": "offset",
+        "includeDE": "excludeDeletedEntities",
+        "tagFilters": "tagFilters",
+        "entityFilters": "entityFilters",
+        "attributes": "attributes"
+    }
 
     return Enums;
 });
\ No newline at end of file

dashboardv2/public/js/utils/Messages.js

@@ -33,14 +33,22 @@ define(['require'], function(require) {
         removeErrorMessage: " could not be removed",
         editSuccessMessage: " has been updated successfully",
         assignDeletedEntity: " is deleted, tag cannot be assigned",
+        conformation: {
+            deleteMessage: "Are you sure you want to delete "
+        },
         search: {
             noRecordForPage: "No record found at ",
-            onSamePage : "You are on the same page!"
+            onSamePage: "You are on the same page!",
+            favoriteSearch: {
+                save: "Do you want to overwrite ",
+                notSelectedFavoriteElement: "Please select any one favorite search",
+                notSelectedSearchFilter:"Please select at least one filter"
+            }
         },
         tag: {
             addAttributeSuccessMessage: "Tag attribute is added successfully",
             updateTagDescriptionMessage: "Tag description is updated successfully",
-            updateTermDescriptionMessage: "Term description is updated successfully",
+            updateTermDescriptionMessage: "Term description is updated successfully"
         }
     };
     return Messages;

dashboardv2/public/js/utils/Overrides.js

@@ -47,6 +47,13 @@ define(['require', 'utils/Utils', 'marionette', 'backgrid', 'asBreadcrumbs', 'jq
             } else {
                 return false;
             }
+        },
+        isUndefinedNull: function(val) {
+            if (_.isUndefined(val) || _.isNull(val)) {
+                return true
+            } else {
+                return false;
+            }
         }
     });
     var getPopoverEl = function(e) {

dashboardv2/public/js/utils/UrlLinks.js

@@ -107,6 +107,14 @@ define(['require', 'utils/Enums'], function(require, Enums) {
                 return searchUrl;
             }
         },
+        saveSearchApiUrl: function(saveSearchType) {
+            var saveSearchUrl = this.searchApiUrl() + "/saved";
+            if (saveSearchType) {
+                return saveSearchUrl + '/' + saveSearchType;
+            } else {
+                return saveSearchUrl;
+            }
+        },
         versionApiUrl: function() {
             return this.baseUrl + '/admin/version';
         },

dashboardv2/public/js/views/search/QueryBuilderView.js

@@ -153,8 +153,8 @@ define(['require',
                         allow_groups: false,
                         allow_empty: true,
                         operators: [
-                            { type: '=', nb_inputs: 1, multiple: false, apply_to: ['number', 'string', 'boolean'] },
-                            { type: '!=', nb_inputs: 1, multiple: false, apply_to: ['number', 'string', 'boolean'] },
+                            { type: '=', nb_inputs: 1, multiple: false, apply_to: ['number', 'string', 'boolean', 'enum'] },
+                            { type: '!=', nb_inputs: 1, multiple: false, apply_to: ['number', 'string', 'boolean', 'enum'] },
                             { type: '>', nb_inputs: 1, multiple: false, apply_to: ['number', 'string', 'boolean'] },
                             { type: '<', nb_inputs: 1, multiple: false, apply_to: ['number', 'string', 'boolean'] },
                             { type: '>=', nb_inputs: 1, multiple: false, apply_to: ['number', 'string', 'boolean'] },

dashboardv2/public/js/views/search/SaveAsLayoutView.js

+/**
+ * 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.
+ */
+
+define(['require',
+    'backbone',
+    'hbs!tmpl/search/SaveAsLayoutView_tmpl',
+    'utils/Utils',
+    'modules/Modal',
+    'utils/UrlLinks',
+    'platform',
+    'models/VSearch',
+    'utils/CommonViewFunction',
+    'utils/Messages'
+], function(require, Backbone, SaveAsLayoutViewTmpl, Utils, Modal, UrlLinks, platform, VSearch, CommonViewFunction, Messages) {
+
+
+    var SaveAsLayoutView = Backbone.Marionette.LayoutView.extend({
+        _viewName: 'SaveAsLayoutView',
+        template: SaveAsLayoutViewTmpl,
+        regions: {},
+        ui: {
+            saveAsName: "[data-id='saveAsName']"
+        },
+        events: function() {
+            var events = {};
+            return events;
+        },
+        initialize: function(options) {
+            var that = this;
+            _.extend(this, _.pick(options, 'value', 'collection', 'searchVent', 'typeHeaders', 'fetchFavioriteCollection', 'getValue', 'isBasic'));
+
+            this.model = new VSearch();
+            var modal = new Modal({
+                title: 'Enter your search name',
+                content: this,
+                cancelText: "Cancel",
+                okCloses: false,
+                okText: 'Create',
+                allowCancel: true
+            }).open();
+            modal.$el.find('button.ok').attr("disabled", "true");
+            this.ui.saveAsName.on('keyup', function(e) {
+                modal.$el.find('button.ok').removeAttr("disabled");
+            });
+            this.ui.saveAsName.on('keyup', function(e) {
+                if ((e.keyCode == 8 || e.keyCode == 32 || e.keyCode == 46) && e.currentTarget.value.trim() == "") {
+                    modal.$el.find('button.ok').attr("disabled", "true");
+                }
+            });
+            modal.on('ok', function() {
+                modal.$el.find('button.ok').attr("disabled", "true");
+                that.onCreateButton(modal);
+            });
+            modal.on('closeModal', function() {
+                modal.trigger('cancel');
+            });
+        },
+        onCreateButton: function(modal) {
+            var that = this,
+                obj = { value: this.getValue(), name: this.ui.saveAsName.val() },
+                saveObj = CommonViewFunction.generateObjectForSaveSearchApi(obj);
+            if (this.isBasic) {
+                saveObj['searchType'] = "BASIC";
+            } else {
+                saveObj['searchType'] = "ADVANCED";
+            }
+            that.model.urlRoot = UrlLinks.saveSearchApiUrl();
+            that.model.save(saveObj, {
+                success: function(model, data) {
+                    if (that.collection) {
+                        that.collection.add(data);
+                    }
+                    Utils.notifySuccess({
+                        content: obj.name + Messages.addSuccessMessage
+                    });
+                }
+            });
+            modal.trigger('cancel');
+        }
+    });
+    return SaveAsLayoutView;
+});
\ No newline at end of file

dashboardv2/public/js/views/search/SaveSearchItemView.js

+/*
+ * 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.
+ */
+define(['require',
+    'backbone',
+    'hbs!tmpl/search/SaveSearchItemView_tmpl',
+    'utils/UrlLinks',
+    'utils/Utils',
+    'utils/CommonViewFunction',
+    'utils/Messages'
+], function(require, Backbone, SaveSearchItemView_tmpl, UrlLinks, Utils, CommonViewFunction, Messages) {
+    'use strict';
+    return Backbone.Marionette.ItemView.extend({
+        template: SaveSearchItemView_tmpl,
+        tagName: 'li',
+        className: 'parent-node',
+        ui: {
+            stateChange: '.item',
+            tools: '.tools'
+        },
+        events: function() {
+            var events = {};
+            events['click ' + this.ui.stateChange] = 'stateChange';
+            events['click ' + this.ui.tools] = function(e) {
+                e.stopPropagation();
+            };
+            return events;
+        },
+        initialize: function(options) {
+            _.extend(this, _.pick(options, 'collection', 'typeHeaders', 'applyValue', 'fetchFavioriteCollection', 'isBasic', 'classificationDefCollection', 'entityDefCollection'));
+            this.model.id = this.model.get('guid');
+            this.model.idAttribute = 'guid';
+            this.searchTypeObj = {
+                'searchType': 'dsl',
+                'dslChecked': 'true'
+            }
+            if (this.isBasic) {
+                this.searchTypeObj.dslChecked = false;
+                this.searchTypeObj.searchType = 'basic';
+            }
+        },
+        onRender: function() {
+            this.showToolTip();
+        },
+        stateChange: function() {
+            this.applyValue(this.model, this.searchTypeObj);
+            this.trigger('item:clicked');
+            this.ui.stateChange.parent('li').addClass('active').siblings().removeClass('active');
+        },
+        showToolTip: function(e) {
+            var that = this;
+            Utils.generatePopover({
+                el: this.$('.tagPopover'),
+                container: this.$el,
+                popoverOptions: {
+                    content: function() {
+                        return "<ul class='saveSearchPopoverList'>" +
+                            "<li class='th' ><i class='fa fa-search'></i> <a href='javascript:void(0)' data-fn='onSearch'>Search </a></li>" +
+                            "<li class='listTerm' ><i class='fa fa-trash-o'></i> <a href='javascript:void(0)' data-fn='onDelete'>Delete</a></li>" +
+                            "</ul>";
+                    }
+                }
+            }).parent('div.tools').on('click', 'li', function(e) {
+                e.stopPropagation();
+                that.$('.tagPopover').popover('hide');
+                that[$(this).find('a').data('fn')](e)
+            });
+        },
+        onSearch: function() {
+            var searchParameters = this.model.toJSON().searchParameters,
+                params = CommonViewFunction.generateUrlFromSaveSearchObject({
+                    value: searchParameters,
+                    classificationDefCollection: this.classificationDefCollection,
+                    entityDefCollection: this.entityDefCollection
+                });
+            Utils.setUrl({
+                url: '#!/search/searchResult',
+                urlParams: _.extend(params, this.searchTypeObj),
+                mergeBrowserUrl: false,
+                trigger: true,
+                updateTabState: true
+            });
+        },
+        onDelete: function() {
+            var that = this;
+            var notifyObj = {
+                modal: true,
+                html: true,
+                text: Messages.conformation.deleteMessage + "<b>" + this.model.get('name') + "</b>" + " ?",
+                ok: function(argument) {
+                    that.onDeleteNotifyOk();
+                },
+                cancel: function(argument) {}
+            }
+            Utils.notifyConfirm(notifyObj);
+        },
+        onDeleteNotifyOk: function() {
+            var that = this;
+            this.model.urlRoot = UrlLinks.saveSearchApiUrl();
+            this.model.destroy({
+                wait: true,
+                success: function(model, data) {
+                    if (that.collection) {
+                        that.collection.remove(data);
+                    }
+                    Utils.notifySuccess({
+                        content: that.model.get('name') + Messages.deleteSuccessMessage
+                    });
+                }
+            });
+        }
+    });
+});
\ No newline at end of file

dashboardv2/public/js/views/search/SaveSearchView.js

+/**
+ * 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.
+ */
+
+define(['require',
+    'backbone',
+    'hbs!tmpl/search/SaveSearch_tmpl',
+    'views/search/SaveSearchItemView',
+    'collection/VSearchList',
+    'utils/Utils',
+    'utils/UrlLinks',
+    'utils/CommonViewFunction',
+    'utils/Messages'
+], function(require, Backbone, SaveSearch_Tmpl, SaveSearchItemView, VSearchList, Utils, UrlLinks, CommonViewFunction, Messages) {
+    'use strict';
+
+    return Backbone.Marionette.CompositeView.extend({
+        template: SaveSearch_Tmpl,
+        childView: SaveSearchItemView,
+        childViewContainer: "[data-id='itemViewContent']",
+        ui: {
+            saveAs: "[data-id='saveAsBtn']",
+            save: "[data-id='saveBtn']"
+        },
+        childViewOptions: function() {
+            return {
+                collection: this.collection,
+                typeHeaders: this.typeHeaders,
+                applyValue: this.applyValue,
+                isBasic: this.isBasic,
+                classificationDefCollection: this.classificationDefCollection,
+                entityDefCollection: this.entityDefCollection,
+                fetchFavioriteCollection: this.fetchCollection.bind(this)
+            };
+        },
+        childEvents: function() {
+            return {
+                "item:clicked": function() {
+                    this.ui.save.attr('disabled', false);
+                }
+            }
+        },
+        events: function() {
+            var events = {};
+            events['click ' + this.ui.saveAs] = "saveAs";
+            events['click ' + this.ui.save] = "save";
+            return events;
+        },
+        initialize: function(options) {
+            var that = this;
+            _.extend(this, _.pick(options, 'collection', 'value', 'searchVent', 'typeHeaders', 'applyValue', 'getValue', 'isBasic', 'fetchCollection', 'classificationDefCollection', 'entityDefCollection'));
+        },
+        onRender: function() {
+            this.bindEvents();
+        },
+        bindEvents: function() {
+            this.listenTo(this.collection, "reset error", function(model, response) {
+                this.$('.fontLoader-relative').hide();
+                if (model && model.length) {
+                    this.$("[data-id='itemViewContent']").text("");
+                } else {
+                    this.$("[data-id='itemViewContent']").text("You don't have any favorite search.")
+                }
+            }, this);
+        },
+        saveAs: function(e) {
+            var that = this,
+                value = this.getValue();
+            if (value && (value.type || value.tag || value.query)) {
+                require([
+                    'views/search/SaveAsLayoutView'
+                ], function(SaveAsLayoutView) {
+                    new SaveAsLayoutView({ 'value': that.value, 'searchVent': that.searchVent, 'collection': that.collection, 'getValue': that.getValue, 'isBasic': that.isBasic });
+                });
+            } else {
+                Utils.notifyInfo({
+                    content: Messages.search.favoriteSearch.notSelectedSearchFilter
+                })
+            }
+        },
+        save: function() {
+            var that = this,
+                obj = {},
+                notifyObj = {
+                    modal: true,
+                    html: true,
+                    ok: function(argument) {
+                        that.onSaveNotifyOk(obj);
+                    },
+                    cancel: function(argument) {}
+                },
+                selectedEl = this.$('.saveSearchList li.active').find('div.item');
+            obj.name = selectedEl.find('a').text();
+            obj.id = selectedEl.data('id');
+            if (selectedEl && selectedEl.length) {
+                notifyObj['text'] = Messages.search.favoriteSearch.save + " <b>" + obj.name + "</b> ?";
+                Utils.notifyConfirm(notifyObj);
+            } else {
+                Utils.notifyInfo({
+                    content: Messages.search.favoriteSearch.notSelectedElement
+                })
+            }
+        },
+        onSaveNotifyOk: function(obj) {
+            var that = this
+            if (obj && obj.id) {
+                var model = new this.collection.model();
+                obj.value = this.getValue();
+                var saveObj = CommonViewFunction.generateObjectForSaveSearchApi(obj);
+                saveObj['guid'] = obj.id;
+                model.urlRoot = UrlLinks.saveSearchApiUrl();
+                model.save(saveObj, {
+                    type: 'PUT',
+                    success: function(model, data) {
+                        if (that.collection) {
+                            var collectionRef = that.collection.find({ guid: data.guid });
+                            if (collectionRef) {
+                                collectionRef.set(data);
+                            }
+                        }
+                        Utils.notifySuccess({
+                            content: obj.name + Messages.editSuccessMessage
+                        });
+                    }
+                });
+            }
+        }
+    });
+});
\ No newline at end of file

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

@@ -22,8 +22,9 @@ define(['require',
     'utils/Utils',
     'utils/UrlLinks',
     'utils/Globals',
+    'collection/VSearchList',
     'utils/CommonViewFunction'
-], function(require, Backbone, SearchLayoutViewTmpl, Utils, UrlLinks, Globals, CommonViewFunction) {
+], function(require, Backbone, SearchLayoutViewTmpl, Utils, UrlLinks, Globals, VSearchList, CommonViewFunction) {
     'use strict';
 
     var SearchLayoutView = Backbone.Marionette.LayoutView.extend(
@@ -34,7 +35,10 @@ define(['require',
             template: SearchLayoutViewTmpl,
 
             /** Layout sub regions */
-            regions: {},
+            regions: {
+                RSaveSearchBasic: "[data-id='r_saveSearchBasic']",
+                RSaveSearchAdvance: "[data-id='r_saveSearchAdvance']"
+            },
 
             /** ui selector cache */
             ui: {
@@ -56,6 +60,8 @@ define(['require',
                     that = this;
                 events["keyup " + this.ui.searchInput] = function(e) {
                     var code = e.which;
+                    this.value.query = e.currentTarget.value;
+                    this.query[this.type].query = this.value.query;
                     if (code == 13) {
                         that.findSearchResult();
                     }
@@ -111,6 +117,69 @@ define(['require',
                 }
                 this.bindEvents();
             },
+            renderSaveSearch: function() {
+                var that = this;
+                require(['views/search/SaveSearchView'], function(SaveSearchView) {
+                    var saveSearchBaiscCollection = new VSearchList(),
+                        saveSearchAdvanceCollection = new VSearchList(),
+                        saveSearchCollection = new VSearchList();
+                    saveSearchCollection.url = UrlLinks.saveSearchApiUrl();
+                    var obj = {
+                        value: that.value,
+                        searchVent: that.searchVent,
+                        typeHeaders: that.typeHeaders,
+                        fetchCollection: fetchSaveSearchCollection,
+                        classificationDefCollection: that.classificationDefCollection,
+                        entityDefCollection: that.entityDefCollection,
+                        getValue: function() {
+                            var queryObj = that.query[that.type],
+                                entityObj = that.searchTableFilters['entityFilters'],
+                                tagObj = that.searchTableFilters['tagFilters'],
+                                urlObj = Utils.getUrlState.getQueryParams();
+                            if (urlObj) {
+                                if (urlObj.includeDE == "true") {
+                                    urlObj.includeDE = true;
+                                } else {
+                                    urlObj.includeDE = false;
+                                }
+                            }
+                            return _.extend({}, queryObj, urlObj, {
+                                'entityFilters': entityObj ? entityObj[queryObj.type] : null,
+                                'tagFilters': tagObj ? tagObj[queryObj.tag] : null,
+                                'type': queryObj.type,
+                                'query': queryObj.query,
+                                'tag': queryObj.tag
+                            })
+                        },
+                        applyValue: function(model, searchType) {
+                            that.manualRender(_.extend(searchType, CommonViewFunction.generateUrlFromSaveSearchObject({
+                                value: model.get('searchParameters'),
+                                classificationDefCollection: that.classificationDefCollection,
+                                entityDefCollection: that.entityDefCollection
+                            })));
+                        }
+                    }
+                    that.RSaveSearchBasic.show(new SaveSearchView(_.extend(obj, {
+                        isBasic: true,
+                        collection: saveSearchBaiscCollection
+                    })));
+                    that.RSaveSearchAdvance.show(new SaveSearchView(_.extend(obj, {
+                        isBasic: false,
+                        collection: saveSearchAdvanceCollection
+                    })));
+
+                    function fetchSaveSearchCollection() {
+                        saveSearchCollection.fetch({
+                            success: function(collection, data) {
+                                saveSearchAdvanceCollection.reset(_.where(data, { "searchType": "ADVANCED" }));
+                                saveSearchBaiscCollection.reset(_.where(data, { "searchType": "BASIC" }));
+                            },
+                            silent: true
+                        });
+                    }
+                    fetchSaveSearchCollection();
+                });
+            },
             bindEvents: function(param) {
                 this.listenTo(this.typeHeaders, "reset", function(value) {
                     this.renderTypeTagList();
@@ -189,12 +258,26 @@ define(['require',
                                 _.extend(this.value, temp);
                                 // on change of type/tag change the offset.
                                 this.query[this.type].pageOffset = 0;
+                                _.extend(this.query[this.type], temp);
                             } else {
                                 // Initial loading handle.
                                 var filterObj = this.searchTableFilters[filterType];
                                 if (filterObj && this.value[key]) {
                                     this.searchTableFilters[filterType][this.value[key]] = this.value[filterType] ? this.value[filterType] : null;
                                 }
+                                if (this.value.type) {
+                                    if (this.value.attributes) {
+                                        var attributes = _.sortBy(this.value.attributes.split(',')),
+                                            tableColumn = this.searchTableColumns[this.value.type];
+                                        if (_.isEmpty(this.searchTableColumns) || !tableColumn) {
+                                            this.searchTableColumns[this.value.type] = attributes
+                                        } else if (tableColumn.join(",") !== attributes.join(",")) {
+                                            this.searchTableColumns[this.value.type] = attributes;
+                                        }
+                                    } else if (this.searchTableColumns[this.value.type]) {
+                                        this.searchTableColumns[this.value.type] = undefined;
+                                    }
+                                }
                             }
                             this.makeFilterButtonActive(filterType);
                         } else {
@@ -229,6 +312,7 @@ define(['require',
                     placeholder: "Select",
                     allowClear: true
                 });
+                this.renderSaveSearch();
             },
             updateQueryObject: function(param) {
                 if (param && param.searchType) {
@@ -427,7 +511,7 @@ define(['require',
                     this.query[this.type].pageLimit = this.value.pageLimit;
                 }
                 if (this.value.pageOffset) {
-                    if (this.query[this.type].query != value) {
+                    if (this.query[this.type].query && this.query[this.type].query != value) {
                         this.query[this.type].pageOffset = 0;
                     } else {
                         this.query[this.type].pageOffset = this.value.pageOffset;
@@ -455,11 +539,15 @@ define(['require',
                     this.$('.temFilterBtn').hide();
                     this.$('.temFilter').addClass('col-sm-12');
                     this.$('.temFilter').removeClass('col-sm-10');
+                    this.$('.basicSaveSearch').hide();
+                    this.$('.advanceSaveSearch').show();
                 } else {
                     this.$('.temFilter').addClass('col-sm-10');
                     this.$('.temFilter').removeClass('col-sm-12');
                     this.$('.temFilterBtn').show();
                     this.$('.tagBox').show();
+                    this.$('.basicSaveSearch').show();
+                    this.$('.advanceSaveSearch').hide();
                     this.dsl = false;
                     this.type = "basic";
                 }
@@ -485,6 +573,12 @@ define(['require',
                 this.ui.typeLov.val("").trigger("change");
                 this.ui.tagLov.val("").trigger("change");
                 this.ui.searchInput.val("");
+                var type = "basicSaveSearch";
+                if (this.type == "dsl") {
+                    type = "advanceSaveSearch";
+                }
+                this.$('.' + type + ' .saveSearchList').find('li.active').removeClass('active');
+                this.$('.' + type + ' [data-id="saveBtn"]').attr('disabled', true);
                 if (!this.dsl) {
                     this.searchTableFilters.tagFilters = {};
                     this.searchTableFilters.entityFilters = {};