Move Analysis Details to full page view

Signed-off-by: Radoslaw Szwajkowski <rszwajko@redhat.com>
konveyor · May 31, 2024 · 46a4f99 · 46a4f99
1 parent 66b06b0
commit 46a4f99
Show file tree

Hide file tree

Showing 8 changed files with 82 additions and 21 deletions.
diff --git a/client/src/app/Paths.ts b/client/src/app/Paths.ts
@@ -1,6 +1,8 @@
 export const DevPaths = {
   // Developer perspective
   applications: "/applications",
+  applicationsAnalysisDetails:
+    "/applications/:applicationId/analysis-details/:taskId",
   applicationsAnalysisTab: "/applications/analysis-tab",
   applicationsAssessmentTab: "/applications/assessment-tab",
   applicationsImports: "/applications/application-imports",
@@ -86,3 +88,8 @@ export interface ReviewRoute {
 export interface ImportSummaryRoute {
   importId: string;
 }
+
+export interface AnalysisDetailsRoute {
+  applicationId: string;
+  taskId: string;
+}
diff --git a/client/src/app/Routes.tsx b/client/src/app/Routes.tsx
@@ -24,7 +24,9 @@ const ManageImports = lazy(() => import("./pages/applications/manage-imports"));
 const ImportDetails = lazy(
   () => import("./pages/applications/manage-imports-details")
 );
-
+const AnalysisDetails = lazy(
+  () => import("./pages/applications/analysis-details")
+);
 const Reports = lazy(() => import("./pages/reports"));
 const Controls = lazy(() => import("./pages/controls"));
 const Identities = lazy(() => import("./pages/identities"));
@@ -74,6 +76,11 @@ export const devRoutes: IRoute<DevPathValues>[] = [
     comp: ImportDetails,
     exact: false,
   },
+  {
+    path: Paths.applicationsAnalysisDetails,
+    comp: AnalysisDetails,
+    exact: false,
+  },
   {
     path: Paths.applicationsImports,
     comp: ManageImports,

diff --git a/client/src/app/components/BreadCrumbPath.tsx b/client/src/app/components/BreadCrumbPath.tsx
@@ -3,7 +3,7 @@ import { Link } from "react-router-dom";
 import { Breadcrumb, BreadcrumbItem, Button } from "@patternfly/react-core";
 
 export interface BreadCrumbPathProps {
-  breadcrumbs: { title: string; path: string | (() => void) }[];
+  breadcrumbs: { title: string; path?: string | (() => void) }[];
 }
 
 export const BreadCrumbPath: React.FC<BreadCrumbPathProps> = ({
@@ -12,6 +12,10 @@ export const BreadCrumbPath: React.FC<BreadCrumbPathProps> = ({
   return (
     <Breadcrumb>
       {breadcrumbs.map((crumb, i, { length }) => {
+        if (!crumb.path) {
+          return <BreadcrumbItem key={i}>{crumb.title}</BreadcrumbItem>;
+        }
+
         const isLast = i === length - 1;
 
         const link =

diff --git a/client/src/app/components/PageHeader.tsx b/client/src/app/components/PageHeader.tsx
@@ -13,7 +13,7 @@ import { HorizontalNav } from "./HorizontalNav";
 export interface PageHeaderProps {
   title: string;
   description?: React.ReactNode;
-  breadcrumbs: { title: string; path: string | (() => void) }[];
+  breadcrumbs: { title: string; path?: string | (() => void) }[];
   btnActions?: React.ReactNode;
   navItems?: { title: string; path: string }[];
 }

diff --git a/client/src/app/components/SimpleDocumentViewer.tsx b/client/src/app/components/SimpleDocumentViewer.tsx
@@ -61,7 +61,7 @@ export const SimpleDocumentViewer = ({
   documentId,
   downloadFilename,
   language = Language.yaml,
-  height = "450px",
+  height,
 }: ISimpleDocumentViewerProps) => {
   const editorRef = React.useRef<ControlledEditor>();
   const [currentLanguage, setCurrentLanguage] = React.useState(language);
@@ -118,7 +118,7 @@ export const SimpleDocumentViewer = ({
       isDownloadEnabled
       isLineNumbersVisible
       isReadOnly
-      height={height === "full" ? "100%" : height}
+      height={height ?? "sizeToFit"}
       downloadFileName={downloadFilename}
       language={currentLanguage}
       code={code}

diff --git a/client/src/app/pages/applications/analysis-details/AnalysisDetails.tsx b/client/src/app/pages/applications/analysis-details/AnalysisDetails.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import { useParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+import { PageSection } from "@patternfly/react-core";
+
+import { AnalysisDetailsRoute, Paths } from "@app/Paths";
+import { PageHeader } from "@app/components/PageHeader";
+import { formatPath } from "@app/utils/utils";
+import { SimpleDocumentViewer } from "@app/components/SimpleDocumentViewer";
+
+export const AnalysisDetails: React.FC = () => {
+  // i18
+  const { t } = useTranslation();
+
+  // Router
+  const { applicationId, taskId } = useParams<AnalysisDetailsRoute>();
+
+  return (
+    <>
+      <PageSection variant="light">
+        <PageHeader
+          title={t("terms.errorReport")}
+          breadcrumbs={[
+            {
+              title: t("terms.applications"),
+              path: Paths.applications,
+            },
+            {
+              title: `[App name ${applicationId}]`,
+            },
+            {
+              title: t("actions.analysisDetails"),
+              path: formatPath(Paths.applicationsAnalysisDetails, {
+                applicationId: applicationId,
+                taskId: taskId,
+              }),
+            },
+          ]}
+        />
+      </PageSection>
+      <PageSection>
+        <SimpleDocumentViewer documentId={Number(taskId)} />
+      </PageSection>
+    </>
+  );
+};
diff --git a/client/src/app/pages/applications/analysis-details/index.ts b/client/src/app/pages/applications/analysis-details/index.ts
@@ -0,0 +1 @@
+export { AnalysisDetails as default } from "./AnalysisDetails";
diff --git a/client/src/app/pages/applications/applications-table/applications-table.tsx b/client/src/app/pages/applications/applications-table/applications-table.tsx
@@ -104,7 +104,6 @@ import { ApplicationDependenciesForm } from "@app/components/ApplicationDependen
 import { useState } from "react";
 import { ApplicationAnalysisStatus } from "../components/application-analysis-status";
 import { ApplicationDetailDrawer } from "../components/application-detail-drawer/application-detail-drawer";
-import { SimpleDocumentViewerModal } from "@app/components/SimpleDocumentViewer";
 import { AnalysisWizard } from "../analysis-wizard/analysis-wizard";
 import { TaskGroupProvider } from "../analysis-wizard/components/TaskGroupContext";
 import { ApplicationIdentityForm } from "../components/application-identity-form/application-identity-form";
@@ -553,11 +552,6 @@ export const ApplicationsTable: React.FC = () => {
   const [isApplicationImportModalOpen, setIsApplicationImportModalOpen] =
     useState(false);
 
-  const [taskToView, setTaskToView] = useState<{
-    name: string;
-    task: number | undefined;
-  }>();
-
   const userScopes: string[] = token?.scope.split(" ") || [],
     importWriteAccess = checkAccess(userScopes, importsWriteScopes),
     applicationWriteAccess = checkAccess(userScopes, applicationsWriteScopes),
@@ -1072,11 +1066,17 @@ export const ApplicationsTable: React.FC = () => {
                               ? [
                                   {
                                     title: t("actions.analysisDetails"),
-                                    onClick: () =>
-                                      setTaskToView({
-                                        name: application.name,
-                                        task: getTask(application)?.id,
-                                      }),
+                                    onClick: () => {
+                                      history.push(
+                                        formatPath(
+                                          Paths.applicationsAnalysisDetails,
+                                          {
+                                            applicationId: application.id,
+                                            taskId: getTask(application)?.id,
+                                          }
+                                        )
+                                      );
+                                    },
                                   },
                                 ]
                               : []),
@@ -1153,11 +1153,6 @@ export const ApplicationsTable: React.FC = () => {
             onClose={() => setSaveApplicationModalState(null)}
           />
         )}
-        <SimpleDocumentViewerModal
-          title={`Analysis details for ${taskToView?.name}`}
-          documentId={taskToView?.task}
-          onClose={() => setTaskToView(undefined)}
-        />
         <Modal
           isOpen={isDependenciesModalOpen}
           variant="medium"