chore(react): Convert cluster details to react CE (#466)

app/react/kubernetes/cluster/ClusterView/queries/index.ts

@@ -0,0 +1,3 @@
+export * from './useClusterResourceLimitsQuery';
+export * from './useClusterResourceReservationQuery';
+export * from './useClusterResourceUsageQuery';

app/react/kubernetes/cluster/ClusterView/queries/useClusterResourceLimitsQuery.ts

@@ -0,0 +1,49 @@
+import { round, reduce } from 'lodash';
+import filesizeParser from 'filesize-parser';
+import { useQuery } from '@tanstack/react-query';
+import { Node } from 'kubernetes-types/core/v1';
+
+import { EnvironmentId } from '@/react/portainer/environments/types';
+import { withGlobalError } from '@/react-tools/react-query';
+import KubernetesResourceReservationHelper from '@/kubernetes/helpers/resourceReservationHelper';
+import { parseCpu } from '@/react/kubernetes/utils';
+import { getNodes } from '@/react/kubernetes/cluster/HomeView/nodes.service';
+
+export function useClusterResourceLimitsQuery(environmentId: EnvironmentId) {
+  return useQuery(
+    [environmentId, 'clusterResourceLimits'],
+    async () => getNodes(environmentId),
+    {
+      ...withGlobalError('Unable to retrieve resource limit data', 'Failure'),
+      enabled: !!environmentId,
+      select: aggregateResourceLimits,
+    }
+  );
+}
+
+/**
+ * Processes node data to calculate total CPU and memory limits for the cluster
+ * and sets the state for memory limit in MB and CPU limit rounded to 3 decimal places.
+ */
+function aggregateResourceLimits(nodes: Node[]) {
+  const processedNodes = nodes.map((node) => ({
+    ...node,
+    memory: filesizeParser(node.status?.allocatable?.memory ?? ''),
+    cpu: parseCpu(node.status?.allocatable?.cpu ?? ''),
+  }));
+
+  return {
+    nodes: processedNodes,
+    memoryLimit: reduce(
+      processedNodes,
+      (acc, node) =>
+        KubernetesResourceReservationHelper.megaBytesValue(node.memory || 0) +
+        acc,
+      0
+    ),
+    cpuLimit: round(
+      reduce(processedNodes, (acc, node) => (node.cpu || 0) + acc, 0),
+      3
+    ),
+  };
+}

app/react/kubernetes/cluster/ClusterView/queries/useClusterResourceReservationQuery.ts

@@ -0,0 +1,25 @@
+import { useQuery } from '@tanstack/react-query';
+import { Node } from 'kubernetes-types/core/v1';
+
+import { EnvironmentId } from '@/react/portainer/environments/types';
+import { getTotalResourcesForAllApplications } from '@/react/kubernetes/metrics/metrics';
+import KubernetesResourceReservationHelper from '@/kubernetes/helpers/resourceReservationHelper';
+
+export function useClusterResourceReservationQuery(
+  environmentId: EnvironmentId,
+  nodes: Node[]
+) {
+  return useQuery(
+    [environmentId, 'clusterResourceReservation'],
+    () => getTotalResourcesForAllApplications(environmentId),
+    {
+      enabled: !!environmentId && nodes.length > 0,
+      select: (data) => ({
+        cpu: data.CpuRequest / 1000,
+        memory: KubernetesResourceReservationHelper.megaBytesValue(
+          data.MemoryRequest
+        ),
+      }),
+    }
+  );
+}

app/react/kubernetes/cluster/ClusterView/queries/useClusterResourceUsageQuery.ts

@@ -0,0 +1,46 @@
+import { useQuery } from '@tanstack/react-query';
+import { Node } from 'kubernetes-types/core/v1';
+
+import { EnvironmentId } from '@/react/portainer/environments/types';
+import { getMetricsForAllNodes } from '@/react/kubernetes/metrics/metrics';
+import KubernetesResourceReservationHelper from '@/kubernetes/helpers/resourceReservationHelper';
+import { withGlobalError } from '@/react-tools/react-query';
+import { NodeMetrics } from '@/react/kubernetes/metrics/types';
+
+export function useClusterResourceUsageQuery(
+  environmentId: EnvironmentId,
+  serverMetricsEnabled: boolean,
+  authorized: boolean,
+  nodes: Node[]
+) {
+  return useQuery(
+    [environmentId, 'clusterResourceUsage'],
+    () => getMetricsForAllNodes(environmentId),
+    {
+      enabled:
+        authorized &&
+        serverMetricsEnabled &&
+        !!environmentId &&
+        nodes.length > 0,
+      select: aggregateResourceUsage,
+      ...withGlobalError('Unable to retrieve resource usage data.', 'Failure'),
+    }
+  );
+}
+
+function aggregateResourceUsage(data: NodeMetrics) {
+  return data.items.reduce(
+    (total, item) => ({
+      cpu:
+        total.cpu +
+        KubernetesResourceReservationHelper.parseCPU(item.usage.cpu),
+      memory:
+        total.memory +
+        KubernetesResourceReservationHelper.megaBytesValue(item.usage.memory),
+    }),
+    {
+      cpu: 0,
+      memory: 0,
+    }
+  );
+}