Use SARIF viewer extension for analysis results (#1125)

Author: charisk

extensions/ql-vscode/src/pure/interface-types.ts

@@ -378,7 +378,8 @@ export type FromRemoteQueriesMessage =
   | OpenFileMsg
   | OpenVirtualFileMsg
   | RemoteQueryDownloadAnalysisResultsMessage
-  | RemoteQueryDownloadAllAnalysesResultsMessage;
+  | RemoteQueryDownloadAllAnalysesResultsMessage
+  | RemoteQueryViewAnalysisResultsMessage;
 
 export type ToRemoteQueriesMessage =
   | SetRemoteQueryResultMessage
@@ -412,3 +413,8 @@ export interface RemoteQueryDownloadAllAnalysesResultsMessage {
   t: 'remoteQueryDownloadAllAnalysesResults';
   analysisSummaries: AnalysisSummary[];
 }
+
+export interface RemoteQueryViewAnalysisResultsMessage {
+  t: 'remoteQueryViewAnalysisResults';
+  analysisSummary: AnalysisSummary
+}

extensions/ql-vscode/src/remote-queries/remote-queries-interface.ts

@@ -5,6 +5,8 @@ import {
   ViewColumn,
   Uri,
   workspace,
+  extensions,
+  commands,
 } from 'vscode';
 import * as path from 'path';
 
@@ -14,6 +16,7 @@ import {
   FromRemoteQueriesMessage,
   RemoteQueryDownloadAnalysisResultsMessage,
   RemoteQueryDownloadAllAnalysesResultsMessage,
+  RemoteQueryViewAnalysisResultsMessage,
 } from '../pure/interface-types';
 import { Logger } from '../logging';
 import { getHtmlForWebview } from '../interface-utils';
@@ -199,6 +202,9 @@ export class RemoteQueriesInterfaceManager {
       case 'remoteQueryDownloadAllAnalysesResults':
         await this.downloadAllAnalysesResults(msg);
         break;
+      case 'remoteQueryViewAnalysisResults':
+        await this.viewAnalysisResults(msg);
+        break;
       default:
         assertNever(msg);
     }
@@ -217,6 +223,28 @@ export class RemoteQueriesInterfaceManager {
       results => this.setAnalysisResults(results));
   }
 
+  private async viewAnalysisResults(msg: RemoteQueryViewAnalysisResultsMessage): Promise<void> {
+    const downloadLink = msg.analysisSummary.downloadLink;
+    const filePath = path.join(tmpDir.name, downloadLink.id, downloadLink.innerFilePath || '');
+
+    const sarifViewerExtensionId = 'MS-SarifVSCode.sarif-viewer';
+
+    const sarifExt = extensions.getExtension(sarifViewerExtensionId);
+    if (!sarifExt) {
+      // Ask the user if they want to install the extension to view the results.
+      void commands.executeCommand('workbench.extensions.installExtension', sarifViewerExtensionId);
+      return;
+    }
+
+    if (!sarifExt.isActive) {
+      await sarifExt.activate();
+    }
+
+    await sarifExt.exports.openLogs([
+      Uri.file(filePath),
+    ]);
+  }
+
   public async setAnalysisResults(analysesResults: AnalysisResults[]): Promise<void> {
     if (this.panel?.active) {
       await this.postMessage({

extensions/ql-vscode/src/remote-queries/view/RemoteQueries.tsx

@@ -17,6 +17,7 @@ import DownloadButton from './DownloadButton';
 import { AnalysisResults } from '../shared/analysis-result';
 import DownloadSpinner from './DownloadSpinner';
 import CollapsibleItem from './CollapsibleItem';
+import { FileSymlinkFileIcon } from '@primer/octicons-react';
 
 const numOfReposInContractedMode = 10;
 
@@ -47,6 +48,13 @@ const downloadAllAnalysesResults = (query: RemoteQueryResult) => {
   });
 };
 
+const viewAnalysisResults = (analysisSummary: AnalysisSummary) => {
+  vscode.postMessage({
+    t: 'remoteQueryViewAnalysisResults',
+    analysisSummary
+  });
+};
+
 const openQueryFile = (queryResult: RemoteQueryResult) => {
   vscode.postMessage({
     t: 'openFile',
@@ -110,7 +118,7 @@ const SummaryTitleNoResults = () => (
   </div>
 );
 
-const SummaryItemDownload = ({
+const SummaryItemDownloadAndView = ({
   analysisSummary,
   analysisResults
 }: {
@@ -130,7 +138,13 @@ const SummaryItemDownload = ({
     </>;
   }
 
-  return (<></>);
+  return <>
+    <HorizontalSpace size={2} />
+    <a className="vscode-codeql__analysis-result-file-link"
+      onClick={() => viewAnalysisResults(analysisSummary)} >
+      <FileSymlinkFileIcon size={16} />
+    </a>
+  </>;
 };
 
 const SummaryItem = ({
@@ -145,7 +159,7 @@ const SummaryItem = ({
     <span className="vscode-codeql__analysis-item">{analysisSummary.nwo}</span>
     <span className="vscode-codeql__analysis-item"><Badge text={analysisSummary.resultCount.toString()} /></span>
     <span className="vscode-codeql__analysis-item">
-      <SummaryItemDownload
+      <SummaryItemDownloadAndView
         analysisSummary={analysisSummary}
         analysisResults={analysisResults} />
     </span>

extensions/ql-vscode/src/remote-queries/view/remoteQueries.css

@@ -60,3 +60,7 @@
   padding-top: 1em;
   font-size: x-small;
 }
+
+.vscode-codeql__analysis-result-file-link {
+  vertical-align: middle;
+}