From d1031652612b0c916d829941b0688e4196d6adce Mon Sep 17 00:00:00 2001
From: Thomas Chopitea <tomchop@gmail.com>
Date: Wed, 4 Dec 2024 16:08:13 +0100
Subject: [PATCH] Timeline view (#237)

---
 .github/workflows/build.yaml    |  2 +-
 src/components/EditObject.vue   |  3 +-
 src/components/GraphObjects.vue |  1 -
 src/components/Timeline.vue     | 87 +++++++++++++++++++++++++++++++++
 src/views/ObjectDetails.vue     | 19 ++++++-
 src/views/ObservableDetails.vue | 26 +++++++---
 6 files changed, 125 insertions(+), 13 deletions(-)
 create mode 100644 src/components/Timeline.vue

diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml
index 1157598..8452dbd 100644
--- a/.github/workflows/build.yaml
+++ b/.github/workflows/build.yaml
@@ -7,7 +7,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: [14, 16, 18]
+        node: [16, 18, 20, 22]
     name: Node ${{ matrix.node }} sample
     steps:
       - uses: actions/checkout@v4
diff --git a/src/components/EditObject.vue b/src/components/EditObject.vue
index 37164c8..166dac1 100644
--- a/src/components/EditObject.vue
+++ b/src/components/EditObject.vue
@@ -77,7 +77,8 @@ export default {
   methods: {
     saveObject() {
       let patchRequest = {
-        type: this.object.type
+        type: this.object.type,
+        id: this.object.id
       };
       this.editableFields.forEach(field => {
         patchRequest[field.field] = this.localObject[field.field];
diff --git a/src/components/GraphObjects.vue b/src/components/GraphObjects.vue
index d5f29b0..06ca160 100644
--- a/src/components/GraphObjects.vue
+++ b/src/components/GraphObjects.vue
@@ -488,7 +488,6 @@ export default {
     },
 
     getColorForObject(node) {
-      console.log("color", node);
       return (
         this.objectTypes.find(objectType => objectType.type === node.object_type)?.color ||
         DEFAULT_COLOR_MAP[node.root_type]
diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue
new file mode 100644
index 0000000..03b0d4c
--- /dev/null
+++ b/src/components/Timeline.vue
@@ -0,0 +1,87 @@
+<template>
+  <v-card-title>
+    <p>Timeline for {{ object.name }}</p>
+  </v-card-title>
+  <v-card-text class="audit-trail">
+    <v-text-field
+      v-model="search"
+      label="Filter timeline items"
+      prepend-inner-icon="mdi-magnify"
+      variant="outlined"
+      hide-details
+      single-line
+      density="compact"
+    ></v-text-field>
+    <v-data-table
+      :search="search"
+      :headers="headers"
+      :items="timelineData"
+      density="compact"
+      :sort-by="[{ key: 'timestamp', order: 'desc' }]"
+    ></v-data-table>
+  </v-card-text>
+  <v-card-actions>
+    <v-spacer></v-spacer>
+    <v-btn text="Close" @click="isActive.value = false"></v-btn>
+  </v-card-actions>
+</template>
+
+<script>
+import axios from "axios";
+import moment from "moment";
+
+export default {
+  name: "Timeline",
+  props: {
+    object: {
+      type: Object,
+      default: () => {}
+    },
+    isActive: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      timelineData: [],
+      timelineCount: 0,
+      headers: [
+        {
+          title: "Timestamp (UTC)",
+          key: "timestamp",
+          value: item => moment(item.timestamp).format("YYYY-MM-DD HH:mm:ss"),
+          width: "190px",
+          sortable: true
+        },
+        { title: "Actor", value: "actor" },
+        { title: "Action", value: "action" },
+        { title: "Details", key: "details", value: item => JSON.stringify(item.details) }
+      ],
+      typeToEndpointMapping: {
+        entity: "entities",
+        observable: "observables",
+        indicator: "indicators",
+        dfiq: "dfiq"
+      },
+      search: ""
+    };
+  },
+  methods: {
+    getTimeline() {
+      axios
+        .get(`/api/v2/audit/timeline/${this.typeToEndpointMapping[this.object.root_type]}/${this.object.id}`)
+        .then(response => {
+          this.timelineData = response.data[0];
+          this.timelineCount = response.data[1];
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    }
+  },
+  mounted() {
+    this.getTimeline();
+  }
+};
+</script>
diff --git a/src/views/ObjectDetails.vue b/src/views/ObjectDetails.vue
index 5d9bfe0..d7e9331 100644
--- a/src/views/ObjectDetails.vue
+++ b/src/views/ObjectDetails.vue
@@ -62,6 +62,20 @@
         <v-card class="ma-2" variant="flat">
           <v-card-title class="d-flex"
             ><span class="me-auto"> Info</span>
+
+            <v-dialog>
+              <template v-slot:activator="{ props }">
+                <v-btn class="me-2" variant="tonal" color="primary" size="small" v-bind="props" append-icon="mdi-clock">
+                  timeline
+                </v-btn>
+              </template>
+              <template v-slot:default="{ isActive }">
+                <v-sheet>
+                  <timeline v-if="object" :object="object" :is-active="isActive" />
+                </v-sheet>
+              </template>
+            </v-dialog>
+
             <v-dialog :width="editWidth" :fullscreen="fullScreenEdit">
               <template v-slot:activator="{ props }">
                 <v-btn class="me-2" variant="tonal" color="primary" size="small" v-bind="props" append-icon="mdi-pencil"
@@ -291,6 +305,7 @@ import { INDICATOR_TYPES } from "@/definitions/indicatorDefinitions.js";
 import { DFIQ_TYPES } from "@/definitions/dfiqDefinitions.js";
 
 import moment from "moment";
+import Timeline from "@/components/Timeline.vue";
 </script>
 
 <script lang="ts">
@@ -314,7 +329,8 @@ export default {
     YetiMarkdown,
     YetiDFIQApproachTemplate,
     DFIQTree,
-    GraphObjects
+    GraphObjects,
+    Timeline
   },
   data() {
     return {
@@ -348,7 +364,6 @@ export default {
       window.dispatchEvent(refreshGraphViewEvent);
     },
     getObjectDetails() {
-      console.log(`/api/v2/${this.typeToEndpointMapping[this.objectType]}/${this.id}`);
       axios
         .get(`/api/v2/${this.typeToEndpointMapping[this.objectType]}/${this.id}`)
         .then(response => {
diff --git a/src/views/ObservableDetails.vue b/src/views/ObservableDetails.vue
index 458af28..5ca7504 100644
--- a/src/views/ObservableDetails.vue
+++ b/src/views/ObservableDetails.vue
@@ -62,6 +62,18 @@
       </v-col>
       <v-col cols="4">
         <v-sheet class="ma-2 d-flex justify-end bg-background" variant="flat">
+          <v-dialog>
+            <template v-slot:activator="{ props }">
+              <v-btn class="me-2" variant="tonal" color="primary" size="small" v-bind="props" append-icon="mdi-clock">
+                timeline
+              </v-btn>
+            </template>
+            <template v-slot:default="{ isActive }">
+              <v-sheet>
+                <timeline v-if="observable" :object="observable" :is-active="isActive" />
+              </v-sheet>
+            </template>
+          </v-dialog>
           <v-dialog :width="editWidth" :fullscreen="fullScreenEdit">
             <template v-slot:activator="{ props }">
               <v-btn class="me-2" variant="tonal" color="primary" size="small" v-bind="props" append-icon="mdi-pencil"
@@ -163,8 +175,7 @@
             >
             <v-tab value="graph" @click="emitRefreshGraph"
               ><v-icon @click="emitRefreshGraph" size="x-large" start>mdi-graph</v-icon>Graph (Beta)
-              </v-tab
-            >
+            </v-tab>
             <v-tab value="related-observables"
               ><v-icon size="x-large" start>mdi-graph</v-icon>Related observables
               <v-chip class="ml-3" density="comfortable">{{ totalRelatedObservables }}</v-chip></v-tab
@@ -196,10 +207,7 @@
               <div v-if="observable?.context.length == 0"><em>No context for observable</em></div>
             </v-window-item>
             <v-window-item value="graph">
-              <graph-objects
-                :id="id"
-                source-type="observables"
-              />
+              <graph-objects :id="id" source-type="observables" />
             </v-window-item>
             <v-window-item value="related-observables" eager>
               <direct-neighbors
@@ -261,6 +269,7 @@ import { ENTITY_TYPES } from "@/definitions/entityDefinitions.js";
 import { INDICATOR_TYPES } from "@/definitions/indicatorDefinitions.js";
 import { OBSERVABLE_TYPES } from "@/definitions/observableDefinitions.js";
 import moment from "moment";
+import Timeline from "@/components/Timeline.vue";
 </script>
 
 <script lang="ts">
@@ -277,7 +286,8 @@ export default {
     EditObject,
     LinkObject,
     LinkObservables,
-    GraphObjects
+    GraphObjects,
+    Timeline
   },
   data() {
     return {
@@ -299,7 +309,7 @@ export default {
   methods: {
     emitRefreshGraph() {
       console.log("Emitting refreshGraph");
-      let refreshGraphViewEvent = new Event('refreshGraphView');
+      let refreshGraphViewEvent = new Event("refreshGraphView");
       window.dispatchEvent(refreshGraphViewEvent);
     },
     copyText(text) {