[RUM Dashboard] Added service name filter (#70349)

Co-authored-by: Elastic Machine <[email protected]>

Author: shahzad31

x-pack/plugins/apm/common/agent_name.ts

@@ -30,10 +30,12 @@ export function isAgentName(agentName: string): agentName is AgentName {
   return AGENT_NAMES.includes(agentName as AgentName);
 }
 
+export const RUM_AGENTS = ['js-base', 'rum-js'];
+
 export function isRumAgentName(
-  agentName: string | undefined
+  agentName?: string
 ): agentName is 'js-base' | 'rum-js' {
-  return agentName === 'js-base' || agentName === 'rum-js';
+  return RUM_AGENTS.includes(agentName!);
 }
 
 export function isJavaAgentName(

x-pack/plugins/apm/public/components/app/RumDashboard/ClientMetrics/index.tsx

@@ -22,11 +22,11 @@ const ClFlexGroup = styled(EuiFlexGroup)`
 export function ClientMetrics() {
   const { urlParams, uiFilters } = useUrlParams();
 
-  const { start, end } = urlParams;
+  const { start, end, serviceName } = urlParams;
 
   const { data, status } = useFetcher(
     (callApmApi) => {
-      if (start && end) {
+      if (start && end && serviceName) {
         return callApmApi({
           pathname: '/api/apm/rum/client-metrics',
           params: {
@@ -35,7 +35,7 @@ export function ClientMetrics() {
         });
       }
     },
-    [start, end, uiFilters]
+    [start, end, serviceName, uiFilters]
   );
 
   const STAT_STYLE = { width: '240px' };

x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/index.tsx

@@ -27,7 +27,7 @@ export interface PercentileRange {
 export const PageLoadDistribution = () => {
   const { urlParams, uiFilters } = useUrlParams();
 
-  const { start, end } = urlParams;
+  const { start, end, serviceName } = urlParams;
 
   const [percentileRange, setPercentileRange] = useState<PercentileRange>({
     min: null,
@@ -38,7 +38,7 @@ export const PageLoadDistribution = () => {
 
   const { data, status } = useFetcher(
     (callApmApi) => {
-      if (start && end) {
+      if (start && end && serviceName) {
         return callApmApi({
           pathname: '/api/apm/rum-client/page-load-distribution',
           params: {
@@ -57,7 +57,14 @@ export const PageLoadDistribution = () => {
         });
       }
     },
-    [end, start, uiFilters, percentileRange.min, percentileRange.max]
+    [
+      end,
+      start,
+      serviceName,
+      uiFilters,
+      percentileRange.min,
+      percentileRange.max,
+    ]
   );
 
   const onPercentileChange = (min: number, max: number) => {

x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/use_breakdowns.ts

@@ -17,13 +17,13 @@ interface Props {
 export const useBreakdowns = ({ percentileRange, field, value }: Props) => {
   const { urlParams, uiFilters } = useUrlParams();
 
-  const { start, end } = urlParams;
+  const { start, end, serviceName } = urlParams;
 
   const { min: minP, max: maxP } = percentileRange ?? {};
 
   return useFetcher(
     (callApmApi) => {
-      if (start && end && field && value) {
+      if (start && end && serviceName && field && value) {
         return callApmApi({
           pathname: '/api/apm/rum-client/page-load-distribution/breakdown',
           params: {
@@ -43,6 +43,6 @@ export const useBreakdowns = ({ percentileRange, field, value }: Props) => {
         });
       }
     },
-    [end, start, uiFilters, field, value, minP, maxP]
+    [end, start, serviceName, uiFilters, field, value, minP, maxP]
   );
 };

x-pack/plugins/apm/public/components/app/RumDashboard/PageViewsTrend/index.tsx

@@ -16,13 +16,13 @@ import { BreakdownItem } from '../../../../../typings/ui_filters';
 export const PageViewsTrend = () => {
   const { urlParams, uiFilters } = useUrlParams();
 
-  const { start, end } = urlParams;
+  const { start, end, serviceName } = urlParams;
 
   const [breakdowns, setBreakdowns] = useState<BreakdownItem[]>([]);
 
   const { data, status } = useFetcher(
     (callApmApi) => {
-      if (start && end) {
+      if (start && end && serviceName) {
         return callApmApi({
           pathname: '/api/apm/rum-client/page-view-trends',
           params: {
@@ -40,7 +40,7 @@ export const PageViewsTrend = () => {
         });
       }
     },
-    [end, start, uiFilters, breakdowns]
+    [end, start, serviceName, uiFilters, breakdowns]
   );
 
   const onBreakdownChange = (values: BreakdownItem[]) => {

x-pack/plugins/apm/public/components/app/RumDashboard/index.tsx

@@ -4,12 +4,21 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiSpacer,
+} from '@elastic/eui';
 import React, { useMemo } from 'react';
 import { useTrackPageview } from '../../../../../observability/public';
 import { LocalUIFilters } from '../../shared/LocalUIFilters';
 import { PROJECTION } from '../../../../common/projections/typings';
 import { RumDashboard } from './RumDashboard';
+import { ServiceNameFilter } from '../../shared/LocalUIFilters/ServiceNameFilter';
+import { useUrlParams } from '../../../hooks/useUrlParams';
+import { useFetcher } from '../../../hooks/useFetcher';
+import { RUM_AGENTS } from '../../../../common/agent_name';
 
 export function RumOverview() {
   useTrackPageview({ app: 'apm', path: 'rum_overview' });
@@ -24,12 +33,42 @@ export function RumOverview() {
     return config;
   }, []);
 
+  const {
+    urlParams: { start, end },
+  } = useUrlParams();
+
+  const { data } = useFetcher(
+    (callApmApi) => {
+      if (start && end) {
+        return callApmApi({
+          pathname: '/api/apm/services',
+          params: {
+            query: {
+              start,
+              end,
+              uiFilters: JSON.stringify({ agentName: RUM_AGENTS }),
+            },
+          },
+        });
+      }
+    },
+    [start, end]
+  );
+
   return (
     <>
       <EuiSpacer />
       <EuiFlexGroup>
         <EuiFlexItem grow={1}>
-          <LocalUIFilters {...localUIFiltersConfig} showCount={true} />
+          <LocalUIFilters {...localUIFiltersConfig} showCount={true}>
+            <ServiceNameFilter
+              serviceNames={
+                data?.items?.map((service) => service.serviceName) ?? []
+              }
+            />
+            <EuiSpacer size="xl" />
+            <EuiHorizontalRule margin="none" />
+          </LocalUIFilters>
         </EuiFlexItem>
         <EuiFlexItem grow={7}>
           <RumDashboard />

x-pack/plugins/apm/public/components/shared/LocalUIFilters/ServiceNameFilter/index.tsx

@@ -0,0 +1,74 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useEffect } from 'react';
+import {
+  EuiTitle,
+  EuiHorizontalRule,
+  EuiSpacer,
+  EuiSelect,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { useUrlParams } from '../../../../hooks/useUrlParams';
+import { history } from '../../../../utils/history';
+import { fromQuery, toQuery } from '../../Links/url_helpers';
+
+interface Props {
+  serviceNames: string[];
+}
+
+const ServiceNameFilter = ({ serviceNames }: Props) => {
+  const {
+    urlParams: { serviceName },
+  } = useUrlParams();
+
+  const options = serviceNames.map((type) => ({
+    text: type,
+    value: type,
+  }));
+
+  const updateServiceName = (serviceN: string) => {
+    const newLocation = {
+      ...history.location,
+      search: fromQuery({
+        ...toQuery(history.location.search),
+        serviceName: serviceN,
+      }),
+    };
+    history.push(newLocation);
+  };
+
+  useEffect(() => {
+    if (!serviceName && serviceNames.length > 0) {
+      updateServiceName(serviceNames[0]);
+    }
+  }, [serviceNames, serviceName]);
+
+  return (
+    <>
+      <EuiTitle size="xxxs" textTransform="uppercase">
+        <h4>
+          {i18n.translate('xpack.apm.localFilters.titles.serviceName', {
+            defaultMessage: 'Service name',
+          })}
+        </h4>
+      </EuiTitle>
+      <EuiSpacer size="s" />
+      <EuiHorizontalRule margin="none" />
+      <EuiSpacer size="s" />
+      <EuiSelect
+        options={options}
+        value={serviceName}
+        compressed={true}
+        onChange={(event) => {
+          updateServiceName(event.target.value);
+        }}
+      />
+    </>
+  );
+};
+
+export { ServiceNameFilter };

x-pack/plugins/apm/server/lib/ui_filters/local_ui_filters/config.ts

@@ -16,6 +16,7 @@ import {
   USER_AGENT_DEVICE,
   USER_AGENT_OS,
   CLIENT_GEO_COUNTRY_ISO_CODE,
+  SERVICE_NAME,
 } from '../../../../common/elasticsearch_fieldnames';
 
 const filtersByName = {
@@ -85,6 +86,12 @@ const filtersByName = {
     }),
     fieldName: USER_AGENT_OS,
   },
+  serviceName: {
+    title: i18n.translate('xpack.apm.localFilters.titles.serviceName', {
+      defaultMessage: 'Service name',
+    }),
+    fieldName: SERVICE_NAME,
+  },
 };
 
 export type LocalUIFilterName = keyof typeof filtersByName;