web/admin: rework outpost health
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
		| @ -8,6 +8,7 @@ import { CSSResult, TemplateResult, css, html } from "lit"; | ||||
| import { customElement, property } from "lit/decorators.js"; | ||||
|  | ||||
| import AKGlobal from "@goauthentik/common/styles/authentik.css"; | ||||
| import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css"; | ||||
| import PFBase from "@patternfly/patternfly/patternfly-base.css"; | ||||
|  | ||||
| import { OutpostHealth } from "@goauthentik/api"; | ||||
| @ -20,6 +21,7 @@ export class OutpostHealthElement extends AKElement { | ||||
|     static get styles(): CSSResult[] { | ||||
|         return [ | ||||
|             PFBase, | ||||
|             PFDescriptionList, | ||||
|             AKGlobal, | ||||
|             css` | ||||
|                 li { | ||||
| @ -40,21 +42,43 @@ export class OutpostHealthElement extends AKElement { | ||||
|                 8, | ||||
|             )})`; | ||||
|         } | ||||
|         return html` <ul> | ||||
|             <li> | ||||
|                 <ak-label color=${PFColor.Green}> | ||||
|                     ${t`Last seen: ${this.outpostHealth.lastSeen?.toLocaleTimeString()}`} | ||||
|                 </ak-label> | ||||
|             </li> | ||||
|             <li> | ||||
|                 ${this.outpostHealth.versionOutdated | ||||
|                     ? html`<ak-label color=${PFColor.Red} | ||||
|                           >${t`${this.outpostHealth.version}, should be ${this.outpostHealth.versionShould}`} | ||||
|                       </ak-label>` | ||||
|                     : html`<ak-label color=${PFColor.Green} | ||||
|                           >${t`Version: ${versionString}`} | ||||
|                       </ak-label>`} | ||||
|             </li> | ||||
|         </ul>`; | ||||
|         return html`<dl class="pf-c-description-list pf-m-compact"> | ||||
|             <div class="pf-c-description-list__group"> | ||||
|                 <dt class="pf-c-description-list__term"> | ||||
|                     <span class="pf-c-description-list__text">${t`Last seen`}</span> | ||||
|                 </dt> | ||||
|                 <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()} | ||||
|                         </ak-label> | ||||
|                     </div> | ||||
|                 </dd> | ||||
|             </div> | ||||
|             <div class="pf-c-description-list__group"> | ||||
|                 <dt class="pf-c-description-list__term"> | ||||
|                     <span class="pf-c-description-list__text">${t`Version`}</span> | ||||
|                 </dt> | ||||
|                 <dd class="pf-c-description-list__description"> | ||||
|                     <div class="pf-c-description-list__text"> | ||||
|                         ${this.outpostHealth.versionOutdated | ||||
|                             ? html`<ak-label color=${PFColor.Red} ?compact=${true} | ||||
|                                   >${t`${this.outpostHealth.version}, should be ${this.outpostHealth.versionShould}`} | ||||
|                               </ak-label>` | ||||
|                             : html`<ak-label color=${PFColor.Green} ?compact=${true} | ||||
|                                   >${versionString} | ||||
|                               </ak-label>`} | ||||
|                     </div> | ||||
|                 </dd> | ||||
|             </div> | ||||
|             <div class="pf-c-description-list__group"> | ||||
|                 <dt class="pf-c-description-list__term"> | ||||
|                     <span class="pf-c-description-list__text">${t`Hostname`}</span> | ||||
|                 </dt> | ||||
|                 <dd class="pf-c-description-list__description"> | ||||
|                     <div class="pf-c-description-list__text">${this.outpostHealth.hostname}</div> | ||||
|                 </dd> | ||||
|             </div> | ||||
|         </dl> `; | ||||
|     } | ||||
| } | ||||
|  | ||||
| @ -129,7 +129,7 @@ export class OutpostListPage extends TablePage<Outpost> { | ||||
|         return html`<td role="cell" colspan="5"> | ||||
|             <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)`} | ||||
|                     ${t`Detailed health (one instance per column, data is cached so may be out of date)`} | ||||
|                 </h3> | ||||
|                 <dl class="pf-c-description-list pf-m-3-col-on-lg"> | ||||
|                     ${until( | ||||
|  | ||||
		Reference in New Issue
	
	Block a user
	 Jens Langhammer
					Jens Langhammer