Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[APM] Visual improvements for new APM layout with left navigation #101360

Merged
merged 5 commits into from
Jun 7, 2021
Merged

[APM] Visual improvements for new APM layout with left navigation #101360

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
be881ee
[APM] Make page full height
sorenlouv Jun 4, 2021
a6557ac
Fix style issues
sorenlouv Jun 4, 2021
d303713
Improve comment
sorenlouv Jun 4, 2021
306e128
Fix tsc issue
sorenlouv Jun 6, 2021
f62b300
Removed unused EuiPanel’s
sorenlouv Jun 7, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/plugins/kibana_react/public/app_links/redirect_app_link.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import useObservable from 'react-use/lib/useObservable';
import { ApplicationStart } from 'src/core/public';
import { createNavigateToUrlClickHandler } from './click_handler';

interface RedirectCrossAppLinksProps {
interface RedirectCrossAppLinksProps extends React.HTMLAttributes<HTMLDivElement> {
application: ApplicationStart;
className?: string;
'data-test-subj'?: string;
Expand Down
9 changes: 8 additions & 1 deletion x-pack/plugins/apm/public/application/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,11 @@ import ReactDOM from 'react-dom';
import 'react-vis/dist/style.css';
import type { ObservabilityRuleTypeRegistry } from '../../../observability/public';
import { ConfigSchema } from '../';
import { AppMountParameters, CoreStart } from '../../../../../src/core/public';
import {
AppMountParameters,
CoreStart,
APP_WRAPPER_CLASS,
} from '../../../../../src/core/public';
import { ApmPluginSetupDeps, ApmPluginStartDeps } from '../plugin';
import { createCallApmApi } from '../services/rest/createCallApmApi';
import { createStaticIndexPattern } from '../services/rest/index_pattern';
Expand Down Expand Up @@ -58,6 +62,9 @@ export const renderApp = ({
console.log('Error creating static index pattern', e);
});

// add .kbnAppWrappers class to root element
element.classList.add(APP_WRAPPER_CLASS);

ReactDOM.render(
<ApmAppRoot
apmPluginContextValue={apmPluginContextValue}
Expand Down
2 changes: 1 addition & 1 deletion x-pack/plugins/apm/public/components/app/service_inventory/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ export function ServiceInventory() {
</EuiFlexItem>
)}
<EuiFlexItem>
<EuiPanel hasShadow={false}>
<EuiPanel hasShadow={false} paddingSize="none">
<ServiceList
items={servicesData.items}
noItemsMessage={
Expand Down
42 changes: 28 additions & 14 deletions x-pack/plugins/apm/public/components/app/service_map/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,12 @@
* 2.0.
*/

import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
import {
EuiFlexGroup,
EuiFlexItem,
EuiLoadingSpinner,
EuiPanel,
} from '@elastic/eui';
import React, { PropsWithChildren, ReactNode } from 'react';
import { isActivePlatinumLicense } from '../../../../common/license_check';
import { useTrackPageview } from '../../../../../observability/public';
Expand Down Expand Up @@ -97,6 +102,10 @@ export function ServiceMap({

const { ref, height } = useRefDimensions();

// Temporary hack to work around bottom padding introduced by EuiPage
const PADDING_BOTTOM = 24;
const heightWithPadding = height - PADDING_BOTTOM;

useTrackPageview({ app: 'apm', path: 'service_map' });
useTrackPageview({ app: 'apm', path: 'service_map', delay: 15000 });

Expand Down Expand Up @@ -137,20 +146,25 @@ export function ServiceMap({
return (
<>
<SearchBar showKueryBar={false} />

<div data-test-subj="ServiceMap" style={{ height }} ref={ref}>
<Cytoscape
elements={data.elements}
height={height}
serviceName={serviceName}
style={getCytoscapeDivStyle(theme, status)}
<EuiPanel paddingSize="none">
<div
data-test-subj="ServiceMap"
style={{ height: heightWithPadding }}
ref={ref}
>
<Controls />
{serviceName && <EmptyBanner />}
{status === FETCH_STATUS.LOADING && <LoadingSpinner />}
<Popover focusedServiceName={serviceName} />
</Cytoscape>
</div>
<Cytoscape
elements={data.elements}
height={heightWithPadding}
serviceName={serviceName}
style={getCytoscapeDivStyle(theme, status)}
>
<Controls />
{serviceName && <EmptyBanner />}
{status === FETCH_STATUS.LOADING && <LoadingSpinner />}
<Popover focusedServiceName={serviceName} />
</Cytoscape>
</div>
</EuiPanel>
</>
);
}
106 changes: 52 additions & 54 deletions x-pack/plugins/apm/public/components/app/service_node_metrics/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,13 +39,6 @@ const Truncate = euiStyled.span`
${truncate(px(unit * 12))}
`;

const MetadataFlexGroup = euiStyled(EuiFlexGroup)`
border-bottom: ${({ theme }) => theme.eui.euiBorderThin};
margin-bottom: ${({ theme }) => theme.eui.paddingSizes.m};
padding: ${({ theme }) =>
`${theme.eui.paddingSizes.m} 0 0 ${theme.eui.paddingSizes.m}`};
`;

interface ServiceNodeMetricsProps {
serviceName: string;
serviceNodeName: string;
Expand Down Expand Up @@ -117,55 +110,60 @@ export function ServiceNodeMetrics({
/>
</EuiCallOut>
) : (
<MetadataFlexGroup gutterSize="xl">
<EuiFlexItem grow={false}>
<EuiStat
titleSize="s"
description={i18n.translate(
'xpack.apm.serviceNodeMetrics.serviceName',
{
defaultMessage: 'Service name',
<EuiPanel hasShadow={false}>
<EuiFlexGroup gutterSize="xl">
<EuiFlexItem grow={false}>
<EuiStat
titleSize="s"
description={i18n.translate(
'xpack.apm.serviceNodeMetrics.serviceName',
{
defaultMessage: 'Service name',
}
)}
title={
<EuiToolTip content={serviceName}>
<Truncate>{serviceName}</Truncate>
</EuiToolTip>
}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiStat
titleSize="s"
isLoading={isLoading}
description={i18n.translate(
'xpack.apm.serviceNodeMetrics.host',
{
defaultMessage: 'Host',
}
)}
title={
<EuiToolTip content={host}>
<Truncate>{host}</Truncate>
</EuiToolTip>
}
)}
title={
<EuiToolTip content={serviceName}>
<Truncate>{serviceName}</Truncate>
</EuiToolTip>
}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiStat
titleSize="s"
isLoading={isLoading}
description={i18n.translate('xpack.apm.serviceNodeMetrics.host', {
defaultMessage: 'Host',
})}
title={
<EuiToolTip content={host}>
<Truncate>{host}</Truncate>
</EuiToolTip>
}
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiStat
titleSize="s"
isLoading={isLoading}
description={i18n.translate(
'xpack.apm.serviceNodeMetrics.containerId',
{
defaultMessage: 'Container ID',
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiStat
titleSize="s"
isLoading={isLoading}
description={i18n.translate(
'xpack.apm.serviceNodeMetrics.containerId',
{
defaultMessage: 'Container ID',
}
)}
title={
<EuiToolTip content={containerId}>
<Truncate>{containerId}</Truncate>
</EuiToolTip>
}
)}
title={
<EuiToolTip content={containerId}>
<Truncate>{containerId}</Truncate>
</EuiToolTip>
}
/>
</EuiFlexItem>
</MetadataFlexGroup>
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
)}

{agentName && (
Expand Down
2 changes: 1 addition & 1 deletion x-pack/plugins/apm/public/components/app/service_node_overview/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ function ServiceNodeOverview({ serviceName }: ServiceNodeOverviewProps) {
];

return (
<EuiPanel hasShadow={false}>
<EuiPanel hasShadow={false} paddingSize="none">
sorenlouv marked this conversation as resolved.
Show resolved Hide resolved
<ManagedTable
noItemsMessage={i18n.translate('xpack.apm.jvmsTable.noJvmsLabel', {
defaultMessage: 'No JVMs were found',
Expand Down
2 changes: 1 addition & 1 deletion x-pack/plugins/apm/public/components/app/trace_overview/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export function TraceOverview() {
<>
<SearchBar />

<EuiPanel hasShadow={false}>
<EuiPanel hasShadow={false} paddingSize="none">
<TraceList
items={data.items}
isLoading={status === FETCH_STATUS.LOADING}
Expand Down
76 changes: 61 additions & 15 deletions x-pack/plugins/apm/public/components/routing/apm_route_config.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,13 @@ import { toQuery } from '../shared/Links/url_helpers';
import { ErrorGroupDetails } from '../app/ErrorGroupDetails';
import { useApmPluginContext } from '../../context/apm_plugin/use_apm_plugin_context';
import { ServiceNodeMetrics } from '../app/service_node_metrics';
import { Settings } from '../app/Settings';
import { SettingsTemplate } from './templates/settings_template';
import { AgentConfigurations } from '../app/Settings/AgentConfigurations';
import { AnomalyDetection } from '../app/Settings/anomaly_detection';
import { ApmIndices } from '../app/Settings/ApmIndices';
import { CustomizeUI } from '../app/Settings/CustomizeUI';
import { TraceLink } from '../app/TraceLink';
import { TransactionDetails } from '../app/transaction_details';
import {
CreateAgentConfigurationRouteHandler,
EditAgentConfigurationRouteHandler,
} from './route_handlers/agent_configuration';
import { enableServiceOverview } from '../../../common/ui_settings_keys';
import { redirectTo } from './redirect_to';
import { ApmMainTemplate } from './templates/apm_main_template';
Expand All @@ -38,6 +34,8 @@ import { ServiceOverview } from '../app/service_overview';
import { TransactionOverview } from '../app/transaction_overview';
import { ServiceInventory } from '../app/service_inventory';
import { TraceOverview } from '../app/trace_overview';
import { useFetcher } from '../../hooks/use_fetcher';
import { AgentConfigurationCreateEdit } from '../app/Settings/AgentConfigurations/AgentConfigurationCreateEdit';

// These component function definitions are used below with the `component`
// property of the route definitions.
Expand Down Expand Up @@ -222,39 +220,87 @@ function TransactionDetailsRouteView(
function SettingsAgentConfigurationRouteView() {
return (
<ApmMainTemplate pageTitle="Settings">
<Settings>
<SettingsTemplate>
<AgentConfigurations />
</Settings>
</SettingsTemplate>
</ApmMainTemplate>
);
}

function SettingsAnomalyDetectionRouteView() {
return (
<ApmMainTemplate pageTitle="Settings">
<Settings>
<SettingsTemplate>
<AnomalyDetection />
</Settings>
</SettingsTemplate>
</ApmMainTemplate>
);
}

function SettingsApmIndicesRouteView() {
return (
<ApmMainTemplate pageTitle="Settings">
<Settings>
<SettingsTemplate>
<ApmIndices />
</Settings>
</SettingsTemplate>
</ApmMainTemplate>
);
}

function SettingsCustomizeUI() {
return (
<ApmMainTemplate pageTitle="Settings">
<Settings>
<SettingsTemplate>
<CustomizeUI />
</Settings>
</SettingsTemplate>
</ApmMainTemplate>
);
}

export function EditAgentConfigurationRouteView(props: RouteComponentProps) {
const { search } = props.history.location;

// typescript complains because `pageStop` does not exist in `APMQueryParams`
// Going forward we should move away from globally declared query params and this is a first step
// @ts-expect-error
const { name, environment, pageStep } = toQuery(search);

const res = useFetcher(
(callApmApi) => {
return callApmApi({
endpoint: 'GET /api/apm/settings/agent-configuration/view',
params: { query: { name, environment } },
});
},
[name, environment]
);

return (
<ApmMainTemplate pageTitle="Settings">
<SettingsTemplate {...props}>
<AgentConfigurationCreateEdit
pageStep={pageStep || 'choose-settings-step'}
existingConfigResult={res}
/>
</SettingsTemplate>
</ApmMainTemplate>
);
}

export function CreateAgentConfigurationRouteView(props: RouteComponentProps) {
const { search } = props.history.location;

// Ignoring here because we specifically DO NOT want to add the query params to the global route handler
// @ts-expect-error
const { pageStep } = toQuery(search);

return (
<ApmMainTemplate pageTitle="Settings">
<SettingsTemplate {...props}>
<AgentConfigurationCreateEdit
pageStep={pageStep || 'choose-service-step'}
/>
</SettingsTemplate>
</ApmMainTemplate>
Comment on lines +260 to 304
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not new but was simply moved from another file

);
}
Expand Down Expand Up @@ -339,14 +385,14 @@ export const apmRouteConfig: APMRouteDefinition[] = [
{
exact: true,
path: '/settings/agent-configuration/create',
component: CreateAgentConfigurationRouteHandler,
component: CreateAgentConfigurationRouteView,
breadcrumb: CreateAgentConfigurationTitle,
},
{
exact: true,
path: '/settings/agent-configuration/edit',
breadcrumb: EditAgentConfigurationTitle,
component: EditAgentConfigurationRouteHandler,
component: EditAgentConfigurationRouteView,
},
{
exact: true,
Expand Down
Loading