feat(frontend): vue /recommendations avec filtre site, focus ?alert= et génération admin
Page derrière authGuard, ouverte à tous les rôles : filtre site (.form-select, présélectionné par ?site=), focus sur une alerte par ?alert= (entier strictement positif, sinon ignoré), et pour les admins un bouton « Générer les recommandations » qui appelle POST /recommendations/generate sur le site filtré, affiche le bilan accordé en nombre et recharge la liste. Route ajoutée dans app.routes.ts, lien « Recommandations » dans la navigation du tableau de bord.
This commit is contained in:
Johan LEROY
@@ -14,6 +14,7 @@
|
||||
<a routerLink="/monitoring/sensors" class="ev-link">Supervision des capteurs</a>
|
||||
}
|
||||
<a routerLink="/sites" class="ev-link">Voir les sites</a>
|
||||
<a routerLink="/recommendations" class="ev-link">Recommandations</a>
|
||||
<ev-button
|
||||
class="logout-button"
|
||||
variant="secondary"
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
<div class="recommendations">
|
||||
<nav class="ev-breadcrumb">
|
||||
<a routerLink="/dashboard">Tableau de bord</a>
|
||||
</nav>
|
||||
|
||||
<header class="recommendations__header">
|
||||
<a routerLink="/dashboard" class="ev-brand-link">
|
||||
<ev-brand class="recommendations__logo" />
|
||||
</a>
|
||||
<div>
|
||||
<h1>Recommandations</h1>
|
||||
<p class="recommendations__subtitle">
|
||||
Actions proposées par le moteur de règles à partir des alertes
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="recommendations__toolbar">
|
||||
<label class="recommendations__filter">
|
||||
<span class="form-label">Site</span>
|
||||
<select class="form-select" data-testid="site-filter" (change)="onSiteChange($event)">
|
||||
<option value="" [selected]="!siteFilter()">Tous les sites</option>
|
||||
@for (site of sites(); track site.site_id) {
|
||||
<option [value]="site.site_id" [selected]="site.site_id === siteFilter()">
|
||||
{{ site.site_name }}
|
||||
</option>
|
||||
}
|
||||
</select>
|
||||
</label>
|
||||
@if (isAdmin()) {
|
||||
<ev-button
|
||||
variant="secondary"
|
||||
[fullWidth]="false"
|
||||
[disabled]="generating()"
|
||||
data-testid="generate"
|
||||
(click)="onGenerate()"
|
||||
>
|
||||
{{ generating() ? 'Génération en cours…' : 'Générer les recommandations' }}
|
||||
</ev-button>
|
||||
}
|
||||
</div>
|
||||
|
||||
@if (generationReport(); as report) {
|
||||
<ev-alert severity="success" class="recommendations__banner">{{ bilan(report) }}.</ev-alert>
|
||||
}
|
||||
@if (generationError(); as message) {
|
||||
<ev-alert severity="danger" class="recommendations__banner">{{ message }}</ev-alert>
|
||||
}
|
||||
|
||||
@if (alertId(); as id) {
|
||||
<p class="recommendations__focus">
|
||||
Alerte n° {{ id }} ·
|
||||
<a routerLink="/recommendations" class="ev-link">Toutes les recommandations</a>
|
||||
</p>
|
||||
}
|
||||
|
||||
<app-recommendation-list [siteId]="siteFilter()" [alertId]="alertId()" [sites]="sites()" />
|
||||
</div>
|
||||
@@ -0,0 +1,59 @@
|
||||
:host {
|
||||
display: block;
|
||||
color: var(--color-text);
|
||||
padding: 2.5rem 2rem;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.recommendations__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.85rem;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.recommendations__logo {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.recommendations__subtitle {
|
||||
margin: 0.25rem 0 0;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.recommendations__toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.recommendations__filter {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 14rem;
|
||||
|
||||
.form-label {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.recommendations__banner {
|
||||
display: block;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.recommendations__focus {
|
||||
margin: 0 0 var(--space-3);
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
@@ -0,0 +1,169 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
import { By } from '@angular/platform-browser';
|
||||
import { ActivatedRoute, convertToParamMap, provideRouter } from '@angular/router';
|
||||
import { vi } from 'vitest';
|
||||
import { BehaviorSubject, of, throwError } from 'rxjs';
|
||||
import { RecommendationsView, parseAlertId } from './recommendations';
|
||||
import { RecommendationList } from '../../shared/components/recommendation-list/recommendation-list';
|
||||
import { SitesService } from '../../core/services/sites.service';
|
||||
import { AlertsService } from '../../core/services/alerts.service';
|
||||
import { RecommendationsService } from '../../core/services/recommendations.service';
|
||||
import { AuthService } from '../../core/services/auth.service';
|
||||
|
||||
const SITES = [
|
||||
{
|
||||
site_id: 'SITE001',
|
||||
site_name: 'Usine Nantes',
|
||||
site_type: 'industriel',
|
||||
location: 'Nantes',
|
||||
capacity_kw: 500,
|
||||
status: 'actif',
|
||||
},
|
||||
];
|
||||
|
||||
const BILAN = { alerts_examined: 2, recommendations_created: 3, already_present: 1 };
|
||||
|
||||
function setup(options: { query?: Record<string, string>; role?: string } = {}) {
|
||||
const query = options.query ?? {};
|
||||
const queryParamMap = new BehaviorSubject(convertToParamMap(query));
|
||||
const generate = vi.fn().mockReturnValue(of(BILAN));
|
||||
const getRecommendations = vi.fn().mockReturnValue(of([]));
|
||||
const getAlerts = vi.fn().mockReturnValue(of([]));
|
||||
TestBed.configureTestingModule({
|
||||
imports: [RecommendationsView],
|
||||
providers: [
|
||||
provideRouter([]),
|
||||
{
|
||||
provide: ActivatedRoute,
|
||||
useValue: { queryParamMap, snapshot: { queryParamMap: convertToParamMap(query) } },
|
||||
},
|
||||
{ provide: SitesService, useValue: { getSites: vi.fn().mockReturnValue(of(SITES)) } },
|
||||
{ provide: AlertsService, useValue: { getAlerts } },
|
||||
{ provide: RecommendationsService, useValue: { getRecommendations, generate } },
|
||||
{
|
||||
provide: AuthService,
|
||||
useValue: { principal: vi.fn().mockReturnValue({ role: options.role ?? 'lecteur' }) },
|
||||
},
|
||||
],
|
||||
});
|
||||
const fixture = TestBed.createComponent(RecommendationsView);
|
||||
fixture.detectChanges();
|
||||
fixture.detectChanges();
|
||||
return { fixture, queryParamMap, generate, getRecommendations, getAlerts };
|
||||
}
|
||||
|
||||
function listeEnfant(fixture: ReturnType<typeof setup>['fixture']): RecommendationList {
|
||||
return fixture.debugElement.query(By.directive(RecommendationList)).componentInstance;
|
||||
}
|
||||
|
||||
describe('parseAlertId', () => {
|
||||
it("n'accepte qu'un entier strictement positif", () => {
|
||||
expect(parseAlertId('12')).toBe(12);
|
||||
expect(parseAlertId('0')).toBeNull();
|
||||
expect(parseAlertId('-3')).toBeNull();
|
||||
expect(parseAlertId('abc')).toBeNull();
|
||||
expect(parseAlertId('12abc')).toBeNull();
|
||||
expect(parseAlertId(null)).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('RecommendationsView', () => {
|
||||
it("cible l'alerte donnée par ?alert= et la transmet à la liste", () => {
|
||||
const { fixture } = setup({ query: { alert: '12' } });
|
||||
|
||||
expect(fixture.componentInstance.alertId()).toBe(12);
|
||||
expect(listeEnfant(fixture).alertId()).toBe(12);
|
||||
expect(fixture.nativeElement.textContent).toContain('Alerte n° 12');
|
||||
expect(fixture.nativeElement.querySelector('a[href="/recommendations"]')).not.toBeNull();
|
||||
});
|
||||
|
||||
it('ignore un paramètre alert invalide', () => {
|
||||
const { fixture } = setup({ query: { alert: 'abc' } });
|
||||
|
||||
expect(fixture.componentInstance.alertId()).toBeNull();
|
||||
expect(fixture.nativeElement.textContent).not.toContain('Alerte n°');
|
||||
});
|
||||
|
||||
it('applique le site donné par ?site= au filtre et à la liste', () => {
|
||||
const { fixture, getAlerts } = setup({ query: { site: 'SITE001' } });
|
||||
|
||||
expect(getAlerts).toHaveBeenCalledWith({ site_id: 'SITE001' });
|
||||
const option = fixture.nativeElement.querySelector(
|
||||
'option[value="SITE001"]',
|
||||
) as HTMLOptionElement;
|
||||
expect(option.selected).toBe(true);
|
||||
});
|
||||
|
||||
it('relance la liste sur le site choisi dans le filtre', () => {
|
||||
const { fixture, getAlerts } = setup();
|
||||
const select = fixture.nativeElement.querySelector(
|
||||
'[data-testid="site-filter"]',
|
||||
) as HTMLSelectElement;
|
||||
|
||||
select.value = 'SITE001';
|
||||
select.dispatchEvent(new Event('change'));
|
||||
fixture.detectChanges();
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(getAlerts).toHaveBeenLastCalledWith({ site_id: 'SITE001' });
|
||||
expect(listeEnfant(fixture).siteId()).toBe('SITE001');
|
||||
});
|
||||
|
||||
it('cache le bouton de génération aux lecteurs', () => {
|
||||
const { fixture } = setup({ role: 'lecteur' });
|
||||
|
||||
expect(fixture.nativeElement.querySelector('[data-testid="generate"]')).toBeNull();
|
||||
});
|
||||
|
||||
it('permet à un admin de générer pour le site filtré, affiche le bilan et recharge la liste', () => {
|
||||
const { fixture, generate, getRecommendations } = setup({
|
||||
role: 'admin',
|
||||
query: { site: 'SITE001' },
|
||||
});
|
||||
|
||||
fixture.nativeElement.querySelector('[data-testid="generate"]').click();
|
||||
fixture.detectChanges();
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(generate).toHaveBeenCalledWith('SITE001');
|
||||
expect(fixture.nativeElement.textContent).toContain(
|
||||
'3 recommandations créées, 1 déjà présente, 2 alertes examinées.',
|
||||
);
|
||||
expect(getRecommendations).toHaveBeenCalledTimes(2);
|
||||
expect(fixture.componentInstance.generating()).toBe(false);
|
||||
});
|
||||
|
||||
it('génère pour tout le parc quand aucun site n’est filtré', () => {
|
||||
const { fixture, generate } = setup({ role: 'admin' });
|
||||
|
||||
fixture.componentInstance.onGenerate();
|
||||
|
||||
expect(generate).toHaveBeenCalledWith(undefined);
|
||||
});
|
||||
|
||||
it("signale l'échec de la génération sans casser la page", () => {
|
||||
const { fixture, generate } = setup({ role: 'admin' });
|
||||
generate.mockReturnValue(throwError(() => new Error('403')));
|
||||
|
||||
fixture.componentInstance.onGenerate();
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(fixture.componentInstance.generationError()).not.toBeNull();
|
||||
expect(fixture.nativeElement.textContent).toContain(
|
||||
'La génération des recommandations a échoué',
|
||||
);
|
||||
expect(fixture.componentInstance.generating()).toBe(false);
|
||||
});
|
||||
|
||||
it('accorde le bilan au singulier', () => {
|
||||
const { fixture } = setup();
|
||||
|
||||
expect(
|
||||
fixture.componentInstance.bilan({
|
||||
alerts_examined: 1,
|
||||
recommendations_created: 1,
|
||||
already_present: 0,
|
||||
}),
|
||||
).toBe('1 recommandation créée, 0 déjà présente, 1 alerte examinée');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,85 @@
|
||||
import { Component, computed, inject, signal, viewChild } from '@angular/core';
|
||||
import { toSignal } from '@angular/core/rxjs-interop';
|
||||
import { ActivatedRoute, RouterLink } from '@angular/router';
|
||||
import { catchError, map, of } from 'rxjs';
|
||||
import { SitesService } from '../../core/services/sites.service';
|
||||
import { RecommendationsService } from '../../core/services/recommendations.service';
|
||||
import { AuthService } from '../../core/services/auth.service';
|
||||
import { Site } from '../../shared/models/site.model';
|
||||
import { RecommendationGenerationReport } from '../../shared/models/recommendation.model';
|
||||
import { RecommendationList } from '../../shared/components/recommendation-list/recommendation-list';
|
||||
import { Alert as EvAlert } from '../../shared/components/ui/alert/alert';
|
||||
import { Brand } from '../../shared/components/ui/brand/brand';
|
||||
import { Button } from '../../shared/components/ui/button/button';
|
||||
|
||||
const GENERATION_FAILED_MESSAGE =
|
||||
'La génération des recommandations a échoué, réessayez plus tard.';
|
||||
|
||||
export function parseAlertId(raw: string | null): number | null {
|
||||
return raw !== null && /^[1-9]\d*$/.test(raw) ? Number(raw) : null;
|
||||
}
|
||||
|
||||
function pluriel(nombre: number, singulier: string, plurielForme: string): string {
|
||||
return `${nombre} ${nombre > 1 ? plurielForme : singulier}`;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-recommendations',
|
||||
standalone: true,
|
||||
imports: [RouterLink, RecommendationList, EvAlert, Brand, Button],
|
||||
templateUrl: './recommendations.html',
|
||||
styleUrl: './recommendations.scss',
|
||||
})
|
||||
export class RecommendationsView {
|
||||
private route = inject(ActivatedRoute);
|
||||
private sitesService = inject(SitesService);
|
||||
private recommendationsService = inject(RecommendationsService);
|
||||
private auth = inject(AuthService);
|
||||
|
||||
alertId = toSignal(
|
||||
this.route.queryParamMap.pipe(map((params) => parseAlertId(params.get('alert')))),
|
||||
{ initialValue: null },
|
||||
);
|
||||
siteFilter = signal<string | null>(this.route.snapshot.queryParamMap.get('site'));
|
||||
sites = toSignal(this.sitesService.getSites().pipe(catchError(() => of([] as Site[]))), {
|
||||
initialValue: [] as Site[],
|
||||
});
|
||||
|
||||
list = viewChild.required(RecommendationList);
|
||||
|
||||
isAdmin = computed(() => this.auth.principal()?.role === 'admin');
|
||||
generating = signal(false);
|
||||
generationReport = signal<RecommendationGenerationReport | null>(null);
|
||||
generationError = signal<string | null>(null);
|
||||
|
||||
onSiteChange(event: Event): void {
|
||||
this.siteFilter.set((event.target as HTMLSelectElement).value || null);
|
||||
}
|
||||
|
||||
onGenerate(): void {
|
||||
if (this.generating()) {
|
||||
return;
|
||||
}
|
||||
this.generating.set(true);
|
||||
this.generationError.set(null);
|
||||
this.recommendationsService.generate(this.siteFilter() ?? undefined).subscribe({
|
||||
next: (report) => {
|
||||
this.generating.set(false);
|
||||
this.generationReport.set(report);
|
||||
this.list().reload();
|
||||
},
|
||||
error: () => {
|
||||
this.generating.set(false);
|
||||
this.generationError.set(GENERATION_FAILED_MESSAGE);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
bilan(report: RecommendationGenerationReport): string {
|
||||
return [
|
||||
pluriel(report.recommendations_created, 'recommandation créée', 'recommandations créées'),
|
||||
pluriel(report.already_present, 'déjà présente', 'déjà présentes'),
|
||||
pluriel(report.alerts_examined, 'alerte examinée', 'alertes examinées'),
|
||||
].join(', ');
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user