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

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

@@ -110,101 +110,90 @@ interface SparkProject {
             </button>
           </div>
 
-          @if (loading) {
-            <div class="loading-indicator">
-              <mat-spinner diameter="40"></mat-spinner>
-              <p>Processing request...</p>
-            </div>
-          }
+          <div class="loading-indicator" *ngIf="loading">
+            <mat-spinner diameter="40"></mat-spinner>
+            <p>Processing request...</p>
+          </div>
 
-          @if (responses.length > 0) {
+          <ng-container *ngIf="responses.length > 0">
             <mat-divider class="section-divider"></mat-divider>
             
             <h3>Response History</h3>
             
             <div class="response-list">
-              @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>
-              }
+              <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>
             </div>
-          }
+          </ng-container>
         </mat-card-content>
       </mat-card>
     </div>
@@ -543,4 +532,8 @@ export class SparkComponent implements OnInit {
         return '';
     }
   }
+
+  trackByTimestamp(index: number, response: SparkResponse): Date {
+    return response.timestamp;
+  }
 }