feat: changes how to serve client app files

Farfetch · Jun 15, 2021 · c934899 · c934899
1 parent f13157a
commit c934899
Show file tree

Hide file tree

Showing 26 changed files with 309 additions and 284 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -34,6 +34,11 @@ jobs:
       with:
         dotnet-version: 3.1.403
 
+    - name: Use Node 14.x
+      uses: actions/setup-node@v1
+      with:
+        node-version: '14.x'
+
     - name: Build
       run: dotnet build ./src/KafkaFlow.sln -c Release
 

diff --git a/samples/KafkaFlow.Sample.Dashboard/Startup.cs b/samples/KafkaFlow.Sample.Dashboard/Startup.cs
@@ -31,7 +31,6 @@ public void ConfigureServices(IServiceCollection services)
             );
 
             services
-                .AddKafkaFlowDashboard()
                 .AddControllers();
         }
 

diff --git a/src/KafkaFlow.Admin.Dashboard/ApplicationBuilderExtensions.cs b/src/KafkaFlow.Admin.Dashboard/ApplicationBuilderExtensions.cs
@@ -1,6 +1,9 @@
 namespace KafkaFlow.Admin.Dashboard
 {
+    using System.Reflection;
     using Microsoft.AspNetCore.Builder;
+    using Microsoft.AspNetCore.Http;
+    using Microsoft.Extensions.FileProviders;
 
     /// <summary>
     /// Extension methods over IApplicationBuilder
@@ -14,8 +17,25 @@ public static class ApplicationBuilderExtensions
         /// <returns></returns>
         public static IApplicationBuilder UseKafkaFlowDashboard(this IApplicationBuilder app)
         {
-            app
-                .UseMiddleware<ServeClientFilesMiddleware>();
+            app.Map(
+                "/kafka-flow",
+                builder =>
+                {
+                    var provider = new ManifestEmbeddedFileProvider(
+                        Assembly.GetAssembly(typeof(ApplicationBuilderExtensions)),
+                        "ClientApp/dist");
+
+                    builder.UseStaticFiles(new StaticFileOptions { FileProvider = provider });
+
+                    builder.Run(
+                        async context =>
+                        {
+                            if (context.Request.Path == "/" || context.Request.Path == string.Empty)
+                            {
+                                await context.Response.SendFileAsync(provider.GetFileInfo("index.html"));
+                            }
+                        });
+                });
 
             return app;
         }

diff --git a/src/KafkaFlow.Admin.Dashboard/ClientApp/dist/index.html b/src/KafkaFlow.Admin.Dashboard/ClientApp/dist/index.html
@@ -6,9 +6,8 @@
   <base href="/kafka-flow/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
-  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
 <link rel="stylesheet" href="styles.css"></head>
 <body>
   <app-root></app-root>

diff --git a/src/KafkaFlow.Admin.Dashboard/ClientApp/dist/main.js b/src/KafkaFlow.Admin.Dashboard/ClientApp/dist/main.js
diff --git a/src/KafkaFlow.Admin.Dashboard/ClientApp/src/app/callback.pipe.ts b/src/KafkaFlow.Admin.Dashboard/ClientApp/src/app/callback.pipe.ts
@@ -9,6 +9,6 @@ export class CallbackPipe implements PipeTransform {
     if (!items || !callback) {
       return items;
     }
-    return items.filter(item => callback(item));
+    return items.filter((item: any) => callback(item));
   }
 }
diff --git a/src/KafkaFlow.Admin.Dashboard/ClientApp/src/app/consumer.service.ts b/src/KafkaFlow.Admin.Dashboard/ClientApp/src/app/consumer.service.ts
@@ -7,54 +7,54 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
 
 export class ConsumerService {
   private headers: HttpHeaders;
-  private accessPointUrl: string = '/kafka-flow/';
+  private accessPointUrl: string = '/kafka-flow';
 
   constructor(private http: HttpClient) {
     this.headers = new HttpHeaders({'Content-Type': 'application/json; charset=utf-8'});
   }
 
   public get() {
-    return this.http.get(this.accessPointUrl + 'groups', {headers: this.headers});
+    return this.http.get(this.accessPointUrl + '/telemetry', {headers: this.headers});
   }
 
   public updateWorkersCount(groupId: string, consumerName: string, workersCount: number) {
     return this.http.post<any>(
-        this.accessPointUrl +`groups/${groupId}/consumers/${consumerName}/change-worker-count`,
+        this.accessPointUrl +`/groups/${groupId}/consumers/${consumerName}/change-worker-count`,
         { workersCount: workersCount },
         {headers: this.headers});
   }
 
   public resetOffset(groupId: string, consumerName: string) {
     return this.http.post<any>(
-        this.accessPointUrl +`groups/${groupId}/consumers/${consumerName}/reset-offsets`,
+        this.accessPointUrl +`/groups/${groupId}/consumers/${consumerName}/reset-offsets`,
         { confirm: true },
         {headers: this.headers});
   }
 
   public pause(groupId: string, consumerName: string) {
     return this.http.post<any>(
-        this.accessPointUrl +`groups/${groupId}/consumers/${consumerName}/pause`,
+        this.accessPointUrl +`/groups/${groupId}/consumers/${consumerName}/pause`,
         null,
         {headers: this.headers});
   }
 
   public restart(groupId: string, consumerName: string) {
     return this.http.post<any>(
-        this.accessPointUrl +`groups/${groupId}/consumers/${consumerName}/restart`,
+        this.accessPointUrl +`/groups/${groupId}/consumers/${consumerName}/restart`,
         null,
         {headers: this.headers});
   }
 
   public resume(groupId: string, consumerName: string) {
     return this.http.post<any>(
-        this.accessPointUrl +`groups/${groupId}/consumers/${consumerName}/resume`,
+        this.accessPointUrl +`/groups/${groupId}/consumers/${consumerName}/resume`,
         null,
         {headers: this.headers});
   }
 
   public rewindOffset(groupId: string, consumerName: string, date: Date) {
     return this.http.post<any>(
-        this.accessPointUrl +`groups/${groupId}/consumers/${consumerName}/rewind-offsets-to-date`,
+        this.accessPointUrl +`/groups/${groupId}/consumers/${consumerName}/rewind-offsets-to-date`,
         { date: new Date(date.getTime() - (date.getTimezoneOffset() * 60000)).toISOString() },
         {headers: this.headers});
   }

diff --git a/src/KafkaFlow.Admin.Dashboard/ClientApp/src/app/consumer/consumer.component.html b/src/KafkaFlow.Admin.Dashboard/ClientApp/src/app/consumer/consumer.component.html
@@ -1,7 +1,7 @@
 <ngb-alert #successAlert *ngIf="successMessage" type="success" (closed)="successMessage=''">
   <div class="text-center"><b>Success! </b> <span class="text-center">{{successMessage}}</span></div>
 </ngb-alert>
-<div class="container" *ngFor="let group of groups | callback: removeReadonly">
+<div class="container" *ngFor="let group of enrichGroups(groups) | callback: removeReadonly">
   <div class="card my-3">
     <div class="card-body">
       <h3>Group Id: {{ group.groupId }}</h3>
@@ -27,7 +27,7 @@ <h4>Workers: {{consumer.workersCount}}</h4>
           <table class="table table-striped table-hover mt-1">
             <thead>
             <tr>
-              <th>Hostname - consumer instance</th>
+              <th>Consumer instance</th>
               <th>Partitions</th>
               <!--<th>Lag</th>-->
               <th>Status</th>
@@ -36,10 +36,10 @@ <h4>Workers: {{consumer.workersCount}}</h4>
             </tr>
             </thead>
             <tbody>
-            <ng-template let-partitionAssignment ngFor [ngForOf]="partitionAssignments.value | sort:'hostName'">
+            <ng-template let-partitionAssignment ngFor [ngForOf]="partitionAssignments.value | sort:'instanceName'">
               <ng-template [ngIf]="partitionAssignment.pausedPartitions?.length > 0">
                 <tr>
-                  <td class="text-left">{{partitionAssignment.hostName}}</td>
+                  <td class="text-left">{{partitionAssignment.instanceName}}</td>
                   <td class="text-left">{{partitionAssignment.pausedPartitions}}</td>
                   <!--<td class="text-left">0</td>-->
                   <td class="text-left">
@@ -57,7 +57,7 @@ <h4>Workers: {{consumer.workersCount}}</h4>
               </ng-template>
               <ng-template [ngIf]="partitionAssignment.runningPartitions?.length > 0">
                 <tr>
-                  <td class="text-left">{{partitionAssignment.hostName}}</td>
+                  <td class="text-left">{{partitionAssignment.instanceName}}</td>
                   <td class="text-left">{{partitionAssignment.runningPartitions}}</td>
                   <!--<td class="text-left">0</td>-->
                   <td class="text-left">

diff --git a/src/KafkaFlow.Admin.Dashboard/ClientApp/src/app/consumer/consumer.component.ts b/src/KafkaFlow.Admin.Dashboard/ClientApp/src/app/consumer/consumer.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { ConsumerService } from '../consumer.service'
-import { Subject } from 'rxjs';
+import {interval, Subject} from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 import { NgbModal, NgbAlert } from '@ng-bootstrap/ng-bootstrap';
 import { RewindModalComponent } from '../shared/rewind-modal/rewind-modal.component';
@@ -15,24 +15,48 @@ import { RestartModalComponent } from '../shared/restart-modal/restart-modal.com
   templateUrl: './consumer.component.html'
 })
 export class ConsumerComponent implements OnInit {
-  @Input() groups: Array<any> = [];
+  public groups: Array<any> = [];
   @ViewChild('successAlert', { static: false }) successAlert: NgbAlert | undefined;
   private successSubject = new Subject<string>();
   private delayMs = 1000;
   successMessage = '';
 
-  constructor(private modalService: NgbModal, private consumerService: ConsumerService) { }
+  constructor(private modalService: NgbModal, private consumerService: ConsumerService) {
+    interval(1000).subscribe(_ => consumerService.get().subscribe((data: any) => this.groups = this.enrichGroups(data)));
+  }
+
+  enrichGroups(groups: any) {
+    var self = this;
+    groups.forEach(function (g: any) {
+      g.consumers.forEach(function (c: any) {
+        c.status =
+          c.partitionAssignments.some((pa: any) => pa.runningPartitions?.length > 0 && self.isActive(pa.lastUpdate))  ?
+            "Running" :
+            c.partitionAssignments.some((pa: any) => pa.pausedPartitions?.length > 0 && self.isActive(pa.lastUpdate)) ?
+              "Paused" :
+              "Not Running";
+        c.partitionAssignments.forEach( (pa: any) => pa.isLost = !self.isActive(pa.lastUpdate)
+        )
+      })
+    });
+
+    return groups;
+  }
+
+  isActive(date: string) {
+    return Math.abs((new Date().getTime() - new Date(date).getTime())/1000) < 5;
+  }
 
   removeReadonly(group: any) {
-    return !(group.consumers.length == 1 && group.consumers[0].managementDisabled==1);
+    return !(group.consumers[0].managementDisabled==1);
   }
 
   openWorkersCountModal(groupId: string, consumerName: string, workersCount: number) {
     const modalRef = this.modalService.open(WorkersCountModalComponent);
     modalRef.componentInstance.groupId = groupId;
     modalRef.componentInstance.consumerName = consumerName;
     modalRef.componentInstance.workersCount = workersCount;
-    modalRef.result.then((result) => {
+    modalRef.result.then((result: number) => {
       this.consumerService
         .updateWorkersCount(groupId, consumerName, result)
         .subscribe({ next: _ => this.successSubject.next("The number of workers was updated successfully") })
@@ -43,7 +67,7 @@ export class ConsumerComponent implements OnInit {
     const modalRef = this.modalService.open(ResetModalComponent);
     modalRef.componentInstance.groupId = groupId;
     modalRef.componentInstance.consumerName = consumerName;
-    modalRef.result.then((result) => {
+    modalRef.result.then((_: any) => {
       this.consumerService
         .resetOffset(groupId, consumerName)
         .subscribe(_ => this.successSubject.next("The partition-offsets of your consumer were reseted successfully"));
@@ -54,7 +78,7 @@ export class ConsumerComponent implements OnInit {
     const modalRef = this.modalService.open(PauseModalComponent);
     modalRef.componentInstance.groupId = groupId;
     modalRef.componentInstance.consumerName = consumerName;
-    modalRef.result.then((result) => {
+    modalRef.result.then((_: any) => {
       this.consumerService
         .pause(groupId, consumerName)
         .subscribe(_ => this.successSubject.next("Your consumer was paused successfully"));
@@ -65,7 +89,7 @@ export class ConsumerComponent implements OnInit {
     const modalRef = this.modalService.open(RestartModalComponent);
     modalRef.componentInstance.groupId = groupId;
     modalRef.componentInstance.consumerName = consumerName;
-    modalRef.result.then((result) => {
+    modalRef.result.then((_: any) => {
       this.consumerService
         .restart(groupId, consumerName)
         .subscribe(_ =>this.successSubject.next("Your consumer was restarted successfully"));
@@ -76,7 +100,7 @@ export class ConsumerComponent implements OnInit {
     const modalRef = this.modalService.open(ResumeModalComponent);
     modalRef.componentInstance.groupId = groupId;
     modalRef.componentInstance.consumerName = consumerName;
-    modalRef.result.then((result) => {
+    modalRef.result.then((_: any) => {
       this.consumerService
         .resume(groupId, consumerName)
         .subscribe(_ => this.successSubject.next("Your consumer was resumed successfully"));
@@ -87,7 +111,7 @@ export class ConsumerComponent implements OnInit {
     const modalRef = this.modalService.open(RewindModalComponent);
     modalRef.componentInstance.consumerName = consumerName;
     modalRef.componentInstance.groupId = groupId;
-    modalRef.result.then((result) => {
+    modalRef.result.then((result: string) => {
       this.consumerService
         .rewindOffset(groupId, consumerName, new Date(result))
         .subscribe(_ => this.successSubject.next("The partition-offset of your consumer were rewinded successfully"));

diff --git a/src/KafkaFlow.Admin.Dashboard/ClientApp/src/app/home/home.component.html b/src/KafkaFlow.Admin.Dashboard/ClientApp/src/app/home/home.component.html
@@ -23,4 +23,4 @@
       </div>
     </div>
   </nav>
-<app-consumer [groups]="groups"></app-consumer>
+<app-consumer></app-consumer>
diff --git a/src/KafkaFlow.Admin.Dashboard/ClientApp/src/app/home/home.component.ts b/src/KafkaFlow.Admin.Dashboard/ClientApp/src/app/home/home.component.ts
@@ -1,41 +1,13 @@
 import { Component, OnInit } from '@angular/core';
-import { ConsumerService } from '../consumer.service'
-import {interval} from "rxjs";
 
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html'
 })
 export class HomeComponent implements OnInit {
-  public groups: Array<any> = [];
-  constructor (private consumerService: ConsumerService) {
-    interval(1000).subscribe(_ => consumerService.get().subscribe((data: any) => this.groups = this.buildCalculatedProperties(data)));
+  constructor () {
   }
 
-  buildCalculatedProperties(groups: any) {
-    var self = this;
-    groups.forEach(function (g: any) {
-      g.consumers.forEach(function (c: any) {
-        c.status =
-          c.partitionAssignments.some(function (pa: any){ return pa.runningPartitions?.length > 0 && self.isActive(pa.lastUpdate);})  ?
-            "Running" :
-            c.partitionAssignments.some(function (pa: any){ return pa.pausedPartitions?.length > 0 && self.isActive(pa.lastUpdate);}) ?
-              "Paused" :
-              "Not Running";
-        c.partitionAssignments.forEach(function (pa: any) {
-          pa.isLost = !self.isActive(pa.lastUpdate);
-        })
-      })
-    });
-
-    return groups;
-  }
-
-  isActive(date: string) {
-    return Math.abs((new Date().getTime() - new Date(date).getTime())/1000) < 5;
-  }
-
-  ngOnInit(): void {
-  }
+  ngOnInit(): void { }
 
 }
diff --git a/src/KafkaFlow.Admin.Dashboard/ClientApp/src/index.html b/src/KafkaFlow.Admin.Dashboard/ClientApp/src/index.html
@@ -6,9 +6,8 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
-  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
 </head>
 <body>
   <app-root></app-root>

diff --git a/src/KafkaFlow.Admin.Dashboard/KafkaFlow.Admin.Dashboard.csproj b/src/KafkaFlow.Admin.Dashboard/KafkaFlow.Admin.Dashboard.csproj
@@ -5,13 +5,19 @@
     <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
     <TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
     <IsPackable>true</IsPackable>
-    <OutputType>Library</OutputType>    
+    <OutputType>Library</OutputType>
+    <GenerateEmbeddedFilesManifest>true</GenerateEmbeddedFilesManifest>
+    <DefaultItemExcludes>ClientApp\node_modules\**</DefaultItemExcludes>
   </PropertyGroup>
 
   <ItemGroup>
     <EmbeddedResource Include="ClientApp\dist\*.html" />
     <EmbeddedResource Include="ClientApp\dist\*.css" />
     <EmbeddedResource Include="ClientApp\dist\*.js" />
   </ItemGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Microsoft.Extensions.FileProviders.Embedded" Version="3.1.16" />
+  </ItemGroup>
 
 </Project>
diff --git a/src/KafkaFlow.Admin.Dashboard/Properties/launchSettings.json b/src/KafkaFlow.Admin.Dashboard/Properties/launchSettings.json
-Original file line number
+Diff line change
@@ Expand Up / @@ -31,7 +31,6 @@ public void ConfigureServices(IServiceCollection services) @@
                 );
                 services
-                    .AddKafkaFlowDashboard()
                     .AddControllers();
             }
@@ Expand Down @@