Skip to content

Commit b9779ec

Browse files
kevalbhattkevalbhatt
committed
ATLAS-1608 :Search UI improvement
1 parent 670a4c0 commit b9779ec

18 files changed

+325
-231
lines changed

‎dashboardv2/public/css/scss/override.scss

+5
Original file line numberDiff line numberDiff line change
@@ -255,3 +255,8 @@
255255
.ui-pnotify-text {
256256
word-break: break-all;
257257
}
258+
259+
.advancedInfo{
260+
margin-left: 5px;
261+
cursor: pointer;
262+
}

‎dashboardv2/public/css/scss/search.scss

+50-45
Original file line numberDiff line numberDiff line change
@@ -19,68 +19,65 @@
1919
//colors
2020
$color_celeste_approx: #1D1F2B;
2121
$switchTransition: .4s ease-out;
22-
2322
@mixin transition($transition...) {
24-
-webkit-transition: $transition;
25-
-moz-transition: $transition;
26-
-o-transition: $transition;
27-
transition: $transition;
23+
-webkit-transition: $transition;
24+
-moz-transition: $transition;
25+
-o-transition: $transition;
26+
transition: $transition;
2827
}
2928

3029
@mixin transition-property($properties...) {
31-
-webkit-transition-property: $properties;
32-
-moz-transition-property: $properties;
33-
-o-transition-property: $properties;
34-
transition-property: $properties;
30+
-webkit-transition-property: $properties;
31+
-moz-transition-property: $properties;
32+
-o-transition-property: $properties;
33+
transition-property: $properties;
3534
}
3635

3736
.switch {
38-
position: relative;
39-
width: 50px;
40-
height: 22px;
41-
margin-left: 8px;
42-
padding: 3px;
43-
vertical-align: top;
44-
background-color: $color_celeste_approx;
45-
border-radius: 18px;
46-
cursor: pointer;
37+
position: relative;
38+
width: 50px;
39+
height: 22px;
40+
margin-left: 8px;
41+
padding: 3px;
42+
vertical-align: top;
43+
background-color: $color_celeste_approx;
44+
border-radius: 18px;
45+
cursor: pointer;
4746
}
4847

4948
.switch-input {
50-
position: absolute;
51-
top: 0;
52-
left: 0;
53-
opacity: 0;
49+
position: absolute;
50+
top: 0;
51+
left: 0;
52+
opacity: 0;
5453
}
5554

5655
.switch-slider {
57-
position: absolute;
58-
top: 1px;
59-
left: 3px;
60-
width: 16px;
61-
height: 16px;
62-
border-radius: 10px;
63-
box-shadow: 1px 1px 5px rgba(black, .2);
64-
@include transition(left #{$switchTransition});
65-
66-
&:before {
67-
content: '';
6856
position: absolute;
69-
top: 50%;
70-
left: 50%;
71-
margin: -6px 0 0 -8px;
57+
top: 1px;
58+
left: 3px;
7259
width: 16px;
7360
height: 16px;
74-
background-color: $color_jungle_green_approx;
7561
border-radius: 10px;
76-
box-shadow: inset 0 1px rgba(black, .02);
77-
@include transition(inherit)
78-
}
79-
80-
.switch-input:checked ~ & {
81-
left: 30px;
82-
box-shadow: -1px 1px 5px rgba(black, .2);
83-
}
62+
box-shadow: 1px 1px 5px rgba(black, .2);
63+
@include transition(left #{$switchTransition});
64+
&:before {
65+
content: '';
66+
position: absolute;
67+
top: 50%;
68+
left: 50%;
69+
margin: -6px 0 0 -8px;
70+
width: 16px;
71+
height: 16px;
72+
background-color: $color_jungle_green_approx;
73+
border-radius: 10px;
74+
box-shadow: inset 0 1px rgba(black, .02);
75+
@include transition(inherit)
76+
}
77+
.switch-input:checked ~ & {
78+
left: 30px;
79+
box-shadow: -1px 1px 5px rgba(black, .2);
80+
}
8481
}
8582

8683
.advanceSearchBtn {
@@ -109,3 +106,11 @@ $switchTransition: .4s ease-out;
109106
.btnAssign {
110107
margin-bottom: 15px;
111108
}
109+
110+
.srchType {
111+
margin: 5px 0px;
112+
.srchTitle {
113+
font-size: 14px;
114+
color: $gray
115+
}
116+
}

‎dashboardv2/public/js/collection/VSearchList.js

+1-5
Original file line numberDiff line numberDiff line change
@@ -37,11 +37,7 @@ define(['require',
3737
parseRecords: function(resp, options) {
3838
this.queryType = resp.queryType;
3939
this.queryText = resp.queryText;
40-
if (resp.queryType && resp.queryType == "DSL") {
41-
return resp.entities ? resp.entities : [];
42-
} else {
43-
return resp.fullTextResult ? resp.fullTextResult : [];
44-
}
40+
return resp.entities ? resp.entities : [];
4541
},
4642
},
4743
//Static Class Members

‎dashboardv2/public/js/router/Router.js

+10-21
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ define([
2929
var AppRouter = Backbone.Router.extend({
3030
routes: {
3131
// Define some URL routes
32-
'': 'commonAction',
32+
'': 'defaultAction',
3333
'!/': 'tagAttributePageLoad',
3434
'!/tag/tagAttribute/(*name)': 'tagAttributePageLoad',
3535
'!/taxonomy/detailCatalog/(*url)': 'detailCatalog',
@@ -243,31 +243,20 @@ define([
243243
'value': paramObj,
244244
'entityDefCollection': that.entityDefCollection,
245245
'typeHeaders': that.typeHeaders,
246-
'initialView': paramObj.query.trim().length === 0
246+
'initialView': (paramObj.query.trim() || paramObj.type || (paramObj.dslChecked == "true" ? "" : paramObj.tag)).length === 0
247247
}));
248248
});
249249
},
250250
defaultAction: function(actions) {
251251
// We have no matching route, lets just log what the URL was
252-
if (Globals.taxonomy) {
253-
Utils.setUrl({
254-
url: '#!/taxonomy',
255-
mergeBrowserUrl: false,
256-
updateTabState: function() {
257-
return { taxonomyUrl: this.url, stateChanged: false };
258-
},
259-
trigger: true
260-
});
261-
} else {
262-
Utils.setUrl({
263-
url: '#!/tag',
264-
mergeBrowserUrl: false,
265-
updateTabState: function() {
266-
return { tagUrl: this.url, stateChanged: false };
267-
},
268-
trigger: true
269-
});
270-
}
252+
Utils.setUrl({
253+
url: '#!/search',
254+
mergeBrowserUrl: false,
255+
updateTabState: function() {
256+
return { searchUrl: this.url, stateChanged: false };
257+
},
258+
trigger: true
259+
});
271260

272261
console.log('No route:', actions);
273262
}

‎dashboardv2/public/js/templates/business_catalog/SideNavLayoutView_tmpl.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,11 @@
1919
<a href="index.html"><i class="fa fa-globe"></i> Apache Atlas</a>
2020
</li>
2121
<ul class="tabs" style="width: 100%;" role="tablist">
22-
<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>
22+
<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>
23+
<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>
2324
{{#if taxonomy}}
24-
<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>
25+
<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>
2526
{{/if}}
26-
<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>
2727
</ul>
2828
</ul>
2929
<div class="tab-content">

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

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!--
2+
* Licensed to the Apache Software Foundation (ASF) under one or more
3+
* contributor license agreements. See the NOTICE file distributed with
4+
* this work for additional information regarding copyright ownership.
5+
* The ASF licenses this file to You under the Apache License, Version 2.0
6+
* (the "License"); you may not use this file except in compliance with
7+
* the License. You may obtain a copy of the License at
8+
*
9+
* http://www.apache.org/licenses/LICENSE-2.0
10+
*
11+
* Unless required by applicable law or agreed to in writing, software
12+
* distributed under the License is distributed on an "AS IS" BASIS,
13+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
* See the License for the specific language governing permissions and
15+
* limitations under the License.
16+
-->
17+
<div class="">
18+
<h4>Use DSL (Doamin Specific Language) to build queries</h4>
19+
<ul>
20+
<li><b>Entity Name</b></li>
21+
<li>name="string"</li>
22+
</ul>
23+
<ul>
24+
<li><b>Joining queries</b></li>
25+
<li>name="sales_fact",columns as column select column.name</li>
26+
</ul>
27+
<ul>
28+
<li><b>Query Name</b></li>
29+
<li>Query Example</li>
30+
</ul>
31+
<ul>
32+
<li><b>Query Name</b></li>
33+
<li>Query Example</li>
34+
</ul>
35+
<ul>
36+
<a href="http://atlas.incubator.apache.org/Search.html" target="_blank">More sample queries and use-cases >></a>
37+
</ul>
38+
</div>

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

+20-8
Original file line numberDiff line numberDiff line change
@@ -17,29 +17,41 @@
1717
<div class="row row-margin-bottom">
1818
<div class="col-sm-12" style="margin:15px 0px;">
1919
<div class="row">
20-
<div class="col-md-6">
21-
<span class="pull-left">Text</span>
20+
<div class="col-md-9" style="margin-top: 5px;">
21+
<span class="pull-left">Basic</span>
2222
<label class="switch pull-left">
2323
<input type="checkbox" class="switch-input" name="queryType" value="text" />
2424
<span class="switch-slider"></span>
2525
</label>
26-
<span class="pull-left">DSL</span>
26+
<span class="pull-left">Advanced</span>
27+
<span class="advancedInfo" data-id="advancedInfo"><i class="fa fa-question-circle-o"></i></span>
2728
</div>
28-
<div class="col-md-6">
29+
<div class="col-md-3">
2930
<button type="button" class="btn btn-atlasAction btn-atlas pull-right typeLOV" title="Refresh" data-id="refreshBtn"><i class="fa fa-refresh"></i></button>
3031
</div>
3132
</div>
3233
</div>
3334
<div class="col-sm-12">
3435
<div class="form-group">
35-
<div class="typeLOV">
36-
<select data-id="typeLOV"></select>
36+
<div class="srchType">
37+
<span class="srchTitle">Search By Type</span>
38+
<div class="typeLOV">
39+
<select data-id="typeLOV"></select>
40+
</div>
3741
</div>
38-
<div class="searchInputClick">
39-
<input type="text" class="form-control" data-id="searchInput" placeholder="Search using a query string: e.g. sales_fact" style="margin-top: 5px;">
42+
<div class="srchType tagBox">
43+
<span class="srchTitle">Search By Tag</span>
44+
<div class="typeLOV">
45+
<select data-id="tagLOV"></select>
46+
</div>
47+
</div>
48+
<div class="srchType">
49+
<span class="srchTitle">Search By Query</span>
50+
<input type="text" class="form-control" data-id="searchInput" placeholder="Search using a query string: e.g. sales_fact" style="margin: 5px 0px;">
4051
</div>
4152
</div>
4253
<div class="clearAdvanceSearch" data-id="clearSearch">Clear</div>
4354
<button type="button" class="btn btn-atlas advanceSearchBtn" data-id="searchBtn" disabled="disabled">Search</button>
4455
</div>
4556
<div id="searchResult"></div>
57+
</div>

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,9 @@
3434
<div id="r_searchResultTableLayoutView">
3535
{{#if entityCreate}}
3636
<div class="entityLink" style="display:none">
37-
<h1><b>Atlas Search</b></h1>
37+
<h1><b>{{searchType}}</b></h1>
3838
<p class="entityLink">Search Atlas for existing entities or
39-
<a href="javascript:void(0)" data-id='createEntity'> create new entity </a><i class="fa fa-question-circle" aria-hidden="true"></i>
39+
<a href="javascript:void(0)" data-id='createEntity'> create new entity </a>
4040
</p>
4141
</div>
4242
{{/if}}

‎dashboardv2/public/js/utils/Enums.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ define(['require'], function(require) {
4444

4545
Enums.searchUrlType = {
4646
DSL: 'dsl',
47-
FULLTEXT: 'fulltext'
47+
FULLTEXT: 'basic'
4848
}
4949

5050
return Enums;

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -111,13 +111,13 @@ define(['require',
111111
});
112112
},
113113
selectTab: function() {
114-
if (Utils.getUrlState.isTagTab() || (Utils.getUrlState.isInitial() && !Globals.taxonomy)) {
114+
if (Utils.getUrlState.isTagTab()) {
115115
this.$('.tabs').find('li a[aria-controls="tab-tag"]').parents('li').addClass('active').siblings().removeClass('active');
116116
this.$('.tab-content').find('div#tab-tag').addClass('active').siblings().removeClass('active');
117-
} else if (Utils.getUrlState.isTaxonomyTab() || (Utils.getUrlState.isInitial() && Globals.taxonomy)) {
117+
} else if (Utils.getUrlState.isTaxonomyTab()) {
118118
this.$('.tabs').find('li a[aria-controls="tab-taxonomy"]').parents('li').addClass('active').siblings().removeClass('active');
119119
this.$('.tab-content').find('div#tab-taxonomy').addClass('active').siblings().removeClass('active');
120-
} else if (Utils.getUrlState.isSearchTab() || (Utils.getUrlState.isDetailPage())) {
120+
} else if (Utils.getUrlState.isSearchTab() || (Utils.getUrlState.isDetailPage()) || Utils.getUrlState.isInitial()) {
121121
this.$('.tabs').find('li a[aria-controls="tab-search"]').parents('li').addClass('active').siblings().removeClass('active');
122122
this.$('.tab-content').find('div#tab-search').addClass('active').siblings().removeClass('active');
123123
}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -338,7 +338,7 @@ define(['require',
338338
var dataURL = this.$('.taxonomyTree').find('li[data-id="Parent"]').find("a").data('href');
339339
if (dataURL) {
340340
this.url = dataURL;
341-
if (this.viewBased) {
341+
if (this.viewBased && Utils.getUrlState.isTaxonomyTab()) {
342342
Utils.setUrl({
343343
url: "#!/taxonomy/detailCatalog" + dataURL,
344344
mergeBrowserUrl: false,

0 commit comments

Comments
 (0)