From dd32058c9dd8568e28c7410cfb3edeaa84451816 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= Date: Wed, 4 Oct 2017 18:27:55 +0100 Subject: [PATCH] feat(my-joy-beta): sort and actions --- packages/my-joy-beta/.eslintrc | 1 + packages/my-joy-beta/package.json | 2 + .../src/components/instances/item.js | 4 +- .../src/components/instances/list.js | 73 +++++++++- .../src/containers/instances/firewall.js | 15 ++- .../src/containers/instances/list.js | 125 ++++++++++++++---- .../src/containers/instances/metadata.js | 19 ++- .../src/containers/instances/networks.js | 15 ++- .../src/containers/instances/tags.js | 19 ++- .../src/graphql/create-snapshot.gql | 3 + .../src/graphql/disable-instance-fw.gql | 3 + .../src/graphql/enable-instance-fw.gql | 3 + .../my-joy-beta/src/graphql/get-instance.gql | 2 +- .../src/graphql/list-firewall-rules.gql | 2 +- .../src/graphql/list-instances.gql | 13 +- .../my-joy-beta/src/graphql/list-metadata.gql | 2 +- .../my-joy-beta/src/graphql/list-networks.gql | 2 +- .../src/graphql/list-snapshots.gql | 2 +- .../my-joy-beta/src/graphql/list-tags.gql | 2 +- .../src/graphql/reboot-instance.gql | 5 + .../src/graphql/resize-instance.gql | 3 + .../src/graphql/start-from-snapshot.gql | 3 + .../src/graphql/start-instance.gql | 3 + .../my-joy-beta/src/graphql/stop-instance.gql | 3 + packages/my-joy-beta/src/state/store.js | 2 + packages/ui-toolkit/src/form/base/toggle.js | 4 +- packages/ui-toolkit/src/label/index.js | 1 + 27 files changed, 255 insertions(+), 76 deletions(-) create mode 100644 packages/my-joy-beta/src/graphql/create-snapshot.gql create mode 100644 packages/my-joy-beta/src/graphql/disable-instance-fw.gql create mode 100644 packages/my-joy-beta/src/graphql/enable-instance-fw.gql create mode 100644 packages/my-joy-beta/src/graphql/reboot-instance.gql create mode 100644 packages/my-joy-beta/src/graphql/resize-instance.gql create mode 100644 packages/my-joy-beta/src/graphql/start-from-snapshot.gql create mode 100644 packages/my-joy-beta/src/graphql/start-instance.gql create mode 100644 packages/my-joy-beta/src/graphql/stop-instance.gql diff --git a/packages/my-joy-beta/.eslintrc b/packages/my-joy-beta/.eslintrc index a847796a..c3898f24 100644 --- a/packages/my-joy-beta/.eslintrc +++ b/packages/my-joy-beta/.eslintrc @@ -3,6 +3,7 @@ "rules": { "no-console": 0, "new-cap": 0, + "camelcase": 1, // temp "no-undef": 1, "no-debugger": 1, diff --git a/packages/my-joy-beta/package.json b/packages/my-joy-beta/package.json index 717376d2..c8e03b5b 100644 --- a/packages/my-joy-beta/package.json +++ b/packages/my-joy-beta/package.json @@ -16,11 +16,13 @@ "prepublish": "echo 0" }, "dependencies": { + "@manaflair/redux-batch": "^0.1.0", "apollo": "^0.2.2", "joyent-ui-toolkit": "^2.0.0", "lodash.find": "^4.6.0", "lodash.get": "^4.4.2", "lodash.isstring": "^4.0.1", + "lodash.sortby": "^4.7.0", "lunr": "^2.1.3", "normalized-styled-components": "^1.0.14", "param-case": "^2.1.1", diff --git a/packages/my-joy-beta/src/components/instances/item.js b/packages/my-joy-beta/src/components/instances/item.js index dc62ca73..050105ee 100644 --- a/packages/my-joy-beta/src/components/instances/item.js +++ b/packages/my-joy-beta/src/components/instances/item.js @@ -24,7 +24,7 @@ const stateColor = { FAILED: 'red' }; -export default ({ name, state, primaryIp, last, first }) => ( +export default ({ name, state, primary_ip, last, first }) => ( @@ -35,7 +35,7 @@ export default ({ name, state, primaryIp, last, first }) => ( {name} - {primaryIp} + {primary_ip} null, - handleSubmit + onAction = () => null, + handleSubmit, + ...rest }) => { const _instances = forceArray(instances); @@ -36,11 +40,66 @@ export default ({ ) : null; return ( -
handleSubmit(ctx => handleChange(ctx))}> - - Filter instances - - + handleSubmit(ctx => handleChange(ctx))} + onSubmit={handleSubmit} + > + + + + + + Filter instances + + + + + + Sort + + + + + + + + + + ⁣ + + + + + + {_loading} {items}
diff --git a/packages/my-joy-beta/src/containers/instances/firewall.js b/packages/my-joy-beta/src/containers/instances/firewall.js index 6bf97440..201749fe 100644 --- a/packages/my-joy-beta/src/containers/instances/firewall.js +++ b/packages/my-joy-beta/src/containers/instances/firewall.js @@ -32,13 +32,14 @@ const Firewall = ({ /> )); - const _error = (error && !values.length && !_loading) ? ( - - ) : null; + const _error = + error && !values.length && !_loading ? ( + + ) : null; return ( diff --git a/packages/my-joy-beta/src/containers/instances/list.js b/packages/my-joy-beta/src/containers/instances/list.js index bad2dfa6..3aec53d8 100644 --- a/packages/my-joy-beta/src/containers/instances/list.js +++ b/packages/my-joy-beta/src/containers/instances/list.js @@ -2,39 +2,65 @@ 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 { reduxForm, change } from 'redux-form'; import forceArray from 'force-array'; import get from 'lodash.get'; +import sortBy from 'lodash.sortby'; import find from 'lodash.find'; import { ViewContainer, Title, Message } from 'joyent-ui-toolkit'; -import GetInstances from '@graphql/list-instances.gql'; +import ListInstances from '@graphql/list-instances.gql'; +import StopInstance from '@graphql/stop-instance.gql'; +import StartInstance from '@graphql/start-instance.gql'; +import RebootInstance from '@graphql/reboot-instance.gql'; +import ResizeInstance from '@graphql/resize-instance.gql'; +import EnableInstanceFw from '@graphql/enable-instance-fw.gql'; +import DisableInstanceFw from '@graphql/disable-instance-fw.gql'; +import CreateSnapshot from '@graphql/create-snapshot.gql'; +import StartSnapshot from '@graphql/start-from-snapshot.gql'; + import { List as InstanceList } from '@components/instances'; import GenIndex from '@state/gen-index'; const InstanceListForm = reduxForm({ - form: `instance-list` + form: `instance-list`, + initialValues: { + sort: 'name' + } })(InstanceList); -const List = ({ instances = [], loading = false, error }) => { +const List = ({ + selected = [], + instances = [], + loading = false, + error, + onAction +}) => { const _title = Instances; const _instances = forceArray(instances); const _loading = !instances.length && loading; - const _error = (error && !_instances.length && !_loading) ? ( - - ) : null; + const _error = + error && !_instances.length && !_loading ? ( + + ) : null; + + const handleAction = name => onAction({ name, ids: selected }); return ( {_title} {!_loading && _error} - + ); }; @@ -50,7 +76,15 @@ List.propTypes = { }; export default compose( - graphql(GetInstances, { + graphql(StopInstance, { name: 'stop' }), + graphql(StartInstance, { name: 'start' }), + graphql(RebootInstance, { name: 'reboot' }), + graphql(ResizeInstance, { name: 'resize' }), + graphql(EnableInstanceFw, { name: 'enableFw' }), + graphql(DisableInstanceFw, { name: 'disableFw' }), + graphql(CreateSnapshot, { name: 'createSnapshot' }), + graphql(StartSnapshot, { name: 'startSnapshot' }), + graphql(ListInstances, { options: () => ({ pollInterval: 1000 }), @@ -65,15 +99,60 @@ export default compose( }; } }), - connect((state, ownProps) => { - const filter = get(state, 'form.instance-list.values.filter'); - const { index, instances = [], ...rest } = ownProps; + connect( + (state, ownProps) => { + const { index, instances = [], ...rest } = ownProps; - return { - ...rest, - instances: !filter - ? instances - : index.search(filter).map(({ ref }) => find(instances, ['id', ref])) - }; - }) + const form = get(state, 'form.instance-list.values', {}); + const filter = get(form, 'filter'); + const sort = get(form, 'sort'); + + const values = filter + ? index.search(filter).map(({ ref }) => find(instances, ['id', ref])) + : instances; + + const selected = Object.keys(form) + .map(name => find(values, ['name', name])) + .filter(Boolean) + .map(({ id }) => id); + + return { + ...rest, + instances: sortBy(values, value => get(value, sort)), + selected + }; + }, + (dispatch, { instances, ...ownProps }) => ({ + onAction: ({ name, ids = [] }) => { + const types = { + stop: () => + Promise.all(ids.map(id => ownProps.stop({ variables: { id } }))), + start: () => + Promise.all(ids.map(id => ownProps.start({ variables: { id } }))), + reboot: () => + Promise.all(ids.map(id => ownProps.reboot({ variables: { id } }))), + resize: () => null, + 'enable-fw': () => null, + 'disable-fw': () => null, + 'create-snap': () => null, + 'start-snap': () => null + }; + + const clearSelected = () => dispatch(ids.map(id => { + const form = 'instance-list'; + const field = get(find(instances, ['id', id]), 'name'); + const value = false; + + if (!field) { + return; + } + + return change(form, field, value); + })); + + const fn = types[name]; + return fn && fn().then(clearSelected); + } + }) + ) )(List); diff --git a/packages/my-joy-beta/src/containers/instances/metadata.js b/packages/my-joy-beta/src/containers/instances/metadata.js index 25afea7a..6c302894 100644 --- a/packages/my-joy-beta/src/containers/instances/metadata.js +++ b/packages/my-joy-beta/src/containers/instances/metadata.js @@ -38,19 +38,18 @@ const MetadataForms = (metadata = []) => const Metadata = ({ metadata = [], loading, error }) => { const values = forceArray(metadata); const _title = Metadata; - const _loading = !(loading && !values.length) ? null : ( - - ); + const _loading = !(loading && !values.length) ? null : ; const _metadata = !_loading && MetadataForms(values); - const _error = (error && !values.length && !_loading) ? ( - - ) : null; + const _error = + error && !values.length && !_loading ? ( + + ) : null; return ( diff --git a/packages/my-joy-beta/src/containers/instances/networks.js b/packages/my-joy-beta/src/containers/instances/networks.js index 5204cf8e..ae8b0880 100644 --- a/packages/my-joy-beta/src/containers/instances/networks.js +++ b/packages/my-joy-beta/src/containers/instances/networks.js @@ -28,13 +28,14 @@ const Networks = ({ networks = [], loading, error }) => { /> )); - const _error = (error && !values.length && !_loading) ? ( - - ) : null; + const _error = + error && !values.length && !_loading ? ( + + ) : null; return ( diff --git a/packages/my-joy-beta/src/containers/instances/tags.js b/packages/my-joy-beta/src/containers/instances/tags.js index 83891878..b2948868 100644 --- a/packages/my-joy-beta/src/containers/instances/tags.js +++ b/packages/my-joy-beta/src/containers/instances/tags.js @@ -38,19 +38,18 @@ const TagForms = (tags = []) => const Tags = ({ tags = [], loading, error }) => { const values = forceArray(tags); const _title = Tags; - const _loading = (loading && !values.length) ? ( - - ) : null; + const _loading = loading && !values.length ? : null; const _tags = !_loading && TagForms(tags); - const _error = (error && !values.length && !_loading) ? ( - - ) : null; + const _error = + error && !values.length && !_loading ? ( + + ) : null; return ( diff --git a/packages/my-joy-beta/src/graphql/create-snapshot.gql b/packages/my-joy-beta/src/graphql/create-snapshot.gql new file mode 100644 index 00000000..e44ca6b6 --- /dev/null +++ b/packages/my-joy-beta/src/graphql/create-snapshot.gql @@ -0,0 +1,3 @@ +mutation createInstanceSnapshot($id: ID!, $name: String) { + createMachineSnapshot(id: $id, name: $name) +} diff --git a/packages/my-joy-beta/src/graphql/disable-instance-fw.gql b/packages/my-joy-beta/src/graphql/disable-instance-fw.gql new file mode 100644 index 00000000..8d70aa7b --- /dev/null +++ b/packages/my-joy-beta/src/graphql/disable-instance-fw.gql @@ -0,0 +1,3 @@ +mutation disableMachineFirewall($id: ID!) { + disableMachineFirewall(id: $id) +} diff --git a/packages/my-joy-beta/src/graphql/enable-instance-fw.gql b/packages/my-joy-beta/src/graphql/enable-instance-fw.gql new file mode 100644 index 00000000..7e2f60b9 --- /dev/null +++ b/packages/my-joy-beta/src/graphql/enable-instance-fw.gql @@ -0,0 +1,3 @@ +mutation enableMachineFirewall($id: ID!) { + enableMachineFirewall(id: $id) +} diff --git a/packages/my-joy-beta/src/graphql/get-instance.gql b/packages/my-joy-beta/src/graphql/get-instance.gql index 7f2e0338..cb5658bb 100644 --- a/packages/my-joy-beta/src/graphql/get-instance.gql +++ b/packages/my-joy-beta/src/graphql/get-instance.gql @@ -1,4 +1,4 @@ -query Instance($name: String!) { +query instance($name: String!) { machines(name: $name) { id name diff --git a/packages/my-joy-beta/src/graphql/list-firewall-rules.gql b/packages/my-joy-beta/src/graphql/list-firewall-rules.gql index b1e281d5..d7ff260d 100644 --- a/packages/my-joy-beta/src/graphql/list-firewall-rules.gql +++ b/packages/my-joy-beta/src/graphql/list-firewall-rules.gql @@ -1,4 +1,4 @@ -query Instance($name: String!) { +query instance($name: String!) { machines(name: $name) { id name diff --git a/packages/my-joy-beta/src/graphql/list-instances.gql b/packages/my-joy-beta/src/graphql/list-instances.gql index 5fa0dbcb..d72aa608 100644 --- a/packages/my-joy-beta/src/graphql/list-instances.gql +++ b/packages/my-joy-beta/src/graphql/list-instances.gql @@ -1,10 +1,17 @@ -query Instances { +query instances { machines { id name state - firewall_enabled primary_ip - docker + firewall_enabled + created + updated + brand + memory + disk + package { + name + } } } diff --git a/packages/my-joy-beta/src/graphql/list-metadata.gql b/packages/my-joy-beta/src/graphql/list-metadata.gql index e34ff968..184f25d0 100644 --- a/packages/my-joy-beta/src/graphql/list-metadata.gql +++ b/packages/my-joy-beta/src/graphql/list-metadata.gql @@ -1,4 +1,4 @@ -query Instance($name: String!) { +query instance($name: String!) { machines(name: $name) { id name diff --git a/packages/my-joy-beta/src/graphql/list-networks.gql b/packages/my-joy-beta/src/graphql/list-networks.gql index d257269e..4a778482 100644 --- a/packages/my-joy-beta/src/graphql/list-networks.gql +++ b/packages/my-joy-beta/src/graphql/list-networks.gql @@ -1,4 +1,4 @@ -query Instance($name: String!) { +query instance($name: String!) { machines(name: $name) { id name diff --git a/packages/my-joy-beta/src/graphql/list-snapshots.gql b/packages/my-joy-beta/src/graphql/list-snapshots.gql index fd5e0551..64d9f4f9 100644 --- a/packages/my-joy-beta/src/graphql/list-snapshots.gql +++ b/packages/my-joy-beta/src/graphql/list-snapshots.gql @@ -1,4 +1,4 @@ -query Instance($name: String!) { +query instance($name: String!) { machines(name: $name) { id name diff --git a/packages/my-joy-beta/src/graphql/list-tags.gql b/packages/my-joy-beta/src/graphql/list-tags.gql index cd48f6cc..0077c259 100644 --- a/packages/my-joy-beta/src/graphql/list-tags.gql +++ b/packages/my-joy-beta/src/graphql/list-tags.gql @@ -1,4 +1,4 @@ -query Instance($name: String!) { +query instance($name: String!) { machines(name: $name) { id name diff --git a/packages/my-joy-beta/src/graphql/reboot-instance.gql b/packages/my-joy-beta/src/graphql/reboot-instance.gql new file mode 100644 index 00000000..70b923ec --- /dev/null +++ b/packages/my-joy-beta/src/graphql/reboot-instance.gql @@ -0,0 +1,5 @@ +mutation rebootInstance($id: ID!) { + rebootMachine(id: $id) { + id + } +} diff --git a/packages/my-joy-beta/src/graphql/resize-instance.gql b/packages/my-joy-beta/src/graphql/resize-instance.gql new file mode 100644 index 00000000..b3e39578 --- /dev/null +++ b/packages/my-joy-beta/src/graphql/resize-instance.gql @@ -0,0 +1,3 @@ +mutation resizeInstance($id: ID!, $package: ID!) { + resizeMachine(id: $id, package: $package) +} diff --git a/packages/my-joy-beta/src/graphql/start-from-snapshot.gql b/packages/my-joy-beta/src/graphql/start-from-snapshot.gql new file mode 100644 index 00000000..824ee90f --- /dev/null +++ b/packages/my-joy-beta/src/graphql/start-from-snapshot.gql @@ -0,0 +1,3 @@ +mutation startInstanceFromSnapshot($id: ID!, $snapshot: ID!) { + startMachineFromSnapshot(id: $id, snapshot: $snapshot) +} diff --git a/packages/my-joy-beta/src/graphql/start-instance.gql b/packages/my-joy-beta/src/graphql/start-instance.gql new file mode 100644 index 00000000..fe110033 --- /dev/null +++ b/packages/my-joy-beta/src/graphql/start-instance.gql @@ -0,0 +1,3 @@ +mutation startInstance($id: ID!) { + startMachine(id: $id) +} diff --git a/packages/my-joy-beta/src/graphql/stop-instance.gql b/packages/my-joy-beta/src/graphql/stop-instance.gql new file mode 100644 index 00000000..0bc0d2d6 --- /dev/null +++ b/packages/my-joy-beta/src/graphql/stop-instance.gql @@ -0,0 +1,3 @@ +mutation stopInstance($id: ID!) { + stopMachine(id: $id) +} diff --git a/packages/my-joy-beta/src/state/store.js b/packages/my-joy-beta/src/state/store.js index add14fc7..5509bdc7 100644 --- a/packages/my-joy-beta/src/state/store.js +++ b/packages/my-joy-beta/src/state/store.js @@ -1,3 +1,4 @@ +import { reduxBatch } from '@manaflair/redux-batch'; import { createStore, combineReducers, applyMiddleware, compose } from 'redux'; import { reducer as formReducer } from 'redux-form'; import { ApolloClient, createNetworkInterface } from 'react-apollo'; @@ -52,6 +53,7 @@ export const store = createStore( }), state, // Initial state compose( + reduxBatch, applyMiddleware(client.middleware()), // If you are using the devToolsExtension, you can add it here also // eslint-disable-next-line no-negated-condition diff --git a/packages/ui-toolkit/src/form/base/toggle.js b/packages/ui-toolkit/src/form/base/toggle.js index 7b402e7c..5f376e07 100644 --- a/packages/ui-toolkit/src/form/base/toggle.js +++ b/packages/ui-toolkit/src/form/base/toggle.js @@ -126,9 +126,11 @@ const ToggleBase = ({ container = null, type = 'radio' }) => id: rndId() }; + const checked = type === 'checkbox' && rest.value === true; + const toggle = ( - +