Adds filtering support by signal definition to signal instance table (#…

…4074)
Netflix · Dec 2, 2023 · ad74b80 · ad74b80
1 parent 34bdfe0
commit ad74b80
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 14 deletions.
diff --git a/src/dispatch/static/dispatch/src/signal/TableFilterDialog.vue b/src/dispatch/static/dispatch/src/signal/TableFilterDialog.vue
@@ -0,0 +1,62 @@
+<template>
+  <v-dialog v-model="display" max-width="600px">
+    <template #activator="{ props }">
+      <v-badge :model-value="!!numFilters" bordered color="info" :content="numFilters">
+        <v-btn color="secondary" v-bind="props"> Filter </v-btn>
+      </v-badge>
+    </template>
+    <v-card>
+      <v-card-title>
+        <span class="text-h5">Signal Instance Filters</span>
+      </v-card-title>
+      <v-list density="compact">
+        <v-list-item>
+          <signal-definition-combobox v-model="local_signal" label="Signal Definitions" />
+        </v-list-item>
+      </v-list>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn color="info" variant="text" @click="applyFilters()"> Apply Filters </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+import { sum } from "lodash"
+import { mapFields } from "vuex-map-fields"
+
+import SignalDefinitionCombobox from "@/signal/SignalDefinitionCombobox.vue"
+
+export default {
+  name: "SignalInstanceTableFilterDialog",
+
+  components: {
+    SignalDefinitionCombobox,
+  },
+
+  data() {
+    return {
+      display: false,
+      local_signal: [],
+    }
+  },
+
+  computed: {
+    ...mapFields("signal", ["instanceTable.options.filters.signal"]),
+    numFilters: function () {
+      return sum([this.signal.length])
+    },
+  },
+
+  methods: {
+    applyFilters() {
+      // we set the filter values
+      this.signal = this.local_signal
+
+      // we close the dialog
+      this.display = false
+    },
+  },
+}
+</script>
diff --git a/src/dispatch/static/dispatch/src/signal/TableInstance.vue b/src/dispatch/static/dispatch/src/signal/TableInstance.vue
@@ -4,6 +4,9 @@
       <v-col>
         <div class="text-h5">Signals</div>
       </v-col>
+      <v-col class="text-right">
+        <table-filter-dialog />
+      </v-col>
     </v-row>
     <v-row no-gutters>
       <v-col>
@@ -32,9 +35,6 @@
             :loading="loading"
             loading-text="Loading... Please wait"
           >
-            <template #item.signal.create_case="{ value }">
-              <v-checkbox-btn :model-value="value" disabled />
-            </template>
             <template #item.case="{ value }">
               <case-popover v-if="value" :value="value" />
             </template>
@@ -91,6 +91,7 @@ import CasePopover from "@/case/CasePopover.vue"
 import RawSignalViewer from "@/signal/RawSignalViewer.vue"
 import RouterUtils from "@/router/utils"
 import SignalPopover from "@/signal/SignalPopover.vue"
+import TableFilterDialog from "@/signal/TableFilterDialog.vue"
 
 export default {
   name: "SignalInstanceTable",
@@ -99,12 +100,12 @@ export default {
     CasePopover,
     RawSignalViewer,
     SignalPopover,
+    TableFilterDialog,
   },
 
   data() {
     return {
       headers: [
-        { title: "Create Case", value: "signal.create_case", sortable: false },
         { title: "Case", value: "case", sortable: false },
         { title: "Signal Definition", value: "signal", sortable: false },
         { title: "Filter Action", value: "filter_action", sortable: true },
@@ -124,6 +125,7 @@ export default {
       "instanceTable.loading",
       "instanceTable.options.descending",
       "instanceTable.options.filters",
+      "instanceTable.options.filters.signal",
       "instanceTable.options.itemsPerPage",
       "instanceTable.options.page",
       "instanceTable.options.q",
@@ -166,7 +168,15 @@ export default {
     )
 
     this.$watch(
-      (vm) => [vm.q, vm.sortBy, vm.itemsPerPage, vm.descending, vm.created_at, vm.project],
+      (vm) => [
+        vm.q,
+        vm.sortBy,
+        vm.itemsPerPage,
+        vm.descending,
+        vm.created_at,
+        vm.project,
+        vm.signal,
+      ],
       () => {
         this.page = 1
         RouterUtils.updateURLFilters(this.filters)

diff --git a/src/dispatch/static/dispatch/src/signal/store.js b/src/dispatch/static/dispatch/src/signal/store.js
@@ -1,5 +1,5 @@
 import { getField, updateField } from "vuex-map-fields"
-import { debounce, filter } from "lodash"
+import { debounce } from "lodash"
 
 import SearchUtils from "@/search/utils"
 import SignalApi from "@/signal/api"
@@ -76,6 +76,7 @@ const state = {
           start: null,
           end: null,
         },
+        signal: [],
       },
       q: "",
       page: 1,
@@ -117,14 +118,6 @@ const actions = {
     return SignalApi.getAllInstances(params)
       .then((response) => {
         commit("SET_INSTANCE_TABLE_LOADING", false)
-
-        // We filter out instances based on the given query parameter provided
-        if (params.q) {
-          response.data.items = filter(response.data.items, function (item) {
-            return item.signal.name.includes(params.q) || item.signal.description.includes(params.q)
-          })
-        }
-
         commit("SET_INSTANCE_TABLE_ROWS", response.data)
       })
       .catch(() => {