Implement an inspector view provider to display a component that allows setting printf format for alphanumeric items in a display layout.

example/notifications/res/dialog-launch.html

@@ -1,6 +1,6 @@
 <span class="h-indicator" ng-controller="DialogLaunchController">
     <!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
-    <div class="c-indicator c-indicator--clickable icon-box-with-arrow s-status-available"><span class="label">
+    <div class="ls-indicator icon-box-with-arrow s-status-available"><span class="label">
         <a ng-click="launchProgress(true)">Known</a>
         <a ng-click="launchProgress(false)">Unknown</a>
         <a ng-click="launchError()">Error</a>

example/notifications/res/notification-launch.html

@@ -1,6 +1,6 @@
 <span class="h-indicator" ng-controller="NotificationLaunchController">
     <!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
-    <div class="c-indicator c-indicator--clickable icon-bell s-status-available"><span class="label">
+    <div class="ls-indicator icon-bell s-status-available"><span class="label">
         <a ng-click="newInfo()">Success</a>
         <a ng-click="newError()">Error</a>
         <a ng-click="newAlert()">Alert</a>

index.html

@@ -87,7 +87,6 @@
         openmct.install(openmct.plugins.Filters(['table', 'telemetry.plot.overlay']));
         openmct.install(openmct.plugins.ObjectMigration());
         openmct.install(openmct.plugins.GoToOriginalAction());
-        openmct.install(openmct.plugins.GlobalClearIndicator());
         openmct.start();
     </script>
 </html>

package.json

@@ -55,7 +55,7 @@
     "node-bourbon": "^4.2.3",
     "node-sass": "^4.9.2",
     "painterro": "^0.2.65",
-    "printj": "^1.1.0",
+    "printj": "^1.2.1",
     "raw-loader": "^0.5.1",
     "request": "^2.69.0",
     "split": "^1.0.0",

platform/commonUI/general/res/templates/angular-indicator.html

@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
-<div class="c-indicator {{ngModel.getCssClass()}}"
+<div class="ls-indicator {{ngModel.getCssClass()}}"
 	 title="{{ngModel.getDescription()}}"
 	 ng-show="ngModel.getText().length > 0">
 	<span class="label">{{ngModel.getText()}}</span>

platform/commonUI/notification/res/notification-indicator.html

@@ -1,5 +1,5 @@
 <!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
-<div ng-show="notifications.length > 0" class="c-indicator c-indicator--clickable s-status-{{highest.severity}} icon-bell"
+<div ng-show="notifications.length > 0" class="ls-indicator s-status-{{highest.severity}} icon-bell"
       ng-controller="NotificationIndicatorController">
     <span class="label">
         <a ng-click="showNotificationsList()">

platform/features/clock/src/indicators/ClockIndicator.js

@@ -49,7 +49,7 @@ define(
         };
 
         ClockIndicator.prototype.getCssClass = function () {
-            return "t-indicator-clock icon-clock no-collapse c-indicator--not-clickable";
+            return "t-indicator-clock icon-clock no-collapse float-right";
         };
 
         ClockIndicator.prototype.getText = function () {

platform/persistence/couch/src/CouchIndicator.js

@@ -100,7 +100,7 @@ define(
         }
 
         CouchIndicator.prototype.getCssClass = function () {
-            return "c-indicator--clickable icon-database " + this.state.statusClass;
+            return "icon-database " + this.state.statusClass;
         };
 
         CouchIndicator.prototype.getGlyphClass = function () {

platform/persistence/elastic/src/ElasticIndicator.js

@@ -84,7 +84,7 @@ define(
         }
 
         ElasticIndicator.prototype.getCssClass = function () {
-            return "c-indicator--clickable icon-database";
+            return "icon-database";
         };
         ElasticIndicator.prototype.getGlyphClass = function () {
             return this.state.glyphClass;

platform/persistence/local/src/LocalStorageIndicator.js

@@ -41,7 +41,7 @@ define(
         }
 
         LocalStorageIndicator.prototype.getCssClass = function () {
-            return "c-indicator--clickable icon-database s-status-caution";
+            return "icon-database s-status-caution";
         };
         LocalStorageIndicator.prototype.getGlyphClass = function () {
             return 'caution';

src/api/indicators/res/indicator-template.html

@@ -1,3 +1,3 @@
-<div class="c-indicator c-indicator--clickable c-indicator--simple" title="">
+<div class="ls-indicator" title="">
     <span class="label indicator-text"></span>
 </div>

src/plugins/displayLayout/AlphanumericFormatViewProvider.js

@@ -0,0 +1,77 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed 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.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+define([
+    './components/AlphanumericFormatView.vue',
+    'vue'
+], function (AlphanumericFormatView, Vue) {
+
+    function AlphanumericFormatViewProvider(openmct, options) {
+        function isTelemetryObject(selectionPath) {
+            let selectedObject = selectionPath[0].context.item;
+            let parentObject = selectionPath[1].context.item;
+            return parentObject && 
+                parentObject.type === 'layout' &&
+                selectedObject &&
+                openmct.telemetry.isTelemetryObject(selectedObject) &&
+                !options.showAsView.includes(selectedObject.type)
+        }
+
+        return {
+            key: 'alphanumeric-format',
+            name: 'Alphanumeric Format',
+            canView: function (selection) {
+                if (selection.length === 0 || selection[0].length === 1) {
+                    return false;
+                }
+
+                return selection.every(isTelemetryObject);
+            },
+            view: function (selection) {
+                let component;
+                return {
+                    show: function (element) {
+                        component = new Vue({
+                            provide: {
+                                openmct
+                            },
+                            components: {
+                                AlphanumericFormatView: AlphanumericFormatView.default
+                            },
+                            template: '<alphanumeric-format-view></alphanumeric-format-view>',
+                            el: element
+                        });
+                    },
+                    destroy: function () {
+                        component.$destroy();
+                        component = undefined;
+                    }
+                }
+            },
+            priority: function () {
+                return 1;
+            }
+        }
+    }
+
+    return AlphanumericFormatViewProvider;
+});

src/plugins/displayLayout/components/AlphanumericFormatView.vue

@@ -0,0 +1,80 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed 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.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+<template>
+    <div class="c-properties" v-if="isEditing">
+        <div class="c-properties__header">Alphanumeric Format</div>
+        <ul class="c-properties__section" v-if="!multiSelect">
+            <li class="c-properties__row">
+                <div class="c-properties__label" title="Printf formatting for the selected telemetry">
+                    <label for="telemetryPrintfFormat">Format</label>
+                </div>
+                <div class="c-properties__value">
+                    <input id="telemetryPrintfFormat" type="text" @change="formatTelemetry" :value="telemetryFormat">
+                </div>
+            </li>
+        </ul>
+        <div class="c-properties__row--span-all" v-if="multiSelect">No format to display for multiple items</div>
+    </div>
+</template>
+
+<script>
+    export default {
+        inject: ['openmct'],
+        data() {
+            let selectionPath = this.openmct.selection.get()[0];
+            return {
+                isEditing: this.openmct.editor.isEditing(),
+                telemetryFormat: selectionPath[0].context.layoutItem.format,
+                multiSelect: false
+            }
+        },
+        methods: {
+            toggleEdit(isEditing) {
+                this.isEditing = isEditing;
+            },
+            formatTelemetry(event) {
+                let selectionPath = this.openmct.selection.get()[0];
+                let newFormat = event.currentTarget.value;
+                selectionPath[0].context.updateTelemetryFormat(newFormat);
+                this.telemetryFormat = newFormat;
+            },
+            handleSelection(selection) {
+                if (selection.length === 0 || selection[0].length === 0) {
+                    return;
+                }
+
+                this.multiSelect = selection.length > 1 ? true : false;
+            }
+        },
+        mounted() {
+            this.openmct.editor.on('isEditing', this.toggleEdit);
+            this.openmct.selection.on('change', this.handleSelection);
+            this.handleSelection(this.openmct.selection.get());
+        },
+        destroyed() {
+            this.openmct.editor.off('isEditing', this.toggleEdit);
+            this.openmct.selection.off('change', this.handleSelection);
+        }
+    }
+
+</script>

src/plugins/displayLayout/components/DisplayLayout.vue

@@ -48,7 +48,8 @@
                    :multiSelect="selectedLayoutItems.length > 1"
                    @move="move"
                    @endMove="endMove"
-                   @endLineResize='endLineResize'>
+                   @endLineResize='endLineResize'
+                   @formatChanged='updateTelemetryFormat'>
         </component>
         <edit-marquee v-if='showMarquee'
                       :gridSize="gridSize"
@@ -557,6 +558,11 @@
                     this.layoutItems.splice(itemIndex, 1);
                     this.layoutItems.splice(newIndex, 0, items[itemIndex]);
                 }
+            },
+            updateTelemetryFormat(item, format) {
+                let index = this.layoutItems.indexOf(item);
+                item.format = format;
+                this.mutate(`configuration.items[${index}]`, item);
             }
         },
         mounted() {

src/plugins/displayLayout/components/TelemetryView.vue

@@ -79,6 +79,7 @@
 
  <script>
     import LayoutFrame from './LayoutFrame.vue'
+    import printj from 'printj'
 
     const DEFAULT_TELEMETRY_DIMENSIONS = [10, 5],
           DEFAULT_POSITION = [1, 1];
@@ -143,6 +144,10 @@
                     return;
                 }
 
+                if (this.item.format) {
+                    return printj.sprintf(this.item.format, this.datum[this.valueMetadata.key]);
+                }
+
                 return this.valueFormatter && this.valueFormatter.format(this.datum);
             },
             telemetryClass() {
@@ -168,6 +173,9 @@
                 }
 
                 this.context.index = newIndex;
+            },
+            item(newItem) {
+                this.context.layoutItem = newItem;
             }
         },
         methods: {
@@ -194,6 +202,7 @@
                 }.bind(this));
             },
             updateView(datum) {
+                // TODO: normalize datum
                 this.datum = datum;
             },
             removeSubscription() {
@@ -219,10 +228,14 @@
                 this.context = {
                     item: domainObject,
                     layoutItem: this.item,
-                    index: this.index
+                    index: this.index,
+                    updateTelemetryFormat: this.updateTelemetryFormat
                 };
                 this.removeSelectable = this.openmct.selection.selectable(
                     this.$el, this.context, this.initSelect);
+            },
+            updateTelemetryFormat(format) {
+                this.$emit('formatChanged', this.item, format);
             }
         },
         mounted() {

src/plugins/displayLayout/plugin.js

@@ -25,6 +25,8 @@ import Vue from 'vue'
 import objectUtils from '../../api/objects/object-utils.js'
 import DisplayLayoutType from './DisplayLayoutType.js'
 import DisplayLayoutToolbar from './DisplayLayoutToolbar.js'
+import AlphaNumericFormatViewProvider from './AlphaNumericFormatViewProvider.js'
+
 export default function DisplayLayoutPlugin(options) {
     return function (openmct) {
         openmct.objectViews.addProvider({
@@ -76,7 +78,8 @@ export default function DisplayLayoutPlugin(options) {
             }
         });
         openmct.types.addType('layout', DisplayLayoutType());
-        openmct.toolbars.addProvider(new DisplayLayoutToolbar(openmct));
+        openmct.toolbars.addProvider(new DisplayLayoutToolbar(openmct, options));
+        openmct.inspectorViews.addProvider(new AlphaNumericFormatViewProvider(openmct, options));
         openmct.composition.addPolicy((parent, child) => {
             if (parent.type === 'layout' && child.type === 'folder') {
                 return false;

src/plugins/globalClearIndicator/components/globalClearIndicator.vue

@@ -1,18 +0,0 @@
-<template>
-    <div class="c-indicator c-indicator--clickable icon-session">
-        <span class="label">
-            <button @click="globalClearEmit">Clear All Data</button>
-        </span>
-    </div>
-</template>
-
-<script>
-export default {
-    inject: ['openmct'],
-    methods: {
-        globalClearEmit() {
-            this.openmct.notifications.emit('clear');
-        }
-    }
-}
-</script>

src/plugins/globalClearIndicator/plugin.js

@@ -1,48 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2019, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed 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.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    './components/globalClearIndicator.vue',
-    'vue'
-], function (
-    GlobaClearIndicator,
-    Vue
-) {
-    return function plugin() {
-        return function install(openmct) {
-            let component = new Vue ({
-                    provide: {
-                        openmct
-                    },
-                    components: {
-                        GlobalClearIndicator: GlobaClearIndicator.default
-                    },
-                    template: '<GlobalClearIndicator></GlobalClearIndicator>'
-                }),
-                indicator = {
-                    element: component.$mount().$el
-                };
-
-            openmct.indicators.add(indicator);
-        };
-    };
-});

src/plugins/plot/src/configuration/PlotSeries.js

@@ -377,19 +377,6 @@ define([
                 delete this.unsubscribe;
             }
             this.fetch();
-        },
-
-        /**
-         * Clears the plot series, unsubscribes and resubscribes
-         * @public
-         */
-        refresh: function () {
-            this.reset();
-            if (this.unsubscribe) {
-                this.unsubscribe();
-                delete this.unsubscribe;
-            }
-            this.fetch();
         }
     });
 

src/plugins/plot/src/telemetry/PlotController.js

@@ -80,10 +80,6 @@ define([
             'configuration.filters',
             this.updateFiltersAndResubscribe.bind(this)
         );
-
-        this.refresh = this.refresh.bind(this);
-
-        this.openmct.notifications.on('clear', this.refresh);
     }
 
     eventHelpers.extend(PlotController.prototype);
@@ -170,8 +166,6 @@ define([
         if (this.filterObserver) {
             this.filterObserver();
         }
-
-        this.openmct.notifications.off('clear', this.refresh);
     };
 
     PlotController.prototype.loadMoreData = function (range, purge) {
@@ -269,12 +263,6 @@ define([
         });
     };
 
-    PlotController.prototype.refresh = function (updatedFilters) {
-        this.config.series.forEach(function (series) {
-            series.refresh();
-        });
-    };
-
     /**
      * Export view as JPG.
      */

src/plugins/plugins.js

@@ -43,8 +43,7 @@ define([
     './LADTable/plugin',
     './filters/plugin',
     './objectMigration/plugin',
-    './goToOriginalAction/plugin',
-    './globalClearIndicator/plugin'
+    './goToOriginalAction/plugin'
 ], function (
     _,
     UTCTimeSystem,
@@ -68,8 +67,7 @@ define([
     LADTable,
     Filters,
     ObjectMigration,
-    GoToOriginalAction,
-    GlobalClearIndicator
+    GoToOriginalAction
 ) {
     var bundleMap = {
         LocalStorage: 'platform/persistence/local',
@@ -168,7 +166,6 @@ define([
     plugins.Filters = Filters;
     plugins.ObjectMigration = ObjectMigration.default;
     plugins.GoToOriginalAction = GoToOriginalAction.default;
-    plugins.GlobalClearIndicator = GlobalClearIndicator;
 
     return plugins;
 });

src/plugins/telemetryTable/TelemetryTable.js

@@ -62,7 +62,6 @@ define([
 
             openmct.time.on('bounds', this.refreshData);
             openmct.time.on('timeSystem', this.refreshData);
-            openmct.notifications.on('clear', this.refreshData);
         }
 
         initialize() {
@@ -241,7 +240,6 @@ define([
             Object.keys(this.subscriptions).forEach(this.unsubscribe, this);
             this.openmct.time.off('bounds', this.refreshData);
             this.openmct.time.off('timeSystem', this.refreshData);
-            this.openmct.notifications.off('clear', this.refreshData);
             if (this.filterObserver) {
                 this.filterObserver();
             }

src/styles-new/_controls.scss

@@ -49,21 +49,6 @@ button {
         }
     }
 
-    &[class*='__collapse-button'] {
-        box-shadow: none;
-        background: $splitterBtnColorBg;
-        color: $splitterBtnColorFg;
-        border-radius: $smallCr;
-        font-size: 6px;
-        line-height: 90%;
-        padding: 3px 15px;
-
-        @include hover() {
-            background: $colorBtnBgHov;
-            color: $colorBtnFgHov;
-        }
-    }
-
     &.is-active {
         background: $colorBtnActiveBg;
         color: $colorBtnActiveFg;
@@ -85,7 +70,13 @@ button {
     @include cClickIconButton();
 
     &--menu {
-        @include hasMenu();
+        &:after {
+            content: $glyph-icon-arrow-down;
+            font-family: symbolsfont;
+            font-size: 0.7em;
+            margin-left: floor($interiorMarginSm * 0.8);
+            opacity: 0.5;
+        }
     }
 }
 
@@ -135,7 +126,7 @@ button {
 
 /******************************************************** DISCLOSURE CONTROLS */
 /********* Disclosure Button */
-// Provides a downward arrow icon that when clicked displays additional options and/or info.
+// Provides a downward arrow icon that when clicked displays a context menu
 // Always placed AFTER an element
 .c-disclosure-button {
     @include cClickIcon();

src/styles-new/_legacy.scss

@@ -782,10 +782,6 @@ mct-indicators mct-include {
     display: contents;
 }
 
-/*
-
-    // MOVED TO INDICATORS.VUE
-
 .ls-indicator {
     $bg: rgba(white, 0.2) !important;
     $hbg: $colorStatusBarBg;
@@ -863,7 +859,7 @@ mct-indicators mct-include {
             border-radius: $br;
             font-size: .6rem;
             left: 0;
-            top: 140%;
+            bottom: 140%;
             opacity: 0;
             padding: $interiorMarginSm $interiorMargin;
             position: absolute;
@@ -877,8 +873,8 @@ mct-indicators mct-include {
                 content: '';
                 display: block;
                 position: absolute;
-                bottom: 100%;
-                @include triangle('up', $size: 4px, $ratio: 1, $color: $hbg);
+                top: 100%;
+                @include triangle('down', $size: 4px, $ratio: 1, $color: $hbg);
             }
         }
 
@@ -898,8 +894,7 @@ mct-indicators mct-include {
     }
 }
 
-
-
+/* Mobile */
 // Hide the clock indicator when we're phone portrait
 body.phone.portrait {
     .ls-indicator.t-indicator-clock {
@@ -907,8 +902,6 @@ body.phone.portrait {
     }
 }
 
-*/
-
 /************************************************* DATETIME UI */
 @mixin complexFieldHolder($myW) {
     width: $myW + $interiorMargin;

src/styles-new/_mixins.scss

@@ -420,9 +420,20 @@
     }
 }
 
-@mixin cClickIconButtonLayout() {
+@mixin cClickIconButton() {
+    // A clickable element that just includes the icon
+    // Background is displayed on hover
+    // Padding is included to facilitate a bigger hit area
+    // Make the icon bigger relative to its container
     $pLR: 4px;
     $pTB: 4px;
+
+    @include cControl();
+    background: none;
+    box-shadow: none;
+    cursor: pointer;
+    transition: $transOut;
+    border-radius: $controlCr;
     padding: $pTB $pLR;
 
     &:before,
@@ -431,20 +442,6 @@
         // Needed for c-togglebutton.
         font-size: 1.25em;
     }
-}
-
-@mixin cClickIconButton() {
-    // A clickable element that just includes the icon
-    // Background is displayed on hover
-    // Padding is included to facilitate a bigger hit area
-    // Make the icon bigger relative to its container
-    @include cControl();
-    @include cClickIconButtonLayout();
-    background: none;
-    box-shadow: none;
-    cursor: pointer;
-    transition: $transOut;
-    border-radius: $controlCr;
 
     @include hover() {
         transition: $transIn;
@@ -481,16 +478,6 @@
     }
 }
 
-@mixin hasMenu() {
-    &:after {
-        content: $glyph-icon-arrow-down;
-        font-family: symbolsfont;
-        font-size: 0.7em;
-        margin-left: floor($interiorMarginSm * 0.8);
-        opacity: 0.5;
-    }
-}
-
 @mixin cSelect($bg, $fg, $arwClr, $shdw) {
     $svgArwClr: str-slice(inspect($arwClr), 2, str-length(inspect($arwClr))); // Remove initial # in color value
     background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3e%3cpath fill='%23#{$svgArwClr}' d='M5 5l5-5H0z'/%3e%3c/svg%3e"), $bg;

src/styles-new/_status.scss

@@ -127,7 +127,7 @@ tr {
 .s-status-icon-ok:before { content: $glyph-icon-check; }
 
 /*************************************************** INDICATOR COLORING */
-.c-indicator {
+.ls-indicator {
     &.s-status-info {
         @include indicatorStatusColors($colorInfo);
     }

src/styles-new/sass-base.scss

@@ -25,8 +25,8 @@
 // Do not include anything that renders to CSS!
 @import "constants";
 @import "constants-mobile.scss";
-@import "constants-espresso"; // TEMP
-//@import "constants-snow"; // TEMP
+//@import "constants-espresso"; // TEMP
+@import "constants-snow"; // TEMP
 //@import "constants-maelstrom";
 @import "mixins";
 @import "animations";

src/ui/components/CurrentDateTime.vue

@@ -1,22 +0,0 @@
-<template>
-    <div class="c-indicator no-collapse icon-clock c-current-datetime">
-        <span class="label">{{ currentDateTime }} UTC</span>
-    </div>
-</template>
-
-<script>
-    import moment from 'moment';
-
-    export default {
-        data() {
-            return {
-                currentDateTime: moment.utc().format('LTS')
-            }
-        },
-        mounted: function() {
-            setInterval(()=>{
-                this.currentDateTime = moment.utc().format('YYYY/MM/DD HH:mm:ss')
-            },100)
-        }
-    }
-</script>

src/ui/inspector/InspectorViews.vue

@@ -25,10 +25,6 @@ import _ from 'lodash';
         },
         methods: {
             updateSelection(selection) {
-                if (_.isEqual(this.selection, selection)) {
-                    return;
-                }
-
                 this.selection = selection;
 
                 if (this.selectedViews) {
@@ -38,10 +34,6 @@ import _ from 'lodash';
                     this.$el.innerHTML = '';
                 }
 
-                if (selection.length > 1) {
-                    return;
-                }
-
                 this.selectedViews = this.openmct.inspectorViews.get(selection);
                 this.selectedViews.forEach(selectedView => {
                     let viewContainer = document.createElement('div');

src/ui/layout/Layout.vue

@@ -4,9 +4,7 @@
         }">
         <div class="l-shell__head">
             <CreateButton class="l-shell__create-button"></CreateButton>
-            <indicators class="l-shell__head-section l-shell__indicators"></indicators>
-            <notification-banner></notification-banner> <!-- TODO: MAKE SURE THIS PLACEMENT WORKS PROPERLY -->
-            <div class="l-shell__head-section l-shell__controls">
+            <div class="l-shell__controls">
                 <button class="c-icon-button c-icon-button--major icon-new-window" title="Open in a new browser tab"
                     @click="openInNewTab"
                     target="_blank">
@@ -17,8 +15,6 @@
                 </button>
             </div>
             <app-logo></app-logo>
-            <!--button class="l-shell__head__collapse-button c-button"
-                    @click="toggleShellHead"></button-->
         </div>
         <multipane class="l-shell__main"
                    type="horizontal">
@@ -48,6 +44,9 @@
                 <Inspector :isEditing="isEditing" ref="inspector"></Inspector>
             </pane>
         </multipane>
+        <div class="l-shell__status">
+            <StatusBar></StatusBar>
+        </div>
     </div>
 </template>
 
@@ -62,13 +61,11 @@
         flex-flow: column nowrap;
         overflow: hidden;
 
-/*        &__status {
-            min-width: 95%;
-            margin-right: 1%;
+        &__status {
             background: $colorStatusBarBg;
             color: $colorStatusBarFg;
             padding: $interiorMarginSm;
-        }*/
+        }
 
         &__pane-tree {
             width: 40%;
@@ -166,25 +163,11 @@
             align-items: center;
             background: $colorHeadBg;
             justify-content: space-between;
-            padding: $interiorMargin $interiorMargin + 2;
+            padding: $interiorMargin;
 
             > [class*="__"] + [class*="__"] {
                 margin-left: $interiorMargin;
             }
-
-            [class*='__collapse-button']:before {
-                content: $glyph-icon-arrow-down;
-                font-size: 1.1em;
-            }
-
-            &-section {
-                // Subdivides elements across the head
-                @include ellipsize();
-                border-right: 1px solid $colorInteriorBorder;
-                display: flex;
-                flex: 0 1 auto;
-                padding-right: $interiorMargin;
-            }
         }
 
         &__create-button,
@@ -192,11 +175,11 @@
             flex: 0 0 auto;
         }
 
-        &__create-button { margin-right: $interiorMarginLg; }
-
-        &__indicators {
-            flex: 1 1 auto;
-            [class*='indicator-clock'] { order: 99; }
+        &__controls {
+            flex: 1 1 100%;
+            display: flex;
+            justify-content: flex-end;
+            margin-right: 2.5%;
         }
 
         /******************************* MAIN AREA */
@@ -283,10 +266,9 @@
     import multipane from './multipane.vue';
     import pane from './pane.vue';
     import BrowseBar from './BrowseBar.vue';
+    import StatusBar from './status-bar/StatusBar.vue';
     import Toolbar from '../toolbar/Toolbar.vue';
     import AppLogo from './AppLogo.vue';
-    import Indicators from './status-bar/Indicators.vue';
-    import NotificationBanner from './status-bar/NotificationBanner.vue';
 
     var enterFullScreen = () => {
         var docElm = document.documentElement;
@@ -327,10 +309,9 @@
             multipane,
             pane,
             BrowseBar,
+            StatusBar,
             Toolbar,
-            AppLogo,
-            Indicators,
-            NotificationBanner
+            AppLogo
         },
         mounted() {
             this.openmct.editor.on('isEditing', (isEditing)=>{
@@ -375,9 +356,6 @@
                 }
 
                 this.hasToolbar = structure.length > 0;
-            },
-            toggleShellHead() {
-                return true;
             }
         }
     }

src/ui/layout/pane.vue

@@ -148,6 +148,21 @@
                 font-size: floor(12px * .9);
             }
 
+            &__collapse-button {
+                box-shadow: none;
+                background: $splitterBtnColorBg;
+                color: $splitterBtnColorFg;
+                border-radius: $smallCr;
+                font-size: 6px;
+                line-height: 90%;
+                padding: 3px 15px;
+
+                @include hover() {
+                    background: $colorBtnBgHov;
+                    color: $colorBtnFgHov;
+                }
+            }
+
             &__label {
                 // Name of the pane
                 @include ellipsize();

src/ui/layout/status-bar/Indicators.vue

@@ -17,132 +17,10 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
+<span id='status' class='status-holder'></span>
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
-    .l-indicators {
-        display: flex;
-        align-items: center;
-    }
-
-    .c-indicator {
-        @include cClickIconButtonLayout();
-
-        &--clickable {
-            @include cClickIconButton();
-            @include hasMenu();
-        }
-
-        $bg: rgba(white, 0.2) !important;
-        $hbg: $colorStatusBarBg;
-        $hshdw: rgba(white, 0.4) 0 0 3px;
-        $br: $controlCr;
-        $hoverYOffset: -35px;
-        /*background: transparent !important;*/
-        border-radius: $br;
-        /*display: inline-block;*/
-        /*position: relative;*/
-        //padding: 1px $interiorMarginSm; // Use padding instead of margin to keep hover chatter to a minimum
-        text-transform: uppercase;
-
-        &:before {
-            /*display: inline-block;*/
-        }
-
-        .label {
-            // Hover bubbles that appear when hovering on an Indicator
-            display: inline-block;
-
-            a,
-            button,
-            s-button,
-            .c-button {
-                // Make <a> in label look like buttons
-                transition: $transIn;
-                background: transparent;
-                border: 1px solid rgba($colorStatusBarFg, 0.5);
-                border-radius: $br;
-                box-sizing: border-box;
-                color: inherit;
-                font-size: inherit;
-                height: auto;
-                line-height: normal;
-                padding: 0 2px;
-                &:hover {
-                    background: $bg;
-                    color: #fff;
-                }
-            }
-
-            [class*='icon-'] {
-                // If any elements within label include the class 'icon-*' then deal with their :before's
-                &:before {
-                    font-size: 0.8em;
-                    margin-right: $interiorMarginSm;
-                }
-            }
-        }
-
-        &.no-collapse {
-            display: flex;
-            flex-flow: row nowrap;
-            align-items: center;
-
-            > *,
-            &:before {
-                flex: 1 1 auto;
-            }
-
-            &:before {
-                margin-right: $interiorMarginSm;
-            }
-        }
-
-        &:not(.no-collapse) {
-            &:before {
-                margin-right: 0 !important;
-            }
-
-            .label {
-                transition: all 250ms ease-in 100ms;
-                background: $hbg;
-                border-radius: $br;
-                font-size: .6rem;
-                left: 0;
-                top: 140%;
-                opacity: 0;
-                padding: $interiorMarginSm $interiorMargin;
-                position: absolute;
-                transform-origin: 10px 100%;
-                transform: scale(0.0);
-                white-space: nowrap;
-                z-index: 50;
-
-                &:before {
-                    // Infobubble-style arrow element
-                    content: '';
-                    display: block;
-                    position: absolute;
-                    bottom: 100%;
-                    @include triangle('up', $size: 4px, $ratio: 1, $color: $hbg);
-                }
-            }
-        }
-
-        &.float-right {
-            float: right;
-        }
-    }
-
-    /* Mobile */
-    // Hide the clock indicator when we're phone portrait
-    body.phone.portrait {
-        .c-indicator.t-indicator-clock {
-            display: none;
-        }
-    }
 </style>
 
 <script>
@@ -153,11 +31,10 @@
             this.openmct.indicators.indicatorObjects.forEach((indicator) => {
                 // So that we can consistently position indicator elements,
                 // guarantee that they are wrapped in an element we control
-                // CH: fuck that...
-                // var wrapperNode = document.createElement('span');
-                // wrapperNode.className = 'u-contents';
-                // wrapperNode.appendChild(indicator.element);
-                this.$el.appendChild(indicator.element);
+                var wrapperNode = document.createElement('span');
+                wrapperNode.className = 'l-indicator';
+                wrapperNode.appendChild(indicator.element);
+                this.$el.appendChild(wrapperNode);
             });
         }
     }

src/ui/layout/status-bar/StatusBar.vue

@@ -0,0 +1,42 @@
+<!--
+ Open MCT, Copyright (c) 2014-2018, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+ Open MCT is licensed 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.
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+    <span class="c-status">
+    <indicators></indicators>
+    <notification-banner></notification-banner>
+    </span>
+</template>
+
+<style lang="scss">
+    .c-status {
+        width: 100%;
+    }
+</style>
+
+<script>
+    import Indicators from './Indicators.vue';
+    import NotificationBanner from './NotificationBanner.vue';
+
+    export default {
+        components: {
+            Indicators,
+            NotificationBanner
+        }
+    }
+</script>

webpack.config.js

@@ -35,6 +35,7 @@ const webpackConfig = {
             "bourbon": "bourbon.scss",
             "vue": path.join(__dirname, "node_modules/vue/dist/vue.js"),
             "d3-scale": path.join(__dirname, "node_modules/d3-scale/build/d3-scale.min.js"),
+            "printj": path.join(__dirname, "node_modules/printj/dist/printj.min.js"),
             "styles": path.join(__dirname, "src/styles-new")
         }
     },