From 3fdd7809f7fa50487ea9921096f3b458ecb8bb1f Mon Sep 17 00:00:00 2001 From: Simon Howe Date: Wed, 23 Mar 2016 13:35:33 +0100 Subject: [PATCH] Fixes a couple of MoC visual bugs - Fixes metric font-size on selected nodes - Round metric-height value to be the same as rounded displayed value. - No red/green colors in the MoC! They have to much association w/ success/failure --- client/app/scripts/charts/node-shape-circle.js | 3 ++- client/app/scripts/charts/node-shape-heptagon.js | 3 ++- client/app/scripts/charts/node-shape-hex.js | 3 ++- client/app/scripts/charts/node-shape-square.js | 5 ++++- client/app/scripts/utils/color-utils.js | 2 +- client/app/scripts/utils/data-utils.js | 10 +++++++--- client/app/styles/main.less | 2 ++ client/package.json | 5 ++++- 8 files changed, 24 insertions(+), 9 deletions(-) diff --git a/client/app/scripts/charts/node-shape-circle.js b/client/app/scripts/charts/node-shape-circle.js index 091b7d3bd..19b086c97 100644 --- a/client/app/scripts/charts/node-shape-circle.js +++ b/client/app/scripts/charts/node-shape-circle.js @@ -14,6 +14,7 @@ export default function NodeShapeCircle({highlighted, size, color, metric}) { fillOpacity: 0.5, fill: getMetricColor() }; + const fontSize = size * 0.19; return ( @@ -33,7 +34,7 @@ export default function NodeShapeCircle({highlighted, size, color, metric}) { {highlighted && value !== null ? - {formattedValue} : + {formattedValue} : } ); diff --git a/client/app/scripts/charts/node-shape-heptagon.js b/client/app/scripts/charts/node-shape-heptagon.js index 71e012e50..301e6b612 100644 --- a/client/app/scripts/charts/node-shape-heptagon.js +++ b/client/app/scripts/charts/node-shape-heptagon.js @@ -33,6 +33,7 @@ export default function NodeShapeHeptagon({highlighted, size, color, metric}) { fillOpacity: 0.5, fill: getMetricColor() }; + const fontSize = size * 0.19; return ( @@ -52,7 +53,7 @@ export default function NodeShapeHeptagon({highlighted, size, color, metric}) { {highlighted && value !== null ? - {formattedValue} : + {formattedValue} : } ); diff --git a/client/app/scripts/charts/node-shape-hex.js b/client/app/scripts/charts/node-shape-hex.js index 245779c39..25b61aedb 100644 --- a/client/app/scripts/charts/node-shape-hex.js +++ b/client/app/scripts/charts/node-shape-hex.js @@ -34,6 +34,7 @@ export default function NodeShapeHex({highlighted, size, color, metric}) { const shadowSize = 0.45; const upperHexBitHeight = -0.25 * size * shadowSize; + const fontSize = size * 0.19; const clipId = `mask-${Math.random()}`; const {height, value, formattedValue} = getMetricValue(metric, size); @@ -62,7 +63,7 @@ export default function NodeShapeHex({highlighted, size, color, metric}) { {highlighted && value !== null ? - + {formattedValue} : } diff --git a/client/app/scripts/charts/node-shape-square.js b/client/app/scripts/charts/node-shape-square.js index 8f14938a9..818fc5446 100644 --- a/client/app/scripts/charts/node-shape-square.js +++ b/client/app/scripts/charts/node-shape-square.js @@ -19,6 +19,7 @@ export default function NodeShapeSquare({ const className = classNames('shape', { metrics: value !== null }); + const fontSize = size * 0.19; const metricStyle = { fillOpacity: 0.5, @@ -43,7 +44,9 @@ export default function NodeShapeSquare({ {highlighted && value !== null ? - {formattedValue} : + + {formattedValue} + : } ); diff --git a/client/app/scripts/utils/color-utils.js b/client/app/scripts/utils/color-utils.js index e8d2af804..7d997d405 100644 --- a/client/app/scripts/utils/color-utils.js +++ b/client/app/scripts/utils/color-utils.js @@ -23,7 +23,7 @@ function text2degree(text) { return hueScale(num); } -function colors(text, secondText) { +export function colors(text, secondText) { let hue = text2degree(text); // skip green and shift to the end of the color wheel if (hue > 70 && hue < 150) { diff --git a/client/app/scripts/utils/data-utils.js b/client/app/scripts/utils/data-utils.js index e9bff6bd0..7f45c7382 100644 --- a/client/app/scripts/utils/data-utils.js +++ b/client/app/scripts/utils/data-utils.js @@ -1,6 +1,7 @@ import _ from 'lodash'; import d3 from 'd3'; import { formatMetric } from './string-utils'; +import { colors } from './color-utils'; import AppStore from '../stores/app-store'; @@ -172,7 +173,7 @@ export function getMetricValue(metric, size) { valuePercentage = loadScale(value); } - let displayedValue = value; + let displayedValue = Number(value).toFixed(1); if (displayedValue > 0) { const baseline = 0.1; displayedValue = valuePercentage * (1 - baseline) + baseline; @@ -190,14 +191,17 @@ export function getMetricValue(metric, size) { export function getMetricColor() { const selectedMetric = AppStore.getSelectedMetric(); + // bluey if (/memory/.test(selectedMetric)) { return '#1f77b4'; } else if (/cpu/.test(selectedMetric)) { - return '#2ca02c'; + return colors('cpu'); } else if (/files/.test(selectedMetric)) { + // return colors('files'); + // purple return '#9467bd'; } else if (/load/.test(selectedMetric)) { - return '#e6550d'; + return colors('load'); } return 'steelBlue'; } diff --git a/client/app/styles/main.less b/client/app/styles/main.less index fd33a1164..be28b7e8a 100644 --- a/client/app/styles/main.less +++ b/client/app/styles/main.less @@ -437,6 +437,8 @@ h2 { text { font-size: 12px; + dominant-baseline: middle; + text-anchor: middle; } .highlighted { diff --git a/client/package.json b/client/package.json index 2e00b91d7..5554ad976 100644 --- a/client/package.json +++ b/client/package.json @@ -68,7 +68,10 @@ "test": "jest", "coveralls": "cat coverage/lcov.info | coveralls", "lint": "eslint app", - "clean": "rm build/app.js" + "clean": "rm build/app.js", + "noprobe": "../scope stop && ../scope launch --no-probe --app.window 24h", + "loadreport": "npm run noprobe && sleep 1 && curl -X POST -H \"Content-Type: application/json\" http://$BACKEND_HOST/api/report", + "loadreportjson": "npm run loadreport -- -d @../k8s_report.json" }, "jest": { "scriptPreprocessor": "/node_modules/babel-jest",