Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(graph): show partial project graph & errors in graph app (#22838)
- Loading branch information
Showing
27 changed files
with
615 additions
and
76 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,27 +1,100 @@ | ||
| import { useEnvironmentConfig } from '@nx/graph/shared'; | ||
| import { ProjectDetailsHeader } from 'graph/project-details/src/lib/project-details-header'; | ||
| import { useRouteError } from 'react-router-dom'; | ||
| import { ProjectDetailsHeader } from '@nx/graph/project-details'; | ||
| import { | ||
| fetchProjectGraph, | ||
| getProjectGraphDataService, | ||
| useEnvironmentConfig, | ||
| useIntervalWhen, | ||
| } from '@nx/graph/shared'; | ||
| import { ErrorRenderer } from '@nx/graph/ui-components'; | ||
| import { | ||
| isRouteErrorResponse, | ||
| useParams, | ||
| useRouteError, | ||
| } from 'react-router-dom'; | ||
|
|
||
| export function ErrorBoundary() { | ||
| let error = useRouteError(); | ||
| console.error(error); | ||
| const environment = useEnvironmentConfig()?.environment; | ||
|
|
||
| let message = 'Disconnected from graph server. '; | ||
| if (environment === 'nx-console') { | ||
| message += 'Please refresh the page.'; | ||
| const { environment, appConfig, watch } = useEnvironmentConfig(); | ||
| const projectGraphDataService = getProjectGraphDataService(); | ||
| const params = useParams(); | ||
|
|
||
| const hasErrorData = | ||
| isRouteErrorResponse(error) && error.data.errors?.length > 0; | ||
|
|
||
| useIntervalWhen( | ||
| async () => { | ||
| fetchProjectGraph(projectGraphDataService, params, appConfig).then( | ||
| (data) => { | ||
| if ( | ||
| isRouteErrorResponse(error) && | ||
| error.data.id === 'project-not-found' && | ||
| data.projects.find((p) => p.name === error.data.projectName) | ||
| ) { | ||
| window.location.reload(); | ||
| } | ||
| return; | ||
| } | ||
| ); | ||
| }, | ||
| 1000, | ||
| watch | ||
| ); | ||
|
|
||
| let message: string | JSX.Element; | ||
| let stack: string; | ||
| if (isRouteErrorResponse(error) && error.data.id === 'project-not-found') { | ||
| message = ( | ||
| <p> | ||
| Project <code>{error.data.projectName}</code> not found. | ||
| </p> | ||
| ); | ||
| } else { | ||
| message += 'Please rerun your command and refresh the page.'; | ||
| message = 'Disconnected from graph server. '; | ||
| if (environment === 'nx-console') { | ||
| message += 'Please refresh the page.'; | ||
| } else { | ||
| message += 'Please rerun your command and refresh the page.'; | ||
| } | ||
| stack = error.toString(); | ||
| } | ||
|
|
||
| return ( | ||
| <div className="flex h-screen w-full flex-col items-center"> | ||
| <ProjectDetailsHeader /> | ||
| <h1 className="mb-4 text-4xl dark:text-slate-100">Error</h1> | ||
| <div> | ||
| <p className="mb-4 text-lg dark:text-slate-200">{message}</p> | ||
| <p className="text-sm">Error message: {error?.toString()}</p> | ||
| {environment !== 'nx-console' && <ProjectDetailsHeader />} | ||
| <div className="mx-auto mb-8 w-full max-w-6xl flex-grow px-8"> | ||
| <h1 className="mb-4 text-4xl dark:text-slate-100">Error</h1> | ||
| <div> | ||
| <ErrorWithStack message={message} stack={stack} /> | ||
| </div> | ||
| {hasErrorData && ( | ||
| <div> | ||
| <p className="text-md mb-4 dark:text-slate-200"> | ||
| Nx encountered the following issues while processing the project | ||
| graph:{' '} | ||
| </p> | ||
| <div> | ||
| <ErrorRenderer errors={error.data.errors} /> | ||
| </div> | ||
| </div> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| function ErrorWithStack({ | ||
| message, | ||
| stack, | ||
| }: { | ||
| message: string | JSX.Element; | ||
| stack?: string; | ||
| }) { | ||
| return ( | ||
| <div> | ||
| <p className="mb-4 text-lg dark:text-slate-100">{message}</p> | ||
| {stack && <p className="text-sm">Error message: {stack}</p>} | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,3 @@ | ||
| export * from './lib/project-details-wrapper'; | ||
| export * from './lib/project-details-page'; | ||
| export * from './lib/project-details-header'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.