Fix app monitoring

src/app/project/app/[appId]/overview/monitoring-app.tsx

@@ -1,19 +1,11 @@
-import { SimpleDataTable } from "@/components/custom/simple-data-table";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { formatDateTime } from "@/frontend/utils/format.utils";
+import { Card, CardContent } from "@/components/ui/card";
 import { AppExtendedModel } from "@/shared/model/app-extended.model";
 import { useEffect, useState } from "react";
 import { getRessourceDataApp } from "./actions";
 import FullLoadingSpinner from "@/components/ui/full-loading-spinnter";
-import { Button } from "@/components/ui/button";
-import { useConfirmDialog } from "@/frontend/states/zustand.states";
-import { Toast } from "@/frontend/utils/toast.utils";
-import { DeploymentInfoModel } from "@/shared/model/deployment-info.model";
-import DeploymentStatusBadge from "./deployment-status-badge";
-import { BuildLogsDialog } from "./build-logs-overlay";
-import ShortCommitHash from "@/components/custom/short-commit-hash";
 import { PodsResourceInfoModel } from "@/shared/model/pods-resource-info.model";
-import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
 export default function MonitoringTab({
     app
@@ -67,10 +59,21 @@ export default function MonitoringTab({
                     </TableHeader>
                     <TableBody>
                             <TableRow>
-                                <TableCell className="font-medium">{selectedPod?.cpuPercent}</TableCell>
-                                <TableCell className="font-medium">{selectedPod?.cpuAbsolut}</TableCell>
-                                <TableCell className="font-medium">{selectedPod?.ramPercent}</TableCell>
-                                <TableCell className="font-medium">{selectedPod?.ramAbsolut}</TableCell>
+                                <TableCell className="font-medium">{selectedPod?.cpuPercent.toFixed(2)}</TableCell>
+                                <TableCell>
+                                <TooltipProvider>
+                                        <Tooltip>
+                                            <TooltipTrigger asChild>
+                                                <div className={'px-3 py-1.5 rounded cursor-pointer'}>{selectedPod?.cpuAbsolut.toFixed(2)}</div>
+                                            </TooltipTrigger>
+                                            <TooltipContent>
+                                                <p className="max-w-[350px]">{selectedPod?.cpuAbsolut.toFixed(10)} cores</p>
+                                            </TooltipContent>
+                                        </Tooltip>
+                                    </TooltipProvider>
+                                </TableCell>
+                                <TableCell className="font-medium">{selectedPod?.ramPercent.toFixed(2)}</TableCell>
+                                <TableCell className="font-medium">{selectedPod?.ramAbsolut.toFixed(2)}</TableCell>
                             </TableRow>
                     </TableBody>
                 </Table>

src/server/services/monitor-app.service.ts

@@ -8,9 +8,9 @@ class MonitorAppService {
     async getPodsForApp(projectId: string, appId: string): Promise<PodsResourceInfoModel> {
         const metricsClient = new k8s.Metrics(k3s.getKubeConfig());
         const podsFromApp = await setupPodService.getPodsForApp(projectId, appId);
-        const topPodsRes1 = await k8s.topPods(k3s.core, metricsClient, projectId);
+        const topPods = await k8s.topPods(k3s.core, metricsClient, projectId);
 
-        const filteredTopPods = topPodsRes1.filter((topPod) =>
+        const filteredTopPods = topPods.filter((topPod) =>
             podsFromApp.some((pod) => pod.podName === topPod.Pod.metadata?.name)
         );
 
@@ -39,14 +39,14 @@ class MonitorAppService {
         var totalRamAppCorrectUnit: number = totalResourcesApp.ram / (1024 * 1024);  //von Byte in MB umrechnen
 
 
-        const appCpuUsagePercent = ((totalResourcesApp.cpu / totalResourcesNodes.cpu) * 100).toFixed(2);
-        const appRamUsagePercent = ((totalRamAppCorrectUnit / totalRamNodesCorrectUnit) * 100).toFixed(2);
+        const appCpuUsagePercent = ((totalResourcesApp.cpu / totalResourcesNodes.cpu) * 100);
+        const appRamUsagePercent = ((totalRamAppCorrectUnit / totalRamNodesCorrectUnit) * 100);
 
         return {
-            cpuPercent: `${appCpuUsagePercent}%`,
-            cpuAbsolut: `${totalResourcesApp.cpu.toFixed(10)} cores`,
-            ramPercent: `${appRamUsagePercent}%`,
-            ramAbsolut: `${totalRamAppCorrectUnit.toFixed(2)} MB`
+            cpuPercent: appCpuUsagePercent,
+            cpuAbsolut: totalResourcesApp.cpu,
+            ramPercent: appRamUsagePercent,
+            ramAbsolut: totalRamAppCorrectUnit
         }
     }
 

src/shared/model/pods-resource-info.model.ts

@@ -1,11 +1,10 @@
-import { memo } from "react";
 import { z } from "zod";
 
 export const podsResourceInfoZodModel = z.object({
-    cpuPercent: z.string(),
-    cpuAbsolut: z.string(),
-    ramPercent: z.string(),
-    ramAbsolut: z.string(),
+    cpuPercent: z.number(),
+    cpuAbsolut: z.number(),
+    ramPercent: z.number(),
+    ramAbsolut: z.number(),
 });
 
 export type PodsResourceInfoModel = z.infer<typeof podsResourceInfoZodModel>;