67 lines
2.2 KiB
HTML
67 lines
2.2 KiB
HTML
<div class="dashboard">
|
|
<div class="header-container" >
|
|
|
|
<h2 joyrideStep="titleStep" text="Esta sección muestra el estado general del servidor OgDhcp.">OgDhcp server Status</h2>
|
|
<button mat-icon-button color="primary" (click)="iniciarTour()">
|
|
<mat-icon>help</mat-icon>
|
|
</button>
|
|
</div>
|
|
<div class="disk-usage-container">
|
|
<div class="disk-usage" joyrideStep="diskUsageStep" text="Visualiza el uso del disco del servidor.">
|
|
<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" joyrideStep="servicesStatusStep" text="Aquí puedes ver el estado de los servicios importantes del servidor.">
|
|
<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" joyrideStep="subnetsStep" text="Consulta la información de las subredes configuradas en el servidor.">
|
|
<h3>Subredes</h3>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Boot file name</th>
|
|
<th>Next server</th>
|
|
<th>Ip</th>
|
|
<th>Ordenadores</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr *ngFor="let subnet of subnets">
|
|
<td>{{ subnet.id }}</td>
|
|
<td>{{ subnet['boot-file-name'] }}</td>
|
|
<td>{{ subnet['next-server'] }}</td>
|
|
<td>{{ subnet.subnet }}</td>
|
|
<td>{{ subnet.reservations.length }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|