/
Contents.tsx
70 lines (66 loc) · 1.73 KB
/
Contents.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import {
EuiFlexGroup,
EuiFlexItem,
EuiHorizontalRule,
EuiTitle
} from '@elastic/eui';
import cytoscape from 'cytoscape';
import React from 'react';
import { Buttons } from './Buttons';
import { Info } from './Info';
import { ServiceMetricFetcher } from './ServiceMetricFetcher';
const popoverMinWidth = 280;
interface ContentsProps {
focusedServiceName?: string;
isService: boolean;
label: string;
onFocusClick: () => void;
selectedNodeData: cytoscape.NodeDataDefinition;
selectedNodeServiceName: string;
}
export function Contents({
selectedNodeData,
focusedServiceName,
isService,
label,
onFocusClick,
selectedNodeServiceName
}: ContentsProps) {
const frameworkName = selectedNodeData.frameworkName;
return (
<EuiFlexGroup
direction="column"
gutterSize="s"
style={{ minWidth: popoverMinWidth }}
>
<EuiFlexItem>
<EuiTitle size="xxs">
<h3>{label}</h3>
</EuiTitle>
<EuiHorizontalRule margin="xs" />
</EuiFlexItem>
<EuiFlexItem>
{isService ? (
<ServiceMetricFetcher
frameworkName={frameworkName}
serviceName={selectedNodeServiceName}
/>
) : (
<Info {...selectedNodeData} />
)}
</EuiFlexItem>
{isService && (
<Buttons
focusedServiceName={focusedServiceName}
onFocusClick={onFocusClick}
selectedNodeServiceName={selectedNodeServiceName}
/>
)}
</EuiFlexGroup>
);
}