66 lines
3.4 KiB
HTML
66 lines
3.4 KiB
HTML
<header>
|
|
<h1 mat-dialog-title>Estado global de la aplicación</h1>
|
|
</header>
|
|
<mat-dialog-content>
|
|
<mat-tab-group (selectedTabChange)="onTabChange($event)">
|
|
<mat-tab label="OgBoot">
|
|
<app-loading [isLoading]="loading"></app-loading>
|
|
<div *ngIf="!loading" class="dashboard">
|
|
<!-- Disk Usage Section -->
|
|
<div class="disk-usage" joyrideStep="diskUsageStep" text="{{ 'diskUsageDescription' | translate }}">
|
|
<h3>{{ 'diskUsageTitle' | translate }}</h3>
|
|
<ngx-charts-pie-chart [view]="view" [scheme]="colorScheme" [results]="diskUsageChartData"
|
|
[gradient]="gradient" [doughnut]="isDoughnut" [labels]="showLabels">
|
|
</ngx-charts-pie-chart>
|
|
<div class="disk-usage-info">
|
|
<p>{{ 'totalLabel' | translate }}: {{ formatBytes(ogBootDiskUsage.total) }}</p>
|
|
<p>{{ 'usedLabel' | translate }}: {{ formatBytes(ogBootDiskUsage.used) }}</p>
|
|
<p>{{ 'availableLabel' | translate }}: {{ formatBytes(ogBootDiskUsage.available) }}</p>
|
|
<p>{{ 'freeLabel' | translate }}: {{ ogBootDiskUsage.percentage }}%</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Services Status Section -->
|
|
<div class="services-status" joyrideStep="servicesStatusStep"
|
|
text="{{ 'servicesStatusDescription' | translate }}">
|
|
<h3>{{ 'servicesTitle' | translate }}</h3>
|
|
<ul>
|
|
<li *ngFor="let service of getServices()">
|
|
<span class="status-led"
|
|
[ngClass]="{ 'active': service.status === 'active', 'inactive': service.status !== 'active' }"></span>
|
|
{{ service.name }}: {{ service.status | translate }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Installed OgLives Section -->
|
|
<div class="installed-oglives" joyrideStep="oglivesStep" text="{{ 'oglivesDescription' | translate }}">
|
|
<h3>{{ 'installedOglivesTitle' | translate }}</h3>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>{{ 'idLabel' | translate }}</th>
|
|
<th>{{ 'kernelLabel' | translate }}</th>
|
|
<th>{{ 'architectureLabel' | translate }}</th>
|
|
<th>{{ 'revisionLabel' | translate }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr *ngFor="let oglive of installedOgLives">
|
|
<td>{{ oglive.id }}</td>
|
|
<td>{{ oglive.kernel }}</td>
|
|
<td>{{ oglive.architecture }}</td>
|
|
<td>{{ oglive.revision }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</mat-tab>
|
|
<mat-tab label="Dhcp"> Content 2 </mat-tab>
|
|
<mat-tab label="Pxe"> Content 3 </mat-tab>
|
|
</mat-tab-group>
|
|
</mat-dialog-content>
|
|
<mat-dialog-actions class="action-container">
|
|
<button class="ordinary-button" [mat-dialog-close]="true">{{ 'closeButton' | translate }}</button>
|
|
</mat-dialog-actions> |