✨ Issues: Add affected file details modal with incident details and code snippet viewer, adjust for hub change from IssueReport to AppReport

client/config/webpack.common.ts

@@ -3,6 +3,7 @@ import CopyPlugin from "copy-webpack-plugin";
 import Dotenv from "dotenv-webpack";
 import { TsconfigPathsPlugin } from "tsconfig-paths-webpack-plugin";
 import { Configuration, WatchIgnorePlugin } from "webpack";
+import MonacoWebpackPlugin from "monaco-editor-webpack-plugin";
 
 const BG_IMAGES_DIRNAME = "images";
 
@@ -162,6 +163,17 @@ const config: Configuration = {
           exports: "xmllint",
         },
       },
+      // For monaco-editor-webpack-plugin
+      {
+        test: /\.css$/,
+        include: [path.resolve(__dirname, "../../node_modules/monaco-editor")],
+        use: ["style-loader", "css-loader"],
+      },
+      // For monaco-editor-webpack-plugin
+      {
+        test: /\.ttf$/,
+        type: "asset/resource",
+      },
     ],
   },
   plugins: [
@@ -195,6 +207,7 @@ const config: Configuration = {
     new WatchIgnorePlugin({
       paths: [/\.js$/, /\.d\.ts$/],
     }),
+    new MonacoWebpackPlugin(),
   ],
   resolve: {
     alias: {

client/package.json

@@ -22,6 +22,7 @@
     "@migtools/lib-ui": "^8.8.0",
     "@patternfly/patternfly": "^4.224.2",
     "@patternfly/react-charts": "^6.67.1",
+    "@patternfly/react-code-editor": "^4.82.115",
     "@patternfly/react-core": "^4.214.1",
     "@patternfly/react-table": "^4.83.1",
     "@patternfly/react-tokens": "^4.66.1",
@@ -38,13 +39,16 @@
     "i18next-http-backend": "^1.0.22",
     "js-yaml": "^4.1.0",
     "keycloak-js": "^18.0.1",
+    "monaco-editor": "^0.39.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-hook-form": "^7.43.1",
     "react-hot-loader": "^4.13.1",
     "react-i18next": "^11.8.5",
     "react-image-file-resizer": "^0.4.8",
+    "react-markdown": "^8.0.7",
     "react-measure": "^2.5.2",
+    "react-monaco-editor": "^0.52.0",
     "react-router-dom": "^5.2.0",
     "typesafe-actions": "^5.1.0",
     "web-vitals": "^0.2.4",
@@ -89,6 +93,7 @@
     "jest-resolve": "^27.4.6",
     "jest-watch-typeahead": "^1.0.0",
     "mini-css-extract-plugin": "^2.5.2",
+    "monaco-editor-webpack-plugin": "^7.0.1",
     "prettier": "^2.2.1",
     "pretty-quick": "^3.1.3",
     "raw-loader": "^4.0.2",

client/src/app/Constants.ts

@@ -240,4 +240,5 @@ export enum TableURLParamKeyPrefix {
   issues = "i",
   affectedApps = "a",
   affectedFiles = "f",
+  remainingIncidents = "r",
 }

client/src/app/api/models.ts

@@ -576,16 +576,24 @@ interface AnalysisIssuesCommonFields {
 // Hub type: Issue
 export interface AnalysisIssue extends AnalysisIssuesCommonFields {
   id: number;
-  createTime?: string; // ISO-8601 timestamp
-  createUser?: string;
-  updateUser?: string;
 }
 
-// Hub type: IssueReport - Issues collated by application (but filtered by ruleset/rule)
-export interface AnalysisIssueReport extends AnalysisIssue {
-  application: { id: number; name: string; effort: number };
-  files: number;
+// Hub type: AppReport - Issues collated by application (but filtered by ruleset/rule)
+// When filtered by ruleset/rule, this object matches exactly one issue and includes that issue's details
+export interface AnalysisAppReport extends AnalysisIssue {
+  id: number;
+  name: string;
+  description: string;
+  effort: number;
+  businessService: string;
   incidents: number;
+  files: number;
+  issue: {
+    id: number;
+    name: string;
+    ruleset: string;
+    rule: string;
+  };
 }
 
 // Hub type: RuleReport - Issues collated by ruleset/rule
@@ -599,12 +607,21 @@ export interface AnalysisRuleReport extends BaseAnalysisRuleReport {
 
 // Hub type: FileReport - Incidents collated by file
 export interface AnalysisFileReport {
-  issueId: string;
+  issueId: number;
   file: string;
   incidents: number;
   effort: number;
 }
 
+export interface AnalysisIncident {
+  id: number;
+  file: string;
+  line: number;
+  message: string;
+  codeSnip: string;
+  facts: Record<string, string>; // TODO what's actually in here?
+}
+
 export type TicketStatus = "" | "New" | "In Progress" | "Done" | "Error";
 
 export type AggregateTicketStatus =

client/src/app/api/rest.ts

@@ -4,9 +4,10 @@ import { APIClient } from "@app/axios-config";
 import {
   AnalysisDependency,
   BaseAnalysisRuleReport,
-  AnalysisIssueReport,
   AnalysisIssue,
+  AnalysisAppReport,
   AnalysisFileReport,
+  AnalysisIncident,
   Application,
   ApplicationAdoptionPlan,
   ApplicationDependency,
@@ -79,9 +80,10 @@ export const CACHE = HUB + "/cache/m2";
 
 export const ANALYSIS_DEPENDENCIES = HUB + "/analyses/dependencies";
 export const ANALYSIS_REPORT_RULES = HUB + "/analyses/report/rules";
-export const ANALYSIS_REPORT_ISSUES = HUB + "/analyses/report/issues";
+export const ANALYSIS_REPORT_APPS = HUB + "/analyses/report/applications";
 export const ANALYSIS_REPORT_FILES = HUB + "/analyses/report/issues/:id/files";
 export const ANALYSIS_ISSUES = HUB + "/analyses/issues";
+export const ANALYSIS_ISSUE_INCIDENTS = HUB + "/analyses/issues/:id/incidents";
 
 // PATHFINDER
 export const PATHFINDER = "/hub/pathfinder";
@@ -558,8 +560,8 @@ export const getHubPaginatedResult = <T>(
 export const getRuleReports = (params: HubRequestParams = {}) =>
   getHubPaginatedResult<BaseAnalysisRuleReport>(ANALYSIS_REPORT_RULES, params);
 
-export const getIssueReports = (params: HubRequestParams = {}) =>
-  getHubPaginatedResult<AnalysisIssueReport>(ANALYSIS_REPORT_ISSUES, params);
+export const getAppReports = (params: HubRequestParams = {}) =>
+  getHubPaginatedResult<AnalysisAppReport>(ANALYSIS_REPORT_APPS, params);
 
 export const getIssues = (params: HubRequestParams = {}) =>
   getHubPaginatedResult<AnalysisIssue>(ANALYSIS_ISSUES, params);
@@ -575,6 +577,14 @@ export const getFileReports = (
       )
     : Promise.reject();
 
+export const getIncidents = (issueId?: number, params: HubRequestParams = {}) =>
+  issueId
+    ? getHubPaginatedResult<AnalysisIncident>(
+        ANALYSIS_ISSUE_INCIDENTS.replace("/:id/", `/${String(issueId)}/`),
+        params
+      )
+    : Promise.reject();
+
 export const getDependencies = (params: HubRequestParams = {}) =>
   getHubPaginatedResult<AnalysisDependency>(ANALYSIS_DEPENDENCIES, params);
 

client/src/app/components/markdown-pf-components.tsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { Components } from "react-markdown";
+import { Text } from "@patternfly/react-core";
+
+export const markdownPFComponents: Components = {
+  h1: (props) => <Text component="h1" {...props} />,
+  h2: (props) => <Text component="h2" {...props} />,
+  h3: (props) => <Text component="h3" {...props} />,
+  h4: (props) => <Text component="h4" {...props} />,
+  h5: (props) => <Text component="h5" {...props} />,
+  h6: (props) => <Text component="h6" {...props} />,
+  p: (props) => <Text component="p" {...props} />,
+  a: (props) => <Text component="a" {...props} />,
+  small: (props) => <Text component="small" {...props} />,
+  blockquote: (props) => <Text component="blockquote" {...props} />,
+  pre: (props) => <Text component="pre" {...props} />,
+};