Skip to content

Commit

Permalink
Fix style issues
Browse files Browse the repository at this point in the history
  • Loading branch information
@sorenlouv
sorenlouv committed Jun 4, 2021
1 parent 76ac6b2 commit fea2b90
Show file tree
Hide file tree
Showing 12 changed files with 217 additions and 220 deletions.
2 changes: 1 addition & 1 deletion x-pack/plugins/apm/public/components/app/service_inventory/index.tsx
View file
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
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>
</>
);
}
99 changes: 52 additions & 47 deletions x-pack/plugins/apm/public/components/app/service_node_metrics/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,55 +117,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>
}
)}
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 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={containerId}>
<Truncate>{containerId}</Truncate>
</EuiToolTip>
}
/>
</EuiFlexItem>
</MetadataFlexGroup>
/>
</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>
}
/>
</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
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">
<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
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
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>
);
}
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

0 comments on commit fea2b90

Please sign in to comment.