ATLAS-1608 :Search UI improvement

atlanhq · Mar 4, 2017 · b9779ec · b9779ec
1 parent 670a4c0
commit b9779ec
Show file tree

Hide file tree

Showing 18 changed files with 325 additions and 231 deletions.
diff --git a/dashboardv2/public/css/scss/override.scss b/dashboardv2/public/css/scss/override.scss
@@ -255,3 +255,8 @@
 .ui-pnotify-text {
     word-break: break-all;
 }
+
+.advancedInfo{
+    margin-left: 5px;
+    cursor: pointer;
+}
diff --git a/dashboardv2/public/css/scss/search.scss b/dashboardv2/public/css/scss/search.scss
@@ -19,68 +19,65 @@
 //colors
 $color_celeste_approx: #1D1F2B;
 $switchTransition: .4s ease-out;
-
 @mixin transition($transition...) {
-  -webkit-transition: $transition;
-     -moz-transition: $transition;
-       -o-transition: $transition;
-          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;
+    -webkit-transition-property: $properties;
+    -moz-transition-property: $properties;
+    -o-transition-property: $properties;
+    transition-property: $properties;
 }
 
 .switch {
-  position: relative;
-  width: 50px;
-  height: 22px;
-  margin-left: 8px;
-  padding: 3px;
-  vertical-align: top;
-  background-color: $color_celeste_approx;
-  border-radius: 18px;
-  cursor: pointer;
+    position: relative;
+    width: 50px;
+    height: 22px;
+    margin-left: 8px;
+    padding: 3px;
+    vertical-align: top;
+    background-color: $color_celeste_approx;
+    border-radius: 18px;
+    cursor: pointer;
 }
 
 .switch-input {
-  position: absolute;
-  top: 0;
-  left: 0;
-  opacity: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
 }
 
 .switch-slider {
-  position: absolute;
-  top: 1px;
-  left: 3px;
-  width: 16px;
-  height: 16px;
-  border-radius: 10px;
-  box-shadow: 1px 1px 5px rgba(black, .2);
-  @include transition(left #{$switchTransition});
-
-  &:before {
-    content: '';
     position: absolute;
-    top: 50%;
-    left: 50%;
-    margin: -6px 0 0 -8px;
+    top: 1px;
+    left: 3px;
     width: 16px;
     height: 16px;
-    background-color: $color_jungle_green_approx;
     border-radius: 10px;
-    box-shadow: inset 0 1px rgba(black, .02);
-    @include transition(inherit)
-  }
-
-  .switch-input:checked ~ & {
-    left: 30px;
-    box-shadow: -1px 1px 5px rgba(black, .2);
-  }
+    box-shadow: 1px 1px 5px rgba(black, .2);
+    @include transition(left #{$switchTransition});
+    &:before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin: -6px 0 0 -8px;
+        width: 16px;
+        height: 16px;
+        background-color: $color_jungle_green_approx;
+        border-radius: 10px;
+        box-shadow: inset 0 1px rgba(black, .02);
+        @include transition(inherit)
+    }
+    .switch-input:checked ~ & {
+        left: 30px;
+        box-shadow: -1px 1px 5px rgba(black, .2);
+    }
 }
 
 .advanceSearchBtn {
@@ -109,3 +106,11 @@ $switchTransition: .4s ease-out;
 .btnAssign {
     margin-bottom: 15px;
 }
+
+.srchType {
+    margin: 5px 0px;
+    .srchTitle {
+        font-size: 14px;
+        color: $gray
+    }
+}
diff --git a/dashboardv2/public/js/collection/VSearchList.js b/dashboardv2/public/js/collection/VSearchList.js
@@ -37,11 +37,7 @@ define(['require',
             parseRecords: function(resp, options) {
                 this.queryType = resp.queryType;
                 this.queryText = resp.queryText;
-                if (resp.queryType && resp.queryType == "DSL") {
-                    return resp.entities ? resp.entities : [];
-                } else {
-                    return resp.fullTextResult ? resp.fullTextResult : [];
-                }
+                return resp.entities ? resp.entities : [];
             },
         },
         //Static Class Members

diff --git a/dashboardv2/public/js/router/Router.js b/dashboardv2/public/js/router/Router.js
@@ -29,7 +29,7 @@ define([
     var AppRouter = Backbone.Router.extend({
         routes: {
             // Define some URL routes
-            '': 'commonAction',
+            '': 'defaultAction',
             '!/': 'tagAttributePageLoad',
             '!/tag/tagAttribute/(*name)': 'tagAttributePageLoad',
             '!/taxonomy/detailCatalog/(*url)': 'detailCatalog',
@@ -243,31 +243,20 @@ define([
                     'value': paramObj,
                     'entityDefCollection': that.entityDefCollection,
                     'typeHeaders': that.typeHeaders,
-                    'initialView': paramObj.query.trim().length === 0
+                    'initialView': (paramObj.query.trim() || paramObj.type || (paramObj.dslChecked == "true" ? "" : paramObj.tag)).length === 0
                 }));
             });
         },
         defaultAction: function(actions) {
             // We have no matching route, lets just log what the URL was
-            if (Globals.taxonomy) {
-                Utils.setUrl({
-                    url: '#!/taxonomy',
-                    mergeBrowserUrl: false,
-                    updateTabState: function() {
-                        return { taxonomyUrl: this.url, stateChanged: false };
-                    },
-                    trigger: true
-                });
-            } else {
-                Utils.setUrl({
-                    url: '#!/tag',
-                    mergeBrowserUrl: false,
-                    updateTabState: function() {
-                        return { tagUrl: this.url, stateChanged: false };
-                    },
-                    trigger: true
-                });
-            }
+            Utils.setUrl({
+                url: '#!/search',
+                mergeBrowserUrl: false,
+                updateTabState: function() {
+                    return { searchUrl: this.url, stateChanged: false };
+                },
+                trigger: true
+            });
 
             console.log('No route:', actions);
         }

diff --git a/dashboardv2/public/js/templates/business_catalog/SideNavLayoutView_tmpl.html b/dashboardv2/public/js/templates/business_catalog/SideNavLayoutView_tmpl.html
@@ -19,11 +19,11 @@
         <a href="index.html"><i class="fa fa-globe"></i> Apache Atlas</a>
     </li>
     <ul class="tabs" style="width: 100%;" role="tablist">
-        <li role="presentation" class="{{tabClass}}"><a href="#tab-tag" aria-controls="tab-tag" data-name="tab-tag" role="tab" data-toggle="tab">Tags</a></li>
+        <li role="presentation" class="{{tabClass}}"><a href="#tab-search" aria-controls="tab-search" data-name="tab-search" role="tab" data-toggle="tab" class=""><i class="fa fa-search"></i> Search</a></li>
+        <li role="presentation" class="{{tabClass}}"><a href="#tab-tag" aria-controls="tab-tag" data-name="tab-tag" role="tab" data-toggle="tab"><i class="fa fa-tags"></i> Tags</a></li>
         {{#if taxonomy}}
-        <li role="presentation" class="tab col-sm-4"><a href="#tab-taxonomy" aria-controls="tab-taxonomy" data-name="tab-taxonomy" role="tab" data-toggle="tab" class="">Taxonomy</a></li>
+        <li role="presentation" class="tab col-sm-4"><a href="#tab-taxonomy" aria-controls="tab-taxonomy" data-name="tab-taxonomy" role="tab" data-toggle="tab" class=""><i class="fa fa-sitemap"></i> Taxonomy</a></li>
         {{/if}}
-        <li role="presentation" class="{{tabClass}}"><a href="#tab-search" aria-controls="tab-search" data-name="tab-search" role="tab" data-toggle="tab" class=""><i class="fa fa-search"></i> Search</a></li>
     </ul>
 </ul>
 <div class="tab-content">

diff --git a/dashboardv2/public/js/templates/search/AdvancedSearchInfo_tmpl.html b/dashboardv2/public/js/templates/search/AdvancedSearchInfo_tmpl.html
@@ -0,0 +1,38 @@
+<!--
+ * 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="">
+    <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.incubator.apache.org/Search.html" target="_blank">More sample queries and use-cases >></a>
+    </ul>
+</div>
diff --git a/dashboardv2/public/js/templates/search/SearchLayoutView_tmpl.html b/dashboardv2/public/js/templates/search/SearchLayoutView_tmpl.html
@@ -17,29 +17,41 @@
 <div class="row row-margin-bottom">
     <div class="col-sm-12" style="margin:15px 0px;">
         <div class="row">
-            <div class="col-md-6">
-                <span class="pull-left">Text</span>
+            <div class="col-md-9" style="margin-top: 5px;">
+                <span class="pull-left">Basic</span>
                 <label class="switch pull-left">
                     <input type="checkbox" class="switch-input" name="queryType" value="text" />
                     <span class="switch-slider"></span>
                 </label>
-                <span class="pull-left">DSL</span>
+                <span class="pull-left">Advanced</span>
+                <span class="advancedInfo" data-id="advancedInfo"><i class="fa fa-question-circle-o"></i></span>
             </div>
-            <div class="col-md-6">
+            <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>
             </div>
         </div>
     </div>
     <div class="col-sm-12">
         <div class="form-group">
-            <div class="typeLOV">
-                <select data-id="typeLOV"></select>
+            <div class="srchType">
+                <span class="srchTitle">Search By Type</span>
+                <div class="typeLOV">
+                    <select data-id="typeLOV"></select>
+                </div>
             </div>
-            <div class="searchInputClick">
-                <input type="text" class="form-control" data-id="searchInput" placeholder="Search using a query string: e.g. sales_fact" style="margin-top: 5px;">
+            <div class="srchType tagBox">
+                <span class="srchTitle">Search By Tag</span>
+                <div class="typeLOV">
+                    <select data-id="tagLOV"></select>
+                </div>
+            </div>
+            <div class="srchType">
+                <span class="srchTitle">Search By Query</span>
+                <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>
     </div>
     <div id="searchResult"></div>
+</div>
diff --git a/dashboardv2/public/js/templates/search/SearchResultLayoutView_tmpl.html b/dashboardv2/public/js/templates/search/SearchResultLayoutView_tmpl.html
@@ -34,9 +34,9 @@
         <div id="r_searchResultTableLayoutView">
             {{#if entityCreate}}
             <div class="entityLink" style="display:none">
-                <h1><b>Atlas Search</b></h1>
+                <h1><b>{{searchType}}</b></h1>
                 <p class="entityLink">Search Atlas for existing entities or
-                    <a href="javascript:void(0)" data-id='createEntity'> create new entity </a><i class="fa fa-question-circle" aria-hidden="true"></i>
+                    <a href="javascript:void(0)" data-id='createEntity'> create new entity </a>
                 </p>
             </div>
             {{/if}}

diff --git a/dashboardv2/public/js/utils/Enums.js b/dashboardv2/public/js/utils/Enums.js
@@ -44,7 +44,7 @@ define(['require'], function(require) {
 
     Enums.searchUrlType = {
         DSL: 'dsl',
-        FULLTEXT: 'fulltext'
+        FULLTEXT: 'basic'
     }
 
     return Enums;

diff --git a/dashboardv2/public/js/views/business_catalog/SideNavLayoutView.js b/dashboardv2/public/js/views/business_catalog/SideNavLayoutView.js
@@ -111,13 +111,13 @@ define(['require',
             });
         },
         selectTab: function() {
-            if (Utils.getUrlState.isTagTab() || (Utils.getUrlState.isInitial() && !Globals.taxonomy)) {
+            if (Utils.getUrlState.isTagTab()) {
                 this.$('.tabs').find('li a[aria-controls="tab-tag"]').parents('li').addClass('active').siblings().removeClass('active');
                 this.$('.tab-content').find('div#tab-tag').addClass('active').siblings().removeClass('active');
-            } else if (Utils.getUrlState.isTaxonomyTab() || (Utils.getUrlState.isInitial() && Globals.taxonomy)) {
+            } else if (Utils.getUrlState.isTaxonomyTab()) {
                 this.$('.tabs').find('li a[aria-controls="tab-taxonomy"]').parents('li').addClass('active').siblings().removeClass('active');
                 this.$('.tab-content').find('div#tab-taxonomy').addClass('active').siblings().removeClass('active');
-            } else if (Utils.getUrlState.isSearchTab() || (Utils.getUrlState.isDetailPage())) {
+            } else if (Utils.getUrlState.isSearchTab() || (Utils.getUrlState.isDetailPage()) || Utils.getUrlState.isInitial()) {
                 this.$('.tabs').find('li a[aria-controls="tab-search"]').parents('li').addClass('active').siblings().removeClass('active');
                 this.$('.tab-content').find('div#tab-search').addClass('active').siblings().removeClass('active');
             }

diff --git a/dashboardv2/public/js/views/business_catalog/TreeLayoutView.js b/dashboardv2/public/js/views/business_catalog/TreeLayoutView.js
@@ -338,7 +338,7 @@ define(['require',
                 var dataURL = this.$('.taxonomyTree').find('li[data-id="Parent"]').find("a").data('href');
                 if (dataURL) {
                     this.url = dataURL;
-                    if (this.viewBased) {
+                    if (this.viewBased && Utils.getUrlState.isTaxonomyTab()) {
                         Utils.setUrl({
                             url: "#!/taxonomy/detailCatalog" + dataURL,
                             mergeBrowserUrl: false,