Add linear progress bar to tables (#4204)

* Add linear progress bar to tables
- Stubbed in markup;
- Better CSS anim for clarity;

* Indeterminate progress bar for telemetry tables
- Significant refinements to use ProgressBar.vue component;
- Stubbed in temp computed property for `progressLoad`;
- Better animation approach for indeterminate progress;
- Refined markup and CSS for `c-progress-bar`;

* Indeterminate progress bar for telemetry tables
- Refinements for determinate progress as shown in notification banners;
- Refined look of progress bar for clarity;
- Vue component now uses progressPerc === undefined instead of 'unknown';
- Animation tweaked;

* Changed progress-bar v-if test
- Per PR change suggestion, replace `v-if=progressLoad.progressPerc !== 100`
to `v-if=loading`;

src/plugins/telemetryTable/components/table.scss

@@ -92,6 +92,10 @@
         position: relative;
     }
 
+    &__progress-bar {
+        margin-bottom: 3px;
+    }
+
     /******************************* WRAPPERS */
     &__body-w {
         // Wraps __body table provides scrolling

src/plugins/telemetryTable/components/table.vue

@@ -138,6 +138,13 @@
             class="c-telemetry-table__drop-target"
             :style="dropTargetStyle"
         ></div>
+
+        <progress-bar
+            v-if="loading"
+            class="c-telemetry-table__progress-bar"
+            :model="progressLoad"
+        />
+
         <!-- Headers table -->
         <div
             v-show="!hideHeaders"
@@ -285,6 +292,7 @@ import CSVExporter from '../../../exporters/CSVExporter.js';
 import _ from 'lodash';
 import ToggleSwitch from '../../../ui/components/ToggleSwitch.vue';
 import SizingRow from './sizing-row.vue';
+import ProgressBar from "../../../ui/components/ProgressBar.vue";
 
 const VISIBLE_ROW_COUNT = 100;
 const ROW_HEIGHT = 17;
@@ -298,7 +306,8 @@ export default {
         search,
         TableFooterIndicator,
         ToggleSwitch,
-        SizingRow
+        SizingRow,
+        ProgressBar
     },
     inject: ['openmct', 'objectPath', 'table', 'currentView'],
     props: {
@@ -353,7 +362,7 @@ export default {
             autoScroll: true,
             sortOptions: {},
             filters: {},
-            loading: false,
+            loading: true,
             scrollable: undefined,
             tableEl: undefined,
             headersHolderEl: undefined,
@@ -374,6 +383,11 @@ export default {
         };
     },
     computed: {
+        progressLoad() {
+            return {
+                progressPerc: undefined
+            };
+        },
         dropTargetStyle() {
             return {
                 top: this.$refs.headersTable.offsetTop + 'px',

src/styles/_constants.scss

@@ -100,10 +100,10 @@ $mobileTreeItemH: 35px; // Used
 
 /************************** UI ELEMENTS */
 /*************** Progress Bar */
-$colorProgressBarHolder: rgba(black, 0.1);
+$colorProgressBarHolder: rgba(black, 0.2);
 $colorProgressBar: #0085ad;
 $progressAnimW: 500px;
-$progressBarMinH: 6px;
+$progressBarMinH: 4px;
 /************************** FONT STYLING */
 $listFontSizes: 8,9,10,11,12,13,14,16,18,20,24,28,32,36,42,48,72,96,128;
 

src/ui/components/ProgressBar.vue

@@ -1,12 +1,9 @@
 <template>
 <div class="c-progress-bar">
-    <div class="c-progress-bar__holder">
+    <div class="c-progress-bar__bar"
-        <div
+         :class="{ '--indeterminate': model.progressPerc === undefined }"
-            class="c-progress-bar__bar"
+         :style="styleBarWidth"
-            :class="{'--indeterminate': model.progressPerc === 'unknown'}"
+    ></div>
-            :style="styleBarWidth"
-        ></div>
-    </div>
     <div
         v-if="model.progressText !== undefined"
         class="c-progress-bar__text"
@@ -27,7 +24,7 @@ export default {
     },
     computed: {
         styleBarWidth() {
-            return `width: ${this.model.progressPerc}%;`;
+            return (this.model.progressPerc !== undefined) ? `width: ${this.model.progressPerc}%;` : '';
         }
     }
 };

src/ui/components/progress-bar.scss

@@ -1,43 +1,24 @@
 /******************************************************** PROGRESS BAR */
-@keyframes progress {
+@keyframes progressIndeterminate {
-    100% { background-position: $progressAnimW center; }
+    0% { left: 0; width: 0; }
-}
+    70% { left: 0; width: 100%; opacity: 1; }
-
+    100% { left: 100%; opacity: 0; }
-@mixin progressAnim($c1, $c2, $size) {
-    $edge: 20%;
-    background-image: linear-gradient(-90deg,
-            $c1 0%, $c2 $edge,
-            $c2 $edge, $c1 100%
-    );
-    background-position: 0 center;
-    background-repeat: repeat-x;
-    background-size: $size 100%;
 }
 
 .c-progress-bar {
-    display: flex;
+    background: $colorProgressBarHolder;
-    flex-direction: column;
+    display: block;
+    min-height: $progressBarMinH;
+    overflow: hidden;
     width: 100%;
 
-    > * + * {
-        margin-top: $interiorMargin;
-    }
-
-    &__holder {
-        background: $colorProgressBarHolder;
-        box-shadow: inset rgba(black, 0.4) 0 0.25px 3px;
-        flex: 1 1 auto;
-        padding: 1px;
-    }
-
     &__bar {
-        @include progressAnim($colorProgressBar, lighten($colorProgressBar, 10%), $progressAnimW);
+        background: $colorProgressBar;
-        animation: progress 1000ms linear infinite;
-        min-height: $progressBarMinH;
         height: 100%;
 
         &.--indeterminate {
-            width: 100% !important;
+            position: absolute;
+            animation: progressIndeterminate 1.5s ease-in infinite;
         }
     }
 }

src/ui/layout/status-bar/notification-banner.scss

@@ -57,7 +57,7 @@
     }
 
     &__progress-bar {
-        flex: 0 0 auto;
+        height: 7px;
         width: 70px;
 
         // Only show the progress bar