Creada pagina del cliente mostrando configuración del disco

6 files changed, 171 insertions, 49 deletions

diff --git a/admin/WebConsole3/frontend/package.json b/admin/WebConsole3/frontend/package.json
index fd197606..15f5d406 100644
--- a/admin/WebConsole3/frontend/package.json
+++ b/admin/WebConsole3/frontend/package.json
@@ -34,6 +34,7 @@
     "angular-loading-page": "^0.6.0",
     "bootstrap-css-only": "^3.3.7",
     "chart.js": "^2.7.3",
+    "chartjs-plugin-datalabels": "^0.6.0",
     "core-js": "^2.5.4",
     "font-awesome": "^4.7.0",
     "ionicons": "^4.5.5",
diff --git a/admin/WebConsole3/frontend/src/app/model/client.ts b/admin/WebConsole3/frontend/src/app/model/client.ts
index dbc9976e..8977e168 100644
--- a/admin/WebConsole3/frontend/src/app/model/client.ts
+++ b/admin/WebConsole3/frontend/src/app/model/client.ts
@@ -2,6 +2,20 @@ import { Resource } from 'globunet-angular/core/models/api/resource';
 import {Repository} from './repository';
 import {HardwareProfile} from './hardware-profile';
 import {Netboot} from './netboot';
+import {PartitionInfo} from './image';
+
+export class Partition {
+  cacheContent: string;
+  filesystem: string;
+  id: number;
+  image: any;
+  numDisk: number;
+  numPartition: number;
+  osName: string;
+  partitionCode: string;
+  size: number;
+  usage: number;
+}
 
 export class Client extends Resource {
   public name = '';
@@ -15,8 +29,10 @@ export class Client extends Resource {
   public oglive = null;
   public netboot: Netboot = null;
   public organizationalUnit: number;
+  public partitions?: PartitionInfo[]
   // Variables temporales para la vista, no vienen del servidor
   public status?: string;
   public selected?: boolean;
+  public disksConfig?: any[];
 
 }
diff --git a/admin/WebConsole3/frontend/src/app/pages/client/client.component.html b/admin/WebConsole3/frontend/src/app/pages/client/client.component.html
index 0ba00d7d..81c0a3ac 100644
--- a/admin/WebConsole3/frontend/src/app/pages/client/client.component.html
+++ b/admin/WebConsole3/frontend/src/app/pages/client/client.component.html
@@ -3,7 +3,7 @@
     </h1>
     <ol class="breadcrumb">
         <li><a [routerLink]="'/app/dashboard'"><i class="fa fa-dashboard"></i> {{'dashboard'|translate}}</a></li>
-        <li><a [routerLink]="'/app/ous'" ><i class="fa fa-th"></i> {{'ous'|translate}}</a></li>
+        <li><a [routerLink]="'/app/ous'"><i class="fa fa-th"></i> {{'ous'|translate}}</a></li>
         <li class="active" translate="client"></li>
     </ol>
 </section>
@@ -24,18 +24,18 @@
                     <h3 class="box-title" translate="client_data"></h3>
                     <div class="box-tools pull-right">
                         <div class="btn-group" *ngIf="client.id !== 0">
-                            <app-og-information-options ></app-og-information-options>
+                            <app-og-information-options></app-og-information-options>
                             <app-og-commands-options></app-og-commands-options>
                         </div>
                     </div>
                 </mk-box-header>
                 <mk-box-content>
                     <form role="form" name="Form">
-                        <app-form-input [formType]="form" [cols]="2" [model]="client" ></app-form-input>
+                        <app-form-input [formType]="form" [cols]="2" [model]="client"></app-form-input>
                     </form>
                 </mk-box-content>
-                <mk-box-footer >
-                    <mk-box class="box box-default box-solid" *ngFor="let diskConfig of client.diskConfig">
+                <mk-box-footer>
+                    <mk-box class="box box-default box-solid" [isRemovable]="false" *ngFor="let diskConfig of client.disksConfig">
                         <mk-box-header class="box-header with-border">
                             <div class="row">
                                 <div class="col-md-4">
@@ -48,10 +48,6 @@
                                     <span translate="size"></span>: <b>{{getSizeInGB(diskConfig.size)}} GB</b>
                                 </div>
                             </div>
-                            <div class="box-tools pull-right">
-                                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
-                                </button>
-                            </div>
                             <!-- /.box-tools -->
                         </mk-box-header>
                         <!-- /.box-header -->
@@ -69,47 +65,62 @@
                                             <th translate="os"></th>
                                         </tr>
                                         </tbody>
-                                        <ng-template *ngIf="partition.size > 0">
-                                            <tbody *ngFor="let partition of diskConfig.partitions" >
-                                        <tr ng-class="{'odd': $index%2 == 0, 'even': $index%2 != 0}">
-                                            <td>{{partition.numPartition}}</td>
-                                            <td>{{partition.parttype}}</td>
-                                            <td>{{partition.filesystem}}</td>
-                                            <td>{{getSizeInGB(partition.size)}} GB</td>
-                                            <td><span class="badge" ng-class="{'bg-green': partition.usage < 60, 'bg-yellow': partition.usage >= 60 && partition.usage < 80, 'bg-red': partition.usage >= 80}">{{partition.usage}}%</span></td>
-                                            <td>{{partition.osName}}</td>
-                                        </tr>
-                                        <tr *ngIf="partition.partitionCode == 'ca' && partition.cacheContent.files.length > 0" class="client-cache-info" ng-class="{'odd': $index%2 == 0, 'even': $index%2 != 0}">
-                                            <td colspan="6">
-                                                <span style="font-weight: bold" translate="cache_content"></span>
-                                                <table class="table">
-                                                    <thead>
-                                                    <tr>
-                                                        <th translate="type"></th>
-                                                        <th translate="name"></th>
-                                                        <th translate="size"></th>
-                                                    </tr>
-                                                    </thead>
-                                                    <tbody>
-                                                    <tr *ngFor="let file of partition.cacheContent.files">
-                                                        <td>{{file.type}}</td>
-                                                        <td>{{file.name}}</td>
-                                                        <td>{{file.size}}</td>
-                                                    </tr>
-                                                    <tr>
-                                                        <td style="font-weight: bold" translate="free_space" colspan="2"></td>
-                                                        <td>{{partition.cacheContent.freeSpace}}</td>
-                                                    </tr>
-                                                    </tbody>
-                                                </table>
-                                            </td>
-                                        </tr>
-                                        </tbody>
-                                        </ng-template>
+                                        <ng-container *ngFor="let partition of diskConfig.partitions">
+                                            <tbody *ngIf="partition.size > 0">
+                                            <tr ng-class="{'odd': $index%2 == 0, 'even': $index%2 != 0}">
+                                                <td>{{partition.numPartition}}</td>
+                                                <td>{{partition.parttype}}</td>
+                                                <td>{{partition.filesystem}}</td>
+                                                <td>{{getSizeInGB(partition.size)}} GB</td>
+                                                <td><span class="badge"
+                                                          [ngClass]="getPartitionUsageClass(partition.usage)">{{partition.usage}}
+                                                    %</span></td>
+                                                <td>{{partition.osName}}</td>
+                                            </tr>
+                                            <tr *ngIf="partition.partitionCode == 'ca' && partition.cacheContent.files.length > 0"
+                                                class="client-cache-info"
+                                                ng-class="{'odd': $index%2 == 0, 'even': $index%2 != 0}">
+                                                <td colspan="6">
+                                                    <span style="font-weight: bold" translate="cache_content"></span>
+                                                    <table class="table">
+                                                        <thead>
+                                                        <tr>
+                                                            <th translate="type"></th>
+                                                            <th translate="name"></th>
+                                                            <th translate="size"></th>
+                                                        </tr>
+                                                        </thead>
+                                                        <tbody>
+                                                        <tr *ngFor="let file of partition.cacheContent.files">
+                                                            <td>{{file.type}}</td>
+                                                            <td>{{file.name}}</td>
+                                                            <td>{{file.size}}</td>
+                                                        </tr>
+                                                        <tr>
+                                                            <td style="font-weight: bold" translate="free_space"
+                                                                colspan="2"></td>
+                                                            <td>{{partition.cacheContent.freeSpace}}</td>
+                                                        </tr>
+                                                        </tbody>
+                                                    </table>
+                                                </td>
+                                            </tr>
+                                            </tbody>
+                                        </ng-container>
                                     </table>
                                 </div>
                                 <div class="col-md-4">
                                     <!--flot dataset="diskConfig.diskChartData" options="diskConfig.diskChartOptions" height="200px"></flot-->
+                                    <div class="chart" >
+                                        <canvas baseChart
+                                                [data]="diskConfig.diskChartData"
+                                                [labels]="diskConfig.diskChartLabels"
+                                                [colors]="diskConfig.diskPieChartColors"
+                                                [chartType]="'pie'"
+                                                [plugins]="pluginDataLabels"
+                                                [options]="diskConfig.diskChartOptions">
+                                        </canvas>
+                                    </div>
                                 </div>
                             </div>
                         </mk-box-content>
diff --git a/admin/WebConsole3/frontend/src/app/pages/client/client.component.ts b/admin/WebConsole3/frontend/src/app/pages/client/client.component.ts
index 50346ffd..0611d6dc 100644
--- a/admin/WebConsole3/frontend/src/app/pages/client/client.component.ts
+++ b/admin/WebConsole3/frontend/src/app/pages/client/client.component.ts
@@ -12,7 +12,8 @@ import {Repository} from '../../model/repository';
 import {HardwareProfile} from '../../model/hardware-profile';
 import {OgCommonService} from '../../service/og-common.service';
 import {ClientFormType} from '../../form-type/client.form-type';
-import {GlobunetFormType} from '../../form-type/globunet.form-type';
+import * as pluginDataLabels from 'chartjs-plugin-datalabels';
+import {ChartOptions} from 'chart.js';
 
 @Component({
     selector: 'app-client',
@@ -27,6 +28,7 @@ export class ClientComponent implements OnInit {
     public oglives: any[] = [];
     private formType: ClientFormType;
     public form;
+    public pluginDataLabels;
 
     // this tells the tabs component which Pages
     // should be each tab's root Page
@@ -39,6 +41,7 @@ export class ClientComponent implements OnInit {
                 private hardwareProfileService: HardwareProfileService,
                 private ogCommonService: OgCommonService) {
         this.client = new Client();
+        this.client.disksConfig = [];
         this.formType = new ClientFormType();
         this.form = this.formType.getForm();
     }
@@ -57,6 +60,17 @@ export class ClientComponent implements OnInit {
                     this.clientService.read(id).subscribe(
                         client => {
                             this.client = client;
+                            this.client.disksConfig = this.ogCommonService.getDisksConfigFromPartitions(this.client.partitions);
+
+                            const self = this;
+                            this.client.disksConfig.forEach(function(diskConfig) {
+                                const chartData = self.getChartData(diskConfig);
+                                diskConfig.diskChartData = chartData.diskChartData;
+                                diskConfig.diskChartLabels = chartData.diskChartLabels;
+                                diskConfig.diskPieChartColors = chartData.diskPieChartColors;
+                                diskConfig.diskChartOptions = chartData.diskChartOptions;
+                            });
+
                         }
                     );
                 }
@@ -122,6 +136,75 @@ export class ClientComponent implements OnInit {
         );
     }
 
+    getChartData(diskConfig) {
+        const diskChartData = [];
+        const diskChartLabels = [];
+        const diskPieChartColors = [{
+            backgroundColor: []
+        }];
+        const self = this;
+        diskConfig.partitions.forEach(function(partition) {
+            if (partition.size > 0) {
+                self.setPartitionPercentOfDisk(diskConfig, partition);
+                diskChartData.push(partition.percentOfDisk);
+                diskChartLabels.push([
+                    (partition.os || partition.filesystem),
+                    partition.percentOfDisk + '%'
+                ]);
+                diskPieChartColors[0].backgroundColor.push(self.getPartitionColor(partition));
+            }
+        });
+        const diskChartOptions: ChartOptions = {
+            responsive: true,
+            legend: {
+                position: 'bottom'
+            },
+            plugins: {
+                datalabels: {
+                    formatter: (value, ctx) => {
+                        const label = ctx.chart.data.labels[ctx.dataIndex];
+                        return label;
+                    },
+                },
+            }
+        };
+
+        return {
+            diskChartData: diskChartData,
+            diskChartLabels: diskChartLabels,
+            diskChartOptions: diskChartOptions,
+            diskPieChartColors: diskPieChartColors
+        };
+    }
+
+    setPartitionPercentOfDisk(diskConfig, partition) {
+        partition.percentOfDisk = Math.round(((partition.size * 100) / diskConfig.size) * 100) / 100;
+    }
+
+    labelFormatter(label, series) {
+        return '<div style="font-size:13px; text-align:center; padding:2px; color: #000; font-weight: 600;">'
+            + '<br>'
+            + series.percentOfDisk + '%</div>';
+    }
+
+    getPartitionColor(partition) {
+        let color = 'rgb(252, 90, 90)';
+
+        // Para la partición de datos se usa un color específico
+        if (partition.osName === 'DATA') {
+            color = 'rgb(237,194,64)';
+        } else if (partition.filesystem === 'NTFS') {
+            color = 'rgb(0,192, 239)';
+        } else if (partition.filesystem.match('EXT')) {
+            color = 'rgb(96, 92, 168)';
+        } else if (partition.filesystem.match('LINUX-SWAP')) {
+            color = 'rgb(84, 84, 84)';
+        } else if (partition.filesystem.match('CACHE')) {
+            color = 'rgb(252, 90, 90)';
+        }
+        return color;
+    }
+
     save() {
         let request: Observable<Client>;
         if (this.client.id !== 0) {
@@ -146,5 +229,16 @@ export class ClientComponent implements OnInit {
     }
 
 
+    getPartitionUsageClass(usage: number | string | number) {
+        let result = '';
 
+        if (usage < 60) {
+            result = 'bg-green';
+        } else if (usage >= 60 && usage < 80) {
+            result = 'bg-yellow';
+        } else if (usage >= 80) {
+            result = 'bg-red';
+        }
+        return result;
+    }
 }
diff --git a/admin/WebConsole3/frontend/src/assets/i18n/es.json b/admin/WebConsole3/frontend/src/assets/i18n/es.json
index dfc609c3..7427ea51 100644
--- a/admin/WebConsole3/frontend/src/assets/i18n/es.json
+++ b/admin/WebConsole3/frontend/src/assets/i18n/es.json
@@ -110,7 +110,7 @@
 	"images_info": "Info imágenes",
 	"imageUrl": "Url imagen",
 	"info": "Información",
-	"initializing": "Opengnsys",
+	"initializing": "Inicializando",
 	"invalid_login": "Usuario o contraseña no válido",
 	"ip": "Ip",
 	"january": "Enero",
diff --git a/admin/WebConsole3/frontend/src/environments/environment.ts b/admin/WebConsole3/frontend/src/environments/environment.ts
index fcc0dcba..16b61e25 100644
--- a/admin/WebConsole3/frontend/src/environments/environment.ts
+++ b/admin/WebConsole3/frontend/src/environments/environment.ts
@@ -1,7 +1,7 @@
 // This file can be replaced during build by using the `fileReplacements` array.
 // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
 // The list of file replacements can be found in `angular.json`.
-const url = 'https://SERVERIP/opengnsys3';
+const url = 'https://172.16.140.210/opengnsys3';
 export const environment = {
   production: false,
   BASE_URL: url,