[7.15] [User Experience app] Simplify page header responsiveness in ux app (#112930)

x-pack/plugins/apm/public/application/uxApp.tsx

@@ -22,7 +22,10 @@ import {
 } from '../../../../../src/plugins/kibana_react/public';
 import { APMRouteDefinition } from '../application/routes';
 import { ScrollToTopOnPathChange } from '../components/app/Main/ScrollToTopOnPathChange';
-import { RumHome, UX_LABEL } from '../components/app/RumDashboard/RumHome';
+import {
+  RumHome,
+  DASHBOARD_LABEL,
+} from '../components/app/RumDashboard/RumHome';
 import { ApmPluginContext } from '../context/apm_plugin/apm_plugin_context';
 import { UrlParamsProvider } from '../context/url_params_context/url_params_context';
 import { ConfigSchema } from '../index';
@@ -40,7 +43,7 @@ export const uxRoutes: APMRouteDefinition[] = [
     exact: true,
     path: '/',
     render: redirectTo('/ux'),
-    breadcrumb: UX_LABEL,
+    breadcrumb: DASHBOARD_LABEL,
   },
 ];
 

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

@@ -17,73 +17,49 @@ import { EnvironmentFilter } from '../../shared/EnvironmentFilter';
 import { UserPercentile } from './UserPercentile';
 import { useBreakpoints } from '../../../hooks/use_breakpoints';
 
-export const UX_LABEL = i18n.translate('xpack.apm.ux.title', {
+export const DASHBOARD_LABEL = i18n.translate('xpack.apm.ux.title', {
   defaultMessage: 'Dashboard',
 });
 
 export function RumHome() {
   const { observability } = useApmPluginContext();
   const PageTemplateComponent = observability.navigation.PageTemplate;
 
-  const { isSmall, isXXL } = useBreakpoints();
-
-  const envStyle = isSmall ? {} : { maxWidth: 500 };
-
   return (
     <CsmSharedContextProvider>
-      <PageTemplateComponent
-        pageHeader={
-          isXXL
-            ? {
-                pageTitle: i18n.translate('xpack.apm.ux.overview', {
-                  defaultMessage: 'Dashboard',
-                }),
-                rightSideItems: [
-                  <DatePicker />,
-                  <div style={envStyle}>
-                    <EnvironmentFilter />
-                  </div>,
-                  <UserPercentile />,
-                  <WebApplicationSelect />,
-                ],
-              }
-            : { children: <PageHeader /> }
-        }
-      >
+      <PageTemplateComponent pageHeader={{ children: <PageHeader /> }}>
         <RumOverview />
       </PageTemplateComponent>
     </CsmSharedContextProvider>
   );
 }
 
 function PageHeader() {
-  const { isSmall } = useBreakpoints();
+  const sizes = useBreakpoints();
 
-  const envStyle = isSmall ? {} : { maxWidth: 400 };
+  const datePickerStyle = sizes.isMedium ? {} : { maxWidth: '70%' };
 
   return (
     <div style={{ width: '100%' }}>
       <EuiFlexGroup wrap>
         <EuiFlexItem>
           <EuiTitle>
-            <h1>{UX_LABEL}</h1>
+            <h1 className="eui-textNoWrap">{DASHBOARD_LABEL}</h1>
           </EuiTitle>
         </EuiFlexItem>
-        <EuiFlexItem>
+        <EuiFlexItem style={{ alignItems: 'flex-end', ...datePickerStyle }}>
           <DatePicker />
         </EuiFlexItem>
       </EuiFlexGroup>
       <EuiFlexGroup wrap>
-        <EuiFlexItem grow={false}>
+        <EuiFlexItem>
           <WebApplicationSelect />
         </EuiFlexItem>
-        <EuiFlexItem grow={false}>
+        <EuiFlexItem>
           <UserPercentile />
         </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <div style={envStyle}>
-            <EnvironmentFilter />
-          </div>
+        <EuiFlexItem>
+          <EnvironmentFilter />
         </EuiFlexItem>
       </EuiFlexGroup>
     </div>

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

@@ -65,23 +65,22 @@ function ServiceNameFilter({ loading, serviceNames }: Props) {
   }, [serviceNames, selectedServiceName, updateServiceName, loading]);
 
   return (
-    <>
-      <EuiSelect
-        prepend={i18n.translate(
-          'xpack.apm.ux.localFilters.titles.webApplication',
-          {
-            defaultMessage: 'Web application',
-          }
-        )}
-        isLoading={loading}
-        data-cy="serviceNameFilter"
-        options={options}
-        value={selectedServiceName}
-        onChange={(event) => {
-          updateServiceName(event.target.value);
-        }}
-      />
-    </>
+    <EuiSelect
+      fullWidth
+      prepend={i18n.translate(
+        'xpack.apm.ux.localFilters.titles.webApplication',
+        {
+          defaultMessage: 'Web application',
+        }
+      )}
+      isLoading={loading}
+      data-cy="serviceNameFilter"
+      options={options}
+      value={selectedServiceName}
+      onChange={(event) => {
+        updateServiceName(event.target.value);
+      }}
+    />
   );
 }
 

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

@@ -80,9 +80,9 @@ export function UserPercentile() {
 
   return (
     <EuiSelect
+      fullWidth
       prepend={I18LABELS.percentile}
       data-test-subj="uxPercentileSelect"
-      style={{ width: 150 }}
       options={options}
       onChange={(evt) => onChange(evt.target.value)}
     />

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

@@ -85,6 +85,7 @@ export function EnvironmentFilter() {
 
   return (
     <EuiSelect
+      fullWidth
       prepend={i18n.translate('xpack.apm.filter.environment.label', {
         defaultMessage: 'Environment',
       })}

x-pack/plugins/translations/translations/ja-JP.json

@@ -7491,7 +7491,6 @@
     "xpack.apm.ux.localFilters.titles.webApplication": "Webアプリケーション",
     "xpack.apm.ux.median": "中間",
     "xpack.apm.ux.metrics": "メトリック",
-    "xpack.apm.ux.overview": "ダッシュボード",
     "xpack.apm.ux.overview.heading": "ダッシュボード",
     "xpack.apm.ux.percentile.50thMedian": "50 番目（中央値）",
     "xpack.apm.ux.percentile.75th": "75番目",

x-pack/plugins/translations/translations/zh-CN.json

@@ -7552,7 +7552,6 @@
     "xpack.apm.ux.localFilters.titles.webApplication": "Web 应用程序",
     "xpack.apm.ux.median": "中值",
     "xpack.apm.ux.metrics": "指标",
-    "xpack.apm.ux.overview": "仪表板",
     "xpack.apm.ux.overview.heading": "仪表板",
     "xpack.apm.ux.percentile.50thMedian": "第 50 个（中值）",
     "xpack.apm.ux.percentile.75th": "第 75 个",