[APM] Only display relevant sections for rum agent in service overview (#88410)

* [APM] Only display relevent sections for rum agent in service overview (#85546)

* call `isRumAgentName` once

* User experience callout links to the selected service
This commit is contained in:
Oliver Gupte 2021-01-15 12:41:16 -08:00 committed by GitHub
parent 5b38816a97
commit bb70c6a82a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 32 additions and 16 deletions

View file

@ -16,6 +16,7 @@ import { LatencyChart } from '../../shared/charts/latency_chart';
import { TransactionBreakdownChart } from '../../shared/charts/transaction_breakdown_chart';
import { TransactionErrorRateChart } from '../../shared/charts/transaction_error_rate_chart';
import { SearchBar } from '../../shared/search_bar';
import { UserExperienceCallout } from '../transaction_overview/user_experience_callout';
import { ServiceOverviewDependenciesTable } from './service_overview_dependencies_table';
import { ServiceOverviewErrorsTable } from './service_overview_errors_table';
import { ServiceOverviewInstancesTable } from './service_overview_instances_table';
@ -51,6 +52,7 @@ export function ServiceOverview({
'xpack.apm.serviceOverview.searchBar.transactionTypeLabel',
{ defaultMessage: 'Type: {transactionType}', values: { transactionType } }
);
const isRumAgent = isRumAgentName(agentName);
return (
<AnnotationsContextProvider>
@ -58,6 +60,11 @@ export function ServiceOverview({
<SearchBar prepend={transactionTypeLabel} />
<EuiPage>
<EuiFlexGroup direction="column" gutterSize="s">
{isRumAgent && (
<EuiFlexItem>
<UserExperienceCallout serviceName={serviceName} />
</EuiFlexItem>
)}
<EuiFlexItem>
<EuiPanel>
<LatencyChart height={200} />
@ -87,7 +94,7 @@ export function ServiceOverview({
gutterSize="s"
responsive={false}
>
{!isRumAgentName(agentName) && (
{!isRumAgent && (
<EuiFlexItem grow={3}>
<TransactionErrorRateChart
height={chartHeight}
@ -111,20 +118,24 @@ export function ServiceOverview({
<EuiFlexItem grow={3}>
<TransactionBreakdownChart showAnnotations={false} />
</EuiFlexItem>
<EuiFlexItem grow={7}>
<EuiPanel>
<ServiceOverviewDependenciesTable
serviceName={serviceName}
/>
</EuiPanel>
</EuiFlexItem>
{!isRumAgent && (
<EuiFlexItem grow={7}>
<EuiPanel>
<ServiceOverviewDependenciesTable
serviceName={serviceName}
/>
</EuiPanel>
</EuiFlexItem>
)}
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem>
<EuiPanel>
<ServiceOverviewInstancesTable serviceName={serviceName} />
</EuiPanel>
</EuiFlexItem>
{!isRumAgent && (
<EuiFlexItem>
<EuiPanel>
<ServiceOverviewInstancesTable serviceName={serviceName} />
</EuiPanel>
</EuiFlexItem>
)}
</EuiFlexGroup>
</EuiPage>
</ChartPointerEventContextProvider>

View file

@ -123,7 +123,7 @@ export function TransactionOverview({ serviceName }: TransactionOverviewProps) {
<EuiFlexItem grow={7}>
{transactionType === TRANSACTION_PAGE_LOAD && (
<>
<UserExperienceCallout />
<UserExperienceCallout serviceName={serviceName} />
<EuiSpacer size="s" />
</>
)}

View file

@ -9,9 +9,14 @@ import { EuiButton, EuiCallOut, EuiSpacer, EuiText } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
export function UserExperienceCallout() {
interface Props {
serviceName: string;
}
export function UserExperienceCallout({ serviceName }: Props) {
const { core } = useApmPluginContext();
const userExperienceHref = core.http.basePath.prepend(`/app/ux`);
const userExperienceHref = core.http.basePath.prepend(
`/app/ux?serviceName=${serviceName}`
);
return (
<EuiCallOut