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",