web/admin: fix chart display with no sources (#4782)

web/src/admin/admin-overview/cards/SystemStatusCard.ts

@@ -7,7 +7,7 @@ import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { t } from "@lingui/macro";
 
 import { TemplateResult, html } from "lit";
-import { customElement } from "lit/decorators.js";
+import { customElement, state } from "lit/decorators.js";
 
 import { AdminApi, OutpostsApi, System } from "@goauthentik/api";
 
@@ -18,6 +18,9 @@ export class SystemStatusCard extends AdminStatusCard<System> {
     header = t`System status`;
     icon = "pf-icon pf-icon-server";
 
+    @state()
+    statusSummary?: string;
+
     async getPrimaryValue(): Promise<System> {
         this.now = new Date();
         let status = await new AdminApi(DEFAULT_CONFIG).adminSystemRetrieve();
@@ -50,7 +53,7 @@ export class SystemStatusCard extends AdminStatusCard<System> {
 
     getStatus(value: System): Promise<AdminStatus> {
         if (value.embeddedOutpostHost === "") {
-            this.header = t`Warning`;
+            this.statusSummary = t`Warning`;
             return Promise.resolve<AdminStatus>({
                 icon: "fa fa-exclamation-triangle pf-m-warning",
                 message: html`${t`Embedded outpost is not configured correctly.`}
@@ -58,7 +61,7 @@ export class SystemStatusCard extends AdminStatusCard<System> {
             });
         }
         if (!value.httpIsSecure && document.location.protocol === "https:") {
-            this.header = t`Warning`;
+            this.statusSummary = t`Warning`;
             return Promise.resolve<AdminStatus>({
                 icon: "fa fa-exclamation-triangle pf-m-warning",
                 message: html`${t`HTTPS is not detected correctly`}`,
@@ -66,13 +69,13 @@ export class SystemStatusCard extends AdminStatusCard<System> {
         }
         const timeDiff = value.serverTime.getTime() - (this.now || new Date()).getTime();
         if (timeDiff > 5000 || timeDiff < -5000) {
-            this.header = t`Warning`;
+            this.statusSummary = t`Warning`;
             return Promise.resolve<AdminStatus>({
                 icon: "fa fa-exclamation-triangle pf-m-warning",
                 message: html`${t`Server and client are further than 5 seconds apart.`}`,
             });
         }
-        this.header = t`OK`;
+        this.statusSummary = t`OK`;
         return Promise.resolve<AdminStatus>({
             icon: "fa fa-check-circle pf-m-success",
             message: html`${t`Everything is ok.`}`,
@@ -80,6 +83,6 @@ export class SystemStatusCard extends AdminStatusCard<System> {
     }
 
     renderValue(): TemplateResult {
-        return html`${this.header}`;
+        return html`${this.statusSummary}`;
     }
 }

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

@@ -67,9 +67,9 @@ export class LDAPSyncStatusChart extends AKChart<LDAPSyncStats> {
         );
         this.centerText = sources.pagination.count.toString();
         return {
-            healthy: sources.pagination.count === 0 ? 0 : metrics.healthy,
+            healthy: metrics.healthy,
             failed: metrics.failed,
-            unsynced: metrics.unsynced,
+            unsynced: sources.pagination.count === 0 ? 1 : metrics.unsynced,
         };
     }
 

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

@@ -57,9 +57,9 @@ export class OutpostStatusChart extends AKChart<OutpostStats> {
         );
         this.centerText = outposts.pagination.count.toString();
         return {
-            healthy: outposts.pagination.count === 0 ? 0 : healthy,
+            healthy: healthy,
-            outdated,
+            outdated: outdated,
-            unhealthy,
+            unhealthy: outposts.pagination.count === 0 ? 1 : unhealthy,
         };
     }