feat(graph): add project details view (#20466)

Co-authored-by: FrozenPandaz <jasonjean1993@gmail.com>

.gitignore

@@ -19,6 +19,7 @@ jest.debug.config.js
 /graph/client/src/assets/generated-project-graphs
 /graph/client/src/assets/generated-task-graphs
 /graph/client/src/assets/generated-task-inputs
+/graph/client/src/assets/generated-source-maps
 /nx-dev/nx-dev/public/documentation
 /nx-dev/nx-dev/public/images/open-graph
 

graph/client/project.json

@@ -68,6 +68,7 @@
             "graph/client/src/assets/generated-project-graphs/",
             "graph/client/src/assets/generated-task-graphs/",
             "graph/client/src/assets/generated-task-inputs/",
+            "graph/client/src/assets/generated-source-maps/",
             {
               "input": "graph/client/src/assets/dev",
               "output": "/",
@@ -81,6 +82,7 @@
             "graph/client/src/assets/project-graphs/",
             "graph/client/src/assets/task-graphs/",
             "graph/client/src/assets/task-inputs/",
+            "graph/client/src/assets/source-maps/",
             {
               "input": "graph/client/src/assets/dev-e2e",
               "output": "/",
@@ -116,6 +118,11 @@
               "output": "/assets/task-graphs",
               "glob": "e2e.json"
             },
+            {
+              "input": "graph/client/src/assets/source-maps",
+              "output": "/assets/source-maps",
+              "glob": "e2e.json"
+            },
             {
               "input": "graph/client/src/assets/release",
               "output": "/",

graph/client/src/app/fetch-project-graph-service.ts

@@ -34,6 +34,16 @@ export class FetchProjectGraphService implements ProjectGraphService {
     return response.json();
   }
 
+  async getSourceMaps(
+    url: string
+  ): Promise<Record<string, Record<string, string[]>>> {
+    const request = new Request(url, { mode: 'no-cors' });
+
+    const response = await fetch(request);
+
+    return response.json();
+  }
+
   setTaskInputsUrl(url: string) {
     this.taskInputsUrl = url;
   }

graph/client/src/app/interfaces.ts

@@ -12,6 +12,7 @@ export interface WorkspaceData {
   projectGraphUrl: string;
   taskGraphUrl: string;
   taskInputsUrl: string;
+  sourceMapsUrl: string;
 }
 
 export interface WorkspaceLayout {
@@ -25,6 +26,9 @@ export interface ProjectGraphService {
   getTaskGraph: (url: string) => Promise<TaskGraphClientResponse>;
   setTaskInputsUrl?: (url: string) => void;
   getExpandedTaskInputs?: (taskId: string) => Promise<Record<string, string[]>>;
+  getSourceMaps?: (
+    url: string
+  ) => Promise<Record<string, Record<string, string[]>>>;
 }
 
 export interface Environment {

graph/client/src/app/local-project-graph-service.ts

@@ -27,4 +27,10 @@ export class LocalProjectGraphService implements ProjectGraphService {
       resolve(window.expandedTaskInputsResponse[taskId])
     );
   }
+
+  async getSourceMaps(
+    url: string
+  ): Promise<Record<string, Record<string, string[]>>> {
+    return new Promise((resolve) => resolve(window.sourceMapsResponse));
+  }
 }

graph/client/src/app/routes.tsx

@@ -9,6 +9,7 @@ import { ProjectGraphClientResponse } from 'nx/src/command-line/graph/graph';
 /* eslint-enable @nx/enforce-module-boundaries */
 import { getProjectGraphDataService } from './hooks/get-project-graph-data-service';
 import { TasksSidebarErrorBoundary } from './feature-tasks/tasks-sidebar-error-boundary';
+import { ProjectDetails } from '@nx/graph/project-details';
 
 const { appConfig } = getEnvironmentConfig();
 const projectGraphDataService = getProjectGraphDataService();
@@ -47,11 +48,37 @@ const workspaceDataLoader = async (selectedWorkspaceId: string) => {
 };
 
 const taskDataLoader = async (selectedWorkspaceId: string) => {
-  const projectInfo = appConfig.workspaces.find(
+  const workspaceInfo = appConfig.workspaces.find(
+    (graph) => graph.id === selectedWorkspaceId
+  );
+
+  return await projectGraphDataService.getTaskGraph(workspaceInfo.taskGraphUrl);
+};
+
+const sourceMapsLoader = async (selectedWorkspaceId: string) => {
+  const workspaceInfo = appConfig.workspaces.find(
     (graph) => graph.id === selectedWorkspaceId
   );
 
-  return await projectGraphDataService.getTaskGraph(projectInfo.taskGraphUrl);
+  return await projectGraphDataService.getSourceMaps(
+    workspaceInfo.sourceMapsUrl
+  );
+};
+
+const projectDetailsLoader = async (
+  selectedWorkspaceId: string,
+  projectName: string
+) => {
+  const workspaceData = await workspaceDataLoader(selectedWorkspaceId);
+  const sourceMaps = await sourceMapsLoader(selectedWorkspaceId);
+
+  const project = workspaceData.projects.find(
+    (project) => project.name === projectName
+  );
+  return {
+    project,
+    sourceMap: sourceMaps[project.data.root],
+  };
 };
 
 const childRoutes: RouteObject[] = [
@@ -146,6 +173,15 @@ export const devRoutes: RouteObject[] = [
         },
         children: childRoutes,
       },
+      {
+        path: ':selectedWorkspaceId/project-details/:projectName',
+        id: 'selectedProjectDetails',
+        element: <ProjectDetails />,
+        loader: async ({ request, params }) => {
+          const projectName = params.projectName;
+          return projectDetailsLoader(params.selectedWorkspaceId, projectName);
+        },
+      },
     ],
   },
 ];
@@ -174,4 +210,13 @@ export const releaseRoutes: RouteObject[] = [
       ...childRoutes,
     ],
   },
+  {
+    path: 'project-details/:projectName',
+    id: 'selectedProjectDetails',
+    element: <ProjectDetails />,
+    loader: async ({ request, params }) => {
+      const projectName = params.projectName;
+      return projectDetailsLoader(appConfig.defaultWorkspaceId, projectName);
+    },
+  },
 ];

graph/client/src/assets/release/environment.js

@@ -13,6 +13,7 @@ window.appConfig = {
       projectGraphUrl: 'assets/project-graphs/e2e.json',
       taskGraphUrl: 'assets/task-graphs/e2e.json',
       taskInputsUrl: 'assets/task-inputs/e2e.json',
+      sourceMapsUrl: 'assets/source-maps/e2e.json',
     },
   ],
   defaultWorkspaceId: 'local',