Skip to content

Commit

Permalink
ATLAS-4466:#2 UI: Add additional attributes on term detail page
Browse files Browse the repository at this point in the history
Signed-off-by: Pinal Shah <pinal.shah@freestoneinfotech.com>
  • Loading branch information
pawarprasad123 authored and pinal-shah committed Dec 6, 2021
1 parent bc2e13c commit 2543b19
Show file tree
Hide file tree
Showing 8 changed files with 322 additions and 0 deletions.
Expand Up @@ -64,6 +64,7 @@ <h1 class="row title"><span data-id="title"></span></h1>
<div class="col-sm-12 default-tab">
<ul class="nav nav-tabs" data-id="tab-list">
<li role="entities" class="tab active"><a href="#tab-entities" aria-controls="tab-entities" role="tab" data-toggle="tab">Entities</a></li>
<li role="entities" class="tab"><a href="#tab-entitiesProperties" aria-controls="tab-entities" role="tab" data-toggle="tab">Properties</a></li>
<li role="classification"><a href="#tab-tagTable" aria-controls="tab-tagTable" role="tab" data-toggle="tab">Classifications</a></li>
<li role="relatedTerm"><a href="#tab-relatedTerm" aria-controls="tab-relatedTerm" role="tab" data-toggle="tab">Related Terms</a></li>
</ul>
Expand All @@ -74,6 +75,13 @@ <h1 class="row title"><span data-id="title"></span></h1>
</div>
{{#if isTermView}}
<div class="tab-content">
<div id="tab-entitiesProperties" role="entitiesProperties" class="tab-pane animated fadeIn">
<div id="r_termProperties">
<div class="fontLoader-relative">
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
</div>
</div>
<div id="tab-entities" role="entities" class="tab-pane active animated fadeIn">
<div id="r_searchResultLayoutView">
<div class="fontLoader-relative">
Expand Down
@@ -0,0 +1,30 @@
<!--
* 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="col-sm-12 server-stats-container">
<div class="card-container panel panel-default custom-panel panel-primary">
<div class="panel-heading"><a>Additional Properties</a></div>
<div class="panel-body">
<table class="table stat-table">
<tbody data-id="properties-card">
<tr class="empty text-center">
<td colspan="2"><span><i>No records found!</i></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
10 changes: 10 additions & 0 deletions dashboardv2/public/js/views/glossary/GlossaryDetailLayoutView.js
Expand Up @@ -36,6 +36,7 @@ define(['require',

/** Layout sub regions */
regions: {
RTermProperties: "#r_termProperties",
RSearchResultLayoutView: "#r_searchResultLayoutView",
RTagTableLayoutView: "#r_tagTableLayoutView",
RRelationLayoutView: "#r_relationLayoutView"
Expand Down Expand Up @@ -279,6 +280,7 @@ define(['require',
that.selectedTermAttribute = val;
}
}
that.renderTermPropertiestLayoutView(that.data);
that.renderSearchResultLayoutView(obj);
that.renderTagTableLayoutView(obj);
that.renderRelationLayoutView(obj);
Expand Down Expand Up @@ -480,6 +482,14 @@ define(['require',
}
});
},
renderTermPropertiestLayoutView: function(options) {
var that = this;
require(['views/glossary/TermPropertiestLayoutView'], function(TermPropertiestLayoutView) {
if (that.RTermProperties) {
that.RTermProperties.show(new TermPropertiestLayoutView(options));
}
});
},
renderSearchResultLayoutView: function(options) {
var that = this;
require(['views/search/SearchResultLayoutView'], function(SearchResultLayoutView) {
Expand Down
113 changes: 113 additions & 0 deletions dashboardv2/public/js/views/glossary/TermPropertiestLayoutView.js
@@ -0,0 +1,113 @@
/**
* 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/glossary/TermPropertiestLayoutView_tmpl',
'utils/Utils',
'utils/Enums'
], function(require, Backbone, TermPropertiestLayoutView_tmpl, Utils, Enums) {
'use strict';

var TermPropertiestLayoutView = Backbone.Marionette.LayoutView.extend(
/** @lends TermPropertiestLayoutView */
{
_viewName: 'TermPropertiestLayoutView',

template: TermPropertiestLayoutView_tmpl,

/** Layout sub regions */
regions: {},

/** ui selector cache */
ui: {
propertiesCard: "[data-id='properties-card']"
},
/** ui events hash */
events: function() {},
/**
* intialize a new TermPropertiestLayoutView Layout
* @constructs
*/
initialize: function(options) {
_.extend(this, options);

},
onRender: function() {
this.renderStats();
},
bindEvents: function() {},
genrateStatusData: function(stateObject) {
var that = this,
stats = {};
_.each(stateObject, function(val, key) {
var keys = key.split(":"),
key = keys[0],
subKey = keys[1];
if (stats[key]) {
stats[key][subKey] = val;
} else {
stats[key] = {};
stats[key][subKey] = val;
}
});
return stats;
},
getValue: function(options) {
var value = options.value,
type = options.type;
if (type == 'time') {
return Utils.millisecondsToTime(value);
} else if (type == 'day') {
return Utils.formatDate({ date: value })
} else if (type == 'number') {
return _.numberFormatWithComma(value);
} else if (type == 'millisecond') {
return _.numberFormatWithComma(value) + " millisecond/s";
} else if (type == "status-html") {
return '<span class="connection-status ' + value + '"></span>';
} else {
return value;
}
},
renderStats: function() {
var that = this,
generalData = this.dataObject,
createTable = function(obj) {
var tableBody = '',
enums = obj.enums;
_.each(obj.data, function(value, key, list) {
tableBody += '<tr><td>' + key + '</td><td class="">' + that.getValue({
"value": value,
"type": enums[key]
}) + '</td></tr>';
});
return tableBody;
};
if (that.options.additionalAttributes) {
that.ui.propertiesCard.html(
createTable({
"enums": _.extend(Enums.stats.Server, Enums.stats.ConnectionStatus, Enums.stats.generalData),
"data":that.options.additionalAttributes
})
);
}
}
});
return TermPropertiestLayoutView;
});
Expand Up @@ -67,6 +67,7 @@ <h1 class="title"><span data-id="title"></span></h1>
<div class="col-sm-12 default-tab no-padding">
<ul class="nav nav-tabs" data-id="tab-list">
<li role="entities" class="tab active"><a href="#tab-entities" aria-controls="tab-entities" role="tab" data-toggle="tab">Entities</a></li>
<li role="entities" class="tab"><a href="#tab-entitiesProperties" aria-controls="tab-entities" role="tab" data-toggle="tab">Properties</a></li>
<li role="classification"><a href="#tab-tagTable" aria-controls="tab-tagTable" role="tab" data-toggle="tab">Classifications</a></li>
<li role="relatedTerm"><a href="#tab-relatedTerm" aria-controls="tab-relatedTerm" role="tab" data-toggle="tab">Related Terms</a></li>
</ul>
Expand All @@ -77,6 +78,13 @@ <h1 class="title"><span data-id="title"></span></h1>
</div>
{{#if isTermView}}
<div class="tab-content">
<div id="tab-entitiesProperties" role="entitiesProperties" class="tab-pane animated fadeIn">
<div id="r_termProperties">
<div class="fontLoader-relative">
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
</div>
</div>
<div id="tab-entities" role="entities" class="tab-pane active animated fadeIn">
<div id="r_searchResultLayoutView">
<div class="fontLoader-relative">
Expand Down
@@ -0,0 +1,30 @@
<!--
* 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="col-sm-12 server-stats-container">
<div class="card-container panel panel-default custom-panel panel-primary">
<div class="panel-heading"><a>Additional Properties</a></div>
<div class="panel-body">
<table class="table stat-table">
<tbody data-id="properties-card">
<tr class="empty text-center">
<td colspan="2"><span><i>No records found!</i></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
10 changes: 10 additions & 0 deletions dashboardv3/public/js/views/glossary/GlossaryDetailLayoutView.js
Expand Up @@ -36,6 +36,7 @@ define(['require',

/** Layout sub regions */
regions: {
RTermProperties: "#r_termProperties",
RSearchResultLayoutView: "#r_searchResultLayoutView",
RTagTableLayoutView: "#r_tagTableLayoutView",
RRelationLayoutView: "#r_relationLayoutView"
Expand Down Expand Up @@ -294,6 +295,7 @@ define(['require',
that.selectedTermAttribute = val;
}
}
that.renderTermPropertiestLayoutView(that.data);
that.renderSearchResultLayoutView(obj);
that.renderTagTableLayoutView(obj);
that.renderRelationLayoutView(obj);
Expand Down Expand Up @@ -495,6 +497,14 @@ define(['require',
}
});
},
renderTermPropertiestLayoutView: function(options) {
var that = this;
require(['views/glossary/TermPropertiestLayoutView'], function(TermPropertiestLayoutView) {
if (that.RTermProperties) {
that.RTermProperties.show(new TermPropertiestLayoutView(options));
}
});
},
renderSearchResultLayoutView: function(options) {
var that = this;

Expand Down
113 changes: 113 additions & 0 deletions dashboardv3/public/js/views/glossary/TermPropertiestLayoutView.js
@@ -0,0 +1,113 @@
/**
* 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/glossary/TermPropertiestLayoutView_tmpl',
'utils/Utils',
'utils/Enums'
], function(require, Backbone, TermPropertiestLayoutView_tmpl, Utils, Enums) {
'use strict';

var TermPropertiestLayoutView = Backbone.Marionette.LayoutView.extend(
/** @lends TermPropertiestLayoutView */
{
_viewName: 'TermPropertiestLayoutView',

template: TermPropertiestLayoutView_tmpl,

/** Layout sub regions */
regions: {},

/** ui selector cache */
ui: {
propertiesCard: "[data-id='properties-card']"
},
/** ui events hash */
events: function() {},
/**
* intialize a new TermPropertiestLayoutView Layout
* @constructs
*/
initialize: function(options) {
_.extend(this, options);

},
onRender: function() {
this.renderStats();
},
bindEvents: function() {},
genrateStatusData: function(stateObject) {
var that = this,
stats = {};
_.each(stateObject, function(val, key) {
var keys = key.split(":"),
key = keys[0],
subKey = keys[1];
if (stats[key]) {
stats[key][subKey] = val;
} else {
stats[key] = {};
stats[key][subKey] = val;
}
});
return stats;
},
getValue: function(options) {
var value = options.value,
type = options.type;
if (type == 'time') {
return Utils.millisecondsToTime(value);
} else if (type == 'day') {
return Utils.formatDate({ date: value })
} else if (type == 'number') {
return _.numberFormatWithComma(value);
} else if (type == 'millisecond') {
return _.numberFormatWithComma(value) + " millisecond/s";
} else if (type == "status-html") {
return '<span class="connection-status ' + value + '"></span>';
} else {
return value;
}
},
renderStats: function() {
var that = this,
generalData = this.dataObject,
createTable = function(obj) {
var tableBody = '',
enums = obj.enums;
_.each(obj.data, function(value, key, list) {
tableBody += '<tr><td>' + key + '</td><td class="">' + that.getValue({
"value": value,
"type": enums[key]
}) + '</td></tr>';
});
return tableBody;
};
if (that.options.additionalAttributes) {
that.ui.propertiesCard.html(
createTable({
"enums": _.extend(Enums.stats.Server, Enums.stats.ConnectionStatus, Enums.stats.generalData),
"data":that.options.additionalAttributes
})
);
}
}
});
return TermPropertiestLayoutView;
});

0 comments on commit 2543b19

Please sign in to comment.