web/admin: show ldap sync status on overview page

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

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

@@ -4,8 +4,10 @@ import { CSSResult, customElement, html, LitElement, TemplateResult } from "lit-
 import "../../elements/charts/AdminLoginsChart";
 import "../../elements/cards/AggregatePromiseCard";
 import "./TopApplicationsTable";
+
 import "./cards/AdminStatusCard";
 import "./cards/FlowCacheStatusCard";
+import "./cards/LDAPSyncStatusCardContainer";
 import "./cards/PolicyCacheStatusCard";
 import "./cards/PolicyUnboundStatusCard";
 import "./cards/ProviderStatusCard";
@@ -53,6 +55,8 @@ export class AdminOverviewPage extends LitElement {
                 </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=${t`Cached Flows`}>
                 </ak-admin-status-card-flow-cache>
+                <ak-admin-status-card-ldap-sync-container >
+                </ak-admin-status-card-ldap-sync-container>
             </div>
         </section>`;
     }

web/src/pages/admin-overview/cards/LDAPSyncStatusCard.ts

@@ -0,0 +1,48 @@
+import { t } from "@lingui/macro";
+import { customElement, html, property, TemplateResult } from "lit-element";
+import { AdminStatus, AdminStatusCard } from "./AdminStatusCard";
+import { SourcesApi } from "authentik-api";
+import { DEFAULT_CONFIG } from "../../../api/Config";
+import "../../../elements/forms/ConfirmationForm";
+
+@customElement("ak-admin-status-card-ldap-sync")
+export class LDAPSyncStatusCard extends AdminStatusCard<Date | undefined> {
+
+    @property()
+    slug!: string;
+
+    getPrimaryValue(): Promise<Date | undefined> {
+        return new SourcesApi(DEFAULT_CONFIG).sourcesLdapSyncStatus({
+            slug: this.slug
+        }).then((value) => {
+            return value.lastSync;
+        });
+    }
+
+    renderValue(): TemplateResult {
+        return html`${t`Last sync: ${this.value?.toLocaleTimeString()}`}`;
+    }
+
+    getStatus(value: Date | undefined): Promise<AdminStatus> {
+        const now = new Date().getTime();
+        const maxDelta = 3600000; // 1 hour
+        if (!value || (now - value.getTime()) > maxDelta) {
+            // No sync or last sync was over maxDelta ago
+            return Promise.resolve<AdminStatus>({
+                icon: "fa fa-exclamation-triangle pf-m-warning",
+                message: t`Not synced.`,
+            });
+        } else {
+            return Promise.resolve<AdminStatus>({
+                icon: "fa fa-check-circle pf-m-success",
+            });
+        }
+    }
+
+    renderHeaderLink(): TemplateResult {
+        return html`<a href="#/core/sources/${this.slug}">
+                <i class="fa fa-external-link-alt"> </i>
+            </a>`;
+    }
+
+}

web/src/pages/admin-overview/cards/LDAPSyncStatusCardContainer.ts

@@ -0,0 +1,30 @@
+import { SourcesApi } from "authentik-api";
+import { customElement, html, LitElement, TemplateResult } from "lit-element";
+import { until } from "lit-html/directives/until";
+import "./LDAPSyncStatusCard";
+import { t } from "@lingui/macro";
+import { DEFAULT_CONFIG } from "../../../api/Config";
+
+@customElement("ak-admin-status-card-ldap-sync-container")
+export class LDAPSyncStatusCardContainer extends LitElement {
+
+    createRenderRoot(): Element | ShadowRoot {
+        return this;
+    }
+
+    render(): TemplateResult {
+        return html`
+            ${until(new SourcesApi(DEFAULT_CONFIG).sourcesLdapList({}).then(sources => {
+                return sources.results.map(source => {
+                    return html`<ak-admin-status-card-ldap-sync
+                        class="pf-l-gallery__item pf-m-4-col"
+                        icon="fa fa-sync-alt"
+                        header=${t`LDAP Sync status ${source.name}`}
+                        slug=${source.slug}>
+                    </ak-admin-status-card-ldap-sync>`;
+                });
+            }))}
+        `;
+    }
+
+}