web: use mermaidjs (#3623)
* flows: move flow diagram logic to separate file Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * idk Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * make web component work Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * remove subgraph for now Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * cleanup Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * add denied connection Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * fix Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * wrong list Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * fix tests Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * use custom styles Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * i18n Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * fix typing issues, make diagram centered Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * fix tests Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * fix lint Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens L
@ -2,10 +2,11 @@ import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
||||
import { EVENT_REFRESH } from "@goauthentik/common/constants";
|
||||
import { AKElement } from "@goauthentik/elements/Base";
|
||||
import "@goauthentik/elements/EmptyState";
|
||||
import FlowChart from "flowchart.js";
|
||||
import mermaid from "mermaid";
|
||||
|
||||
import { TemplateResult, html } from "lit";
|
||||
import { CSSResult, TemplateResult, css, html } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
import { unsafeHTML } from "lit/directives/unsafe-html.js";
|
||||
|
||||
import { FlowsApi } from "@goauthentik/api";
|
||||
|
||||
@ -35,34 +36,37 @@ export class FlowDiagram extends AKElement {
|
||||
@property({ attribute: false })
|
||||
diagram?: string;
|
||||
|
||||
@property()
|
||||
fontColour: string = FONT_COLOUR_DARK_MODE;
|
||||
|
||||
@property()
|
||||
fill: string = FILL_DARK_MODE;
|
||||
|
||||
handlerBound = false;
|
||||
|
||||
createRenderRoot(): Element | ShadowRoot {
|
||||
return this;
|
||||
}
|
||||
|
||||
get isInViewport(): boolean {
|
||||
const rect = this.getBoundingClientRect();
|
||||
return !(rect.x + rect.y + rect.width + rect.height === 0);
|
||||
}
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
return [
|
||||
css`
|
||||
:host {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
const matcher = window.matchMedia("(prefers-color-scheme: light)");
|
||||
const handler = (ev?: MediaQueryListEvent) => {
|
||||
if (ev?.matches || matcher.matches) {
|
||||
this.fontColour = FONT_COLOUR_LIGHT_MODE;
|
||||
this.fill = FILL_LIGHT_MODE;
|
||||
} else {
|
||||
this.fontColour = FONT_COLOUR_DARK_MODE;
|
||||
this.fill = FILL_DARK_MODE;
|
||||
}
|
||||
console.log("setting config");
|
||||
mermaid.initialize({
|
||||
logLevel: "error",
|
||||
startOnLoad: false,
|
||||
theme: ev?.matches || matcher.matches ? "default" : "dark",
|
||||
flowchart: {
|
||||
curve: "linear",
|
||||
},
|
||||
});
|
||||
this.requestUpdate();
|
||||
};
|
||||
matcher.addEventListener("change", handler);
|
||||
@ -93,18 +97,9 @@ export class FlowDiagram extends AKElement {
|
||||
console.debug(`authentik/flow/diagram: failed to remove element ${el}`);
|
||||
}
|
||||
});
|
||||
if (this.diagram) {
|
||||
const diagram = FlowChart.parse(this.diagram);
|
||||
diagram.drawSVG(this, {
|
||||
"font-color": this.fontColour,
|
||||
"line-color": "#bebebe",
|
||||
"element-color": "#bebebe",
|
||||
"fill": this.fill,
|
||||
"yes-text": "Policy passes",
|
||||
"no-text": "Policy denies",
|
||||
});
|
||||
return html``;
|
||||
if (!this.diagram) {
|
||||
return html`<ak-empty-state ?loading=${true}></ak-empty-state>`;
|
||||
}
|
||||
return html`<ak-empty-state ?loading=${true}></ak-empty-state>`;
|
||||
return html`${unsafeHTML(mermaid.render("graph", this.diagram))}`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -83,7 +83,7 @@ export class FlowViewPage extends AKElement {
|
||||
<div
|
||||
class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-2-col-on-xl pf-m-2-col-on-2xl"
|
||||
>
|
||||
<div class="pf-c-card__title">${t`Related`}</div>
|
||||
<div class="pf-c-card__title">${t`Related actions`}</div>
|
||||
<div class="pf-c-card__body">
|
||||
<dl class="pf-c-description-list">
|
||||
<div class="pf-c-description-list__group">
|
||||
@ -104,7 +104,7 @@ export class FlowViewPage extends AKElement {
|
||||
</ak-flow-form>
|
||||
<button
|
||||
slot="trigger"
|
||||
class="pf-c-button pf-m-secondary"
|
||||
class="pf-c-button pf-m-block pf-m-secondary"
|
||||
>
|
||||
${t`Edit`}
|
||||
</button>
|
||||
@ -119,7 +119,7 @@ export class FlowViewPage extends AKElement {
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<button
|
||||
class="pf-c-button pf-m-primary"
|
||||
class="pf-c-button pf-m-block pf-m-primary"
|
||||
@click=${() => {
|
||||
const finalURL = `${
|
||||
window.location.origin
|
||||
@ -132,7 +132,7 @@ export class FlowViewPage extends AKElement {
|
||||
${t`Normal`}
|
||||
</button>
|
||||
<button
|
||||
class="pf-c-button pf-m-secondary"
|
||||
class="pf-c-button pf-m-block pf-m-secondary"
|
||||
@click=${() => {
|
||||
new FlowsApi(DEFAULT_CONFIG)
|
||||
.flowsInstancesExecuteRetrieve({
|
||||
@ -151,7 +151,7 @@ export class FlowViewPage extends AKElement {
|
||||
${t`with current user`}
|
||||
</button>
|
||||
<button
|
||||
class="pf-c-button pf-m-secondary"
|
||||
class="pf-c-button pf-m-block pf-m-secondary"
|
||||
@click=${() => {
|
||||
new FlowsApi(DEFAULT_CONFIG)
|
||||
.flowsInstancesExecuteRetrieve({
|
||||
@ -187,7 +187,7 @@ export class FlowViewPage extends AKElement {
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<a
|
||||
class="pf-c-button pf-m-secondary"
|
||||
class="pf-c-button pf-m-block pf-m-secondary"
|
||||
href=${this.flow.exportUrl}
|
||||
>
|
||||
${t`Export`}
|
||||
|
||||
Reference in New Issue
Block a user