Update flare-ui/src/app/components/spark/spark.component.ts

flare-ui/src/app/components/spark/spark.component.ts

@@ -110,90 +110,101 @@ interface SparkProject {
             </button>
           </div>
 
-          <div class="loading-indicator" *ngIf="loading">
-            <mat-spinner diameter="40"></mat-spinner>
-            <p>Processing request...</p>
-          </div>
+          @if (loading) {
+            <div class="loading-indicator">
+              <mat-spinner diameter="40"></mat-spinner>
+              <p>Processing request...</p>
+            </div>
+          }
 
-          <ng-container *ngIf="responses.length > 0">
+          @if (responses.length > 0) {
             <mat-divider class="section-divider"></mat-divider>
             
             <h3>Response History</h3>
             
             <div class="response-list">
-              <mat-expansion-panel *ngFor="let response of responses; let i = index; trackBy: trackByTimestamp" 
-                                   [expanded]="i === 0">
-                <mat-expansion-panel-header>
-                  <mat-panel-title>
-                    <mat-chip [class]="response.error ? 'error-chip' : 'success-chip'">
-                      {{ response.type }}
-                    </mat-chip>
-                    <span class="timestamp">{{ response.timestamp | date:'HH:mm:ss' }}</span>
-                  </mat-panel-title>
-                </mat-expansion-panel-header>
-
-                <div class="response-section" *ngIf="response.request">
-                  <h4>Request:</h4>
-                  <pre class="json-display">{{ response.request | json }}</pre>
-                </div>
-
-                <div class="response-section" *ngIf="response.response">
-                  <h4>Response:</h4>
-                  <table mat-table [dataSource]="response.response.projects" class="projects-table"
-                         *ngIf="response.type === 'Get Project Status' && response.response.projects">
-                    <ng-container matColumnDef="project_name">
-                      <th mat-header-cell *matHeaderCellDef>Project</th>
-                      <td mat-cell *matCellDef="let project">{{ project.project_name }}</td>
-                    </ng-container>
-
-                    <ng-container matColumnDef="version">
-                      <th mat-header-cell *matHeaderCellDef>Version</th>
-                      <td mat-cell *matCellDef="let project">v{{ project.version }}</td>
-                    </ng-container>
-
-                    <ng-container matColumnDef="status">
-                      <th mat-header-cell *matHeaderCellDef>Status</th>
-                      <td mat-cell *matCellDef="let project">
-                        <mat-chip [class]="getStatusClass(project.status)">
-                          {{ project.status }}
-                        </mat-chip>
-                      </td>
-                    </ng-container>
-
-                    <ng-container matColumnDef="enabled">
-                      <th mat-header-cell *matHeaderCellDef>Enabled</th>
-                      <td mat-cell *matCellDef="let project">
-                        <mat-icon [color]="project.enabled ? 'primary' : ''">
-                          {{ project.enabled ? 'check_circle' : 'cancel' }}
-                        </mat-icon>
-                      </td>
-                    </ng-container>
-
-                    <ng-container matColumnDef="base_model">
-                      <th mat-header-cell *matHeaderCellDef>Base Model</th>
-                      <td mat-cell *matCellDef="let project" class="model-cell">
-                        {{ project.base_model }}
-                      </td>
-                    </ng-container>
-
-                    <ng-container matColumnDef="last_accessed">
-                      <th mat-header-cell *matHeaderCellDef>Last Accessed</th>
-                      <td mat-cell *matCellDef="let project">{{ project.last_accessed }}</td>
-                    </ng-container>
-
-                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-                    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-                  </table>
-                  <pre class="json-display" *ngIf="!(response.type === 'Get Project Status' && response.response.projects)">{{ response.response | json }}</pre>
-                </div>
-
-                <div class="response-section error" *ngIf="response.error">
-                  <h4>Error:</h4>
-                  <pre class="json-display error-text">{{ response.error }}</pre>
-                </div>
-              </mat-expansion-panel>
+              @for (response of responses; track response.timestamp) {
+                <mat-expansion-panel [expanded]="$index === 0">
+                  <mat-expansion-panel-header>
+                    <mat-panel-title>
+                      <mat-chip [class]="response.error ? 'error-chip' : 'success-chip'">
+                        {{ response.type }}
+                      </mat-chip>
+                      <span class="timestamp">{{ response.timestamp | date:'HH:mm:ss' }}</span>
+                    </mat-panel-title>
+                  </mat-expansion-panel-header>
+
+                  @if (response.request) {
+                    <div class="response-section">
+                      <h4>Request:</h4>
+                      <pre class="json-display">{{ response.request | json }}</pre>
+                    </div>
+                  }
+
+                  @if (response.response) {
+                    <div class="response-section">
+                      <h4>Response:</h4>
+                      @if (response.type === 'Get Project Status' && response.response.projects) {
+                        <table mat-table [dataSource]="response.response.projects" class="projects-table">
+                          <ng-container matColumnDef="project_name">
+                            <th mat-header-cell *matHeaderCellDef>Project</th>
+                            <td mat-cell *matCellDef="let project">{{ project.project_name }}</td>
+                          </ng-container>
+
+                          <ng-container matColumnDef="version">
+                            <th mat-header-cell *matHeaderCellDef>Version</th>
+                            <td mat-cell *matCellDef="let project">v{{ project.version }}</td>
+                          </ng-container>
+
+                          <ng-container matColumnDef="status">
+                            <th mat-header-cell *matHeaderCellDef>Status</th>
+                            <td mat-cell *matCellDef="let project">
+                              <mat-chip [class]="getStatusClass(project.status)">
+                                {{ project.status }}
+                              </mat-chip>
+                            </td>
+                          </ng-container>
+
+                          <ng-container matColumnDef="enabled">
+                            <th mat-header-cell *matHeaderCellDef>Enabled</th>
+                            <td mat-cell *matCellDef="let project">
+                              <mat-icon [color]="project.enabled ? 'primary' : ''">
+                                {{ project.enabled ? 'check_circle' : 'cancel' }}
+                              </mat-icon>
+                            </td>
+                          </ng-container>
+
+                          <ng-container matColumnDef="base_model">
+                            <th mat-header-cell *matHeaderCellDef>Base Model</th>
+                            <td mat-cell *matCellDef="let project" class="model-cell">
+                              {{ project.base_model }}
+                            </td>
+                          </ng-container>
+
+                          <ng-container matColumnDef="last_accessed">
+                            <th mat-header-cell *matHeaderCellDef>Last Accessed</th>
+                            <td mat-cell *matCellDef="let project">{{ project.last_accessed }}</td>
+                          </ng-container>
+
+                          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+                        </table>
+                      } @else {
+                        <pre class="json-display">{{ response.response | json }}</pre>
+                      }
+                    </div>
+                  }
+
+                  @if (response.error) {
+                    <div class="response-section error">
+                      <h4>Error:</h4>
+                      <pre class="json-display error-text">{{ response.error }}</pre>
+                    </div>
+                  }
+                </mat-expansion-panel>
+              }
             </div>
-          </ng-container>
+          }
         </mat-card-content>
       </mat-card>
     </div>