Merge branch 'main' into update-asset-manager-owner

elastic · Mar 23, 2023 · b5c2f61 · b5c2f61
2 parents 1f38fbe + 327603f
commit b5c2f61
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 4 deletions.
diff --git a/x-pack/plugins/infra/public/pages/metrics/hosts/components/unified_search_bar.tsx b/x-pack/plugins/infra/public/pages/metrics/hosts/components/unified_search_bar.tsx
@@ -15,7 +15,9 @@ import {
   type TimeRange,
 } from '@kbn/es-query';
 import { i18n } from '@kbn/i18n';
-import { EuiFlexGrid } from '@elastic/eui';
+import { EuiFlexGrid, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { EuiHorizontalRule } from '@elastic/eui';
 import type { InfraClientStartDeps } from '../../../../types';
 import { useUnifiedSearchContext } from '../hooks/use_unified_search';
 import { ControlsContent } from './controls_content';
@@ -54,7 +56,7 @@ export const UnifiedSearchBar = () => {
   };
 
   return (
-    <EuiFlexGrid gutterSize="s">
+    <StickyContainer>
       <SearchBar
         appName={'Infra Hosts'}
         displayStyle="inPage"
@@ -77,6 +79,26 @@ export const UnifiedSearchBar = () => {
         filters={searchCriteria.filters}
         onFiltersChange={onPanelFiltersChange}
       />
-    </EuiFlexGrid>
+      <EuiHorizontalRule margin="none" />
+    </StickyContainer>
+  );
+};
+
+const StickyContainer = (props: { children: React.ReactNode }) => {
+  const { euiTheme } = useEuiTheme();
+
+  return (
+    <EuiFlexGrid
+      gutterSize="none"
+      css={css`
+        position: sticky;
+        top: calc(${euiTheme.size.xxxl} * 2);
+        z-index: ${euiTheme.levels.header};
+        background: ${euiTheme.colors.emptyShade};
+        padding-top: ${euiTheme.size.m};
+        margin-top: -${euiTheme.size.l};
+      `}
+      {...props}
+    />
   );
 };
diff --git a/x-pack/test/functional/apps/infra/hosts_view.ts b/x-pack/test/functional/apps/infra/hosts_view.ts
@@ -196,6 +196,11 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
       });
 
       describe('Metrics Tab', () => {
+        before(async () => {
+          browser.scrollTop();
+          await pageObjects.infraHostsView.visitMetricsTab();
+        });
+
         it('should load 8 lens metric charts', async () => {
           const metricCharts = await pageObjects.infraHostsView.getAllMetricsCharts();
           expect(metricCharts.length).to.equal(8);
@@ -217,6 +222,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
         const COLUMNS = 5;
 
         before(async () => {
+          browser.scrollTop();
           await pageObjects.infraHostsView.visitAlertTab();
         });
 

diff --git a/x-pack/test/functional/page_objects/infra_hosts_view.ts b/x-pack/test/functional/page_objects/infra_hosts_view.ts
@@ -54,6 +54,15 @@ export function InfraHostsViewProvider({ getService }: FtrProviderContext) {
       return testSubjects.find('hostsView-metricChart');
     },
 
+    getMetricsTab() {
+      return testSubjects.find('hostsView-tabs-metrics');
+    },
+
+    async visitMetricsTab() {
+      const metricsTab = await this.getMetricsTab();
+      metricsTab.click();
+    },
+
     async getAllMetricsTrendTiles() {
       const container = await this.getMetricsTrendContainer();
       return container.findAllByCssSelector('[data-test-subj*="hostsView-metricsTrend-"]');
@@ -73,7 +82,7 @@ export function InfraHostsViewProvider({ getService }: FtrProviderContext) {
 
     async getOpenInLensOption() {
       const metricCharts = await this.getAllMetricsCharts();
-      const chart = metricCharts[0];
+      const chart = metricCharts.at(-1)!;
       await chart.moveMouseTo();
       const button = await testSubjects.findDescendant('embeddablePanelToggleMenuIcon', chart);
       await button.click();