From c06d8459d9575a378df65167bdfa63770f503473 Mon Sep 17 00:00:00 2001
From: Alexander Myasoedov <msoedov@gmail.com>
Date: Mon, 19 Aug 2024 18:37:27 +0300
Subject: [PATCH] feat(add logs):

---
 agentic_security/static/index.html | 90 +++++++++++++++++++++++-------
 agentic_security/static/main.js    | 37 +++++++++++-
 2 files changed, 105 insertions(+), 22 deletions(-)

diff --git a/agentic_security/static/index.html b/agentic_security/static/index.html
index 1fbe8c0..9c0b768 100644
--- a/agentic_security/static/index.html
+++ b/agentic_security/static/index.html
@@ -135,27 +135,41 @@
 
         <!-- Modules Selection -->
         <section class="bg-dark-card rounded-lg p-6 shadow-lg">
-          <h2 class="text-2xl font-bold mb-4">Modules [{{selectedDS}}
-            selected]</h2>
-          <div class="flex justify-between mb-4">
-            <button @click="selectAllPackages"
-              class="text-dark-accent-green hover:underline">Select All</button>
-            <button @click="deselectAllPackages"
-              class="text-gray-400 hover:underline">Deselect All</button>
+          <div @click="toggleModules"
+            class="flex justify-between items-center cursor-pointer">
+            <h2 class="text-2xl font-bold">Modules [{{selectedDS}}
+              selected]</h2>
+            <svg :class="{'rotate-180': showModules}"
+              class="w-6 h-6 transition-transform duration-200"
+              xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round"
+              stroke-linejoin="round">
+              <polyline points="6 9 12 15 18 9"></polyline>
+            </svg>
           </div>
-          <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
-            <div
-              v-for="(package, index) in dataConfig"
-              :key="index"
-              @click="addPackage(index)"
-              class="border rounded-lg p-3 cursor-pointer transition-all hover:shadow-md"
-              :class="{'border-dark-accent-green bg-dark-accent-green bg-opacity-20': package.selected, 'border-gray-600': !package.selected}">
-              <div class="font-medium mb-1">{{ package.dataset_name }}</div>
-              <div class="text-sm text-gray-400">{{ package.source ||
-                'Local dataset' }}</div>
-              <div class="mt-2 text-sm font-semibold">
-                {{ package.dynamic ? 'Dynamic dataset' :
-                `${package.num_prompts.toLocaleString()} prompts` }}
+
+          <div v-show="showModules" class="mt-4">
+            <div class="flex justify-between mb-4">
+              <button @click="selectAllPackages"
+                class="text-dark-accent-green hover:underline">Select
+                All</button>
+              <button @click="deselectAllPackages"
+                class="text-gray-400 hover:underline">Deselect All</button>
+            </div>
+            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+              <div
+                v-for="(package, index) in dataConfig"
+                :key="index"
+                @click="addPackage(index)"
+                class="border rounded-lg p-3 cursor-pointer transition-all hover:shadow-md"
+                :class="{'border-dark-accent-green bg-dark-accent-green bg-opacity-20': package.selected, 'border-gray-600': !package.selected}">
+                <div class="font-medium mb-1">{{ package.dataset_name }}</div>
+                <div class="text-sm text-gray-400">{{ package.source ||
+                  'Local dataset' }}</div>
+                <div class="mt-2 text-sm font-semibold">
+                  {{ package.dynamic ? 'Dynamic dataset' :
+                  `${package.num_prompts.toLocaleString()} prompts` }}
+                </div>
               </div>
             </div>
           </div>
@@ -239,7 +253,43 @@
         <!-- Report Image -->
         <img :src="reportImageUrl" alt="Generated Plot" v-if="reportImageUrl"
           class="mx-auto rounded-lg shadow-lg">
+        <!-- Logs Section -->
+        <section class="bg-dark-card rounded-lg p-6 shadow-lg mt-8">
+          <div @click="toggleLogs"
+            class="flex justify-between items-center cursor-pointer">
+            <h2 class="text-2xl font-bold">Logs</h2>
+            <svg :class="{'rotate-180': showLogs}"
+              class="w-6 h-6 transition-transform duration-200"
+              xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round"
+              stroke-linejoin="round">
+              <polyline points="6 9 12 15 18 9"></polyline>
+            </svg>
+          </div>
+
+          <div v-show="showLogs" class="mt-4">
+            <div class="mb-4 flex justify-between items-center">
+              <span class="text-sm text-gray-400">Showing latest {{
+                Math.min(logs.length, maxDisplayedLogs) }} of {{ logs.length }}
+                logs</span>
+              <button @click="downloadLogs"
+                class="bg-dark-accent-green text-dark-bg rounded-lg px-4 py-2 text-sm font-medium hover:bg-opacity-80 transition-colors">
+                Download Logs
+              </button>
+            </div>
+            <div class="bg-dark-bg p-4 rounded-lg max-h-96 overflow-y-auto">
+              <div v-for="(log, index) in displayedLogs" :key="index"
+                class="mb-2 last:mb-0">
+                <span class="text-dark-accent-green">{{ log.timestamp }}</span>
+                <span class="ml-2"
+                  :class="{'text-dark-accent-red': log.level === 'ERROR'}">{{
+                  log.message }}</span>
+              </div>
+            </div>
+          </div>
+        </section>
       </main>
+
     </div>
 
     <script src="main.js"></script>
diff --git a/agentic_security/static/main.js b/agentic_security/static/main.js
index e56b71a..b18fcbb 100644
--- a/agentic_security/static/main.js
+++ b/agentic_security/static/main.js
@@ -81,6 +81,10 @@ var app = new Vue({
         okMsg: '',
         reportImageUrl: '',
         selectedConfig: 0,
+        showModules: false,
+        showLogs: false,
+        logs: [], // This will store all the logs
+        maxDisplayedLogs: 50, // Maximum number of logs to display
         configs: [
             { name: 'Custom API', prompts: 40000, customInstructions: 'Requires api spec' },
             { name: 'Open AI', prompts: 24000 },
@@ -99,6 +103,9 @@ var app = new Vue({
     computed: {
         selectedDS: function () {
             return this.dataConfig.filter(p => p.selected).length;
+        },
+        displayedLogs() {
+            return this.logs.slice(-this.maxDisplayedLogs).reverse();
         }
     },
     methods: {
@@ -154,6 +161,28 @@ var app = new Vue({
             this.integrationVerified = false;
 
         },
+        toggleModules() {
+            this.showModules = !this.showModules;
+        },
+        toggleLogs() {
+            this.showLogs = !this.showLogs;
+        },
+        addLog(message, level = 'INFO') {
+            const timestamp = new Date().toISOString();
+            this.logs.push({ timestamp, message, level });
+        },
+        downloadLogs() {
+            const logText = this.logs.map(log => `${log.timestamp} [${log.level}] ${log.message}`).join('\n');
+            const blob = new Blob([logText], { type: 'text/plain' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = 'vulnerability_scan_logs.txt';
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+        },
         addPackage(index) {
 
             package = this.dataConfig[index];
@@ -195,7 +224,7 @@ var app = new Vue({
             let progress = event.progress;
             progress = progress % 100;
             this.progressWidth = `${progress}%`;
-
+            this.addLog(`${JSON.stringify(event)}`, 'INFO');
             if (this.mainTable.length < 1) {
                 this.mainTable.push(event);
                 event.last = true;
@@ -238,9 +267,13 @@ var app = new Vue({
             };
         },
         selectAllPackages() {
+            const allSelected = this.dataConfig.every(package => package.selected);
+
+            // If all are selected, deselect all. Otherwise, select all.
             this.dataConfig.forEach(package => {
-                package.selected = true;
+                package.selected = !allSelected;
             });
+
             this.updateSelectedDS();
         },