mirror of
https://github.com/yldio/copilot.git
synced 2024-11-14 15:20:06 +02:00
feat(cp-frontend): sort services by name
This commit is contained in:
parent
391267d609
commit
935e9bacca
@ -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 children = service.children
|
||||
? service.children.map(service =>
|
||||
<ServiceListItem
|
||||
key={service.id}
|
||||
deploymentGroup={deploymentGroup}
|
||||
service={service}
|
||||
isChild
|
||||
/>
|
||||
)
|
||||
: null;
|
||||
const handleCardOptionsClick = evt => {
|
||||
onQuickActionsClick(evt, 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
|
||||
/>
|
||||
);
|
||||
|
||||
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}
|
||||
|
@ -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, 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}
|
||||
|
Loading…
Reference in New Issue
Block a user