github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 09:19:04 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Infrastructure UI] Dinamically set sticky bar position for Hosts View (#155139)

Browse source 
## 📓  Summary

Closes #155114

Instead of having a fixed value for the sticky bar position, we now set
it accordingly to the top position of the main app container.


https://user-images.githubusercontent.com/34506779/232760797-c91f8ade-b1bc-4921-9ef7-30d4647219b5.mov

Co-authored-by: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co>
This commit is contained in:
Marco Antonio Ghiani 2023-04-18 14:14:53 +02:00 • committed by GitHub
parent 9d30965a1d
commit 56459aed58
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

4
x-pack/plugins/infra/public/apps/metrics_app.tsx
View file

@ -22,6 +22,8 @@ import { CommonInfraProviders, CoreProviders } from './common_providers';
import { prepareMountElement } from './common_styles';
import { SourceProvider } from '../containers/metrics_source';
export const METRICS_APP_DATA_TEST_SUBJ = 'infraMetricsPage';
export const renderApp = (
core: CoreStart,
plugins: InfraClientStartDeps,
@ -30,7 +32,7 @@ export const renderApp = (
) => {
const storage = new Storage(window.localStorage);
prepareMountElement(element, 'infraMetricsPage');
prepareMountElement(element, METRICS_APP_DATA_TEST_SUBJ);
ReactDOM.render(
<MetricsApp

14
x-pack/plugins/infra/public/pages/metrics/hosts/components/unified_search_bar.tsx
View file

@ -5,12 +5,13 @@
* 2.0.
*/
import React from 'react';
import React, { useMemo } from 'react';
import { compareFilters, COMPARE_ALL_OPTIONS, type Filter } from '@kbn/es-query';
import { i18n } from '@kbn/i18n';
import { EuiFlexGrid, useEuiTheme } from '@elastic/eui';
import { css } from '@emotion/react';
import { EuiHorizontalRule } from '@elastic/eui';
import { METRICS_APP_DATA_TEST_SUBJ } from '../../../../apps/metrics_app';
import { useKibanaContextForPlugin } from '../../../../hooks/use_kibana';
import { useUnifiedSearchContext } from '../hooks/use_unified_search';
import { ControlsContent } from './controls_content';
@ -71,12 +72,21 @@ export const UnifiedSearchBar = () => {
const StickyContainer = (props: { children: React.ReactNode }) => {
const { euiTheme } = useEuiTheme();
const top = useMemo(() => {
const wrapper = document.querySelector(`[data-test-subj="${METRICS_APP_DATA_TEST_SUBJ}"]`);
if (!wrapper) {
return `calc(${euiTheme.size.xxxl} * 2)`;
}
return `${wrapper.getBoundingClientRect().top}px`;
}, [euiTheme]);
return (
<EuiFlexGrid
gutterSize="none"
css={css`
position: sticky;
top: calc(${euiTheme.size.xxxl} * 2);
top: ${top};
z-index: ${euiTheme.levels.header};
background: ${euiTheme.colors.emptyShade};
padding-top: ${euiTheme.size.m};