Skip to content

Commit

Permalink
shows instance details
Browse files Browse the repository at this point in the history
  • Loading branch information
cauemarcondes committed Apr 12, 2021
1 parent ac9f697 commit 0d10116
Show file tree
Hide file tree
Showing 10 changed files with 592 additions and 152 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,16 @@

import {
EuiBasicTableColumn,
EuiButtonEmpty,
EuiButtonIcon,
RIGHT_ALIGNMENT,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React, { ReactNode } from 'react';
import { LatencyAggregationType } from '../../../../../common/latency_aggregation_types';
import { ActionMenu } from '../../../../../../observability/public';
import { isJavaAgentName } from '../../../../../common/agent_name';
import { UNIDENTIFIED_SERVICE_NODES_LABEL } from '../../../../../common/i18n';
import { LatencyAggregationType } from '../../../../../common/latency_aggregation_types';
import { SERVICE_NODE_NAME_MISSING } from '../../../../../common/service_nodes';
import {
asMillisecondDuration,
Expand All @@ -29,6 +31,7 @@ import { ServiceNodeMetricOverviewLink } from '../../../shared/Links/apm/Service
import { TruncateWithTooltip } from '../../../shared/truncate_with_tooltip';
import { getLatencyColumnLabel } from '../get_latency_column_label';
import { PrimaryStatsServiceInstanceItem } from '../service_overview_instances_chart_and_table';
import { InstanceActionsMenu } from './instance_actions_menu';

type ServiceInstanceComparisonStatistics = APIReturnType<'GET /api/apm/services/{serviceName}/service_overview_instances/comparison_statistics'>;

Expand All @@ -40,6 +43,8 @@ export function getColumns({
comparisonEnabled,
toggleRowDetails,
itemIdToExpandedRowMap,
toggleRowActionMenu,
itemIdToOpenActionMenuRowMap,
}: {
serviceName: string;
agentName?: string;
Expand All @@ -48,6 +53,8 @@ export function getColumns({
comparisonEnabled?: boolean;
toggleRowDetails: (selectedServiceNodeName: string) => void;
itemIdToExpandedRowMap: Record<string, ReactNode>;
toggleRowActionMenu: (selectedServiceNodeName: string) => void;
itemIdToOpenActionMenuRowMap: Record<string, boolean>;
}): Array<EuiBasicTableColumn<PrimaryStatsServiceInstanceItem>> {
return [
{
Expand Down Expand Up @@ -215,6 +222,37 @@ export function getColumns({
},
sortable: true,
},
{
align: RIGHT_ALIGNMENT,
width: '40px',
isExpander: true,
render: (instanceItem: PrimaryStatsServiceInstanceItem) => {
return (
<ActionMenu
id="instanceActionMenu"
closePopover={() =>
toggleRowActionMenu(instanceItem.serviceNodeName)
}
isOpen={itemIdToOpenActionMenuRowMap[instanceItem.serviceNodeName]}
anchorPosition="leftCenter"
button={
<EuiButtonEmpty
iconType="boxesHorizontal"
onClick={() =>
toggleRowActionMenu(instanceItem.serviceNodeName)
}
/>
}
>
<InstanceActionsMenu
serviceName={serviceName}
serviceNodeName={instanceItem.serviceNodeName}
onClose={() => toggleRowActionMenu(instanceItem.serviceNodeName)}
/>
</ActionMenu>
);
},
},
{
align: RIGHT_ALIGNMENT,
width: '40px',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -65,26 +65,42 @@ export function ServiceOverviewInstancesTable({
const {
urlParams: { latencyAggregationType, comparisonEnabled },
} = useUrlParams();
const [itemIdToExpandedRowMap, setItemIdToExpandedRowMap] = useState<{
[serviceName: string]: ReactNode;
}>({});

const [
itemIdToOpenActionMenuRowMap,
setItemIdToOpenActionMenuRowMap,
] = useState<Record<string, boolean>>({});

const [itemIdToExpandedRowMap, setItemIdToExpandedRowMap] = useState<
Record<string, ReactNode>
>({});

const { pageIndex, sort } = tableOptions;
const { direction, field } = sort;

const toggleRowActionMenu = (selectedServiceNodeName: string) => {
const actionMenuRowMapValues = { ...itemIdToOpenActionMenuRowMap };
if (actionMenuRowMapValues[selectedServiceNodeName]) {
delete actionMenuRowMapValues[selectedServiceNodeName];
} else {
actionMenuRowMapValues[selectedServiceNodeName] = true;
}
setItemIdToOpenActionMenuRowMap(actionMenuRowMapValues);
};

const toggleRowDetails = (selectedServiceNodeName: string) => {
const itemIdToExpandedRowMapValues = { ...itemIdToExpandedRowMap };
if (itemIdToExpandedRowMapValues[selectedServiceNodeName]) {
delete itemIdToExpandedRowMapValues[selectedServiceNodeName];
const expandedRowMapValues = { ...itemIdToExpandedRowMap };
if (expandedRowMapValues[selectedServiceNodeName]) {
delete expandedRowMapValues[selectedServiceNodeName];
} else {
itemIdToExpandedRowMapValues[selectedServiceNodeName] = (
expandedRowMapValues[selectedServiceNodeName] = (
<InstanceDetails
serviceNodeName={selectedServiceNodeName}
serviceName={serviceName}
/>
);
}
setItemIdToExpandedRowMap(itemIdToExpandedRowMapValues);
setItemIdToExpandedRowMap(expandedRowMapValues);
};

const columns = getColumns({
Expand All @@ -95,6 +111,8 @@ export function ServiceOverviewInstancesTable({
comparisonEnabled,
toggleRowDetails,
itemIdToExpandedRowMap,
toggleRowActionMenu,
itemIdToOpenActionMenuRowMap,
});

const pagination = {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
/*
* 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 { EuiLoadingSpinner } from '@elastic/eui';
import React from 'react';
import { useHistory } from 'react-router-dom';
import { SERVICE_NODE_NAME } from '../../../../../../common/elasticsearch_fieldnames';
import {
ActionMenuDivider,
Section,
SectionLink,
SectionLinks,
SectionSubtitle,
SectionTitle,
} from '../../../../../../../observability/public';
import { isJavaAgentName } from '../../../../../../common/agent_name';
import { useApmPluginContext } from '../../../../../context/apm_plugin/use_apm_plugin_context';
import { FETCH_STATUS } from '../../../../../hooks/use_fetcher';
import { useServiceNodeMetricOverviewHref } from '../../../../shared/Links/apm/ServiceNodeMetricOverviewLink';
import { useMetricOverviewHref } from '../../../../shared/Links/apm/MetricOverviewLink';
import { useInstanceDetailsFetcher } from '../use_instance_details_fetcher';
import { getMenuSections } from './menu_sections';
import { pushNewItemToKueryBar } from '../../../../shared/KueryBar/utils';
import { useUrlParams } from '../../../../../context/url_params_context/use_url_params';

interface Props {
serviceName: string;
serviceNodeName: string;
onClose: () => void;
}

export function InstanceActionsMenu({
serviceName,
serviceNodeName,
onClose,
}: Props) {
const { core } = useApmPluginContext();
const { data, status } = useInstanceDetailsFetcher({
serviceName,
serviceNodeName,
});
const serviceNodeMetricOverviewHref = useServiceNodeMetricOverviewHref({
serviceName,
serviceNodeName,
});
const metricOverviewHref = useMetricOverviewHref(serviceName);
const history = useHistory();
const {
urlParams: { kuery },
} = useUrlParams();

if (
status === FETCH_STATUS.LOADING ||
status === FETCH_STATUS.NOT_INITIATED
) {
return <EuiLoadingSpinner />;
}

if (!data) {
return null;
}

const handleFilterByInstanceClick = () => {
onClose();
pushNewItemToKueryBar({
kuery,
history,
key: SERVICE_NODE_NAME,
value: serviceNodeName,
});
};

const analizeRuntimeMetricsHref = isJavaAgentName(data.agent?.name)
? serviceNodeMetricOverviewHref
: metricOverviewHref;

const sections = getMenuSections({
instanceDetails: data,
basePath: core.http.basePath,
onFilterByInstanceClick: handleFilterByInstanceClick,
analizeRuntimeMetricsHref,
});

return (
<div>
{sections.map((section, idx) => {
const isLastSection = idx !== sections.length - 1;
return (
<div key={idx}>
{section.map((item) => (
<Section key={item.key}>
{item.title && <SectionTitle>{item.title}</SectionTitle>}
{item.subtitle && (
<SectionSubtitle>{item.subtitle}</SectionSubtitle>
)}
<SectionLinks>
{item.actions.map((action) => (
<SectionLink
key={action.key}
label={action.label}
href={action.href}
onClick={action.onClick}
color="primary"
/>
))}
</SectionLinks>
</Section>
))}
{isLastSection && <ActionMenuDivider />}
</div>
);
})}
</div>
);
}
Loading

0 comments on commit 0d10116

Please sign in to comment.