move url creation function to util/urlHelpers.js

webui/src/components/BannerHeader.vue

@@ -6,11 +6,7 @@
     <div class="font-bold mr-8">This is an early release</div>
     <div class="align-items-center hidden lg:flex">
       <span class="line-height-3">Please report any bugs, enhancements or features in the </span>
-      <a
-        v-ripple
-        href="https://github.com/mandiant/capa/issues"
-        class="flex align-items-center ml-2 mr-8 text-white"
-      >
+      <a v-ripple href="https://github.com/mandiant/capa/issues" class="flex align-items-center ml-2 mr-8 text-white">
         <span class="no-underline font-bold">Github issues</span>
         <i class="pi pi-github ml-2"></i>
       </a>

webui/src/components/NavBar.vue

@@ -7,6 +7,7 @@ const items = ref([
   {
     label: 'Import Analysis',
     icon: 'pi pi-file-import',
+    // TODO(s-ff): This is not the conventinal way of navigating to a new page.
     command: () => window.location.replace(window.location.origin + '/capa/') // reload the page
   }
 ])

webui/src/components/RuleMatchesTable.vue

@@ -5,7 +5,7 @@
       v-model:expandedKeys="expandedKeys"
       size="small"
       :filters="filters"
-      :filterMode="filterMode.value"
+      :filterMode="filterMode"
       sortField="namespace"
       :sortOrder="-1"
       removableSort
@@ -53,7 +53,7 @@
         <template #body="slotProps">
           <!-- Address column -->
           <span v-if="col.field === 'address'" class="text-sm" style="font-family: monospace">
-            {{ slotProps.node.data.type === 'match location' ? '' : slotProps.node.data.address }}
+            {{ slotProps.node.data.address }}
           </span>
 
           <!-- Tactic column -->
@@ -127,6 +127,7 @@ import RuleColumn from './columns/RuleColumn.vue'
 import VTIcon from './misc/VTIcon.vue'
 
 import { parseRules } from '../utils/rdocParser'
+import { createMBCHref, createATTACKHref } from '../utils/urlHelpers'
 
 const props = defineProps({
   data: {
@@ -141,7 +142,7 @@ const props = defineProps({
 
 const treeData = ref([])
 const filters = ref({})
-const filterMode = ref({ value: 'lenient' })
+const filterMode = ref('lenient')
 const sourceDialogVisible = ref(false)
 const currentSource = ref('')
 const expandedKeys = ref({})
@@ -178,7 +179,7 @@ const onRightClick = (event, instance) => {
     selectedNode.value.url = `https://github.com/mandiant/capa-rules/blob/master/${instance.node.data.namespace || 'lib'}/${instance.node.data.name.toLowerCase().replace(/\s+/g, '-')}.yml`
     // construct VirusTotal deep link
     const behaviourSignature = `behaviour_signature:"${instance.node.data.name}"`
-    selectedNode.value.vturl = `https://www.virustotal.com/gui/search/${behaviourSignature}/files`
+    selectedNode.value.vturl = `https://www.virustotal.com/gui/search/${encodeURIComponent(behaviourSignature)}/files`
 
     menu.value.show(event)
   }
@@ -253,57 +254,6 @@ onMounted(() => {
     console.error('Invalid data prop:', props.data)
   }
 })
-
-/**
- * Creates an MBC (Malware Behavior Catalog) URL from an MBC object.
- *
- * @param {Object} mbc - The MBC object to format.
- * @returns {string} The MBC URL.
- */
-
-function createMBCHref(mbc) {
-  let baseUrl
-
-  // Determine the base URL based on the id
-  if (mbc.id.startsWith('B')) {
-    // Behavior
-    baseUrl = 'https://github.com/MBCProject/mbc-markdown/blob/main'
-  } else if (mbc.id.startsWith('C')) {
-    // Micro-Behavior
-    baseUrl = 'https://github.com/MBCProject/mbc-markdown/blob/main/micro-behaviors'
-  } else {
-    return null
-  }
-
-  // Convert the objective and behavior to lowercase and replace spaces with hyphens
-  const objectivePath = mbc.objective.toLowerCase().replace(/\s+/g, '-')
-  const behaviorPath = mbc.behavior.toLowerCase().replace(/\s+/g, '-')
-
-  // Construct the final URL
-  return `${baseUrl}/${objectivePath}/${behaviorPath}.md`
-}
-
-/**
- * Creates a MITRE ATT&CK URL for a specific technique or sub-technique.
- *
- * @param {Object} attack - The ATT&CK object containing information about the technique.
- * @param {string} attack.id - The ID of the ATT&CK technique or sub-technique.
- * @returns {string} The formatted MITRE ATT&CK URL for the technique.
- */
-function createATTACKHref(attack) {
-  const baseUrl = 'https://attack.mitre.org/techniques/'
-  const idParts = attack.id.split('.')
-
-  if (idParts.length === 1) {
-    // It's a technique
-    return `${baseUrl}${idParts[0]}`
-  } else if (idParts.length === 2) {
-    // It's a sub-technique
-    return `${baseUrl}${idParts[0]}/${idParts[1]}`
-  } else {
-    return null
-  }
-}
 </script>
 
 <style scoped>

webui/src/main.js

@@ -46,30 +46,10 @@ const Noir = definePreset(Aura, {
     colorScheme: {
       light: {
         primary: {
-          color: '{slate.700}',
+          color: '{slate.800}',
           inverseColor: '#ffffff',
           hoverColor: '{zinc.900}',
           activeColor: '{zinc.800}'
-        },
-        highlight: {
-          background: '{zinc.950}',
-          focusBackground: '{zinc.700}',
-          color: '#ffffff',
-          focusColor: '#ffffff'
-        }
-      },
-      dark: {
-        primary: {
-          color: '{zinc.50}',
-          inverseColor: '{zinc.950}',
-          hoverColor: '{zinc.100}',
-          activeColor: '{zinc.200}'
-        },
-        highlight: {
-          background: 'rgba(250, 250, 250, .16)',
-          focusBackground: 'rgba(250, 250, 250, .24)',
-          color: 'rgba(255,255,255,.87)',
-          focusColor: 'rgba(255,255,255,.87)'
         }
       }
     }

webui/src/utils/urlHelpers.js

@@ -0,0 +1,52 @@
+/**
+ * Creates an MBC (Malware Behavior Catalog) URL from an MBC object.
+ *
+ * @param {Object} mbc - The MBC object to format.
+ * @param {string} mbc.id - The ID of the MBC entry.
+ * @param {string} mbc.objective - The objective of the malware behavior.
+ * @param {string} mbc.behavior - The specific behavior of the malware.
+ * @returns {string|null} The MBC URL or null if the ID is invalid.
+ */
+export function createMBCHref(mbc) {
+  let baseUrl
+
+  // Determine the base URL based on the id
+  if (mbc.id.startsWith('B')) {
+    // Behavior
+    baseUrl = 'https://github.com/MBCProject/mbc-markdown/blob/main'
+  } else if (mbc.id.startsWith('C')) {
+    // Micro-Behavior
+    baseUrl = 'https://github.com/MBCProject/mbc-markdown/blob/main/micro-behaviors'
+  } else {
+    return null
+  }
+
+  // Convert the objective and behavior to lowercase and replace spaces with hyphens
+  const objectivePath = mbc.objective.toLowerCase().replace(/\s+/g, '-')
+  const behaviorPath = mbc.behavior.toLowerCase().replace(/\s+/g, '-')
+
+  // Construct the final URL
+  return `${baseUrl}/${objectivePath}/${behaviorPath}.md`
+}
+
+/**
+ * Creates a MITRE ATT&CK URL for a specific technique or sub-technique.
+ *
+ * @param {Object} attack - The ATT&CK object containing information about the technique.
+ * @param {string} attack.id - The ID of the ATT&CK technique or sub-technique.
+ * @returns {string|null} The formatted MITRE ATT&CK URL for the technique or null if the ID is invalid.
+ */
+export function createATTACKHref(attack) {
+  const baseUrl = 'https://attack.mitre.org/techniques/'
+  const idParts = attack.id.split('.')
+
+  if (idParts.length === 1) {
+    // It's a technique
+    return `${baseUrl}${idParts[0]}`
+  } else if (idParts.length === 2) {
+    // It's a sub-technique
+    return `${baseUrl}${idParts[0]}/${idParts[1]}`
+  } else {
+    return null
+  }
+}