[Telemetry Table] Row counts (#3428)

* add marked rows and total rows in tables

* Styling for table row counts addition

- Main styles for new `.c-table-indicator` and elements;
- Refined main layout spacing;
- Layout for table footer elements;
- Hover behavior for footer when table in Display Layout;

* Styling for table row counts addition

- Refined `.c-filter-indication` styles;
- Refined `.c-table-indicator` styles;
- Added dynamic tooltips for total and marked rows count elements;

* fix lint issues

Co-authored-by: charlesh88 <charlesh88@gmail.com>

src/plugins/filters/components/global-filters.scss

@@ -3,20 +3,26 @@
     @include userSelectNone();
     background: $colorFilterBg;
     color: $colorFilterFg;
-    display: flex;
-    align-items: center;
-    font-size: 0.9em;
-    margin-top: $interiorMarginSm;
-    padding: 2px;
-    text-transform: uppercase;
 
     &:before {
         font-family: symbolsfont-12px;
         content: $glyph-icon-filter;
-        display: block;
-        font-size: 12px;
         margin-right: $interiorMarginSm;
     }
+
+    &--mixed {
+        .c-filter-indication__mixed {
+            font-style: italic;
+        }
+    }
+
+    &__label {
+        + .c-filter-indication__label {
+            &:before {
+                content: ', ';
+            }
+        }
+    }
 }
 
 .c-filter-tree-item {

src/plugins/telemetryTable/components/table-footer-indicator.scss

@@ -0,0 +1,29 @@
+.c-table-indicator {
+    display: flex;
+    align-items: center;
+    font-size: 0.9em;
+    overflow: hidden;
+
+    &__elem {
+        @include ellipsize();
+        flex: 0 1 auto;
+        padding: 2px;
+        text-transform: uppercase;
+
+        > * {
+            //display: contents;
+        }
+    }
+
+    &__counts {
+        //background: rgba(deeppink, 0.1);
+        display: flex;
+        flex: 1 1 auto;
+        justify-content: flex-end;
+        overflow: hidden;
+
+        > * {
+            margin-left: $interiorMargin;
+        }
+    }
+}

src/plugins/telemetryTable/components/table-footer-indicator.vue

@@ -1,9 +1,13 @@
 <template>
+<div
+    class="c-table-indicator"
+    :class="{ 'is-filtering': filterNames.length > 0 }"
+>
     <div
         v-if="filterNames.length > 0"
-    :title="title"
+        class="c-table-indicator__filter c-table-indicator__elem c-filter-indication"
-    class="c-filter-indication"
         :class="{ 'c-filter-indication--mixed': hasMixedFilters }"
+        :title="title"
     >
         <span class="c-filter-indication__mixed">{{ label }}</span>
         <span
@@ -14,6 +18,25 @@
             {{ name }}
         </span>
     </div>
+
+    <div class="c-table-indicator__counts">
+        <span
+            :title="totalRows + ' rows visible after any filtering'"
+            class="c-table-indicator__elem c-table-indicator__row-count"
+        >
+            {{ totalRows }} Rows
+        </span>
+
+        <span
+            v-if="markedRows"
+            class="c-table-indicator__elem c-table-indicator__marked-count"
+            :title="markedRows + ' rows selected'"
+        >
+            {{ markedRows }} Marked
+        </span>
+
+    </div>
+</div>
 </template>
 
 <script>
@@ -27,6 +50,16 @@ const USE_GLOBAL = 'useGlobal';
 
 export default {
     inject: ['openmct', 'table'],
+    props: {
+        markedRows: {
+            type: Number,
+            default: 0
+        },
+        totalRows: {
+            type: Number,
+            default: 0
+        }
+    },
     data() {
         return {
             filterNames: [],

src/plugins/telemetryTable/components/table.scss

@@ -150,6 +150,35 @@
             white-space: nowrap;
         }
     }
+
+    &__footer {
+        $pt: 2px;
+        border-top: 1px solid $colorInteriorBorder;
+        margin-top: $interiorMargin;
+        padding: $pt 0;
+        overflow: hidden;
+        transition: all 250ms;
+
+        &:not(.is-filtering) {
+            .c-frame & {
+                height: 0;
+                padding: 0;
+                visibility: hidden;
+            }
+        }
+    }
+
+    .c-frame & {
+        // target .c-frame .c-telemetry-table {}
+        $pt: 2px;
+        &:hover {
+            .c-telemetry-table__footer:not(.is-filtering) {
+                height: $pt + 16px;
+                padding: initial;
+                visibility: visible;
+            }
+        }
+    }
 }
 
 /******************************* SPECIFIC CASE WRAPPERS */

src/plugins/telemetryTable/components/table.vue

@@ -253,7 +253,11 @@
                 :object-path="objectPath"
             />
         </table>
-        <telemetry-filter-indicator />
+        <table-footer-indicator
+            class="c-telemetry-table__footer"
+            :marked-rows="markedRows.length"
+            :total-rows="totalNumberOfRows"
+        />
     </div>
 </div><!-- closes c-table-wrapper -->
 </template>
@@ -262,7 +266,7 @@
 import TelemetryTableRow from './table-row.vue';
 import search from '../../../ui/components/search.vue';
 import TableColumnHeader from './table-column-header.vue';
-import TelemetryFilterIndicator from './TelemetryFilterIndicator.vue';
+import TableFooterIndicator from './table-footer-indicator.vue';
 import CSVExporter from '../../../exporters/CSVExporter.js';
 import _ from 'lodash';
 import ToggleSwitch from '../../../ui/components/ToggleSwitch.vue';
@@ -277,7 +281,7 @@ export default {
         TelemetryTableRow,
         TableColumnHeader,
         search,
-        TelemetryFilterIndicator,
+        TableFooterIndicator,
         ToggleSwitch
     },
     inject: ['table', 'openmct', 'objectPath'],
@@ -342,7 +346,8 @@ export default {
             paused: false,
             markedRows: [],
             isShowingMarkedRowsOnly: false,
-            hideHeaders: configuration.hideHeaders
+            hideHeaders: configuration.hideHeaders,
+            totalNumberOfRows: 0
         };
     },
     computed: {
@@ -451,6 +456,8 @@ export default {
                     let filteredRows = this.table.filteredRows.getRows();
                     let filteredRowsLength = filteredRows.length;
 
+                    this.totalNumberOfRows = filteredRowsLength;
+
                     if (filteredRowsLength < VISIBLE_ROW_COUNT) {
                         end = filteredRowsLength;
                     } else {

src/plugins/telemetryTable/components/telemetry-filter-indicator.scss

@@ -1,37 +0,0 @@
-.c-filter-indication {
-    @include userSelectNone();
-    background: $colorFilterBg;
-    color: $colorFilterFg;
-    display: flex;
-    align-items: center;
-    font-size: 0.9em;
-    margin-top: $interiorMarginSm;
-    padding: 2px;
-    text-transform: uppercase;
-
-    &:before {
-        font-family: symbolsfont-12px;
-        content: $glyph-icon-filter;
-        display: block;
-        font-size: 12px;
-        margin-right: $interiorMarginSm;
-    }
-
-    &__mixed {
-        margin-right: $interiorMarginSm;
-    }
-
-    &--mixed {
-        .c-filter-indication__mixed {
-            font-style: italic;
-        }
-    }
-
-    &__label {
-        + .c-filter-indication__label {
-            &:before {
-                content: ',';
-            }
-        }
-    }
-}

src/styles/vue-styles.scss

@@ -18,7 +18,7 @@
 @import "../plugins/folderView/components/list-view.scss";
 @import "../plugins/imagery/components/imagery-view-layout.scss";
 @import "../plugins/telemetryTable/components/table-row.scss";
-@import "../plugins/telemetryTable/components/telemetry-filter-indicator.scss";
+@import "../plugins/telemetryTable/components/table-footer-indicator.scss";
 @import "../plugins/tabs/components/tabs.scss";
 @import "../plugins/telemetryTable/components/table.scss";
 @import "../plugins/timeConductor/conductor.scss";

src/ui/layout/layout.scss

@@ -81,7 +81,7 @@
                 flex: 0 0 auto;
 
                 + * {
-                    margin-top: $interiorMarginLg;
+                    margin-top: $interiorMargin;
                 }
             }
         }
@@ -148,6 +148,7 @@
     /******************************* HEAD */
     &__main-view-browse-bar {
         flex: 0 0 auto;
+        margin-bottom: $interiorMargin; // Needs some additional visual separation
     }
 
     body.mobile & .l-shell__main-view-browse-bar {