Skip to content

Commit

Permalink
migrate admin ui to new sort directives
Browse files Browse the repository at this point in the history
  • Loading branch information
@mshima
mshima committed Feb 15, 2024
1 parent 85e3e31 commit 373bb6d
Show file tree
Hide file tree
Showing 6 changed files with 198 additions and 186 deletions.
113 changes: 58 additions & 55 deletions ...ngular/templates/src/main/webapp/app/admin/configuration/configuration.component.html.ejs
View file
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>
}
38 changes: 21 additions & 17 deletions .../angular/templates/src/main/webapp/app/admin/configuration/configuration.component.ts.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,43 +16,47 @@
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 { SortSignalDirective, SortBySignalDirective, sortStateSignal, SortService } from 'app/shared/sort';
import { ConfigurationService } from './configuration.service';
import { Bean, PropertySource } from './configuration.model';

@Component({
standalone: true,
selector: '<%= jhiPrefixDashed %>-configuration',
templateUrl: './configuration.component.html',
imports: [SharedModule, FormsModule, SortDirective, SortByDirective],
imports: [SharedModule, FormsModule, SortSignalDirective, SortBySignalDirective],
})
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
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">Logs</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
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

0 comments on commit 373bb6d

Please sign in to comment.