oggui/ogWebconsole/src/app/components/global-status/global-status.component.html

<!-- Header con bienvenida -->
<div class="welcome-header">
  <div class="welcome-content">
    <div class="welcome-icon">
      <mat-icon>dashboard</mat-icon>
    </div>
    <div class="welcome-text">
      <h1 class="welcome-title">{{ 'GlobalStatus' | translate }}</h1>
      <p class="welcome-subtitle">Bienvenido a la consola de administración de OpenGnsys</p>
      <p class="welcome-description">Estado general de todos los componentes de la plataforma</p>
    </div>
  </div>
  <div class="welcome-actions">
    <button mat-icon-button class="refresh-button" (click)="refreshAll()" matTooltip="Actualizar datos">
      <mat-icon>refresh</mat-icon>
    </button>
  </div>
</div>

<!-- Contenido principal -->
<mat-dialog-content [ngClass]="{'loading': loading}">
  <!-- Spinner de carga -->
  <div class="spinner-container" *ngIf="loading">
    <div class="loading-content">
      <mat-spinner class="loading-spinner"></mat-spinner>
      <p class="loading-text">Cargando estado del sistema...</p>
    </div>
  </div>

  <!-- Contenido principal cuando no está cargando -->
  <div *ngIf="!loading" class="main-content">
    <!-- Resumen rápido del sistema -->
    <div class="system-overview">
      <div class="overview-card">
        <div class="overview-icon">
          <mat-icon>storage</mat-icon>
        </div>
        <div class="overview-content">
          <h3>OgBoot Server</h3>
          <p *ngIf="!errorOgBoot">Estado: <span class="status-badge online">Operativo</span></p>
          <p *ngIf="errorOgBoot">Estado: <span class="status-badge offline">Error</span></p>
        </div>
      </div>
      
      <div class="overview-card">
        <div class="overview-icon">
          <mat-icon>router</mat-icon>
        </div>
        <div class="overview-content">
          <h3>DHCP Server</h3>
          <p *ngIf="!errorDhcp">Estado: <span class="status-badge online">Operativo</span></p>
          <p *ngIf="errorDhcp">Estado: <span class="status-badge offline">Error</span></p>
        </div>
      </div>
      
      <div class="overview-card">
        <div class="overview-icon">
          <mat-icon>cloud</mat-icon>
        </div>
        <div class="overview-content">
          <h3>Repositorios</h3>
          <p>Total: <span class="status-badge info">{{ repositories.length }}</span></p>
        </div>
      </div>
    </div>

    <!-- Tabs principales -->
    <mat-tab-group (selectedTabChange)="onTabChange($event)" class="main-tabs">
      <mat-tab label="OgBoot Server">
        <div *ngIf="!errorOgBoot && !loadingOgBoot" class="tab-content">
          <app-status-tab [loading]="loadingOgBoot" [diskUsage]="ogBootDiskUsage" [servicesStatus]="ogBootServicesStatus"
            [installedOgLives]="installedOgLives" [diskUsageChartData]="ogBootDiskUsageChartData" [view]="view"
            [colorScheme]="colorScheme" [isDoughnut]="isDoughnut" [showLabels]="showLabels" [isDhcp]="isDhcp"
            [isRepository]="false">
          </app-status-tab>
        </div>
        <div *ngIf="loadingOgBoot" class="loading-container">
          <div class="loading-content">
            <mat-spinner class="loading-spinner"></mat-spinner>
            <p class="loading-text">Cargando estado de OgBoot...</p>
          </div>
        </div>
        <div *ngIf="errorOgBoot" class="error-container">
          <div class="error-card">
            <mat-icon class="error-icon">error_outline</mat-icon>
            <h3>Error de conexión</h3>
            <p>No se pudo conectar con el servidor OgBoot</p>
            <button mat-raised-button color="primary" (click)="loadOgBootStatus()">
              <mat-icon>refresh</mat-icon>
              Reintentar
            </button>
          </div>
        </div>
      </mat-tab>

      <mat-tab label="DHCP Server">
        <div *ngIf="!errorDhcp && !loadingDhcp" class="tab-content">
          <app-status-tab [loading]="loadingDhcp" [diskUsage]="dhcpDiskUsage" [servicesStatus]="dhcpServicesStatus"
            [subnets]="subnets" [diskUsageChartData]="dhcpDiskUsageChartData" [view]="view" [colorScheme]="colorScheme"
            [isDoughnut]="isDoughnut" [showLabels]="showLabels" [isDhcp]="isDhcp" [isRepository]="false">
          </app-status-tab>
        </div>
        <div *ngIf="loadingDhcp" class="loading-container">
          <div class="loading-content">
            <mat-spinner class="loading-spinner"></mat-spinner>
            <p class="loading-text">Cargando estado de DHCP...</p>
          </div>
        </div>
        <div *ngIf="errorDhcp" class="error-container">
          <div class="error-card">
            <mat-icon class="error-icon">error_outline</mat-icon>
            <h3>Error de conexión</h3>
            <p>No se pudo conectar con el servidor DHCP</p>
            <button mat-raised-button color="primary" (click)="loadDhcpStatus()">
              <mat-icon>refresh</mat-icon>
              Reintentar
            </button>
          </div>
        </div>
      </mat-tab>

      <mat-tab label="{{ 'repositoryLabel' | translate }}">
        <div class="repositories-container">
          <div *ngIf="repositories.length === 0" class="no-repositories">
            <mat-icon class="no-data-icon">cloud_off</mat-icon>
            <h3>No hay repositorios disponibles</h3>
            <p>No se encontraron repositorios configurados en el sistema.</p>
          </div>
          
          <div *ngIf="repositories.length > 0" class="repositories-selector-container">
            <!-- Selector de repositorio -->
            <div class="repository-selector">
              <mat-form-field appearance="outline" class="repository-select-field">
                <mat-label>Seleccionar repositorio</mat-label>
                <mat-select [(ngModel)]="selectedRepositoryUuid" (selectionChange)="onRepositoryChange($event.value)">
                  <mat-option *ngFor="let repository of repositories" [value]="repository.uuid">
                    {{ repository.name }}
                  </mat-option>
                </mat-select>
                <mat-icon matSuffix>storage</mat-icon>
              </mat-form-field>
            </div>
            
            <!-- Información del repositorio seleccionado -->
            <div *ngIf="selectedRepositoryUuid && !errorRepositories[selectedRepositoryUuid] && repositoryStatuses[selectedRepositoryUuid]" class="selected-repository-content">
              <div class="repository-item">
                <div class="repository-header">
                  <h3>{{ getSelectedRepositoryName() }}</h3>
                </div>
                
                <div class="repository-content">
                  <app-status-tab [loading]="loading" [diskUsage]="repositoryStatuses[selectedRepositoryUuid].disk"
                    [servicesStatus]="repositoryStatuses[selectedRepositoryUuid].services"
                    [processesStatus]="repositoryStatuses[selectedRepositoryUuid].processes"
                    [ramUsage]="repositoryStatuses[selectedRepositoryUuid].ram" [cpuUsage]="repositoryStatuses[selectedRepositoryUuid].cpu"
                    [diskUsageChartData]="[
                      { name: 'Usado', value: repositoryStatuses[selectedRepositoryUuid].disk.used },
                      { name: 'Disponible', value: repositoryStatuses[selectedRepositoryUuid].disk.available }
                    ]" [ramUsageChartData]="[
                      { name: 'Usado', value: repositoryStatuses[selectedRepositoryUuid].ram.used },
                      { name: 'Disponible', value: repositoryStatuses[selectedRepositoryUuid].ram.available }
                    ]" [view]="view" [colorScheme]="colorScheme" [isDoughnut]="isDoughnut" [showLabels]="showLabels"
                    [isDhcp]="false" [isRepository]="true">
                  </app-status-tab>
                </div>
              </div>
            </div>
            
            <!-- Mensaje cuando no hay repositorio seleccionado -->
            <div *ngIf="!selectedRepositoryUuid" class="no-repository-selected">
              <mat-icon class="no-data-icon">storage</mat-icon>
              <h3>Selecciona un repositorio</h3>
              <p>Elige un repositorio del selector para ver su información detallada.</p>
            </div>
            
            <!-- Error del repositorio seleccionado -->
            <div *ngIf="selectedRepositoryUuid && errorRepositories[selectedRepositoryUuid]" class="error-container">
              <div class="error-card">
                <mat-icon class="error-icon">error_outline</mat-icon>
                <h3>Error de conexión</h3>
                <p>No se pudo conectar con el repositorio {{ getSelectedRepositoryName() }}</p>
                <button mat-raised-button color="primary" (click)="retryRepositoryStatus(selectedRepositoryUuid)">
                  <mat-icon>refresh</mat-icon>
                  Reintentar
                </button>
              </div>
            </div>
          </div>
        </div>
      </mat-tab>
    </mat-tab-group>
  </div>
</mat-dialog-content>

<!-- Footer con acciones -->
<mat-dialog-actions class="action-container">
  <div class="action-info">
    <p class="last-update">Última actualización: {{ lastUpdateTime }}</p>
  </div>
  <div class="action-buttons">
    <button mat-button class="secondary-button" (click)="refreshAll()">
      <mat-icon>refresh</mat-icon>
      Actualizar
    </button>
    <button mat-raised-button color="primary" [mat-dialog-close]="true">
      {{ 'closeButton' | translate }}
    </button>
  </div>
</mat-dialog-actions>