Adds Case Page, Signal Graph, and supporting components

src/dispatch/static/dispatch/src/case/CaseAttributesDrawer.vue

@@ -0,0 +1,48 @@
+<template>
+  <v-navigation-drawer location="right" width="300">
+    <v-toolbar density="compact" color="transparent">
+      <v-spacer></v-spacer>
+      <!----<avatar-stack v-model="participants" />-->
+      <v-btn icon>
+        <v-icon>mdi-dots-vertical</v-icon>
+      </v-btn>
+      <case-toggle-visibility v-model="visibility" />
+    </v-toolbar>
+  </v-navigation-drawer>
+</template>
+<script>
+import { computed } from "vue"
+import AvatarStack from "@/components/AvatarStack.vue"
+import CaseToggleVisibility from "@/case/CaseToggleVisibility.vue"
+
+export default {
+  name: "CaseAttributesDrawer",
+  props: {
+    modelValue: {
+      type: Object,
+      default: () => ({}),
+      required: true,
+    },
+  },
+  components: {
+    AvatarStack,
+    CaseToggleVisibility,
+  },
+  setup(props, { emit }) {
+    const participants = computed({
+      get: () => props.modelValue.participants,
+      set: (value) => emit("update:modelValue", value),
+    })
+
+    const visibility = computed({
+      get: () => props.modelValue.visibility,
+      set: (value) => emit("update:modelValue", value),
+    })
+
+    return {
+      participants,
+      visibility,
+    }
+  },
+}
+</script>

src/dispatch/static/dispatch/src/case/CaseSignalInstanceTab.vue

@@ -0,0 +1,85 @@
+<template>
+  <v-data-table
+    density="compact"
+    :headers="headers"
+    :loading="internalLoading"
+    :items="signalInstances"
+    :items-per-page="25"
+    :footer-props="{
+      'items-per-page-options': [25, 50, 100],
+    }"
+  >
+    <template #item.signal="{ value }">
+      <signal-popover :value="value" />
+    </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 }">
+      <v-btn icon variant="text" @click="showRun({ type: 'signal', data: item })">
+        <v-icon>mdi-play-circle-outline</v-icon>
+      </v-btn>
+      <workflow-run-modal />
+      <raw-signal-viewer :value="item" />
+    </template>
+  </v-data-table>
+</template>
+
+<script>
+import { ref, toRefs, watch } from "vue"
+import { formatRelativeDate, formatDate } from "@/filters"
+import SignalPopover from "@/signal/SignalPopover.vue"
+import RawSignalViewer from "@/signal/RawSignalViewer.vue"
+import WorkflowRunModal from "@/workflow/RunModal.vue"
+
+export default {
+  name: "SignalInstanceTab",
+  components: {
+    SignalPopover,
+    RawSignalViewer,
+    WorkflowRunModal,
+  },
+  props: {
+    modelValue: {
+      type: Array,
+      default: () => [],
+      required: true,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+      required: true,
+    },
+  },
+  setup(props) {
+    const { modelValue, loading } = toRefs(props)
+    const signalInstances = ref(props.modelValue)
+    const internalLoading = ref(props.loading)
+
+    watch(modelValue, (newValue) => {
+      signalInstances.value = newValue
+    })
+
+    watch(loading, (newValue) => {
+      internalLoading.value = newValue
+    })
+
+    const headers = ref([
+      { title: "Signal", key: "signal", sortable: false },
+      { title: "Created At", key: "created_at" },
+      { title: "", key: "data-table-actions", sortable: false, align: "end" },
+    ])
+
+    function showRun(payload) {
+      store.dispatch("workflow/showRun", payload)
+    }
+
+    return { formatRelativeDate, formatDate, signalInstances, headers, showRun, internalLoading }
+  },
+}
+</script>

src/dispatch/static/dispatch/src/case/CaseStatusSelectGroup.vue

@@ -0,0 +1,179 @@
+<template>
+  <v-item-group mandatory>
+    <v-dialog v-model="dialogVisable" max-width="600">
+      <v-card>
+        <v-card-title>Update Case Status</v-card-title>
+        <v-card-text
+          >Are you sure you want to change the case status from {{ _case.status }} to
+          {{ selectedStatus }}</v-card-text
+        >
+
+        <v-btn
+          class="ml-6 mb-4"
+          small
+          color="info"
+          elevation="1"
+          @click="changeStatus(selectedStatus)"
+        >
+          Submit
+        </v-btn>
+      </v-card>
+    </v-dialog>
+
+    <v-container fluid>
+      <v-row no-gutters>
+        <v-col v-for="status in statuses" :key="status.name" cols="6" md="2">
+          <v-item v-slot="{ active, toggle }">
+            <div class="overlap-card" :class="status.hoverClass" @click="openDialog(status.name)">
+              <v-tooltip bottom>
+                <template v-slot:activator="{ on, attrs }">
+                  <v-sheet outlined color="grey lighten-1" :class="status.sheetClass">
+                    <v-card
+                      class="d-flex align-center"
+                      :class="status.sheetClass"
+                      height="30"
+                      width="100%"
+                      @click="toggle"
+                      flat
+                      color="grey lighten-4"
+                      v-bind="attrs"
+                      v-on="on"
+                    >
+                      <v-scroll-y-transition>
+                        <div v-if="isActiveStatus(status.name)" class="flex-grow-1 text-center">
+                          <v-badge
+                            :color="status.color"
+                            bordered
+                            dot
+                            left
+                            offset-x="-10"
+                            offset-y="0"
+                          >
+                          </v-badge
+                          >{{ status.label }}
+                        </div>
+
+                        <div v-else class="flex-grow-1 text-center text--disabled">
+                          {{ status.label }}
+                        </div>
+                        <span>{{
+                          status.tooltip ? status.tooltip : `Not yet ${status.label.toLowerCase()}`
+                        }}</span>
+                      </v-scroll-y-transition>
+                    </v-card>
+                  </v-sheet>
+                </template>
+                <span>{{
+                  status.tooltip ? status.tooltip : `Not yet ${status.label.toLowerCase()}`
+                }}</span>
+              </v-tooltip>
+            </div>
+          </v-item>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-item-group>
+</template>
+
+<script>
+import { mapActions } from "vuex"
+export default {
+  name: "CaseStatusSelectGroup",
+  props: {
+    _case: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      selectedStatus: null,
+      dialogVisable: false,
+    }
+  },
+  computed: {
+    statuses() {
+      return [
+        {
+          name: "New",
+          label: "New",
+          color: "red",
+          hoverClass: "hover-card-three",
+          sheetClass: "rounded-l-xl arrow",
+          tooltip: this._case.created_at,
+        },
+        {
+          name: "Triage",
+          label: "Triaged",
+          color: "red",
+          hoverClass: "hover-card-two",
+          sheetClass: "arrow",
+          tooltip: this._case.triage_at,
+        },
+        {
+          name: "Closed",
+          label: "Resolved",
+          color: "green",
+          hoverClass: "hover-card",
+          sheetClass: "arrow",
+          tooltip: this._case.closed_at,
+        },
+        {
+          name: "Escalated",
+          label: "Escalated",
+          color: "red",
+          hoverClass: "",
+          sheetClass: "rounded-r-xl",
+          tooltip: this._case.escalated_at,
+        },
+      ]
+    },
+  },
+  methods: {
+    ...mapActions("case_management", ["save_page"]),
+    changeStatus(newStatus) {
+      this._case.status = newStatus
+      this.save_page()
+      this.dialogVisable = false
+      this.selectedStatus = null
+    },
+    openDialog(newStatus) {
+      this.selectedStatus = newStatus
+      this.dialogVisable = true
+    },
+    isActiveStatus(status) {
+      return this._case.status === status
+    },
+  },
+}
+</script>
+
+<style scoped>
+.arrow {
+  clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%);
+}
+.overlap-card {
+  margin-left: -15px;
+  border-radius: 75%;
+  box-shadow: 0 1px 6px 0px rgba(0, 0, 0, 0.1);
+}
+.overlap-card:first-child {
+  margin-left: 0;
+}
+.overlap-card:last-child {
+  margin-right: -15px;
+}
+.hover-card {
+  position: relative;
+  z-index: 1;
+}
+.hover-card-two {
+  position: relative;
+  z-index: 2;
+}
+.hover-card-three {
+  position: relative;
+  z-index: 3;
+}
+</style>

src/dispatch/static/dispatch/src/case/CaseStatusToggle.vue

@@ -0,0 +1,34 @@
+<template>
+  <v-btn-toggle v-model="toggleExclusive">
+    <v-btn class="arrow"> New </v-btn>
+    <v-btn> Triaged </v-btn>
+    <v-btn> Resolved </v-btn>
+    <v-btn> Escalated </v-btn>
+  </v-btn-toggle>
+</template>
+
+<script>
+import { ref } from "vue"
+
+export default {
+  name: "CaseToggleButton",
+  props: {
+    modelValue: {
+      type: String,
+      default: () => "New",
+      required: true,
+    },
+  },
+  setup(props, { emit }) {
+    const toggleExclusive = ref(props.modelValue)
+
+    return { toggleExclusive }
+  },
+}
+</script>
+
+<style scoped>
+.arrow {
+  clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%);
+}
+</style>