125 lines
4.8 KiB
HTML
125 lines
4.8 KiB
HTML
<mat-dialog-content class="modal-content">
|
|
<app-loading [isLoading]="loading"></app-loading>
|
|
|
|
@if (!loading) {
|
|
<div class="client-container">
|
|
<div class="header-container">
|
|
<h2 class="title">{{ 'clientDetailsTitle' | translate }} {{ clientData.name }}</h2>
|
|
</div>
|
|
|
|
<div class="client-info-card">
|
|
<div class="info-columns">
|
|
<div class="info-column">
|
|
@for (data of generalData; track data) {
|
|
<div class="info-pair">
|
|
<div class="label">{{ data?.property }}</div>
|
|
<div class="value">{{ data?.value || '--' }}</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
<div class="info-column">
|
|
@for (data of networkData; track data) {
|
|
<div class="info-pair">
|
|
<div class="label">{{ data?.property }}</div>
|
|
<div class="value">{{ data?.value || '--' }}</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="notes-card">
|
|
<div class="label">{{ 'labelNotes' | translate }}</div>
|
|
<div class="notes-value">{{ clientNotes || '--' }}</div>
|
|
</div>
|
|
|
|
<div class="table-header-container">
|
|
<h2 i18n="@@adminImagesTitle">{{ 'labelDisksPartitions' | translate }}</h2>
|
|
@if (clientData.firmwareType) {
|
|
<mat-chip> {{ clientData.firmwareType }}</mat-chip>
|
|
}
|
|
</div>
|
|
|
|
|
|
<div class="disk-container">
|
|
@for (disk of diskUsageData; track disk.diskNumber) {
|
|
<div class="disk-card-wrapper">
|
|
<mat-card class="disk-mat-card mat-elevation-z4">
|
|
<div class="disk-card-header">
|
|
<h3 class="disk-card-title">Disco {{ disk.diskNumber }}</h3>
|
|
<div class="disk-card-metrics-wrapper">
|
|
<mat-chip class="disk-card-metrics-chip">
|
|
Total: {{ disk.total.toFixed(2) }} GB | Usado: {{ (disk.used).toFixed(2) }} GB ({{
|
|
disk.percentage }}%)
|
|
</mat-chip>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="disk-card-layout">
|
|
<div class="disk-table-container">
|
|
<table mat-table [dataSource]="disk.partitions" class="disk-table">
|
|
@for (column of columns; track column.columnDef) {
|
|
<ng-container [matColumnDef]="column.columnDef">
|
|
<th mat-header-cell *matHeaderCellDef> {{ column.header | translate }} </th>
|
|
<td mat-cell *matCellDef="let image">
|
|
@if (column.columnDef !== 'size' && column.columnDef !== 'operativeSystem') {
|
|
{{ column.cell(image) }}
|
|
}
|
|
@if (column.columnDef === 'size') {
|
|
<mat-chip color="primary">
|
|
{{ (image.size / 1024).toFixed(2) }} GB
|
|
</mat-chip>
|
|
}
|
|
|
|
@if (column.columnDef === 'operativeSystem') {
|
|
<div class="os-col-wrapper">
|
|
@if (image.filesystem === 'CACHE' && image.cacheContent) {
|
|
<span class="cache-title">{{ 'labelContentColon' | translate }}</span>
|
|
@for (item of parseCacheContent(image.cacheContent); track item.name) {
|
|
<div class="cache-item">
|
|
• {{ item.name }} ({{ item.size }})
|
|
</div>
|
|
}
|
|
}
|
|
@if (image.filesystem !== 'CACHE' || !image.cacheContent) {
|
|
<span>{{image.operativeSystem?.name }}</span>
|
|
<span class="image-name">{{ image.image?.name }}</span>
|
|
@if (image.deployDate) {
|
|
<span class="image-date">Desplegada: {{ image.deployDate | date:'dd/MM/yyyy HH:mm' }}</span>
|
|
}
|
|
}
|
|
</div>
|
|
}
|
|
</td>
|
|
</ng-container>
|
|
}
|
|
|
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
|
|
|
<ng-container>
|
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;" [hidden]="row.partitionNumber === 0">
|
|
</tr>
|
|
</ng-container>
|
|
</table>
|
|
|
|
</div>
|
|
|
|
<div class="charts-container disk-chart-container">
|
|
<div class="disk-chart-wrapper">
|
|
<ngx-charts-pie-chart class="chart" [view]="[360, 230]" [results]="disk.chartData" [doughnut]="true"
|
|
[legend]="true" [legendPosition]="legendPosition" [legendTitle]="''">
|
|
</ngx-charts-pie-chart>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</mat-card>
|
|
</div>
|
|
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
</mat-dialog-content>
|
|
<mat-dialog-actions class="action-container">
|
|
<button class="ordinary-button" (click)="onNoClick()">{{ 'buttonClose' | translate }}</button>
|
|
</mat-dialog-actions> |