Merge branch 'main' of https://github.com/EliasDeHondt/K10s into webs…

…ockets # Conflicts: # App/Backend/cmd/main.go # App/Frontend/src/app/dashboard/dashboard.component.html # App/Frontend/src/app/dashboard/dashboard.component.ts
EliasDeHondt · Feb 27, 2025 · e19a684 · e19a684
2 parents 8cc8711 + 6cef251
commit e19a684
Show file tree

Hide file tree

Showing 35 changed files with 439 additions and 237 deletions.
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
@@ -2,6 +2,5 @@
 # @author K10s Open Source Team #
 # @since 01/01/2025             #
 #################################
-
-#github: [eliasdehondt, meastro85, vw03]
+github: [eliasdehondt]
 patreon: K10s
diff --git a/App/Backend/cmd/auth/AuthHandlers.go b/App/Backend/cmd/auth/AuthHandlers.go
@@ -66,7 +66,7 @@ func IsLoggedIn(ctx *gin.Context) {
 	})
 
 	if err != nil || !token.Valid {
-		ctx.AbortWithStatusJSON(http.StatusUnauthorized, gin.H{"error": "Invalid token"})
+		ctx.JSON(http.StatusOK, false)
 		return
 	}
 

diff --git a/App/Backend/cmd/kubernetes/Client.go b/App/Backend/cmd/kubernetes/Client.go
@@ -297,6 +297,7 @@ func (client *Client) GetTotalUsage() (*Metrics, error) {
 		totalCpu += node.Status.Capacity.Cpu().MilliValue()
 		totalMem += node.Status.Capacity.Memory().Value()
 		totalDisk += node.Status.Capacity.Storage().Value()
+		totalDisk += node.Status.Capacity.StorageEphemeral().Value()
 
 		nodeMetrics, err := client.MetricsClient.MetricsV1beta1().NodeMetricses().Get(ctx, node.Name, metav1.GetOptions{})
 		if err != nil {
@@ -306,6 +307,7 @@ func (client *Client) GetTotalUsage() (*Metrics, error) {
 		totalCpuUsage += nodeMetrics.Usage.Cpu().MilliValue()
 		totalMemUsage += nodeMetrics.Usage.Memory().Value()
 		totalDiskUsage += nodeMetrics.Usage.Storage().Value()
+		totalDiskUsage += nodeMetrics.Usage.StorageEphemeral().Value()
 	}
 
 	cpuUsagePercent := float64(totalCpuUsage) / float64(totalCpu) * 100

diff --git a/App/Backend/cmd/kubernetes/handlers/GetStats.go b/App/Backend/cmd/kubernetes/handlers/GetStats.go
@@ -5,6 +5,7 @@
 package handlers
 
 import (
+	"fmt"
 	"github.com/gin-gonic/gin"
 	"net/http"
 )
@@ -21,6 +22,7 @@ func GetStatsHandler(ctx *gin.Context) {
 func GetTotalStats(ctx *gin.Context) {
 	metrics, err := c.GetTotalUsage()
 	if err != nil {
+		fmt.Printf("GetTotalStats err: %v\n", err)
 		ctx.JSON(http.StatusInternalServerError, gin.H{"error": "An error has occurred or the request has been timed out."})
 		return
 	}
@@ -30,8 +32,9 @@ func GetTotalStats(ctx *gin.Context) {
 func GetStatsForNode(ctx *gin.Context, name string) {
 	metrics, err := c.GetUsageForNode(name)
 	if err != nil {
+		fmt.Printf("GetStatsForNode err: %v\n", err)
 		ctx.JSON(http.StatusInternalServerError, gin.H{"error": "An error has occurred or the request has been timed out."})
 		return
 	}
 	ctx.JSON(http.StatusOK, metrics)
-}
+}
diff --git a/App/Backend/cmd/kubernetes/handlers/util.go b/App/Backend/cmd/kubernetes/handlers/util.go
@@ -43,7 +43,18 @@ func GetFrontendIP() string {
 	}
 
 	if len(svc.Status.LoadBalancer.Ingress) > 0 {
-		return svc.Status.LoadBalancer.Ingress[0].IP
+
+		protocol := "http"
+		if svc.Status.LoadBalancer.Ingress[0].Hostname != "" {
+			protocol = "https"
+		}
+
+		url := protocol + "://" + svc.Status.LoadBalancer.Ingress[0].IP
+		if svc.Spec.Ports[0].Port != 80 && svc.Spec.Ports[0].Port != 443 {
+			url += ":" + strconv.Itoa(int(svc.Spec.Ports[0].Port))
+		}
+
+		return url
 	}
 
 	return "http://localhost:4200"

diff --git a/App/Backend/cmd/main.go b/App/Backend/cmd/main.go
@@ -15,11 +15,22 @@ import (
 var frontendUrl = handlers.GetFrontendIP()
 
 func main() {
-
 	frontendUrl = handlers.GetFrontendIP()
+    trustedProxies := []string{"10.0.0.0/8"}
+
+	if frontendUrl == "http://localhost:4200" {
+		gin.SetMode(gin.DebugMode)
+	} else {
+		gin.SetMode(gin.ReleaseMode)
+	}
 
 	r := gin.Default()
 
+	err := r.SetTrustedProxies(trustedProxies)
+	if err != nil {
+		panic(err)
+	}
+
 	r.Use(cors.New(cors.Config{
 		AllowOrigins:     []string{frontendUrl},
 		AllowMethods:     []string{"GET", "POST", "PUT", "DELETE", "OPTIONS"},
@@ -30,11 +41,11 @@ func main() {
 	}))
 
 	auth.Init()
-	r.POST("/login", auth.HandleLogin)
-	r.GET("/logout", auth.HandleLogout)
-	r.GET("/isloggedin", auth.IsLoggedIn)
+	r.POST("/api/login", auth.HandleLogin)
+	r.GET("/api/logout", auth.HandleLogout)
+	r.GET("/api/isloggedin", auth.IsLoggedIn)
 
-	secured := r.Group("/secured")
+	secured := r.Group("/api/secured")
 	secured.Use(auth.AuthMiddleware())
 	secured.GET("/table", handlers.GetTableHandler)
 	secured.GET("/nodes", handlers.GetNodesHandler)
@@ -49,7 +60,7 @@ func main() {
 	secured.GET("/nodenames", handlers.GetNodeNamesHandler)
 	secured.GET("/statsocket", handlers.HandleMetricsSocket)
 
-	err := r.Run(":8080")
+	err = r.Run(":8082")
 	if err != nil {
 		panic(err)
 	}

diff --git a/App/Frontend/angular.json b/App/Frontend/angular.json
@@ -28,7 +28,8 @@
               }
             ],
             "styles": [
-              "src/styles.css"
+              "src/styles.css",
+              "node_modules/prismjs/themes/prism.css"
             ],
             "scripts": []
           },

diff --git a/App/Frontend/src/app/add/add.component.html b/App/Frontend/src/app/add/add.component.html
@@ -9,7 +9,7 @@
         </button>
         <input #fileInput type="file" accept=".yaml,.yml" (change)="onFileUpload($event)" hidden>
     </header>
-<app-nav class="nav" id="nav"></app-nav>
+    <app-nav class="nav" id="nav"></app-nav>
     <main class="add-main">
         <section class="add-textarea-container">
             <button class="add-clear-button" (click)="clearTextarea()">✖</button>

diff --git a/App/Frontend/src/app/app.component.ts b/App/Frontend/src/app/app.component.ts
@@ -16,6 +16,7 @@ import { CommonModule } from '@angular/common';
     template: `<router-outlet></router-outlet>`,
     providers: [Title]
 })
+
 export class AppComponent {
     private router = inject(Router);
     private titleService = inject(Title);
@@ -29,7 +30,7 @@ export class AppComponent {
                     while (route.firstChild) {
                         route = route.firstChild;
                     }
-                    return route.snapshot.data['title'] || 'Standaard Titel';
+                    return route.snapshot.data['title'] || 'K10s';
                 })
             ).subscribe(title => {
                 this.titleService.setTitle(title);

diff --git a/App/Frontend/src/app/app.routes.ts b/App/Frontend/src/app/app.routes.ts
@@ -8,16 +8,16 @@ import { LoginComponent } from './login/login.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { SearchComponent } from './search/search.component';
 import { AddComponent } from "./add/add.component";
-import {SpiderWebComponent} from "./spider-web/spider-web.component";
+import { SpiderWebComponent } from "./spider-web/spider-web.component";
 import { NotFoundComponent } from './notfound/notfound.component';
-import {AuthGuard} from "./authGuard/auth.guard";
+import { AuthGuard } from "./authGuard/auth.guard";
 
 export const routes: Routes = [
     { path: '', redirectTo: 'login', pathMatch: 'full' },
     { path: 'login', component: LoginComponent, data: { title: 'K10s - Login' } },
     { path: 'dashboard', component: DashboardComponent, data: { title: 'K10s - Dashboard' }, canActivate: [AuthGuard] },
     { path: 'search', component: SearchComponent, data: { title: 'K10s - Search' }, canActivate: [AuthGuard] },
     { path: 'add', component: AddComponent, data: { title: 'K10s - Add' }, canActivate: [AuthGuard] },
-    { path: '**', component: NotFoundComponent, data: { title: 'K10s - Not Found' } },
     { path: 'spiderweb', component: SpiderWebComponent, data: { title: 'K10s - Testing' }, canActivate: [AuthGuard] },
+    { path: '**', component: NotFoundComponent, data: { title: 'K10s - Not Found' } },
 ];
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,13 +60,23 @@
     padding: 0;
 }
 
-#dashboard-header-4 {
-    margin: 10%;
-    padding: 20%;
+.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;
-    margin-left: -2.5rem;
+
+.dashboard-header-1,
+.dashboard-header-2 {
+    margin-top: 0;
+}
+
+.dashboard-header-3 {
+    margin-top: 5%;
 }
 
 .progress-container {
@@ -80,17 +88,15 @@
     box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
     margin-left: 0.5rem;
 }
-.progress-text {
-    margin-left: 1rem;
-}
+
 .progress-bar {
     height: 100%;
     box-sizing: border-box;
     transition: width 0.5s ease-in-out;
 }
 
 .dashboard-header-article p {
-    padding-left: 4.5rem !important;
+    align-self: center;
 }
 /* Dashboard Header */
 
@@ -154,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;
     }
 }
 
@@ -175,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
@@ -1,37 +1,31 @@
 <!--Author K10s Open Source Team-->
 <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">
+    <header class="dashboard-header">
+        <section class="dashboard-header-section1">
+            <article class="dashboard-header-article">
+                <h2>{{ 'DASHBOARD.CPU' | translate }}</h2>
+                <span class="dashboard-header-1">
                     <ngx-charts-gauge
-                            [view]="[450, 200]"
-                            [min]="0"
-                            [results]="cpuChartData"
-                            [max]="100"
-                            [angleSpan]="180"
-                            [startAngle]="-90"
-                            [valueFormatting]="valueFormatting"
-                            [showAxis]="false"
-                            [legend]="false"
-                            [scheme]="colorSchemeCpu">
+                    [view]="[500, 250]"
+                    [min]="0"
+                    [results]="cpuChartData"
+                    [max]="100"
+                    [angleSpan]="180"
+                    [startAngle]="-90"
+                    [valueFormatting]="valueFormatting"
+                    [showAxis]="false"
+                    [legend]="false"
+                    [scheme]="colorSchemeCpu">
                     </ngx-charts-gauge>
                 </span>
-        </article>
-    </section>
-    <section class="dashboard-header-section3">
-        <article class="dashboard-header-article">
-            <h2>{{ 'DASHBOARD.RAM' | translate }}</h2>
-            <span id="dashboard-header-3">
+            </article>
+        </section>
+        <section class="dashboard-header-section2">
+            <article class="dashboard-header-article">
+                <h2>{{ 'DASHBOARD.RAM' | translate }}</h2>
+                    <span class="dashboard-header-2">
                     <ngx-charts-gauge
-                            [view]="[450, 200]"
+                            [view]="[500, 250]"
                             [min]="0"
                             [results]="memoryChartData"
                             [max]="100"
@@ -43,12 +37,12 @@ <h2>{{ 'DASHBOARD.RAM' | translate }}</h2>
                             [scheme]="colorScheme">
                     </ngx-charts-gauge>
                 </span>
-        </article>
-    </section>
-    <section class="dashboard-header-section4">
-        <article class="dashboard-header-article">
-            <h2>{{ 'DASHBOARD.DISK' | translate }}</h2>
-            <span id="dashboard-header-4">
+            </article>
+        </section>
+        <section class="dashboard-header-section3">
+            <article class="dashboard-header-article">
+                <h2>{{ 'DASHBOARD.DISK' | translate }}</h2>
+                <span class="dashboard-header-3">
                     <div class="progress-container">
                         <div class="progress-bar" [style.width.%]="diskUsagePercentage"
                              [style.background-color]="diskColor"></div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -66,7 +66,7 @@ func IsLoggedIn(ctx *gin.Context) { @@
     	})
     	if err != nil || !token.Valid {
-    		ctx.AbortWithStatusJSON(http.StatusUnauthorized, gin.H{"error": "Invalid token"})
+    		ctx.JSON(http.StatusOK, false)
     		return
     	}
@@ Expand Down @@