feat(my-joy-beta): show filter when loading machines
This commit is contained in:
parent
4447a9c610
commit
2291666d81
@ -30,7 +30,7 @@ const stateColor = {
|
||||
unknown: 'secondaryActive'
|
||||
};
|
||||
|
||||
export default ({ name, state, last, first }) => (
|
||||
export default ({ name, state, primaryIp, last, first }) => (
|
||||
<Card collapsed flat={!last} topMargin={first} bottomless={!last} gapless>
|
||||
<CardView>
|
||||
<CardMeta>
|
||||
@ -40,6 +40,11 @@ export default ({ name, state, last, first }) => (
|
||||
</FormGroup>
|
||||
</CardAction>
|
||||
<CardTitle to={`/instances/${name}`}>{name}</CardTitle>
|
||||
<Small>
|
||||
<CardLabel>
|
||||
{primaryIp}
|
||||
</CardLabel>
|
||||
</Small>
|
||||
<Small>
|
||||
<CardLabel color={stateColor[state]} title={`The instance is ${state}`}>
|
||||
{titleCase(state)}
|
||||
|
@ -1,10 +1,10 @@
|
||||
import React from 'react';
|
||||
import forceArray from 'force-array';
|
||||
|
||||
import { FormGroup, Input, FormLabel } from 'joyent-ui-toolkit';
|
||||
import { FormGroup, Input, FormLabel, ViewContainer, StatusLoader } from 'joyent-ui-toolkit';
|
||||
import Item from './item';
|
||||
|
||||
export default ({ instances, handleChange = () => null, handleSubmit }) => {
|
||||
export default ({ instances, loading, handleChange = () => null, handleSubmit }) => {
|
||||
const _instances = forceArray(instances);
|
||||
|
||||
const items = _instances.map((instance, i, all) => (
|
||||
@ -16,12 +16,19 @@ export default ({ instances, handleChange = () => null, handleSubmit }) => {
|
||||
/>
|
||||
));
|
||||
|
||||
const _loading = (!items.length && loading) ? (
|
||||
<ViewContainer center>
|
||||
<StatusLoader />
|
||||
</ViewContainer>
|
||||
) : null;
|
||||
|
||||
return (
|
||||
<form onSubmit={() => handleSubmit(ctx => handleChange(ctx))}>
|
||||
<FormGroup name="filter" reduxForm>
|
||||
<FormLabel>Filter instances</FormLabel>
|
||||
<Input />
|
||||
</FormGroup>
|
||||
{_loading}
|
||||
{items}
|
||||
</form>
|
||||
);
|
||||
|
@ -17,11 +17,10 @@ const InstanceListForm = reduxForm({
|
||||
form: `instance-list`
|
||||
})(InstanceList);
|
||||
|
||||
const List = ({ instances, loading, error }) => {
|
||||
const List = ({ instances = [], loading = false, error }) => {
|
||||
const _title = <Title>Instances</Title>;
|
||||
const _instances = forceArray(instances);
|
||||
const _loading = !(loading && !_instances.length) ? null : <StatusLoader />;
|
||||
const _list = _loading ? null : <InstanceListForm instances={_instances} />;
|
||||
const _loading = (!instances.length && loading);
|
||||
|
||||
const _error = !error ? null : (
|
||||
<Message
|
||||
@ -32,11 +31,10 @@ const List = ({ instances, loading, error }) => {
|
||||
);
|
||||
|
||||
return (
|
||||
<ViewContainer center={Boolean(_loading)} main>
|
||||
<ViewContainer main>
|
||||
{_title}
|
||||
{!_loading && _error}
|
||||
{_loading}
|
||||
{_list}
|
||||
<InstanceListForm instances={_instances} loading={loading} />
|
||||
</ViewContainer>
|
||||
);
|
||||
};
|
||||
|
@ -8,6 +8,7 @@ query Instances {
|
||||
metadata
|
||||
tags
|
||||
firewallEnabled
|
||||
primaryIp
|
||||
docker
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user