feat(oggui): Add OG Repository selector to deploy image menu

- Added OG Repository dropdown for both monolithic and git image flows. - Fixed CSS layout issues for the select dropdowns. - Updated translation keys to differentiate between OG Repository and Git Repository. - Prevented loadImages from making a 404 API request when using Git flow.
2026-07-10 09:47:38 +02:00 · 2026-07-10 09:47:38 +02:00 · dd1b20b9d1
parent 3390500f06
commit dd1b20b9d1
5 changed files with 86 additions and 15 deletions
--- a/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.html
+++ b/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.html
@ -102,8 +102,8 @@

      <!-- Campos monolítica -->
      @if (imageType === 'monolithic') {
-      <div class="monolithic-row">
-        <mat-form-field appearance="fill" class="half-width">
+      <div class="monolithic-row" style="display: flex; flex-direction: column; gap: 10px;">
+        <mat-form-field appearance="fill" class="full-width">
          <mat-label>{{ 'selectDeployMethod' | translate }}</mat-label>
          <mat-select [(ngModel)]="selectedMethod" name="selectedMethod" (selectionChange)="validateImageSize()">
            @for (method of allMethods; track method.value) {
@ -111,6 +111,19 @@
            }
          </mat-select>
        </mat-form-field>
+
+        <mat-form-field appearance="fill" class="full-width">
+          <mat-label>{{ 'selectRepository' | translate }}</mat-label>
+          <mat-select [(ngModel)]="selectedRepository" (selectionChange)="onRepositorySelected($event.value)" [compareWith]="compareRepositories" [disabled]="loadingAllRepositories">
+            @for (repo of allImageRepositories; track repo.uuid) {
+            <mat-option [value]="repo">{{ repo.name }} ({{ repo.ip }})</mat-option>
+            }
+          </mat-select>
+          @if (loadingAllRepositories) {
+          <mat-icon matSuffix>hourglass_empty</mat-icon>
+          }
+        </mat-form-field>
+
        <mat-form-field appearance="fill" class="full-width">
          <mat-label>{{ 'selectImagePrompt' | translate }}</mat-label>
          <mat-select [(ngModel)]="selectedImage" name="selectedImage" [disabled]="!imageType">
@ -127,8 +140,20 @@

      <!-- Campos Git -->
      @if (imageType === 'git') {
-      <div class="filters-row git-gap">
-        <mat-form-field appearance="fill" style="width: 300px;">
+      <div class="git-gap" style="display: flex; flex-direction: column; gap: 10px;">
+        <mat-form-field appearance="fill" style="width: 100%;">
+          <mat-label>{{ 'selectRepository' | translate }}</mat-label>
+          <mat-select [(ngModel)]="selectedRepository" (selectionChange)="onRepositorySelected($event.value)" [compareWith]="compareRepositories" [disabled]="loadingAllRepositories">
+            @for (repo of allImageRepositories; track repo.uuid) {
+            <mat-option [value]="repo">{{ repo.name }} ({{ repo.ip }})</mat-option>
+            }
+          </mat-select>
+          @if (loadingAllRepositories) {
+          <mat-icon matSuffix>hourglass_empty</mat-icon>
+          }
+        </mat-form-field>
+
+        <mat-form-field appearance="fill" style="width: 100%;">
          <mat-label>{{ 'buttonSelectRepository' | translate }}</mat-label>
          <mat-select [(ngModel)]="selectedGitRepository" (selectionChange)="onGitRepositoryChange($event.value)"
            [disabled]="loadingRepositories">
@ -143,10 +168,10 @@
          }
        </mat-form-field>

-        <mat-form-field appearance="fill" style="width: 300px;">
+        <mat-form-field appearance="fill" style="width: 100%;">
          <mat-label>{{ 'buttonSelectBranch' | translate }}</mat-label>
          <mat-select [(ngModel)]="selectedBranch" (selectionChange)="onGitBranchChange()"
-            [disabled]="loadingBranches || !selectedRepository">
+            [disabled]="loadingBranches || !selectedGitRepository">
            @for (branch of branches; track branch) {
            <mat-option [value]="branch">
              {{ branch }}
@ -158,7 +183,7 @@
          }
        </mat-form-field>

-        <mat-form-field appearance="fill" style="width: 200px;">
+        <mat-form-field appearance="fill" style="width: 100%;">
          <mat-label>{{ 'labelTag' | translate }}</mat-label>
          <mat-select [(ngModel)]="showOnlyTagged" (selectionChange)="onTagFilterChange()" [disabled]="!commits.length">
            <mat-option [value]="false">{{ 'buttonNo' | translate }}</mat-option>
--- a/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.ts
+++ b/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.ts
@ -63,6 +63,8 @@ export class DeployImageComponent implements OnInit {
  selectedModelClient: any = null;
  filteredPartitions: any[] = [];

+  allImageRepositories: any[] = [];
+  loadingAllRepositories: boolean = false;
  selectedRepository: any = null;
  imageType: string = 'monolithic';

@ -145,6 +147,42 @@ export class DeployImageComponent implements OnInit {
    this.route.queryParams.subscribe(params => {
      this.runScriptContext = params['runScriptContext'] ? JSON.parse(params['runScriptContext']) : null;
    });
+    this.loadAllRepositories();
+  }
+
+  loadAllRepositories() {
+    this.loadingAllRepositories = true;
+    this.http.get<any>(`${this.baseUrl}/image-repositories?page=1&itemsPerPage=10000`).subscribe(
+      (response: any) => {
+        this.allImageRepositories = response?.['hydra:member'] || [];
+        this.loadingAllRepositories = false;
+        // Si ya había un selectedRepository cargado por el cliente, asegurarse de enlazar la misma referencia del array
+        if (this.selectedRepository) {
+          const match = this.allImageRepositories.find(r => r.uuid === this.selectedRepository.uuid);
+          if (match) {
+            this.selectedRepository = match;
+          }
+        }
+      },
+      (error) => {
+        console.error(this.translate.instant('errorLoadingRepositories1'), error);
+        this.loadingAllRepositories = false;
+      }
+    );
+  }
+
+  compareRepositories(r1: any, r2: any): boolean {
+    return r1 && r2 ? r1.uuid === r2.uuid : r1 === r2;
+  }
+
+  onRepositorySelected(repo: any) {
+    this.selectedRepository = repo;
+    if (this.imageType === 'git') {
+      this.selectedGitRepository = '';
+      this.selectedBranch = '';
+      this.loadGitRepositories();
+    }
+    this.loadImages();
  }

  onImageTypeSelected(event: any) {
@ -217,7 +255,13 @@ export class DeployImageComponent implements OnInit {
        this.filteredPartitions = fullClientData.partitions;
        this.selectedRepository = fullClientData.repository ?? null;

-        if (this.selectedRepository?.uuid) {
+        if (this.selectedRepository?.uuid && this.allImageRepositories.length > 0) {
+          const match = this.allImageRepositories.find(r => r.uuid === this.selectedRepository.uuid);
+          if (match) {
+            this.selectedRepository = match;
+          }
+        } else if (this.selectedRepository?.uuid) {
+          // Fallback por si la llamada de loadAllRepositories no ha terminado
          this.http.get(`${this.baseUrl}/image-repositories/${this.selectedRepository.uuid}`).subscribe(
            (repository: any) => {
              this.selectedRepository = repository;
@ -267,7 +311,9 @@ export class DeployImageComponent implements OnInit {
    if (this.imageType === 'monolithic') {
      url = `${this.baseUrl}/image-image-repositories?status=success&repository.id=${repositoryId}&page=1&itemsPerPage=1000`;
    } else {
-      url = `${this.baseUrl}/git-image-repositories?status=success&repository.id=${repositoryId}&page=1&itemsPerPage=1000`;
+      // Para 'git', la carga de repositorios y ramas se maneja con loadGitRepositories() y loadGitBranches()
+      this.images = [];
+      return;
    }

    this.http.get(url).subscribe(
--- a/ogWebconsole/src/locale/cat.json
+++ b/ogWebconsole/src/locale/cat.json
@ -152,7 +152,7 @@
    "buttonSelectIso": "Seleccionar ISO",
    "buttonSelectOption": "Seleccionar opció",
    "buttonSelectPartition": "Seleccionar partició",
-    "buttonSelectRepository": "Seleccionar Repositori",
+    "buttonSelectRepository": "Seleccionar Repositori Git",
    "buttonSync": "Sincronitzar",
    "buttonUpdate": "Actualitzar",
    "buttonUpdateData": "Actualitzar dades",
@ -1282,7 +1282,7 @@
    "selectParentOuDhcpHint": "Seleccioni una Unitat Organitzativa Pare (OU) on agrupar les subxarxes i clients que es detectin automàticament en el servei DHCP.",
    "selectPartitionToBootOs": "Seleccionar partició per arrencar SO",
    "selectPartitionToInventory": "Seleccionar partició per inventariar",
-    "selectRepository": "Seleccionar repositori",
+    "selectRepository": "Seleccionar Repositori OG",
    "selectRepoToView": "Tria un repositori de la llista per veure el seu estat detallat.",
    "selectScriptToRun": "Seleccioni script a executar",
    "selectScriptToView": "Tria un script desat de la llista per veure el seu contingut i configurar paràmetres.",
--- a/ogWebconsole/src/locale/en.json
+++ b/ogWebconsole/src/locale/en.json
@ -152,7 +152,7 @@
    "buttonSelectIso": "Select ISO",
    "buttonSelectOption": "Select option",
    "buttonSelectPartition": "Select partition",
-    "buttonSelectRepository": "Select Repository",
+    "buttonSelectRepository": "Select Git Repository",
    "buttonSync": "Sync",
    "buttonUpdate": "Refresh",
    "buttonUpdateData": "Update data",
@ -1283,7 +1283,7 @@
    "selectParentOuDhcpHint": "Select a Parent Organizational Unit (OU) to group the subnets and clients automatically detected in the DHCP service.",
    "selectPartitionToBootOs": "Select partition to boot OS",
    "selectPartitionToInventory": "Select partition to inventory",
-    "selectRepository": "Select repository",
+    "selectRepository": "Select OG Repository",
    "selectRepoToView": "Select a repository from the list to view its detailed status.",
    "selectScriptToRun": "Select script to run",
    "selectScriptToView": "Select a saved script from the list to view its content and configure parameters.",
--- a/ogWebconsole/src/locale/es.json
+++ b/ogWebconsole/src/locale/es.json
@ -152,7 +152,7 @@
    "buttonSelectIso": "Seleccionar ISO",
    "buttonSelectOption": "Seleccionar opción",
    "buttonSelectPartition": "Seleccionar partición",
-    "buttonSelectRepository": "Seleccionar Repositorio",
+    "buttonSelectRepository": "Seleccionar Repositorio Git",
    "buttonSync": "Sincronizar",
    "buttonUpdate": "Actualizar",
    "buttonUpdateData": "Actualizar datos",
@ -1283,7 +1283,7 @@
    "selectParentOuDhcpHint": "Seleccione una Unidad Organizativa Padre (OU) donde agrupar las subredes y clientes que se detecten automáticamente en el servicio DHCP.",
    "selectPartitionToBootOs": "Seleccionar particion para arrancar SO",
    "selectPartitionToInventory": "Seleccionar partición para inventariar",
-    "selectRepository": "Seleccionar repositorio",
+    "selectRepository": "Seleccionar Repositorio OG",
    "selectRepoToView": "Elige un repositorio de la lista para ver su estado detallado.",
    "selectScriptToRun": "Seleccione script a ejecutar",
    "selectScriptToView": "Elige un script guardado de la lista para ver su contenido y configurar parámetros.",