Add instances list

This commit is contained in:
JUDIT GRESKOVITS 2017-05-22 18:13:24 +01:00 committed by Sérgio Ramos
parent db4ac69452
commit a8c34ee756
13 changed files with 278 additions and 200 deletions

View File

@ -0,0 +1,13 @@
import React from 'react';
import Column from '@ui/components/column';
import Row from '@ui/components/row';
import { P } from '@ui/components/base-elements';
export default () => (
<Row>
<Column xs={12}>
<P>You don't have any instances</P>
</Column>
</Row>
);

View File

@ -0,0 +1,2 @@
export { default as EmptyInstances } from './empty';
export { default as InstanceListItem } from './list-item';

View File

@ -0,0 +1,33 @@
import React from 'react';
import PropTypes from 'prop-types';
import {
ListItem,
ListItemView,
ListItemMeta,
ListItemTitle,
ListItemOptions
} from '@ui/components/list';
const InstanceListItem = ({
instance = {},
onOptionsClick = () => null,
toggleCollapsed = () => null
}) => (
<ListItem collapsed={true} key={instance.uuid} >
<ListItemView>
<ListItemMeta onClick={toggleCollapsed}>
<ListItemTitle>{instance.name}</ListItemTitle>
</ListItemMeta>
</ListItemView>
<ListItemOptions onClick={onOptionsClick} />
</ListItem>
);
InstanceListItem.propTypes = {
instance: PropTypes.object,
onOptionsClick: React.PropTypes.func,
toggleCollapsed: React.PropTypes.func
};
export default InstanceListItem;

View File

@ -39,20 +39,11 @@ function getBreadcrumbLinks(links) {
<BreadcrumbSpan key={breadcrumb.length}> / </BreadcrumbSpan>
);
}
if(index < links.length - 1) {
breadcrumb.push(
<BreadcrumbLink key={breadcrumb.length} to={link.pathname}>
{link.name}
</BreadcrumbLink>
);
}
else {
breadcrumb.push(
<span key={breadcrumb.length}>
{link.name}
</span>
);
}
return breadcrumb;
}, []);
}

View File

@ -5,7 +5,6 @@ import styled from 'styled-components';
// import ItemMetricGroup from '@components/item-metric-group';
import { Link } from '@ui/components/anchor';
import { Checkbox, FormGroup } from '@ui/components/form';
import {
DataCentersIcon,
HealthyIcon,
@ -25,10 +24,6 @@ import {
ListItemInfo
} from '@ui/components/list';
const StyledFormGroup = styled(FormGroup)`
width: auto;
`;
const TitleInnerContainer = styled.div`
display: flex;
flex-direction: row;
@ -52,7 +47,7 @@ const ServiceListItem = ({
/>
)) : null;
const to = `/deploymentGroups/${deploymentGroup}/services/${service.id}`;
const to = `/deployment-groups/${deploymentGroup}/services/${service.slug}`;
const title = service.parent ? (
<ListItemTitle>
@ -61,9 +56,6 @@ const ServiceListItem = ({
) : (
<ListItemTitle>
<TitleInnerContainer>
<StyledFormGroup>
<Checkbox />
</StyledFormGroup>
<Link secondary to={to}>
{service.name}
</Link>

View File

@ -1,7 +1,13 @@
import React, { Component } from 'react';
import { graphql } from 'react-apollo';
import PropTypes from 'prop-types';
import { compose, graphql } from 'react-apollo';
import PortalQuery from '@graphql/Portal.gql';
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() {
@ -11,29 +17,58 @@ class InstanceList extends Component {
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 =
loading ? <p>Loading...</p> :
error ? <p>Error!!!</p> :
instances.map((instance, index) =>
<p key={index}>{instance.name}</p>);
const instanceList = instances ? instances.map((instance, index) => (
<InstanceListItem
instance={instance}
key={instance.uuid}
toggleCollapsed={() => null}
/>
)) : (
<EmptyInstances />
);
return (
<div>
<LayoutContainer>
<div>
<h2>Instance List</h2>
</div>
{ instanceList }
</div>
</LayoutContainer>
);
}
}
const InstanceListWithData = graphql(InstancesQuery, {
const PortalGql = graphql(PortalQuery, {});
const InstanceListGql = graphql(InstancesQuery, {
options(props) {
const params = props.match.params;
const deploymentGroupSlug = params.deploymentGroup;
const serviceSlug = params.service;
return {
variables: {
deploymentGroupSlug: props.match.params.deploymentGroup
deploymentGroupSlug,
serviceSlug
}
};
},
@ -44,6 +79,11 @@ const InstanceListWithData = graphql(InstancesQuery, {
loading,
error
})
})(InstanceList)
});
const InstanceListWithData = compose(
PortalGql,
InstanceListGql
)(InstanceList);
export default InstanceListWithData;

View File

@ -1,6 +1,7 @@
import React from 'react';
import { connect } from 'react-redux';
import { Breadcrumb as BreadcrumbComponent } from '@components/navigation';
import { deploymentGroupBySlugSelector, serviceBySlugSelector} from '@root/state/selectors';
const Breadcrumb = ({
deploymentGroup,
@ -36,32 +37,12 @@ const Breadcrumb = ({
const ConnectedBreadcrumb = connect(
(state, ownProps) => {
const params = ownProps.match.params;
const deploymentGroupSlug = params.deploymentGroup;
const serviceSlug = params.service;
const apolloData = state.apollo.data;
const keys = Object.keys(apolloData);
let deploymentGroup, service;
if(keys.length) {
// These should be selectors
if(deploymentGroupSlug) {
deploymentGroup = keys.reduce((dg, k) =>
apolloData[k].__typename === 'DeploymentGroup' &&
apolloData[k].slug === deploymentGroupSlug ?
apolloData[k] : dg, {});
if(serviceSlug) {
service = keys.reduce((s, k) =>
apolloData[k].__typename === 'Service' &&
apolloData[k].slug === serviceSlug ?
apolloData[k] : s, {});
}
}
}
return {
deploymentGroup,
service,
deploymentGroup: deploymentGroupBySlugSelector(deploymentGroupSlug)(state),
service: serviceBySlugSelector(serviceSlug)(state),
location: ownProps.location
};
},

View File

@ -9,6 +9,7 @@ import ServicesQuery from '@graphql/Services.gql';
import { processServices } from '@root/state/selectors';
import { LayoutContainer } from '@components/layout';
import { Loader, ErrorMessage } from '@components/messaging';
import { ServiceListItem } from '@components/services';
const StyledContainer = styled.div`
@ -27,12 +28,21 @@ class ServiceList extends Component {
error
} = this.props;
console.log('services = ', services);
if(loading || error) {
if(loading) {
return (
<p>Loading OR error</p>
);
<LayoutContainer>
<Loader />
</LayoutContainer>
)
}
else if(error) {
return (
<LayoutContainer>
<ErrorMessage
message='Oops, and error occured while loading your services.'
/>
</LayoutContainer>
)
}
const serviceList = services.map((service) => (

View File

@ -1,10 +1,10 @@
#import "./DeploymentGroupInfo.gql"
#import "./ServiceInfo.gql"
query Instances($deploymentGroupSlug: String!) {
query Instances($deploymentGroupSlug: String!, $serviceSlug: String) {
deploymentGroup(slug: $deploymentGroupSlug) {
...DeploymentGroupInfo
services {
services(slug: $serviceSlug) {
...ServiceInfo
instances {
uuid

View File

@ -22,6 +22,10 @@ const deploymentGroupRedirect = (p) => (
<Redirect to={`/deployment-groups/${p.match.params.deploymentGroup}/services-list`} />
);
const serviceRedirect = (p) => (
<Redirect to={`/deployment-groups/${p.match.params.deploymentGroup}/services/${p.match.params.service}/instances`} />
);
const Router = (
<BrowserRouter>
<div>
@ -51,6 +55,7 @@ const Router = (
<Route path='/deployment-groups/:deploymentGroup/services-topology' exact component={ServicesMenu} />
<Route path='/deployment-groups/:deploymentGroup/services-topology' exact component={ServicesTopology} />
<Route path='/deployment-groups/:deploymentGroup/services/:service' exact component={serviceRedirect} />
<Route path='/deployment-groups/:deploymentGroup/services/:service/instances' exact component={InstanceList} />
</div>

View File

@ -6,18 +6,20 @@ const apollo = (state) => state.apollo;
const deploymentGroupBySlug = (deploymentGroupSlug) => createSelector(
[apollo],
(apollo) => apollo ? Object.keys(apollo).reduce((dg, k) =>
apollo[k].__typename === 'DeploymentGroup' &&
apollo[k].slug === deploymentGroupSlug ?
apollo[k] : dg, {}) : null
(apollo) => apollo && apollo.data ?
Object.keys(apollo.data).reduce((dg, k) =>
apollo.data[k].__typename === 'DeploymentGroup' &&
apollo.data[k].slug === deploymentGroupSlug ?
apollo.data[k] : dg, null) : null
);
const servicesBySlug = (serviceSlug) => createSelector(
const serviceBySlug = (serviceSlug) => createSelector(
[apollo],
(apollo) => apollo ? Object.keys(apollo).reduce((s, k) =>
apollo[k].__typename === 'Service' &&
apollo[k].slug === serviceSlug ?
apollo[k] : s, {}) : null
(apollo) => apollo && apollo.data ?
Object.keys(apollo.data).reduce((s, k) =>
apollo.data[k].__typename === 'Service' &&
apollo.data[k].slug === serviceSlug ?
apollo.data[k] : s, null) : null
);
// apollo gql utils //
@ -64,6 +66,6 @@ const processServices = (services, datacenter) => {
export {
deploymentGroupBySlug as deploymentGroupBySlugSelector,
servicesBySlug as servicesBySlugSelector,
serviceBySlug as serviceBySlugSelector,
processServices as processServices
}

View File

@ -2,6 +2,7 @@ import { find, filter } from 'lodash';
import data from './mock-data';
import { normalMetricData, leakMetricData } from './mock-data/metrics';
// TMP / Util
const datacenter = {
uuid: 'datacenter-uuid',
region: 'us-east-1'
@ -26,8 +27,9 @@ const getInstanceMetricData = (dataset, type) => {
const tick = setInterval(() => index++, 15*1000);
const resolveFunctions = {
Query: {
// GraphQL
const queries = {
portal() {
return portal;
},
@ -87,6 +89,9 @@ const resolveFunctions = {
if(deploymentGroupSlug) {
const deploymentGroup = find(deploymentGroups, { slug: deploymentGroupSlug });
if(deploymentGroup) {
if(slug) {
return filter(services, { project: deploymentGroup.uuid, slug: slug });
}
return filter(services, { project: deploymentGroup.uuid });
}
return null;
@ -147,19 +152,23 @@ const resolveFunctions = {
data: getInstanceMetricData(leakMetricData, 'node_memory_rss_bytes')
};
}*/
},
}
const resolveFunctions = {
Query: queries,
Portal: {
deploymentGroups(portal) {
deploymentGroups(portal, args, context) {
return deploymentGroups;
}
},
DeploymentGroup: {
services(deploymentGroup) {
return filter(services, { project: deploymentGroup.uuid });
},
services(deploymentGroup, args, context) {
const a = Object.assign({}, args, {deploymentGroupSlug: deploymentGroup.slug})
return queries.services(null, a);
}
},
Service: {
instances(service) {
instances(service, args, context) {
return filter(instances, { service: service.uuid });
},
/*metrics(service) {

View File

@ -12,7 +12,7 @@
uuid: ID!
name: String!
slug: String!
services: [Service]!
services(slug: String): [Service]!
version: Version!
history: [Version]!
}