rancher
/
ui
mirror of https://github.com/rancher/ui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Group dashboard gauge text 

https://github.com/rancher/rancher/issues/17040
This commit is contained in:
n313893254 2019-02-25 16:58:28 +08:00
parent c5202966d7
commit 4ff7ef4b22
6 changed files with 58 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/styles/components/_percent-gauge.scss
View File

@ -62,6 +62,16 @@ $live-color : #52c41a !default;
.gauge-none-fill {
fill: transparent;
}
.gauge-usedPercent-fill {
stroke: $gauge-color;
fill: $gauge-color;
}
.gauge-reservedPercent-fill {
stroke: $live-color;
fill: $live-color;
}
}
.percent-gauge-tooltip {

8
lib/monitoring/addon/components/nodes-live/component.js
View File

@ -63,7 +63,7 @@ export default NodesReservation.extend(Metrics, {
}
const cpuGraph = (get(this, 'graphs')).filter((g) => g.graph.title === CPU_GRAPH_TITLE)[0]
if (!cpuGraph) {
if (!cpuGraph || cpuGraph === undefined) {
return
}
const { series = [] } = cpuGraph
@ -80,7 +80,7 @@ export default NodesReservation.extend(Metrics, {
}
const cpuGraph = (get(this, 'graphs')).filter((g) => g.graph.title === CPU_GRAPH_TITLE)[0]
if (!cpuGraph) {
if (!cpuGraph || cpuGraph === undefined) {
return
}
const { series = [] } = cpuGraph
@ -137,7 +137,7 @@ export default NodesReservation.extend(Metrics, {
const { nodeCapcity, graphs = [] } = this
const cpuGraph = graphs.filter((g) => g.graph.title === CPU_GRAPH_TITLE)[0]
if (!cpuGraph) {
if (!cpuGraph || cpuGraph === undefined) {
return
}
const { series = [] } = cpuGraph
@ -174,7 +174,7 @@ export default NodesReservation.extend(Metrics, {
const { nodeCapcity, graphs = [] } = this
const graph = graphs.filter((g) => g.graph.title === MOMORY_GRAPH_TITLE)[0]
if (!graph) {
if (!graph || graph === undefined) {
return
}
const { series = [] } = graph

1
lib/monitoring/addon/components/nodes-live/template.hbs
View File

@ -31,6 +31,7 @@
title=(t "clusterDashboard.pods")
subtitle=podUsage.subtitle
ticks=podUsage.ticks
mode='monitoring'
}}
</div>
</div>

1
lib/shared/addon/components/percent-gauge/component.js
View File

@ -24,6 +24,7 @@ export default Component.extend(ThrottledResize, {
title: get(this, 'title'),
subtitle: get(this, 'subtitle'),
ticks: get(this, 'ticks'),
mode: get(this, 'mode'),
}));
next(this, () => {

41
lib/shared/addon/utils/percent-gauge.js
View File

@ -8,15 +8,16 @@ export default function initGraph(options) {
const svg = select(el).append('svg')
.attr('width', width).attr('height', height);
let value = options.value;
let ticks = options.ticks;
let {
value, ticks, mode
} = options
const { valuePath, maxPath } = addArcValue(svg, width, margin, thickness, options.value);
let tooltip = addTooltip();
addTicks(svg, tooltip, width, height, margin, ticks, options.value, thickness);
const {
valueLabel, titleLabel, subtitleLabel
} = addLabels(svg, options, width, height, fontSize);
} = addLabels(svg, options, width, height, fontSize, mode);
return {
updateTitle(text) {
@ -41,19 +42,19 @@ export default function initGraph(options) {
},
fit() {
fit(svg, el, value, ticks, tooltip, valuePath,
maxPath, valueLabel, titleLabel, subtitleLabel);
maxPath, valueLabel, titleLabel, subtitleLabel, mode);
},
};
}
function fit(svg, el, value, ticks, tooltip, valuePath, maxPath, valueLabel, titleLabel, subtitleLabel) {
function fit(svg, el, value, ticks, tooltip, valuePath, maxPath, valueLabel, titleLabel, subtitleLabel, mode) {
const {
width, height, margin, thickness, fontSize
} = getConfig({ el });
svg.attr('width', width).attr('height', height);
repaintArc(width, margin, value, thickness, valuePath, maxPath);
repaintLabels(valueLabel, titleLabel, subtitleLabel, width, height, fontSize);
repaintLabels(valueLabel, titleLabel, subtitleLabel, width, height, fontSize, mode);
repaintTicks(svg, tooltip, width, height, margin, ticks, value, thickness);
}
@ -102,33 +103,43 @@ function getValueLabelY(height, fontSize) {
return height / 5 + fontSize / 1.2;
}
function getTitleLabelY(height, fontSize) {
function getTitleLabelY(height, fontSize, mode) {
if (mode === 'monitoring') {
return height / 5 + 4.3 * fontSize;
}
return height / 5 + 1.9 * fontSize;
}
function getSubtitleLabelY(height, fontSize, mode) {
if (mode === 'monitoring') {
return height / 5 + 1.9 * fontSize;
}
function getSubtitleLabelY(height, fontSize) {
return height / 5 + 2.5 * fontSize;
}
function addLabels(svg, options, width, height, fontSize) {
function addLabels(svg, options, width, height, fontSize, mode) {
const valueClass = (mode === 'monitoring' ? 'usedPercent' : 'value')
return {
valueLabel: addText(options.value ? `${ options.value }%` : '0%', svg, width / 2, getValueLabelY(height, fontSize), fontSize, 'value', 3.5),
titleLabel: addText(options.title, svg, width / 2, getTitleLabelY(height, fontSize), fontSize / 3, 'title'),
subtitleLabel: addText(options.subtitle, svg, width / 2, getSubtitleLabelY(height, fontSize), fontSize / 3, 'subtitle'),
valueLabel: addText(options.value ? `${ options.value }%` : '0%', svg, width / 2, getValueLabelY(height, fontSize), fontSize, valueClass, 3.5),
titleLabel: addText(options.title, svg, width / 2, getTitleLabelY(height, fontSize, mode), fontSize / 3, 'title', mode),
subtitleLabel: addText(options.subtitle, svg, width / 2, getSubtitleLabelY(height, fontSize, mode), fontSize / 3, 'subtitle', mode),
}
}
function repaintLabels(valueLabel, titleLabel, subtitleLabel, width, height, fontSize) {
function repaintLabels(valueLabel, titleLabel, subtitleLabel, width, height, fontSize, mode) {
valueLabel.attr('x', width / 2)
.attr('y', getValueLabelY(height, fontSize))
.attr('dy', fontSize / 2)
.style('font-size', `${ fontSize }px`);
titleLabel.attr('x', width / 2)
.attr('y', getTitleLabelY(height, fontSize))
.attr('y', getTitleLabelY(height, fontSize, mode))
.attr('dy', fontSize / 6)
.style('font-size', `${ fontSize / 3 }px`);
subtitleLabel.attr('x', width / 2)
.attr('y', getSubtitleLabelY(height, fontSize))
.attr('y', getSubtitleLabelY(height, fontSize, mode))
.attr('dy', fontSize / 6)
.style('font-size', `${ fontSize / 3 }px`);
}

23
lib/shared/addon/utils/used-percent-gauge.js
View File

@ -26,7 +26,7 @@ export default function initGraph(options) {
addTicks(svg, tooltip, width, height, margin, ticks, options.value, thickness, liveTicks, live, currentMaxValue);
const {
valueLabel, titleLabel, subtitleLabel, liveLabel
valueLabel, titleLabel, subtitleLabel, liveLabel, reservedLabel
} = addLabels(svg, options, width, height, fontSize);
return {
@ -68,19 +68,19 @@ export default function initGraph(options) {
},
fit() {
fit(svg, el, value, ticks, tooltip, valuePath,
maxPath, valueLabel, titleLabel, subtitleLabel, liveMaxPath, liveValuePath, liveLabel, currentLive, currentLiveTicks, currentMaxValue);
maxPath, valueLabel, titleLabel, subtitleLabel, liveMaxPath, liveValuePath, liveLabel, currentLive, currentLiveTicks, currentMaxValue, reservedLabel);
},
};
}
function fit(svg, el, value, ticks, tooltip, valuePath, maxPath, valueLabel, titleLabel, subtitleLabel, liveMaxPath, liveValuePath, liveLabel, live, liveTicks, currentMaxValue) {
function fit(svg, el, value, ticks, tooltip, valuePath, maxPath, valueLabel, titleLabel, subtitleLabel, liveMaxPath, liveValuePath, liveLabel, live, liveTicks, currentMaxValue, reservedLabel) {
const {
width, height, margin, thickness, fontSize
} = getConfig({ el });
svg.attr('width', width).attr('height', height);
repaintArc(width, margin, value, thickness, valuePath, maxPath, liveMaxPath, liveValuePath, live, currentMaxValue);
repaintLabels(valueLabel, titleLabel, subtitleLabel, width, height, fontSize, liveLabel);
repaintLabels(valueLabel, titleLabel, subtitleLabel, width, height, fontSize, liveLabel, reservedLabel);
repaintTicks(svg, tooltip, width, height, margin, ticks, value, thickness, live, liveTicks, currentMaxValue);
}
@ -141,7 +141,7 @@ function getValueLabelY(height, fontSize) {
}
function getTitleLabelY(height, fontSize) {
return height / 5 + 1.9 * fontSize;
return height / 5 + 4.3 * fontSize;
}
function getSubtitleLabelY(height, fontSize) {
@ -149,23 +149,32 @@ function getSubtitleLabelY(height, fontSize) {
}
function getLiveLabelY(height, fontSize) {
return height / 5 + 1.9 * fontSize;
}
function getReservedLabelY(height, fontSize) {
return height / 5 + 2.5 * fontSize;
}
function addLabels(svg, options, width, height, fontSize) {
return {
valueLabel: addText(options.value ? `${ options.value }%` : '0%', svg, width / 2, getValueLabelY(height, fontSize), fontSize, 'value', 3.5),
valueLabel: addText(options.value ? `${ options.value }%` : '0%', svg, width / 2, getValueLabelY(height, fontSize), fontSize, 'usedPercent', 3.5),
reservedLabel: addText(options.value ? `${ options.value }%` : '0%', svg, width / 2, getReservedLabelY(height, fontSize), fontSize / 2, 'reservedPercent', 3.5),
titleLabel: addText(options.title, svg, width / 2, getTitleLabelY(height, fontSize), fontSize / 3, 'title'),
subtitleLabel: addText(options.subtitle, svg, width / 2, getSubtitleLabelY(height, fontSize), fontSize / 3, 'liveLabel'),
liveLabel: addText(options.liveTitle, svg, width / 2, getLiveLabelY(height, fontSize), fontSize / 3, 'subtitle'),
}
}
function repaintLabels(valueLabel, titleLabel, subtitleLabel, width, height, fontSize, liveLabel) {
function repaintLabels(valueLabel, titleLabel, subtitleLabel, width, height, fontSize, liveLabel, reservedLabel) {
valueLabel.attr('x', width / 2)
.attr('y', getValueLabelY(height, fontSize))
.attr('dy', fontSize / 2)
.style('font-size', `${ fontSize }px`);
reservedLabel.attr('x', width / 2)
.attr('y', getReservedLabelY(height, fontSize))
.attr('dy', fontSize / 4)
.style('font-size', `${ fontSize / 2 }px`);
titleLabel.attr('x', width / 2)
.attr('y', getTitleLabelY(height, fontSize))
.attr('dy', fontSize / 6)