62 lines
1.4 KiB
JavaScript
62 lines
1.4 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import styled from 'styled-components';
|
|
import remcalc from 'remcalc';
|
|
import { StatusLoader, P } from 'joyent-ui-toolkit';
|
|
|
|
const StyledStatusContainer = styled.div`
|
|
display: inline-block;
|
|
margin: 0;
|
|
height: ${remcalc(54)};
|
|
width: ${remcalc(200)};
|
|
`;
|
|
|
|
const StyledStatus = P.extend`
|
|
margin: 0;
|
|
font-size: ${remcalc(13)};
|
|
line-height: ${remcalc(13)};
|
|
`;
|
|
|
|
const StyledTransitionalStatus = StyledStatus.extend`
|
|
display: inline-block;
|
|
margin-left: ${remcalc(6)};
|
|
text-transform: capitalize;
|
|
`;
|
|
|
|
const ServiceStatus = ({ service }) => {
|
|
|
|
const getInstanceStatuses = (instanceStatuses) =>
|
|
instanceStatuses.map((instanceStatus, index) => {
|
|
const { status, count } = instanceStatus;
|
|
|
|
return (
|
|
<StyledStatus key={index}>
|
|
{`${count}
|
|
${count > 1 ? 'instances' : 'instance'}
|
|
${status.toLowerCase()}`}
|
|
</StyledStatus>
|
|
);
|
|
});
|
|
|
|
return service.transitionalStatus
|
|
? (
|
|
<StyledStatusContainer>
|
|
<StatusLoader />
|
|
<StyledTransitionalStatus>
|
|
{ service.status ? service.status.toLowerCase() : '' }
|
|
</StyledTransitionalStatus>
|
|
</StyledStatusContainer>
|
|
)
|
|
: (
|
|
<StyledStatusContainer>
|
|
{getInstanceStatuses(service.instanceStatuses)}
|
|
</StyledStatusContainer>
|
|
);
|
|
};
|
|
|
|
ServiceStatus.propTypes = {
|
|
service: PropTypes.object.isRequired
|
|
};
|
|
|
|
export default ServiceStatus;
|