From 1a06702dbe009f8b0e4f3e373c0f50ea6d61be5e Mon Sep 17 00:00:00 2001
From: Andrew Henry <andrew.k.henry@nasa.gov>
Date: Thu, 7 Feb 2019 11:36:37 -0800
Subject: [PATCH] Resolve conductor configuration immediately (#2276)

* Set time system / bounds immediately based on conductor configuration

* Hide date picker if not UTC based time system. Improve Conductor configuration error messages.
---
 index.html                              | 208 +-----------------------
 src/plugins/timeConductor/Conductor.vue |   5 +-
 src/plugins/timeConductor/plugin.js     |  56 +++----
 3 files changed, 29 insertions(+), 240 deletions(-)
diff --git a/index.html b/index.html
index 7ec6a77eb0..5109e7f638 100644
--- a/index.html
+++ b/index.html
@@ -36,7 +36,9 @@
     <body>
     </body>
     <script>
-        var THIRTY_MINUTES = 30 * 60 * 1000;
+        const FIVE_MINUTES = 5 * 60 * 1000;
+        const THIRTY_MINUTES = 30 * 60 * 1000;
+
         [
             'example/eventGenerator',
             'example/styleguide'
@@ -67,8 +69,8 @@
                     timeSystem: 'utc',
                     clock: 'local',
                     clockOffsets: {
-                        start: -25 * 60 * 1000,
-                        end: 5 * 60 * 1000
+                        start: - THIRTY_MINUTES,
+                        end: FIVE_MINUTES
                     }
                 }
             ]
@@ -79,206 +81,6 @@
         openmct.install(openmct.plugins.Tabs());
         openmct.install(openmct.plugins.FlexibleLayout());
         openmct.install(openmct.plugins.LADTable());
-        openmct.time.clock('local', {start: -THIRTY_MINUTES, end: 0});
-        openmct.time.timeSystem('utc');
         openmct.start();
-
-        // openmct.toolbars.addProvider({
-        //     name: "Testing Toolbar",
-        //     key: "testing",
-        //     description: "a mock toolbar that exercises all controls",
-        //     forSelection: function (selection) {
-        //         return true; // always applies.
-        //     },
-        //     toolbar: function (selection) {
-        //         return [
-        //             {
-        //                 control: 'menu',
-        //                 icon: 'icon-plus',
-        //                 label: 'Add',
-        //                 options: [
-        //                     { name: 'Box', class: 'icon-box', title: 'Add Box' },
-        //                     { name: 'Line', class: 'icon-line-horz', title: 'Add Line' },
-        //                     { name: 'Text', class: 'icon-font', title: 'Add Text' },
-        //                     { name: 'Image', class: 'icon-image', title: 'Add Image' }
-        //                 ]
-        //             },
-        //             {
-        //                 control: 'separator'
-        //             },
-        //             {
-        //                 control: 'color-picker',
-        //                 icon: 'icon-paint-bucket',
-        //                 value: '#33ff00',
-        //             },
-        //             {
-        //                 control: 'color-picker',
-        //                 icon: 'icon-pencil',
-        //                 value: '#ffffff',
-        //             },
-        //             {
-        //                 control: 'color-picker',
-        //                 icon: 'icon-font',
-        //                 value: '#333333',
-        //             },
-        //
-        //             {
-        //                 control: 'separator'
-        //             },
-        //             {
-        //                 control: 'select-menu',
-        //                 value: 11,
-        //                 options: [
-        //                     { value: 9, name: '9 px' },
-        //                     { value: 10, name: '10 px' },
-        //                     { value: 11, name: '11 px' },
-        //                     { value: 12, name: '12 px' },
-        //                     { value: 13, name: '13 px' },
-        //                     { value: 14, name: '14 px' },
-        //                     { value: 16, name: '16 px' },
-        //                     { value: 18, name: '18 px' },
-        //                     { value: 20, name: '20 px' },
-        //                     { value: 24, name: '24 px' },
-        //                     { value: 28, name: '28 px' },
-        //                     { value: 32, name: '32 px' },
-        //                     { value: 40, name: '40 px' },
-        //                     { value: 48, name: '48 px' },
-        //                     { value: 56, name: '56 px' },
-        //                     { value: 64, name: '64 px' },
-        //                     { value: 72, name: '72 px' },
-        //                     { value: 80, name: '80 px' },
-        //                     { value: 88, name: '88 px' },
-        //                     { value: 96, name: '96 px' },
-        //                     { value: 128, name: '128 px' },
-        //                     { value: 160, name: '160 px' }
-        //                 ]
-        //             },
-        //
-        //             {
-        //                 control: 'separator'
-        //             },
-        //             {
-        //                 control: 'menu',
-        //                 icon: 'icon-layers',
-        //                 options: [
-        //                     { name: 'Move to top', class: 'icon-arrow-double-up', title: 'Move to top' },
-        //                     { name: 'Move up', class: 'icon-arrow-up', title: 'Move up' },
-        //                     { name: 'Move down', class: 'icon-arrow-down', title: 'Move down' },
-        //                     { name: 'Move to bottom', class: 'icon-arrow-double-down', title: 'Move to bottom' }
-        //                 ]
-        //             },
-        //
-        //             {
-        //                 control: 'separator'
-        //             },
-        //             {
-        //                 control: 'button',
-        //                 icon: 'icon-gear'
-        //             },
-        //
-        //             {
-        //                 control: 'separator'
-        //             },
-        //             {
-        //                 control: 'input',
-        //                 type: 'number',
-        //                 label: 'X',
-        //                 value: 1,
-        //                 title: 'X position'
-        //             },
-        //             {
-        //                 control: 'input',
-        //                 type: 'number',
-        //                 label: 'Y',
-        //                 value: 2,
-        //                 title: 'Y position'
-        //             },
-        //             {
-        //                 control: 'input',
-        //                 type: 'number',
-        //                 label: 'W',
-        //                 value: 3,
-        //                 title: 'Width'
-        //             },
-        //             {
-        //                 control: 'input',
-        //                 type: 'number',
-        //                 label: 'H',
-        //                 value: 4,
-        //                 title: 'Height'
-        //             },
-        //
-        //             {
-        //                 control: 'separator'
-        //             },
-        //             {
-        //                 control: 'button',
-        //                 icon: 'icon-trash',
-        //                 label: 'delete',
-        //                 modifier: 'caution'
-        //             },
-        //
-        //             {
-        //                 control: 'separator'
-        //             },
-        //             {
-        //                 control: 'checkbox',
-        //                 name: 'this is a checkbox',
-        //             },
-        //             {
-        //                 control: 'separator'
-        //             },
-        //             {
-        //                 control: 'toggle-button',
-        //                 title: 'Toggle Frame',
-        //                 property: 'hideFrame',
-        //                 value: false,
-        //                 options: [
-        //                     {
-        //                         value: true,
-        //                         icon: 'icon-frame-hide'
-        //                     },
-        //                     {
-        //                         value: false,
-        //                         icon: 'icon-frame-show'
-        //                     }
-        //                 ]
-        //             },
-        //             {
-        //                 control: 'toggle-button',
-        //                 title: 'Snap to grid',
-        //                 property: 'snapToGrid',
-        //                 value: true,
-        //                 options: [
-        //                     {
-        //                         value: true,
-        //                         icon: 'icon-grid-snap-to'
-        //                     },
-        //                     {
-        //                         value: false,
-        //                         icon: 'icon-grid-snap-no'
-        //                     }
-        //                 ]
-        //             },
-        //             {
-        //                 control: 'toggle-button',
-        //                 title: 'Toggle label',
-        //                 property: 'showLabel',
-        //                 value: true,
-        //                 options: [
-        //                     {
-        //                         value: true,
-        //                         icon: 'icon-two-parts-both'
-        //                     },
-        //                     {
-        //                         value: false,
-        //                         icon: 'icon-two-parts-one-only'
-        //                     }
-        //                 ]
-        //             }
-        //         ];
-        //     }
-        // });
-
     </script>
 </html>
diff --git a/src/plugins/timeConductor/Conductor.vue b/src/plugins/timeConductor/Conductor.vue
index 222ec14ca7..de60b54504 100644
--- a/src/plugins/timeConductor/Conductor.vue
+++ b/src/plugins/timeConductor/Conductor.vue
@@ -36,6 +36,7 @@
                        v-model="formattedBounds.start"
                        @change="validateAllBounds(); submitForm()" />
                 <date-picker
+                        v-if="isFixed && isUTCBased"
                         :default-date-time="formattedBounds.start"
                         :formatter="timeFormatter"
                         @date-selected="startDateSelected"></date-picker>
@@ -65,11 +66,11 @@
                        ref="endDate"
                        @change="validateAllBounds(); submitForm()">
                 <date-picker
+                        v-if="isFixed && isUTCBased"
                         class="c-ctrl-wrapper--menus-left"
                         :default-date-time="formattedBounds.end"
                         :formatter="timeFormatter"
-                        @date-selected="endDateSelected"
-                        v-if="isFixed"></date-picker>
+                        @date-selected="endDateSelected"></date-picker>
             </div>
 
             <div class="c-ctrl-wrapper c-conductor-input c-conductor__end-delta"
diff --git a/src/plugins/timeConductor/plugin.js b/src/plugins/timeConductor/plugin.js
index cb309b260b..2837d794ec 100644
--- a/src/plugins/timeConductor/plugin.js
+++ b/src/plugins/timeConductor/plugin.js
@@ -21,7 +21,6 @@
  *****************************************************************************/
 
 import Conductor from './Conductor.vue';
-import Vue from 'vue';
 
 function isTruthy(a) {
     return !!a;
@@ -29,20 +28,17 @@ function isTruthy(a) {
 
 function validateMenuOption(menuOption, index) {
     if (menuOption.clock && !menuOption.clockOffsets) {
-        return "clock-based menuOption at index " + index + " is " +
-            "missing required property 'clockOffsets'.";
+        return `Conductor menu option is missing required property 'clockOffsets'. This field is required when configuring a menu option with a clock.\r\n${JSON.stringify(menuOption)}`;
     }
     if (!menuOption.timeSystem) {
-        return "menuOption at index " + index + " is missing " +
-            "required property 'timeSystem'.";
+        return `Conductor menu option is missing required property 'timeSystem'\r\n${JSON.stringify(menuOption)}`;
     }
     if (!menuOption.bounds && !menuOption.clock) {
-        return "fixed-bounds menuOption at index " + index + " is " +
-            "missing required property 'bounds'";
+        return `Conductor menu option is missing required property 'bounds'. This field is required when configuring a menu option with fixed bounds.\r\n${JSON.stringify(menuOption)}`;
     }
 }
 
-function validateConfiguration(config) {
+function hasRequiredOptions(config) {
     if (config === undefined ||
         config.menuOptions === undefined ||
         config.menuOptions.length === 0) {
@@ -56,7 +52,7 @@ function validateConfiguration(config) {
     return undefined;
 }
 
-function validateRuntimeConfiguration(config, openmct) {
+function validateConfiguration(config, openmct) {
     var systems = openmct.time.getAllTimeSystems()
         .reduce(function (m, ts) {
             m[ts.key] = ts;
@@ -68,23 +64,19 @@ function validateRuntimeConfiguration(config, openmct) {
             return m;
         }, {});
 
-    return config.menuOptions.map(function (menuOption, index) {
+    return config.menuOptions.map(function (menuOption) {
         if (menuOption.timeSystem && !systems[menuOption.timeSystem]) {
-            return "menuOption at index " + index + " specifies a " +
-                    "timeSystem that does not exist: " + menuOption.timeSystem;
+            return `Time system '${menuOption.timeSystem}' has not been registered: \r\n ${JSON.stringify(menuOption)}`;
         }
         if (menuOption.clock && !clocks[menuOption.clock]) {
-            return "menuOption at index " + index + " specifies a " +
-                    "clock that does not exist: " + menuOption.clock;
+            return `Clock '${menuOption.clock}' has not been registered: \r\n ${JSON.stringify(menuOption)}`;
         }
     }).filter(isTruthy).join('\n');
 }
 
 function throwIfError(configResult) {
     if (configResult) {
-        throw new Error("Invalid Time Conductor Configuration: \n" +
-            configResult + '\n' +
-            "https://github.com/nasa/openmct/blob/master/API.md#the-time-conductor");
+        throw new Error(`Invalid Time Conductor Configuration. ${configResult} \r\n https://github.com/nasa/openmct/blob/master/API.md#the-time-conductor`);
     }
 }
 
@@ -101,27 +93,21 @@ function mountComponent(openmct, configuration) {
     });
 }
 
-export default function (config){
-
-    let configResult = validateConfiguration(config);
-    throwIfError(configResult);
-
+export default function (config) {
     return function (openmct) {
+        let configResult = hasRequiredOptions(config) || validateConfiguration(config, openmct);
+        throwIfError(configResult);
+
+        var defaults = config.menuOptions[0];
+        if (defaults.clock) {
+            openmct.time.clock(defaults.clock, defaults.clockOffsets);
+            openmct.time.timeSystem(defaults.timeSystem, openmct.time.bounds());
+        } else {
+            openmct.time.timeSystem(defaults.timeSystem, defaults.bounds);
+        }
 
         openmct.on('start', function () {
-            configResult = validateRuntimeConfiguration(config, openmct);
-            throwIfError(configResult);
-
-            var defaults = config.menuOptions[0];
-            if (defaults.clock) {
-                openmct.time.clock(defaults.clock, defaults.clockOffsets);
-                openmct.time.timeSystem(defaults.timeSystem, openmct.time.bounds());
-            } else {
-                openmct.time.timeSystem(defaults.timeSystem, defaults.bounds);
-            }
-
             mountComponent(openmct, config);
-
         });
     };
-};
+}
