From b00d1ec088810ac2b803f6bf90271e37a4f64e9c Mon Sep 17 00:00:00 2001
From: Alicia Matsumoto <amats@netflix.com>
Date: Mon, 26 May 2025 22:25:07 -0400
Subject: [PATCH 1/5] baseline utility

---
 .../dispatch/src/signal/TableInstance.vue     | 168 +++++++++---------
 1 file changed, 84 insertions(+), 84 deletions(-)

diff --git a/src/dispatch/static/dispatch/src/signal/TableInstance.vue b/src/dispatch/static/dispatch/src/signal/TableInstance.vue
index 78f5ff401e6e..097789f56006 100644
--- a/src/dispatch/static/dispatch/src/signal/TableInstance.vue
+++ b/src/dispatch/static/dispatch/src/signal/TableInstance.vue
@@ -1,85 +1,68 @@
 <template>
-  <v-container fluid>
-    <v-row no-gutters>
-      <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>
-        <v-card variant="flat">
-          <!-- <v-card-title> -->
-          <!--   <v-text-field -->
-          <!--     v-model="q" -->
-          <!--     append-icon="search" -->
-          <!--     label="Search" -->
-          <!--     single-line -->
-          <!--     hide-details -->
-          <!--     clearable -->
-          <!--   /> -->
-          <!-- </v-card-title> -->
-          <v-data-table-server
-            :headers="headers"
-            :items="items"
-            :items-length="total || 0"
-            v-model:page="page"
-            v-model:items-per-page="itemsPerPage"
-            :footer-props="{
-              'items-per-page-options': [10, 25, 50, 100],
-            }"
-            v-model:sort-by="sortBy"
-            v-model:sort-desc="descending"
-            :loading="loading"
-            loading-text="Loading... Please wait"
-          >
-            <template #item.case="{ value }">
-              <case-popover v-if="value" :value="value" />
-            </template>
-            <template #item.signal="{ value }">
-              <signal-popover :value="value" />
-            </template>
-            <template #item.signal.project.display_name="{ item, value }">
-              <v-chip size="small" :color="item.signal.project.color">
-                {{ value }}
-              </v-chip>
-            </template>
-            <template #item.filter_action="{ value }">
-              <v-chip
-                size="small"
-                :color="
-                  {
-                    snooze: 'blue-accent-4',
-                    deduplicate: 'blue-accent-2',
-                  }[value]
-                "
-              >
-                {{
-                  {
-                    snooze: "Snoozed",
-                    deduplicate: "Duplicate",
-                  }[value] || "Not Filtered"
-                }}
-              </v-chip>
-            </template>
-            <template #item.created_at="{ value }">
-              <v-tooltip location="bottom">
-                <template #activator="{ props }">
-                  <span v-bind="props">{{ formatRelativeDate(value) }}</span>
-                </template>
-                <span>{{ formatDate(value) }}</span>
-              </v-tooltip>
-            </template>
-            <template #item.data-table-actions="{ item }">
-              <raw-signal-viewer :value="item.raw" />
-            </template>
-          </v-data-table-server>
-        </v-card>
-      </v-col>
-    </v-row>
-  </v-container>
+  <v-data-table-server
+    :headers="headers"
+    :items="items"
+    :items-length="total || 0"
+    v-model:page="page"
+    v-model:items-per-page="itemsPerPage"
+    :footer-props="{
+      'items-per-page-options': [10, 25, 50, 100],
+    }"
+    v-model:sort-by="sortBy"
+    v-model:sort-desc="descending"
+    :loading="loading"
+    loading-text="Loading... Please wait"
+  >
+    <template #item.case="{ value }">
+      <case-popover v-if="value" :value="value" />
+    </template>
+    <template #item.signal="{ value }">
+      <signal-popover :value="value" />
+    </template>
+    <template #item.entities="{ value }">
+      <instance-entity-popover :value="value" />
+    </template>
+    <template #item.signal.filters="{ value }">
+      <span>
+        <v-chip>{{ this.getSnoozes(value) }} Active</v-chip>
+        <v-chip>{{ this.getSnoozes(value, (count_expired = true)) }} Expired</v-chip>
+      </span>
+    </template>
+    <template #item.signal.project.display_name="{ item, value }">
+      <v-chip size="small" :color="item.signal.project.color">
+        {{ value }}
+      </v-chip>
+    </template>
+    <template #item.filter_action="{ value }">
+      <v-chip
+        size="small"
+        :color="
+          {
+            snooze: 'blue-accent-4',
+            deduplicate: 'orange-darken-2',
+          }[value] || 'green-darken-1'
+        "
+      >
+        {{
+          {
+            snooze: "Snoozed",
+            deduplicate: "Duplicate",
+          }[value] || "Not Filtered"
+        }}
+      </v-chip>
+    </template>
+    <template #item.created_at="{ value }">
+      <v-tooltip location="bottom">
+        <template #activator="{ props }">
+          <span v-bind="props">{{ formatRelativeDate(value) }}</span>
+        </template>
+        <span>{{ formatDate(value) }}</span>
+      </v-tooltip>
+    </template>
+    <template #item.data-table-actions="{ item }">
+      <raw-signal-viewer :value="item.raw" />
+    </template>
+  </v-data-table-server>
 </template>
 
 <script>
@@ -91,7 +74,6 @@ 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",
@@ -100,15 +82,17 @@ export default {
     CasePopover,
     RawSignalViewer,
     SignalPopover,
-    TableFilterDialog,
   },
 
   data() {
     return {
+      activeView: "triggers",
       headers: [
         { title: "Case", value: "case", sortable: false },
+        { title: "Status", value: "filter_action", sortable: true },
         { title: "Signal Definition", value: "signal", sortable: false },
-        { title: "Filter Action", value: "filter_action", sortable: true },
+        { title: "Entities", value: "entities", sortable: true },
+        { title: "Snoozes", value: "signal.filters", sortable: false },
         { title: "Project", value: "signal.project.display_name", sortable: true },
         { title: "Created At", value: "created_at" },
         { title: "", value: "data-table-actions", sortable: false, align: "end" },
@@ -149,6 +133,22 @@ export default {
 
   methods: {
     ...mapActions("signal", ["getAllInstances"]),
+
+    getSnoozes(signal_filters, count_expired = false) {
+      // todo docstring
+      let snoozes = 0
+      for (let filter of signal_filters) {
+        if (filter.action === "snooze") {
+          let filter_is_expired = filter.expiration && new Date() >= new Date(filter.expiration)
+          if (!count_expired && !filter_is_expired) {
+            snoozes++
+          } else if (count_expired && filter_is_expired) {
+            snoozes++
+          }
+        }
+      }
+      return snoozes
+    },
   },
 
   created() {

From 6883f2ce024b45277ab946ae93594fdabb7b6926 Mon Sep 17 00:00:00 2001
From: Alicia Matsumoto <amats@netflix.com>
Date: Thu, 29 May 2025 09:59:27 -0400
Subject: [PATCH 2/5] first signal view refactored

---
 .../src/signal/InstanceEntityPopover.vue      | 48 +++++++++++++++++++
 .../dispatch/src/signal/TableInstance.vue     |  9 +++-
 2 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 src/dispatch/static/dispatch/src/signal/InstanceEntityPopover.vue

diff --git a/src/dispatch/static/dispatch/src/signal/InstanceEntityPopover.vue b/src/dispatch/static/dispatch/src/signal/InstanceEntityPopover.vue
new file mode 100644
index 000000000000..9af4126f5917
--- /dev/null
+++ b/src/dispatch/static/dispatch/src/signal/InstanceEntityPopover.vue
@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <v-menu v-model="menu" origin="overlap">
+      <template #activator="{ props }">
+        <v-chip v-bind="props">
+          {{ value.length }} <v-icon class="pl-2">mdi-cube-outline</v-icon>
+        </v-chip>
+      </template>
+      <v-card v-if="value.length > 0" max-width="600px" class="pb-4">
+        <v-list-dark v-bind="props">
+          <v-list-item>
+            <v-list-item-title>Entities</v-list-item-title>
+            <template #append>
+              <v-btn icon variant="text" @click="menu = false">
+                <v-icon>mdi-close-circle</v-icon>
+              </v-btn>
+            </template>
+          </v-list-item>
+          <v-list-item v-for="entity in value" :key="`${entity.entity_type.name}-${entity.value}`">
+            <h5>{{ entity.entity_type.name }}</h5>
+            {{ entity.value }}
+          </v-list-item>
+        </v-list-dark>
+      </v-card>
+    </v-menu>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "InstanceEntityPopover",
+
+  data: () => ({
+    menu: false,
+  }),
+
+  setup() {},
+
+  props: {
+    value: {
+      type: Object,
+      default: function () {
+        return {}
+      },
+    },
+  },
+}
+</script>
diff --git a/src/dispatch/static/dispatch/src/signal/TableInstance.vue b/src/dispatch/static/dispatch/src/signal/TableInstance.vue
index 097789f56006..23470a8f612c 100644
--- a/src/dispatch/static/dispatch/src/signal/TableInstance.vue
+++ b/src/dispatch/static/dispatch/src/signal/TableInstance.vue
@@ -23,7 +23,12 @@
       <instance-entity-popover :value="value" />
     </template>
     <template #item.signal.filters="{ value }">
-      <span>
+      <span
+        v-if="this.getSnoozes(value) === 0 && this.getSnoozes(value, (count_expired = true)) === 0"
+      >
+        No Snoozes Created
+      </span>
+      <span v-else>
         <v-chip>{{ this.getSnoozes(value) }} Active</v-chip>
         <v-chip>{{ this.getSnoozes(value, (count_expired = true)) }} Expired</v-chip>
       </span>
@@ -74,6 +79,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 InstanceEntityPopover from "@/signal/InstanceEntityPopover.vue"
 
 export default {
   name: "SignalInstanceTable",
@@ -82,6 +88,7 @@ export default {
     CasePopover,
     RawSignalViewer,
     SignalPopover,
+    InstanceEntityPopover,
   },
 
   data() {

From f0d6390c7b4e04573cf92a6bf9acc743ac4dec9c Mon Sep 17 00:00:00 2001
From: Alicia Matsumoto <amats@netflix.com>
Date: Thu, 29 May 2025 10:19:42 -0400
Subject: [PATCH 3/5] put back label

---
 .../static/dispatch/src/signal/TableInstance.vue       | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/dispatch/static/dispatch/src/signal/TableInstance.vue b/src/dispatch/static/dispatch/src/signal/TableInstance.vue
index 23470a8f612c..d37f26c9b9a7 100644
--- a/src/dispatch/static/dispatch/src/signal/TableInstance.vue
+++ b/src/dispatch/static/dispatch/src/signal/TableInstance.vue
@@ -1,4 +1,13 @@
 <template>
+  <v-container fluid>
+    <v-row no-gutters>
+      <v-col>
+        <div class="text-h5">Signals</div>
+      </v-col>
+      <v-col class="text-right">
+        <table-filter-dialog />
+      </v-col>
+    </v-row>
   <v-data-table-server
     :headers="headers"
     :items="items"
@@ -68,6 +77,7 @@
       <raw-signal-viewer :value="item.raw" />
     </template>
   </v-data-table-server>
+  </v-container>
 </template>
 
 <script>

From b23757d94972c8a036701a4bae93ad0d382a99da Mon Sep 17 00:00:00 2001
From: Alicia Matsumoto <amats@netflix.com>
Date: Thu, 29 May 2025 10:24:51 -0400
Subject: [PATCH 4/5] prettier

---
 .../dispatch/src/signal/TableInstance.vue     | 142 +++++++++---------
 1 file changed, 73 insertions(+), 69 deletions(-)

diff --git a/src/dispatch/static/dispatch/src/signal/TableInstance.vue b/src/dispatch/static/dispatch/src/signal/TableInstance.vue
index d37f26c9b9a7..5bd5c94c28ea 100644
--- a/src/dispatch/static/dispatch/src/signal/TableInstance.vue
+++ b/src/dispatch/static/dispatch/src/signal/TableInstance.vue
@@ -8,75 +8,77 @@
         <table-filter-dialog />
       </v-col>
     </v-row>
-  <v-data-table-server
-    :headers="headers"
-    :items="items"
-    :items-length="total || 0"
-    v-model:page="page"
-    v-model:items-per-page="itemsPerPage"
-    :footer-props="{
-      'items-per-page-options': [10, 25, 50, 100],
-    }"
-    v-model:sort-by="sortBy"
-    v-model:sort-desc="descending"
-    :loading="loading"
-    loading-text="Loading... Please wait"
-  >
-    <template #item.case="{ value }">
-      <case-popover v-if="value" :value="value" />
-    </template>
-    <template #item.signal="{ value }">
-      <signal-popover :value="value" />
-    </template>
-    <template #item.entities="{ value }">
-      <instance-entity-popover :value="value" />
-    </template>
-    <template #item.signal.filters="{ value }">
-      <span
-        v-if="this.getSnoozes(value) === 0 && this.getSnoozes(value, (count_expired = true)) === 0"
-      >
-        No Snoozes Created
-      </span>
-      <span v-else>
-        <v-chip>{{ this.getSnoozes(value) }} Active</v-chip>
-        <v-chip>{{ this.getSnoozes(value, (count_expired = true)) }} Expired</v-chip>
-      </span>
-    </template>
-    <template #item.signal.project.display_name="{ item, value }">
-      <v-chip size="small" :color="item.signal.project.color">
-        {{ value }}
-      </v-chip>
-    </template>
-    <template #item.filter_action="{ value }">
-      <v-chip
-        size="small"
-        :color="
-          {
-            snooze: 'blue-accent-4',
-            deduplicate: 'orange-darken-2',
-          }[value] || 'green-darken-1'
-        "
-      >
-        {{
-          {
-            snooze: "Snoozed",
-            deduplicate: "Duplicate",
-          }[value] || "Not Filtered"
-        }}
-      </v-chip>
-    </template>
-    <template #item.created_at="{ value }">
-      <v-tooltip location="bottom">
-        <template #activator="{ props }">
-          <span v-bind="props">{{ formatRelativeDate(value) }}</span>
-        </template>
-        <span>{{ formatDate(value) }}</span>
-      </v-tooltip>
-    </template>
-    <template #item.data-table-actions="{ item }">
-      <raw-signal-viewer :value="item.raw" />
-    </template>
-  </v-data-table-server>
+    <v-data-table-server
+      :headers="headers"
+      :items="items"
+      :items-length="total || 0"
+      v-model:page="page"
+      v-model:items-per-page="itemsPerPage"
+      :footer-props="{
+        'items-per-page-options': [10, 25, 50, 100],
+      }"
+      v-model:sort-by="sortBy"
+      v-model:sort-desc="descending"
+      :loading="loading"
+      loading-text="Loading... Please wait"
+    >
+      <template #item.case="{ value }">
+        <case-popover v-if="value" :value="value" />
+      </template>
+      <template #item.signal="{ value }">
+        <signal-popover :value="value" />
+      </template>
+      <template #item.entities="{ value }">
+        <instance-entity-popover :value="value" />
+      </template>
+      <template #item.signal.filters="{ value }">
+        <span
+          v-if="
+            this.getSnoozes(value) === 0 && this.getSnoozes(value, (count_expired = true)) === 0
+          "
+        >
+          No Snoozes Created
+        </span>
+        <span v-else>
+          <v-chip>{{ this.getSnoozes(value) }} Active</v-chip>
+          <v-chip>{{ this.getSnoozes(value, (count_expired = true)) }} Expired</v-chip>
+        </span>
+      </template>
+      <template #item.signal.project.display_name="{ item, value }">
+        <v-chip size="small" :color="item.signal.project.color">
+          {{ value }}
+        </v-chip>
+      </template>
+      <template #item.filter_action="{ value }">
+        <v-chip
+          size="small"
+          :color="
+            {
+              snooze: 'blue-accent-4',
+              deduplicate: 'orange-darken-2',
+            }[value] || 'green-darken-1'
+          "
+        >
+          {{
+            {
+              snooze: "Snoozed",
+              deduplicate: "Duplicate",
+            }[value] || "Not Filtered"
+          }}
+        </v-chip>
+      </template>
+      <template #item.created_at="{ value }">
+        <v-tooltip location="bottom">
+          <template #activator="{ props }">
+            <span v-bind="props">{{ formatRelativeDate(value) }}</span>
+          </template>
+          <span>{{ formatDate(value) }}</span>
+        </v-tooltip>
+      </template>
+      <template #item.data-table-actions="{ item }">
+        <raw-signal-viewer :value="item.raw" />
+      </template>
+    </v-data-table-server>
   </v-container>
 </template>
 
@@ -89,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"
 import InstanceEntityPopover from "@/signal/InstanceEntityPopover.vue"
 
 export default {
@@ -98,6 +101,7 @@ export default {
     CasePopover,
     RawSignalViewer,
     SignalPopover,
+    TableFilterDialog,
     InstanceEntityPopover,
   },
 

From 6e1d5c87cc5bb9aa9685f057240fd5db6818a9f1 Mon Sep 17 00:00:00 2001
From: Alicia Matsumoto <amats@netflix.com>
Date: Thu, 29 May 2025 10:28:05 -0400
Subject: [PATCH 5/5] docstring

---
 src/dispatch/static/dispatch/src/signal/TableInstance.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/dispatch/static/dispatch/src/signal/TableInstance.vue b/src/dispatch/static/dispatch/src/signal/TableInstance.vue
index 5bd5c94c28ea..5c9904862279 100644
--- a/src/dispatch/static/dispatch/src/signal/TableInstance.vue
+++ b/src/dispatch/static/dispatch/src/signal/TableInstance.vue
@@ -155,8 +155,13 @@ export default {
   methods: {
     ...mapActions("signal", ["getAllInstances"]),
 
+    /**
+     * Count the snooze filters for a given signal definition. Counts all
+     * active snoozes by default, with the option to count expired snoozes instead.
+     * @param signal_filters: The definition's filters.
+     * @param count_expired: If true, count expired snoozes instead of active ones.
+     */
     getSnoozes(signal_filters, count_expired = false) {
-      // todo docstring
       let snoozes = 0
       for (let filter of signal_filters) {
         if (filter.action === "snooze") {