Clock element as a standalone component

- Was intended to replace clock indicator;
- WIP!

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="ls-indicator icon-box-with-arrow s-status-available"><span class="label">
+    <div class="c-indicator c-indicator--clickable 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="ls-indicator icon-bell s-status-available"><span class="label">
+    <div class="c-indicator c-indicator--clickable 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,6 +87,7 @@
         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>

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="ls-indicator {{ngModel.getCssClass()}}"
+<div class="c-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="ls-indicator s-status-{{highest.severity}} icon-bell"
+<div ng-show="notifications.length > 0" class="c-indicator c-indicator--clickable 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 float-right";
+            return "t-indicator-clock icon-clock no-collapse c-indicator--not-clickable";
         };
 
         ClockIndicator.prototype.getText = function () {

platform/persistence/couch/src/CouchIndicator.js

@@ -100,7 +100,7 @@ define(
         }
 
         CouchIndicator.prototype.getCssClass = function () {
-            return "icon-database " + this.state.statusClass;
+            return "c-indicator--clickable 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 "icon-database";
+            return "c-indicator--clickable 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 "icon-database s-status-caution";
+            return "c-indicator--clickable icon-database s-status-caution";
         };
         LocalStorageIndicator.prototype.getGlyphClass = function () {
             return 'caution';

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

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

src/plugins/globalClearIndicator/components/globalClearIndicator.vue

@@ -0,0 +1,18 @@
+<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

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

src/plugins/plugins.js

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

src/plugins/telemetryTable/TelemetryTable.js

@@ -62,6 +62,7 @@ define([
 
             openmct.time.on('bounds', this.refreshData);
             openmct.time.on('timeSystem', this.refreshData);
+            openmct.notifications.on('clear', this.refreshData);
         }
 
         initialize() {
@@ -240,6 +241,7 @@ 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,6 +49,21 @@ 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;
@@ -70,13 +85,7 @@ button {
     @include cClickIconButton();
 
     &--menu {
-        &:after {
-            content: $glyph-icon-arrow-down;
-            font-family: symbolsfont;
-            font-size: 0.7em;
-            margin-left: floor($interiorMarginSm * 0.8);
-            opacity: 0.5;
-        }
+        @include hasMenu();
     }
 }
 
@@ -126,7 +135,7 @@ button {
 
 /******************************************************** DISCLOSURE CONTROLS */
 /********* Disclosure Button */
-// Provides a downward arrow icon that when clicked displays a context menu
+// Provides a downward arrow icon that when clicked displays additional options and/or info.
 // Always placed AFTER an element
 .c-disclosure-button {
     @include cClickIcon();

src/styles-new/_legacy.scss

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

src/styles-new/_mixins.scss

@@ -420,20 +420,9 @@
     }
 }
 
-@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
+@mixin cClickIconButtonLayout() {
     $pLR: 4px;
     $pTB: 4px;
-
-    @include cControl();
-    background: none;
-    box-shadow: none;
-    cursor: pointer;
-    transition: $transOut;
-    border-radius: $controlCr;
     padding: $pTB $pLR;
 
     &:before,
@@ -442,6 +431,20 @@
         // 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;
@@ -478,6 +481,16 @@
     }
 }
 
+@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 */
-.ls-indicator {
+.c-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

@@ -0,0 +1,22 @@
+<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/layout/Layout.vue

@@ -4,7 +4,9 @@
         }">
         <div class="l-shell__head">
             <CreateButton class="l-shell__create-button"></CreateButton>
-            <div class="l-shell__controls">
+            <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">
                 <button class="c-icon-button c-icon-button--major icon-new-window" title="Open in a new browser tab"
                     @click="openInNewTab"
                     target="_blank">
@@ -15,6 +17,8 @@
                 </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">
@@ -44,9 +48,6 @@
                 <Inspector :isEditing="isEditing" ref="inspector"></Inspector>
             </pane>
         </multipane>
-        <div class="l-shell__status">
-            <StatusBar></StatusBar>
-        </div>
     </div>
 </template>
 
@@ -61,11 +62,13 @@
         flex-flow: column nowrap;
         overflow: hidden;
 
-        &__status {
+/*        &__status {
+            min-width: 95%;
+            margin-right: 1%;
             background: $colorStatusBarBg;
             color: $colorStatusBarFg;
             padding: $interiorMarginSm;
-        }
+        }*/
 
         &__pane-tree {
             width: 40%;
@@ -163,11 +166,25 @@
             align-items: center;
             background: $colorHeadBg;
             justify-content: space-between;
-            padding: $interiorMargin;
+            padding: $interiorMargin $interiorMargin + 2;
 
             > [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,
@@ -175,11 +192,11 @@
             flex: 0 0 auto;
         }
 
-        &__controls {
-            flex: 1 1 100%;
-            display: flex;
-            justify-content: flex-end;
-            margin-right: 2.5%;
+        &__create-button { margin-right: $interiorMarginLg; }
+
+        &__indicators {
+            flex: 1 1 auto;
+            [class*='indicator-clock'] { order: 99; }
         }
 
         /******************************* MAIN AREA */
@@ -266,9 +283,10 @@
     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;
@@ -309,9 +327,10 @@
             multipane,
             pane,
             BrowseBar,
-            StatusBar,
             Toolbar,
-            AppLogo
+            AppLogo,
+            Indicators,
+            NotificationBanner
         },
         mounted() {
             this.openmct.editor.on('isEditing', (isEditing)=>{
@@ -356,6 +375,9 @@
                 }
 
                 this.hasToolbar = structure.length > 0;
+            },
+            toggleShellHead() {
+                return true;
             }
         }
     }

src/ui/layout/pane.vue

@@ -148,21 +148,6 @@
                 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,10 +17,132 @@
  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>
@@ -31,10 +153,11 @@
             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);
+                // CH: fuck that...
+                // var wrapperNode = document.createElement('span');
+                // wrapperNode.className = 'u-contents';
+                // wrapperNode.appendChild(indicator.element);
+                this.$el.appendChild(indicator.element);
             });
         }
     }

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

@@ -1,42 +0,0 @@
-<!--
- 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>