adds a relative date chip group to entity tab

src/dispatch/entity/views.py

@@ -67,13 +67,25 @@ def delete_entity(*, db_session: Session = Depends(get_db), entity_id: PrimaryKe
     delete(db_session=db_session, entity_id=entity_id)
 
 
-@router.get("/{entity_id}/cases", response_model=None)
-def count_cases_with_entity(*, db_session: Session = Depends(get_db), entity_id: PrimaryKey):
-    cases = get_cases_with_entity(db=db_session, entity_id=entity_id, days_back=30)
+@router.get("/{entity_id}/cases/{days_back}", response_model=None)
+def count_cases_with_entity(
+    *,
+    db_session: Session = Depends(get_db),
+    days_back: int = 7,
+    entity_id: PrimaryKey,
+):
+    cases = get_cases_with_entity(db=db_session, entity_id=entity_id, days_back=days_back)
     return {"cases": cases}
 
 
-@router.get("/{entity_id}/signal_instances", response_model=None)
-def get_signal_instances_by_entity(entity_id: int, db: Session = Depends(get_db)):
-    instances = get_signal_instances_with_entity(db, entity_id, days_back=30)
+@router.get("/{entity_id}/signal_instances/{days_back}", response_model=None)
+def get_signal_instances_by_entity(
+    *,
+    db_session: Session = Depends(get_db),
+    days_back: int = 7,
+    entity_id: PrimaryKey,
+):
+    instances = get_signal_instances_with_entity(
+        db=db_session, entity_id=entity_id, days_back=days_back
+    )
     return {"instances": instances}

src/dispatch/static/dispatch/components.d.ts

@@ -11,6 +11,8 @@ declare module 'vue' {
     BasicLayout: typeof import('./src/components/layouts/BasicLayout.vue')['default']
     ColorPickerInput: typeof import('./src/components/ColorPickerInput.vue')['default']
     DashboardLayout: typeof import('./src/components/layouts/DashboardLayout.vue')['default']
+    DateChipGroupRelative: typeof import('./src/components/DateChipGroupRelative.vue')['default']
+    DateTimePicker: typeof import("./src/components/DateTimePicker.vue")["default"]
     DateTimePickerMenu: typeof import('./src/components/DateTimePickerMenu.vue')['default']
     DateWindowInput: typeof import('./src/components/DateWindowInput.vue')['default']
     DefaultLayout: typeof import('./src/components/layouts/DefaultLayout.vue')['default']
@@ -19,19 +21,20 @@ declare module 'vue' {
     NotificationSnackbarsWrapper: typeof import('./src/components/NotificationSnackbarsWrapper.vue')['default']
     PageHeader: typeof import('./src/components/PageHeader.vue')['default']
     Refresh: typeof import('./src/components/Refresh.vue')['default']
+    RelativeDateChipGroup: typeof import("./src/components/RelativeDateChipGroup.vue")["default"]
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SettingsBreadcrumbs: typeof import('./src/components/SettingsBreadcrumbs.vue')['default']
     StatWidget: typeof import('./src/components/StatWidget.vue')['default']
-    VAlert: typeof import('vuetify/lib')['VAlert']
+    VAlert: typeof import("vuetify/lib")["VAlert"]
     VApp: typeof import('vuetify/lib')['VApp']
     VAppBar: typeof import('vuetify/lib')['VAppBar']
     VAutocomplete: typeof import('vuetify/lib')['VAutocomplete']
     VAvatar: typeof import('vuetify/lib')['VAvatar']
     VBadge: typeof import('vuetify/lib')['VBadge']
     VBottomSheet: typeof import('vuetify/lib')['VBottomSheet']
-    VBreadcrumbs: typeof import('vuetify/lib')['VBreadcrumbs']
-    VBreadcrumbsItem: typeof import('vuetify/lib')['VBreadcrumbsItem']
+    VBreadcrumbs: typeof import("vuetify/lib")["VBreadcrumbs"]
+    VBreadcrumbsItem: typeof import("vuetify/lib")["VBreadcrumbsItem"]
     VBtn: typeof import('vuetify/lib')['VBtn']
     VCard: typeof import('vuetify/lib')['VCard']
     VCardActions: typeof import('vuetify/lib')['VCardActions']
@@ -40,7 +43,7 @@ declare module 'vue' {
     VCardTitle: typeof import('vuetify/lib')['VCardTitle']
     VCheckbox: typeof import('vuetify/lib')['VCheckbox']
     VChip: typeof import('vuetify/lib')['VChip']
-    VChipGroup: typeof import("vuetify/lib")["VChipGroup"]
+    VChipGroup: typeof import('vuetify/lib')['VChipGroup']
     VCol: typeof import('vuetify/lib')['VCol']
     VColorPicker: typeof import('vuetify/lib')['VColorPicker']
     VCombobox: typeof import('vuetify/lib')['VCombobox']
@@ -100,7 +103,7 @@ declare module 'vue' {
     VTimePicker: typeof import('vuetify/lib')['VTimePicker']
     VToolbar: typeof import("vuetify/lib")["VToolbar"]
     VToolbarItems: typeof import('vuetify/lib')['VToolbarItems']
-    VToolbarTitle: typeof import('vuetify/lib')['VToolbarTitle']
+    VToolbarTitle: typeof import("vuetify/lib")["VToolbarTitle"]
     VTooltip: typeof import('vuetify/lib')['VTooltip']
   }
 }

src/dispatch/static/dispatch/src/components/DateChipGroupRelative.vue

@@ -0,0 +1,41 @@
+<template>
+    <v-chip-group
+      v-model="selectedDateTime"
+      @change="submit"
+      active-class="red--text text--accent-4"
+      mandatory
+    >
+      <v-chip v-for="option in options" :key="option.value" :value="option.value">
+        {{ option.label }}
+      </v-chip>
+    </v-chip-group>
+  </template>
+
+  <script>
+  export default {
+    name: "DateChipGroupRelative",
+    props: {
+      value: {
+        type: Number,
+        default: 30,
+      },
+    },
+    data() {
+      return {
+        selectedDateTime: this.value,
+        options: [
+          { value: 1, label: "Last 24 hours" },
+          { value: 3, label: "Last 3 days" },
+          { value: 7, label: "Last week" },
+          { value: 30, label: "Last month" },
+          { value: 365, label: "Last year" },
+        ],
+      };
+    },
+    methods: {
+      submit() {
+        this.$emit("input", this.selectedDateTime);
+      },
+    },
+  };
+  </script>

src/dispatch/static/dispatch/src/entity/EntitiesTab.vue

@@ -1,12 +1,14 @@
 <template>
-  <v-container fluid>
-    <v-row v-if="entities.length >= 1">
-      <v-col
-        v-for="entity in entities"
-        :key="entity.id"
-        cols="6"
-      >
-        <entity-card :entity="entity" />
+  <v-container fill-height fluid>
+    <v-row justify="center" align="center" v-if="entities.length >= 1">
+      <date-chip-group-relative
+        class="mt-6"
+        label="Time Range"
+        v-model="selectedDateTime"
+        @input="onSelectedDateTimeChange"
+      />
+      <v-col v-for="entity in entities" :key="entity.id" cols="6">
+        <entity-card :entity="entity" :selectedDateTime="selectedDateTime" />
       </v-col>
     </v-row>
     <v-row v-else>
@@ -20,12 +22,14 @@
 </template>
 
 <script>
-import EntityCard from "@/entity/EntityCard.vue"
+import EntityCard from "@/entity/EntityCard.vue";
+import DateChipGroupRelative from "@/components/DateChipGroupRelative.vue";
 
 export default {
   name: "EntitiesTab",
   components: {
     EntityCard,
+    DateChipGroupRelative,
   },
   props: {
     selected: {
@@ -35,10 +39,7 @@ export default {
   },
   data() {
     return {
-      headers: [
-        { text: "Entity Type", value: "entity_type" },
-        { text: "Entity", value: "entity" },
-      ],
+      selectedDateTime: 30,
     };
   },
   computed: {
@@ -49,7 +50,7 @@ export default {
           const entities = curr.entities.map((entity) => ({
             entity_type: entity.entity_type,
             value: entity.value,
-            id: entity.id
+            id: entity.id,
           }));
           return acc.concat(entities);
         }, []);
@@ -58,5 +59,10 @@ export default {
       }
     },
   },
+  methods: {
+    onSelectedDateTimeChange(newValue) {
+      this.selectedDateTime = newValue;
+    },
+  },
 };
 </script>