web/admin: adjust sync threshold, add tooltip (#19131)

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

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

@@ -91,7 +91,11 @@ export class AdminOverviewPage extends AdminOverviewBase {
                         </ak-aggregate-card>
                     </div>
                     <div class="pf-l-grid__item pf-m-12-col pf-m-12-col-on-xl pf-m-4-col-on-2xl">
-                        <ak-aggregate-card icon="fa fa-sync-alt" label=${msg("Sync status")}>
+                        <ak-aggregate-card
+                            icon="fa fa-sync-alt"
+                            label=${msg("Sync status")}
+                            tooltip=${msg("Integrations synced in the last 12 hours.")}
+                        >
                             <ak-admin-status-chart-sync></ak-admin-status-chart-sync>
                         </ak-aggregate-card>
                     </div>

web/src/admin/admin-overview/charts/SyncStatusChart.ts

@@ -65,7 +65,7 @@ export class SyncStatusChart extends AKChart<SummarizedSyncStatus[]> {
                     const status = await fetchSyncStatus(element);
 
                     const now = new Date().getTime();
-                    const maxDelta = 3600000; // 1 hour
+                    const maxDelta = 12 * 60 * 60 * 1000; // 12 hours
 
                     if (
                         status.lastSyncStatus === TaskAggregatedStatusEnum.Error ||

web/src/elements/cards/AggregateCard.ts

@@ -1,3 +1,5 @@
+import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
+
 import { AKElement } from "#elements/Base";
 import Styles from "#elements/cards/AggregateCard.css";
 import { SlottedTemplateResult } from "#elements/types";
@@ -43,6 +45,14 @@ export class AggregateCard extends AKElement implements IAggregateCard {
     @property({ type: String })
     public label: string | null = null;
 
+    /**
+     * The optional tooltip of the card.
+     *
+     * @attr
+     */
+    @property({ type: String })
+    public tooltip: string | null = null;
+
     /**
      * If this is non-empty, a link icon will be shown in the upper-right corner of the card.
      *
@@ -93,7 +103,12 @@ export class AggregateCard extends AKElement implements IAggregateCard {
             >
                 <h1 part="card-title" class="pf-c-card__title" id="card-title">
                     ${this.icon ? html`<i aria-hidden="true" class="${this.icon}"></i>` : nothing}
-                    <span>${this.label || nothing}</span>${this.renderHeaderLink()}
+                    ${this.tooltip
+                        ? html`<pf-tooltip position="top" content=${this.tooltip}
+                              ><span>${this.label || nothing}</span></pf-tooltip
+                          >`
+                        : html`<span>${this.label || nothing}</span>`}
+                    ${this.renderHeaderLink()}
                 </h1>
             </header>
             <div part="card-body" class="pf-c-card__body">