From caef3ca57e43152c25cb4e870d861d4168bdb1ce Mon Sep 17 00:00:00 2001 From: Tom Gallacher Date: Wed, 18 Jan 2017 14:58:54 +0000 Subject: [PATCH 1/8] Fix asset copy on npm publish in ui --- frontend/yarn.lock | 116 ++++++++++++++++++++++++--------------------- ui/Makefile | 2 +- 2 files changed, 63 insertions(+), 55 deletions(-) diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 37e6496d..bbcf77b6 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -3,8 +3,8 @@ "@tomgco/joyent-portal-ui@alpha": - version "0.0.1-504" - resolved "https://registry.yarnpkg.com/@tomgco/joyent-portal-ui/-/joyent-portal-ui-0.0.1-504.tgz#05b00fccad0152b19356fd530c36926ffa23b6da" + version "0.0.1-516" + resolved "https://registry.yarnpkg.com/@tomgco/joyent-portal-ui/-/joyent-portal-ui-0.0.1-516.tgz#656af8b5c920d82ca87a4a5331284b476c161f61" dependencies: build-array "^1.0.0" chart.js "^2.4.0" @@ -76,7 +76,7 @@ acorn-jsx@^3.0.0, acorn-jsx@^3.0.1: dependencies: acorn "^3.0.4" -acorn@>=2.5.2, acorn@^4.0.1, acorn@^4.0.3: +acorn@>=2.5.2, acorn@^4.0.1, acorn@^4.0.3, acorn@^4.0.4: version "4.0.4" resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.4.tgz#17a8d6a7a6c4ef538b814ec9abac2779293bf30a" @@ -1476,8 +1476,8 @@ camelcase@^3.0.0: resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a" caniuse-db@^1.0.30000604: - version "1.0.30000611" - resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000611.tgz#1075d14d9b3cc153caf5e9e35f45565b03304c37" + version "1.0.30000613" + resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000613.tgz#639133b7a5380c1416f9701d23d54d093dd68299" capture-stack-trace@^1.0.0: version "1.0.0" @@ -1534,8 +1534,8 @@ chart.js@^2.4.0: moment "^2.10.6" chartjs-chart-box-plot@prerelease: - version "1.0.0-16" - resolved "https://registry.yarnpkg.com/chartjs-chart-box-plot/-/chartjs-chart-box-plot-1.0.0-16.tgz#2544012ae84b04fa9922fe528017f5b748346497" + version "1.0.0-17" + resolved "https://registry.yarnpkg.com/chartjs-chart-box-plot/-/chartjs-chart-box-plot-1.0.0-17.tgz#c17005d36bdfa8bca0191c47324367c39072c834" chartjs-color-string@^0.4.0: version "0.4.0" @@ -1672,8 +1672,8 @@ color-convert@^0.5.3: resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-0.5.3.tgz#bdb6c69ce660fadffe0b0007cc447e1b9f7282bd" color-convert@^1.8.2: - version "1.8.2" - resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.8.2.tgz#be868184d7c8631766d54e7078e2672d7c7e3339" + version "1.9.0" + resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.0.tgz#1accf97dd739b983bf994d56fec8f95853641b7a" dependencies: color-name "^1.1.1" @@ -2037,9 +2037,9 @@ d3-hierarchy@1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/d3-hierarchy/-/d3-hierarchy-1.0.3.tgz#986b4925e81f1e0b4087e9442850f950cf27d338" -d3-interpolate@1, d3-interpolate@1.1.2: - version "1.1.2" - resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-1.1.2.tgz#b52e6927a04fe1fe2a4cffc139e5389ed3e5e790" +d3-interpolate@1, d3-interpolate@1.1.3: + version "1.1.3" + resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-1.1.3.tgz#e119c91b6be4941e581675ca3e1279bb92bd2c9b" dependencies: d3-color "1" @@ -2134,8 +2134,8 @@ d3-zoom@1.1.1: d3-transition "1" d3@^4.4.1: - version "4.4.1" - resolved "https://registry.yarnpkg.com/d3/-/d3-4.4.1.tgz#2cbb08f92970364076ffe91ab83ef66b80610785" + version "4.4.2" + resolved "https://registry.yarnpkg.com/d3/-/d3-4.4.2.tgz#7173647bd46c7f9b9dc6b41c1b999de0fc206a26" dependencies: d3-array "1.0.2" d3-axis "1.0.4" @@ -2151,7 +2151,7 @@ d3@^4.4.1: d3-format "1.0.2" d3-geo "1.4.0" d3-hierarchy "1.0.3" - d3-interpolate "1.1.2" + d3-interpolate "1.1.3" d3-path "1.0.3" d3-polygon "1.0.2" d3-quadtree "1.0.2" @@ -2401,7 +2401,7 @@ encoding@^0.1.11: dependencies: iconv-lite "~0.4.13" -enhanced-resolve@^2.2.0, enhanced-resolve@^2.2.2: +enhanced-resolve@^2.2.2: version "2.3.0" resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-2.3.0.tgz#a115c32504b6302e85a76269d7a57ccdd962e359" dependencies: @@ -2410,6 +2410,15 @@ enhanced-resolve@^2.2.0, enhanced-resolve@^2.2.2: object-assign "^4.0.1" tapable "^0.2.3" +enhanced-resolve@^3.0.0: + version "3.0.3" + resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-3.0.3.tgz#df14c06b5fc5eecade1094c9c5a12b4b3edc0b62" + dependencies: + graceful-fs "^4.1.2" + memory-fs "^0.4.0" + object-assign "^4.0.1" + tapable "^0.2.5" + entities@^1.1.1, entities@~1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0" @@ -2903,7 +2912,7 @@ foreach@^2.0.5: version "2.0.5" resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99" -foreground-child@^1.5.3, foreground-child@^1.5.6: +foreground-child@^1.3.3, foreground-child@^1.5.3: version "1.5.6" resolved "https://registry.yarnpkg.com/foreground-child/-/foreground-child-1.5.6.tgz#4fd71ad2dfde96789b980a5c0a295937cb2f5ce9" dependencies: @@ -3708,17 +3717,17 @@ isstream@~0.1.2: version "0.1.2" resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a" -istanbul-lib-coverage@^1.0.0, istanbul-lib-coverage@^1.0.0-alpha, istanbul-lib-coverage@^1.0.0-alpha.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-1.0.0.tgz#c3f9b6d226da12424064cce87fce0fb57fdfa7a2" +istanbul-lib-coverage@^1.0.0, istanbul-lib-coverage@^1.0.0-alpha, istanbul-lib-coverage@^1.0.0-alpha.0, istanbul-lib-coverage@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-1.0.1.tgz#f263efb519c051c5f1f3343034fc40e7b43ff212" -istanbul-lib-hook@^1.0.0-alpha.4: +istanbul-lib-hook@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/istanbul-lib-hook/-/istanbul-lib-hook-1.0.0.tgz#fc5367ee27f59268e8f060b0c7aaf051d9c425c5" dependencies: append-transform "^0.4.0" -istanbul-lib-instrument@^1.3.0: +istanbul-lib-instrument@^1.4.2: version "1.4.2" resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-1.4.2.tgz#0e2fdfac93c1dabf2e31578637dc78a19089f43e" dependencies: @@ -4164,14 +4173,14 @@ media-typer@0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748" -memory-fs@^0.3.0, memory-fs@~0.3.0: +memory-fs@^0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.3.0.tgz#7bcc6b629e3a43e871d7e29aca6ae8a7f15cbb20" dependencies: errno "^0.1.3" readable-stream "^2.0.1" -memory-fs@~0.4.1: +memory-fs@^0.4.0, memory-fs@~0.4.1: version "0.4.1" resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552" dependencies: @@ -4470,8 +4479,8 @@ number-is-nan@^1.0.0: resolved "https://registry.yarnpkg.com/nwmatcher/-/nwmatcher-1.3.9.tgz#8bab486ff7fa3dfd086656bbe8b17116d3692d2a" nyc@^10.0.0: - version "10.0.0" - resolved "https://registry.yarnpkg.com/nyc/-/nyc-10.0.0.tgz#95bd4a2c3487f33e1e78f213c6d5a53d88074ce6" + version "10.1.2" + resolved "https://registry.yarnpkg.com/nyc/-/nyc-10.1.2.tgz#ea7acaa20a235210101604f4e7d56d28453b0274" dependencies: archy "^1.0.0" arrify "^1.0.1" @@ -4483,9 +4492,9 @@ nyc@^10.0.0: find-up "^1.1.2" foreground-child "^1.5.3" glob "^7.0.6" - istanbul-lib-coverage "^1.0.0" - istanbul-lib-hook "^1.0.0-alpha.4" - istanbul-lib-instrument "^1.3.0" + istanbul-lib-coverage "^1.0.1" + istanbul-lib-hook "^1.0.0" + istanbul-lib-instrument "^1.4.2" istanbul-lib-report "^1.0.0-alpha.3" istanbul-lib-source-maps "^1.1.0" istanbul-reports "^1.0.0" @@ -4496,9 +4505,9 @@ nyc@^10.0.0: resolve-from "^2.0.0" rimraf "^2.5.4" signal-exit "^3.0.1" - spawn-wrap "^1.2.4" + spawn-wrap "1.2.4" test-exclude "^3.3.0" - yargs "^6.4.0" + yargs "^6.6.0" yargs-parser "^4.0.2" oauth-sign@~0.8.1: @@ -5317,8 +5326,8 @@ redux-promise-middleware@^4.2.0: resolved "https://registry.yarnpkg.com/redux-promise-middleware/-/redux-promise-middleware-4.2.0.tgz#052a7ac2df0e3468e196279f14bdefe711d10cac" redux-thunk@^2.1.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.1.0.tgz#c724bfee75dbe352da2e3ba9bc14302badd89a98" + version "2.2.0" + resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.2.0.tgz#e615a16e16b47a19a515766133d1e3e99b7852e5" redux@^3.6.0: version "3.6.0" @@ -5716,11 +5725,11 @@ spawn-sync@^1.0.15: concat-stream "^1.4.7" os-shim "^0.1.2" -spawn-wrap@^1.2.4: - version "1.3.4" - resolved "https://registry.yarnpkg.com/spawn-wrap/-/spawn-wrap-1.3.4.tgz#5d133070fef81cd26d8259acaa07fc1a86fd45dc" +spawn-wrap@1.2.4: + version "1.2.4" + resolved "https://registry.yarnpkg.com/spawn-wrap/-/spawn-wrap-1.2.4.tgz#920eb211a769c093eebfbd5b0e7a5d2e68ab2e40" dependencies: - foreground-child "^1.5.6" + foreground-child "^1.3.3" mkdirp "^0.5.0" os-homedir "^1.0.1" rimraf "^2.3.3" @@ -5874,8 +5883,8 @@ strip-json-comments@~2.0.1: resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a" styled-components@^1.3.0: - version "1.3.0" - resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-1.3.0.tgz#0711b5a82fe784b458fd6e5054b842751c543a6b" + version "1.3.1" + resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-1.3.1.tgz#219aebf87405d890e0c60c8f702089d947aafc0a" dependencies: buffer "^5.0.2" css-to-react-native "^1.0.6" @@ -5966,7 +5975,7 @@ tap-xunit@^1.5.1: xmlbuilder "~4.1.0" xtend "~4.0.0" -tapable@^0.2.3, tapable@~0.2.3: +tapable@^0.2.3, tapable@^0.2.5, tapable@~0.2.5: version "0.2.6" resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.2.6.tgz#206be8e188860b514425375e6f1ae89bfb01fd8d" @@ -6137,7 +6146,7 @@ ua-parser-js@^0.7.9: version "0.7.12" resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.12.tgz#04c81a99bdd5dc52263ea29d24c6bf8d4818a4bb" -uglify-js@^2.6, uglify-js@~2.7.3: +uglify-js@^2.6, uglify-js@^2.7.5: version "2.7.5" resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.7.5.tgz#4612c0c7baaee2ba7c487de4904ae122079f2ca8" dependencies: @@ -6312,7 +6321,7 @@ warning@^3.0.0: dependencies: loose-envify "^1.0.0" -watchpack@^1.0.0: +watchpack@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.2.0.tgz#15d4620f1e7471f13fcb551d5c030d2c3eb42dbb" dependencies: @@ -6355,7 +6364,7 @@ webpack-shell-plugin@^0.5.0: version "0.5.0" resolved "https://registry.yarnpkg.com/webpack-shell-plugin/-/webpack-shell-plugin-0.5.0.tgz#29b8a1d80ddeae0ddb10e729667f728653c2c742" -webpack-sources@^0.1.0: +webpack-sources@^0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-0.1.4.tgz#ccc2c817e08e5fa393239412690bb481821393cd" dependencies: @@ -6363,29 +6372,28 @@ webpack-sources@^0.1.0: source-map "~0.5.3" webpack@^2.1.0-beta.25: - version "2.1.0-beta.28" - resolved "https://registry.yarnpkg.com/webpack/-/webpack-2.1.0-beta.28.tgz#8f9402c05bae04ab8d3918489b3547544a2e2641" + version "2.2.0" + resolved "https://registry.yarnpkg.com/webpack/-/webpack-2.2.0.tgz#09246336b5581c9002353f75bcadb598a648f977" dependencies: - acorn "^4.0.3" + acorn "^4.0.4" acorn-dynamic-import "^2.0.0" ajv "^4.7.0" ajv-keywords "^1.1.1" async "^2.1.2" - enhanced-resolve "^2.2.0" + enhanced-resolve "^3.0.0" interpret "^1.0.0" json-loader "^0.5.4" loader-runner "^2.2.0" loader-utils "^0.2.16" - memory-fs "~0.3.0" + memory-fs "~0.4.1" mkdirp "~0.5.0" node-libs-browser "^2.0.0" - object-assign "^4.0.1" source-map "^0.5.3" supports-color "^3.1.0" - tapable "~0.2.3" - uglify-js "~2.7.3" - watchpack "^1.0.0" - webpack-sources "^0.1.0" + tapable "~0.2.5" + uglify-js "^2.7.5" + watchpack "^1.2.0" + webpack-sources "^0.1.4" yargs "^6.0.0" websocket-driver@>=0.5.1: @@ -6548,7 +6556,7 @@ yargs-parser@^4.0.2, yargs-parser@^4.2.0: dependencies: camelcase "^3.0.0" -yargs@^6.0.0, yargs@^6.4.0: +yargs@^6.0.0, yargs@^6.6.0: version "6.6.0" resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.6.0.tgz#782ec21ef403345f830a808ca3d513af56065208" dependencies: diff --git a/ui/Makefile b/ui/Makefile index d22be54a..fc915dcc 100644 --- a/ui/Makefile +++ b/ui/Makefile @@ -42,7 +42,7 @@ install-production: compile clean .PHONY: compile compile: install mkdir -p dist - cp -R src/ dist/. + cp -R src/. dist/. $(bindir)/babel src --out-dir dist --source-maps inline .PHONY: build From 77373ec32dc8c6e033c36fb54cdada5590f575c8 Mon Sep 17 00:00:00 2001 From: Tom Gallacher Date: Wed, 18 Jan 2017 15:33:32 +0000 Subject: [PATCH 2/8] Adding images as a route to frontend --- frontend/server/index.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/frontend/server/index.js b/frontend/server/index.js index 64eed390..4dc5745c 100644 --- a/frontend/server/index.js +++ b/frontend/server/index.js @@ -50,6 +50,18 @@ server.register(plugins, (err) => { process.exit(1); } + server.route({ + method: 'GET', + path: '/static/images/{param*}', + handler: { + directory: { + path: './images/', + redirectToSlash: true, + index: false + } + } + }); + server.route({ method: 'GET', path: '/static/{param*}', From 2b1a94fbfa2c68b273614ad4cf1f487b4a6f5f25 Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Wed, 18 Jan 2017 17:00:59 +0000 Subject: [PATCH 3/8] starting work on impliment people/members module --- frontend/src/components/people-item/index.js | 31 +++++++++++ frontend/src/components/people-list/index.js | 39 ++++++++++++++ frontend/src/containers/org/people.js | 57 ++++++++++++++++---- frontend/src/mock-state.json | 11 ++-- frontend/src/prop-types.js | 7 ++- frontend/src/state/selectors.js | 10 +++- ui/src/components/button/index.js | 1 + 7 files changed, 141 insertions(+), 15 deletions(-) create mode 100644 frontend/src/components/people-item/index.js create mode 100644 frontend/src/components/people-list/index.js diff --git a/frontend/src/components/people-item/index.js b/frontend/src/components/people-item/index.js new file mode 100644 index 00000000..8bff9fc2 --- /dev/null +++ b/frontend/src/components/people-item/index.js @@ -0,0 +1,31 @@ +const React = require('react'); + +const PropTypes = require('@root/prop-types'); +// const List = require('@ui/components/list'); + +// const { +// ListItem, +// ListItemView, +// ListItemMeta, +// ListItemTitle, +// ListItemOptions +// } = List; + +const PersonItem = ({ + person = {}, +}) => { + + return ( + + {person.uuid} + {person.uuid} + {person.uuid} + + ); +}; + +PersonItem.propTypes = { + person: PropTypes.person, +}; + +module.exports = PersonItem; \ No newline at end of file diff --git a/frontend/src/components/people-list/index.js b/frontend/src/components/people-list/index.js new file mode 100644 index 00000000..304314d0 --- /dev/null +++ b/frontend/src/components/people-list/index.js @@ -0,0 +1,39 @@ +const React = require('react'); + +const PersonItem = require('@components/people-item'); +const PropTypes = require('@root/prop-types'); + +const PeopleList = ({ + people = [] +}) => { + + const peopleList = people.map((person) => ( + + )); + + return ( +
+ + + + + + + + + + {peopleList} + +
MemberStatusRole
+
+ ); +}; + +PeopleList.propTypes = { + people: React.PropTypes.arrayOf(PropTypes.person), +}; + +module.exports = PeopleList; diff --git a/frontend/src/containers/org/people.js b/frontend/src/containers/org/people.js index 044d7278..31109005 100644 --- a/frontend/src/containers/org/people.js +++ b/frontend/src/containers/org/people.js @@ -3,6 +3,13 @@ const React = require('react'); const ReactRedux = require('react-redux'); // const ReactRouter = require('react-router'); +const Row = require('@ui/components/row'); +const Column= require('@ui/components/column'); +const Button= require('@ui/components/button'); +const PropTypes = require('@root/prop-types'); +const PeopleList = require('@components/people-list'); +const selectors = require('@state/selectors'); + const Section = require('./section'); // const { @@ -13,23 +20,53 @@ const { connect } = ReactRedux; -// const { -// Link, -// Match, -// Miss, -// Redirect -// } = ReactRouter; +const { + peopleByOrgIdSelector +} = selectors; + +const buttonStyle = { + float: 'right' +}; const People = (props) => { + + const { + people = [] + } = props; + return (
-

people

+ + + + + + + + + + +
); }; -People.propTypes = {}; +People.propTypes = { + people: React.PropTypes.arrayOf(PropTypes.person) + // toggleCollapsed: React.PropTypes.func +}; -const mapStateToProps = (state) => ({}); +const mapStateToProps = (state, { + params = {} +}) => ({ + people: peopleByOrgIdSelector(params.org)(state) +}); -module.exports = connect(mapStateToProps)(People); +const mapDispatchToProps = (dispatch) => ({}); + +module.exports = connect( + mapStateToProps, + mapDispatchToProps +)(People); diff --git a/frontend/src/mock-state.json b/frontend/src/mock-state.json index 3be8081a..d7cb4fd0 100644 --- a/frontend/src/mock-state.json +++ b/frontend/src/mock-state.json @@ -211,18 +211,23 @@ "owner": "b94033c1-3665-4c36-afab-d9c3d0b51c01", "id": "nicola", "name": "Your dashboard", - "image": "https://pbs.twimg.com/profile_images/641289584580493312/VBfsPlff_400x400.jpg" + "image": "https://pbs.twimg.com/profile_images/641289584580493312/VBfsPlff_400x400.jpg", + "members": {} }, { "owner": "b94033c1-3665-4c36-afab-d9c3d0b51c01", "uuid": "e12ad7db-91b2-4154-83dd-40dcfc700dcc", "id": "biz-tech", - "name": "BizTech" + "name": "BizTech", + "members": [{ + "uuid": "fd853d8f-e1dd-49b5-b7b3-ae9adfea1e2f" + }] }, { "owner": "b94033c1-3665-4c36-afab-d9c3d0b51c01", "uuid": "551f316d-e414-480f-9787-b4c408db3edd", "id": "make-us-proud", "name": "Make Us Proud", - "image": "/static/images/make-us-proud.svg" + "image": "/static/images/make-us-proud.svg", + "members": {} }] }, "projects": { diff --git a/frontend/src/prop-types.js b/frontend/src/prop-types.js index f7baee89..cc1ce973 100644 --- a/frontend/src/prop-types.js +++ b/frontend/src/prop-types.js @@ -61,6 +61,10 @@ const Sections = React.PropTypes.arrayOf( React.PropTypes.string ); +const Person = React.PropTypes.shape({ + ...BaseObject +}); + module.exports = { account: Account, link: Link, @@ -71,5 +75,6 @@ module.exports = { instance: Instance, metric: Metric, metricType: MetricType, - dataset: Dataset + dataset: Dataset, + person: Person }; diff --git a/frontend/src/state/selectors.js b/frontend/src/state/selectors.js index 23a06af4..da58c2ac 100644 --- a/frontend/src/state/selectors.js +++ b/frontend/src/state/selectors.js @@ -18,6 +18,7 @@ const services = (state) => get(state, 'services.data', []); const collapsedServices = (state) => get(state, 'services.ui.collapsed', []); const collapsedInstances = (state) => get(state, 'instances.ui.collapsed', []); const instances = (state) => get(state, 'instances.data', []); +const members = (state) => get(state, 'members.data', []); const metricTypes = (state) => get(state, 'metrics.data.types', []); const metricDatasets = (state) => get(state, 'metrics.data.datasets', []); @@ -110,6 +111,12 @@ const instancesByProjectId = (projectId) => createSelector( })) ); +const peopleByOrgId = (orgId) => createSelector( + // [members, orgById(orgId)], (members, org) => org.members + + [members, orgById(orgId)], (members, org) => org.members +); + module.exports = { accountSelector: account, accountUISelector: accountUi, @@ -126,5 +133,6 @@ module.exports = { instancesByServiceIdSelector: instancesByServiceId, metricsByServiceIdSelector: metricsByServiceId, instancesByProjectIdSelector: instancesByProjectId, - metricTypeByUuidSelector: metricTypeByUuid + metricTypeByUuidSelector: metricTypeByUuid, + peopleByOrgIdSelector: peopleByOrgId }; diff --git a/ui/src/components/button/index.js b/ui/src/components/button/index.js index 7fa255d2..1c3b0563 100644 --- a/ui/src/components/button/index.js +++ b/ui/src/components/button/index.js @@ -130,6 +130,7 @@ const style = css` `; const StyledButton = styled.button` + min-width: ${remcalc(120)}; ${style} `; From 2c7d7512045bfca28e146ae2ac1384e98c4946bb Mon Sep 17 00:00:00 2001 From: JUDIT GRESKOVITS Date: Wed, 18 Jan 2017 17:52:20 +0000 Subject: [PATCH 4/8] Add functional metric chart with customisable time scale --- ui/package.json | 1 + ui/src/components/metric/body.js | 33 --- ui/src/components/metric/graph.js | 174 +++++++++++ ui/src/components/metric/icon-settings.svg | 18 ++ ui/src/components/metric/index.js | 2 +- ui/src/components/metric/metric-data.js | 307 ++++++++++++++++++++ ui/src/components/metric/select.js | 10 +- ui/src/components/metric/settings-button.js | 3 +- ui/src/components/metric/story.js | 81 +++++- ui/src/components/metric/view.js | 6 + ui/yarn.lock | 2 +- 11 files changed, 591 insertions(+), 46 deletions(-) delete mode 100644 ui/src/components/metric/body.js create mode 100644 ui/src/components/metric/graph.js create mode 100644 ui/src/components/metric/icon-settings.svg create mode 100644 ui/src/components/metric/metric-data.js diff --git a/ui/package.json b/ui/package.json index 377fe482..5e14c5d4 100644 --- a/ui/package.json +++ b/ui/package.json @@ -24,6 +24,7 @@ "lodash.isfunction": "^3.0.8", "lodash.isstring": "^4.0.1", "lodash.isundefined": "^3.0.1", + "moment": "^2.17.1", "param-case": "^2.1.0", "random-natural": "^1.0.3", "react": "^15.4.1", diff --git a/ui/src/components/metric/body.js b/ui/src/components/metric/body.js deleted file mode 100644 index 65c7effc..00000000 --- a/ui/src/components/metric/body.js +++ /dev/null @@ -1,33 +0,0 @@ -const React = require('react'); -const Styled = require('styled-components'); -const fns = require('../../shared/functions'); - -const { - remcalc -} = fns; - -const { - default: styled -} = Styled; - -const StyledBody = styled.div` - margin: 0; - width: 100%; - height: ${remcalc(264)}; -`; - -const Body = ({ - children -}) => { - return ( - - {children} - - ); -}; - -Body.propTypes = { - children: React.PropTypes.node -}; - -module.exports = Body; diff --git a/ui/src/components/metric/graph.js b/ui/src/components/metric/graph.js new file mode 100644 index 00000000..39d6d4da --- /dev/null +++ b/ui/src/components/metric/graph.js @@ -0,0 +1,174 @@ +const React = require('react'); +const Styled = require('styled-components'); +const moment = require('moment'); +const Chart = require('chart.js'); +const whisker = require('chartjs-chart-box-plot'); + +whisker(Chart); + +const { + default: styled +} = Styled; + +const Container = styled.div` + position: relative; + height: 100%; + width: 100%; +`; + +const Canvas = styled.canvas` + +`; + +class Graph extends React.Component { + + componentDidMount() { + const { + yMax = 100, + yMin = 0, + yMeasurement = '%' + } = this.props; + + const { + data, + xMax, + xMin, + xUnitStepSize + } = this.processData(this.props); + + this._chart = new Chart(this._refs.component, { + type: 'whisker', + responsive: true, + maintainAspectRatio: true, + data: { + datasets: [{ + data: data + }] + }, + options: { + layout: { + padding: 10 + }, + scales: { + xAxes: [{ + display: true, + type: 'time', + time: { + unit: 'minute', + unitStepSize: xUnitStepSize, + max: xMax, + min: xMin, + /*displayFormats: { + hour: 'MMM D, hA' + }*/ + }, + }], + yAxes: [{ + display: true, + ticks: { + min: yMin, + max: yMax, + callback: (value, index, values) => { + return `${value.toFixed(2)}${yMeasurement}`; + } + } + }] + }, + legend: { + display: false + } + }, + }); + } + + componentWillReceiveProps(nextProps) { + + const { + data, + xMax, + xMin, + xUnitStepSize + } = this.processData(nextProps); + + this._chart.data.datasets = [{ + data + }]; + this._chart.options.scales.xAxes[0].time.max = xMax; + this._chart.options.scales.xAxes[0].time.min = xMin; + this._chart.options.scales.xAxes[0].time.unitStepSize = xUnitStepSize; + this._chart.update(0); + } + + processData(props) { + const { + data = [], + duration = 360 + } = this.props; + // I'm going to assume that data will be structured in 10min intervals... + // And that newest data will be at the end... + // Let's rock and roll! + // All this shizzle below needs to be recalculated on new props, yay! + const now = moment(); + // first time on scale x + const before = moment().subtract(duration, 'minutes'); + // remove leading data before first time on scale x + const totalData = data.slice(data.length - 1 - duration/10); + // adjust time of first data, if there's less data than would fill the chart + const start = moment(before) + .add(duration - (totalData.length-1)*10, 'minutes'); + // add times to data + const dataWithTime = totalData.map((d, i) => { + const add = i*10; + return Object.assign( + {}, + d, + { + x: moment(start).add(add, 'minutes').toDate() + } + ); + }); + + // set min and max + const xMax = now.toDate(); + const xMin = before.toDate(); + // calculate stepsize + const xUnitStepSize = duration/6; + + return { + data: dataWithTime, + xMax, + xMin, + xUnitStepSize + }; + } + + ref(name) { + this._refs = this._refs || {}; + + return (el) => { + this._refs[name] = el; + }; + } + + render() { + return ( + + + + ); + } +} + +Graph.propTypes = { + data: React.PropTypes.array, + duration: React.PropTypes.number, + yMax: React.PropTypes.number, + yMeasurement: React.PropTypes.string, + yMin: React.PropTypes.number +}; + +module.exports = Graph; diff --git a/ui/src/components/metric/icon-settings.svg b/ui/src/components/metric/icon-settings.svg new file mode 100644 index 00000000..322ce7ea --- /dev/null +++ b/ui/src/components/metric/icon-settings.svg @@ -0,0 +1,18 @@ + + + + icon: settings + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/ui/src/components/metric/index.js b/ui/src/components/metric/index.js index d1090a77..ddd4f573 100644 --- a/ui/src/components/metric/index.js +++ b/ui/src/components/metric/index.js @@ -1,5 +1,5 @@ module.exports = { - MetricBody: require('./body'), + MetricGraph: require('./graph'), MetricCloseButton: require('./close-button'), MetricHeader: require('./header'), MetricSelect: require('./select'), diff --git a/ui/src/components/metric/metric-data.js b/ui/src/components/metric/metric-data.js new file mode 100644 index 00000000..6c1ff682 --- /dev/null +++ b/ui/src/components/metric/metric-data.js @@ -0,0 +1,307 @@ +module.exports = [{ + firstQuartile: 15, + thirdQuartile: 15, + median: 15, + max: 15, + min: 15, +}, { + firstQuartile: 26, + thirdQuartile: 26, + median: 26, + max: 26, + min: 26, +}, { + firstQuartile: 17, + thirdQuartile: 17, + median: 17, + max: 17, + min: 17, +}, { + firstQuartile: 15, + thirdQuartile: 25, + median: 19, + max: 19, + min: 20, +}, { + firstQuartile: 19, + thirdQuartile: 25, + median: 21, + max: 20, + min: 25, +}, { + firstQuartile: 24, + thirdQuartile: 30, + median: 25, + max: 26, + min: 27, +}, { + firstQuartile: 28, + thirdQuartile: 34, + median: 30, + max: 30, + min: 30, +}, { + firstQuartile: 30, + thirdQuartile: 45, + median: 35, + max: 40, + min: 40, +}, { + firstQuartile: 20, + thirdQuartile: 55, + median: 45, + max: 44, + min: 44, +}, { + firstQuartile: 55, + thirdQuartile: 55, + median: 55, + max: 55, + min: 55, +}, { + firstQuartile: 57, + thirdQuartile: 56, + median: 57, + max: 58, + min: 57, +}, { + firstQuartile: 57, + thirdQuartile: 56, + median: 56, + max: 56, + min: 56, +}, { + firstQuartile: 60, + thirdQuartile: 56, + median: 60, + max: 60, + min: 60, +}, { + firstQuartile: 57, + thirdQuartile: 57, + median: 57, + max: 57, + min: 57, +}, { + firstQuartile: 57, + thirdQuartile: 55, + median: 55, + max: 55, + min: 55, +}, { + firstQuartile: 20, + thirdQuartile: 45, + median: 45, + max: 45, + min: 45, +}, { + firstQuartile: 15, + thirdQuartile: 40, + median: 30, + max: 49, + min: 30, +}, { + firstQuartile: 15, + thirdQuartile: 15, + median: 15, + max: 15, + min: 15, +}, { + firstQuartile: 26, + thirdQuartile: 26, + median: 26, + max: 26, + min: 26, +}, { + firstQuartile: 17, + thirdQuartile: 17, + median: 17, + max: 17, + min: 17, +}, { + firstQuartile: 15, + thirdQuartile: 25, + median: 19, + max: 19, + min: 20, +}, { + firstQuartile: 19, + thirdQuartile: 25, + median: 21, + max: 20, + min: 25, +}, { + firstQuartile: 24, + thirdQuartile: 30, + median: 25, + max: 26, + min: 10, +}, { + firstQuartile: 28, + thirdQuartile: 34, + median: 30, + max: 30, + min: 30, +}, { + firstQuartile: 30, + thirdQuartile: 45, + median: 35, + max: 40, + min: 40, +}, { + firstQuartile: 20, + thirdQuartile: 55, + median: 45, + max: 44, + min: 44, +}, { + firstQuartile: 55, + thirdQuartile: 55, + median: 55, + max: 55, + min: 55, +}, { + firstQuartile: 57, + thirdQuartile: 56, + median: 57, + max: 58, + min: 57, +}, { + firstQuartile: 57, + thirdQuartile: 56, + median: 56, + max: 56, + min: 56, +}, { + firstQuartile: 60, + thirdQuartile: 56, + median: 60, + max: 60, + min: 60, +}, { + firstQuartile: 57, + thirdQuartile: 57, + median: 57, + max: 57, + min: 57, +}, { + firstQuartile: 57, + thirdQuartile: 55, + median: 55, + max: 55, + min: 55, +}, { + firstQuartile: 20, + thirdQuartile: 45, + median: 45, + max: 45, + min: 45, +}, { + firstQuartile: 15, + thirdQuartile: 40, + median: 30, + max: 49, + min: 30, +}, { + firstQuartile: 15, + thirdQuartile: 15, + median: 15, + max: 15, + min: 15, +}, { + firstQuartile: 26, + thirdQuartile: 26, + median: 26, + max: 26, + min: 26, +}, { + firstQuartile: 17, + thirdQuartile: 17, + median: 17, + max: 17, + min: 17, +}, { + firstQuartile: 15, + thirdQuartile: 25, + median: 19, + max: 19, + min: 20, +}, { + firstQuartile: 19, + thirdQuartile: 25, + median: 21, + max: 20, + min: 25, +}, { + firstQuartile: 24, + thirdQuartile: 30, + median: 25, + max: 26, + min: 27, +}, { + firstQuartile: 28, + thirdQuartile: 34, + median: 30, + max: 30, + min: 30, +}, { + firstQuartile: 30, + thirdQuartile: 45, + median: 35, + max: 40, + min: 40, +}, { + firstQuartile: 20, + thirdQuartile: 55, + median: 45, + max: 44, + min: 44, +}, { + firstQuartile: 55, + thirdQuartile: 55, + median: 55, + max: 55, + min: 55, +}, { + firstQuartile: 57, + thirdQuartile: 56, + median: 57, + max: 58, + min: 57, +}, { + firstQuartile: 57, + thirdQuartile: 56, + median: 56, + max: 56, + min: 56, +}, { + firstQuartile: 60, + thirdQuartile: 56, + median: 60, + max: 60, + min: 60, +}, { + firstQuartile: 57, + thirdQuartile: 57, + median: 57, + max: 57, + min: 57, +}, { + firstQuartile: 57, + thirdQuartile: 55, + median: 55, + max: 55, + min: 55, +}, { + firstQuartile: 20, + thirdQuartile: 45, + median: 45, + max: 45, + min: 45, +}, { + firstQuartile: 15, + thirdQuartile: 40, + median: 30, + max: 49, + min: 30, +}]; diff --git a/ui/src/components/metric/select.js b/ui/src/components/metric/select.js index b257cccd..04690ba9 100644 --- a/ui/src/components/metric/select.js +++ b/ui/src/components/metric/select.js @@ -59,8 +59,10 @@ const Select = ({ form, id = rndId(), name, + onChange, required, - selected + selected, + value }) => { return ( @@ -70,8 +72,10 @@ const Select = ({ form={form} id={id} name={name} + onChange={onChange} required={required} selected={selected} + value={value} > {children} @@ -86,8 +90,10 @@ Select.propTypes = { form: React.PropTypes.string, id: React.PropTypes.string, name: React.PropTypes.string, + onChange: React.PropTypes.func, required: React.PropTypes.bool, - selected: React.PropTypes.bool + selected: React.PropTypes.bool, + value: React.PropTypes.string }; module.exports = Select; diff --git a/ui/src/components/metric/settings-button.js b/ui/src/components/metric/settings-button.js index 9e25e08f..8097d09e 100644 --- a/ui/src/components/metric/settings-button.js +++ b/ui/src/components/metric/settings-button.js @@ -3,7 +3,8 @@ const Styled = require('styled-components'); const fns = require('../../shared/functions'); const constants = require('../../shared/constants'); const Button = require('../button'); -const SettingsIcon = require('!babel!svg-react!./close.svg?name=SettingsIcon'); +const SettingsIcon = + require('!babel!svg-react!./icon-settings.svg?name=SettingsIcon'); const { default: styled diff --git a/ui/src/components/metric/story.js b/ui/src/components/metric/story.js index 6a8f2504..fd38a2c7 100644 --- a/ui/src/components/metric/story.js +++ b/ui/src/components/metric/story.js @@ -6,7 +6,7 @@ const { } = require('@kadira/storybook'); const { - MetricBody, + MetricGraph, MetricCloseButton, MetricHeader, MetricSelect, @@ -15,7 +15,42 @@ const { MetricView } = require('./'); +const MetricData = require('./metric-data'); + const onButtonClick = () => {}; +const onMetricSelect = () => {}; + +const hour = 60; // in minutes - for moment +const sixHours = 6*hour; +const twelveHours = 12*hour; +const oneDay = 24*hour; +const twoDays = 48*hour; + +const withinRange = ( + value, + newMin, + newMax, + precision = 2, + oldMin = 0, + oldMax = 100 +) => { + const normalisedValue = value-oldMin; + const newRange = newMax-newMin; + const oldRange = oldMax-oldMin; + const newValue = newMin + normalisedValue*newRange/oldRange; + return newValue.toFixed(2); +}; + +const percentageMetricData = MetricData; +const kbMetricData = MetricData.map(m => { + return { + firstQuartile: withinRange(m.firstQuartile, 1.55, 2.0), + thirdQuartile: withinRange(m.thirdQuartile, 1.55, 2.0), + median: withinRange(m.median, 1.55, 2.0), + max: withinRange(m.max, 1.55, 2.0), + min: withinRange(m.min, 1.55, 2.0), + }; +}); storiesOf('Metric', module) .add('Metric', () => ( @@ -23,16 +58,46 @@ storiesOf('Metric', module) Aggregated CPU usage - - - - - + + + + + - Settings + + Settings + - + + + + + Aggregated CPU usage + + + + + + + + Settings + + + + )); diff --git a/ui/src/components/metric/view.js b/ui/src/components/metric/view.js index e3a5c757..00e2b820 100644 --- a/ui/src/components/metric/view.js +++ b/ui/src/components/metric/view.js @@ -1,4 +1,5 @@ const constants = require('../../shared/constants'); +const fns = require('../../shared/functions'); const React = require('react'); const Styled = require('styled-components'); @@ -7,6 +8,10 @@ const { colors } = constants; +const { + remcalc +} = fns; + const { default: styled } = Styled; @@ -15,6 +20,7 @@ const Container = styled.div` position: relative; box-sizing: border-box; width: 100%; + max-width: ${remcalc(940)}; box-shadow: ${boxes.bottomShaddow}; border: 1px solid ${colors.borderSecondary}; `; diff --git a/ui/yarn.lock b/ui/yarn.lock index 685d46e8..c43e97ab 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -4343,7 +4343,7 @@ mobx@^2.3.4: version "2.7.0" resolved "https://registry.yarnpkg.com/mobx/-/mobx-2.7.0.tgz#cf3d82d18c0ca7f458d8f2a240817b3dc7e54a01" -moment@^2.10.6: +moment@^2.10.6, moment@^2.17.1: version "2.17.1" resolved "https://registry.yarnpkg.com/moment/-/moment-2.17.1.tgz#fed9506063f36b10f066c8b59a144d7faebe1d82" From 87e3e3851093038817431f7f4eda35fc174d98f0 Mon Sep 17 00:00:00 2001 From: Tom Gallacher Date: Thu, 19 Jan 2017 13:58:46 +0000 Subject: [PATCH 5/8] Moving Breadcrumb to a component --- frontend/src/components/breadcrumb/index.js | 100 ++++++++++++++++++++ frontend/src/components/section/index.js | 72 ++------------ 2 files changed, 109 insertions(+), 63 deletions(-) create mode 100644 frontend/src/components/breadcrumb/index.js diff --git a/frontend/src/components/breadcrumb/index.js b/frontend/src/components/breadcrumb/index.js new file mode 100644 index 00000000..d02ea708 --- /dev/null +++ b/frontend/src/components/breadcrumb/index.js @@ -0,0 +1,100 @@ +const Container = require('@ui/components/container'); +const PropTypes = require('@root/prop-types'); +const React = require('react'); +const ReactRouter = require('react-router'); +const Styled = require('styled-components'); +const flatten = require('lodash.flatten'); +const fns = require('@ui/shared/functions'); + +const { + remcalc +} = fns; + +const { + default: styled +} = Styled; + +// Main Contonent Wrapper Styles +const StyledDiv = styled.div` + background-color: #FAFAFA; + height: ${remcalc(91)}; + border-bottom: solid ${remcalc(1)} #d8d8d8; +`; + +const BreadcrumbA = styled.a` + text-decoration: none !important; +`; + +const BreadcrumbSpan = styled.span` + color: #646464; +`; + +const H1 = styled.h1` + margin: 0 0 0 0; + padding-top: ${remcalc(31)}; + padding-bottom: ${remcalc(31)}; +`; + +const { + Link +} = ReactRouter; + +function getNameLink(name) { + return flatten(name.map((part, i) => { + if (!part.name) { + return null; + } + + const link = ( + + { + ({ + href, + onClick, + }) => + + {part.name} + + } + + ); + + const key = `${part.pathname}${i}`; + const slash = ( + / + ); + + return (i === 0) ? link : [ + slash, + link + ]; + })); +} + +const Breadcrumb = ({ + children, + links = [], + name = [] +}) => { + return ( + + +

+ {getNameLink(name)} +

+ + + ); +}; + +Breadcrumb.propTypes = { + children: React.PropTypes.node, + links: React.PropTypes.arrayOf(PropTypes.link), + name: React.PropTypes.arrayOf(PropTypes.link) +}; + +module.exports = Breadcrumb; diff --git a/frontend/src/components/section/index.js b/frontend/src/components/section/index.js index beae6895..848aa4be 100644 --- a/frontend/src/components/section/index.js +++ b/frontend/src/components/section/index.js @@ -1,30 +1,11 @@ -const flatten = require('lodash.flatten'); const React = require('react'); const ReactIntl = require('react-intl'); -const Styled = require('styled-components'); const ReactRouter = require('react-router'); -const H1 = require('@ui/components/base-elements').H1; const Li = require('@ui/components/horizontal-list/li'); const PropTypes = require('@root/prop-types'); const Ul = require('@ui/components/horizontal-list/ul'); -const fns = require('@ui/shared/functions'); - -const { - default: styled -} = Styled; - -const BreadcrumbA = styled.a` - text-decoration: none !important; -`; - -const BreadcrumbSpan = styled.span` - color: #646464; -`; - -const { - remcalc -} = fns; +const Breadcrumb = require('@components/breadcrumb'); const { FormattedMessage @@ -34,11 +15,12 @@ const { Link } = ReactRouter; -const Section = ({ - children, - links = [], - name = [] -}) => { +const Section = (props) => { + const { + children, + links = [], + } = props; + const navLinks = links.map((link) => (
  • @@ -47,44 +29,9 @@ const Section = ({
    • )); - const nameLinks = flatten(name.map((part, i) => { - if (!part.name) { - return null; - } - - const link = ( - - { - ({ - href, - onClick, - }) => - - {part.name} - - } - - ); - - const slash = ( - / - ); - - return (i === 0) ? link : [ - slash, - link - ]; - })); - return (
    -

    - {nameLinks} -

    +
      {navLinks}
    @@ -95,8 +42,7 @@ const Section = ({ Section.propTypes = { children: React.PropTypes.node, - links: React.PropTypes.arrayOf(PropTypes.link), - name: React.PropTypes.arrayOf(PropTypes.link) + links: React.PropTypes.arrayOf(PropTypes.link) }; module.exports = Section; From b735cd2ee20143b904f90259381498d3bbf41de4 Mon Sep 17 00:00:00 2001 From: Tom Gallacher Date: Thu, 19 Jan 2017 15:08:08 +0000 Subject: [PATCH 6/8] Adding 5 o'clock shadow to org navigation --- frontend/src/components/navigation/org.js | 13 +++++++++++++ ui/src/components/mini-metric/view.js | 2 +- 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/navigation/org.js b/frontend/src/components/navigation/org.js index e8f493c5..13e13893 100644 --- a/frontend/src/components/navigation/org.js +++ b/frontend/src/components/navigation/org.js @@ -42,6 +42,7 @@ const StyledNav = styled.div` // TODO: refactor colours into constants in UI const NavigationLinkContainer = styled.div` + position: relative; padding: ${remcalc(11)} ${remcalc(12)} ${remcalc(12)}; color: #646464; border: solid ${remcalc(1)} #d8d8d8; @@ -77,6 +78,17 @@ const NavLi = styled.li` } `; +const Shadow = styled.div` + z-index: 1; + position: absolute; + height: ${remcalc(5)}; + width: 100%; + left: 0; + bottom: 0; + background-image: + linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.06)); +`; + const OrgNavigation = ({ orgs = [] }) => { @@ -98,6 +110,7 @@ const OrgNavigation = ({ }) => + { !isActive && } Date: Thu, 19 Jan 2017 15:08:55 +0000 Subject: [PATCH 7/8] Adding mini metric back into storybook --- ui/src/components/mini-metric/story.js | 55 ++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 ui/src/components/mini-metric/story.js diff --git a/ui/src/components/mini-metric/story.js b/ui/src/components/mini-metric/story.js new file mode 100644 index 00000000..dafc0df3 --- /dev/null +++ b/ui/src/components/mini-metric/story.js @@ -0,0 +1,55 @@ +const React = require('react'); +const Base = require('../base'); +const Row = require('../row'); +const Column = require('../column'); + +const { + storiesOf, + // action, + // linkTo +} = require('@kadira/storybook'); + +const { + MiniMetricGraph, + MiniMetricMeta, + MiniMetricTitle, + MiniMetricSubtitle, + MiniMetricView +} = require('./'); + +const MiniMetricData = require('../list/mini-metric-data'); + +storiesOf('Metric (Mini)', module) + .add('Mini Metric', () => ( + + + + + + Memory: 54% + (1280/3000 MB) + + + + + + + + Memory: 54% + (1280/3000 MB) + + + + + + + + Memory: 54% + (1280/3000 MB) + + + + + + + )); From f7809882919c29caf885d158b49b757004487ef3 Mon Sep 17 00:00:00 2001 From: Tom Gallacher Date: Thu, 19 Jan 2017 15:49:01 +0000 Subject: [PATCH 8/8] Fixing font colours and colours of list items --- frontend/src/components/header/index.js | 2 ++ ui/src/components/button/index.js | 8 -------- ui/src/components/list/header.js | 10 +++------- 3 files changed, 5 insertions(+), 15 deletions(-) diff --git a/frontend/src/components/header/index.js b/frontend/src/components/header/index.js index 110c7683..fe3c2001 100644 --- a/frontend/src/components/header/index.js +++ b/frontend/src/components/header/index.js @@ -66,6 +66,8 @@ const StyledTooltipWrapper = styled.div` `; const StyledName = styled.span` + color: #646464; + font-size: ${remcalc(16)} position: relative; top: ${remcalc(-12)}; `; diff --git a/ui/src/components/button/index.js b/ui/src/components/button/index.js index 1c3b0563..6831d02f 100644 --- a/ui/src/components/button/index.js +++ b/ui/src/components/button/index.js @@ -69,14 +69,6 @@ const style = css` padding: ${remcalc('14 16')}; position: relative; - font-family: -apple-system, - BlinkMacSystemFont, - "Segoe UI", - Roboto, - "Helvetica Neue", - Arial, - sans-serif; - font-size: ${remcalc(16)}; font-weight: 400; text-align: center; diff --git a/ui/src/components/list/header.js b/ui/src/components/list/header.js index c59a6f39..9408c02a 100644 --- a/ui/src/components/list/header.js +++ b/ui/src/components/list/header.js @@ -1,13 +1,8 @@ -const constants = require('../../shared/constants'); const fns = require('../../shared/functions'); const Item = require('./item'); const React = require('react'); const Styled = require('styled-components'); -const { - colors -} = constants; - const { remcalc } = fns; @@ -19,8 +14,9 @@ const { const StyledItem = styled(Item)` position: absolute; - background-color: ${colors.brandPrimary}; - border: solid ${remcalc(1)} ${colors.borderPrimary}; + background-color: #3B4AAF; + + border: solid ${remcalc(1)} #2D3884; box-shadow: none; width: calc(100% + ${remcalc(2)});