Merge remote-tracking branch 'origin/main'

EliasDeHondt · Feb 26, 2025 · 114d8b6 · 114d8b6
2 parents 1c2628c + 867258d
commit 114d8b6
Show file tree

Hide file tree

Showing 11 changed files with 236 additions and 59 deletions.
diff --git a/App/Frontend/src/app/dashboard/dashboard.component.css b/App/Frontend/src/app/dashboard/dashboard.component.css
@@ -8,7 +8,6 @@
 .dashboard-header-section1 { grid-area: header1; }
 .dashboard-header-section2 { grid-area: header2; }
 .dashboard-header-section3 { grid-area: header3; }
-.dashboard-header-section4 { grid-area: header4; }
 .nav { grid-area: nav; }
 .dashboard-main { grid-area: main; }
 .footer { grid-area: footer; }
@@ -30,21 +29,20 @@
 /* Dashboard Header */
 .dashboard-header {
     display: grid;
-    grid-template-areas: 'header1 header2 header3 header4';
-    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-areas: 'header1 header2 header3';
+    grid-template-columns: 1fr 1fr 1fr;
     gap: 16px;
 }
 
 .dashboard-header-section1,
 .dashboard-header-section2,
-.dashboard-header-section3,
-.dashboard-header-section4 {
+.dashboard-header-section3 {
     background-color: var(--quaternary);
     color: var(--text);
     border-radius: var(--radius);
     box-shadow: 2px 0 5px var(--shadow);
     width: 100%;
-    height: 170px;
+    height: 190px;
     font-weight: bold;
     font-size: 1rem;
     align-items: center;
@@ -62,16 +60,23 @@
     padding: 0;
 }
 
-#dashboard-header-4 {
-    margin-top: 5%;
+.dashboard-header-1,
+.dashboard-header-2,
+.dashboard-header-3 {
     align-content: center;
     align-items: center;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }
-#dashboard-header-2,#dashboard-header-3 {
-    float: left;
+
+.dashboard-header-1,
+.dashboard-header-2 {
+    margin-top: 0;
+}
+
+.dashboard-header-3 {
+    margin-top: 5%;
 }
 
 .progress-container {
@@ -155,10 +160,11 @@
 
     .dashboard-header {
         grid-template-areas:
-            'header1 header2'
-            'header3 header4';
-        grid-template-columns: 1fr 1fr;
-        grid-template-rows: 1fr 1fr;
+            'header1'
+            'header2'
+            'header3';
+        grid-template-columns: 1fr;
+        grid-template-rows: 1fr 1fr 1fr;
     }
 }
 
@@ -176,16 +182,14 @@
         grid-template-areas:
             'header1'
             'header2'
-            'header3'
-            'header4';
+            'header3';
         grid-template-columns: 1fr;
-        grid-template-rows: 1fr 1fr 1fr 1fr;
+        grid-template-rows: 1fr 1fr 1fr;
     }
 
     .dashboard-header-section1,
     .dashboard-header-section2,
-    .dashboard-header-section3,
-    .dashboard-header-section4 {
+    .dashboard-header-section3 {
         margin-bottom: 16px;
     }
 

diff --git a/App/Frontend/src/app/dashboard/dashboard.component.html b/App/Frontend/src/app/dashboard/dashboard.component.html
@@ -2,17 +2,11 @@
 <body class="dashboard-body">
     <header class="dashboard-header">
         <section class="dashboard-header-section1">
-            <article class="dashboard-header-article">
-                <h2>{{ 'DASHBOARD.NODES' | translate }}</h2>
-                <span id="dashboard-header-1"></span> <!-- TODO -->
-            </article>
-        </section>
-        <section class="dashboard-header-section2">
             <article class="dashboard-header-article">
                 <h2>{{ 'DASHBOARD.CPU' | translate }}</h2>
-                <span id="dashboard-header-2">
+                <span class="dashboard-header-1">
                     <ngx-charts-gauge
-                    [view]="[450, 200]"
+                    [view]="[500, 250]"
                     [min]="0"
                     [results]="cpuChartData"
                     [max]="100"
@@ -26,12 +20,12 @@ <h2>{{ 'DASHBOARD.CPU' | translate }}</h2>
                 </span>
             </article>
         </section>
-        <section class="dashboard-header-section3">
+        <section class="dashboard-header-section2">
             <article class="dashboard-header-article">
                 <h2>{{ 'DASHBOARD.RAM' | translate }}</h2>
-                    <span id="dashboard-header-3">
+                    <span class="dashboard-header-2">
                     <ngx-charts-gauge
-                            [view]="[450, 200]"
+                            [view]="[500, 250]"
                             [min]="0"
                             [results]="memoryChartData"
                             [max]="100"
@@ -45,10 +39,10 @@ <h2>{{ 'DASHBOARD.RAM' | translate }}</h2>
                 </span>
             </article>
         </section>
-        <section class="dashboard-header-section4">
+        <section class="dashboard-header-section3">
             <article class="dashboard-header-article">
                 <h2>{{ 'DASHBOARD.DISK' | translate }}</h2>
-                <span id="dashboard-header-4">
+                <span class="dashboard-header-3">
                     <div class="progress-container">
                         <div class="progress-bar" [style.width.%]="diskUsagePercentage" [style.background-color]="diskColor"></div>
                     </div>

diff --git a/App/Frontend/src/app/dashboard/dashboard.component.ts b/App/Frontend/src/app/dashboard/dashboard.component.ts
@@ -22,7 +22,7 @@ import { SpiderWebComponent } from "../spider-web/spider-web.component";
 })
 
 export class DashboardComponent implements AfterViewInit, OnInit {
-// Fullscreen button
+    // Fullscreen button
     @ViewChild('dashboardMain') dashboardMain!: ElementRef;
     @ViewChild('dashboardTitle') dashboardTitle!: ElementRef;
 
@@ -100,10 +100,10 @@ export class DashboardComponent implements AfterViewInit, OnInit {
 
     updateChartData(): void {
         this.memoryChartData = [
-            { name: 'Used', value: this.usage.MemUsage },
+            { name: 'Used', value: parseFloat(this.usage.MemUsage.toFixed(2)) },
         ];
         this.cpuChartData = [
-            { name: 'Used', value: this.usage?.CpuUsage || 0 },
+            { name: 'Used', value: parseFloat((this.usage?.CpuUsage || 0).toFixed(2)) },
         ];
         this.diskUsagePercentage = (this.usage.DiskUsage / this.usage.DiskCapacity) * 100;
 

diff --git a/App/Frontend/src/app/search/search.component.html b/App/Frontend/src/app/search/search.component.html
@@ -10,7 +10,7 @@
         </section>
         <section class="search-header-section2">
             <article class="search-header-article2">
-                <label><input class="cursor-pointer" type="radio" (change)="updateElement('nodes')" name="search-filter" id="search-filter-option-1">{{ 'DASHBOARD.NODES' | translate }}</label>
+                <label><input class="cursor-pointer" type="radio" (change)="updateElement('nodes')" name="search-filter" id="search-filter-option-1">{{ 'SEARCH.NODES' | translate }}</label>
                 <label><input class="cursor-pointer" type="radio" (change)="updateElement('pods')" name="search-filter" id="search-filter-option-2">{{ 'SEARCH.PODS' | translate }}</label>
                 <label><input class="cursor-pointer" type="radio" (change)="updateElement('services')" name="search-filter" id="search-filter-option-3">{{ 'SEARCH.SERVICES' | translate }}</label>
                 <label><input class="cursor-pointer" type="radio" (change)="updateElement('deployments')" name="search-filter" id="search-filter-option-4">{{ 'SEARCH.DEPLOYMENTS' | translate }}</label>

diff --git a/App/Frontend/src/assets/i18n/de.json b/App/Frontend/src/assets/i18n/de.json
@@ -21,15 +21,14 @@
         "LOGIN_BUTTON": "Anmelden"
     },
     "DASHBOARD": {
-        "NODES": "Knoten",
         "CPU": "CPU-Nutzung",
         "RAM": "RAM-Nutzung",
         "DISK": "Festplattennutzung"
     },
     "SEARCH": {
         "SEARCH_PLACEHOLDER": "Cluster suchen...",
         "SEARCH": "Suche",
-        "NODE": "Knoten",
+        "NODES": "Knoten",
         "PODS": "Pods",
         "SERVICES": "Dienste",
         "DEPLOYMENTS": "Bereitstellungen",

diff --git a/App/Frontend/src/assets/i18n/en.json b/App/Frontend/src/assets/i18n/en.json
@@ -21,15 +21,14 @@
         "LOGIN_BUTTON": "Log in"
     },
     "DASHBOARD": {
-        "NODES": "Nodes",
         "CPU": "CPU Usage",
         "RAM": "RAM Usage",
         "DISK": "Disk Usage"
     },
     "SEARCH": {
         "SEARCH_PLACEHOLDER": "Search Cluster...",
         "SEARCH": "Search",
-        "NODE": "Node",
+        "NODES": "Node",
         "PODS": "Pods",
         "SERVICES": "Services",
         "DEPLOYMENTS": "Deployments",

diff --git a/App/Frontend/src/assets/i18n/fr.json b/App/Frontend/src/assets/i18n/fr.json
@@ -21,15 +21,14 @@
         "LOGIN_BUTTON": "Se connecter"
     },
     "DASHBOARD": {
-        "NODES": "Nœuds",
         "CPU": "Utilisation du CPU",
         "RAM": "Utilisation de la RAM",
         "DISK": "Utilisation du disque"
     },
     "SEARCH": {
         "SEARCH_PLACEHOLDER": "Rechercher un cluster...",
         "SEARCH": "Rechercher",
-        "NODE": "Nœud",
+        "NODES": "Nœud",
         "PODS": "Pods",
         "SERVICES": "Services",
         "DEPLOYMENTS": "Déploiements",

diff --git a/App/Frontend/src/assets/i18n/nl.json b/App/Frontend/src/assets/i18n/nl.json
@@ -21,15 +21,14 @@
         "LOGIN_BUTTON": "Inloggen"
     },
     "DASHBOARD": {
-        "NODES": "Knooppunten",
         "CPU": "CPU-gebruik",
         "RAM": "RAM-gebruik",
         "DISK": "Schijfgebruik"
     },
     "SEARCH": {
         "SEARCH_PLACEHOLDER": "Zoek Cluster...",
         "SEARCH": "Zoek",
-        "NODE": "Knooppunt",
+        "NODES": "Knooppunt",
         "PODS": "Pods",
         "SERVICES": "Diensten",
         "DEPLOYMENTS": "Deployments",

diff --git a/App/Frontend/src/assets/i18n/tlh.json b/App/Frontend/src/assets/i18n/tlh.json
@@ -21,15 +21,14 @@
         "LOGIN_BUTTON": "'el"
     },
     "DASHBOARD": {
-        "NODES": "tetlh",
         "CPU": "Qapchu' lo'",
         "RAM": "qawHaq lo'",
         "DISK": "naw' lo'"
     },
     "SEARCH": {
         "SEARCH_PLACEHOLDER": "nej yugh...",
         "SEARCH": "nej",
-        "NODE": "tetlh",
+        "NODES": "tetlh",
         "PODS": "pa'mey",
         "SERVICES": "vummeH mIw",
         "DEPLOYMENTS": "lanchu'ghach",

diff --git a/App/Frontend/src/assets/i18n/zh.json b/App/Frontend/src/assets/i18n/zh.json
@@ -21,15 +21,14 @@
         "LOGIN_BUTTON": "登录"
     },
     "DASHBOARD": {
-        "NODES": "节点",
         "CPU": "中央处理器 使用率",
         "RAM": "内存使用率",
         "DISK": "磁盘使用率"
     },
     "SEARCH": {
         "SEARCH_PLACEHOLDER": "搜索集群...",
         "SEARCH": "搜索",
-        "NODE": "节点",
+        "NODES": "节点",
         "PODS": "容器组",
         "SERVICES": "服务",
         "DEPLOYMENTS": "部署",