web/admin: update overview page

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-12-14 15:23:32 +01:00
parent 44cfd7e5b0
commit c6a3286e4c
2 changed files with 47 additions and 10 deletions

View File

@ -2,15 +2,19 @@ import { t } from "@lingui/macro";
import { CSSResult, LitElement, TemplateResult, css, html } from "lit"; import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
import { customElement } from "lit/decorators.js"; import { customElement } from "lit/decorators.js";
import { until } from "lit/directives/until.js";
import AKGlobal from "../../authentik.css"; import AKGlobal from "../../authentik.css";
import PFContent from "@patternfly/patternfly/components/Content/content.css"; import PFContent from "@patternfly/patternfly/components/Content/content.css";
import PFList from "@patternfly/patternfly/components/List/list.css";
import PFPage from "@patternfly/patternfly/components/Page/page.css"; import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFGrid from "@patternfly/patternfly/layouts/Grid/grid.css"; import PFGrid from "@patternfly/patternfly/layouts/Grid/grid.css";
import { me } from "../../api/Users";
import "../../elements/PageHeader"; import "../../elements/PageHeader";
import "../../elements/cards/AggregatePromiseCard"; import "../../elements/cards/AggregatePromiseCard";
import "../../elements/charts/AdminLoginsChart"; import "../../elements/charts/AdminLoginsChart";
import { paramURL } from "../../elements/router/RouterOutlet";
import "./TopApplicationsTable"; import "./TopApplicationsTable";
import "./cards/AdminStatusCard"; import "./cards/AdminStatusCard";
import "./cards/BackupStatusCard"; import "./cards/BackupStatusCard";
@ -31,6 +35,7 @@ export class AdminOverviewPage extends LitElement {
PFGrid, PFGrid,
PFPage, PFPage,
PFContent, PFContent,
PFList,
AKGlobal, AKGlobal,
css` css`
.row-divider { .row-divider {
@ -51,11 +56,18 @@ export class AdminOverviewPage extends LitElement {
} }
render(): TemplateResult { render(): TemplateResult {
return html` <ak-page-header return html`<ak-page-header icon="" header="" description=${t`General system status`}>
icon="" <span slot="header">
header=${t`System Overview`} ${until(
description=${t`General system status`} me().then((user) => {
> let name = user.user.username;
if (user.user.name !== "") {
name = user.user.name;
}
return t`Welcome, ${name}.`;
}),
)}
</span>
</ak-page-header> </ak-page-header>
<section class="pf-c-page__main-section"> <section class="pf-c-page__main-section">
<div class="pf-l-grid pf-m-gutter"> <div class="pf-l-grid pf-m-gutter">
@ -64,11 +76,35 @@ export class AdminOverviewPage extends LitElement {
class="pf-l-grid__item pf-m-6-col pf-m-4-col-on-xl pf-m-2-col-on-2xl graph-container" class="pf-l-grid__item pf-m-6-col pf-m-4-col-on-xl pf-m-2-col-on-2xl graph-container"
> >
<ak-aggregate-card <ak-aggregate-card
icon="pf-icon pf-icon-infrastructure" icon="fa fa-share"
header=${t`Policies`} header=${t`Quick actions`}
headerLink="#/policy/policies" .isCenter=${false}
> >
<ak-admin-status-chart-policy></ak-admin-status-chart-policy> <ul class="pf-c-list">
<li>
<a
class="pf-c-description-list__text"
href=${paramURL("/core/applications", {
createForm: true,
})}
>${t`Create a new application`}</a
>
</li>
<li>
<a
class="pf-c-description-list__text"
href=${paramURL("/events/log")}
>${t`Check the logs`}</a
>
</li>
<li>
<a
class="pf-c-description-list__text"
href="https://goauthentik.io/integrations/"
>${t`Explore integrations`}</a
>
</li>
</ul>
</ak-aggregate-card> </ak-aggregate-card>
</div> </div>
<div <div

View File

@ -14,6 +14,7 @@ import { uiConfig } from "../../common/config";
import "../../elements/buttons/SpinnerButton"; import "../../elements/buttons/SpinnerButton";
import "../../elements/forms/DeleteBulkForm"; import "../../elements/forms/DeleteBulkForm";
import "../../elements/forms/ModalForm"; import "../../elements/forms/ModalForm";
import { getURLParam } from "../../elements/router/RouteMatch";
import { TableColumn } from "../../elements/table/Table"; import { TableColumn } from "../../elements/table/Table";
import { TablePage } from "../../elements/table/TablePage"; import { TablePage } from "../../elements/table/TablePage";
import "./ApplicationForm"; import "./ApplicationForm";
@ -143,7 +144,7 @@ export class ApplicationListPage extends TablePage<Application> {
renderToolbar(): TemplateResult { renderToolbar(): TemplateResult {
return html` return html`
<ak-forms-modal> <ak-forms-modal .open=${getURLParam("createForm", false)}>
<span slot="submit"> ${t`Create`} </span> <span slot="submit"> ${t`Create`} </span>
<span slot="header"> ${t`Create Application`} </span> <span slot="header"> ${t`Create Application`} </span>
<ak-application-form slot="form"> </ak-application-form> <ak-application-form slot="form"> </ak-application-form>