feat(cp-frontend): uniform loading statuses and titles

This commit is contained in:
Sérgio Ramos 2017-07-28 17:56:03 +01:00
parent 935e9bacca
commit 92b9f09c01
22 changed files with 238 additions and 212 deletions

View File

@ -1 +0,0 @@
export { default as DeploymentGroupsLoading } from './loading';

View File

@ -1,14 +0,0 @@
import React from 'react';
import { Col, Row } from 'react-styled-flexboxgrid';
import { Dots2 } from 'styled-text-spinners';
const LoadingRow = Row.extend`
flex: 1 1 auto;
`;
export default () =>
<LoadingRow center="xs" around="xs" middle="xs">
<Col xs={1}>
<Dots2 />
</Col>
</LoadingRow>;

View File

@ -7,13 +7,13 @@ export default Grid.extend`
${isNot('plain')` ${isNot('plain')`
flex: 1 1 auto; flex: 1 1 auto;
display: flex; display: block;
flex-flow: column; flex-flow: column;
`}; `};
${is('center')` ${is('center')`
display: flex; display: flex;
flex-direction: row; flex-direction: column;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: center; justify-content: center;
align-content: center; align-content: center;

View File

@ -3,11 +3,12 @@ import { Field } from 'redux-form';
import styled from 'styled-components'; import styled from 'styled-components';
import SimpleTable from 'react-simple-table'; import SimpleTable from 'react-simple-table';
import { Row, Col } from 'react-styled-flexboxgrid'; import { Row, Col } from 'react-styled-flexboxgrid';
import { Dots2 } from 'styled-text-spinners';
import Bundle from 'react-bundle'; import Bundle from 'react-bundle';
import remcalc from 'remcalc'; import remcalc from 'remcalc';
import forceArray from 'force-array'; import forceArray from 'force-array';
import { Loader } from '@components/messaging';
import { import {
FormGroup, FormGroup,
FormMeta, FormMeta,
@ -18,7 +19,8 @@ import {
ProgressbarItem, ProgressbarItem,
ProgressbarButton, ProgressbarButton,
H3, H3,
typography typography,
StatusLoader
} from 'joyent-ui-toolkit'; } from 'joyent-ui-toolkit';
const Dl = styled.dl` const Dl = styled.dl`
@ -88,7 +90,7 @@ class ManifestEditorBundle extends Component {
}, 80); }, 80);
} }
return <Dots2 />; return <Loader />;
} }
render() { render() {
if (!this.state.ManifestEditor) { if (!this.state.ManifestEditor) {
@ -161,7 +163,7 @@ export const Manifest = ({
disabled={!(dirty || !loading || defaultValue.length)} disabled={!(dirty || !loading || defaultValue.length)}
type="submit" type="submit"
> >
Environment {loading ? <StatusLoader /> : 'Environment'}
</Button> </Button>
</ButtonsRow> </ButtonsRow>
</form>; </form>;
@ -180,7 +182,7 @@ const Filename = ({ name, onRemoveFile }) =>
export const Files = ({ loading, files, onRemoveFile }) => { export const Files = ({ loading, files, onRemoveFile }) => {
if (loading) { if (loading) {
return null; return <Loader />;
} }
const _files = files.map(({ id, name, value }) => const _files = files.map(({ id, name, value }) =>
@ -229,12 +231,18 @@ export const Environment = ({
disabled={!(dirty || !loading || defaultValue.length)} disabled={!(dirty || !loading || defaultValue.length)}
type="submit" type="submit"
> >
{loading ? <Dots2 /> : 'Review'} {loading ? <StatusLoader /> : 'Review'}
</Button> </Button>
</ButtonsRow> </ButtonsRow>
</form>; </form>;
export const Review = ({ handleSubmit, onCancel, dirty, ...state }) => { export const Review = ({
handleSubmit,
onCancel,
dirty,
loading,
...state
}) => {
const serviceList = forceArray(state.services).map(({ name, config }) => const serviceList = forceArray(state.services).map(({ name, config }) =>
<ServiceCard key={name}> <ServiceCard key={name}>
<Dl> <Dl>
@ -274,11 +282,11 @@ export const Review = ({ handleSubmit, onCancel, dirty, ...state }) => {
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
{serviceList} {serviceList}
<ButtonsRow> <ButtonsRow>
<Button onClick={onCancel} disabled={state.loading} secondary> <Button onClick={onCancel} disabled={loading} secondary>
Cancel Cancel
</Button> </Button>
<Button disabled={state.loading} type="submit"> <Button disabled={loading} type="submit">
{state.loading ? <Dots2 /> : 'Confirm and Deploy'} {loading ? <StatusLoader /> : 'Confirm and Deploy'}
</Button> </Button>
</ButtonsRow> </ButtonsRow>
</form> </form>

View File

@ -7,10 +7,11 @@ const Container = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: flex-start; justify-content: center;
align-content: center; align-content: center;
align-items: center; align-items: center;
flex: 1 1 auto;
flex: 1 0 auto;
align-self: stretch; align-self: stretch;
`; `;
@ -23,6 +24,7 @@ const Msg = P.extend`
flex: 0 0 auto; flex: 0 0 auto;
align-self: stretch; align-self: stretch;
text-align: center; text-align: center;
margin-bottom: 0;
`; `;
export default ({ msg }) => export default ({ msg }) =>

View File

@ -1,3 +1,4 @@
export { default as Breadcrumb } from './breadcrumb'; export { default as Breadcrumb } from './breadcrumb';
export { default as Menu } from './menu'; export { default as Menu } from './menu';
export { default as Header } from './header'; export { default as Header } from './header';
export { default as Title } from './title';

View File

@ -0,0 +1,8 @@
import { H2 } from 'joyent-ui-toolkit';
import remcalc from 'remcalc';
export default H2.extend`
margin-top: ${remcalc(2)};
flex: 0 0 auto;
align-self: stretch;
`;

View File

@ -41,7 +41,7 @@ const ServiceListItem = ({
onQuickActionsClick(evt, service); onQuickActionsClick(evt, service);
}; };
const children = forceArray(service.children); const children = sortBy(forceArray(service.children), ['slug']);
const isServiceInactive = service.status && service.status !== 'ACTIVE'; const isServiceInactive = service.status && service.status !== 'ACTIVE';
const to = `/deployment-groups/${deploymentGroup}/services/${service.slug}`; const to = `/deployment-groups/${deploymentGroup}/services/${service.slug}`;
@ -49,7 +49,7 @@ const ServiceListItem = ({
? children.reduce((count, child) => count + child.instances.length, 0) ? children.reduce((count, child) => count + child.instances.length, 0)
: service.instances.length; : service.instances.length;
const childrenItems = sortBy(children, ['slug']).map(service => const childrenItems = children.map(service =>
<ServiceListItem <ServiceListItem
key={service.id} key={service.id}
deploymentGroup={deploymentGroup} deploymentGroup={deploymentGroup}

View File

@ -9,12 +9,21 @@ import { Modal } from 'joyent-ui-toolkit';
class DeploymentGroupDelete extends Component { class DeploymentGroupDelete extends Component {
render() { render() {
if (this.props.loading) { const { loading, error } = this.props;
return <Loader />;
} if (loading) {
if (this.props.error) {
return ( return (
<ErrorMessage message="Oops, an error occured while loading your service." /> <Modal width={460} onCloseClick={handleCloseClick}>
<Loader />
</Modal>
);
}
if (error) {
return (
<Modal width={460} onCloseClick={handleCloseClick}>
<ErrorMessage message="Oops, an error occured while deleting your service." />
</Modal>
); );
} }

View File

@ -3,32 +3,11 @@ import React from 'react';
import ManifestEditOrCreate from '@containers/manifest/edit-or-create'; import ManifestEditOrCreate from '@containers/manifest/edit-or-create';
import { Progress } from '@components/manifest/edit-or-create'; import { Progress } from '@components/manifest/edit-or-create';
import { LayoutContainer } from '@components/layout'; import { LayoutContainer } from '@components/layout';
import { DeploymentGroupsLoading } from '@components/deployment-groups'; import { Title } from '@components/navigation';
import { H2 } from 'joyent-ui-toolkit';
export default ({ export default ({ match }) =>
loading,
error,
manifest = '',
deploymentGroup = null,
match
}) => {
const stage = match.params.stage;
return (
<LayoutContainer> <LayoutContainer>
<H2>Creating deployment group</H2> <Title>Creating deployment group</Title>
{loading && <DeploymentGroupsLoading />} <Progress stage={match.params.stage} create />
{error && <ManifestEditOrCreate create />
<span> </LayoutContainer>;
{error.toString()}
</span>}
<Progress stage={stage} create />
<ManifestEditOrCreate
manifest={manifest}
deploymentGroup={deploymentGroup}
create
/>
</LayoutContainer>
);
};

View File

@ -5,15 +5,14 @@ import intercept from 'apr-intercept';
import DeploymentGroupImportMutation from '@graphql/DeploymentGroupImport.gql'; import DeploymentGroupImportMutation from '@graphql/DeploymentGroupImport.gql';
import { LayoutContainer } from '@components/layout'; import { LayoutContainer } from '@components/layout';
import { DeploymentGroupsLoading } from '@components/deployment-groups'; import { Title } from '@components/navigation';
import { H2 } from 'joyent-ui-toolkit'; import { ErrorMessage, Loader } from '@components/messaging';
class DeploymentGroupImport extends Component { class DeploymentGroupImport extends Component {
constructor() { constructor() {
super(); super();
this.state = { this.state = {
loading: true,
error: false error: false
}; };
@ -40,14 +39,21 @@ class DeploymentGroupImport extends Component {
render() { render() {
const { loading, error } = this.state; const { loading, error } = this.state;
const _title = <Title>Importing deployment group</Title>;
if (error) {
return ( return (
<LayoutContainer> <LayoutContainer>
<H2>Importing deployment group</H2> {_title}
{loading && <DeploymentGroupsLoading />} <ErrorMessage message="Oops, and error occured while importing your deployment groups." />
{error && </LayoutContainer>
<span> );
{error.toString()} }
</span>}
return (
<LayoutContainer center>
{_title}
<Loader />
</LayoutContainer> </LayoutContainer>
); );
} }

View File

@ -8,16 +8,12 @@ import forceArray from 'force-array';
import remcalc from 'remcalc'; import remcalc from 'remcalc';
import { LayoutContainer } from '@components/layout'; import { LayoutContainer } from '@components/layout';
import { ErrorMessage } from '@components/messaging'; import { Title } from '@components/navigation';
import { DeploymentGroupsLoading } from '@components/deployment-groups'; import { ErrorMessage, Loader } from '@components/messaging';
import DeploymentGroupsQuery from '@graphql/DeploymentGroups.gql'; import DeploymentGroupsQuery from '@graphql/DeploymentGroups.gql';
import DeploymentGroupsImportableQuery from '@graphql/DeploymentGroupsImportable.gql'; import DeploymentGroupsImportableQuery from '@graphql/DeploymentGroupsImportable.gql';
import { H2, H3, Small, IconButton, BinIcon } from 'joyent-ui-toolkit'; import { H2, H3, Small, IconButton, BinIcon } from 'joyent-ui-toolkit';
const Title = H2.extend`
margin-top: ${remcalc(2)};
`;
const DGsRows = Row.extend` const DGsRows = Row.extend`
margin-top: ${remcalc(-7)}; margin-top: ${remcalc(-7)};
`; `;
@ -109,14 +105,25 @@ const DeploymentGroupList = ({
error, error,
match match
}) => { }) => {
const _loading = !loading ? null : <DeploymentGroupsLoading />; const _title = <Title>Deployment groups</Title>;
// todo improve this error message style according to new designs if (loading) {
const _error = !error return (
? null <LayoutContainer center>
: <Row> {_title}
<Loader />
</LayoutContainer>
);
}
if (error) {
return (
<LayoutContainer>
{_title}
<ErrorMessage message="Oops, and error occured while loading your deployment groups." /> <ErrorMessage message="Oops, and error occured while loading your deployment groups." />
</Row>; </LayoutContainer>
);
}
const groups = forceArray(deploymentGroups).map(({ slug, name }) => const groups = forceArray(deploymentGroups).map(({ slug, name }) =>
<Col xs={12} sm={4} md={3} lg={3} key={slug}> <Col xs={12} sm={4} md={3} lg={3} key={slug}>
@ -159,9 +166,7 @@ const DeploymentGroupList = ({
return ( return (
<LayoutContainer> <LayoutContainer>
<Title>Deployment groups</Title> {_title}
{_loading}
{_error}
<DGsRows> <DGsRows>
{groups} {groups}
{create} {create}

View File

@ -1,52 +1,63 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
// Import PropTypes from 'prop-types';
import { compose, graphql } from 'react-apollo'; import { compose, graphql } from 'react-apollo';
import InstancesQuery from '@graphql/Instances.gql'; import InstancesQuery from '@graphql/Instances.gql';
import { Row } from 'react-styled-flexboxgrid'; import { Row } from 'react-styled-flexboxgrid';
import remcalc from 'remcalc'; import remcalc from 'remcalc';
import forceArray from 'force-array';
import sortBy from 'lodash.sortby';
import { LayoutContainer } from '@components/layout'; import { LayoutContainer } from '@components/layout';
import { ErrorMessage } from '@components/messaging'; import { Title } from '@components/navigation';
import { Loader, ErrorMessage } from '@components/messaging';
import { InstanceListItem, EmptyInstances } from '@components/instances'; import { InstanceListItem, EmptyInstances } from '@components/instances';
import { DeploymentGroupsLoading } from '@components/deployment-groups';
import { H2 } from 'joyent-ui-toolkit';
const Title = H2.extend` const InstanceList = ({ deploymentGroup, instances = [], loading, error }) => {
margin-top: ${remcalc(2)}; const _title = <Title>Instances</Title>;
`;
class InstanceList extends Component { if (loading && !forceArray(instances).length) {
render() { return (
const { instances, loading, error } = this.props; <LayoutContainer center>
{_title}
<Loader />
</LayoutContainer>
);
}
const _loading = !loading ? null : <DeploymentGroupsLoading />; if (error) {
return (
const _error = !error <LayoutContainer>
? null {_title}
: <Row>
<ErrorMessage message="Oops, and error occured while loading your instances." /> <ErrorMessage message="Oops, and error occured while loading your instances." />
</Row>; </LayoutContainer>
);
}
const instanceList = instances if (deploymentGroup.status === 'PROVISIONING' && !instances.length) {
? instances.map((instance, index) => return (
<LayoutContainer center>
{_title}
<Loader msg="Just a moment, were on it" />
</LayoutContainer>
);
}
const instanceList = instances.map((instance, index) =>
<InstanceListItem <InstanceListItem
instance={instance} instance={instance}
key={instance.id} key={instance.id}
toggleCollapsed={() => null} toggleCollapsed={() => null}
/> />
) );
: <EmptyInstances />;
const _instances = !instanceList.length ? <EmptyInstances /> : instanceList;
return ( return (
<LayoutContainer> <LayoutContainer>
<Title>Instances</Title> {_title}
{_error} {_instances}
{_loading}
{instanceList}
</LayoutContainer> </LayoutContainer>
); );
} };
}
const InstanceListGql = graphql(InstancesQuery, { const InstanceListGql = graphql(InstancesQuery, {
options(props) { options(props) {
@ -63,18 +74,20 @@ const InstanceListGql = graphql(InstancesQuery, {
}; };
}, },
props: ({ data: { deploymentGroup, loading, error } }) => ({ props: ({ data: { deploymentGroup, loading, error } }) => ({
instances: deploymentGroup,
deploymentGroup && deploymentGroup.services instances: sortBy(
? deploymentGroup.services.reduce( forceArray(
deploymentGroup &&
forceArray(deploymentGroup.services).reduce(
(instances, service) => instances.concat(service.instances), (instances, service) => instances.concat(service.instances),
[] []
) )
: null, ).filter(Boolean),
['name']
),
loading, loading,
error error
}) })
}); });
const InstanceListWithData = compose(InstanceListGql)(InstanceList); export default compose(InstanceListGql)(InstanceList);
export default InstanceListWithData;

View File

@ -14,6 +14,7 @@ import DeploymentGroupProvisionMutation from '@graphql/DeploymentGroupProvision.
import DeploymentGroupConfigQuery from '@graphql/DeploymentGroupConfig.gql'; import DeploymentGroupConfigQuery from '@graphql/DeploymentGroupConfig.gql';
import { client } from '@state/store'; import { client } from '@state/store';
import { ErrorMessage } from '@components/messaging';
import { import {
Name, Name,
Manifest, Manifest,
@ -354,14 +355,10 @@ class DeploymentGroupEditOrCreate extends Component {
} }
render() { render() {
const { error, defaultStage, manifestStage } = this.state; const { error, loading, defaultStage, manifestStage } = this.state;
if (error) { if (error) {
return ( return <ErrorMessage message={error} />;
<span>
{error}
</span>
);
} }
const { match, create } = this.props; const { match, create } = this.props;

View File

@ -9,8 +9,8 @@ import DeploymentGroupBySlugQuery from '@graphql/DeploymentGroupBySlug.gql';
import ManifestEditOrCreate from '@containers/manifest/edit-or-create'; import ManifestEditOrCreate from '@containers/manifest/edit-or-create';
import { Progress } from '@components/manifest/edit-or-create'; import { Progress } from '@components/manifest/edit-or-create';
import { LayoutContainer } from '@components/layout'; import { LayoutContainer } from '@components/layout';
import { DeploymentGroupsLoading } from '@components/deployment-groups'; import { Title } from '@components/navigation';
import { H2 } from 'joyent-ui-toolkit'; import { Loader, ErrorMessage } from '@components/messaging';
const Manifest = ({ const Manifest = ({
loading, loading,
@ -21,43 +21,42 @@ const Manifest = ({
match match
}) => { }) => {
const stage = match.params.stage; const stage = match.params.stage;
const _loading = !loading ? null : <DeploymentGroupsLoading />; const _title = <Title>Edit Manifest</Title>;
const _error = !error
? null
: <span>
{error.toString()}
</span>;
const _view = if (loading || !deploymentGroup) {
loading || !deploymentGroup return (
? null <LayoutContainer center>
: <ManifestEditOrCreate {_title}
manifest={manifest} <Loader />
environment={environment} </LayoutContainer>
deploymentGroup={deploymentGroup} );
edit }
/>;
if (error) {
return (
<LayoutContainer>
{_title}
<ErrorMessage message="Oops, and error occured while loading your services." />
</LayoutContainer>
);
}
const _notice = const _notice =
!error && deploymentGroup && deploymentGroup.imported && !manifest
!loading && ? <ErrorMessage message="Since this DeploymentGroup was imported, it doesn&#x27;t have the initial manifest" />
deploymentGroup &&
deploymentGroup.imported &&
!manifest
? <span>
Since this DeploymentGroup was imported, it doesn&#x27;t have the
initial manifest
</span>
: null; : null;
return ( return (
<LayoutContainer> <LayoutContainer>
<H2>Edit Manifest</H2> {_title}
<Progress stage={stage} edit /> <Progress stage={stage} edit />
{_error}
{_loading}
{_notice} {_notice}
{_view} <ManifestEditOrCreate
manifest={manifest}
environment={environment}
deploymentGroup={deploymentGroup}
edit
/>
</LayoutContainer> </LayoutContainer>
); );
}; };

View File

@ -1,30 +1,17 @@
import React from 'react'; import React from 'react';
import { graphql } from 'react-apollo'; import { graphql } from 'react-apollo';
import get from 'lodash.get';
import PortalQuery from '@graphql/Portal.gql'; import PortalQuery from '@graphql/Portal.gql';
import { Header as HeaderComponent } from '@components/navigation'; import { Header as HeaderComponent } from '@components/navigation';
const Header = ({ const Header = ({ datacenter, username }) =>
portal = { <HeaderComponent datacenter={datacenter} username={username} />;
datacenter: {
region: ''
},
user: {
firstName: ''
}
},
loading,
error
}) =>
<HeaderComponent
datacenter={portal.datacenter.region}
username={portal.user.firstName}
/>;
const HeaderWithData = graphql(PortalQuery, { const HeaderWithData = graphql(PortalQuery, {
props: ({ data: { portal, loading, error } }) => ({ props: ({ data: { portal = {} } }) => ({
portal, datacenter: get(portal, 'datacenter.region', ''),
loading, username: get(portal, 'user.firstName', '')
error
}) })
})(Header); })(Header);

View File

@ -9,12 +9,21 @@ import ServiceGql from './service-gql';
class ServiceDelete extends Component { class ServiceDelete extends Component {
render() { render() {
if (this.props.loading) { const { loading, error } = this.props;
return <Loader />;
} if (loading) {
if (this.props.error) {
return ( return (
<ErrorMessage message="Oops, an error occured while loading your service." /> <Modal width={460} onCloseClick={handleCloseClick}>
<Loader />
</Modal>
);
}
if (error) {
return (
<Modal width={460} onCloseClick={handleCloseClick}>
<ErrorMessage message="Oops, an error occured while deleting your service." />
</Modal>
); );
} }
@ -56,8 +65,4 @@ const DeleteServicesGql = graphql(ServicesDeleteMutation, {
}) })
}); });
const ServiceDeleteWithData = compose(DeleteServicesGql, ServiceGql)( export default compose(DeleteServicesGql, ServiceGql)(ServiceDelete);
ServiceDelete
);
export default ServiceDeleteWithData;

View File

@ -10,13 +10,21 @@ import ServiceGql from './service-gql';
class ServiceScale extends Component { class ServiceScale extends Component {
render() { render() {
if (this.props.loading) { const { loading, error } = this.props;
return <Loader />;
if (loading) {
return (
<Modal width={460} onCloseClick={handleCloseClick}>
<Loader />
</Modal>
);
} }
if (this.props.error) { if (error) {
return ( return (
<ErrorMessage message="Oops, an error occured while loading your service." /> <Modal width={460} onCloseClick={handleCloseClick}>
<ErrorMessage message="Oops, an error occured while scaling your service." />
</Modal>
); );
} }
@ -85,6 +93,4 @@ const ServiceScaleGql = graphql(ServiceScaleMutation, {
}) })
}); });
const ServiceScaleWithData = compose(ServiceScaleGql, ServiceGql)(ServiceScale); export default compose(ServiceScaleGql, ServiceGql)(ServiceScale);
export default ServiceScaleWithData;

View File

@ -47,7 +47,7 @@ class ServiceList extends Component {
startServices startServices
} = this.props; } = this.props;
if (loading) { if (loading && !forceArray(services).length) {
return ( return (
<LayoutContainer center> <LayoutContainer center>
<Loader /> <Loader />
@ -68,7 +68,7 @@ class ServiceList extends Component {
!forceArray(services).length !forceArray(services).length
) { ) {
return ( return (
<LayoutContainer> <LayoutContainer center>
<Loader msg="Just a moment, were on it" /> <Loader msg="Just a moment, were on it" />
</LayoutContainer> </LayoutContainer>
); );

View File

@ -4,6 +4,7 @@ import { Col, Row } from 'react-styled-flexboxgrid';
import remcalc from 'remcalc'; import remcalc from 'remcalc';
import unitcalc from 'unitcalc'; import unitcalc from 'unitcalc';
import { LayoutContainer } from '@components/layout'; import { LayoutContainer } from '@components/layout';
import { Title } from '@components/navigation';
import { H2, FormGroup, Toggle, ToggleList, Legend } from 'joyent-ui-toolkit'; import { H2, FormGroup, Toggle, ToggleList, Legend } from 'joyent-ui-toolkit';
@ -31,7 +32,7 @@ const ServicesMenu = ({ location, history: { push } }) => {
return ( return (
<LayoutContainer plain> <LayoutContainer plain>
<H2>Services</H2> <Title>Services</Title>
<PaddedRow> <PaddedRow>
<Col xs={5}> <Col xs={5}>
<FormGroup name="service-view" value={toggleValue}> <FormGroup name="service-view" value={toggleValue}>

View File

@ -29,6 +29,7 @@ const StyledContainer = styled.div`
const ServicesTopology = ({ const ServicesTopology = ({
url, url,
push, push,
deploymentGroup,
services, services,
datacenter, datacenter,
loading, loading,
@ -41,11 +42,13 @@ const ServicesTopology = ({
}) => { }) => {
if (loading) { if (loading) {
return ( return (
<LayoutContainer> <LayoutContainer center>
<Loader /> <Loader />
</LayoutContainer> </LayoutContainer>
); );
} else if (error) { }
if (error) {
return ( return (
<LayoutContainer> <LayoutContainer>
<ErrorMessage message="Oops, and error occured while loading your services." /> <ErrorMessage message="Oops, and error occured while loading your services." />
@ -53,6 +56,17 @@ const ServicesTopology = ({
); );
} }
if (
deploymentGroup.status === 'PROVISIONING' &&
!forceArray(services).length
) {
return (
<LayoutContainer center>
<Loader msg="Just a moment, were on it" />
</LayoutContainer>
);
}
const handleQuickActionsClick = (evt, tooltipData) => { const handleQuickActionsClick = (evt, tooltipData) => {
toggleServicesQuickActions(tooltipData); toggleServicesQuickActions(tooltipData);
}; };
@ -132,7 +146,8 @@ const ServicesGql = graphql(ServicesQuery, {
} }
}; };
}, },
props: ({ data: { deploymentGroup, loading, error } }) => ({ props: ({ data: { deploymentGroup = {}, loading, error } }) => ({
deploymentGroup,
services: deploymentGroup services: deploymentGroup
? processServicesForTopology(deploymentGroup.services) ? processServicesForTopology(deploymentGroup.services)
: null, : null,

View File

@ -23,8 +23,8 @@ const StyledModal = styled.div`
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 33.33%; top: 33.33%;
padding: ${remcalc(30)} ${remcalc(36)} ${remcalc(36)} ${remcalc(36)}; padding: ${remcalc(36)} ${remcalc(36)} ${remcalc(36)} ${remcalc(36)};
background-color: ${theme.white}; background-color: ${props => props.theme.white};
box-shadow: ${modalShadow}; box-shadow: ${modalShadow};
width: ${props => remcalc(props.width)}; width: ${props => remcalc(props.width)};