2018-02-05 17:12:47 +02:00
|
|
|
import React, { Fragment } from 'react';
|
|
|
|
import { compose, graphql } from 'react-apollo';
|
|
|
|
import ReduxForm from 'declarative-redux-form';
|
|
|
|
import { Margin } from 'styled-components-spacing';
|
|
|
|
import remcalc from 'remcalc';
|
2018-02-06 12:32:47 +02:00
|
|
|
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
|
|
|
|
import { connect } from 'react-redux';
|
|
|
|
import get from 'lodash.get';
|
|
|
|
import find from 'lodash.find';
|
|
|
|
import Index from '@state/gen-index';
|
2018-02-14 21:36:31 +02:00
|
|
|
import intercept from 'apr-intercept';
|
|
|
|
import { set } from 'react-redux-values';
|
2018-02-05 17:12:47 +02:00
|
|
|
|
|
|
|
import {
|
|
|
|
ViewContainer,
|
|
|
|
Divider,
|
|
|
|
StatusLoader,
|
|
|
|
Message,
|
|
|
|
MessageTitle,
|
|
|
|
MessageDescription
|
|
|
|
} from 'joyent-ui-toolkit';
|
|
|
|
|
|
|
|
import ToolbarForm from '@components/toolbar';
|
2018-02-06 12:32:47 +02:00
|
|
|
import Empty from '@components/empty';
|
2018-02-14 22:30:25 +02:00
|
|
|
import { ImageType, Forms } from '@root/constants';
|
2018-02-05 17:12:47 +02:00
|
|
|
import ListImages from '@graphql/list-images.gql';
|
2018-02-06 12:32:47 +02:00
|
|
|
import { Image, Filters } from '@components/image';
|
2018-02-14 21:36:31 +02:00
|
|
|
import RemoveImage from '@graphql/remove-image.gql';
|
|
|
|
import parseError from '@state/parse-error';
|
2018-02-06 12:32:47 +02:00
|
|
|
|
2018-02-14 22:30:25 +02:00
|
|
|
const { LIST_TOOLBAR_FORM, LIST_TOGGLE_TYPE_FORM } = Forms;
|
2018-02-05 17:12:47 +02:00
|
|
|
|
2018-02-06 12:32:47 +02:00
|
|
|
export const List = ({
|
|
|
|
images = [],
|
|
|
|
allImages = [],
|
|
|
|
loading = false,
|
|
|
|
error = null,
|
2018-02-13 22:33:03 +02:00
|
|
|
history,
|
2018-02-14 21:36:31 +02:00
|
|
|
typeValue,
|
2018-02-15 16:37:59 +02:00
|
|
|
handleCreateInstance,
|
2018-02-14 21:36:31 +02:00
|
|
|
handleRemove
|
2018-02-06 12:32:47 +02:00
|
|
|
}) => (
|
2018-02-05 17:12:47 +02:00
|
|
|
<ViewContainer main>
|
|
|
|
<Divider height={remcalc(30)} transparent />
|
2018-02-14 22:30:25 +02:00
|
|
|
<ReduxForm form={LIST_TOOLBAR_FORM}>
|
2018-02-06 12:32:47 +02:00
|
|
|
{props => <ToolbarForm {...props} actionable={!loading} />}
|
2018-02-05 17:12:47 +02:00
|
|
|
</ReduxForm>
|
2018-02-06 12:32:47 +02:00
|
|
|
<Divider height={remcalc(1)} />
|
|
|
|
<Divider height={remcalc(24)} transparent />
|
2018-02-05 17:12:47 +02:00
|
|
|
{loading && !images.length ? (
|
|
|
|
<Fragment>
|
|
|
|
<Divider height={remcalc(30)} transparent />
|
|
|
|
<StatusLoader />
|
|
|
|
</Fragment>
|
|
|
|
) : null}
|
|
|
|
{error && !images.length && !loading ? (
|
|
|
|
<Margin bottom={4}>
|
|
|
|
<Message error>
|
|
|
|
<MessageTitle>Ooops!</MessageTitle>
|
|
|
|
<MessageDescription>
|
2018-02-13 22:03:57 +02:00
|
|
|
An error occurred while loading your images
|
2018-02-05 17:12:47 +02:00
|
|
|
</MessageDescription>
|
|
|
|
</Message>
|
|
|
|
</Margin>
|
|
|
|
) : null}
|
2018-02-06 12:32:47 +02:00
|
|
|
<Fragment>
|
|
|
|
<Margin bottom={4}>
|
|
|
|
<ReduxForm
|
2018-02-14 22:30:25 +02:00
|
|
|
form={LIST_TOGGLE_TYPE_FORM}
|
2018-02-06 12:32:47 +02:00
|
|
|
initialValues={{ 'image-type': 'all' }}
|
|
|
|
>
|
2018-02-13 22:33:03 +02:00
|
|
|
{props =>
|
|
|
|
allImages.length ? (
|
|
|
|
<Filters selected={typeValue} {...props} />
|
|
|
|
) : null
|
|
|
|
}
|
2018-02-06 12:32:47 +02:00
|
|
|
</ReduxForm>
|
|
|
|
</Margin>
|
|
|
|
<Row>
|
2018-02-16 19:23:37 +02:00
|
|
|
{images.map(image => (
|
2018-02-06 12:32:47 +02:00
|
|
|
<Col sm={4}>
|
2018-02-15 16:37:59 +02:00
|
|
|
<Image
|
|
|
|
{...image}
|
|
|
|
onCreateInstance={() => handleCreateInstance(image)}
|
|
|
|
onRemove={() => handleRemove(image.id)}
|
|
|
|
/>
|
2018-02-06 12:32:47 +02:00
|
|
|
</Col>
|
|
|
|
))}
|
|
|
|
{!images.length && !loading ? (
|
|
|
|
<Empty>No images to see here</Empty>
|
|
|
|
) : null}
|
|
|
|
</Row>
|
|
|
|
</Fragment>
|
2018-02-05 17:12:47 +02:00
|
|
|
</ViewContainer>
|
|
|
|
);
|
|
|
|
|
|
|
|
export default compose(
|
2018-02-14 22:30:25 +02:00
|
|
|
graphql(RemoveImage, {
|
|
|
|
name: 'removeImage'
|
|
|
|
}),
|
2018-02-05 17:12:47 +02:00
|
|
|
graphql(ListImages, {
|
2018-02-20 02:35:31 +02:00
|
|
|
options: () => ({
|
|
|
|
ssr: false,
|
|
|
|
pollInterval: 1000
|
|
|
|
}),
|
2018-02-14 22:30:25 +02:00
|
|
|
props: ({ data: { images, loading, error, refetch } }) => ({
|
|
|
|
images,
|
|
|
|
loading,
|
|
|
|
error
|
|
|
|
})
|
2018-02-06 12:32:47 +02:00
|
|
|
}),
|
2018-02-14 21:36:31 +02:00
|
|
|
connect(
|
|
|
|
({ form, values }, { index, error, images = [] }) => {
|
2018-02-14 22:30:25 +02:00
|
|
|
const filter = get(form, `${LIST_TOOLBAR_FORM}.values.filter`, false);
|
2018-02-14 21:36:31 +02:00
|
|
|
const mutationError = get(values, 'remove-mutation-error', null);
|
2018-02-06 12:32:47 +02:00
|
|
|
|
2018-02-14 21:36:31 +02:00
|
|
|
const typeValue = get(
|
|
|
|
form,
|
2018-02-14 22:30:25 +02:00
|
|
|
`${LIST_TOGGLE_TYPE_FORM}.values.image-type`,
|
2018-02-14 21:36:31 +02:00
|
|
|
'all'
|
|
|
|
);
|
2018-02-06 12:32:47 +02:00
|
|
|
|
2018-02-14 21:36:31 +02:00
|
|
|
const virtual = Object.keys(ImageType).filter(
|
|
|
|
i => ImageType[i] === 'Hardware Virtual Machine'
|
|
|
|
);
|
2018-02-06 12:32:47 +02:00
|
|
|
|
2018-02-14 21:36:31 +02:00
|
|
|
const container = Object.keys(ImageType).filter(
|
|
|
|
i => ImageType[i] === 'Infrastructure Container'
|
|
|
|
);
|
|
|
|
|
|
|
|
const filtered = filter
|
|
|
|
? Index(images)
|
|
|
|
.search(filter)
|
|
|
|
.map(({ ref }) => find(images, ['id', ref]))
|
|
|
|
: images;
|
|
|
|
|
|
|
|
return {
|
2018-02-16 19:23:37 +02:00
|
|
|
images: filtered
|
|
|
|
.filter(image => {
|
|
|
|
switch (typeValue) {
|
|
|
|
case 'all':
|
|
|
|
return true;
|
|
|
|
case 'hardware-virtual-machine':
|
|
|
|
return virtual.includes(image.type);
|
|
|
|
case 'infrastructure-container':
|
|
|
|
return container.includes(image.type);
|
|
|
|
default:
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
})
|
|
|
|
.map(({ id, ...image }) => ({
|
|
|
|
...image,
|
|
|
|
id,
|
|
|
|
removing: get(values, `remove-mutation-${id}-loading`, false)
|
|
|
|
})),
|
2018-02-14 21:36:31 +02:00
|
|
|
allImages: images,
|
|
|
|
mutationError,
|
|
|
|
typeValue
|
|
|
|
};
|
|
|
|
},
|
|
|
|
(dispatch, { removeImage, history }) => ({
|
2018-02-15 16:37:59 +02:00
|
|
|
handleCreateInstance: image =>
|
|
|
|
window
|
|
|
|
.open(`http://localhost:3069/~create/?image=${image.name}`, '_blank')
|
|
|
|
.focus(),
|
2018-02-14 21:36:31 +02:00
|
|
|
handleRemove: async id => {
|
|
|
|
dispatch([set({ name: `remove-mutation-${id}-loading`, value: true })]);
|
|
|
|
|
|
|
|
const [err, res] = await intercept(
|
|
|
|
removeImage({
|
|
|
|
variables: {
|
|
|
|
id
|
|
|
|
}
|
|
|
|
})
|
|
|
|
);
|
|
|
|
|
|
|
|
if (err) {
|
|
|
|
dispatch([
|
|
|
|
set({ name: 'remove-mutation-error', value: parseError(err) }),
|
|
|
|
set({ name: `remove-mutation-${id}-loading`, value: false })
|
|
|
|
]);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (res) {
|
2018-02-14 22:30:25 +02:00
|
|
|
dispatch(
|
2018-02-16 19:23:37 +02:00
|
|
|
set({ name: `remove-mutation-${id}-loading`, value: false })
|
2018-02-14 22:30:25 +02:00
|
|
|
);
|
|
|
|
|
2018-02-14 21:36:31 +02:00
|
|
|
history.push(`/`);
|
2018-02-06 12:32:47 +02:00
|
|
|
}
|
2018-02-14 21:36:31 +02:00
|
|
|
}
|
|
|
|
})
|
|
|
|
)
|
2018-02-05 17:12:47 +02:00
|
|
|
)(List);
|