From 8f75a6fd6ef2b646781d83a2d74e3874fb795845 Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Tue, 10 Jan 2017 13:20:33 +0000 Subject: [PATCH 01/11] removing html data property on base elemenet used for testing and removing double string interpolation in font function --- ui/src/shared/functions.js | 12 ++++++------ ui/stories/index.js | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/ui/src/shared/functions.js b/ui/src/shared/functions.js index 57818b4a..c8c1512b 100644 --- a/ui/src/shared/functions.js +++ b/ui/src/shared/functions.js @@ -22,16 +22,16 @@ const generateFonts = (fontFamilies, fontFilenames) => { fontCSS += ` @font-face { font-family: ${fontFamily}; - src: url(${pathToFont}${fontFilenames[i]}.eot); - src: url(${pathToFont}${fontFilenames[i]}.eot?#iefix) + src: url(${pathToFont + fontFilenames[i]}.eot); + src: url(${pathToFont + fontFilenames[i]}.eot?#iefix) format('embedded-opentype'); - src: url(${pathToFont}${fontFilenames[i]}.woff) + src: url(${pathToFont + fontFilenames[i]}.woff) format('woff'); - src: url(${pathToFont}${fontFilenames[i]}.woff2) + src: url(${pathToFont + fontFilenames[i]}.woff2) format('woff2'); - src: url(${pathToFont}${fontFilenames[i]}.ttf) + src: url(${pathToFont + fontFilenames[i]}.ttf) format('truetype'); - src: url(${pathToFont}${fontFilenames[i]}.svg#${fontFamily}) + src: url(${pathToFont + fontFilenames[i]}.svg#${fontFamily}) format('svg'); font-weight: normal; font-style: normal; diff --git a/ui/stories/index.js b/ui/stories/index.js index 61e1882b..23d73418 100644 --- a/ui/stories/index.js +++ b/ui/stories/index.js @@ -66,7 +66,7 @@ const styles = { storiesOf('Grid', module) .add('Row and Column', () => ( - + Date: Tue, 10 Jan 2017 14:48:34 +0000 Subject: [PATCH 02/11] removing unused typography values --- ui/src/shared/constants/typography.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/ui/src/shared/constants/typography.js b/ui/src/shared/constants/typography.js index f6ac5a6e..6e682734 100644 --- a/ui/src/shared/constants/typography.js +++ b/ui/src/shared/constants/typography.js @@ -1,8 +1,6 @@ const colors = require('./colors'); const typography = { - fontPrimary: 'sans serif', - dtFontWeight: 'bold', abbrBorderColor: colors.brandSecondary, textMuted: colors.brandSecondary }; From c31d08a15c1b6401b3fd4199c8e340abddec2b38 Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Tue, 10 Jan 2017 14:51:11 +0000 Subject: [PATCH 03/11] updating base and wrapping input in Base element in storybook --- ui/src/components/base/index.js | 5 +++-- ui/src/shared/constants/colors.js | 2 +- ui/stories/index.js | 20 ++++++++++++-------- 3 files changed, 16 insertions(+), 11 deletions(-) diff --git a/ui/src/components/base/index.js b/ui/src/components/base/index.js index 10fbdf90..cc0111db 100644 --- a/ui/src/components/base/index.js +++ b/ui/src/components/base/index.js @@ -7,7 +7,8 @@ const { forms, links, tables, - typography + typography, + colors } = constants; const { @@ -36,7 +37,7 @@ module.exports = styled.div` "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 1rem; line-height: 1.5; - color: #373A3C; + color: ${colors.fonts.regular}; background-color: #FFFFFF; /************************************************************************** diff --git a/ui/src/shared/constants/colors.js b/ui/src/shared/constants/colors.js index 8026a1d9..9673add9 100644 --- a/ui/src/shared/constants/colors.js +++ b/ui/src/shared/constants/colors.js @@ -48,7 +48,7 @@ const colors = { ...brandInactive, ...notifications, ...metrics, - ...fonts + fonts }; module.exports = colors; diff --git a/ui/stories/index.js b/ui/stories/index.js index 23d73418..dbc98099 100644 --- a/ui/stories/index.js +++ b/ui/stories/index.js @@ -217,16 +217,20 @@ storiesOf('Radio', module) storiesOf('Input', module) .add('Default', () => ( - + + + )) .add('type=email', () => ( - - We'll never share your email with anyone else. - + + + We'll never share your email with anyone else. + + )); storiesOf('Modal', module) From 848450e0231c6e2c8429e28184755eb4b3a05df9 Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Tue, 10 Jan 2017 16:52:08 +0000 Subject: [PATCH 04/11] reworking notification component --- ui/src/components/close/index.js | 39 +++++++++++++++ ui/src/components/close/readme.md | 65 +++++++++++++++++++++++++ ui/src/components/notification/index.js | 44 +++++++++-------- ui/src/shared/constants/colors.js | 1 + ui/stories/index.js | 28 ++++++----- 5 files changed, 145 insertions(+), 32 deletions(-) create mode 100644 ui/src/components/close/index.js create mode 100644 ui/src/components/close/readme.md diff --git a/ui/src/components/close/index.js b/ui/src/components/close/index.js new file mode 100644 index 00000000..2f1c6aec --- /dev/null +++ b/ui/src/components/close/index.js @@ -0,0 +1,39 @@ +const constants = require('../../shared/constants'); +const fns = require('../../shared/functions'); +const composers = require('../../shared/composers'); +const React = require('react'); +const Styled = require('styled-components'); +const closeIcon = require('../../shared/assets/close'); + +const { + colors +} = constants; + +const { + remcalc +} = fns; + +const { + default: styled +} = Styled; + +const Close = ({ + style, + onClick +}) => { + return ( + + Close + + ); +}; + +Close.propTypes = { + style: React.PropTypes.object, + onClick: React.PropTypes.func +}; + +module.exports = Close; diff --git a/ui/src/components/close/readme.md b/ui/src/components/close/readme.md new file mode 100644 index 00000000..a114f555 --- /dev/null +++ b/ui/src/components/close/readme.md @@ -0,0 +1,65 @@ +# `` + +## demo + +```embed +const React = require('react'); +const ReactDOM = require('react-dom/server'); +const Base = require('../base'); +const Container = require('../container'); +const Row = require('../row'); +const Column = require('../column'); +const Notificaton = require('./index.js'); +const styles = require('./style.css'); + +const style = { + marginBottom: 0 +} + +nmodule.exports = ReactDOM.renderToString( + + + + +

This is the warning content

+ + + + + + +

This is the question content

+ + + + + + +

This is the alert content

+ + + + +); +``` + +## usage + +```js +const React = require('react'); +const Notificaton = require('ui/avatar'); + +module.exports = () => { + return ( + +

This is the warning content

+ + +

This is the question content

+ + +

This is the alert content

+ + ); +} +``` diff --git a/ui/src/components/notification/index.js b/ui/src/components/notification/index.js index dc1125d9..88e3258c 100644 --- a/ui/src/components/notification/index.js +++ b/ui/src/components/notification/index.js @@ -1,6 +1,6 @@ const constants = require('../../shared/constants'); const fns = require('../../shared/functions'); -const match = require('../../shared/match'); +const composers = require('../../shared/composers'); const React = require('react'); const Styled = require('styled-components'); @@ -12,44 +12,46 @@ const { remcalc } = fns; -const { - prop: matchProp -} = match; - const { default: styled } = Styled; -const background = matchProp({ - warning: colors.warningLight, - alert: colors.alertLight, -}, 'transparent'); +const { + baseBox, + pseudoEl +} = composers; -const border = matchProp({ - warning: colors.warning, - alert: 'red', -}, 'none'); +const decorationWidth = remcalc(108); const StyledNotification = styled.div` - border-radius: 4px; - box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05); display: inline-block; - height: 100%; + min-height: 100%; + position: relative; + width: 100%; - background-color: ${background('type')}; - border: ${border('type')}; + ${baseBox(0)} + + &::before { + background-color: ${props => colors[props.type] || colors.brandPrimary} + width: ${decorationWidth}; + height: 100%; + + ${pseudoEl()} + } `; const StyledContent = styled.div` float: left; - padding: ${remcalc(20)}; + padding: ${remcalc(18)} 20% ${remcalc(18)} ${remcalc(18)}; + margin-left: ${decorationWidth}; + width: 100%; `; const Notificaton = ({ children, className, style, - type = '' + type }) => { return ( ( - - This is the default content - + + + This is the default content + + )) - .add('warning', () => ( - - This is the warning content - + .add('Success', () => ( + + + This is the success content + + )) - .add('alert', () => ( - - This is the alert content - + .add('Alert', () => ( + + + This is the alert content + + )); storiesOf('Pagination', module) From 3d3b9faa0eba114bc416337b1ca40d3103b572d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= Date: Tue, 10 Jan 2017 14:27:44 +0000 Subject: [PATCH 05/11] remove links constants --- ui/src/components/base/index.js | 12 +++++------- ui/src/shared/constants/colors.js | 6 ++++-- ui/src/shared/constants/index.js | 2 -- ui/src/shared/constants/links.js | 14 -------------- 4 files changed, 9 insertions(+), 25 deletions(-) delete mode 100644 ui/src/shared/constants/links.js diff --git a/ui/src/components/base/index.js b/ui/src/components/base/index.js index cc0111db..c92355d0 100644 --- a/ui/src/components/base/index.js +++ b/ui/src/components/base/index.js @@ -5,7 +5,7 @@ const Styled = require('styled-components'); const { forms, - links, + colors, tables, typography, colors @@ -344,13 +344,12 @@ module.exports = styled.div` */ & a { - color: ${links.color}; - text-decoration: ${links.decoration}; + color: ${colors.brandPrimaryLink}; + text-decoration: underline; &:focus, &:hover { - color: ${links.hoverColor}; - text-decoration: ${links.hoverDecoration}; + text-decoration: none; } &:focus { @@ -365,8 +364,7 @@ module.exports = styled.div` &:focus, &:hover { - color: ${links.hoverColor}; - text-decoration: ${links.hoverDecoration}; + text-decoration: none; } &:focus { diff --git a/ui/src/shared/constants/colors.js b/ui/src/shared/constants/colors.js index b9effed2..6ce75c50 100644 --- a/ui/src/shared/constants/colors.js +++ b/ui/src/shared/constants/colors.js @@ -10,7 +10,8 @@ const brandPrimary = { borderPrimary: '#2531BC', borderPrimaryDark: '#2531BC', borderPrimaryDarkest: '#062BA0', - brandPrimaryColor: '#FFFFFF' + brandPrimaryColor: '#FFFFFF', + brandPrimaryLink: '#364acd' }; const brandSecondary = { @@ -20,7 +21,8 @@ const brandSecondary = { borderSecondary: '#D8D8D8', borderSecondaryDark: '#D8D8D8', borderSecondaryDarkest: '#D8D8D8', - brandSecondaryColor: '#464646' + brandSecondaryColor: '#464646', + brandSecondaryLink: '#ffffff' }; const brandInactive = { diff --git a/ui/src/shared/constants/index.js b/ui/src/shared/constants/index.js index b6115eaa..2368e31d 100644 --- a/ui/src/shared/constants/index.js +++ b/ui/src/shared/constants/index.js @@ -6,7 +6,6 @@ const boxes = require('./boxes'); const typography = require('./typography'); const sizes = require('./sizes'); const breakpoints = require('./breakpoints'); -const links = require('./links'); const tables = { bg: 'transparent', @@ -21,7 +20,6 @@ const constants = traverse({ colors, boxes, forms, - links, sizes, tables, typography diff --git a/ui/src/shared/constants/links.js b/ui/src/shared/constants/links.js deleted file mode 100644 index c964a488..00000000 --- a/ui/src/shared/constants/links.js +++ /dev/null @@ -1,14 +0,0 @@ -const Color = require('color'); - -const links = { - color: '#364ACD', - decoration: 'none', - hoverColor: ({ - color - }) => { - return Color(color).darken(0.15).hex(); - }, - hoverDecoration: 'underline' -}; - -module.exports = links; From 270842db55cf162ca85aba8ed4ab32e981a09d6b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= Date: Tue, 10 Jan 2017 14:56:14 +0000 Subject: [PATCH 06/11] anchor UI element --- ui/src/components/anchor/index.js | 26 ++++++++++++++++++++++++++ ui/src/index.js | 1 + 2 files changed, 27 insertions(+) create mode 100644 ui/src/components/anchor/index.js diff --git a/ui/src/components/anchor/index.js b/ui/src/components/anchor/index.js new file mode 100644 index 00000000..758ea827 --- /dev/null +++ b/ui/src/components/anchor/index.js @@ -0,0 +1,26 @@ +const constants = require('../../shared/constants'); +const React = require('react'); +const Styled = require('styled-components'); + +const { + colors +} = constants; + +const { + default: styled +} = Styled; + +const color = (props) => props.secondary + ? colors.brandSecondaryLink + : colors.brandPrimaryLink; + +const Anchor = styled.a` + color: ${color} !important; +`; + +module.exports = Anchor; + +module.exports.fn = (element) => (props) => React.cloneElement(element, { + ...element.props, + ...props +}, element.props.children); diff --git a/ui/src/index.js b/ui/src/index.js index 77f90ebf..86b9c453 100644 --- a/ui/src/index.js +++ b/ui/src/index.js @@ -1,6 +1,7 @@ module.exports = { Base: require('./components/base'), AddMetric: require('./components/add-metric'), + Anchor: require('./components/anchor'), Avatar: require('./components/avatar'), Button: require('./components/button'), Checkbox: require('./components/checkbox'), From c9ea9117f0e45f8ac64537d38c56b41b6b639448 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= Date: Tue, 10 Jan 2017 14:58:00 +0000 Subject: [PATCH 07/11] extract service item to it's own component --- .../service-item/index.js} | 33 +++++++++++++------ frontend/src/containers/services/index.js | 4 +-- ui/src/components/list/view.js | 24 +++++++------- 3 files changed, 38 insertions(+), 23 deletions(-) rename frontend/src/{containers/services/service.js => components/service-item/index.js} (71%) diff --git a/frontend/src/containers/services/service.js b/frontend/src/components/service-item/index.js similarity index 71% rename from frontend/src/containers/services/service.js rename to frontend/src/components/service-item/index.js index c6fd4e5a..2680f894 100644 --- a/frontend/src/containers/services/service.js +++ b/frontend/src/components/service-item/index.js @@ -1,12 +1,13 @@ const React = require('react'); -// const ReactRouter = require('react-router'); +const ReactRouter = require('react-router'); +const Anchor = require('@ui/components/anchor'); const List = require('@ui/components/list'); const PropTypes = require('@root/prop-types'); -// const { -// Link -// } = ReactRouter; +const { + Link +} = ReactRouter; const { ListItem, @@ -21,15 +22,16 @@ const { ListItemHeader } = List; -const Service = ({ +const ServiceItem = ({ org = '', project = '', service = {} }) => { - // const to = `/${org}/projects/${project}/services/${service.id}`; + const to = `/${org}/projects/${project}/services/${service.id}`; const childs = service.services.map((service) => ( 1} @@ -62,10 +64,21 @@ const Service = ({ ); return ( - + - {service.name} + + + {Anchor.fn( + + {service.name} + + )} + + {service.instances} instance … @@ -75,10 +88,10 @@ const Service = ({ ); }; -Service.propTypes = { +ServiceItem.propTypes = { org: React.PropTypes.string, project: React.PropTypes.string, service: PropTypes.service }; -module.exports = Service; +module.exports = ServiceItem; diff --git a/frontend/src/containers/services/index.js b/frontend/src/containers/services/index.js index 94fcfe90..cc0c1c78 100644 --- a/frontend/src/containers/services/index.js +++ b/frontend/src/containers/services/index.js @@ -3,7 +3,7 @@ const ReactRedux = require('react-redux'); const EmptyServices = require('@components/empty/services'); const PropTypes = require('@root/prop-types'); -const Service = require('./service'); +const ServiceItem = require('@components/service-item'); const selectors = require('@state/selectors'); const { @@ -26,7 +26,7 @@ const Services = ({ ); const serviceList = services.map((service) => ( - props.headed && !props.fromHeader ? remcalc(47) : remcalc(0); -const display = (props) => props.headed && !props.fromHeader && props.collapsed - ? 'none' - : 'flex'; - const StyledView = styled(Row)` flex: 1; margin: 0; height: 100%; padding-top: ${paddingTop}; - display: ${display}; `; -const View = (props) => ( - - {props.children} - -); +const View = (props) => { + const hide = props.headed && !props.fromHeader && props.collapsed; + + return hide ? null : ( + + {props.children} + + ); +}; View.propTypes = { - children: React.PropTypes.node + children: React.PropTypes.node, + collapsed: React.PropTypes.bool, + fromHeader: React.PropTypes.bool, + headed: React.PropTypes.bool }; module.exports = transferProps([ From 08a3a0291d7a57af5b1c1488a52448b253499678 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= Date: Tue, 10 Jan 2017 14:58:51 +0000 Subject: [PATCH 08/11] collapsed state for service items --- frontend/src/mock-state.json | 1 + frontend/src/state/actions.js | 3 ++- frontend/src/state/reducers/services.js | 16 +++++++++++++++- frontend/src/state/selectors.js | 16 +++++++++++++--- 4 files changed, 31 insertions(+), 5 deletions(-) diff --git a/frontend/src/mock-state.json b/frontend/src/mock-state.json index ffa3b7c7..ec6c9ce7 100644 --- a/frontend/src/mock-state.json +++ b/frontend/src/mock-state.json @@ -160,6 +160,7 @@ }, "services": { "ui": { + "collapsed": [], "sections": [ "summary", "instances", diff --git a/frontend/src/state/actions.js b/frontend/src/state/actions.js index 3f7edba6..739bc96a 100644 --- a/frontend/src/state/actions.js +++ b/frontend/src/state/actions.js @@ -10,5 +10,6 @@ const APP = constantCase(process.env['APP_NAME']); module.exports = { ...require('@state/thunks'), updateRouter: createAction(`${APP}/APP/UPDATE_ROUTER`), - toggleHeaderTooltip: createAction(`${APP}/APP/TOGGLE_HEADER_TOOLTIP`) + toggleHeaderTooltip: createAction(`${APP}/APP/TOGGLE_HEADER_TOOLTIP`), + toggleServiceCollapsed: createAction(`${APP}/APP/TOGGLE_SERVICE_COLLAPSED`) }; diff --git a/frontend/src/state/reducers/services.js b/frontend/src/state/reducers/services.js index 7fec06fb..4a6311db 100644 --- a/frontend/src/state/reducers/services.js +++ b/frontend/src/state/reducers/services.js @@ -1,9 +1,23 @@ const ReduxActions = require('redux-actions'); +const actions = require('@state/actions'); + const { handleActions } = ReduxActions; +const { + toggleServiceCollapsed +} = actions; + module.exports = handleActions({ - 'x': (state) => state // somehow handleActions needs at least one reducer + [toggleServiceCollapsed.toString()]: (state, action) => ({ + ...state, + ui: { + ...state.ui, + collapsed: state.ui.collapsed.indexOf(action.payload) >= 0 + ? state.ui.collapsed.filter((uuid) => uuid !== action.payload) + : [...state.ui.collapsed, action.payload] + } + }) }, {}); diff --git a/frontend/src/state/selectors.js b/frontend/src/state/selectors.js index be168d92..f9da01c7 100644 --- a/frontend/src/state/selectors.js +++ b/frontend/src/state/selectors.js @@ -15,6 +15,7 @@ const serviceUiSections = (state) => get(state, 'services.ui.sections', []); const orgs = (state) => get(state, 'orgs.data', []); const projects = (state) => get(state, 'projects.data', []); const services = (state) => get(state, 'services.data', []); +const collapsedServices = (state) => get(state, 'services.ui.collapsed', []); const instances = (state) => get(state, 'instances.data', []); const projectById = (projectId) => createSelector( @@ -45,19 +46,28 @@ const orgSections = (orgId) => createSelector( ); const servicesByProjectId = (projectId) => createSelector( - [services, projectById(projectId)], - (services, project) => + [services, projectById(projectId), collapsedServices], + (services, project, collapsed) => services.filter((s) => s.project === project.uuid) .map((service) => ({ ...service, services: services.filter((s) => s.parent === service.uuid) })) .filter((s) => !s.parent) + .map((service) => ({ + ...service, + collapsed: collapsed.indexOf(service.uuid) >= 0, + services: service.services.map((service) => ({ + ...service, + collapsed: collapsed.indexOf(service.uuid) >= 0 + })) + })) ); const instancesByServiceId = (serviceId) => createSelector( [instances, serviceById(serviceId)], - (instances, service) => instances.filter((i) => i.service === service.uuid) + (instances, service) => + instances.filter((i) => i.service === service.uuid) ); From 0cba80f4e93ddc8c7bc97caed5a745c7505e1c14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= Date: Tue, 10 Jan 2017 15:03:26 +0000 Subject: [PATCH 09/11] rm duplicated variable --- ui/src/components/base/index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/ui/src/components/base/index.js b/ui/src/components/base/index.js index c92355d0..efcc93e9 100644 --- a/ui/src/components/base/index.js +++ b/ui/src/components/base/index.js @@ -5,7 +5,6 @@ const Styled = require('styled-components'); const { forms, - colors, tables, typography, colors @@ -32,7 +31,7 @@ const fontFilenames = [ module.exports = styled.div` ${generateFonts(fontFamilies, fontFilenames)}; - + font-family: 'LibreFranklin', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 1rem; From afdef33aff2941406e0d77e307b08653a4b8d597 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= Date: Tue, 10 Jan 2017 18:06:01 +0000 Subject: [PATCH 10/11] split mini-metrics into multiple components --- ui/src/components/mini-metric/graph.js | 94 ++++++++ ui/src/components/mini-metric/index.js | 171 +-------------- ui/src/components/mini-metric/meta.js | 44 ++++ ui/src/components/mini-metric/subtitle.js | 9 + ui/src/components/mini-metric/title.js | 18 ++ ui/src/components/mini-metric/view.js | 27 +++ ui/stories/index.js | 252 ++++++++++------------ 7 files changed, 316 insertions(+), 299 deletions(-) create mode 100644 ui/src/components/mini-metric/graph.js create mode 100644 ui/src/components/mini-metric/meta.js create mode 100644 ui/src/components/mini-metric/subtitle.js create mode 100644 ui/src/components/mini-metric/title.js create mode 100644 ui/src/components/mini-metric/view.js diff --git a/ui/src/components/mini-metric/graph.js b/ui/src/components/mini-metric/graph.js new file mode 100644 index 00000000..ccf02606 --- /dev/null +++ b/ui/src/components/mini-metric/graph.js @@ -0,0 +1,94 @@ +const buildArray = require('build-array'); +const Chart = require('chart.js'); +const React = require('react'); +const whisker = require('chartjs-chart-box-plot'); + +whisker(Chart); + +class Graph extends React.Component { + componentDidMount() { + const { + data = [], + labels = 0, + max = 100, + min = 0 + } = this.props; + + const _labels = !Array.isArray(labels) + ? buildArray(labels || data.length).map((v, i) => '') + : labels; + + this._chart = new Chart(this._refs.component, { + type: 'whisker', + responsive: true, + maintainAspectRatio: true, + options: { + scales: { + xAxes: [{ + display: false, + barPercentage: 1.0, + categoryPercentage: 1.0 + }], + yAxes: [{ + display: false, + ticks: { + min: min, + max: max + } + }] + }, + legend: { + display: false + } + }, + data: { + labels: _labels, + datasets: [{ + data + }] + } + }); + } + componentWillReceiveProps(nextProps) { + const { + data = [], + labels = 0 + } = this.props; + + const _labels = !Array.isArray(labels) + ? buildArray(labels || data.length).map((v, i) => '') + : labels; + + this._chart.data.datasets = [{ + data + }]; + + this._chart.data.labels = _labels; + this._chart.update(0); + } + ref(name) { + this._refs = this._refs || {}; + + return (el) => { + this._refs[name] = el; + }; + } + render() { + return ( + + ); + } +} + +Graph.propTypes = { + data: React.PropTypes.array, + labels: React.PropTypes.number, + max: React.PropTypes.number, + min: React.PropTypes.number +}; + +module.exports = Graph; diff --git a/ui/src/components/mini-metric/index.js b/ui/src/components/mini-metric/index.js index 1ea1ce0d..96d27b77 100644 --- a/ui/src/components/mini-metric/index.js +++ b/ui/src/components/mini-metric/index.js @@ -1,166 +1,7 @@ -const React = require('react'); -const Styled = require('styled-components'); -const constants = require('../../shared/constants'); - -const { - colors -} = constants; - -const { - default: styled -} = Styled; - -const buildArray = require('build-array'); -const Chart = require('chart.js'); -const whisker = require('chartjs-chart-box-plot'); - -whisker(Chart); - -const StyledDiv = styled.div` - height: 127px; - width: 158px; - background-color: ${colors.miniBackground}; - border: solid 1px ${colors.borderSecondary}; - - &::before { - position: absolute; - z-index: 1; - width: 9px; - height: 127px; - background-image: - linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(216, 216, 216, 0)); - content: ''; - } -`; - -const Devider = styled.div` - width: 158px; - height: 1px; - background-color: ${colors.seperator} -`; - -const TextMetric = styled.div` - height: 38px; - padding: 8px 12px; -`; - -const InnerTextBox = styled.div` - width: 136px; - height: 36px; - font-family: 'Libre Franklin', sans-serif; - font-size: 12px; - font-weight: normal; - font-style: normal; - font-stretch: normal; - line-height: 18px; - text-align: right; - color: ${colors.regular}; - - & p { - margin: 0; - } - - & h3 { - margin: 0; - font-size: 14px; - font-weight: 600; - line-height: 1.29; - color: ${colors.semibold}; - } -`; - -const StyledCanvas = styled.canvas` -`; - -class MiniMetric extends React.Component { - componentDidMount() { - const { - datasets = [], - labels = 0, - max = 100, - min = 0 - } = this.props; - - const _labels = !Array.isArray(labels) - ? buildArray(labels).map((v, i) => '') - : labels; - - this._chart = new Chart(this._refs.component, { - type: 'whisker', - responsive: true, - maintainAspectRatio: true, - options: { - scales: { - xAxes: [{ - display: false, - barPercentage: 1.0, - categoryPercentage: 1.0 - }], - yAxes: [{ - display: false, - ticks: { - min: min, - max: max - } - }] - }, - legend: { - display: false - } - }, - data: { - labels: _labels, - datasets: datasets - } - }); - } - componentWillReceiveProps(nextProps) { - const { - datasets = [], - labels = 0 - } = this.props; - - this._chart.data.datasets = datasets; - this._chart.data.labels = buildArray(labels).map((v, i) => ''); - this._chart.update(0); - } - ref(name) { - this._refs = this._refs || {}; - - return (el) => { - this._refs[name] = el; - }; - } - render() { - const { - name, - } = this.props; - - return ( - - - -

{name}: 54%

-

(1280/3000 MB)

- - - - - - ); - } -} - -MiniMetric.propTypes = { - datasets: React.PropTypes.array, - labels: React.PropTypes.number, - max: React.PropTypes.number, - min: React.PropTypes.number, - name: React.PropTypes.string, +module.exports = { + MiniMetricGraph: require('./graph'), + MiniMetricMeta: require('./meta'), + MiniMetricTitle: require('./title'), + MiniMetricSubtitle: require('./subtitle'), + MiniMetricView: require('./view') }; - -module.exports = MiniMetric; diff --git a/ui/src/components/mini-metric/meta.js b/ui/src/components/mini-metric/meta.js new file mode 100644 index 00000000..a80fadef --- /dev/null +++ b/ui/src/components/mini-metric/meta.js @@ -0,0 +1,44 @@ +const constants = require('../../shared/constants'); +const React = require('react'); +const Styled = require('styled-components'); + +const { + colors +} = constants; + +const { + default: styled +} = Styled; + +const OuterBox = styled.div` + height: 38px; + padding: 8px 12px; + border-bottom: 1px solid ${colors.seperator}; +`; + +const InnerBox = styled.div` + width: 136px; + height: 36px; + font-family: 'Libre Franklin', sans-serif; + font-size: 12px; + font-weight: normal; + font-style: normal; + font-stretch: normal; + line-height: 18px; + text-align: right; + color: ${colors.regular}; +`; + +const Meta = (props) => ( + + + {props.children} + + +); + +Meta.propTypes = { + children: React.PropTypes.node +}; + +module.exports = Meta; diff --git a/ui/src/components/mini-metric/subtitle.js b/ui/src/components/mini-metric/subtitle.js new file mode 100644 index 00000000..7acbe708 --- /dev/null +++ b/ui/src/components/mini-metric/subtitle.js @@ -0,0 +1,9 @@ +const Styled = require('styled-components'); + +const { + default: styled +} = Styled; + +module.exports = styled.p` + margin: 0; +`; diff --git a/ui/src/components/mini-metric/title.js b/ui/src/components/mini-metric/title.js new file mode 100644 index 00000000..428d5155 --- /dev/null +++ b/ui/src/components/mini-metric/title.js @@ -0,0 +1,18 @@ +const constants = require('../../shared/constants'); +const Styled = require('styled-components'); + +const { + colors +} = constants; + +const { + default: styled +} = Styled; + +module.exports = styled.h3` + margin: 0; + font-size: 14px; + font-weight: 600; + line-height: 1.29; + color: ${colors.semibold}; +`; diff --git a/ui/src/components/mini-metric/view.js b/ui/src/components/mini-metric/view.js new file mode 100644 index 00000000..124dc855 --- /dev/null +++ b/ui/src/components/mini-metric/view.js @@ -0,0 +1,27 @@ +const constants = require('../../shared/constants'); +const Styled = require('styled-components'); + +const { + colors +} = constants; + +const { + default: styled +} = Styled; + +module.exports = styled.div` + height: 127px; + width: 158px; + background-color: ${colors.miniBackground}; + border: solid 1px ${colors.borderSecondary}; + + &::before { + position: absolute; + z-index: 1; + width: 9px; + height: 127px; + content: ''; + background-image: + linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(216, 216, 216, 0)); + } +`; diff --git a/ui/stories/index.js b/ui/stories/index.js index f7f171d5..d831dba0 100644 --- a/ui/stories/index.js +++ b/ui/stories/index.js @@ -27,7 +27,13 @@ const { ListItemView, ListItemGroupView }, - MiniMetric, + MiniMetric: { + MiniMetricGraph, + MiniMetricMeta, + MiniMetricTitle, + MiniMetricSubtitle, + MiniMetricView + }, Modal, Notificaton, Pagination, @@ -406,141 +412,119 @@ storiesOf('Widget', module) )); -const colors = { - perc: 'rgba(54, 74, 205, 0.2)', - alt: 'rgba(245, 93, 93, 0.2)' -}; storiesOf('Metrics', module) .add('Mini Metric', () => ( - + + + Memory: 54% + (1280/3000 MB) + + + )); storiesOf('ListItem', module) From 8cb26623f8292954328bc5e700c3e07471146ab8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= Date: Tue, 10 Jan 2017 19:12:50 +0000 Subject: [PATCH 11/11] make MiniMetrics almost responsive --- ui/src/components/mini-metric/graph.js | 31 ++- ui/src/components/mini-metric/meta.js | 23 +- ui/src/components/mini-metric/subtitle.js | 17 ++ ui/src/components/mini-metric/title.js | 10 +- ui/src/components/mini-metric/view.js | 48 +++-- ui/stories/index.js | 246 ++++++++++++---------- 6 files changed, 231 insertions(+), 144 deletions(-) diff --git a/ui/src/components/mini-metric/graph.js b/ui/src/components/mini-metric/graph.js index ccf02606..2cff5813 100644 --- a/ui/src/components/mini-metric/graph.js +++ b/ui/src/components/mini-metric/graph.js @@ -1,10 +1,31 @@ const buildArray = require('build-array'); const Chart = require('chart.js'); +const fns = require('../../shared/functions'); const React = require('react'); +const Styled = require('styled-components'); const whisker = require('chartjs-chart-box-plot'); whisker(Chart); +const { + remcalc +} = fns; + +const { + default: styled +} = Styled; + +const Container = styled.div` + position: relative; + height: ${remcalc(72)}; + width: 100%; +`; + +const Canvas = styled.canvas` + position: absolute; + bottom: 0; +`; + class Graph extends React.Component { componentDidMount() { const { @@ -75,11 +96,11 @@ class Graph extends React.Component { } render() { return ( - + + + ); } } diff --git a/ui/src/components/mini-metric/meta.js b/ui/src/components/mini-metric/meta.js index a80fadef..985f2809 100644 --- a/ui/src/components/mini-metric/meta.js +++ b/ui/src/components/mini-metric/meta.js @@ -1,4 +1,5 @@ const constants = require('../../shared/constants'); +const fns = require('../../shared/functions'); const React = require('react'); const Styled = require('styled-components'); @@ -6,27 +7,23 @@ const { colors } = constants; +const { + remcalc +} = fns; + const { default: styled } = Styled; const OuterBox = styled.div` - height: 38px; - padding: 8px 12px; - border-bottom: 1px solid ${colors.seperator}; + height: ${remcalc(53)}; + padding: ${remcalc(8)} ${remcalc(12)}; + border-bottom: ${remcalc(1)} solid ${colors.seperator}; `; const InnerBox = styled.div` - width: 136px; - height: 36px; - font-family: 'Libre Franklin', sans-serif; - font-size: 12px; - font-weight: normal; - font-style: normal; - font-stretch: normal; - line-height: 18px; - text-align: right; - color: ${colors.regular}; + width: 100%; + height: ${remcalc(36)}; `; const Meta = (props) => ( diff --git a/ui/src/components/mini-metric/subtitle.js b/ui/src/components/mini-metric/subtitle.js index 7acbe708..119d076b 100644 --- a/ui/src/components/mini-metric/subtitle.js +++ b/ui/src/components/mini-metric/subtitle.js @@ -1,9 +1,26 @@ +const constants = require('../../shared/constants'); +const fns = require('../../shared/functions'); const Styled = require('styled-components'); +const { + remcalc +} = fns; + +const { + colors +} = constants; + const { default: styled } = Styled; module.exports = styled.p` margin: 0; + text-align: right; + font-size: ${remcalc(12)}; + line-height: ${remcalc(18)}; + font-weight: normal; + font-style: normal; + font-stretch: normal; + color: ${colors.regular}; `; diff --git a/ui/src/components/mini-metric/title.js b/ui/src/components/mini-metric/title.js index 428d5155..339d7a44 100644 --- a/ui/src/components/mini-metric/title.js +++ b/ui/src/components/mini-metric/title.js @@ -1,18 +1,26 @@ const constants = require('../../shared/constants'); +const fns = require('../../shared/functions'); const Styled = require('styled-components'); const { colors } = constants; +const { + remcalc +} = fns; + const { default: styled } = Styled; module.exports = styled.h3` margin: 0; - font-size: 14px; + text-align: right; + font-size: ${remcalc(14)}; font-weight: 600; + font-style: normal; line-height: 1.29; color: ${colors.semibold}; + margin-bottom: ${remcalc(3)} !important; `; diff --git a/ui/src/components/mini-metric/view.js b/ui/src/components/mini-metric/view.js index 124dc855..f0d13005 100644 --- a/ui/src/components/mini-metric/view.js +++ b/ui/src/components/mini-metric/view.js @@ -1,27 +1,47 @@ const constants = require('../../shared/constants'); +const fns = require('../../shared/functions'); +const React = require('react'); const Styled = require('styled-components'); const { colors } = constants; +const { + remcalc +} = fns; + const { default: styled } = Styled; -module.exports = styled.div` - height: 127px; - width: 158px; +const Container = styled.div` + position: relative; + height: 100%; + width: 100%; background-color: ${colors.miniBackground}; - border: solid 1px ${colors.borderSecondary}; - - &::before { - position: absolute; - z-index: 1; - width: 9px; - height: 127px; - content: ''; - background-image: - linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(216, 216, 216, 0)); - } + border: solid ${remcalc(1)} ${colors.borderSecondary}; `; + +const Shadow = styled.div` + position: absolute; + height: 100%; + width: ${remcalc(9)}; + left: 0; + top: 0; + background-image: + linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(216, 216, 216, 0)); +`; + +const View = (props) => ( + + + {props.children} + +); + +View.propTypes = { + children: React.PropTypes.node +}; + +module.exports = View; \ No newline at end of file diff --git a/ui/stories/index.js b/ui/stories/index.js index d831dba0..c320f950 100644 --- a/ui/stories/index.js +++ b/ui/stories/index.js @@ -412,119 +412,143 @@ storiesOf('Widget', module) )); +const minMetricData = [{ + 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, +}]; + storiesOf('Metrics', module) .add('Mini Metric', () => ( - - - Memory: 54% - (1280/3000 MB) - - - + + + + + + Memory: 54% + (1280/3000 MB) + + + + + + + + Memory: 54% + (1280/3000 MB) + + + + + + + + Memory: 54% + (1280/3000 MB) + + + + + + )); storiesOf('ListItem', module)