Improve Containers findings card (AST-102812) (#1222)

* Fix container scanner button alignment in markdown output

* Enhance container scanner output with image icons and status rendering

* Refactor container scanner imports to streamline hover data usage

* Adjust container scanner hover output to conditionally display vulnerability counts

Author: cx-ben-alvo

src/realtimeScanners/scanners/containers/containersScannerCommand.ts

@@ -7,7 +7,7 @@ import { ConfigurationManager } from "../../configuration/configurationManager";
 import { constants } from "../../../utils/common/constants";
 import { CxRealtimeEngineStatus } from "@checkmarxdev/ast-cli-javascript-wrapper/dist/main/oss/CxRealtimeEngineStatus";
 import { buildCommandButtons, renderCxAiBadge } from "../../../utils/utils";
-import { ContainersHoverData } from "../../common/types";
+import {ContainersHoverData} from "../../common/types";
 
 export class ContainersScannerCommand extends BaseScannerCommand {
 	constructor(
@@ -74,24 +74,37 @@ export class ContainersScannerCommand extends BaseScannerCommand {
 		const isVulnerable = this.isVulnerableStatus(hoverData.status);
 		const isMalicious = hoverData.status === "Malicious";
 
+		md.appendMarkdown(renderCxAiBadge() + "<br>");
+		if (isVulnerable) {
+			md.appendMarkdown(this.renderImageIcon());
+		}
 		if (isMalicious) {
-			md.appendMarkdown(this.renderMaliciousFinding() + "<br>");
-			md.appendMarkdown(renderCxAiBadge() + "<br>");
-		} else if (isVulnerable) {
-			md.appendMarkdown(renderCxAiBadge() + "<br>");
+			md.appendMarkdown(this.renderMaliciousIcon());
 		}
-
-		md.appendMarkdown(`${"&nbsp;".repeat(45)}${buttons}<br>`);
-
+		md.appendMarkdown(this.renderID(hoverData));
 		if (isVulnerable) {
 			md.appendMarkdown(this.renderVulnCounts(hoverData.vulnerabilities || []));
 		}
+		md.appendMarkdown(`${buttons}<br>`);
 
-		if (isMalicious) {
-			md.appendMarkdown(this.renderMaliciousIcon());
+		return new vscode.Hover(md);
+	}
+
+	private renderID(hoverData: ContainersHoverData): string {
+		if (hoverData.status == CxRealtimeEngineStatus.malicious) {
+			return `
+<b>${hoverData.imageName}:${hoverData.imageTag}</b> 
+<i style="color: dimgrey;"> - ${hoverData.status} image <br></i>
+`;
 		}
+		return `
+<b>${hoverData.imageName}:${hoverData.imageTag}</b> 
+<i style="color: dimgrey;"> - ${hoverData.status} severity image <br></i>
+`;
+	}
 
-		return new vscode.Hover(md);
+	private renderImageIcon() : string {
+		return `<img src="https://raw.githubusercontent.com/Checkmarx/ast-vscode-extension/main/media/icons/realtimeEngines/container_image.png" width="15" height="16" style="vertical-align: -12px;"/>`;
 	}
 
 	private isVulnerableStatus(status: string): boolean {
@@ -103,12 +116,8 @@ export class ContainersScannerCommand extends BaseScannerCommand {
 		].includes(status as any);
 	}
 
-	private renderMaliciousFinding(): string {
-		return `<img src="https://raw.githubusercontent.com/Checkmarx/ast-vscode-extension/main/media/icons/maliciousFindig.png" style="vertical-align: -12px;" />`;
-	}
-
 	private renderMaliciousIcon(): string {
-		return `<img src="https://raw.githubusercontent.com/Checkmarx/ast-vscode-extension/main/media/icons/malicious.png" width="10" height="11" style="vertical-align: -12px;"/>`;
+		return `<img src="https://raw.githubusercontent.com/Checkmarx/ast-vscode-extension/main/media/icons/malicious.png" width="15" height="16" style="vertical-align: -12px;"/>`;
 	}
 
 	private renderVulnCounts(vulnerabilities: Array<{ severity: string }>): string {
@@ -124,7 +133,7 @@ export class ContainersScannerCommand extends BaseScannerCommand {
 			.filter(([_, count]) => count > 0)
 			.map(
 				([sev, count]) =>
-					`<img src="https://raw.githubusercontent.com/Checkmarx/ast-vscode-extension/main/media/icons/${constants.ossIcons[sev as keyof typeof constants.ossIcons]
+					`<img src="https://raw.githubusercontent.com/Checkmarx/ast-vscode-extension/main/media/icons/realtimeEngines/${constants.ossIcons[sev as keyof typeof constants.ossIcons]
 					}" width="10" height="11" style="vertical-align: -12px;"/> ${count} &nbsp; `
 			);
 

src/realtimeScanners/scanners/containers/containersScannerService.ts

@@ -36,12 +36,12 @@ export class ContainersScannerService extends BaseScannerService {
 
 	private decorationTypes = {
 		malicious: this.createDecoration("malicious.svg"),
-		ok: this.createDecoration("circle-check.svg"),
-		unknown: this.createDecoration("question-mark.svg"),
-		critical: this.createDecoration("critical_untoggle.svg", "12px"),
-		high: this.createDecoration("high_untoggle.svg"),
-		medium: this.createDecoration("medium_untoggle.svg"),
-		low: this.createDecoration("low_untoggle.svg"),
+		ok: this.createDecoration("realtimeEngines/green_check.svg"),
+		unknown: this.createDecoration("realtimeEngines/question_mark.svg"),
+		critical: this.createDecoration("realtimeEngines/critical_severity.svg", "12px"),
+		high: this.createDecoration("realtimeEngines/high_severity.svg"),
+		medium: this.createDecoration("realtimeEngines/medium_severity.svg"),
+		low: this.createDecoration("realtimeEngines/low_severity.svg"),
 		underline: vscode.window.createTextEditorDecorationType({
 			textDecoration: "underline wavy #f14c4c",
 			rangeBehavior: vscode.DecorationRangeBehavior.ClosedClosed,