diff --git a/frontend/src/app/chatzone/chatzone.component.ts b/frontend/src/app/chatzone/chatzone.component.ts
index 20abee7..162113b 100644
--- a/frontend/src/app/chatzone/chatzone.component.ts
+++ b/frontend/src/app/chatzone/chatzone.component.ts
@@ -1,15 +1,22 @@
-import { Component, ViewChildren, QueryList, ElementRef, AfterViewInit, AfterViewChecked } from '@angular/core';
-import { ChatItem, Message, ReportCard, VulnerabilityReportCard } from '../types/ChatItem';
-import { WebSocketService } from '../services/web-socket.service';
-import { Step, Status } from '../types/Step';
import { APIResponse, ReportItem } from '../types/API';
+import { AfterViewChecked, AfterViewInit, Component, ElementRef, QueryList, ViewChildren } from '@angular/core';
+import { ChatItem, Message, ReportCard, VulnerabilityReportCard } from '../types/ChatItem';
+import { Status, Step } from '../types/Step';
+
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MarkdownModule } from 'ngx-markdown';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MaterialModule } from '../material.module';
import { VulnerabilityInfoService } from '../services/vulnerability-information.service';
+import { WebSocketService } from '../services/web-socket.service';
@Component({
selector: 'app-chatzone',
templateUrl: './chatzone.component.html',
styleUrls: ['./chatzone.component.css'],
- standalone: false
+ imports: [MaterialModule, MarkdownModule, MatProgressBarModule, FormsModule, CommonModule],
+ standalone: true,
})
export class ChatzoneComponent implements AfterViewInit, AfterViewChecked {
chatItems: ChatItem[];
@@ -21,26 +28,25 @@ export class ChatzoneComponent implements AfterViewInit, AfterViewChecked {
progress: number | undefined;
constructor(private ws: WebSocketService, private vis: VulnerabilityInfoService) {
this.inputValue = '';
- this.apiKey = localStorage.getItem("key") || "";
+ this.apiKey = localStorage.getItem('key') || '';
this.errorMessage = '';
this.chatItems = [];
this.steps = [];
this.progress = undefined;
- this.ws.webSocket$
- .subscribe({
- next: (value: any) => { // eslint-disable-line @typescript-eslint/no-explicit-any
- this.handleWSMessage(value as APIResponse);
- },
- error: (error: any) => { // eslint-disable-line @typescript-eslint/no-explicit-any
- console.log(error);
- if (error?.type != "close") { // Close is already handled via the isConnected call
- this.errorMessage = error;
- }
- },
- complete: () => alert("Connection to server closed.")
- }
- );
+ this.ws.webSocket$.subscribe({
+ next: (value: any) => {
+ this.handleWSMessage(value as APIResponse);
+ },
+ error: (error: any) => {
+ console.log(error);
+ if (error?.type != 'close') {
+ // Close is already handled via the isConnected call
+ this.errorMessage = error;
+ }
+ },
+ complete: () => alert('Connection to server closed.'),
+ });
this.restoreChatItems();
}
@@ -48,32 +54,32 @@ export class ChatzoneComponent implements AfterViewInit, AfterViewChecked {
// Handling of the websocket connection
checkInput(value: string): void {
- if (value && value.trim() != "") {
+ if (value && value.trim() != '') {
this.inputValue = '';
this.ws.postMessage(value, this.apiKey);
const userMessage: Message = {
type: 'message',
id: 'user-message',
message: value,
- avatar: "person",
- timestamp: Date.now()
+ avatar: 'person',
+ timestamp: Date.now(),
};
this.appendMessage(userMessage);
}
}
handleWSMessage(input: APIResponse): void {
- if (input.type == "message") {
+ if (input.type == 'message') {
const aiMessageString = input.data;
const aiMessage: Message = {
type: 'message',
id: 'ai-message',
message: aiMessageString,
- avatar: "computer",
- timestamp: Date.now()
+ avatar: 'computer',
+ timestamp: Date.now(),
};
this.appendMessage(aiMessage);
- } else if (input.type == "status") {
+ } else if (input.type == 'status') {
const current = input.current;
const total = input.total;
const progress = current / total;
@@ -81,7 +87,7 @@ export class ChatzoneComponent implements AfterViewInit, AfterViewChecked {
if (progress >= 1) {
this.progress = undefined;
}
- } else if (input.type == "report") {
+ } else if (input.type == 'report') {
if (input.reset) {
this.steps = [];
return;
@@ -96,28 +102,28 @@ export class ChatzoneComponent implements AfterViewInit, AfterViewChecked {
this.steps.push(step);
}
}
- } else if (input.type == "intermediate") {
+ } else if (input.type == 'intermediate') {
const text = '### Intermediate result from attack\n' + input.data;
const intermediateMessage: Message = {
type: 'message',
id: 'assistant-intermediate-message',
message: text,
- avatar: "computer",
- timestamp: Date.now()
+ avatar: 'computer',
+ timestamp: Date.now(),
};
this.appendMessage(intermediateMessage);
- } else if (input.type == "vulnerability-report") {
+ } else if (input.type == 'vulnerability-report') {
const vulnerabilityCards = input.data.map(vri => {
- const vrc = (vri as VulnerabilityReportCard);
+ const vrc = vri as VulnerabilityReportCard;
vrc.description = this.vis.getInfo(vri.vulnerability);
return vrc;
});
this.chatItems.push({
type: 'report-card',
- 'reports': vulnerabilityCards,
- 'name': input.name
+ reports: vulnerabilityCards,
+ name: input.name,
});
- localStorage.setItem("cached-chat-items", JSON.stringify(this.chatItems));
+ localStorage.setItem('cached-chat-items', JSON.stringify(this.chatItems));
}
}
@@ -127,21 +133,26 @@ export class ChatzoneComponent implements AfterViewInit, AfterViewChecked {
getIconForStepStatus(step: Step): string {
switch (step.status) {
- case Status.COMPLETED: return 'check_circle';
- case Status.FAILED: return 'error';
- case Status.SKIPPED: return 'skip_next';
- case Status.RUNNING: return 'play_circle';
- case Status.PENDING: return 'pending';
+ case Status.COMPLETED:
+ return 'check_circle';
+ case Status.FAILED:
+ return 'error';
+ case Status.SKIPPED:
+ return 'skip_next';
+ case Status.RUNNING:
+ return 'play_circle';
+ case Status.PENDING:
+ return 'pending';
}
}
appendMessage(message: Message) {
this.chatItems.push(message);
- localStorage.setItem("cached-chat-items", JSON.stringify(this.chatItems));
+ localStorage.setItem('cached-chat-items', JSON.stringify(this.chatItems));
}
restoreChatItems() {
- const storedMessages = localStorage.getItem("cached-chat-items");
+ const storedMessages = localStorage.getItem('cached-chat-items');
if (storedMessages) {
this.chatItems = JSON.parse(storedMessages);
}
@@ -149,22 +160,30 @@ export class ChatzoneComponent implements AfterViewInit, AfterViewChecked {
clearChatHistory() {
this.chatItems = [];
- localStorage.setItem("cached-chat-items", "[]");
+ localStorage.setItem('cached-chat-items', '[]');
}
static deserializeStep(obj: ReportItem): Step {
let status = Status.RUNNING;
switch (obj.status) {
- case "COMPLETED": status = Status.COMPLETED; break;
- case "FAILED": status = Status.FAILED; break;
- case "SKIPPED": status = Status.SKIPPED; break;
- case "PENDING": status = Status.PENDING; break;
+ case 'COMPLETED':
+ status = Status.COMPLETED;
+ break;
+ case 'FAILED':
+ status = Status.FAILED;
+ break;
+ case 'SKIPPED':
+ status = Status.SKIPPED;
+ break;
+ case 'PENDING':
+ status = Status.PENDING;
+ break;
}
return {
title: obj.title,
description: obj.description,
status: status,
- progress: obj.progress
+ progress: obj.progress,
};
}
@@ -193,11 +212,11 @@ export class ChatzoneComponent implements AfterViewInit, AfterViewChecked {
const downloadUrl = window.URL.createObjectURL(file);
const a = document.createElement('a');
a.href = downloadUrl;
- a.download = `${reportName}.${reportFormat}`; // Set the filename
+ a.download = `${reportName}.${reportFormat}`; // Set the filename
document.body.appendChild(a);
- a.click(); // Programmatically click the link to trigger the download
- document.body.removeChild(a); // Remove the link element
- window.URL.revokeObjectURL(downloadUrl); // Clean up the URL object
+ a.click(); // Programmatically click the link to trigger the download
+ document.body.removeChild(a); // Remove the link element
+ window.URL.revokeObjectURL(downloadUrl); // Clean up the URL object
}
// Scrolling to have new messages visible
@@ -258,11 +277,11 @@ export class ChatzoneComponent implements AfterViewInit, AfterViewChecked {
downloadChatHistory(): void {
const markdownContent = this.exportChat();
- const blob = new Blob([markdownContent], { type: 'text/markdown' });
+ const blob = new Blob([markdownContent], {type: 'text/markdown'});
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
- link.download = "STARS_chat_" + new Date().toISOString() + ".md";
+ link.download = 'STARS_chat_' + new Date().toISOString() + '.md';
// Append the link to the body
document.body.appendChild(link);
@@ -280,4 +299,9 @@ export class ChatzoneComponent implements AfterViewInit, AfterViewChecked {
this.apiKey = prompt('Set API Key', this.apiKey) || this.apiKey;
localStorage.setItem('key', this.apiKey);
}
+
+ // openDashboard() that loads a new page with the dashboard at the route /heatmap
+ openDashboard(): void {
+ window.open('/heatmap', '_blank');
+ }
}
diff --git a/frontend/src/app/heatmap/heatmap.component.css b/frontend/src/app/heatmap/heatmap.component.css
new file mode 100644
index 0000000..8a9c30e
--- /dev/null
+++ b/frontend/src/app/heatmap/heatmap.component.css
@@ -0,0 +1,80 @@
+h1 {
+ width: 500px;
+ margin: auto;
+ text-align: center;
+}
+
+#heatmapChart {
+ /* max-width: 600px;
+ max-height: 400px; */
+ display: block;
+ margin: 10px auto;
+}
+
+* {
+ font-family: Helvetica, Arial, sans-serif;
+}
+
+#vendorChoice {
+ padding: 20px 0;
+ width: 500px;
+ margin: auto;
+ text-align: center;
+}
+
+.title-card {
+ width: 700px;
+ margin: auto;
+ height: 100px;
+ padding: 25px;
+}
+ .heatmap-card {
+ width: 700px;
+ margin: auto;
+ height: 1000px;
+ padding: 25px;
+}
+
+/* .card-header {
+ font-size: 2rem;
+ font-weight: bold;
+} */
+
+#overview {
+ font-size: medium;
+}
+
+/* .header-icon {
+ width: 50px;
+} */
+
+.card-header {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ font-size: 2rem;
+ font-weight: bold;
+ justify-content: center;
+}
+
+.header-icon {
+ width: 45px;
+}
+
+.title {
+ display: flex;
+ align-items: center;
+}
+
+.buttons-wrapper {
+ /* margin-top: auto; pousse les boutons en bas */
+ display: flex;
+ flex-direction: column;
+ gap: 1rem; /* espace entre les boutons */
+}
+
+.centered-button {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
diff --git a/frontend/src/app/heatmap/heatmap.component.html b/frontend/src/app/heatmap/heatmap.component.html
new file mode 100644
index 0000000..73f8a45
--- /dev/null
+++ b/frontend/src/app/heatmap/heatmap.component.html
@@ -0,0 +1,5 @@
+
+
+
diff --git a/frontend/src/app/heatmap/heatmap.component.ts b/frontend/src/app/heatmap/heatmap.component.ts
new file mode 100644
index 0000000..97677d2
--- /dev/null
+++ b/frontend/src/app/heatmap/heatmap.component.ts
@@ -0,0 +1,222 @@
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, OnInit } from '@angular/core';
+import { capitalizeFirstLetter, splitModelName } from '../utils/utils';
+
+import ApexCharts from 'apexcharts';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { HttpClient } from '@angular/common/http';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSelectModule } from '@angular/material/select';
+import { ScoreResponse } from './../types/API';
+import { environment } from '../../environments/environment';
+
+@Component({
+ selector: 'app-heatmap',
+ templateUrl: './heatmap.component.html',
+ styleUrls: ['./heatmap.component.css'],
+ standalone: true,
+ imports: [CommonModule, MatFormFieldModule, MatSelectModule, FormsModule, MatCardModule, MatButtonModule],
+})
+export class HeatmapComponent implements AfterViewInit, OnInit {
+ constructor(private http: HttpClient, private el: ElementRef, private changeDetector: ChangeDetectorRef) {}
+
+ ngAfterViewInit() {
+ this.createHeatmap({
+ attacks: [],
+ models: [],
+ }); // Initialize empty heatmap to avoid errors before data is loaded
+ }
+
+ ngOnInit() {
+ this.loadHeatmapData();
+ }
+
+ // Load the heatmap data from the server
+ loadHeatmapData() {
+ let url = '';
+ url = `${environment.api_url}/api/heatmap`;
+ this.http.get
(url).subscribe({
+ next: scoresData => {
+ this.processDataAfterScan(scoresData);
+ },
+ error: error => console.error('❌ Erreur API:', error),
+ });
+ }
+
+ // Construct the heatmap data from the API response
+ processDataAfterScan(data: ScoreResponse) {
+ let modelNames: string[] = [];
+ let attackNames: string[] = [];
+ modelNames = data.models.map(model => model.name);
+ attackNames = data.attacks.map(attack => attack.name);
+ this.createHeatmap(data, modelNames, attackNames);
+ }
+
+ // Create the heatmap chart with the processed data
+ createHeatmap(data: ScoreResponse, modelNames: string[] = [], attackNames: string[] = []) {
+ const cellSize = 100;
+ const chartWidth = (attackNames.length + 1) * cellSize + 200; // +1 to add exposure column +200 to allow some space for translated labels
+ const chartHeight = data.models.length <= 3 ? data.models.length * cellSize + 300 : data.models.length * cellSize;
+
+ const xaxisCategories = [...attackNames, 'Exposure score'];
+ const allAttackWeights = Object.fromEntries(
+ data.attacks.map(attack => [attack.name, attack.weight ?? 1])
+ );
+ let seriesData: any[] = [];
+ // Process each model's scores and calculate the exposure score
+ data.models.forEach(model => {
+ let weightedSum = 0;
+ let totalWeight = 0;
+
+ attackNames.forEach(attack => {
+ const weight = allAttackWeights[attack] ?? 1;
+ const score = model.scores[attack];
+
+ if (score !== undefined && score !== null) {
+ weightedSum += score * weight;
+ totalWeight += weight;
+ }
+ });
+
+ const exposureScore = totalWeight > 0 ? Math.round(weightedSum / totalWeight) : 0;
+ seriesData.push({
+ name: model.name,
+ data: [
+ ...attackNames.map(name => ({
+ x: name,
+ y: model.scores.hasOwnProperty(name) ? model.scores[name] : -1,
+ })),
+ {
+ x: 'Exposure score',
+ y: exposureScore,
+ },
+ ],
+ });
+ });
+ // Create the heatmap chart with the processed data and parameters
+ const options = {
+ chart: {
+ type: 'heatmap',
+ height: chartHeight,
+ width: chartWidth,
+ toolbar: {show: false},
+ },
+ series: seriesData,
+ plotOptions: {
+ heatmap: {
+ shadeIntensity: 0.5,
+ colorScale: {
+ ranges: [
+ {from: -10, to: 0, color: '#cccccc', name: 'N/A'}, // Color for unscanned cells = '-'
+ {from: 0, to: 40, color: '#00A100'},
+ // {from: 21, to: 40, color: '#128FD9'},
+ {from: 41, to: 80, color: '#FF7300'},
+ // {from: 61, to: 80, color: '#FFB200'},
+ {from: 81, to: 100, color: '#FF0000'},
+ ],
+ },
+ },
+ },
+ grid: {
+ // Add padding to the top so we can space the x-axis title
+ padding: {top: 30, right: 0, bottom: 0, left: 0},
+ },
+ dataLabels: {
+ // Format the data labels visualized in the heatmap cells
+ formatter: function (val: number | null) {
+ return (val === null || val < 0) ? '-' : val;
+ },
+ style: {
+ // Size of the numbers in the cells
+ fontSize: '14px'
+ },
+ },
+ legend: {
+ // Shows the colors legend of the heatmap
+ show: true,
+ },
+ xaxis: {
+ categories: xaxisCategories.map(capitalizeFirstLetter),
+ title: {
+ text: 'Attacks',
+ offsetY: -20,
+ },
+ labels: {
+ rotate: -45,
+ style:
+ {
+ fontSize: '12px'
+ }
+ },
+ position: 'top',
+ tooltip: {
+ enabled: false // Disable tooltip buble above the x-axis
+ },
+ },
+ yaxis: {
+ categories: modelNames,
+ title: {
+ text: 'Models',
+ offsetX: -75,
+ },
+ labels: {
+ formatter: function (modelName: string) {
+ if (typeof modelName !== 'string') {
+ return modelName; // Return as is when it's a number
+ }
+ const splitName = splitModelName(modelName);
+ return splitName
+ },
+ style: {
+ fontSize: '12px',
+ whiteSpace: 'pre-line',
+ },
+ offsetY: -10,
+ },
+ reversed: true,
+ },
+ tooltip: {
+ enabled: true,
+ custom: function({
+ series,
+ seriesIndex,
+ dataPointIndex,
+ w
+ }: {
+ series: any[];
+ seriesIndex: number;
+ dataPointIndex: number;
+ w: any;
+ }) {
+ // Handle the case where the score is -1 (unscanned) and display 'N/A' in the tooltip
+ const value = series[seriesIndex][dataPointIndex] === -1 ? 'N/A' : series[seriesIndex][dataPointIndex];
+ const yLabel = capitalizeFirstLetter(w.globals.initialSeries[seriesIndex].name);
+ const xLabel = capitalizeFirstLetter(w.globals.labels[dataPointIndex]);
+ // Html format the tooltip content with title = model name and body = attack name and score
+ return `
+
+
${yLabel}
+
+
${xLabel}: ${value}
+