Add labels to metrics graph (#2931)

Signed-off-by: vshakirova <vshakirova@mirantis.com>

src/renderer/components/+cluster/cluster-pie-charts.tsx

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

src/renderer/components/chart/pie-chart.tsx

@@ -46,10 +46,11 @@ export class PieChart extends React.Component<Props> {
             const dataset: any = data["datasets"][tooltipItem.datasetIndex];
             const metaData = Object.values<{ total: number }>(dataset["_meta"])[0];
             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 }) => {