[8.8] [APM] Avoid re-mounting the entire application on every url cha…

…nge (#156171) (#156309) # Backport This will backport the following commits from `main` to `8.8`: - [[APM] Avoid re-mounting the entire application on every url change (#156171)](#156171)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Søren Louv-Jansen <[email protected]>
elastic · May 1, 2023 · 775569b · 775569b
1 parent 8d5b222
commit 775569b
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 22 deletions.
diff --git a/x-pack/plugins/apm/ftr_e2e/cypress/e2e/read_only_user/navigation.cy.ts b/x-pack/plugins/apm/ftr_e2e/cypress/e2e/read_only_user/navigation.cy.ts
@@ -0,0 +1,73 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import url from 'url';
+import { synthtrace } from '../../../synthtrace';
+import { opbeans } from '../../fixtures/synthtrace/opbeans';
+
+const start = '2021-10-10T00:00:00.000Z';
+const end = '2021-10-10T00:15:00.000Z';
+
+const serviceOverview = url.format({
+  pathname: '/app/apm/services/opbeans-java/overview',
+  query: {
+    comparisonEnabled: 'true',
+    environment: 'ENVIRONMENT_ALL',
+    rangeFrom: start,
+    rangeTo: end,
+    offset: '1d',
+  },
+});
+
+describe('When navigating between pages', () => {
+  before(() => {
+    synthtrace.index(
+      opbeans({
+        from: new Date(start).getTime(),
+        to: new Date(end).getTime(),
+      })
+    );
+  });
+
+  after(() => {
+    synthtrace.clean();
+  });
+
+  beforeEach(() => {
+    cy.loginAsViewerUser();
+  });
+
+  it('should only load certain resources once', () => {
+    cy.intercept('**/internal/apm/has_data').as('hasDataRequest');
+    cy.intercept('**/internal/apm/services/opbeans-java/metadata/icons**').as(
+      'serviceIconsRequest'
+    );
+    cy.intercept('**/apm/fleet/has_apm_policies').as('apmPoliciesRequest');
+
+    // Overview page
+    cy.visitKibana(serviceOverview);
+    cy.get('.euiTab-isSelected').should('have.text', 'Overview');
+
+    // it should load resources once
+    cy.get('@hasDataRequest.all').should('have.length', 1);
+    cy.get('@serviceIconsRequest.all').should('have.length', 1);
+    cy.get('@apmPoliciesRequest.all').should('have.length', 1);
+
+    // Navigate to errors page
+    cy.contains('.euiTab', 'Errors').click();
+    cy.get('.euiTab-isSelected').should('have.text', 'Errors');
+
+    // page have loaded correctly
+    cy.get('.euiLoadingChart').should('not.exist');
+    cy.get('[data-test-subj="errorDistribution"]').should('exist');
+
+    // it should not load resources again
+    cy.get('@hasDataRequest.all').should('have.length', 1);
+    cy.get('@serviceIconsRequest.all').should('have.length', 1);
+    cy.get('@apmPoliciesRequest.all').should('have.length', 1);
+  });
+});
diff --git a/x-pack/plugins/apm/public/application/routes/index.tsx b/x-pack/plugins/apm/public/application/routes/index.tsx
diff --git a/x-pack/plugins/apm/public/components/routing/apm_error_boundary.tsx b/x-pack/plugins/apm/public/components/routing/apm_error_boundary.tsx
@@ -14,18 +14,27 @@ import { ApmPluginStartDeps } from '../../plugin';
 
 export function ApmErrorBoundary({ children }: { children?: React.ReactNode }) {
   const location = useLocation();
-  return <ErrorBoundary key={location.pathname}>{children}</ErrorBoundary>;
+  return <ErrorBoundary pathname={location.pathname}>{children}</ErrorBoundary>;
 }
 
 class ErrorBoundary extends React.Component<
-  { children?: React.ReactNode },
+  { children?: React.ReactNode; pathname: string },
   { error?: Error },
   {}
 > {
   public state: { error?: Error } = {
     error: undefined,
   };
 
+  componentDidUpdate(prevProps: { pathname: string }) {
+    if (
+      this.props.pathname !== prevProps.pathname &&
+      this.state.error !== undefined
+    ) {
+      this.setState({ error: undefined });
+    }
+  }
+
   static getDerivedStateFromError(error: Error) {
     return { error };
   }
@@ -66,7 +75,6 @@ function ErrorWithTemplate({ error }: { error: Error }) {
   );
 }
 
-function DummyComponent({ error }: { error: Error }) {
+function DummyComponent({ error }: { error: Error }): any {
   throw error;
-  return <div />;
 }
diff --git a/x-pack/plugins/apm/tsconfig.json b/x-pack/plugins/apm/tsconfig.json
@@ -76,7 +76,6 @@
     "@kbn/babel-register",
     "@kbn/core-saved-objects-migration-server-internal",
     "@kbn/core-elasticsearch-server",
-    "@kbn/shared-ux-prompt-not-found",
     "@kbn/core-saved-objects-api-server",
     "@kbn/safer-lodash-set",
     "@kbn/shared-ux-router",
@@ -85,6 +84,7 @@
     "@kbn/logging-mocks",
     "@kbn/chart-icons",
     "@kbn/observability-shared-plugin",
+    "@kbn/shared-ux-prompt-not-found",
   ],
   "exclude": [
     "target/**/*",