131 lines
4.2 KiB
HTML
131 lines
4.2 KiB
HTML
<div class="dashboard">
|
|
<<<<<<< Updated upstream
|
|
<h2>OgBoot server Status</h2>
|
|
|
|
<div class="disk-usage-container">
|
|
<div class="disk-usage">
|
|
<h3>Uso de disco</h3>
|
|
<ngx-charts-pie-chart
|
|
[view]="view"
|
|
[scheme]="colorScheme"
|
|
[results]="diskUsageChartData"
|
|
[gradient]="gradient"
|
|
[doughnut]="isDoughnut"
|
|
[labels]="showLabels"
|
|
[legend]="showLegend">
|
|
</ngx-charts-pie-chart>
|
|
<div class="disk-usage-info">
|
|
<p>Total: {{ diskUsage.total }}</p>
|
|
<p>Ocupado: {{ diskUsage.used }}</p>
|
|
<p>Disponible: {{ diskUsage.available }}</p>
|
|
<p>Libre: {{ diskUsage.percentage }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="services-status">
|
|
<h3>Servicios</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 }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="installed-oglives">
|
|
<h3>OGLives instalados</h3>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Kernel</th>
|
|
<th>Architecture</th>
|
|
<th>Revision</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>
|
|
=======
|
|
<div class="header-container">
|
|
<h2 joyrideStep="titleStep" text="Esta sección muestra el estado general del servidor OgBoot.">
|
|
{{ 'ogBootServerStatus' | translate }}
|
|
</h2>
|
|
<button mat-icon-button color="primary" (click)="iniciarTour()">
|
|
<mat-icon>help</mat-icon>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="disk-usage-container">
|
|
<!-- 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"
|
|
[legend]="showLegend">
|
|
</ngx-charts-pie-chart>
|
|
<div class="disk-usage-info">
|
|
<p>{{ 'totalLabel' | translate }}: {{ formatBytes(diskUsage.total) }}</p>
|
|
<p>{{ 'usedLabel' | translate }}: {{ formatBytes(diskUsage.used) }}</p>
|
|
<p>{{ 'availableLabel' | translate }}: {{ formatBytes(diskUsage.available) }}</p>
|
|
<p>{{ 'freeLabel' | translate }}: {{ diskUsage.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>
|
|
</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>
|
|
>>>>>>> Stashed changes
|