refs #1794. Improvements, and new UX

ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.css

@@ -80,6 +80,11 @@
 
 .client-info {
   margin: 20px 0;
+  border-radius: 12px;
+  background-color: #f5f7fa;
+  padding: 20px;
+  border: 2px solid #d1d9e6;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
 }
 
 .info-section {

ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.html

@@ -72,7 +72,7 @@
       <mat-label>Seleccione imagen</mat-label>
       <mat-select [(ngModel)]="selectedImage" name="selectedImage">
         <mat-option *ngFor="let image of images" [value]="image">
-          <div class="unit-name"> {{ image.image?.name }} v{{ image.version?? 0 }}</div>
+          <div class="unit-name"> {{ image.name }}</div>
           <div style="font-size: smaller; color: gray;">{{ image.description }}</div>
         </mat-option>
       </mat-select>
@@ -81,7 +81,7 @@
     <mat-form-field appearance="fill" class="full-width">
       <mat-label>Seleccione método de deploy</mat-label>
       <mat-select [(ngModel)]="selectedMethod" name="selectedMethod" (selectionChange)="validateImageSize()">
-        <mat-option *ngFor="let method of allMethods" [value]="method">{{ method }}</mat-option>
+        <mat-option *ngFor="let method of allMethods" [value]="method.value">{{ method.name }}</mat-option>
       </mat-select>
     </mat-form-field>
   </div>

ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.ts

@@ -51,12 +51,11 @@ export class DeployImageComponent {
   selectedRepository: any = null;
 
   allMethods = [
-    'uftp',
+    { name: 'Multicast', value: 'udpcast' },
-    'udpcast',
+    { name: 'Unicast', value: 'unicast' },
-    'udpcast-direct',
+    { name: 'Multicast (direct)', value: 'udpcast-direct' },
-    'unicast',
+    { name: 'Unicast (direct)', value: 'unicast-direct' },
-    'unicast-direct',
+    { name: 'Torrent', value: 'p2p' },
-    'p2p'
   ];
 
   dataSource = new MatTableDataSource<any>();

ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.ts

@@ -77,7 +77,10 @@ export class PartitionAssistantComponent {
     this.selectedModelClient = this.clientData.find(
       (client: { status: string }) => client.status === 'og-live'
     ) || null;
-    this.loadPartitions(this.selectedModelClient);
+
+    if (this.selectedModelClient) {
+      this.loadPartitions(this.selectedModelClient);
+    }
   }
 
   get selectedDisk():any {
@@ -222,6 +225,7 @@ export class PartitionAssistantComponent {
 
     if (disk) {
       const remainingGB = this.getRemainingGB(disk.partitions, disk.totalDiskSize);
+
       if (remainingGB > 0) {
         const removedPartitions = disk.partitions.filter((p) => !p.removed);
         const maxPartitionNumber =
@@ -244,7 +248,7 @@ export class PartitionAssistantComponent {
         this.updatePartitionPercentages(disk.partitions, disk.totalDiskSize);
         this.updateDiskChart(disk);
       } else {
-        this.errorMessage = 'No hay suficiente espacio libre en el disco para crear una nueva partición.';
+        this.toastService.error('No hay suficiente espacio libre en el disco para crear una nueva partición.');
       }
     }
   }

ogWebconsole/src/app/components/groups/components/client-main-view/run-script-assistant/run-script-assistant.component.css

@@ -257,4 +257,8 @@ table {
   cursor: pointer;
 }
 
+.full-width {
+  width: 100%;
+}
+
 

ogWebconsole/src/app/components/groups/components/client-main-view/run-script-assistant/run-script-assistant.component.html

@@ -86,12 +86,15 @@
       <div class="script-preview" [innerHTML]="scriptContent"></div>
     </div>
 
-    <div class="script-params" *ngIf="parameters.length > 0">
+    <div class="script-params" *ngIf="parameterNames.length > 0">
       <h3>Ingrese los valores de los parámetros detectados:</h3>
-      <div *ngFor="let param of parameters; let i = index">
+      <div *ngFor="let paramName of parameterNames">
         <mat-form-field appearance="fill" class="full-width">
-          <mat-label>Parámetro {{ i + 1 }}</mat-label>
+          <mat-label>{{ paramName }}</mat-label>
-          <input matInput [(ngModel)]="parameters[i]" (input)="updateScript()" placeholder="Ingrese el valor">
+          <input matInput
+                 [ngModel]="parameters[paramName]"
+                 (ngModelChange)="onParamChange(paramName, $event)"
+                 placeholder="Ingrese el valor">
         </mat-form-field>
       </div>
     </div>

ogWebconsole/src/app/components/groups/components/client-main-view/run-script-assistant/run-script-assistant.component.ts

@@ -24,13 +24,14 @@ export class RunScriptAssistantComponent {
   loading: boolean = false;
   scripts: any[] = [];
   scriptContent: string = "";
-  parameters: string[] = [];
+  parameters: any = {};
   selectedScript: any = null;
   selectedClients: any[] = [];
   allSelected: boolean = true;
   commandType: string = 'existing';
   newScript: string = '';
   selection = new SelectionModel(true, []);
+  parameterNames: string[] = Object.keys(this.parameters);
 
   constructor(
     private http: HttpClient,
@@ -121,21 +122,39 @@ export class RunScriptAssistantComponent {
     if (this.selectedScript) {
       this.scriptContent = this.selectedScript.script;
 
-      const matches = this.scriptContent.match(/@\d+/g) || [];
+      const matches = this.scriptContent.match(/@(\w+)/g) || [];
-      this.parameters = new Array(matches.length).fill("");
+      const uniqueParams = Array.from(new Set(matches.map(m => m.slice(1))));
+
+      this.parameters = {};
+      uniqueParams.forEach(param => this.parameters[param] = '');
+
+      this.parameterNames = uniqueParams;
+
+      this.updateScript();
     }
   }
 
-  updateScript() {
+  onParamChange(name: string, value: string): void {
+    this.parameters[name] = value;
+    this.updateScript();
+  }
+
+  updateScript(): void {
     let updatedScript = this.selectedScript.script;
 
-    this.parameters.forEach((value, index) => {
+    for (const [key, value] of Object.entries(this.parameters)) {
-      updatedScript = updatedScript.replace(new RegExp(`@${index + 1}`, "g"), value || `@${index + 1}`);
+      const regex = new RegExp(`@${key}\\b`, 'g');
-    });
+      updatedScript = updatedScript.replace(regex, value || `@${key}`);
+    }
 
     this.scriptContent = updatedScript;
   }
 
+  trackByIndex(index: number): number {
+    return index;
+  }
+
+
   save(): void {
     this.loading = true;