hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Add labels to metrics graph (#2931)

Browse Source 
Signed-off-by: vshakirova <vshakirova@mirantis.com>
This commit is contained in:
Violetta 2021-06-03 17:20:40 +04:00 committed by GitHub
parent 39149eedfd
commit 3acc7b80d7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/renderer/components/+cluster/cluster-pie-charts.tsx
View File

@ -64,7 +64,8 @@ export const ClusterPieCharts = observer(() => {
"#c93dce", "#c93dce",
defaultColor, defaultColor,
], ],
id: "cpuUsage" id: "cpuUsage",
label: "Usage"
}, },
{ {
data: [ data: [
@ -75,7 +76,8 @@ export const ClusterPieCharts = observer(() => {
"#4caf50", "#4caf50",
defaultColor, defaultColor,
], ],
id: "cpuRequests" id: "cpuRequests",
label: "Requests"
}, },
{ {
data: [ data: [
@ -86,7 +88,8 @@ export const ClusterPieCharts = observer(() => {
"#3d90ce", "#3d90ce",
defaultColor, defaultColor,
], ],
id: "cpuLimits" id: "cpuLimits",
label: "Limits"
}, },
], ],
labels: [ labels: [
@ -107,7 +110,8 @@ export const ClusterPieCharts = observer(() => {
"#c93dce", "#c93dce",
defaultColor, defaultColor,
], ],
id: "memoryUsage" id: "memoryUsage",
label: "Usage"
}, },
{ {
data: [ data: [
@ -118,7 +122,8 @@ export const ClusterPieCharts = observer(() => {
"#4caf50", "#4caf50",
defaultColor, defaultColor,
], ],
id: "memoryRequests" id: "memoryRequests",
label: "Requests"
}, },
{ {
data: [ data: [
@ -129,7 +134,8 @@ export const ClusterPieCharts = observer(() => {
"#3d90ce", "#3d90ce",
defaultColor, defaultColor,
], ],
id: "memoryLimits" id: "memoryLimits",
label: "Limits"
}, },
], ],
labels: [ labels: [
@ -150,7 +156,8 @@ export const ClusterPieCharts = observer(() => {
"#4caf50", "#4caf50",
defaultColor, defaultColor,
], ],
id: "podUsage" id: "podUsage",
label: "Usage"
}, },
], ],
labels: [ labels: [

5
src/renderer/components/chart/pie-chart.tsx
View File

@ -46,10 +46,11 @@ export class PieChart extends React.Component<Props> {
const dataset: any = data["datasets"][tooltipItem.datasetIndex]; const dataset: any = data["datasets"][tooltipItem.datasetIndex];
const metaData = Object.values<{ total: number }>(dataset["_meta"])[0]; const metaData = Object.values<{ total: number }>(dataset["_meta"])[0];
const percent = Math.round((dataset["data"][tooltipItem["index"]] / metaData.total) * 100); const percent = Math.round((dataset["data"][tooltipItem["index"]] / metaData.total) * 100);
const label = dataset["label"];
if (isNaN(percent)) return "N/A"; if (isNaN(percent)) return `${label}: N/A`;
return `${percent}%`; return `${label}: ${percent}%`;
}, },
}, },
filter: ({ datasetIndex, index }, { datasets }) => { filter: ({ datasetIndex, index }, { datasets }) => {