Repository: incubator-atlas Updated Branches: refs/heads/master bd47628fe -> 21b403bb7
ATLAS-287: UI: GUID on table details page Signed-off-by: Suma Shivaprasad <[email protected]> Project: http://git-wip-us.apache.org/repos/asf/incubator-atlas/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-atlas/commit/21b403bb Tree: http://git-wip-us.apache.org/repos/asf/incubator-atlas/tree/21b403bb Diff: http://git-wip-us.apache.org/repos/asf/incubator-atlas/diff/21b403bb Branch: refs/heads/master Commit: 21b403bb72ceaaa11ad1d46b103d13de18e4ab80 Parents: bd47628 Author: Anilsg <[email protected]> Authored: Sat Jan 30 09:28:18 2016 +0530 Committer: Suma Shivaprasad <[email protected]> Committed: Thu Feb 4 13:46:22 2016 -0800 ---------------------------------------------------------------------- .../public/modules/details/detailsController.js | 50 ++++- .../public/modules/details/views/details.html | 190 +++++++++---------- .../public/modules/search/searchController.js | 76 ++++++-- .../public/modules/search/views/search.html | 10 +- 4 files changed, 201 insertions(+), 125 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/21b403bb/dashboard/public/modules/details/detailsController.js ---------------------------------------------------------------------- diff --git a/dashboard/public/modules/details/detailsController.js b/dashboard/public/modules/details/detailsController.js index cc6bb2d..606b971 100644 --- a/dashboard/public/modules/details/detailsController.js +++ b/dashboard/public/modules/details/detailsController.js @@ -23,16 +23,49 @@ angular.module('dgc.details').controller('DetailsController', ['$window', '$scop $scope.tableName = false; $scope.isTable = false; $scope.isLineage = false; - + DetailsResource.get({ id: $stateParams.id }, function(data) { - $scope.details = data; + $scope.tableName = data.values.name; $scope.onActivate('io'); $scope.isTags = (typeof data.traits !== 'undefined' && typeof data.traits === 'object') ? true : false; + if (data && data.values) { + var getName = function(aaa, attr) { + DetailsResource.get({ + id: attr.id + }, function(data1) { + if (data1.values && data1.values.name) { + attr.name = data1.values.name; + } + }); + }; + + for (var aaa in data.values) { + if (typeof data.values[aaa] === 'object' && data.values[aaa] !== null && data.values[aaa].id && typeof data.values[aaa].id === 'string') { + data.values[aaa].name = data.values[aaa].id; + getName(aaa, data.values[aaa]); + } + if (typeof data.values[aaa] === 'object' && data.values[aaa] !== null && data.values[aaa].id && typeof data.values[aaa].id === 'object') { + data.values[aaa].id.name = data.values[aaa].id.id; + getName(aaa, data.values[aaa].id); + } + if (typeof data.values[aaa] === 'object' && angular.isArray(data.values[aaa]) === true) { + var arrObj = data.values[aaa]; + for(var a=0; a < arrObj.length; a++){ + if(typeof arrObj[a].id === 'string'){ + arrObj[a].name = arrObj[a].id; + getName(arrObj[a], arrObj[a]); + } + } + } + } + } + + $scope.details = data; if (data && data.values && data.values.name && data.values.name !== "") { SchemaResource.get({ tableName: data.values.name @@ -42,15 +75,15 @@ angular.module('dgc.details').controller('DetailsController', ['$window', '$scop $scope.isSchema = (data1.results.rows && data1.results.rows.length > 0) ? true : false; for (var t = 0; t < data1.results.rows.length; t++) { if (data1.results.rows[t].$id$) { - $scope.isTraitId = true; + $scope.isTraitId = true; } if (data1.results.rows[t].type) { - $scope.isHiveSchema = true; - } - if($scope.isTraitId && $scope.isHiveSchema){ + $scope.isHiveSchema = true; + } + if ($scope.isTraitId && $scope.isHiveSchema) { break; } - } + } } }); } @@ -68,7 +101,7 @@ angular.module('dgc.details').controller('DetailsController', ['$window', '$scop $scope.$broadcast('render-lineage', { type: tabname, tableName: $scope.tableName, - guid : $stateParams.id + guid: $stateParams.id }); }; @@ -78,7 +111,6 @@ angular.module('dgc.details').controller('DetailsController', ['$window', '$scop }); }; - $scope.goDetails = function(id) { $state.go("details", { id: id http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/21b403bb/dashboard/public/modules/details/views/details.html ---------------------------------------------------------------------- diff --git a/dashboard/public/modules/details/views/details.html b/dashboard/public/modules/details/views/details.html index 37fcaad..93208fa 100644 --- a/dashboard/public/modules/details/views/details.html +++ b/dashboard/public/modules/details/views/details.html @@ -1,101 +1,93 @@ - - <!-- - ~ 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. - --> + ~ 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 detailsPage" data-ng-controller="DetailsController"> - <div class="col-lg-12 padding0"> - <ul class="breadcrumb"> - <li><button class="btn btn-link" data-ng-click="goBack()"><i class="fa fa-arrow-left"></i> Back To Result</button> </li> - </ul> - </div> - <div role="tabpanel" class="col-lg-12 padding0"> - <div class="mB20"> - <h4 ng-if="details.values && details.values.name && details.values.name != ''"> - <b>Name:</b> <span class="black">{{details.values.name}}</span></h2> - <h4 ng-if="details.values && details.values.description && details.values.description != ''"><b>Description:</b> <span class="black">{{details.values.description}}</span></h4> - <h4 data-disable="!tableName" data-select="onActivate('io')" id="lineageGraph" class="hide"> - <span class="lineage">Lineage</span> - <ng-include data-table-type="io" src="'/modules/lineage/views/lineage_io.html'"/> - </h4> - </div> - <tabset> - <tab heading="Details"> - <table class="table table-bordered"> - <thead> - <tr> - <th>Key</th> - <th>Value</th> - </tr> - </thead> - <tbody> - <tr data-ng-repeat="(key,value) in details.values" ng-if="value && !(key==='columns') && !(key==='name') && !(key==='description')"> - <td>{{key}}</td> - <td data-ng-if="isObject(value) && isString(value.id)" class="pointer"> - <a data-ui-sref="details({id:value.id})">{{ value.id }}</a> - </td> - <td data-ng-if="isObject(value) && isObject(value.id) && isString(value.id.id)" class="pointer"> <a data-ui-sref="details({id:value.id.id})">{{ value.id.id }}</a> - </td> - <td data-ng-if="isObject(value) && !isArray(value) && !isString(value.id) && !isObject(value.id)"> - <span data-ng-repeat="(key2, value2) in value"> {{ key2 }} : {{ value2 }}<span ng-if="!$last">,</span></span> - </td> - <td data-ng-if="isArray(value) && !isString(value.id) && !isObject(value.id)"> - <div data-ng-repeat="(key2, value2) in value"> - <a class=" pointer" data-ng-if="isObject(value2) && isString(value2.id)" data-ui-sref="details({id:value2.id})">{{ value2.id }}</a> - - <div class="row pdLft15px" data-ng-repeat="(key1, value1) in value2"> - - <span ng-if="isObject(value1)"> - <a class=" pointer" data-ng-if="isString(value1.id)" data-ui-sref="details({id:value1.id})">{{ value1.id }}</a> - - - </span> - - - - </div> - </div> - </td> - <td data-ng-if="isArray(value) && !isObject(value)" > - <div class="row" data-ng-repeat="(key1, value1) in value" ng-if="value1"> - <div data-ng-if="isObject(value1)" data-ng-repeat="(key2, value2) in value1" > - <a data-ng-if="isString(value2) && key2 == 'id'" class="pointer pdLft15px" data-ui-sref="details({id:value2})">{{ value2 }}</a> - </div> - </div> - </td> - <td data-ng-if="!isArray(value) && isObject(value[0]) && isString(value[0].id) && key=='inputTables'" data-ng-click="goDetails(value[0].id)" class="pointer"> - <div class="row" data-ng-repeat="(key1, value1) in value[0]" ng-if="value1"> - <div class="col-md-6" data-ng-if="!isString(value1)" data-ng-repeat="(key2, value2) in value1 track by $index"></div> - <div data-ng-if="isString(value2)" data-ng-repeat="(key3, value3) in value2"> {{key3}}: {{value3}}</div> - <div class="col-md-6" data-ng-if="isString(value1)"> {{key1}} : {{value1 | date:'medium'}} UTC</div> - </div> - </td> - <td data-ng-if="isNumber(value)">{{value * 1000 | date:'yyyy-MM-dd HH:mm:ss'}} UTC</td> - <td data-ng-if="isString(value)">{{value}}</td> - </tr> - </tbody> - </table> - </tab> - <tab data-heading="Schema" data-ng-if="isSchema"> - <ng-include src="'/modules/details/views/schema.html'"/> - </tab> - <tab data-heading="Tags" data-ng-if="isTags"> - <ng-include src="'/modules/tags/instance/views/tags.html'"/> - </tab> - </tabset> - </div> -</div> \ No newline at end of file + <div class="col-lg-12 padding0"> + <ul class="breadcrumb"> + <li><button class="btn btn-link" data-ng-click="goBack()"><i class="fa fa-arrow-left"></i> Back To Result</button> </li> + </ul> + </div> + <div role="tabpanel" class="col-lg-12 padding0"> + <div class="mB20"> + <h4 ng-if="details.values && details.values.name && details.values.name != ''"> + <b>Name:</b> <span class="black">{{details.values.name}}</span></h2> + <h4 ng-if="details.values && details.values.description && details.values.description != ''"><b>Description:</b> <span class="black">{{details.values.description}}</span></h4> + <h4 data-disable="!tableName" data-select="onActivate('io')" id="lineageGraph" class="hide"> + <span class="lineage">Lineage</span> + <ng-include data-table-type="io" src="'/modules/lineage/views/lineage_io.html'"/> + </h4> + </div> + <tabset> + <tab heading="Details"> + <table class="table table-bordered"> + <thead> + <tr> + <th>Key</th> + <th>Value</th> + </tr> + </thead> + <tbody> + <tr data-ng-repeat="(key,value) in details.values" ng-if="value && !(key==='columns') && !(key==='name') && !(key==='description')"> + <td>{{key}}</td> + <td data-ng-if="isObject(value) && isString(value.id)" class="pointer"> + <a data-ui-sref="details({id:value.id})">{{ value.name }}</a> + </td> + <td data-ng-if="isObject(value) && isObject(value.id) && isString(value.id.id)" class="pointer"> <a data-ui-sref="details({id:value.id.id})">{{ value.id.name }}</a> + </td> + <td data-ng-if="isObject(value) && !isArray(value) && !isString(value.id) && !isObject(value.id)"> + <span data-ng-repeat="(key2, value2) in value"> {{ key2 }} : {{ value2 }}<span ng-if="!$last">,</span></span> + </td> + <td data-ng-if="isArray(value) && !isString(value.id) && !isObject(value.id)"> + <div data-ng-repeat="(key2, value2) in value"> + <a class=" pointer" data-ng-if="isObject(value2) && isString(value2.id)" data-ui-sref="details({id:value2.id})">{{ value2.name }}<span ng-if="!$last">,</span></a> + <div class="row pdLft15px" data-ng-repeat="(key1, value1) in value2"> + <span ng-if="isObject(value1)"> + <a class=" pointer" data-ng-if="isString(value1.id)" data-ui-sref="details({id:value1.id})">{{ value1.id }}</a> + </span> + </div> + </div> + </td> + <td data-ng-if="isArray(value) && !isObject(value)" > + <div class="row" data-ng-repeat="(key1, value1) in value" ng-if="value1"> + <div data-ng-if="isObject(value1)" data-ng-repeat="(key2, value2) in value1" > + <a data-ng-if="isString(value2) && key2 == 'id'" class="pointer pdLft15px" data-ui-sref="details({id:value2})">{{ value2 }}</a> + </div> + </div> + </td> + <td data-ng-if="!isArray(value) && isObject(value[0]) && isString(value[0].id) && key=='inputTables'" data-ng-click="goDetails(value[0].id)" class="pointer"> + <div class="row" data-ng-repeat="(key1, value1) in value[0]" ng-if="value1"> + <div class="col-md-6" data-ng-if="!isString(value1)" data-ng-repeat="(key2, value2) in value1 track by $index"></div> + <div data-ng-if="isString(value2)" data-ng-repeat="(key3, value3) in value2"> {{key3}}: {{value3}}</div> + <div class="col-md-6" data-ng-if="isString(value1)"> {{key1}} : {{value1 | date:'medium'}} UTC</div> + </div> + </td> + <td data-ng-if="isNumber(value)">{{value | date:'yyyy-MM-dd HH:mm:ss'}} UTC</td> + <td data-ng-if="isString(value)">{{value}}</td> + </tr> + </tbody> + </table> + </tab> + <tab data-heading="Schema" data-ng-if="isSchema"> + <ng-include src="'/modules/details/views/schema.html'"/> + </tab> + <tab data-heading="Tags" data-ng-if="isTags"> + <ng-include src="'/modules/tags/instance/views/tags.html'"/> + </tab> + </tabset> + </div> +</div> + http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/21b403bb/dashboard/public/modules/search/searchController.js ---------------------------------------------------------------------- diff --git a/dashboard/public/modules/search/searchController.js b/dashboard/public/modules/search/searchController.js index c7d5728..32744a4 100644 --- a/dashboard/public/modules/search/searchController.js +++ b/dashboard/public/modules/search/searchController.js @@ -37,6 +37,58 @@ angular.module('dgc.search').controller('SearchController', ['$scope', '$locatio $scope.setPage = function(pageNo) { $scope.currentPage = pageNo; }; + + $scope.initalPage = function() { + var begin = (($scope.currentPage - 1) * $scope.itemsPerPage), + end = begin + $scope.itemsPerPage, + currentRowData = [], + res = [], + count = 0, + firstRowId = 0; + + if ($scope.transformedResults && $scope.transformedResults.length > 0) { + currentRowData = $scope.transformedResults.slice(begin, end); + } + + var getName = function(gid, obj) { + DetailsResource.get({ + id: gid + }, function(data) { + if (data.values && data.values.name) { + obj.name = data.values.name; + } else { + obj.name = gid; + } + res.push(obj); + count++; + + $scope.filteredResults = res; + if (!$scope.transformedProperties && firstRowId === gid) { + $scope.transformedProperties = $scope.filterProperties(); + } + }); + }; + + angular.forEach(currentRowData, function(value) { + var objVal = value; + + if (objVal.guid && !objVal.name) { + if (!firstRowId) { + firstRowId = objVal.guid; + } + getName(objVal.guid, objVal); + } else { + res.push(objVal); + count++; + + $scope.filteredResults = res; + if (!$scope.transformedProperties) { + $scope.transformedProperties = $scope.filterProperties(); + } + } + }); + }; + $scope.search = function(query) { $scope.results = []; NotificationService.reset(); @@ -46,7 +98,6 @@ angular.module('dgc.search').controller('SearchController', ['$scope', '$locatio SearchResource.search({ query: query }, function searchSuccess(response) { - $scope.resultCount = response.count; $scope.results = response.results; $scope.resultRows = ($scope.results && $scope.results.rows) ? $scope.results.rows : $scope.results; @@ -84,13 +135,10 @@ angular.module('dgc.search').controller('SearchController', ['$scope', '$locatio } } $scope.transformedResults = $scope.filterResults(); - $scope.transformedProperties = $scope.filterProperties(); - } else if (typeof response.dataType === 'undefined') { $scope.dataTransitioned = true; $scope.searchKey = ''; $scope.transformedResults = $scope.filterResults(); - $scope.transformedProperties = $scope.filterProperties(); } else if (response.dataType.typeName && response.dataType.typeName.toLowerCase().indexOf('table') !== -1) { $scope.searchKey = "Table"; $scope.transformedResults = $scope.resultRows; @@ -100,11 +148,7 @@ angular.module('dgc.search').controller('SearchController', ['$scope', '$locatio } $scope.$watch('currentPage + itemsPerPage', function() { - var begin = (($scope.currentPage - 1) * $scope.itemsPerPage), - end = begin + $scope.itemsPerPage; - if ($scope.transformedResults) { - $scope.filteredResults = $scope.transformedResults.slice(begin, end); - } + $scope.initalPage(); $scope.pageCount = function() { return Math.ceil($scope.resultCount / $scope.itemsPerPage); }; @@ -125,9 +169,11 @@ angular.module('dgc.search').controller('SearchController', ['$scope', '$locatio $scope.filterResults = function() { var res = []; + if ($scope.searchKey !== '') { angular.forEach($scope.resultRows, function(value) { - res.push(value[$scope.searchKey]); + var objVal = value[$scope.searchKey]; + res.push(objVal); }); } else { angular.forEach($scope.resultRows, function(value) { @@ -161,7 +207,6 @@ angular.module('dgc.search').controller('SearchController', ['$scope', '$locatio if (onlyId) { objVal.guid = objVal.id; } - res.push(objVal); }); } @@ -189,11 +234,13 @@ angular.module('dgc.search').controller('SearchController', ['$scope', '$locatio $scope.doToggle = function($event, el) { this.isCollapsed = !el; }; + $scope.openAddTagHome = function(traitId) { $state.go('addTagHome', { tId: traitId }); }; + $scope.isTag = function(typename) { if (typename.indexOf("__tempQueryResultStruct") > -1 || $scope.searchKey === '') { @@ -202,6 +249,7 @@ angular.module('dgc.search').controller('SearchController', ['$scope', '$locatio return false; } }; + $scope.getResourceDataHome = function(event, id) { DetailsResource.get({ id: id @@ -215,7 +263,9 @@ angular.module('dgc.search').controller('SearchController', ['$scope', '$locatio } }); }; + $scope.$on('refreshResourceData', $scope.getResourceDataHome); + $scope.filterSearchResults = function(items) { var res = {}; var count = 0; @@ -229,10 +279,12 @@ angular.module('dgc.search').controller('SearchController', ['$scope', '$locatio $scope.keyLength = count; return res; }; + $scope.searchQuery = $location.search(); + $scope.query = ($location.search()).query; - if ($scope.query) { + if ($scope.query) { $scope.search($scope.query); } } http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/21b403bb/dashboard/public/modules/search/views/search.html ---------------------------------------------------------------------- diff --git a/dashboard/public/modules/search/views/search.html b/dashboard/public/modules/search/views/search.html index 306fb27..733fe16 100644 --- a/dashboard/public/modules/search/views/search.html +++ b/dashboard/public/modules/search/views/search.html @@ -49,7 +49,7 @@ <th>Tools</th> </tr> <tr ng-if="isTag(resultType) && transformedProperties != undefined" > - <th ng-repeat="prop in transformedProperties" ng-if="prop !== 'id'"> + <th ng-repeat="prop in transformedProperties" ng-if="prop !== 'id' && prop !== 'guid'"> {{(prop != '$traits$') ? prop : 'Tags'}} </th> </tr> @@ -73,17 +73,17 @@ <td class="addTag"><img ng-src="img/addTag.png" tooltip="Add Tag" ng-click="openAddTagHome(result['$id$'].id || result.guid)"></td> </tr> <tr ng-if="isTag(resultType)" ng-repeat="result in filteredResults track by $index"> - <td data-ng-if="isObject(result) && !isString(result) && res != 'id'" data-ng-repeat="res in transformedProperties track by $index" class="wordBreak"> + <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'" data-ui-sref="details({id:result[res]})">{{result[res]}}</a> + <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> - <a data-ng-if="res.toLowerCase().indexOf('name') != -1 && result['id']" data-ui-sref="details({id:result['id']|| result['guid']})">{{result[res]}}</a> + <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[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="wordBreak tags" id="{{result['id']|| result['guid']}}"> <a class="tabsearchanchor" ng-repeat="(key, value) in result[res]" data-ui-sref="search({query: key})" title="{{key}}">{{key}}<span> </span></a>
