2017-08-14 13:21:45 +03:00
|
|
|
import React, { Component } from 'react';
|
|
|
|
import { connect } from 'react-redux';
|
|
|
|
import { compose, graphql } from 'react-apollo';
|
|
|
|
import styled from 'styled-components';
|
|
|
|
import ServicesRestartMutation from '@graphql/ServicesRestartMutation.gql';
|
|
|
|
import ServicesStopMutation from '@graphql/ServicesStopMutation.gql';
|
|
|
|
import ServicesStartMutation from '@graphql/ServicesStartMutation.gql';
|
|
|
|
import { toggleServicesQuickActions } from '@root/state/actions';
|
|
|
|
import { ServicesQuickActions as QuickActions } from '@components/services';
|
|
|
|
import { ErrorMessage } from '@components/messaging';
|
|
|
|
import { LayoutContainer } from '@components/layout';
|
|
|
|
|
|
|
|
const StyledContainer = styled.div`
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
`;
|
|
|
|
|
2017-08-21 15:39:02 +03:00
|
|
|
export class ServicesQuickActions extends Component {
|
2017-08-14 13:21:45 +03:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
|
|
|
|
this.state = {
|
|
|
|
errors: {}
|
2017-08-28 22:21:08 +03:00
|
|
|
};
|
2017-08-14 13:21:45 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
const {
|
|
|
|
servicesQuickActions,
|
|
|
|
toggleServicesQuickActions,
|
|
|
|
restartServices,
|
|
|
|
stopServices,
|
|
|
|
startServices,
|
|
|
|
url,
|
|
|
|
push
|
|
|
|
} = this.props;
|
|
|
|
|
|
|
|
let errorMessage = null;
|
|
|
|
let quickActions = null;
|
|
|
|
|
|
|
|
if (
|
|
|
|
this.state.errors.stop ||
|
|
|
|
this.state.errors.start ||
|
|
|
|
this.state.errors.restart
|
|
|
|
) {
|
|
|
|
const message = this.state.errors.stop
|
|
|
|
? 'An error occurred while attempting to stop your service.'
|
|
|
|
: this.state.errors.start
|
|
|
|
? 'An error occurred while attempting to start your service.'
|
|
|
|
: this.state.errors.restart
|
|
|
|
? 'An error occurred while attempting to restart your service.'
|
|
|
|
: '';
|
|
|
|
|
2017-08-28 22:21:08 +03:00
|
|
|
errorMessage = (
|
2017-08-14 13:21:45 +03:00
|
|
|
<LayoutContainer>
|
|
|
|
<ErrorMessage title="Ooops!" message={message} />
|
|
|
|
</LayoutContainer>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2017-08-28 22:21:08 +03:00
|
|
|
if (servicesQuickActions.show) {
|
2017-08-14 13:21:45 +03:00
|
|
|
const handleTooltipBlur = evt => {
|
|
|
|
toggleServicesQuickActions({ show: false });
|
|
|
|
};
|
|
|
|
|
|
|
|
const handleRestartClick = (evt, service) => {
|
2017-08-28 22:21:08 +03:00
|
|
|
this.setState({ errors: {} });
|
2017-08-14 13:21:45 +03:00
|
|
|
toggleServicesQuickActions({ show: false });
|
|
|
|
restartServices(service.id).catch(err => {
|
|
|
|
this.setState({ errors: { restart: err } });
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
const handleStopClick = (evt, service) => {
|
2017-08-28 22:21:08 +03:00
|
|
|
this.setState({ errors: {} });
|
2017-08-14 13:21:45 +03:00
|
|
|
toggleServicesQuickActions({ show: false });
|
|
|
|
stopServices(service.id).catch(err => {
|
|
|
|
this.setState({ errors: { stop: err } });
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
const handleStartClick = (evt, service) => {
|
2017-08-28 22:21:08 +03:00
|
|
|
this.setState({ errors: {} });
|
2017-08-14 13:21:45 +03:00
|
|
|
toggleServicesQuickActions({ show: false });
|
|
|
|
startServices(service.id).catch(err => {
|
|
|
|
this.setState({ errors: { start: err } });
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
const handleScaleClick = (evt, service) => {
|
2017-08-28 22:21:08 +03:00
|
|
|
this.setState({ errors: {} });
|
2017-08-14 13:21:45 +03:00
|
|
|
toggleServicesQuickActions({ show: false });
|
|
|
|
push(`${url}/${service.slug}/scale`);
|
|
|
|
};
|
|
|
|
|
|
|
|
const handleDeleteClick = (evt, service) => {
|
2017-08-28 22:21:08 +03:00
|
|
|
this.setState({ errors: {} });
|
2017-08-14 13:21:45 +03:00
|
|
|
toggleServicesQuickActions({ show: false });
|
|
|
|
push(`${url}/${service.slug}/delete`);
|
|
|
|
};
|
|
|
|
|
|
|
|
quickActions = (
|
|
|
|
<StyledContainer>
|
|
|
|
<QuickActions
|
|
|
|
service={servicesQuickActions.service}
|
|
|
|
show={servicesQuickActions.show}
|
|
|
|
position={servicesQuickActions.position}
|
|
|
|
onBlur={handleTooltipBlur}
|
|
|
|
onRestartClick={handleRestartClick}
|
|
|
|
onStopClick={handleStopClick}
|
|
|
|
onStartClick={handleStartClick}
|
|
|
|
onScaleClick={handleScaleClick}
|
|
|
|
onDeleteClick={handleDeleteClick}
|
|
|
|
/>
|
|
|
|
</StyledContainer>
|
2017-08-28 22:21:08 +03:00
|
|
|
);
|
2017-08-14 13:21:45 +03:00
|
|
|
}
|
|
|
|
|
2017-08-28 22:21:08 +03:00
|
|
|
if (quickActions || errorMessage) {
|
2017-08-14 13:21:45 +03:00
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
{errorMessage}
|
|
|
|
{quickActions}
|
|
|
|
</div>
|
2017-08-28 22:21:08 +03:00
|
|
|
);
|
2017-08-14 13:21:45 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const mapStateToProps = (state, ownProps) => ({
|
|
|
|
servicesQuickActions: state.ui.services.quickActions,
|
|
|
|
url: ownProps.match.url.replace(/\/$/, ''),
|
|
|
|
push: ownProps.history.push
|
|
|
|
});
|
|
|
|
|
|
|
|
const mapDispatchToProps = dispatch => ({
|
|
|
|
toggleServicesQuickActions: data => dispatch(toggleServicesQuickActions(data))
|
|
|
|
});
|
|
|
|
|
|
|
|
const UiConnect = connect(mapStateToProps, mapDispatchToProps);
|
|
|
|
|
|
|
|
const ServicesRestartGql = graphql(ServicesRestartMutation, {
|
|
|
|
props: ({ mutate }) => ({
|
|
|
|
restartServices: serviceId => mutate({ variables: { ids: [serviceId] } })
|
|
|
|
})
|
|
|
|
});
|
|
|
|
|
|
|
|
const ServicesStopGql = graphql(ServicesStopMutation, {
|
|
|
|
props: ({ mutate }) => ({
|
|
|
|
stopServices: serviceId => mutate({ variables: { ids: [serviceId] } })
|
|
|
|
})
|
|
|
|
});
|
|
|
|
|
|
|
|
const ServicesStartGql = graphql(ServicesStartMutation, {
|
|
|
|
props: ({ mutate }) => ({
|
|
|
|
startServices: serviceId => mutate({ variables: { ids: [serviceId] } })
|
|
|
|
})
|
|
|
|
});
|
|
|
|
|
|
|
|
const ConnectedServicesQuickActions = compose(
|
|
|
|
ServicesRestartGql,
|
|
|
|
ServicesStopGql,
|
|
|
|
ServicesStartGql,
|
|
|
|
UiConnect
|
|
|
|
)(ServicesQuickActions);
|
|
|
|
|
|
|
|
export default ConnectedServicesQuickActions;
|