joyent-portal/packages/my-joy-beta/src/containers/instances/create-snapshot.js

95 lines
2.4 KiB
JavaScript

import React from 'react';
import { reduxForm, SubmissionError } from 'redux-form';
import { connect } from 'react-redux';
import { compose, graphql } from 'react-apollo';
import find from 'lodash.find';
import get from 'lodash.get';
import {
Title,
ViewContainer,
StatusLoader,
Message,
MessageTitle,
MessageDescription
} from 'joyent-ui-toolkit';
import { CreateSnapshot as InstanceCreateSnapshot } from '@components/instances';
import CreateSnapshotMutation from '@graphql/create-snapshot.gql';
import GetInstance from '@graphql/get-instance.gql';
const CreateSnapshot = ({
match,
instance,
loading,
error,
handleSubmit,
handleCancel
}) => {
const _title = <Title>Create Snapshot</Title>;
const _loading = !(loading && !instance) ? null : <StatusLoader />;
const CreateSnapshotForm = reduxForm({
form: `create-snapshot-${match.params.instance}`
})(InstanceCreateSnapshot);
const _error = error &&
!instance &&
!_loading && (
<Message error>
<MessageTitle>Ooops!</MessageTitle>
<MessageDescription>
An error occurred while loading your instance
</MessageDescription>
</Message>
);
const _form = !loading &&
!_error && (
<CreateSnapshotForm onSubmit={handleSubmit} onCancel={handleCancel} />
);
return (
<ViewContainer center={Boolean(_loading)} main>
{_title}
{_loading}
{_error}
{_form}
</ViewContainer>
);
};
export default compose(
graphql(CreateSnapshotMutation, { name: 'createSnapshot' }),
graphql(GetInstance, {
options: ({ match }) => ({
variables: {
name: get(match, 'params.instance')
}
}),
props: ({ data: { loading, error, variables, ...rest } }) => ({
instance: find(get(rest, 'machines', []), ['name', variables.name]),
loading,
error
})
}),
connect(
null,
(dispatch, { history, location, instance, createSnapshot }) => ({
handleCancel: () => history.push(location.pathname.split(/\/~/).shift()),
handleSubmit: ({ name }) =>
createSnapshot({
variables: { name, id: instance.id }
})
.catch(error => {
throw new SubmissionError({
_error: error.graphQLErrors
.map(({ message }) => message)
.join('\n')
});
})
.then(() => history.push(`/instances/${instance.name}/snapshots`))
})
)
)(CreateSnapshot);