mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 01:38:56 -04:00
Update dependencies overview route to use backendName as a query param (#115226)
* Update dependencies overview route to use backendName as a query param * Remove backendName from context * Move backendMetadataFetch call to the place that is used and remove ApmBackendContext * Update API routes and tests * Add redirect from the old route
This commit is contained in:
parent
3d47a03489
commit
dc77c89e84
20 changed files with 223 additions and 268 deletions
|
@ -13,7 +13,6 @@ import { useUrlParams } from '../../../context/url_params_context/use_url_params
|
|||
import { useFetcher } from '../../../hooks/use_fetcher';
|
||||
import { getTimeRangeComparison } from '../../shared/time_comparison/get_time_range_comparison';
|
||||
import { DependenciesTable } from '../../shared/dependencies_table';
|
||||
import { useApmBackendContext } from '../../../context/apm_backend/use_apm_backend_context';
|
||||
import { ServiceLink } from '../../shared/service_link';
|
||||
import { useTimeRange } from '../../../hooks/use_time_range';
|
||||
|
||||
|
@ -23,8 +22,8 @@ export function BackendDetailDependenciesTable() {
|
|||
} = useUrlParams();
|
||||
|
||||
const {
|
||||
query: { rangeFrom, rangeTo, kuery, environment },
|
||||
} = useApmParams('/backends/{backendName}/overview');
|
||||
query: { backendName, rangeFrom, rangeTo, kuery, environment },
|
||||
} = useApmParams('/backends/overview');
|
||||
|
||||
const { start, end } = useTimeRange({ rangeFrom, rangeTo });
|
||||
|
||||
|
@ -35,8 +34,6 @@ export function BackendDetailDependenciesTable() {
|
|||
comparisonType,
|
||||
});
|
||||
|
||||
const { backendName } = useApmBackendContext();
|
||||
|
||||
const { data, status } = useFetcher(
|
||||
(callApmApi) => {
|
||||
if (!start || !end) {
|
||||
|
@ -44,12 +41,17 @@ export function BackendDetailDependenciesTable() {
|
|||
}
|
||||
|
||||
return callApmApi({
|
||||
endpoint: 'GET /internal/apm/backends/{backendName}/upstream_services',
|
||||
endpoint: 'GET /internal/apm/backends/upstream_services',
|
||||
params: {
|
||||
path: {
|
||||
query: {
|
||||
backendName,
|
||||
start,
|
||||
end,
|
||||
environment,
|
||||
numBuckets: 20,
|
||||
offset,
|
||||
kuery,
|
||||
},
|
||||
query: { start, end, environment, numBuckets: 20, offset, kuery },
|
||||
},
|
||||
});
|
||||
},
|
||||
|
|
|
@ -7,7 +7,6 @@
|
|||
import React, { useMemo } from 'react';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { asPercent } from '../../../../common/utils/formatters';
|
||||
import { useApmBackendContext } from '../../../context/apm_backend/use_apm_backend_context';
|
||||
import { useComparison } from '../../../hooks/use_comparison';
|
||||
import { useFetcher } from '../../../hooks/use_fetcher';
|
||||
import { useTimeRange } from '../../../hooks/use_time_range';
|
||||
|
@ -25,13 +24,11 @@ export function BackendFailedTransactionRateChart({
|
|||
}: {
|
||||
height: number;
|
||||
}) {
|
||||
const { backendName } = useApmBackendContext();
|
||||
|
||||
const theme = useTheme();
|
||||
|
||||
const {
|
||||
query: { kuery, environment, rangeFrom, rangeTo },
|
||||
} = useApmParams('/backends/{backendName}/overview');
|
||||
query: { backendName, kuery, environment, rangeFrom, rangeTo },
|
||||
} = useApmParams('/backends/overview');
|
||||
|
||||
const { start, end } = useTimeRange({ rangeFrom, rangeTo });
|
||||
|
||||
|
@ -44,12 +41,10 @@ export function BackendFailedTransactionRateChart({
|
|||
}
|
||||
|
||||
return callApmApi({
|
||||
endpoint: 'GET /internal/apm/backends/{backendName}/charts/error_rate',
|
||||
endpoint: 'GET /internal/apm/backends/charts/error_rate',
|
||||
params: {
|
||||
path: {
|
||||
backendName,
|
||||
},
|
||||
query: {
|
||||
backendName,
|
||||
start,
|
||||
end,
|
||||
offset,
|
||||
|
|
|
@ -7,7 +7,6 @@
|
|||
import React, { useMemo } from 'react';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { getDurationFormatter } from '../../../../common/utils/formatters';
|
||||
import { useApmBackendContext } from '../../../context/apm_backend/use_apm_backend_context';
|
||||
import { useComparison } from '../../../hooks/use_comparison';
|
||||
import { useFetcher } from '../../../hooks/use_fetcher';
|
||||
import { useTimeRange } from '../../../hooks/use_time_range';
|
||||
|
@ -21,13 +20,11 @@ import {
|
|||
import { useApmParams } from '../../../hooks/use_apm_params';
|
||||
|
||||
export function BackendLatencyChart({ height }: { height: number }) {
|
||||
const { backendName } = useApmBackendContext();
|
||||
|
||||
const theme = useTheme();
|
||||
|
||||
const {
|
||||
query: { rangeFrom, rangeTo, kuery, environment },
|
||||
} = useApmParams('/backends/{backendName}/overview');
|
||||
query: { backendName, rangeFrom, rangeTo, kuery, environment },
|
||||
} = useApmParams('/backends/overview');
|
||||
|
||||
const { start, end } = useTimeRange({ rangeFrom, rangeTo });
|
||||
|
||||
|
@ -40,12 +37,10 @@ export function BackendLatencyChart({ height }: { height: number }) {
|
|||
}
|
||||
|
||||
return callApmApi({
|
||||
endpoint: 'GET /internal/apm/backends/{backendName}/charts/latency',
|
||||
endpoint: 'GET /internal/apm/backends/charts/latency',
|
||||
params: {
|
||||
path: {
|
||||
backendName,
|
||||
},
|
||||
query: {
|
||||
backendName,
|
||||
start,
|
||||
end,
|
||||
offset,
|
||||
|
|
|
@ -7,7 +7,6 @@
|
|||
import React, { useMemo } from 'react';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { asTransactionRate } from '../../../../common/utils/formatters';
|
||||
import { useApmBackendContext } from '../../../context/apm_backend/use_apm_backend_context';
|
||||
import { useComparison } from '../../../hooks/use_comparison';
|
||||
import { useFetcher } from '../../../hooks/use_fetcher';
|
||||
import { useTimeRange } from '../../../hooks/use_time_range';
|
||||
|
@ -17,13 +16,11 @@ import { useTheme } from '../../../hooks/use_theme';
|
|||
import { useApmParams } from '../../../hooks/use_apm_params';
|
||||
|
||||
export function BackendThroughputChart({ height }: { height: number }) {
|
||||
const { backendName } = useApmBackendContext();
|
||||
|
||||
const theme = useTheme();
|
||||
|
||||
const {
|
||||
query: { rangeFrom, rangeTo, kuery, environment },
|
||||
} = useApmParams('/backends/{backendName}/overview');
|
||||
query: { backendName, rangeFrom, rangeTo, kuery, environment },
|
||||
} = useApmParams('/backends/overview');
|
||||
|
||||
const { start, end } = useTimeRange({ rangeFrom, rangeTo });
|
||||
|
||||
|
@ -36,12 +33,10 @@ export function BackendThroughputChart({ height }: { height: number }) {
|
|||
}
|
||||
|
||||
return callApmApi({
|
||||
endpoint: 'GET /internal/apm/backends/{backendName}/charts/throughput',
|
||||
endpoint: 'GET /internal/apm/backends/charts/throughput',
|
||||
params: {
|
||||
path: {
|
||||
backendName,
|
||||
},
|
||||
query: {
|
||||
backendName,
|
||||
start,
|
||||
end,
|
||||
offset,
|
||||
|
|
|
@ -11,7 +11,6 @@ import React from 'react';
|
|||
import { EuiSpacer } from '@elastic/eui';
|
||||
import { EuiTitle } from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { ApmBackendContextProvider } from '../../../context/apm_backend/apm_backend_context';
|
||||
import { useBreadcrumb } from '../../../context/breadcrumbs/use_breadcrumb';
|
||||
import { ChartPointerEventContextProvider } from '../../../context/chart_pointer_event/chart_pointer_event_context';
|
||||
import { useApmParams } from '../../../hooks/use_apm_params';
|
||||
|
@ -31,8 +30,8 @@ import { useBreakpoints } from '../../../hooks/use_breakpoints';
|
|||
|
||||
export function BackendDetailOverview() {
|
||||
const {
|
||||
path: { backendName },
|
||||
query: {
|
||||
backendName,
|
||||
rangeFrom,
|
||||
rangeTo,
|
||||
refreshInterval,
|
||||
|
@ -40,7 +39,7 @@ export function BackendDetailOverview() {
|
|||
environment,
|
||||
kuery,
|
||||
},
|
||||
} = useApmParams('/backends/{backendName}/overview');
|
||||
} = useApmParams('/backends/overview');
|
||||
|
||||
const apmRouter = useApmRouter();
|
||||
|
||||
|
@ -60,9 +59,9 @@ export function BackendDetailOverview() {
|
|||
},
|
||||
{
|
||||
title: backendName,
|
||||
href: apmRouter.link('/backends/{backendName}/overview', {
|
||||
path: { backendName },
|
||||
href: apmRouter.link('/backends/overview', {
|
||||
query: {
|
||||
backendName,
|
||||
rangeFrom,
|
||||
rangeTo,
|
||||
refreshInterval,
|
||||
|
@ -82,62 +81,59 @@ export function BackendDetailOverview() {
|
|||
const largeScreenOrSmaller = useBreakpoints().isLarge;
|
||||
|
||||
return (
|
||||
<ApmBackendContextProvider>
|
||||
<BackendDetailTemplate title={backendName}>
|
||||
<SearchBar
|
||||
showTimeComparison
|
||||
kueryBarPlaceholder={kueryBarPlaceholder}
|
||||
kueryBarBoolFilter={kueryBarBoolFilter}
|
||||
/>
|
||||
<ChartPointerEventContextProvider>
|
||||
<EuiFlexGroup
|
||||
direction={largeScreenOrSmaller ? 'column' : 'row'}
|
||||
gutterSize="s"
|
||||
>
|
||||
<EuiFlexItem>
|
||||
<EuiPanel hasBorder={true}>
|
||||
<EuiTitle size="xs">
|
||||
<h2>
|
||||
{i18n.translate(
|
||||
'xpack.apm.backendDetailLatencyChartTitle',
|
||||
{ defaultMessage: 'Latency' }
|
||||
)}
|
||||
</h2>
|
||||
</EuiTitle>
|
||||
<BackendLatencyChart height={200} />
|
||||
</EuiPanel>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiPanel hasBorder={true}>
|
||||
<EuiTitle size="xs">
|
||||
<h2>
|
||||
{i18n.translate(
|
||||
'xpack.apm.backendDetailThroughputChartTitle',
|
||||
{ defaultMessage: 'Throughput' }
|
||||
)}
|
||||
</h2>
|
||||
</EuiTitle>
|
||||
<BackendThroughputChart height={200} />
|
||||
</EuiPanel>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiPanel hasBorder={true}>
|
||||
<EuiTitle size="xs">
|
||||
<h2>
|
||||
{i18n.translate(
|
||||
'xpack.apm.backendDetailFailedTransactionRateChartTitle',
|
||||
{ defaultMessage: 'Failed transaction rate' }
|
||||
)}
|
||||
</h2>
|
||||
</EuiTitle>
|
||||
<BackendFailedTransactionRateChart height={200} />
|
||||
</EuiPanel>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</ChartPointerEventContextProvider>
|
||||
<EuiSpacer size="l" />
|
||||
<BackendDetailDependenciesTable />
|
||||
</BackendDetailTemplate>
|
||||
</ApmBackendContextProvider>
|
||||
<BackendDetailTemplate title={backendName}>
|
||||
<SearchBar
|
||||
showTimeComparison
|
||||
kueryBarPlaceholder={kueryBarPlaceholder}
|
||||
kueryBarBoolFilter={kueryBarBoolFilter}
|
||||
/>
|
||||
<ChartPointerEventContextProvider>
|
||||
<EuiFlexGroup
|
||||
direction={largeScreenOrSmaller ? 'column' : 'row'}
|
||||
gutterSize="s"
|
||||
>
|
||||
<EuiFlexItem>
|
||||
<EuiPanel hasBorder={true}>
|
||||
<EuiTitle size="xs">
|
||||
<h2>
|
||||
{i18n.translate('xpack.apm.backendDetailLatencyChartTitle', {
|
||||
defaultMessage: 'Latency',
|
||||
})}
|
||||
</h2>
|
||||
</EuiTitle>
|
||||
<BackendLatencyChart height={200} />
|
||||
</EuiPanel>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiPanel hasBorder={true}>
|
||||
<EuiTitle size="xs">
|
||||
<h2>
|
||||
{i18n.translate(
|
||||
'xpack.apm.backendDetailThroughputChartTitle',
|
||||
{ defaultMessage: 'Throughput' }
|
||||
)}
|
||||
</h2>
|
||||
</EuiTitle>
|
||||
<BackendThroughputChart height={200} />
|
||||
</EuiPanel>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiPanel hasBorder={true}>
|
||||
<EuiTitle size="xs">
|
||||
<h2>
|
||||
{i18n.translate(
|
||||
'xpack.apm.backendDetailFailedTransactionRateChartTitle',
|
||||
{ defaultMessage: 'Failed transaction rate' }
|
||||
)}
|
||||
</h2>
|
||||
</EuiTitle>
|
||||
<BackendFailedTransactionRateChart height={200} />
|
||||
</EuiPanel>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</ChartPointerEventContextProvider>
|
||||
<EuiSpacer size="l" />
|
||||
<BackendDetailDependenciesTable />
|
||||
</BackendDetailTemplate>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -64,10 +64,10 @@ export function BackendInventoryDependenciesTable() {
|
|||
}
|
||||
const link = (
|
||||
<BackendLink
|
||||
backendName={location.backendName}
|
||||
type={location.spanType}
|
||||
subtype={location.spanSubtype}
|
||||
query={{
|
||||
backendName: location.backendName,
|
||||
comparisonEnabled,
|
||||
comparisonType,
|
||||
environment,
|
||||
|
|
|
@ -38,10 +38,10 @@ export function BackendContents({
|
|||
(callApmApi) => {
|
||||
if (backendName) {
|
||||
return callApmApi({
|
||||
endpoint: 'GET /internal/apm/service-map/backend/{backendName}',
|
||||
endpoint: 'GET /internal/apm/service-map/backend',
|
||||
params: {
|
||||
path: { backendName },
|
||||
query: {
|
||||
backendName,
|
||||
environment,
|
||||
start,
|
||||
end,
|
||||
|
@ -57,12 +57,11 @@ export function BackendContents({
|
|||
);
|
||||
|
||||
const isLoading = status === FETCH_STATUS.LOADING;
|
||||
const detailsUrl = apmRouter.link('/backends/{backendName}/overview', {
|
||||
path: { backendName },
|
||||
query: query as TypeOf<
|
||||
ApmRoutes,
|
||||
'/backends/{backendName}/overview'
|
||||
>['query'],
|
||||
const detailsUrl = apmRouter.link('/backends/overview', {
|
||||
query: {
|
||||
...query,
|
||||
backendName,
|
||||
} as TypeOf<ApmRoutes, '/backends/overview'>['query'],
|
||||
});
|
||||
|
||||
const trackEvent = useUiTracker();
|
||||
|
|
|
@ -76,10 +76,10 @@ export function ServiceOverviewDependenciesTable({
|
|||
const itemLink =
|
||||
location.type === NodeType.backend ? (
|
||||
<BackendLink
|
||||
backendName={location.backendName}
|
||||
type={location.spanType}
|
||||
subtype={location.spanSubtype}
|
||||
query={{
|
||||
backendName: location.backendName,
|
||||
comparisonEnabled,
|
||||
comparisonType,
|
||||
environment,
|
||||
|
|
|
@ -103,8 +103,10 @@ export function StickySpanProperties({ span, transaction }: Props) {
|
|||
fieldName: SPAN_DESTINATION_SERVICE_RESOURCE,
|
||||
val: (
|
||||
<BackendLink
|
||||
backendName={backendName}
|
||||
query={query}
|
||||
query={{
|
||||
...query,
|
||||
backendName,
|
||||
}}
|
||||
subtype={span.span.subtype}
|
||||
type={span.span.type}
|
||||
onClick={() => {
|
||||
|
|
|
@ -20,6 +20,7 @@ import { ServiceInventory } from '../../app/service_inventory';
|
|||
import { ServiceMapHome } from '../../app/service_map';
|
||||
import { TraceOverview } from '../../app/trace_overview';
|
||||
import { ApmMainTemplate } from '../templates/apm_main_template';
|
||||
import { RedirectToBackendOverviewRouteView } from './redirect_to_backend_overview_route_view';
|
||||
|
||||
function page<TPath extends string>({
|
||||
path,
|
||||
|
@ -109,13 +110,22 @@ export const home = {
|
|||
children: [
|
||||
{
|
||||
path: '/backends/{backendName}/overview',
|
||||
element: <BackendDetailOverview />,
|
||||
element: <RedirectToBackendOverviewRouteView />,
|
||||
params: t.type({
|
||||
path: t.type({
|
||||
backendName: t.string,
|
||||
}),
|
||||
}),
|
||||
},
|
||||
{
|
||||
path: '/backends/overview',
|
||||
element: <BackendDetailOverview />,
|
||||
params: t.type({
|
||||
query: t.type({
|
||||
backendName: t.string,
|
||||
}),
|
||||
}),
|
||||
},
|
||||
page({
|
||||
path: '/backends',
|
||||
title: DependenciesInventoryTitle,
|
||||
|
|
|
@ -0,0 +1,22 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* 2.0; you may not use this file except in compliance with the Elastic License
|
||||
* 2.0.
|
||||
*/
|
||||
|
||||
import qs from 'query-string';
|
||||
import React from 'react';
|
||||
import { Redirect } from 'react-router-dom';
|
||||
import { useApmParams } from '../../../hooks/use_apm_params';
|
||||
|
||||
export function RedirectToBackendOverviewRouteView() {
|
||||
const {
|
||||
path: { backendName },
|
||||
query,
|
||||
} = useApmParams('/backends/{backendName}/overview');
|
||||
|
||||
const search = qs.stringify({ ...query, backendName });
|
||||
|
||||
return <Redirect to={{ pathname: `/backends/overview`, search }} />;
|
||||
}
|
|
@ -7,9 +7,11 @@
|
|||
|
||||
import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
|
||||
import React from 'react';
|
||||
import { useApmBackendContext } from '../../../context/apm_backend/use_apm_backend_context';
|
||||
import { ApmMainTemplate } from './apm_main_template';
|
||||
import { SpanIcon } from '../../shared/span_icon';
|
||||
import { useApmParams } from '../../../hooks/use_apm_params';
|
||||
import { useTimeRange } from '../../../hooks/use_time_range';
|
||||
import { useFetcher } from '../../../hooks/use_fetcher';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
|
@ -18,11 +20,32 @@ interface Props {
|
|||
|
||||
export function BackendDetailTemplate({ title, children }: Props) {
|
||||
const {
|
||||
backendName,
|
||||
metadata: { data },
|
||||
} = useApmBackendContext();
|
||||
query: { backendName, rangeFrom, rangeTo },
|
||||
} = useApmParams('/backends/overview');
|
||||
|
||||
const metadata = data?.metadata;
|
||||
const { start, end } = useTimeRange({ rangeFrom, rangeTo });
|
||||
|
||||
const backendMetadataFetch = useFetcher(
|
||||
(callApmApi) => {
|
||||
if (!start || !end) {
|
||||
return;
|
||||
}
|
||||
|
||||
return callApmApi({
|
||||
endpoint: 'GET /internal/apm/backends/metadata',
|
||||
params: {
|
||||
query: {
|
||||
backendName,
|
||||
start,
|
||||
end,
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
[backendName, start, end]
|
||||
);
|
||||
|
||||
const { data: { metadata } = {} } = backendMetadataFetch;
|
||||
|
||||
return (
|
||||
<ApmMainTemplate
|
||||
|
|
|
@ -30,13 +30,11 @@ export const Example: Story<Args> = (args) => {
|
|||
return <BackendLink {...args} />;
|
||||
};
|
||||
Example.args = {
|
||||
backendName: 'postgres',
|
||||
query: {
|
||||
backendName: 'postgres',
|
||||
environment: 'ENVIRONMENT_ALL',
|
||||
kuery: '',
|
||||
rangeFrom: 'now-15m',
|
||||
rangeTo: 'now',
|
||||
},
|
||||
type: 'db',
|
||||
subtype: 'postgresql',
|
||||
};
|
||||
|
|
|
@ -17,15 +17,13 @@ import { SpanIcon } from './span_icon';
|
|||
const StyledLink = euiStyled(EuiLink)`${truncate('100%')};`;
|
||||
|
||||
interface BackendLinkProps {
|
||||
backendName: string;
|
||||
query: TypeOf<ApmRoutes, '/backends/{backendName}/overview'>['query'];
|
||||
query: TypeOf<ApmRoutes, '/backends/overview'>['query'];
|
||||
subtype?: string;
|
||||
type?: string;
|
||||
onClick?: React.ComponentProps<typeof EuiLink>['onClick'];
|
||||
}
|
||||
|
||||
export function BackendLink({
|
||||
backendName,
|
||||
query,
|
||||
subtype,
|
||||
type,
|
||||
|
@ -35,8 +33,7 @@ export function BackendLink({
|
|||
|
||||
return (
|
||||
<StyledLink
|
||||
href={link('/backends/{backendName}/overview', {
|
||||
path: { backendName },
|
||||
href={link('/backends/overview', {
|
||||
query,
|
||||
})}
|
||||
onClick={onClick}
|
||||
|
@ -45,7 +42,7 @@ export function BackendLink({
|
|||
<EuiFlexItem grow={false}>
|
||||
<SpanIcon type={type} subtype={subtype} />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>{backendName}</EuiFlexItem>
|
||||
<EuiFlexItem>{query.backendName}</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</StyledLink>
|
||||
);
|
||||
|
|
|
@ -1,74 +0,0 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* 2.0; you may not use this file except in compliance with the Elastic License
|
||||
* 2.0.
|
||||
*/
|
||||
|
||||
import React, { createContext, useMemo } from 'react';
|
||||
import { FETCH_STATUS, useFetcher } from '../../hooks/use_fetcher';
|
||||
import { useApmParams } from '../../hooks/use_apm_params';
|
||||
import { APIReturnType } from '../../services/rest/createCallApmApi';
|
||||
import { useTimeRange } from '../../hooks/use_time_range';
|
||||
|
||||
export const ApmBackendContext = createContext<
|
||||
| {
|
||||
backendName: string;
|
||||
metadata: {
|
||||
data?: APIReturnType<'GET /internal/apm/backends/{backendName}/metadata'>;
|
||||
status?: FETCH_STATUS;
|
||||
};
|
||||
}
|
||||
| undefined
|
||||
>(undefined);
|
||||
|
||||
export function ApmBackendContextProvider({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const {
|
||||
path: { backendName },
|
||||
query: { rangeFrom, rangeTo },
|
||||
} = useApmParams('/backends/{backendName}/overview');
|
||||
|
||||
const { start, end } = useTimeRange({ rangeFrom, rangeTo });
|
||||
|
||||
const backendMetadataFetch = useFetcher(
|
||||
(callApmApi) => {
|
||||
if (!start || !end) {
|
||||
return;
|
||||
}
|
||||
|
||||
return callApmApi({
|
||||
endpoint: 'GET /internal/apm/backends/{backendName}/metadata',
|
||||
params: {
|
||||
path: {
|
||||
backendName,
|
||||
},
|
||||
query: {
|
||||
start,
|
||||
end,
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
[backendName, start, end]
|
||||
);
|
||||
|
||||
const value = useMemo(() => {
|
||||
return {
|
||||
backendName,
|
||||
metadata: {
|
||||
data: backendMetadataFetch.data,
|
||||
status: backendMetadataFetch.status,
|
||||
},
|
||||
};
|
||||
}, [backendName, backendMetadataFetch.data, backendMetadataFetch.status]);
|
||||
|
||||
return (
|
||||
<ApmBackendContext.Provider value={value}>
|
||||
{children}
|
||||
</ApmBackendContext.Provider>
|
||||
);
|
||||
}
|
|
@ -1,20 +0,0 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* 2.0; you may not use this file except in compliance with the Elastic License
|
||||
* 2.0.
|
||||
*/
|
||||
import { useContext } from 'react';
|
||||
import { ApmBackendContext } from './apm_backend_context';
|
||||
|
||||
export function useApmBackendContext() {
|
||||
const context = useContext(ApmBackendContext);
|
||||
|
||||
if (!context) {
|
||||
throw new Error(
|
||||
'ApmBackendContext has no set value, did you forget rendering ApmBackendContextProvider?'
|
||||
);
|
||||
}
|
||||
|
||||
return context;
|
||||
}
|
|
@ -65,13 +65,14 @@ const topBackendsRoute = createApmServerRoute({
|
|||
});
|
||||
|
||||
const upstreamServicesForBackendRoute = createApmServerRoute({
|
||||
endpoint: 'GET /internal/apm/backends/{backendName}/upstream_services',
|
||||
endpoint: 'GET /internal/apm/backends/upstream_services',
|
||||
params: t.intersection([
|
||||
t.type({
|
||||
path: t.type({
|
||||
backendName: t.string,
|
||||
}),
|
||||
query: t.intersection([rangeRt, t.type({ numBuckets: toNumberRt })]),
|
||||
query: t.intersection([
|
||||
t.type({ backendName: t.string }),
|
||||
rangeRt,
|
||||
t.type({ numBuckets: toNumberRt }),
|
||||
]),
|
||||
}),
|
||||
t.partial({
|
||||
query: t.intersection([environmentRt, offsetRt, kueryRt]),
|
||||
|
@ -83,8 +84,15 @@ const upstreamServicesForBackendRoute = createApmServerRoute({
|
|||
handler: async (resources) => {
|
||||
const setup = await setupRequest(resources);
|
||||
const {
|
||||
path: { backendName },
|
||||
query: { environment, offset, numBuckets, kuery, start, end },
|
||||
query: {
|
||||
backendName,
|
||||
environment,
|
||||
offset,
|
||||
numBuckets,
|
||||
kuery,
|
||||
start,
|
||||
end,
|
||||
},
|
||||
} = resources.params;
|
||||
|
||||
const opts = {
|
||||
|
@ -121,12 +129,9 @@ const upstreamServicesForBackendRoute = createApmServerRoute({
|
|||
});
|
||||
|
||||
const backendMetadataRoute = createApmServerRoute({
|
||||
endpoint: 'GET /internal/apm/backends/{backendName}/metadata',
|
||||
endpoint: 'GET /internal/apm/backends/metadata',
|
||||
params: t.type({
|
||||
path: t.type({
|
||||
backendName: t.string,
|
||||
}),
|
||||
query: rangeRt,
|
||||
query: t.intersection([t.type({ backendName: t.string }), rangeRt]),
|
||||
}),
|
||||
options: {
|
||||
tags: ['access:apm'],
|
||||
|
@ -134,9 +139,8 @@ const backendMetadataRoute = createApmServerRoute({
|
|||
handler: async (resources) => {
|
||||
const setup = await setupRequest(resources);
|
||||
const { params } = resources;
|
||||
const { backendName } = params.path;
|
||||
|
||||
const { start, end } = params.query;
|
||||
const { backendName, start, end } = params.query;
|
||||
|
||||
const metadata = await getMetadataForBackend({
|
||||
backendName,
|
||||
|
@ -150,12 +154,15 @@ const backendMetadataRoute = createApmServerRoute({
|
|||
});
|
||||
|
||||
const backendLatencyChartsRoute = createApmServerRoute({
|
||||
endpoint: 'GET /internal/apm/backends/{backendName}/charts/latency',
|
||||
endpoint: 'GET /internal/apm/backends/charts/latency',
|
||||
params: t.type({
|
||||
path: t.type({
|
||||
backendName: t.string,
|
||||
}),
|
||||
query: t.intersection([rangeRt, kueryRt, environmentRt, offsetRt]),
|
||||
query: t.intersection([
|
||||
t.type({ backendName: t.string }),
|
||||
rangeRt,
|
||||
kueryRt,
|
||||
environmentRt,
|
||||
offsetRt,
|
||||
]),
|
||||
}),
|
||||
options: {
|
||||
tags: ['access:apm'],
|
||||
|
@ -163,8 +170,8 @@ const backendLatencyChartsRoute = createApmServerRoute({
|
|||
handler: async (resources) => {
|
||||
const setup = await setupRequest(resources);
|
||||
const { params } = resources;
|
||||
const { backendName } = params.path;
|
||||
const { kuery, environment, offset, start, end } = params.query;
|
||||
const { backendName, kuery, environment, offset, start, end } =
|
||||
params.query;
|
||||
|
||||
const [currentTimeseries, comparisonTimeseries] = await Promise.all([
|
||||
getLatencyChartsForBackend({
|
||||
|
@ -193,12 +200,15 @@ const backendLatencyChartsRoute = createApmServerRoute({
|
|||
});
|
||||
|
||||
const backendThroughputChartsRoute = createApmServerRoute({
|
||||
endpoint: 'GET /internal/apm/backends/{backendName}/charts/throughput',
|
||||
endpoint: 'GET /internal/apm/backends/charts/throughput',
|
||||
params: t.type({
|
||||
path: t.type({
|
||||
backendName: t.string,
|
||||
}),
|
||||
query: t.intersection([rangeRt, kueryRt, environmentRt, offsetRt]),
|
||||
query: t.intersection([
|
||||
t.type({ backendName: t.string }),
|
||||
rangeRt,
|
||||
kueryRt,
|
||||
environmentRt,
|
||||
offsetRt,
|
||||
]),
|
||||
}),
|
||||
options: {
|
||||
tags: ['access:apm'],
|
||||
|
@ -206,8 +216,8 @@ const backendThroughputChartsRoute = createApmServerRoute({
|
|||
handler: async (resources) => {
|
||||
const setup = await setupRequest(resources);
|
||||
const { params } = resources;
|
||||
const { backendName } = params.path;
|
||||
const { kuery, environment, offset, start, end } = params.query;
|
||||
const { backendName, kuery, environment, offset, start, end } =
|
||||
params.query;
|
||||
|
||||
const [currentTimeseries, comparisonTimeseries] = await Promise.all([
|
||||
getThroughputChartsForBackend({
|
||||
|
@ -236,12 +246,15 @@ const backendThroughputChartsRoute = createApmServerRoute({
|
|||
});
|
||||
|
||||
const backendFailedTransactionRateChartsRoute = createApmServerRoute({
|
||||
endpoint: 'GET /internal/apm/backends/{backendName}/charts/error_rate',
|
||||
endpoint: 'GET /internal/apm/backends/charts/error_rate',
|
||||
params: t.type({
|
||||
path: t.type({
|
||||
backendName: t.string,
|
||||
}),
|
||||
query: t.intersection([rangeRt, kueryRt, environmentRt, offsetRt]),
|
||||
query: t.intersection([
|
||||
t.type({ backendName: t.string }),
|
||||
rangeRt,
|
||||
kueryRt,
|
||||
environmentRt,
|
||||
offsetRt,
|
||||
]),
|
||||
}),
|
||||
options: {
|
||||
tags: ['access:apm'],
|
||||
|
@ -249,8 +262,8 @@ const backendFailedTransactionRateChartsRoute = createApmServerRoute({
|
|||
handler: async (resources) => {
|
||||
const setup = await setupRequest(resources);
|
||||
const { params } = resources;
|
||||
const { backendName } = params.path;
|
||||
const { kuery, environment, offset, start, end } = params.query;
|
||||
const { backendName, kuery, environment, offset, start, end } =
|
||||
params.query;
|
||||
|
||||
const [currentTimeseries, comparisonTimeseries] = await Promise.all([
|
||||
getErrorRateChartsForBackend({
|
||||
|
|
|
@ -114,12 +114,13 @@ const serviceMapServiceNodeRoute = createApmServerRoute({
|
|||
});
|
||||
|
||||
const serviceMapBackendNodeRoute = createApmServerRoute({
|
||||
endpoint: 'GET /internal/apm/service-map/backend/{backendName}',
|
||||
endpoint: 'GET /internal/apm/service-map/backend',
|
||||
params: t.type({
|
||||
path: t.type({
|
||||
backendName: t.string,
|
||||
}),
|
||||
query: t.intersection([environmentRt, rangeRt]),
|
||||
query: t.intersection([
|
||||
t.type({ backendName: t.string }),
|
||||
environmentRt,
|
||||
rangeRt,
|
||||
]),
|
||||
}),
|
||||
options: { tags: ['access:apm'] },
|
||||
handler: async (resources) => {
|
||||
|
@ -134,8 +135,7 @@ const serviceMapBackendNodeRoute = createApmServerRoute({
|
|||
const setup = await setupRequest(resources);
|
||||
|
||||
const {
|
||||
path: { backendName },
|
||||
query: { environment, start, end },
|
||||
query: { backendName, environment, start, end },
|
||||
} = params;
|
||||
|
||||
return getServiceMapBackendNodeInfo({
|
||||
|
|
|
@ -76,14 +76,15 @@ export default function serviceMapsApiTests({ getService }: FtrProviderContext)
|
|||
});
|
||||
});
|
||||
|
||||
describe('/internal/apm/service-map/backend/{backendName}', () => {
|
||||
describe('/internal/apm/service-map/backend', () => {
|
||||
it('returns an object with nulls', async () => {
|
||||
const q = querystring.stringify({
|
||||
backendName: 'postgres',
|
||||
start: metadata.start,
|
||||
end: metadata.end,
|
||||
environment: 'ENVIRONMENT_ALL',
|
||||
});
|
||||
const response = await supertest.get(`/internal/apm/service-map/backend/postgres?${q}`);
|
||||
const response = await supertest.get(`/internal/apm/service-map/backend?${q}`);
|
||||
|
||||
expect(response.status).to.be(200);
|
||||
|
||||
|
@ -305,14 +306,15 @@ export default function serviceMapsApiTests({ getService }: FtrProviderContext)
|
|||
});
|
||||
});
|
||||
|
||||
describe('/internal/apm/service-map/backend/{backendName}', () => {
|
||||
describe('/internal/apm/service-map/backend', () => {
|
||||
it('returns an object with data', async () => {
|
||||
const q = querystring.stringify({
|
||||
backendName: 'postgresql',
|
||||
start: metadata.start,
|
||||
end: metadata.end,
|
||||
environment: 'ENVIRONMENT_ALL',
|
||||
});
|
||||
const response = await supertest.get(`/internal/apm/service-map/backend/postgresql?${q}`);
|
||||
const response = await supertest.get(`/internal/apm/service-map/backend?${q}`);
|
||||
|
||||
expect(response.status).to.be(200);
|
||||
|
||||
|
|
|
@ -39,21 +39,21 @@ export default function ApiTest({ getService }: FtrProviderContext) {
|
|||
},
|
||||
}),
|
||||
apmApiClient.readUser({
|
||||
endpoint: `GET /internal/apm/backends/{backendName}/charts/throughput`,
|
||||
endpoint: `GET /internal/apm/backends/charts/throughput`,
|
||||
params: {
|
||||
path: { backendName: overrides?.backendName || 'elasticsearch' },
|
||||
query: {
|
||||
...commonQuery,
|
||||
backendName: overrides?.backendName || 'elasticsearch',
|
||||
kuery: '',
|
||||
},
|
||||
},
|
||||
}),
|
||||
apmApiClient.readUser({
|
||||
endpoint: `GET /internal/apm/backends/{backendName}/upstream_services`,
|
||||
endpoint: `GET /internal/apm/backends/upstream_services`,
|
||||
params: {
|
||||
path: { backendName: overrides?.backendName || 'elasticsearch' },
|
||||
query: {
|
||||
...commonQuery,
|
||||
backendName: overrides?.backendName || 'elasticsearch',
|
||||
numBuckets: 20,
|
||||
offset: '1d',
|
||||
kuery: '',
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue