mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 09:48:58 -04:00
[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:
parent
5b38816a97
commit
bb70c6a82a
3 changed files with 32 additions and 16 deletions
|
@ -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>
|
||||
|
|
|
@ -123,7 +123,7 @@ export function TransactionOverview({ serviceName }: TransactionOverviewProps) {
|
|||
<EuiFlexItem grow={7}>
|
||||
{transactionType === TRANSACTION_PAGE_LOAD && (
|
||||
<>
|
||||
<UserExperienceCallout />
|
||||
<UserExperienceCallout serviceName={serviceName} />
|
||||
<EuiSpacer size="s" />
|
||||
</>
|
||||
)}
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue