web: add flow and policy cache card

authentik/admin/templates/administration/overview.html

@@ -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 %}

web/src/api/flow.ts

@@ -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 {

web/src/api/policy.ts

@@ -8,12 +8,18 @@ export class Policy {
         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;
+        });
     }
 }
 

web/src/elements/cards/AggregateCard.ts

@@ -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}">
+                ${this.renderHeaderLink()}
-                    <i class="fa fa-external-link-alt"> </i>
-                </a>` : ""}
             </div>
             <div class="pf-c-card__body center-value">
                 ${this.renderInner()}

web/src/pages/admin-overview/AdminOverviewPage.ts

@@ -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-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>
         </section>`;
     }

web/src/pages/admin-overview/OverviewCards.ts

@@ -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")
+@customElement("ak-admin-status-card-policy-unbound")
-export class PolicyStatusCard extends AdminStatusCard {
+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>`;
+    }
+
+}