Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
parent
385f72792e
commit
8c75c8f129
|
@ -5,10 +5,12 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { EuiFlexGroup, EuiFlexItem, EuiPage, EuiPanel } from '@elastic/eui';
|
import { EuiFlexGroup, EuiFlexItem, EuiPage, EuiPanel } from '@elastic/eui';
|
||||||
|
import { i18n } from '@kbn/i18n';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { useTrackPageview } from '../../../../../observability/public';
|
import { useTrackPageview } from '../../../../../observability/public';
|
||||||
import { isRumAgentName } from '../../../../common/agent_name';
|
import { isRumAgentName } from '../../../../common/agent_name';
|
||||||
import { AnnotationsContextProvider } from '../../../context/annotations/annotations_context';
|
import { AnnotationsContextProvider } from '../../../context/annotations/annotations_context';
|
||||||
|
import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context';
|
||||||
import { ChartPointerEventContextProvider } from '../../../context/chart_pointer_event/chart_pointer_event_context';
|
import { ChartPointerEventContextProvider } from '../../../context/chart_pointer_event/chart_pointer_event_context';
|
||||||
import { LatencyChart } from '../../shared/charts/latency_chart';
|
import { LatencyChart } from '../../shared/charts/latency_chart';
|
||||||
import { TransactionBreakdownChart } from '../../shared/charts/transaction_breakdown_chart';
|
import { TransactionBreakdownChart } from '../../shared/charts/transaction_breakdown_chart';
|
||||||
|
@ -38,10 +40,16 @@ export function ServiceOverview({
|
||||||
useTrackPageview({ app: 'apm', path: 'service_overview' });
|
useTrackPageview({ app: 'apm', path: 'service_overview' });
|
||||||
useTrackPageview({ app: 'apm', path: 'service_overview', delay: 15000 });
|
useTrackPageview({ app: 'apm', path: 'service_overview', delay: 15000 });
|
||||||
|
|
||||||
|
const { transactionType } = useApmServiceContext();
|
||||||
|
const transactionTypeLabel = i18n.translate(
|
||||||
|
'xpack.apm.serviceOverview.searchBar.transactionTypeLabel',
|
||||||
|
{ defaultMessage: 'Type: {transactionType}', values: { transactionType } }
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AnnotationsContextProvider>
|
<AnnotationsContextProvider>
|
||||||
<ChartPointerEventContextProvider>
|
<ChartPointerEventContextProvider>
|
||||||
<SearchBar />
|
<SearchBar prepend={transactionTypeLabel} />
|
||||||
<EuiPage>
|
<EuiPage>
|
||||||
<EuiFlexGroup direction="column" gutterSize="s">
|
<EuiFlexGroup direction="column" gutterSize="s">
|
||||||
<EuiFlexItem>
|
<EuiFlexItem>
|
||||||
|
|
|
@ -156,7 +156,13 @@ export class Typeahead extends Component {
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { placeholder } = this.props;
|
const {
|
||||||
|
disabled,
|
||||||
|
isLoading,
|
||||||
|
placeholder,
|
||||||
|
prepend,
|
||||||
|
suggestions,
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ClickOutside
|
<ClickOutside
|
||||||
|
@ -175,7 +181,7 @@ export class Typeahead extends Component {
|
||||||
this.inputRef = node;
|
this.inputRef = node;
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
disabled={this.props.disabled}
|
disabled={disabled}
|
||||||
value={this.state.value}
|
value={this.state.value}
|
||||||
onKeyDown={this.onKeyDown}
|
onKeyDown={this.onKeyDown}
|
||||||
onKeyUp={this.onKeyUp}
|
onKeyUp={this.onKeyUp}
|
||||||
|
@ -183,9 +189,10 @@ export class Typeahead extends Component {
|
||||||
onClick={this.onClickInput}
|
onClick={this.onClickInput}
|
||||||
autoComplete="off"
|
autoComplete="off"
|
||||||
spellCheck={false}
|
spellCheck={false}
|
||||||
|
prepend={prepend}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{this.props.isLoading && (
|
{isLoading && (
|
||||||
<EuiProgress
|
<EuiProgress
|
||||||
size="xs"
|
size="xs"
|
||||||
color="accent"
|
color="accent"
|
||||||
|
@ -200,7 +207,7 @@ export class Typeahead extends Component {
|
||||||
|
|
||||||
<Suggestions
|
<Suggestions
|
||||||
show={this.state.isSuggestionsVisible}
|
show={this.state.isSuggestionsVisible}
|
||||||
suggestions={this.props.suggestions}
|
suggestions={suggestions}
|
||||||
index={this.state.index}
|
index={this.state.index}
|
||||||
onClick={this.onClickSuggestion}
|
onClick={this.onClickSuggestion}
|
||||||
onMouseEnter={this.onMouseEnterSuggestion}
|
onMouseEnter={this.onMouseEnterSuggestion}
|
||||||
|
@ -218,6 +225,7 @@ Typeahead.propTypes = {
|
||||||
onSubmit: PropTypes.func.isRequired,
|
onSubmit: PropTypes.func.isRequired,
|
||||||
suggestions: PropTypes.array.isRequired,
|
suggestions: PropTypes.array.isRequired,
|
||||||
placeholder: PropTypes.string.isRequired,
|
placeholder: PropTypes.string.isRequired,
|
||||||
|
prepend: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
||||||
};
|
};
|
||||||
|
|
||||||
Typeahead.defaultProps = {
|
Typeahead.defaultProps = {
|
||||||
|
|
|
@ -37,7 +37,7 @@ function convertKueryToEsQuery(kuery: string, indexPattern: IIndexPattern) {
|
||||||
return esKuery.toElasticsearchQuery(ast, indexPattern);
|
return esKuery.toElasticsearchQuery(ast, indexPattern);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function KueryBar() {
|
export function KueryBar(props: { prepend?: React.ReactNode | string }) {
|
||||||
const { groupId, serviceName } = useParams<{
|
const { groupId, serviceName } = useParams<{
|
||||||
groupId?: string;
|
groupId?: string;
|
||||||
serviceName?: string;
|
serviceName?: string;
|
||||||
|
@ -152,6 +152,7 @@ export function KueryBar() {
|
||||||
onSubmit={onSubmit}
|
onSubmit={onSubmit}
|
||||||
suggestions={state.suggestions}
|
suggestions={state.suggestions}
|
||||||
placeholder={placeholder}
|
placeholder={placeholder}
|
||||||
|
prepend={props.prepend}
|
||||||
/>
|
/>
|
||||||
</Container>
|
</Container>
|
||||||
);
|
);
|
||||||
|
|
|
@ -15,11 +15,11 @@ const SearchBarFlexGroup = styled(EuiFlexGroup)`
|
||||||
`${theme.eui.euiSizeM} ${theme.eui.euiSizeM} -${theme.eui.gutterTypes.gutterMedium} ${theme.eui.euiSizeM}`};
|
`${theme.eui.euiSizeM} ${theme.eui.euiSizeM} -${theme.eui.gutterTypes.gutterMedium} ${theme.eui.euiSizeM}`};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export function SearchBar() {
|
export function SearchBar(props: { prepend?: React.ReactNode | string }) {
|
||||||
return (
|
return (
|
||||||
<SearchBarFlexGroup alignItems="flexStart" gutterSize="s">
|
<SearchBarFlexGroup alignItems="flexStart" gutterSize="s">
|
||||||
<EuiFlexItem grow={3}>
|
<EuiFlexItem grow={3}>
|
||||||
<KueryBar />
|
<KueryBar prepend={props.prepend} />
|
||||||
</EuiFlexItem>
|
</EuiFlexItem>
|
||||||
<EuiFlexItem grow={1}>
|
<EuiFlexItem grow={1}>
|
||||||
<DatePicker />
|
<DatePicker />
|
||||||
|
|
Loading…
Reference in a new issue