APM Storybook fixes

packages/kbn-storybook/storybook_config/webpack.config.js

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-const { resolve } = require('path');
+const { parse, resolve } = require('path');
 const webpack = require('webpack');
 const { stringifyRequest } = require('loader-utils');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
@@ -95,6 +95,27 @@ module.exports = async ({ config }) => {
           },
         },
       },
+      {
+        loader: 'resolve-url-loader',
+        options: {
+          // If you don't have arguments (_, __) to the join function, the
+          // resolve-url-loader fails with a loader misconfiguration error.
+          //
+          // eslint-disable-next-line no-unused-vars
+          join: (_, __) => (uri, base) => {
+            if (!base || !parse(base).dir.includes('legacy')) {
+              return null;
+            }
+
+            // URIs on mixins in src/legacy/public/styles need to be resolved.
+            if (uri.startsWith('ui/assets')) {
+              return resolve(REPO_ROOT, 'src/core/server/core_app/', uri.replace('ui/', ''));
+            }
+
+            return null;
+          },
+        },
+      },
       {
         loader: 'sass-loader',
         options: {

x-pack/plugins/apm/jest.config.js

@@ -31,6 +31,7 @@ module.exports = {
   collectCoverageFrom: [
     '**/*.{js,jsx,ts,tsx}',
     '!**/{__test__,__snapshots__,__examples__,integration_tests,tests}/**',
+    '!**/*.stories.{js,ts,tsx}',
     '!**/*.test.{js,ts,tsx}',
     '!**/dev_docs/**',
     '!**/e2e/**',

x-pack/plugins/apm/public/components/app/ServiceMap/Cytoscape.stories.tsx

@@ -346,7 +346,7 @@ storiesOf('app/ServiceMap/Cytoscape', module).add(
         },
       },
     ];
-    return <Cytoscape elements={elements} height={300} width={1340} />;
+    return <Cytoscape elements={elements} height={600} width={1340} />;
   },
   {
     info: { propTables: false, source: false },

x-pack/plugins/apm/public/components/app/ServiceMap/Cytoscape.tsx

@@ -121,15 +121,6 @@ export function Cytoscape({
 
   const trackApmEvent = useUiTracker({ app: 'apm' });
 
-  // Trigger a custom "data" event when data changes
-  useEffect(() => {
-    if (cy) {
-      cy.remove(cy.elements());
-      cy.add(elements);
-      cy.trigger('data');
-    }
-  }, [cy, elements]);
-
   // Set up cytoscape event handlers
   useEffect(() => {
     const resetConnectedEdgeStyle = (node?: cytoscape.NodeSingular) => {
@@ -223,6 +214,10 @@ export function Cytoscape({
       cy.on('mouseout', 'edge, node', mouseoutHandler);
       cy.on('select', 'node', selectHandler);
       cy.on('unselect', 'node', unselectHandler);
+
+      cy.remove(cy.elements());
+      cy.add(elements);
+      cy.trigger('data');
     }
 
     return () => {
@@ -241,7 +236,7 @@ export function Cytoscape({
       }
       clearTimeout(layoutstopDelayTimeout);
     };
-  }, [cy, height, serviceName, trackApmEvent, width]);
+  }, [cy, elements, height, serviceName, trackApmEvent, width]);
 
   return (
     <CytoscapeContext.Provider value={cy}>

x-pack/plugins/apm/public/components/shared/ErrorRateAlertTrigger/index.stories.tsx

@@ -7,6 +7,11 @@
 import { storiesOf } from '@storybook/react';
 import React from 'react';
 import { ErrorRateAlertTrigger } from '.';
+import { ApmPluginContextValue } from '../../../context/ApmPluginContext';
+import {
+  mockApmPluginContextValue,
+  MockApmPluginContextWrapper,
+} from '../../../context/ApmPluginContext/MockApmPluginContext';
 
 storiesOf('app/ErrorRateAlertTrigger', module).add('example', () => {
   const params = {
@@ -15,12 +20,16 @@ storiesOf('app/ErrorRateAlertTrigger', module).add('example', () => {
   };
 
   return (
-    <div style={{ width: 400 }}>
-      <ErrorRateAlertTrigger
-        alertParams={params as any}
-        setAlertParams={() => undefined}
-        setAlertProperty={() => undefined}
-      />
-    </div>
+    <MockApmPluginContextWrapper
+      value={(mockApmPluginContextValue as unknown) as ApmPluginContextValue}
+    >
+      <div style={{ width: 400 }}>
+        <ErrorRateAlertTrigger
+          alertParams={params as any}
+          setAlertParams={() => undefined}
+          setAlertProperty={() => undefined}
+        />
+      </div>
+    </MockApmPluginContextWrapper>
   );
 });

x-pack/plugins/apm/public/components/shared/TransactionDurationAlertTrigger/index.stories.tsx

@@ -3,18 +3,24 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+// import { storiesOf } from '@storybook/react';
 import { cloneDeep, merge } from 'lodash';
-import { storiesOf } from '@storybook/react';
 import React from 'react';
 import { TransactionDurationAlertTrigger } from '.';
+import { ApmPluginContextValue } from '../../../context/ApmPluginContext';
 import {
-  MockApmPluginContextWrapper,
   mockApmPluginContextValue,
+  MockApmPluginContextWrapper,
 } from '../../../context/ApmPluginContext/MockApmPluginContext';
 import { MockUrlParamsContextProvider } from '../../../context/UrlParamsContext/MockUrlParamsContextProvider';
-import { ApmPluginContextValue } from '../../../context/ApmPluginContext';
 
-storiesOf('app/TransactionDurationAlertTrigger', module).add('example', () => {
+// Disabling this because we currently don't have a way to mock `useEnvironments`
+// which is used by this component. Using the fetch-mock module should work, but
+// our current storybook setup has core-js-related problems when trying to import
+// it.
+// storiesOf('app/TransactionDurationAlertTrigger', module).add('example',
+// eslint-disable-next-line no-unused-expressions
+() => {
   const params = {
     threshold: 1500,
     aggregationType: 'avg' as const,
@@ -44,4 +50,4 @@ storiesOf('app/TransactionDurationAlertTrigger', module).add('example', () => {
       </MockApmPluginContextWrapper>
     </div>
   );
-});
+};