Skip to content

Commit

Permalink
fix metadata panel on small screens
Browse files Browse the repository at this point in the history
  • Loading branch information
@fariss
fariss committed Aug 5, 2024
1 parent 7cb93c8 commit fcf200f
Show file tree
Hide file tree
Showing 3 changed files with 30 additions and 64 deletions.
3 changes: 0 additions & 3 deletions webui/.gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,6 @@ dist-ssr
coverage
*.local

/cypress/videos/
/cypress/screenshots/

# Editor directories and files
.vscode/*
!.vscode/extensions.json
Expand Down
29 changes: 0 additions & 29 deletions webui/src/components/DescriptionPanel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
62 changes: 30 additions & 32 deletions webui/src/components/MetadataPanel.vue
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -67,8 +64,9 @@
</div>
</div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { ref, onMounted } from "vue";
const props = defineProps({
data: {
Expand All @@ -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 = () => {
Expand All @@ -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
};
Expand Down

0 comments on commit fcf200f

Please sign in to comment.