Refactor Angular Clock and Clock Indicator as plugin (#4106)

* clock and clock indicator installed as a plugin
* { enableIndicator: true } to install indicator
* Vue for views

src/plugins/clock/ClockViewProvider.js

@@ -0,0 +1,59 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2021, 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 Clock from './components/Clock.vue';
+import Vue from 'vue';
+
+export default function ClockViewProvider(openmct) {
+    return {
+        key: 'clock.view',
+        name: 'Clock',
+        cssClass: 'icon-clock',
+        canView(domainObject) {
+            return domainObject.type === 'clock';
+        },
+
+        view: function (domainObject) {
+            let component;
+
+            return {
+                show: function (element) {
+                    component = new Vue({
+                        el: element,
+                        components: {
+                            Clock
+                        },
+                        provide: {
+                            openmct,
+                            domainObject
+                        },
+                        template: '<clock />'
+                    });
+                },
+                destroy: function () {
+                    component.$destroy();
+                    component = undefined;
+                }
+            };
+        }
+    };
+}

src/plugins/clock/components/Clock.vue

@@ -0,0 +1,99 @@
+<!--
+ Open MCT, Copyright (c) 2014-2021, 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-angular-ov-wrapper">
+    <div class="u-contents">
+        <div class="c-clock l-time-display u-style-receiver js-style-receiver">
+            <div class="c-clock__timezone">
+                {{ timeZoneAbbr }}
+            </div>
+            <div class="c-clock__value">
+                {{ timeTextValue }}
+            </div>
+            <div class="c-clock__ampm">
+                {{ timeAmPm }}
+            </div>
+        </div>
+    </div>
+</div>
+</template>
+
+<script>
+import moment from 'moment';
+import momentTimezone from 'moment-timezone';
+
+export default {
+    inject: ['openmct', 'domainObject'],
+    data() {
+        return {
+            lastTimestamp: null
+        };
+    },
+    computed: {
+        configuration() {
+            return this.domainObject.configuration;
+        },
+        baseFormat() {
+            return this.configuration.baseFormat;
+        },
+        use24() {
+            return this.configuration.use24 === 'clock24';
+        },
+        timezone() {
+            return this.configuration.timezone;
+        },
+        timeFormat() {
+            return this.use24 ? this.baseFormat.replace('hh', "HH") : this.baseFormat;
+        },
+        zoneName() {
+            return momentTimezone.tz.names().includes(this.timezone) ? this.timezone : "UTC";
+        },
+        momentTime() {
+            return this.zoneName ? moment.utc(this.lastTimestamp).tz(this.zoneName) : moment.utc(this.lastTimestamp);
+        },
+        timeZoneAbbr() {
+            return this.momentTime.zoneAbbr();
+        },
+        timeTextValue() {
+            return this.timeFormat && this.momentTime.format(this.timeFormat);
+        },
+        timeAmPm() {
+            return this.use24 ? '' : this.momentTime.format("A");
+        }
+    },
+    mounted() {
+        const TickerService = this.openmct.$injector.get('tickerService');
+        this.unlisten = TickerService.listen(this.tick);
+    },
+    beforeDestroy() {
+        if (this.unlisten) {
+            this.unlisten();
+        }
+    },
+    methods: {
+        tick(timestamp) {
+            this.lastTimestamp = timestamp;
+        }
+    }
+};
+</script>

src/plugins/clock/components/ClockIndicator.vue

@@ -0,0 +1,64 @@
+<!--
+ Open MCT, Copyright (c) 2014-2021, 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-indicator t-indicator-clock icon-clock no-minify c-indicator--not-clickable">
+    <span class="label c-indicator__label">
+        {{ timeTextValue }}
+    </span>
+</div>
+</template>
+
+<script>
+import moment from 'moment';
+
+export default {
+    inject: ['openmct'],
+    props: {
+        indicatorFormat: {
+            type: String,
+            required: true
+        }
+    },
+    data() {
+        return {
+            timeTextValue: null
+        };
+    },
+    mounted() {
+        this.openmct.on('start', () => {
+            const TickerService = this.openmct.$injector.get('tickerService');
+            this.unlisten = TickerService.listen(this.tick);
+        });
+    },
+    beforeDestroy() {
+        if (this.unlisten) {
+            this.unlisten();
+        }
+    },
+    methods: {
+        tick(timestamp) {
+            this.timeTextValue = `${moment.utc(timestamp).format(this.indicatorFormat)} UTC`;
+        }
+    }
+};
+</script>

src/plugins/clock/plugin.js

@@ -0,0 +1,154 @@
+
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2021, 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 ClockViewProvider from './ClockViewProvider';
+import ClockIndicator from './components/ClockIndicator.vue';
+
+import momentTimezone from 'moment-timezone';
+import Vue from 'vue';
+
+export default function ClockPlugin(options) {
+    return function install(openmct) {
+        const CLOCK_INDICATOR_FORMAT = 'YYYY/MM/DD HH:mm:ss';
+        openmct.types.addType('clock', {
+            name: 'Clock',
+            description: 'A UTC-based clock that supports a variety of display formats. Clocks can be added to Display Layouts.',
+            creatable: true,
+            cssClass: 'icon-clock',
+            initialize: function (domainObject) {
+                domainObject.configuration = {
+                    baseFormat: 'YYYY/MM/DD hh:mm:ss',
+                    use24: 'clock12',
+                    timezone: 'UTC'
+                };
+            },
+            "form": [
+                {
+                    "key": "displayFormat",
+                    "name": "Display Format",
+                    control: 'select',
+                    options: [
+                        {
+                            value: 'YYYY/MM/DD hh:mm:ss',
+                            name: 'YYYY/MM/DD hh:mm:ss'
+                        },
+                        {
+                            value: 'YYYY/DDD hh:mm:ss',
+                            name: 'YYYY/DDD hh:mm:ss'
+                        },
+                        {
+                            value: 'hh:mm:ss',
+                            name: 'hh:mm:ss'
+                        }
+                    ],
+                    cssClass: 'l-inline',
+                    property: [
+                        'configuration',
+                        'baseFormat'
+                    ]
+                },
+                {
+                    control: 'select',
+                    options: [
+                        {
+                            value: 'clock12',
+                            name: '12hr'
+                        },
+                        {
+                            value: 'clock24',
+                            name: '24hr'
+                        }
+                    ],
+                    cssClass: 'l-inline',
+                    property: [
+                        'configuration',
+                        'use24'
+                    ]
+                },
+                {
+                    "key": "timezone",
+                    "name": "Timezone",
+                    "control": "autocomplete",
+                    "options": momentTimezone.tz.names(),
+                    property: [
+                        'configuration',
+                        'timezone'
+                    ]
+                }
+            ]
+        });
+        openmct.objectViews.addProvider(new ClockViewProvider(openmct));
+
+        if (options && options.enableClockIndicator === true) {
+            const clockIndicator = new Vue ({
+                components: {
+                    ClockIndicator
+                },
+                provide: {
+                    openmct
+                },
+                data() {
+                    return {
+                        indicatorFormat: CLOCK_INDICATOR_FORMAT
+                    };
+                },
+                template: '<ClockIndicator :indicator-format="indicatorFormat" />'
+            });
+            const indicator = {
+                element: clockIndicator.$mount().$el,
+                key: 'clock-indicator'
+            };
+
+            openmct.indicators.add(indicator);
+        }
+
+        openmct.objects.addGetInterceptor({
+            appliesTo: (identifier, domainObject) => {
+                return domainObject && domainObject.type === 'clock';
+            },
+            invoke: (identifier, domainObject) => {
+                if (domainObject.configuration) {
+                    return domainObject;
+                }
+
+                if (domainObject.clockFormat
+                    && domainObject.timezone) {
+                    const baseFormat = domainObject.clockFormat[0];
+                    const use24 = domainObject.clockFormat[1];
+                    const timezone = domainObject.timezone;
+
+                    domainObject.configuration = {
+                        baseFormat,
+                        use24,
+                        timezone
+                    };
+
+                    openmct.objects.mutate(domainObject, 'configuration', domainObject.configuration);
+                }
+
+                return domainObject;
+            }
+        });
+
+    };
+}

src/plugins/clock/pluginSpec.js

@@ -0,0 +1,231 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2021, 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 { createOpenMct, resetApplicationState } from 'utils/testing';
+import clockPlugin from './plugin';
+
+import Vue from 'vue';
+
+describe("Clock plugin:", () => {
+    let openmct;
+    let clockDefinition;
+    let element;
+    let child;
+    let appHolder;
+
+    let clockDomainObject;
+
+    function setupClock(enableClockIndicator) {
+        return new Promise((resolve, reject) => {
+            clockDomainObject = {
+                identifier: {
+                    key: 'clock',
+                    namespace: 'test-namespace'
+                },
+                type: 'clock'
+            };
+
+            appHolder = document.createElement('div');
+            appHolder.style.width = '640px';
+            appHolder.style.height = '480px';
+            document.body.appendChild(appHolder);
+
+            openmct = createOpenMct();
+
+            element = document.createElement('div');
+            child = document.createElement('div');
+            element.appendChild(child);
+
+            openmct.install(clockPlugin({ enableClockIndicator }));
+
+            clockDefinition = openmct.types.get('clock').definition;
+            clockDefinition.initialize(clockDomainObject);
+
+            openmct.on('start', resolve);
+            openmct.start(appHolder);
+        });
+    }
+
+    describe("Clock view:", () => {
+        let clockViewProvider;
+        let clockView;
+        let clockViewObject;
+        let mutableClockObject;
+
+        beforeEach(async () => {
+            await setupClock(true);
+
+            clockViewObject = {
+                ...clockDomainObject,
+                id: "test-object",
+                name: 'Clock',
+                configuration: {
+                    baseFormat: 'YYYY/MM/DD hh:mm:ss',
+                    use24: 'clock12',
+                    timezone: 'UTC'
+                }
+            };
+
+            spyOn(openmct.objects, 'get').and.returnValue(Promise.resolve(clockViewObject));
+            spyOn(openmct.objects, 'save').and.returnValue(Promise.resolve(true));
+
+            const applicableViews = openmct.objectViews.get(clockViewObject, [clockViewObject]);
+            clockViewProvider = applicableViews.find(viewProvider => viewProvider.key === 'clock.view');
+
+            mutableClockObject = await openmct.objects.getMutable(clockViewObject.identifier);
+
+            clockView = clockViewProvider.view(mutableClockObject);
+            clockView.show(child);
+
+            await Vue.nextTick();
+        });
+
+        afterEach(() => {
+            clockView.destroy();
+            openmct.objects.destroyMutable(mutableClockObject);
+            if (appHolder) {
+                appHolder.remove();
+            }
+
+            return resetApplicationState(openmct);
+        });
+
+        it("has name as Clock", () => {
+            expect(clockDefinition.name).toEqual('Clock');
+        });
+
+        it("is creatable", () => {
+            expect(clockDefinition.creatable).toEqual(true);
+        });
+
+        it("provides clock view", () => {
+            expect(clockViewProvider).toBeDefined();
+        });
+
+        it("renders clock element", () => {
+            const clockElement = element.querySelectorAll('.c-clock');
+            expect(clockElement.length).toBe(1);
+        });
+
+        it("renders major elements", () => {
+            const clockElement = element.querySelector('.c-clock');
+            const timezone = clockElement.querySelector('.c-clock__timezone');
+            const time = clockElement.querySelector('.c-clock__value');
+            const amPm = clockElement.querySelector('.c-clock__ampm');
+            const hasMajorElements = Boolean(timezone && time && amPm);
+
+            expect(hasMajorElements).toBe(true);
+        });
+
+        it("renders time in UTC", () => {
+            const clockElement = element.querySelector('.c-clock');
+            const timezone = clockElement.querySelector('.c-clock__timezone').textContent.trim();
+
+            expect(timezone).toBe('UTC');
+        });
+
+        it("updates the 24 hour option in the configuration", (done) => {
+            expect(clockDomainObject.configuration.use24).toBe('clock12');
+            const new24Option = 'clock24';
+
+            openmct.objects.observe(clockViewObject, 'configuration', (changedDomainObject) => {
+                expect(changedDomainObject.use24).toBe(new24Option);
+                done();
+            });
+
+            openmct.objects.mutate(clockViewObject, 'configuration.use24', new24Option);
+        });
+
+        it("updates the timezone option in the configuration", (done) => {
+            expect(clockDomainObject.configuration.timezone).toBe('UTC');
+            const newZone = 'CST6CDT';
+
+            openmct.objects.observe(clockViewObject, 'configuration', (changedDomainObject) => {
+                expect(changedDomainObject.timezone).toBe(newZone);
+                done();
+            });
+
+            openmct.objects.mutate(clockViewObject, 'configuration.timezone', newZone);
+        });
+
+        it("updates the time format option in the configuration", (done) => {
+            expect(clockDomainObject.configuration.baseFormat).toBe('YYYY/MM/DD hh:mm:ss');
+            const newFormat = 'hh:mm:ss';
+
+            openmct.objects.observe(clockViewObject, 'configuration', (changedDomainObject) => {
+                expect(changedDomainObject.baseFormat).toBe(newFormat);
+                done();
+            });
+
+            openmct.objects.mutate(clockViewObject, 'configuration.baseFormat', newFormat);
+        });
+    });
+
+    describe("Clock Indicator view:", () => {
+        let clockIndicator;
+
+        afterEach(() => {
+            if (clockIndicator) {
+                clockIndicator.remove();
+            }
+
+            clockIndicator = undefined;
+            if (appHolder) {
+                appHolder.remove();
+            }
+
+            return resetApplicationState(openmct);
+        });
+
+        it("doesn't exist", async () => {
+            await setupClock(false);
+
+            clockIndicator = openmct.indicators.indicatorObjects
+                .find(indicator => indicator.key === 'clock-indicator');
+
+            const clockIndicatorMissing = clockIndicator === null || clockIndicator === undefined;
+            expect(clockIndicatorMissing).toBe(true);
+        });
+
+        it("exists", async () => {
+            await setupClock(true);
+
+            clockIndicator = openmct.indicators.indicatorObjects
+                .find(indicator => indicator.key === 'clock-indicator').element;
+
+            const hasClockIndicator = clockIndicator !== null && clockIndicator !== undefined;
+            expect(hasClockIndicator).toBe(true);
+        });
+
+        it("contains text", async () => {
+            await setupClock(true);
+
+            clockIndicator = openmct.indicators.indicatorObjects
+                .find(indicator => indicator.key === 'clock-indicator').element;
+
+            const clockIndicatorText = clockIndicator.textContent.trim();
+            const textIncludesUTC = clockIndicatorText.includes('UTC');
+
+            expect(textIncludesUTC).toBe(true);
+        });
+    });
+});

src/plugins/plugins.js

@@ -69,6 +69,7 @@ define([
     './CouchDBSearchFolder/plugin',
     './timeline/plugin',
     './hyperlink/plugin',
+    './clock/plugin',
     './DeviceClassifier/plugin'
 ], function (
     _,
@@ -119,6 +120,7 @@ define([
     CouchDBSearchFolder,
     Timeline,
     Hyperlink,
+    Clock,
     DeviceClassifier
 ) {
     const bundleMap = {
@@ -223,6 +225,7 @@ define([
     plugins.CouchDBSearchFolder = CouchDBSearchFolder.default;
     plugins.Timeline = Timeline.default;
     plugins.Hyperlink = Hyperlink.default;
+    plugins.Clock = Clock.default;
     plugins.DeviceClassifier = DeviceClassifier.default;
 
     return plugins;