From fcf200f13f3dc64dbf7e568cf71c53791f598920 Mon Sep 17 00:00:00 2001
From: Soufiane Fariss <rev.fariss@gmail.com>
Date: Mon, 5 Aug 2024 14:05:46 +0200
Subject: [PATCH] fix metadata panel on small screens

---
 webui/.gitignore                          |  3 --
 webui/src/components/DescriptionPanel.vue | 29 -----------
 webui/src/components/MetadataPanel.vue    | 62 +++++++++++------------
 3 files changed, 30 insertions(+), 64 deletions(-)

diff --git a/webui/.gitignore b/webui/.gitignore
index 97da3c7d..15918818 100644
--- a/webui/.gitignore
+++ b/webui/.gitignore
@@ -14,9 +14,6 @@ dist-ssr
 coverage
 *.local
 
-/cypress/videos/
-/cypress/screenshots/
-
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
diff --git a/webui/src/components/DescriptionPanel.vue b/webui/src/components/DescriptionPanel.vue
index 2d7469e6..da33cde0 100644
--- a/webui/src/components/DescriptionPanel.vue
+++ b/webui/src/components/DescriptionPanel.vue
@@ -12,34 +12,5 @@
                 search and display the rule matches in different viewing modes.
             </p>
         </div>
-        <div class="flex justify-content-center w-full mb-3 gap-4">
-            <Button label="Help" @click="openDialog('help')" icon="pi pi-info-circle" outlined />
-            <Button label="Changelog" @click="openDialog('changelog')" icon="pi pi-history" outlined />
-        </div>
     </div>
-
-    <Dialog v-model:visible="helpDialogVisible" header="Help" modal>
-        <p>TODO: Help instruction to walk through users how generate a capa report.</p>
-    </Dialog>
-
-    <Dialog v-model:visible="changelogDialogVisible" header="Changelog" modal>
-        <p>TODO: Add major changes to the tool here.</p>
-    </Dialog>
 </template>
-
-<script setup>
-import { ref } from "vue";
-import Button from "primevue/button";
-import Dialog from "primevue/dialog";
-
-const helpDialogVisible = ref(false);
-const changelogDialogVisible = ref(false);
-
-const openDialog = (type) => {
-    if (type === "help") {
-        helpDialogVisible.value = true;
-    } else if (type === "changelog") {
-        changelogDialogVisible.value = true;
-    }
-};
-</script>
diff --git a/webui/src/components/MetadataPanel.vue b/webui/src/components/MetadataPanel.vue
index d60d36d5..686a0ab6 100644
--- a/webui/src/components/MetadataPanel.vue
+++ b/webui/src/components/MetadataPanel.vue
@@ -1,59 +1,56 @@
 <template>
     <!-- Main container with gradient background -->
     <div
-        class="flex align-items-center justify-content-between w-full p-3 shadow-1"
+        class="flex flex-column sm:flex-row align-items-stretch sm:align-items-center justify-content-between w-full p-3 shadow-1"
         :style="{ background: 'linear-gradient(to right, #2c3e50, #3498db)' }"
     >
         <!-- File information section -->
-        <div class="flex-grow-1 mr-3">
+        <div class="flex-grow-1 mr-3 mb-3 sm:mb-0">
             <h1 class="text-xl m-0 text-overflow-ellipsis overflow-hidden white-space-nowrap text-white">
                 {{ fileName }}
             </h1>
             <p class="text-xs mt-1 mb-0 text-white-alpha-70">
                 SHA256:
-                <a :href="`https://www.virustotal.com/gui/file/${sha256}`" target="_blank">{{ sha256 }} </a>
+                <a
+                    :href="`https://www.virustotal.com/gui/file/${sha256}`"
+                    target="_blank"
+                    class="text-white-alpha-90 hover:text-white"
+                    >{{ sha256 }}</a
+                >
             </p>
         </div>
 
-        <!-- Vertical divider -->
-        <div class="mx-3 bg-white-alpha-30" style="width: 1px; height: 30px"></div>
-
         <!-- Analysis information section  -->
-        <div class="flex-grow-1 mr-3">
+        <div class="flex-grow-1 mr-3 mb-3 sm:mb-0">
             <!-- OS • Program Format • Arch -->
-            <div class="flex align-items-center text-sm m-0 line-height-3 text-white">
-                <span class="capitalize">{{ data.meta.analysis.os }}</span>
-                <span class="ml-2 mr-2 text-white-alpha-30"> • </span>
-                <span class="uppercase">{{ data.meta.analysis.format }}</span>
-                <span class="ml-2 mr-2 text-white-alpha-30"> • </span>
+            <div class="flex flex-wrap align-items-center text-sm m-0 line-height-3 text-white">
+                <span class="capitalize mr-2">{{ data.meta.analysis.os }}</span>
+                <span class="sm:inline-block mx-2 text-white-alpha-30">•</span>
+                <span class="uppercase mr-2">{{ data.meta.analysis.format }}</span>
+                <span class="sm:inline-block mx-2 text-white-alpha-30">•</span>
                 <span class="uppercase">{{ data.meta.analysis.arch }}</span>
             </div>
             <!-- Flavor • Extractor • CAPA Version • Timestamp -->
-            <div class="flex align-items-center text-sm m-0 line-height-3 text-white">
-                <span class="inline-flex">
-                    <span class="capitalize">{{ flavor }}</span>
-                </span>
-                <span class="ml-1">analysis using</span>
-                <span class="ml-1">{{ data.meta.analysis.extractor.split(/(Feature)?Extractor/)[0] }}</span>
-                <span class="mx-2 text-white-alpha-30"> • </span>
-                <span>CAPA v{{ data.meta.version }}</span>
-                <span class="mx-2 text-white-alpha-30"> • </span>
+            <div class="flex flex-wrap align-items-center text-sm m-0 line-height-3 text-white">
+                <span class="capitalize mr-1">{{ flavor }}</span>
+                <span class="mr-1">analysis using</span>
+                <span class="mr-2">{{ data.meta.analysis.extractor.split(/(Feature)?Extractor/)[0] }}</span>
+                <span class="sm:inline-block mx-2 text-white-alpha-30">•</span>
+                <span class="mr-2">CAPA v{{ data.meta.version }}</span>
+                <span class="sm:inline-block mx-2 text-white-alpha-30">•</span>
                 <span>{{ new Date(data.meta.timestamp).toLocaleString() }}</span>
             </div>
         </div>
 
-        <!-- Vertical divider -->
-        <div class="mx-3 bg-white-alpha-30" style="width: 1px; height: 30px"></div>
-
         <!-- Key metrics section -->
-        <div class="flex justify-content-around flex-grow-1">
+        <div class="flex justify-content-around sm:justify-content-between flex-grow-1">
             <!-- Rules count -->
-            <div class="text-center">
+            <div class="text-center mr-3 sm:mr-0">
                 <span class="block text-xl font-bold text-white">{{ keyMetrics.ruleCount }}</span>
                 <span class="block text-xs uppercase text-white-alpha-70">Rules</span>
             </div>
             <!-- Namespaces count -->
-            <div class="text-center">
+            <div class="text-center mr-3 sm:mr-0">
                 <span class="block text-xl font-bold text-white">{{ keyMetrics.namespaceCount }}</span>
                 <span class="block text-xs uppercase text-white-alpha-70">Namespaces</span>
             </div>
@@ -67,8 +64,9 @@
         </div>
     </div>
 </template>
+
 <script setup>
-import { ref, computed, onMounted } from "vue";
+import { ref, onMounted } from "vue";
 
 const props = defineProps({
     data: {
@@ -84,11 +82,11 @@ const keyMetrics = ref({
 });
 
 // get the filename from the path, e.g. "malware.exe" from "/home/user/malware.exe"
-const fileName = computed(() => props.data.meta.sample.path.split("/").pop());
+const fileName = props.data.meta.sample.path.split("/").pop();
 // get the flavor from the metadata, e.g. "dynamic" or "static"
-const flavor = computed(() => props.data.meta.flavor);
+const flavor = props.data.meta.flavor;
 // get the SHA256 hash from the metadata
-const sha256 = computed(() => props.data.meta.sample.sha256.toUpperCase());
+const sha256 = props.data.meta.sample.sha256.toUpperCase();
 
 // Function to parse metadata and update key metrics
 const parseMetadata = () => {
@@ -97,7 +95,7 @@ const parseMetadata = () => {
             ruleCount: Object.keys(props.data.rules).length,
             namespaceCount: new Set(Object.values(props.data.rules).map((rule) => rule.meta.namespace)).size,
             functionOrProcessCount:
-                flavor.value === "static"
+                flavor === "static"
                     ? props.data.meta.analysis.feature_counts.functions.length
                     : props.data.meta.analysis.feature_counts.processes.length
         };