UI : Add Column Count to Available Fields and Response Information Po…

…pup (siglens#1642) * Added Column Count To Logs Screen * Lint Fix * Update font size and style --------- Co-authored-by: Kunal Nawale <[email protected]>
sonamgupta21 · Sep 17, 2024 · ee9d633 · ee9d633
1 parent 8c8c2d5
commit ee9d633
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 13 deletions.
diff --git a/static/css/fonts/SourceCodePro-Light.ttf b/static/css/fonts/SourceCodePro-Light.ttf
diff --git a/static/css/query-builder.css b/static/css/query-builder.css
@@ -627,9 +627,6 @@ textarea.form-control:focus{
     border: 1px solid var(--border-btn-color);
 }
 
-.fields{
-    margin-left: 10px;
-}
 .below-btn-img:hover,
 .add-con:hover,
 .cancel-enter:hover,

diff --git a/static/css/siglens.css b/static/css/siglens.css
@@ -2190,9 +2190,7 @@ div.dts div.dataTables_scrollBody table {
 
 /*  start available fields dropdown overrides */
 #available-fields {
-    max-height: 204px;
     background: var(--index-drop-down-box-bg-color);
-    overflow-y: auto;
     scrollbar-width: none;
     -ms-overflow-style: none;
     border: 1px solid var(--timepicker-border-color);
@@ -2246,8 +2244,16 @@ div.dts div.dataTables_scrollBody table {
     overflow: visible;
 }
 
-.fields{
+.fields {
     margin-left: 10px;
+    overflow: auto;
+    height: 172px;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+}
+
+.fields::-webkit-scrollbar {
+    display: none;
 }
 
 .available-fields-dropdown-item.active img {
@@ -2264,7 +2270,20 @@ div.dts div.dataTables_scrollBody table {
     margin-left: 11px;
     display: flex;
     align-items: center;
-    width:max-content;
+    width:162px;
+}
+
+.column-count-header{
+    margin-left: 11px;
+    color: var(--hits-summary-small-text-color);
+    font-size: 10px;
+    font-family: "Source Code Pro", monospace;
+    font-weight: 200;
+    margin-top: 2px;
+}
+
+.column-count-header span{
+    font-weight: 600;
 }
 
 .select-unselect-checkbox {

diff --git a/static/index.html b/static/index.html
@@ -325,6 +325,7 @@
                                     Select/Unselect All
                                     <img class="select-unselect-checkbox" src="assets/available-field-checkbox.svg">
                                 </div>
+                                <div class="column-count-header">Column Count: <span class="column-count"></span></div>
                                 <div class="fields"></div>
                             </div>
                         </div>

diff --git a/static/js/available-fields.js b/static/js/available-fields.js
@@ -18,10 +18,11 @@
  */
 
 //eslint-disable-next-line no-unused-vars
-function renderAvailableFields(columnOrder) {
+function renderAvailableFields(columnOrder, columnCount) {
     let el = $('#available-fields .fields');
     let columnsToIgnore = ['timestamp', 'logs'];
     el.empty();
+    $('.column-count').html(columnCount);
     columnOrder.forEach((colName, _index) => {
         if (columnsToIgnore.indexOf(colName) == -1) {
             if (!availColNames.includes(colName)) {

diff --git a/static/js/common.js b/static/js/common.js
@@ -174,6 +174,8 @@ function resetDashboard() {
     columnsWithNonNullValues.clear();
     columnsWithNullValues.clear();
     allColumns.clear();
+    $('#hide-null-column-box').hide();
+    columnCount = 0;
     gridDiv = null;
     eGridDiv = null;
 }

diff --git a/static/js/search.js b/static/js/search.js
@@ -63,6 +63,7 @@ function resetDataTable(firstQUpdate) {
 }
 
 let doSearchCounter = 0;
+let columnCount = 0;
 //eslint-disable-next-line no-unused-vars
 function doSearch(data) {
     return new Promise((resolve, reject) => {
@@ -656,8 +657,8 @@ function processLiveTailQueryUpdate(res, eventType, totalEventsSearched, timeToF
     $('body').css('cursor', 'default');
 }
 function processQueryUpdate(res, eventType, totalEventsSearched, timeToFirstByte, totalHits) {
+    let columnOrder = [];
     if (res.hits && res.hits.records !== null && res.hits.records.length >= 1 && res.qtype === 'logs-query') {
-        let columnOrder = [];
         if (res.columnsOrder != undefined && res.columnsOrder.length > 0) {
             columnOrder = _.uniq(
                 _.concat(
@@ -682,8 +683,9 @@ function processQueryUpdate(res, eventType, totalEventsSearched, timeToFirstByte
 
         // for sort function display
         sortByTimestampAtDefault = res.sortByTimestampAtDefault;
+        columnCount = Math.max(columnCount, columnOrder.length) - 1; // Excluding timestamp
 
-        renderAvailableFields(columnOrder);
+        renderAvailableFields(columnOrder, columnCount);
         renderLogsGrid(columnOrder, res.hits.records);
 
         $('#logs-result-container').show();
@@ -709,13 +711,14 @@ function processQueryUpdate(res, eventType, totalEventsSearched, timeToFirstByte
         aggsColumnDefs = [];
         segStatsRowData = [];
         $('#views-container').hide();
+        columnCount = Math.max(columnCount, columnOrder.length) - 1;
         renderMeasuresGrid(columnOrder, res);
     }
     timeChart(res.qtype);
     let totalTime = new Date().getTime() - startQueryTime;
     let percentComplete = res.percent_complete;
     let totalPossibleEvents = res.total_possible_events;
-    renderTotalHits(totalHits, totalTime, percentComplete, eventType, totalEventsSearched, timeToFirstByte, '', res.qtype, totalPossibleEvents);
+    renderTotalHits(totalHits, totalTime, percentComplete, eventType, totalEventsSearched, timeToFirstByte, '', res.qtype, totalPossibleEvents, columnCount);
     $('body').css('cursor', 'default');
 }
 
@@ -810,6 +813,7 @@ function processCompleteUpdate(res, eventType, totalEventsSearched, timeToFirstB
         if ((res.qtype === 'aggs-query' || res.qtype === 'segstats-query') && res.bucketCount) {
             totalHits = res.bucketCount;
             $('#views-container').hide();
+            columnCount = Math.max(columnCount, columnOrder.length);
         }
     } else {
         measureInfo = [];
@@ -823,7 +827,7 @@ function processCompleteUpdate(res, eventType, totalEventsSearched, timeToFirstB
         totalRrcCount += res.total_rrc_count;
     }
     let totalPossibleEvents = res.total_possible_events;
-    renderTotalHits(totalHits, totalTime, percentComplete, eventType, totalEventsSearched, timeToFirstByte, eqRel, res.qtype, totalPossibleEvents);
+    renderTotalHits(totalHits, totalTime, percentComplete, eventType, totalEventsSearched, timeToFirstByte, eqRel, res.qtype, totalPossibleEvents, columnCount);
     $('#run-filter-btn').html(' ');
     $('#run-filter-btn').removeClass('cancel-search');
     $('#run-filter-btn').removeClass('active');
@@ -885,7 +889,7 @@ function showErrorResponse(errorMsg, res) {
     wsState = 'query';
 }
 
-function renderTotalHits(totalHits, elapedTimeMS, percentComplete, eventType, totalEventsSearched, timeToFirstByte, eqRel, qtype, totalPossibleEvents) {
+function renderTotalHits(totalHits, elapedTimeMS, percentComplete, eventType, totalEventsSearched, timeToFirstByte, eqRel, qtype, totalPossibleEvents, columnCount) {
     //update chart title
     console.log(`rendering total hits: ${totalHits}. elapedTimeMS: ${elapedTimeMS}`);
     let startDate = displayStart;
@@ -925,20 +929,23 @@ function renderTotalHits(totalHits, elapedTimeMS, percentComplete, eventType, to
             <div>First Result Response Time: <b>${timeToFirstByte} ms</b></div>
             <div class="final-res-time">Final Result Response Time: <span></span><b> ms</b></div>
             <div><span class="total-hits"><b>${operatorSign} ${totalHitsFormatted}</b></span><span> ${bucketGrammer} created from <b>${totalEventsSearched}</b> records.</span></div>
+            <div class="column-count">Column Count: <span></span><b> ${columnCount}</b></div>
             <div>${dateFns.format(startDate, timestampDateFmt)} &mdash; ${dateFns.format(endDate, timestampDateFmt)}</div>
         `);
         } else if (totalHits > 0) {
             $('#hits-summary').html(`
             <div>First Result Response Time: <b>${timeToFirstByte} ms</b></div>
             <div class="final-res-time">Final Result Response Time: <span></span><b> ms</b></div>
             <div><span class="total-hits"><b>${operatorSign} ${totalHitsFormatted}</b></span><span> of <b>${totalEventsSearched}</b> Records Matched</span></div>
+            <div class="column-count">Column Count: <span></span><b> ${columnCount}</b></div>
             <div>${dateFns.format(startDate, timestampDateFmt)} &mdash; ${dateFns.format(endDate, timestampDateFmt)}</div>
         `);
         } else {
             $('#hits-summary').html(`
             <div>First Result Response Time: <b>${timeToFirstByte} ms</b></div>
             <div class="final-res-time">Final Result Response Time: <span></span><b> ms</b></div>
             <div>Records Searched: <span><b> ${totalEventsSearched} </b></span></div>
+            <div class="column-count">Column Count: <span></span><b> ${columnCount}</b></div>
             <div>${dateFns.format(startDate, timestampDateFmt)} &mdash; ${dateFns.format(endDate, timestampDateFmt)}</div>
         `);
         }