diff --git a/packages/my-joyent/src/app.js b/packages/my-joyent/src/app.js index 317f5fd5..5afcb520 100644 --- a/packages/my-joyent/src/app.js +++ b/packages/my-joyent/src/app.js @@ -9,7 +9,6 @@ import { register } from './sw'; class App extends Component { componentWillMount() { - // eslint-disable-next-line no-unused-expressions injectGlobal` ${global} `; diff --git a/packages/my-joyent/src/components/filters/__tests__/__snapshots__/filters.spec.js.snap b/packages/my-joyent/src/components/filters/__tests__/__snapshots__/filters.spec.js.snap index ffa37fb8..ae0f7da1 100644 --- a/packages/my-joyent/src/components/filters/__tests__/__snapshots__/filters.spec.js.snap +++ b/packages/my-joyent/src/components/filters/__tests__/__snapshots__/filters.spec.js.snap @@ -233,9 +233,9 @@ exports[`renders without throwing 1`] = ` display: block; height: 0.875rem; width: 0.875rem; - -webkit-transform: translateY(-50%) translateX(-1%); - -ms-transform: translateY(-50%) translateX(-1%); - transform: translateY(-50%) translateX(-1%); + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); outline: none; position: absolute; top: 0; @@ -252,36 +252,6 @@ exports[`renders without throwing 1`] = ` box-shadow: 0 0 0 5px rgba(63,81,181,0.2); } -.c17 { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: #FFFFFF; - border: 2px solid #bdbdbd; - border-radius: 50%; - cursor: pointer; - display: block; - height: 0.875rem; - width: 0.875rem; - -webkit-transform: translateY(-50%) translateX(-99%); - -ms-transform: translateY(-50%) translateX(-99%); - transform: translateY(-50%) translateX(-99%); - outline: none; - position: absolute; - top: 0; - margin-top: 0.125rem; -} - -.c17::active { - -webkit-transform: scale(1.3); - -ms-transform: scale(1.3); - transform: scale(1.3); -} - -.c17::focus { - box-shadow: 0 0 0 5px rgba(63,81,181,0.2); -} - .c12 { background: #D8D8D8; cursor: pointer; @@ -483,7 +453,7 @@ exports[`renders without throwing 1`] = ` aria-valuemax={50.688} aria-valuemin={0.256} aria-valuenow={50.688} - className="c17" + className="c15" draggable="false" onKeyDown={[Function]} onMouseDown={[Function]} @@ -491,7 +461,7 @@ exports[`renders without throwing 1`] = ` role="slider" style={ Object { - "left": "100%", + "left": "94%", "position": "absolute", } } @@ -573,7 +543,7 @@ exports[`renders without throwing 1`] = ` aria-valuemax={3.25} aria-valuemin={0.25} aria-valuenow={3.25} - className="c17" + className="c15" draggable="false" onKeyDown={[Function]} onMouseDown={[Function]} @@ -581,7 +551,7 @@ exports[`renders without throwing 1`] = ` role="slider" style={ Object { - "left": "100%", + "left": "94%", "position": "absolute", } } @@ -663,7 +633,7 @@ exports[`renders without throwing 1`] = ` aria-valuemax={107.26} aria-valuemin={0.01} aria-valuenow={107.26} - className="c17" + className="c15" draggable="false" onKeyDown={[Function]} onMouseDown={[Function]} @@ -671,7 +641,7 @@ exports[`renders without throwing 1`] = ` role="slider" style={ Object { - "left": "100%", + "left": "94%", "position": "absolute", } } @@ -753,7 +723,7 @@ exports[`renders without throwing 1`] = ` aria-valuemax={0.525} aria-valuemin={0.016} aria-valuenow={0.525} - className="c17" + className="c15" draggable="false" onKeyDown={[Function]} onMouseDown={[Function]} @@ -761,7 +731,7 @@ exports[`renders without throwing 1`] = ` role="slider" style={ Object { - "left": "100%", + "left": "94%", "position": "absolute", } } diff --git a/packages/my-joyent/src/components/filters/__tests__/filters.spec.js b/packages/my-joyent/src/components/filters/__tests__/filters.spec.js index 218ca321..35335e15 100644 --- a/packages/my-joyent/src/components/filters/__tests__/filters.spec.js +++ b/packages/my-joyent/src/components/filters/__tests__/filters.spec.js @@ -6,14 +6,14 @@ import React from 'react'; import renderer from 'react-test-renderer'; import 'jest-styled-components'; -import { Router, FiltersMock } from '@mocks/'; +import { Router, FiltersMock, PackagesMock } from '@mocks/'; import Filters from '../filters'; it('renders without throwing', () => { const tree = renderer .create( - + ) .toJSON(); diff --git a/packages/my-joyent/src/components/filters/filters.js b/packages/my-joyent/src/components/filters/filters.js index 448e89dc..0ceb433a 100644 --- a/packages/my-joyent/src/components/filters/filters.js +++ b/packages/my-joyent/src/components/filters/filters.js @@ -2,10 +2,20 @@ import React, { Component } from 'react'; import styled from 'styled-components'; import remcalc from 'remcalc'; import isEqual from 'lodash.isequal'; -import { Label, Button } from 'joyent-ui-toolkit'; +import { Label, Button, Slider } from 'joyent-ui-toolkit'; import { default as defaultState } from '@state/state'; -import Sliders from '@components/sliders'; +const FilterWrapper = styled.section` + display: flex; + + > div { + flex-grow: 1; + + &:not(:last-child) { + margin-right: ${remcalc(36)}; + } + } +`; const GroupWrapper = styled.section` display: flex; @@ -30,24 +40,84 @@ const Subtitle = styled(Label)` margin-bottom: ${remcalc(8)}; `; +const getFirstAndLast = (arr, key) => { + const sorted = arr.sort( + (a, b) => (a[key] === b[key] ? 0 : a[key] < b[key] ? -1 : 1) + ); + + if (sorted.length > 0) { + return { + min: parseFloat(sorted[0][key]), + max: parseFloat(sorted[sorted.length - 1][key]) + }; + } +}; + class Filters extends Component { constructor(props) { super(props); + const { filters: { cpu, cost, ram, disk } } = this.props; this.state = { - reset: 0 + reset: 0, + ram, + cpu, + disk, + cost, + groupClick: 0, + defaults: this.props.filters }; + this.groupChange = this.groupChange.bind(this); this.handleResetClick = this.handleResetClick.bind(this); } + componentWillReceiveProps(nextProps) { + const { packages } = nextProps; + packages.length > 1 && + this.setState({ + ram: getFirstAndLast(packages, 'memory'), + cpu: getFirstAndLast(packages, 'vcpus'), + disk: getFirstAndLast(packages, 'disk'), + cost: getFirstAndLast(packages, 'price') + }); + } + + groupChange(group) { + this.props.groupChange(group); + + this.setState({ + groupClick: this.state.groupClick + 1 + }); + } + + shouldComponentUpdate(nextProps, nextState) { + const { groupClick, reset } = this.state; + const { filters } = this.props; + const filtersMap = filter => ({ + ram: filter.ram, + cost: filter.cost, + cpu: filter.cpu, + disk: filter.disk + }); + return ( + (nextState.groupClick !== groupClick && + isEqual(filtersMap(filters), filtersMap(nextProps.filters))) || + nextState.reset !== reset + ); + } + handleResetClick() { - const { filterReset } = this.props; + const { filterReset, filters: { cpu, cost, ram, disk } } = this.props; const { reset } = this.state; filterReset(); this.setState({ - reset: reset + 1 + reset: reset + 1, + ram, + cpu, + disk, + cost }); } @@ -58,11 +128,10 @@ class Filters extends Component { cpuSliderChange, diskSliderChange, costSliderChange, - groupChange, packages } = this.props; - const { reset } = this.state; + const { reset, cpu, cost, ram, disk, defaults } = this.state; return ( Choose package @@ -77,7 +146,7 @@ class Filters extends Component { tertiary small selected={group.selected} - onClick={() => groupChange(group)} + onClick={() => this.groupChange(group)} > {group.name} @@ -93,15 +162,52 @@ class Filters extends Component { - + + ramSliderChange(value)} + > + GB RAM + + cpuSliderChange(value)} + > + vCPUs + + diskSliderChange(value)} + > + TB Disk + + costSliderChange(value)} + > + $/hr + + ); } diff --git a/packages/my-joyent/src/components/package/__tests__/__snapshots__/index.spec.js.snap b/packages/my-joyent/src/components/package/__tests__/__snapshots__/index.spec.js.snap index 0dd1652e..674ea770 100644 --- a/packages/my-joyent/src/components/package/__tests__/__snapshots__/index.spec.js.snap +++ b/packages/my-joyent/src/components/package/__tests__/__snapshots__/index.spec.js.snap @@ -175,7 +175,7 @@ exports[`renders without throwing 1`] = ` font-size: 0.8125rem; font-weight: 500; text-transform: uppercase; - color: #bdbdbd; + color: rgba(73,73,73,0.8); -webkit-transition: all 300ms ease; transition: all 300ms ease; } @@ -253,7 +253,7 @@ exports[`renders without throwing 1`] = ` - 2 + 200 TB disk diff --git a/packages/my-joyent/src/components/package/index.js b/packages/my-joyent/src/components/package/index.js index 39844d2b..4451a03d 100644 --- a/packages/my-joyent/src/components/package/index.js +++ b/packages/my-joyent/src/components/package/index.js @@ -28,7 +28,7 @@ const Package = ({ {memory} GB RAM {vcpus} vCPUs - {disk / 100} TB disk + {disk} TB disk SSD diff --git a/packages/my-joyent/src/components/packages/__tests__/__snapshots__/list.spec.js.snap b/packages/my-joyent/src/components/packages/__tests__/__snapshots__/list.spec.js.snap index a363ffe7..4a6dc0d4 100644 --- a/packages/my-joyent/src/components/packages/__tests__/__snapshots__/list.spec.js.snap +++ b/packages/my-joyent/src/components/packages/__tests__/__snapshots__/list.spec.js.snap @@ -184,7 +184,7 @@ exports[`renders without throwing 1`] = ` font-size: 0.8125rem; font-weight: 500; text-transform: uppercase; - color: #bdbdbd; + color: rgba(73,73,73,0.8); -webkit-transition: all 300ms ease; transition: all 300ms ease; } @@ -324,7 +324,7 @@ exports[`renders without throwing 1`] = ` - 0.1 + 10 TB disk @@ -416,7 +416,7 @@ exports[`renders without throwing 1`] = ` - 0.25 + 25 TB disk @@ -508,7 +508,7 @@ exports[`renders without throwing 1`] = ` - 0.5 + 50 TB disk @@ -600,7 +600,7 @@ exports[`renders without throwing 1`] = ` - 1 + 100 TB disk @@ -692,7 +692,7 @@ exports[`renders without throwing 1`] = ` - 2 + 200 TB disk @@ -784,7 +784,7 @@ exports[`renders without throwing 1`] = ` - 4 + 400 TB disk diff --git a/packages/my-joyent/src/components/packages/list.js b/packages/my-joyent/src/components/packages/list.js index aad7a338..2e4b44e8 100644 --- a/packages/my-joyent/src/components/packages/list.js +++ b/packages/my-joyent/src/components/packages/list.js @@ -33,7 +33,7 @@ class Packages extends Component { selected: id !== this.state.selected ? id : null }); } - + render() { const { packages } = this.props; const { selected } = this.state; @@ -41,7 +41,7 @@ class Packages extends Component { return ( {packages.length > 0 ? ( - packages.map(pack => ( + packages.sort((a, b) => a.price > b.price ? 1 : -1).map(pack => ( )) - ) : ( + ) : ( - - + + )} ); diff --git a/packages/my-joyent/src/components/sliders/index.js b/packages/my-joyent/src/components/sliders/index.js deleted file mode 100644 index 0330d8cb..00000000 --- a/packages/my-joyent/src/components/sliders/index.js +++ /dev/null @@ -1,71 +0,0 @@ -import React from 'react'; -import { Slider } from 'joyent-ui-toolkit'; -import styled from 'styled-components'; -import remcalc from 'remcalc'; - -const FilterWrapper = styled.section` - display: flex; - - > div { - flex-grow: 1; - - &:not(:last-child) { - margin-right: ${remcalc(36)}; - } - } -`; - -const Sliders = ({ - filters: { cpu, cost, ram, disk }, - ramSliderChange, - cpuSliderChange, - diskSliderChange, - costSliderChange, - reset, - greyed -}) => ( - - ramSliderChange(value)} - > - GB RAM - - cpuSliderChange(value)} - > - vCPUs - - diskSliderChange(value)} - > - TB Disk - - costSliderChange(value)} - > - $/hr - - - ); - -export default Sliders; diff --git a/packages/my-joyent/src/containers/home/__tests__/__snapshots__/index.spec.js.snap b/packages/my-joyent/src/containers/home/__tests__/__snapshots__/index.spec.js.snap index 9cfadae3..6dabc64e 100644 --- a/packages/my-joyent/src/containers/home/__tests__/__snapshots__/index.spec.js.snap +++ b/packages/my-joyent/src/containers/home/__tests__/__snapshots__/index.spec.js.snap @@ -20,7 +20,7 @@ exports[`renders without throwing 1`] = ` margin-left: -0.5rem; } -.c38 { +.c37 { box-sizing: border-box; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; @@ -29,7 +29,7 @@ exports[`renders without throwing 1`] = ` padding-left: 0.5rem; } -.c42 { +.c41 { box-sizing: border-box; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; @@ -316,7 +316,7 @@ exports[`renders without throwing 1`] = ` margin-left: 1.25rem; } -.c49 { +.c48 { font-family: sans-serif; font-size: 100%; line-height: 1.15; @@ -361,43 +361,43 @@ exports[`renders without throwing 1`] = ` border: solid 0.0625rem; } -.c49::-moz-focus-inner, -.c49[type='button']::-moz-focus-inner, -.c49[type='reset']::-moz-focus-inner, -.c49[type='submit']::-moz-focus-inner { +.c48::-moz-focus-inner, +.c48[type='button']::-moz-focus-inner, +.c48[type='reset']::-moz-focus-inner, +.c48[type='submit']::-moz-focus-inner { border-style: none; padding: 0; } -.c49:-moz-focusring, -.c49[type='button']:-moz-focusring, -.c49[type='reset']:-moz-focusring, -.c49[type='submit']:-moz-focusring { +.c48:-moz-focusring, +.c48[type='button']:-moz-focusring, +.c48[type='reset']:-moz-focusring, +.c48[type='submit']:-moz-focusring { outline: 0.0625rem dotted ButtonText; } -.c49:focus { +.c48:focus { outline: 0; text-decoration: none; } -.c49:hover { +.c48:hover { border: solid 0.0625rem; } -.c49:active, -.c49:active:hover, -.c49:active:focus { +.c48:active, +.c48:active:hover, +.c48:active:focus { background-image: none; outline: 0; } -.c49[disabled] { +.c48[disabled] { cursor: not-allowed; pointer-events: none; } -.c49 + button { +.c48 + button { margin-left: 1.25rem; } @@ -544,9 +544,9 @@ exports[`renders without throwing 1`] = ` display: block; height: 0.875rem; width: 0.875rem; - -webkit-transform: translateY(-50%) translateX(-1%); - -ms-transform: translateY(-50%) translateX(-1%); - transform: translateY(-50%) translateX(-1%); + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); outline: none; position: absolute; top: 0; @@ -563,36 +563,6 @@ exports[`renders without throwing 1`] = ` box-shadow: 0 0 0 5px rgba(63,81,181,0.2); } -.c36 { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: #FFFFFF; - border: 2px solid #bdbdbd; - border-radius: 50%; - cursor: pointer; - display: block; - height: 0.875rem; - width: 0.875rem; - -webkit-transform: translateY(-50%) translateX(-99%); - -ms-transform: translateY(-50%) translateX(-99%); - transform: translateY(-50%) translateX(-99%); - outline: none; - position: absolute; - top: 0; - margin-top: 0.125rem; -} - -.c36::active { - -webkit-transform: scale(1.3); - -ms-transform: scale(1.3); - transform: scale(1.3); -} - -.c36::focus { - box-shadow: 0 0 0 5px rgba(63,81,181,0.2); -} - .c31 { background: #D8D8D8; cursor: pointer; @@ -617,7 +587,7 @@ exports[`renders without throwing 1`] = ` margin-top: 0.75rem; } -.c44 { +.c43 { font-size: 0.9375rem; line-height: 1.5; font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; @@ -645,7 +615,7 @@ exports[`renders without throwing 1`] = ` transition: all 300ms ease; } -.c40 { +.c39 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -683,7 +653,7 @@ exports[`renders without throwing 1`] = ` transition: all 300ms ease; } -.c41 { +.c40 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -712,7 +682,7 @@ exports[`renders without throwing 1`] = ` flex-direction: row; } -.c43 { +.c42 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -738,7 +708,7 @@ exports[`renders without throwing 1`] = ` transform: translateY(-50%); } -.c46 { +.c45 { display: inline-block; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -754,14 +724,14 @@ exports[`renders without throwing 1`] = ` justify-content: flex-end; } -.c45 { +.c44 { display: inline-block; padding: 0 1.125rem; font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; font-weight: 400; } -.c47 { +.c46 { font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; font-weight: 400; -webkit-flex-grow: 1; @@ -772,7 +742,7 @@ exports[`renders without throwing 1`] = ` flex-basis: 5.625rem; } -.c48 { +.c47 { display: inline-block; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -782,7 +752,7 @@ exports[`renders without throwing 1`] = ` font-size: 0.8125rem; font-weight: 500; text-transform: uppercase; - color: #bdbdbd; + color: rgba(73,73,73,0.8); -webkit-transition: all 300ms ease; transition: all 300ms ease; } @@ -857,12 +827,12 @@ exports[`renders without throwing 1`] = ` margin-bottom: 0.5rem; } -.c39 { +.c38 { margin-right: 1.125rem; margin-bottom: 1.125rem; } -.c37 { +.c36 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -883,7 +853,7 @@ exports[`renders without throwing 1`] = ` } @media only screen and (min-width:0em) { - .c38 { + .c37 { -webkit-flex-basis: 100%; -ms-flex-basis: 100%; flex-basis: 100%; @@ -893,7 +863,7 @@ exports[`renders without throwing 1`] = ` } @media only screen and (min-width:48em) { - .c38 { + .c37 { -webkit-flex-basis: 50%; -ms-flex-basis: 50%; flex-basis: 50%; @@ -903,7 +873,7 @@ exports[`renders without throwing 1`] = ` } @media only screen and (min-width:64em) { - .c38 { + .c37 { -webkit-flex-basis: 33.333333333333336%; -ms-flex-basis: 33.333333333333336%; flex-basis: 33.333333333333336%; @@ -913,7 +883,7 @@ exports[`renders without throwing 1`] = ` } @media only screen and (min-width:75em) { - .c38 { + .c37 { -webkit-flex-basis: 25%; -ms-flex-basis: 25%; flex-basis: 25%; @@ -923,7 +893,7 @@ exports[`renders without throwing 1`] = ` } @media only screen and (min-width:0em) { - .c42 { + .c41 { -webkit-flex-basis: 50%; -ms-flex-basis: 50%; flex-basis: 50%; @@ -1208,7 +1178,7 @@ exports[`renders without throwing 1`] = ` aria-valuemax={63.8} aria-valuemin={0.256} aria-valuenow={63.8} - className="c36" + className="c34" draggable="false" onKeyDown={[Function]} onMouseDown={[Function]} @@ -1216,7 +1186,7 @@ exports[`renders without throwing 1`] = ` role="slider" style={ Object { - "left": "100%", + "left": "94%", "position": "absolute", } } @@ -1298,7 +1268,7 @@ exports[`renders without throwing 1`] = ` aria-valuemax={8} aria-valuemin={0.25} aria-valuenow={8} - className="c36" + className="c34" draggable="false" onKeyDown={[Function]} onMouseDown={[Function]} @@ -1306,7 +1276,7 @@ exports[`renders without throwing 1`] = ` role="slider" style={ Object { - "left": "100%", + "left": "94%", "position": "absolute", } } @@ -1388,7 +1358,7 @@ exports[`renders without throwing 1`] = ` aria-valuemax={4.9} aria-valuemin={0.01} aria-valuenow={4.9} - className="c36" + className="c34" draggable="false" onKeyDown={[Function]} onMouseDown={[Function]} @@ -1396,7 +1366,7 @@ exports[`renders without throwing 1`] = ` role="slider" style={ Object { - "left": "100%", + "left": "94%", "position": "absolute", } } @@ -1446,7 +1416,7 @@ exports[`renders without throwing 1`] = `
without throwing 1`] = ` className="c35" type="max" > - 2.131 + 2.318
without throwing 1`] = ` role="slider" style={ Object { - "left": "100%", + "left": "94%", "position": "absolute", } } @@ -1504,30 +1474,30 @@ exports[`renders without throwing 1`] = ` className="c2" >
@@ -1536,58 +1506,58 @@ exports[`renders without throwing 1`] = ` per hour
0.256 GB RAM
0.25 vCPUs
- 0.1 + 0.01 TB disk
SSD
Compute Optimized @@ -1599,27 +1569,27 @@ exports[`renders without throwing 1`] = `
@@ -1628,58 +1598,58 @@ exports[`renders without throwing 1`] = ` per hour
0.768 GB RAM
0.5 vCPUs
- 0.25 + 0.025 TB disk
SSD
Compute Optimized @@ -1691,27 +1661,27 @@ exports[`renders without throwing 1`] = `
@@ -1720,58 +1690,58 @@ exports[`renders without throwing 1`] = ` per hour
1.8 GB RAM
1 vCPUs
- 0.5 + 0.05 TB disk
SSD
Compute Optimized @@ -1783,303 +1753,27 @@ exports[`renders without throwing 1`] = `
- $ - 0.131 - per hour -
-
- - 3.8 - GB RAM - -
-
- - 2 - vCPUs - -
-
- - 1 - TB disk - -
-
- - SSD - -
-
- - Compute Optimized - -
-
-
-
-
-
-
-
-
-
-
-
- $ - 0.263 - per hour -
-
- - 7.8 - GB RAM - -
-
- - 4 - vCPUs - -
-
- - 2 - TB disk - -
-
- - SSD - -
-
- - Compute Optimized - -
-
-
-
-
-
-
-
-
-
-
-
- $ - 0.525 - per hour -
-
- - 15.8 - GB RAM - -
-
- - 8 - vCPUs - -
-
- - 4 - TB disk - -
-
- - SSD - -
-
- - Compute Optimized - -
-
-
-
-
-
-
-
-
-
-
-
@@ -2088,58 +1782,58 @@ exports[`renders without throwing 1`] = ` per hour
3.8 GB RAM
1 vCPUs
0.5 TB disk
SSD
General Purpose @@ -2151,27 +1845,119 @@ exports[`renders without throwing 1`] = `
+ $ + 0.131 + per hour +
+
+ + 3.8 + GB RAM + +
+
+ + 2 + vCPUs + +
+
+ + 0.1 + TB disk + +
+
+ + SSD + +
+
+ + Compute Optimized + +
+
+
+
+
+
+
+
+
+
+
+
@@ -2180,58 +1966,58 @@ exports[`renders without throwing 1`] = ` per hour
7.8 GB RAM
2 vCPUs
- 1 + 0.1 TB disk
SSD
General Purpose @@ -2243,211 +2029,27 @@ exports[`renders without throwing 1`] = `
- $ - 0.333 - per hour -
-
- - 15.8 - GB RAM - -
-
- - 4 - vCPUs - -
-
- - 2 - TB disk - -
-
- - SSD - -
-
- - General Purpose - -
-
-
-
-
-
-
-
-
-
-
-
- $ - 0.665 - per hour -
-
- - 31.8 - GB RAM - -
-
- - 8 - vCPUs - -
-
- - 4 - TB disk - -
-
- - SSD - -
-
- - General Purpose - -
-
-
-
-
-
-
-
-
-
-
-
@@ -2456,58 +2058,58 @@ exports[`renders without throwing 1`] = ` per hour
15.8 GB RAM
2 vCPUs
- 1 + 0.1 TB disk
SSD
Memory Optimized @@ -2519,90 +2121,90 @@ exports[`renders without throwing 1`] = `
$ - 0.52 + 0.263 per hour
- 31.8 + 7.8 GB RAM
4 vCPUs
- 2 + 0.2 TB disk
SSD
- Memory Optimized + Compute Optimized
@@ -2611,182 +2213,90 @@ exports[`renders without throwing 1`] = `
$ - 1.039 + 0.333 per hour
- 63.8 + 15.8 GB RAM
- 8 - vCPUs - -
-
- - 4 - TB disk - -
-
- - SSD - -
-
- - Memory Optimized - -
-
-
-
-
-
-
-
-
-
-
-
- $ - 1.066 - per hour -
-
- - 31.8 - GB RAM - -
-
- 4 vCPUs
- 8 + 0.2 TB disk
SSD
- Storage Optimized + General Purpose
@@ -2795,119 +2305,27 @@ exports[`renders without throwing 1`] = `
- $ - 2.31 - per hour -
-
- - 63.8 - GB RAM - -
-
- - 8 - vCPUs - -
-
- - 16 - TB disk - -
-
- - SSD - -
-
- - Storage Optimized - -
-
-
-
-
-
-
-
-
-
-
-
@@ -2916,58 +2334,58 @@ exports[`renders without throwing 1`] = ` per hour
15.8 GB RAM
2 vCPUs
- 12 + 1.2 TB disk
SSD
Storage Optimized @@ -2979,27 +2397,303 @@ exports[`renders without throwing 1`] = `
+ $ + 0.52 + per hour +
+
+ + 31.8 + GB RAM + +
+
+ + 4 + vCPUs + +
+
+ + 0.1 + TB disk + +
+
+ + SSD + +
+
+ + Memory Optimized + +
+
+
+
+
+
+
+
+
+
+
+
+ $ + 0.525 + per hour +
+
+ + 15.8 + GB RAM + +
+
+ + 8 + vCPUs + +
+
+ + 0.4 + TB disk + +
+
+ + SSD + +
+
+ + Compute Optimized + +
+
+
+
+
+
+
+
+
+
+
+
+ $ + 0.665 + per hour +
+
+ + 31.8 + GB RAM + +
+
+ + 8 + vCPUs + +
+
+ + 0.4 + TB disk + +
+
+ + SSD + +
+
+ + General Purpose + +
+
+
+
+
+
+
+
+
+
+
+
@@ -3008,58 +2702,58 @@ exports[`renders without throwing 1`] = ` per hour
31.8 GB RAM
4 vCPUs
- 24 + 2.4 TB disk
SSD
Storage Optimized @@ -3071,27 +2765,211 @@ exports[`renders without throwing 1`] = `
+ $ + 1.039 + per hour +
+
+ + 63.8 + GB RAM + +
+
+ + 8 + vCPUs + +
+
+ + 0.4 + TB disk + +
+
+ + SSD + +
+
+ + Memory Optimized + +
+
+
+
+
+
+
+
+
+
+
+
+ $ + 1.066 + per hour +
+
+ + 31.8 + GB RAM + +
+
+ + 4 + vCPUs + +
+
+ + 0.8 + TB disk + +
+
+ + SSD + +
+
+ + Storage Optimized + +
+
+
+
+
+
+
+
+
+
+
+
@@ -3100,58 +2978,150 @@ exports[`renders without throwing 1`] = ` per hour
63.8 GB RAM
8 vCPUs
- 49 + 4.9 TB disk
SSD
+ Storage Optimized + +
+
+
+
+
+
+
+
+
+
+
+
+ $ + 2.31 + per hour +
+
+ + 63.8 + GB RAM + +
+
+ + 8 + vCPUs + +
+
+ + 1.6 + TB disk + +
+
+ + SSD + +
+
+ Storage Optimized @@ -3168,7 +3138,7 @@ exports[`renders without throwing 1`] = ` className="c2" > diff --git a/packages/my-joyent/src/containers/home/index.js b/packages/my-joyent/src/containers/home/index.js index 04d28097..b22829be 100644 --- a/packages/my-joyent/src/containers/home/index.js +++ b/packages/my-joyent/src/containers/home/index.js @@ -15,7 +15,7 @@ const HomeHOC = (props) => ( const mapStateToProps = state => { return { filters: state.app.filters, - packages: state.app.packages.length + packages: state.app.packages }; }; diff --git a/packages/my-joyent/src/containers/packages/__tests__/__snapshots__/index.spec.js.snap b/packages/my-joyent/src/containers/packages/__tests__/__snapshots__/index.spec.js.snap index d185c678..65ebb017 100644 --- a/packages/my-joyent/src/containers/packages/__tests__/__snapshots__/index.spec.js.snap +++ b/packages/my-joyent/src/containers/packages/__tests__/__snapshots__/index.spec.js.snap @@ -184,7 +184,7 @@ exports[`renders without throwing 1`] = ` font-size: 0.8125rem; font-weight: 500; text-transform: uppercase; - color: #bdbdbd; + color: rgba(73,73,73,0.8); -webkit-transition: all 300ms ease; transition: all 300ms ease; } @@ -324,7 +324,7 @@ exports[`renders without throwing 1`] = ` - 0.1 + 0.01 TB disk
@@ -416,7 +416,7 @@ exports[`renders without throwing 1`] = ` - 0.25 + 0.025 TB disk
@@ -508,283 +508,7 @@ exports[`renders without throwing 1`] = ` - 0.5 - TB disk - -
-
- - SSD - -
-
- - Compute Optimized - -
-
-
-
-
-
-
-
-
-
-
-
- $ - 0.131 - per hour -
-
- - 3.8 - GB RAM - -
-
- - 2 - vCPUs - -
-
- - 1 - TB disk - -
-
- - SSD - -
-
- - Compute Optimized - -
-
-
-
-
-
-
-
-
-
-
-
- $ - 0.263 - per hour -
-
- - 7.8 - GB RAM - -
-
- - 4 - vCPUs - -
-
- - 2 - TB disk - -
-
- - SSD - -
-
- - Compute Optimized - -
-
-
-
-
-
-
-
-
-
-
-
- $ - 0.525 - per hour -
-
- - 15.8 - GB RAM - -
-
- - 8 - vCPUs - -
-
- - 4 + 0.05 TB disk
@@ -907,6 +631,98 @@ exports[`renders without throwing 1`] = `
+
+
+
+
+
+
+ $ + 0.131 + per hour +
+
+ + 3.8 + GB RAM + +
+
+ + 2 + vCPUs + +
+
+ + 0.1 + TB disk + +
+
+ + SSD + +
+
+ + Compute Optimized + +
+
+
+
+
+
@@ -968,191 +784,7 @@ exports[`renders without throwing 1`] = ` - 1 - TB disk - -
-
- - SSD - -
-
- - General Purpose - -
-
-
-
-
-
-
-
-
-
-
-
- $ - 0.333 - per hour -
-
- - 15.8 - GB RAM - -
-
- - 4 - vCPUs - -
-
- - 2 - TB disk - -
-
- - SSD - -
-
- - General Purpose - -
-
-
-
-
-
-
-
-
-
-
-
- $ - 0.665 - per hour -
-
- - 31.8 - GB RAM - -
-
- - 8 - vCPUs - -
-
- - 4 + 0.1 TB disk
@@ -1244,7 +876,7 @@ exports[`renders without throwing 1`] = ` - 1 + 0.1 TB disk
@@ -1275,6 +907,282 @@ exports[`renders without throwing 1`] = `
+
+
+
+
+
+
+ $ + 0.263 + per hour +
+
+ + 7.8 + GB RAM + +
+
+ + 4 + vCPUs + +
+
+ + 0.2 + TB disk + +
+
+ + SSD + +
+
+ + Compute Optimized + +
+
+
+
+
+
+
+
+
+
+
+
+ $ + 0.333 + per hour +
+
+ + 15.8 + GB RAM + +
+
+ + 4 + vCPUs + +
+
+ + 0.2 + TB disk + +
+
+ + SSD + +
+
+ + General Purpose + +
+
+
+
+
+
+
+
+
+
+
+
+ $ + 0.413 + per hour +
+
+ + 15.8 + GB RAM + +
+
+ + 2 + vCPUs + +
+
+ + 1.2 + TB disk + +
+
+ + SSD + +
+
+ + Storage Optimized + +
+
+
+
+
+
@@ -1336,7 +1244,7 @@ exports[`renders without throwing 1`] = ` - 2 + 0.1 TB disk
@@ -1367,6 +1275,282 @@ exports[`renders without throwing 1`] = `
+
+
+
+
+
+
+ $ + 0.525 + per hour +
+
+ + 15.8 + GB RAM + +
+
+ + 8 + vCPUs + +
+
+ + 0.4 + TB disk + +
+
+ + SSD + +
+
+ + Compute Optimized + +
+
+
+
+
+
+
+
+
+
+
+
+ $ + 0.665 + per hour +
+
+ + 31.8 + GB RAM + +
+
+ + 8 + vCPUs + +
+
+ + 0.4 + TB disk + +
+
+ + SSD + +
+
+ + General Purpose + +
+
+
+
+
+
+
+
+
+
+
+
+ $ + 0.825 + per hour +
+
+ + 31.8 + GB RAM + +
+
+ + 4 + vCPUs + +
+
+ + 2.4 + TB disk + +
+
+ + SSD + +
+
+ + Storage Optimized + +
+
+
+
+
+
@@ -1428,7 +1612,7 @@ exports[`renders without throwing 1`] = ` - 4 + 0.4 TB disk
@@ -1520,283 +1704,7 @@ exports[`renders without throwing 1`] = ` - 8 - TB disk - -
-
- - SSD - -
-
- - Storage Optimized - -
-
-
-
-
-
-
-
-
-
-
-
- $ - 2.31 - per hour -
-
- - 63.8 - GB RAM - -
-
- - 8 - vCPUs - -
-
- - 16 - TB disk - -
-
- - SSD - -
-
- - Storage Optimized - -
-
-
-
-
-
-
-
-
-
-
-
- $ - 0.413 - per hour -
-
- - 15.8 - GB RAM - -
-
- - 2 - vCPUs - -
-
- - 12 - TB disk - -
-
- - SSD - -
-
- - Storage Optimized - -
-
-
-
-
-
-
-
-
-
-
-
- $ - 0.825 - per hour -
-
- - 31.8 - GB RAM - -
-
- - 4 - vCPUs - -
-
- - 24 + 0.8 TB disk
@@ -1888,7 +1796,99 @@ exports[`renders without throwing 1`] = ` - 49 + 4.9 + TB disk + +
+
+ + SSD + +
+
+ + Storage Optimized + +
+
+
+
+
+
+
+
+
+
+
+
+ $ + 2.31 + per hour +
+
+ + 63.8 + GB RAM + +
+
+ + 8 + vCPUs + +
+
+ + 1.6 TB disk
diff --git a/packages/my-joyent/src/data/packages.json b/packages/my-joyent/src/data/packages.json index 93a67f87..b378b50b 100644 --- a/packages/my-joyent/src/data/packages.json +++ b/packages/my-joyent/src/data/packages.json @@ -4,161 +4,161 @@ "name": "High CPU 0.25", "vcpus": 0.25, "memory": 0.256, - "disk": 10, + "disk": 0.010, "group": "Compute Optimized", - "price": "0.016" + "price": 0.016 }, { "id": 2, "name": "High CPU 0.75", "vcpus": 0.5, "memory": 0.768, - "disk": 25, + "disk": 0.025, "group": "Compute Optimized", - "price": "0.033" + "price": 0.033 }, { "id": 3, "name": "High CPU 1.75", "vcpus": 1, "memory": 1.8, - "disk": 50, + "disk": 0.050, "group": "Compute Optimized", - "price": "0.066" + "price": 0.066 }, { "id": 4, "name": "High CPU 3.75", "vcpus": 2, "memory": 3.8, - "disk": 100, + "disk": 0.1, "group": "Compute Optimized", - "price": "0.131" + "price": 0.131 }, { "id": 5, "name": "High CPU 7.75", "vcpus": 4, "memory": 7.8, - "disk": 200, + "disk": 0.2, "group": "Compute Optimized", - "price": "0.263" + "price": 0.263 }, { "id": 6, "name": "High CPU 15.75", "vcpus": 8, "memory": 15.8, - "disk": 400, + "disk": 0.4, "group": "Compute Optimized", - "price": "0.525" + "price": 0.525 }, { "id": 7, "name": "General 3.75", "vcpus": 1, "memory": 3.8, - "disk": 50, + "disk": 0.5, "group": "General Purpose", - "price": "0.084" + "price": 0.084 }, { "id": 8, "name": "General 7.75", "vcpus": 2, "memory": 7.8, - "disk": 100, + "disk": 0.1, "group": "General Purpose", - "price": "0.166" + "price": 0.166 }, { "id": 9, "name": "General 15.75", "vcpus": 4, "memory": 15.8, - "disk": 200, + "disk": 0.2, "group": "General Purpose", - "price": "0.333" + "price": 0.333 }, { "id": 10, "name": "General 31.75", "vcpus": 8, "memory": 31.8, - "disk": 400, + "disk": 0.4, "group": "General Purpose", - "price": "0.665" + "price": 0.665 }, { "id": 11, "name": "High RAM 15.75", "vcpus": 2, "memory": 15.8, - "disk": 100, + "disk": 0.1, "group": "Memory Optimized", - "price": "0.259" + "price": 0.259 }, { "id": 12, "name": "High RAM 31.75", "vcpus": 4, "memory": 31.8, - "disk": 200, + "disk": 0.1, "group": "Memory Optimized", - "price": "0.52" + "price": 0.520 }, { "id": 13, "name": "High RAM 63.75", "vcpus": 8, "memory": 63.8, - "disk": 400, + "disk": 0.4, "group": "Memory Optimized", - "price": "1.039" + "price": 1.039 }, { "id": 14, "name": "Fast Disk 31.75", "vcpus": 4, "memory": 31.8, - "disk": 800, + "disk": 0.8, "group": "Storage Optimized", - "price": "1.066" + "price": 1.066 }, { "id": 15, "name": "Fast Disk 63.75", "vcpus": 8, "memory": 63.8, - "disk": 1600, + "disk": 1.6, "group": "Storage Optimized", - "price": "2.31" - }, + "price": 2.310 +}, { "id": 16, "name": "Big Disk 15.75", "vcpus": 2, "memory": 15.8, - "disk": 1200, + "disk": 1.2, "group": "Storage Optimized", - "price": "0.413" + "price": 0.413 }, { "id": 17, "name": "Big Disk 31.75", "vcpus": 4, "memory": 31.8, - "disk": 2400, + "disk": 2.4, "group": "Storage Optimized", - "price": "0.825" + "price": 0.825 }, { "id": 18, "name": "Big Disk 63.75", "vcpus": 8, "memory": 63.8, - "disk": 4900, + "disk": 4.9, "group": "Storage Optimized", - "price": "1.75" + "price": 1.750 } ] diff --git a/packages/my-joyent/src/state/filterReducer.js b/packages/my-joyent/src/state/filterReducer.js index de56ffd9..d660e7f0 100644 --- a/packages/my-joyent/src/state/filterReducer.js +++ b/packages/my-joyent/src/state/filterReducer.js @@ -19,8 +19,8 @@ const filterReducer = (state = defaultState, action) => { ) .filter( pack => - pack.disk / 1000 >= action.filters.disk.min && - pack.disk / 1000 <= action.filters.disk.max + pack.disk >= action.filters.disk.min && + pack.disk <= action.filters.disk.max ) .filter( pack => diff --git a/packages/my-joyent/src/state/state.js b/packages/my-joyent/src/state/state.js index ce426508..31ab5cd9 100644 --- a/packages/my-joyent/src/state/state.js +++ b/packages/my-joyent/src/state/state.js @@ -3,7 +3,7 @@ import packages from '../data/packages'; const state = { filters: { cpu: { min: 0.25, max: 8 }, - cost: { min: 0.016, max: 2.131 }, + cost: { min: 0.016, max: 2.318 }, ram: { min: 0.256, max: 63.8 }, disk: { min: 0.01, max: 4.9 }, groups: [ diff --git a/packages/ui-toolkit/src/slider/Readme.md b/packages/ui-toolkit/src/slider/Readme.md index 77e344e7..ff9bea32 100644 --- a/packages/ui-toolkit/src/slider/Readme.md +++ b/packages/ui-toolkit/src/slider/Readme.md @@ -5,7 +5,7 @@ minValue={0.25} maxValue={8} step={0.25} - value={{ min: 0.25, max: 8 }} + value={{ min: 4, max: 4 }} onChangeComplete={value => console.log(value)} onChange={value => console.log(value)} >vCPUs diff --git a/packages/ui-toolkit/src/slider/react-input-range/input-range/input-range.jsx b/packages/ui-toolkit/src/slider/react-input-range/input-range/input-range.jsx index da00a142..160cc1c7 100755 --- a/packages/ui-toolkit/src/slider/react-input-range/input-range/input-range.jsx +++ b/packages/ui-toolkit/src/slider/react-input-range/input-range/input-range.jsx @@ -111,6 +111,10 @@ export default class InputRange extends Component { this.handleKeyUp = this.handleKeyUp.bind(this); this.handleTouchStart = this.handleTouchStart.bind(this); this.handleTouchEnd = this.handleTouchEnd.bind(this); + + this.state = { + value: this.props.value + } } /** @@ -617,7 +621,7 @@ export default class InputRange extends Component { this.props, this.isMultiValue() ); - const percentages = valueTransformer.getPercentagesFromValues( + let percentages = valueTransformer.getPercentagesFromValues( values, this.props.minValue, this.props.maxValue diff --git a/packages/ui-toolkit/src/slider/react-input-range/input-range/slider.jsx b/packages/ui-toolkit/src/slider/react-input-range/input-range/slider.jsx index e1ca9b3e..9284439f 100755 --- a/packages/ui-toolkit/src/slider/react-input-range/input-range/slider.jsx +++ b/packages/ui-toolkit/src/slider/react-input-range/input-range/slider.jsx @@ -15,10 +15,7 @@ export const SliderStyled = styled.div` display: block; height: ${remcalc(14)}; width: ${remcalc(14)}; - transform: ${props => - props.type === 'max' - ? 'translateY(-50%) translateX(-99%)' - : 'translateY(-50%) translateX(-1%)'}; + transform: translateY(-50%); outline: none; position: absolute; top: 0; @@ -118,10 +115,10 @@ export default class Slider extends Component { * @return {Object} */ getStyle() { - const perc = (this.props.percentage || 0) * 100; + const percentage = (this.props.percentage || 0) * 100; const style = { position: 'absolute', - left: `${perc}%` + left: `${percentage > 94 ? 94 : percentage}%`, }; return style; @@ -289,11 +286,16 @@ export default class Slider extends Component { this.node = node; }} > -