Merge branch 'master' of https://github.com/nasa/openmct into regex-search-tables

- Moved CSS rule that was pushing the font style control to the right
side of the Inspector to `l-shell__toolbar` rule definition;
- Fixed `menus-to-left` CSS rule and applied to font size and style
menu controls;
- Added a new `menus-no-icon` style for menus that don't have icons,
applied to font size and style menu controls;

CONTRIBUTING.md

@@ -182,7 +182,7 @@ The following guidelines are provided for anyone contributing source code to the
 1. Avoid the use of "magic" values.
    eg.
    ```JavaScript
-   Const UNAUTHORIZED = 401
+   const UNAUTHORIZED = 401;
    if (responseCode === UNAUTHORIZED)
    ```
    is preferable to

index.html

@@ -131,10 +131,10 @@
                         }
                     ],
                     // maximum recent bounds to retain in conductor history
-                    records: 10,
+                    records: 10
                     // maximum duration between start and end bounds
                     // for utc-based time systems this is in milliseconds
-                    limit: ONE_DAY
+                    // limit: ONE_DAY
                 },
                 {
                     name: "Realtime",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openmct",
-  "version": "1.4.1-SNAPSHOT",
+  "version": "1.5.0-SNAPSHOT",
   "description": "The Open MCT core platform",
   "dependencies": {},
   "devDependencies": {

src/api/actions/ActionCollectionSpec.js

@@ -0,0 +1,225 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2020, 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 ActionCollection from './ActionCollection';
+import { createOpenMct, resetApplicationState } from '../../utils/testing';
+
+describe('The ActionCollection', () => {
+    let openmct;
+    let actionCollection;
+    let mockApplicableActions;
+    let mockObjectPath;
+    let mockView;
+
+    beforeEach(() => {
+        openmct = createOpenMct();
+        mockObjectPath = [
+            {
+                name: 'mock folder',
+                type: 'fake-folder',
+                identifier: {
+                    key: 'mock-folder',
+                    namespace: ''
+                }
+            },
+            {
+                name: 'mock parent folder',
+                type: 'fake-folder',
+                identifier: {
+                    key: 'mock-parent-folder',
+                    namespace: ''
+                }
+            }
+        ];
+        mockView = {
+            getViewContext: () => {
+                return {
+                    onlyAppliesToTestCase: true
+                };
+            }
+        };
+        mockApplicableActions = {
+            'test-action-object-path': {
+                name: 'Test Action Object Path',
+                key: 'test-action-object-path',
+                cssClass: 'test-action-object-path',
+                description: 'This is a test action for object path',
+                group: 'action',
+                priority: 9,
+                appliesTo: (objectPath) => {
+                    if (objectPath.length) {
+                        return objectPath[0].type === 'fake-folder';
+                    }
+
+                    return false;
+                },
+                invoke: () => {
+                }
+            },
+            'test-action-view': {
+                name: 'Test Action View',
+                key: 'test-action-view',
+                cssClass: 'test-action-view',
+                description: 'This is a test action for view',
+                group: 'action',
+                priority: 9,
+                showInStatusBar: true,
+                appliesTo: (objectPath, view = {}) => {
+                    if (view.getViewContext) {
+                        let viewContext = view.getViewContext();
+
+                        return viewContext.onlyAppliesToTestCase;
+                    }
+
+                    return false;
+                },
+                invoke: () => {
+                }
+            }
+        };
+
+        actionCollection = new ActionCollection(mockApplicableActions, mockObjectPath, mockView, openmct);
+    });
+
+    afterEach(() => {
+        actionCollection.destroy();
+        resetApplicationState(openmct);
+    });
+
+    describe("disable method invoked with action keys", () => {
+        it("marks those actions as isDisabled", () => {
+            let actionKey = 'test-action-object-path';
+            let actionsObject = actionCollection.getActionsObject();
+            let action = actionsObject[actionKey];
+
+            expect(action.isDisabled).toBeFalsy();
+
+            actionCollection.disable([actionKey]);
+            actionsObject = actionCollection.getActionsObject();
+            action = actionsObject[actionKey];
+
+            expect(action.isDisabled).toBeTrue();
+        });
+    });
+
+    describe("enable method invoked with action keys", () => {
+        it("marks the isDisabled property as false", () => {
+            let actionKey = 'test-action-object-path';
+
+            actionCollection.disable([actionKey]);
+
+            let actionsObject = actionCollection.getActionsObject();
+            let action = actionsObject[actionKey];
+
+            expect(action.isDisabled).toBeTrue();
+
+            actionCollection.enable([actionKey]);
+            actionsObject = actionCollection.getActionsObject();
+            action = actionsObject[actionKey];
+
+            expect(action.isDisabled).toBeFalse();
+        });
+    });
+
+    describe("hide method invoked with action keys", () => {
+        it("marks those actions as isHidden", () => {
+            let actionKey = 'test-action-object-path';
+            let actionsObject = actionCollection.getActionsObject();
+            let action = actionsObject[actionKey];
+
+            expect(action.isHidden).toBeFalsy();
+
+            actionCollection.hide([actionKey]);
+            actionsObject = actionCollection.getActionsObject();
+            action = actionsObject[actionKey];
+
+            expect(action.isHidden).toBeTrue();
+        });
+    });
+
+    describe("show method invoked with action keys", () => {
+        it("marks the isHidden property as false", () => {
+            let actionKey = 'test-action-object-path';
+
+            actionCollection.hide([actionKey]);
+
+            let actionsObject = actionCollection.getActionsObject();
+            let action = actionsObject[actionKey];
+
+            expect(action.isHidden).toBeTrue();
+
+            actionCollection.show([actionKey]);
+            actionsObject = actionCollection.getActionsObject();
+            action = actionsObject[actionKey];
+
+            expect(action.isHidden).toBeFalse();
+        });
+    });
+
+    describe("getVisibleActions method", () => {
+        it("returns an array of non hidden actions", () => {
+            let action1Key = 'test-action-object-path';
+            let action2Key = 'test-action-view';
+
+            actionCollection.hide([action1Key]);
+
+            let visibleActions = actionCollection.getVisibleActions();
+
+            expect(Array.isArray(visibleActions)).toBeTrue();
+            expect(visibleActions.length).toEqual(1);
+            expect(visibleActions[0].key).toEqual(action2Key);
+
+            actionCollection.show([action1Key]);
+            visibleActions = actionCollection.getVisibleActions();
+
+            expect(visibleActions.length).toEqual(2);
+        });
+    });
+
+    describe("getStatusBarActions method", () => {
+        it("returns an array of non disabled, non hidden statusBar actions", () => {
+            let action2Key = 'test-action-view';
+
+            let statusBarActions = actionCollection.getStatusBarActions();
+
+            expect(Array.isArray(statusBarActions)).toBeTrue();
+            expect(statusBarActions.length).toEqual(1);
+            expect(statusBarActions[0].key).toEqual(action2Key);
+
+            actionCollection.disable([action2Key]);
+            statusBarActions = actionCollection.getStatusBarActions();
+
+            expect(statusBarActions.length).toEqual(0);
+
+            actionCollection.enable([action2Key]);
+            statusBarActions = actionCollection.getStatusBarActions();
+
+            expect(statusBarActions.length).toEqual(1);
+            expect(statusBarActions[0].key).toEqual(action2Key);
+
+            actionCollection.hide([action2Key]);
+            statusBarActions = actionCollection.getStatusBarActions();
+
+            expect(statusBarActions.length).toEqual(0);
+        });
+    });
+});

src/api/actions/ActionsAPISpec.js

@@ -22,22 +22,41 @@
 
 import ActionsAPI from './ActionsAPI';
 import { createOpenMct, resetApplicationState } from '../../utils/testing';
+import ActionCollection from './ActionCollection';
 
 describe('The Actions API', () => {
     let openmct;
     let actionsAPI;
     let mockAction;
     let mockObjectPath;
+    let mockObjectPathAction;
     let mockViewContext1;
 
     beforeEach(() => {
         openmct = createOpenMct();
         actionsAPI = new ActionsAPI(openmct);
+        mockObjectPathAction = {
+            name: 'Test Action Object Path',
+            key: 'test-action-object-path',
+            cssClass: 'test-action-object-path',
+            description: 'This is a test action for object path',
+            group: 'action',
+            priority: 9,
+            appliesTo: (objectPath) => {
+                if (objectPath.length) {
+                    return objectPath[0].type === 'fake-folder';
+                }
+
+                return false;
+            },
+            invoke: () => {
+            }
+        };
         mockAction = {
-            name: 'Test Action',
-            key: 'test-action',
-            cssClass: 'test-action',
-            description: 'This is a test action',
+            name: 'Test Action View',
+            key: 'test-action-view',
+            cssClass: 'test-action-view',
+            description: 'This is a test action for view',
             group: 'action',
             priority: 9,
             appliesTo: (objectPath, view = {}) => {
@@ -45,8 +64,6 @@ describe('The Actions API', () => {
                     let viewContext = view.getViewContext();
 
                     return viewContext.onlyAppliesToTestCase;
-                } else if (objectPath.length) {
-                    return objectPath[0].type === 'fake-folder';
                 }
 
                 return false;
@@ -100,9 +117,32 @@ describe('The Actions API', () => {
     describe("get method", () => {
         beforeEach(() => {
             actionsAPI.register(mockAction);
+            actionsAPI.register(mockObjectPathAction);
         });
 
-        it("returns an object with relevant actions when invoked with objectPath only", () => {
+        it("returns an ActionCollection when invoked with an objectPath only", () => {
+            let actionCollection = actionsAPI.get(mockObjectPath);
+            let instanceOfActionCollection = actionCollection instanceof ActionCollection;
+
+            expect(instanceOfActionCollection).toBeTrue();
+        });
+
+        it("returns an ActionCollection when invoked with an objectPath and view", () => {
+            let actionCollection = actionsAPI.get(mockObjectPath, mockViewContext1);
+            let instanceOfActionCollection = actionCollection instanceof ActionCollection;
+
+            expect(instanceOfActionCollection).toBeTrue();
+        });
+
+        it("returns relevant actions when invoked with objectPath only", () => {
+            let actionCollection = actionsAPI.get(mockObjectPath);
+            let action = actionCollection.getActionsObject()[mockObjectPathAction.key];
+
+            expect(action.key).toEqual(mockObjectPathAction.key);
+            expect(action.name).toEqual(mockObjectPathAction.name);
+        });
+
+        it("returns relevant actions when invoked with objectPath and view", () => {
             let actionCollection = actionsAPI.get(mockObjectPath, mockViewContext1);
             let action = actionCollection.getActionsObject()[mockAction.key];
 

src/plugins/condition/components/inspector/StylesView.vue

@@ -344,6 +344,11 @@ export default {
                 const layoutItem = selectionItem[0].context.layoutItem;
                 const isChildItem = selectionItem.length > 1;
 
+                if (!item && !layoutItem) {
+                    // cases where selection is used for table cells
+                    return;
+                }
+
                 if (!isChildItem) {
                     domainObject = item;
                     itemStyle = getApplicableStylesForItem(item);

src/plugins/condition/pluginSpec.js

@@ -22,6 +22,7 @@
 
 import { createOpenMct, resetApplicationState } from "utils/testing";
 import ConditionPlugin from "./plugin";
+import stylesManager from '@/ui/inspector/styles/StylesManager';
 import StylesView from "./components/inspector/StylesView.vue";
 import Vue from 'vue';
 import {getApplicableStylesForItem} from "./utils/styleUtils";
@@ -402,7 +403,8 @@ describe('the plugin', function () {
             component = new Vue({
                 provide: {
                     openmct: openmct,
-                    selection: selection
+                    selection: selection,
+                    stylesManager
                 },
                 el: viewContainer,
                 components: {

src/plugins/condition/utils/styleUtils.js

@@ -104,7 +104,7 @@ export function getConsolidatedStyleValues(multipleItemStyles) {
     const properties = Object.keys(styleProps);
     properties.forEach((property) => {
         const values = aggregatedStyleValues[property];
-        if (values.length) {
+        if (values && values.length) {
             if (values.every(value => value === values[0])) {
                 styleValues[property] = values[0];
             } else {

src/plugins/duplicate/DuplicateAction.js

@@ -89,7 +89,7 @@ export default class DuplicateAction {
                         {
                             key: "name",
                             control: "textfield",
-                            name: "Folder Name",
+                            name: "Name",
                             pattern: "\\S+",
                             required: true,
                             cssClass: "l-input-lg"

src/plugins/duplicate/DuplicateTask.js

@@ -48,13 +48,14 @@ export default class DuplicateTask {
     }
 
     /**
-     * Execute the duplicate/copy task with the objects provided in the constructor.
+     * Execute the duplicate/copy task with the objects provided.
      * @returns {promise} Which will resolve with a clone of the object
      * once complete.
      */
     async duplicate(domainObject, parent, filter) {
         this.domainObject = domainObject;
         this.parent = parent;
+        this.namespace = parent.identifier.namespace;
         this.filter = filter || this.isCreatable;
 
         await this.buildDuplicationPlan();
@@ -78,8 +79,9 @@ export default class DuplicateTask {
      */
     async buildDuplicationPlan() {
         let domainObjectClone = await this.duplicateObject(this.domainObject);
+
         if (domainObjectClone !== this.domainObject) {
-            domainObjectClone.location = this.getId(this.parent);
+            domainObjectClone.location = this.getKeyString(this.parent);
         }
 
         this.firstClone = domainObjectClone;
@@ -96,13 +98,14 @@ export default class DuplicateTask {
         let initialCount = this.clones.length;
         let dialog = this.openmct.overlays.progressDialog({
             progressPerc: 0,
-            message: `Duplicating ${initialCount} files.`,
+            message: `Duplicating ${initialCount} objects.`,
             iconClass: 'info',
             title: 'Duplicating'
         });
-        let clonesDone = Promise.all(this.clones.map(clone => {
+
+        let clonesDone = Promise.all(this.clones.map((clone) => {
             let percentPersisted = Math.ceil(100 * (++this.persisted / initialCount));
-            let message = `Duplicating ${initialCount - this.persisted} files.`;
+            let message = `Duplicating ${initialCount - this.persisted} objects.`;
 
             dialog.updateProgress(percentPersisted, message);
 
@@ -110,6 +113,7 @@ export default class DuplicateTask {
         }));
 
         await clonesDone;
+
         dialog.dismiss();
         this.openmct.notifications.info(`Duplicated ${this.persisted} objects.`);
 
@@ -141,10 +145,7 @@ export default class DuplicateTask {
     async duplicateObject(originalObject) {
         // Check if the creatable (or other passed in filter).
         if (this.filter(originalObject)) {
-            // Clone original object
             let clone = this.cloneObjectModel(originalObject);
-
-            // Get children, if any
             let composeesCollection = this.openmct.composition.get(originalObject);
             let composees;
 
@@ -152,7 +153,6 @@ export default class DuplicateTask {
                 composees = await composeesCollection.load();
             }
 
-            // Recursively duplicate children
             return this.duplicateComposees(clone, composees);
         }
 
@@ -160,36 +160,6 @@ export default class DuplicateTask {
         return originalObject;
     }
 
-    /**
-     * Update identifiers in a cloned object model (or part of
-     * a cloned object model) to reflect new identifiers after
-     * duplicating.
-     * @private
-     */
-    rewriteIdentifiers(obj, idMap) {
-        function lookupValue(value) {
-            return (typeof value === 'string' && idMap[value]) || value;
-        }
-
-        if (Array.isArray(obj)) {
-            obj.forEach((value, index) => {
-                obj[index] = lookupValue(value);
-                this.rewriteIdentifiers(obj[index], idMap);
-            });
-        } else if (obj && typeof obj === 'object') {
-            Object.keys(obj).forEach((key) => {
-                let value = obj[key];
-                obj[key] = lookupValue(value);
-                if (idMap[key]) {
-                    delete obj[key];
-                    obj[idMap[key]] = value;
-                }
-
-                this.rewriteIdentifiers(value, idMap);
-            });
-        }
-    }
-
     /**
      * Given an array of objects composed by a parent, clone them, then
      * add them to the parent.
@@ -197,34 +167,67 @@ export default class DuplicateTask {
      * @returns {*}
      */
     async duplicateComposees(clonedParent, composees = []) {
-        let idMap = {};
-
+        let idMappings = [];
         let allComposeesDuplicated = composees.reduce(async (previousPromise, nextComposee) => {
             await previousPromise;
+
             let clonedComposee = await this.duplicateObject(nextComposee);
-            idMap[this.getId(nextComposee)] = this.getId(clonedComposee);
-            await this.composeChild(clonedComposee, clonedParent, clonedComposee !== nextComposee);
+
+            if (clonedComposee) {
+                idMappings.push({
+                    newId: clonedComposee.identifier,
+                    oldId: nextComposee.identifier
+                });
+                this.composeChild(clonedComposee, clonedParent, clonedComposee !== nextComposee);
+            }
 
             return;
         }, Promise.resolve());
 
         await allComposeesDuplicated;
 
-        this.rewriteIdentifiers(clonedParent, idMap);
+        clonedParent = this.rewriteIdentifiers(clonedParent, idMappings);
         this.clones.push(clonedParent);
 
         return clonedParent;
     }
 
-    async composeChild(child, parent, setLocation) {
-        const PERSIST_BOOL = false;
-        let parentComposition = this.openmct.composition.get(parent);
-        await parentComposition.load();
-        parentComposition.add(child, PERSIST_BOOL);
+    /**
+     * Update identifiers in a cloned object model (or part of
+     * a cloned object model) to reflect new identifiers after
+     * duplicating.
+     * @private
+     */
+    rewriteIdentifiers(clonedParent, childIdMappings) {
+        for (let { newId, oldId } of childIdMappings) {
+            let newIdKeyString = this.openmct.objects.makeKeyString(newId);
+            let oldIdKeyString = this.openmct.objects.makeKeyString(oldId);
+
+            // regex replace keystrings
+            clonedParent = JSON.stringify(clonedParent).replace(new RegExp(oldIdKeyString, 'g'), newIdKeyString);
+
+            // parse reviver to replace identifiers
+            clonedParent = JSON.parse(clonedParent, (key, value) => {
+                if (Object.prototype.hasOwnProperty.call(value, 'key')
+                    && Object.prototype.hasOwnProperty.call(value, 'namespace')
+                    && value.key === oldId.key
+                    && value.namespace === oldId.namespace) {
+                    return newId;
+                } else {
+                    return value;
+                }
+            });
+        }
+
+        return clonedParent;
+    }
+
+    composeChild(child, parent, setLocation) {
+        parent.composition.push(child.identifier);
 
         //If a location is not specified, set it.
         if (setLocation && child.location === undefined) {
-            let parentKeyString = this.getId(parent);
+            let parentKeyString = this.getKeyString(parent);
             child.location = parentKeyString;
         }
     }
@@ -239,7 +242,7 @@ export default class DuplicateTask {
         let clone = JSON.parse(JSON.stringify(domainObject));
         let identifier = {
             key: uuid(),
-            namespace: domainObject.identifier.namespace
+            namespace: this.namespace // set to NEW parent's namespace
         };
 
         if (clone.modified || clone.persisted || clone.location) {
@@ -260,7 +263,7 @@ export default class DuplicateTask {
         return clone;
     }
 
-    getId(domainObject) {
+    getKeyString(domainObject) {
         return this.openmct.objects.makeKeyString(domainObject.identifier);
     }
 

src/plugins/imagery/components/ImageryViewLayout.vue

@@ -36,7 +36,7 @@
         <div class="c-imagery__main-image__bg"
              :class="{'paused unnsynced': isPaused,'stale':false }"
         >
-            <div class="c-imagery__main-image__image"
+            <div class="c-imagery__main-image__image js-imageryView-image"
                  :style="{
                      'background-image': imageUrl ? `url(${imageUrl})` : 'none',
                      'filter': `brightness(${filters.brightness}%) contrast(${filters.contrast}%)`

src/plugins/notebook/components/NotebookEmbed.vue

@@ -143,7 +143,9 @@ export default {
                 this.openmct.notifications.alert(message);
             }
 
-            window.location.hash = hash;
+            const relativeHash = hash.slice(hash.indexOf('#'));
+            const url = new URL(relativeHash, `${location.protocol}//${location.host}${location.pathname}`);
+            window.location.hash = url.hash;
         },
         formatTime(unixTime, timeFormat) {
             return Moment.utc(unixTime).format(timeFormat);

src/plugins/notebook/snapshot.js

@@ -7,15 +7,14 @@ export default class Snapshot {
     constructor(openmct) {
         this.openmct = openmct;
         this.snapshotContainer = new SnapshotContainer(openmct);
-        this.exportImageService = openmct.$injector.get('exportImageService');
-        this.dialogService = openmct.$injector.get('dialogService');
 
         this.capture = this.capture.bind(this);
         this._saveSnapShot = this._saveSnapShot.bind(this);
     }
 
     capture(snapshotMeta, notebookType, domElement) {
-        this.exportImageService.exportPNGtoSRC(domElement, 's-status-taking-snapshot')
+        const exportImageService = this.openmct.$injector.get('exportImageService');
+        exportImageService.exportPNGtoSRC(domElement, 's-status-taking-snapshot')
             .then(function (blob) {
                 const reader = new window.FileReader();
                 reader.readAsDataURL(blob);

src/plugins/plot/src/telemetry/StackedPlotController.js

@@ -39,10 +39,11 @@ define([], function () {
             const thisRequest = {
                 pending: 0
             };
-            currentRequest = thisRequest;
-            $scope.currentRequest = thisRequest;
             const telemetryObjects = $scope.telemetryObjects = [];
             const thisTickWidthMap = {};
+
+            currentRequest = thisRequest;
+            $scope.currentRequest = thisRequest;
             tickWidthMap = thisTickWidthMap;
 
             if (unlisten) {
@@ -52,14 +53,10 @@ define([], function () {
 
             function addChild(child) {
                 const id = openmct.objects.makeKeyString(child.identifier);
+                const legacyObject = openmct.legacyObject(child);
+
                 thisTickWidthMap[id] = 0;
-                thisRequest.pending += 1;
-                objectService.getObjects([id])
-                    .then(function (objects) {
-                        thisRequest.pending -= 1;
-                        const childObj = objects[id];
-                        telemetryObjects.push(childObj);
-                    });
+                telemetryObjects.push(legacyObject);
             }
 
             function removeChild(childIdentifier) {
@@ -84,6 +81,7 @@ define([], function () {
             }
 
             thisRequest.pending += 1;
+
             openmct.objects.get(domainObject.getId())
                 .then(function (obj) {
                     thisRequest.pending -= 1;

src/plugins/telemetryTable/TelemetryTable.js

@@ -94,6 +94,7 @@ define([
         initialize() {
             if (this.domainObject.type === 'table') {
                 this.filterObserver = this.openmct.objects.observe(this.domainObject, 'configuration.filters', this.updateFilters);
+                this.filters = this.domainObject.configuration.filters;
                 this.loadComposition();
             } else {
                 this.addTelemetryObject(this.domainObject);
@@ -138,7 +139,18 @@ define([
             this.emit('object-added', telemetryObject);
         }
 
-        updateFilters() {
+        updateFilters(updatedFilters) {
+            let deepCopiedFilters = JSON.parse(JSON.stringify(updatedFilters));
+
+            if (this.filters && !_.isEqual(this.filters, deepCopiedFilters)) {
+                this.filters = deepCopiedFilters;
+                this.clearAndResubscribe();
+            } else {
+                this.filters = deepCopiedFilters;
+            }
+        }
+
+        clearAndResubscribe() {
             this.filteredRows.clear();
             this.boundedRows.clear();
             Object.keys(this.subscriptions).forEach(this.unsubscribe, this);

src/plugins/telemetryTable/collections/FilteredTableRowCollection.js

@@ -46,6 +46,7 @@ define(
                 filter = filter.trim().toLowerCase();
 
                 let rowsToFilter = this.getRowsToFilter(columnKey, filter);
+
                 if (filter.length === 0) {
                     delete this.columnFilters[columnKey];
                 } else {
@@ -56,6 +57,16 @@ define(
                 this.emit('filter');
             }
 
+            setColumnRegexFilter(columnKey, filter) {
+                filter = filter.trim();
+
+                let rowsToFilter = this.masterCollection.getRows();
+
+                this.columnFilters[columnKey] = new RegExp(filter);
+                this.rows = rowsToFilter.filter(this.matchesFilters, this);
+                this.emit('filter');
+            }
+
             /**
              * @private
              */
@@ -71,6 +82,10 @@ define(
              * @private
              */
             isSubsetOfCurrentFilter(columnKey, filter) {
+                if (this.columnFilters[columnKey] instanceof RegExp) {
+                    return false;
+                }
+
                 return this.columnFilters[columnKey]
                     && filter.startsWith(this.columnFilters[columnKey])
                     // startsWith check will otherwise fail when filter cleared
@@ -97,7 +112,11 @@ define(
                         return false;
                     }
 
-                    doesMatchFilters = formattedValue.toLowerCase().indexOf(this.columnFilters[key]) !== -1;
+                    if (this.columnFilters[key] instanceof RegExp) {
+                        doesMatchFilters = this.columnFilters[key].test(formattedValue);
+                    } else {
+                        doesMatchFilters = formattedValue.toLowerCase().indexOf(this.columnFilters[key]) !== -1;
+                    }
                 });
 
                 return doesMatchFilters;

src/plugins/telemetryTable/components/table.vue

@@ -188,7 +188,17 @@
                                 class="c-table__search"
                                 @input="filterChanged(key)"
                                 @clear="clearFilter(key)"
-                            />
+                            >
+
+                                <button
+                                    class="c-search__use-regex"
+                                    :class="{ 'is-active': enableRegexSearch[key] }"
+                                    title="Click to enable regex: enter a string with slashes, like this: /regex_exp/"
+                                    @click="toggleRegex(key)"
+                                >
+                                    /R/
+                                </button>
+                            </search>
                         </table-column-header>
                     </tr>
                 </thead>
@@ -361,6 +371,7 @@ export default {
             paused: false,
             markedRows: [],
             isShowingMarkedRowsOnly: false,
+            enableRegexSearch: {},
             hideHeaders: configuration.hideHeaders,
             totalNumberOfRows: 0
         };
@@ -618,7 +629,16 @@ export default {
             this.headersHolderEl.scrollLeft = this.scrollable.scrollLeft;
         },
         filterChanged(columnKey) {
-            this.table.filteredRows.setColumnFilter(columnKey, this.filters[columnKey]);
+            if (this.enableRegexSearch[columnKey]) {
+                if (this.isCompleteRegex(this.filters[columnKey])) {
+                    this.table.filteredRows.setColumnRegexFilter(columnKey, this.filters[columnKey].slice(1, -1));
+                } else {
+                    return;
+                }
+            } else {
+                this.table.filteredRows.setColumnFilter(columnKey, this.filters[columnKey]);
+            }
+
             this.setHeight();
         },
         clearFilter(columnKey) {
@@ -956,6 +976,18 @@ export default {
 
             this.$nextTick().then(this.calculateColumnWidths);
         },
+        toggleRegex(key) {
+            this.$set(this.filters, key, '');
+
+            if (this.enableRegexSearch[key] === undefined) {
+                this.$set(this.enableRegexSearch, key, true);
+            } else {
+                this.$set(this.enableRegexSearch, key, !this.enableRegexSearch[key]);
+            }
+        },
+        isCompleteRegex(string) {
+            return (string.length > 2 && string[0] === '/' && string[string.length - 1] === '/');
+        },
         getViewContext() {
             return {
                 type: 'telemetry-table',

src/plugins/timeline/pluginSpec.js

@@ -98,6 +98,10 @@ describe('the plugin', function () {
 
         beforeEach((done) => {
             planDomainObject = {
+                identifier: {
+                    key: 'test-object',
+                    namespace: ''
+                },
                 type: 'plan',
                 id: "test-object",
                 selectFile: {

src/styles/_controls.scss

@@ -482,7 +482,7 @@ select {
         transition: $transIn;
         white-space: nowrap;
 
-        &:hover {
+        @include hover {
             background: $colorMenuHovBg;
             color: $colorMenuHovFg;
             &:before {
@@ -500,6 +500,10 @@ select {
         &:not([class*='icon']):before {
              content: ''; // Enable :before so that menu items without an icon still indent properly
         }
+
+        .menus-no-icon & {
+            &:before { display: none; }
+        }
     }
 }
 
@@ -731,7 +735,6 @@ select {
 .c-toolbar {
     display: flex;
     align-items: center;
-    justify-content: space-between;
 
     > * {
         // First level items

src/styles/_legacy-plots.scss

@@ -47,6 +47,7 @@ mct-plot {
 .c-plot,
 .gl-plot {
     overflow: hidden;
+    min-height: 100px;
 
         .s-status-taking-snapshot & {
         .c-control-bar {
@@ -79,7 +80,8 @@ mct-plot {
         display: flex;
         flex: 1 1 auto;
         flex-direction: column;
-        overflow: hidden;
+        overflow-y: auto;
+        overflow-x: hidden;
     }
 
     &--stacked {

src/styles/_mixins.scss

@@ -552,7 +552,8 @@
         }
     }
 
-    &[class*='--menus-left'] {
+    &[class*='--menus-left'],
+    &[class*='menus-to-left'] {
         .c-menu {
             left: auto; right: 0;
         }

src/ui/components/search.scss

@@ -1,6 +1,11 @@
+@mixin visibleRegexButton {
+    opacity: 1;
+    padding: 1px 3px;
+    width: 24px;
+}
+
 .c-search {
     @include wrappedInput();
-
     padding-top: 2px;
     padding-bottom: 2px;
 
@@ -9,11 +14,46 @@
         content: $glyph-icon-magnify;
     }
 
+    &__use-regex {
+        // Button
+        $c: $colorBodyFg;
+        background: rgba($c, 0.2);
+        border: 1px solid rgba($c, 0.3);
+        color: $c;
+        border-radius: $controlCr;
+        font-weight: bold;
+        letter-spacing: 1px;
+        font-size: 0.8em;
+        margin-left: $interiorMarginSm;
+        min-width: 0;
+        opacity: 0;
+        order: 2;
+        overflow: hidden;
+        padding: 1px 0;
+        transform-origin: left;
+        transition: $transOut;
+        width: 0;
+
+        &.is-active {
+            $c: $colorBtnActiveBg;
+            @include visibleRegexButton();
+            background: rgba($c, 0.3);
+            border-color: $c;
+            color: $c;
+        }
+    }
+
     &__clear-input {
         display: none;
+        order: 99;
+        padding: 1px 0;
     }
 
     &.is-active {
+        .c-search__use-regex {
+            margin-left: 0;
+        }
+
         .c-search__clear-input {
             display: block;
         }
@@ -21,6 +61,15 @@
 
     input[type='text'],
     input[type='search'] {
+        margin-left: $interiorMargin;
+        order: 3;
         text-align: left;
     }
+
+    &:hover {
+        .c-search__use-regex {
+            @include visibleRegexButton();
+            transition: $transIn;
+        }
+    }
 }

src/ui/components/search.vue

@@ -15,6 +15,7 @@
         class="c-search__clear-input icon-x-in-circle"
         @click="clearInput"
     ></a>
+    <slot></slot>
 </div>
 </template>
 

src/ui/inspector/styles/FontStyleEditor.vue

@@ -3,11 +3,13 @@
     <toolbar-select-menu
         :options="fontSizeMenuOptions"
         @change="setFontSize"
+        class="menus-to-left menus-no-icon"
     />
     <div class="c-toolbar__separator"></div>
     <toolbar-select-menu
         :options="fontMenuOptions"
         @change="setFont"
+        class="menus-to-left menus-no-icon"
     />
 </div>
 </template>

src/ui/layout/layout.scss

@@ -279,10 +279,12 @@
     }
 
     &__toolbar {
+        // Toolbar in the main shell, used by Display Layouts
         $p: $interiorMargin;
         background: $editUIBaseColor;
         border-radius: $basicCr;
         height: $p + 24px; // Need to standardize the height
+        justify-content: space-between;
         padding: $p;
     }
 }