Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

migrate admin ui to new sort directives #25208

Merged
merged 7 commits into from
Feb 15, 2024
Merged

migrate admin ui to new sort directives #25208

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2b886d8
migrate user-management to new sort directive
mshima Feb 15, 2024
cbb202c
migrate configuration to new sort directive
mshima Feb 15, 2024
0ec97aa
add sort utilities
mshima Feb 15, 2024
4d87f8c
migrate log to new sort directive
mshima Feb 15, 2024
3875ca0
drop SortDirective and SortByDirective
mshima Feb 15, 2024
45ff064
drop Signal from new sort components
mshima Feb 15, 2024
c9440fa
fix translate string.
mshima Feb 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
113 changes: 58 additions & 55 deletions ...ngular/templates/src/main/webapp/app/admin/configuration/configuration.component.html.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,69 +17,72 @@
limitations under the License.
-%>
@if (allBeans()) {
<div>
<h2 id="configuration-page-heading" <%= jhiPrefix %>Translate="configuration.title" data-cy="configurationPageHeading">__jhiTransformTranslate__('configuration.title')</h2>

<span <%= jhiPrefix %>Translate="configuration.filter">__jhiTransformTranslate__('configuration.filter')</span>
<input type="text" [(ngModel)]="beansFilter" (ngModelChange)="filterAndSortBeans()" class="form-control" />

<h3 id="spring-configuration">Spring configuration</h3>
<div>
<h2 id="configuration-page-heading" <%= jhiPrefix %>Translate="configuration.title" data-cy="configurationPageHeading">__jhiTransformTranslate__('configuration.title')</h2>

<table class="table table-striped table-bordered table-responsive d-table" aria-describedby="spring-configuration">
<thead>
<tr <%= jhiPrefix %>Sort predicate="prefix" [(ascending)]="beansAscending" (sortChange)="filterAndSortBeans()">
<th <%= jhiPrefix %>SortBy="prefix" scope="col" class="w-40">
<span <%= jhiPrefix %>Translate="configuration.table.prefix">__jhiTransformTranslate__('configuration.table.prefix')</span> <fa-icon icon="sort"></fa-icon>
</th>
<th scope="col" class="w-60"><span <%= jhiPrefix %>Translate="configuration.table.properties">__jhiTransformTranslate__('configuration.table.properties')</span></th>
</tr>
</thead>
<tbody>
@for (bean of beans(); track $index) {
<tr>
<td>
<span>{{ bean.prefix }}</span>
</td>
<td>
@for (property of bean.properties | keyvalue; track property.key) {
<div class="row">
<div class="col-md-4">{{ property.key }}</div>
<div class="col-md-8">
<span class="float-end bg-secondary break">{{ property.value | json }}</span>
</div>
</div>
}
</td>
</tr>
}
</tbody>
</table>
<span <%= jhiPrefix %>Translate="configuration.filter">__jhiTransformTranslate__('configuration.filter')</span>
<input type="text" [ngModel]="beansFilter()" (ngModelChange)="beansFilter.set($event)" class="form-control" />

@for (propertySource of propertySources(); track i; let i = $index) {
<div>
<h4 [id]="'property-source-' + i">
<span>{{ propertySource.name }}</span>
</h4>
<h3 id="spring-configuration">Spring configuration</h3>

<table class="table table-sm table-striped table-bordered table-responsive d-table" [attr.aria-describedby]="'property-source-' + i">
<table class="table table-striped table-bordered table-responsive d-table" aria-describedby="spring-configuration">
<thead>
<tr>
<th scope="col" class="w-40">Property</th>
<th scope="col" class="w-60">Value</th>
<tr <%= jhiPrefix %>Sort [sortState]="sortState" (sortChange)="sortState.set($event)">
<th <%= jhiPrefix %>SortBy="prefix" scope="col" class="w-40">
<span <%= jhiPrefix %>Translate="configuration.table.prefix">__jhiTransformTranslate__('configuration.table.prefix')</span> <fa-icon icon="sort"></fa-icon>
</th>
<th scope="col" class="w-60"><span <%= jhiPrefix %>Translate="configuration.table.properties">__jhiTransformTranslate__('configuration.table.properties')</span></th>
</tr>
</thead>
<tbody>
@for (property of propertySource.properties | keyvalue; track property.key) {
<tr>
<td class="break">{{ property.key }}</td>
<td class="break">
<span class="float-end bg-secondary break">{{ property.value.value }}</span>
</td>
</tr>
}
@for (bean of beans(); track $index) {
<tr>
<td>
<span>{{ bean.prefix }}</span>
</td>
<td>
@for (property of bean.properties | keyvalue; track property.key) {
<div class="row">
<div class="col-md-4">{{ property.key }}</div>
<div class="col-md-8">
<span class="float-end bg-secondary break">{{ property.value | json }}</span>
</div>
</div>
}
</td>
</tr>
}
</tbody>
</table>

@for (propertySource of propertySources(); track i; let i = $index) {
<div>
<h4 [id]="'property-source-' + i">
<span>{{ propertySource.name }}</span>
</h4>

<table
class="table table-sm table-striped table-bordered table-responsive d-table"
[attr.aria-describedby]="'property-source-' + i"
>
<thead>
<tr>
<th scope="col" class="w-40">Property</th>
<th scope="col" class="w-60">Value</th>
</tr>
</thead>
<tbody>
@for (property of propertySource.properties | keyvalue; track property.key) {
<tr>
<td class="break">{{ property.key }}</td>
<td class="break">
<span class="float-end bg-secondary break">{{ property.value.value }}</span>
</td>
</tr>
}
</tbody>
</table>
</div>
}
</div>
}
</div>
}
36 changes: 20 additions & 16 deletions .../angular/templates/src/main/webapp/app/admin/configuration/configuration.component.ts.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,11 @@
See the License for the specific language governing permissions and
limitations under the License.
-%>
import { Component, inject, OnInit, signal } from '@angular/core';
import { Component, computed, inject, OnInit, signal } from '@angular/core';

import SharedModule from 'app/shared/shared.module';
import { FormsModule } from '@angular/forms';
import { SortDirective, SortByDirective } from 'app/shared/sort';
import { SortDirective, SortByDirective, sortStateSignal, SortService } from 'app/shared/sort';
import { ConfigurationService } from './configuration.service';
import { Bean, PropertySource } from './configuration.model';

Expand All @@ -32,27 +32,31 @@ import { Bean, PropertySource } from './configuration.model';
})
export default class ConfigurationComponent implements OnInit {
allBeans = signal<Bean[] | undefined>(undefined);
beans = signal<Bean[]>([]);
beansFilter = '';
beansAscending = true;
beansFilter = signal<string>('');
propertySources = signal<PropertySource[]>([]);

sortState = sortStateSignal({ predicate: 'prefix', order: 'asc' });
beans = computed(() => {
let data = this.allBeans() ?? [];
const beansFilter = this.beansFilter();
if (beansFilter) {
data = data.filter(bean => bean.prefix.toLowerCase().includes(beansFilter.toLowerCase()));
}

const { order, predicate } = this.sortState();
if (predicate && order) {
data = data.sort(this.sortService.startSort({ predicate, order }));
}
return data;
});

private sortService = inject(SortService);
private configurationService = inject(ConfigurationService);

ngOnInit(): void {
this.configurationService.getBeans().subscribe(beans => {
this.allBeans.set(beans);
this.filterAndSortBeans();
});

this.configurationService.getPropertySources().subscribe(propertySources => (this.propertySources.set(propertySources)));
}

filterAndSortBeans(): void {
const beansAscendingValue = this.beansAscending ? -1 : 1;
const beansAscendingValueReverse = this.beansAscending ? 1 : -1;
this.beans.set(this.allBeans()!
.filter(bean => !this.beansFilter || bean.prefix.toLowerCase().includes(this.beansFilter.toLowerCase()))
.sort((a, b) => (a.prefix < b.prefix ? beansAscendingValue : beansAscendingValueReverse)));
this.configurationService.getPropertySources().subscribe(propertySources => this.propertySources.set(propertySources));
}
}
156 changes: 78 additions & 78 deletions generators/angular/templates/src/main/webapp/app/admin/logs/logs.component.html.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,95 +17,95 @@
limitations under the License.
-%>
@defer (when loggers() && !isLoading()) {
<div class="table-responsive">
<h2 id="logs-page-heading" <%= jhiPrefix %>Translate="logs.title" data-cy="logsPageHeading">__jhiTransformTranslate__('logs.title')</h2>
<div class="table-responsive">
<h2 id="logs-page-heading" <%= jhiPrefix %>Translate="logs.title" data-cy="logsPageHeading">__jhiTransformTranslate__('logs.title')</h2>

<%_ if (applicationTypeGateway && serviceDiscoveryAny) { _%>
<div class="float-end">
<select class="form-select" id="routesSelect" (change)="changeService($event)">
<option [ngValue]="null"></option>
@for (service of services; track $index) {
<option [value]="service">
{{ service }}
</option>
}
</select>
</div>
<%_ } _%>
<div class="float-end">
<select class="form-select" id="routesSelect" (change)="changeService($event)">
<option [ngValue]="null"></option>
@for (service of services; track $index) {
<option [value]="service">
{{ service }}
</option>
}
</select>
</div>
<%_ } _%>

<p <%= jhiPrefix %>Translate="logs.nbloggers" [translateValues]="{ total: loggers()?.length }">__jhiTransformTranslate__('logs.nbloggers', { "total": "{{ loggers()?.length }}" })</p>
<p <%= jhiPrefix %>Translate="logs.nbloggers" [translateValues]="{ total: loggers()?.length }">__jhiTransformTranslate__('logs.nbloggers', { "total": "{{ loggers()?.length }}" })</p>

<span <%= jhiPrefix %>Translate="logs.filter">__jhiTransformTranslate__('logs.filter')</span>
<input type="text" [(ngModel)]="filter" (ngModelChange)="filterAndSort()" class="form-control" />
<span <%= jhiPrefix %>Translate="logs.filter">__jhiTransformTranslate__('logs.filter')</span>
<input type="text" [ngModel]="filter()" (ngModelChange)="filter.set($event)" class="form-control" />

<table class="table table-sm table-striped table-bordered" aria-describedby="logs-page-heading">
<thead>
<tr <%= jhiPrefix %>Sort [(predicate)]="orderProp" [(ascending)]="ascending" (sortChange)="filterAndSort()">
<th <%= jhiPrefix %>SortBy="name" scope="col"><span <%= jhiPrefix %>Translate="logs.table.name">__jhiTransformTranslate__('logs.table.name')</span> <fa-icon icon="sort"></fa-icon></th>
<th <%= jhiPrefix %>SortBy="level" scope="col"><span <%= jhiPrefix %>Translate="logs.table.level">__jhiTransformTranslate__('logs.table.level')</span> <fa-icon icon="sort"></fa-icon></th>
</tr>
</thead>
<table class="table table-sm table-striped table-bordered" aria-describedby="logs-page-heading">
<thead>
<tr <%= jhiPrefix %>Sort [sortState]="sortState" (sortChange)="sortState.set($event)">
<th <%= jhiPrefix %>SortBy="name" scope="col"><span <%= jhiPrefix %>Translate="logs.table.name">__jhiTransformTranslate__('logs.table.name')</span> <fa-icon icon="sort"></fa-icon></th>
<th <%= jhiPrefix %>SortBy="level" scope="col"><span <%= jhiPrefix %>Translate="logs.table.level">__jhiTransformTranslate__('logs.table.level')</span> <fa-icon icon="sort"></fa-icon></th>
</tr>
</thead>

<tbody>
@for (logger of filteredAndOrderedLoggers(); track $index) {
<tr>
<td>
<small>{{ logger.name | slice: 0:140 }}</small>
</td>
<td>
<button
(click)="changeLevel(logger.name, 'TRACE')"
[ngClass]="logger.level === 'TRACE' ? 'btn-primary' : 'btn-light'"
class="btn btn-sm"
>
TRACE
</button>
<tbody>
@for (logger of filteredAndOrderedLoggers(); track $index) {
<tr>
<td>
<small>{{ logger.name | slice: 0 : 140 }}</small>
</td>
<td>
<button
(click)="changeLevel(logger.name, 'TRACE')"
[ngClass]="logger.level === 'TRACE' ? 'btn-primary' : 'btn-light'"
class="btn btn-sm"
>
TRACE
</button>

<button
(click)="changeLevel(logger.name, 'DEBUG')"
[ngClass]="logger.level === 'DEBUG' ? 'btn-success' : 'btn-light'"
class="btn btn-sm"
>
DEBUG
</button>
<button
(click)="changeLevel(logger.name, 'DEBUG')"
[ngClass]="logger.level === 'DEBUG' ? 'btn-success' : 'btn-light'"
class="btn btn-sm"
>
DEBUG
</button>

<button
(click)="changeLevel(logger.name, 'INFO')"
[ngClass]="logger.level === 'INFO' ? 'btn-info' : 'btn-light'"
class="btn btn-sm"
>
INFO
</button>
<button
(click)="changeLevel(logger.name, 'INFO')"
[ngClass]="logger.level === 'INFO' ? 'btn-info' : 'btn-light'"
class="btn btn-sm"
>
INFO
</button>

<button
(click)="changeLevel(logger.name, 'WARN')"
[ngClass]="logger.level === 'WARN' ? 'btn-warning' : 'btn-light'"
class="btn btn-sm"
>
WARN
</button>
<button
(click)="changeLevel(logger.name, 'WARN')"
[ngClass]="logger.level === 'WARN' ? 'btn-warning' : 'btn-light'"
class="btn btn-sm"
>
WARN
</button>

<button
(click)="changeLevel(logger.name, 'ERROR')"
[ngClass]="logger.level === 'ERROR' ? 'btn-danger' : 'btn-light'"
class="btn btn-sm"
>
ERROR
</button>
<button
(click)="changeLevel(logger.name, 'ERROR')"
[ngClass]="logger.level === 'ERROR' ? 'btn-danger' : 'btn-light'"
class="btn btn-sm"
>
ERROR
</button>

<button
(click)="changeLevel(logger.name, 'OFF')"
[ngClass]="logger.level === 'OFF' ? 'btn-secondary' : 'btn-light'"
class="btn btn-sm"
>
OFF
</button>
</td>
</tr>
}
</tbody>
</table>
</div>
<button
(click)="changeLevel(logger.name, 'OFF')"
[ngClass]="logger.level === 'OFF' ? 'btn-secondary' : 'btn-light'"
class="btn btn-sm"
>
OFF
</button>
</td>
</tr>
}
</tbody>
</table>
</div>
} @loading {
<div class="d-flex justify-content-center me-3">
<div class="spinner-border"></div>
Expand Down
6 changes: 3 additions & 3 deletions generators/angular/templates/src/main/webapp/app/admin/logs/logs.component.spec.ts.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,9 +51,9 @@ describe('LogsComponent', () => {

describe('OnInit', () => {
it('should set all default values correctly', () => {
expect(comp.filter).toBe('');
expect(comp.orderProp).toBe('name');
expect(comp.ascending).toBe(true);
expect(comp.filter()).toBe('');
expect(comp.sortState().predicate).toBe('name');
expect(comp.sortState().order).toBe('asc');
});

it('Should call load all on init', () => {
Expand Down
Loading
Loading