From 8e458b23a413ebfb9cf153a06240bc7d8472b015 Mon Sep 17 00:00:00 2001
From: jkazmierczak <jkazmierczak@man.poznan.pl>
Date: Tue, 20 May 2025 15:16:48 +0200
Subject: [PATCH 1/3] search in remote clusters view
---
.../clusters/manager/manager.component.html | 24 +++---
.../clusters/manager/manager.component.ts | 73 ++++++++++---------
2 files changed, 51 insertions(+), 46 deletions(-)
diff --git a/src/app/shared/admin/clusters/manager/manager.component.html b/src/app/shared/admin/clusters/manager/manager.component.html
index 49225644..e370b9a4 100644
--- a/src/app/shared/admin/clusters/manager/manager.component.html
+++ b/src/app/shared/admin/clusters/manager/manager.component.html
@@ -1,11 +1,13 @@
<div style="display: flex; align-items: center; margin-top:20px">
- <div style="margin-right:20px">
- <div >
+ <div style=" display:flex; align-items: center;">
+ <div style="margin-right:20px;">
<button class="btn btn-primary" (click)="modal.show()">New Cluster</button>
</div>
- </div>
- <div class="flex" style="margin-right:20px">
-
+ <span class="p-input-icon-right">
+ <i class="pi pi-search" style="font-size: 13px; top: 16px; margin-right: 5px;"></i>
+ <input pInputText class="form-control" name="search" id="search"
+ placeholder="Search" type="text" [(ngModel)]="searchValue" (ngModelChange)="filterClusters()">
+ </span>
</div>
</div>
@@ -13,7 +15,7 @@
<div class="background-section">
<p-table
- [value]="clusters"
+ [value]="filteredClusters"
[paginator]="true"
[rows]="maxItemsOnPage"
[rowsPerPageOptions]="[15, 20, 25, 30, 50]"
@@ -44,11 +46,11 @@
<ng-template pTemplate="body" let-cluster>
<tr>
<td [routerLink]="[cluster.id]">{{cluster.id}}</td>
- <td>{{cluster.name}}</td>
- <td>{{cluster.codename}}</td>
- <td>{{('CLUSTERS.'+cluster.state.toString().toUpperCase() ) | translate}}</td>
- <td>{{cluster.creationDate | date: 'dd-MM-yyyy HH:mm'}}</td>
- <td>{{cluster.modificationDate | date: 'dd-MM-yyyy HH:mm'}}</td>
+ <td [routerLink]="[cluster.id]">{{cluster.name}}</td>
+ <td [routerLink]="[cluster.id]">{{cluster.codename}}</td>
+ <td [routerLink]="[cluster.id]">{{('CLUSTERS.'+cluster.state.toString().toUpperCase() ) | translate}}</td>
+ <td [routerLink]="[cluster.id]">{{cluster.creationDate | date: 'dd-MM-yyyy HH:mm'}}</td>
+ <td [routerLink]="[cluster.id]">{{cluster.modificationDate | date: 'dd-MM-yyyy HH:mm'}}</td>
<td class="text-right">
<span class="dropdown">
<a style="display: inline-block" class="dropdown-toggle" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" href="#" role="button">
diff --git a/src/app/shared/admin/clusters/manager/manager.component.ts b/src/app/shared/admin/clusters/manager/manager.component.ts
index 786a8dc6..75113f3a 100644
--- a/src/app/shared/admin/clusters/manager/manager.component.ts
+++ b/src/app/shared/admin/clusters/manager/manager.component.ts
@@ -16,6 +16,8 @@ export class ClusterManagerComponent {
public addedCluster: ClusterManager = new ClusterManager();
public updatedFile : File = null;
public maxItemsOnPage = 15;
+ public searchValue = '';
+ filteredClusters: ClusterManager[] = [];
public domains = [];
@@ -23,49 +25,50 @@ export class ClusterManagerComponent {
public modal: ModalComponent;
constructor(private clusterService: ClusterManagerService,
- private domainService: DomainService
- ) {
+ private domainService: DomainService) {
this.getAllClusters();
this.domainService.getAllBase().subscribe(result => {
this.domains = result.filter(d => d.id !== this.domainService.getGlobalDomainId());
});
}
- public saveFile(event: any) {
- console.log(event);
- this.updatedFile =event.files[0];
- }
-
-public getAllClusters() {
- this.clusterService.getAllClusters().subscribe(result => {
- console.log(result);
- this.clusters = result;
- })
- }
-
-public closeModalAndSaveCluster() {
- this.clusterService.sendCluster(this.updatedFile, this.addedCluster).subscribe(result => {
- console.log(result);
- this.getAllClusters();
- this.modal.hide();
- this.updatedFile = null;
- this.addedCluster = new ClusterManager();
- }, error => {
- console.error(error);
-
+ public saveFile(event: any) {
+ console.log(event);
+ this.updatedFile =event.files[0];
}
-)
-}
-
-
-public onDomainSelection(event: any) {
-
- console.log(event);
- this.addedCluster.domainNames = [event]
-
-}
-
+ public getAllClusters() {
+ this.clusterService.getAllClusters().subscribe(result => {
+ console.log(result);
+ this.clusters = result;
+ this.filterClusters();
+ })
+ }
+ public closeModalAndSaveCluster() {
+ this.clusterService.sendCluster(this.updatedFile, this.addedCluster).subscribe(result => {
+ console.log(result);
+ this.getAllClusters();
+ this.modal.hide();
+ this.updatedFile = null;
+ this.addedCluster = new ClusterManager();
+ }, error => {
+ console.error(error);
+ })
+ }
+
+
+ public onDomainSelection(event: any) {
+ console.log(event);
+ this.addedCluster.domainNames = [event]
+ }
+ filterClusters() {
+ const value = this.searchValue?.toLowerCase() || '';
+ this.filteredClusters = this.clusters.filter(cluster =>
+ cluster.name?.toLowerCase().includes(value) ||
+ cluster.codename?.toLowerCase().includes(value) ||
+ cluster.id?.toString().includes(value)
+ );
+ }
}
--
GitLab
From 970c3e4b66ec708bdbfcba835c33531c7fcdf56c Mon Sep 17 00:00:00 2001
From: jkazmierczak <jkazmierczak@man.poznan.pl>
Date: Tue, 20 May 2025 15:18:02 +0200
Subject: [PATCH 2/3] visual fixes
---
.../appdetails/appdetails.component.html | 4 +-
.../domains/domain/domain.component.css | 9 ++++
.../domains/domain/domain.component.html | 41 +++++++++++--------
3 files changed, 34 insertions(+), 20 deletions(-)
diff --git a/src/app/appmarket/appdetails/appdetails.component.html b/src/app/appmarket/appdetails/appdetails.component.html
index 54d16fe6..84a279b8 100644
--- a/src/app/appmarket/appdetails/appdetails.component.html
+++ b/src/app/appmarket/appdetails/appdetails.component.html
@@ -4,8 +4,8 @@
<div *ngIf="app">
<img alt="App logo" [src]="(appImagesService.getAppLogoUrl(appId) | secure) || 'assets/images/app-logo-example.png'" height="90px" width="90px"/>
</div>
- <div *ngIf="!app">
- <img alt="App logo" src="assets/images/app-logo-example.png" height="90px" width="90px"/>
+ <div *ngIf="!app" style="height:90px; align-content:center;">
+ <img alt="App logo" src="assets/images/app-logo-example.png" width="90px"/>
</div>
<h3 style="margin:0 20px;">{{app?.name}}</h3>
</div>
diff --git a/src/app/appmarket/domains/domain/domain.component.css b/src/app/appmarket/domains/domain/domain.component.css
index 5bcb6ebc..90950995 100644
--- a/src/app/appmarket/domains/domain/domain.component.css
+++ b/src/app/appmarket/domains/domain/domain.component.css
@@ -60,3 +60,12 @@ input.ng-dirty.ng-invalid {
border:none;
box-shadow: none;
}
+.form-control[disabled],
+fieldset[disabled] .form-control {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ background: transparent;
+ border:none;
+ box-shadow: none;
+}
diff --git a/src/app/appmarket/domains/domain/domain.component.html b/src/app/appmarket/domains/domain/domain.component.html
index 4a2bbc07..c2a98386 100644
--- a/src/app/appmarket/domains/domain/domain.component.html
+++ b/src/app/appmarket/domains/domain/domain.component.html
@@ -36,7 +36,7 @@
<div class="form-group" *ngIf="!isInMode(ComponentMode.CREATE) && (authService.hasRole('ROLE_SYSTEM_ADMIN') || authService.hasRole('ROLE_OPERATOR'))">
<label class="col-sm-2 control-label">{{ 'DOMAIN_DETAILS.ID_IN_DB' | translate }}</label>
<div class="col-sm-10">
- <p class="form-control-static">{{domain.id}}</p>
+ <p class="form-control-static" style="padding: 6px 12px">{{domain.id}}</p>
</div>
</div>
<hr/>
@@ -89,8 +89,8 @@
<div class="form-group" *ngIf="domain?.id !== domainService.getGlobalDomainId() && isInMode(ComponentMode.VIEW) && isManual()">
<label class="col-sm-2 control-label text-right" for="configured-status">{{ 'DOMAIN_DETAILS.DCN_STATUS' | translate }}</label>
<div class="col-sm-10" id="configured-status" style="padding-top: 6px;">
- <p *ngIf="domain?.domainDcnDetails?.dcnConfigured">{{ 'DOMAIN_DETAILS.CONFIGURED_VIEW' | translate }}</p>
- <p *ngIf="!domain?.domainDcnDetails?.dcnConfigured">{{ 'DOMAIN_DETAILS.NOT_CONFIGURED_VIEW' | translate }}</p>
+ <p style="padding: 2px 12px" *ngIf="domain?.domainDcnDetails?.dcnConfigured">{{ 'DOMAIN_DETAILS.CONFIGURED_VIEW' | translate }}</p>
+ <p style="padding: 2px 12px" *ngIf="!domain?.domainDcnDetails?.dcnConfigured">{{ 'DOMAIN_DETAILS.NOT_CONFIGURED_VIEW' | translate }}</p>
</div>
</div>
@@ -104,11 +104,11 @@
</div>
- <div class="background-section" *ngIf="isInMode(ComponentMode.VIEW) && !authService.hasRole('ROLE_OPERATOR')">
+ <div class="background-section" *ngIf="isInMode(ComponentMode.VIEW) && !authService.hasRole('ROLE_OPERATOR')">
<h4 style="font-size:15px; font-weight: bold">{{ 'DOMAIN_DETAILS.DOMAIN_USERS' | translate }}</h4>
- <div class="panel-body">
- <table class="table table-hover table-condensed" aria-describedby="Domains details table">
- <thead>
+ <div class="panel-body">
+ <table *ngIf="domainUsers.length !== 0" class="table table-hover table-condensed" aria-describedby="Domains details table">
+ <thead >
<tr>
<th scope="col" *roles="['ROLE_SYSTEM_ADMIN']">{{ 'DOMAIN_DETAILS.ID' | translate }}</th>
<th scope="col">{{ 'DOMAIN_DETAILS.USER_NAME' | translate }}</th>
@@ -120,9 +120,6 @@
</thead>
<tbody>
- <tr *ngIf="domainUsers.length === 0" >
- <td colspan="6" style="text-align: center">None</td>
- </tr>
<ng-template ngFor let-user [ngForOf]="domainUsers">
<tr>
<td *ngIf="authService.hasRole('ROLE_SYSTEM_ADMIN')">{{user.id}}</td>
@@ -145,6 +142,11 @@
</tbody>
</table>
+ <div>
+ <tr *ngIf="domainUsers.length === 0" >
+ <td >None</td>
+ </tr>
+ </div>
</div>
</div>
@@ -242,7 +244,7 @@
<div class="background-section" *ngIf="isInMode(ComponentMode.VIEW) && !authService.hasRole('ROLE_OPERATOR')">
<h4 style="font-size:15px; font-weight: bold">{{ 'DOMAINS.LIST.GROUP' | translate }}</h4>
<div class="panel-body">
- <table class="table table-hover table-condensed" aria-describedby="Domain group list">
+ <table *ngIf="domain.groups.length !== 0" class="table table-hover table-condensed" aria-describedby="Domain group list">
<thead>
<tr>
<th scope="col">{{ 'DOMAINS.LIST.DOMAIN_NAME' | translate }}</th>
@@ -251,9 +253,6 @@
</thead>
<tbody>
- <tr *ngIf="domain.groups.length === 0" >
- <td colspan="6" style="text-align: center">None</td>
- </tr>
<ng-template ngFor let-group [ngForOf]="domain.groups">
<tr>
<td>{{group.name}}</td>
@@ -263,6 +262,9 @@
</tbody>
</table>
+ <div *ngIf="domain.groups.length === 0" >
+ <p>None</p>
+ </div>
</div>
</div>
@@ -270,8 +272,11 @@
<!-- CLUSTER CONFIGURATION READ ONLY PRESENTATION -->
<div class="background-section" *ngIf="isInMode(ComponentMode.VIEW) && !authService.hasRole('ROLE_OPERATOR')">
<h4 style="font-size:15px; font-weight: bold">{{ 'CLUSTERS.CONFIGURATION' | translate }}</h4>
+ <div class="panel-body" *ngIf="domain.clusters.length === 0" >
+ <p>None</p>
+ </div>
- <div class="form-group" *ngIf="domain.clusters.length >0">
+ <div class="form-group panel-body" *ngIf="domain.clusters.length >0">
<label for="clusterId" class="col-sm-2 control-label">{{ 'CLUSTERS.ID' | translate }}</label>
<div class="col-sm-10">
<input type="text" class="form-control" [disabled]="true" id="clusterId "
@@ -279,7 +284,7 @@
</div>
</div>
- <div class="form-group" *ngIf="domain.clusters.length >0">
+ <div class="form-group panel-body" *ngIf="domain.clusters.length >0">
<label for="clusterName" class="col-sm-2 control-label">{{ 'CLUSTERS.NAME' | translate }}</label>
<div class="col-sm-10">
<input type="text" class="form-control" [disabled]="true" id="clusterName "
@@ -287,7 +292,7 @@
</div>
</div>
- <div class="form-group" *ngIf="domain.clusters.length >0">
+ <div class="form-group panel-body" *ngIf="domain.clusters.length >0">
<label for="clusterCodeName" class="col-sm-2 control-label">{{ 'CLUSTERS.CODENAME' | translate }}</label>
<div class="col-sm-10">
<input type="text" class="form-control" [disabled]="true" id="clusterCodeName "
@@ -295,7 +300,7 @@
</div>
</div>
- <div class="form-group" *ngIf="domain.clusters.length >0">
+ <div class="form-group panel-body" *ngIf="domain.clusters.length >0">
<label for="clusterDescription" class="col-sm-2 control-label">{{ 'CLUSTERS.DESCRIPTION' | translate }}</label>
<div class="col-sm-10">
<input type="text" class="form-control" [disabled]="true" id="clusterDescription "
--
GitLab
From f2a140dd797d19c68225b66ef1e8c573da238a95 Mon Sep 17 00:00:00 2001
From: jkazmierczak <jkazmierczak@man.poznan.pl>
Date: Tue, 20 May 2025 15:47:12 +0200
Subject: [PATCH 3/3] changed header position
---
.../appinstancelist/appinstancelist.component.html | 3 ++-
.../app-management-list/appmanagementlist.component.html | 6 +++---
.../bulkDeployment/bulk-list/bulk-list.component.html | 5 +++--
.../domains/domain-groups/domain-groups.component.html | 3 ++-
src/app/appmarket/domains/list/domainslist.component.html | 2 +-
.../shared/admin/clusters/manager/manager.component.html | 8 +++++---
src/app/shared/users/list/userslist.component.html | 5 +++--
7 files changed, 19 insertions(+), 13 deletions(-)
diff --git a/src/app/appmarket/appinstance/appinstancelist/appinstancelist.component.html b/src/app/appmarket/appinstance/appinstancelist/appinstancelist.component.html
index 7af02f7f..ad6b14bd 100644
--- a/src/app/appmarket/appinstance/appinstancelist/appinstancelist.component.html
+++ b/src/app/appmarket/appinstance/appinstancelist/appinstancelist.component.html
@@ -1,3 +1,4 @@
+<h4 style="margin-top:40px; font-weight: bold" *roles="['ROLE_DOMAIN_ADMIN', 'ROLE_SYSTEM_ADMIN', 'ROLE_OPERATOR']">{{ 'APP_INSTANCES.DEPLOYED' | translate }}</h4>
<div style="display: flex; align-items: flex-start; justify-content: space-between; margin-top:20px">
<div style="display:flex; align-items: center;">
<span class="p-input-icon-right">
@@ -30,7 +31,7 @@
</div>
</div>
-<h4 style="margin-top:40px; font-weight: bold" *roles="['ROLE_DOMAIN_ADMIN', 'ROLE_SYSTEM_ADMIN', 'ROLE_OPERATOR']">{{ 'APP_INSTANCES.DEPLOYED' | translate }}</h4>
+
<div *ngIf="selectedOption === 'list'" class="background-section" style="margin-top:30px">
<p-table [value]="appDeployedInstances | async | searchAppInstance: searchValue"
[paginator]="true"
diff --git a/src/app/appmarket/appmanagement/app-management-list/appmanagementlist.component.html b/src/app/appmarket/appmanagement/app-management-list/appmanagementlist.component.html
index 7e8d8345..4da61abe 100644
--- a/src/app/appmarket/appmanagement/app-management-list/appmanagementlist.component.html
+++ b/src/app/appmarket/appmanagement/app-management-list/appmanagementlist.component.html
@@ -1,6 +1,6 @@
<div class="">
-
- <div style="display:flex; ">
+ <h4 class="header">{{'APPS_MANAGEMENT.TITLE'| translate}}</h4>
+ <div style="display:flex; margin-top:20px">
<div style="margin-right:20px">
<span class="p-input-icon-right" style="width: 100%">
<i class="pi pi-search" style="font-size: 13px; top: 16px; margin-right: 5px;"></i>
@@ -13,7 +13,7 @@
</div>
</div>
- <h4 class="header">{{'APPS_MANAGEMENT.TITLE'| translate}}</h4>
+
<div class="background-section">
<p-table [value]="apps" class="p-datatable-hover p-datatable-sm" [responsive]="true">
<ng-template pTemplate="header">
diff --git a/src/app/appmarket/bulkDeployment/bulk-list/bulk-list.component.html b/src/app/appmarket/bulkDeployment/bulk-list/bulk-list.component.html
index 12193d91..8decfa42 100644
--- a/src/app/appmarket/bulkDeployment/bulk-list/bulk-list.component.html
+++ b/src/app/appmarket/bulkDeployment/bulk-list/bulk-list.component.html
@@ -1,5 +1,6 @@
+<h4 class="header">{{header | translate}}</h4>
<div class="">
- <div style="display:flex; ">
+ <div style="display:flex; margin-top:20px">
<div style="margin-right:20px">
<span class="p-input-icon-right" style="width: 100%">
<i class="pi pi-search" style="font-size: 13px; top: 16px; margin-right: 5px;"></i>
@@ -45,7 +46,7 @@
<p-inputSwitch *ngIf="mode=== bulkTypeApp" id="showDeleted" (onChange)="refreshBulks()" [(ngModel)]="showDeleted" ngDefaultControl/>
</div>
</div>
- <h4 class="header">{{header | translate}}</h4>
+
<!-- <div class="" style="display: flex; justify-content: space-between; margin-top: 10px;">-->
<!-- <div class="flex">-->
<!-- <div class="flex align-items-center mr-1">{{ 'BULK.LIST.PER_PAGE' | translate }}:</div>-->
diff --git a/src/app/appmarket/domains/domain-groups/domain-groups.component.html b/src/app/appmarket/domains/domain-groups/domain-groups.component.html
index efb93d02..7c248d9e 100644
--- a/src/app/appmarket/domains/domain-groups/domain-groups.component.html
+++ b/src/app/appmarket/domains/domain-groups/domain-groups.component.html
@@ -1,3 +1,4 @@
+<h4 class="header">{{'DOMAINS.LIST.GROUPS' | translate}}</h4>
<div style="display: flex; align-items: center; margin-top:20px">
<div style="margin-right:20px">
<span class="p-input-icon-right" style="width: 100%">
@@ -10,7 +11,7 @@
role="button">{{'DOMAINS.ADD_BUTTON' | translate}}</button>
</div>
</div>
-<h4 class="header">{{'DOMAINS.LIST.GROUPS' | translate}}</h4>
+
<div class="background-section">
diff --git a/src/app/appmarket/domains/list/domainslist.component.html b/src/app/appmarket/domains/list/domainslist.component.html
index 737b5a4d..865e3f59 100644
--- a/src/app/appmarket/domains/list/domainslist.component.html
+++ b/src/app/appmarket/domains/list/domainslist.component.html
@@ -1,3 +1,4 @@
+<h4 class="header">{{ 'DOMAINS.TITLE' | translate }}</h4>
<div style="display: flex; align-items: center; margin-top:20px">
<div style="margin-right:20px">
<span class="p-input-icon-right" style="width: 100%">
@@ -18,7 +19,6 @@
<label for="showNotActive"> {{'DOMAINS.NOTACTIVE' | translate}}</label>
</div>
</div>
- <h4 class="header">{{ 'DOMAINS.TITLE' | translate }}</h4>
<div class="background-section">
<p-table [value]="domains | async | searchDomain: searchValue: showNotActive"
diff --git a/src/app/shared/admin/clusters/manager/manager.component.html b/src/app/shared/admin/clusters/manager/manager.component.html
index e370b9a4..0fd942b3 100644
--- a/src/app/shared/admin/clusters/manager/manager.component.html
+++ b/src/app/shared/admin/clusters/manager/manager.component.html
@@ -1,3 +1,4 @@
+<h4 class="header">{{ 'CLUSTERS.CONFIGURATION' | translate }}</h4>
<div style="display: flex; align-items: center; margin-top:20px">
<div style=" display:flex; align-items: center;">
<div style="margin-right:20px;">
@@ -11,7 +12,7 @@
</div>
</div>
- <h4 class="header">{{ 'CLUSTERS.CONFIGURATION' | translate }}</h4>
+
<div class="background-section">
<p-table
@@ -103,10 +104,11 @@
</div>
</div>
<div class="nmaas-modal-footer">
+ <button type="button" class="btn btn-secondary"
+ (click)="this.modal.hide()">{{'UNDEPLOY_MODAL.CANCEL_BUTTON' | translate}}</button>
<button type="button" class="btn btn-primary" [disabled]="updatedFile === null || addedCluster?.name === null || addedCluster?.description === null"(click)="closeModalAndSaveCluster()"
pTooltip="Upload file is required before save" showDelay="2000" >{{'CLUSTERS.SAVE' | translate}}</button>
- <button type="button" class="btn btn-secondary"
- (click)="this.modal.hide()">{{'UNDEPLOY_MODAL.CANCEL_BUTTON' | translate}}</button>
+
</div>
</nmaas-modal>
diff --git a/src/app/shared/users/list/userslist.component.html b/src/app/shared/users/list/userslist.component.html
index 1425e8fb..4f27e95d 100644
--- a/src/app/shared/users/list/userslist.component.html
+++ b/src/app/shared/users/list/userslist.component.html
@@ -42,7 +42,8 @@
<!-- </ul>-->
<!-- </span>-->
<!-- </div>-->
-<div class="" style="display: flex">
+<h4 class="header"> {{ 'USERS.TITLE' | translate }}</h4>
+<div class="" style="display: flex; margin-top:20px">
<div *ngIf="isModeAllowed(ComponentMode.EDIT)"
style="margin-right: 15px; padding-top: 5px;"> {{'USERS.SEARCH' | translate}}</div>
@@ -65,7 +66,7 @@
</button>
</div>
- <h4 class="header"> {{ 'USERS.TITLE' | translate }}</h4>
+
<div class="background-section">
<p-table #dt [value]="displayUsers" [paginator]="true" [rows]="maxItemsOnPage"
[rowsPerPageOptions]="[15, 20, 25, 30, 50]" >
--
GitLab