From c30b23c2749dbdd3d7ebc3a4ad902cf4d1e1f003 Mon Sep 17 00:00:00 2001 From: Filip Barl Date: Wed, 25 Jul 2018 16:26:26 +0200 Subject: [PATCH 1/2] Bump ui-components to v0.11.8 --- client/app/styles/_base.scss | 1 + client/package.json | 3 +- client/yarn.lock | 60 +++++++++++++++++++++++++++++++++--- 3 files changed, 59 insertions(+), 5 deletions(-) diff --git a/client/app/styles/_base.scss b/client/app/styles/_base.scss index 75afc0f9e..a24d8d2f0 100644 --- a/client/app/styles/_base.scss +++ b/client/app/styles/_base.scss @@ -692,6 +692,7 @@ a { @extend .shadow-2; // keep node-details above the terminal. z-index: $layer-front; + overflow: hidden; &:last-child { margin-bottom: 0; diff --git a/client/package.json b/client/package.json index f4bd81d7a..4c4694623 100644 --- a/client/package.json +++ b/client/package.json @@ -44,7 +44,7 @@ "reselect": "3.0.1", "reselect-map": "1.0.3", "styled-components": "2.2.4", - "weaveworks-ui-components": "0.7.0", + "weaveworks-ui-components": "0.11.8", "whatwg-fetch": "2.0.3", "xterm": "3.3.0" }, @@ -80,6 +80,7 @@ "mockdate": "2.0.2", "node-sass": "^4.6.0", "postcss-loader": "1.3.3", + "react-router": "3.2.0", "sass-lint": "^1.12.1", "sass-loader": "6.0.6", "sasslint-webpack-plugin": "^1.0.4", diff --git a/client/yarn.lock b/client/yarn.lock index 088811863..7d47e3e9b 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -2060,6 +2060,14 @@ create-react-class@15.x: loose-envify "^1.3.1" object-assign "^4.1.1" +create-react-class@^15.5.1: + version "15.6.3" + resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.3.tgz#2d73237fb3f970ae6ebe011a9e66f46dbca80036" + dependencies: + fbjs "^0.8.9" + loose-envify "^1.3.1" + object-assign "^4.1.1" + cross-spawn@^3.0.0: version "3.0.1" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-3.0.1.tgz#1256037ecb9f0c5f79e3d6ef135e30770184b982" @@ -3787,6 +3795,15 @@ he@1.1.x: version "1.1.1" resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd" +history@^3.0.0: + version "3.3.0" + resolved "https://registry.yarnpkg.com/history/-/history-3.3.0.tgz#fcedcce8f12975371545d735461033579a6dae9c" + dependencies: + invariant "^2.2.1" + loose-envify "^1.2.0" + query-string "^4.2.2" + warning "^3.0.0" + hmac-drbg@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1" @@ -4058,6 +4075,12 @@ invariant@^2.0.0, invariant@^2.2.0, invariant@^2.2.2: dependencies: loose-envify "^1.0.0" +invariant@^2.2.1: + version "2.2.4" + resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6" + dependencies: + loose-envify "^1.0.0" + invert-kv@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-1.0.0.tgz#104a8e4aaca6d3d8cd157a8ef8bfab2d7a3ffdb6" @@ -4715,6 +4738,10 @@ js-tokens@^3.0.0, js-tokens@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b" +"js-tokens@^3.0.0 || ^4.0.0": + version "4.0.0" + resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" + js-yaml@^3.4.3, js-yaml@^3.7.0, js-yaml@^3.9.1: version "3.10.0" resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.10.0.tgz#2e78441646bd4682e963f22b6e92823c309c62dc" @@ -5083,6 +5110,12 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1: dependencies: js-tokens "^3.0.0" +loose-envify@^1.2.0: + version "1.4.0" + resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" + dependencies: + js-tokens "^3.0.0 || ^4.0.0" + loud-rejection@^1.0.0: version "1.6.0" resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f" @@ -6429,6 +6462,13 @@ prop-types@15.6.0, prop-types@15.x, prop-types@^15.5.10, prop-types@^15.5.4, pro loose-envify "^1.3.1" object-assign "^4.1.1" +prop-types@^15.5.6: + version "15.6.2" + resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102" + dependencies: + loose-envify "^1.3.1" + object-assign "^4.1.1" + proxy-addr@~1.1.3: version "1.1.5" resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-1.1.5.tgz#71c0ee3b102de3f202f3b64f608d173fcba1a918" @@ -6482,7 +6522,7 @@ qs@~6.5.1: version "6.5.1" resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.1.tgz#349cdf6eef89ec45c12d7d5eb3fc0c870343a6d8" -query-string@^4.1.0: +query-string@^4.1.0, query-string@^4.2.2: version "4.3.4" resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb" dependencies: @@ -6634,6 +6674,18 @@ react-resize-aware@2.7.0: version "2.7.0" resolved "https://registry.yarnpkg.com/react-resize-aware/-/react-resize-aware-2.7.0.tgz#1bb6d0b45a234d94d412b5c3f5e9d2ffbf973429" +react-router@3.2.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/react-router/-/react-router-3.2.0.tgz#62b6279d589b70b34e265113e4c0a9261a02ed36" + dependencies: + create-react-class "^15.5.1" + history "^3.0.0" + hoist-non-react-statics "^1.2.0" + invariant "^2.2.1" + loose-envify "^1.2.0" + prop-types "^15.5.6" + warning "^3.0.0" + react@16.1.0: version "16.1.0" resolved "https://registry.yarnpkg.com/react/-/react-16.1.0.tgz#1c2bdac3c17fe7ee9282fa35aca6cc36387903e1" @@ -8345,9 +8397,9 @@ wd@^0.4.0: underscore.string "~3.0.3" vargs "~0.1.0" -weaveworks-ui-components@0.7.0: - version "0.7.0" - resolved "https://registry.yarnpkg.com/weaveworks-ui-components/-/weaveworks-ui-components-0.7.0.tgz#721f886c2dd6e93250afc446873f77f33f130cb0" +weaveworks-ui-components@0.11.8: + version "0.11.8" + resolved "https://registry.yarnpkg.com/weaveworks-ui-components/-/weaveworks-ui-components-0.11.8.tgz#4e649e418f5fb1746b908cc4edaa77ebadaf75e8" dependencies: classnames "2.2.5" d3-drag "1.2.1" From b9656566bbaae51ec3d250f5ad12a07dd11ab91a Mon Sep 17 00:00:00 2001 From: Filip Barl Date: Fri, 27 Jul 2018 10:28:10 +0200 Subject: [PATCH 2/2] Add border radius to resource view rectangles and grid view color icons. --- client/app/scripts/charts/nodes-grid.js | 21 ++++++++++++------- .../node-resources-metric-box.js | 19 ++++++++++++++--- client/app/styles/_base.scss | 1 + 3 files changed, 30 insertions(+), 11 deletions(-) diff --git a/client/app/scripts/charts/nodes-grid.js b/client/app/scripts/charts/nodes-grid.js index af81b37f6..7acc54586 100644 --- a/client/app/scripts/charts/nodes-grid.js +++ b/client/app/scripts/charts/nodes-grid.js @@ -1,5 +1,6 @@ /* eslint react/jsx-no-bind: "off", no-multi-comp: "off" */ import React from 'react'; +import styled from 'styled-components'; import { connect } from 'react-redux'; import { List as makeList, Map as makeMap } from 'immutable'; import capitalize from 'lodash/capitalize'; @@ -20,6 +21,15 @@ const IGNORED_COLUMNS = ['docker_container_ports', 'docker_container_id', 'docke 'docker_container_command', 'docker_container_networks']; +const Icon = styled.span` + border-radius: ${props => props.theme.borderRadius.soft}; + background-color: ${props => props.color}; + margin-top: 3px; + display: block; + height: 12px; + width: 12px; +`; + function topologyLabel(topologies, id) { const topology = findTopologyById(topologies, id); if (!topology) { @@ -74,23 +84,18 @@ function renderIdCell({ }) { const showSubLabel = Boolean(pseudo) && labelMinor; const title = showSubLabel ? `${label} (${labelMinor})` : label; - const iconStyle = { - width: 16, - flex: 'none', - color: getNodeColor(rank, label) - }; return (
-
+
+ +
{label} {showSubLabel && {labelMinor}}
); } - - class NodesGrid extends React.Component { constructor(props, context) { super(props, context); diff --git a/client/app/scripts/components/nodes-resources/node-resources-metric-box.js b/client/app/scripts/components/nodes-resources/node-resources-metric-box.js index 533ba3e54..67304bfaa 100644 --- a/client/app/scripts/components/nodes-resources/node-resources-metric-box.js +++ b/client/app/scripts/components/nodes-resources/node-resources-metric-box.js @@ -1,5 +1,6 @@ import React from 'react'; import { connect } from 'react-redux'; +import theme from 'weaveworks-ui-components/lib/theme'; import NodeResourcesMetricBoxInfo from './node-resources-metric-box-info'; import { clickNode } from '../../actions/app-actions'; @@ -120,10 +121,22 @@ class NodeResourcesMetricBox extends React.Component { className="node-resources-metric-box" style={{ opacity }} onClick={this.handleClick} - ref={this.saveNodeRef}> + ref={this.saveNodeRef} + > {label} - {type} usage at {resourceUsageTooltipInfo} - {showCapacity && } - + {showCapacity && } + {showInfo &&