Skip to content

A
atlas
Commit 503a572d by sameer79 Committed by Sarath Subramanian
Options

ATLAS-3439: Add User-defined properties in entity details page.

Signed-off-by: 's avatarSarath Subramanian <sarath@apache.org>
parent 7435801a
Showing with 2469 additions and 66 deletions
ATLAS-3439-1.patch 0 → 100644
From 8e806aae327b3179a26e6627fd42c80f6ec615f4 Mon Sep 17 00:00:00 2001
From: sameer79 <findsameershaikh@yahoo.co.in>
Date: Wed, 9 Oct 2019 17:35:12 +0530
Subject: [PATCH] ATLAS-3439: Add User-defined properties in entity details
page.
---
dashboardv2/public/css/scss/common.scss | 47 +++++-
dashboardv2/public/css/scss/override.scss | 3 +-
dashboardv2/public/css/scss/panel.scss | 35 +++-
.../detail_page/DetailPageLayoutView_tmpl.html | 15 +-
.../entity/EntityDetailTableLayoutView_tmpl.html | 44 +++--
.../entity/EntityUserDefineItemView_tmpl.html | 45 +++++
.../entity/EntityUserDefineView_tmpl.html | 65 ++++++++
.../templates/search/AdvancedSearchInfo_tmpl.html | 2 +-
.../js/views/detail_page/DetailPageLayoutView.js | 12 +-
.../js/views/entity/EntityDetailTableLayoutView.js | 2 +-
.../js/views/entity/EntityUserDefineItemView.js | 98 +++++++++++
.../public/js/views/entity/EntityUserDefineView.js | 184 +++++++++++++++++++++
dashboardv3/public/css/scss/common.scss | 43 +++++
dashboardv3/public/css/scss/panel.scss | 35 +++-
dashboardv3/public/css/scss/table.scss | 1 +
.../detail_page/DetailPageLayoutView_tmpl.html | 15 +-
.../entity/EntityDetailTableLayoutView_tmpl.html | 44 +++--
.../entity/EntityUserDefineItemView_tmpl.html | 45 +++++
.../entity/EntityUserDefineView_tmpl.html | 65 ++++++++
.../js/views/detail_page/DetailPageLayoutView.js | 12 +-
.../js/views/entity/EntityDetailTableLayoutView.js | 2 +-
.../js/views/entity/EntityUserDefineItemView.js | 98 +++++++++++
.../public/js/views/entity/EntityUserDefineView.js | 184 +++++++++++++++++++++
23 files changed, 1042 insertions(+), 54 deletions(-)
create mode 100644 dashboardv2/public/js/templates/entity/EntityUserDefineItemView_tmpl.html
create mode 100644 dashboardv2/public/js/templates/entity/EntityUserDefineView_tmpl.html
create mode 100644 dashboardv2/public/js/views/entity/EntityUserDefineItemView.js
create mode 100644 dashboardv2/public/js/views/entity/EntityUserDefineView.js
create mode 100644 dashboardv3/public/js/templates/entity/EntityUserDefineItemView_tmpl.html
create mode 100644 dashboardv3/public/js/templates/entity/EntityUserDefineView_tmpl.html
create mode 100644 dashboardv3/public/js/views/entity/EntityUserDefineItemView.js
create mode 100644 dashboardv3/public/js/views/entity/EntityUserDefineView.js
diff --git a/dashboardv2/public/css/scss/common.scss b/dashboardv2/public/css/scss/common.scss
index d42e5a9..b24c3c3 100644
--- a/dashboardv2/public/css/scss/common.scss
+++ b/dashboardv2/public/css/scss/common.scss
@@ -15,7 +15,7 @@
// limitations under the License.
-/* common.scss */
+/* common.scss */
.readOnly {
@@ -201,4 +201,47 @@ pre {
.panel-default>.panel-heading {
cursor: pointer;
}
-}
\ No newline at end of file
+}
+
+.custom-table {
+ width: 100%;
+
+ .custom-tr {
+ margin-left: 15px;
+ margin-right: 15px;
+
+ .custom-col-0,
+ .custom-col-1,
+ .custom-col-2 {
+ vertical-align: top;
+ display: inline-block;
+
+ textarea {
+ resize: vertical;
+ height: 34px;
+ min-height: 34px;
+ max-height: 70px;
+ }
+ }
+
+
+ .custom-col-0{
+ text-align: center;
+ vertical-align: middle;
+ width: 2%;
+ }
+
+ .custom-col-1{
+ width: 43%;
+ }
+
+ .custom-col-2{
+ text-align: center;
+ width: 10%;
+ }
+ }
+}
+
+.errorMsg {
+ color: $red;
+}
diff --git a/dashboardv2/public/css/scss/override.scss b/dashboardv2/public/css/scss/override.scss
index c8a1d89..c95ee58 100644
--- a/dashboardv2/public/css/scss/override.scss
+++ b/dashboardv2/public/css/scss/override.scss
@@ -128,6 +128,7 @@ td {
pre.scroll-y {
max-height: 200px;
overflow-y: auto;
+ word-break: break-word;
}
}
@@ -469,4 +470,4 @@ div.columnmanager-dropdown-container {
.w30 {
width: 30% !important;
-}
\ No newline at end of file
+}
diff --git a/dashboardv2/public/css/scss/panel.scss b/dashboardv2/public/css/scss/panel.scss
index c1ac042..52b3dbe 100644
--- a/dashboardv2/public/css/scss/panel.scss
+++ b/dashboardv2/public/css/scss/panel.scss
@@ -118,4 +118,37 @@
}
}
}
-}
\ No newline at end of file
+}
+
+.panel-default.custom-panel>.panel-heading {
+ color: $black;
+ cursor: pointer;
+ border-bottom: none;
+ display: inline-block;
+
+ .panel-title {
+ font-weight: normal;
+ a:hover {
+ color: $black;
+ opacity: 0.7;
+ }
+ }
+ .btn-group {
+ margin-top: 3px;
+ }
+}
+
+.panel-default.custom-panel>.panel-actions {
+ float: right;
+ margin-top: 15px;
+ button {
+ margin-right: 10px;
+ }
+}
+
+.panel-default.custom-panel>.panel-collapse>.panel-body {
+ border-top: none;
+}
+.panel-default.custom-panel>.panel-heading > .btn-group > button {
+ color: $black;
+}
diff --git a/dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html b/dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
index c395799..d35debc 100644
--- a/dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
+++ b/dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
@@ -65,9 +65,16 @@
<div>
<div class="tab-content">
<div id="tab-details" role="properties" class="tab-pane active animated fadeIn">
- <div id="r_entityDetailTableLayoutView">
- <div class="fontLoader-relative">
- <i class="fa fa-refresh fa-spin-custom"></i>
+ <div class="row">
+ <div class="col-md-6">
+ <div id="r_entityDetailTableLayoutView">
+ <div class="fontLoader-relative">
+ <i class="fa fa-refresh fa-spin-custom"></i>
+ </div>
+ </div>
+ </div>
+ <div class="col-md-6">
+ <div id="r_entityUserDefineView"></div>
</div>
</div>
</div>
@@ -122,4 +129,4 @@
</div>
</div>
</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/dashboardv2/public/js/templates/entity/EntityDetailTableLayoutView_tmpl.html b/dashboardv2/public/js/templates/entity/EntityDetailTableLayoutView_tmpl.html
index 1c01077..18a9435 100644
--- a/dashboardv2/public/js/templates/entity/EntityDetailTableLayoutView_tmpl.html
+++ b/dashboardv2/public/js/templates/entity/EntityDetailTableLayoutView_tmpl.html
@@ -14,23 +14,33 @@
* See the License for the specific language governing permissions and
* limitations under the License.
-->
-<div class="entity-detail-table">
- <div class="entity-detail-table-toggle">
- <div class="pretty p-switch p-fill">
- <input type="checkbox" data-id="noValueToggle" />
- <div class="state p-primary">
- <label>Show Empty Values</label>
+<div class="panel-group" id="accordion">
+ <div class="panel panel-default custom-panel expand_collapse_panel-icon" data-id="entity">
+ <div class="panel-heading" data-toggle="collapse" href="#collapse1" aria-expanded="true" style="width: 58%">
+ <h4 class="panel-title">
+ <a>Technical properties </a>
+ </h4>
+ <div class="btn-group pull-left">
+ <button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
+ </div>
+ </div>
+ <div class="panel-actions">
+ <div class="pretty p-switch p-fill">
+ <input type="checkbox" data-id="noValueToggle" />
+ <div class="state p-primary">
+ <label>Show Empty Values</label>
+ </div>
+ </div>
+ </div>
+ <div id="collapse1" class="panel-collapse collapse in">
+ <div class="panel-body">
+ <div class="entity-detail-table">
+ <table class="table">
+ <tbody data-id="detailValue" class="hide-empty-value">
+ </tbody>
+ </table>
+ </div>
</div>
</div>
</div>
- <table class="table table-quickMenu">
- <thead>
- <tr>
- <th>Key</th>
- <th>Value</th>
- </tr>
- </thead>
- <tbody data-id="detailValue" class="hide-empty-value">
- </tbody>
- </table>
-</div>
\ No newline at end of file
+</div>
diff --git a/dashboardv2/public/js/templates/entity/EntityUserDefineItemView_tmpl.html b/dashboardv2/public/js/templates/entity/EntityUserDefineItemView_tmpl.html
new file mode 100644
index 0000000..a06039f
--- /dev/null
+++ b/dashboardv2/public/js/templates/entity/EntityUserDefineItemView_tmpl.html
@@ -0,0 +1,45 @@
+<!--
+ * 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 data-id="userDefineItems">
+ <table class="custom-table">
+ {{#each items}}
+ <tr class="custom-tr">
+ <td class="custom-col-1">
+ <input placeholder="key" type="text" data-type="key" data-index={{@index}} class="form-control" value={{key}}></input>
+ <p class="errorMsg"></p>
+ </td >
+ <td class="custom-col-0"> : </td >
+ <td class="custom-col-1">
+ <textarea placeholder="value" data-type="value" data-index={{@index}} class="form-control" class="form-control">{{value}}</textarea>
+ <p class="errorMsg"></p>
+ </td >
+ <td class="custom-col-2">
+ <button class="btn btn-default btn-sm" title="" data-index={{@index}} data-id="deleteItem">
+ <i class="fa fa-minus"> </i>
+ </button>
+ <button class="btn btn-default btn-sm" title="" data-index={{@index}} data-id="addItem">
+ <i class="fa fa-plus"> </i>
+ </button>
+ </td >
+ </tr>
+ {{/each}}
+ {{#ifCond items.length "===" 0}}
+ No properties have been created yet. To add a property, click <a href="javascript:void(0)" data-id="addItem">here</a>
+ {{/ifCond}}
+ </table>
+</div>
diff --git a/dashboardv2/public/js/templates/entity/EntityUserDefineView_tmpl.html b/dashboardv2/public/js/templates/entity/EntityUserDefineView_tmpl.html
new file mode 100644
index 0000000..e3f4791
--- /dev/null
+++ b/dashboardv2/public/js/templates/entity/EntityUserDefineView_tmpl.html
@@ -0,0 +1,65 @@
+<!--
+ * 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="panel-group" id="accordion">
+ <div class="panel panel-default custom-panel expand_collapse_panel-icon" data-id="userDefine">
+ <div class="panel-heading" data-toggle="collapse" href="#collapse2" aria-expanded="true" {{#ifCond customAttibutes.length ">" 0}} style="width: 60%" {{else}} style="width: 100%" {{/ifCond}}>
+ <h4 class="panel-title">
+ <a>User-defined properties </a>
+ </h4>
+ <div class="btn-group pull-left">
+ <button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
+ </div>
+ </div>
+ {{#ifCond customAttibutes.length ">" 0}}
+ <div class="panel-actions">
+ {{#ifCond readOnlyEntity "===" false}}
+ <button class="btn btn-action btn-sm" data-id="editAttr" data-original-title="Edit User-Defined Attributes">Edit</button>
+ {{/ifCond}}
+ </div>
+ {{/ifCond}}
+ <div id="collapse2" class="panel-collapse collapse in">
+ <div class="panel-body">
+ <div class="row">
+ <div class="col-md-12">
+ <div class="entity-detail-table">
+ <table class="table">
+ {{#ifCond customAttibutes.length "===" 0}}
+ <span>No properties have been created yet.
+ {{#ifCond readOnlyEntity "==" false}}
+ <span>To add a property, click <a href="javascript:void(0)" data-id="editAttr">here</a></span>
+ {{/ifCond}}
+ </span>
+ {{/ifCond}}
+ <tbody>
+ {{#each customAttibutes}}
+ <tr>
+ <td>
+ <div class="scroll-y">{{key}}</div> </div></td>
+ <td>
+ <div class="scroll-y">{{value}}</div>
+ </td>
+ </tr>
+ {{/each}}
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
diff --git a/dashboardv2/public/js/templates/search/AdvancedSearchInfo_tmpl.html b/dashboardv2/public/js/templates/search/AdvancedSearchInfo_tmpl.html
index 64f1a31..7746974 100644
--- a/dashboardv2/public/js/templates/search/AdvancedSearchInfo_tmpl.html
+++ b/dashboardv2/public/js/templates/search/AdvancedSearchInfo_tmpl.html
@@ -31,6 +31,6 @@
</li>
</ul>
<h5 style="padding-left: 22.5px;">
- <a href="http://atlas.apache.org/#/SearchAdvance" target="_blank"><i class="fa fa-info-circle" aria-hidden="true"></i> &nbsp; More sample queries and use-cases</a>
+ <a href="http://atlas.apache.org/Search-Advanced.html" target="_blank"><i class="fa fa-info-circle" aria-hidden="true"></i> &nbsp; More sample queries and use-cases</a>
</h5>
</div>
\ No newline at end of file
diff --git a/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js b/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js
index 5fe5a9e..4f48693 100644
--- a/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js
+++ b/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js
@@ -45,7 +45,8 @@ define(['require',
RAuditTableLayoutView: "#r_auditTableLayoutView",
RReplicationAuditTableLayoutView: "#r_replicationAuditTableLayoutView",
RProfileLayoutView: "#r_profileLayoutView",
- RRelationshipLayoutView: "#r_relationshipLayoutView"
+ RRelationshipLayoutView: "#r_relationshipLayoutView",
+ REntityUserDefineView: "#r_entityUserDefineView",
},
/** ui selector cache */
ui: {
@@ -243,6 +244,7 @@ define(['require',
})()
}
this.renderEntityDetailTableLayoutView(obj);
+ this.renderEntityUserDefineView(obj);
this.renderRelationshipLayoutView(obj);
this.renderAuditTableLayoutView(obj);
this.renderTagTableLayoutView(obj);
@@ -484,6 +486,12 @@ define(['require',
that.REntityDetailTableLayoutView.show(new EntityDetailTableLayoutView(obj));
});
},
+ renderEntityUserDefineView: function(obj) {
+ var that = this;
+ require(['views/entity/EntityUserDefineView'], function(EntityUserDefineView) {
+ that.REntityUserDefineView.show(new EntityUserDefineView(obj));
+ });
+ },
renderTagTableLayoutView: function(obj) {
var that = this;
require(['views/tag/TagDetailTableLayoutView'], function(TagDetailTableLayoutView) {
@@ -545,4 +553,4 @@ define(['require',
}
});
return DetailPageLayoutView;
-});
\ No newline at end of file
+});
diff --git a/dashboardv2/public/js/views/entity/EntityDetailTableLayoutView.js b/dashboardv2/public/js/views/entity/EntityDetailTableLayoutView.js
index 381d99e..6572292 100644
--- a/dashboardv2/public/js/views/entity/EntityDetailTableLayoutView.js
+++ b/dashboardv2/public/js/views/entity/EntityDetailTableLayoutView.js
@@ -83,4 +83,4 @@ define(['require',
}
});
return EntityDetailTableLayoutView;
-});
\ No newline at end of file
+});
diff --git a/dashboardv2/public/js/views/entity/EntityUserDefineItemView.js b/dashboardv2/public/js/views/entity/EntityUserDefineItemView.js
new file mode 100644
index 0000000..a649ca8
--- /dev/null
+++ b/dashboardv2/public/js/views/entity/EntityUserDefineItemView.js
@@ -0,0 +1,98 @@
+/*
+ * 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/entity/EntityUserDefineItemView_tmpl'
+
+], function(require, Backbone, EntityUserDefineItemView_tmpl) {
+ 'use strict';
+
+ return Backbone.Marionette.ItemView.extend({
+ _viewName: 'EntityUserDefineItemView',
+
+ template: EntityUserDefineItemView_tmpl,
+
+ templateHelpers: function() {
+ return {
+ items: this.items
+ };
+ },
+
+ /** Layout sub regions */
+ regions: {},
+
+ /** ui selector cache */
+ ui: {
+ itemKey: "[data-type='key']",
+ itemValue: "[data-type='value']",
+ addItem: "[data-id='addItem']",
+ deleteItem: "[data-id='deleteItem']"
+ },
+ /** ui events hash */
+ events: function() {
+ var events = {};
+ events['input ' + this.ui.itemKey] = 'onItemKeyChange';
+ events['input ' + this.ui.itemValue] = 'onItemValueChange';
+ events['click ' + this.ui.addItem] = 'onAddItemClick';
+ events['click ' + this.ui.deleteItem] = 'onDeleteItemClick';
+ return events;
+ },
+
+ /**
+ * intialize a new GlobalExclusionComponentView Layout
+ * @constructs
+ */
+ initialize: function(options) {
+ var that = this;
+ this.editMode = options.mode;
+ if (options.items.length === 0) {
+ this.items = [{ key: "", value: "", mode: this.editMode}];
+
+ } else {
+ this.items = options.items.map(function(m) {
+ m.mode = that.editMode;
+ return m;
+ });
+ }
+ },
+ onRender: function() {
+
+ },
+ onAddItemClick: function(e) {
+ var el = e.currentTarget;
+ this.items.splice(parseInt(el.dataset.index) + 1, 0, { key: "", value: "", mode: this.editMode});
+ this.render();
+ },
+ onDeleteItemClick: function(e) {
+ var el = e.currentTarget;
+ this.items.splice(el.dataset.index, 1);
+ this.render();
+ },
+ onItemKeyChange: function (e) {
+ var el = e.currentTarget;
+ var val = el.value;
+ this.items[ el.dataset.index].key = val;
+ },
+ onItemValueChange: function (e) {
+ var el = e.currentTarget;
+ var val = el.value;
+ this.items[ el.dataset.index].value = el.value;
+ }
+ });
+
+});
diff --git a/dashboardv2/public/js/views/entity/EntityUserDefineView.js b/dashboardv2/public/js/views/entity/EntityUserDefineView.js
new file mode 100644
index 0000000..4fc2f02
--- /dev/null
+++ b/dashboardv2/public/js/views/entity/EntityUserDefineView.js
@@ -0,0 +1,184 @@
+/**
+ * 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/entity/EntityUserDefineView_tmpl',
+'views/entity/EntityUserDefineItemView',
+'utils/CommonViewFunction',
+'modules/Modal',
+'models/VEntity',
+'utils/Utils',
+'utils/Enums'
+], function(require, Backbone, EntityUserDefineView_tmpl, EntityUserDefineItemView, CommonViewFunction, Modal, VEntity, Utils, Enums) {
+'use strict';
+
+ return Backbone.Marionette.LayoutView.extend({
+ _viewName: 'EntityUserDefineView',
+ template: EntityUserDefineView_tmpl,
+ templateHelpers: function() {
+ return {
+ customAttibutes: this.customAttibutes,
+ readOnlyEntity : this.readOnlyEntity
+ };
+ },
+ ui: {
+ addAttr: "[data-id='addAttr']",
+ editAttr: "[data-id='editAttr']",
+ deleteAttr: "[data-id='deleteAttr']"
+ },
+ events: function() {
+ var events = {};
+ events["click " + this.ui.editAttr] = 'onEditAttrClick';
+ return events;
+ },
+ initialize: function(options) {
+ _.extend(this, _.pick(options, 'entity'));
+ this.userDefineAttr = this.entity.customAttributes || [];
+ this.editMode = false;
+ this.readOnlyEntity = Enums.entityStateReadOnly[this.entity.status];
+ this.entityModel = new VEntity(this.entity);
+ this.generateTableFields();
+ },
+ onRender: function() {
+ },
+ bindEvents: {},
+ customAtributesFunc: function() {
+
+ },
+ generateTableFields: function() {
+ var that = this;
+ this.customAttibutes = [];
+ _.each(Object.keys(that.userDefineAttr), function(key, i) {
+ that.customAttibutes.push({
+ key: key,
+ value: that.userDefineAttr[key]
+ });
+ });
+ },
+ onEditAttrClick: function (e) {
+ this.editMode = true;
+ var options = {items: this.customAttibutes, mode: true};
+ var view = new EntityUserDefineItemView(options);
+ var modalObj = {
+ title: 'User-Defined Attributes',
+ content: view,
+ okText: 'Save',
+ okCloses: false,
+ cancelText: "Cancel",
+ mainClass: 'modal-lg',
+ allowCancel: true,
+ };
+ this.setAttributeModal(modalObj);
+ },
+ structureAttributes: function (list) {
+ var obj={}
+ list.map(function (o) {
+ obj[o.key] = o.value;
+ });
+ return obj;
+ },
+ saveAttributes: function (list) {
+ var that = this;
+ var entityJson = that.entityModel.toJSON();
+ var properties = that.structureAttributes(list);
+ entityJson.customAttributes = properties;
+ var payload = {entity: entityJson};
+ that.entityModel.createOreditEntity({
+ data: JSON.stringify(payload),
+ type: 'POST',
+ success: function() {
+ var msg = "User-defined attribute(s) updated successfully";
+ that.customAttibutes = list;
+ Utils.notifySuccess({
+ content: msg
+ });
+ that.modal && that.modal.trigger('cancel');
+ that.render();
+ },
+ error: function (e) {
+ that.editMode = false;
+ Utils.notifySuccess({
+ content: e.message
+ });
+ that.modal && that.modal.$el.find('button.ok').attr("disabled", false);
+ },
+ complete: function () {
+ that.modal && that.modal.$el.find('button.ok').attr("disabled", false);
+ that.editMode = false;
+ }
+ });
+ },
+ setAttributeModal: function(modalObj) {
+ var self = this;
+ this.modal = new Modal(modalObj);
+ this.modal.open();
+ this. modal.on('ok', function() {
+ self.modal.$el.find('button.ok').attr("disabled", true);
+ var list = self.modal.$el.find("[data-type]"),
+ keyMap = new Map(),
+ validation = true,
+ hasDup = [],
+ dataList = [];
+ Array.prototype.push.apply(dataList, self.modal.options.content.items);
+ for(var i = 0; i < list.length ; i++) {
+ var input = list[i],
+ type = input.dataset.type,
+ pEl = self.modal.$el.find(input.parentElement).find('p'),
+ classes = 'form-control',
+ val = input.value.trim();
+ pEl[0].innerText = "";
+
+ if (val === '') {
+ classes = 'form-control errorClass';
+ validation = false;
+ pEl[0].innerText = 'Required!';
+ } else {
+ if (input.tagName === 'INPUT') {
+ var duplicates = dataList.filter(function(c) {
+ return c.key === val;
+ });
+ if (keyMap.has(val) || duplicates.length > 1 ) {
+ classes = 'form-control errorClass';
+ hasDup.push('duplicate');
+ pEl[0].innerText = 'Duplicate key';
+ } else {
+ keyMap.set(val, val);
+ }
+ }
+ }
+ input.setAttribute('class', classes);
+ }
+
+ if (validation && hasDup.length === 0) {
+ self.saveAttributes(self.modal.options.content.items);
+ } else {
+ self.modal.$el.find('button.ok').attr("disabled", false);
+ }
+ });
+ this.modal.on('closeModal', function() {
+ self.editMode = false;
+ self.modal.trigger('cancel');
+ });
+ },
+ enableModalButton: function () {
+ var self = this;
+ self.modal.$el.find('button.ok').attr("disabled", false);
+ }
+ });
+});
diff --git a/dashboardv3/public/css/scss/common.scss b/dashboardv3/public/css/scss/common.scss
index 26bf82a..dfe0e4f 100644
--- a/dashboardv3/public/css/scss/common.scss
+++ b/dashboardv3/public/css/scss/common.scss
@@ -201,3 +201,46 @@ pre {
bottom: 0;
background: white;
}
+
+.custom-table {
+ width: 100%;
+
+ .custom-tr {
+ margin-left: 15px;
+ margin-right: 15px;
+
+ .custom-col-0,
+ .custom-col-1,
+ .custom-col-2 {
+ vertical-align: top;
+ display: inline-block;
+
+ textarea {
+ resize: vertical;
+ height: 34px;
+ min-height: 34px;
+ max-height: 70px;
+ }
+ }
+
+
+ .custom-col-0{
+ text-align: center;
+ vertical-align: middle;
+ width: 2%;
+ }
+
+ .custom-col-1{
+ width: 43%;
+ }
+
+ .custom-col-2{
+ text-align: center;
+ width: 10%;
+ }
+ }
+}
+
+.errorMsg {
+ color: $red;
+}
diff --git a/dashboardv3/public/css/scss/panel.scss b/dashboardv3/public/css/scss/panel.scss
index dfa0872..b06e63c 100644
--- a/dashboardv3/public/css/scss/panel.scss
+++ b/dashboardv3/public/css/scss/panel.scss
@@ -134,4 +134,37 @@
}
}
}
-}
\ No newline at end of file
+}
+
+.panel-default.custom-panel>.panel-heading {
+ color: $black;
+ cursor: pointer;
+ border-bottom: none;
+ display: inline-block;
+
+ .panel-title {
+ font-weight: normal;
+ a:hover {
+ color: $black;
+ opacity: 0.7;
+ }
+ }
+ .btn-group {
+ margin-top: 3px;
+ }
+}
+
+.panel-default.custom-panel>.panel-actions {
+ float: right;
+ margin-top: 15px;
+ button {
+ margin-right: 10px;
+ }
+}
+
+.panel-default.custom-panel>.panel-collapse>.panel-body {
+ border-top: none;
+}
+.panel-default.custom-panel>.panel-heading > .btn-group > button {
+ color: $black;
+}
diff --git a/dashboardv3/public/css/scss/table.scss b/dashboardv3/public/css/scss/table.scss
index 0f8ca75..06fb29b 100644
--- a/dashboardv3/public/css/scss/table.scss
+++ b/dashboardv3/public/css/scss/table.scss
@@ -212,6 +212,7 @@ td {
pre.scroll-y {
max-height: 200px;
overflow-y: auto;
+ word-break: break-word;
}
&.searchTableName {
diff --git a/dashboardv3/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html b/dashboardv3/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
index 6519863..9c7cb81 100644
--- a/dashboardv3/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
+++ b/dashboardv3/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
@@ -68,9 +68,16 @@
<div>
<div class="tab-content">
<div id="tab-details" role="properties" class="tab-pane active animated fadeIn">
- <div id="r_entityDetailTableLayoutView">
- <div class="fontLoader-relative">
- <i class="fa fa-refresh fa-spin-custom"></i>
+ <div class="row">
+ <div class="col-md-6">
+ <div id="r_entityDetailTableLayoutView">
+ <div class="fontLoader-relative">
+ <i class="fa fa-refresh fa-spin-custom"></i>
+ </div>
+ </div>
+ </div>
+ <div class="col-md-6">
+ <div id="r_entityUserDefineView"></div>
</div>
</div>
</div>
@@ -125,4 +132,4 @@
</div>
</div>
</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/dashboardv3/public/js/templates/entity/EntityDetailTableLayoutView_tmpl.html b/dashboardv3/public/js/templates/entity/EntityDetailTableLayoutView_tmpl.html
index 1c01077..18a9435 100644
--- a/dashboardv3/public/js/templates/entity/EntityDetailTableLayoutView_tmpl.html
+++ b/dashboardv3/public/js/templates/entity/EntityDetailTableLayoutView_tmpl.html
@@ -14,23 +14,33 @@
* See the License for the specific language governing permissions and
* limitations under the License.
-->
-<div class="entity-detail-table">
- <div class="entity-detail-table-toggle">
- <div class="pretty p-switch p-fill">
- <input type="checkbox" data-id="noValueToggle" />
- <div class="state p-primary">
- <label>Show Empty Values</label>
+<div class="panel-group" id="accordion">
+ <div class="panel panel-default custom-panel expand_collapse_panel-icon" data-id="entity">
+ <div class="panel-heading" data-toggle="collapse" href="#collapse1" aria-expanded="true" style="width: 58%">
+ <h4 class="panel-title">
+ <a>Technical properties </a>
+ </h4>
+ <div class="btn-group pull-left">
+ <button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
+ </div>
+ </div>
+ <div class="panel-actions">
+ <div class="pretty p-switch p-fill">
+ <input type="checkbox" data-id="noValueToggle" />
+ <div class="state p-primary">
+ <label>Show Empty Values</label>
+ </div>
+ </div>
+ </div>
+ <div id="collapse1" class="panel-collapse collapse in">
+ <div class="panel-body">
+ <div class="entity-detail-table">
+ <table class="table">
+ <tbody data-id="detailValue" class="hide-empty-value">
+ </tbody>
+ </table>
+ </div>
</div>
</div>
</div>
- <table class="table table-quickMenu">
- <thead>
- <tr>
- <th>Key</th>
- <th>Value</th>
- </tr>
- </thead>
- <tbody data-id="detailValue" class="hide-empty-value">
- </tbody>
- </table>
-</div>
\ No newline at end of file
+</div>
diff --git a/dashboardv3/public/js/templates/entity/EntityUserDefineItemView_tmpl.html b/dashboardv3/public/js/templates/entity/EntityUserDefineItemView_tmpl.html
new file mode 100644
index 0000000..a06039f
--- /dev/null
+++ b/dashboardv3/public/js/templates/entity/EntityUserDefineItemView_tmpl.html
@@ -0,0 +1,45 @@
+<!--
+ * 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 data-id="userDefineItems">
+ <table class="custom-table">
+ {{#each items}}
+ <tr class="custom-tr">
+ <td class="custom-col-1">
+ <input placeholder="key" type="text" data-type="key" data-index={{@index}} class="form-control" value={{key}}></input>
+ <p class="errorMsg"></p>
+ </td >
+ <td class="custom-col-0"> : </td >
+ <td class="custom-col-1">
+ <textarea placeholder="value" data-type="value" data-index={{@index}} class="form-control" class="form-control">{{value}}</textarea>
+ <p class="errorMsg"></p>
+ </td >
+ <td class="custom-col-2">
+ <button class="btn btn-default btn-sm" title="" data-index={{@index}} data-id="deleteItem">
+ <i class="fa fa-minus"> </i>
+ </button>
+ <button class="btn btn-default btn-sm" title="" data-index={{@index}} data-id="addItem">
+ <i class="fa fa-plus"> </i>
+ </button>
+ </td >
+ </tr>
+ {{/each}}
+ {{#ifCond items.length "===" 0}}
+ No properties have been created yet. To add a property, click <a href="javascript:void(0)" data-id="addItem">here</a>
+ {{/ifCond}}
+ </table>
+</div>
diff --git a/dashboardv3/public/js/templates/entity/EntityUserDefineView_tmpl.html b/dashboardv3/public/js/templates/entity/EntityUserDefineView_tmpl.html
new file mode 100644
index 0000000..e3f4791
--- /dev/null
+++ b/dashboardv3/public/js/templates/entity/EntityUserDefineView_tmpl.html
@@ -0,0 +1,65 @@
+<!--
+ * 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="panel-group" id="accordion">
+ <div class="panel panel-default custom-panel expand_collapse_panel-icon" data-id="userDefine">
+ <div class="panel-heading" data-toggle="collapse" href="#collapse2" aria-expanded="true" {{#ifCond customAttibutes.length ">" 0}} style="width: 60%" {{else}} style="width: 100%" {{/ifCond}}>
+ <h4 class="panel-title">
+ <a>User-defined properties </a>
+ </h4>
+ <div class="btn-group pull-left">
+ <button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
+ </div>
+ </div>
+ {{#ifCond customAttibutes.length ">" 0}}
+ <div class="panel-actions">
+ {{#ifCond readOnlyEntity "===" false}}
+ <button class="btn btn-action btn-sm" data-id="editAttr" data-original-title="Edit User-Defined Attributes">Edit</button>
+ {{/ifCond}}
+ </div>
+ {{/ifCond}}
+ <div id="collapse2" class="panel-collapse collapse in">
+ <div class="panel-body">
+ <div class="row">
+ <div class="col-md-12">
+ <div class="entity-detail-table">
+ <table class="table">
+ {{#ifCond customAttibutes.length "===" 0}}
+ <span>No properties have been created yet.
+ {{#ifCond readOnlyEntity "==" false}}
+ <span>To add a property, click <a href="javascript:void(0)" data-id="editAttr">here</a></span>
+ {{/ifCond}}
+ </span>
+ {{/ifCond}}
+ <tbody>
+ {{#each customAttibutes}}
+ <tr>
+ <td>
+ <div class="scroll-y">{{key}}</div> </div></td>
+ <td>
+ <div class="scroll-y">{{value}}</div>
+ </td>
+ </tr>
+ {{/each}}
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
diff --git a/dashboardv3/public/js/views/detail_page/DetailPageLayoutView.js b/dashboardv3/public/js/views/detail_page/DetailPageLayoutView.js
index 682feb3..e1ab970 100644
--- a/dashboardv3/public/js/views/detail_page/DetailPageLayoutView.js
+++ b/dashboardv3/public/js/views/detail_page/DetailPageLayoutView.js
@@ -45,7 +45,8 @@ define(['require',
RAuditTableLayoutView: "#r_auditTableLayoutView",
RReplicationAuditTableLayoutView: "#r_replicationAuditTableLayoutView",
RProfileLayoutView: "#r_profileLayoutView",
- RRelationshipLayoutView: "#r_relationshipLayoutView"
+ RRelationshipLayoutView: "#r_relationshipLayoutView",
+ REntityUserDefineView: "#r_entityUserDefineView",
},
/** ui selector cache */
ui: {
@@ -249,6 +250,7 @@ define(['require',
})()
}
this.renderEntityDetailTableLayoutView(obj);
+ this.renderEntityUserDefineView(obj);
this.renderRelationshipLayoutView(obj);
this.renderAuditTableLayoutView(obj);
this.renderTagTableLayoutView(obj);
@@ -496,6 +498,12 @@ define(['require',
that.REntityDetailTableLayoutView.show(new EntityDetailTableLayoutView(obj));
});
},
+ renderEntityUserDefineView: function(obj) {
+ var that = this;
+ require(['views/entity/EntityUserDefineView'], function(EntityUserDefineView) {
+ that.REntityUserDefineView.show(new EntityUserDefineView(obj));
+ });
+ },
renderTagTableLayoutView: function(obj) {
var that = this;
require(['views/tag/TagDetailTableLayoutView'], function(TagDetailTableLayoutView) {
@@ -558,4 +566,4 @@ define(['require',
}
});
return DetailPageLayoutView;
-});
\ No newline at end of file
+});
diff --git a/dashboardv3/public/js/views/entity/EntityDetailTableLayoutView.js b/dashboardv3/public/js/views/entity/EntityDetailTableLayoutView.js
index 381d99e..6572292 100644
--- a/dashboardv3/public/js/views/entity/EntityDetailTableLayoutView.js
+++ b/dashboardv3/public/js/views/entity/EntityDetailTableLayoutView.js
@@ -83,4 +83,4 @@ define(['require',
}
});
return EntityDetailTableLayoutView;
-});
\ No newline at end of file
+});
diff --git a/dashboardv3/public/js/views/entity/EntityUserDefineItemView.js b/dashboardv3/public/js/views/entity/EntityUserDefineItemView.js
new file mode 100644
index 0000000..a649ca8
--- /dev/null
+++ b/dashboardv3/public/js/views/entity/EntityUserDefineItemView.js
@@ -0,0 +1,98 @@
+/*
+ * 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/entity/EntityUserDefineItemView_tmpl'
+
+], function(require, Backbone, EntityUserDefineItemView_tmpl) {
+ 'use strict';
+
+ return Backbone.Marionette.ItemView.extend({
+ _viewName: 'EntityUserDefineItemView',
+
+ template: EntityUserDefineItemView_tmpl,
+
+ templateHelpers: function() {
+ return {
+ items: this.items
+ };
+ },
+
+ /** Layout sub regions */
+ regions: {},
+
+ /** ui selector cache */
+ ui: {
+ itemKey: "[data-type='key']",
+ itemValue: "[data-type='value']",
+ addItem: "[data-id='addItem']",
+ deleteItem: "[data-id='deleteItem']"
+ },
+ /** ui events hash */
+ events: function() {
+ var events = {};
+ events['input ' + this.ui.itemKey] = 'onItemKeyChange';
+ events['input ' + this.ui.itemValue] = 'onItemValueChange';
+ events['click ' + this.ui.addItem] = 'onAddItemClick';
+ events['click ' + this.ui.deleteItem] = 'onDeleteItemClick';
+ return events;
+ },
+
+ /**
+ * intialize a new GlobalExclusionComponentView Layout
+ * @constructs
+ */
+ initialize: function(options) {
+ var that = this;
+ this.editMode = options.mode;
+ if (options.items.length === 0) {
+ this.items = [{ key: "", value: "", mode: this.editMode}];
+
+ } else {
+ this.items = options.items.map(function(m) {
+ m.mode = that.editMode;
+ return m;
+ });
+ }
+ },
+ onRender: function() {
+
+ },
+ onAddItemClick: function(e) {
+ var el = e.currentTarget;
+ this.items.splice(parseInt(el.dataset.index) + 1, 0, { key: "", value: "", mode: this.editMode});
+ this.render();
+ },
+ onDeleteItemClick: function(e) {
+ var el = e.currentTarget;
+ this.items.splice(el.dataset.index, 1);
+ this.render();
+ },
+ onItemKeyChange: function (e) {
+ var el = e.currentTarget;
+ var val = el.value;
+ this.items[ el.dataset.index].key = val;
+ },
+ onItemValueChange: function (e) {
+ var el = e.currentTarget;
+ var val = el.value;
+ this.items[ el.dataset.index].value = el.value;
+ }
+ });
+
+});
diff --git a/dashboardv3/public/js/views/entity/EntityUserDefineView.js b/dashboardv3/public/js/views/entity/EntityUserDefineView.js
new file mode 100644
index 0000000..4fc2f02
--- /dev/null
+++ b/dashboardv3/public/js/views/entity/EntityUserDefineView.js
@@ -0,0 +1,184 @@
+/**
+ * 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/entity/EntityUserDefineView_tmpl',
+'views/entity/EntityUserDefineItemView',
+'utils/CommonViewFunction',
+'modules/Modal',
+'models/VEntity',
+'utils/Utils',
+'utils/Enums'
+], function(require, Backbone, EntityUserDefineView_tmpl, EntityUserDefineItemView, CommonViewFunction, Modal, VEntity, Utils, Enums) {
+'use strict';
+
+ return Backbone.Marionette.LayoutView.extend({
+ _viewName: 'EntityUserDefineView',
+ template: EntityUserDefineView_tmpl,
+ templateHelpers: function() {
+ return {
+ customAttibutes: this.customAttibutes,
+ readOnlyEntity : this.readOnlyEntity
+ };
+ },
+ ui: {
+ addAttr: "[data-id='addAttr']",
+ editAttr: "[data-id='editAttr']",
+ deleteAttr: "[data-id='deleteAttr']"
+ },
+ events: function() {
+ var events = {};
+ events["click " + this.ui.editAttr] = 'onEditAttrClick';
+ return events;
+ },
+ initialize: function(options) {
+ _.extend(this, _.pick(options, 'entity'));
+ this.userDefineAttr = this.entity.customAttributes || [];
+ this.editMode = false;
+ this.readOnlyEntity = Enums.entityStateReadOnly[this.entity.status];
+ this.entityModel = new VEntity(this.entity);
+ this.generateTableFields();
+ },
+ onRender: function() {
+ },
+ bindEvents: {},
+ customAtributesFunc: function() {
+
+ },
+ generateTableFields: function() {
+ var that = this;
+ this.customAttibutes = [];
+ _.each(Object.keys(that.userDefineAttr), function(key, i) {
+ that.customAttibutes.push({
+ key: key,
+ value: that.userDefineAttr[key]
+ });
+ });
+ },
+ onEditAttrClick: function (e) {
+ this.editMode = true;
+ var options = {items: this.customAttibutes, mode: true};
+ var view = new EntityUserDefineItemView(options);
+ var modalObj = {
+ title: 'User-Defined Attributes',
+ content: view,
+ okText: 'Save',
+ okCloses: false,
+ cancelText: "Cancel",
+ mainClass: 'modal-lg',
+ allowCancel: true,
+ };
+ this.setAttributeModal(modalObj);
+ },
+ structureAttributes: function (list) {
+ var obj={}
+ list.map(function (o) {
+ obj[o.key] = o.value;
+ });
+ return obj;
+ },
+ saveAttributes: function (list) {
+ var that = this;
+ var entityJson = that.entityModel.toJSON();
+ var properties = that.structureAttributes(list);
+ entityJson.customAttributes = properties;
+ var payload = {entity: entityJson};
+ that.entityModel.createOreditEntity({
+ data: JSON.stringify(payload),
+ type: 'POST',
+ success: function() {
+ var msg = "User-defined attribute(s) updated successfully";
+ that.customAttibutes = list;
+ Utils.notifySuccess({
+ content: msg
+ });
+ that.modal && that.modal.trigger('cancel');
+ that.render();
+ },
+ error: function (e) {
+ that.editMode = false;
+ Utils.notifySuccess({
+ content: e.message
+ });
+ that.modal && that.modal.$el.find('button.ok').attr("disabled", false);
+ },
+ complete: function () {
+ that.modal && that.modal.$el.find('button.ok').attr("disabled", false);
+ that.editMode = false;
+ }
+ });
+ },
+ setAttributeModal: function(modalObj) {
+ var self = this;
+ this.modal = new Modal(modalObj);
+ this.modal.open();
+ this. modal.on('ok', function() {
+ self.modal.$el.find('button.ok').attr("disabled", true);
+ var list = self.modal.$el.find("[data-type]"),
+ keyMap = new Map(),
+ validation = true,
+ hasDup = [],
+ dataList = [];
+ Array.prototype.push.apply(dataList, self.modal.options.content.items);
+ for(var i = 0; i < list.length ; i++) {
+ var input = list[i],
+ type = input.dataset.type,
+ pEl = self.modal.$el.find(input.parentElement).find('p'),
+ classes = 'form-control',
+ val = input.value.trim();
+ pEl[0].innerText = "";
+
+ if (val === '') {
+ classes = 'form-control errorClass';
+ validation = false;
+ pEl[0].innerText = 'Required!';
+ } else {
+ if (input.tagName === 'INPUT') {
+ var duplicates = dataList.filter(function(c) {
+ return c.key === val;
+ });
+ if (keyMap.has(val) || duplicates.length > 1 ) {
+ classes = 'form-control errorClass';
+ hasDup.push('duplicate');
+ pEl[0].innerText = 'Duplicate key';
+ } else {
+ keyMap.set(val, val);
+ }
+ }
+ }
+ input.setAttribute('class', classes);
+ }
+
+ if (validation && hasDup.length === 0) {
+ self.saveAttributes(self.modal.options.content.items);
+ } else {
+ self.modal.$el.find('button.ok').attr("disabled", false);
+ }
+ });
+ this.modal.on('closeModal', function() {
+ self.editMode = false;
+ self.modal.trigger('cancel');
+ });
+ },
+ enableModalButton: function () {
+ var self = this;
+ self.modal.$el.find('button.ok').attr("disabled", false);
+ }
+ });
+});
--
2.7.4
dashboardv2/public/css/scss/common.scss
......@@ -15,7 +15,7 @@
// limitations under the License.
/* common.scss */
/* common.scss */
.readOnly {
......@@ -201,4 +201,47 @@ pre {
.panel-default>.panel-heading {
cursor: pointer;
}
}
\ No newline at end of file
}
.custom-table {
width: 100%;
.custom-tr {
margin-left: 15px;
margin-right: 15px;
.custom-col-0,
.custom-col-1,
.custom-col-2 {
vertical-align: top;
display: inline-block;
textarea {
resize: vertical;
height: 34px;
min-height: 34px;
max-height: 70px;
}
}
.custom-col-0{
text-align: center;
vertical-align: middle;
width: 2%;
}
.custom-col-1{
width: 43%;
}
.custom-col-2{
text-align: center;
width: 10%;
}
}
}
.errorMsg {
color: $red;
}
dashboardv2/public/css/scss/override.scss
......@@ -128,6 +128,7 @@ td {
pre.scroll-y {
max-height: 200px;
overflow-y: auto;
word-break: break-word;
}
}
......@@ -469,4 +470,4 @@ div.columnmanager-dropdown-container {
.w30 {
width: 30% !important;
}
\ No newline at end of file
}
dashboardv2/public/css/scss/panel.scss
......@@ -118,4 +118,38 @@
}
}
}
}
\ No newline at end of file
}
.panel-default.custom-panel>.panel-heading {
color: $black;
cursor: pointer;
border-bottom: none;
display: inline-block;
.panel-title {
font-weight: normal;
a:hover {
color: $black;
opacity: 0.7;
}
}
.btn-group {
margin-top: 3px;
}
}
.panel-default.custom-panel>.panel-actions {
float: right;
margin-top: 15px;
button {
margin-right: 10px;
margin-top: -4px;
}
}
.panel-default.custom-panel>.panel-collapse>.panel-body {
border-top: none;
}
.panel-default.custom-panel>.panel-heading > .btn-group > button {
color: $black;
}
dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
......@@ -65,9 +65,16 @@
<div>
<div class="tab-content">
<div id="tab-details" role="properties" class="tab-pane active animated fadeIn">
<div id="r_entityDetailTableLayoutView">
<div class="fontLoader-relative">
<i class="fa fa-refresh fa-spin-custom"></i>
<div class="row">
<div class="col-md-6">
<div id="r_entityDetailTableLayoutView">
<div class="fontLoader-relative">
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
</div>
</div>
<div class="col-md-6">
<div id="r_entityUserDefineView"></div>
</div>
</div>
</div>
......@@ -122,4 +129,4 @@
</div>
</div>
</div>
</div>
\ No newline at end of file
</div>
dashboardv2/public/js/templates/entity/EntityDetailTableLayoutView_tmpl.html
......@@ -14,23 +14,33 @@
* See the License for the specific language governing permissions and
* limitations under the License.
-->
<div class="entity-detail-table">
<div class="entity-detail-table-toggle">
<div class="pretty p-switch p-fill">
<input type="checkbox" data-id="noValueToggle" />
<div class="state p-primary">
<label>Show Empty Values</label>
<div class="panel-group" id="accordion">
<div class="panel panel-default custom-panel expand_collapse_panel-icon" data-id="entity">
<div class="panel-heading" data-toggle="collapse" href="#collapse1" aria-expanded="true" style="width: 58%">
<h4 class="panel-title">
<a>Technical properties </a>
</h4>
<div class="btn-group pull-left">
<button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
</div>
</div>
<div class="panel-actions">
<div class="pretty p-switch p-fill">
<input type="checkbox" data-id="noValueToggle" />
<div class="state p-primary">
<label>Show Empty Values</label>
</div>
</div>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<div class="entity-detail-table">
<table class="table">
<tbody data-id="detailValue" class="hide-empty-value">
</tbody>
</table>
</div>
</div>
</div>
</div>
<table class="table table-quickMenu">
<thead>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
<tbody data-id="detailValue" class="hide-empty-value">
</tbody>
</table>
</div>
\ No newline at end of file
</div>
dashboardv2/public/js/templates/entity/EntityUserDefineItemView_tmpl.html 0 → 100644
<!--
* 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 data-id="userDefineItems">
<table class="custom-table">
{{#each items}}
<tr class="custom-tr">
<td class="custom-col-1">
<input placeholder="key" type="text" data-type="key" data-index={{@index}} class="form-control" value={{key}}></input>
<p class="errorMsg"></p>
</td >
<td class="custom-col-0"> : </td >
<td class="custom-col-1">
<textarea placeholder="value" data-type="value" data-index={{@index}} class="form-control" class="form-control">{{value}}</textarea>
<p class="errorMsg"></p>
</td >
<td class="custom-col-2">
<button class="btn btn-default btn-sm" title="" data-index={{@index}} data-id="deleteItem">
<i class="fa fa-minus"> </i>
</button>
<button class="btn btn-default btn-sm" title="" data-index={{@index}} data-id="addItem">
<i class="fa fa-plus"> </i>
</button>
</td >
</tr>
{{/each}}
{{#ifCond items.length "===" 0}}
No properties have been created yet. To add a property, click <a href="javascript:void(0)" data-id="addItem">here</a>
{{/ifCond}}
</table>
</div>
dashboardv2/public/js/templates/entity/EntityUserDefineView_tmpl.html 0 → 100644
<!--
* 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="panel-group" id="accordion">
<div class="panel panel-default custom-panel expand_collapse_panel-icon" data-id="userDefine">
{{#ifCond customAttibutes.length "===" 0}}
<div class="panel-heading collapsed" data-toggle="collapse" href="#collapse2" aria-expanded="false" style="width: 70%">
<h4 class="panel-title">
<a>User-defined properties </a>
</h4>
<div class="btn-group pull-left">
<button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
</div>
</div>
<div class="panel-actions">
{{#ifCond readOnlyEntity "===" false}}
<button class="btn btn-action btn-sm" data-id="editAttr" data-original-title="Add User-Defined"> Add</button>
{{/ifCond}}
</div>
{{else}}
<div class="panel-heading" data-toggle="collapse" href="#collapse2" aria-expanded="true" style="width: 60%">
<h4 class="panel-title">
<a>User-defined properties </a>
</h4>
<div class="btn-group pull-left">
<button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
</div>
</div>
<div class="panel-actions">
{{#ifCond readOnlyEntity "===" false}}
<button class="btn btn-action btn-sm" data-id="editAttr" data-original-title="Edit User-Defined Attributes">Edit</button>
{{/ifCond}}
</div>
{{/ifCond}}
<div id="collapse2" {{#ifCond customAttibutes.length "===" 0}} class="panel-collapse collapse" {{else}} class="panel-collapse collapse in" {{/ifCond}} >
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<div class="entity-detail-table">
<table class="table">
<tbody>
{{#each customAttibutes}}
<tr>
<td>
<div class="scroll-y">{{key}}</div> </div></td>
<td>
<div class="scroll-y">{{value}}</div>
</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
dashboardv2/public/js/templates/search/AdvancedSearchInfo_tmpl.html
......@@ -31,6 +31,6 @@
</li>
</ul>
<h5 style="padding-left: 22.5px;">
<a href="http://atlas.apache.org/#/SearchAdvance" target="_blank"><i class="fa fa-info-circle" aria-hidden="true"></i> &nbsp; More sample queries and use-cases</a>
<a href="http://atlas.apache.org/Search-Advanced.html" target="_blank"><i class="fa fa-info-circle" aria-hidden="true"></i> &nbsp; More sample queries and use-cases</a>
</h5>
</div>
\ No newline at end of file
dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js
......@@ -45,7 +45,8 @@ define(['require',
RAuditTableLayoutView: "#r_auditTableLayoutView",
RReplicationAuditTableLayoutView: "#r_replicationAuditTableLayoutView",
RProfileLayoutView: "#r_profileLayoutView",
RRelationshipLayoutView: "#r_relationshipLayoutView"
RRelationshipLayoutView: "#r_relationshipLayoutView",
REntityUserDefineView: "#r_entityUserDefineView",
},
/** ui selector cache */
ui: {
......@@ -243,6 +244,7 @@ define(['require',
})()
}
this.renderEntityDetailTableLayoutView(obj);
this.renderEntityUserDefineView(obj);
this.renderRelationshipLayoutView(obj);
this.renderAuditTableLayoutView(obj);
this.renderTagTableLayoutView(obj);
......@@ -484,6 +486,12 @@ define(['require',
that.REntityDetailTableLayoutView.show(new EntityDetailTableLayoutView(obj));
});
},
renderEntityUserDefineView: function(obj) {
var that = this;
require(['views/entity/EntityUserDefineView'], function(EntityUserDefineView) {
that.REntityUserDefineView.show(new EntityUserDefineView(obj));
});
},
renderTagTableLayoutView: function(obj) {
var that = this;
require(['views/tag/TagDetailTableLayoutView'], function(TagDetailTableLayoutView) {
......@@ -545,4 +553,4 @@ define(['require',
}
});
return DetailPageLayoutView;
});
\ No newline at end of file
});
dashboardv2/public/js/views/entity/EntityDetailTableLayoutView.js
......@@ -83,4 +83,4 @@ define(['require',
}
});
return EntityDetailTableLayoutView;
});
\ No newline at end of file
});
dashboardv2/public/js/views/entity/EntityUserDefineItemView.js 0 → 100644
/*
* 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/entity/EntityUserDefineItemView_tmpl'
], function(require, Backbone, EntityUserDefineItemView_tmpl) {
'use strict';
return Backbone.Marionette.ItemView.extend({
_viewName: 'EntityUserDefineItemView',
template: EntityUserDefineItemView_tmpl,
templateHelpers: function() {
return {
items: this.items
};
},
/** Layout sub regions */
regions: {},
/** ui selector cache */
ui: {
itemKey: "[data-type='key']",
itemValue: "[data-type='value']",
addItem: "[data-id='addItem']",
deleteItem: "[data-id='deleteItem']"
},
/** ui events hash */
events: function() {
var events = {};
events['input ' + this.ui.itemKey] = 'onItemKeyChange';
events['input ' + this.ui.itemValue] = 'onItemValueChange';
events['click ' + this.ui.addItem] = 'onAddItemClick';
events['click ' + this.ui.deleteItem] = 'onDeleteItemClick';
return events;
},
/**
* intialize a new GlobalExclusionComponentView Layout
* @constructs
*/
initialize: function(options) {
var that = this;
this.editMode = options.mode;
if (options.items.length === 0) {
this.items = [{ key: "", value: "", mode: this.editMode}];
} else {
this.items = options.items.map(function(m) {
m.mode = that.editMode;
return m;
});
}
},
onRender: function() {
},
onAddItemClick: function(e) {
var el = e.currentTarget;
this.items.splice(parseInt(el.dataset.index) + 1, 0, { key: "", value: "", mode: this.editMode});
this.render();
},
onDeleteItemClick: function(e) {
var el = e.currentTarget;
this.items.splice(el.dataset.index, 1);
this.render();
},
onItemKeyChange: function (e) {
var el = e.currentTarget;
var val = el.value;
this.items[ el.dataset.index].key = val;
},
onItemValueChange: function (e) {
var el = e.currentTarget;
var val = el.value;
this.items[ el.dataset.index].value = el.value;
}
});
});
dashboardv2/public/js/views/entity/EntityUserDefineView.js 0 → 100644
/**
* 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/entity/EntityUserDefineView_tmpl',
'views/entity/EntityUserDefineItemView',
'utils/CommonViewFunction',
'modules/Modal',
'models/VEntity',
'utils/Utils',
'utils/Enums'
], function(require, Backbone, EntityUserDefineView_tmpl, EntityUserDefineItemView, CommonViewFunction, Modal, VEntity, Utils, Enums) {
'use strict';
return Backbone.Marionette.LayoutView.extend({
_viewName: 'EntityUserDefineView',
template: EntityUserDefineView_tmpl,
templateHelpers: function() {
return {
customAttibutes: this.customAttibutes,
readOnlyEntity : this.readOnlyEntity
};
},
ui: {
addAttr: "[data-id='addAttr']",
editAttr: "[data-id='editAttr']",
deleteAttr: "[data-id='deleteAttr']"
},
events: function() {
var events = {};
events["click " + this.ui.editAttr] = 'onEditAttrClick';
return events;
},
initialize: function(options) {
_.extend(this, _.pick(options, 'entity'));
this.userDefineAttr = this.entity.customAttributes || [];
this.editMode = false;
this.readOnlyEntity = Enums.entityStateReadOnly[this.entity.status];
this.entityModel = new VEntity(this.entity);
this.generateTableFields();
},
onRender: function() {
},
bindEvents: {},
customAtributesFunc: function() {
},
generateTableFields: function() {
var that = this;
this.customAttibutes = [];
_.each(Object.keys(that.userDefineAttr), function(key, i) {
that.customAttibutes.push({
key: key,
value: that.userDefineAttr[key]
});
});
},
onEditAttrClick: function (e) {
this.editMode = true;
var options = {items: this.customAttibutes, mode: true};
var view = new EntityUserDefineItemView(options);
var modalObj = {
title: 'User-defined properties',
content: view,
okText: 'Save',
okCloses: false,
cancelText: "Cancel",
mainClass: 'modal-lg',
allowCancel: true,
};
this.setAttributeModal(modalObj);
},
structureAttributes: function (list) {
var obj={}
list.map(function (o) {
obj[o.key] = o.value;
});
return obj;
},
saveAttributes: function (list) {
var that = this;
var entityJson = that.entityModel.toJSON();
var properties = that.structureAttributes(list);
entityJson.customAttributes = properties;
var payload = {entity: entityJson};
that.entityModel.createOreditEntity({
data: JSON.stringify(payload),
type: 'POST',
success: function() {
var msg = "User-defined properties updated successfully";
that.customAttibutes = list;
Utils.notifySuccess({
content: msg
});
that.modal && that.modal.trigger('cancel');
that.render();
},
error: function (e) {
that.editMode = false;
Utils.notifySuccess({
content: e.message
});
that.modal && that.modal.$el.find('button.ok').attr("disabled", false);
},
complete: function () {
that.modal && that.modal.$el.find('button.ok').attr("disabled", false);
that.editMode = false;
}
});
},
setAttributeModal: function(modalObj) {
var self = this;
this.modal = new Modal(modalObj);
this.modal.open();
this. modal.on('ok', function() {
self.modal.$el.find('button.ok').attr("disabled", true);
var list = self.modal.$el.find("[data-type]"),
keyMap = new Map(),
validation = true,
hasDup = [],
dataList = [];
Array.prototype.push.apply(dataList, self.modal.options.content.items);
for(var i = 0; i < list.length ; i++) {
var input = list[i],
type = input.dataset.type,
pEl = self.modal.$el.find(input.parentElement).find('p'),
classes = 'form-control',
val = input.value.trim();
pEl[0].innerText = "";
if (val === '') {
classes = 'form-control errorClass';
validation = false;
pEl[0].innerText = 'Required!';
} else {
if (input.tagName === 'INPUT') {
var duplicates = dataList.filter(function(c) {
return c.key === val;
});
if (keyMap.has(val) || duplicates.length > 1 ) {
classes = 'form-control errorClass';
hasDup.push('duplicate');
pEl[0].innerText = 'Duplicate key';
} else {
keyMap.set(val, val);
}
}
}
input.setAttribute('class', classes);
}
if (validation && hasDup.length === 0) {
self.saveAttributes(self.modal.options.content.items);
} else {
self.modal.$el.find('button.ok').attr("disabled", false);
}
});
this.modal.on('closeModal', function() {
self.editMode = false;
self.modal.trigger('cancel');
});
},
enableModalButton: function () {
var self = this;
self.modal.$el.find('button.ok').attr("disabled", false);
}
});
});
dashboardv3/public/css/scss/common.scss
......@@ -201,3 +201,46 @@ pre {
bottom: 0;
background: white;
}
.custom-table {
width: 100%;
.custom-tr {
margin-left: 15px;
margin-right: 15px;
.custom-col-0,
.custom-col-1,
.custom-col-2 {
vertical-align: top;
display: inline-block;
textarea {
resize: vertical;
height: 34px;
min-height: 34px;
max-height: 70px;
}
}
.custom-col-0{
text-align: center;
vertical-align: middle;
width: 2%;
}
.custom-col-1{
width: 43%;
}
.custom-col-2{
text-align: center;
width: 10%;
}
}
}
.errorMsg {
color: $red;
}
dashboardv3/public/css/scss/panel.scss
......@@ -134,4 +134,38 @@
}
}
}
}
\ No newline at end of file
}
.panel-default.custom-panel>.panel-heading {
color: $black;
cursor: pointer;
border-bottom: none;
display: inline-block;
.panel-title {
font-weight: normal;
a:hover {
color: $black;
opacity: 0.7;
}
}
.btn-group {
margin-top: 3px;
}
}
.panel-default.custom-panel>.panel-actions {
float: right;
margin-top: 15px;
button {
margin-right: 10px;
margin-top: -4px;
}
}
.panel-default.custom-panel>.panel-collapse>.panel-body {
border-top: none;
}
.panel-default.custom-panel>.panel-heading > .btn-group > button {
color: $black;
}
dashboardv3/public/css/scss/table.scss
......@@ -212,6 +212,7 @@ td {
pre.scroll-y {
max-height: 200px;
overflow-y: auto;
word-break: break-word;
}
&.searchTableName {
......
dashboardv3/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
......@@ -68,9 +68,16 @@
<div>
<div class="tab-content">
<div id="tab-details" role="properties" class="tab-pane active animated fadeIn">
<div id="r_entityDetailTableLayoutView">
<div class="fontLoader-relative">
<i class="fa fa-refresh fa-spin-custom"></i>
<div class="row">
<div class="col-md-6">
<div id="r_entityDetailTableLayoutView">
<div class="fontLoader-relative">
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
</div>
</div>
<div class="col-md-6">
<div id="r_entityUserDefineView"></div>
</div>
</div>
</div>
......@@ -125,4 +132,4 @@
</div>
</div>
</div>
</div>
\ No newline at end of file
</div>
dashboardv3/public/js/templates/entity/EntityDetailTableLayoutView_tmpl.html
......@@ -14,23 +14,33 @@
* See the License for the specific language governing permissions and
* limitations under the License.
-->
<div class="entity-detail-table">
<div class="entity-detail-table-toggle">
<div class="pretty p-switch p-fill">
<input type="checkbox" data-id="noValueToggle" />
<div class="state p-primary">
<label>Show Empty Values</label>
<div class="panel-group" id="accordion">
<div class="panel panel-default custom-panel expand_collapse_panel-icon" data-id="entity">
<div class="panel-heading" data-toggle="collapse" href="#collapse1" aria-expanded="true" style="width: 58%">
<h4 class="panel-title">
<a>Technical properties </a>
</h4>
<div class="btn-group pull-left">
<button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
</div>
</div>
<div class="panel-actions">
<div class="pretty p-switch p-fill">
<input type="checkbox" data-id="noValueToggle" />
<div class="state p-primary">
<label>Show Empty Values</label>
</div>
</div>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<div class="entity-detail-table">
<table class="table">
<tbody data-id="detailValue" class="hide-empty-value">
</tbody>
</table>
</div>
</div>
</div>
</div>
<table class="table table-quickMenu">
<thead>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
<tbody data-id="detailValue" class="hide-empty-value">
</tbody>
</table>
</div>
\ No newline at end of file
</div>
dashboardv3/public/js/templates/entity/EntityUserDefineItemView_tmpl.html 0 → 100644
<!--
* 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 data-id="userDefineItems">
<table class="custom-table">
{{#each items}}
<tr class="custom-tr">
<td class="custom-col-1">
<input placeholder="key" type="text" data-type="key" data-index={{@index}} class="form-control" value={{key}}></input>
<p class="errorMsg"></p>
</td >
<td class="custom-col-0"> : </td >
<td class="custom-col-1">
<textarea placeholder="value" data-type="value" data-index={{@index}} class="form-control" class="form-control">{{value}}</textarea>
<p class="errorMsg"></p>
</td >
<td class="custom-col-2">
<button class="btn btn-default btn-sm" title="" data-index={{@index}} data-id="deleteItem">
<i class="fa fa-minus"> </i>
</button>
<button class="btn btn-default btn-sm" title="" data-index={{@index}} data-id="addItem">
<i class="fa fa-plus"> </i>
</button>
</td >
</tr>
{{/each}}
{{#ifCond items.length "===" 0}}
No properties have been created yet. To add a property, click <a href="javascript:void(0)" data-id="addItem">here</a>
{{/ifCond}}
</table>
</div>
dashboardv3/public/js/templates/entity/EntityUserDefineView_tmpl.html 0 → 100644
<!--
* 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="panel-group" id="accordion">
<div class="panel panel-default custom-panel expand_collapse_panel-icon" data-id="userDefine">
{{#ifCond customAttibutes.length "===" 0}}
<div class="panel-heading collapsed" data-toggle="collapse" href="#collapse2" aria-expanded="false" style="width: 70%">
<h4 class="panel-title">
<a>User-defined properties </a>
</h4>
<div class="btn-group pull-left">
<button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
</div>
</div>
<div class="panel-actions">
{{#ifCond readOnlyEntity "===" false}}
<button class="btn btn-action btn-sm" data-id="editAttr" data-original-title="Add User-Defined"> Add</button>
{{/ifCond}}
</div>
{{else}}
<div class="panel-heading" data-toggle="collapse" href="#collapse2" aria-expanded="true" style="width: 60%">
<h4 class="panel-title">
<a>User-defined properties </a>
</h4>
<div class="btn-group pull-left">
<button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
</div>
</div>
<div class="panel-actions">
{{#ifCond readOnlyEntity "===" false}}
<button class="btn btn-action btn-sm" data-id="editAttr" data-original-title="Edit User-Defined Attributes">Edit</button>
{{/ifCond}}
</div>
{{/ifCond}}
<div id="collapse2" {{#ifCond customAttibutes.length "===" 0}} class="panel-collapse collapse" {{else}} class="panel-collapse collapse in" {{/ifCond}} >
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<div class="entity-detail-table">
<table class="table">
{{#ifCond customAttibutes.length "===" 0}}
<span>No properties have been created yet.
{{#ifCond readOnlyEntity "==" false}}
<span>To add a property, click <a href="javascript:void(0)" data-id="editAttr">here</a></span>
{{/ifCond}}
</span>
{{/ifCond}}
<tbody>
{{#each customAttibutes}}
<tr>
<td>
<div class="scroll-y">{{key}}</div> </div></td>
<td>
<div class="scroll-y">{{value}}</div>
</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
dashboardv3/public/js/views/detail_page/DetailPageLayoutView.js
......@@ -45,7 +45,8 @@ define(['require',
RAuditTableLayoutView: "#r_auditTableLayoutView",
RReplicationAuditTableLayoutView: "#r_replicationAuditTableLayoutView",
RProfileLayoutView: "#r_profileLayoutView",
RRelationshipLayoutView: "#r_relationshipLayoutView"
RRelationshipLayoutView: "#r_relationshipLayoutView",
REntityUserDefineView: "#r_entityUserDefineView",
},
/** ui selector cache */
ui: {
......@@ -249,6 +250,7 @@ define(['require',
})()
}
this.renderEntityDetailTableLayoutView(obj);
this.renderEntityUserDefineView(obj);
this.renderRelationshipLayoutView(obj);
this.renderAuditTableLayoutView(obj);
this.renderTagTableLayoutView(obj);
......@@ -496,6 +498,12 @@ define(['require',
that.REntityDetailTableLayoutView.show(new EntityDetailTableLayoutView(obj));
});
},
renderEntityUserDefineView: function(obj) {
var that = this;
require(['views/entity/EntityUserDefineView'], function(EntityUserDefineView) {
that.REntityUserDefineView.show(new EntityUserDefineView(obj));
});
},
renderTagTableLayoutView: function(obj) {
var that = this;
require(['views/tag/TagDetailTableLayoutView'], function(TagDetailTableLayoutView) {
......@@ -558,4 +566,4 @@ define(['require',
}
});
return DetailPageLayoutView;
});
\ No newline at end of file
});
dashboardv3/public/js/views/entity/EntityDetailTableLayoutView.js
......@@ -83,4 +83,4 @@ define(['require',
}
});
return EntityDetailTableLayoutView;
});
\ No newline at end of file
});
dashboardv3/public/js/views/entity/EntityUserDefineItemView.js 0 → 100644
/*
* 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/entity/EntityUserDefineItemView_tmpl'
], function(require, Backbone, EntityUserDefineItemView_tmpl) {
'use strict';
return Backbone.Marionette.ItemView.extend({
_viewName: 'EntityUserDefineItemView',
template: EntityUserDefineItemView_tmpl,
templateHelpers: function() {
return {
items: this.items
};
},
/** Layout sub regions */
regions: {},
/** ui selector cache */
ui: {
itemKey: "[data-type='key']",
itemValue: "[data-type='value']",
addItem: "[data-id='addItem']",
deleteItem: "[data-id='deleteItem']"
},
/** ui events hash */
events: function() {
var events = {};
events['input ' + this.ui.itemKey] = 'onItemKeyChange';
events['input ' + this.ui.itemValue] = 'onItemValueChange';
events['click ' + this.ui.addItem] = 'onAddItemClick';
events['click ' + this.ui.deleteItem] = 'onDeleteItemClick';
return events;
},
/**
* intialize a new GlobalExclusionComponentView Layout
* @constructs
*/
initialize: function(options) {
var that = this;
this.editMode = options.mode;
if (options.items.length === 0) {
this.items = [{ key: "", value: "", mode: this.editMode}];
} else {
this.items = options.items.map(function(m) {
m.mode = that.editMode;
return m;
});
}
},
onRender: function() {
},
onAddItemClick: function(e) {
var el = e.currentTarget;
this.items.splice(parseInt(el.dataset.index) + 1, 0, { key: "", value: "", mode: this.editMode});
this.render();
},
onDeleteItemClick: function(e) {
var el = e.currentTarget;
this.items.splice(el.dataset.index, 1);
this.render();
},
onItemKeyChange: function (e) {
var el = e.currentTarget;
var val = el.value;
this.items[ el.dataset.index].key = val;
},
onItemValueChange: function (e) {
var el = e.currentTarget;
var val = el.value;
this.items[ el.dataset.index].value = el.value;
}
});
});
dashboardv3/public/js/views/entity/EntityUserDefineView.js 0 → 100644
/**
* 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/entity/EntityUserDefineView_tmpl',
'views/entity/EntityUserDefineItemView',
'utils/CommonViewFunction',
'modules/Modal',
'models/VEntity',
'utils/Utils',
'utils/Enums'
], function(require, Backbone, EntityUserDefineView_tmpl, EntityUserDefineItemView, CommonViewFunction, Modal, VEntity, Utils, Enums) {
'use strict';
return Backbone.Marionette.LayoutView.extend({
_viewName: 'EntityUserDefineView',
template: EntityUserDefineView_tmpl,
templateHelpers: function() {
return {
customAttibutes: this.customAttibutes,
readOnlyEntity : this.readOnlyEntity
};
},
ui: {
addAttr: "[data-id='addAttr']",
editAttr: "[data-id='editAttr']",
deleteAttr: "[data-id='deleteAttr']"
},
events: function() {
var events = {};
events["click " + this.ui.editAttr] = 'onEditAttrClick';
return events;
},
initialize: function(options) {
_.extend(this, _.pick(options, 'entity'));
this.userDefineAttr = this.entity.customAttributes || [];
this.editMode = false;
this.readOnlyEntity = Enums.entityStateReadOnly[this.entity.status];
this.entityModel = new VEntity(this.entity);
this.generateTableFields();
},
onRender: function() {
},
bindEvents: {},
customAtributesFunc: function() {
},
generateTableFields: function() {
var that = this;
this.customAttibutes = [];
_.each(Object.keys(that.userDefineAttr), function(key, i) {
that.customAttibutes.push({
key: key,
value: that.userDefineAttr[key]
});
});
},
onEditAttrClick: function (e) {
this.editMode = true;
var options = {items: this.customAttibutes, mode: true};
var view = new EntityUserDefineItemView(options);
var modalObj = {
title: 'User-defined properties',
content: view,
okText: 'Save',
okCloses: false,
cancelText: "Cancel",
mainClass: 'modal-lg',
allowCancel: true,
};
this.setAttributeModal(modalObj);
},
structureAttributes: function (list) {
var obj={}
list.map(function (o) {
obj[o.key] = o.value;
});
return obj;
},
saveAttributes: function (list) {
var that = this;
var entityJson = that.entityModel.toJSON();
var properties = that.structureAttributes(list);
entityJson.customAttributes = properties;
var payload = {entity: entityJson};
that.entityModel.createOreditEntity({
data: JSON.stringify(payload),
type: 'POST',
success: function() {
var msg = "User-defined properties updated successfully";
that.customAttibutes = list;
Utils.notifySuccess({
content: msg
});
that.modal && that.modal.trigger('cancel');
that.render();
},
error: function (e) {
that.editMode = false;
Utils.notifySuccess({
content: e.message
});
that.modal && that.modal.$el.find('button.ok').attr("disabled", false);
},
complete: function () {
that.modal && that.modal.$el.find('button.ok').attr("disabled", false);
that.editMode = false;
}
});
},
setAttributeModal: function(modalObj) {
var self = this;
this.modal = new Modal(modalObj);
this.modal.open();
this. modal.on('ok', function() {
self.modal.$el.find('button.ok').attr("disabled", true);
var list = self.modal.$el.find("[data-type]"),
keyMap = new Map(),
validation = true,
hasDup = [],
dataList = [];
Array.prototype.push.apply(dataList, self.modal.options.content.items);
for(var i = 0; i < list.length ; i++) {
var input = list[i],
type = input.dataset.type,
pEl = self.modal.$el.find(input.parentElement).find('p'),
classes = 'form-control',
val = input.value.trim();
pEl[0].innerText = "";
if (val === '') {
classes = 'form-control errorClass';
validation = false;
pEl[0].innerText = 'Required!';
} else {
if (input.tagName === 'INPUT') {
var duplicates = dataList.filter(function(c) {
return c.key === val;
});
if (keyMap.has(val) || duplicates.length > 1 ) {
classes = 'form-control errorClass';
hasDup.push('duplicate');
pEl[0].innerText = 'Duplicate key';
} else {
keyMap.set(val, val);
}
}
}
input.setAttribute('class', classes);
}
if (validation && hasDup.length === 0) {
self.saveAttributes(self.modal.options.content.items);
} else {
self.modal.$el.find('button.ok').attr("disabled", false);
}
});
this.modal.on('closeModal', function() {
self.editMode = false;
self.modal.trigger('cancel');
});
},
enableModalButton: function () {
var self = this;
self.modal.$el.find('button.ok').attr("disabled", false);
}
});
});
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