joyent-portal/frontend/src/containers/services/list.js
2017-05-23 17:23:37 +01:00

87 lines
2.0 KiB
JavaScript

import React, { Component } from 'react';
import { compose, graphql } from 'react-apollo';
import { connect } from 'react-redux';
import styled from 'styled-components';
// import { Link } from 'react-router-dom';
import PortalQuery from '@graphql/Portal.gql';
import ServicesQuery from '@graphql/Services.gql';
import { processServices } from '@root/state/selectors';
import { LayoutContainer } from '@components/layout';
import { ServiceListItem } from '@components/services';
const StyledContainer = styled.div`
position: relative;
`;
class ServiceList extends Component {
render() {
const {
location,
deploymentGroup,
services,
loading,
error
} = this.props;
console.log('services = ', services);
if(loading || error) {
return (
<p>Loading OR error</p>
);
}
const serviceList = services.map((service) => (
<ServiceListItem
key={service.uuid}
onQuickActions={null /*onQuickActions*/}
deploymentGroup={deploymentGroup.slug}
service={service}
uiTooltip={null /* uiTooltip */}
/>
));
return (
<LayoutContainer>
<StyledContainer>
<div>
{ /* <div ref={this.ref('container')}> */ }
{serviceList}
{ /* <ServicesTooltip {...uiTooltip} onBlur={handleTooltipBlur} /> */ }
</div>
</StyledContainer>
</LayoutContainer>
);
}
}
const PortalGql = graphql(PortalQuery, {});
const ServicesGql = graphql(ServicesQuery, {
options(props) {
return {
variables: {
deploymentGroupSlug: props.match.params.deploymentGroup
}
}
},
props: ({ data: { deploymentGroup, loading, error }}) => ({
deploymentGroup,
services: deploymentGroup ?
processServices(deploymentGroup.services, null) : null,
loading,
error
})
});
const ServiceListWithData = compose(
PortalGql,
ServicesGql
)(ServiceList);
export default ServiceListWithData;