import React from 'react';
import { Row, Col } from 'react-styled-flexboxgrid';
import forceArray from 'force-array';
import find from 'lodash.find';
import remcalc from 'remcalc';
import titleCase from 'title-case';
import {
FormGroup,
Input,
FormLabel,
ViewContainer,
StatusLoader,
Select,
Message,
MessageTitle,
MessageDescription,
Button,
QueryBreakpoints,
Table,
TableThead,
TableTr,
TableTh,
TableTbody,
TableTd,
Checkbox,
P,
DotIcon,
IconActions,
PopoverContainer,
PopoverTarget,
Popover,
PopoverItem,
PopoverDivider,
Anchor
} from 'joyent-ui-toolkit';
const { SmallOnly, Small, Medium } = QueryBreakpoints;
const stateColor = {
PROVISIONING: 'primary',
RUNNING: 'green',
STOPPING: 'grey',
STOPPED: 'grey',
DELETED: 'secondaryActive',
FAILED: 'red'
};
const Item = ({
id,
name,
state,
allowedActions,
onStop,
onStart,
onReboot,
onResize,
onEnableFw,
onDisableFw,
onCreateSnap,
onStartSnap
}) => (
{id.substring(0, 7)}
{name}
{titleCase(state)}
{!allowedActions.stop ? null : (
Stop
)}
{!allowedActions.start ? null : (
Start
)}
{!allowedActions.reboot ? null : (
Reboot
)}
{!allowedActions.enableFw ? null : (
Enable Firewall
)}
{!allowedActions.disableFw ? null : (
Disable Firewall
)}
{!allowedActions.disableFw ? null : (
Disable Firewall
)}
{!allowedActions.resize ? null : (
Resize
)}
{!allowedActions.createSnap ? null : (
Create Snapshot
)}
{!allowedActions.startSnap ? null : (
Start from Snapshot
)}
Delete
);
export default ({
instances = [],
selected = [],
loading,
error,
handleChange = () => null,
onAction = () => null,
handleSubmit,
submitting = false,
pristine = true,
...rest
}) => {
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'),
// eslint-disable-next-line camelcase
enableFw: selected.some(({ firewall_enabled }) => !firewall_enabled),
// eslint-disable-next-line camelcase
disableFw: selected.some(({ firewall_enabled }) => firewall_enabled),
createSnap: selected.length === 1,
startSnap:
selected.length === 1 &&
selected.every(({ snapshots = [] }) => snapshots.length)
};
const handleActions = ev => {
ev.stopPropagation();
ev.preventDefault();
onAction({
name: ev.target.value,
items: selected
});
};
const items = forceArray(instances).map(instance => {
// eslint-disable-next-line camelcase
const { id, name, state, firewall_enabled, snapshots, brand } = instance;
const isSelected = Boolean(find(selected, ['id', id]));
const isSubmitting = isSelected && submitting;
const allowedActions = {
stop: state === 'RUNNING',
start: state !== 'RUNNING',
reboot: true,
resize: brand === 'KVM',
// eslint-disable-next-line camelcase
enableFw: !firewall_enabled,
// eslint-disable-next-line camelcase
disableFw: firewall_enabled,
createSnap: true,
startSnap: Boolean(snapshots.length)
};
return {
...instance,
isSubmitting,
isSelected,
allowedActions,
onStop: () => onAction({ name: 'stop', items: [instance] }),
onStart: () => onAction({ name: 'start', items: [instance] }),
onReboot: () => onAction({ name: 'reboot', items: [instance] }),
onResize: () => onAction({ name: 'resize', items: [instance] }),
onEnableFw: () => onAction({ name: 'enableFw', items: [instance] }),
onDisableFw: () => onAction({ name: 'disableFw', items: [instance] }),
onCreateSnap: () => onAction({ name: 'createSnap', items: [instance] }),
onStartSnap: () => onAction({ name: 'startSnap', items: [instance] })
};
});
const _loading =
!items.length && loading ? (
) : null;
const _error = error &&
!submitting && (
Ooops!
{error}
);
const _table = !items.length ? null : (
Id
Name
Status
{items.map(instance => )}
);
return (
);
};