2852fa3c5e
* api: fix types for config API * api: remove broken swagger UI * admin: re-fix system task enum * events: make event optional * events: fix Schema for notification transport test * flows: use APIView for Flow Executor * core: fix schema for Metrics APIs * web: rewrite to use generated API client * web: generate API Client in CI * admin: use x_cord and y_cord to prevent yaml issues * events: fix linting errors * web: don't lint generated code * core: fix fields not being required in TypeSerializer * flows: fix missing permission_classes * web: cleanup * web: fix rendering of graph on Overview page * web: cleanup imports * core: fix missing background image filter * flows: fix flows not advancing properly * stages/*: fix warnings during get_challenge * web: send Flow response as JSON instead of FormData * web: fix styles for horizontal tabs * web: add base chart class and custom chart for application view * root: generate ts client for e2e tests * web: don't attempt to connect to websocket in selenium tests * web: fix UserTokenList not being included in the build * web: fix styling for static token list * web: fix CSRF Token missing * stages/authenticator_static: fix error when disable static tokens * core: fix display issue when updating user info * web: fix Flow executor not showing spinner when redirecting
73 lines
2.1 KiB
TypeScript
73 lines
2.1 KiB
TypeScript
import { customElement, html, LitElement, property, TemplateResult } from "lit-element";
|
|
import FlowChart from "flowchart.js";
|
|
import { loading } from "../../utils";
|
|
import { FlowsApi } from "../../api";
|
|
import { DEFAULT_CONFIG } from "../../api/Config";
|
|
|
|
export const FONT_COLOUR_DARK_MODE = "#fafafa";
|
|
export const FONT_COLOUR_LIGHT_MODE = "#151515";
|
|
export const FILL_DARK_MODE = "#18191a";
|
|
export const FILL_LIGHT_MODE = "#f0f0f0";
|
|
|
|
@customElement("ak-flow-diagram")
|
|
export class FlowDiagram extends LitElement {
|
|
|
|
_flowSlug?: string;
|
|
|
|
@property()
|
|
set flowSlug(value: string) {
|
|
this._flowSlug = value;
|
|
new FlowsApi(DEFAULT_CONFIG).flowsInstancesDiagram({
|
|
slug: value,
|
|
}).then((data) => {
|
|
this.diagram = FlowChart.parse(data.diagram || "");
|
|
});
|
|
}
|
|
|
|
@property({attribute: false})
|
|
diagram?: FlowChart.Instance;
|
|
|
|
@property()
|
|
fontColour: string = FONT_COLOUR_DARK_MODE;
|
|
|
|
@property()
|
|
fill: string = FILL_DARK_MODE;
|
|
|
|
createRenderRoot(): Element | ShadowRoot {
|
|
return this;
|
|
}
|
|
|
|
constructor() {
|
|
super();
|
|
this.addEventListener("ak-refresh", () => {
|
|
if (!this._flowSlug) return;
|
|
this.flowSlug = this._flowSlug;
|
|
});
|
|
window.matchMedia("(prefers-color-scheme: light)").addEventListener("change", (ev) => {
|
|
if (ev.matches) {
|
|
this.fontColour = FONT_COLOUR_LIGHT_MODE;
|
|
this.fill = FILL_LIGHT_MODE;
|
|
} else {
|
|
this.fontColour = FONT_COLOUR_DARK_MODE;
|
|
this.fill = FILL_DARK_MODE;
|
|
}
|
|
});
|
|
}
|
|
|
|
render(): TemplateResult {
|
|
if (this.diagram) {
|
|
this.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``;
|
|
}
|
|
return loading(this.diagram, html``);
|
|
}
|
|
|
|
}
|