[ML] Explain log rate spikes: Fix data view title. (#137053)

- Use dataView.getName() instead of dataView.title.
- Adds missing scss brought over from Data Visualizer to improve positioning of long Data View names.
This commit is contained in:
Walter Rafelsberger 2022-07-26 13:44:57 +02:00 committed by GitHub
parent cd3d2d79c7
commit bd9955a396
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 28 additions and 10 deletions

View file

@ -14,8 +14,6 @@ import { encode } from 'rison-node';
import { useHistory, useLocation } from 'react-router-dom';
import { SavedSearch } from '@kbn/discover-plugin/public';
import { EuiPageBody } from '@elastic/eui';
import type { DataView } from '@kbn/data-views-plugin/public';
import {
@ -160,9 +158,7 @@ export const ExplainLogRateSpikesAppState: FC<ExplainLogRateSpikesAppStateProps>
return (
<UrlStateContextProvider value={{ searchString: urlSearchString, setUrlState }}>
<EuiPageBody data-test-subj="aiopsIndexPage" paddingSize="none" panelled={false}>
<ExplainLogRateSpikesPage dataView={dataView} savedSearch={savedSearch} />
</EuiPageBody>
<ExplainLogRateSpikesPage dataView={dataView} savedSearch={savedSearch} />
</UrlStateContextProvider>
);
};

View file

@ -0,0 +1,16 @@
/* TODO Consolidate with code from `index_data_visualizer_view.tsx/scss`. */
.dataViewTitleHeader {
min-width: 300px;
padding: $euiSizeS 0;
display: flex;
flex-direction: row;
align-items: center;
}
@include euiBreakpoint('xs', 's', 'm', 'l') {
.aiopsPageHeader {
flex-direction: column;
align-items: flex-start;
}
}

View file

@ -10,6 +10,7 @@ import {
EuiFlexGroup,
EuiFlexItem,
EuiHorizontalRule,
EuiPageBody,
EuiPageContentBody,
EuiPageContentHeader,
EuiPageContentHeaderSection,
@ -35,6 +36,9 @@ import { SearchPanel } from '../search_panel';
import { restorableDefaults } from './explain_log_rate_spikes_app_state';
import { ExplainLogRateSpikesAnalysis } from './explain_log_rate_spikes_analysis';
// TODO port to `@emotion/react` once `useEuiBreakpoint` is available https://github.com/elastic/eui/pull/6057
import './explain_log_rate_spikes_page.scss';
/**
* ExplainLogRateSpikes props require a data view.
*/
@ -156,14 +160,14 @@ export const ExplainLogRateSpikesPage: FC<ExplainLogRateSpikesPageProps> = ({
}, [dataService, searchQueryLanguage, searchString]);
return (
<>
<EuiFlexGroup gutterSize="m">
<EuiPageBody data-test-subj="aiopsIndexPage" paddingSize="none" panelled={false}>
<EuiFlexGroup gutterSize="none">
<EuiFlexItem>
<EuiPageContentHeader className="aiopsPageHeader">
<EuiPageContentHeaderSection>
<div className="aiopsTitleHeader">
<div className="dataViewTitleHeader">
<EuiTitle size={'s'}>
<h2>{dataView.title}</h2>
<h2>{dataView.getName()}</h2>
</EuiTitle>
</div>
</EuiPageContentHeaderSection>
@ -233,6 +237,6 @@ export const ExplainLogRateSpikesPage: FC<ExplainLogRateSpikesPageProps> = ({
)}
</EuiFlexGroup>
</EuiPageContentBody>
</>
</EuiPageBody>
);
};

View file

@ -1,5 +1,6 @@
.dataViewTitleHeader {
min-width: 300px;
padding: $euiSizeS 0;
display: flex;
flex-direction: row;
align-items: center;

View file

@ -52,6 +52,7 @@ import { DataVisualizerDataViewManagement } from '../data_view_management';
import { GetAdditionalLinks } from '../../../common/components/results_links';
import { useDataVisualizerGridData } from '../../hooks/use_data_visualizer_grid_data';
import { DataVisualizerGridInput } from '../../embeddables/grid_embeddable/grid_embeddable';
// TODO port to `@emotion/react` once `useEuiBreakpoint` is available https://github.com/elastic/eui/pull/6057
import './_index.scss';
import { RANDOM_SAMPLER_OPTION, RandomSamplerOption } from '../../constants/random_sampler';