diff --git a/packages/icons/src/cpu.js b/packages/icons/src/cpu.js new file mode 100644 index 00000000..286d53f2 --- /dev/null +++ b/packages/icons/src/cpu.js @@ -0,0 +1,36 @@ +import React from 'react'; + +import Colors from './colors'; +import Rotate from './rotate'; +import calcFill from './fill'; + +export default ({ + fill = null, + light = false, + disabled = false, + direction = 'down', + style = {}, + ...rest +}) => ( + + {colors => ( + + {({ style: rotateStyle }) => ( + + + + )} + + )} + +); diff --git a/packages/icons/src/general.js b/packages/icons/src/general.js new file mode 100644 index 00000000..d6a3658b --- /dev/null +++ b/packages/icons/src/general.js @@ -0,0 +1,36 @@ +import React from 'react'; + +import Colors from './colors'; +import Rotate from './rotate'; +import calcFill from './fill'; + +export default ({ + fill = null, + light = false, + disabled = false, + direction = 'down', + style = {}, + ...rest +}) => ( + + {colors => ( + + {({ style: rotateStyle }) => ( + + + + )} + + )} + +); diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js index b691ab64..289ef918 100644 --- a/packages/icons/src/index.js +++ b/packages/icons/src/index.js @@ -36,3 +36,7 @@ export { default as User } from './user'; export { default as Randomize } from './randomize'; export { default as Name } from './name'; export { default as Fabric } from './fabric'; +export { default as Cpu } from './cpu'; +export { default as Memory } from './memory'; +export { default as Storage } from './storage'; +export { default as General } from './general'; diff --git a/packages/icons/src/memory.js b/packages/icons/src/memory.js new file mode 100644 index 00000000..4f62450d --- /dev/null +++ b/packages/icons/src/memory.js @@ -0,0 +1,36 @@ +import React from 'react'; + +import Colors from './colors'; +import Rotate from './rotate'; +import calcFill from './fill'; + +export default ({ + fill = null, + light = false, + disabled = false, + direction = 'down', + style = {}, + ...rest +}) => ( + + {colors => ( + + {({ style: rotateStyle }) => ( + + + + )} + + )} + +); diff --git a/packages/icons/src/storage.js b/packages/icons/src/storage.js new file mode 100644 index 00000000..7ef9e8f5 --- /dev/null +++ b/packages/icons/src/storage.js @@ -0,0 +1,36 @@ +import React from 'react'; + +import Colors from './colors'; +import Rotate from './rotate'; +import calcFill from './fill'; + +export default ({ + fill = null, + light = false, + disabled = false, + direction = 'down', + style = {}, + ...rest +}) => ( + + {colors => ( + + {({ style: rotateStyle }) => ( + + + + )} + + )} + +); diff --git a/packages/my-joy-beta/package.json b/packages/my-joy-beta/package.json index cc85f4a8..234631da 100644 --- a/packages/my-joy-beta/package.json +++ b/packages/my-joy-beta/package.json @@ -23,9 +23,9 @@ "apollo": "^0.2.2", "apr-intercept": "^1.0.4", "clipboard-copy": "^1.2.0", + "constant-case": "^2.0.0", "date-fns": "^1.29.0", "declarative-redux-form": "^2.0.8", - "joyent-ui-toolkit": "^4.0.0", "joyent-manifest-editor": "^1.4.0", "joyent-ui-toolkit": "^4.0.1", "lodash.find": "^4.6.0", @@ -35,6 +35,7 @@ "lunr": "^2.1.5", "normalized-styled-components": "^1.0.17", "param-case": "^2.1.1", + "prettysize": "^1.1.0", "prop-types": "^15.6.0", "react": "^16.2.0", "react-apollo": "^1.4.16", diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/images.spec.js.snap b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/images.spec.js.snap index 2222835a..093598b1 100644 --- a/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/images.spec.js.snap +++ b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/images.spec.js.snap @@ -354,7 +354,15 @@ exports[`renders without throwing 1`] = `

- Hardware virtual machines are generally used for non-containerized applications. Infrastructure containers are generally for running any Linux image on secure, bare metal containers. Read the docs + Hardware virtual machines are generally used for non-containerized applications. Infrastructure containers are generally for running any Linux image on secure, bare metal containers. + + + Read the docs +

without throwing 1`] = ` +.c12 { + margin-right: 0.5rem; + margin-left: 0.25rem; +} + +.c0 { + margin-top: 2rem; + margin-bottom: 1rem; +} + +.c11 { + margin-right: 0.25rem; + margin-left: 0.25rem; +} + +.c10 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c9 { + font-size: 0.9375rem; + font-style: normal; + font-stretch: normal; + display: block; + color: rgb(70,70,70); + text-align: left; +} + +.c1 { + color: rgba(73,73,73,1); + font-weight: 600; + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c1 + p, +.c1 + small, +.c1 + h1, +.c1 + h2, +.c1 + label, +.c1 + h3, +.c1 + h4, +.c1 + h5, +.c1 + div, +.c1 + span { + margin-top: 0.75rem; +} + +.c6 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + display: none; +} + +.c6[type='checkbox'], +.c6[type='radio'] { + box-sizing: border-box; + padding: 0; +} + +.c6[type='number']::-webkit-inner-spin-button, +.c6[type='number']::-webkit-outer-spin-button { + height: auto; +} + +.c6[type='search'] { + -webkit-appearance: textfield; + -moz-appearance: textfield; + appearance: textfield; + outline-offset: -0.125rem; +} + +.c6[type='search']::-webkit-search-cancel-button, +.c6[type='search']::-webkit-search-decoration { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +.c6::-webkit-file-upload-button { + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + font: inherit; +} + +.c6:checked + label::after { + opacity: 1; +} + +.c6:selected + label::after { + opacity: 1; +} + +.c6:checked + label { + border-color: rgb(59,70,204); +} + +.c6:selected + label { + border-color: rgb(59,70,204); +} + +.c6:disabled + label { + background-color: rgb(249,249,249); +} + +.c7 { + color: rgb(100,100,100); + position: absolute; + width: 1.125rem; + height: 1.125rem; + box-sizing: border-box; + top: 0; + right: 0; + cursor: pointer; + background-color: rgb(255,255,255); + box-shadow: none; + border: 0.0625rem solid rgb(216,216,216); + cursor: pointer; + border-radius: 0.25rem; + width: 1.125rem; + height: 1.125rem; +} + +.c7::after { + opacity: 0; + content: ''; + position: absolute; + width: 0.375rem; + height: 0.125rem; + background: transparent; + top: 0.3125rem; + left: 0.25rem; + border: 0.125rem solid rgb(45,45,45); + border-top: none; + border-right: none; + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); +} + +.c5 { + display: inline-block; + vertical-align: text-bottom; + width: 1.125rem; + height: 1.125rem; + position: relative; + cursor: pointer; + margin-bottom: 0.75rem; +} + +.c8 { + margin-left: 0.75rem; + margin-bottom: 0.75rem; +} + +.c4 { + list-style-type: none; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c4 label { + font-weight: 400; +} + +.c3 { + display: inline-block; + margin: 0; + padding: 0; + border: none; + overflow: hidden; + height: auto; + -webkit-margin-start: 0; + -webkit-margin-end: 0; + -webkit-padding-before: 0; + -webkit-padding-start: 0; + -webkit-padding-end: 0; + -webkit-padding-after: 0; +} + +
+

+ Filters +

+
+
+
  • +
    + +
    +
    + +
    +
  • +
    +
    +
  • +
    + +
    +
    + +
    +
  • +
    +
    +
  • +
    + +
    +
    + +
    +
  • +
    +
    +
  • +
    + +
    +
    + +
    +
  • +
    +
    +
  • +
    + +
    +
    + +
    +
  • +
    +
    +
    +`; + +exports[`renders without throwing 1`] = ` +Array [ + .c0 { + margin-top: 1rem; + margin-bottom: 0.5rem; +} + +.c2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c1 { + color: rgba(73,73,73,1); + font-weight: normal; + line-height: 1.875rem; + font-size: 1.5rem; + margin: 0; +} + +.c1 + p, +.c1 + small, +.c1 + h1, +.c1 + h2, +.c1 + label, +.c1 + h3, +.c1 + h4, +.c1 + h5, +.c1 + div, +.c1 + span { + margin-top: 1.5rem; +} + +.c3 { + width: 0.0625rem; + background: rgb(216,216,216); + height: 1.125rem; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-self: flex-end; + -ms-flex-item-align: end; + align-self: flex-end; + margin: 0 1.125rem; + box-sizing: border-box; +} + +
    +

    + test +

    +
    + + 1 + $ + +
    + + 1 Bytes + +
    + + 1 Bytes + disk + +
    +
    +
    , + .c2 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + min-width: 7.5rem; +} + +.c2::-moz-focus-inner, +.c2[type='button']::-moz-focus-inner, +.c2[type='reset']::-moz-focus-inner, +.c2[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c2:-moz-focusring, +.c2[type='button']:-moz-focusring, +.c2[type='reset']:-moz-focusring, +.c2[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c2 + button { + margin-left: 0.375rem; +} + +.c1 { + display: inline-block; +} + +.c0 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); + color: rgb(70,70,70); + -webkit-text-fill-color: currentcolor; + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c0:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c0:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c0:active, +.c0:active:hover, +.c0:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c0[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c0:focus { + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c0:hover { + background-color: rgb(247,247,247); + border-color: rgb(216,216,216); +} + +.c0:active, +.c0:active:hover, +.c0:active:focus { + background-color: rgb(230,230,230); + border-color: rgb(216,216,216); +} + +, +] +`; + +exports[`renders without throwing 1`] = ` +Array [ + .c0 { + margin-top: 1rem; + margin-bottom: 0.5rem; +} + +.c2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c1 { + color: rgba(73,73,73,1); + font-weight: normal; + line-height: 1.875rem; + font-size: 1.5rem; + margin: 0; +} + +.c1 + p, +.c1 + small, +.c1 + h1, +.c1 + h2, +.c1 + label, +.c1 + h3, +.c1 + h4, +.c1 + h5, +.c1 + div, +.c1 + span { + margin-top: 1.5rem; +} + +.c3 { + width: 0.0625rem; + background: rgb(216,216,216); + height: 1.125rem; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-self: flex-end; + -ms-flex-item-align: end; + align-self: flex-end; + margin: 0 1.125rem; + box-sizing: border-box; +} + +
    +

    + test +

    +
    + + 1 + $ + +
    + + 1 Bytes + +
    + + 1 + vCPUS + +
    + + 1 Bytes + disk + +
    + + SSD + +
    +
    , + .c2 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + min-width: 7.5rem; +} + +.c2::-moz-focus-inner, +.c2[type='button']::-moz-focus-inner, +.c2[type='reset']::-moz-focus-inner, +.c2[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c2:-moz-focusring, +.c2[type='button']:-moz-focusring, +.c2[type='reset']:-moz-focusring, +.c2[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c2 + button { + margin-left: 0.375rem; +} + +.c1 { + display: inline-block; +} + +.c0 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); + color: rgb(70,70,70); + -webkit-text-fill-color: currentcolor; + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c0:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c0:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c0:active, +.c0:active:hover, +.c0:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c0[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c0:focus { + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c0:hover { + background-color: rgb(247,247,247); + border-color: rgb(216,216,216); +} + +.c0:active, +.c0:active:hover, +.c0:active:focus { + background-color: rgb(230,230,230); + border-color: rgb(216,216,216); +} + +, +] +`; + +exports[`renders without throwing 1`] = ` +.c9 { + margin-right: 0.5rem; + margin-left: 0.25rem; +} + +.c8 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c10 { + font-size: 0.9375rem; + font-style: normal; + font-stretch: normal; + display: block; + color: rgb(70,70,70); + text-align: left; +} + +.c5 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + display: none; +} + +.c5[type='checkbox'], +.c5[type='radio'] { + box-sizing: border-box; + padding: 0; +} + +.c5[type='number']::-webkit-inner-spin-button, +.c5[type='number']::-webkit-outer-spin-button { + height: auto; +} + +.c5[type='search'] { + -webkit-appearance: textfield; + -moz-appearance: textfield; + appearance: textfield; + outline-offset: -0.125rem; +} + +.c5[type='search']::-webkit-search-cancel-button, +.c5[type='search']::-webkit-search-decoration { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +.c5::-webkit-file-upload-button { + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + font: inherit; +} + +.c5:checked + label::after { + opacity: 1; +} + +.c5:selected + label::after { + opacity: 1; +} + +.c5:checked + label { + border-color: rgb(59,70,204); +} + +.c5:selected + label { + border-color: rgb(59,70,204); +} + +.c5:disabled + label { + background-color: rgb(249,249,249); +} + +.c6 { + color: rgb(100,100,100); + position: absolute; + width: 1.125rem; + height: 1.125rem; + box-sizing: border-box; + top: 0; + right: 0; + cursor: pointer; + background-color: rgb(255,255,255); + box-shadow: none; + border: 0.0625rem solid rgb(216,216,216); + cursor: pointer; + width: 1.125rem; + height: 1.125rem; + border-radius: 50%; +} + +.c6::after { + opacity: 0; + content: ''; + position: absolute; + width: 0.375rem; + height: 0.375rem; + border-radius: 50%; + background-color: rgba(73,73,73,1); + top: 50%; + left: 50%; + -webkit-transform: translateX(-50%) translateY(-50%); + -ms-transform: translateX(-50%) translateY(-50%); + transform: translateX(-50%) translateY(-50%); +} + +.c4 { + display: inline-block; + vertical-align: text-bottom; + width: 1.125rem; + height: 1.125rem; + position: relative; + cursor: pointer; +} + +.c7 { + margin-left: 0.75rem; +} + +.c2 { + display: inline-block; + margin: 0; + padding: 0; + border: none; + overflow: hidden; + height: auto; + -webkit-margin-start: 0; + -webkit-margin-end: 0; + -webkit-padding-before: 0; + -webkit-padding-start: 0; + -webkit-padding-end: 0; + -webkit-padding-after: 0; + width: 100%; +} + +.c3 { + list-style-type: none; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c3 label { + font-weight: 400; +} + +.c1 { + border-width: 0.0625rem; + border-style: solid; + border-color: rgb(216,216,216); + border-spacing: 0; + white-space: nowrap; + box-sizing: border-box; + padding: 0 1.5rem; + height: 3.75rem; + border-bottom-width: 0; +} + +.c1:not(:first-child) { + border-left-width: 0; +} + +.c1:not(:last-child) { + border-right-width: 0; +} + +.c0 { + display: table-row; + color: rgba(73,73,73,1); + background-color: rgb(255,255,255); + box-shadow: 0 0.125rem 0 rgba(0,0,0,0.05); + box-sizing: border-box; +} + +.c0:last-child { + box-shadow: none; +} + +.c0:last-child td { + border-bottom-width: 0.0625rem; +} + + + +
    +
  • +
    + +
    +
    +
    +
    + +
    +
    +
    +
  • +
    + + + 1 Bytes + + + 1 Bytes + + + 1 + + +`; + +exports[`renders without throwing 1`] = ` +.c9 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + min-width: 7.5rem; +} + +.c9::-moz-focus-inner, +.c9[type='button']::-moz-focus-inner, +.c9[type='reset']::-moz-focus-inner, +.c9[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c9:-moz-focusring, +.c9[type='button']:-moz-focusring, +.c9[type='reset']:-moz-focusring, +.c9[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c9 + button { + margin-left: 0.375rem; +} + +.c8 { + display: inline-block; +} + +.c7 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); +} + +.c7:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c7:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c7:active, +.c7:active:hover, +.c7:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c7[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c4 { + margin-bottom: 0.125rem; + margin-left: 0.5625rem; +} + +.c0 { + overflow: hidden; + border-spacing: 0; + border-collapse: separate; + table-layout: fixed; + width: 100%; + max-width: 100%; +} + +.c1 { + width: 100%; + background: rgb(250,250,250); +} + +.c1 th:first-child { + border-top-left-radius: 0.25rem; +} + +.c1 th:last-child { + border-top-right-radius: 0.25rem; +} + +.c6 { + width: 100%; +} + +.c6 tr:first-child td { + border-top: none; +} + +.c3 { + border-width: 0.0625rem; + border-style: solid; + border-color: rgb(216,216,216); + border-spacing: 0; + white-space: nowrap; + box-sizing: border-box; + padding: 0 1.5rem; + height: 3.75rem; + width: 12.5rem; + display: table-cell; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + vertical-align: middle; + text-align: left; + height: 2.625rem; + color: rgb(189,189,189); + font-weight: 500; + color: rgba(73,73,73,1); + font-weight: bold; +} + +.c3:not(:first-child) { + border-left-width: 0; +} + +.c3:not(:last-child) { + border-right-width: 0; +} + +.c5 { + border-width: 0.0625rem; + border-style: solid; + border-color: rgb(216,216,216); + border-spacing: 0; + white-space: nowrap; + box-sizing: border-box; + padding: 0 1.5rem; + height: 3.75rem; + width: 6.25rem; + display: table-cell; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + vertical-align: middle; + text-align: left; + height: 2.625rem; + color: rgb(189,189,189); + font-weight: 500; +} + +.c5:not(:first-child) { + border-left-width: 0; +} + +.c5:not(:last-child) { + border-right-width: 0; +} + +.c2 { + display: table-row; + color: rgba(73,73,73,1); + background-color: rgb(255,255,255); + box-shadow: 0 0.125rem 0 rgba(0,0,0,0.05); + box-sizing: border-box; + color: rgba(73,73,73,1); + background-color: transparent; + border: none; + box-shadow: none; +} + +.c2:last-child { + box-shadow: none; +} + +.c2:last-child td { + border-bottom-width: 0.0625rem; +} + +
    + + + + + + + + + + +
    + + Name + + + + + + + RAM + + + + Disk + + + + $/hour + +
    + +
    +`; + +exports[`renders without throwing 1`] = ` +.c9 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + min-width: 7.5rem; +} + +.c9::-moz-focus-inner, +.c9[type='button']::-moz-focus-inner, +.c9[type='reset']::-moz-focus-inner, +.c9[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c9:-moz-focusring, +.c9[type='button']:-moz-focusring, +.c9[type='reset']:-moz-focusring, +.c9[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c9 + button { + margin-left: 0.375rem; +} + +.c8 { + display: inline-block; +} + +.c7 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); +} + +.c7:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c7:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c7:active, +.c7:active:hover, +.c7:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c7[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c4 { + margin-bottom: 0.125rem; + margin-left: 0.5625rem; +} + +.c0 { + overflow: hidden; + border-spacing: 0; + border-collapse: separate; + table-layout: fixed; + width: 100%; + max-width: 100%; +} + +.c1 { + width: 100%; + background: rgb(250,250,250); +} + +.c1 th:first-child { + border-top-left-radius: 0.25rem; +} + +.c1 th:last-child { + border-top-right-radius: 0.25rem; +} + +.c6 { + width: 100%; +} + +.c6 tr:first-child td { + border-top: none; +} + +.c3 { + border-width: 0.0625rem; + border-style: solid; + border-color: rgb(216,216,216); + border-spacing: 0; + white-space: nowrap; + box-sizing: border-box; + padding: 0 1.5rem; + height: 3.75rem; + width: 12.5rem; + display: table-cell; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + vertical-align: middle; + text-align: left; + height: 2.625rem; + color: rgb(189,189,189); + font-weight: 500; + color: rgba(73,73,73,1); + font-weight: bold; +} + +.c3:not(:first-child) { + border-left-width: 0; +} + +.c3:not(:last-child) { + border-right-width: 0; +} + +.c5 { + border-width: 0.0625rem; + border-style: solid; + border-color: rgb(216,216,216); + border-spacing: 0; + white-space: nowrap; + box-sizing: border-box; + padding: 0 1.5rem; + height: 3.75rem; + width: 6.25rem; + display: table-cell; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + vertical-align: middle; + text-align: left; + height: 2.625rem; + color: rgb(189,189,189); + font-weight: 500; +} + +.c5:not(:first-child) { + border-left-width: 0; +} + +.c5:not(:last-child) { + border-right-width: 0; +} + +.c2 { + display: table-row; + color: rgba(73,73,73,1); + background-color: rgb(255,255,255); + box-shadow: 0 0.125rem 0 rgba(0,0,0,0.05); + box-sizing: border-box; + color: rgba(73,73,73,1); + background-color: transparent; + border: none; + box-shadow: none; +} + +.c2:last-child { + box-shadow: none; +} + +.c2:last-child td { + border-bottom-width: 0.0625rem; +} + +
    + + + + + + + + + + +
    + + Name + + + + + + + RAM + + + + Disk + + + + $/hour + +
    + +
    +`; + +exports[`renders without throwing 1`] = ` +.c9 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + min-width: 7.5rem; +} + +.c9::-moz-focus-inner, +.c9[type='button']::-moz-focus-inner, +.c9[type='reset']::-moz-focus-inner, +.c9[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c9:-moz-focusring, +.c9[type='button']:-moz-focusring, +.c9[type='reset']:-moz-focusring, +.c9[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c9 + button { + margin-left: 0.375rem; +} + +.c8 { + display: inline-block; +} + +.c7 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); +} + +.c7:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c7:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c7:active, +.c7:active:hover, +.c7:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c7[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c4 { + margin-bottom: 0.125rem; + margin-left: 0.5625rem; +} + +.c0 { + overflow: hidden; + border-spacing: 0; + border-collapse: separate; + table-layout: fixed; + width: 100%; + max-width: 100%; +} + +.c1 { + width: 100%; + background: rgb(250,250,250); +} + +.c1 th:first-child { + border-top-left-radius: 0.25rem; +} + +.c1 th:last-child { + border-top-right-radius: 0.25rem; +} + +.c6 { + width: 100%; +} + +.c6 tr:first-child td { + border-top: none; +} + +.c3 { + border-width: 0.0625rem; + border-style: solid; + border-color: rgb(216,216,216); + border-spacing: 0; + white-space: nowrap; + box-sizing: border-box; + padding: 0 1.5rem; + height: 3.75rem; + width: 12.5rem; + display: table-cell; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + vertical-align: middle; + text-align: left; + height: 2.625rem; + color: rgb(189,189,189); + font-weight: 500; + color: rgba(73,73,73,1); + font-weight: bold; +} + +.c3:not(:first-child) { + border-left-width: 0; +} + +.c3:not(:last-child) { + border-right-width: 0; +} + +.c5 { + border-width: 0.0625rem; + border-style: solid; + border-color: rgb(216,216,216); + border-spacing: 0; + white-space: nowrap; + box-sizing: border-box; + padding: 0 1.5rem; + height: 3.75rem; + width: 6.25rem; + display: table-cell; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + vertical-align: middle; + text-align: left; + height: 2.625rem; + color: rgb(189,189,189); + font-weight: 500; +} + +.c5:not(:first-child) { + border-left-width: 0; +} + +.c5:not(:last-child) { + border-right-width: 0; +} + +.c2 { + display: table-row; + color: rgba(73,73,73,1); + background-color: rgb(255,255,255); + box-shadow: 0 0.125rem 0 rgba(0,0,0,0.05); + box-sizing: border-box; + color: rgba(73,73,73,1); + background-color: transparent; + border: none; + box-shadow: none; +} + +.c2:last-child { + box-shadow: none; +} + +.c2:last-child td { + border-bottom-width: 0.0625rem; +} + +
    + + + + + + + + + + +
    + + Name + + + + + + + RAM + + + + Disk + + + + $/hour + +
    + +
    +`; + +exports[`renders without throwing 1`] = ` +.c9 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + min-width: 7.5rem; +} + +.c9::-moz-focus-inner, +.c9[type='button']::-moz-focus-inner, +.c9[type='reset']::-moz-focus-inner, +.c9[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c9:-moz-focusring, +.c9[type='button']:-moz-focusring, +.c9[type='reset']:-moz-focusring, +.c9[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c9 + button { + margin-left: 0.375rem; +} + +.c8 { + display: inline-block; +} + +.c7 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); +} + +.c7:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c7:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c7:active, +.c7:active:hover, +.c7:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c7[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c4 { + margin-bottom: 0.125rem; + margin-left: 0.5625rem; +} + +.c0 { + overflow: hidden; + border-spacing: 0; + border-collapse: separate; + table-layout: fixed; + width: 100%; + max-width: 100%; +} + +.c1 { + width: 100%; + background: rgb(250,250,250); +} + +.c1 th:first-child { + border-top-left-radius: 0.25rem; +} + +.c1 th:last-child { + border-top-right-radius: 0.25rem; +} + +.c6 { + width: 100%; +} + +.c6 tr:first-child td { + border-top: none; +} + +.c3 { + border-width: 0.0625rem; + border-style: solid; + border-color: rgb(216,216,216); + border-spacing: 0; + white-space: nowrap; + box-sizing: border-box; + padding: 0 1.5rem; + height: 3.75rem; + width: 12.5rem; + display: table-cell; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + vertical-align: middle; + text-align: left; + height: 2.625rem; + color: rgb(189,189,189); + font-weight: 500; + color: rgba(73,73,73,1); + font-weight: bold; +} + +.c3:not(:first-child) { + border-left-width: 0; +} + +.c3:not(:last-child) { + border-right-width: 0; +} + +.c5 { + border-width: 0.0625rem; + border-style: solid; + border-color: rgb(216,216,216); + border-spacing: 0; + white-space: nowrap; + box-sizing: border-box; + padding: 0 1.5rem; + height: 3.75rem; + width: 6.25rem; + display: table-cell; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + vertical-align: middle; + text-align: left; + height: 2.625rem; + color: rgb(189,189,189); + font-weight: 500; +} + +.c5:not(:first-child) { + border-left-width: 0; +} + +.c5:not(:last-child) { + border-right-width: 0; +} + +.c2 { + display: table-row; + color: rgba(73,73,73,1); + background-color: rgb(255,255,255); + box-shadow: 0 0.125rem 0 rgba(0,0,0,0.05); + box-sizing: border-box; + color: rgba(73,73,73,1); + background-color: transparent; + border: none; + box-shadow: none; +} + +.c2:last-child { + box-shadow: none; +} + +.c2:last-child td { + border-bottom-width: 0.0625rem; +} + +
    + + + + + + + + + + +
    + + Name + + + + + + + RAM + + + + Disk + + + + $/hour + +
    + +
    +`; + +exports[`renders without throwing 1`] = ` +.c9 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + min-width: 7.5rem; +} + +.c9::-moz-focus-inner, +.c9[type='button']::-moz-focus-inner, +.c9[type='reset']::-moz-focus-inner, +.c9[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c9:-moz-focusring, +.c9[type='button']:-moz-focusring, +.c9[type='reset']:-moz-focusring, +.c9[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c9 + button { + margin-left: 0.375rem; +} + +.c8 { + display: inline-block; +} + +.c7 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); +} + +.c7:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c7:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c7:active, +.c7:active:hover, +.c7:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c7[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c4 { + margin-bottom: 0.125rem; + margin-left: 0.5625rem; +} + +.c0 { + overflow: hidden; + border-spacing: 0; + border-collapse: separate; + table-layout: fixed; + width: 100%; + max-width: 100%; +} + +.c1 { + width: 100%; + background: rgb(250,250,250); +} + +.c1 th:first-child { + border-top-left-radius: 0.25rem; +} + +.c1 th:last-child { + border-top-right-radius: 0.25rem; +} + +.c6 { + width: 100%; +} + +.c6 tr:first-child td { + border-top: none; +} + +.c3 { + border-width: 0.0625rem; + border-style: solid; + border-color: rgb(216,216,216); + border-spacing: 0; + white-space: nowrap; + box-sizing: border-box; + padding: 0 1.5rem; + height: 3.75rem; + width: 12.5rem; + display: table-cell; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + vertical-align: middle; + text-align: left; + height: 2.625rem; + color: rgb(189,189,189); + font-weight: 500; + color: rgba(73,73,73,1); + font-weight: bold; +} + +.c3:not(:first-child) { + border-left-width: 0; +} + +.c3:not(:last-child) { + border-right-width: 0; +} + +.c5 { + border-width: 0.0625rem; + border-style: solid; + border-color: rgb(216,216,216); + border-spacing: 0; + white-space: nowrap; + box-sizing: border-box; + padding: 0 1.5rem; + height: 3.75rem; + width: 6.25rem; + display: table-cell; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + vertical-align: middle; + text-align: left; + height: 2.625rem; + color: rgb(189,189,189); + font-weight: 500; +} + +.c5:not(:first-child) { + border-left-width: 0; +} + +.c5:not(:last-child) { + border-right-width: 0; +} + +.c2 { + display: table-row; + color: rgba(73,73,73,1); + background-color: rgb(255,255,255); + box-shadow: 0 0.125rem 0 rgba(0,0,0,0.05); + box-sizing: border-box; + color: rgba(73,73,73,1); + background-color: transparent; + border: none; + box-shadow: none; +} + +.c2:last-child { + box-shadow: none; +} + +.c2:last-child td { + border-bottom-width: 0.0625rem; +} + +
    + + + + + + + + + + +
    + + Name + + + + + + + RAM + + + + Disk + + + + $/hour + +
    + +
    +`; diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/package.spec.js b/packages/my-joy-beta/src/components/create-instance/__tests__/package.spec.js new file mode 100644 index 00000000..38566713 --- /dev/null +++ b/packages/my-joy-beta/src/components/create-instance/__tests__/package.spec.js @@ -0,0 +1,137 @@ +import React from 'react'; +import renderer from 'react-test-renderer'; +import 'jest-styled-components'; + +import { Filters, Packages, Package, Overview } from '../package'; +import Theme from '@mocks/theme'; + +it('renders without throwing', () => { + expect( + renderer + .create( + + {}} + /> + + ) + .toJSON() + ).toMatchSnapshot(); +}); + +it('renders without throwing', () => { + expect( + renderer + .create( + + {}} + /> + + ) + .toJSON() + ).toMatchSnapshot(); +}); + +it('renders without throwing', () => { + expect( + renderer + .create( + + {}} + /> + + ) + .toJSON() + ).toMatchSnapshot(); +}); + +it('renders without throwing', () => { + expect( + renderer + .create( + + + + ) + .toJSON() + ).toMatchSnapshot(); +}); + +it('renders without throwing', () => { + expect( + renderer + .create( + + + + ) + .toJSON() + ).toMatchSnapshot(); +}); + +it('renders without throwing', () => { + expect( + renderer + .create( + + + + ) + .toJSON() + ).toMatchSnapshot(); +}); + +it('renders without throwing', () => { + expect( + renderer + .create( + + + + ) + .toJSON() + ).toMatchSnapshot(); +}); + +it('renders without throwing', () => { + expect( + renderer + .create( + + + + ) + .toJSON() + ).toMatchSnapshot(); +}); + +it('renders without throwing', () => { + expect( + renderer + .create( + + + + ) + .toJSON() + ).toMatchSnapshot(); +}); diff --git a/packages/my-joy-beta/src/components/create-instance/image.js b/packages/my-joy-beta/src/components/create-instance/image.js index 7e5d7ed8..73209e3f 100644 --- a/packages/my-joy-beta/src/components/create-instance/image.js +++ b/packages/my-joy-beta/src/components/create-instance/image.js @@ -107,7 +107,14 @@ export default ({

    Hardware virtual machines are generally used for non-containerized applications. Infrastructure containers are generally for running - any Linux image on secure, bare metal containers. Read the docs + any Linux image on secure, bare metal containers.{' '} + + Read the docs +

    {loading ? ( @@ -124,7 +131,7 @@ export default ({ {images && - images.map(image => ( + images.filter(i => i.isVm === isVmSelected).map(image => ( , + STORAGE: , + GENERAL: , + COMPUTE: +}; + +const VerticalDivider = styled.div` + width: ${remcalc(1)}; + background: ${props => props.theme.grey}; + height: ${remcalc(18)}; + display: flex; + align-self: flex-end; + margin: 0 ${remcalc(18)}; + box-sizing: border-box; +`; + +const Badge = styled.div` + background: ${props => props.theme.primary}; + border-radius: ${remcalc(3)}; + font-weight: 600; + line-height: normal; + font-size: ${remcalc(8)}; + color: ${props => props.theme.white}; + display: inline-flex; + align-items: center; + justify-content: center; + padding: ${remcalc(3)}; + position: relative; + top: ${remcalc(-8)}; + margin-left: ${remcalc(6)}; +`; + +export const Filters = () => ( + +

    Filters

    + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +); + +export const Package = ({ + selected = false, + id, + name, + group, + memory, + price, + vcpus, + disk, + ssd, + hasVms +}) => ( + + + + + + {GroupIcons[group]} + + + + + + + + {pretty(memory)} + + {pretty(disk)} + {ssd && SSD} + + {hasVms && {vcpus}} + {price} + +); + +export const Packages = ({ + handleSubmit, + pristine, + sortBy = 'name', + sortOrder = 'desc', + onSortBy = () => null, + hasVms, + children +}) => ( +
    + + + + onSortBy('name', sortOrder)} + sortOrder={sortOrder} + showSort={sortBy === 'name'} + left + middle + xs="200" + actionable + > + Name + + onSortBy('ram', sortOrder)} + sortOrder={sortOrder} + showSort={sortBy === 'ram'} + left + middle + actionable + > + RAM + + onSortBy('disk', sortOrder)} + sortOrder={sortOrder} + showSort={sortBy === 'disk'} + left + middle + actionable + > + Disk + + {hasVms && ( + onSortBy('vcpu', sortOrder)} + sortOrder={sortOrder} + showSort={sortBy === 'vcpu'} + left + middle + actionable + > + vCPU + + )} + onSortBy('price', sortOrder)} + sortOrder={sortOrder} + showSort={sortBy === 'price'} + left + middle + actionable + > + $/hour + + + + {children} +
    + +
    +); + +export const Overview = ({ + name, + price, + memory, + vcpus, + hasVms, + ssd, + disk, + onCancel +}) => ( + + +

    {name}

    + + {price} $ + + {pretty(memory)} + {hasVms && ( + + + {vcpus} vCPUS + + )} + + {pretty(disk)} disk + + {ssd && SSD} + +
    + +
    +); diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/list.spec.js.snap b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/list.spec.js.snap index d2d6a6e5..240e52d2 100644 --- a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/list.spec.js.snap +++ b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/list.spec.js.snap @@ -112,7 +112,6 @@ exports[`renders without throwing 1`] = ` } .c12 { - margin-bottom: 0.75rem; margin-left: 0.75rem; } @@ -230,6 +229,8 @@ exports[`renders without throwing 1`] = ` height: 2.625rem; color: rgb(189,189,189); font-weight: 500; + color: rgba(73,73,73,1); + font-weight: bold; } .c13:not(:first-child) { @@ -452,7 +453,11 @@ exports[`renders without throwing 1`] = ` />
    @@ -651,7 +656,6 @@ exports[`renders without throwing 1`] = ` } .c12 { - margin-bottom: 0.75rem; margin-left: 0.75rem; } @@ -769,6 +773,8 @@ exports[`renders without throwing 1`] = ` height: 2.625rem; color: rgb(189,189,189); font-weight: 500; + color: rgba(73,73,73,1); + font-weight: bold; } .c13:not(:first-child) { @@ -991,7 +997,11 @@ exports[`renders without throwing 1`] = ` />
    @@ -1190,7 +1200,6 @@ exports[`renders without throwing 1`] = ` } .c12 { - margin-bottom: 0.75rem; margin-left: 0.75rem; } @@ -1289,66 +1298,6 @@ exports[`renders without throwing 1`] = ` border-right-width: 0; } -.c13 { - border-width: 0.0625rem; - border-style: solid; - border-color: rgb(216,216,216); - border-spacing: 0; - white-space: nowrap; - box-sizing: border-box; - padding: 0 1.5rem; - height: 3.75rem; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - vertical-align: middle; - text-align: left; - height: 2.625rem; - color: rgb(189,189,189); - font-weight: 500; -} - -.c13:not(:first-child) { - border-left-width: 0; -} - -.c13:not(:last-child) { - border-right-width: 0; -} - -.c14 { - border-width: 0.0625rem; - border-style: solid; - border-color: rgb(216,216,216); - border-spacing: 0; - white-space: nowrap; - box-sizing: border-box; - padding: 0 1.5rem; - height: 3.75rem; - width: 9.375rem; - display: table-cell; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - vertical-align: middle; - text-align: left; - height: 2.625rem; - color: rgb(189,189,189); - font-weight: 500; -} - -.c14:not(:first-child) { - border-left-width: 0; -} - -.c14:not(:last-child) { - border-right-width: 0; -} - .c16 { border-width: 0.0625rem; border-style: solid; @@ -1435,6 +1384,68 @@ exports[`renders without throwing 1`] = ` border-right-width: 0; } +.c13 { + border-width: 0.0625rem; + border-style: solid; + border-color: rgb(216,216,216); + border-spacing: 0; + white-space: nowrap; + box-sizing: border-box; + padding: 0 1.5rem; + height: 3.75rem; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + vertical-align: middle; + text-align: left; + height: 2.625rem; + color: rgb(189,189,189); + font-weight: 500; +} + +.c13:not(:first-child) { + border-left-width: 0; +} + +.c13:not(:last-child) { + border-right-width: 0; +} + +.c14 { + border-width: 0.0625rem; + border-style: solid; + border-color: rgb(216,216,216); + border-spacing: 0; + white-space: nowrap; + box-sizing: border-box; + padding: 0 1.5rem; + height: 3.75rem; + width: 9.375rem; + display: table-cell; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + vertical-align: middle; + text-align: left; + height: 2.625rem; + color: rgb(189,189,189); + font-weight: 500; + color: rgba(73,73,73,1); + font-weight: bold; +} + +.c14:not(:first-child) { + border-left-width: 0; +} + +.c14:not(:last-child) { + border-right-width: 0; +} + .c2 { display: table-row; color: rgba(73,73,73,1); @@ -1530,7 +1541,11 @@ exports[`renders without throwing 1`] = ` />
    @@ -1729,7 +1744,6 @@ exports[`renders without throwing 1`] = ` } .c12 { - margin-bottom: 0.75rem; margin-left: 0.75rem; } @@ -1828,66 +1842,6 @@ exports[`renders without throwing 1`] = ` border-right-width: 0; } -.c13 { - border-width: 0.0625rem; - border-style: solid; - border-color: rgb(216,216,216); - border-spacing: 0; - white-space: nowrap; - box-sizing: border-box; - padding: 0 1.5rem; - height: 3.75rem; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - vertical-align: middle; - text-align: left; - height: 2.625rem; - color: rgb(189,189,189); - font-weight: 500; -} - -.c13:not(:first-child) { - border-left-width: 0; -} - -.c13:not(:last-child) { - border-right-width: 0; -} - -.c14 { - border-width: 0.0625rem; - border-style: solid; - border-color: rgb(216,216,216); - border-spacing: 0; - white-space: nowrap; - box-sizing: border-box; - padding: 0 1.5rem; - height: 3.75rem; - width: 9.375rem; - display: table-cell; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - vertical-align: middle; - text-align: left; - height: 2.625rem; - color: rgb(189,189,189); - font-weight: 500; -} - -.c14:not(:first-child) { - border-left-width: 0; -} - -.c14:not(:last-child) { - border-right-width: 0; -} - .c16 { border-width: 0.0625rem; border-style: solid; @@ -1974,6 +1928,68 @@ exports[`renders without throwing 1`] = ` border-right-width: 0; } +.c13 { + border-width: 0.0625rem; + border-style: solid; + border-color: rgb(216,216,216); + border-spacing: 0; + white-space: nowrap; + box-sizing: border-box; + padding: 0 1.5rem; + height: 3.75rem; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + vertical-align: middle; + text-align: left; + height: 2.625rem; + color: rgb(189,189,189); + font-weight: 500; +} + +.c13:not(:first-child) { + border-left-width: 0; +} + +.c13:not(:last-child) { + border-right-width: 0; +} + +.c14 { + border-width: 0.0625rem; + border-style: solid; + border-color: rgb(216,216,216); + border-spacing: 0; + white-space: nowrap; + box-sizing: border-box; + padding: 0 1.5rem; + height: 3.75rem; + width: 9.375rem; + display: table-cell; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + vertical-align: middle; + text-align: left; + height: 2.625rem; + color: rgb(189,189,189); + font-weight: 500; + color: rgba(73,73,73,1); + font-weight: bold; +} + +.c14:not(:first-child) { + border-left-width: 0; +} + +.c14:not(:last-child) { + border-right-width: 0; +} + .c2 { display: table-row; color: rgba(73,73,73,1); @@ -2069,7 +2085,11 @@ exports[`renders without throwing 1`] = ` />
    @@ -2268,7 +2288,6 @@ exports[`renders without throwing 1`] = ` } .c12 { - margin-bottom: 0.75rem; margin-left: 0.75rem; } @@ -2386,6 +2405,8 @@ exports[`renders without throwing 1`] = ` height: 2.625rem; color: rgb(189,189,189); font-weight: 500; + color: rgba(73,73,73,1); + font-weight: bold; } .c13:not(:first-child) { @@ -2608,7 +2629,11 @@ exports[`renders without throwing 1`] = ` />
    @@ -2807,7 +2832,6 @@ exports[`renders {children} without throwing 1`] = } .c12 { - margin-bottom: 0.75rem; margin-left: 0.75rem; } @@ -2925,6 +2949,8 @@ exports[`renders {children} without throwing 1`] = height: 2.625rem; color: rgb(189,189,189); font-weight: 500; + color: rgba(73,73,73,1); + font-weight: bold; } .c13:not(:first-child) { @@ -3147,7 +3173,11 @@ exports[`renders {children} without throwing 1`] = />
    @@ -3370,7 +3400,6 @@ exports[`renders without throwing 1`] = ` } .c12 { - margin-bottom: 0.75rem; margin-left: 0.75rem; } @@ -3628,7 +3657,10 @@ exports[`renders without throwing 1`] = ` />
    @@ -3870,7 +3902,6 @@ exports[`renders without throwing 1`] = ` } .c12 { - margin-bottom: 0.75rem; margin-left: 0.75rem; } @@ -4128,7 +4159,10 @@ exports[`renders without throwing 1`] = ` />
    @@ -4372,7 +4406,6 @@ exports[`renders without throwing 1`] = ` } .c12 { - margin-bottom: 0.75rem; margin-left: 0.75rem; } @@ -4630,7 +4663,10 @@ exports[`renders without throwing 1`] = ` />
    @@ -4914,7 +4950,6 @@ exports[`renders without throwing 1`] = ` } .c12 { - margin-bottom: 0.75rem; margin-left: 0.75rem; } @@ -5156,7 +5191,10 @@ exports[`renders without throwing 1`] = ` />
    diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap index be968aa6..74cbf5b2 100644 --- a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap +++ b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap @@ -112,7 +112,6 @@ exports[`renders without throwing 1`] = ` } .c12 { - margin-bottom: 0.75rem; margin-left: 0.75rem; } @@ -230,6 +229,8 @@ exports[`renders without throwing 1`] = ` height: 2.625rem; color: rgb(189,189,189); font-weight: 500; + color: rgba(73,73,73,1); + font-weight: bold; } .c13:not(:first-child) { @@ -413,7 +414,11 @@ exports[`renders without throwing 1`] = ` />
    @@ -616,7 +621,6 @@ exports[`renders without throwing 1`] = ` } .c10 { - margin-bottom: 0.75rem; margin-left: 0.75rem; } @@ -817,7 +821,10 @@ exports[`renders without throwing 1`] = ` />
    @@ -1033,7 +1040,6 @@ exports[`renders without throwing 1`] = ` } .c10 { - margin-bottom: 0.75rem; margin-left: 0.75rem; } @@ -1234,7 +1240,10 @@ exports[`renders without throwing 1`] = ` />
    @@ -1646,7 +1655,6 @@ exports[`renders without throwing 1`] = ` } .c12 { - margin-bottom: 0.75rem; margin-left: 0.75rem; } @@ -1764,6 +1772,8 @@ exports[`renders without throwing 1`] = ` height: 2.625rem; color: rgb(189,189,189); font-weight: 500; + color: rgba(73,73,73,1); + font-weight: bold; } .c13:not(:first-child) { @@ -1947,7 +1957,11 @@ exports[`renders without throwing 1`] = ` />
    @@ -2145,7 +2159,6 @@ exports[`renders without throwing 1`] = ` } .c12 { - margin-bottom: 0.75rem; margin-left: 0.75rem; } @@ -2263,6 +2276,8 @@ exports[`renders without throwing 1`] = ` height: 2.625rem; color: rgb(189,189,189); font-weight: 500; + color: rgba(73,73,73,1); + font-weight: bold; } .c13:not(:first-child) { @@ -2446,7 +2461,11 @@ exports[`renders without throwing 1`] = ` />
    @@ -2644,7 +2663,6 @@ exports[`renders without throwing 1`] = ` } .c12 { - margin-bottom: 0.75rem; margin-left: 0.75rem; } @@ -2743,66 +2761,6 @@ exports[`renders without throwing 1`] = ` border-right-width: 0; } -.c13 { - border-width: 0.0625rem; - border-style: solid; - border-color: rgb(216,216,216); - border-spacing: 0; - white-space: nowrap; - box-sizing: border-box; - padding: 0 1.5rem; - height: 3.75rem; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - vertical-align: middle; - text-align: left; - height: 2.625rem; - color: rgb(189,189,189); - font-weight: 500; -} - -.c13:not(:first-child) { - border-left-width: 0; -} - -.c13:not(:last-child) { - border-right-width: 0; -} - -.c14 { - border-width: 0.0625rem; - border-style: solid; - border-color: rgb(216,216,216); - border-spacing: 0; - white-space: nowrap; - box-sizing: border-box; - padding: 0 1.5rem; - height: 3.75rem; - width: 9.375rem; - display: table-cell; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - vertical-align: middle; - text-align: left; - height: 2.625rem; - color: rgb(189,189,189); - font-weight: 500; -} - -.c14:not(:first-child) { - border-left-width: 0; -} - -.c14:not(:last-child) { - border-right-width: 0; -} - .c16 { border-width: 0.0625rem; border-style: solid; @@ -2858,6 +2816,68 @@ exports[`renders without throwing 1`] = ` border-right-width: 0; } +.c13 { + border-width: 0.0625rem; + border-style: solid; + border-color: rgb(216,216,216); + border-spacing: 0; + white-space: nowrap; + box-sizing: border-box; + padding: 0 1.5rem; + height: 3.75rem; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + vertical-align: middle; + text-align: left; + height: 2.625rem; + color: rgb(189,189,189); + font-weight: 500; +} + +.c13:not(:first-child) { + border-left-width: 0; +} + +.c13:not(:last-child) { + border-right-width: 0; +} + +.c14 { + border-width: 0.0625rem; + border-style: solid; + border-color: rgb(216,216,216); + border-spacing: 0; + white-space: nowrap; + box-sizing: border-box; + padding: 0 1.5rem; + height: 3.75rem; + width: 9.375rem; + display: table-cell; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + vertical-align: middle; + text-align: left; + height: 2.625rem; + color: rgb(189,189,189); + font-weight: 500; + color: rgba(73,73,73,1); + font-weight: bold; +} + +.c14:not(:first-child) { + border-left-width: 0; +} + +.c14:not(:last-child) { + border-right-width: 0; +} + .c2 { display: table-row; color: rgba(73,73,73,1); @@ -2945,7 +2965,11 @@ exports[`renders without throwing 1`] = ` />
    @@ -3143,7 +3167,6 @@ exports[`renders without throwing 1`] = ` } .c12 { - margin-bottom: 0.75rem; margin-left: 0.75rem; } @@ -3242,66 +3265,6 @@ exports[`renders without throwing 1`] = ` border-right-width: 0; } -.c13 { - border-width: 0.0625rem; - border-style: solid; - border-color: rgb(216,216,216); - border-spacing: 0; - white-space: nowrap; - box-sizing: border-box; - padding: 0 1.5rem; - height: 3.75rem; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - vertical-align: middle; - text-align: left; - height: 2.625rem; - color: rgb(189,189,189); - font-weight: 500; -} - -.c13:not(:first-child) { - border-left-width: 0; -} - -.c13:not(:last-child) { - border-right-width: 0; -} - -.c14 { - border-width: 0.0625rem; - border-style: solid; - border-color: rgb(216,216,216); - border-spacing: 0; - white-space: nowrap; - box-sizing: border-box; - padding: 0 1.5rem; - height: 3.75rem; - width: 9.375rem; - display: table-cell; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - vertical-align: middle; - text-align: left; - height: 2.625rem; - color: rgb(189,189,189); - font-weight: 500; -} - -.c14:not(:first-child) { - border-left-width: 0; -} - -.c14:not(:last-child) { - border-right-width: 0; -} - .c16 { border-width: 0.0625rem; border-style: solid; @@ -3357,6 +3320,68 @@ exports[`renders without throwing 1`] = ` border-right-width: 0; } +.c13 { + border-width: 0.0625rem; + border-style: solid; + border-color: rgb(216,216,216); + border-spacing: 0; + white-space: nowrap; + box-sizing: border-box; + padding: 0 1.5rem; + height: 3.75rem; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + vertical-align: middle; + text-align: left; + height: 2.625rem; + color: rgb(189,189,189); + font-weight: 500; +} + +.c13:not(:first-child) { + border-left-width: 0; +} + +.c13:not(:last-child) { + border-right-width: 0; +} + +.c14 { + border-width: 0.0625rem; + border-style: solid; + border-color: rgb(216,216,216); + border-spacing: 0; + white-space: nowrap; + box-sizing: border-box; + padding: 0 1.5rem; + height: 3.75rem; + width: 9.375rem; + display: table-cell; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + vertical-align: middle; + text-align: left; + height: 2.625rem; + color: rgb(189,189,189); + font-weight: 500; + color: rgba(73,73,73,1); + font-weight: bold; +} + +.c14:not(:first-child) { + border-left-width: 0; +} + +.c14:not(:last-child) { + border-right-width: 0; +} + .c2 { display: table-row; color: rgba(73,73,73,1); @@ -3444,7 +3469,11 @@ exports[`renders without throwing 1`] = ` />
    @@ -3642,7 +3671,6 @@ exports[`renders without throwing 1`] = ` } .c12 { - margin-bottom: 0.75rem; margin-left: 0.75rem; } @@ -3760,6 +3788,8 @@ exports[`renders without throwing 1`] = ` height: 2.625rem; color: rgb(189,189,189); font-weight: 500; + color: rgba(73,73,73,1); + font-weight: bold; } .c13:not(:first-child) { @@ -3943,7 +3973,11 @@ exports[`renders without throwing 1`] = ` />
    diff --git a/packages/my-joy-beta/src/containers/create-instance/index.js b/packages/my-joy-beta/src/containers/create-instance/index.js index 0d230774..7a6ab339 100644 --- a/packages/my-joy-beta/src/containers/create-instance/index.js +++ b/packages/my-joy-beta/src/containers/create-instance/index.js @@ -7,6 +7,7 @@ import Name from '@containers/create-instance/name'; import Image from '@containers/create-instance/image'; import Metadata from '@containers/create-instance/metadata'; import Tags from '@containers/create-instance/tags'; +import Package from '@containers/create-instance/package'; export default ({ step, ...props }) => ( @@ -19,6 +20,9 @@ export default ({ step, ...props }) => ( + + + diff --git a/packages/my-joy-beta/src/containers/create-instance/package.js b/packages/my-joy-beta/src/containers/create-instance/package.js new file mode 100644 index 00000000..9890027b --- /dev/null +++ b/packages/my-joy-beta/src/containers/create-instance/package.js @@ -0,0 +1,204 @@ +import React, { Fragment } from 'react'; +import { Margin } from 'styled-components-spacing'; +import { compose, graphql } from 'react-apollo'; +import ReduxForm from 'declarative-redux-form'; +import { connect } from 'react-redux'; +import titleCase from 'title-case'; +import get from 'lodash.get'; +import { set } from 'react-redux-values'; +import sortBy from 'lodash.sortby'; +import find from 'lodash.find'; +import constantCase from 'constant-case'; + +import { PackageIcon, StatusLoader, P } from 'joyent-ui-toolkit'; +import { + Filters, + Packages, + Package, + Overview +} from '@components/create-instance/package'; +import Title from '@components/create-instance/title'; +import priceData from '../../data/prices.json'; + +import getPackages from '../../graphql/get-packages.gql'; + +const FORM_NAME = 'create-instance-package'; + +const PackageContainer = ({ + expanded, + hasVms, + handleSubmit, + handleCancel, + loading, + packages, + selected = {}, + sortOrder, + handleSortBy, + sortBy +}) => ( + + }>Package + {expanded ? ( + +

    + A package defines the specs of your instance. On Triton, packages can + only increase in size.{' '} + + Read the docs + +

    +
    + ) : null} + {!loading && expanded ? ( + + {props => } + + ) : null} + {loading && expanded ? ( + + ) : ( + + {props => ( + + {expanded ? ( + + {packages.map(({ id, ...pkg }) => ( + + ))} + + ) : null} + {!expanded && selected.id ? ( + + ) : null} + + )} + + )} +
    +); + +export default compose( + graphql(getPackages, { + props: ({ data: { loading, packages = [] } }) => ({ + loading, + packages: packages.map(pkg => { + const packagePrice = priceData.filter(p => p.name === pkg.name)[0]; + const packageName = pkg.name.replace(/-kvm/g, '').trim(); + + return { + ...pkg, + ssd: pkg.name.includes('fastdisk'), + vm: pkg.name.includes('kvm'), + memory: pkg.memory * 1000000, + disk: pkg.disk * 1000000, + price: packagePrice.cost || 0, + name: titleCase(packageName.replace(/-/g, ' ')), + group: constantCase( + pkg.group.replace(/optimized|purpose|KVM/gi, '').trim() + ) + }; + }) + }) + }), + connect( + ({ form, values }, { packages, ...ownProps }) => { + const _sortBy = get(values, 'packages-list-sort-by', 'price'); + const _sortOrder = get(values, 'packages-list-sort-order', 'asc'); + + const ssdOnly = get(form, `${FORM_NAME}-filters.values.ssd`, false); + const computeOptimized = get( + form, + `${FORM_NAME}-filters.values.compute-optimized`, + false + ); + const generalPurpose = get( + form, + `${FORM_NAME}-filters.values.general-purpose`, + false + ); + const storageOptimized = get( + form, + `${FORM_NAME}-filters.values.storage-optimized`, + false + ); + const memoryOptimized = get( + form, + `${FORM_NAME}-filters.values.memory-optimized`, + false + ); + const vmSelected = get(form, 'create-instance-image.values.vms', false); + const pkgSelected = get(form, `${FORM_NAME}.values.package`, null); + + const sorted = sortBy(packages, [_sortBy]); + + let filtered = sorted + .filter(p => (ssdOnly ? p.ssd === ssdOnly : true)) + .filter(p => p.vm === vmSelected); + + if ( + computeOptimized || + generalPurpose || + storageOptimized || + memoryOptimized + ) { + filtered = filtered.filter( + p => + (memoryOptimized && p.group === 'MEMORY') || + (storageOptimized && p.group === 'STORAGE') || + (generalPurpose && p.group === 'GENERAL') || + (computeOptimized && p.group === 'COMPUTE') + ); + } + + return { + ...ownProps, + sortBy: _sortBy, + sortOrder: _sortOrder, + packages: _sortOrder === 'asc' ? filtered : filtered.reverse(), + hasVms: vmSelected, + selected: find(packages, ['id', pkgSelected]) + }; + }, + (dispatch, { history }) => ({ + handleSubmit: () => history.push('/instances/~create/tags'), + handleCancel: () => history.push('/instances/~create/package'), + handleSortBy: (newSortBy, sortOrder) => { + dispatch([ + set({ + name: `packages-list-sort-order`, + value: sortOrder === 'desc' ? 'asc' : 'desc' + }), + set({ + name: `packages-list-sort-by`, + value: newSortBy + }) + ]); + } + }) + ) +)(PackageContainer); diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap index b26ea55b..71e6b4d6 100644 --- a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap +++ b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap @@ -307,7 +307,6 @@ exports[`renders without throwing 1`] = ` } .c25 { - margin-bottom: 0.75rem; margin-left: 0.75rem; } @@ -532,6 +531,8 @@ exports[`renders without throwing 1`] = ` height: 2.625rem; color: rgb(189,189,189); font-weight: 500; + color: rgba(73,73,73,1); + font-weight: bold; } .c26:not(:first-child) { @@ -883,7 +884,11 @@ exports[`renders without throwing 1`] = ` />
    @@ -1319,7 +1324,6 @@ exports[`renders without throwing 1`] = ` } .c31 { - margin-bottom: 0.75rem; margin-left: 0.75rem; } @@ -1575,6 +1579,8 @@ exports[`renders without throwing 1`] = ` height: 2.625rem; color: rgb(189,189,189); font-weight: 500; + color: rgba(73,73,73,1); + font-weight: bold; } .c32:not(:first-child) { @@ -1966,7 +1972,11 @@ exports[`renders without throwing 1`] = ` />
    @@ -2386,7 +2396,6 @@ exports[`renders without throwing 1`] = ` } .c25 { - margin-bottom: 0.75rem; margin-left: 0.75rem; } @@ -2629,6 +2638,8 @@ exports[`renders without throwing 1`] = ` height: 2.625rem; color: rgb(189,189,189); font-weight: 500; + color: rgba(73,73,73,1); + font-weight: bold; } .c26:not(:first-child) { @@ -3110,7 +3121,11 @@ exports[`renders without throwing 1`] = ` />
    @@ -3234,7 +3249,10 @@ exports[`renders without throwing 1`] = ` />
    @@ -3383,7 +3401,10 @@ exports[`renders without throwing 1`] = ` />
    @@ -4476,7 +4497,6 @@ exports[`renders without throwing 1`] = ` } .c25 { - margin-bottom: 0.75rem; margin-left: 0.75rem; } @@ -4719,6 +4739,8 @@ exports[`renders without throwing 1`] = ` height: 2.625rem; color: rgb(189,189,189); font-weight: 500; + color: rgba(73,73,73,1); + font-weight: bold; } .c26:not(:first-child) { @@ -5263,7 +5285,11 @@ exports[`renders without throwing 1`] = ` />
    @@ -5387,7 +5413,10 @@ exports[`renders without throwing 1`] = ` />
    @@ -5536,7 +5565,10 @@ exports[`renders without throwing 1`] = ` />
    @@ -7109,7 +7141,6 @@ exports[`renders without throwing 1`] = ` } .c25 { - margin-bottom: 0.75rem; margin-left: 0.75rem; } @@ -7352,6 +7383,8 @@ exports[`renders without throwing 1`] = ` height: 2.625rem; color: rgb(189,189,189); font-weight: 500; + color: rgba(73,73,73,1); + font-weight: bold; } .c26:not(:first-child) { @@ -7896,7 +7929,11 @@ exports[`renders without throwing 1`] = ` />
    @@ -8020,7 +8057,10 @@ exports[`renders without throwing 1`] = ` />
    @@ -8169,7 +8209,10 @@ exports[`renders without throwing 1`] = ` />
    @@ -9951,7 +9994,6 @@ exports[`renders without throwing } .c25 { - margin-bottom: 0.75rem; margin-left: 0.75rem; } @@ -10194,6 +10236,8 @@ exports[`renders without throwing height: 2.625rem; color: rgb(189,189,189); font-weight: 500; + color: rgba(73,73,73,1); + font-weight: bold; } .c26:not(:first-child) { @@ -10738,7 +10782,11 @@ exports[`renders without throwing />
    @@ -10862,7 +10910,10 @@ exports[`renders without throwing />
    @@ -11011,7 +11062,10 @@ exports[`renders without throwing />
    diff --git a/packages/my-joy-beta/src/data/prices.json b/packages/my-joy-beta/src/data/prices.json index b0de665d..cff32d3a 100644 --- a/packages/my-joy-beta/src/data/prices.json +++ b/packages/my-joy-beta/src/data/prices.json @@ -1,952 +1,252 @@ [ { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Compute Service", - "EffectiveStartDate": "2016-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "k4-kvm", "RatePlanChargeName": "General Purpose KVM - 3.75G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "0.0838", - "UOM": "k4-general-kvm-3.75G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "0.0838", + "name": "k4-general-kvm-3.75G" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Compute Service", - "EffectiveStartDate": "2016-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "k4-kvm", "RatePlanChargeName": "General Purpose KVM - 7.75G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "0.1663", - "UOM": "k4-general-kvm-7.75G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "0.1663", + "name": "k4-general-kvm-7.75G" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Compute Service", - "EffectiveStartDate": "2016-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "k4-kvm", "RatePlanChargeName": "General Purpose KVM - 15.75G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "0.3325", - "UOM": "k4-general-kvm-15.75G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "0.3325", + "name": "k4-general-kvm-15.75G" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Compute Service", - "EffectiveStartDate": "2016-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "k4-kvm", "RatePlanChargeName": "General Purpose KVM - 31.75G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "0.665", - "UOM": "k4-general-kvm-31.75G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "0.665", + "name": "k4-general-kvm-31.75G" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Compute Service", - "EffectiveStartDate": "2016-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "k4-kvm", "RatePlanChargeName": "Memory Optimized KVM - 15.75G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "0.2594", - "UOM": "k4-highram-kvm-15.75G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "0.2594", + "name": "k4-highram-kvm-15.75G" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Compute Service", - "EffectiveStartDate": "2016-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "k4-kvm", "RatePlanChargeName": "Memory Optimized KVM - 31.75G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "0.5203", - "UOM": "k4-highram-kvm-31.75G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "0.5203", + "name": "k4-highram-kvm-31.75G" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Compute Service", - "EffectiveStartDate": "2016-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "k4-kvm", "RatePlanChargeName": "Memory Optimized KVM - 63.75G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "1.0391", - "UOM": "k4-highram-kvm-63.75G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "1.0391", + "name": "k4-highram-kvm-63.75G" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Compute Service", - "EffectiveStartDate": "2016-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "k4-kvm", "RatePlanChargeName": "Fast Disk KVM - 63.75G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "2.1313", - "UOM": "k4-fastdisk-kvm-63.75G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "2.1313", + "name": "k4-fastdisk-kvm-63.75G" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Compute Service", - "EffectiveStartDate": "2016-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "k4-kvm", "RatePlanChargeName": "Compute Optimized KVM - 250M", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "0.0163", - "UOM": "k4-highcpu-kvm-250M" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "0.0163", + "name": "k4-highcpu-kvm-250M" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Compute Service", - "EffectiveStartDate": "2016-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "k4-kvm", "RatePlanChargeName": "Compute Optimized KVM - 750M", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "0.0325", - "UOM": "k4-highcpu-kvm-750M" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "0.0325", + "name": "k4-highcpu-kvm-750M" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Compute Service", - "EffectiveStartDate": "2016-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "k4-kvm", "RatePlanChargeName": "Compute Optimized KVM - 1.75G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "0.0663", - "UOM": "k4-highcpu-kvm-1.75G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "0.0663", + "name": "k4-highcpu-kvm-1.75G" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Compute Service", - "EffectiveStartDate": "2016-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "k4-kvm", "RatePlanChargeName": "Compute Optimized KVM - 3.75G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "0.1313", - "UOM": "k4-highcpu-kvm-3.75G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "0.1313", + "name": "k4-highcpu-kvm-3.75G" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Compute Service", - "EffectiveStartDate": "2016-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "k4-kvm", "RatePlanChargeName": "Compute Optimized KVM - 7.75G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "0.2625", - "UOM": "k4-highcpu-kvm-7.75G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "0.2625", + "name": "k4-highcpu-kvm-7.75G" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Compute Service", - "EffectiveStartDate": "2016-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "k4-kvm", "RatePlanChargeName": "Compute Optimized KVM - 15.75G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "0.525", - "UOM": "k4-highcpu-kvm-15.75G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "0.525", + "name": "k4-highcpu-kvm-15.75G" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Compute Service", - "EffectiveStartDate": "2016-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "k4-kvm", "RatePlanChargeName": "Fast Disk KVM - 31.75G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "1.0663", - "UOM": "k4-fastdisk-kvm-31.75G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "1.0663", + "name": "k4-fastdisk-kvm-31.75G" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Compute Service", - "EffectiveStartDate": "2016-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "k4-kvm", "RatePlanChargeName": "Big Disk KVM - 31.75G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "0.825", - "UOM": "k4-bigdisk-kvm-31.75G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "0.825", + "name": "k4-bigdisk-kvm-31.75G" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Compute Service", - "EffectiveStartDate": "2016-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "k4-kvm", "RatePlanChargeName": "Big Disk KVM - 63.75G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "1.725", - "UOM": "k4-bigdisk-kvm-63.75G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "1.725", + "name": "k4-bigdisk-kvm-63.75G" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Compute Service", - "EffectiveStartDate": "2016-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "k4-kvm", "RatePlanChargeName": "Big Disk KVM - 15.75G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "0.4125", - "UOM": "k4-bigdisk-kvm-15.75G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "0.4125", + "name": "k4-bigdisk-kvm-15.75G" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Container Service", - "EffectiveStartDate": "2015-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "t4-triton", "RatePlanChargeName": "General Purpose - 4G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "0.067", - "UOM": "g4-general-4G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "0.067", + "name": "g4-general-4G" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Container Service", - "EffectiveStartDate": "2015-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "t4-triton", "RatePlanChargeName": "General Purpose - 8G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "0.133", - "UOM": "g4-general-8G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "0.133", + "name": "g4-general-8G" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Container Service", - "EffectiveStartDate": "2015-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "t4-triton", "RatePlanChargeName": "General Purpose - 16G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "0.266", - "UOM": "g4-general-16G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "0.266", + "name": "g4-general-16G" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Container Service", - "EffectiveStartDate": "2015-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "t4-triton", "RatePlanChargeName": "General Purpose - 32G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "0.532", - "UOM": "g4-general-32G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "0.532", + "name": "g4-general-32G" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Container Service", - "EffectiveStartDate": "2015-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "t4-triton", "RatePlanChargeName": "Memory Optimized - 16G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "0.2075", - "UOM": "g4-highram-16G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "0.2075", + "name": "g4-highram-16G" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Container Service", - "EffectiveStartDate": "2015-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "t4-triton", "RatePlanChargeName": "Memory Optimized - 32G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "0.4163", - "UOM": "g4-highram-32G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "0.4163", + "name": "g4-highram-32G" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Container Service", - "EffectiveStartDate": "2015-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "t4-triton", "RatePlanChargeName": "Memory Optimized - 64G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "0.8313", - "UOM": "g4-highram-64G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "0.8313", + "name": "g4-highram-64G" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Container Service", - "EffectiveStartDate": "2015-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "t4-triton", "RatePlanChargeName": "Memory Optimized - 110G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "1.6625", - "UOM": "g4-highram-110G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "1.6625", + "name": "g4-highram-110G" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Container Service", - "EffectiveStartDate": "2015-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "t4-triton", "RatePlanChargeName": "Memory Optimized - 222G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "3.325", - "UOM": "g4-highram-222G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "3.325", + "name": "g4-highram-222G" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Container Service", - "EffectiveStartDate": "2015-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "t4-triton", "RatePlanChargeName": "Compute Optimized - 8G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "0.21", - "UOM": "g4-highcpu-8G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "0.21", + "name": "g4-highcpu-8G" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Container Service", - "EffectiveStartDate": "2015-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "t4-triton", "RatePlanChargeName": "Compute Optimized - 96G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "2.496", - "UOM": "g4-highcpu-96G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "2.496", + "name": "g4-highcpu-96G" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Container Service", - "EffectiveStartDate": "2015-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "t4-triton", "RatePlanChargeName": "Fast Disk - 32G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "0.853", - "UOM": "g4-fastdisk-32G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "0.853", + "name": "g4-fastdisk-32G" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Container Service", - "EffectiveStartDate": "2015-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "t4-triton", "RatePlanChargeName": "Fast Disk - 64G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "1.705", - "UOM": "g4-fastdisk-64G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "1.705", + "name": "g4-fastdisk-64G" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Container Service", - "EffectiveStartDate": "2015-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "t4-triton", "RatePlanChargeName": "Fast Disk - 110G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "3.41", - "UOM": "g4-fastdisk-110G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "3.41", + "name": "g4-fastdisk-110G" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Container Service", - "EffectiveStartDate": "2015-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "t4-triton", "RatePlanChargeName": "Fast Disk - 222G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "5.52", - "UOM": "g4-fastdisk-222G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "5.52", + "name": "g4-fastdisk-222G" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Container Service", - "EffectiveStartDate": "2015-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "t4-triton", "RatePlanChargeName": "Compute Optimized - 128M", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "0.003", - "UOM": "g4-highcpu-128M" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "0.003", + "name": "g4-highcpu-128M" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Container Service", - "EffectiveStartDate": "2015-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "t4-triton", "RatePlanChargeName": "Compute Optimized - 256M", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "0.007", - "UOM": "g4-highcpu-256M" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "0.007", + "name": "g4-highcpu-256M" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Container Service", - "EffectiveStartDate": "2015-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "t4-triton", "RatePlanChargeName": "Compute Optimized - 512M", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "0.013", - "UOM": "g4-highcpu-512M" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "0.013", + "name": "g4-highcpu-512M" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Container Service", - "EffectiveStartDate": "2015-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "t4-triton", "RatePlanChargeName": "Compute Optimized - 1G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "0.026", - "UOM": "g4-highcpu-1G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "0.026", + "name": "g4-highcpu-1G" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Container Service", - "EffectiveStartDate": "2015-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "t4-triton", "RatePlanChargeName": "Compute Optimized - 2G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "0.053", - "UOM": "g4-highcpu-2G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "0.053", + "name": "g4-highcpu-2G" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Container Service", - "EffectiveStartDate": "2015-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "t4-triton", "RatePlanChargeName": "Compute Optimized - 4G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "0.105", - "UOM": "g4-highcpu-4G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "0.105", + "name": "g4-highcpu-4G" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Container Service", - "EffectiveStartDate": "2015-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "t4-triton", "RatePlanChargeName": "Compute Optimized - 16G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "0.42", - "UOM": "g4-highcpu-16G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "0.42", + "name": "g4-highcpu-16G" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Container Service", - "EffectiveStartDate": "2015-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "t4-triton", "RatePlanChargeName": "Compute Optimized - 32G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "0.84", - "UOM": "g4-highcpu-32G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "0.84", + "name": "g4-highcpu-32G" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Container Service", - "EffectiveStartDate": "2015-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "t4-triton", "RatePlanChargeName": "Compute Optimized - 64G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "1.68", - "UOM": "g4-highcpu-64G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "1.68", + "name": "g4-highcpu-64G" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Container Service", - "EffectiveStartDate": "2015-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "t4-triton", "RatePlanChargeName": "Compute Optimized - 110G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "3.328", - "UOM": "g4-highcpu-110G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "3.328", + "name": "g4-highcpu-110G" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Container Service", - "EffectiveStartDate": "2015-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "t4-triton", "RatePlanChargeName": "Compute Optimized - 160G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "4.16", - "UOM": "g4-highcpu-160G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "4.16", + "name": "g4-highcpu-160G" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Container Service", - "EffectiveStartDate": "2015-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "t4-triton", "RatePlanChargeName": "Compute Optimized - 192G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "4.992", - "UOM": "g4-highcpu-192G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "4.992", + "name": "g4-highcpu-192G" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Container Service", - "EffectiveStartDate": "2015-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "t4-triton", "RatePlanChargeName": "Compute Optimized - 222G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "5.772", - "UOM": "g4-highcpu-222G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "5.772", + "name": "g4-highcpu-222G" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Container Service", - "EffectiveStartDate": "2015-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "t4-triton", "RatePlanChargeName": "Big Disk - 64G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "1.38", - "UOM": "g4-bigdisk-64G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "1.38", + "name": "g4-bigdisk-64G" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Container Service", - "EffectiveStartDate": "2015-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "t4-triton", "RatePlanChargeName": "Big Disk - 16G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "0.345", - "UOM": "g4-bigdisk-16G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "0.345", + "name": "g4-bigdisk-16G" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Container Service", - "EffectiveStartDate": "2015-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "t4-triton", "RatePlanChargeName": "Big Disk - 32G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "0.69", - "UOM": "g4-bigdisk-32G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "0.69", + "name": "g4-bigdisk-32G" }, { - "Sku": "SKU-00000009", - "SkuName": "Compute", - "Productname": "Triton Container Service", - "EffectiveStartDate": "2015-01-01", - "EffectiveEndDate": "2100-01-01", - "BillingTag": "t4-triton", "RatePlanChargeName": "Big Disk - 110G", - "RatePlanChargeType": "Usage", - "RatePlanChargeModel": "PerUnit", - "RatePlanChargePriceSummary": [ - { - "cost": "2.76", - "UOM": "g4-bigdisk-110G" - } - ], - "RatePlanId": "2c92a0f93f413172013f4409a0466d19", - "Status": "Active" + "cost": "2.76", + "name": "g4-bigdisk-110G" } ] diff --git a/packages/my-joy-beta/src/graphql/get-packages.gql b/packages/my-joy-beta/src/graphql/get-packages.gql new file mode 100644 index 00000000..c8bbe2dc --- /dev/null +++ b/packages/my-joy-beta/src/graphql/get-packages.gql @@ -0,0 +1,10 @@ +query Images { + packages { + id + name + memory + disk + vcpus + group + } +} diff --git a/packages/ui-toolkit/src/form/__tests__/__snapshots__/form.spec.js.snap b/packages/ui-toolkit/src/form/__tests__/__snapshots__/form.spec.js.snap index e27fe12e..aaac0264 100644 --- a/packages/ui-toolkit/src/form/__tests__/__snapshots__/form.spec.js.snap +++ b/packages/ui-toolkit/src/form/__tests__/__snapshots__/form.spec.js.snap @@ -108,8 +108,8 @@ exports[`Form Checkbox 1`] = ` } .c4 { - margin-bottom: 0.75rem; margin-left: 0.75rem; + margin-bottom: 0.75rem; } .c0 { @@ -164,7 +164,10 @@ exports[`Form Checkbox 1`] = ` />