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 { customElement } from "lit/decorators.js";
import { until } from "lit/directives/until.js";
import AKGlobal from "../../authentik.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 PFGrid from "@patternfly/patternfly/layouts/Grid/grid.css";
import { me } from "../../api/Users";
import "../../elements/PageHeader";
import "../../elements/cards/AggregatePromiseCard";
import "../../elements/charts/AdminLoginsChart";
import { paramURL } from "../../elements/router/RouterOutlet";
import "./TopApplicationsTable";
import "./cards/AdminStatusCard";
import "./cards/BackupStatusCard";
@ -31,6 +35,7 @@ export class AdminOverviewPage extends LitElement {
PFGrid,
PFPage,
PFContent,
PFList,
AKGlobal,
css`
.row-divider {
@ -51,11 +56,18 @@ export class AdminOverviewPage extends LitElement {
}
render(): TemplateResult {
return html` <ak-page-header
icon=""
header=${t`System Overview`}
description=${t`General system status`}
>
return html`<ak-page-header icon="" header="" description=${t`General system status`}>
<span slot="header">
${until(
me().then((user) => {
let name = user.user.username;
if (user.user.name !== "") {
name = user.user.name;
}
return t`Welcome, ${name}.`;
}),
)}
</span>
</ak-page-header>
<section class="pf-c-page__main-section">
<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"
>
<ak-aggregate-card
icon="pf-icon pf-icon-infrastructure"
header=${t`Policies`}
headerLink="#/policy/policies"
icon="fa fa-share"
header=${t`Quick actions`}
.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>
</div>
<div

View file

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