web/admin: cleanup display of outpost health

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-08-07 21:11:22 +02:00
parent b0f09eb2c4
commit 1693118df7
6 changed files with 148 additions and 106 deletions

View File

@ -118,6 +118,10 @@ msgstr "Action"
msgid "Actions"
msgstr "Actions"
#: src/pages/users/UserViewPage.ts
msgid "Actions over the last 24 hours"
msgstr "Actions over the last 24 hours"
#: src/pages/groups/MemberSelectModal.ts
#: src/pages/users/UserListPage.ts
#: src/pages/users/UserViewPage.ts
@ -1155,6 +1159,10 @@ msgstr "Designates whether this user should be treated as active. Unselect this
msgid "Designation"
msgstr "Designation"
#: src/pages/outposts/OutpostListPage.ts
msgid "Detailed health (one instance per column, data is cached so may be out of data)"
msgstr "Detailed health (one instance per column, data is cached so may be out of data)"
#: src/pages/providers/saml/SAMLProviderForm.ts
msgid "Determines how authentik sends the response back to the Service Provider."
msgstr "Determines how authentik sends the response back to the Service Provider."
@ -2063,6 +2071,7 @@ msgid "Last run"
msgstr "Last run"
#: src/pages/outposts/OutpostHealth.ts
#: src/pages/outposts/OutpostHealthSimple.ts
msgid "Last seen: {0}"
msgstr "Last seen: {0}"
@ -2495,7 +2504,6 @@ msgstr "No additional data available."
msgid "No form found"
msgstr "No form found"
#: src/pages/outposts/OutpostListPage.ts
#: src/pages/outposts/OutpostListPage.ts
msgid "No integration active"
msgstr "No integration active"
@ -2529,7 +2537,7 @@ msgstr "No workers connected. Background tasks will not run."
msgid "None (rule disabled)"
msgstr "None (rule disabled)"
#: src/pages/outposts/OutpostHealth.ts
#: src/pages/outposts/OutpostHealthSimple.ts
msgid "Not available"
msgstr "Not available"
@ -4017,7 +4025,6 @@ msgid "Tenants"
msgstr "Tenants"
#: src/pages/applications/ApplicationViewPage.ts
#: src/pages/events/TransportListPage.ts
#: src/pages/policies/PolicyListPage.ts
#: src/pages/property-mappings/PropertyMappingListPage.ts
#: src/pages/property-mappings/PropertyMappingListPage.ts
@ -4316,7 +4323,6 @@ msgstr "Up-to-date!"
#: src/pages/flows/FlowListPage.ts
#: src/pages/groups/GroupListPage.ts
#: src/pages/outposts/OutpostListPage.ts
#: src/pages/outposts/OutpostListPage.ts
#: src/pages/outposts/ServiceConnectionListPage.ts
#: src/pages/policies/BoundPoliciesList.ts
#: src/pages/policies/BoundPoliciesList.ts
@ -4394,7 +4400,6 @@ msgstr "Update OAuth Source"
msgid "Update OAuth2 Provider"
msgstr "Update OAuth2 Provider"
#: src/pages/outposts/OutpostListPage.ts
#: src/pages/outposts/OutpostListPage.ts
msgid "Update Outpost"
msgstr "Update Outpost"

View File

@ -118,6 +118,10 @@ msgstr ""
msgid "Actions"
msgstr ""
#: src/pages/users/UserViewPage.ts
msgid "Actions over the last 24 hours"
msgstr ""
#: src/pages/groups/MemberSelectModal.ts
#: src/pages/users/UserListPage.ts
#: src/pages/users/UserViewPage.ts
@ -1147,6 +1151,10 @@ msgstr ""
msgid "Designation"
msgstr ""
#: src/pages/outposts/OutpostListPage.ts
msgid "Detailed health (one instance per column, data is cached so may be out of data)"
msgstr ""
#: src/pages/providers/saml/SAMLProviderForm.ts
msgid "Determines how authentik sends the response back to the Service Provider."
msgstr ""
@ -2055,6 +2063,7 @@ msgid "Last run"
msgstr ""
#: src/pages/outposts/OutpostHealth.ts
#: src/pages/outposts/OutpostHealthSimple.ts
msgid "Last seen: {0}"
msgstr ""
@ -2487,7 +2496,6 @@ msgstr ""
msgid "No form found"
msgstr ""
#: src/pages/outposts/OutpostListPage.ts
#: src/pages/outposts/OutpostListPage.ts
msgid "No integration active"
msgstr ""
@ -2521,7 +2529,7 @@ msgstr ""
msgid "None (rule disabled)"
msgstr ""
#: src/pages/outposts/OutpostHealth.ts
#: src/pages/outposts/OutpostHealthSimple.ts
msgid "Not available"
msgstr ""
@ -4009,7 +4017,6 @@ msgid "Tenants"
msgstr ""
#: src/pages/applications/ApplicationViewPage.ts
#: src/pages/events/TransportListPage.ts
#: src/pages/policies/PolicyListPage.ts
#: src/pages/property-mappings/PropertyMappingListPage.ts
#: src/pages/property-mappings/PropertyMappingListPage.ts
@ -4301,7 +4308,6 @@ msgstr ""
#: src/pages/flows/FlowListPage.ts
#: src/pages/groups/GroupListPage.ts
#: src/pages/outposts/OutpostListPage.ts
#: src/pages/outposts/OutpostListPage.ts
#: src/pages/outposts/ServiceConnectionListPage.ts
#: src/pages/policies/BoundPoliciesList.ts
#: src/pages/policies/BoundPoliciesList.ts
@ -4379,7 +4385,6 @@ msgstr ""
msgid "Update OAuth2 Provider"
msgstr ""
#: src/pages/outposts/OutpostListPage.ts
#: src/pages/outposts/OutpostListPage.ts
msgid "Update Outpost"
msgstr ""

View File

@ -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">

View File

@ -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()}`}
text=${t`Last seen: ${this.outpostHealth.lastSeen?.toLocaleTimeString()}`}
></ak-label>
</li>
${this.showVersion
? html`<li role="cell">
${h.versionOutdated
<li role="cell">
${this.outpostHealth.versionOutdated
? html`<ak-label
color=${PFColor.Red}
text=${t`${h.version}, should be ${h.versionShould}`}
text=${t`${this.outpostHealth.version}, should be ${this.outpostHealth.versionShould}`}
></ak-label>`
: html`<ak-label
color=${PFColor.Green}
text=${t`Version: ${h.version || ""}`}
text=${t`Version: ${this.outpostHealth.version || ""}`}
></ak-label>`}
</li>`
: html``}
</ul>
</li>`;
})}
</li>
</ul>`;
}
}

View File

@ -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>`;
}
}

View File

@ -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>