web: add flow and policy cache card
This commit is contained in:
parent
cf46ee06b7
commit
885a2f0a58
|
@ -11,57 +11,7 @@
|
||||||
</section>
|
</section>
|
||||||
<section class="pf-c-page__main-section">
|
<section class="pf-c-page__main-section">
|
||||||
<div class="pf-l-gallery pf-m-gutter">
|
<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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
@ -33,6 +33,12 @@ export class Flow {
|
||||||
static list(filter?: QueryArguments): Promise<PBResponse<Flow>> {
|
static list(filter?: QueryArguments): Promise<PBResponse<Flow>> {
|
||||||
return DefaultClient.fetch<PBResponse<Flow>>(["flows", "instances"], filter);
|
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 {
|
export class Stage {
|
||||||
|
|
|
@ -8,12 +8,18 @@ export class Policy {
|
||||||
throw Error();
|
throw Error();
|
||||||
}
|
}
|
||||||
|
|
||||||
static get(pk: string): Promise<PolicyBinding> {
|
static get(pk: string): Promise<Policy> {
|
||||||
return DefaultClient.fetch<PolicyBinding>(["policies", "all", pk]);
|
return DefaultClient.fetch<Policy>(["policies", "all", pk]);
|
||||||
}
|
}
|
||||||
|
|
||||||
static list(filter?: QueryArguments): Promise<PBResponse<PolicyBinding>> {
|
static list(filter?: QueryArguments): Promise<PBResponse<Policy>> {
|
||||||
return DefaultClient.fetch<PBResponse<PolicyBinding>>(["policies", "all"], filter);
|
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;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -31,15 +31,19 @@ export class AggregateCard extends LitElement {
|
||||||
return html`<slot></slot>`;
|
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 {
|
render(): TemplateResult {
|
||||||
return html`<div class="pf-c-card pf-c-card-aggregate">
|
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 pf-l-flex pf-m-justify-content-space-between">
|
||||||
<div class="pf-c-card__header-main">
|
<div class="pf-c-card__header-main">
|
||||||
<i class="${ifDefined(this.icon)}"></i> ${this.header ? gettext(this.header) : ""}
|
<i class="${ifDefined(this.icon)}"></i> ${this.header ? gettext(this.header) : ""}
|
||||||
</div>
|
</div>
|
||||||
${this.headerLink ? html`<a href="${this.headerLink}">
|
${this.renderHeaderLink()}
|
||||||
<i class="fa fa-external-link-alt"> </i>
|
|
||||||
</a>` : ""}
|
|
||||||
</div>
|
</div>
|
||||||
<div class="pf-c-card__body center-value">
|
<div class="pf-c-card__body center-value">
|
||||||
${this.renderInner()}
|
${this.renderInner()}
|
||||||
|
|
|
@ -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-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-top-applications-table></ak-top-applications-table>
|
||||||
</ak-aggregate-card>
|
</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">
|
<ak-aggregate-card class="pf-l-gallery__item pf-m-4-col" icon="pf-icon pf-icon-server" header="Workers">
|
||||||
${this.data ?
|
${this.data ?
|
||||||
this.data?.worker_count < 1 ?
|
this.data?.worker_count < 1 ?
|
||||||
|
@ -53,16 +64,10 @@ export class AdminOverviewPage extends LitElement {
|
||||||
</p>`
|
</p>`
|
||||||
: html`<ak-spinner size=${SpinnerSize.Large}></ak-spinner>`}
|
: html`<ak-spinner size=${SpinnerSize.Large}></ak-spinner>`}
|
||||||
</ak-aggregate-card>
|
</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-policy-cache class="pf-l-gallery__item pf-m-4-col" icon="pf-icon pf-icon-server" header="Cached Policies">
|
||||||
</ak-admin-status-card-provider>
|
</ak-admin-status-card-policy-cache>
|
||||||
<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-flow-cache class="pf-l-gallery__item pf-m-4-col" icon="pf-icon pf-icon-server" header="Cached Flows">
|
||||||
</ak-admin-status-card-policy>
|
</ak-admin-status-card-flow-cache>
|
||||||
<ak-aggregate-card-promise
|
|
||||||
icon="pf-icon pf-icon-user"
|
|
||||||
header="Users"
|
|
||||||
headerLink="#/administration/users/"
|
|
||||||
.promise=${this.users}>
|
|
||||||
</ak-aggregate-card-promise>
|
|
||||||
</div>
|
</div>
|
||||||
</section>`;
|
</section>`;
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,6 +2,7 @@ import { gettext } from "django";
|
||||||
import { customElement, property } from "lit-element";
|
import { customElement, property } from "lit-element";
|
||||||
import { html, TemplateResult } from "lit-html";
|
import { html, TemplateResult } from "lit-html";
|
||||||
import { until } from "lit-html/directives/until";
|
import { until } from "lit-html/directives/until";
|
||||||
|
import { Flow } from "../../api/flow";
|
||||||
import { Policy } from "../../api/policy";
|
import { Policy } from "../../api/policy";
|
||||||
import { Provider } from "../../api/provider";
|
import { Provider } from "../../api/provider";
|
||||||
import { AggregateCard } from "../../elements/cards/AggregateCard";
|
import { AggregateCard } from "../../elements/cards/AggregateCard";
|
||||||
|
@ -62,8 +63,8 @@ export class ProviderStatusCard extends AdminStatusCard {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@customElement("ak-admin-status-card-policy")
|
@customElement("ak-admin-status-card-policy-unbound")
|
||||||
export class PolicyStatusCard extends AdminStatusCard {
|
export class PolicyUnboundStatusCard extends AdminStatusCard {
|
||||||
|
|
||||||
getPrimaryCounter(): Promise<number> {
|
getPrimaryCounter(): Promise<number> {
|
||||||
return Policy.list({
|
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>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
Reference in a new issue