joyent-portal/packages/cp-frontend/src/containers/instances/list.js

78 lines
2.0 KiB
JavaScript

import React, { Component } from 'react';
// Import PropTypes from 'prop-types';
import { compose, graphql } from 'react-apollo';
import InstancesQuery from '@graphql/Instances.gql';
import { LayoutContainer } from '@components/layout';
import { Loader, ErrorMessage } from '@components/messaging';
import { InstanceListItem, EmptyInstances } from '@components/instances';
class InstanceList extends Component {
render() {
const { instances, loading, error } = this.props;
console.log('instances = ', instances);
console.log('loading = ', loading);
console.log('error = ', error);
if (loading) {
return (
<LayoutContainer>
<Loader />
</LayoutContainer>
);
} else if (error) {
return (
<LayoutContainer>
<ErrorMessage message="Oops, and error occured while loading your instances." />
</LayoutContainer>
);
}
const instanceList = instances
? instances.map((instance, index) =>
<InstanceListItem
instance={instance}
key={instance.id}
toggleCollapsed={() => null}
/>
)
: <EmptyInstances />;
return (
<LayoutContainer>
<div>
<h2>Instance List</h2>
</div>
{instanceList}
</LayoutContainer>
);
}
}
const InstanceListGql = graphql(InstancesQuery, {
options(props) {
const params = props.match.params;
const deploymentGroupSlug = params.deploymentGroup;
const serviceSlug = params.service;
return {
variables: {
deploymentGroupSlug,
serviceSlug
}
};
},
props: ({ data: { deploymentGroup, loading, error } }) => ({
instances: deploymentGroup && deploymentGroup.services
? deploymentGroup.services.reduce(
(instances, service) => instances.concat(service.instances),
[]
)
: null,
loading,
error
})
});
const InstanceListWithData = compose(InstanceListGql)(InstanceList);
export default InstanceListWithData;