From 961c6061b52959e42c1632721945dac3410f5c37 Mon Sep 17 00:00:00 2001
From: sagargala <gala.sagar.s@gmail.com>
Date: Wed, 30 Dec 2015 17:54:56 -0800
Subject: [PATCH] Partial-Bug: #1530242 - Usability Fixes on query Pages

- Modified Column width and their appropriate names
- Added validations for from-time and to-time
- Changed color sequence for Query Queue badges and added onClick for the same
- Fixed select options overlapping issue
- Added detail template for Query Queue grid
- Fixed bubble clipping issue for Zoom Scatterchart

Change-Id: I04a5514ca3806868bf3c82797045cebe6b5a3ab4
---
 webroot/common/ui/js/controller.labels.js     |  4 +-
 webroot/reports/qe/ui/api/query.api.js        | 55 ++++++++++++++++
 .../qe/ui/js/models/FlowRecordFormModel.js    | 13 ----
 .../qe/ui/js/models/FlowSeriesFormModel.js    | 13 ----
 .../qe/ui/js/models/ObjectLogsFormModel.js    | 13 ----
 .../qe/ui/js/models/StatQueryFormModel.js     | 13 ----
 .../qe/ui/js/models/SystemLogsFormModel.js    | 15 +----
 .../qe/ui/js/views/FlowRecordFormView.js      |  6 +-
 .../qe/ui/js/views/FlowSeriesFormView.js      |  7 ++-
 .../qe/ui/js/views/ObjectLogsFormView.js      |  6 +-
 .../reports/qe/ui/js/views/QueryQueueView.js  | 63 ++++++++++++++-----
 .../qe/ui/js/views/StatQueryFormView.js       |  7 ++-
 .../qe/ui/js/views/SystemLogsFormView.js      | 11 ++--
 webroot/reports/qe/ui/templates/qe.tmpl       | 15 ++++-
 14 files changed, 139 insertions(+), 102 deletions(-)

diff --git a/webroot/common/ui/js/controller.labels.js b/webroot/common/ui/js/controller.labels.js
index 38509df49..4b7d58f14 100644
--- a/webroot/common/ui/js/controller.labels.js
+++ b/webroot/common/ui/js/controller.labels.js
@@ -163,7 +163,9 @@ define([
             to_time_utc: 'To Time',
             opsQueryId: 'Analytics QueryId',
             queryId: 'QueryId',
-            timeTaken: 'Time Taken'
+            startTime: 'Time Issued',
+            timeTaken: 'Time Taken',
+            filters: 'Filter'
         };
 
         this.TOP_CONTENT_CONTAINER = "top-content-container";
diff --git a/webroot/reports/qe/ui/api/query.api.js b/webroot/reports/qe/ui/api/query.api.js
index 4dfb3ecac..77c10288a 100644
--- a/webroot/reports/qe/ui/api/query.api.js
+++ b/webroot/reports/qe/ui/api/query.api.js
@@ -742,6 +742,11 @@ function getQueryJSON4Table(queryReqObj) {
     setMicroTimeRange(queryJSON, fromTimeUTC, toTimeUTC);
     parseSelect(queryJSON, formModelAttrs);
     parseWhere(queryJSON, where);
+
+    if (tableName == 'MessageTable' && formModelAttrs['keywords'] != null && formModelAttrs['keywords'] != "") {
+        parseSLWhere(queryJSON, where, formModelAttrs['keywords'])
+    }
+
     if(filters != null && filters != "") {
         parseFilters(queryJSON, filters);
     }
@@ -784,6 +789,56 @@ function parseSelect(query, formModelAttrs) {
     }
 };
 
+function parseSLWhere (query, where, keywords) {
+    var keywordsArray = keywords.split(',');
+    if (keywords != null && keywords.trim() != '') {
+        for (var i = 0; i < keywordsArray.length; i++){
+            keywordsArray[i] = keywordsArray[i].trim();
+        }
+    }
+    if (where != null && where.trim() != '') {
+        var whereORArray = where.split(' OR '),
+            whereORLength = whereORArray.length, i,
+            newWhereOR, newWhereORArray = [];
+        var keywordsStr = getKeywordsStrFromArray(keywordsArray), where = [];
+        for (i = 0; i < whereORLength; i += 1) {
+            whereORArray[i] = whereORArray[i].trim();
+            newWhereOR = whereORArray[i].substr(0, whereORArray[i].length - 1);
+            where[i] = newWhereOR.concat(" AND " + keywordsStr + " )");
+            where[i] = parseWhereANDClause(where[i]);
+        }
+        query['where'] = where;
+    } else{
+        if (keywords != null && keywords.trim() != '') {
+            var where = [];
+            query['where'] = parseKeywordsObj(keywordsArray);
+        }
+    }
+}
+
+function getKeywordsStrFromArray (keywords) {
+    var tempStr = "";
+    for (var i = 1; i < keywords.length; i++) {
+        tempStr = tempStr.concat("AND Keyword = " + keywords[i] + " ");
+    }
+    var final = ("Keyword = " + keywords[0] + " ").concat(tempStr);
+    return final;
+}
+
+function parseKeywordsObj(keywordsArray)
+{
+    var keywordObj = [], keywordArray = [], finalkeywordArray = [];
+    for(var i=0; i<keywordsArray.length; i++){
+        keywordObj[i] = {"name":"", value:"", op:""};
+        keywordObj[i].name = "Keyword";
+        keywordObj[i].value = keywordsArray[i];
+        keywordObj[i].op = 1;
+        keywordArray.push(keywordObj[i]);
+    }
+    finalkeywordArray.push(keywordArray);
+    return finalkeywordArray;
+};
+
 function parseWhere(query, where) {
     if (where != null && where.trim() != '') {
         var whereORArray = where.split(' OR '),
diff --git a/webroot/reports/qe/ui/js/models/FlowRecordFormModel.js b/webroot/reports/qe/ui/js/models/FlowRecordFormModel.js
index f61358a2d..e5b74e0d3 100644
--- a/webroot/reports/qe/ui/js/models/FlowRecordFormModel.js
+++ b/webroot/reports/qe/ui/js/models/FlowRecordFormModel.js
@@ -19,19 +19,6 @@ define([
             QueryFormModel.prototype.constructor.call(this, modelData, queryReqConfig);
 
             return this;
-        },
-
-        validations: {
-            runQueryValidation: {
-                'table_name': {
-                    required: true,
-                    msg: ctwm.getRequiredMessage('table name')
-                },
-                'select': {
-                    required: true,
-                    msg: ctwm.getRequiredMessage('select')
-                }
-            },
         }
     });
 
diff --git a/webroot/reports/qe/ui/js/models/FlowSeriesFormModel.js b/webroot/reports/qe/ui/js/models/FlowSeriesFormModel.js
index 0e172c5ba..431819389 100644
--- a/webroot/reports/qe/ui/js/models/FlowSeriesFormModel.js
+++ b/webroot/reports/qe/ui/js/models/FlowSeriesFormModel.js
@@ -19,19 +19,6 @@ define([
             QueryFormModel.prototype.constructor.call(this, modelData, queryReqConfig);
 
             return this;
-        },
-
-        validations: {
-            runQueryValidation: {
-                'table_name': {
-                    required: true,
-                    msg: ctwm.getRequiredMessage('table name')
-                },
-                'select': {
-                    required: true,
-                    msg: ctwm.getRequiredMessage('select')
-                }
-            },
         }
     });
 
diff --git a/webroot/reports/qe/ui/js/models/ObjectLogsFormModel.js b/webroot/reports/qe/ui/js/models/ObjectLogsFormModel.js
index 5ca1a1e35..c563de965 100644
--- a/webroot/reports/qe/ui/js/models/ObjectLogsFormModel.js
+++ b/webroot/reports/qe/ui/js/models/ObjectLogsFormModel.js
@@ -24,19 +24,6 @@ define([
             var tableName = this.table_name();
 
             return !(tableName === null || tableName === '');
-        },
-
-        validations: {
-            runQueryValidation: {
-                'table_name': {
-                    required: true,
-                    msg: ctwm.getRequiredMessage('table name')
-                },
-                'select': {
-                    required: true,
-                    msg: ctwm.getRequiredMessage('select')
-                }
-            },
         }
     });
 
diff --git a/webroot/reports/qe/ui/js/models/StatQueryFormModel.js b/webroot/reports/qe/ui/js/models/StatQueryFormModel.js
index bb657adc4..3a06cb111 100644
--- a/webroot/reports/qe/ui/js/models/StatQueryFormModel.js
+++ b/webroot/reports/qe/ui/js/models/StatQueryFormModel.js
@@ -24,19 +24,6 @@ define([
             var tableName = this.table_name();
 
             return !(tableName === null || tableName === '');
-        },
-
-        validations: {
-            runQueryValidation: {
-                'table_name': {
-                    required: true,
-                    msg: ctwm.getRequiredMessage('table name')
-                },
-                'select': {
-                    required: true,
-                    msg: ctwm.getRequiredMessage('select')
-                }
-            },
         }
     });
 
diff --git a/webroot/reports/qe/ui/js/models/SystemLogsFormModel.js b/webroot/reports/qe/ui/js/models/SystemLogsFormModel.js
index 8a93d6441..d23d69b6e 100644
--- a/webroot/reports/qe/ui/js/models/SystemLogsFormModel.js
+++ b/webroot/reports/qe/ui/js/models/SystemLogsFormModel.js
@@ -13,7 +13,7 @@ define([
 
         disableSelectFields: ['SequenceNum', 'Context', 'Keyword'],
 
-        disableWhereFields: ['Level'],
+        disableWhereFields: ['Level', 'Keyword'],
 
         constructor: function (modelData, queryReqConfig) {
             var defaultConfig = qewmc.getQueryModelConfig({table_name: cowc.MESSAGE_TABLE, table_type: cowc.QE_LOG_TABLE_TYPE, query_prefix: cowc.SYSTEM_LOGS_PREFIX, keywords: "",
@@ -23,19 +23,6 @@ define([
             QueryFormModel.prototype.constructor.call(this, modelData, $.extend(true, queryReqConfig, {chunkSize: cowc.QE_RESULT_CHUNK_SIZE_10K}));
 
             return this;
-        },
-
-        validations: {
-            runQueryValidation: {
-                'table_name': {
-                    required: true,
-                    msg: ctwm.getRequiredMessage('table name')
-                },
-                'select': {
-                    required: true,
-                    msg: ctwm.getRequiredMessage('select')
-                }
-            }
         }
     });
 
diff --git a/webroot/reports/qe/ui/js/views/FlowRecordFormView.js b/webroot/reports/qe/ui/js/views/FlowRecordFormView.js
index 2f27c1f1c..b0735fba1 100644
--- a/webroot/reports/qe/ui/js/views/FlowRecordFormView.js
+++ b/webroot/reports/qe/ui/js/views/FlowRecordFormView.js
@@ -31,12 +31,12 @@ define([
                 self.model.to_time(parseInt(queryFormAttributes.to_time));
             }
 
-            self.renderView4Config($(self.$el).find(queryFormId), this.model, self.getViewConfig(), null, null, modelMap, function () {
+            self.renderView4Config($(self.$el).find(queryFormId), this.model, self.getViewConfig(), cowc.KEY_RUN_QUERY_VALIDATION, null, modelMap, function () {
                 self.model.showErrorAttr(flowRecordId, false);
                 Knockback.applyBindings(self.model, document.getElementById(flowRecordId));
                 kbValidation.bind(self);
                 $("#run_query").on('click', function() {
-                    if (self.model.model().isValid(true, 'runQueryValidation')) {
+                    if (self.model.model().isValid(true, cowc.KEY_RUN_QUERY_VALIDATION)) {
                         self.renderQueryResult();
                     }
                 });
@@ -196,7 +196,7 @@ define([
                             columns: [
                                 {
                                     elementId: 'filters', view: "FormTextAreaView",
-                                    viewConfig: {path: 'filters', dataBindValue: 'filters', class: "span9", editPopupConfig: {
+                                    viewConfig: {path: 'filters', dataBindValue: 'filters', class: "span9", label: cowl.TITLE_QE_FILTER, editPopupConfig: {
                                         renderEditFn: function() {
                                             self.renderFilters({className: cowc.QE_MODAL_CLASS_700});
                                         }
diff --git a/webroot/reports/qe/ui/js/views/FlowSeriesFormView.js b/webroot/reports/qe/ui/js/views/FlowSeriesFormView.js
index 39af3911f..bd6d04f1a 100644
--- a/webroot/reports/qe/ui/js/views/FlowSeriesFormView.js
+++ b/webroot/reports/qe/ui/js/views/FlowSeriesFormView.js
@@ -31,12 +31,12 @@ define([
                 self.model.to_time(parseInt(queryFormAttributes.to_time));
             }
 
-            self.renderView4Config($(queryFormId), self.model, self.getViewConfig(), null, null, modelMap, function () {
+            self.renderView4Config($(queryFormId), self.model, self.getViewConfig(), cowc.KEY_RUN_QUERY_VALIDATION, null, modelMap, function () {
                 self.model.showErrorAttr(flowSeriesId, false);
                 Knockback.applyBindings(self.model, document.getElementById(flowSeriesId));
                 kbValidation.bind(self);
                 $("#run_query").on('click', function() {
-                    if (self.model.model().isValid(true, 'runQueryValidation')) {
+                    if (self.model.model().isValid(true, cowc.KEY_RUN_QUERY_VALIDATION)) {
                         self.renderQueryResult();
                     }
                 });
@@ -219,7 +219,8 @@ define([
                             columns: [
                                 {
                                     elementId: 'filters', view: "FormTextAreaView",
-                                    viewConfig: {path: 'filters', dataBindValue: 'filters', class: "span9", editPopupConfig: {
+                                    viewConfig: {
+                                        path: 'filters', dataBindValue: 'filters', class: "span9", label: cowl.TITLE_QE_FILTER, editPopupConfig: {
                                         renderEditFn: function() {
                                             self.renderFilters({className: cowc.QE_MODAL_CLASS_700});
                                         }
diff --git a/webroot/reports/qe/ui/js/views/ObjectLogsFormView.js b/webroot/reports/qe/ui/js/views/ObjectLogsFormView.js
index d753f5e8d..beb22d671 100644
--- a/webroot/reports/qe/ui/js/views/ObjectLogsFormView.js
+++ b/webroot/reports/qe/ui/js/views/ObjectLogsFormView.js
@@ -32,12 +32,12 @@ define([
                 self.model.to_time(parseInt(queryFormAttributes.to_time));
             }
 
-            self.renderView4Config($(self.$el).find(queryFormId), this.model, self.getViewConfig(), null, null, modelMap, function () {
+            self.renderView4Config($(self.$el).find(queryFormId), this.model, self.getViewConfig(), cowc.KEY_RUN_QUERY_VALIDATION, null, modelMap, function () {
                 self.model.showErrorAttr(objectLogsId, false);
                 Knockback.applyBindings(self.model, document.getElementById(objectLogsId));
                 kbValidation.bind(self);
                 $("#run_query").on('click', function() {
-                    if (self.model.model().isValid(true, 'runQueryValidation')) {
+                    if (self.model.model().isValid(true, cowc.KEY_RUN_QUERY_VALIDATION)) {
                         self.renderQueryResult();
                     }
                 });
@@ -190,7 +190,7 @@ define([
                                 {
                                     elementId: 'filters', view: "FormTextAreaView",
                                     viewConfig: {
-                                        path: 'filters', dataBindValue: 'filters', class: "span9",
+                                        path: 'filters', dataBindValue: 'filters', class: "span9", label: cowl.TITLE_QE_FILTER,
                                         visible: 'isTableNameAvailable()',
                                         editPopupConfig: {
                                             renderEditFn: function() {
diff --git a/webroot/reports/qe/ui/js/views/QueryQueueView.js b/webroot/reports/qe/ui/js/views/QueryQueueView.js
index eddc19546..14b94357f 100644
--- a/webroot/reports/qe/ui/js/views/QueryQueueView.js
+++ b/webroot/reports/qe/ui/js/views/QueryQueueView.js
@@ -47,7 +47,7 @@ define([
                 title: cowl.TITLE_QUERY_QUEUE,
                 view: "GridView",
                 viewConfig: {
-                    elementConfig: getQueryQueueGridConfig(queryQueueType, queueRemoteConfig, pagerOptions, self, queueColorMap)
+                    elementConfig: getQueryQueueGridConfig(self, queryQueueType, queueRemoteConfig, pagerOptions, queueColorMap)
                 }
             };
 
@@ -111,7 +111,7 @@ define([
 
     });
 
-    function getQueryQueueGridConfig(queryQueueType, queueRemoteConfig, pagerOptions, queryQueueView, queueColorMap) {
+    function getQueryQueueGridConfig(queryQueueView, queryQueueType, queueRemoteConfig, pagerOptions, queueColorMap) {
         return {
             header: {
                 title: {
@@ -138,7 +138,7 @@ define([
                                         return rowValue.queryReqObj.queryId;
                                     });
 
-                                showDeleteQueueModal(queryQueueType, queryIds, queueColorMap);
+                                showDeleteQueueModal(queryQueueView, queryQueueType, queryIds, queueColorMap);
                             }
                         }
                     }
@@ -163,7 +163,7 @@ define([
                         }
                     },
                     actionCell: function(dc){
-                        return getQueueActionColumn(queryQueueType, dc, queryQueueView, queueColorMap);
+                        return getQueueActionColumn(queryQueueView, queryQueueType, dc, queueColorMap);
                     }
                 },
                 dataSource: {
@@ -171,7 +171,9 @@ define([
                 }
             },
             columnHeader: {
-                columns: qewgc.getQueueColumnDisplay()
+                columns: qewgc.getQueueColumnDisplay(function(queryQueueItem) {
+                    viewQueryResultAction (queryQueueItem, queryQueueView, queueColorMap, 'queue');
+                })
             },
             footer: {
                 pager: contrail.handleIfNull(pagerOptions, { options: { pageSize: 25, pageSizeSelect: [25, 50, 100] } })
@@ -224,7 +226,7 @@ define([
                                         templateGenerator: 'TextGenerator'
                                     },
                                     {
-                                        key: 'queryReqObj.formModelAttrs.filter',
+                                        key: 'queryReqObj.formModelAttrs.filters',
                                         templateGenerator: 'TextGenerator'
                                     },
                                     {
@@ -243,6 +245,13 @@ define([
                                 title: cowl.TITLE_QUERY_STATUS,
                                 advancedViewOptions: false,
                                 templateGeneratorConfig: [
+                                    {
+                                        key: 'startTime',
+                                        templateGenerator: 'TextGenerator',
+                                        templateGeneratorConfig: {
+                                            formatter: 'date-time'
+                                        }
+                                    },
                                     {
                                         key: 'status',
                                         templateGenerator: 'TextGenerator'
@@ -274,7 +283,7 @@ define([
         }
     }
 
-    function getQueueActionColumn(queryQueueType, queryQueueItem, queryQueueView, queueColorMap) {
+    function getQueueActionColumn(queryQueueView, queryQueueType, queryQueueItem, queueColorMap) {
         var queryQueueListModel = queryQueueView.model,
             queryFormModelData = queryQueueItem.queryReqObj.formModelAttrs,
             status = queryQueueItem.status,
@@ -336,7 +345,7 @@ define([
             title: cowl.TITLE_DELETE_QUERY,
             iconClass: 'icon-trash',
             onClick: function(rowIndex){
-                showDeleteQueueModal(queryQueueType, [queryId], queueColorMap)
+                showDeleteQueueModal(queryQueueView, queryQueueType, [queryId], queueColorMap)
             }
         });
 
@@ -405,14 +414,16 @@ define([
         });
     }
 
-    function showDeleteQueueModal(queryQueueType, queryIds, queueColorMap) {
-        var modalId = queryQueueType + cowl.QE_WHERE_MODAL_SUFFIX;
+    function showDeleteQueueModal(queryQueueView, queryQueueType, queryIds, queueColorMap) {
+        var modalId = queryQueueType + cowl.QE_WHERE_MODAL_SUFFIX,
+            deleteQueryMessage = (queryIds.length === 1) ? cowm.QE_DELETE_SINGLE_QUERY_CONFIRM : cowm.QE_DELETE_MULTIPLE_QUERY_CONFIRM;
+
         cowu.createModal({
             modalId: modalId,
             className: 'modal-700',
             title: cowl.TITLE_DELETE_QUERY,
             btnName: 'Confirm',
-            body: cowm.QE_DELETE_QUERY_CONFIRM,
+            body: deleteQueryMessage,
             onSave: function () {
                 var postDataJSON = {queryQueue: queryQueueType, queryIds: queryIds},
                     ajaxConfig = {
@@ -421,12 +432,29 @@ define([
                         data: JSON.stringify(postDataJSON)
                     };
                 contrail.ajaxHandler(ajaxConfig, null, function() {
-                    var queryQueueGridId = cowc.QE_HASH_ELEMENT_PREFIX + queryQueueType + cowc.QE_QUEUE_GRID_SUFFIX;
+                    var queryQueueGridId = cowc.QE_HASH_ELEMENT_PREFIX + queryQueueType + cowc.QE_QUEUE_GRID_SUFFIX,
+                        gridTabIndex = null, chartTabIndex = null,
+                        childViewMap = queryQueueView.childViewMap,
+                        queryQueueResultTabView = contrail.checkIfExist(childViewMap[cowl.QE_QUERY_QUEUE_TABS_ID]) ? childViewMap[cowl.QE_QUERY_QUEUE_TABS_ID] : null;
+
                     $(queryQueueGridId).data('contrailGrid').refreshData();
 
-                    $.each(queryIds, function(queryIdKey, queryIdValue) {
-                        removeBadgeColorFromQueryQueue(queueColorMap, queryIdValue.queryId);
-                    });
+                    if (queryQueueResultTabView !== null) {
+                        $.each(queryIds, function(queryIdKey, queryIdValue) {
+                            removeBadgeColorFromQueryQueue(queueColorMap, queryIdValue);
+
+                            gridTabIndex = queryQueueResultTabView.tabsIdMap[cowl.QE_QUERY_QUEUE_RESULT_GRID_TAB_ID + '-' + queryIdValue + '-tab'];
+                            if (contrail.checkIfExist(gridTabIndex)) {
+                                queryQueueResultTabView.removeTab(gridTabIndex)
+                            }
+
+                            chartTabIndex = queryQueueResultTabView.tabsIdMap[cowl.QE_QUERY_QUEUE_RESULT_CHART_TAB_ID + '-' + queryIdValue + '-tab'];
+                            if (contrail.checkIfExist(chartTabIndex)) {
+                                queryQueueResultTabView.removeTab(chartTabIndex)
+                            }
+
+                        });
+                    }
                 });
                 $("#" + modalId).modal('hide');
             }, onCancel: function () {
@@ -491,7 +519,10 @@ define([
                                 elementId: queryResultGridId,
                                 view: 'QueryResultGridView',
                                 viewConfig: {
-                                    queryResultPostData: { queryId: queryId },
+                                    queryResultPostData: {
+                                        queryId: queryId, chunk: 1, autoSort: true,
+                                        chunkSize: cowc.QE_RESULT_CHUNK_SIZE_10K, async: true
+                                    },
                                     queryFormAttributes: queryFormAttributes,
                                     gridOptions: getQueryQueueResultGridOptions(self, queryFormAttributes)
                                 }
diff --git a/webroot/reports/qe/ui/js/views/StatQueryFormView.js b/webroot/reports/qe/ui/js/views/StatQueryFormView.js
index eb9de97e9..40c795fa2 100644
--- a/webroot/reports/qe/ui/js/views/StatQueryFormView.js
+++ b/webroot/reports/qe/ui/js/views/StatQueryFormView.js
@@ -31,12 +31,12 @@ define([
                 self.model.to_time(parseInt(queryFormAttributes.to_time));
             }
 
-            self.renderView4Config($(queryFormId), self.model, self.getViewConfig(), null, null, modelMap, function () {
+            self.renderView4Config($(queryFormId), self.model, self.getViewConfig(), cowc.KEY_RUN_QUERY_VALIDATION, null, modelMap, function () {
                 self.model.showErrorAttr(statQueryId, false);
                 Knockback.applyBindings(self.model, document.getElementById(statQueryId));
                 kbValidation.bind(self);
                 $("#run_query").on('click', function() {
-                    if (self.model.model().isValid(true, 'runQueryValidation')) {
+                    if (self.model.model().isValid(true, cowc.KEY_RUN_QUERY_VALIDATION)) {
                         self.renderQueryResult();
                     }
                 });
@@ -175,7 +175,7 @@ define([
                                     viewConfig: {
                                         path: 'table_name',
                                         dataBindValue: 'table_name',
-                                        class: "span3",
+                                        class: "span6",
                                         elementConfig: {
                                             defaultValueId: 0, allowClear: false, placeholder: cowl.QE_SELECT_STAT_TABLE,
                                             dataTextField: "name", dataValueField: "name",
@@ -297,6 +297,7 @@ define([
                                     elementId: 'filters', view: "FormTextAreaView",
                                     viewConfig: {
                                         path: 'filters', dataBindValue: 'filters', class: "span9",
+                                        label: cowl.TITLE_QE_FILTER,
                                         visible: 'isTableNameAvailable()',
                                         editPopupConfig: {
                                             renderEditFn: function() {
diff --git a/webroot/reports/qe/ui/js/views/SystemLogsFormView.js b/webroot/reports/qe/ui/js/views/SystemLogsFormView.js
index b02c4c1ae..917890cd3 100644
--- a/webroot/reports/qe/ui/js/views/SystemLogsFormView.js
+++ b/webroot/reports/qe/ui/js/views/SystemLogsFormView.js
@@ -31,12 +31,12 @@ define([
                 self.model.to_time(parseInt(queryFormAttributes.to_time));
             }
 
-            self.renderView4Config($(self.$el).find(queryFormId), this.model, self.getViewConfig(), null, null, modelMap, function () {
+            self.renderView4Config($(self.$el).find(queryFormId), this.model, self.getViewConfig(), cowc.KEY_RUN_QUERY_VALIDATION, null, modelMap, function () {
                 self.model.showErrorAttr(systemLogsId, false);
                 Knockback.applyBindings(self.model, document.getElementById(systemLogsId));
                 kbValidation.bind(self);
                 $("#run_query").on('click', function() {
-                    if (self.model.model().isValid(true, 'runQueryValidation')) {
+                    if (self.model.model().isValid(true, cowc.KEY_RUN_QUERY_VALIDATION)) {
                         self.renderQueryResult();
                     }
                 });
@@ -131,8 +131,11 @@ define([
                                 {
                                     elementId: 'log_level', view: "FormDropdownView",
                                     viewConfig: { path: 'log_level', dataBindValue: 'log_level', class: "span3", elementConfig: {dataTextField: "name", dataValueField: "value", data: cowc.QE_LOG_LEVELS}}
+                                },
+                                {
+                                    elementId: 'keywords', view: "FormInputView",
+                                    viewConfig: { path: 'keywords', dataBindValue: 'keywords', class: "span3", placeholder: "Enter comma separated keywords" }
                                 }
-
                             ]
                         },
                         {
@@ -164,7 +167,7 @@ define([
                             columns: [
                                 {
                                     elementId: 'filters', view: "FormTextAreaView",
-                                    viewConfig: {path: 'filters', dataBindValue: 'filters', class: "span9", editPopupConfig: {
+                                    viewConfig: {path: 'filters', dataBindValue: 'filters', class: "span9", label: cowl.TITLE_QE_FILTER, editPopupConfig: {
                                         renderEditFn: function() {
                                             self.renderFilters({className: cowc.QE_MODAL_CLASS_700});
                                         }
diff --git a/webroot/reports/qe/ui/templates/qe.tmpl b/webroot/reports/qe/ui/templates/qe.tmpl
index 6b239902c..5bedaface 100644
--- a/webroot/reports/qe/ui/templates/qe.tmpl
+++ b/webroot/reports/qe/ui/templates/qe.tmpl
@@ -14,12 +14,21 @@
             </div>
             <div class="row-fluid row-fluid-3n" data-bind="foreach: select_data_object().select_fields()">
                 <div class="span4">
-                    <input type="checkbox"
-                        data-bind="
+                    <div class="row-fluid">
+                        <div class="span1">
+                            <input type="checkbox"
+                                   data-bind="
                             name: name, value: name, checked: $root.select_data_object().checked_fields,
                             click: function(data, event) { return $root.select_data_object().on_select($root, data, event); },
                             enable: $root.select_data_object().enable_map()[name]()"
-                        class="ace-input"/> <span class="ace-lbl" data-bind="text: name"></span>
+                                   class="ace-input"
+                            />
+                            <span class="ace-lbl"></span>
+                        </div>
+                        <div class="span11">
+                            <div class="select-label" data-bind="text: name, attr: { title: name }"></div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>