Fix PieChart tooltips (#5223)

* Add tooltipLabels field to ChartData

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Use tooltipLabels in ClusterPieCharts for pods

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Check for tooltipLabels field to assign tooltip text

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Use tooltipLabels inside overview charts

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Expand workload overview charts to fit tooltips

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Move tooltipLabels into chart datasets

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Move tooltipLabels prop to PieCharts

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Little clean up

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Getting back id field to PieChartData interface

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Id fix

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* More clean up

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev authored and GitHub committed 2022-04-11 15:21:18 +03:00
1 parent 423ffd44dc
commit 542cbe9ebf
4 files changed
+40 -19

No files matched your search

@@ -12,7 +12,7 @@ import { MetricNodeRole } from "./cluster-overview-store/cluster-overview-store"
import { Spinner } from "../spinner";
import { Icon } from "../icon";
import { nodesStore } from "../+nodes/nodes.store";
import type { ChartData } from "../chart";
import type { PieChartData } from "../chart";
import { PieChart } from "../chart";
import { ClusterNoMetrics } from "./cluster-no-metrics";
import { bytesToUnits, cssNames } from "../../utils";
@@ -49,7 +49,7 @@ const NonInjectedClusterPieCharts = observer(({ clusterOverviewStore }: Dependen
const defaultColor = ThemeStore.getInstance().activeTheme.colors.pieChartDefaultColor;
if (!memoryCapacity || !cpuCapacity || !podCapacity || !memoryAllocatableCapacity || !cpuAllocatableCapacity || !podAllocatableCapacity) return null;
const cpuData: ChartData = {
const cpuData: PieChartData = {
datasets: [
{
data: [
@@ -96,7 +96,7 @@ const NonInjectedClusterPieCharts = observer(({ clusterOverviewStore }: Dependen
["Capacity", cpuCapacity],
]),
};
const memoryData: ChartData = {
const memoryData: PieChartData = {
datasets: [
{
data: [
@@ -143,7 +143,7 @@ const NonInjectedClusterPieCharts = observer(({ clusterOverviewStore }: Dependen
`Capacity: ${bytesToUnits(memoryCapacity)}`,
],
};
const podsData: ChartData = {
const podsData: PieChartData = {
datasets: [
{
data: [
@@ -156,6 +156,10 @@ const NonInjectedClusterPieCharts = observer(({ clusterOverviewStore }: Dependen
],
id: "podUsage",
label: "Usage",
tooltipLabels: [
(percent) => `Usage: ${percent}`,
(percent) => `Available: ${percent}`,
],
},
],
labels: [