[APM] Add search bar to inventory page

packages/kbn-apm-synthtrace/src/scenarios/helpers/random_names.ts

@@ -0,0 +1,135 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export const randomNames = [
+  'Adonis',
+  'Agamemnon',
+  'Ajax',
+  'Alexander',
+  'Aphrodite',
+  'Apollo',
+  'Ares',
+  'Aristophanes',
+  'Artemis',
+  'Athena',
+  'Atlas',
+  'Boreas',
+  'Calliope',
+  'Cassandra',
+  'Clio',
+  'Daphne',
+  'Demeter',
+  'Dionysius',
+  'Dionysus',
+  'Eileithyia',
+  'Electra',
+  'Eos',
+  'Erato',
+  'Erebos',
+  'Eros',
+  'Euterpe',
+  'Gaia',
+  'Hades',
+  'Hecate',
+  'Helios',
+  'Hephaestus',
+  'Hera',
+  'Heracles (Hercules)',
+  'Hercules',
+  'Hermes',
+  'Hestia',
+  'Hypatia',
+  'Hypnos',
+  'Iphigenia',
+  'Iris',
+  'Kratos',
+  'Leonidas',
+  'Medusa',
+  'Mnemosyne',
+  'Morpheus',
+  'Narcissus',
+  'Nemesis',
+  'Nike',
+  'Notus',
+  'Nyx',
+  'Oceanus',
+  'Odysseus',
+  'Orpheus',
+  'Pan',
+  'Pandora',
+  'Penelope',
+  'Pericles',
+  'Persephone',
+  'Perseus',
+  'Phoebe',
+  'Polyphemus',
+  'Pontus',
+  'Poseidon',
+  'Priam',
+  'Prometheus',
+  'Rhea',
+  'Sappho',
+  'Selene',
+  'Terpsichore',
+  'Tethys',
+  'Thalia',
+  'Thanatos',
+  'Theia',
+  'Theseus',
+  'Thetis',
+  'Triton',
+  'Tyche',
+  'Uranus',
+  'Zephyrus',
+  'Zeus',
+  'Augustus',
+  'Bacchus',
+  'Brutus',
+  'Caesar',
+  'Caligula',
+  'Caracalla',
+  'Cassius',
+  'Cato',
+  'Cicero',
+  'Cleopatra',
+  'Commodus',
+  'Constantine',
+  'Diana',
+  'Domitian',
+  'Hadrian',
+  'Horace',
+  'Julius',
+  'Juno',
+  'Jupiter',
+  'Livy',
+  'Marcus Aurelius',
+  'Mars',
+  'Mercury',
+  'Minerva',
+  'Neptune',
+  'Nero',
+  'Octavian',
+  'Ovid',
+  'Pliny',
+  'Pluto',
+  'Pompey',
+  'Remus',
+  'Romulus',
+  'Saturn',
+  'Scipio',
+  'Seneca',
+  'Spartacus',
+  'Theodosius',
+  'Tiberius',
+  'Titus',
+  'Trajan',
+  'Venus',
+  'Vespasian',
+  'Vesta',
+  'Virgil',
+];

packages/kbn-apm-synthtrace/src/scenarios/many_errors.ts

@@ -0,0 +1,46 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { ApmFields, apm } from '@kbn/apm-synthtrace-client';
+import { Scenario } from '../cli/scenario';
+import { getSynthtraceEnvironment } from '../lib/utils/get_synthtrace_environment';
+import { withClient } from '../lib/utils/with_client';
+
+const ENVIRONMENT = getSynthtraceEnvironment(__filename);
+
+const scenario: Scenario<ApmFields> = async (runOptions) => {
+  const { logger } = runOptions;
+
+  return {
+    generate: ({ range, clients: { apmEsClient } }) => {
+      const transactionName = 'DELETE /api/orders/{id}';
+
+      const instance = apm
+        .service({ name: `synth-node`, environment: ENVIRONMENT, agentName: 'nodejs' })
+        .instance('instance');
+
+      const failedTraceEvents = range
+        .interval('1m')
+        .rate(1000)
+        .generator((timestamp, i) =>
+          instance
+            .transaction({ transactionName })
+            .timestamp(timestamp)
+            .duration(1000)
+            .failure()
+            .errors(instance.error({ message: `Error ${i}` }).timestamp(timestamp + 50))
+        );
+
+      return withClient(
+        apmEsClient,
+        logger.perf('generating_apm_events', () => failedTraceEvents)
+      );
+    },
+  };
+};
+
+export default scenario;

packages/kbn-apm-synthtrace/src/scenarios/many_services.ts

@@ -11,13 +11,14 @@ import { flatten, random } from 'lodash';
 import { Scenario } from '../cli/scenario';
 import { getSynthtraceEnvironment } from '../lib/utils/get_synthtrace_environment';
 import { withClient } from '../lib/utils/with_client';
+import { randomNames } from './helpers/random_names';
 
 const ENVIRONMENT = getSynthtraceEnvironment(__filename);
 
 const scenario: Scenario<ApmFields> = async ({ logger, scenarioOpts = { services: 500 } }) => {
   const numServices = scenarioOpts.services;
   const languages = ['go', 'dotnet', 'java', 'python'];
-  const services = ['web', 'order-processing', 'api-backend', 'proxy'];
+  const serviceNames = randomNames;
   const agentVersions: Record<string, string[]> = {
     go: ['2.1.0', '2.0.0', '1.15.0', '1.14.0', '1.13.1'],
     dotnet: ['1.18.0', '1.17.0', '1.16.1', '1.16.0', '1.15.0'],
@@ -27,8 +28,6 @@ const scenario: Scenario<ApmFields> = async ({ logger, scenarioOpts = { services
 
   return {
     generate: ({ range, clients: { apmEsClient } }) => {
-      const successfulTimestamps = range.ratePerMinute(180);
-
       const instances = flatten(
         [...Array(numServices).keys()].map((index) => {
           const language = languages[index % languages.length];
@@ -39,7 +38,7 @@ const scenario: Scenario<ApmFields> = async ({ logger, scenarioOpts = { services
           return [...Array(numOfInstances).keys()].map((instanceIndex) =>
             apm
               .service({
-                name: `${services[index % services.length]}-${language}-${index}`,
+                name: `${serviceNames[index % serviceNames.length]}-${language}-${index}`,
                 environment: ENVIRONMENT,
                 agentName: language,
               })
@@ -55,18 +54,20 @@ const scenario: Scenario<ApmFields> = async ({ logger, scenarioOpts = { services
       const urls = ['GET /order/{id}', 'POST /basket/{id}', 'DELETE /basket', 'GET /products'];
 
       const instanceSpans = (instance: Instance, url: string) => {
+        const hasHighDuration = Math.random() > 0.5;
+        const throughput = random(10, 200);
+
+        const successfulTimestamps = range.ratePerMinute(throughput);
         const successfulTraceEvents = successfulTimestamps.generator((timestamp) => {
-          const randomHigh = random(1000, 4000);
-          const randomLow = random(100, randomHigh / 5);
-          const duration = random(randomLow, randomHigh);
-          const childDuration = random(randomLow, duration);
-          const remainderDuration = duration - childDuration;
+          const parentDuration = hasHighDuration ? random(1000, 5000) : random(100, 1000);
+          const childDuration = random(50, parentDuration);
+          const remainderDuration = parentDuration - childDuration;
           const generateError = random(1, 4) % 3 === 0;
           const generateChildError = random(0, 5) % 2 === 0;
           const span = instance
             .transaction({ transactionName: url })
             .timestamp(timestamp)
-            .duration(duration)
+            .duration(parentDuration)
             .children(
               instance
                 .span({
@@ -84,6 +85,7 @@ const scenario: Scenario<ApmFields> = async ({ logger, scenarioOpts = { services
                 .success()
                 .timestamp(timestamp + childDuration)
             );
+
           return !generateError
             ? span.success()
             : span

packages/kbn-typed-react-router-config/src/use_params.ts

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { Location } from 'history';
+import { useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useRouter } from './use_router';
 
@@ -23,9 +23,9 @@ export function useParams(...args: any[]) {
     args.pop();
   }
 
-  const paths = args as string[];
-
-  const getParamsArgs = [...paths, location, optional] as [never, Location<any>, boolean];
-
-  return router.getParams(...getParamsArgs);
+  return useMemo(() => {
+    // @ts-expect-error
+    return router.getParams(...args, location, optional);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [router, ...args, location, optional]);
 }