stella-ops.org/git.stella-ops.org
1
0
Fork 0
Code Issues Pull Requests Actions 2 Releases Wiki Activity

Fix mission board environment action scope

Browse Source
This commit is contained in:
master
2026-03-07 05:42:17 +02:00
parent 41799611dd
commit 4e5d06c8ec
3 changed files with 355 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
src/Web/StellaOps.Web/src/app/core/testing/dashboard-v3.component.spec.ts Normal file
View File

@@ -0,0 +1,104 @@
import { TestBed } from '@angular/core/testing';
import { provideRouter } from '@angular/router';
import { PlatformContextStore } from '../context/platform-context.store';
import { DashboardV3Component } from '../../features/dashboard-v3/dashboard-v3.component';
describe('DashboardV3Component', () => {
it('builds canonical topology posture targets for environment cards', () => {
TestBed.configureTestingModule({
imports: [DashboardV3Component],
providers: [
provideRouter([]),
{
provide: PlatformContextStore,
useValue: {
initialize: () => undefined,
regions: () => [
{ regionId: 'eu-west', displayName: 'EU West' },
{ regionId: 'us-east', displayName: 'US East' },
],
environments: () => [
{
environmentId: 'dev',
regionId: 'eu-west',
environmentType: 'development',
displayName: 'Development EU West',
},
{
environmentId: 'prod-us-east',
regionId: 'us-east',
environmentType: 'production',
displayName: 'Production US East',
},
],
},
},
],
});
const fixture = TestBed.createComponent(DashboardV3Component);
const component = fixture.componentInstance;
const environment = component.filteredEnvironments()[0];
expect(component.environmentPostureRoute(environment)).toEqual([
'/setup/topology/environments',
'dev',
'posture',
]);
expect(component.environmentScopeQuery(environment)).toEqual({
region: 'eu-west',
regions: 'eu-west',
environment: 'dev',
environments: 'dev',
});
});
it('builds canonical findings scope for downstream pages instead of synthetic dashboard ids', () => {
TestBed.configureTestingModule({
imports: [DashboardV3Component],
providers: [
provideRouter([]),
{
provide: PlatformContextStore,
useValue: {
initialize: () => undefined,
regions: () => [
{ regionId: 'eu-west', displayName: 'EU West' },
{ regionId: 'us-east', displayName: 'US East' },
],
environments: () => [
{
environmentId: 'dev',
regionId: 'eu-west',
environmentType: 'development',
displayName: 'Development EU West',
},
{
environmentId: 'prod',
regionId: 'us-east',
environmentType: 'production',
displayName: 'Production US East',
},
],
},
},
],
});
const fixture = TestBed.createComponent(DashboardV3Component);
const component = fixture.componentInstance;
const environment = component.filteredEnvironments().find((candidate) => candidate.regionId === 'us-east');
expect(environment).toBeDefined();
expect(component.environmentScopeQuery(environment!)).toEqual({
region: 'us-east',
regions: 'us-east',
environment: 'prod',
environments: 'prod',
});
expect(component.environmentScopeQuery(environment!)).not.toEqual(
jasmine.objectContaining({ env: 'prod-us-east' }),
);
});
});

180
src/Web/StellaOps.Web/src/app/features/dashboard-v3/dashboard-v3.component.ts
View File

@@ -9,14 +9,21 @@
import {
Component,
ChangeDetectionStrategy,
signal,
computed,
inject,
signal,
} from '@angular/core';
import { TitleCasePipe, UpperCasePipe } from '@angular/common';
import { RouterLink } from '@angular/router';
import {
PlatformContextEnvironment,
PlatformContextStore,
} from '../../core/context/platform-context.store';
interface EnvironmentCard {
id: string;
environmentId: string;
regionId: string;
name: string;
region: string;
deployStatus: 'healthy' | 'degraded' | 'blocked' | 'unknown';
@@ -66,9 +73,9 @@ interface MissionSummary {
(change)="onRegionChange($event)"
>
<option value="all">All Regions</option>
<option value="eu-west">EU West</option>
<option value="us-east">US East</option>
<option value="ap-south">AP South</option>
@for (region of availableRegions(); track region.value) {
<option [value]="region.value">{{ region.label }}</option>
}
</select>
</div>
@@ -174,10 +181,20 @@ interface MissionSummary {
<div class="env-card-footer">
<span class="last-deployed">Deployed {{ env.lastDeployedAt }}</span>
<div class="env-links">
<a [routerLink]="['/setup/topology/environments', env.id, 'posture']" class="env-link">
<a
[routerLink]="environmentPostureRoute(env)"
[queryParams]="environmentScopeQuery(env)"
queryParamsHandling="merge"
class="env-link"
>
Detail
</a>
<a [routerLink]="['/security/findings']" [queryParams]="{ env: env.id }" class="env-link">
<a
[routerLink]="['/security/findings']"
[queryParams]="environmentScopeQuery(env)"
queryParamsHandling="merge"
class="env-link"
>
Findings
</a>
</div>
@@ -227,7 +244,13 @@ interface MissionSummary {
<td>{{ env.birCoverage }}</td>
<td>{{ env.lastDeployedAt }}</td>
<td>
<a [routerLink]="['/setup/topology/environments', env.id, 'posture']">Open</a>
<a
[routerLink]="environmentPostureRoute(env)"
[queryParams]="environmentScopeQuery(env)"
queryParamsHandling="merge"
>
Open
</a>
</td>
</tr>
}
@@ -996,9 +1019,16 @@ interface MissionSummary {
`],
})
export class DashboardV3Component {
private readonly context = inject(PlatformContextStore);
readonly selectedRegion = signal<string>('all');
readonly selectedTimeWindow = signal<string>('24h');
private readonly fallbackRegionOptions = [
{ value: 'eu-west', label: 'EU West' },
{ value: 'us-east', label: 'US East' },
{ value: 'apac', label: 'APAC' },
];
// Placeholder mission summary data
readonly summary = signal<MissionSummary>({
activePromotions: 3,
@@ -1007,10 +1037,11 @@ export class DashboardV3Component {
dataIntegrityStatus: 'healthy',
});
// Placeholder environments
private readonly allEnvironments = signal<EnvironmentCard[]>([
private readonly fallbackEnvironments: EnvironmentCard[] = [
{
id: 'dev-eu-west',
environmentId: 'dev',
regionId: 'eu-west',
name: 'dev',
region: 'EU West',
deployStatus: 'healthy',
@@ -1023,6 +1054,8 @@ export class DashboardV3Component {
},
{
id: 'stage-eu-west',
environmentId: 'stage',
regionId: 'eu-west',
name: 'stage',
region: 'EU West',
deployStatus: 'degraded',
@@ -1035,6 +1068,8 @@ export class DashboardV3Component {
},
{
id: 'prod-eu-west',
environmentId: 'prod',
regionId: 'eu-west',
name: 'prod',
region: 'EU West',
deployStatus: 'healthy',
@@ -1047,6 +1082,8 @@ export class DashboardV3Component {
},
{
id: 'dev-us-east',
environmentId: 'dev',
regionId: 'us-east',
name: 'dev',
region: 'US East',
deployStatus: 'healthy',
@@ -1059,6 +1096,8 @@ export class DashboardV3Component {
},
{
id: 'prod-us-east',
environmentId: 'prod',
regionId: 'us-east',
name: 'prod',
region: 'US East',
deployStatus: 'blocked',
@@ -1069,14 +1108,38 @@ export class DashboardV3Component {
pendingApprovals: 3,
lastDeployedAt: '3d ago',
},
]);
];
constructor() {
this.context.initialize();
}
readonly availableRegions = computed(() => {
const regions = this.context.regions();
if (regions.length === 0) {
return this.fallbackRegionOptions;
}
return regions.map((region) => ({
value: region.regionId,
label: region.displayName,
}));
});
readonly allEnvironments = computed(() => {
const environments = this.context.environments();
if (environments.length === 0) {
return this.fallbackEnvironments;
}
return environments.map((environment, index) => this.toEnvironmentCard(environment, index));
});
readonly filteredEnvironments = computed(() => {
const region = this.selectedRegion();
if (region === 'all') return this.allEnvironments();
return this.allEnvironments().filter(
(e) => e.region.toLowerCase().replace(' ', '-') === region
);
const environments = this.allEnvironments();
if (region === 'all') return environments;
return environments.filter((environment) => environment.regionId === region);
});
readonly riskEnvironments = computed(() =>
@@ -1144,5 +1207,92 @@ export class DashboardV3Component {
const select = event.target as HTMLSelectElement;
this.selectedTimeWindow.set(select.value);
}
}
environmentPostureRoute(env: EnvironmentCard): string[] {
return ['/setup/topology/environments', env.environmentId, 'posture'];
}
environmentScopeQuery(env: EnvironmentCard): Record<string, string> {
return {
region: env.regionId,
regions: env.regionId,
environment: env.environmentId,
environments: env.environmentId,
};
}
private toEnvironmentCard(
environment: PlatformContextEnvironment,
index: number,
): EnvironmentCard {
const environmentType = environment.environmentType.toLowerCase();
const regionLabel = this.formatRegionLabel(environment.regionId);
const statusSeed = this.resolveStatusSeed(environment, index);
return {
id: `${environment.regionId}:${environment.environmentId}`,
environmentId: environment.environmentId,
regionId: environment.regionId,
name: environment.displayName,
region: regionLabel,
deployStatus: statusSeed.deployStatus,
sbomFreshness: statusSeed.sbomFreshness,
critRCount: statusSeed.critRCount,
highRCount: statusSeed.highRCount,
birCoverage: statusSeed.birCoverage,
pendingApprovals: statusSeed.pendingApprovals,
lastDeployedAt: statusSeed.lastDeployedAt,
};
}
private resolveStatusSeed(
environment: PlatformContextEnvironment,
index: number,
): Omit<EnvironmentCard, 'id' | 'environmentId' | 'regionId' | 'name' | 'region'> {
const environmentType = environment.environmentType.toLowerCase();
if (environmentType === 'development') {
return {
deployStatus: 'healthy',
sbomFreshness: 'fresh',
critRCount: 0,
highRCount: 1,
birCoverage: '3/3',
pendingApprovals: 0,
lastDeployedAt: '3h ago',
};
}
if (environmentType === 'staging') {
return {
deployStatus: 'degraded',
sbomFreshness: 'stale',
critRCount: 1,
highRCount: 4,
birCoverage: '2/3',
pendingApprovals: 2,
lastDeployedAt: '6h ago',
};
}
const blockedProduction = environment.regionId === 'us-east' && index % 2 === 0;
return {
deployStatus: blockedProduction ? 'blocked' : 'healthy',
sbomFreshness: blockedProduction ? 'missing' : 'fresh',
critRCount: blockedProduction ? 5 : 2,
highRCount: blockedProduction ? 12 : 6,
birCoverage: blockedProduction ? '1/3' : '3/3',
pendingApprovals: blockedProduction ? 3 : 1,
lastDeployedAt: blockedProduction ? '3d ago' : '1d ago',
};
}
private formatRegionLabel(regionId: string): string {
return regionId
.split('-')
.map((segment) => segment.toUpperCase() === 'APAC'
? 'APAC'
: `${segment.charAt(0).toUpperCase()}${segment.slice(1)}`)
.join(' ');
}
}