76 lines
2.8 KiB
HTML
76 lines
2.8 KiB
HTML
<app-loading [isLoading]="loading"></app-loading>
|
|
|
|
<div class="client-container">
|
|
<div class="header-container">
|
|
<h2 class="title">{{ 'clientDetailsTitle' | translate }} {{ clientData.name }}</h2>
|
|
<div class="client-button-row">
|
|
<button class="back-button" (click)="navigateToGroups()">
|
|
<mat-icon>arrow_back</mat-icon>
|
|
{{ 'back' | translate }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<mat-divider></mat-divider>
|
|
|
|
<div *ngIf="!loading" class="client-info">
|
|
<div class="info-section">
|
|
<div class="two-column-table">
|
|
<div class="table-row" *ngFor="let clientData of generalData">
|
|
<div class="column property">{{ clientData?.property }}</div>
|
|
<div class="column value">{{ clientData?.value }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="two-column-table">
|
|
<div class="table-row" *ngFor="let clientData of networkData">
|
|
<div class="column property">{{ clientData?.property }}</div>
|
|
<div class="column value">{{ clientData?.value }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="table-header-container">
|
|
<h2 class="title" i18n="@@adminImagesTitle">Discos/Particiones</h2>
|
|
<mat-chip *ngIf="clientData.firmwareType" class="firmware-chip">
|
|
<mat-icon>memory</mat-icon>
|
|
{{ clientData.firmwareType }}
|
|
</mat-chip>
|
|
</div>
|
|
|
|
<div class="disk-container">
|
|
<div class="table-container">
|
|
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
|
|
<ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
|
|
<th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
|
|
<td mat-cell *matCellDef="let image">
|
|
<ng-container *ngIf="column.columnDef !== 'size'">
|
|
{{ column.cell(image) }}
|
|
</ng-container>
|
|
<ng-container *ngIf="column.columnDef === 'size'">
|
|
<mat-chip color="primary">
|
|
{{ (image.size / 1024).toFixed(2) }} GB
|
|
</mat-chip>
|
|
</ng-container>
|
|
</td>
|
|
</ng-container>
|
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="charts-container">
|
|
<ng-container *ngIf="diskUsageData && diskUsageData.length > 0">
|
|
<div *ngFor="let disk of chartDisk" class="disk-usage">
|
|
<ngx-charts-pie-chart class="chart" [view]="view" [results]="disk.chartData" [doughnut]="true">
|
|
</ngx-charts-pie-chart>
|
|
|
|
<h3>Disco {{ disk.diskNumber }}</h3>
|
|
<p>Usado: {{ (disk.used).toFixed(2) }} GB ({{ disk.percentage }}%)</p>
|
|
<p>Total: {{ disk.total }} GB</p>
|
|
</div>
|
|
</ng-container>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|