2017-09-20 12:30:53 +03:00
|
|
|
import React from 'react';
|
2017-10-04 20:27:55 +03:00
|
|
|
import { Row, Col } from 'react-styled-flexboxgrid';
|
2017-09-20 12:30:53 +03:00
|
|
|
import forceArray from 'force-array';
|
2017-10-11 19:59:59 +03:00
|
|
|
import get from 'lodash.get';
|
2017-09-20 12:30:53 +03:00
|
|
|
|
2017-09-27 17:44:57 +03:00
|
|
|
import {
|
|
|
|
FormGroup,
|
|
|
|
Input,
|
|
|
|
FormLabel,
|
|
|
|
ViewContainer,
|
2017-10-04 20:27:55 +03:00
|
|
|
StatusLoader,
|
|
|
|
Select
|
2017-09-27 17:44:57 +03:00
|
|
|
} from 'joyent-ui-toolkit';
|
|
|
|
|
2017-09-20 12:30:53 +03:00
|
|
|
import Item from './item';
|
|
|
|
|
2017-09-27 17:44:57 +03:00
|
|
|
export default ({
|
2017-10-11 19:59:59 +03:00
|
|
|
instances = [],
|
|
|
|
selected = [],
|
2017-09-27 17:44:57 +03:00
|
|
|
loading,
|
|
|
|
handleChange = () => null,
|
2017-10-04 20:27:55 +03:00
|
|
|
onAction = () => null,
|
|
|
|
handleSubmit,
|
|
|
|
...rest
|
2017-09-27 17:44:57 +03:00
|
|
|
}) => {
|
2017-10-11 19:59:59 +03:00
|
|
|
const allowedActions = {
|
|
|
|
stop: selected.some(({ state }) => state === 'RUNNING'),
|
|
|
|
start: selected.some(({ state }) => state !== 'RUNNING'),
|
|
|
|
reboot: true,
|
|
|
|
resize:
|
|
|
|
selected.length === 1 && selected.every(({ brand }) => brand === 'KVM'),
|
|
|
|
enableFw: selected.some(({ firewall_enabled }) => !firewall_enabled),
|
|
|
|
disableFw: selected.some(({ firewall_enabled }) => firewall_enabled),
|
|
|
|
createSnap: true,
|
|
|
|
startSnap:
|
|
|
|
selected.length === 1 &&
|
|
|
|
selected.every(({ snapshots = [] }) => snapshots.length)
|
|
|
|
};
|
|
|
|
|
|
|
|
const handleActions = ({ target }) =>
|
|
|
|
onAction({
|
|
|
|
name: target.value,
|
|
|
|
items: selected
|
|
|
|
});
|
|
|
|
|
2017-09-20 12:30:53 +03:00
|
|
|
const _instances = forceArray(instances);
|
|
|
|
|
|
|
|
const items = _instances.map((instance, i, all) => (
|
|
|
|
<Item
|
|
|
|
key={instance.id}
|
|
|
|
{...instance}
|
|
|
|
last={all.length - 1 === i}
|
|
|
|
first={!i}
|
|
|
|
/>
|
|
|
|
));
|
|
|
|
|
2017-09-27 17:44:57 +03:00
|
|
|
const _loading =
|
|
|
|
!items.length && loading ? (
|
|
|
|
<ViewContainer center>
|
|
|
|
<StatusLoader />
|
|
|
|
</ViewContainer>
|
|
|
|
) : null;
|
2017-09-27 17:23:49 +03:00
|
|
|
|
2017-09-20 12:30:53 +03:00
|
|
|
return (
|
2017-10-04 20:27:55 +03:00
|
|
|
<form
|
|
|
|
onChange={() => handleSubmit(ctx => handleChange(ctx))}
|
|
|
|
onSubmit={handleSubmit}
|
|
|
|
>
|
|
|
|
<Row between="xs">
|
|
|
|
<Col xs={10} sm={8} lg={6}>
|
|
|
|
<Row>
|
|
|
|
<Col xs={7} sm={7} md={6} lg={6}>
|
|
|
|
<FormGroup name="filter" reduxForm>
|
|
|
|
<FormLabel>Filter instances</FormLabel>
|
2017-10-09 16:44:26 +03:00
|
|
|
<Input
|
|
|
|
placeholder="Search for name, state, tags, etc..."
|
|
|
|
fluid
|
|
|
|
/>
|
2017-10-04 20:27:55 +03:00
|
|
|
</FormGroup>
|
|
|
|
</Col>
|
|
|
|
<Col xs={5} sm={3} lg={3}>
|
|
|
|
<FormGroup name="sort" reduxForm>
|
|
|
|
<FormLabel>Sort</FormLabel>
|
2017-10-09 16:55:22 +03:00
|
|
|
<Select disabled={!items.length} fluid>
|
2017-10-04 20:27:55 +03:00
|
|
|
<option value="name">Name</option>
|
|
|
|
<option value="state">State</option>
|
|
|
|
<option value="primary_ip">IP</option>
|
|
|
|
<option value="image.name">Image</option>
|
|
|
|
<option value="firewall_enabled">Firewall</option>
|
|
|
|
<option value="created">Created</option>
|
|
|
|
<option value="updated">Updated</option>
|
|
|
|
<option value="brand">Brand</option>
|
|
|
|
<option value="memory">Memory</option>
|
|
|
|
<option value="disk">Disk</option>
|
|
|
|
<option value="package.name">Package</option>
|
|
|
|
</Select>
|
|
|
|
</FormGroup>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
</Col>
|
|
|
|
<Col xs={2} sm={4} lg={6}>
|
|
|
|
<Row end="xs">
|
|
|
|
<Col xs={12} sm={3} md={3} lg={2}>
|
|
|
|
<FormGroup>
|
|
|
|
<FormLabel>⁣</FormLabel>
|
|
|
|
<Select
|
|
|
|
value="actions"
|
2017-10-11 19:59:59 +03:00
|
|
|
disabled={!items.length || !selected.length}
|
|
|
|
onChange={handleActions}
|
2017-10-09 16:55:22 +03:00
|
|
|
fluid
|
2017-10-04 20:27:55 +03:00
|
|
|
>
|
|
|
|
<option value="actions" selected disabled>
|
|
|
|
≡
|
|
|
|
</option>
|
2017-10-11 19:59:59 +03:00
|
|
|
<option value="stop" disabled={!allowedActions.stop}>
|
|
|
|
Stop
|
|
|
|
</option>
|
|
|
|
<option value="start" disabled={!allowedActions.start}>
|
|
|
|
Start
|
|
|
|
</option>
|
|
|
|
<option value="reboot" disabled={!allowedActions.reboot}>
|
|
|
|
Reboot
|
|
|
|
</option>
|
|
|
|
<option value="resize" disabled={!allowedActions.resize}>
|
|
|
|
Resize
|
|
|
|
</option>
|
|
|
|
<option value="enableFw" disabled={!allowedActions.enableFw}>
|
|
|
|
Enable Firewall
|
|
|
|
</option>
|
|
|
|
<option
|
|
|
|
value="disableFw"
|
|
|
|
disabled={!allowedActions.disableFw}
|
|
|
|
>
|
|
|
|
Disable Firewall
|
|
|
|
</option>
|
|
|
|
<option
|
|
|
|
value="createSnap"
|
|
|
|
disabled={!allowedActions.createSnap}
|
|
|
|
>
|
|
|
|
Create Snapshot
|
|
|
|
</option>
|
|
|
|
<option
|
|
|
|
value="startSnap"
|
|
|
|
disabled={!allowedActions.startSnap}
|
|
|
|
>
|
|
|
|
Start from Snapshot
|
|
|
|
</option>
|
2017-10-04 20:27:55 +03:00
|
|
|
</Select>
|
|
|
|
</FormGroup>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
2017-09-27 17:23:49 +03:00
|
|
|
{_loading}
|
2017-09-20 12:30:53 +03:00
|
|
|
{items}
|
|
|
|
</form>
|
|
|
|
);
|
|
|
|
};
|