Skip to content

Commit

Permalink
more improvements and polish
Browse files Browse the repository at this point in the history
  • Loading branch information
@ogupte
ogupte committed Feb 5, 2021
1 parent 9110ffa commit 63da7e6
Show file tree
Hide file tree
Showing 11 changed files with 194 additions and 431 deletions.
92 changes: 61 additions & 31 deletions x-pack/plugins/apm/public/components/app/Correlations/custom_fields.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,16 @@ import {
EuiFormRow,
EuiLink,
EuiFieldNumber,
EuiSpacer,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React from 'react';
import { FormattedMessage } from '@kbn/i18n/react';
import React, { useEffect, useState } from 'react';
import { useFieldNames } from './useFieldNames';
import { ElasticDocsLink } from '../../shared/Links/ElasticDocsLink';

interface Props {
fieldNames: string[];
defaultFieldNames: string[];
setFieldNames: (fieldNames: string[]) => void;
setDurationPercentile?: (value: number) => void;
showThreshold?: boolean;
Expand All @@ -29,11 +32,22 @@ interface Props {
export function CustomFields({
fieldNames,
setFieldNames,
defaultFieldNames,
setDurationPercentile = () => {},
showThreshold = false,
durationPercentile = 50,
}: Props) {
const { defaultFieldNames, getSuggestions } = useFieldNames();
const [suggestedFieldNames, setSuggestedFieldNames] = useState(
getSuggestions('')
);

useEffect(() => {
if (suggestedFieldNames.length) {
return;
}
setSuggestedFieldNames(getSuggestions(''));
}, [getSuggestions, suggestedFieldNames]);

return (
<EuiAccordion
id="accordion"
Expand All @@ -42,15 +56,16 @@ export function CustomFields({
{ defaultMessage: 'Customize fields' }
)}
>
<EuiFlexGroup>
<EuiSpacer />
<EuiFlexGroup direction="column">
{showThreshold && (
<EuiFlexItem grow={1}>
<EuiFlexItem grow={false}>
<EuiFormRow
label={i18n.translate(
'xpack.apm.correlations.customize.thresholdLabel',
{ defaultMessage: 'Threshold' }
)}
helpText="Target percentile"
helpText="Default threshold is 50th percentile."
>
<EuiFieldNumber
value={durationPercentile.toString(10)}
Expand All @@ -60,41 +75,52 @@ export function CustomFields({
setDurationPercentile(value);
}
}}
prepend="%"
prepend="Percentile"
/>
</EuiFormRow>
</EuiFlexItem>
)}
<EuiFlexItem grow={4}>
<EuiFlexItem grow={false}>
<EuiFormRow
fullWidth={true}
label={i18n.translate(
'xpack.apm.correlations.customize.fieldLabel',
{
defaultMessage: 'Field',
}
{ defaultMessage: 'Field' }
)}
helpText={
<>
{i18n.translate(
'xpack.apm.correlations.customize.fieldHelpText',
{
defaultMessage: 'Fields to analyse for correlations.',
}
)}
&nbsp;
<EuiLink
type="reset"
onClick={() => {
setFieldNames(defaultFieldNames);
}}
>
{i18n.translate(
'xpack.apm.correlations.customize.fieldResetDefault',
{ defaultMessage: 'Reset to default' }
)}
</EuiLink>
</>
<FormattedMessage
id="xpack.apm.correlations.customize.fieldHelpText"
defaultMessage="Customize or {reset} fields to analyze for correlations. {docsLink}"
values={{
reset: (
<EuiLink
type="reset"
onClick={() => {
setFieldNames(defaultFieldNames);
}}
>
{i18n.translate(
'xpack.apm.correlations.customize.fieldHelpTextReset',
{ defaultMessage: 'reset' }
)}
</EuiLink>
),
docsLink: (
<ElasticDocsLink
section="/kibana"
path="/advanced-queries.html"
>
{i18n.translate(
'xpack.apm.correlations.customize.fieldHelpTextDocsLink',
{
defaultMessage:
'Learn more about the default fields.',
}
)}
</ElasticDocsLink>
),
}}
/>
}
>
<EuiComboBox
Expand All @@ -112,6 +138,10 @@ export function CustomFields({
const nextFieldNames = [...fieldNames, term];
setFieldNames(nextFieldNames);
}}
onSearchChange={(searchValue) => {
setSuggestedFieldNames(getSuggestions(searchValue));
}}
options={suggestedFieldNames.map((label) => ({ label }))}
/>
</EuiFormRow>
</EuiFlexItem>
Expand Down
43 changes: 18 additions & 25 deletions x-pack/plugins/apm/public/components/app/Correlations/error_correlations.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,8 @@ import { CorrelationsTable } from './correlations_table';
import { ChartContainer } from '../../shared/charts/chart_container';
import { useTheme } from '../../../hooks/use_theme';
import { CustomFields } from './custom_fields';
import { useDefaultFieldNames } from './useDefaultFieldNames';
import { useFieldNames } from './useFieldNames';
import { useLocalStorage } from '../../../hooks/useLocalStorage';

type CorrelationsApiResponse = NonNullable<
APIReturnType<'GET /api/apm/correlations/failed_transactions'>
Expand All @@ -37,19 +38,6 @@ type SignificantTerm = NonNullable<
CorrelationsApiResponse['significantTerms']
>[0];

// const initialFieldNames = [
// 'transaction.name',
// 'user.username',
// 'user.id',
// 'host.ip',
// 'user_agent.name',
// 'kubernetes.pod.uuid',
// 'kubernetes.pod.name',
// 'url.domain',
// 'container.id',
// 'service.node.name',
// ].map((label) => ({ label }));

interface Props {
onClose: () => void;
}
Expand All @@ -60,8 +48,11 @@ export function ErrorCorrelations({ onClose }: Props) {
setSelectedSignificantTerm,
] = useState<SignificantTerm | null>(null);

const defaultFieldNames = useDefaultFieldNames();
const [fieldNames, setFieldNames] = useState(defaultFieldNames);
const { defaultFieldNames } = useFieldNames();
const [fieldNames, setFieldNames] = useLocalStorage(
'apm.correlations.errors.fields',
defaultFieldNames
);
const { serviceName } = useParams<{ serviceName?: string }>();
const { urlParams, uiFilters } = useUrlParams();
const { transactionName, transactionType, start, end } = urlParams;
Expand Down Expand Up @@ -103,9 +94,9 @@ export function ErrorCorrelations({ onClose }: Props) {
<EuiText size="s">
<p>
Orbiting this at a distance of roughly ninety-two million miles is
an utterly insignificant little blue green planet whose ape-
descended life forms are so amazingly primitive that they still
think digital watches are a pretty neat idea.
an utterly insignificant little blue green planet whose
ape-descended life forms are so amazingly primitive that they
still think digital watches are a pretty neat idea.
</p>
</EuiText>
</EuiFlexItem>
Expand Down Expand Up @@ -138,11 +129,7 @@ export function ErrorCorrelations({ onClose }: Props) {
/>
</EuiFlexItem>
<EuiFlexItem>
<CustomFields
defaultFieldNames={defaultFieldNames}
fieldNames={fieldNames}
setFieldNames={setFieldNames}
/>
<CustomFields fieldNames={fieldNames} setFieldNames={setFieldNames} />
</EuiFlexItem>
</EuiFlexGroup>
</>
Expand Down Expand Up @@ -196,7 +183,13 @@ function ErrorTimeseriesChart({
<LineSeries
id={i18n.translate(
'xpack.apm.correlations.error.chart.selectedTermErrorRateLabel',
{ defaultMessage: 'Error rate for selected term' }
{
defaultMessage: '{fieldName}:{fieldValue}',
values: {
fieldName: selectedSignificantTerm.fieldName,
fieldValue: selectedSignificantTerm.fieldValue,
},
}
)}
xScaleType={ScaleType.Time}
yScaleType={ScaleType.Linear}
Expand Down
22 changes: 0 additions & 22 deletions x-pack/plugins/apm/public/components/app/Correlations/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,15 +23,10 @@ import {
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { useHistory } from 'react-router-dom';
import { isActivePlatinumLicense } from '../../../../common/license_check';
import { enableCorrelations } from '../../../../common/ui_settings_keys';
import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
import { LatencyCorrelations } from './latency_correlations';
import { ErrorCorrelations } from './error_correlations';
// import { ThroughputCorrelations } from './throughput_correlations';
import { useUrlParams } from '../../../context/url_params_context/use_url_params';
import { createHref } from '../../shared/Links/url_helpers';
import { useLicenseContext } from '../../../context/license/use_license_context';

const latencyTab = {
key: 'latency',
Expand All @@ -40,40 +35,23 @@ const latencyTab = {
}),
component: LatencyCorrelations,
};
// const throughputTab = {
// key: 'throughput',
// label: i18n.translate('xpack.apm.correlations.tabs.throughputLabel', {
// defaultMessage: 'Throughput',
// }),
// component: ThroughputCorrelations,
// };
const errorRateTab = {
key: 'errorRate',
label: i18n.translate('xpack.apm.correlations.tabs.errorRateLabel', {
defaultMessage: 'Error rate',
}),
component: ErrorCorrelations,
};
// const tabs = [latencyTab, throughputTab, errorRateTab];
const tabs = [latencyTab, errorRateTab];

export function Correlations() {
const { uiSettings } = useApmPluginContext().core;
const { urlParams } = useUrlParams();
const license = useLicenseContext();
const history = useHistory();
const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
const [currentTab, setCurrentTab] = useState(latencyTab.key);
const { component: TabContent } =
tabs.find((tab) => tab.key === currentTab) ?? latencyTab;

if (
!uiSettings.get(enableCorrelations) ||
!isActivePlatinumLicense(license)
) {
return null;
}

return (
<>
<EuiButton
Expand Down
30 changes: 21 additions & 9 deletions x-pack/plugins/apm/public/components/app/Correlations/latency_correlations.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,8 @@ import { CorrelationsTable } from './correlations_table';
import { ChartContainer } from '../../shared/charts/chart_container';
import { useTheme } from '../../../hooks/use_theme';
import { CustomFields } from './custom_fields';
import { useDefaultFieldNames } from './useDefaultFieldNames';
import { useFieldNames } from './useFieldNames';
import { useLocalStorage } from '../../../hooks/useLocalStorage';

type CorrelationsApiResponse = NonNullable<
APIReturnType<'GET /api/apm/correlations/slow_transactions'>
Expand All @@ -44,9 +45,15 @@ export function LatencyCorrelations({ onClose }: Props) {
selectedSignificantTerm,
setSelectedSignificantTerm,
] = useState<SignificantTerm | null>(null);
const defaultFieldNames = useDefaultFieldNames();
const [fieldNames, setFieldNames] = useState(defaultFieldNames);
const [durationPercentile, setDurationPercentile] = useState(50);
const { defaultFieldNames } = useFieldNames();
const [fieldNames, setFieldNames] = useLocalStorage(
'apm.correlations.latency.fields',
defaultFieldNames
);
const [durationPercentile, setDurationPercentile] = useLocalStorage(
'apm.correlations.latency.threshold',
50
);
const { serviceName } = useParams<{ serviceName?: string }>();
const { urlParams, uiFilters } = useUrlParams();
const { transactionName, transactionType, start, end } = urlParams;
Expand Down Expand Up @@ -90,9 +97,9 @@ export function LatencyCorrelations({ onClose }: Props) {
<EuiText size="s">
<p>
Orbiting this at a distance of roughly ninety-two million miles is
an utterly insignificant little blue green planet whose ape-
descended life forms are so amazingly primitive that they still
think digital watches are a pretty neat idea.
an utterly insignificant little blue green planet whose
ape-descended life forms are so amazingly primitive that they
still think digital watches are a pretty neat idea.
</p>
</EuiText>
</EuiFlexItem>
Expand Down Expand Up @@ -129,7 +136,6 @@ export function LatencyCorrelations({ onClose }: Props) {
</EuiFlexItem>
<EuiFlexItem>
<CustomFields
defaultFieldNames={defaultFieldNames}
fieldNames={fieldNames}
setFieldNames={setFieldNames}
showThreshold
Expand Down Expand Up @@ -220,7 +226,13 @@ function LatencyDistributionChart({
<BarSeries
id={i18n.translate(
'xpack.apm.correlations.latency.chart.selectedTermLatencyDistributionLabel',
{ defaultMessage: 'Latency distribution for selected term' }
{
defaultMessage: '{fieldName}:{fieldValue}',
values: {
fieldName: selectedSignificantTerm.fieldName,
fieldValue: selectedSignificantTerm.fieldValue,
},
}
)}
xScaleType={ScaleType.Linear}
yScaleType={ScaleType.Linear}
Expand Down
Loading

0 comments on commit 63da7e6

Please sign in to comment.