Skip to content

A
atlas
Commit a77d1ab5 by Shwetha GS
Options

ATLAS-500 UI: Search Default (sanjayp via shwethags)

parent b6fb1f1a
Showing with 118 additions and 42 deletions
dashboard/public/css/common.css
......@@ -163,6 +163,31 @@ Search Bar design
padding: 14px 20px;
}
.main-search .search-type-large {
width: 95px!important;
}
.main-search select {
height: 50px!important;
padding-right: 0px;
margin-right: 0px;
width: 83px;
font-weight:bold;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor:pointer;
background: url('../img/select_arrow_img.png') no-repeat;
background-size: 22px 22px;
background-position: 54px 13px!important;
}
.search-type-large .form-control:focus {
border-color: #ccc;
box-shadow: none;
outline: 0 none;
}
/*=======================================================================================
Tags on Home Page design
=======================================================================================*/
......@@ -299,7 +324,7 @@ Tags on Home Page design
}
.tabsearch-result {
max-width: 500px;
max-width: 93%;
display: list-item;
overflow: hidden;
text-overflow: ellipsis;
......@@ -364,4 +389,4 @@ Tags on Home Page design
.see-more {
font-weight: bold;
font-size: 16px;
}
\ No newline at end of file
}
\ No newline at end of file
dashboard/public/js/config.js
......@@ -32,5 +32,17 @@ angular.module('dgc').constant('atlasConfig', {
TRAITS_LIST: apiHost + 'types?type=TRAIT',
SEARCH: apiHost + 'discovery/search/',
CREATE_TRAIT: apiHost + 'types'
},
SEARCH_TYPE: {
dsl: {
value: 'dsl',
displayText: 'DSL',
placeholder: 'Search using a DSL query: e.g. DataSet where name="sales_fact"'
},
fulltext: {
value: 'fulltext',
displayText: 'Text',
placeholder: 'Search using a query string: e.g. sales_fact'
}
}
});
dashboard/public/modules/navigation/navigationController.js
......@@ -27,6 +27,8 @@ angular.module('dgc.navigation').controller('navigationController', ['$scope', '
};
$scope.dslQueryVal = atlasConfig.SEARCH_TYPE.dsl.value;
$scope.$on('load_Traits', function() {
$scope.leftnav = navigationResource.get();
});
......@@ -43,12 +45,12 @@ angular.module('dgc.navigation').controller('navigationController', ['$scope', '
$scope.intialCount = limitIntialCount;
};
$scope.showMore = function(){
$scope.showMore = function() {
$scope.intialCount += limitIntialCount;
};
$scope.filterTags = function(){
$scope.intialCount = limitIntialCount;
$scope.filterTags = function() {
$scope.intialCount = limitIntialCount;
};
}
]);
dashboard/public/modules/navigation/views/navigation.html
......@@ -16,20 +16,20 @@
~ limitations under the License.
-->
<div data-ng-controller="navigationController" class="main-tags leftNavigation">
<div data-ng-controller="navigationController" class="main-tags leftNavigation">
<div>
<h4 class="pull-left">Tags</h4>
<a href ng-click="refreshTags()" class="pull-right">
<h4 class="pull-left">Tags</h4>
<a href ng-click="refreshTags()" class="pull-right">
<img src="../img/refresh.png" style="margin: 5px;" title="Refresh Tags" >
</a>
<form ng-submit="filterTags()">
<input type="text" class="filter-tag" placeholder="Search for Tags…" ng-model="tagFilter" ng-keydown="filterTags()"> </input>
<input type="submit" id="submit" value="Submit" class="hide" />
</form>
</div>
</br>
</div>
</br>
<div class="list-group">
<a ng-repeat="nav in filtered = (leftnav | filter:tagFilter | limitTo:intialCount + 1)" ui-sref="search({ query: nav })" class="list-group-item limitSize" title="{{nav}}"><i class="fa fa-tag"></i> {{nav}} </a>
<a ng-repeat="nav in filtered = (leftnav | filter:tagFilter | limitTo:intialCount + 1)" ui-sref="search({ query: nav , searchType: dslQueryVal})" class="list-group-item limitSize" title="{{nav}}"><i class="fa fa-tag"></i> {{nav}} </a>
<a ng-click="showMore()" class="see-more" ng-class="filtered.length > intialCount ? 'show' : 'hide'"> Load more ... </a>
</div>
</div>
\ No newline at end of file
dashboard/public/modules/search/searchController.js
......@@ -17,8 +17,8 @@
*/
'use strict';
angular.module('dgc.search').controller('searchController', ['$scope', '$location', '$http', '$state', '$stateParams', 'lodash', 'searchResource', 'detailsResource', 'notificationService',
function($scope, $location, $http, $state, $stateParams, _, searchResource, detailsResource, notificationService) {
angular.module('dgc.search').controller('searchController', ['$scope', '$location', '$http', '$state', '$stateParams', 'lodash', 'searchResource', 'detailsResource', 'notificationService', 'atlasConfig',
function($scope, $location, $http, $state, $stateParams, _, searchResource, detailsResource, notificationService, atlasConfig) {
$scope.results = [];
$scope.resultCount = 0;
......@@ -32,6 +32,7 @@ angular.module('dgc.search').controller('searchController', ['$scope', '$locatio
$scope.isString = angular.isString;
$scope.isArray = angular.isArray;
$scope.isNumber = angular.isNumber;
$scope.searchTypes = atlasConfig.SEARCH_TYPE;
$scope.mapAttr = ['guid', 'typeName', 'owner', 'description', 'createTime', '$traits$', '$id$', 'comment', 'dataType'];
$scope.setPage = function(pageNo) {
......@@ -89,14 +90,15 @@ angular.module('dgc.search').controller('searchController', ['$scope', '$locatio
});
};
$scope.search = function(query) {
$scope.search = function(query, type) {
$scope.results = [];
notificationService.reset();
$scope.limit = 4;
$scope.searchMessage = 'load-gif';
$scope.$parent.query = query;
searchResource.search({
query: query
query: query,
searchType: type
}, function searchSuccess(response) {
$scope.resultCount = response.count;
$scope.results = response.results;
......@@ -106,6 +108,11 @@ angular.module('dgc.search').controller('searchController', ['$scope', '$locatio
$scope.transformedResults = {};
$scope.dataTransitioned = false;
$scope.showText = "Text";
if ($scope.searchTypeModel === $scope.searchTypes.dsl.value) {
$scope.showText = "DSL";
}
if ($scope.results) {
if (response.dataType) {
$scope.resultType = response.dataType.typeName;
......@@ -114,9 +121,9 @@ angular.module('dgc.search').controller('searchController', ['$scope', '$locatio
} else if (typeof response.dataType === 'undefined') {
$scope.resultType = "full text";
}
$scope.searchMessage = $scope.resultCount + ' results matching your search query ' + $scope.query + ' were found';
$scope.searchMessage = $scope.resultCount + ' results matching your ' + $scope.showText + ' search query ' + $scope.query + ' were found';
} else {
$scope.searchMessage = '0 results matching your search query ' + $scope.query + ' were found';
$scope.searchMessage = '0 results matching your ' + $scope.showText + ' search query ' + $scope.query + ' were found';
}
if (response.dataType && response.dataType.typeName && response.dataType.typeName.toLowerCase().indexOf('table') === -1) {
......@@ -157,8 +164,16 @@ angular.module('dgc.search').controller('searchController', ['$scope', '$locatio
}
});
}, function searchError(err) {
$scope.searchMessage = '0 results matching your search query ' + $scope.query + ' were found';
notificationService.error('Error occurred during executing search query, error status code = ' + err.status + ', status text = ' + err.statusText, false);
if (($scope.searchTypeModel === $scope.searchTypes.dsl.value) && err.status === 400) {
$scope.searchMessageDsl = true;
$scope.searchMessage = false;
} else {
$scope.searchMessageDsl = false;
$scope.searchMessage = true;
$scope.searchMessage = '0 results matching your ' + $scope.showText + ' search query ' + $scope.query + ' were found';
notificationService.error('Error occurred during executing search query, error status code = ' + err.status + ', status text = ' + err.statusText, false);
}
});
$state.go('search', {
query: query
......@@ -281,11 +296,22 @@ angular.module('dgc.search').controller('searchController', ['$scope', '$locatio
};
$scope.searchQuery = $location.search();
$scope.searchTypeModel = $stateParams.searchType;
$scope.query = ($location.search()).query;
if ($scope.query) {
$scope.search($scope.query);
$stateParams.searchType = ($location.search()).searchType;
if ($scope.query && $stateParams.searchType) {
$scope.search($scope.query, $stateParams.searchType);
}
$scope.searchTypeChanged = function() {
if ($scope.query) {
$state.go('search', {
query: $scope.query,
searchType: $scope.searchTypeModel
}, {
location: 'replace'
});
}
};
}
]);
dashboard/public/modules/search/searchResource.js
......@@ -19,7 +19,7 @@
'use strict';
angular.module('dgc.search').factory('searchResource', ['$resource', 'atlasConfig', function($resource, atlasConfig) {
return $resource(atlasConfig.API_ENDPOINTS.SEARCH, {}, {
return $resource(atlasConfig.API_ENDPOINTS.SEARCH+':searchType', {}, {
search: {
'method': 'GET',
'responseType': 'json',
......
dashboard/public/modules/search/searchRoutes.js
......@@ -21,7 +21,8 @@
angular.module('dgc.search').config(['$stateProvider',
function($stateProvider) {
$stateProvider.state('search', {
url: '/search?query',
url: '/search?query&searchType',
params: {searchType: 'fulltext'},
templateUrl: '/modules/search/views/search.html',
controller: 'searchController'
});
......
dashboard/public/modules/search/views/search.html
......@@ -17,15 +17,22 @@
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->
<div class="col-lg-10 paddingR0">
<div class="col-lg-10 paddingR0" xmlns="http://www.w3.org/1999/html">
<div class="">
<div class="row main-search">
<form class="col-lg-12" name="form" novalidate>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search: Table, DB, Column" data-ng-model="query" required/>
<div class="col-lg-2 search-type-large">
<select class="form-control" ng-model="searchTypeModel" ng-change="searchTypeChanged()">
<option ng-selected = "{{searchTypeModel === searchTypes.dsl.value}}" value={{searchTypes.dsl.value}}>{{ searchTypes.dsl.displayText }}</option>
<option ng-selected = "{{searchTypeModel === searchTypes.fulltext.value}}" value={{searchTypes.fulltext.value}}>{{ searchTypes.fulltext.displayText }}</option>
</select>
</div>
<div class="input-group col-lg-10">
<input type="text" class="form-control" placeholder={{searchTypes[searchTypeModel].placeholder}} data-ng-model="query" required>
</input>
<span class="input-group-btn">
<button class="btn btn-success" type="submit" data-ng-disabled="form.$invalid" ui-sref="search({ query: query })">
<i class="glyphicon glyphicon-search white "></i>
<button class="btn btn-success" type="submit" data-ng-disabled="form.$invalid" ui-sref="search({ query: query, searchType: searchTypeModel })">
<i class="glyphicon glyphicon-search white "></i>
</button>
</span>
</div>
......@@ -35,7 +42,8 @@
<div ng-switch on="searchMessage">
<div ng-switch-when="load-gif" class="search-spinner"><img src="../img/spinner.gif" align="middle" /></div>
<div ng-switch-default>
<h4 ng-show="searchMessage" title="{{searchMessage}}" class="tabsearch-result">{{searchMessage}}</h4>
<h5 ng-show="searchMessage" title="{{searchMessage}}" class="tabsearch-result">{{searchMessage}}</h5>
<h5 ng-show="searchMessageDsl" title="{{searchMessage}}" class="tabsearch-result">Invalid DSL Syntax, Click<a ui-sref="search({ query: query, searchType: searchTypes.fulltext.value })"> here</a> to execute as a Text search.</h5>
</div>
</div>
<div class="panel panel-default" ng-show='resultCount > 0'>
......@@ -62,7 +70,7 @@
<td>
{{result.description}}
</td>
<td>
<td>
<span ng-repeat="(key, value) in filterSearchResults(result)">
<span ng-if="key =='owner'">{{value}}</span>
</span>
......@@ -74,21 +82,21 @@
</tr>
<tr ng-if="isTag(resultType)" ng-repeat="result in filteredResults track by $index">
<td data-ng-if="isObject(result) && !isString(result) && res != 'id' && res != 'guid'" data-ng-repeat="res in transformedProperties track by $index">
<a data-ng-if="res == 'guid' && !result['name']" data-ui-sref="details({id:result[res]})">{{result[res]}}</a>
<span data-ng-if="res != '$traits$' && res != 'Tools' && res != 'guid' && res.toLowerCase().indexOf('name') == -1 && res.toLowerCase().indexOf('time') == -1">{{result[res]}}</span>
<span data-ng-if="res.toLowerCase().indexOf('time') != -1 && isNumber(result[res])">{{result[res] * 1000 | date:'yyyy-MM-dd HH:mm:ss'}} UTC</span>
<span data-ng-if="res != '$traits$' && res != 'Tools' && res != 'guid' && res.toLowerCase().indexOf('name') == -1 && res.toLowerCase().indexOf('time') == -1">{{result[res]}}</span>
<span data-ng-if="res.toLowerCase().indexOf('time') != -1 && isNumber(result[res])">{{result[res] * 1000 | date:'yyyy-MM-dd HH:mm:ss'}} UTC</span>
<a data-ng-if="res.toLowerCase().indexOf('name') != -1 && (result['id'] || result['guid']) " data-ui-sref="details({id:result['id']|| result['guid']})">{{result[res]}}</a>
<span data-ng-if="res.toLowerCase().indexOf('name') != -1 && !result['id'] && !result['guid']">{{result[res]}}</span>
<span data-ng-if="res.toLowerCase().indexOf('name') != -1 && !result['id'] && !result['guid']">{{result[res]}}</span>
<div data-ng-if="res == '$traits$'" class="word-break tags" id="{{result['id']|| result['guid']}}">
<a class="tab-search-tags" ng-repeat="(key, value) in result[res]" data-ui-sref="search({query: key})" title="{{key}}">{{key}}<span> </span></a>
</div>
<span data-ng-if="res == 'Tools'" class="add-tag"> <img ng-src="img/addTag.png" tooltip="Add Tag" ng-click="openAddTagHome(result['id']|| result['guid'])"> </span>
</td>
<td data-ng-if="isString(result) || result == false || result == true">
......
release-log.txt
......@@ -3,6 +3,7 @@ Apache Atlas Release Notes
--trunk - unreleased
INCOMPATIBLE CHANGES:
ATLAS-500 UI: Search Default (sanjayp via shwethags)
ATLAS-483 Remove client.properties (tbeerbower via shwethags)
ATLAS-349 SSL - Atlas SSL connection has weak/unsafe Ciphers suites (ndjouhr via shwethags)
ATLAS-409 Atlas will not import avro tables with schema read from a file (dossett@gmail.com via shwethags)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment