Skip to content

Commit

Permalink
[APM] Service overview instances table (#85770) (#85931)
Browse files Browse the repository at this point in the history 
Co-authored-by: Kibana Machine <[email protected]>
  • Loading branch information
@dgieselaar @kibanamachine
dgieselaar and kibanamachine authored Dec 15, 2020
1 parent 360a304 commit 7d7ebb1
Show file tree
Hide file tree
Showing 17 changed files with 1,055 additions and 249 deletions.
10 changes: 2 additions & 8 deletions x-pack/plugins/apm/public/components/app/service_inventory/ServiceList/ServiceListMetric.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/
import React from 'react';
import { SparkPlotWithValueLabel } from '../../../shared/charts/spark_plot/spark_plot_with_value_label';
import { SparkPlot } from '../../../shared/charts/spark_plot';

export function ServiceListMetric({
color,
Expand All @@ -15,11 +15,5 @@ export function ServiceListMetric({
series?: Array<{ x: number; y: number | null }>;
valueLabel: React.ReactNode;
}) {
return (
<SparkPlotWithValueLabel
valueLabel={valueLabel}
series={series}
color={color}
/>
);
return <SparkPlot valueLabel={valueLabel} series={series} color={color} />;
}
43 changes: 5 additions & 38 deletions x-pack/plugins/apm/public/components/app/service_overview/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/

import {
EuiFlexGroup,
EuiFlexItem,
EuiPage,
EuiPanel,
EuiTitle,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { EuiFlexGroup, EuiFlexItem, EuiPage, EuiPanel } from '@elastic/eui';
import React from 'react';
import { useTrackPageview } from '../../../../../observability/public';
import { isRumAgentName } from '../../../../common/agent_name';
Expand All @@ -23,6 +16,7 @@ import { TransactionErrorRateChart } from '../../shared/charts/transaction_error
import { SearchBar } from '../../shared/search_bar';
import { ServiceOverviewDependenciesTable } from './service_overview_dependencies_table';
import { ServiceOverviewErrorsTable } from './service_overview_errors_table';
import { ServiceOverviewInstancesTable } from './service_overview_instances_table';
import { ServiceOverviewThroughputChart } from './service_overview_throughput_chart';
import { ServiceOverviewTransactionsTable } from './service_overview_transactions_table';

Expand Down Expand Up @@ -101,36 +95,9 @@ export function ServiceOverview({
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexGroup gutterSize="s">
<EuiFlexItem grow={4}>
<EuiPanel>
<EuiTitle size="xs">
<h2>
{i18n.translate(
'xpack.apm.serviceOverview.instancesLatencyDistributionChartTitle',
{
defaultMessage: 'Instances latency distribution',
}
)}
</h2>
</EuiTitle>
</EuiPanel>
</EuiFlexItem>
<EuiFlexItem grow={6}>
<EuiPanel>
<EuiTitle size="xs">
<h2>
{i18n.translate(
'xpack.apm.serviceOverview.instancesTableTitle',
{
defaultMessage: 'Instances',
}
)}
</h2>
</EuiTitle>
</EuiPanel>
</EuiFlexItem>
</EuiFlexGroup>
<EuiPanel>
<ServiceOverviewInstancesTable serviceName={serviceName} />
</EuiPanel>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPage>
Expand Down
10 changes: 5 additions & 5 deletions .../apm/public/components/app/service_overview/service_overview_dependencies_table/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,12 @@ import { TruncateWithTooltip } from '../../../shared/truncate_with_tooltip';
import { TableLinkFlexItem } from '../table_link_flex_item';
import { AgentIcon } from '../../../shared/AgentIcon';
import { TableFetchWrapper } from '../../../shared/table_fetch_wrapper';
import { SparkPlotWithValueLabel } from '../../../shared/charts/spark_plot/spark_plot_with_value_label';
import { SparkPlot } from '../../../shared/charts/spark_plot';
import { px, unit } from '../../../../style/variables';
import { ImpactBar } from '../../../shared/ImpactBar';
import { ServiceOverviewLink } from '../../../shared/Links/apm/service_overview_link';
import { SpanIcon } from '../../../shared/span_icon';
import { ServiceOverviewTableContainer } from '../service_overview_table';
import { ServiceOverviewTableContainer } from '../service_overview_table_container';

interface Props {
serviceName: string;
Expand Down Expand Up @@ -88,7 +88,7 @@ export function ServiceOverviewDependenciesTable({ serviceName }: Props) {
width: px(unit * 10),
render: (_, { latency }) => {
return (
<SparkPlotWithValueLabel
<SparkPlot
color="euiColorVis1"
series={latency.timeseries}
valueLabel={asDuration(latency.value)}
Expand All @@ -108,7 +108,7 @@ export function ServiceOverviewDependenciesTable({ serviceName }: Props) {
width: px(unit * 10),
render: (_, { throughput }) => {
return (
<SparkPlotWithValueLabel
<SparkPlot
compact
color="euiColorVis0"
series={throughput.timeseries}
Expand All @@ -129,7 +129,7 @@ export function ServiceOverviewDependenciesTable({ serviceName }: Props) {
width: px(unit * 10),
render: (_, { errorRate }) => {
return (
<SparkPlotWithValueLabel
<SparkPlot
compact
color="euiColorVis7"
series={errorRate.timeseries}
Expand Down
83 changes: 45 additions & 38 deletions ...lugins/apm/public/components/app/service_overview/service_overview_errors_table/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,17 +13,18 @@ import {
import { i18n } from '@kbn/i18n';
import React, { useState } from 'react';
import styled from 'styled-components';
import { EuiBasicTable } from '@elastic/eui';
import { asInteger } from '../../../../../common/utils/formatters';
import { FETCH_STATUS, useFetcher } from '../../../../hooks/use_fetcher';
import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
import { callApmApi } from '../../../../services/rest/createCallApmApi';
import { px, truncate, unit } from '../../../../style/variables';
import { SparkPlotWithValueLabel } from '../../../shared/charts/spark_plot/spark_plot_with_value_label';
import { SparkPlot } from '../../../shared/charts/spark_plot';
import { ErrorDetailLink } from '../../../shared/Links/apm/ErrorDetailLink';
import { ErrorOverviewLink } from '../../../shared/Links/apm/ErrorOverviewLink';
import { TableFetchWrapper } from '../../../shared/table_fetch_wrapper';
import { TimestampTooltip } from '../../../shared/TimestampTooltip';
import { ServiceOverviewTable } from '../service_overview_table';
import { ServiceOverviewTableContainer } from '../service_overview_table_container';
import { TableLinkFlexItem } from '../table_link_flex_item';

interface Props {
Expand Down Expand Up @@ -123,7 +124,7 @@ export function ServiceOverviewErrorsTable({ serviceName }: Props) {
width: px(unit * 12),
render: (_, { occurrences }) => {
return (
<SparkPlotWithValueLabel
<SparkPlot
color="euiColorVis7"
series={occurrences.timeseries ?? undefined}
valueLabel={i18n.translate(
Expand Down Expand Up @@ -224,41 +225,47 @@ export function ServiceOverviewErrorsTable({ serviceName }: Props) {
</EuiFlexItem>
<EuiFlexItem>
<TableFetchWrapper status={status}>
<ServiceOverviewTable
columns={columns}
items={items}
pagination={{
pageIndex,
pageSize: PAGE_SIZE,
totalItemCount,
pageSizeOptions: [PAGE_SIZE],
hidePerPageOptions: true,
}}
loading={status === FETCH_STATUS.LOADING}
onChange={(newTableOptions: {
page?: {
index: number;
};
sort?: { field: string; direction: SortDirection };
}) => {
setTableOptions({
pageIndex: newTableOptions.page?.index ?? 0,
sort: newTableOptions.sort
? {
field: newTableOptions.sort.field as SortField,
direction: newTableOptions.sort.direction,
}
: DEFAULT_SORT,
});
}}
sorting={{
enableAllColumns: true,
sort: {
direction: sort.direction,
field: sort.field,
},
}}
/>
<ServiceOverviewTableContainer
isEmptyAndLoading={
items.length === 0 && status === FETCH_STATUS.LOADING
}
>
<EuiBasicTable
columns={columns}
items={items}
pagination={{
pageIndex,
pageSize: PAGE_SIZE,
totalItemCount,
pageSizeOptions: [PAGE_SIZE],
hidePerPageOptions: true,
}}
loading={status === FETCH_STATUS.LOADING}
onChange={(newTableOptions: {
page?: {
index: number;
};
sort?: { field: string; direction: SortDirection };
}) => {
setTableOptions({
pageIndex: newTableOptions.page?.index ?? 0,
sort: newTableOptions.sort
? {
field: newTableOptions.sort.field as SortField,
direction: newTableOptions.sort.direction,
}
: DEFAULT_SORT,
});
}}
sorting={{
enableAllColumns: true,
sort: {
direction: sort.direction,
field: sort.field,
},
}}
/>
</ServiceOverviewTableContainer>
</TableFetchWrapper>
</EuiFlexItem>
</EuiFlexGroup>
Expand Down
Loading

0 comments on commit 7d7ebb1

Please sign in to comment.