✨ Adds mock analysis results & populate webview with patternfly react datalist

vscode/package.json

@@ -31,7 +31,6 @@
     "MTA",
     "Analyze"
   ],
-  "activationEvents": [],
   "main": "./out/extension.js",
   "contributes": {
     "commands": [
@@ -276,6 +275,7 @@
     "prepare": "cd .. && husky vscode/.husky"
   },
   "devDependencies": {
+    "@eslint/js": "^9.11.1",
     "@types/mocha": "^10.0.7",
     "@types/node": "20.x",
     "@types/react": "^18.3.8",
@@ -284,25 +284,31 @@
     "@types/vscode": "^1.93.0",
     "@typescript-eslint/eslint-plugin": "^8.7.0",
     "@typescript-eslint/parser": "^8.7.0",
-    "typescript-eslint": "^8.7.0",
     "@vscode/test-cli": "^0.0.10",
     "@vscode/test-electron": "^2.4.1",
+    "css-loader": "^7.1.2",
     "eslint": "^9.11.1",
-    "@eslint/js": "^9.11.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.36.1",
     "eslint-plugin-unused-imports": "^4.1.4",
     "husky": "^9.1.6",
     "lint-staged": "^15.2.10",
+    "mini-css-extract-plugin": "^2.9.1",
+    "prettier": "^3.0.2",
+    "rimraf": "^4.4.1",
+    "style-loader": "^4.0.0",
     "ts-loader": "^9.5.1",
     "typescript": "^5.6.2",
+    "typescript-eslint": "^8.7.0",
     "webpack": "^5.94.0",
-    "webpack-cli": "^5.1.4",
-    "prettier": "^3.0.2",
-    "rimraf": "^4.4.1"
+    "webpack-cli": "^5.1.4"
   },
   "dependencies": {
+    "@patternfly/patternfly": "^5.4.1",
+    "@patternfly/react-core": "^5.4.0",
+    "@patternfly/react-table": "^5.4.1",
+    "@types/react-window": "^1.8.8",
     "babel-loader": "^9.2.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

vscode/src/KonveyorGUIWebviewViewProvider.ts

@@ -1,18 +1,21 @@
 import * as vscode from "vscode";
 import { getWebviewContent } from "./webviewContent";
+import { ExtensionState } from "./extensionState";
+import { setupWebviewMessageListener } from "./webviewMessageHandler";
 
 export class KonveyorGUIWebviewViewProvider implements vscode.WebviewViewProvider {
   public static readonly viewType = "konveyor.konveyorGUIView";
   private _webview?: vscode.Webview;
   private _webviewView?: vscode.WebviewView;
   private outputChannel: vscode.OutputChannel;
   private webviewReadyCallback?: (webview: vscode.Webview) => void;
 
   constructor(
     private readonly windowId: string,
-    private readonly extensionContext: vscode.ExtensionContext,
+    private readonly extensionState: ExtensionState,
   ) {
     this.outputChannel = vscode.window.createOutputChannel("Konveyor");
+    this.extensionState.webviewProviders.add(this);
   }
 
   get isVisible() {
@@ -41,12 +44,22 @@
     webviewView.webview.options = {
       enableScripts: true,
       localResourceRoots: [
-        vscode.Uri.joinPath(this.extensionContext.extensionUri, "media"),
-        vscode.Uri.joinPath(this.extensionContext.extensionUri, "out"),
+        vscode.Uri.joinPath(this.extensionState.extensionContext.extensionUri, "media"),
+        vscode.Uri.joinPath(this.extensionState.extensionContext.extensionUri, "out"),
       ],
     };
 
-    webviewView.webview.html = getWebviewContent(this.extensionContext, webviewView.webview, true);
+    webviewView.webview.html = getWebviewContent(
+      this.extensionState.extensionContext,
+      webviewView.webview,
+      true,
+    );
+
+    setupWebviewMessageListener(webviewView.webview, this.extensionState, this);
+
+    webviewView.onDidDispose(() => {
+      this.extensionState.webviewProviders.delete(this);
+    });
 
     if (this.webviewReadyCallback) {
       this.webviewReadyCallback(webviewView.webview);

vscode/src/VsCodeExtension.ts

@@ -3,7 +3,7 @@
 import { KonveyorGUIWebviewViewProvider } from "./KonveyorGUIWebviewViewProvider";
 import { registerAllCommands } from "./commands";
 import { setupWebviewMessageListener } from "./webviewMessageHandler";
-import { ExtensionState } from "./extensionState";
+import { ExtensionState, SharedState } from "./extensionState";
 
 export class VsCodeExtension {
   private extensionContext: vscode.ExtensionContext;
@@ -14,10 +14,17 @@
     this.extensionContext = context;
     this.windowId = uuidv4();
 
-    const sidebarProvider = new KonveyorGUIWebviewViewProvider(
-      this.windowId,
-      this.extensionContext,
-    );
+    this.state = {
+      sharedState: new SharedState(),
+      webviewProviders: new Set<KonveyorGUIWebviewViewProvider>(),
+      sidebarProvider: undefined as any,
+      extensionContext: context,
+    };
+
+    const sidebarProvider = new KonveyorGUIWebviewViewProvider(this.windowId, this.state);
+
+    this.state.sidebarProvider = sidebarProvider;
+    this.state.webviewProviders.add(sidebarProvider);
 
     // Check for multi-root workspace
     if (vscode.workspace.workspaceFolders && vscode.workspace.workspaceFolders.length > 1) {
@@ -26,11 +33,6 @@
       );
     }
 
-    this.state = {
-      sidebarProvider,
-    };
-
-    // Sidebar
     context.subscriptions.push(
       vscode.window.registerWebviewViewProvider("konveyor.konveyorGUIView", sidebarProvider, {
         webviewOptions: {
@@ -40,10 +42,9 @@
     );
 
     sidebarProvider.onWebviewReady((webview) => {
-      setupWebviewMessageListener(webview);
+      setupWebviewMessageListener(webview, this.state, sidebarProvider);
     });
 
-    // Commands
-    registerAllCommands(this.extensionContext, this.state);
+    registerAllCommands(this.state);
   }
 }

vscode/src/commands.ts

@@ -3,44 +3,89 @@
 import { ExtensionState } from "./extensionState";
 import { getWebviewContent } from "./webviewContent";
 import { sourceOptions, targetOptions } from "./config/labels";
+import { Incident } from "./webview/types";
+import { generateMockRuleSet } from "./webview/mockData";
 
 let fullScreenPanel: vscode.WebviewPanel | undefined;
 
 function getFullScreenTab() {
   const tabs = vscode.window.tabGroups.all.flatMap((tabGroup) => tabGroup.tabs);
   return tabs.find((tab) => (tab.input as any)?.viewType?.endsWith("konveyor.konveyorGUIView"));
 }
 
-const commandsMap: (
-  extensionContext: vscode.ExtensionContext,
-  state: ExtensionState,
-) => {
+async function analyzeFileContent(contentString: string, state: ExtensionState) {
+  const { extensionContext } = state;
+
+  const incidentDataString = extensionContext.workspaceState.get<string>("incidentData", "[]");
+  const incidentData = JSON.parse(incidentDataString) as Incident[];
+
+  const diagnosticCollection = vscode.languages.createDiagnosticCollection("konveyor");
+  const diagnosticsMap: Map<string, vscode.Diagnostic[]> = new Map();
+
+  incidentData.forEach((incident) => {
+    const fileUri = vscode.Uri.parse(incident.file);
+
+    const lineNumber = incident.line ? incident.line - 1 : 0;
+    const severity =
+      incident.severity === "High"
+        ? vscode.DiagnosticSeverity.Error
+        : incident.severity === "Medium"
+          ? vscode.DiagnosticSeverity.Warning
+          : vscode.DiagnosticSeverity.Information;
+
+    const diagnostic = new vscode.Diagnostic(
+      new vscode.Range(
+        new vscode.Position(lineNumber, 0),
+        new vscode.Position(lineNumber, Number.MAX_VALUE),
+      ),
+      incident.message,
+      severity,
+    );
+
+    const diagnostics = diagnosticsMap.get(fileUri.toString()) || [];
+    diagnostics.push(diagnostic);
+    diagnosticsMap.set(fileUri.toString(), diagnostics);
+  });
+
+  diagnosticsMap.forEach((diagnostics, fileUri) => {
+    diagnosticCollection.set(vscode.Uri.parse(fileUri), diagnostics);
+  });
+
+  const sidebarProvider = state.sidebarProvider;
+  if (sidebarProvider && sidebarProvider.webview) {
+    sidebarProvider.webview.postMessage({
+      command: "incidentData",
+      data: incidentData,
+    });
+  }
+
+  // Optionally, show an information message upon completion
+  vscode.window.showInformationMessage("Diagnostics created based on mock analysis.");
+}
+
+const commandsMap: (state: ExtensionState) => {
   [command: string]: (...args: any) => any;
-} = (extensionContext, state) => {
-  const { sidebarProvider } = state;
+} = (state) => {
+  const { sidebarProvider, extensionContext } = state;
   return {
     "konveyor.startAnalysis": async (resource: vscode.Uri) => {
       if (!resource) {
         vscode.window.showErrorMessage("No file selected for analysis.");
         return;
       }
 
-      // Get the file path
       const filePath = resource.fsPath;
 
-      // Perform your analysis logic here
       try {
-        // For example, read the file content
         const fileContent = await vscode.workspace.fs.readFile(resource);
         const contentString = Buffer.from(fileContent).toString("utf8");
 
-        console.log(contentString, fileContent);
-
-        // TODO: Analyze the file content
-        vscode.window.showInformationMessage(`Analyzing file: ${filePath}`);
+        await extensionContext.workspaceState.update(
+          "incidentData",
+          JSON.stringify(generateMockRuleSet()),
+        );
 
-        // Call your analysis function/module
-        // analyzeFileContent(contentString);
+        await analyzeFileContent(contentString, state);
       } catch (error) {
         vscode.window.showErrorMessage(`Failed to analyze file: ${error}`);
       }
@@ -49,10 +94,8 @@
     "konveyor.focusKonveyorInput": async () => {
       const fullScreenTab = getFullScreenTab();
       if (!fullScreenTab) {
-        // focus sidebar
         vscode.commands.executeCommand("konveyor.konveyorGUIView.focus");
       } else {
-        // focus fullscreen
         fullScreenPanel?.reveal();
       }
       // sidebar.webviewProtocol?.request("focusInput", undefined);
@@ -77,28 +120,30 @@
 
       //create the full screen panel
       const panel = vscode.window.createWebviewPanel(
-        "konveyor.konveyorGUIView",
+        "konveyor.konveyorFullScreenView",
         "Konveyor",
         vscode.ViewColumn.One,
         {
           retainContextWhenHidden: true,
           enableScripts: true,
+          localResourceRoots: [
+            vscode.Uri.joinPath(extensionContext.extensionUri, "media"),
+            vscode.Uri.joinPath(extensionContext.extensionUri, "out"),
+          ],
         },
       );
       fullScreenPanel = panel;
 
       //Add content to the panel
-      panel.webview.html = getWebviewContent(
-        extensionContext,
-        sidebarProvider?.webview || panel.webview,
-        true,
-      );
+      panel.webview.html = getWebviewContent(extensionContext, panel.webview, true);
 
-      setupWebviewMessageListener(panel.webview);
+      setupWebviewMessageListener(panel.webview, state, sidebarProvider);
 
       //When panel closes, reset the webview and focus
       panel.onDidDispose(
         () => {
+          state.webviewProviders.delete(sidebarProvider);
+          fullScreenPanel = undefined;
           vscode.commands.executeCommand("konveyor.focusKonveyorInput");
         },
         null,
@@ -297,8 +342,8 @@
   };
 };
 
-export function registerAllCommands(context: vscode.ExtensionContext, state: ExtensionState) {
-  for (const [command, callback] of Object.entries(commandsMap(context, state))) {
-    context.subscriptions.push(vscode.commands.registerCommand(command, callback));
+export function registerAllCommands(state: ExtensionState) {
+  for (const [command, callback] of Object.entries(commandsMap(state))) {
+    state.extensionContext.subscriptions.push(vscode.commands.registerCommand(command, callback));
   }
 }

vscode/src/extensionState.ts

@@ -1,7 +1,21 @@
-// extensionState.ts
 import { KonveyorGUIWebviewViewProvider } from "./KonveyorGUIWebviewViewProvider";
+import * as vscode from "vscode";
+
+export class SharedState {
+  private state: Map<string, any> = new Map();
+
+  get(key: string) {
+    return this.state.get(key);
+  }
+
+  set(key: string, value: any) {
+    this.state.set(key, value);
+  }
+}
 
 export interface ExtensionState {
+  sharedState: SharedState;
+  webviewProviders: Set<KonveyorGUIWebviewViewProvider>;
   sidebarProvider: KonveyorGUIWebviewViewProvider;
-  // Add other shared components as needed
+  extensionContext: vscode.ExtensionContext; // Add this line
 }

vscode/src/webview/components/AnalysisResults.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+interface AnalysisResultsProps {
+  results: string[];
+}
+
+const AnalysisResults: React.FC<AnalysisResultsProps> = ({ results }) => {
+  return (
+    <div className="mt-8">
+      <h2 className="text-2xl font-semibold mb-4">Analysis Results</h2>
+      {results.length === 0 ? (
+        <p className="text-gray-500">No results yet. Start the analysis to see results.</p>
+      ) : (
+        <ul className="space-y-2">
+          {results.map((result, index) => (
+            <li key={index} className="bg-white p-4 rounded-md shadow">
+              {result}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default AnalysisResults;