[RUM Dashboard] Rum usability improvement (#76024)

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

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

@@ -5,64 +5,85 @@
  */
 
 import React from 'react';
-import { BreakdownGroup } from './BreakdownGroup';
-import { BreakdownItem } from '../../../../../typings/ui_filters';
+import { EuiSuperSelect } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import {
   CLIENT_GEO_COUNTRY_ISO_CODE,
   USER_AGENT_DEVICE,
   USER_AGENT_NAME,
   USER_AGENT_OS,
 } from '../../../../../common/elasticsearch_fieldnames';
+import { BreakdownItem } from '../../../../../typings/ui_filters';
 
 interface Props {
-  id: string;
-  selectedBreakdowns: BreakdownItem[];
-  onBreakdownChange: (values: BreakdownItem[]) => void;
+  selectedBreakdown: BreakdownItem | null;
+  onBreakdownChange: (value: BreakdownItem | null) => void;
 }
 
 export function BreakdownFilter({
-  id,
-  selectedBreakdowns,
+  selectedBreakdown,
   onBreakdownChange,
 }: Props) {
-  const categories: BreakdownItem[] = [
+  const NO_BREAKDOWN = 'noBreakdown';
+
+  const items: BreakdownItem[] = [
     {
-      name: 'Browser',
+      name: i18n.translate('xpack.apm.csm.breakDownFilter.noBreakdown', {
+        defaultMessage: 'No breakdown',
+      }),
+      fieldName: NO_BREAKDOWN,
       type: 'category',
-      count: 0,
-      selected: selectedBreakdowns.some(({ name }) => name === 'Browser'),
-      fieldName: USER_AGENT_NAME,
     },
     {
-      name: 'OS',
+      name: i18n.translate('xpack.apm.csm.breakdownFilter.browser', {
+        defaultMessage: 'Browser',
+      }),
+      fieldName: USER_AGENT_NAME,
       type: 'category',
-      count: 0,
-      selected: selectedBreakdowns.some(({ name }) => name === 'OS'),
-      fieldName: USER_AGENT_OS,
     },
     {
-      name: 'Device',
+      name: i18n.translate('xpack.apm.csm.breakdownFilter.os', {
+        defaultMessage: 'OS',
+      }),
+      fieldName: USER_AGENT_OS,
       type: 'category',
-      count: 0,
-      selected: selectedBreakdowns.some(({ name }) => name === 'Device'),
-      fieldName: USER_AGENT_DEVICE,
     },
     {
-      name: 'Location',
+      name: i18n.translate('xpack.apm.csm.breakdownFilter.device', {
+        defaultMessage: 'Device',
+      }),
+      fieldName: USER_AGENT_DEVICE,
       type: 'category',
-      count: 0,
-      selected: selectedBreakdowns.some(({ name }) => name === 'Location'),
+    },
+    {
+      name: i18n.translate('xpack.apm.csm.breakdownFilter.location', {
+        defaultMessage: 'Location',
+      }),
       fieldName: CLIENT_GEO_COUNTRY_ISO_CODE,
+      type: 'category',
     },
   ];
 
+  const options = items.map(({ name, fieldName }) => ({
+    inputDisplay: fieldName === NO_BREAKDOWN ? name : <strong>{name}</strong>,
+    value: fieldName,
+    dropdownDisplay: name,
+  }));
+
+  const onOptionChange = (value: string) => {
+    if (value === NO_BREAKDOWN) {
+      onBreakdownChange(null);
+    }
+    onBreakdownChange(items.find(({ fieldName }) => fieldName === value)!);
+  };
+
   return (
-    <BreakdownGroup
-      id={id}
-      items={categories}
-      onChange={(selValues: BreakdownItem[]) => {
-        onBreakdownChange(selValues);
-      }}
+    <EuiSuperSelect
+      fullWidth
+      compressed
+      options={options}
+      valueOfSelected={selectedBreakdown?.fieldName ?? NO_BREAKDOWN}
+      onChange={(value) => onOptionChange(value)}
     />
   );
 }

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

@@ -43,7 +43,7 @@ interface PageLoadData {
 interface Props {
   onPercentileChange: (min: number, max: number) => void;
   data?: PageLoadData | null;
-  breakdowns: BreakdownItem[];
+  breakdown: BreakdownItem | null;
   percentileRange: PercentileRange;
   loading: boolean;
 }
@@ -57,7 +57,7 @@ const PageLoadChart = styled(Chart)`
 export function PageLoadDistChart({
   onPercentileChange,
   data,
-  breakdowns,
+  breakdown,
   loading,
   percentileRange,
 }: Props) {
@@ -122,17 +122,17 @@ export function PageLoadDistChart({
             data={data?.pageLoadDistribution ?? []}
             curve={CurveType.CURVE_CATMULL_ROM}
           />
-          {breakdowns.map(({ name, type }) => (
+          {breakdown && (
             <BreakdownSeries
-              key={`${type}-${name}`}
-              field={type}
-              value={name}
+              key={`${breakdown.type}-${breakdown.name}`}
+              field={breakdown.type}
+              value={breakdown.name}
               percentileRange={percentileRange}
               onLoadingChange={(bLoading) => {
                 setBreakdownLoading(bLoading);
               }}
             />
-          ))}
+          )}
         </PageLoadChart>
       )}
     </ChartWrapper>

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

@@ -34,7 +34,7 @@ export function PageLoadDistribution() {
     max: null,
   });
 
-  const [breakdowns, setBreakdowns] = useState<BreakdownItem[]>([]);
+  const [breakdown, setBreakdown] = useState<BreakdownItem | null>(null);
 
   const { data, status } = useFetcher(
     (callApmApi) => {
@@ -94,11 +94,10 @@ export function PageLoadDistribution() {
             {I18LABELS.resetZoom}
           </EuiButtonEmpty>
         </EuiFlexItem>
-        <EuiFlexItem grow={false}>
+        <EuiFlexItem grow={false} style={{ width: 170 }}>
           <BreakdownFilter
-            id={'pageLoad'}
-            selectedBreakdowns={breakdowns}
-            onBreakdownChange={setBreakdowns}
+            selectedBreakdown={breakdown}
+            onBreakdownChange={setBreakdown}
           />
         </EuiFlexItem>
       </EuiFlexGroup>
@@ -107,7 +106,7 @@ export function PageLoadDistribution() {
         data={data}
         onPercentileChange={onPercentileChange}
         loading={status !== 'success'}
-        breakdowns={breakdowns}
+        breakdown={breakdown}
         percentileRange={{
           max: percentileRange.max || data?.maxDuration,
           min: percentileRange.min || data?.minDuration,

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

@@ -18,7 +18,7 @@ export function PageViewsTrend() {
 
   const { start, end, serviceName } = urlParams;
 
-  const [breakdowns, setBreakdowns] = useState<BreakdownItem[]>([]);
+  const [breakdown, setBreakdown] = useState<BreakdownItem | null>(null);
 
   const { data, status } = useFetcher(
     (callApmApi) => {
@@ -30,9 +30,9 @@ export function PageViewsTrend() {
               start,
               end,
               uiFilters: JSON.stringify(uiFilters),
-              ...(breakdowns.length > 0
+              ...(breakdown
                 ? {
-                    breakdowns: JSON.stringify(breakdowns),
+                    breakdowns: JSON.stringify(breakdown),
                   }
                 : {}),
             },
@@ -41,13 +41,9 @@ export function PageViewsTrend() {
       }
       return Promise.resolve(undefined);
     },
-    [end, start, serviceName, uiFilters, breakdowns]
+    [end, start, serviceName, uiFilters, breakdown]
   );
 
-  const onBreakdownChange = (values: BreakdownItem[]) => {
-    setBreakdowns(values);
-  };
-
   return (
     <div>
       <EuiFlexGroup responsive={false}>
@@ -56,11 +52,10 @@ export function PageViewsTrend() {
             <h3>{I18LABELS.pageViews}</h3>
           </EuiTitle>
         </EuiFlexItem>
-        <EuiFlexItem grow={false}>
+        <EuiFlexItem grow={false} style={{ width: 170 }}>
           <BreakdownFilter
-            id={'pageView'}
-            selectedBreakdowns={breakdowns}
-            onBreakdownChange={onBreakdownChange}
+            selectedBreakdown={breakdown}
+            onBreakdownChange={setBreakdown}
           />
         </EuiFlexItem>
       </EuiFlexGroup>