outposts: add better UI for showing mismatched versions (#10885)

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

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

@@ -31,6 +31,13 @@ export class VersionStatusCard extends AdminStatusCard<Version> {
                 message: html`${msg(str`${value.versionLatest} is available!`)}`,
             });
         }
+        if (value.outpostOutdated) {
+            return Promise.resolve<AdminStatus>({
+                icon: "fa fa-exclamation-triangle pf-m-warning",
+                message: html`${msg("An outpost is on an incorrect version!")}
+                    <a href="#/outpost/outposts">${msg("Check outposts.")}</a>`,
+            });
+        }
         if (value.versionLatestValid) {
             return Promise.resolve<AdminStatus>({
                 icon: "fa fa-check-circle pf-m-success",

web/src/admin/outposts/OutpostHealth.ts

@@ -1,3 +1,4 @@
+import { getRelativeTime } from "@goauthentik/common/utils";
 import { AKElement } from "@goauthentik/elements/Base";
 import { PFColor } from "@goauthentik/elements/Label";
 import "@goauthentik/elements/Spinner";
@@ -49,7 +50,9 @@ export class OutpostHealthElement extends AKElement {
                 <dd class="pf-c-description-list__description">
                     <div class="pf-c-description-list__text">
                         <ak-label color=${PFColor.Green} ?compact=${true}>
-                            ${this.outpostHealth.lastSeen?.toLocaleTimeString()}
+                            ${msg(
+                                str`${getRelativeTime(this.outpostHealth.lastSeen)} (${this.outpostHealth.lastSeen?.toLocaleTimeString()})`,
+                            )}
                         </ak-label>
                     </div>
                 </dd>

web/src/admin/outposts/OutpostHealthSimple.ts

@@ -1,12 +1,13 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { EVENT_REFRESH } from "@goauthentik/common/constants";
+import { getRelativeTime } from "@goauthentik/common/utils";
 import { AKElement } from "@goauthentik/elements/Base";
 import { PFColor } from "@goauthentik/elements/Label";
 import "@goauthentik/elements/Spinner";
 
 import { msg, str } from "@lit/localize";
 import { CSSResult, TemplateResult, html } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
 
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
@@ -17,8 +18,8 @@ export class OutpostHealthSimpleElement extends AKElement {
     @property()
     outpostId?: string;
 
-    @property({ attribute: false })
-    outpostHealth?: OutpostHealth;
+    @state()
+    outpostHealths: OutpostHealth[] = [];
 
     @property({ attribute: false })
     loaded = false;
@@ -33,7 +34,7 @@ export class OutpostHealthSimpleElement extends AKElement {
     constructor() {
         super();
         window.addEventListener(EVENT_REFRESH, () => {
-            this.outpostHealth = undefined;
+            this.outpostHealths = [];
             this.firstUpdated();
         });
     }
@@ -46,9 +47,7 @@ export class OutpostHealthSimpleElement extends AKElement {
             })
             .then((health) => {
                 this.loaded = true;
-                if (health.length >= 1) {
-                    this.outpostHealth = health[0];
-                }
+                this.outpostHealths = health;
             });
     }
 
@@ -56,11 +55,22 @@ export class OutpostHealthSimpleElement extends AKElement {
         if (!this.outpostId || !this.loaded) {
             return html`<ak-spinner></ak-spinner>`;
         }
-        if (!this.outpostHealth) {
+        if (!this.outpostHealths || this.outpostHealths.length === 0) {
             return html`<ak-label color=${PFColor.Grey}>${msg("Not available")}</ak-label>`;
         }
+        const outdatedOutposts = this.outpostHealths.filter((h) => h.versionOutdated);
+        if (outdatedOutposts.length > 0) {
+            return html`<ak-label color=${PFColor.Red}>
+                ${msg(
+                    str`${outdatedOutposts[0].version}, should be ${outdatedOutposts[0].versionShould}`,
+                )}</ak-label
+            >`;
+        }
+        const lastSeen = this.outpostHealths[0].lastSeen;
         return html`<ak-label color=${PFColor.Green}>
-            ${msg(str`Last seen: ${this.outpostHealth.lastSeen?.toLocaleTimeString()}`)}</ak-label
+            ${msg(
+                str`Last seen: ${getRelativeTime(lastSeen)} (${lastSeen.toLocaleTimeString()})`,
+            )}</ak-label
         >`;
     }
 }

web/src/admin/outposts/OutpostListPage.ts

@@ -70,7 +70,7 @@ export class OutpostListPage extends TablePage<Outpost> {
         const outposts = await new OutpostsApi(DEFAULT_CONFIG).outpostsInstancesList(
             await this.defaultEndpointConfig(),
         );
-        Promise.all(
+        await Promise.all(
             outposts.results.map((outpost) => {
                 return new OutpostsApi(DEFAULT_CONFIG)
                     .outpostsInstancesHealthList({