2018-01-11 15:27:16 +02:00
|
|
|
import React, { Fragment } from 'react';
|
|
|
|
import { compose, graphql } from 'react-apollo';
|
|
|
|
import ReduxForm from 'declarative-redux-form';
|
2018-02-23 21:46:19 +02:00
|
|
|
import { destroy, change } from 'redux-form';
|
2018-01-11 15:27:16 +02:00
|
|
|
import { connect } from 'react-redux';
|
|
|
|
import titleCase from 'title-case';
|
|
|
|
import get from 'lodash.get';
|
|
|
|
import { set } from 'react-redux-values';
|
2018-01-30 18:04:03 +02:00
|
|
|
import { Margin } from 'styled-components-spacing';
|
2018-01-11 15:27:16 +02:00
|
|
|
import sortBy from 'lodash.sortby';
|
|
|
|
import find from 'lodash.find';
|
2018-01-24 13:21:27 +02:00
|
|
|
import includes from 'lodash.includes';
|
2018-01-30 01:20:22 +02:00
|
|
|
import reverse from 'lodash.reverse';
|
2018-01-11 15:27:16 +02:00
|
|
|
import constantCase from 'constant-case';
|
2018-01-30 18:04:03 +02:00
|
|
|
|
|
|
|
import { PackageIcon, StatusLoader, Button } from 'joyent-ui-toolkit';
|
2018-01-11 15:27:16 +02:00
|
|
|
|
|
|
|
import {
|
|
|
|
Filters,
|
|
|
|
Packages,
|
|
|
|
Package,
|
2018-01-16 19:45:19 +02:00
|
|
|
Overview
|
2018-01-11 15:27:16 +02:00
|
|
|
} from '@components/create-instance/package';
|
|
|
|
|
2018-01-23 14:20:36 +02:00
|
|
|
import Title from '@components/create-instance/title';
|
|
|
|
import Description from '@components/description';
|
|
|
|
import getPackages from '@graphql/get-packages.gql';
|
|
|
|
import priceData from '@data/prices.json';
|
2018-01-11 15:27:16 +02:00
|
|
|
|
|
|
|
const FORM_NAME = 'create-instance-package';
|
2018-01-16 17:34:54 +02:00
|
|
|
const FILTERS = 'create-instance-package-filters';
|
2018-01-11 15:27:16 +02:00
|
|
|
|
|
|
|
const PackageContainer = ({
|
|
|
|
expanded,
|
2018-01-30 18:04:03 +02:00
|
|
|
proceeded,
|
2018-01-11 15:27:16 +02:00
|
|
|
hasVms,
|
2018-01-18 16:46:49 +02:00
|
|
|
handleNext,
|
|
|
|
handleEdit,
|
2018-01-11 15:27:16 +02:00
|
|
|
loading,
|
|
|
|
packages,
|
|
|
|
selected = {},
|
|
|
|
sortOrder,
|
2018-02-23 21:46:19 +02:00
|
|
|
handleRowClick,
|
2018-01-30 18:04:03 +02:00
|
|
|
handleResetFilters,
|
2018-01-11 15:27:16 +02:00
|
|
|
handleSortBy,
|
2018-01-16 17:34:54 +02:00
|
|
|
sortBy,
|
2018-02-23 21:46:19 +02:00
|
|
|
step
|
2018-01-11 15:27:16 +02:00
|
|
|
}) => (
|
|
|
|
<Fragment>
|
2018-01-18 16:46:49 +02:00
|
|
|
<Title
|
2018-01-30 18:27:01 +02:00
|
|
|
id={step}
|
2018-02-16 19:23:37 +02:00
|
|
|
onClick={!expanded && !proceeded && handleEdit}
|
2018-01-30 18:04:03 +02:00
|
|
|
collapsed={!expanded && !proceeded}
|
2018-01-18 16:46:49 +02:00
|
|
|
icon={<PackageIcon />}
|
|
|
|
>
|
|
|
|
Package
|
|
|
|
</Title>
|
2018-01-30 18:04:03 +02:00
|
|
|
{expanded ? (
|
|
|
|
<Description>
|
|
|
|
A package defines the specs of your instance. On Triton, packages can
|
|
|
|
only increase in size.{' '}
|
|
|
|
<a
|
|
|
|
href="https://docs.joyent.com/private-cloud/packages"
|
|
|
|
target="_blank"
|
|
|
|
rel="noopener noreferrer"
|
2018-01-16 19:45:19 +02:00
|
|
|
>
|
2018-01-30 18:04:03 +02:00
|
|
|
Read the docs
|
|
|
|
</a>
|
|
|
|
</Description>
|
|
|
|
) : null}
|
|
|
|
<ReduxForm
|
|
|
|
form={`${FORM_NAME}-filters`}
|
|
|
|
destroyOnUnmount={false}
|
|
|
|
forceUnregisterOnUnmount={true}
|
|
|
|
>
|
|
|
|
{props =>
|
|
|
|
!loading && expanded ? (
|
|
|
|
<Filters {...props} onResetFilters={handleResetFilters} />
|
|
|
|
) : null
|
|
|
|
}
|
|
|
|
</ReduxForm>
|
|
|
|
<ReduxForm
|
|
|
|
form={FORM_NAME}
|
|
|
|
destroyOnUnmount={false}
|
|
|
|
forceUnregisterOnUnmount={true}
|
|
|
|
onSubmit={handleNext}
|
|
|
|
>
|
|
|
|
{props =>
|
|
|
|
expanded ? (
|
|
|
|
loading ? (
|
|
|
|
<StatusLoader />
|
|
|
|
) : (
|
|
|
|
<Packages
|
|
|
|
{...props}
|
|
|
|
hasVms={hasVms}
|
|
|
|
sortBy={sortBy}
|
|
|
|
sortOrder={sortOrder}
|
|
|
|
onSortBy={handleSortBy}
|
|
|
|
packages={packages.length}
|
|
|
|
>
|
|
|
|
{packages.map(({ id, ...pkg }) => (
|
|
|
|
<Package
|
|
|
|
key={id}
|
|
|
|
id={id}
|
|
|
|
selected={selected.id === id}
|
|
|
|
hasVms={hasVms}
|
2018-02-23 21:46:19 +02:00
|
|
|
onRowClick={handleRowClick}
|
2018-02-01 17:33:58 +02:00
|
|
|
sortBy={sortBy}
|
2018-01-30 18:04:03 +02:00
|
|
|
{...pkg}
|
|
|
|
/>
|
|
|
|
))}
|
|
|
|
</Packages>
|
|
|
|
)
|
|
|
|
) : selected.id ? (
|
|
|
|
<Overview {...selected} hasVms={hasVms} onCancel={handleEdit} />
|
|
|
|
) : null
|
|
|
|
}
|
|
|
|
</ReduxForm>
|
|
|
|
{expanded ? (
|
|
|
|
!loading ? (
|
|
|
|
<Margin top={4} bottom={7}>
|
|
|
|
<Button type="button" onClick={handleNext} disabled={!selected.id}>
|
|
|
|
Next
|
|
|
|
</Button>
|
|
|
|
</Margin>
|
|
|
|
) : null
|
|
|
|
) : proceeded ? (
|
|
|
|
<Margin top={4} bottom={7}>
|
|
|
|
<Button type="button" onClick={handleEdit} secondary>
|
|
|
|
Edit
|
|
|
|
</Button>
|
|
|
|
</Margin>
|
|
|
|
) : null}
|
2018-01-11 15:27:16 +02:00
|
|
|
</Fragment>
|
|
|
|
);
|
|
|
|
|
|
|
|
export default compose(
|
|
|
|
graphql(getPackages, {
|
2018-02-20 02:35:31 +02:00
|
|
|
options: () => ({
|
|
|
|
ssr: false
|
|
|
|
}),
|
2018-01-11 15:27:16 +02:00
|
|
|
props: ({ data: { loading, packages = [] } }) => ({
|
|
|
|
loading,
|
|
|
|
packages: packages.map(pkg => {
|
|
|
|
const packagePrice = priceData.filter(p => p.name === pkg.name)[0];
|
|
|
|
const packageName = pkg.name.replace(/-kvm/g, '').trim();
|
|
|
|
|
|
|
|
return {
|
|
|
|
...pkg,
|
2018-01-24 13:21:27 +02:00
|
|
|
ssd: includes(pkg.name, 'fastdisk'),
|
|
|
|
vm: includes(pkg.name, 'kvm'),
|
2018-01-11 15:27:16 +02:00
|
|
|
memory: pkg.memory * 1000000,
|
|
|
|
disk: pkg.disk * 1000000,
|
|
|
|
price: packagePrice.cost || 0,
|
|
|
|
name: titleCase(packageName.replace(/-/g, ' ')),
|
|
|
|
group: constantCase(
|
|
|
|
pkg.group.replace(/optimized|purpose|KVM/gi, '').trim()
|
|
|
|
)
|
|
|
|
};
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}),
|
|
|
|
connect(
|
|
|
|
({ form, values }, { packages, ...ownProps }) => {
|
2018-01-30 18:04:03 +02:00
|
|
|
const proceeded = get(values, 'create-instance-package-proceeded', false);
|
2018-01-11 15:27:16 +02:00
|
|
|
const _sortBy = get(values, 'packages-list-sort-by', 'price');
|
|
|
|
const _sortOrder = get(values, 'packages-list-sort-order', 'asc');
|
2018-01-16 17:34:54 +02:00
|
|
|
const ssdOnly = get(form, `${FILTERS}.values.ssd`, false);
|
2018-01-30 18:04:03 +02:00
|
|
|
|
2018-01-11 15:27:16 +02:00
|
|
|
const computeOptimized = get(
|
|
|
|
form,
|
2018-01-16 17:34:54 +02:00
|
|
|
`${FILTERS}.values.compute-optimized`,
|
2018-01-11 15:27:16 +02:00
|
|
|
false
|
|
|
|
);
|
2018-01-30 18:04:03 +02:00
|
|
|
|
2018-01-11 15:27:16 +02:00
|
|
|
const generalPurpose = get(
|
|
|
|
form,
|
2018-01-16 17:34:54 +02:00
|
|
|
`${FILTERS}.values.general-purpose`,
|
2018-01-11 15:27:16 +02:00
|
|
|
false
|
|
|
|
);
|
2018-01-30 18:04:03 +02:00
|
|
|
|
2018-01-11 15:27:16 +02:00
|
|
|
const storageOptimized = get(
|
|
|
|
form,
|
2018-01-16 17:34:54 +02:00
|
|
|
`${FILTERS}.values.storage-optimized`,
|
2018-01-11 15:27:16 +02:00
|
|
|
false
|
|
|
|
);
|
2018-01-30 18:04:03 +02:00
|
|
|
|
2018-01-11 15:27:16 +02:00
|
|
|
const memoryOptimized = get(
|
|
|
|
form,
|
2018-01-16 17:34:54 +02:00
|
|
|
`${FILTERS}.values.memory-optimized`,
|
2018-01-11 15:27:16 +02:00
|
|
|
false
|
|
|
|
);
|
2018-01-30 18:04:03 +02:00
|
|
|
|
2018-02-21 17:00:40 +02:00
|
|
|
const vmSelected = get(form, 'create-instance-vms.values.vms', false);
|
2018-02-23 21:46:19 +02:00
|
|
|
const pkgSelected = get(form, `${FORM_NAME}.values.package`, null);
|
2018-02-21 18:22:30 +02:00
|
|
|
const selected = find(packages, ['id', pkgSelected]);
|
2018-01-11 15:27:16 +02:00
|
|
|
|
|
|
|
const sorted = sortBy(packages, [_sortBy]);
|
|
|
|
|
|
|
|
let filtered = sorted
|
|
|
|
.filter(p => (ssdOnly ? p.ssd === ssdOnly : true))
|
|
|
|
.filter(p => p.vm === vmSelected);
|
|
|
|
|
|
|
|
if (
|
|
|
|
computeOptimized ||
|
|
|
|
generalPurpose ||
|
|
|
|
storageOptimized ||
|
|
|
|
memoryOptimized
|
|
|
|
) {
|
|
|
|
filtered = filtered.filter(
|
|
|
|
p =>
|
|
|
|
(memoryOptimized && p.group === 'MEMORY') ||
|
|
|
|
(storageOptimized && p.group === 'STORAGE') ||
|
|
|
|
(generalPurpose && p.group === 'GENERAL') ||
|
|
|
|
(computeOptimized && p.group === 'COMPUTE')
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
return {
|
|
|
|
...ownProps,
|
|
|
|
sortBy: _sortBy,
|
|
|
|
sortOrder: _sortOrder,
|
2018-01-30 01:20:22 +02:00
|
|
|
packages: _sortOrder === 'asc' ? filtered : reverse(filtered),
|
2018-01-11 15:27:16 +02:00
|
|
|
hasVms: vmSelected,
|
2018-02-23 17:59:12 +02:00
|
|
|
selected,
|
2018-02-21 18:22:30 +02:00
|
|
|
proceeded: proceeded || selected
|
2018-01-11 15:27:16 +02:00
|
|
|
};
|
|
|
|
},
|
|
|
|
(dispatch, { history }) => ({
|
2018-01-18 16:46:49 +02:00
|
|
|
handleNext: () => {
|
|
|
|
dispatch(
|
|
|
|
set({ name: 'create-instance-package-proceeded', value: true })
|
|
|
|
);
|
|
|
|
|
2018-02-15 16:37:59 +02:00
|
|
|
return history.push(`/~create/tags${history.location.search}`);
|
2018-01-18 16:46:49 +02:00
|
|
|
},
|
2018-02-15 16:37:59 +02:00
|
|
|
handleEdit: () =>
|
|
|
|
history.push(`/~create/package${history.location.search}`),
|
2018-01-30 18:04:03 +02:00
|
|
|
handleResetFilters: () => {
|
|
|
|
dispatch(destroy(`${FORM_NAME}-filters`));
|
2018-01-16 17:34:54 +02:00
|
|
|
},
|
2018-02-23 21:46:19 +02:00
|
|
|
handleRowClick: ({ id, selected }) => {
|
|
|
|
dispatch(change(FORM_NAME, id, !selected));
|
|
|
|
},
|
2018-01-11 15:27:16 +02:00
|
|
|
handleSortBy: (newSortBy, sortOrder) => {
|
|
|
|
dispatch([
|
|
|
|
set({
|
|
|
|
name: `packages-list-sort-order`,
|
|
|
|
value: sortOrder === 'desc' ? 'asc' : 'desc'
|
|
|
|
}),
|
|
|
|
set({
|
|
|
|
name: `packages-list-sort-by`,
|
|
|
|
value: newSortBy
|
|
|
|
})
|
|
|
|
]);
|
|
|
|
}
|
|
|
|
})
|
|
|
|
)
|
2018-02-20 02:35:31 +02:00
|
|
|
)(PackageContainer);
|