feat(cp-frontend): sort services by name

packages/cp-frontend/src/components/services/list-item.js

@@ -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,21 +37,27 @@ const ServiceListItem = ({
   service = {},
   isChild = false
 }) => {
-  const isServiceInactive = service.status !== 'ACTIVE';
+  const handleCardOptionsClick = evt => {
-
+    onQuickActionsClick(evt, service);
-  const children = service.children
+  };
-    ? service.children.map(service =>
-        <ServiceListItem
-          key={service.id}
-          deploymentGroup={deploymentGroup}
-          service={service}
-          isChild
-        />
-      )
-    : null;
 
+  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
+    />
+  );
+
   const title = isChild
     ? <CardTitle>
         {service.name}
@@ -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}

packages/cp-frontend/src/containers/services/list.js

@@ -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 (
+    if (loading) {
-      (loading && !forceArray(services).length) ||
-      (deploymentGroup.status === 'PROVISIONING' && !services.length)
-    ) {
       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, we’re 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}