habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: add flow and policy cache card

Browse Source
This commit is contained in:
Jens Langhammer
2020-12-16 22:25:44 +01:00
parent cf46ee06b7
commit 885a2f0a58
6 changed files with 103 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
authentik/admin/templates/administration/overview.html
View File

@ -11,57 +11,7 @@
</section>
<section class="pf-c-page__main-section">
<div class="pf-l-gallery pf-m-gutter">
<div class="pf-c-card pf-c-card-aggregate pf-l-gallery__item pf-m-compact">
<div class="pf-c-card__header pf-l-flex pf-m-justify-content-space-between">
<div class="pf-c-card__header-main">
<i class="pf-icon pf-icon-server"></i> {% trans 'Cached Policies' %}
</div>
<ak-modal-button href="{% url 'authentik_admin:overview-clear-policy-cache' %}">
<a slot="trigger">
<i class="fa fa-trash"> </i>
</a>
<div slot="modal"></div>
</ak-modal-button>
</div>
<div class="pf-c-card__body">
{% if cached_policies < 1 %}
<p class="ak-aggregate-card">
<i class="fa fa-exclamation-triangle"></i> {{ cached_policies }}
</p>
<p>{% trans 'No policies cached. Users may experience slow response times.' %}</p>
{% else %}
<p class="ak-aggregate-card">
<i class="fa fa-check-circle"></i> {{ cached_policies }}
</p>
{% endif %}
</div>
</div>
<div class="pf-c-card pf-c-card-aggregate pf-l-gallery__item pf-m-compact">
<div class="pf-c-card__header pf-l-flex pf-m-justify-content-space-between">
<div class="pf-c-card__header-main">
<i class="pf-icon pf-icon-server"></i> {% trans 'Cached Flows' %}
</div>
<ak-modal-button href="{% url 'authentik_admin:overview-clear-flow-cache' %}">
<a slot="trigger">
<i class="fa fa-trash"> </i>
</a>
<div slot="modal"></div>
</ak-modal-button>
</div>
<div class="pf-c-card__body">
{% if cached_flows < 1 %}
<p class="ak-aggregate-card">
<span class="fa fa-exclamation-triangle"></span> {{ cached_flows }}
</p>
<p>{% trans 'No flows cached.' %}</p>
{% else %}
<p class="ak-aggregate-card">
<i class="fa fa-check-circle"></i> {{ cached_flows }}
</p>
{% endif %}
</div>
</div>
</div>
</section>
{% endblock %}

6
web/src/api/flow.ts
View File

@ -33,6 +33,12 @@ export class Flow {
static list(filter?: QueryArguments): Promise<PBResponse<Flow>> {
return DefaultClient.fetch<PBResponse<Flow>>(["flows", "instances"], filter);
}
static cached(): Promise<number> {
return DefaultClient.fetch<PBResponse<Flow>>(["flows", "cached"]).then(r => {
return r.pagination.count;
});
}
}
export class Stage {

14
web/src/api/policy.ts
View File

@ -8,12 +8,18 @@ export class Policy {
throw Error();
}
static get(pk: string): Promise<PolicyBinding> {
return DefaultClient.fetch<PolicyBinding>(["policies", "all", pk]);
static get(pk: string): Promise<Policy> {
return DefaultClient.fetch<Policy>(["policies", "all", pk]);
}
static list(filter?: QueryArguments): Promise<PBResponse<PolicyBinding>> {
return DefaultClient.fetch<PBResponse<PolicyBinding>>(["policies", "all"], filter);
static list(filter?: QueryArguments): Promise<PBResponse<Policy>> {
return DefaultClient.fetch<PBResponse<Policy>>(["policies", "all"], filter);
}
static cached(): Promise<number> {
return DefaultClient.fetch<PBResponse<Policy>>(["policies", "cached"]).then(r => {
return r.pagination.count;
});
}
}

10
web/src/elements/cards/AggregateCard.ts
View File

@ -31,15 +31,19 @@ export class AggregateCard extends LitElement {
return html`<slot></slot>`;
}
renderHeaderLink(): TemplateResult {
return html`${this.headerLink ? html`<a href="${this.headerLink}">
<i class="fa fa-external-link-alt"> </i>
</a>` : ""}`;
}
render(): TemplateResult {
return html`<div class="pf-c-card pf-c-card-aggregate">
<div class="pf-c-card__header pf-l-flex pf-m-justify-content-space-between">
<div class="pf-c-card__header-main">
<i class="${ifDefined(this.icon)}"></i> ${this.header ? gettext(this.header) : ""}
</div>
${this.headerLink ? html`<a href="${this.headerLink}">
<i class="fa fa-external-link-alt"> </i>
</a>` : ""}
${this.renderHeaderLink()}
</div>
<div class="pf-c-card__body center-value">
${this.renderInner()}

25
web/src/pages/admin-overview/AdminOverviewPage.ts
View File

@ -41,6 +41,17 @@ export class AdminOverviewPage extends LitElement {
<ak-aggregate-card class="pf-l-gallery__item pf-m-4-col" icon="pf-icon pf-icon-server" header="Apps with most usage" style="grid-column-end: span 2;grid-row-end: span 3;">
<ak-top-applications-table></ak-top-applications-table>
</ak-aggregate-card>
<ak-admin-status-card-provider class="pf-l-gallery__item pf-m-4-col" icon="pf-icon pf-icon-plugged" header="Providers" headerLink="#/administration/providers/">
</ak-admin-status-card-provider>
<ak-admin-status-card-policy-unbound class="pf-l-gallery__item pf-m-4-col" icon="pf-icon pf-icon-infrastructure" header="Policies" headerLink="#/administration/policies/">
</ak-admin-status-card-policy-unbound>
<ak-aggregate-card-promise
icon="pf-icon pf-icon-user"
header="Users"
headerLink="#/administration/users/"
.promise=${this.users}>
</ak-aggregate-card-promise>
<!-- Version card -->
<ak-aggregate-card class="pf-l-gallery__item pf-m-4-col" icon="pf-icon pf-icon-server" header="Workers">
${this.data ?
this.data?.worker_count < 1 ?
@ -53,16 +64,10 @@ export class AdminOverviewPage extends LitElement {
</p>`
: html`<ak-spinner size=${SpinnerSize.Large}></ak-spinner>`}
</ak-aggregate-card>
<ak-admin-status-card-provider class="pf-l-gallery__item pf-m-4-col" icon="pf-icon pf-icon-plugged" header="Providers" headerLink="#/administration/providers/">
</ak-admin-status-card-provider>
<ak-admin-status-card-policy class="pf-l-gallery__item pf-m-4-col" icon="pf-icon pf-icon-plugged" header="Policies" headerLink="#/administration/policies/">
</ak-admin-status-card-policy>
<ak-aggregate-card-promise
icon="pf-icon pf-icon-user"
header="Users"
headerLink="#/administration/users/"
.promise=${this.users}>
</ak-aggregate-card-promise>
<ak-admin-status-card-policy-cache class="pf-l-gallery__item pf-m-4-col" icon="pf-icon pf-icon-server" header="Cached Policies">
</ak-admin-status-card-policy-cache>
<ak-admin-status-card-flow-cache class="pf-l-gallery__item pf-m-4-col" icon="pf-icon pf-icon-server" header="Cached Flows">
</ak-admin-status-card-flow-cache>
</div>
</section>`;
}

67
web/src/pages/admin-overview/OverviewCards.ts
View File

@ -2,6 +2,7 @@ import { gettext } from "django";
import { customElement, property } from "lit-element";
import { html, TemplateResult } from "lit-html";
import { until } from "lit-html/directives/until";
import { Flow } from "../../api/flow";
import { Policy } from "../../api/policy";
import { Provider } from "../../api/provider";
import { AggregateCard } from "../../elements/cards/AggregateCard";
@ -62,8 +63,8 @@ export class ProviderStatusCard extends AdminStatusCard {
}
@customElement("ak-admin-status-card-policy")
export class PolicyStatusCard extends AdminStatusCard {
@customElement("ak-admin-status-card-policy-unbound")
export class PolicyUnboundStatusCard extends AdminStatusCard {
getPrimaryCounter(): Promise<number> {
return Policy.list({
@ -88,3 +89,65 @@ export class PolicyStatusCard extends AdminStatusCard {
}
}
@customElement("ak-admin-status-card-policy-cache")
export class PolicyCacheStatusCard extends AdminStatusCard {
getPrimaryCounter(): Promise<number> {
return Policy.cached();
}
getStatus(counter: number): Promise<AdminStatus> {
if (counter < 1) {
return Promise.resolve<AdminStatus>({
icon: "fa fa-exclamation-triangle",
message: gettext("No policies cached. Users may experience slow response times."),
});
} else {
return Promise.resolve<AdminStatus>({
icon: "fa fa-check-circle"
});
}
}
renderHeaderLink(): TemplateResult {
return html`<ak-modal-button href="/administration/overview/cache/policy/">
<a slot="trigger">
<i class="fa fa-trash"> </i>
</a>
<div slot="modal"></div>
</ak-modal-button>`;
}
}
@customElement("ak-admin-status-card-flow-cache")
export class FlowCacheStatusCard extends AdminStatusCard {
getPrimaryCounter(): Promise<number> {
return Flow.cached();
}
getStatus(counter: number): Promise<AdminStatus> {
if (counter < 1) {
return Promise.resolve<AdminStatus>({
icon: "fa fa-exclamation-triangle",
message: gettext("No flows cached."),
});
} else {
return Promise.resolve<AdminStatus>({
icon: "fa fa-check-circle"
});
}
}
renderHeaderLink(): TemplateResult {
return html`<ak-modal-button href="/administration/overview/cache/flow/">
<a slot="trigger">
<i class="fa fa-trash"> </i>
</a>
<div slot="modal"></div>
</ak-modal-button>`;
}
}