80 lines
2.0 KiB
JavaScript
80 lines
2.0 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { compose, graphql } from 'react-apollo';
|
|
import { connect } from 'react-redux';
|
|
import { reduxForm } from 'redux-form';
|
|
import forceArray from 'force-array';
|
|
import get from 'lodash.get';
|
|
import find from 'lodash.find';
|
|
|
|
import { ViewContainer, Title, Message } from 'joyent-ui-toolkit';
|
|
|
|
import GetInstances from '@graphql/list-instances.gql';
|
|
import { List as InstanceList } from '@components/instances';
|
|
import GenIndex from '@state/gen-index';
|
|
|
|
const InstanceListForm = reduxForm({
|
|
form: `instance-list`
|
|
})(InstanceList);
|
|
|
|
const List = ({ instances = [], loading = false, error }) => {
|
|
const _title = <Title>Instances</Title>;
|
|
const _instances = forceArray(instances);
|
|
const _loading = !instances.length && loading;
|
|
|
|
const _error = (error && !_instances.length && !_loading) ? (
|
|
<Message
|
|
title="Ooops!"
|
|
message="An error occurred while loading your instances."
|
|
error
|
|
/>
|
|
) : null;
|
|
|
|
return (
|
|
<ViewContainer main>
|
|
{_title}
|
|
{!_loading && _error}
|
|
<InstanceListForm instances={_instances} loading={loading} />
|
|
</ViewContainer>
|
|
);
|
|
};
|
|
|
|
List.propTypes = {
|
|
loading: PropTypes.bool,
|
|
instances: PropTypes.arrayOf(
|
|
PropTypes.shape({
|
|
id: PropTypes.string,
|
|
name: PropTypes.string
|
|
})
|
|
)
|
|
};
|
|
|
|
export default compose(
|
|
graphql(GetInstances, {
|
|
options: () => ({
|
|
pollInterval: 1000
|
|
}),
|
|
props: ({ ownProps, data: { machines, loading, error } }) => {
|
|
const _instances = forceArray(machines);
|
|
|
|
return {
|
|
instances: _instances,
|
|
loading,
|
|
error,
|
|
index: GenIndex(_instances)
|
|
};
|
|
}
|
|
}),
|
|
connect((state, ownProps) => {
|
|
const filter = get(state, 'form.instance-list.values.filter');
|
|
const { index, instances = [], ...rest } = ownProps;
|
|
|
|
return {
|
|
...rest,
|
|
instances: !filter
|
|
? instances
|
|
: index.search(filter).map(({ ref }) => find(instances, ['id', ref]))
|
|
};
|
|
})
|
|
)(List);
|