Skip to content

A
atlas
Commit e04c4f5c by kevalbhatt
Options

ATLAS-3596: UI: Improved System attribute presentation for user friendliness

parent 4d44690a
Showing with 313 additions and 28 deletions
dashboardv2/public/css/scss/override.scss
......@@ -294,6 +294,21 @@ td {
.query-builder {
.rule-container {
margin: 6px 0;
display: flex;
flex-wrap: wrap;
.values-box {
display: flex;
flex-grow: 1;
width: 100%;
padding-right: 26px;
}
.action-box {
position: absolute;
right: 4px;
top: calc(50% - 18px);
}
.rule-header {
.rule-actions {
......@@ -301,24 +316,34 @@ td {
}
}
.error-container {
color: $color_trinidad_approx;
}
.rule-value-container {
display: inline-block !important;
border-left: none;
width: calc(65% - 105px);
.form-control {
width: 220px !important;
width: 100% !important;
padding: 6px 12px !important;
}
}
.rule-filter-container {
width: 35%;
.form-control {
width: 200px !important;
width: 100% !important;
}
}
.rule-operator-container {
width: 105px;
.form-control {
width: auto !important;
width: 100% !important;
}
}
}
......
dashboardv2/public/css/scss/search.scss
......@@ -57,7 +57,7 @@ $color_celeste_approx: #1D1F2B;
background-color: $color_jungle_green_approx;
border-radius: 10px;
box-shadow: inset 0 1px rgba(black, .02);
@include transition(inherit)
@include transition(inherit);
}
.switch-input:checked~& {
......@@ -240,6 +240,47 @@ hr.hr-filter {
}
}
.filter-btn-wrapper {
padding-left: 0;
.query-builder {
.rule-container {
&.user-define {
.values-box {
display: flex;
flex-wrap: wrap;
.rule-filter-container {
width: 200px;
}
.rule-value-container {
width: 100%;
padding: 7px 0px 0px 0px;
}
}
}
.rule-value-container {
&>table.custom-table {
tr {
display: none;
&.custom-tr {
display: table-row;
td.custom-col-1 {
width: 48%;
.errorMsg {
display: none;
}
}
}
}
input,
textarea {
width: 100% !important;
}
}
}
}
}
\ No newline at end of file
dashboardv2/public/js/templates/search/UserDefine_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.
-->
<table class="custom-table">
<tbody>
<tr class="custom-tr">
<td class="custom-col-1">
<input placeholder="key" type="text" data-type="key" data-index="0" class="form-control" value="">
<p class="errorMsg"></p>
</td>
<td class="custom-col-0"> : </td>
<td class="custom-col-1">
<textarea placeholder="value" data-type="value" data-index="0" class="form-control"></textarea>
<p class="errorMsg"></p>
</td>
<!-- <td class="custom-col-2">
<button class="btn btn-default btn-sm" title="" data-index="0" data-id="deleteUserDefineItem">
<i class="fa fa-minus"> </i>
</button>
<button class="btn btn-default btn-sm" title="" data-index="0" data-id="addUserDefineItem">
<i class="fa fa-plus"> </i>
</button>
</td> -->
</tr>
<tr>
<td colspan="4">
<p class="errorMsg" data-id="charSupportMsg"></p>
</td>
</tr>
</tbody>
</table>
\ No newline at end of file
dashboardv2/public/js/utils/Enums.js
......@@ -194,8 +194,8 @@ define(['require'], function(require) {
};
Enums.systemAttributes = {
"__classificationNames": "Classification(s)",
"__createdBy": "Created By",
"__customAttributes": "User-defined attributes",
"__createdBy": "Created By User",
"__customAttributes": "User-defined Properties",
"__guid": "Guid",
"__isIncomplete": "IsIncomplete",
"__labels": "Label(s)",
......
dashboardv2/public/js/views/entity/EntityUserDefineView.js
......@@ -54,7 +54,7 @@ define(['require',
},
initialize: function(options) {
_.extend(this, _.pick(options, 'entity', 'customFilter'));
this.userDefineAttr = this.entity.customAttributes || [];
this.userDefineAttr = this.entity && this.entity.customAttributes || [];
this.initialCall = false;
this.swapItem = false, this.saveAttrItems = false;
this.readOnlyEntity = this.customFilter === undefined ? Enums.entityStateReadOnly[this.entity.status] : this.customFilter;
......@@ -123,7 +123,7 @@ define(['require',
data: JSON.stringify(payload),
type: 'POST',
success: function() {
var msg = _.isEmpty(that.customAttibutes) ? 'addSuccessMessage' : 'editSuccessMessage',
var msg = that.initialCall ? 'addSuccessMessage' : 'editSuccessMessage',
caption = "One or more user-defined propertie"; // 's' will be added in abbreviation function
that.customAttibutes = list;
if (list.length === 0) {
......
dashboardv2/public/js/views/search/SearchQueryView.js
......@@ -89,7 +89,8 @@ define(['require',
entityDefCollection: this.entityDefCollection,
enumDefCollection: this.enumDefCollection,
classificationDefCollection: this.classificationDefCollection,
searchTableFilters: this.searchTableFilters
searchTableFilters: this.searchTableFilters,
typeHeaders: this.typeHeaders
}
if (this.tag) {
......
dashboardv2/public/js/views/search/SearchResultLayoutView.js
......@@ -807,6 +807,9 @@ define(['require',
}
return;
}
if (key == "__historicalGuids" || key == "__classificationsText" || key == "__classificationNames" || key == "__propagatedClassificationNames") {
return;
}
col[obj.name] = {
label: Enums.systemAttributes[obj.name] ? Enums.systemAttributes[obj.name] : _.escape(obj.name).capitalize(),
cell: "Html",
......@@ -826,6 +829,28 @@ define(['require',
'valueObject': {},
'isTable': false
};
if (key == "__labels") {
var values = modelObj.attributes[key] ? modelObj.attributes[key].split("|") : null,
valueOfArray = [];
if (values) {
if (values[values.length - 1] === "") { values.pop(); }
if (values[0] === "") { values.shift(); }
_.each(values, function(names) {
valueOfArray.push('<span class="json-string"><a class="btn btn-action btn-sm btn-blue btn-icon" ><span title="" data-original-title="' + names + '" >' + names + '</span></a></span>');
});
return valueOfArray.join(' ');
}
}
if (key == "__customAttributes") {
var customAttributes = modelObj.attributes[key] ? JSON.parse(modelObj.attributes[key]) : null,
valueOfArray = [];
if (customAttributes) {
_.each(Object.keys(customAttributes), function(value, index) {
valueOfArray.push('<span class="json-string"><a class="btn btn-action btn-sm btn-blue btn-icon" ><span title="" data-original-title="' + value + ' : ' + Object.values(customAttributes)[index] + '" ><span>' + value + '</span> : <span>' + Object.values(customAttributes)[index] + '</span></span></a></span>');
});
return valueOfArray.join(' ');
}
}
tempObj.valueObject[key] = modelObj.attributes[key];
var tablecolumn = CommonViewFunction.propertyTable(tempObj);
if (_.isArray(modelObj.attributes[key])) {
......
dashboardv3/public/css/scss/override.scss
......@@ -246,6 +246,21 @@
.query-builder {
.rule-container {
margin: 6px 0;
display: flex;
flex-wrap: wrap;
.values-box {
display: flex;
flex-grow: 1;
width: 100%;
padding-right: 26px;
}
.action-box {
position: absolute;
right: 4px;
top: calc(50% - 18px);
}
.rule-header {
.rule-actions {
......@@ -253,24 +268,34 @@
}
}
.error-container {
color: $color_trinidad_approx;
}
.rule-value-container {
display: inline-block !important;
border-left: none;
width: calc(65% - 105px);
.form-control {
width: 220px !important;
width: 100% !important;
padding: 6px 12px !important;
}
}
.rule-filter-container {
width: 35%;
.form-control {
width: 200px !important;
width: 100% !important;
}
}
.rule-operator-container {
width: 105px;
.form-control {
width: auto !important;
width: 100% !important;
}
}
}
......
dashboardv3/public/css/scss/search.scss
......@@ -425,10 +425,10 @@ hr.hr-filter {
padding: 0px 15px;
}
.attribute-result-footer,
.attribute-edit-footer {
display: inline-block;
}
// .attribute-result-footer,
// .attribute-edit-footer {
// display: inline-block;
// }
}
.filter-box {
......@@ -478,3 +478,48 @@ hr.hr-filter {
min-height: 190px;
}
}
.query-builder {
.rule-container {
&.user-define {
.values-box {
display: flex;
flex-wrap: wrap;
.rule-filter-container {
width: 200px;
}
.rule-value-container {
width: 100%;
padding: 7px 0px 0px 0px;
}
}
}
.rule-value-container {
&>table.custom-table {
tr {
display: none;
&.custom-tr {
display: table-row;
td.custom-col-1 {
width: 48%;
.errorMsg {
display: none;
}
}
}
}
input,
textarea {
width: 100% !important;
}
}
}
}
}
\ No newline at end of file
dashboardv3/public/js/templates/search/UserDefine_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.
-->
<table class="custom-table">
<tbody>
<tr class="custom-tr">
<td class="custom-col-1">
<input placeholder="key" type="text" data-type="key" data-index="0" class="form-control" value="">
<p class="errorMsg"></p>
</td>
<td class="custom-col-0"> : </td>
<td class="custom-col-1">
<textarea placeholder="value" data-type="value" data-index="0" class="form-control"></textarea>
<p class="errorMsg"></p>
</td>
<!-- <td class="custom-col-2">
<button class="btn btn-default btn-sm" title="" data-index="0" data-id="deleteUserDefineItem">
<i class="fa fa-minus"> </i>
</button>
<button class="btn btn-default btn-sm" title="" data-index="0" data-id="addUserDefineItem">
<i class="fa fa-plus"> </i>
</button>
</td> -->
</tr>
<tr>
<td colspan="4">
<p class="errorMsg" data-id="charSupportMsg"></p>
</td>
</tr>
</tbody>
</table>
\ No newline at end of file
dashboardv3/public/js/utils/Enums.js
......@@ -194,8 +194,8 @@ define(['require'], function(require) {
};
Enums.systemAttributes = {
"__classificationNames": "Classification(s)",
"__createdBy": "Created By",
"__customAttributes": "User-defined attributes",
"__createdBy": "Created By User",
"__customAttributes": "User-defined Properties",
"__guid": "Guid",
"__isIncomplete": "IsIncomplete",
"__labels": "Label(s)",
......@@ -208,7 +208,7 @@ define(['require'], function(require) {
};
Enums.__isIncomplete = {
0: "false",
1: "rue"
}
1: "true"
};
return Enums;
});
\ No newline at end of file
dashboardv3/public/js/views/entity/EntityUserDefineView.js
......@@ -54,7 +54,7 @@ define(['require',
},
initialize: function(options) {
_.extend(this, _.pick(options, 'entity', 'customFilter'));
this.userDefineAttr = this.entity.customAttributes || [];
this.userDefineAttr = this.entity && this.entity.customAttributes || [];
this.initialCall = false;
this.swapItem = false, this.saveAttrItems = false;
this.readOnlyEntity = this.customFilter === undefined ? Enums.entityStateReadOnly[this.entity.status] : this.customFilter;
......
dashboardv3/public/js/views/search/SearchDefaultLayoutView.js
......@@ -55,12 +55,12 @@ define(["require", "backbone", "utils/Globals", "hbs!tmpl/search/SearchDefaultLa
var events = {},
that = this;
events["click " + this.ui.attrFilter] = function(e) {
// this.$('.fa-chevron-right').toggleClass('fa-chevron-down');
if (this.$('.attribute-filter-container').hasClass("hide")) {
this.onClickAttrFilter();
}
this.$('.fa-angle-right').toggleClass('fa-angle-down');
this.$('.attributeResultContainer').addClass("overlay");
this.$('.attribute-filter-container, .attr-filter-overlay').toggleClass('hide');
// this.$('.attribute-filter-container').toggleClass('attribute-filter-container')
this.onClickAttrFilter();
};
events["click " + this.ui.attrApply] = function(e) {
......@@ -201,6 +201,7 @@ define(["require", "backbone", "utils/Globals", "hbs!tmpl/search/SearchDefaultLa
manualRender: function(options) {
_.extend(this.options, options);
this.updateView();
this.onClickAttrFilter();
this.renderSearchResult();
},
renderGlobalSearch: function() {
......@@ -226,16 +227,18 @@ define(["require", "backbone", "utils/Globals", "hbs!tmpl/search/SearchDefaultLa
}
return options.searchTableFilters;
},
onClickAttrFilter: function(filterType) {
onClickAttrFilter: function() {
var that = this,
obj = {
value: that.options.value,
searchVent: that.options.searchVent,
entityDefCollection: that.options.entityDefCollection,
enumDefCollection: that.options.enumDefCollection,
typeHeaders: that.options.typeHeaders,
classificationDefCollection: that.options.classificationDefCollection,
searchTableFilters: that.checkEntityFilter(that.options)
};
if (that.options.value) {
this.ui.checkDeletedEntity.prop('checked', this.options.value.includeDE ? this.options.value.includeDE : false);
this.ui.checkSubClassification.prop('checked', this.options.value.excludeSC ? this.options.value.excludeSC : false);
this.ui.checkSubType.prop('checked', this.options.value.excludeST ? this.options.value.excludeST : false);
......@@ -297,6 +300,8 @@ define(["require", "backbone", "utils/Globals", "hbs!tmpl/search/SearchDefaultLa
this.ui.entityName.html(that.options.value.type);
}
}
},
okAttrFilterButton: function(e) {
var isTag,
......@@ -349,7 +354,7 @@ define(["require", "backbone", "utils/Globals", "hbs!tmpl/search/SearchDefaultLa
that.options.value.includeDE = (obj.value === "ACTIVE" && obj.operator === "=") || (obj.value === "DELETED" && obj.operator === "!=") ? false : true;
}
if (_.has(obj, "condition")) {
return this.getIdFromRuleObj(obj);
return that.getIdFromRuleObj(obj);
} else {
return col.push(obj.id);
}
......
dashboardv3/public/js/views/search/SearchResultLayoutView.js
......@@ -819,6 +819,9 @@ define(['require',
}
return;
}
if (key == "__historicalGuids" || key == "__classificationsText" || key == "__classificationNames" || key == "__propagatedClassificationNames") {
return;
}
col[obj.name] = {
label: Enums.systemAttributes[obj.name] ? Enums.systemAttributes[obj.name] : _.escape(obj.name).capitalize(),
cell: "Html",
......@@ -838,6 +841,28 @@ define(['require',
'valueObject': {},
'isTable': false
};
if (key == "__labels") {
var values = modelObj.attributes[key] ? modelObj.attributes[key].split("|") : null,
valueOfArray = [];
if (values) {
if (values[values.length - 1] === "") { values.pop(); }
if (values[0] === "") { values.shift(); }
_.each(values, function(names) {
valueOfArray.push('<span class="json-string"><a class="btn btn-action btn-sm btn-blue btn-icon" ><span title="" data-original-title="' + names + '" >' + names + '</span></a></span>');
});
return valueOfArray.join(' ');
}
}
if (key == "__customAttributes") {
var customAttributes = modelObj.attributes[key] ? JSON.parse(modelObj.attributes[key]) : null,
valueOfArray = [];
if (customAttributes) {
_.each(Object.keys(customAttributes), function(value, index) {
valueOfArray.push('<span class="json-string"><a class="btn btn-action btn-sm btn-blue btn-icon" ><span title="" data-original-title="' + value + ' : ' + Object.values(customAttributes)[index] + '" ><span>' + value + '</span> : <span>' + Object.values(customAttributes)[index] + '</span></span></a></span>');
});
return valueOfArray.join(' ');
}
}
tempObj.valueObject[key] = modelObj.attributes[key];
var tablecolumn = CommonViewFunction.propertyTable(tempObj);
if (_.isArray(modelObj.attributes[key])) {
......
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