Vue status bar (#2188)

* Implemented indicators

* WIP

* Fixed templates from notifications example

* Message bar implemented

* Implemented notifications

* Fixed bug with destruction of notifications

* Renamed MessageBanner to NotificationBanner

* Add save success message

* Removed NotificationServiceSpec

* Removed legacy constants from bundle

src/MCT.js

@@ -223,6 +223,8 @@ define([
          */
         this.indicators = new api.IndicatorAPI(this);
 
+        this.notifications = new api.NotificationAPI();
+
         this.Dialog = api.Dialog;
 
         this.editor = new api.EditorAPI.default(this);

src/api/api.js

@@ -29,6 +29,7 @@ define([
     './ui/GestureAPI',
     './telemetry/TelemetryAPI',
     './indicators/IndicatorAPI',
+    './notifications/NotificationAPI',
     './Editor'
 
 ], function (
@@ -40,6 +41,7 @@ define([
     GestureAPI,
     TelemetryAPI,
     IndicatorAPI,
+    NotificationAPI,
     EditorAPI
 ) {
     return {
@@ -51,6 +53,7 @@ define([
         GestureAPI: GestureAPI,
         TelemetryAPI: TelemetryAPI,
         IndicatorAPI: IndicatorAPI,
+        NotificationAPI: NotificationAPI.default,
         EditorAPI: EditorAPI
     };
 });

src/api/indicators/IndicatorAPI.js

@@ -28,7 +28,7 @@ define([
 ) {
     function IndicatorAPI(openmct) {
         this.openmct = openmct;
-        this.indicatorElements = [];
+        this.indicatorObjects = [];
     }
 
     IndicatorAPI.prototype.simpleIndicator = function () {
@@ -55,12 +55,7 @@ define([
      *
      */
     IndicatorAPI.prototype.add = function (indicator) {
-        // So that we can consistently position indicator elements,
-        // guarantee that they are wrapped in an element we control
-        var wrapperNode = document.createElement('div');
-        wrapperNode.className = 'h-indicator';
-        wrapperNode.appendChild(indicator.element);
-        this.indicatorElements.push(wrapperNode);
+        this.indicatorObjects.push(indicator);
     };
 
     return IndicatorAPI;

src/api/notifications/MCTNotification.js

@@ -0,0 +1,48 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+import EventEmitter from 'EventEmitter';
+export default class MCTNotification extends EventEmitter {
+
+    constructor(notificationModel, notificationAPI) {
+        super();
+        this.notifications = notificationAPI;
+        this.model = notificationModel;
+        this.initializeModel();
+    }
+
+    minimize() {
+        this.notifications.minimize(this);
+    }
+
+    dismiss() {
+        this.notifications.dismiss(this)
+    }
+
+    dismissOrMinimize() {
+        this.notifications.dismissOrMinimize(this);
+    }
+
+    initializeModel() {
+        this.model.minimized = this.model.minimized || false;
+    }
+}

src/api/notifications/NotificationApi.js

@@ -0,0 +1,353 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+/**
+ * This bundle implements the notification service, which can be used to
+ * show banner notifications to the user. Banner notifications
+ * are used to inform users of events in a non-intrusive way. As
+ * much as possible, notifications share a model with blocking
+ * dialogs so that the same information can be provided in a dialog
+ * and then minimized to a banner notification if needed.
+ *
+ * @namespace platform/api/notifications
+ */
+import moment from 'moment';
+import EventEmitter from 'EventEmitter';
+import MCTNotification from './MCTNotification.js';
+
+/**
+ * A representation of a banner notification. Banner notifications
+ * are used to inform users of events in a non-intrusive way. As
+ * much as possible, notifications share a model with blocking
+ * dialogs so that the same information can be provided in a dialog
+ * and then minimized to a banner notification if needed, or vice-versa.
+ *
+ * @typedef {object} NotificationModel
+ * @property {string} title The title of the message
+ * @property {string} severity The importance of the message (one of
+ * 'info', 'alert', or 'error' where info < alert <error)
+ * @property {number} [progress] The completion status of a task
+ * represented numerically
+ * @property {boolean} [unknownProgress] a boolean indicating that the
+ * progress of the underlying task is unknown. This will result in a
+ * visually distinct progress bar.
+ * @property {boolean} [autoDismiss] If truthy, dialog will
+ * be automatically minimized or dismissed (depending on severity).
+ * Additionally, if the provided value is a number, it will be used
+ * as the delay period before being dismissed.
+ * @property {boolean} [dismissable=true] If true, notification will
+ * include an option to dismiss it completely.
+ * @see DialogModel
+ */
+
+const DEFAULT_AUTO_DISMISS_TIMEOUT = 3000;
+const MINIMIZE_ANIMATION_TIMEOUT = 300;
+
+/**
+ * The notification service is responsible for informing the user of
+ * events via the use of banner notifications.
+ * @memberof platform/commonUI/notification
+ * @constructor
+ * @param defaultAutoDismissTimeout The period of time that an
+ * auto-dismissed message will be displayed for.
+ * @param minimizeAnimationTimeout When notifications are minimized, a brief
+ * animation is shown. This animation requires some time to execute,
+ * so a timeout is required before the notification is hidden
+ */
+export default class NotificationAPI extends EventEmitter {
+    constructor() {
+        super();
+        this.notifications = [];
+        this.highest = { severity: "info" };
+
+        /*
+        * A context in which to hold the active notification and a
+        * handle to its timeout.
+        */
+        this.activeNotification = undefined;
+    }
+
+    /**
+     * Minimize a notification. The notification will still be available
+     * from the notification list. Typically notifications with a
+     * severity of 'info' should not be minimized, but rather
+     * dismissed. If you're not sure which is appropriate,
+     * use {@link Notification#dismissOrMinimize}
+     *
+     * @private
+     */
+    minimize(notification) {
+        //Check this is a known notification
+        let index = this.notifications.indexOf(notification);
+
+        if (this.activeTimeout) {
+            /*
+                Method can be called manually (clicking dismiss) or
+                automatically from an auto-timeout. this.activeTimeout
+                acts as a semaphore to prevent race conditions. Cancel any
+                timeout in progress (for the case where a manual dismiss
+                has shortcut an active auto-dismiss), and clear the
+                semaphore.
+                */
+            clearTimeout(this.activeTimeout);
+            delete this.activeTimeout;
+        }
+
+        if (index >= 0) {
+            notification.model.minimized = true;
+            //Add a brief timeout before showing the next notification
+            // in order to allow the minimize animation to run through.
+            setTimeout(() => {
+                notification.emit('destroy');
+                this.setActiveNotification(this.selectNextNotification());
+            }, MINIMIZE_ANIMATION_TIMEOUT);
+        }
+    }
+
+    /**
+     * Completely removes a notification. This will dismiss it from the
+     * message banner and remove it from the list of notifications.
+     * Typically only notifications with a severity of info should be
+     * dismissed. If you're not sure whether to dismiss or minimize a
+     * notification, use {@link Notification#dismissOrMinimize}.
+     * dismiss
+     *
+     * @private
+     */
+    dismiss(notification) {
+        //Check this is a known notification
+        let index = this.notifications.indexOf(notification);
+
+        if (this.activeTimeout) {
+            /* Method can be called manually (clicking dismiss) or
+                * automatically from an auto-timeout. this.activeTimeout
+                * acts as a semaphore to prevent race conditions. Cancel any
+                * timeout in progress (for the case where a manual dismiss
+                * has shortcut an active auto-dismiss), and clear the
+                * semaphore.
+                */
+
+            clearTimeout(this.activeTimeout);
+            delete this.activeTimeout;
+        }
+
+        if (index >= 0) {
+            this.notifications.splice(index, 1);
+        }
+        this.setActiveNotification(this.selectNextNotification());
+        this.setHighestSeverity();
+        notification.emit('destroy');
+    }
+
+    /**
+     * Depending on the severity of the notification will selectively
+     * dismiss or minimize where appropriate.
+     *
+     * @private
+     */
+    dismissOrMinimize(notification) {
+        let model = notification.model;
+        if (model.severity === "info") {
+            if (model.autoDismiss === false) {
+                this.minimize(notification);
+            } else {
+                this.dismiss(notification);
+            }
+        } else {
+            this.minimize(notification);
+        }
+    }
+
+    /**
+     * Returns the notification that is currently visible in the banner area
+     * @returns {Notification}
+     */
+    getActiveNotification() {
+        return this.activeNotification;
+    }
+
+    /**
+     * A convenience method for info notifications. Notifications
+     * created via this method will be auto-destroy after a default
+     * wait period unless explicitly forbidden by the caller through
+     * the {autoDismiss} property on the {NotificationModel}, in which
+     * case the notification will be minimized after the wait.
+     * @param {NotificationModel | string} message either a string for
+     * the title of the notification message, or a {@link NotificationModel}
+     * defining the options notification to display
+     * @returns {Notification} the provided notification decorated with
+     * functions to dismiss or minimize
+     */
+    info(message) {
+        let notificationModel = typeof message === "string" ? {title: message} : message;
+        notificationModel.severity = "info";
+        return this.notify(notificationModel);
+    }
+
+    /**
+     * A convenience method for alert notifications. Notifications
+     * created via this method will will have severity of "alert" enforced
+     * @param {NotificationModel | string} message either a string for
+     * the title of the alert message with default options, or a
+     * {@link NotificationModel} defining the options notification to
+     * display
+     * @returns {Notification} the provided notification decorated with
+     * functions to dismiss or minimize
+     */
+    alert(message) {
+        let notificationModel = typeof message === "string" ? {title: message} : message;
+        notificationModel.severity = "alert";
+        return this.notify(notificationModel);
+    }
+
+    /**
+     * A convenience method for error notifications. Notifications
+     * created via this method will will have severity of "error" enforced
+     * @param {NotificationModel | string} message either a string for
+     * the title of the error message with default options, or a
+     * {@link NotificationModel} defining the options of the notification to
+     * display
+     * @returns {Notification} the provided notification decorated with
+     * functions to dismiss or minimize
+     */
+    error(message) {
+        let notificationModel = typeof message === "string" ? {title: message} : message;
+        notificationModel.severity = "error";
+        return this.notify(notificationModel);
+    }
+
+    /**
+     * @private
+     */
+    setHighestSeverity() {
+        let severity = {
+            "info": 1,
+            "alert": 2,
+            "error": 3
+        };
+        this.highest.severity = this.notifications.reduce((previous, notification) => {
+            if (severity[notification.model.severity] > severity[previous]) {
+                return notification.model.severity;
+            } else {
+                return previous;
+            }
+        }, "info");
+    }
+
+    /**
+     * Notifies the user of an event. If there is a banner notification
+     * already active, then it will be dismissed or minimized automatically,
+     * and the provided notification displayed in its place.
+     *
+     * @param {NotificationModel} notificationModel The notification to
+     * display
+     * @returns {Notification} the provided notification decorated with
+     * functions to {@link Notification#dismiss} or {@link Notification#minimize}
+     */
+    notify(notificationModel) {
+        let notification;
+        let activeNotification = this.activeNotification;
+
+        notificationModel.severity = notificationModel.severity || "info";
+        notificationModel.timestamp = moment.utc().format('YYYY-MM-DD hh:mm:ss.ms');
+
+        notification = new MCTNotification(notificationModel, this);
+
+        this.notifications.push(notification);
+        this.setHighestSeverity();
+
+        /*
+        Check if there is already an active (ie. visible) notification
+            */
+        if (!this.activeNotification) {
+            this.setActiveNotification(notification);
+        } else if (!this.activeTimeout) {
+            /*
+                If there is already an active notification, time it out. If it's
+                already got a timeout in progress (either because it has had
+                timeout forced because of a queue of messages, or it had an
+                autodismiss specified), leave it to run. Otherwise force a
+                timeout.
+
+                This notification has been added to queue and will be
+                serviced as soon as possible.
+                */
+            this.activeTimeout = setTimeout(() => {
+                this.dismissOrMinimize(activeNotification);
+            }, DEFAULT_AUTO_DISMISS_TIMEOUT);
+        }
+        
+        return notification;
+    }
+
+    /**
+     * Used internally by the NotificationService
+     * @private
+     */
+    setActiveNotification(notification) {
+        let shouldAutoDismiss;
+        this.activeNotification = notification;
+
+        if (!notification) {
+            delete this.activeTimeout;
+            return;
+        }
+        this.emit('notification', notification);
+
+        if (notification.model.severity === "info") {
+            shouldAutoDismiss = true;
+        } else {
+            shouldAutoDismiss = notification.model.autoDismiss;
+        }
+
+        if (shouldAutoDismiss || this.selectNextNotification()) {
+            this.activeTimeout = setTimeout(() => {
+                this.dismissOrMinimize(notification);
+            }, DEFAULT_AUTO_DISMISS_TIMEOUT);
+        } else {
+            delete this.activeTimeout;
+        }
+    }
+
+    /**
+     * Used internally by the NotificationService
+     *
+     * @private
+     */
+    selectNextNotification() {
+        let notification;
+        let i = 0;
+
+        /*
+        Loop through the notifications queue and find the first one that
+        has not already been minimized (manually or otherwise).
+            */
+        for (; i < this.notifications.length; i++) {
+            notification = this.notifications[i];
+
+            if (!notification.model.minimized &&
+                notification !== this.activeNotification) {
+                return notification;
+            }
+        }
+    }
+}

src/ui/components/layout/BrowseBar.vue

@@ -75,7 +75,12 @@
                 this.openmct.editor.cancel();
             },
             saveAndFinishEditing() {
-                this.openmct.editor.save();
+                this.openmct.editor.save().then(()=> {
+                    this.openmct.notifications.info('Save successful');
+                }).catch((error) => {
+                    this.openmct.notifications.error('Error saving objects');
+                    console.error(error);
+                });
             }
         },
         data: function () {

src/ui/components/layout/Layout.vue

@@ -47,7 +47,7 @@
             </pane>
         </multipane>
         <div class="l-shell__status">
-            <MctStatus></MctStatus>
+            <StatusBar></StatusBar>
         </div>
     </div>
 </template>
@@ -236,7 +236,6 @@
 
 <script>
     import Inspector from '../inspector/Inspector.vue';
-    import MctStatus from './MctStatus.vue';
     import MctTree from './mct-tree.vue';
     import ObjectView from './ObjectView.vue';
     import MctTemplate from '../legacy/mct-template.vue';
@@ -246,6 +245,7 @@
     import multipane from '../controls/multipane.vue';
     import pane from '../controls/pane.vue';
     import BrowseBar from './BrowseBar.vue';
+    import StatusBar from './status-bar/StatusBar.vue';
     import Toolbar from './Toolbar.vue';
 
     var enterFullScreen = () => {
@@ -280,7 +280,6 @@
         inject: ['openmct'],
         components: {
             Inspector,
-            MctStatus,
             MctTree,
             ObjectView,
             'mct-template': MctTemplate,
@@ -290,6 +289,7 @@
             multipane,
             pane,
             BrowseBar,
+            StatusBar,
             Toolbar
         },
         mounted() {

src/ui/components/layout/MctStatus.vue

@@ -1,14 +0,0 @@
-<template>
-    <span class="c-status">
-        [ Status ]
-    </span>
-</template>
-
-<style lang="scss">
-
-</style>
-
-<script>
-    export default {
-    }
-</script>

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

@@ -0,0 +1,41 @@
+<!--
+ 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 id='status' class='status-holder'></span>
+</template>
+
+<style lang="scss">
+</style>
+
+<script>
+    export default {
+        inject: ['openmct'],
+
+        mounted() {
+            this.openmct.indicators.indicatorObjects.forEach((indicator) => {
+                // So that we can consistently position indicator elements,
+                // guarantee that they are wrapped in an element we control
+                var wrapperNode = document.createElement('span');
+                wrapperNode.className = 'l-indicator';
+                wrapperNode.appendChild(indicator.element);
+                this.$el.appendChild(wrapperNode);
+            });
+        }
+    }
+</script>

src/ui/components/layout/status-bar/NotificationBanner.vue

@@ -0,0 +1,98 @@
+<!--
+ 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="l-message-banner s-message-banner" 
+    :class="[
+        activeModel.severity,
+        {
+            'minimized': activeModel.minimized,
+            'new': !activeModel.minimized
+        }]"
+    v-if="activeModel">
+    <span @click="maximize()" class="banner-elem label">{{activeModel.title}}</span>
+    <span @click="maximize()" v-if="activeModel.progress !== undefined || activeModel.unknownProgress">
+        <div class="banner-elem"><!-- was mct-include -->
+            <span class="l-progress-bar s-progress-bar"
+                :class="{'indeterminate': activeModel.unknownProgress }">
+                <span class="progress-amt-holder">
+                    <span class="progress-amt" :style="progressWidth"></span>
+                </span>
+            </span>
+            <div class="progress-info hint" v-if="activeModel.progressText !== undefined">
+                <span class="progress-amt-text" v-if="activeModel.progress > 0">{{activeModel.progress}}% complete. </span>
+                {{activeModel.progressText}}
+            </div>
+        </div>
+    </span>
+    <a class="close icon-x" @click="dismiss()"></a>
+</div>
+</template>
+
+<style lang="scss">
+    .l-message-banner {
+        display: inline;
+        left: 50%;
+        position: absolute;
+    }
+    .banner-elem {
+        display: inline;
+    }
+</style>
+
+<script>
+    let activeNotification = undefined;
+    let dialogService = undefined;
+    export default {
+        inject: ['openmct'],
+        data() {
+            return {
+                activeModel: undefined
+            }
+        },
+        methods: {
+            showNotification(notification) {
+                activeNotification = notification;
+                this.activeModel = notification.model;
+                activeNotification.once('destroy', () => {
+                    if (this.activeModel === notification.model){
+                        this.activeModel = undefined;
+                        activeNotification = undefined;
+                    }
+                });
+            },
+            dismiss() {
+                activeNotification.dismissOrMinimize();
+            },
+            maximize() {
+                //Not implemented yet.
+            }
+        },
+        computed: {
+            progressWidth() {
+                return {
+                    width: this.activeModel.progress + '%'
+                };
+            }
+        },
+        mounted() {
+            openmct.notifications.on('notification', this.showNotification);
+        }
+
+    }
+</script>

src/ui/components/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>