Add Insights (zero-effort issues)

Signed-off-by: Marek Aufart <[email protected]>

Author: aufi

src/Routes.tsx

@@ -6,6 +6,7 @@ import { Bullseye, Spinner } from "@patternfly/react-core";
 // At least one page should not have lazy() for not having "[mini-css-extract-plugin] Conflicting order." error
 const ApplicationList = lazy(() => import("./pages/application-list"));
 const IssuesList = lazy(() => import("./pages/issues-list"));
+const InsightsList = lazy(() => import("./pages/insights-list"));
 const DependenciesList = lazy(() => import("./pages/dependencies-list"));
 const AppEdit = lazy(() => import("./pages/application-details"));
 const AppEditDashboard = lazy(
@@ -51,6 +52,22 @@ export const AppRoutes = () => {
       path: "/issues/applications/:applicationId",
       hasDescendant: false,
     },
+    // Insights
+    {
+      Component: InsightsList,
+      path: "/insights",
+      hasDescendant: false,
+    },
+    {
+      Component: InsightsList,
+      path: "/insights/applications",
+      hasDescendant: false,
+    },
+    {
+      Component: InsightsList,
+      path: "/insights/applications/:applicationId",
+      hasDescendant: false,
+    },
     // Dependencies
     {
       Component: DependenciesList,

src/api/report.ts

@@ -5,6 +5,7 @@ export interface ReportDto {
     rulesets?: RulesetDto[];
     depItems?: DependencyItemDto[];
     issues?: IssueDto[];
+    insights?: IssueDto[];
     dependencies?: DependencyDto[];
     tags?: TagDto[];
 }

src/layout/sidebar.tsx

@@ -38,6 +38,20 @@ export const SidebarApp: React.FC = () => {
             Issues
           </NavLink>
         </NavList>
+        <NavList>
+          <NavLink
+            to={
+              !currentContext
+                ? "/insights/applications"
+                : "/insights/applications/" + currentContext.key
+            }
+            className={({ isActive }) =>
+              css("pf-v5-c-nav__link", isActive ? "pf-m-current" : "")
+            }
+          >
+            Insights
+          </NavLink>
+        </NavList>
         <NavList>
           <NavLink
             to={

src/pages/application-details/application-details.tsx

@@ -44,6 +44,10 @@ export const ApplicationEdit: React.FC = () => {
         title: "Issues",
         path: `/applications/${application?.id}/issues`,
       },
+      {
+        title: "Insights",
+        path: `/applications/${application?.id}/insights`,
+      },
       {
         title: "Dependencies",
         path: `/applications/${application?.id}/dependencies`,
@@ -53,12 +57,6 @@ export const ApplicationEdit: React.FC = () => {
         path: `/applications/${application?.id}/technologies`,
       },
     ];
-    if (application?.insights && application?.insights?.length > 0) {
-      result.push({
-        title: "Insights",
-        path: `/applications/${application?.id}/insights`,
-      })
-    }
     return result;
   }, [
     application,

src/pages/application-details/pages/insights/insights.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useOutletContext } from "react-router-dom";
 
-import { PageSection } from "@patternfly/react-core";
+import { PageSection, Title } from "@patternfly/react-core";
 
 import { ApplicationProcessed } from "@app/models/api-enriched";
 import { ViolationsTable } from "@app/shared/components";
@@ -11,6 +11,9 @@ export const Insights: React.FC = () => {
 
   return (
     <PageSection>
+      <Title headingLevel="h1" size="lg" className="pf-v5-u-mb-md">
+        Insights (Zero Effort Issues)
+      </Title>
       <ViolationsTable applicationId={application?.id} insightsMode={true}/>
     </PageSection>
   );

src/pages/insights-list/index.ts

@@ -0,0 +1 @@
+export { InsightsList as default } from "./insights-list";

src/pages/insights-list/insights-list.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { useMatch, useNavigate } from "react-router-dom";
+
+import {
+  Divider,
+  PageSection,
+  PageSectionVariants,
+  Text,
+  TextContent,
+  Toolbar,
+  ToolbarContent,
+  ToolbarItem,
+} from "@patternfly/react-core";
+
+import { ALL_APPLICATIONS_ID } from "@app/Constants";
+import { Context, SimpleContextSelector } from "@app/context/simple-context";
+import { ViolationsTable } from "@app/shared/components/violations-table";
+
+export const InsightsList: React.FC = () => {
+  const matchInsightsPage = useMatch("/insights");
+  const matchAllApplicationsPage = useMatch("/insights/applications");
+  const matchSingleApplicationPage = useMatch(
+    "/insights/applications/:applicationId"
+  );
+
+  const applicationId = matchInsightsPage
+    ? undefined
+    : matchAllApplicationsPage
+    ? ALL_APPLICATIONS_ID
+    : matchSingleApplicationPage?.params.applicationId;
+
+  const navigate = useNavigate();
+
+  const onContextChange = (context: Context) => {
+    navigate("/insights/applications/" + context.key);
+  };
+
+  return (
+    <>
+      <PageSection padding={{ default: "noPadding" }}>
+        <Toolbar>
+          <ToolbarContent>
+            <ToolbarItem>Application:</ToolbarItem>
+            <ToolbarItem>
+              <SimpleContextSelector
+                contextKeyFromURL={applicationId}
+                onChange={onContextChange}
+              />
+            </ToolbarItem>
+          </ToolbarContent>
+        </Toolbar>
+      </PageSection>
+      <Divider />
+      <PageSection variant={PageSectionVariants.light}>
+        <TextContent>
+          <Text component="h1">Insights</Text>
+          <Text component="small">
+            This report provides a concise summary of all insights identified - issues with zero effort.
+          </Text>
+        </TextContent>
+      </PageSection>
+      <PageSection variant={PageSectionVariants.default}>
+        <ViolationsTable applicationId={applicationId} insightsMode={true} />
+      </PageSection>
+    </>
+  );
+};

src/queries/report.ts

@@ -183,7 +183,8 @@ export const useAllApplications = () => {
           (a.issues ? issuesFromIssuesDto(a.id, a.issues) : [] as IssueProcessed[]);
 
         const insights: IssueProcessed[] = a.rulesets ? 
-          issuesFromRulesetsDto(a.id, a.files, a.rulesets, true) : [] as IssueProcessed[];
+          issuesFromRulesetsDto(a.id, a.files, a.rulesets, true).filter(insight => insight.effort === 0) : 
+          (a.insights ? issuesFromIssuesDto(a.id, a.insights) : [] as IssueProcessed[]);
 
         const tags: TagDto[] = a.rulesets ?
           tagsFromRulesetsDto(a.rulesets) :