113 lines
4.5 KiB
HTML
113 lines
4.5 KiB
HTML
<app-loading [isLoading]="loading"></app-loading>
|
|
<div *ngIf="!loading" class="dashboard">
|
|
<!-- Disk Usage Section -->
|
|
<div class="disk-usage-container">
|
|
<h3 class="disk-title">{{ 'diskUsageTitle' | translate }}</h3>
|
|
<div class="disk-usage" joyrideStep="diskUsageStep" text="{{ 'diskUsageDescription' | translate }}">
|
|
<ngx-charts-pie-chart [view]="view" [scheme]="colorScheme" [results]="diskUsageChartData" [doughnut]="isDoughnut"
|
|
[labels]="showLabels">
|
|
</ngx-charts-pie-chart>
|
|
<div class="disk-usage-info">
|
|
<p>{{ 'totalLabel' | translate }}: <strong>{{ isRepository ? diskUsage.total : formatBytes(diskUsage.total) }}</strong></p>
|
|
<p>{{ 'usedLabel' | translate }}: <strong>{{ isRepository ? diskUsage.used : formatBytes(diskUsage.used) }}</strong></p>
|
|
<p>{{ 'availableLabel' | translate }}: <strong>{{ isRepository ? diskUsage.available : formatBytes(diskUsage.available) }}</strong></p>
|
|
<p>{{ 'usedPercentageLabel' | translate }}: <strong>{{ isRepository ? diskUsage.used_percentage : diskUsage.percentage }}</strong></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RAM Usage Section -->
|
|
<div class="ram-usage-container" *ngIf="isRepository">
|
|
<h3 class="ram-title">{{ 'RamUsage' | translate }}</h3>
|
|
<div class="ram-usage">
|
|
<ngx-charts-pie-chart [view]="view" [scheme]="colorScheme" [results]="ramUsageChartData" [doughnut]="isDoughnut"
|
|
[labels]="showLabels">
|
|
</ngx-charts-pie-chart>
|
|
<div class="ram-usage-info">
|
|
<p>{{ 'totalLabel' | translate }}: <strong>{{ ramUsage.total }}</strong></p>
|
|
<p>{{ 'usedLabel' | translate }}: <strong>{{ ramUsage.used }}</strong></p>
|
|
<p>{{ 'availableLabel' | translate }}: <strong>{{ ramUsage.available }}</strong></p>
|
|
<p>{{ 'usedPercentageLabel' | translate }}: <strong>{{ ramUsage.used_percentage }}</strong></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CPU Usage Section -->
|
|
<div class="cpu-usage-container" *ngIf="isRepository">
|
|
<h3 class="cpu-title">{{ 'CpuUsage' | translate }}</h3>
|
|
<div class="cpu-usage">
|
|
<p>{{ 'usedLabel' | translate }}: <strong>{{ cpuUsage.used_percentage }}</strong></p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Services Status Section -->
|
|
<div class="services-status" joyrideStep="servicesStatusStep" text="{{ 'servicesStatusDescription' | translate }}">
|
|
<h3 class="service-title">{{ 'servicesTitle' | translate }}</h3>
|
|
<ul class="service-list">
|
|
<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>
|
|
|
|
<!-- Processes Status Section -->
|
|
<div class="processes-status" *ngIf="isRepository">
|
|
<h3 class="process-title">{{ 'processes' | translate }}</h3>
|
|
<ul class="process-list">
|
|
<li *ngFor="let process of getProcesses()">
|
|
<span class="status-led"
|
|
[ngClass]="{ 'active': process.status === 'running', 'inactive': process.status !== 'running' }"></span>
|
|
{{ process.name }}: {{ process.status }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Installed OgLives / Subnets Section -->
|
|
<div *ngIf="!isRepository && !isDhcp">
|
|
<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 item of installedOgLives">
|
|
<td>{{ item.id }}</td>
|
|
<td>{{ item.kernel }}</td>
|
|
<td>{{ item.architecture }}</td>
|
|
<td>{{ item.revision }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div *ngIf="isDhcp">
|
|
<h3>{{ 'subnets' | translate }}</h3>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>{{ 'idLabel' | translate }}</th>
|
|
<th>{{ 'bootFileNameLabel' | translate }}</th>
|
|
<th>{{ 'nextServerLabel' | translate }}</th>
|
|
<th>{{ 'ipLabel' | translate }}</th>
|
|
<th>{{ 'clientsLabel' | translate }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr *ngFor="let item of subnets">
|
|
<td>{{ item.id }}</td>
|
|
<td>{{ item['boot-file-name'] }}</td>
|
|
<td>{{ item['next-server'] }}</td>
|
|
<td>{{ item.subnet }}</td>
|
|
<td>{{ item.reservations.length }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div> |