Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add instances list

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/components/instances/empty.js Normal file
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>
);

2
frontend/src/components/instances/index.js Normal file
View File

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

33
frontend/src/components/instances/list-item.js Normal file
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;

19
frontend/src/components/navigation/breadcrumb.js
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>
);
}
breadcrumb.push(
<BreadcrumbLink key={breadcrumb.length} to={link.pathname}>
{link.name}
</BreadcrumbLink>
);
return breadcrumb;
}, []);
}

10
frontend/src/components/services/list-item.js
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>

64
frontend/src/containers/instances/list.js
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,30 +17,59 @@ 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
}
};
},
props: ({ data: { deploymentGroup, loading, error } }) => ({
@ -44,6 +79,11 @@ const InstanceListWithData = graphql(InstancesQuery, {
loading,
error
})
})(InstanceList)
});
const InstanceListWithData = compose(
PortalGql,
InstanceListGql
)(InstanceList);
export default InstanceListWithData;

25
frontend/src/containers/navigation/breadcrumb.js
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
};
},

20
frontend/src/containers/services/list.js
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) => (

4
frontend/src/graphql/Instances.gql
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

5
frontend/src/router.js
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>

22
frontend/src/state/selectors.js
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
}

259
spikes/graphql/graphql-server/src/resolvers.js
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,140 +27,148 @@ const getInstanceMetricData = (dataset, type) => {
const tick = setInterval(() => index++, 15*1000);
const resolveFunctions = {
Query: {
portal() {
return portal;
},
// GraphQL
deploymentGroups(_, { name, slug }) {
return deploymentGroups;
},
deploymentGroup(_, { uuid, name, slug }) {
if(uuid) {
return find(deploymentGroups, { uuid: uuid });
}
if(slug) {
return find(deploymentGroups, { slug: slug });
}
return null;
},
serviceScales(_, { serviceName, versionUuid }) { // : [ServiceScale]
return [];
},
serviceScale(_, { uuid }) { // : ServiceScale
return {};
},
convergenceActions(_, { type, service, versionUuid }) { // : [ConvergenceAction]
return [];
},
convergenceAction(uuid) { // : ConvergenceAction
return {};
},
stateConvergencePlans(_, { running, versionUuid }) { // : [StateConvergencePlan]
return [];
},
stateConvergencePlan(_, { uuid }) { // : StateConvergencePlan
return [];
},
versions(_, { manifestUuid, deploymentGroupUuid }) { // : [Version]
return [];
},
version(_, { uuid, manifestUuid }) { // : Version
return null;
},
manifests(_, { type, deploymentGroupUuid }) { // : [Manifest]
return [];
},
manifest(_, { uuid }) { // : Manifest
return null;
},
services(_, { name, slug, parentUuid, deploymentGroupUuid, deploymentGroupSlug }) { // }: [Service]
if(deploymentGroupUuid) {
return filter(services, { project: deploymentGroupUuid });
}
if(deploymentGroupSlug) {
const deploymentGroup = find(deploymentGroups, { slug: deploymentGroupSlug });
if(deploymentGroup) {
return filter(services, { project: deploymentGroup.uuid });
}
return null;
}
return services;
},
service(_, { uuid, hash }) { // : Service
if(uuid) {
return find(services, { uuid: uuid });
}
if(hash) {
return find(services, { hash: hash });
}
return null;
},
packages(_, { name, type, memory, disk, swap, lwps, vcpus, version, group }) { // : [Package]
return [];
},
package(_, { uuid }) { // : Package
return {};
},
instances(_, { name, machineId, status, serviceUuid, serviceSlug, deploymentGroupUuid, deploymentGroupSlug }) { // : [Instance]
if(serviceUuid) {
return filter(instances, { service: serviceUuid });
}
if(serviceSlug) {
const service = find(services, { slug: serviceSlug });
if(service) {
return filter(instances, { service: service.uuid });
}
return null;
}
return instances;
},
instance(_, { uuid }) { // : Instance
if(uuid) {
return find(instances, { uuid: uuid });
}
},
datacenter() {
return datacenter;
},
/*metricTypes() {
return metricTypes;
},
// tmp test
instanceMetric() {
return {
type: {
uuid: 'node_memory_rss_bytes',
id: 'node_memory_rss_bytes',
name: 'node_memory_rss_bytes',
},
data: getInstanceMetricData(leakMetricData, 'node_memory_rss_bytes')
};
}*/
const queries = {
portal() {
return portal;
},
deploymentGroups(_, { name, slug }) {
return deploymentGroups;
},
deploymentGroup(_, { uuid, name, slug }) {
if(uuid) {
return find(deploymentGroups, { uuid: uuid });
}
if(slug) {
return find(deploymentGroups, { slug: slug });
}
return null;
},
serviceScales(_, { serviceName, versionUuid }) { // : [ServiceScale]
return [];
},
serviceScale(_, { uuid }) { // : ServiceScale
return {};
},
convergenceActions(_, { type, service, versionUuid }) { // : [ConvergenceAction]
return [];
},
convergenceAction(uuid) { // : ConvergenceAction
return {};
},
stateConvergencePlans(_, { running, versionUuid }) { // : [StateConvergencePlan]
return [];
},
stateConvergencePlan(_, { uuid }) { // : StateConvergencePlan
return [];
},
versions(_, { manifestUuid, deploymentGroupUuid }) { // : [Version]
return [];
},
version(_, { uuid, manifestUuid }) { // : Version
return null;
},
manifests(_, { type, deploymentGroupUuid }) { // : [Manifest]
return [];
},
manifest(_, { uuid }) { // : Manifest
return null;
},
services(_, { name, slug, parentUuid, deploymentGroupUuid, deploymentGroupSlug }) { // }: [Service]
if(deploymentGroupUuid) {
return filter(services, { project: deploymentGroupUuid });
}
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;
}
return services;
},
service(_, { uuid, hash }) { // : Service
if(uuid) {
return find(services, { uuid: uuid });
}
if(hash) {
return find(services, { hash: hash });
}
return null;
},
packages(_, { name, type, memory, disk, swap, lwps, vcpus, version, group }) { // : [Package]
return [];
},
package(_, { uuid }) { // : Package
return {};
},
instances(_, { name, machineId, status, serviceUuid, serviceSlug, deploymentGroupUuid, deploymentGroupSlug }) { // : [Instance]
if(serviceUuid) {
return filter(instances, { service: serviceUuid });
}
if(serviceSlug) {
const service = find(services, { slug: serviceSlug });
if(service) {
return filter(instances, { service: service.uuid });
}
return null;
}
return instances;
},
instance(_, { uuid }) { // : Instance
if(uuid) {
return find(instances, { uuid: uuid });
}
},
datacenter() {
return datacenter;
},
/*metricTypes() {
return metricTypes;
},
// tmp test
instanceMetric() {
return {
type: {
uuid: 'node_memory_rss_bytes',
id: 'node_memory_rss_bytes',
name: 'node_memory_rss_bytes',
},
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) {

2
spikes/graphql/graphql-server/src/schema.gql
View File

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