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

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

@@ -1,210 +1,269 @@
-import { Component, inject, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { ApiService, Environment } from '../../services/api.service';
-
-@Component({
-  selector: 'app-environment',
-  standalone: true,
-  imports: [CommonModule, FormsModule],
-  template: `
-    <div class="environment-container">
-      <h2>Environment Configuration</h2>
-
-      <div class="card">
-        <div class="card-body">
-          <form (ngSubmit)="save()" #envForm="ngForm">
-            <div class="form-group">
-              <label for="workMode">Work Mode *</label>
-              <select
-                id="workMode"
-                name="workMode"
-                [(ngModel)]="environment.work_mode"
-                (change)="onWorkModeChange()"
-                required
-                [disabled]="loading"
-              >
-                <option value="hfcloud">HF Cloud</option>
-                <option value="cloud">Cloud</option>
-                <option value="on-premise">On-Premise</option>
-              </select>
-            </div>
-
-            <div class="form-group">
-              <label for="cloudToken">Cloud Token</label>
-              <input
-                type="password"
-                id="cloudToken"
-                name="cloudToken"
-                [(ngModel)]="environment.cloud_token"
-                [disabled]="loading || environment.work_mode === 'on-premise'"
-                placeholder="Enter cloud token"
-              >
-              <small class="text-muted">Required for HF Cloud and Cloud modes</small>
-            </div>
-
-            <div class="form-group">
-              <label for="sparkEndpoint">Spark Endpoint *</label>
-              <div class="input-with-button">
-                <input
-                  type="url"
-                  id="sparkEndpoint"
-                  name="sparkEndpoint"
-                  [(ngModel)]="environment.spark_endpoint"
-                  required
-                  [disabled]="loading"
-                  placeholder="https://spark-service.example.com"
-                >
-                <button
-                  type="button"
-                  class="btn btn-secondary"
-                  (click)="testConnection()"
-                  [disabled]="loading || !environment.spark_endpoint"
-                >
-                  Test Connection
-                </button>
-              </div>
-            </div>
-
-            @if (message) {
-              <div class="alert" [class.alert-success]="!isError" [class.alert-danger]="isError">
-                {{ message }}
-              </div>
-            }
-
-            <div class="form-actions">
-              <button
-                type="submit"
-                class="btn btn-primary"
-                [disabled]="loading || !envForm.valid"
-              >
-                @if (saving) {
-                  <span class="spinner"></span> Saving...
-                } @else {
-                  Save
-                }
-              </button>
-              <button
-                type="button"
-                class="btn btn-secondary"
-                (click)="reloadFromSpark()"
-                [disabled]="loading"
-              >
-                Reload from Spark
-              </button>
-            </div>
-          </form>
-        </div>
-      </div>
-    </div>
-  `,
-  styles: [`
-    .environment-container {
-      h2 {
-        margin-bottom: 1.5rem;
-      }
-    }
-
-    .input-with-button {
-      display: flex;
-      gap: 0.5rem;
-
-      input {
-        flex: 1;
-      }
-    }
-
-    .form-actions {
-      display: flex;
-      gap: 0.5rem;
-      margin-top: 1.5rem;
-    }
-
-    .text-muted {
-      color: #6c757d;
-      font-size: 0.875rem;
-    }
-  `]
-})
-export class EnvironmentComponent implements OnInit {
-  private apiService = inject(ApiService);
-
-  environment: Environment = {
-    work_mode: 'hfcloud',
-    cloud_token: '',
-    spark_endpoint: ''
-  };
-
-  loading = true;
-  saving = false;
-  message = '';
-  isError = false;
-
-  ngOnInit() {
-    this.loadEnvironment();
-  }
-
-  loadEnvironment() {
-    this.loading = true;
-    this.apiService.getEnvironment().subscribe({
-      next: (env) => {
-        this.environment = env;
-        this.loading = false;
-      },
-      error: (err) => {
-        this.showMessage('Failed to load environment configuration', true);
-        this.loading = false;
-      }
-    });
-  }
-
-  onWorkModeChange() {
-    if (this.environment.work_mode === 'on-premise') {
-      this.environment.cloud_token = '';
-    }
-  }
-
-  save() {
-    this.saving = true;
-    this.message = '';
-
-    this.apiService.updateEnvironment(this.environment).subscribe({
-      next: () => {
-        this.showMessage('Environment configuration saved successfully', false);
-        this.saving = false;
-      },
-      error: (err) => {
-        this.showMessage(err.error?.detail || 'Failed to save configuration', true);
-        this.saving = false;
-      }
-    });
-  }
-
-  testConnection() {
-    // TODO: Implement connection test
-    this.showMessage('Testing connection to Spark endpoint...', false);
-    setTimeout(() => {
-      this.showMessage('Connection successful!', false);
-    }, 1000);
-  }
-
-  reloadFromSpark() {
-    // TODO: Implement reload from Spark
-    this.showMessage('Reloading configuration from Spark...', false);
-    setTimeout(() => {
-      this.loadEnvironment();
-      this.showMessage('Configuration reloaded', false);
-    }, 1000);
-  }
-
-  private showMessage(message: string, isError: boolean) {
-    this.message = message;
-    this.isError = isError;
-
-    if (!isError) {
-      setTimeout(() => {
-        this.message = '';
-      }, 5000);
-    }
-  }
+import { Component, inject, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatCardModule } from '@angular/material/card';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
+import { ApiService, Environment } from '../../services/api.service';
+
+@Component({
+  selector: 'app-environment',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatCardModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
+    MatButtonModule,
+    MatIconModule,
+    MatProgressSpinnerModule,
+    MatSnackBarModule
+  ],
+  template: `
+    <div class="environment-container">
+      <mat-card>
+        <mat-card-header>
+          <mat-card-title>
+            <mat-icon>settings</mat-icon>
+            Environment Configuration
+          </mat-card-title>
+        </mat-card-header>
+        
+        <mat-card-content>
+          <form (ngSubmit)="save()" #envForm="ngForm">
+            <mat-form-field appearance="outline" class="full-width">
+              <mat-label>Work Mode</mat-label>
+              <mat-select
+                name="workMode"
+                [(ngModel)]="environment.work_mode"
+                (selectionChange)="onWorkModeChange()"
+                required
+                [disabled]="loading"
+              >
+                <mat-option value="hfcloud">HF Cloud</mat-option>
+                <mat-option value="cloud">Cloud</mat-option>
+                <mat-option value="on-premise">On-Premise</mat-option>
+              </mat-select>
+              <mat-icon matPrefix>cloud</mat-icon>
+            </mat-form-field>
+
+            <mat-form-field appearance="outline" class="full-width">
+              <mat-label>Cloud Token</mat-label>
+              <input
+                matInput
+                type="password"
+                name="cloudToken"
+                [(ngModel)]="environment.cloud_token"
+                [disabled]="loading || environment.work_mode === 'on-premise'"
+                placeholder="Enter cloud token"
+              >
+              <mat-icon matPrefix>vpn_key</mat-icon>
+              <mat-hint>Required for HF Cloud and Cloud modes</mat-hint>
+            </mat-form-field>
+
+            <mat-form-field appearance="outline" class="full-width">
+              <mat-label>Spark Endpoint</mat-label>
+              <input
+                matInput
+                type="url"
+                name="sparkEndpoint"
+                [(ngModel)]="environment.spark_endpoint"
+                required
+                [disabled]="loading"
+                placeholder="https://spark-service.example.com"
+              >
+              <mat-icon matPrefix>link</mat-icon>
+              <button
+                mat-icon-button
+                matSuffix
+                type="button"
+                (click)="testConnection()"
+                [disabled]="loading || !environment.spark_endpoint"
+                matTooltip="Test Connection"
+              >
+                <mat-icon>wifi_tethering</mat-icon>
+              </button>
+            </mat-form-field>
+
+            <div class="form-actions">
+              <button
+                mat-raised-button
+                color="primary"
+                type="submit"
+                [disabled]="loading || !envForm.valid || saving"
+              >
+                @if (saving) {
+                  <mat-spinner diameter="20"></mat-spinner>
+                  Saving...
+                } @else {
+                  <mat-icon>save</mat-icon>
+                  Save
+                }
+              </button>
+              
+              <button
+                mat-raised-button
+                type="button"
+                (click)="reloadFromSpark()"
+                [disabled]="loading"
+              >
+                <mat-icon>refresh</mat-icon>
+                Reload from Spark
+              </button>
+            </div>
+          </form>
+        </mat-card-content>
+      </mat-card>
+    </div>
+  `,
+  styles: [`
+    .environment-container {
+      max-width: 800px;
+      margin: 0 auto;
+    }
+
+    mat-card-header {
+      margin-bottom: 24px;
+
+      mat-card-title {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 24px;
+
+        mat-icon {
+          font-size: 28px;
+          width: 28px;
+          height: 28px;
+        }
+      }
+    }
+
+    .full-width {
+      width: 100%;
+      margin-bottom: 20px;
+    }
+
+    .form-actions {
+      display: flex;
+      gap: 16px;
+      margin-top: 24px;
+      padding-top: 24px;
+      border-top: 1px solid #e0e0e0;
+
+      button {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        mat-spinner {
+          margin-right: 8px;
+        }
+      }
+    }
+
+    ::ng-deep {
+      .mat-mdc-form-field-icon-prefix {
+        padding-right: 12px;
+      }
+
+      .mat-mdc-progress-spinner {
+        --mdc-circular-progress-active-indicator-color: white;
+      }
+    }
+  `]
+})
+export class EnvironmentComponent implements OnInit {
+  private apiService = inject(ApiService);
+  private snackBar = inject(MatSnackBar);
+
+  environment: Environment = {
+    work_mode: 'hfcloud',
+    cloud_token: '',
+    spark_endpoint: ''
+  };
+
+  loading = true;
+  saving = false;
+
+  ngOnInit() {
+    this.loadEnvironment();
+  }
+
+  loadEnvironment() {
+    this.loading = true;
+    this.apiService.getEnvironment().subscribe({
+      next: (env) => {
+        this.environment = env;
+        this.loading = false;
+      },
+      error: (err) => {
+        this.snackBar.open('Failed to load environment configuration', 'Close', {
+          duration: 5000,
+          panelClass: 'error-snackbar'
+        });
+        this.loading = false;
+      }
+    });
+  }
+
+  onWorkModeChange() {
+    if (this.environment.work_mode === 'on-premise') {
+      this.environment.cloud_token = '';
+    }
+  }
+
+  save() {
+    this.saving = true;
+
+    this.apiService.updateEnvironment(this.environment).subscribe({
+      next: () => {
+        this.snackBar.open('Environment configuration saved successfully', 'Close', {
+          duration: 3000
+        });
+        this.saving = false;
+      },
+      error: (err) => {
+        this.snackBar.open(
+          err.error?.detail || 'Failed to save configuration', 
+          'Close', 
+          { duration: 5000, panelClass: 'error-snackbar' }
+        );
+        this.saving = false;
+      }
+    });
+  }
+
+  testConnection() {
+    this.snackBar.open('Testing connection to Spark endpoint...', undefined, {
+      duration: 2000
+    });
+    
+    // TODO: Implement actual connection test
+    setTimeout(() => {
+      this.snackBar.open('Connection successful!', 'Close', {
+        duration: 3000
+      });
+    }, 2000);
+  }
+
+  reloadFromSpark() {
+    this.snackBar.open('Reloading configuration from Spark...', undefined, {
+      duration: 2000
+    });
+    
+    setTimeout(() => {
+      this.loadEnvironment();
+      this.snackBar.open('Configuration reloaded', 'Close', {
+        duration: 3000
+      });
+    }, 1000);
+  }
 }