joyent-portal/packages/my-joy-instances/src/containers/create-instance/image.js

245 lines
6.3 KiB
JavaScript
Raw Normal View History

import React, { Fragment } from 'react';
import { compose, graphql } from 'react-apollo';
import ReduxForm from 'declarative-redux-form';
import { change } from 'redux-form';
import { connect } from 'react-redux';
import { set } from 'react-redux-values';
import { Margin } from 'styled-components-spacing';
import includes from 'lodash.includes';
import sortBy from 'lodash.sortby';
import findIndex from 'lodash.findindex';
import find from 'lodash.find';
import reverse from 'lodash.reverse';
import get from 'lodash.get';
import { InstanceTypeIcon, StatusLoader, Button } from 'joyent-ui-toolkit';
import Image, { Preview, ImageType } from '@components/create-instance/image';
import Title from '@components/create-instance/title';
import Description from '@components/description';
import imageData from '@data/images-map.json';
import GetImages from '@graphql/get-images.gql';
2018-03-01 16:32:55 +02:00
import { Forms, Values } from '@root/constants';
const { IC_IMG_F } = Forms;
const { IC_IMG_V_PROCEEDED, IC_IMG_V_VMS } = Values;
const HarcodedImage = (image = {}) => (
<Fragment>
2018-03-06 03:14:33 +02:00
<Title icon={<InstanceTypeIcon />} collapsed={true}>
Instance type and image
</Title>
{image.id ? (
<ReduxForm
2018-03-01 16:32:55 +02:00
form={IC_IMG_F}
destroyOnUnmount={false}
forceUnregisterOnUnmount={true}
initialValues={{ image: image.id }}
>
{props => (
<Margin bottom={7}>
<Preview {...image} />
</Margin>
)}
</ReduxForm>
) : null}
</Fragment>
);
const ImageContainer = ({
expanded,
proceeded,
hardcoded,
image = {},
handleNext,
handleEdit,
handleSelectLatest,
setImageType,
loading,
images,
vms,
step
}) =>
hardcoded ? (
<Fragment>
<HarcodedImage {...image} />
</Fragment>
) : (
<Fragment>
<Title
id={step}
onClick={!expanded && !proceeded && handleEdit}
collapsed={!expanded && !proceeded}
icon={<InstanceTypeIcon />}
>
Instance type and image
</Title>
{expanded ? (
<Description>
Hardware virtual machines are generally used for non-containerized
applications. Infrastructure containers are generally for running any
Linux image on secure, bare metal containers.{' '}
<a
href="https://docs.joyent.com/private-cloud/images"
rel="noopener noreferrer"
target="_blank"
>
Read the docs
</a>
</Description>
) : null}
<ReduxForm
2018-03-01 16:32:55 +02:00
form={IC_IMG_F}
destroyOnUnmount={false}
forceUnregisterOnUnmount={true}
initialValues={{ vms: true }}
>
{props =>
loading && expanded ? (
<StatusLoader />
) : expanded ? (
<Fragment>
<ImageType setImageType={setImageType} vms={vms} />
<Image
{...props}
images={images.filter(i => i.isVm === vms)}
onSelectLatest={handleSelectLatest}
/>
</Fragment>
) : image.id ? (
<Preview {...image} />
) : null
}
</ReduxForm>
{expanded ? (
<Margin top={1} bottom={7}>
<Button
type="button"
onClick={handleNext}
disabled={!image.id || vms !== image.isVm}
>
Next
</Button>
</Margin>
) : proceeded ? (
<Margin top={4} bottom={7}>
<Button type="button" onClick={handleEdit} secondary>
Edit
</Button>
</Margin>
) : null}
</Fragment>
);
export default compose(
connect(
({ form, values }, ownProps) => {
2018-03-01 16:32:55 +02:00
const proceeded = get(values, IC_IMG_V_PROCEEDED, false);
const image = get(form, `${IC_IMG_F}.values.image`, null);
const vms = get(values, IC_IMG_V_VMS, true);
return {
...ownProps,
proceeded: proceeded || image,
vms,
image
};
},
(dispatch, { history }) => ({
handleNext: () => {
2018-03-01 16:32:55 +02:00
dispatch(set({ name: IC_IMG_V_PROCEEDED, value: true }));
2018-03-06 03:14:33 +02:00
return history.push(
`/instances/~create/package${history.location.search}`
);
},
handleEdit: () => {
2018-03-06 03:14:33 +02:00
return history.push(
`/instances/~create/image${history.location.search}`
);
},
handleSelectLatest: ({ versions }) => {
2018-03-01 16:32:55 +02:00
return dispatch(change(IC_IMG_F, 'image', versions[0].id));
},
2018-02-27 17:23:29 +02:00
setImageType: isVm => {
2018-03-01 16:32:55 +02:00
return dispatch(set({ name: IC_IMG_V_VMS, value: isVm }));
}
})
),
graphql(GetImages, {
options: () => ({
ssr: false
}),
props: ({ ownProps, data }) => {
const { image = '', query } = ownProps;
const { loading = false, images = [] } = data;
if (query.image) {
return {
loading,
image: find(images, ['name', query.image], {}),
hardcoded: true
};
}
const values = images
.reduce((acc, img) => {
const isVm = !includes(img.type, 'DATASET');
const imageName =
imageData[
img.name
.split('-')[0]
.split(' ')[0]
.toLowerCase()
];
const exists = Boolean(find(acc, { imageName, isVm }));
const version = {
name: img.name,
version: img.version,
id: img.id
};
if (!exists) {
return acc.concat([
{
isVm,
imageName,
versions: [version]
}
]);
}
const index = findIndex(acc, {
imageName,
isVm
});
acc[index] = {
...acc[index],
versions: acc[index].versions.concat([version])
};
return acc;
}, [])
.map(({ versions, ...img }) => ({
...img,
active: Boolean(find(versions, ['id', image])),
versions: reverse(sortBy(versions, ['name']))
}));
const selected = find(images, ['id', image]) || {};
return {
loading,
images: values,
image: {
...selected,
isVm: !includes(selected.type || '', 'DATASET')
}
};
}
})
)(ImageContainer);