Se muestra información del contenido de caché del disco, además se ha refactorizado la vista de detalles del equipo para separar la información por discos
testing/ogGui-multibranch/pipeline/head There was a failure building this commit
Details
testing/ogGui-multibranch/pipeline/head There was a failure building this commit
Details
parent
00a6c6fa3f
commit
769969598b
|
|
@ -130,3 +130,114 @@ table {
|
|||
gap: 1em;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
/* ngx-charts custom wrapped legend */
|
||||
::ng-deep .charts-container .legend-labels {
|
||||
display: flex !important;
|
||||
flex-wrap: wrap !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
::ng-deep .charts-container .legend-label {
|
||||
width: auto !important;
|
||||
margin-right: 16px !important;
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
::ng-deep .charts-container .legend-label-text {
|
||||
max-width: none !important;
|
||||
overflow: visible !important;
|
||||
text-overflow: clip !important;
|
||||
}
|
||||
::ng-deep .charts-container .legend-wrap {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* Extracted Card Redesign Classes */
|
||||
.disk-card-wrapper {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.disk-mat-card {
|
||||
border-radius: 8px;
|
||||
overflow: visible !important;
|
||||
padding: 0;
|
||||
}
|
||||
.disk-card-header {
|
||||
background-color: #f5f5f5;
|
||||
padding: 16px 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
}
|
||||
.disk-card-title {
|
||||
margin: 0;
|
||||
font-size: 1.2rem;
|
||||
color: #3f51b5;
|
||||
font-weight: bold;
|
||||
}
|
||||
.disk-card-metrics-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.disk-card-metrics-chip {
|
||||
background-color: white !important;
|
||||
border: 1px solid #ccc;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
.disk-card-layout {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
background: white;
|
||||
gap: 0;
|
||||
border-bottom-left-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
}
|
||||
.disk-table-container {
|
||||
flex: 1;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.disk-table {
|
||||
width: 100%;
|
||||
box-shadow: none !important;
|
||||
border: none !important;
|
||||
}
|
||||
.disk-chart-container {
|
||||
flex: 0 0 400px;
|
||||
border-left: 1px solid #e0e0e0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 30px 20px 50px 20px;
|
||||
box-sizing: border-box;
|
||||
background: #fafafa;
|
||||
min-height: 350px;
|
||||
border-bottom-right-radius: 8px;
|
||||
}
|
||||
.disk-chart-wrapper {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* OS Column Classes */
|
||||
.os-col-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.cache-title {
|
||||
font-weight: bold;
|
||||
font-size: 0.8rem;
|
||||
color: #666;
|
||||
}
|
||||
.cache-item {
|
||||
font-size: 0.75rem;
|
||||
color: #666;
|
||||
}
|
||||
.image-name {
|
||||
font-size: 0.75rem;
|
||||
color: gray;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,71 +37,81 @@
|
|||
|
||||
|
||||
<div class="disk-container">
|
||||
<div class="disk-layout">
|
||||
<div class="table-container">
|
||||
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
|
||||
@for (column of columns; track column.columnDef) {
|
||||
<ng-container [matColumnDef]="column.columnDef">
|
||||
<th mat-header-cell *matHeaderCellDef> {{ column.header }} </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>
|
||||
}
|
||||
@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 }} </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 style="display: flex; flex-direction: column;">
|
||||
@if (image.filesystem === 'CACHE' && image.cacheContent) {
|
||||
<div>
|
||||
<span style="font-weight: bold; font-size: 0.8rem; color: #666;">Contenido:</span>
|
||||
@for (item of parseCacheContent(image.cacheContent); track item.name) {
|
||||
<div style="font-size: 0.75rem; color: #666;">
|
||||
• {{ item.name }} ({{ item.size }})
|
||||
</div>
|
||||
@if (column.columnDef === 'operativeSystem') {
|
||||
<div class="os-col-wrapper">
|
||||
@if (image.filesystem === 'CACHE' && image.cacheContent) {
|
||||
<span class="cache-title">Contenido:</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>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
@if (image.filesystem !== 'CACHE' || !image.cacheContent) {
|
||||
<div>
|
||||
<span>{{image.operativeSystem?.name }}</span>
|
||||
<span style="font-size: 0.75rem; color: gray;">{{ image.image?.name }}</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</td>
|
||||
</ng-container>
|
||||
}
|
||||
}
|
||||
</td>
|
||||
</ng-container>
|
||||
}
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<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>
|
||||
<ng-container>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;" [hidden]="row.partitionNumber === 0"></tr>
|
||||
</ng-container>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="charts-container" [ngClass]="{'single-disk': chartDisk.length === 1}">
|
||||
@if (diskUsageData && diskUsageData.length > 0) {
|
||||
<ng-container>
|
||||
@for (disk of chartDisk; track disk.diskNumber) {
|
||||
<div class="disk-usage">
|
||||
<ngx-charts-pie-chart class="chart" [view]="view" [results]="disk.chartData" [doughnut]="true">
|
||||
<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>
|
||||
<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>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,18 +37,14 @@ export class ClientDetailsComponent {
|
|||
chartDisk: any[] = [];
|
||||
view: [number, number] = [260, 160];
|
||||
showLegend: boolean = true;
|
||||
legendPosition: any = 'below';
|
||||
|
||||
datePipe: DatePipe = new DatePipe('es-ES');
|
||||
columns = [
|
||||
{
|
||||
columnDef: 'diskNumber',
|
||||
header: 'Disco',
|
||||
cell: (partition: any) => partition.diskNumber,
|
||||
},
|
||||
{
|
||||
columnDef: 'partitionNumber',
|
||||
header: 'Particion',
|
||||
cell: (partition: any) => partition.partitionNumber
|
||||
columnDef: 'partition',
|
||||
header: 'Partición',
|
||||
cell: (partition: any) => `${partition.partitionNumber}`
|
||||
},
|
||||
{
|
||||
columnDef: 'partitionCode',
|
||||
|
|
@ -168,7 +164,8 @@ export class ClientDetailsComponent {
|
|||
chartData: partitionData,
|
||||
total,
|
||||
used,
|
||||
percentage: total > 0 ? Math.round((used / total) * 100) : 0
|
||||
percentage: total > 0 ? Math.round((used / total) * 100) : 0,
|
||||
partitions
|
||||
};
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue