Repository: atlas Updated Branches: refs/heads/master 479b9ab1c -> f85ff28e0
ATLAS-2669 : Glossary UI : Attribute UI improved while associating term to the related term. Signed-off-by: Madhan Neethiraj <mad...@apache.org> Project: http://git-wip-us.apache.org/repos/asf/atlas/repo Commit: http://git-wip-us.apache.org/repos/asf/atlas/commit/f85ff28e Tree: http://git-wip-us.apache.org/repos/asf/atlas/tree/f85ff28e Diff: http://git-wip-us.apache.org/repos/asf/atlas/diff/f85ff28e Branch: refs/heads/master Commit: f85ff28e05f92e75be3d663dd1a8c1c75f6130dd Parents: 479b9ab Author: kevalbhatt <kbh...@apache.org> Authored: Thu May 10 20:13:03 2018 +0530 Committer: Madhan Neethiraj <mad...@apache.org> Committed: Thu May 10 09:16:28 2018 -0700 ---------------------------------------------------------------------- dashboardv2/gruntfile.js | 5 +- dashboardv2/package.json | 3 +- dashboardv2/public/css/scss/style.scss | 1 + dashboardv2/public/css/scss/wizard.scss | 341 +++++++++++++++++++ dashboardv2/public/js/main.js | 6 +- .../glossary/AssignTermLayoutView_tmpl.html | 33 +- .../TermRelationAttributeLayoutView_tmpl.html | 13 - .../js/views/glossary/AssignTermLayoutView.js | 44 ++- .../views/glossary/GlossaryDetailLayoutView.js | 31 +- .../js/views/glossary/GlossaryLayoutView.js | 10 +- .../js/views/search/SearchResultLayoutView.js | 3 + 11 files changed, 453 insertions(+), 37 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/atlas/blob/f85ff28e/dashboardv2/gruntfile.js ---------------------------------------------------------------------- diff --git a/dashboardv2/gruntfile.js b/dashboardv2/gruntfile.js index 2bcecfe..1d54a81 100644 --- a/dashboardv2/gruntfile.js +++ b/dashboardv2/gruntfile.js @@ -106,7 +106,8 @@ module.exports = function(grunt) { 'nv.d3.min.js': { 'nvd3/build': 'nvd3' }, 'jquery.sparkline.min.js': { 'jquery-sparkline': 'sparkline' }, 'table-dragger.js': { 'table-dragger/dist': 'table-dragger' }, - 'jstree.min.js': { 'jstree/dist': 'jstree' } + 'jstree.min.js': { 'jstree/dist': 'jstree' }, + 'jquery.steps.min.js': { 'jquery-steps/build': 'jquery-steps' } } }, @@ -143,7 +144,7 @@ module.exports = function(grunt) { }], 'query-builder.default.min.css': { 'jQuery-QueryBuilder/dist/css': 'jQueryQueryBuilder/css' }, 'daterangepicker.css': { 'bootstrap-daterangepicker': 'bootstrap-daterangepicker/css' }, - 'nv.d3.min.css': { 'nvd3/build': 'nvd3/css' }, + 'nv.d3.min.css': { 'nvd3/build': 'nvd3/css' } } }, http://git-wip-us.apache.org/repos/asf/atlas/blob/f85ff28e/dashboardv2/package.json ---------------------------------------------------------------------- diff --git a/dashboardv2/package.json b/dashboardv2/package.json index e543468..7fbd1bf 100644 --- a/dashboardv2/package.json +++ b/dashboardv2/package.json @@ -37,7 +37,8 @@ "jquery-asBreadcrumbs": "0.2.2", "jquery-placeholder": "2.3.1", "jquery-sparkline": "2.4.0", - "jstree": "^3.3.5", + "jquery-steps": "1.1.0", + "jstree": "3.3.5", "moment": "2.21.0", "moment-timezone": "0.5.14", "npm": "^5.8.0", http://git-wip-us.apache.org/repos/asf/atlas/blob/f85ff28e/dashboardv2/public/css/scss/style.scss ---------------------------------------------------------------------- diff --git a/dashboardv2/public/css/scss/style.scss b/dashboardv2/public/css/scss/style.scss index 2b226cd..cd1781b 100644 --- a/dashboardv2/public/css/scss/style.scss +++ b/dashboardv2/public/css/scss/style.scss @@ -32,4 +32,5 @@ @import "search.scss"; @import "profile-table.scss"; @import "glossary.scss"; +@import "wizard.scss"; @import "override.scss"; \ No newline at end of file http://git-wip-us.apache.org/repos/asf/atlas/blob/f85ff28e/dashboardv2/public/css/scss/wizard.scss ---------------------------------------------------------------------- diff --git a/dashboardv2/public/css/scss/wizard.scss b/dashboardv2/public/css/scss/wizard.scss new file mode 100644 index 0000000..6b3ceb4 --- /dev/null +++ b/dashboardv2/public/css/scss/wizard.scss @@ -0,0 +1,341 @@ +/* + * 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. + */ + +$color_scarlet_approx: #ff3111; +$color_pippin_approx: #fbe3e4; +$color_your_pink_approx: #fbc2c4; +$color_falu_red_approx: #8a1f11; + +%wizard_tabcontrol { + display: block; + width: 100%; +} + +%extend_2 { + list-style: none!important; + padding: 0; + margin: 0; +} + +%extend_3 { + display: block; + width: auto; + margin: 0 .5em .5em; + padding: 1em; + text-decoration: none; + position: relative; + border-radius: 5px; +} + +%extend_4 { + background: #f5f5f5; + color: #bbb; + cursor: default; +} + +%extend_5 { + background: $color_keppel_approx; + color: $white; + cursor: default; +} + +%extend_befor_after { + content: " "; + display: block; + width: 0; + height: 0; + border-top: 50px solid transparent; + border-bottom: 50px solid transparent; + position: absolute; + top: 50%; + margin-top: -50px; + left: 100%; +} + +.wizard { + @extend %wizard_tabcontrol; + a { + outline: 0; + } + ul { + @extend %extend_2; + >li { + display: block; + padding: 0; + } + } + > { + .steps { + position: relative; + display: block; + width: 100%; + .current-info { + position: absolute; + left: -999em; + } + .number { + font-size: 1.429em; + } + &>ul { + position: relative; + border: 0; + padding: 0px; + background: #f5f5f5; + border-radius: 0; + list-style: none; + overflow: hidden; + margin-bottom: 10px; + >li { + width: 25%; + float: left; + &:first-child>a { + padding-left: 15px; + } + a { + @extend %extend_3; + &:hover { + cursor: pointer; + } + margin: 0; + border: none; + border-radius: 0; + padding: 10px 0 10px 45px; + &:before { + @extend %extend_befor_after; + border-left: 30px solid #ddd; + margin-left: 1px; + z-index: 1; + } + &:after { + @extend %extend_befor_after; + border-left: 30px solid #f5f5f5; + z-index: 2; + } + } + &.disabled a { + @extend %extend_4; + } + &.current a { + @extend %extend_5; + &:after { + border-left: 30px solid $color_keppel_approx; + } + } + &.done a { + background: #b4e5d9; + color: $white; + &:after { + border-left: 30px solid #b4e5d9; + } + } + &.error a { + background: $color_scarlet_approx; + color: $white; + &:after { + border-left: 30px solid $color_scarlet_approx; + } + } + } + } + } + .content { + background: #f5f5f5; + display: block; + margin: .5em; + position: relative; + width: 100%; //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 5px; + > { + .title { + display: none; + } + .body { + float: left; + width: 100%; + height: 95%; + padding: 2.5%; + >ul { + list-style: disc!important; + >li { + display: list-item; + } + } + } + } + } + .actions { + position: relative; + display: block; + text-align: right; + width: 100%; + ul[role="menu"] { + li+li { + margin-left: 5px; + } + li.disabled { + a { + opacity: .65; + } + } + a { + padding: 10px 20px; + background-color: $color_keppel_approx; + color: #fff; + margin-bottom: 10px; + border: 1px $color_keppel_approx solid; + border-radius: 4px; + transition: all .3s ease; + margin: 2px; + } + a[href="#cancel"] { + padding: 10px 20px; + background-color: transparent; + color: $color_keppel_approx; + margin-bottom: 10px; + border: 1px $color_keppel_approx solid; + border-radius: 4px; + transition: all .3s ease; + margin: 2px; + } + } + >ul { + display: inline-block; + text-align: right; + >li { + float: left; + margin: 0 .5em; + } + } + } + .loading .spinner {} + } + &.vertical> { + .steps { + display: inline; + float: left; + width: 30%; + >ul>li { + float: none; + width: 100%; + } + } + .content { + display: inline; + float: left; + margin: 0 2.5% .5em 2.5%; + width: 65%; + } + .actions { + display: inline; + float: right; + margin: 0 2.5%; + width: 95%; + >ul>li { + margin: 0 0 0 1em; + } + } + } +} + +.tabcontrol { + @extend %wizard_tabcontrol; + a { + outline: 0; + } + ul { + @extend %extend_2; + >li { + display: block; + padding: 0; + } + } + > { + .steps .current-info { + position: absolute; + left: -999em; + } + .content>.title { + display: none; + } + } +} + +@media(max-width: 600px) { + .wizard { + >.steps { + a { + margin-top: .5em; + &:hover { + margin-top: .5em; + } + &:active { + margin-top: .5em; + } + } + >ul>li { + width: 50%; + } + } + &.vertical> { + .steps { + display: block; + float: none; + width: 100%; + } + .actions { + display: block; + float: none; + width: 100%; + } + .content { + display: block; + float: none; + margin: 0 .5em .5em; + width: auto; + } + } + } +} + +@media(max-width: 480px) { + .wizard>.steps>ul>li { + width: 100%; + } +} + +.wizard-modal { + .modal-body { + overflow: hidden; + max-height: none; + } + .wizard { + position: relative; + width: 100%; + height: 100%; + .content { + max-height: 400px; + overflow: auto; + margin: 0px 0px 15px 0px; + } + .actions { + >ul>li { + margin: 0px; + } + } + } +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/atlas/blob/f85ff28e/dashboardv2/public/js/main.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/main.js b/dashboardv2/public/js/main.js index 6c72cca..510c48f 100644 --- a/dashboardv2/public/js/main.js +++ b/dashboardv2/public/js/main.js @@ -129,6 +129,9 @@ require.config({ }, 'jstree': { 'deps': ['jquery'] + }, + 'jquery-steps': { + 'deps': ['jquery'] } }, @@ -171,7 +174,8 @@ require.config({ 'nvd3': 'libs/nvd3/nv.d3.min', 'sparkline': 'libs/sparkline/jquery.sparkline.min', 'table-dragger': 'libs/table-dragger/table-dragger', - 'jstree': 'libs/jstree/jstree.min' + 'jstree': 'libs/jstree/jstree.min', + 'jquery-steps': 'libs/jquery-steps/jquery.steps.min', }, /** http://git-wip-us.apache.org/repos/asf/atlas/blob/f85ff28e/dashboardv2/public/js/templates/glossary/AssignTermLayoutView_tmpl.html ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/templates/glossary/AssignTermLayoutView_tmpl.html b/dashboardv2/public/js/templates/glossary/AssignTermLayoutView_tmpl.html index 9abe8c3..385d809 100644 --- a/dashboardv2/public/js/templates/glossary/AssignTermLayoutView_tmpl.html +++ b/dashboardv2/public/js/templates/glossary/AssignTermLayoutView_tmpl.html @@ -14,17 +14,26 @@ * See the License for the specific language governing permissions and * limitations under the License. --> -<div id="r_glossaryTree"></div> -<br/> {{#if isAttributeRelationView}} -<form name="termAttributeForm" class="form-horizontal" data-id="termAttributeForm"> - {{#each selectedTermAttributeList}} - <div class="form-group"> - <label class="control-label col-sm-2" for="name">{{@key}}</label> - <div class="col-sm-10"> - <input class="form-control" name="{{@key}}" value="" data-id="displayName" placeholder="{{@key}}"/> - </div> - </div> - {{/each}} -</form> +<div data-id="wizard"> + <h3>Select Term</h3> + <section> + <div id="r_glossaryTree"></div> + </section> + <h3>Attributes</h3> + <section> + <form name="termAttributeForm" class="form-horizontal" data-id="termAttributeForm"> + {{#each selectedTermAttributeList}} + <div class="form-group"> + <label class="control-label col-sm-2" for="name">{{@key}}</label> + <div class="col-sm-10"> + <input class="form-control" name="{{@key}}" value="" data-id="displayName" placeholder="{{@key}}" /> + </div> + </div> + {{/each}} + </form> + </section> +</div> +{{else}} +<div id="r_glossaryTree"></div> {{/if}} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/atlas/blob/f85ff28e/dashboardv2/public/js/templates/glossary/TermRelationAttributeLayoutView_tmpl.html ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/templates/glossary/TermRelationAttributeLayoutView_tmpl.html b/dashboardv2/public/js/templates/glossary/TermRelationAttributeLayoutView_tmpl.html index 0755196..8173682 100644 --- a/dashboardv2/public/js/templates/glossary/TermRelationAttributeLayoutView_tmpl.html +++ b/dashboardv2/public/js/templates/glossary/TermRelationAttributeLayoutView_tmpl.html @@ -15,18 +15,5 @@ * limitations under the License. --> <div> - <div class="row form-group"> - <!-- <div class="col-md-6"> - <select data-id="termAttributeSelect"> - {{#each attributeList}} - <option value="{{@key}}">{{@key}}</option>{{/each}} - </select> - </div> --> - <!-- <div class="col-md-6"> - <button type="button" class="btn btn-action btn-md" data-id="addTermRelation"> - <i class="fa fa-plus"></i> <span>Assign Term</span> - </button> - </div> --> - </div> <div data-id="termAttributeTable"></div> </div> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/atlas/blob/f85ff28e/dashboardv2/public/js/views/glossary/AssignTermLayoutView.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/views/glossary/AssignTermLayoutView.js b/dashboardv2/public/js/views/glossary/AssignTermLayoutView.js index 1123465..b15a175 100644 --- a/dashboardv2/public/js/views/glossary/AssignTermLayoutView.js +++ b/dashboardv2/public/js/views/glossary/AssignTermLayoutView.js @@ -22,7 +22,8 @@ define(['require', 'utils/Utils', 'utils/Enums', 'utils/UrlLinks', - 'modules/Modal' + 'modules/Modal', + 'jquery-steps' ], function(require, Backbone, AssignTermLayoutViewTmpl, Utils, Enums, UrlLinks, Modal) { var AssignTermLayoutView = Backbone.Marionette.LayoutView.extend( @@ -46,7 +47,8 @@ define(['require', /** ui selector cache */ ui: { - termAttributeForm: '[data-id="termAttributeForm"]' + termAttributeForm: '[data-id="termAttributeForm"]', + wizard: '[data-id="wizard"]' }, /** ui events hash */ events: function() { @@ -81,7 +83,9 @@ define(['require', "cancelText": "Cancel", "okCloses": false, "okText": "Assign", - "allowCancel": true + "allowCancel": true, + "showFooter": this.isAttributeRelationView ? false : true, + "mainClass": "wizard-modal" }); this.modal.open(); this.modal.on('closeModal', function() { @@ -100,6 +104,40 @@ define(['require', bindEvents: function() {}, onRender: function() { this.renderGlossaryTree(); + var that = this; + if (this.isAttributeRelationView) { + this.ui.wizard.steps({ + headerTag: "h3", + bodyTag: "section", + transitionEffect: "slideLeft", + autoFocus: true, + enableCancelButton: true, + transitionEffect: $.fn.steps.transitionEffect.none, + transitionEffectSpeed: 200, + labels: { + cancel: "Cancel", + finish: "Assign", + next: "Next", + previous: "Previous", + loading: "Loading ..." + }, + onStepChanging: function(event, currentIndex, newIndex) { + var isMatch = that.glossary.selectedItem.type == "GlossaryTerm"; + if (!isMatch) { + Utils.notifyWarn({ + content: "Please select Term for association" + }); + } + return isMatch + }, + onFinished: function(event, currentIndex) { + that.assignTerm(); + }, + onCanceled: function(event) { + that.modal.trigger('cancel'); + }, + }); + } }, assignTerm: function() { this.assignTermError = false; http://git-wip-us.apache.org/repos/asf/atlas/blob/f85ff28e/dashboardv2/public/js/views/glossary/GlossaryDetailLayoutView.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/views/glossary/GlossaryDetailLayoutView.js b/dashboardv2/public/js/views/glossary/GlossaryDetailLayoutView.js index 2cf5a23..c301ad2 100644 --- a/dashboardv2/public/js/views/glossary/GlossaryDetailLayoutView.js +++ b/dashboardv2/public/js/views/glossary/GlossaryDetailLayoutView.js @@ -22,8 +22,9 @@ define(['require', 'utils/Utils', 'utils/Messages', 'utils/Globals', - 'utils/CommonViewFunction' -], function(require, Backbone, GlossaryDetailLayoutViewTmpl, Utils, Messages, Globals, CommonViewFunction) { + 'utils/CommonViewFunction', + 'collection/VGlossaryList' +], function(require, Backbone, GlossaryDetailLayoutViewTmpl, Utils, Messages, Globals, CommonViewFunction, VGlossaryList) { 'use strict'; var GlossaryDetailLayoutView = Backbone.Marionette.LayoutView.extend( @@ -306,13 +307,24 @@ define(['require', onClickAddTermBtn: function(e) { var that = this; require(['views/glossary/AssignTermLayoutView'], function(AssignTermLayoutView) { + var glossary = that.glossaryCollection; + if (that.value && that.value.gId) { + var foundModel = that.glossaryCollection.find({ guid: that.value.gId }); + if (foundModel) { + glossary = new VGlossaryList([foundModel.toJSON()], { + comparator: function(item) { + return item.get("displayName"); + } + }); + } + } var view = new AssignTermLayoutView({ categoryData: that.data, isCategoryView: that.isCategoryView, callback: function() { that.getData(); }, - glossaryCollection: that.glossaryCollection + glossaryCollection: glossary }); view.modal.on('ok', function() { that.hideLoader(); @@ -322,13 +334,24 @@ define(['require', onClickAddCategoryBtn: function(e) { var that = this; require(['views/glossary/AssignTermLayoutView'], function(AssignTermLayoutView) { + var glossary = that.glossaryCollection; + if (that.value && that.value.gId) { + var foundModel = that.glossaryCollection.find({ guid: that.value.gId }); + if (foundModel) { + glossary = new VGlossaryList([foundModel.toJSON()], { + comparator: function(item) { + return item.get("displayName"); + } + }); + } + } var view = new AssignTermLayoutView({ termData: that.data, isTermView: that.isTermView, callback: function() { that.getData(); }, - glossaryCollection: that.glossaryCollection + glossaryCollection: glossary }); view.modal.on('ok', function() { that.hideLoader(); http://git-wip-us.apache.org/repos/asf/atlas/blob/f85ff28e/dashboardv2/public/js/views/glossary/GlossaryLayoutView.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/views/glossary/GlossaryLayoutView.js b/dashboardv2/public/js/views/glossary/GlossaryLayoutView.js index 852f429..28b79e3 100644 --- a/dashboardv2/public/js/views/glossary/GlossaryLayoutView.js +++ b/dashboardv2/public/js/views/glossary/GlossaryLayoutView.js @@ -365,7 +365,6 @@ define(['require', if (this.value && this.value.viewType) { this.viewType = this.value.viewType; } - this.setValues(); if (this.guid && this.value && ((this.value.fromView && this.value.fromView) || (this.value.updateView))) { var $tree = this.ui[this.viewType == "term" ? "termTree" : "categoryTree"], node = $tree.jstree(true).get_node(this.guid); @@ -383,6 +382,8 @@ define(['require', }); this.glossaryCollection.trigger("update:details", { isGlossaryUpdate: this.value.gType == "glossary" }); } + } else { + this.setValues(); } if (options.isTrigger) { this.triggerUrl(); @@ -406,6 +407,9 @@ define(['require', return obj != "NoAction" ? true : false; } }, + "search": { + "show_only_matches": true + }, "core": { "data": function(node, cb) { if (node.id === "#") { @@ -470,6 +474,10 @@ define(['require', } else if (type == that.viewType) { that.triggerUrl(); } + }).on("search.jstree", function(e, data) { + createAction(_.extend({}, options, data)); + }).on("clear_search.jstree", function(e, data) { + createAction(_.extend({}, options, data)); }).bind('loaded.jstree', function(e, data) { if (that.query[type].isNodeNotFoundAtLoad == true) { treeLoaded({ "$el": $el, "type": type }); http://git-wip-us.apache.org/repos/asf/atlas/blob/f85ff28e/dashboardv2/public/js/views/search/SearchResultLayoutView.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/views/search/SearchResultLayoutView.js b/dashboardv2/public/js/views/search/SearchResultLayoutView.js index ccc147e..9eb1954 100644 --- a/dashboardv2/public/js/views/search/SearchResultLayoutView.js +++ b/dashboardv2/public/js/views/search/SearchResultLayoutView.js @@ -372,6 +372,9 @@ define(['require', skipDefaultError: true, sort: false, success: function(dataOrCollection, response) { + if (that.isDestroyed) { + return; + } Globals.searchApiCallRef = undefined; var isFirstPage = that.offset === 0, dataLength = 0,