From 0a9981980b69e0acc156e9be9757d68e18f7b632 Mon Sep 17 00:00:00 2001
From: Thomas Chopitea <tomchop@gmail.com>
Date: Fri, 2 Feb 2024 11:03:36 +0100
Subject: [PATCH] Feat: Support DFIQ objects (#140)

Corresponding PR in yeti has been merged
---
 docker/dev/Dockerfile                       |   2 -
 src/components/EditDFIQObject.vue           |  99 ++++++++++
 src/components/EditObject.vue               |   7 +-
 src/components/ObjectList.vue               |  14 +-
 src/components/RelatedObjects.vue           |  12 +-
 src/components/YetiDFIQApproachTemplate.vue | 207 ++++++++++++++++++++
 src/definitions/dfiqDefinitions.js          |  63 ++++++
 src/layouts/default/AppBar.vue              |   1 +
 src/plugins/vuetify.ts                      |  22 ++-
 src/router/index.ts                         |  90 ++++++---
 src/views/DFIQSearch.vue                    | 128 ++++++++++++
 src/views/ObjectDetails.vue                 | 125 ++++++++----
 12 files changed, 679 insertions(+), 91 deletions(-)
 create mode 100644 src/components/EditDFIQObject.vue
 create mode 100644 src/components/YetiDFIQApproachTemplate.vue
 create mode 100644 src/definitions/dfiqDefinitions.js
 create mode 100644 src/views/DFIQSearch.vue

diff --git a/docker/dev/Dockerfile b/docker/dev/Dockerfile
index e6a7d38d..71f4add6 100644
--- a/docker/dev/Dockerfile
+++ b/docker/dev/Dockerfile
@@ -4,8 +4,6 @@ RUN apt update && apt install \
     python3 \
     git
 
-RUN npm install -g n && n 16
-
 ADD . /app
 WORKDIR /app
 
diff --git a/src/components/EditDFIQObject.vue b/src/components/EditDFIQObject.vue
new file mode 100644
index 00000000..f21d3997
--- /dev/null
+++ b/src/components/EditDFIQObject.vue
@@ -0,0 +1,99 @@
+<template>
+  <v-card>
+    <v-card-title>{{ object.name || object.value }}</v-card-title>
+    <v-card-subtitle>Editing DFIQ {{ object.type }}</v-card-subtitle>
+    <v-card-text>
+      <v-textarea class="yeti-code" label="DFIQ Yaml" auto-grow v-model="object.dfiq_yaml"></v-textarea>
+    </v-card-text>
+
+    <v-card-actions>
+      <v-btn text="Toggle full screen" color="primary" @click="toggleFullScreen"></v-btn>
+      <v-spacer></v-spacer>
+      <v-btn text="Cancel" color="cancel" @click="isActive.value = false"></v-btn>
+      <v-btn text="Save" color="primary" @click="saveDFIQObject" variant="tonal"></v-btn>
+    </v-card-actions>
+    <v-alert v-if="errors.length > 0" type="error">
+      Error saving DFIQ {{ object.type }}:
+      <ul>
+        <li v-for="error in errors">
+          <strong>{{ error.field }}</strong
+          >: {{ error.message }}
+        </li>
+      </ul>
+    </v-alert>
+  </v-card>
+</template>
+
+<script lang="ts" setup>
+import axios from "axios";
+
+import ObjectFields from "@/components/ObjectFields.vue";
+</script>
+
+<script lang="ts">
+export default {
+  components: { ObjectFields },
+  props: {
+    object: {
+      type: Object,
+      default: () => {}
+    },
+    isActive: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      localObject: { ...this.object },
+      errors: [],
+      fullScreen: false,
+      typeToEndpointMapping: {
+        entity: "entities",
+        observable: "observables",
+        indicator: "indicators",
+        dfiq: "dfiq"
+      }
+    };
+  },
+  mounted() {},
+  methods: {
+    saveDFIQObject() {
+      let patchRequest = {
+        dfiq_type: this.object.type,
+        dfiq_yaml: this.object.dfiq_yaml
+      };
+
+      axios
+        .patch(`/api/v2/dfiq/${this.object.id}`, patchRequest)
+        .then(response => {
+          this.$eventBus.emit("displayMessage", {
+            message: "DFIQ object succesfully updated",
+            status: "success"
+          });
+          this.$emit("success", response.data);
+          this.isActive.value = false;
+        })
+        .catch(error => {
+          console.log(error);
+          this.errors = error.response.data.detail
+            .filter(detail => detail.loc[1] !== "type")
+            .map(detail => {
+              return { field: detail.loc[1], message: detail.msg };
+            });
+        })
+        .finally();
+    },
+    toggleFullScreen() {
+      this.fullScreen = !this.fullScreen;
+      this.$emit("toggle-fullscreen", this.fullScreen);
+    }
+  }
+};
+</script>
+
+<style>
+.yeti-code textarea {
+  font-family: monospace;
+}
+</style>
diff --git a/src/components/EditObject.vue b/src/components/EditObject.vue
index 2c789e0e..0d5ba84b 100644
--- a/src/components/EditObject.vue
+++ b/src/components/EditObject.vue
@@ -30,6 +30,7 @@ import axios from "axios";
 import { ENTITY_TYPES } from "@/definitions/entityDefinitions.js";
 import { INDICATOR_TYPES } from "@/definitions/indicatorDefinitions.js";
 import { OBSERVABLE_TYPES } from "@/definitions/observableDefinitions.js";
+import { DFIQ_TYPES } from "@/definitions/dfiqDefinitions.js";
 import ObjectFields from "@/components/ObjectFields.vue";
 import { objectTypeAnnotation } from "@babel/types";
 </script>
@@ -55,7 +56,8 @@ export default {
       typeToEndpointMapping: {
         entity: "entities",
         observable: "observables",
-        indicator: "indicators"
+        indicator: "indicators",
+        dfiq: "dfiq"
       }
     };
   },
@@ -101,7 +103,8 @@ export default {
       return (
         ENTITY_TYPES.find(t => t.type === this.object.type) ||
         INDICATOR_TYPES.find(t => t.type === this.object.type) ||
-        OBSERVABLE_TYPES.find(t => t.type === this.object.type)
+        OBSERVABLE_TYPES.find(t => t.type === this.object.type) ||
+        DFIQ_TYPES.find(t => t.type === this.object.type)
       );
     },
     editableFields() {
diff --git a/src/components/ObjectList.vue b/src/components/ObjectList.vue
index 4452f6a0..c4e877fb 100644
--- a/src/components/ObjectList.vue
+++ b/src/components/ObjectList.vue
@@ -16,13 +16,7 @@
       <template v-slot:item.name="{ item }">
         <span class="short-links">
           <v-tooltip activator="parent" location="top" :open-delay="200">{{ item.name }}</v-tooltip>
-          <router-link
-            :to="{
-              name: searchType === 'entities' ? 'EntityDetails' : 'IndicatorDetails',
-              params: { id: item.id }
-            }"
-            >{{ item.name }}</router-link
-          >
+          <router-link :to="`${searchType}/${item.id}`">{{ item.name }}</router-link>
         </span>
       </template>
       <template v-slot:item.tags="{ item }">
@@ -37,6 +31,9 @@
       <template v-slot:item.relevant_tags="{ item }">
         <v-chip v-for="name in item.relevant_tags" :text="name" class="mr-1" size="small"></v-chip>
       </template>
+      <template v-slot:item.dfiq_tags="{ item }">
+        <v-chip v-for="name in item.dfiq_tags" :text="name" class="mr-1" size="small"></v-chip>
+      </template>
       <template v-slot:item.aliases="{ item }">
         <v-chip v-for="value in item.aliases" :text="value" class="mr-1" size="small"></v-chip>
       </template>
@@ -54,6 +51,9 @@
       <template v-slot:item.created="{ item }">
         {{ moment(item.created).format("YYYY-MM-DD HH:mm:ss") }}
       </template>
+      <template v-slot:item.modified="{ item }">
+        {{ moment(item.modified).format("YYYY-MM-DD HH:mm:ss") }}
+      </template>
       <template v-slot:item.last_seen="{ item }">
         {{ moment(item.last_seen).format("YYYY-MM-DD HH:mm:ss") }}
       </template>
diff --git a/src/components/RelatedObjects.vue b/src/components/RelatedObjects.vue
index e3aa04af..31c7daa4 100644
--- a/src/components/RelatedObjects.vue
+++ b/src/components/RelatedObjects.vue
@@ -57,6 +57,15 @@
               </router-link>
             </span>
           </span>
+          <span v-else-if="node.root_type === 'dfiq'" class="short-links">
+            <v-icon :icon="getIconForType(node.type)" start size="small"></v-icon>
+            <span>
+              <v-tooltip activator="parent" location="top" :open-delay="200">{{ node.name }}</v-tooltip>
+              <router-link :to="{ name: 'DFIQDetails', params: { id: node.id } }">
+                {{ node.name }}
+              </router-link>
+            </span>
+          </span>
           <span v-else>
             <v-chip> {{ node.name }}</v-chip>
           </span>
@@ -97,6 +106,7 @@ import axios from "axios";
 
 import { ENTITY_TYPES } from "@/definitions/entityDefinitions.js";
 import { INDICATOR_TYPES } from "@/definitions/indicatorDefinitions.js";
+import { DFIQ_TYPES } from "@/definitions/dfiqDefinitions.js";
 import EditLink from "@/components/EditLink.vue";
 import YetiMarkdown from "@/components/YetiMarkdown.vue";
 </script>
@@ -135,7 +145,7 @@ export default {
       perPage: 20,
       total: 0,
       loading: false,
-      objectTypes: ENTITY_TYPES.concat(INDICATOR_TYPES),
+      objectTypes: ENTITY_TYPES.concat(INDICATOR_TYPES).concat(DFIQ_TYPES),
       showEditLink: false
     };
   },
diff --git a/src/components/YetiDFIQApproachTemplate.vue b/src/components/YetiDFIQApproachTemplate.vue
new file mode 100644
index 00000000..6887bcf9
--- /dev/null
+++ b/src/components/YetiDFIQApproachTemplate.vue
@@ -0,0 +1,207 @@
+<template>
+  <v-sheet>
+    <div class="text-h6">{{ description.summary }}</div>
+    <div class="yeti-markdown" v-html="markdownifyText(description.details)"></div>
+    <div class="mt-5">
+      <div class="font-weight-bold mb-2">References:</div>
+      <ul class="ml-5">
+        <li class="mb-2" v-for="ref in description.references"><span v-html="markdownifyText(ref)"></span></li>
+      </ul>
+      <ul class="ml-5" v-if="description.references_internal?.length > 0">
+        <li class="mb-2" v-for="ref in description.references_internal">
+          <span v-html="markdownifyText(ref)"></span>
+        </li>
+      </ul>
+    </div>
+  </v-sheet>
+
+  <v-divider class="my-7"></v-divider>
+
+  <v-card class="dfiq-covered ma-4">
+    <v-card-title>Covered</v-card-title>
+    <v-card-text>
+      <ul>
+        <li class="mb-2 ml-5" v-for="ref in view.notes.covered"><span v-html="markdownifyText(ref)"></span></li>
+      </ul>
+    </v-card-text>
+  </v-card>
+
+  <v-card class="dfiq-not-covered ma-4">
+    <v-card-title>Not covered</v-card-title>
+    <v-card-text>
+      <ul>
+        <li class="mb-2 ml-5" v-for="ref in view.notes.not_covered"><span v-html="markdownifyText(ref)"></span></li>
+      </ul>
+    </v-card-text>
+  </v-card>
+
+  <v-divider class="my-7"></v-divider>
+
+  <v-sheet>
+    <div class="text-h6">Data</div>
+    <v-table class="mt-3">
+      <tbody>
+        <tr v-for="ref in view.data">
+          <td>
+            <v-chip class="mr-2" density="comfortable" variant="tonal" color="primary" rounded>{{ ref.type }}</v-chip>
+          </td>
+          <td>{{ ref.value }}</td>
+        </tr>
+      </tbody>
+    </v-table>
+  </v-sheet>
+
+  <v-divider class="my-7"></v-divider>
+
+  <v-card>
+    <v-tabs v-model="dfiqTab">
+      <v-tab v-for="proc in view.processors" :value="proc.name">{{ proc.name }}</v-tab>
+    </v-tabs>
+
+    <v-card-text>
+      <v-window v-model="dfiqTab">
+        <v-window-item v-for="proc in view.processors" :value="proc.name">
+          <div class="text pb-4">
+            Recommended CLI options:
+            <code class="dfiq-option bg-red-lighten-5 pa-1 ms-2" v-for="option in proc.options"
+              >--{{ option.type }} {{ option.value }}</code
+            >
+          </div>
+          <div class="text-h6 mb-2">Analysis options</div>
+          <v-expansion-panels multiple>
+            <v-expansion-panel v-for="opt in proc.analysis" :title="opt.name">
+              <v-expansion-panel-text>
+                <ol class="dfiq-step-list">
+                  <li v-for="step in opt.steps" class="ml-2">
+                    <div class="dfiq-step-description d-flex align-center">
+                      <div>{{ step.description }}</div>
+                      <div>
+                        <v-chip class="ml-3" density="comfortable" variant="tonal" color="primary" rounded>{{
+                          step.type
+                        }}</v-chip>
+                      </div>
+                    </div>
+                    <div class="dfiq-step-value my-4 mx-2 pa-3 rounded">
+                      <code>{{ step.value }}</code>
+                    </div>
+                  </li>
+                </ol>
+              </v-expansion-panel-text>
+            </v-expansion-panel>
+          </v-expansion-panels>
+        </v-window-item>
+      </v-window>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script lang="ts" setup>
+import DOMPurify from "dompurify";
+import { marked } from "marked";
+</script>
+
+<script lang="ts">
+export default {
+  props: {
+    description: {
+      type: Object,
+      required: true
+    },
+    view: {
+      type: Object,
+      required: true
+    },
+    dfiqType: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      dfiqTab: "one"
+    };
+  },
+  methods: {
+    markdownifyText(text) {
+      return DOMPurify.sanitize(marked(text));
+    }
+  },
+  computed: {
+    viewCoverageMarkdown() {
+      let text = `### Notes \n\n`;
+      if (this.view.notes.covered.length > 0) {
+        text += "\n\n**Covered**\n\n";
+        this.view.notes.covered.forEach(ref => {
+          text += `- ${ref}\n`;
+        });
+      }
+
+      if (this.view.notes.not_covered.length > 0) {
+        text += "\n\n**Not Covered**\n\n";
+        this.view.notes.not_covered.forEach(ref => {
+          text += `- ${ref}\n`;
+        });
+      }
+
+      return DOMPurify.sanitize(marked(text));
+    },
+    viewDataMarkdown() {
+      let text = `### Data \n\n`;
+      if (this.view.data.length > 0) {
+        text += "\n\n**Data**\n\n";
+        this.view.data.forEach(ref => {
+          text += `- ${ref.type} : ${ref.value}\n`;
+        });
+      }
+
+      return DOMPurify.sanitize(marked(text));
+    }
+  }
+};
+</script>
+
+<style>
+.yeti-markdown h1,
+.yeti-markdown h2,
+.yeti-markdown h3 {
+  margin-bottom: 1.5rem;
+  margin-top: 1rem;
+}
+
+.yeti-markdown p {
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.yeti-markdown li {
+  margin-left: 2rem;
+  margin-bottom: 0.5rem;
+}
+
+.yeti-markdown pre {
+  font-family: Roboto Mono, monospace;
+  border: 1px solid #e0e0e0;
+  margin: 0.5rem 0 0.5rem 0;
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+}
+
+.yeti-markdown p {
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.dfiq-step-value {
+  border: 1px solid #e0e0e0;
+}
+
+.dfiq-covered {
+  border: 2px solid rgb(var(--v-theme-success));
+  background: rgba(0, 160, 66, 0.1);
+}
+
+.dfiq-not-covered {
+  border: 2px solid rgb(var(--v-theme-error));
+  background: rgba(155, 0, 0, 0.1);
+}
+</style>
diff --git a/src/definitions/dfiqDefinitions.js b/src/definitions/dfiqDefinitions.js
new file mode 100644
index 00000000..fc811d58
--- /dev/null
+++ b/src/definitions/dfiqDefinitions.js
@@ -0,0 +1,63 @@
+export const DFIQ_TYPES = [
+  {
+    name: "Scenario",
+    type: "scenario",
+    fields: [
+      { field: "dfiq_id", type: "text", label: "DFIQ ID", displayList: true, editable: true, width: "120px" },
+      { field: "name", type: "text", label: "Name", displayList: true, editable: true },
+      { field: "dfiq_version", type: "text", label: "DFIQ Version", displayList: false, editable: true },
+      { field: "dfiq_tags", type: "list", label: "DFIQ tags", displayList: true, editable: true },
+      { field: "contributors", type: "list", label: "Contributors", displayList: false, editable: true },
+      { field: "description", type: "longtext", label: "Description", displayList: false, editable: true },
+      { field: "modified", type: "date", label: "Modified on", displayList: false, editable: false },
+      { field: "created", type: "date", label: "Created on", displayList: true, editable: false, width: "200px" }
+    ],
+    icon: "mdi-script"
+  },
+  {
+    name: "Facet",
+    type: "facet",
+    fields: [
+      { field: "dfiq_id", type: "text", label: "DFIQ ID", displayList: true, editable: true, width: "120px" },
+      { field: "name", type: "text", label: "Name", displayList: true, editable: true },
+      { field: "dfiq_version", type: "text", label: "DFIQ Version", displayList: false, editable: true },
+      { field: "dfiq_tags", type: "list", label: "DFIQ tags", displayList: true, editable: true },
+      { field: "parent_ids", type: "list", label: "Parent IDs", displayList: true, editable: true },
+      { field: "description", type: "longtext", label: "Description", displayList: false, editable: true },
+      { field: "contributors", type: "list", label: "Contributors", displayList: false, editable: true },
+      { field: "modified", type: "date", label: "Modified on", displayList: false, editable: false },
+      { field: "created", type: "date", label: "Created on", displayList: true, editable: false, width: "200px" }
+    ],
+    icon: "mdi-magnify-scan"
+  },
+  {
+    name: "Question",
+    type: "question",
+    fields: [
+      { field: "dfiq_id", type: "text", label: "DFIQ ID", displayList: true, editable: true, width: "120px" },
+      { field: "name", type: "text", label: "Name", displayList: true, editable: true },
+      { field: "dfiq_version", type: "text", label: "DFIQ Version", displayList: false, editable: true },
+      { field: "dfiq_tags", type: "list", label: "DFIQ tags", displayList: true, editable: true },
+      { field: "parent_ids", type: "list", label: "Parent IDs", displayList: true, editable: true },
+      { field: "contributors", type: "list", label: "Contributors", displayList: false, editable: true },
+      { field: "description", type: "longtext", label: "Description", displayList: false, editable: true },
+      { field: "modified", type: "date", label: "Modified on", displayList: false, editable: false },
+      { field: "created", type: "date", label: "Created on", displayList: true, editable: false, width: "200px" }
+    ],
+    icon: "mdi-help"
+  },
+  {
+    name: "Approach",
+    type: "approach",
+    fields: [
+      { field: "dfiq_id", type: "text", label: "DFIQ ID", displayList: true, editable: true, width: "120px" },
+      { field: "name", type: "text", label: "Name", displayList: true, editable: true },
+      { field: "dfiq_version", type: "text", label: "DFIQ Version", displayList: false, editable: true },
+      { field: "dfiq_tags", type: "list", label: "DFIQ tags", displayList: true, editable: true },
+      { field: "contributors", type: "list", label: "Contributors", displayList: false, editable: true },
+      { field: "modified", type: "date", label: "Modified on", displayList: false, editable: false },
+      { field: "created", type: "date", label: "Created on", displayList: true, editable: false, width: "200px" }
+    ],
+    icon: "mdi-tools"
+  }
+];
diff --git a/src/layouts/default/AppBar.vue b/src/layouts/default/AppBar.vue
index f39e8ff7..3a98b05a 100644
--- a/src/layouts/default/AppBar.vue
+++ b/src/layouts/default/AppBar.vue
@@ -10,6 +10,7 @@
       <v-btn :to="{ path: '/observables' }">Observables</v-btn>
       <v-btn :to="{ path: '/entities' }">Entities</v-btn>
       <v-btn :to="{ path: '/indicators' }">Indicators</v-btn>
+      <v-btn :to="{ path: '/dfiq' }">DFIQ</v-btn>
       <v-btn>
         Automation
         <v-menu activator="parent">
diff --git a/src/plugins/vuetify.ts b/src/plugins/vuetify.ts
index 7feb49c9..65133fc1 100644
--- a/src/plugins/vuetify.ts
+++ b/src/plugins/vuetify.ts
@@ -9,10 +9,10 @@ import "@mdi/font/css/materialdesignicons.css";
 import "vuetify/styles";
 import { md3 } from "vuetify/blueprints";
 import { aliases, mdi } from "vuetify/iconsets/mdi";
-import colors from 'vuetify/util/colors'
+import colors from "vuetify/util/colors";
 
 // Composables
-import { createVuetify , type ThemeDefinition} from "vuetify";
+import { createVuetify, type ThemeDefinition } from "vuetify";
 import { convertCompilerOptionsFromJson } from "typescript";
 
 const yetiDarkTheme: ThemeDefinition = {
@@ -30,8 +30,8 @@ const yetiDarkTheme: ThemeDefinition = {
     error: colors.red.lighten3,
     warning: colors.orange.lighten3,
     // custom
-    "app-bar-color": '#212121'
-  },
+    "app-bar-color": "#212121"
+  }
 };
 
 const yetiLightTheme: ThemeDefinition = {
@@ -40,27 +40,28 @@ const yetiLightTheme: ThemeDefinition = {
     // background: '#FFFFFF',
     surface: colors.grey.lighten5,
     primary: colors.blue.darken1,
-    'primary-darken-1': colors.blue.darken2,
+    "primary-darken-1": colors.blue.darken2,
     // secondary: '#03DAC6',
     // 'secondary-darken-1': '#018786',
     // error: '#B00020',
     // info: '#2196F3',
     // success: '#4CAF50',
+    error: colors.red.lighten3,
     // warning: '#FB8C00',
     // custom
     cancel: colors.red.darken1,
-    "app-bar-color": '#212121'
-  },
+    "app-bar-color": "#212121"
+  }
 };
 
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
 export default createVuetify({
   defaults: {
     global: {
-      ripple: false,
+      ripple: false
     },
     VApp: {
-     style: 'font-family: "Roboto", sans-serif;'
+      style: 'font-family: "Roboto", sans-serif;'
     },
     VCombobox: {
       variant: "outlined"
@@ -97,7 +98,8 @@ export default createVuetify({
   theme: {
     defaultTheme: "yetiDarkTheme",
     themes: {
-      yetiDarkTheme, yetiLightTheme
+      yetiDarkTheme,
+      yetiLightTheme
     }
   }
 });
diff --git a/src/router/index.ts b/src/router/index.ts
index 481eace3..17dec4fd 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,11 +1,30 @@
 // Composables
 import { createRouter, createWebHistory } from "vue-router";
 
+import Default from "@/layouts/default/Default.vue";
+import Login from "@/views/Login.vue";
+
+import ObservableMatch from "@/views/ObservableMatch.vue";
+import ObservableSearch from "@/views/ObservableSearch.vue";
+import ObservableDetails from "@/views/ObservableDetails.vue";
+import ObjectDetails from "@/views/ObjectDetails.vue";
+import EntitySearch from "@/views/EntitySearch.vue";
+import IndicatorSearch from "@/views/IndicatorSearch.vue";
+import DFIQSearch from "@/views/DFIQSearch.vue";
+import AnalyticsList from "@/views/AnalyticsList.vue";
+import ExportList from "@/views/ExportList.vue";
+import ExportTemplates from "@/views/ExportTemplates.vue";
+import TaskList from "@/components/TaskList.vue";
+import UserProfile from "@/views/UserProfile.vue";
+import UserAdmin from "@/views/UserAdmin.vue";
+import TagsAdmin from "@/views/TagsAdmin.vue";
+import System from "@/views/System.vue";
+
 const routes = [
   {
     path: "/login",
     name: "Login",
-    component: () => import("@/views/Login.vue")
+    component: Login
   },
   {
     path: "/",
@@ -14,74 +33,91 @@ const routes = [
   },
   {
     path: "/search",
-    component: () => import("@/layouts/default/Default.vue"),
+    component: Default,
     children: [
       {
         path: "",
         name: "ObservableMatch",
-        component: () => import("@/views/ObservableMatch.vue")
+        component: ObservableMatch
       }
     ]
   },
   {
     path: "/observables",
-    component: () => import("@/layouts/default/Default.vue"),
+    component: Default,
     children: [
       {
         path: "",
         name: "ObservableSearch",
-        component: () => import("@/views/ObservableSearch.vue")
+        component: ObservableSearch
       },
       {
         path: ":id([0-9]+)",
         name: "ObservableDetails",
-        component: () => import("@/views/ObservableDetails.vue"),
+        component: ObservableDetails,
         props: true
       }
     ]
   },
   {
     path: "/entities",
-    component: () => import("@/layouts/default/Default.vue"),
+    component: Default,
     children: [
       {
         path: "",
         name: "Entities",
-        component: () => import("@/views/EntitySearch.vue")
+        component: EntitySearch
       },
       {
         path: ":id([0-9]+)",
         name: "EntityDetails",
-        component: () => import("@/views/ObjectDetails.vue"),
+        component: ObjectDetails,
         props: route => ({ id: String(route.params.id), objectType: "entity" })
       }
     ]
   },
   {
     path: "/indicators",
-    component: () => import("@/layouts/default/Default.vue"),
+    component: Default,
     children: [
       {
         path: "",
         name: "Indicators",
-        component: () => import("@/views/IndicatorSearch.vue")
+        component: IndicatorSearch
       },
       {
         path: ":id([0-9]+)",
         name: "IndicatorDetails",
-        component: () => import("@/views/ObjectDetails.vue"),
+        component: ObjectDetails,
         props: route => ({ id: String(route.params.id), objectType: "indicator" })
       }
     ]
   },
+  {
+    path: "/dfiq",
+    component: Default,
+    children: [
+      {
+        path: "",
+        name: "DFIQ",
+        component: DFIQSearch
+      },
+      {
+        path: ":id([0-9]+)",
+        name: "DFIQDetails",
+        component: ObjectDetails,
+        props: route => ({ id: String(route.params.id), objectType: "dfiq" })
+      }
+    ]
+  },
   {
     path: "/feeds",
-    component: () => import("@/layouts/default/Default.vue"),
+    component: Default,
     children: [
       {
         path: "",
         name: "Feeds",
-        component: () => import("@/components/TaskList.vue"),
+        component: TaskList,
         props: {
           taskType: "feed",
           displayColumns: ["name", "frequency", "last_run", "description", "status", "toggle", "refresh"]
@@ -91,78 +127,78 @@ const routes = [
   },
   {
     path: "/analytics",
-    component: () => import("@/layouts/default/Default.vue"),
+    component: Default,
     children: [
       {
         path: "",
         name: "Analytics",
-        component: () => import("@/views/AnalyticsList.vue"),
+        component: AnalyticsList,
         props: true
       }
     ]
   },
   {
     path: "/exports",
-    component: () => import("@/layouts/default/Default.vue"),
+    component: Default,
     children: [
       {
         path: "",
         name: "Exports",
-        component: () => import("@/views/ExportList.vue"),
+        component: ExportList,
         props: true
       }
     ]
   },
   {
     path: "/exports/templates",
-    component: () => import("@/layouts/default/Default.vue"),
+    component: Default,
     children: [
       {
         path: "",
         name: "ExportTemplates",
-        component: () => import("@/views/ExportTemplates.vue"),
+        component: ExportTemplates,
         props: true
       }
     ]
   },
   {
     path: "/profile",
-    component: () => import("@/layouts/default/Default.vue"),
+    component: Default,
     children: [
       {
         path: "",
         name: "UserProfile",
-        component: () => import("@/views/UserProfile.vue"),
+        component: UserProfile,
         props: true
       },
       {
         path: ":id([0-9]+)",
         name: "UserProfileAdmin",
-        component: () => import("@/views/UserProfile.vue"),
+        component: UserProfile,
         props: true
       }
     ]
   },
   {
     path: "/admin",
-    component: () => import("@/layouts/default/Default.vue"),
+    component: Default,
     children: [
       {
         path: "users",
         name: "UserAdmin",
-        component: () => import("@/views/UserAdmin.vue"),
+        component: UserAdmin,
         props: true
       },
       {
         path: "tags",
         name: "TagsAdmin",
-        component: () => import("@/views/TagsAdmin.vue"),
+        component: TagsAdmin,
         props: true
       },
       {
         path: "system",
         name: "System",
-        component: () => import("@/views/System.vue"),
+        component: System,
         props: true
       }
     ]
diff --git a/src/views/DFIQSearch.vue b/src/views/DFIQSearch.vue
new file mode 100644
index 00000000..5f34cc4a
--- /dev/null
+++ b/src/views/DFIQSearch.vue
@@ -0,0 +1,128 @@
+<template>
+  <v-sheet class="ma-5" width="100%">
+    <v-tabs v-model="activeTab" color="primary">
+      <v-tab :value="typeDef.type" v-for="typeDef in displayedDFIQTypes" @click="autoTab = false">
+        <v-icon size="x-large" start>{{ typeDef.icon }}</v-icon
+        >{{ typeDef.name }} <v-chip class="ml-3" density="comfortable">{{ DFIQCount[typeDef.type] }}</v-chip>
+      </v-tab>
+    </v-tabs>
+    <v-window v-model="activeTab">
+      <v-window-item v-for="typeDef in DFIQTypes" :value="typeDef.type" v-bind:key="typeDef.type" eager>
+        <object-list
+          searchType="dfiq"
+          :search-subtype="typeDef.type"
+          :search-query="searchQueryDebounced"
+          :headers="getFieldForType(typeDef.type)"
+          @totalUpdated="countDFIQ(typeDef.type, $event)"
+        />
+      </v-window-item>
+    </v-window>
+  </v-sheet>
+
+  <v-navigation-drawer permament location="right" width="400" ref="drawer">
+    <v-list-item class="mt-4">
+      <v-text-field
+        v-model="searchQuery"
+        prepend-inner-icon="mdi-magnify"
+        label="Search DFIQ"
+        density="compact"
+        class="mt-2"
+      />
+    </v-list-item>
+    <v-list-item>
+      <v-btn prepend-icon="mdi-plus">
+        New DFIQ object
+        <v-menu activator="parent">
+          <v-list>
+            <v-dialog v-for="typeDef in DFIQTypes" :width="editWidth" :fullscreen="fullScreenEdit">
+              <template v-slot:activator="{ props }">
+                <v-list-item v-bind="props" :prepend-icon="typeDef.icon"> {{ typeDef.name }} </v-list-item>
+              </template>
+              <template v-slot:default="{ isActive }">
+                <new-object
+                  :object-type="typeDef.type"
+                  @close="isActive.value = false"
+                  @toggle-fullscreen="toggleNewObjectFullscreen"
+                />
+              </template>
+            </v-dialog>
+          </v-list>
+        </v-menu>
+      </v-btn>
+    </v-list-item>
+  </v-navigation-drawer>
+</template>
+
+<script lang="ts" setup>
+import { DFIQ_TYPES } from "@/definitions/dfiqDefinitions.js";
+import ObjectList from "@/components/ObjectList.vue";
+import NewObject from "@/components/NewObject.vue";
+
+import _ from "lodash";
+</script>
+
+<script lang="ts">
+export default {
+  name: "DFIQSearch",
+  components: {
+    ObjectList,
+    NewObject
+  },
+  data() {
+    return {
+      searchQuery: "",
+      searchQueryDebounced: "",
+      DFIQTypes: DFIQ_TYPES,
+      DFIQCount: DFIQ_TYPES.reduce((acc, cur) => {
+        acc[cur.type] = 0;
+        return acc;
+      }, {}),
+      activeTab: "",
+      autoTab: true,
+      fullScreenEdit: false,
+      editWidth: "50%",
+      newDialogActive: false
+    };
+  },
+  methods: {
+    countDFIQ(type, count) {
+      this.DFIQCount[type] = count;
+      if (!this.$route.hash && this.autoTab) {
+        this.navigateToFirstPopulatedTab();
+      }
+    },
+    navigateToFirstPopulatedTab() {
+      for (const typeDef of this.DFIQTypes) {
+        if (this.DFIQCount[typeDef.type] > 0) {
+          this.activeTab = typeDef.type;
+          break;
+        }
+      }
+    },
+    getFieldForType(typeName) {
+      let fields = this.DFIQTypes.find(type => type.type === typeName).fields.filter(field => field.displayList);
+      return fields.map(field => {
+        return {
+          title: field.label,
+          key: field.field,
+          width: field.width
+        };
+      });
+    },
+    toggleNewObjectFullscreen(fullscreen: boolean) {
+      this.fullScreenEdit = !this.fullScreenEdit;
+      this.editWidth = fullscreen ? "100%" : "50%";
+    }
+  },
+  computed: {
+    displayedDFIQTypes() {
+      return this.DFIQTypes.filter(type => this.DFIQCount[type.type] > 0);
+    }
+  },
+  watch: {
+    searchQuery: _.debounce(function () {
+      this.searchQueryDebounced = this.searchQuery;
+    }, 200)
+  }
+};
+</script>
diff --git a/src/views/ObjectDetails.vue b/src/views/ObjectDetails.vue
index 25549e96..7ef538a1 100644
--- a/src/views/ObjectDetails.vue
+++ b/src/views/ObjectDetails.vue
@@ -4,40 +4,21 @@
       <v-col>
         <v-card class="ma-2" variant="flat">
           <template v-slot:title>
-            <div class="d-flex">
-              <v-chip class="mr-3" color="primary" :text="object?.type" label></v-chip>
+            <div class="d-flex yeti-object-title">
+              <div>
+                <v-chip class="mr-3" color="primary" :text="object?.type" label></v-chip>
+              </div>
               <code class="me-auto">{{ object?.name }}</code>
-
-              <v-dialog :width="editWidth" :fullscreen="fullScreenEdit">
-                <template v-slot:activator="{ props }">
-                  <v-btn class="me-2" variant="tonal" color="primary" v-bind="props" append-icon="mdi-pencil"
-                    >Edit
-                  </v-btn>
-                </template>
-
-                <template v-slot:default="{ isActive }">
-                  <edit-object
-                    :object="object"
-                    :is-active="isActive"
-                    @success="obj => (object = obj)"
-                    @toggle-fullscreen="toggleFullscreen"
-                  />
-                </template>
-              </v-dialog>
-
-              <v-dialog :width="editWidth">
-                <template v-slot:activator="{ props }">
-                  <v-btn variant="tonal" color="primary" v-bind="props" append-icon="mdi-link">new link </v-btn>
-                </template>
-
-                <template v-slot:default="{ isActive }">
-                  <link-object :object="object" :is-active="isActive" />
-                </template>
-              </v-dialog>
             </div>
           </template>
-          <v-card-text class="yeti-description">
-            <yeti-markdown :text="object?.description || 'No description provided'" />
+          <v-card-text class="yeti-description" v-if="object">
+            <yeti-DFIQ-approach-template
+              v-if="object.root_type === 'dfiq' && object.type === 'approach'"
+              :description="object.description"
+              :view="object.view"
+              :dfiq-type="object.type"
+            />
+            <yeti-markdown v-else :text="object.description || 'No description provided'" />
           </v-card-text>
         </v-card>
         <v-card v-if="object?.pattern" class="ma-2" variant="flat">
@@ -49,7 +30,45 @@
       </v-col>
       <v-col cols="4">
         <v-card class="ma-2" variant="flat">
-          <v-card-title>Info</v-card-title>
+          <v-card-title class="d-flex"
+            ><span class="me-auto"> Info</span>
+            <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"
+                  >Edit
+                </v-btn>
+              </template>
+
+              <template v-slot:default="{ isActive }">
+                <edit-DFIQ-object
+                  v-if="object?.root_type === 'dfiq'"
+                  :object="object"
+                  :is-active="isActive"
+                  @success="obj => (object = obj)"
+                  @toggle-fullscreen="toggleFullscreen"
+                />
+                <edit-object
+                  v-else
+                  :object="object"
+                  :is-active="isActive"
+                  @success="obj => (object = obj)"
+                  @toggle-fullscreen="toggleFullscreen"
+                />
+              </template>
+            </v-dialog>
+
+            <v-dialog :width="editWidth">
+              <template v-slot:activator="{ props }">
+                <v-btn variant="tonal" color="primary" v-bind="props" size="small" append-icon="mdi-link"
+                  >new link
+                </v-btn>
+              </template>
+
+              <template v-slot:default="{ isActive }">
+                <link-object :object="object" :is-active="isActive" />
+              </template>
+            </v-dialog>
+          </v-card-title>
           <v-table density="compact">
             <tbody>
               <tr v-for="field in getObjectInfoFields">
@@ -99,13 +118,17 @@
               {{ entityType.name }} {{ relatedObjectTabCount[entityType.type] }}
             </v-tab>
             <v-tab value="related-indicators"
-              ><v-icon size="x-large" start>mdi-graph</v-icon>Related indicators
+              ><v-icon size="x-large" start>mdi-flash</v-icon>Related indicators
               <v-chip class="ml-3" density="comfortable"> {{ relatedObjectTabCount["indicators"] }}</v-chip></v-tab
             >
             <v-tab value="related-observables"
-              ><v-icon size="x-large" start>mdi-graph</v-icon>Related observables
+              ><v-icon size="x-large" start>mdi-text-search</v-icon>Related observables
               <v-chip class="ml-3" density="comfortable">{{ relatedObjectTabCount["observables"] }}</v-chip></v-tab
             >
+            <v-tab value="related-dfiq"
+              ><v-icon size="x-large" start>mdi-chat-question</v-icon>Related DFIQ
+              <v-chip class="ml-3" density="comfortable">{{ relatedObjectTabCount["dfiq"] }}</v-chip></v-tab
+            >
             <v-tab value="related-tagged"
               ><v-icon size="x-large" start>mdi-tag</v-icon>Tag relationships
               <v-chip class="ml-3" density="comfortable">{{ relatedObjectTabCount["tagged"] }}</v-chip></v-tab
@@ -146,6 +169,15 @@
               />
             </v-window-item>
 
+            <v-window-item value="related-dfiq" eager class="my-4">
+              <related-objects
+                :id="id"
+                :source-type="typeToEndpointMapping[objectType]"
+                :target-types="objectTypes['dfiq'].map(def => def.type)"
+                @totalUpdated="value => countObjects('dfiq', value)"
+              />
+            </v-window-item>
+
             <v-window-item value="related-tagged" eager class="my-4">
               <related-objects
                 :id="id"
@@ -165,17 +197,18 @@
 
 <script lang="ts" setup>
 import axios from "axios";
-import { marked } from "marked";
-import DOMPurify from "dompurify";
 
 import RelatedObjects from "@/components/RelatedObjects.vue";
 import EditObject from "@/components/EditObject.vue";
+import EditDFIQObject from "@/components/EditDFIQObject.vue";
 import LinkObject from "@/components/LinkObject.vue";
 import YetiMarkdown from "@/components/YetiMarkdown.vue";
+import YetiDFIQApproachTemplate from "@/components/YetiDFIQApproachTemplate.vue";
 
 import { ENTITY_TYPES } from "@/definitions/entityDefinitions.js";
 import { OBSERVABLE_TYPES } from "@/definitions/observableDefinitions.js";
 import { INDICATOR_TYPES } from "@/definitions/indicatorDefinitions.js";
+import { DFIQ_TYPES } from "@/definitions/dfiqDefinitions.js";
 
 import moment from "moment";
 </script>
@@ -195,8 +228,10 @@ export default {
   components: {
     RelatedObjects,
     EditObject,
+    EditDFIQObject,
     LinkObject,
-    YetiMarkdown
+    YetiMarkdown,
+    YetiDFIQApproachTemplate
   },
   data() {
     return {
@@ -206,12 +241,14 @@ export default {
       objectTypes: {
         entity: ENTITY_TYPES,
         observable: OBSERVABLE_TYPES,
-        indicator: INDICATOR_TYPES
+        indicator: INDICATOR_TYPES,
+        dfiq: DFIQ_TYPES
       },
       typeToEndpointMapping: {
         entity: "entities",
         observable: "observables",
-        indicator: "indicators"
+        indicator: "indicators",
+        dfiq: "dfiq"
       },
       objectTags: [],
       relatedObjectTabCount: {},
@@ -259,7 +296,7 @@ export default {
     },
     navigateToFirstPopulatedTab() {
       let tabKeys = this.objectTypes.entity.map(entityType => entityType.type);
-      tabKeys = tabKeys.concat(["indicators", "observables", "tagged"]);
+      tabKeys = tabKeys.concat(["indicators", "observables", "tagged", "dfiq"]);
 
       for (const key of tabKeys) {
         if (this.relatedObjectTabCount[key] > 0) {
@@ -274,11 +311,11 @@ export default {
     }
   },
   computed: {
-    getObjectTypeDefintiions() {
+    getObjectTypeDefintions() {
       return this.objectTypes[this.objectType].find(typeDef => typeDef.type === this.object?.type);
     },
     getObjectInfoFields() {
-      return this.getObjectTypeDefintiions?.fields.filter(field => !this.hideFieldsInfoBox.includes(field.field));
+      return this.getObjectTypeDefintions?.fields.filter(field => !this.hideFieldsInfoBox.includes(field.field));
     },
     displayedEntityTypes() {
       return this.objectTypes["entity"].filter(type => this.relatedObjectTabCount[type.type] > 0);
@@ -300,4 +337,8 @@ export default {
 .v-card-text.yeti-pattern-code {
   font-size: 1rem;
 }
+
+.yeti-object-title code {
+  white-space: normal;
+}
 </style>