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 { i18n } from '@kbn/i18n';
|
||||
import React from 'react';
|
||||
import { useTrackPageview } from '../../../../../observability/public';
|
||||
import { isRumAgentName } from '../../../../common/agent_name';
|
||||
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 { LatencyChart } from '../../shared/charts/latency_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', delay: 15000 });
|
||||
|
||||
const { transactionType } = useApmServiceContext();
|
||||
const transactionTypeLabel = i18n.translate(
|
||||
'xpack.apm.serviceOverview.searchBar.transactionTypeLabel',
|
||||
{ defaultMessage: 'Type: {transactionType}', values: { transactionType } }
|
||||
);
|
||||
|
||||
return (
|
||||
<AnnotationsContextProvider>
|
||||
<ChartPointerEventContextProvider>
|
||||
<SearchBar />
|
||||
<SearchBar prepend={transactionTypeLabel} />
|
||||
<EuiPage>
|
||||
<EuiFlexGroup direction="column" gutterSize="s">
|
||||
<EuiFlexItem>
|
||||
|
|
|
@ -156,7 +156,13 @@ export class Typeahead extends Component {
|
|||
};
|
||||
|
||||
render() {
|
||||
const { placeholder } = this.props;
|
||||
const {
|
||||
disabled,
|
||||
isLoading,
|
||||
placeholder,
|
||||
prepend,
|
||||
suggestions,
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<ClickOutside
|
||||
|
@ -175,7 +181,7 @@ export class Typeahead extends Component {
|
|||
this.inputRef = node;
|
||||
}
|
||||
}}
|
||||
disabled={this.props.disabled}
|
||||
disabled={disabled}
|
||||
value={this.state.value}
|
||||
onKeyDown={this.onKeyDown}
|
||||
onKeyUp={this.onKeyUp}
|
||||
|
@ -183,9 +189,10 @@ export class Typeahead extends Component {
|
|||
onClick={this.onClickInput}
|
||||
autoComplete="off"
|
||||
spellCheck={false}
|
||||
prepend={prepend}
|
||||
/>
|
||||
|
||||
{this.props.isLoading && (
|
||||
{isLoading && (
|
||||
<EuiProgress
|
||||
size="xs"
|
||||
color="accent"
|
||||
|
@ -200,7 +207,7 @@ export class Typeahead extends Component {
|
|||
|
||||
<Suggestions
|
||||
show={this.state.isSuggestionsVisible}
|
||||
suggestions={this.props.suggestions}
|
||||
suggestions={suggestions}
|
||||
index={this.state.index}
|
||||
onClick={this.onClickSuggestion}
|
||||
onMouseEnter={this.onMouseEnterSuggestion}
|
||||
|
@ -218,6 +225,7 @@ Typeahead.propTypes = {
|
|||
onSubmit: PropTypes.func.isRequired,
|
||||
suggestions: PropTypes.array.isRequired,
|
||||
placeholder: PropTypes.string.isRequired,
|
||||
prepend: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
||||
};
|
||||
|
||||
Typeahead.defaultProps = {
|
||||
|
|
|
@ -37,7 +37,7 @@ function convertKueryToEsQuery(kuery: string, indexPattern: IIndexPattern) {
|
|||
return esKuery.toElasticsearchQuery(ast, indexPattern);
|
||||
}
|
||||
|
||||
export function KueryBar() {
|
||||
export function KueryBar(props: { prepend?: React.ReactNode | string }) {
|
||||
const { groupId, serviceName } = useParams<{
|
||||
groupId?: string;
|
||||
serviceName?: string;
|
||||
|
@ -152,6 +152,7 @@ export function KueryBar() {
|
|||
onSubmit={onSubmit}
|
||||
suggestions={state.suggestions}
|
||||
placeholder={placeholder}
|
||||
prepend={props.prepend}
|
||||
/>
|
||||
</Container>
|
||||
);
|
||||
|
|
|
@ -15,11 +15,11 @@ const SearchBarFlexGroup = styled(EuiFlexGroup)`
|
|||
`${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 (
|
||||
<SearchBarFlexGroup alignItems="flexStart" gutterSize="s">
|
||||
<EuiFlexItem grow={3}>
|
||||
<KueryBar />
|
||||
<KueryBar prepend={props.prepend} />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={1}>
|
||||
<DatePicker />
|
||||
|
|
Loading…
Reference in a new issue