events: fix map again and fix flaky tests (#15154)

* web/admin: fix OL Map loading external CSS

why are web developers like this dd8ccf12a1/elements/openlayers-core/ol-map.ts (L238)

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* fix map chart display without map

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* make test less flaky

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* format

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Jens L.
2025-06-19 23:10:17 +02:00
committed by GitHub
parent caa5617ce6
commit adfbd1e0f2
3 changed files with 37 additions and 13 deletions

View File

@ -99,12 +99,14 @@ export class EventListPage extends WithLicenseSummary(TablePage<Event>) {
></ak-events-map>
</div>`;
}
return html`<ak-events-volume-chart
.query=${{
page: this.page,
search: this.search,
}}
></ak-events-volume-chart>`;
return html`<div class="pf-c-page__main-section pf-m-no-padding-bottom">
<ak-events-volume-chart
.query=${{
page: this.page,
search: this.search,
}}
></ak-events-volume-chart>
</div>`;
}
row(item: EventWithContext): SlottedTemplateResult[] {

View File

@ -4,8 +4,7 @@ import { PaginatedResponse } from "#elements/table/Table";
import { AKElement } from "@goauthentik/elements/Base";
import "@openlayers-elements/core/ol-layer-vector";
import type OlLayerVector from "@openlayers-elements/core/ol-layer-vector";
import "@openlayers-elements/core/ol-map";
import type OlMap from "@openlayers-elements/core/ol-map";
import OlMap from "@openlayers-elements/core/ol-map";
import "@openlayers-elements/maps/ol-layer-openstreetmap";
import "@openlayers-elements/maps/ol-select";
import Feature from "ol/Feature";
@ -19,9 +18,32 @@ import { customElement, property, query } from "lit/decorators.js";
import PFCard from "@patternfly/patternfly/components/Card/card.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import OL from "ol/ol.css";
import { Event } from "@goauthentik/api";
@customElement("ak-map")
export class Map extends OlMap {
public render() {
return html`
<style>
${OL}
</style>
<style>
:host {
display: block;
}
#map {
height: 100%;
}
</style>
<div id="map"></div>
<slot></slot>
`;
}
}
/**
*
* @event {select-event} - Fired when an event is selected on the map. ID of the event is contained
@ -36,8 +58,8 @@ export class EventMap extends AKElement {
@query("ol-layer-vector")
vectorLayer?: OlLayerVector;
@query("ol-map")
map?: OlMap;
@query("ak-map")
map?: Map;
@property({ type: Number })
zoomPaddingPx = 100;
@ -116,7 +138,7 @@ export class EventMap extends AKElement {
render(): TemplateResult {
return html`<div class="pf-c-card">
<ol-map>
<ak-map>
<ol-select
@feature-selected=${(ev: CustomEvent<{ feature: Feature }>) => {
const eventId = ev.detail.feature.getId();
@ -133,7 +155,7 @@ export class EventMap extends AKElement {
></ol-select>
<ol-layer-openstreetmap></ol-layer-openstreetmap>
<ol-layer-vector></ol-layer-vector>
</ol-map>
</ak-map>
</div>`;
}
}