169 lines
4.8 KiB
JavaScript
169 lines
4.8 KiB
JavaScript
|
import React from 'react';
|
||
|
import { withTheme } from 'styled-components';
|
||
|
|
||
|
import {
|
||
|
Row,
|
||
|
Col,
|
||
|
Button,
|
||
|
Footer,
|
||
|
QueryBreakpoints,
|
||
|
StartIcon,
|
||
|
StopIcon,
|
||
|
ResetIcon,
|
||
|
DeleteIcon
|
||
|
} from 'joyent-ui-toolkit';
|
||
|
|
||
|
const { SmallOnly, Medium } = QueryBreakpoints;
|
||
|
|
||
|
export default withTheme(
|
||
|
({
|
||
|
submitting = false,
|
||
|
statuses = {},
|
||
|
allowedActions = {},
|
||
|
onStart,
|
||
|
onStop,
|
||
|
onReboot,
|
||
|
onRemove,
|
||
|
theme = {}
|
||
|
}) => (
|
||
|
<Footer fixed bottom>
|
||
|
<Row between="xs" middle="xs">
|
||
|
<Col xs={7}>
|
||
|
{onStart && [
|
||
|
<SmallOnly key="small-only">
|
||
|
<Button
|
||
|
type="button"
|
||
|
onClick={onStart}
|
||
|
disabled={submitting || !allowedActions.start}
|
||
|
loading={submitting && statuses.starting}
|
||
|
secondary
|
||
|
small
|
||
|
icon
|
||
|
>
|
||
|
<StartIcon disabled={submitting || !allowedActions.start} />
|
||
|
</Button>
|
||
|
</SmallOnly>,
|
||
|
<Medium key="medium">
|
||
|
<Button
|
||
|
type="button"
|
||
|
onClick={onStart}
|
||
|
disabled={submitting || !allowedActions.start}
|
||
|
loading={submitting && statuses.starting}
|
||
|
secondary
|
||
|
icon
|
||
|
>
|
||
|
<StartIcon disabled={submitting || !allowedActions.start} />
|
||
|
<span>Start</span>
|
||
|
</Button>
|
||
|
</Medium>
|
||
|
]}
|
||
|
{onStop && [
|
||
|
<SmallOnly key="small-only">
|
||
|
<Button
|
||
|
type="button"
|
||
|
onClick={onStop}
|
||
|
disabled={submitting || !allowedActions.stop}
|
||
|
loading={submitting && statuses.stopping}
|
||
|
secondary
|
||
|
small
|
||
|
icon
|
||
|
>
|
||
|
<StopIcon disabled={submitting || !allowedActions.stop} />
|
||
|
</Button>
|
||
|
</SmallOnly>,
|
||
|
<Medium key="medium">
|
||
|
<Button
|
||
|
type="button"
|
||
|
onClick={onStop}
|
||
|
disabled={submitting || !allowedActions.stop}
|
||
|
loading={submitting && statuses.stopping}
|
||
|
secondary
|
||
|
icon
|
||
|
>
|
||
|
<StopIcon disabled={submitting || !allowedActions.stop} />
|
||
|
<span>Stop</span>
|
||
|
</Button>
|
||
|
</Medium>
|
||
|
]}
|
||
|
{onReboot && [
|
||
|
<SmallOnly key="small-only">
|
||
|
<Button
|
||
|
type="button"
|
||
|
onClick={onReboot}
|
||
|
disabled={submitting || !allowedActions.reboot}
|
||
|
loading={submitting && statuses.rebooting}
|
||
|
secondary
|
||
|
small
|
||
|
icon
|
||
|
>
|
||
|
<ResetIcon disabled={submitting || !allowedActions.reboot} />
|
||
|
</Button>
|
||
|
</SmallOnly>,
|
||
|
<Medium key="medium">
|
||
|
<Button
|
||
|
type="button"
|
||
|
onClick={onReboot}
|
||
|
disabled={submitting || !allowedActions.reboot}
|
||
|
loading={submitting && statuses.rebooting}
|
||
|
secondary
|
||
|
icon
|
||
|
>
|
||
|
<ResetIcon disabled={submitting || !allowedActions.reboot} />
|
||
|
<span>Reboot</span>
|
||
|
</Button>
|
||
|
</Medium>
|
||
|
]}
|
||
|
</Col>
|
||
|
{onRemove && (
|
||
|
<Col xs={5}>
|
||
|
<SmallOnly key="small-only">
|
||
|
<Button
|
||
|
type="button"
|
||
|
onClick={onRemove}
|
||
|
disabled={submitting || !allowedActions.remove}
|
||
|
loading={submitting && statuses.removing}
|
||
|
secondary
|
||
|
error
|
||
|
right
|
||
|
small
|
||
|
icon
|
||
|
>
|
||
|
<DeleteIcon
|
||
|
disabled={submitting}
|
||
|
fill={
|
||
|
!(submitting || !allowedActions.remove)
|
||
|
? theme.red
|
||
|
: undefined
|
||
|
}
|
||
|
/>
|
||
|
</Button>
|
||
|
</SmallOnly>
|
||
|
<Medium key="medium">
|
||
|
<Button
|
||
|
type="button"
|
||
|
onClick={onRemove}
|
||
|
disabled={submitting || !allowedActions.remove}
|
||
|
loading={submitting && statuses.removing}
|
||
|
error
|
||
|
secondary
|
||
|
right
|
||
|
icon
|
||
|
>
|
||
|
<DeleteIcon
|
||
|
disabled={submitting || !allowedActions.remove}
|
||
|
fill={
|
||
|
!(submitting || !allowedActions.remove)
|
||
|
? theme.red
|
||
|
: undefined
|
||
|
}
|
||
|
/>
|
||
|
<span>Remove</span>
|
||
|
</Button>
|
||
|
</Medium>
|
||
|
</Col>
|
||
|
)}
|
||
|
</Row>
|
||
|
</Footer>
|
||
|
)
|
||
|
);
|