From 1693118df7b5c1011f485d11dc55d8575cded20f Mon Sep 17 00:00:00 2001 From: Jens Langhammer Date: Sat, 7 Aug 2021 21:11:22 +0200 Subject: [PATCH] web/admin: cleanup display of outpost health Signed-off-by: Jens Langhammer --- web/src/locales/en.po | 15 ++-- web/src/locales/pseudo-LOCALE.po | 15 ++-- .../crypto/CertificateKeyPairListPage.ts | 2 +- web/src/pages/outposts/OutpostHealth.ts | 84 +++++-------------- web/src/pages/outposts/OutpostHealthSimple.ts | 63 ++++++++++++++ web/src/pages/outposts/OutpostListPage.ts | 75 ++++++++++------- 6 files changed, 148 insertions(+), 106 deletions(-) create mode 100644 web/src/pages/outposts/OutpostHealthSimple.ts diff --git a/web/src/locales/en.po b/web/src/locales/en.po index e24abbc90..bd6f5be54 100644 --- a/web/src/locales/en.po +++ b/web/src/locales/en.po @@ -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" diff --git a/web/src/locales/pseudo-LOCALE.po b/web/src/locales/pseudo-LOCALE.po index bcb3949e9..9d3603a5e 100644 --- a/web/src/locales/pseudo-LOCALE.po +++ b/web/src/locales/pseudo-LOCALE.po @@ -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 "" diff --git a/web/src/pages/crypto/CertificateKeyPairListPage.ts b/web/src/pages/crypto/CertificateKeyPairListPage.ts index 19edf1686..dcc77953b 100644 --- a/web/src/pages/crypto/CertificateKeyPairListPage.ts +++ b/web/src/pages/crypto/CertificateKeyPairListPage.ts @@ -99,7 +99,7 @@ export class CertificateKeyPairListPage extends TablePage { } renderExpanded(item: CertificateKeyPair): TemplateResult { - return html` + return html`
diff --git a/web/src/pages/outposts/OutpostHealth.ts b/web/src/pages/outposts/OutpostHealth.ts index e435f4dc7..888b58a91 100644 --- a/web/src/pages/outposts/OutpostHealth.ts +++ b/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``; } - if (this.outpostHealth.length === 0) { - return html`
    -
  • - -
    • -
`; - } - return html`
    - ${this.outpostHealth.map((h) => { - return html`
  • -
      -
    • - -
      • - ${this.showVersion - ? html`
    • - ${h.versionOutdated - ? html`` - : html``} -
      • ` - : html``} -
    -
    • `; - })} + return html`
      +
    • + +
      • +
    • + ${this.outpostHealth.versionOutdated + ? html`` + : html``} +
    `; } } diff --git a/web/src/pages/outposts/OutpostHealthSimple.ts b/web/src/pages/outposts/OutpostHealthSimple.ts new file mode 100644 index 000000000..365aedf90 --- /dev/null +++ b/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``; + } + if (!this.outpostHealth) { + return html``; + } + return html` `; + } +} diff --git a/web/src/pages/outposts/OutpostListPage.ts b/web/src/pages/outposts/OutpostListPage.ts index a88bd5953..e30b2cdd1 100644 --- a/web/src/pages/outposts/OutpostListPage.ts +++ b/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 { + expandable = true; + pageTitle(): string { return t`Outposts`; } @@ -49,15 +54,16 @@ export class OutpostListPage extends TablePage { ]; } + 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`
      @@ -68,8 +74,10 @@ export class OutpostListPage extends TablePage { })}
    `, html`${item.serviceConnectionObj?.name || t`No integration active`}`, - html``, - html` + html``, + html` ${t`Update`} ${t`Update Outpost`} @@ -85,6 +93,35 @@ export class OutpostListPage extends TablePage { ]; } + renderExpanded(item: Outpost): TemplateResult { + return html` +
    +

    ${t`Detailed health (one instance per column, data is cached so may be out of data)`}

    +
    + ${until( + new OutpostsApi(DEFAULT_CONFIG) + .outpostsInstancesHealthList({ + uuid: item.pk, + }) + .then((health) => { + return health.map((h) => { + return html`
    +
    +
    + +
    +
    +
    `; + }); + }), + )} +
    +
    + `; + } + renderToolbarSelected(): TemplateResult { const disabled = this.selectedElements.length !== 1; const item = this.selectedElements[0]; @@ -108,32 +145,6 @@ export class OutpostListPage extends TablePage { `; } - rowInbuilt(item: Outpost): TemplateResult[] { - return [ - html`${item.name}`, - html`
      - ${item.providersObj?.map((p) => { - return html`
    • - ${p.name} -
      • `; - })} -
    `, - html`${item.serviceConnectionObj?.name || t`No integration active`}`, - html``, - html` - ${t`Update`} - ${t`Update Outpost`} - - - `, - ]; - } - renderToolbar(): TemplateResult { return html`