72 lines
2.5 KiB
HTML
72 lines
2.5 KiB
HTML
<app-loading [isLoading]="loading"></app-loading>
|
|
|
|
<div class="dashboard">
|
|
<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>
|