97 lines
2.4 KiB
JavaScript
97 lines
2.4 KiB
JavaScript
import React from 'react';
|
|
import styled from 'styled-components';
|
|
import is, { isNot } from 'styled-is';
|
|
import PropTypes from 'prop-types';
|
|
import Baseline from '../../baseline';
|
|
import InstancesIcon from './icon-instances.svg';
|
|
import { Point } from '../prop-types';
|
|
import { GraphText } from './shapes';
|
|
import { HealthyIcon } from '../../icons';
|
|
|
|
const StyledInstancesIcon = styled(InstancesIcon)`
|
|
fill: ${props => props.theme.white};
|
|
|
|
${is('consul')`
|
|
fill: ${props => props.theme.secondary};
|
|
`};
|
|
|
|
${isNot('active')`
|
|
fill: ${props => props.theme.secondary};
|
|
`};
|
|
`;
|
|
|
|
// const StyledDataCentresIcon = styled(DataCentresIcon)`
|
|
// fill: ${props => props.theme.white};
|
|
//
|
|
// ${is('consul')`
|
|
// fill: ${props => props.theme.secondary};
|
|
// `};
|
|
//
|
|
// ${isNot('active')`
|
|
// fill: ${props => props.theme.secondary};
|
|
// `};
|
|
// `;
|
|
|
|
const GraphNodeInfo = ({ data, pos }) => {
|
|
const {
|
|
instances,
|
|
instanceStatuses,
|
|
instancesHealthy,
|
|
isConsul,
|
|
instancesActive,
|
|
transitionalStatus,
|
|
status
|
|
} = data;
|
|
|
|
const { x, y } = pos;
|
|
|
|
const statuses = transitionalStatus ? (
|
|
<GraphText consul={isConsul} active={instancesActive}>
|
|
{status.toLowerCase()}
|
|
</GraphText>
|
|
) : (
|
|
instanceStatuses.map((instanceStatus, index) => (
|
|
<GraphText key={index} consul={isConsul} active={instancesActive}>
|
|
{`${instanceStatus.count}
|
|
${instanceStatus.status.toLowerCase()}`}
|
|
</GraphText>
|
|
))
|
|
);
|
|
|
|
const healthy = (
|
|
<HealthyIcon
|
|
healthy={
|
|
instancesHealthy && instancesHealthy.total === instancesHealthy.healthy
|
|
? 'HEALTHY'
|
|
: 'UNHEALTHY'
|
|
}
|
|
/>
|
|
);
|
|
|
|
return (
|
|
<g transform={`translate(${x}, ${y})`}>
|
|
<g transform={`translate(0, 0)`}>{healthy}</g>
|
|
<g transform={'translate(30, 4.5)'}>
|
|
<StyledInstancesIcon consul={isConsul} active={instancesActive} />
|
|
</g>
|
|
<GraphText x={54} y={14} consul={isConsul} active={instancesActive}>
|
|
{`${instances.length} inst.`}
|
|
</GraphText>
|
|
<g transform={'translate(54, 36)'}>{statuses}</g>
|
|
{/* <g transform={'translate(82, 0)'}>
|
|
<StyledDataCentresIcon connected={connected} />
|
|
</g>
|
|
<GraphText x={96} y={12} connected={connected}>
|
|
{datacenter}
|
|
</GraphText> */}
|
|
</g>
|
|
);
|
|
};
|
|
|
|
GraphNodeInfo.propTypes = {
|
|
data: PropTypes.object.isRequired,
|
|
pos: Point.isRequired
|
|
};
|
|
|
|
export default Baseline(GraphNodeInfo);
|