[User Experience app] Simplify page header responsiveness in ux app (#…

…112930) Co-authored-by: Kibana Machine <[email protected]>
elastic · Sep 28, 2021 · 62e7dee · 62e7dee
1 parent c31674c
commit 62e7dee
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 54 deletions.
diff --git a/x-pack/plugins/apm/public/application/uxApp.tsx b/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,
   },
 ];
 

diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/RumHome.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/RumHome.tsx
@@ -20,20 +20,16 @@ import { KibanaPageTemplateProps } from '../../../../../../../src/plugins/kibana
 import { useHasRumData } from './hooks/useHasRumData';
 import { EmptyStateLoading } from './empty_state_loading';
 
-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 { core, observability } = useApmPluginContext();
   const PageTemplateComponent = observability.navigation.PageTemplate;
 
-  const { isSmall, isXXL } = useBreakpoints();
-
   const { data: rumHasData, status } = useHasRumData();
 
-  const envStyle = isSmall ? {} : { maxWidth: 500 };
-
   const noDataConfig: KibanaPageTemplateProps['noDataConfig'] =
     !rumHasData?.hasData
       ? {
@@ -66,23 +62,7 @@ export function RumHome() {
       <CsmSharedContextProvider>
         <PageTemplateComponent
           noDataConfig={isLoading ? undefined : noDataConfig}
-          pageHeader={
-            isXXL
-              ? {
-                  pageTitle: i18n.translate('xpack.apm.ux.overview', {
-                    defaultMessage: 'Dashboard',
-                  }),
-                  rightSideItems: [
-                    <DatePicker />,
-                    <div style={envStyle}>
-                      <UxEnvironmentFilter />
-                    </div>,
-                    <UserPercentile />,
-                    <WebApplicationSelect />,
-                  ],
-                }
-              : { children: <PageHeader /> }
-          }
+          pageHeader={{ children: <PageHeader /> }}
         >
           {isLoading && <EmptyStateLoading />}
           <div style={{ visibility: isLoading ? 'hidden' : 'initial' }}>
@@ -95,33 +75,31 @@ export function RumHome() {
 }
 
 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}>
-            <UxEnvironmentFilter />
-          </div>
+        <EuiFlexItem>
+          <UxEnvironmentFilter />
         </EuiFlexItem>
       </EuiFlexGroup>
     </div>

diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/URLFilter/ServiceNameFilter/index.tsx b/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);
+      }}
+    />
   );
 }
 

diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/UserPercentile/index.tsx b/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)}
     />

diff --git a/x-pack/plugins/apm/public/components/shared/EnvironmentFilter/index.tsx b/x-pack/plugins/apm/public/components/shared/EnvironmentFilter/index.tsx
@@ -126,6 +126,7 @@ export function EnvironmentFilter({
 
   return (
     <EuiSelect
+      fullWidth
       prepend={i18n.translate('xpack.apm.filter.environment.label', {
         defaultMessage: 'Environment',
       })}

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -7070,7 +7070,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番目",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -7129,7 +7129,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 个",