116 lines
4.0 KiB
TypeScript
116 lines
4.0 KiB
TypeScript
import { Component, OnInit } from '@angular/core';
|
|
import { ActivatedRoute, Router } from '@angular/router';
|
|
import { HttpClient } from '@angular/common/http';
|
|
import { ConfigService } from '@services/config.service';
|
|
|
|
@Component({
|
|
selector: 'app-boot-server-dashboard',
|
|
template: `
|
|
<div class="dashboard-container">
|
|
<div class="header">
|
|
<button mat-icon-button (click)="goBack()" matTooltip="Volver a servidores">
|
|
<mat-icon>arrow_back</mat-icon>
|
|
</button>
|
|
<h1>Gestión de Servidor: {{ serverName }}</h1>
|
|
</div>
|
|
|
|
<mat-tab-group animationDuration="0ms" class="dashboard-tabs">
|
|
<mat-tab>
|
|
<ng-template mat-tab-label>
|
|
<mat-icon class="tab-icon">album</mat-icon>
|
|
<div class="tab-label-content">
|
|
<span class="tab-title">OgLives</span>
|
|
<span class="tab-subtitle">Versiones de OgLive disponibles</span>
|
|
</div>
|
|
</ng-template>
|
|
<div class="tab-content">
|
|
@if (serverUuid) {
|
|
<app-pxe-images [selectedServerId]="serverUuid"></app-pxe-images>
|
|
}
|
|
</div>
|
|
</mat-tab>
|
|
|
|
<mat-tab>
|
|
<ng-template mat-tab-label>
|
|
<mat-icon class="tab-icon">assignment</mat-icon>
|
|
<div class="tab-label-content">
|
|
<span class="tab-title">Plantillas PXE</span>
|
|
<span class="tab-subtitle">Configuraciones de arranque PXE</span>
|
|
</div>
|
|
</ng-template>
|
|
<div class="tab-content">
|
|
@if (serverUuid) {
|
|
<app-pxe [selectedServerId]="serverUuid"></app-pxe>
|
|
}
|
|
</div>
|
|
</mat-tab>
|
|
|
|
<mat-tab>
|
|
<ng-template mat-tab-label>
|
|
<mat-icon class="tab-icon">save</mat-icon>
|
|
<div class="tab-label-content">
|
|
<span class="tab-title">Arranque PXE</span>
|
|
<span class="tab-subtitle">Ficheros de arranque de clientes</span>
|
|
</div>
|
|
</ng-template>
|
|
<div class="tab-content">
|
|
@if (serverUuid) {
|
|
<app-pxe-boot-files [selectedServerId]="serverUuid"></app-pxe-boot-files>
|
|
}
|
|
</div>
|
|
</mat-tab>
|
|
</mat-tab-group>
|
|
</div>
|
|
`,
|
|
styles: [`
|
|
.dashboard-container { padding: 0; }
|
|
.header { display: flex; align-items: center; padding: 20px 20px 10px 20px; gap: 10px; border-bottom: 1px solid #eee; background: #fff; }
|
|
.header h1 { margin: 0; font-size: 20px; font-weight: 500; }
|
|
.dashboard-tabs { background: #fafafa; }
|
|
.tab-icon { margin-right: 12px; font-size: 24px; color: #3f51b5; }
|
|
.tab-label-content { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; padding: 10px 0; }
|
|
.tab-title { font-weight: 600; font-size: 14px; }
|
|
.tab-subtitle { font-size: 11px; color: #666; font-weight: 400; }
|
|
.tab-content { padding: 0; background: #fff; min-height: 400px; }
|
|
::ng-deep .mat-mdc-tab-body-wrapper { padding-top: 0 !important; }
|
|
`]
|
|
})
|
|
export class BootServerDashboardComponent implements OnInit {
|
|
serverUuid: string | null = null;
|
|
serverName: string = 'Cargando...';
|
|
|
|
constructor(
|
|
private route: ActivatedRoute,
|
|
private router: Router,
|
|
private http: HttpClient,
|
|
private configService: ConfigService
|
|
) {}
|
|
|
|
ngOnInit() {
|
|
this.serverUuid = this.route.snapshot.paramMap.get('uuid');
|
|
if (this.serverUuid) {
|
|
this.loadServerInfo();
|
|
}
|
|
}
|
|
|
|
loadServerInfo() {
|
|
const url = `${this.configService.apiUrl}/boot-servers/${this.serverUuid}`;
|
|
this.http.get<any>(url).subscribe(res => {
|
|
this.serverName = res.name;
|
|
});
|
|
}
|
|
|
|
navigateTo(view: string) {
|
|
const queryParams = { serverId: this.serverUuid };
|
|
switch(view) {
|
|
case 'oglives': this.router.navigate(['/pxe-images'], { queryParams }); break;
|
|
case 'pxe-templates': this.router.navigate(['/pxe'], { queryParams }); break;
|
|
case 'pxe-boot-files': this.router.navigate(['/pxe-boot-file'], { queryParams }); break;
|
|
}
|
|
}
|
|
|
|
goBack() {
|
|
this.router.navigate(['/boot-servers']);
|
|
}
|
|
}
|