Fixes to the dashboard:

-> Fixed the reload of the page. -> Split ingredients/events on the instances tab to make it work with bigger ingredients/names. -> Moved the errors of a recipe to its own tab to make the recipe overview useable with big errors.
ing-bank · Oct 17, 2024 · 85dc107 · 85dc107
1 parent 158a294
commit 85dc107
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 13 deletions.
diff --git a/http/baker-http-dashboard/README.md b/http/baker-http-dashboard/README.md
@@ -6,7 +6,7 @@ This project has been tested to work on v18.2.0 (npm v8.9.0).
 
 ## Prerequisites:
 - Install nvm (node version manager): `brew install nvm` 
-- Add it do console: `source $(brew --prefix nvm)/nvm.sh)`
+- Add it do console: `source $(brew --prefix nvm)/nvm.sh`
 - Install node `nvm install node`
 - Install project `npm install`
 - Link angular cli `npm link @angular/cli` (to solve `zsh: command not found: ng`)

diff --git a/http/baker-http-dashboard/src/app/instances/instances.component.html b/http/baker-http-dashboard/src/app/instances/instances.component.html
@@ -6,11 +6,10 @@
 </form>
 
 <mat-tab-group *ngIf="displayedInstanceId">
-  <mat-tab label="Events & ingredients">
-    <mat-grid-list cols="2" rowHeight="100%">
+  <mat-tab label="Events">
+    <mat-grid-list cols="1" rowHeight="95%">
       <mat-grid-tile colspan="1">
         <div class="text-inside-grid">
-          <p>Events</p>
           <cdk-virtual-scroll-viewport class="scroll-viewport" itemSize="50">
             <table mat-table [dataSource]="instanceEvents" class="mat-elevation-z8">
               <ng-container matColumnDef="timestamp">
@@ -29,21 +28,21 @@
           </cdk-virtual-scroll-viewport>
         </div>
       </mat-grid-tile>
+    </mat-grid-list>
+  </mat-tab>
+  <mat-tab label="ingredients">
+    <mat-grid-list cols="1" rowHeight="95%">
       <mat-grid-tile colspan="1">
         <div class="text-inside-grid">
-          <p>Ingredients</p>
           <cdk-virtual-scroll-viewport class="scroll-viewport" itemSize="50">
             <mat-accordion>
-              <mat-expansion-panel *ngFor="let ingredient of instanceIngredients" [hideToggle]="ingredient.isSimple">
+              <mat-expansion-panel *ngFor="let ingredient of instanceIngredients">
                 <mat-expansion-panel-header>
                   <mat-panel-title>
                     {{ingredient.name}}
                   </mat-panel-title>
-                  <mat-panel-description *ngIf="ingredient.isSimple">
-                    {{ingredient.value}}
-                  </mat-panel-description>
                 </mat-expansion-panel-header>
-                <pre class="ingredient-value-json" *ngIf="!ingredient.isSimple">{{ingredient.value}}</pre>
+                <pre class="ingredient-value-json">{{ingredient.value}}</pre>
               </mat-expansion-panel>
             </mat-accordion>
           </cdk-virtual-scroll-viewport>

diff --git a/http/baker-http-dashboard/src/app/recipes/recipes.component.html b/http/baker-http-dashboard/src/app/recipes/recipes.component.html
@@ -24,13 +24,14 @@
 
         <ng-container matColumnDef="errors">
           <th mat-header-cell *matHeaderCellDef>Recipe errors</th>
-          <td mat-cell *matCellDef="let recipe"> {{recipe.errors}} </td>
+          <td mat-cell *matCellDef="let recipe"> {{recipe.errors.length > 0}} </td>
         </ng-container>
 
         <ng-container matColumnDef="actions">
           <th mat-header-cell *matHeaderCellDef>Actions</th>
           <td mat-cell *matCellDef="let recipe">
             <button mat-raised-button color="primary" (click)="viewRecipe(recipe.recipeId, recipe.name)">Visualize</button>
+            <button mat-raised-button color="primary" (click)="viewErrors(recipe.recipeId, recipe.name, recipe.errors)">Errors</button>
             <button mat-raised-button color="primary" (click)="bakeRecipe(recipe.recipeId)">Bake</button>
           </td>
         </ng-container>
@@ -46,5 +47,12 @@
         <visualize-recipe [visual]="selectedRecipeGraph"></visualize-recipe>
       </ng-template>
     </mat-tab>
+    <mat-tab *ngIf="selectedRecipeErrors" [label]="selectedRecipeName + ' errors'">
+      <ng-template matTabContent>
+        <tr *ngFor="let error of selectedRecipeErrors">
+          <td>{{error}}</td>
+        </tr>
+      </ng-template>
+    </mat-tab>
   </mat-tab-group>
 </div>
diff --git a/http/baker-http-dashboard/src/app/recipes/recipes.component.ts b/http/baker-http-dashboard/src/app/recipes/recipes.component.ts
@@ -21,6 +21,7 @@ export class RecipesComponent implements OnInit {
     ];
 
     selectedRecipeGraph: string | null;
+    selectedRecipeErrors: string[] | null;
     selectedRecipeName: string | null;
     selectedTabIndex: number;
 
@@ -38,12 +39,20 @@ export class RecipesComponent implements OnInit {
 
     viewRecipe(recipeId: string, recipeName: string): void {
         this.bakeryService.getRecipeVisual(recipeId).subscribe(visual => {
+            this.selectedRecipeErrors = null;
             this.selectedRecipeGraph = visual;
             this.selectedRecipeName = recipeName;
             this.selectedTabIndex = 1;
         });
     }
 
+  viewErrors(recipeId: string, recipeName: string, recipeErrors: string[]): void {
+      this.selectedRecipeErrors = recipeErrors;
+      this.selectedRecipeGraph = null;
+      this.selectedRecipeName = recipeName;
+      this.selectedTabIndex = 1;
+  }
+
     bakeRecipe(recipeId: string): void {
         const instanceId = this.randomId(8)
         this.bakeryService.postBake(instanceId, recipeId).subscribe(() => {

diff --git a/...ker-http-server/src/main/scala/com/ing/baker/http/server/scaladsl/Http4sBakerServer.scala b/...ker-http-server/src/main/scala/com/ing/baker/http/server/scaladsl/Http4sBakerServer.scala
@@ -128,8 +128,11 @@ object Http4sBakerServer extends LazyLogging {
             `Content-Length`.unsafeFromLong(bodyText.length)
           )
         ))
-      case req if req.method == GET && Dashboard.indexPattern.matches(req.pathInfo.toRelative.renderString) => dashboardFile(req, blocker, "index.html").getOrElseF(NotFound())
-      case req if req.method == GET && Dashboard.files.contains(req.pathInfo.toRelative.renderString) => dashboardFile(req, blocker, req.pathInfo.toRelative.renderString).getOrElseF(NotFound())
+      case req if req.method == GET && req.pathInfo.renderString.matches(Dashboard.indexPattern.regex) =>
+        dashboardFile(req, blocker, "index.html").getOrElseF(NotFound())
+
+      case req if req.method == GET && Dashboard.files.contains(req.pathInfo.toRelative.renderString) =>
+        dashboardFile(req, blocker, req.pathInfo.renderString).getOrElseF(NotFound())
     }
 
   private def dashboardFile(request: Request[IO], blocker: Blocker, filename: String)