feat(cp-frontend): sort services by name

This commit is contained in:
Sérgio Ramos 2017-07-28 15:25:06 +01:00
parent 391267d609
commit 935e9bacca
2 changed files with 40 additions and 32 deletions

View File

@ -1,6 +1,8 @@
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import forceArray from 'force-array';
import sortBy from 'lodash.sortby';
import { InstancesIcon, HealthyIcon, UnhealthyIcon } from 'joyent-ui-toolkit';
import Status from './status';
@ -35,20 +37,26 @@ const ServiceListItem = ({
service = {},
isChild = false
}) => {
const isServiceInactive = service.status !== 'ACTIVE';
const handleCardOptionsClick = evt => {
onQuickActionsClick(evt, service);
};
const children = service.children
? service.children.map(service =>
const children = forceArray(service.children);
const isServiceInactive = service.status && service.status !== 'ACTIVE';
const to = `/deployment-groups/${deploymentGroup}/services/${service.slug}`;
const instancesCount = children.length
? children.reduce((count, child) => count + child.instances.length, 0)
: service.instances.length;
const childrenItems = sortBy(children, ['slug']).map(service =>
<ServiceListItem
key={service.id}
deploymentGroup={deploymentGroup}
service={service}
isChild
/>
)
: null;
const to = `/deployment-groups/${deploymentGroup}/services/${service.slug}`;
);
const title = isChild
? <CardTitle>
@ -69,17 +77,6 @@ const ServiceListItem = ({
</CardSubTitle>
);
const handleCardOptionsClick = evt => {
onQuickActionsClick(evt, service);
};
const instancesCount = service.children
? service.children.reduce(
(count, child) => count + child.instances.length,
0
)
: service.instances.length;
const header = !isChild
? <StyledCardHeader>
{title}
@ -113,9 +110,9 @@ const ServiceListItem = ({
color="dark"
/>;
const view = children
const view = childrenItems.length
? <CardGroupView>
{children}
{childrenItems}
</CardGroupView>
: <CardView>
{isChild && title}

View File

@ -3,6 +3,7 @@ import { compose, graphql } from 'react-apollo';
import { connect } from 'react-redux';
import styled from 'styled-components';
import forceArray from 'force-array';
import sortBy from 'lodash.sortby';
import ServicesQuery from '@graphql/Services.gql';
import ServicesRestartMutation from '@graphql/ServicesRestartMutation.gql';
@ -46,16 +47,15 @@ class ServiceList extends Component {
startServices
} = this.props;
if (
(loading && !forceArray(services).length) ||
(deploymentGroup.status === 'PROVISIONING' && !services.length)
) {
if (loading) {
return (
<LayoutContainer>
<LayoutContainer center>
<Loader />
</LayoutContainer>
);
} else if (error) {
}
if (error) {
return (
<LayoutContainer>
<ErrorMessage message="Oops, and error occured while loading your services." />
@ -63,6 +63,17 @@ class ServiceList extends Component {
);
}
if (
deploymentGroup.status === 'PROVISIONING' &&
!forceArray(services).length
) {
return (
<LayoutContainer>
<Loader msg="Just a moment, were on it" />
</LayoutContainer>
);
}
const handleQuickActionsClick = (evt, service) => {
const list = this._refs.container;
const listRect = list.getBoundingClientRect();
@ -109,7 +120,7 @@ class ServiceList extends Component {
toggleServicesQuickActions({ show: false });
};
const serviceList = services.map(service => {
const serviceList = sortBy(services, ['slug']).map(service => {
return (
<ServiceListItem
key={service.id}