Add case popover/dialog to entity tab correlation card

src/dispatch/static/dispatch/src/case/CasePopover.vue

@@ -27,24 +27,30 @@
           </v-list-item>
         </v-list>
         <v-list>
-          <v-list-item>
-            <v-list-item-action>
-              <v-icon>mdi-briefcase</v-icon>
-            </v-list-item-action>
-            <v-list-item-subtitle>{{ value.assignee.email }}</v-list-item-subtitle>
-          </v-list-item>
+          <template
+            v-if="value.assignee && value.assignee.individual && value.assignee.individual.email"
+          >
+            <v-list-item>
+              <v-list-item-action>
+                <v-icon>mdi-briefcase</v-icon>
+              </v-list-item-action>
+              <v-list-item-subtitle>{{ value.assignee.individual.email }}</v-list-item-subtitle>
+            </v-list-item>
+          </template>
           <v-list-item>
             <v-list-item-action>
               <v-icon>business</v-icon>
             </v-list-item-action>
             <v-list-item-subtitle>{{ value.title }}</v-list-item-subtitle>
           </v-list-item>
-          <v-list-item>
-            <v-list-item-action>
-              <v-icon>business</v-icon>
-            </v-list-item-action>
-            <v-list-item-subtitle>{{ value.case_type.name }}</v-list-item-subtitle>
-          </v-list-item>
+          <template v-if="value.case_type && value.case_type.name">
+            <v-list-item>
+              <v-list-item-action>
+                <v-icon>business</v-icon>
+              </v-list-item-action>
+              <v-list-item-subtitle>{{ value.case_type.name }}</v-list-item-subtitle>
+            </v-list-item>
+          </template>
         </v-list>
       </v-card>
     </v-menu>
@@ -53,7 +59,7 @@
 
 <script>
 export default {
-  name: "SignalPopover",
+  name: "CasePopover",
 
   data: () => ({
     menu: false,

src/dispatch/static/dispatch/src/case/CaseTab.vue

@@ -0,0 +1,61 @@
+<template>
+  <v-data-table
+    :headers="headers"
+    :items="cases"
+    :items-per-page="-1"
+    disabled-pagination
+    hide-default-footer
+  >
+    <template v-slot:item.case="{ item }">
+      <case-popover v-model="item" />
+    </template>
+    <template v-slot:item.created_at="{ item }">
+      <v-tooltip bottom>
+        <template v-slot:activator="{ on, attrs }">
+          <span v-bind="attrs" v-on="on">{{ item.created_at | formatRelativeDate }}</span>
+        </template>
+        <span>{{ item.created_at | formatDate }}</span>
+      </v-tooltip>
+    </template>
+  </v-data-table>
+</template>
+
+<script>
+import { mapFields } from "vuex-map-fields"
+
+import CasePopover from "@/case/CasePopover.vue"
+
+export default {
+  name: "CaseTab",
+  components: {
+    CasePopover,
+  },
+  props: {
+    inputCases: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      menu: false,
+      headers: [
+        { text: "Case", value: "case", sortable: false },
+        { text: "Priority", value: "case_priority.name", sortable: false },
+        { text: "Status", value: "status", sortable: false },
+        { text: "Created At", value: "created_at" },
+        { text: "", value: "data-table-actions", sortable: false, align: "end" },
+      ],
+    }
+  },
+  computed: {
+    ...mapFields("case_management", ["selected.cases"]),
+    cases() {
+      if (this.inputCases.length) {
+        return this.inputCases
+      }
+      return this.case
+    },
+  },
+}
+</script>

src/dispatch/static/dispatch/src/entity/EntityCard.vue

@@ -42,6 +42,7 @@
           rounded="xl"
           class="d-flex align-center mx-4 mt-3 mb-3"
           :elevation="hover ? 2 : 0"
+          @click="createCaseShow(getCaseTable())"
         >
           <v-card-text class="d-flex align-center">
             <v-progress-linear
@@ -66,12 +67,22 @@
       <template v-slot:activator="{ on }"></template>
       <signal-instance-tab :inputSignalInstances="signalInstances" />
     </v-dialog>
+    <v-dialog v-model="showCaseView" max-width="1080">
+      <template v-slot:activator="{ on }"></template>
+      <case-tab :inputCases="cases" />
+    </v-dialog>
   </v-card>
 </template>
 
 <script>
-import SignalInstanceTab from "@/signal/SignalInstanceTab.vue"
+import { mapActions } from "vuex"
+import { mapFields } from "vuex-map-fields"
+
+import CaseApi from "@/case/api"
+import CaseTab from "@/case/CaseTab.vue"
 import EntityApi from "@/entity/api"
+import SearchUtils from "@/search/utils"
+import SignalInstanceTab from "@/signal/SignalInstanceTab.vue"
 
 export default {
   name: "EntityCard",
@@ -87,6 +98,11 @@ export default {
   },
   components: {
     "signal-instance-tab": SignalInstanceTab,
+    "case-tab": CaseTab,
+  },
+  computed: {
+    ...mapFields("entity", ["dialogs.showCaseView"]),
+    ...mapFields("route", ["query"]),
   },
   data() {
     return {
@@ -95,6 +111,12 @@ export default {
       isLoading: true,
       dialog: false,
       signalInstances: [],
+      cases: [],
+      filters: {
+        entity: [],
+        start: null,
+        end: null,
+      },
     }
   },
   async mounted() {
@@ -106,6 +128,7 @@ export default {
     },
   },
   methods: {
+    ...mapActions("entity", ["createCaseShow"]),
     async refreshData() {
       try {
         this.isLoading = true
@@ -130,13 +153,37 @@ export default {
         selectedDateTime
       ).then((response) => response.data.instances)
     },
+    getCaseTable() {
+      this.filters.entities = [this.entity]
+      const startDate = this.getStartDate()
+      const endDate = new Date()
+      this.filters.start = [startDate]
+      this.filters.end = [endDate]
+
+      const expression = SearchUtils.createFilterExpression(this.filters)
+      if (!expression) return
+
+      const params = { filter: expression, itemsPerPage: 50 }
+
+      return CaseApi.getAll(params)
+        .then((response) => {
+          this.cases = response.data.items
+          return response.data.items
+        })
+        .catch((error) => {
+          console.error(error)
+        })
+    },
     async openSignalInstanceTab() {
       await this.getSignalInstances(this.selectedDateTime)
       this.dialog = true
       this.$nextTick(() => {
         this.$refs.signalInstanceTab = this.signalInstances
       })
     },
+    getStartDate() {
+      return new Date(Date.now() - this.selectedDateTime * 86400000).toISOString()
+    },
   },
 }
 </script>

src/dispatch/static/dispatch/src/entity/store.js

@@ -21,6 +21,7 @@ const state = {
     ...getDefaultSelectedState(),
   },
   dialogs: {
+    showCaseView: false,
     showCreateEdit: false,
     showRemove: false,
   },
@@ -66,6 +67,12 @@ const actions = {
       commit("SET_SELECTED", entity)
     }
   },
+  createCaseShow({ commit }, cases) {
+    commit("SET_DIALOG_CASE_VIEW", true)
+    if (cases) {
+      commit("SET_SELECTED", cases)
+    }
+  },
   closeCreateEditDialog({ commit }) {
     commit("SET_DIALOG_CREATE_EDIT", false)
     commit("RESET_SELECTED")
@@ -143,6 +150,9 @@ const mutations = {
   SET_TABLE_ROWS(state, value) {
     state.table.rows = value
   },
+  SET_DIALOG_CASE_VIEW(state, value) {
+    state.dialogs.showCaseView = value
+  },
   SET_DIALOG_CREATE_EDIT(state, value) {
     state.dialogs.showCreateEdit = value
   },

src/dispatch/static/dispatch/src/entity_type/EntityTypeCreateDialog.vue

@@ -286,10 +286,6 @@ export default {
         }
       })
     },
-    /**
-     * This function sets up the draggable feature for the signal table and the playground editor.
-     * Updates the editor value with the selected signal raw JSON when dragging ends.
-     */
     updateEditorValue(newValue) {
       this.editorValue = JSON.stringify(newValue, null, 2)
     },

src/dispatch/static/dispatch/src/search/utils.js

@@ -47,6 +47,57 @@ export default {
 
     return { ...options, filter: JSON.stringify(expression) }
   },
+  /**
+   * Create a filter expression for searching for items in a database
+   *
+   * @param {Object} filters - An object containing the search filters
+   * @param {String} model - The name of the model used in the search
+   *
+   * @return {Array} filterExpression - An array of filter objects that can be used to search the database
+   *
+   * @example
+   * const filters = {
+   *   name: "Endpoint infected with Nanocore",
+   *   start_date: {
+   *     start: "2022-01-01",
+   *     end: "2022-12-31"
+   *   }
+   * }
+   * const model = "Case"
+   *
+   * const filterExpression = createFilterExpression(filters, model)
+   * console.log(filterExpression)
+   *
+   * // Output:
+   * // [
+   * //   {
+   * //     or: [
+   * //       {
+   * //         model: "Case",
+   * //         field: "name",
+   * //         op: "==",
+   * //         value: "Endpoint infected with Nanocore"
+   * //       }
+   * //     ]
+   * //   },
+   * //   {
+   * //     and: [
+   * //       {
+   * //         model: "Case",
+   * //         field: "start_date",
+   * //         op: ">=",
+   * //         value: "2022-01-01"
+   * //       },
+   * //       {
+   * //         model: "Case",
+   * //         field: "start_date",
+   * //         op: "<=",
+   * //         value: "2022-12-31"
+   * //       }
+   * //     ]
+   * //   }
+   * // ]
+   */
   createFilterExpression(filters, model) {
     let filterExpression = []
     forEach(filters, function (value, key) {

src/dispatch/static/dispatch/src/store.js

@@ -10,6 +10,7 @@ import case_severity from "@/case/severity/store"
 import case_type from "@/case/type/store"
 import definition from "@/definition/store"
 import document from "@/document/store"
+import entity from "@/entity/store"
 import entity_type from "@/entity_type/store"
 import feedback from "@/feedback/store"
 import incident from "@/incident/store"
@@ -57,6 +58,7 @@ export default new Vuex.Store({
     case_type,
     definition,
     document,
+    entity,
     entity_type,
     feedback,
     incident,