/**
* 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.
*/
define(['require',
'backbone',
'hbs!tmpl/detail_page/DetailPageLayoutView_tmpl',
'hbs!tmpl/common/buttons_tmpl',
'utils/Utils',
'utils/CommonViewFunction',
'utils/Globals',
'utils/Enums',
'utils/Messages',
'utils/UrlLinks',
'jquery-ui'
], function(require, Backbone, DetailPageLayoutViewTmpl, ButtonsTmpl, Utils, CommonViewFunction, Globals, Enums, Messages, UrlLinks) {
'use strict';
var DetailPageLayoutView = Backbone.Marionette.LayoutView.extend(
/** @lends DetailPageLayoutView */
{
_viewName: 'DetailPageLayoutView',
template: DetailPageLayoutViewTmpl,
/** Layout sub regions */
regions: {
REntityDetailTableLayoutView: "#r_entityDetailTableLayoutView",
RSchemaTableLayoutView: "#r_schemaTableLayoutView",
RTagTableLayoutView: "#r_tagTableLayoutView",
RLineageLayoutView: "#r_lineageLayoutView",
RAuditTableLayoutView: "#r_auditTableLayoutView",
RProfileLayoutView: "#r_profileLayoutView"
},
/** ui selector cache */
ui: {
tagClick: '[data-id="tagClick"]',
title: '[data-id="title"]',
editButton: '[data-id="editButton"]',
editButtonContainer: '[data-id="editButtonContainer"]',
description: '[data-id="description"]',
editBox: '[data-id="editBox"]',
deleteTag: '[data-id="deleteTag"]',
backButton: "[data-id='backButton']",
addTag: '[data-id="addTag"]',
tagList: '[data-id="tagList"]',
fullscreenPanel: "#fullscreen_panel"
},
templateHelpers: function() {
return {
entityUpdate: Globals.entityUpdate
};
},
/** ui events hash */
events: function() {
var events = {};
events["click " + this.ui.editButton] = 'onClickEditEntity';
events["click " + this.ui.tagClick] = function(e) {
if (e.target.nodeName.toLocaleLowerCase() != "i") {
Utils.setUrl({
url: '#!/tag/tagAttribute/' + e.currentTarget.textContent,
mergeBrowserUrl: false,
trigger: true
});
}
};
events["click " + this.ui.deleteTag] = 'onClickTagCross';
events["click " + this.ui.addTag] = 'onClickAddTagBtn';
events['click ' + this.ui.backButton] = function() {
Backbone.history.history.back();
};
return events;
},
/**
* intialize a new DetailPageLayoutView Layout
* @constructs
*/
initialize: function(options) {
_.extend(this, _.pick(options, 'value', 'collection', 'id', 'entityDefCollection', 'typeHeaders', 'enumDefCollection', 'classificationDefCollection'));
this.bindEvents();
},
bindEvents: function() {
var that = this;
this.listenTo(this.collection, 'reset', function() {
this.entityObject = this.collection.first().toJSON();
var collectionJSON = this.entityObject.entity;
// MergerRefEntity.
Utils.findAndMergeRefEntity(collectionJSON.attributes, this.entityObject.referredEntities);
if (collectionJSON && collectionJSON.guid) {
var tagGuid = collectionJSON.guid;
this.readOnly = Enums.entityStateReadOnly[collectionJSON.status];
} else {
var tagGuid = this.id;
}
if (this.readOnly) {
this.$el.addClass('readOnly');
} else {
this.$el.removeClass('readOnly');
}
if (collectionJSON) {
this.name = Utils.getName(collectionJSON);
if (collectionJSON.attributes) {
if (this.name && collectionJSON.typeName) {
this.name = this.name + ' (' + _.escape(collectionJSON.typeName) + ')';
}
if (!this.name && collectionJSON.typeName) {
this.name = _.escape(collectionJSON.typeName);
}
this.description = collectionJSON.attributes.description;
if (this.name) {
this.ui.title.show();
var titleName = '<span>' + this.name + '</span>';
if (this.readOnly) {
titleName += '<button title="Deleted" class="btn btn-action btn-md deleteBtn"><i class="fa fa-trash"></i> Deleted</button>';
}
this.ui.title.html(titleName);
} else {
this.ui.title.hide();
}
if (this.description) {
this.ui.description.show();
this.ui.description.html('<span>' + _.escape(this.description) + '</span>');
} else {
this.ui.description.hide();
}
}
if (collectionJSON.classifications) {
this.generateTag(collectionJSON.classifications);
} else {
this.generateTag([]);
}
if (Globals.entityTypeConfList && _.isEmptyArray(Globals.entityTypeConfList)) {
this.ui.editButtonContainer.html(ButtonsTmpl({ btn_edit: true }));
} else {
if (_.contains(Globals.entityTypeConfList, collectionJSON.typeName)) {
this.ui.editButtonContainer.html(ButtonsTmpl({ btn_edit: true }));
}
}
if (collectionJSON.attributes && collectionJSON.attributes.columns) {
var valueSorted = _.sortBy(collectionJSON.attributes.columns, function(val) {
return val.attributes.position
});
collectionJSON.attributes.columns = valueSorted;
}
}
this.hideLoader();
var obj = {
entity: collectionJSON,
guid: this.id,
entityName: this.name,
typeHeaders: this.typeHeaders,
entityDefCollection: this.entityDefCollection,
fetchCollection: this.fetchCollection.bind(that),
enumDefCollection: this.enumDefCollection,
classificationDefCollection: this.classificationDefCollection,
attributeDefs: (function() {
return that.getEntityDef(collectionJSON);
})()
}
this.renderEntityDetailTableLayoutView(obj);
this.renderAuditTableLayoutView(obj);
this.renderTagTableLayoutView(obj);
if (collectionJSON && (!_.isUndefined(collectionJSON.attributes['profileData']) || collectionJSON.typeName === "hive_db")) {
if (collectionJSON.typeName === "hive_db") {
this.$('.profileTab a').text("Tables")
}
this.$('.profileTab').show();
this.renderProfileLayoutView(_.extend({}, obj, {
entityDetail: collectionJSON.attributes,
profileData: collectionJSON.attributes.profileData,
typeName: collectionJSON.typeName,
value: that.value
}));
}
// To render Schema check attribute "schemaElementsAttribute"
var schemaOptions = this.entityDefCollection.fullCollection.find({ name: collectionJSON.typeName }).get('options');
if (schemaOptions && schemaOptions.hasOwnProperty('schemaElementsAttribute') && schemaOptions.schemaElementsAttribute !== "") {
this.$('.schemaTable').show();
this.renderSchemaLayoutView(_.extend({}, obj, {
attribute: collectionJSON.attributes[schemaOptions.schemaElementsAttribute]
}));
}
}, this);
this.listenTo(this.collection, 'error', function(model, response) {
this.$('.fontLoader').hide();
if (response.responseJSON) {
Utils.notifyError({
content: response.responseJSON.errorMessage || response.responseJSON.error
});
}
}, this);
},
onRender: function() {
var that = this;
Utils.showTitleLoader(this.$('.page-title .fontLoader'), this.$('.entityDetail'));
this.$('.fontLoader').show(); // to show tab loader
this.renderLineageLayoutView({
guid: this.id,
entityDefCollection: this.entityDefCollection,
actionCallBack: function() {
that.$('#expand_collapse_panel').click();
}
});
this.$(".resize-graph").resizable({
handles: ' s',
minHeight: 375,
stop: function(event, ui) {
that.$('.resize-graph').height(($(this).height()));
},
});
this.ui.fullscreenPanel.on('fullscreen_done', function(e, panel) {
var svgEl = panel.find('.panel-body svg'),
scaleEl = svgEl.find('>g'),
zoom = that.RLineageLayoutView.currentView.zoom,
svg = that.RLineageLayoutView.currentView.svg,
viewThis = that.RLineageLayoutView.currentView,
setGraphZoomPositionCal = that.RLineageLayoutView.currentView.setGraphZoomPositionCal,
zoomed = that.RLineageLayoutView.currentView.zoomed;;
if (zoom) {
setGraphZoomPositionCal.call(viewThis);
zoomed.call(viewThis);
if ($(e.currentTarget).find('i').hasClass('fa fa-compress')) {
svg.call(zoom)
.on("dblclick.zoom", null);
} else {
svg.call(zoom)
.on("wheel.zoom", null)
.on("dblclick.zoom", null);
}
}
})
},
onShow: function() {
var params = Utils.getUrlState.getQueryParams();
if (params && params.profile) {
this.$('.nav.nav-tabs').find('.profileTab').addClass('active').siblings().removeClass('active');
this.$('.tab-content').find('#tab-profile').addClass('active').siblings().removeClass('active');
$("html, body").animate({ scrollTop: (this.$('.tab-content').offset().top + 1200) }, 1000);
}
},
fetchCollection: function() {
this.collection.fetch({ reset: true });
},
getEntityDef: function(entityObj) {
var data = this.entityDefCollection.fullCollection.findWhere({ name: entityObj.typeName }).toJSON();
var attributeDefs = Utils.getNestedSuperTypeObj({
data: data,
attrMerge: true,
collection: this.entityDefCollection
});
return attributeDefs;
},
onClickTagCross: function(e) {
var tagName = $(e.currentTarget).parent().text(),
that = this;
var modal = CommonViewFunction.deleteTagModel({
msg: "<div class='ellipsis'>Remove: " + "<b>" + _.escape(tagName) + "</b> assignment from" + " " + "<b>" + this.name + "?</b></div>",
titleMessage: Messages.removeTag,
buttonText: "Remove"
});
if (modal) {
modal.on('ok', function() {
that.deleteTagData({
'tagName': tagName,
'guid': that.id,
'el' : $(e.currentTarget)
});
});
modal.on('closeModal', function() {
modal.trigger('cancel');
});
}
},
deleteTagData: function(options) {
var that = this,
tagName = options.el.text();
Utils.showTitleLoader(this.$('.page-title .fontLoader'), this.$('.entityDetail'));
CommonViewFunction.deleteTag(_.extend({}, options, {
callback: function() {
that.fetchCollection();
}
}));
},
generateTag: function(tagObject) {
var that = this,
tagData = "";
_.each(tagObject, function(val) {
tagData += '<span class="btn btn-action btn-sm btn-icon btn-blue" data-id="tagClick"><span>' + val.typeName + '</span><i class="fa fa-close" data-id="deleteTag" data-type="tag"></i></span>';
});
this.ui.tagList.find("span.btn").remove();
this.ui.tagList.prepend(tagData);
},
hideLoader: function() {
Utils.hideTitleLoader(this.$('.page-title .fontLoader'), this.$('.entityDetail'));
},
showLoader: function() {
Utils.showTitleLoader(this.$('.page-title .fontLoader'), this.$('.entityDetail'));
},
onClickAddTagBtn: function(e) {
var that = this;
require(['views/tag/AddTagModalView'], function(AddTagModalView) {
var view = new AddTagModalView({
guid: that.id,
tagList: _.map(that.entityObject.entity.classifications, function(obj) {
return obj.typeName;
}),
callback: function() {
that.fetchCollection();
},
showLoader: that.showLoader.bind(that),
hideLoader: that.hideLoader.bind(that),
collection: that.classificationDefCollection,
enumDefCollection: that.enumDefCollection
});
view.modal.on('ok', function() {
Utils.showTitleLoader(that.$('.page-title .fontLoader'), that.$('.entityDetail'));
});
});
},
renderEntityDetailTableLayoutView: function(obj) {
var that = this;
require(['views/entity/EntityDetailTableLayoutView'], function(EntityDetailTableLayoutView) {
that.REntityDetailTableLayoutView.show(new EntityDetailTableLayoutView(obj));
});
},
renderTagTableLayoutView: function(obj) {
var that = this;
require(['views/tag/TagDetailTableLayoutView'], function(TagDetailTableLayoutView) {
that.RTagTableLayoutView.show(new TagDetailTableLayoutView(obj));
});
},
renderLineageLayoutView: function(obj) {
var that = this;
require(['views/graph/LineageLayoutView'], function(LineageLayoutView) {
that.RLineageLayoutView.show(new LineageLayoutView(obj));
});
},
renderSchemaLayoutView: function(obj) {
var that = this;
require(['views/schema/SchemaLayoutView'], function(SchemaLayoutView) {
that.RSchemaTableLayoutView.show(new SchemaLayoutView(obj));
});
},
renderAuditTableLayoutView: function(obj) {
var that = this;
require(['views/audit/AuditTableLayoutView'], function(AuditTableLayoutView) {
that.RAuditTableLayoutView.show(new AuditTableLayoutView(obj));
});
},
renderProfileLayoutView: function(obj) {
var that = this;
require(['views/profile/ProfileLayoutView'], function(ProfileLayoutView) {
that.RProfileLayoutView.show(new ProfileLayoutView(obj));
});
},
onClickEditEntity: function(e) {
var that = this;
$(e.currentTarget).blur();
require([
'views/entity/CreateEntityLayoutView'
], function(CreateEntityLayoutView) {
var view = new CreateEntityLayoutView({
guid: that.id,
entityDefCollection: that.entityDefCollection,
typeHeaders: that.typeHeaders,
callback: function() {
that.fetchCollection();
}
});
});
}
});
return DetailPageLayoutView;
});