[APM] Fix bug when error page is empty (#102940)
This commit is contained in:
parent
0548f98708
commit
369127e8c2
2 changed files with 85 additions and 3 deletions
|
@ -0,0 +1,81 @@
|
||||||
|
/*
|
||||||
|
* 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, { ComponentType } from 'react';
|
||||||
|
import { KibanaContextProvider } from '../../../../../../../../src/plugins/kibana_react/public';
|
||||||
|
import {
|
||||||
|
ApmPluginContext,
|
||||||
|
ApmPluginContextValue,
|
||||||
|
} from '../../../../context/apm_plugin/apm_plugin_context';
|
||||||
|
import { EuiThemeProvider } from '../../../../../../../../src/plugins/kibana_react/common';
|
||||||
|
import { ErrorDistribution } from './';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: 'app/ErrorGroupDetails/Distribution',
|
||||||
|
component: ErrorDistribution,
|
||||||
|
decorators: [
|
||||||
|
(Story: ComponentType) => {
|
||||||
|
const apmPluginContextMock = ({
|
||||||
|
observabilityRuleTypeRegistry: { getFormatter: () => undefined },
|
||||||
|
} as unknown) as ApmPluginContextValue;
|
||||||
|
|
||||||
|
const kibanaContextServices = {
|
||||||
|
uiSettings: { get: () => {} },
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<EuiThemeProvider>
|
||||||
|
<ApmPluginContext.Provider value={apmPluginContextMock}>
|
||||||
|
<KibanaContextProvider services={kibanaContextServices}>
|
||||||
|
<Story />
|
||||||
|
</KibanaContextProvider>
|
||||||
|
</ApmPluginContext.Provider>
|
||||||
|
</EuiThemeProvider>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
export function Example() {
|
||||||
|
const distribution = {
|
||||||
|
noHits: false,
|
||||||
|
bucketSize: 62350,
|
||||||
|
buckets: [
|
||||||
|
{ key: 1624279912350, count: 6 },
|
||||||
|
{ key: 1624279974700, count: 1 },
|
||||||
|
{ key: 1624280037050, count: 2 },
|
||||||
|
{ key: 1624280099400, count: 3 },
|
||||||
|
{ key: 1624280161750, count: 13 },
|
||||||
|
{ key: 1624280224100, count: 1 },
|
||||||
|
{ key: 1624280286450, count: 2 },
|
||||||
|
{ key: 1624280348800, count: 0 },
|
||||||
|
{ key: 1624280411150, count: 4 },
|
||||||
|
{ key: 1624280473500, count: 4 },
|
||||||
|
{ key: 1624280535850, count: 1 },
|
||||||
|
{ key: 1624280598200, count: 4 },
|
||||||
|
{ key: 1624280660550, count: 0 },
|
||||||
|
{ key: 1624280722900, count: 2 },
|
||||||
|
{ key: 1624280785250, count: 3 },
|
||||||
|
{ key: 1624280847600, count: 0 },
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
return <ErrorDistribution distribution={distribution} title="Foo title" />;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function EmptyState() {
|
||||||
|
return (
|
||||||
|
<ErrorDistribution
|
||||||
|
distribution={{
|
||||||
|
bucketSize: 10,
|
||||||
|
buckets: [],
|
||||||
|
noHits: true,
|
||||||
|
}}
|
||||||
|
title="Foo title"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
|
@ -67,6 +67,7 @@ export function ErrorDistribution({ distribution, title }: Props) {
|
||||||
|
|
||||||
const xFormatter = niceTimeFormatter([xMin, xMax]);
|
const xFormatter = niceTimeFormatter([xMin, xMax]);
|
||||||
const { observabilityRuleTypeRegistry } = useApmPluginContext();
|
const { observabilityRuleTypeRegistry } = useApmPluginContext();
|
||||||
|
|
||||||
const { alerts } = useApmServiceContext();
|
const { alerts } = useApmServiceContext();
|
||||||
const { getFormatter } = observabilityRuleTypeRegistry;
|
const { getFormatter } = observabilityRuleTypeRegistry;
|
||||||
const [selectedAlertId, setSelectedAlertId] = useState<string | undefined>(
|
const [selectedAlertId, setSelectedAlertId] = useState<string | undefined>(
|
||||||
|
@ -84,7 +85,7 @@ export function ErrorDistribution({ distribution, title }: Props) {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<>
|
||||||
<EuiTitle size="xs">
|
<EuiTitle size="xs">
|
||||||
<span>{title}</span>
|
<span>{title}</span>
|
||||||
</EuiTitle>
|
</EuiTitle>
|
||||||
|
@ -124,7 +125,7 @@ export function ErrorDistribution({ distribution, title }: Props) {
|
||||||
alerts: alerts?.filter(
|
alerts: alerts?.filter(
|
||||||
(alert) => alert[RULE_ID]?.[0] === AlertType.ErrorCount
|
(alert) => alert[RULE_ID]?.[0] === AlertType.ErrorCount
|
||||||
),
|
),
|
||||||
chartStartTime: buckets[0].x0,
|
chartStartTime: buckets[0]?.x0,
|
||||||
getFormatter,
|
getFormatter,
|
||||||
selectedAlertId,
|
selectedAlertId,
|
||||||
setSelectedAlertId,
|
setSelectedAlertId,
|
||||||
|
@ -143,6 +144,6 @@ export function ErrorDistribution({ distribution, title }: Props) {
|
||||||
</Suspense>
|
</Suspense>
|
||||||
</Chart>
|
</Chart>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue