Add filtering by metadata

src/plugins/plan/util.js

@@ -20,6 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+import _ from 'lodash';
 export function getValidatedData(domainObject) {
   const sourceMap = domainObject.sourceMap;
   const json = getObjectJson(domainObject);
@@ -45,6 +46,16 @@
           groupActivity.end = activity[sourceMap.end];
         }
 
+        if (Array.isArray(sourceMap.filterMetadata)) {
+          groupActivity.filterMetadataValues = [];
+          sourceMap.filterMetadata.forEach((property) => {
+            const value = _.get(activity, property);
+            groupActivity.filterMetadataValues.push({
+              value
+            });
+          });
+        }
+
         if (!mappedJson[groupIdKey]) {
           mappedJson[groupIdKey] = [];
         }
@@ -92,14 +103,24 @@
       orderedGroupNames = groups;
     }
   }
-
   if (orderedGroupNames === undefined) {
     orderedGroupNames = Object.keys(planData);
   }
 
   return orderedGroupNames;
 }
 
+export function getFilteredValues(activity) {
+  let values = [];
+  if (Array.isArray(activity.filterMetadataValues)) {
+    values = activity.filterMetadataValues;
+  } else if (activity?.properties) {
+    values = Object.values(activity.properties);
+  }
+
+  return values;
+}
+
 export function getContrastingColor(hexColor) {
   function cutHex(h, start, end) {
     const hStr = h.charAt(0) === '#' ? h.substring(1, 7) : h;

src/plugins/timelist/TimelistComponent.vue

@@ -38,7 +38,12 @@
 import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
 import ListView from '../../ui/components/List/ListView.vue';
 import { getPreciseDuration } from '../../utils/duration.js';
-import { getValidatedData, getValidatedGroups } from '../plan/util.js';
+import {
+  getFilteredValues,
+  getFilterMetadataProperties,
+  getValidatedData,
+  getValidatedGroups
+} from '../plan/util.js';
 import { SORT_ORDER_OPTIONS } from './constants.js';
 
 const SCROLL_TIMEOUT = 10000;
@@ -208,22 +213,22 @@
       this.setViewFromConfig(mutatedObject.configuration);
     },
     setViewFromConfig(configuration) {
+      this.filterValue = configuration.filter || '';
+      this.filterMetadataValue = configuration.filterMetadata || '';
       if (this.isEditing) {
-        this.filterValue = configuration.filter;
         this.hideAll = false;
-        this.listActivities();
       } else {
-        this.filterValue = configuration.filter;
         this.setSort();
-        this.listActivities();
       }
+      this.listActivities();
     },
     updateTimestamp(timestamp) {
       //The clock never stops ticking
       this.updateTimeStampAndListActivities(timestamp);
     },
     setFixedTime() {
-      this.filterValue = this.domainObject.configuration.filter;
+      this.filterValue = this.domainObject.configuration.filter || '';
+      this.filterMetadataValue = this.domainObject.configuration.filterMetadata || '';
       this.isFixedTime = !this.timeContext.isRealTime();
       if (this.isFixedTime) {
         this.hideAll = false;
@@ -326,7 +331,21 @@
         return true;
       }
 
-      const hasFilterMatch = this.filterByName(activity.name);
+      let hasNameMatch = false;
+      let hasMetadataMatch = false;
+      if (this.filterValue || this.filterMetadataValue) {
+        if (this.filterValue) {
+          hasNameMatch = this.filterByName(activity.name);
+        }
+        if (this.filterMetadataValue) {
+          hasMetadataMatch = this.filterByMetadata(activity);
+        }
+      } else {
+        hasNameMatch = true;
+        hasMetadataMatch = true;
+      }
+
+      const hasFilterMatch = hasNameMatch || hasMetadataMatch;
       if (hasFilterMatch === false || this.hideAll === true) {
         return false;
       }
@@ -354,6 +373,17 @@
         return regex.test(name.toLowerCase());
       });
     },
+    filterByMetadata(activity) {
+      const filters = this.filterMetadataValue.split(',');
+
+      return filters.some((search) => {
+        const normalized = search.trim().toLowerCase();
+        const regex = new RegExp(normalized);
+        const activityValues = getFilteredValues(activity);
+
+        return regex.test(activityValues.join().toLowerCase());
+      });
+    },
     // Add activity classes, increase activity counts by type,
     // set indices of the first occurrences of current and future activities - used for scrolling
     styleActivity(activity, index) {

src/plugins/timelist/inspector/FilteringComponent.vue

@@ -24,20 +24,47 @@
     <div v-if="canEdit" class="c-inspect-properties__hint span-all">
       Filter this view by comma-separated keywords.
     </div>
-    <div class="c-inspect-properties__label" title="Filter by keyword.">Filters</div>
-    <div v-if="canEdit" class="c-inspect-properties__value" :class="{ 'form-error': hasError }">
+    <div class="c-inspect-properties__label" aria-label="Activity Names" title="Filter by keyword.">
+      Activity Names
+    </div>
+    <div
+      v-if="canEdit"
+      class="c-inspect-properties__value"
+      :class="{ 'form-error': hasFilterError }"
+    >
       <textarea
         v-model="filterValue"
         class="c-input--flex"
         type="text"
         @keydown.enter.exact.stop="forceBlur($event)"
-        @keyup="updateForm($event, 'filter')"
+        @keyup="updateNameFilter($event, 'filter')"
       ></textarea>
     </div>
     <div v-else class="c-inspect-properties__value">
       {{ filterValue }}
     </div>
   </li>
+  <li class="c-inspect-properties__row">
+    <div class="c-inspect-properties__label" aria-label="Meta-data Tags" title="Filter by keyword.">
+      Meta-data Tags
+    </div>
+    <div
+      v-if="canEdit"
+      class="c-inspect-properties__value"
+      :class="{ 'form-error': hasMetadataFilterError }"
+    >
+      <textarea
+        v-model="filterMetadataValue"
+        class="c-input--flex"
+        type="text"
+        @keydown.enter.exact.stop="forceBlur($event)"
+        @keyup="updateMetadataFilter($event, 'filterMetadata')"
+      ></textarea>
+    </div>
+    <div v-else class="c-inspect-properties__value">
+      {{ filterMetadataValue }}
+    </div>
+  </li>
 </template>
 
 <script>
@@ -48,7 +75,9 @@
     return {
       isEditing: this.openmct.editor.isEditing(),
       filterValue: this.domainObject.configuration.filter,
-      hasError: false
+      filterMetadataValue: this.domainObject.configuration.filterMetadata,
+      hasFilterError: false,
+      hasMetadataFilterError: false
     };
   },
   computed: {
@@ -65,37 +94,53 @@
   methods: {
     setEditState(isEditing) {
       this.isEditing = isEditing;
-      if (!this.isEditing && this.hasError) {
+      if (!this.isEditing && this.hasFilterError && this.hasMetadataFilterError) {
         this.filterValue = this.domainObject.configuration.filter;
-        this.hasError = false;
+        this.filterMetadataValue = this.domainObject.configuration.filterMetadata;
+        this.hasFilterError = false;
+        this.hasMetadataFilterError = false;
       }
     },
     forceBlur(event) {
       event.target.blur();
     },
-    updateForm(event, property) {
-      if (!this.isValid()) {
-        this.hasError = true;
+    updateNameFilter(event, property) {
+      if (!this.isValid(this.filterValue)) {
+        this.hasFilterError = true;
 
         return;
       }
 
-      this.hasError = false;
+      this.hasFilterError = false;
 
       this.$emit('updated', {
         property,
         value: this.filterValue.replace(/,(\s)*$/, '')
       });
     },
-    isValid() {
+    updateMetadataFilter(event, property) {
+      if (!this.isValid(this.filterMetadataValue)) {
+        this.hasMetadataFilterError = true;
+
+        return;
+      }
+
+      this.hasMetadataFilterError = false;
+
+      this.$emit('updated', {
+        property,
+        value: this.filterMetadataValue.replace(/,(\s)*$/, '')
+      });
+    },
+    isValid(value) {
       // Test for any word character, any whitespace character or comma
-      if (this.filterValue === '') {
+      if (value === '') {
         return true;
       }
 
       const regex = new RegExp(/^([a-zA-Z0-9_\-\s,])+$/g);
 
-      return regex.test(this.filterValue);
+      return regex.test(value);
     }
   }
 };

src/plugins/timelist/plugin.js

@@ -38,16 +38,10 @@ export default function () {
       initialize: function (domainObject) {
         domainObject.configuration = {
           sortOrderIndex: 0,
-          futureEventsIndex: 1,
-          futureEventsDurationIndex: 0,
-          futureEventsDuration: 20,
           currentEventsIndex: 1,
-          currentEventsDurationIndex: 0,
-          currentEventsDuration: 20,
-          pastEventsIndex: 1,
-          pastEventsDurationIndex: 0,
-          pastEventsDuration: 20,
-          filter: ''
+          filter: '',
+          filterMetadata: '',
+          isCompact: false
         };
         domainObject.composition = [];
       }