web/admin: cleanup display of outpost health

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

web/src/pages/crypto/CertificateKeyPairListPage.ts

@@ -99,7 +99,7 @@ export class CertificateKeyPairListPage extends TablePage<CertificateKeyPair> {
     }
 
     renderExpanded(item: CertificateKeyPair): TemplateResult {
-        return html` <td role="cell" colspan="3">
+        return html`<td role="cell" colspan="3">
                 <div class="pf-c-table__expandable-row-content">
                     <dl class="pf-c-description-list pf-m-horizontal">
                         <div class="pf-c-description-list__group">

web/src/pages/outposts/OutpostHealth.ts

@@ -1,84 +1,42 @@
 import { t } from "@lingui/macro";
 import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
-import { OutpostHealth, OutpostsApi } from "authentik-api";
-import { DEFAULT_CONFIG } from "../../api/Config";
+import { OutpostHealth } from "authentik-api";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 import "../../elements/Spinner";
 import AKGlobal from "../../authentik.css";
 import { PFColor } from "../../elements/Label";
-import { EVENT_REFRESH } from "../../constants";
 
 @customElement("ak-outpost-health")
 export class OutpostHealthElement extends LitElement {
-    @property()
-    outpostId?: string;
-
     @property({ attribute: false })
-    outpostHealth?: OutpostHealth[];
-
-    @property({ attribute: false })
-    showVersion = true;
+    outpostHealth?: OutpostHealth;
 
     static get styles(): CSSResult[] {
         return [PFBase, AKGlobal];
     }
 
-    constructor() {
-        super();
-        window.addEventListener(EVENT_REFRESH, () => {
-            this.outpostHealth = undefined;
-            this.firstUpdated();
-        });
-    }
-
-    firstUpdated(): void {
-        if (!this.outpostId) return;
-        new OutpostsApi(DEFAULT_CONFIG)
-            .outpostsInstancesHealthList({
-                uuid: this.outpostId,
-            })
-            .then((health) => {
-                this.outpostHealth = health;
-            });
-    }
-
     render(): TemplateResult {
-        if (!this.outpostId || !this.outpostHealth) {
+        if (!this.outpostHealth) {
             return html`<ak-spinner></ak-spinner>`;
         }
-        if (this.outpostHealth.length === 0) {
-            return html` <ul>
-                <li role="cell">
-                    <ak-label color=${PFColor.Grey} text=${t`Not available`}></ak-label>
-                </li>
-            </ul>`;
-        }
-        return html`<ul>
-            ${this.outpostHealth.map((h) => {
-                return html`<li>
-                    <ul>
-                        <li role="cell">
-                            <ak-label
-                                color=${PFColor.Green}
-                                text=${t`Last seen: ${h.lastSeen?.toLocaleTimeString()}`}
-                            ></ak-label>
-                        </li>
-                        ${this.showVersion
-                            ? html`<li role="cell">
-                                  ${h.versionOutdated
-                                      ? html`<ak-label
-                                            color=${PFColor.Red}
-                                            text=${t`${h.version}, should be ${h.versionShould}`}
-                                        ></ak-label>`
-                                      : html`<ak-label
-                                            color=${PFColor.Green}
-                                            text=${t`Version: ${h.version || ""}`}
-                                        ></ak-label>`}
-                              </li>`
-                            : html``}
-                    </ul>
-                </li>`;
-            })}
+        return html` <ul>
+            <li role="cell">
+                <ak-label
+                    color=${PFColor.Green}
+                    text=${t`Last seen: ${this.outpostHealth.lastSeen?.toLocaleTimeString()}`}
+                ></ak-label>
+            </li>
+            <li role="cell">
+                ${this.outpostHealth.versionOutdated
+                    ? html`<ak-label
+                          color=${PFColor.Red}
+                          text=${t`${this.outpostHealth.version}, should be ${this.outpostHealth.versionShould}`}
+                      ></ak-label>`
+                    : html`<ak-label
+                          color=${PFColor.Green}
+                          text=${t`Version: ${this.outpostHealth.version || ""}`}
+                      ></ak-label>`}
+            </li>
         </ul>`;
     }
 }

web/src/pages/outposts/OutpostHealthSimple.ts

@@ -0,0 +1,63 @@
+import { t } from "@lingui/macro";
+import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
+import { OutpostHealth, OutpostsApi } from "authentik-api";
+import { DEFAULT_CONFIG } from "../../api/Config";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import "../../elements/Spinner";
+import AKGlobal from "../../authentik.css";
+import { PFColor } from "../../elements/Label";
+import { EVENT_REFRESH } from "../../constants";
+
+@customElement("ak-outpost-health-simple")
+export class OutpostHealthSimpleElement extends LitElement {
+    @property()
+    outpostId?: string;
+
+    @property({ attribute: false })
+    outpostHealth?: OutpostHealth;
+
+    @property({ attribute: false })
+    loaded = false;
+
+    @property({ attribute: false })
+    showVersion = true;
+
+    static get styles(): CSSResult[] {
+        return [PFBase, AKGlobal];
+    }
+
+    constructor() {
+        super();
+        window.addEventListener(EVENT_REFRESH, () => {
+            this.outpostHealth = undefined;
+            this.firstUpdated();
+        });
+    }
+
+    firstUpdated(): void {
+        if (!this.outpostId) return;
+        new OutpostsApi(DEFAULT_CONFIG)
+            .outpostsInstancesHealthList({
+                uuid: this.outpostId,
+            })
+            .then((health) => {
+                this.loaded = true;
+                if (health.length >= 1) {
+                    this.outpostHealth = health[0];
+                }
+            });
+    }
+
+    render(): TemplateResult {
+        if (!this.outpostId || !this.loaded) {
+            return html`<ak-spinner></ak-spinner>`;
+        }
+        if (!this.outpostHealth) {
+            return html`<ak-label color=${PFColor.Grey} text=${t`Not available`}></ak-label>`;
+        }
+        return html` <ak-label
+            color=${PFColor.Green}
+            text=${t`Last seen: ${this.outpostHealth.lastSeen?.toLocaleTimeString()}`}
+        ></ak-label>`;
+    }
+}

web/src/pages/outposts/OutpostListPage.ts

@@ -1,11 +1,13 @@
 import { t } from "@lingui/macro";
-import { customElement, property } from "lit-element";
+import { CSSResult, customElement, property } from "lit-element";
 import { html, TemplateResult } from "lit-html";
 import { AKResponse } from "../../api/Client";
 import { TableColumn } from "../../elements/table/Table";
 import { TablePage } from "../../elements/table/TablePage";
+import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
 
 import "./OutpostHealth";
+import "./OutpostHealthSimple";
 import "./OutpostForm";
 import "./OutpostDeploymentModal";
 import "../../elements/buttons/SpinnerButton";
@@ -16,9 +18,12 @@ import { Outpost, OutpostsApi } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
 import { ifDefined } from "lit-html/directives/if-defined";
 import { PFSize } from "../../elements/Spinner";
+import { until } from "lit-html/directives/until";
 
 @customElement("ak-outpost-list")
 export class OutpostListPage extends TablePage<Outpost> {
+    expandable = true;
+
     pageTitle(): string {
         return t`Outposts`;
     }
@@ -49,15 +54,16 @@ export class OutpostListPage extends TablePage<Outpost> {
         ];
     }
 
+    static get styles(): CSSResult[] {
+        return super.styles.concat(PFDescriptionList);
+    }
+
     checkbox = true;
 
     @property()
     order = "name";
 
     row(item: Outpost): TemplateResult[] {
-        if (item.managed === "goauthentik.io/outposts/embedded") {
-            return this.rowInbuilt(item);
-        }
         return [
             html`${item.name}`,
             html`<ul>
@@ -68,8 +74,10 @@ export class OutpostListPage extends TablePage<Outpost> {
                 })}
             </ul>`,
             html`${item.serviceConnectionObj?.name || t`No integration active`}`,
-            html`<ak-outpost-health outpostId=${ifDefined(item.pk)}></ak-outpost-health>`,
-            html` <ak-forms-modal>
+            html`<ak-outpost-health-simple
+                outpostId=${ifDefined(item.pk)}
+            ></ak-outpost-health-simple>`,
+            html`<ak-forms-modal>
                     <span slot="submit"> ${t`Update`} </span>
                     <span slot="header"> ${t`Update Outpost`} </span>
                     <ak-outpost-form slot="form" .instancePk=${item.pk}> </ak-outpost-form>
@@ -85,6 +93,35 @@ export class OutpostListPage extends TablePage<Outpost> {
         ];
     }
 
+    renderExpanded(item: Outpost): TemplateResult {
+        return html`<td role="cell" colspan="3">
+            <div class="pf-c-table__expandable-row-content">
+                <h3>${t`Detailed health (one instance per column, data is cached so may be out of data)`}</h3>
+                <dl class="pf-c-description-list">
+                    ${until(
+                        new OutpostsApi(DEFAULT_CONFIG)
+                            .outpostsInstancesHealthList({
+                                uuid: item.pk,
+                            })
+                            .then((health) => {
+                                return health.map((h) => {
+                                    return html` <div class="pf-c-description-list__group">
+                                        <dd class="pf-c-description-list__description">
+                                            <div class="pf-c-description-list__text">
+                                                <ak-outpost-health
+                                                    .outpostHealth=${h}
+                                                ></ak-outpost-health>
+                                            </div>
+                                        </dd>
+                                    </div>`;
+                                });
+                            }),
+                    )}
+                </dl>
+            </div>
+        </td>`;
+    }
+
     renderToolbarSelected(): TemplateResult {
         const disabled = this.selectedElements.length !== 1;
         const item = this.selectedElements[0];
@@ -108,32 +145,6 @@ export class OutpostListPage extends TablePage<Outpost> {
         </ak-forms-delete>`;
     }
 
-    rowInbuilt(item: Outpost): TemplateResult[] {
-        return [
-            html`${item.name}`,
-            html`<ul>
-                ${item.providersObj?.map((p) => {
-                    return html`<li>
-                        <a href="#/core/providers/${p.pk}">${p.name}</a>
-                    </li>`;
-                })}
-            </ul>`,
-            html`${item.serviceConnectionObj?.name || t`No integration active`}`,
-            html`<ak-outpost-health
-                .showVersion=${false}
-                outpostId=${ifDefined(item.pk)}
-            ></ak-outpost-health>`,
-            html`<ak-forms-modal>
-                <span slot="submit"> ${t`Update`} </span>
-                <span slot="header"> ${t`Update Outpost`} </span>
-                <ak-outpost-form slot="form" .instancePk=${item.pk}> </ak-outpost-form>
-                <button slot="trigger" class="pf-c-button pf-m-plain">
-                    <i class="fas fa-edit"></i>
-                </button>
-            </ak-forms-modal>`,
-        ];
-    }
-
     renderToolbar(): TemplateResult {
         return html`
             <ak-forms-modal>