[APM] Divide "Actions menu" into sections to improve readability (#56623

)

* transaction actions menu

* transaction actions menu

* fixing pr comments

* fixing pr comments

* fixing pr comments

* fixing pr comments

* fixing unit test

* fixing unit test

* using moment to calculate the timestamp

* renaming labels

* Changing section subtitle

* fixing unit tests

* replacing div for react fragment

* refactoring

* removing marginbottom property

* div is needed to remove the margin from the correct element

x-pack/legacy/plugins/apm/public/components/shared/Links/DiscoverLinks/DiscoverLink.tsx

@@ -5,13 +5,15 @@
  */
 
 import { EuiLink } from '@elastic/eui';
+import { Location } from 'history';
 import React from 'react';
 import url from 'url';
 import rison, { RisonValue } from 'rison-node';
 import { useLocation } from '../../../../hooks/useLocation';
 import { getTimepickerRisonData } from '../rison_helpers';
 import { APM_STATIC_INDEX_PATTERN_ID } from '../../../../../common/index_pattern_constants';
 import { useApmPluginContext } from '../../../../hooks/useApmPluginContext';
+import { AppMountContextBasePath } from '../../../../context/ApmPluginContext';
 
 interface Props {
   query: {
@@ -30,10 +32,15 @@ interface Props {
   children: React.ReactNode;
 }
 
-export function DiscoverLink({ query = {}, ...rest }: Props) {
-  const { core } = useApmPluginContext();
-  const location = useLocation();
-
+export const getDiscoverHref = ({
+  basePath,
+  location,
+  query
+}: {
+  basePath: AppMountContextBasePath;
+  location: Location;
+  query: Props['query'];
+}) => {
   const risonQuery = {
     _g: getTimepickerRisonData(location.search),
     _a: {
@@ -43,11 +50,23 @@ export function DiscoverLink({ query = {}, ...rest }: Props) {
   };
 
   const href = url.format({
-    pathname: core.http.basePath.prepend('/app/kibana'),
+    pathname: basePath.prepend('/app/kibana'),
     hash: `/discover?_g=${rison.encode(risonQuery._g)}&_a=${rison.encode(
       risonQuery._a as RisonValue
     )}`
   });
+  return href;
+};
+
+export function DiscoverLink({ query = {}, ...rest }: Props) {
+  const { core } = useApmPluginContext();
+  const location = useLocation();
+
+  const href = getDiscoverHref({
+    basePath: core.http.basePath,
+    query,
+    location
+  });
 
   return <EuiLink {...rest} href={href} />;
 }

x-pack/legacy/plugins/apm/public/components/shared/Links/InfraLink.tsx

@@ -10,11 +10,13 @@ import React from 'react';
 import url from 'url';
 import { fromQuery } from './url_helpers';
 import { useApmPluginContext } from '../../../hooks/useApmPluginContext';
+import { AppMountContextBasePath } from '../../../context/ApmPluginContext';
 
 interface InfraQueryParams {
   time?: number;
   from?: number;
   to?: number;
+  filter?: string;
 }
 
 interface Props extends EuiLinkAnchorProps {
@@ -23,12 +25,24 @@ interface Props extends EuiLinkAnchorProps {
   children?: React.ReactNode;
 }
 
-export function InfraLink({ path, query = {}, ...rest }: Props) {
-  const { core } = useApmPluginContext();
+export const getInfraHref = ({
+  basePath,
+  query,
+  path
+}: {
+  basePath: AppMountContextBasePath;
+  query: InfraQueryParams;
+  path?: string;
+}) => {
   const nextSearch = fromQuery(query);
-  const href = url.format({
-    pathname: core.http.basePath.prepend('/app/infra'),
+  return url.format({
+    pathname: basePath.prepend('/app/infra'),
     hash: compact([path, nextSearch]).join('?')
   });
+};
+
+export function InfraLink({ path, query = {}, ...rest }: Props) {
+  const { core } = useApmPluginContext();
+  const href = getInfraHref({ basePath: core.http.basePath, query, path });
   return <EuiLink {...rest} href={href} />;
 }