Use ServiceLink/BackendLink when appropriate

elastic · Jul 30, 2021 · a5fdb23 · a5fdb23
1 parent 9fe5b0d
commit a5fdb23
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 91 deletions.
diff --git a/...s/apm/public/components/app/backend_detail_overview/backend_detail_dependencies_table.tsx b/...s/apm/public/components/app/backend_detail_overview/backend_detail_dependencies_table.tsx
@@ -9,13 +9,12 @@ import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { getNodeName, NodeType } from '../../../../common/connections';
 import { useApmParams } from '../../../hooks/use_apm_params';
-import { useApmRouter } from '../../../hooks/use_apm_router';
 import { useUrlParams } from '../../../context/url_params_context/use_url_params';
 import { useFetcher } from '../../../hooks/use_fetcher';
 import { getTimeRangeComparison } from '../../shared/time_comparison/get_time_range_comparison';
 import { DependenciesTable } from '../../shared/dependencies_table';
-import { NodeIcon } from '../../shared/node_icon';
 import { useApmBackendContext } from '../../../context/apm_backend/use_apm_backend_context';
+import { ServiceLink } from '../../shared/service_link';
 
 export function BackendDetailDependenciesTable() {
   const {
@@ -33,11 +32,8 @@ export function BackendDetailDependenciesTable() {
     comparisonType,
   });
 
-  const apmRouter = useApmRouter();
-
   const { backendName } = useApmBackendContext();
 
-  // Fetches current period dependencies
   const { data, status } = useFetcher(
     (callApmApi) => {
       if (!start || !end) {
@@ -66,26 +62,26 @@ export function BackendDetailDependenciesTable() {
         throw new Error('Expected a service node');
       }
 
-      const href = apmRouter.link('/services/:serviceName/overview', {
-        path: { serviceName: location.serviceName },
-        query: {
-          comparisonEnabled: comparisonEnabled ? 'true' : 'false',
-          comparisonType,
-          environment,
-          kuery,
-          rangeFrom,
-          rangeTo,
-          latencyAggregationType: undefined,
-          transactionType: undefined,
-        },
-      });
-
       return {
         name,
-        href,
-        icon: <NodeIcon node={location} />,
         currentMetrics: dependency.currentMetrics,
         previousMetrics: dependency.previousMetrics,
+        link: (
+          <ServiceLink
+            serviceName={location.serviceName}
+            agentName={location.agentName}
+            query={{
+              comparisonEnabled: comparisonEnabled ? 'true' : 'false',
+              comparisonType,
+              environment,
+              kuery,
+              rangeFrom,
+              rangeTo,
+              latencyAggregationType: undefined,
+              transactionType: undefined,
+            }}
+          />
+        ),
       };
     }) ?? [];
 

diff --git a/...pm/public/components/app/backend_inventory/backend_inventory_dependencies_table/index.tsx b/...pm/public/components/app/backend_inventory/backend_inventory_dependencies_table/index.tsx
@@ -9,12 +9,11 @@ import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { getNodeName, NodeType } from '../../../../../common/connections';
 import { useApmParams } from '../../../../hooks/use_apm_params';
-import { useApmRouter } from '../../../../hooks/use_apm_router';
 import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
 import { useFetcher } from '../../../../hooks/use_fetcher';
 import { getTimeRangeComparison } from '../../../shared/time_comparison/get_time_range_comparison';
 import { DependenciesTable } from '../../../shared/dependencies_table';
-import { NodeIcon } from '../../../shared/node_icon';
+import { BackendLink } from '../../../shared/backend_link';
 
 export function BackendInventoryDependenciesTable() {
   const {
@@ -32,9 +31,6 @@ export function BackendInventoryDependenciesTable() {
     comparisonType,
   });
 
-  const apmRouter = useApmRouter();
-
-  // Fetches current period dependencies
   const { data, status } = useFetcher(
     (callApmApi) => {
       if (!start || !end) {
@@ -59,24 +55,27 @@ export function BackendInventoryDependenciesTable() {
       if (location.type !== NodeType.backend) {
         throw new Error('Expected a backend node');
       }
-      const href = apmRouter.link('/backends/:backendName/overview', {
-        path: { backendName: location.backendName },
-        query: {
-          comparisonEnabled: comparisonEnabled ? 'true' : 'false',
-          comparisonType,
-          environment,
-          kuery,
-          rangeFrom,
-          rangeTo,
-        },
-      });
+      const link = (
+        <BackendLink
+          backendName={location.backendName}
+          type={location.spanType}
+          subtype={location.spanSubtype}
+          query={{
+            comparisonEnabled: comparisonEnabled ? 'true' : 'false',
+            comparisonType,
+            environment,
+            kuery,
+            rangeFrom,
+            rangeTo,
+          }}
+        />
+      );
 
       return {
         name,
-        href,
-        icon: <NodeIcon node={location} />,
         currentMetrics: dependency.currentMetrics,
         previousMetrics: dependency.previousMetrics,
+        link,
       };
     }) ?? [];
 

diff --git a/.../apm/public/components/app/service_overview/service_overview_dependencies_table/index.tsx b/.../apm/public/components/app/service_overview/service_overview_dependencies_table/index.tsx
@@ -11,10 +11,10 @@ import { getNodeName, NodeType } from '../../../../../common/connections';
 import { useApmServiceContext } from '../../../../context/apm_service/use_apm_service_context';
 import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
 import { useApmParams } from '../../../../hooks/use_apm_params';
-import { useApmRouter } from '../../../../hooks/use_apm_router';
 import { useFetcher } from '../../../../hooks/use_fetcher';
+import { BackendLink } from '../../../shared/backend_link';
 import { DependenciesTable } from '../../../shared/dependencies_table';
-import { NodeIcon } from '../../../shared/node_icon';
+import { ServiceLink } from '../../../shared/service_link';
 import { getTimeRangeComparison } from '../../../shared/time_comparison/get_time_range_comparison';
 
 export function ServiceOverviewDependenciesTable() {
@@ -40,11 +40,8 @@ export function ServiceOverviewDependenciesTable() {
     comparisonType,
   });
 
-  const apmRouter = useApmRouter();
-
   const { serviceName, transactionType } = useApmServiceContext();
 
-  // Fetches current period dependencies
   const { data, status } = useFetcher(
     (callApmApi) => {
       if (!start || !end) {
@@ -66,39 +63,43 @@ export function ServiceOverviewDependenciesTable() {
     data?.serviceDependencies.map((dependency) => {
       const { location } = dependency;
       const name = getNodeName(location);
-      const href =
-        location.type === NodeType.backend
-          ? apmRouter.link('/backends/:backendName/overview', {
-              path: { backendName: location.backendName },
-              query: {
-                comparisonEnabled: comparisonEnabled ? 'true' : 'false',
-                comparisonType,
-                environment,
-                kuery,
-                rangeFrom,
-                rangeTo,
-              },
-            })
-          : apmRouter.link('/services/:serviceName/overview', {
-              path: { serviceName: location.serviceName },
-              query: {
-                comparisonEnabled: comparisonEnabled ? 'true' : 'false',
-                comparisonType,
-                environment,
-                kuery,
-                rangeFrom,
-                rangeTo,
-                latencyAggregationType,
-                transactionType,
-              },
-            });
+      const link =
+        location.type === NodeType.backend ? (
+          <BackendLink
+            backendName={location.backendName}
+            type={location.spanType}
+            subtype={location.spanSubtype}
+            query={{
+              comparisonEnabled: comparisonEnabled ? 'true' : 'false',
+              comparisonType,
+              environment,
+              kuery,
+              rangeFrom,
+              rangeTo,
+            }}
+          />
+        ) : (
+          <ServiceLink
+            serviceName={location.serviceName}
+            agentName={location.agentName}
+            query={{
+              comparisonEnabled: comparisonEnabled ? 'true' : 'false',
+              comparisonType,
+              environment,
+              kuery,
+              rangeFrom,
+              rangeTo,
+              latencyAggregationType,
+              transactionType,
+            }}
+          />
+        );
 
       return {
         name,
-        href,
-        icon: <NodeIcon node={location} />,
         currentMetrics: dependency.currentMetrics,
         previousMetrics: dependency.previousMetrics,
+        link,
       };
     }) ?? [];
 

diff --git a/x-pack/plugins/apm/public/components/shared/backend_link.tsx b/x-pack/plugins/apm/public/components/shared/backend_link.tsx
@@ -6,17 +6,19 @@
  */
 
 import { EuiFlexGroup, EuiFlexItem, EuiLink } from '@elastic/eui';
+import { TypeOf } from '@kbn/typed-react-router-config';
 import React from 'react';
 import { euiStyled } from '../../../../../../src/plugins/kibana_react/common';
 import { useApmRouter } from '../../hooks/use_apm_router';
 import { truncate } from '../../utils/style';
+import { ApmRoutes } from '../routing/apm_route_config';
 import { SpanIcon } from './span_icon';
 
 const StyledLink = euiStyled(EuiLink)`${truncate('100%')};`;
 
 interface BackendLinkProps {
   backendName: string;
-  query: Record<string, string | undefined>;
+  query?: TypeOf<ApmRoutes, '/backends/:backendName/overview'>['query'];
   subtype?: string;
   type?: string;
 }

diff --git a/x-pack/plugins/apm/public/components/shared/dependencies_table/index.tsx b/x-pack/plugins/apm/public/components/shared/dependencies_table/index.tsx
@@ -14,7 +14,6 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
-import { EuiLink } from '@elastic/eui';
 import { ConnectionMetricItemWithComparisonData } from '../../../../common/connections';
 import {
   asMillisecondDuration,
@@ -35,8 +34,7 @@ export type DependenciesItem = Omit<
   'location'
 > & {
   name: string;
-  href: string;
-  icon: React.ReactElement;
+  link: React.ReactElement;
 };
 
 interface Props {
@@ -71,20 +69,8 @@ export function DependenciesTable(props: Props) {
       field: 'name',
       name: nameColumnTitle,
       render: (_, item) => {
-        const { name, href, icon } = item;
-        return (
-          <TruncateWithTooltip
-            text={name}
-            content={
-              <EuiFlexGroup gutterSize="s" responsive={false}>
-                <EuiFlexItem grow={false}>{icon}</EuiFlexItem>
-                <EuiFlexItem>
-                  <EuiLink href={href}>{name}</EuiLink>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            }
-          />
-        );
+        const { name, link } = item;
+        return <TruncateWithTooltip text={name} content={link} />;
       },
       sortable: true,
     },

diff --git a/x-pack/plugins/apm/public/components/shared/service_link.tsx b/x-pack/plugins/apm/public/components/shared/service_link.tsx
@@ -7,17 +7,19 @@
 
 import { EuiFlexGroup, EuiFlexItem, EuiLink } from '@elastic/eui';
 import React from 'react';
+import { TypeOf } from '@kbn/typed-react-router-config';
 import { euiStyled } from '../../../../../../src/plugins/kibana_react/common';
 import { truncate } from '../../utils/style';
 import { useApmRouter } from '../../hooks/use_apm_router';
 import { AgentIcon } from './agent_icon';
 import { AgentName } from '../../../typings/es_schemas/ui/fields/agent';
+import { ApmRoutes } from '../routing/apm_route_config';
 
 const StyledLink = euiStyled(EuiLink)`${truncate('100%')};`;
 
 interface ServiceLinkProps {
   agentName?: AgentName;
-  query: Record<string, string | undefined>;
+  query?: TypeOf<ApmRoutes, '/services/:serviceName/overview'>['query'];
   serviceName: string;
 }