Add eventType filtering

Author: longquanzheng

client/routes/execution/history.vue

@@ -23,7 +23,15 @@
           <table v-if="format === 'grid' && showTable" :class="{ compact: compactDetails }">
             <thead ref="thead">
               <th>ID</th>
-              <th>Type</th>
+              <th>Type <v-select
+                        class="eventType"
+                        value="--"
+                        :options="eventTypes"
+                        :on-change="setEventType"
+                        :searchable="false"
+                />
+
+              </th>
               <th>
                 <a class="elapsed" :href="tsFormat === 'elapsed' ? null : '#'" @click.prevent="setTsFormat('elapsed')">Elapsed</a> /
                 <a class="ts" :href="tsFormat === 'elapsed' ? '#' : null" @click.prevent="setTsFormat('ts')">Time</a>
@@ -35,7 +43,7 @@
             </thead>
             <div class="spacer"></div>
             <tbody>
-              <tr v-for="(he, i) in $parent.results"
+              <tr v-for="(he, i) in filteredEvents"
                 :key="he.eventId"
                 :data-event-type="he.eventType"
                 :data-event-id="he.eventId"
@@ -100,6 +108,14 @@ export default {
       tsFormat: localStorage.getItem(`${this.$route.params.domain}:history-ts-col-format`) || 'elapsed',
       compactDetails: localStorage.getItem(`${this.$route.params.domain}:history-compact-details`) === 'true',
       splitEnabled: false,
+      eventType: "",
+      eventTypes: [
+        { value: 'Decision', label: 'Decision' },
+        { value: 'Activity', label: 'Activity' },
+        { value: 'Signal', label: 'Signal' },
+        { value: 'Child Workflow', label: 'Child Workflow' },
+        { value: 'Others', label: 'Others' },
+      ],
       splitSizes: [20, 80]
     }
   },
@@ -108,6 +124,7 @@ export default {
     this.$watch('format', this.scrollEventIntoView.bind(this, true))
     this.$watch('eventId', this.scrollEventIntoView.bind(this, false))
 
+    this.eventType = ""
     this.recalcThWidths = debounce(() => {
       if (!this.$refs.thead) return
       var ths = Array.from(this.$refs.thead.querySelectorAll('th'))
@@ -155,9 +172,22 @@ export default {
     },
     exportFilename() {
       return `${this.$route.params.workflowId.replace(/[\\~#%&*{}\/:<>?|\"-]/g, ' ')} - ${this.$route.params.runId}.json`
-    }
+    },
+    filteredEvents(){
+      return this.$parent.results.filter(function(u) {
+        if (this.eventType && this.eventType != "--"){
+          return u.eventType.startsWith(this.eventType)
+        }else{
+          return true
+        }
+      })
+    },
+
   },
   methods: {
+    setEventType(et){
+      this.eventType = et
+    },
     setFormat(format) {
       this.$router.replace({
         query: Object.assign({}, this.$route.query, { format })