From 93bf9777098051403f5039c183e9cd0c6633a940 Mon Sep 17 00:00:00 2001 From: Jens Langhammer Date: Tue, 1 Dec 2020 10:21:04 +0100 Subject: [PATCH] web: start implementing admin overview page --- web/package.json | 2 +- web/rollup.config.js | 2 +- web/src/api/admin_overview.ts | 16 +++++++ web/src/django.d.ts | 2 +- web/src/elements/Spinner.ts | 33 +++++++++++++ web/src/elements/table/Table.ts | 4 +- web/src/main.ts | 2 + web/src/pages/AdminOverviewPage.ts | 74 ++++++++++++++++++++++++++++++ web/src/pages/RouterOutlet.ts | 1 + web/src/pages/SiteShell.ts | 26 ++++------- 10 files changed, 140 insertions(+), 22 deletions(-) create mode 100644 web/src/api/admin_overview.ts create mode 100644 web/src/elements/Spinner.ts create mode 100644 web/src/pages/AdminOverviewPage.ts diff --git a/web/package.json b/web/package.json index abc2e95ec..e73067d31 100644 --- a/web/package.json +++ b/web/package.json @@ -3,7 +3,7 @@ "scripts": { "build": "rollup -c ./rollup.config.js", "watch": "rollup -c -w", - "format": "prettier --write ." + "lint": "eslint . --ext .js,.jsx,.ts,.tsx --fix" }, "dependencies": { "@fortawesome/fontawesome-free": "^5.15.1", diff --git a/web/rollup.config.js b/web/rollup.config.js index 6c7e30ebe..a20b08ab1 100644 --- a/web/rollup.config.js +++ b/web/rollup.config.js @@ -43,6 +43,6 @@ export default [ watch: { clearScreen: false, }, - external: ['django'] + external: ["django"] }, ]; diff --git a/web/src/api/admin_overview.ts b/web/src/api/admin_overview.ts new file mode 100644 index 000000000..e6cf251b8 --- /dev/null +++ b/web/src/api/admin_overview.ts @@ -0,0 +1,16 @@ +import { DefaultClient } from "./client"; + +export class AdminOverview { + version?: string; + version_latest?: string; + worker_count?: number; + providers_without_application?: number; + policies_without_binding?: number; + cached_policies?: number; + cached_flows?: number; + + static get(): Promise { + return DefaultClient.fetch(["admin", "overview"]); + } + +} diff --git a/web/src/django.d.ts b/web/src/django.d.ts index e6c6a9329..9cb13388e 100644 --- a/web/src/django.d.ts +++ b/web/src/django.d.ts @@ -1,4 +1,4 @@ -declare module 'django' { +declare module "django" { export = django; } declare namespace django { diff --git a/web/src/elements/Spinner.ts b/web/src/elements/Spinner.ts new file mode 100644 index 000000000..b3c4d6e71 --- /dev/null +++ b/web/src/elements/Spinner.ts @@ -0,0 +1,33 @@ +import { gettext } from "django"; +import { customElement, html, LitElement, property, TemplateResult } from "lit-element"; +// @ts-ignore +import SpinnerStyle from "@patternfly/patternfly/components/Spinner/spinner.css"; + +export enum SpinnerSize { + Small = "pf-m-sm", + Medium = "pf-m-md", + Large = "pf-m-lg", + XLarge = "pf-m-xl", +} + +@customElement("pb-spinner") +export class Spinner extends LitElement { + @property() + size: SpinnerSize = SpinnerSize.Medium; + + static get styles() { + return [SpinnerStyle]; + } + + render(): TemplateResult { + return html``; + } + +} diff --git a/web/src/elements/table/Table.ts b/web/src/elements/table/Table.ts index dffc0faaf..6741838aa 100644 --- a/web/src/elements/table/Table.ts +++ b/web/src/elements/table/Table.ts @@ -86,8 +86,8 @@ export abstract class Table extends LitElement { ${this.columns().map( - (col) => html`${gettext(col)}` - )} + (col) => html`${gettext(col)}` + )} diff --git a/web/src/main.ts b/web/src/main.ts index 7c937a28c..1b75097af 100644 --- a/web/src/main.ts +++ b/web/src/main.ts @@ -13,9 +13,11 @@ import "./elements/sidebar/Sidebar"; import "./elements/sidebar/SidebarBrand"; import "./elements/sidebar/SidebarUser"; import "./elements/Tabs"; +import "./elements/Spinner"; import "./elements/table/TablePagination"; import "./pages/applications/ApplicationViewPage"; import "./pages/applications/ApplicationListPage"; +import "./pages/AdminOverviewPage"; import "./pages/LibraryPage"; import "./pages/FlowShellCard"; import "./pages/RouterOutlet"; diff --git a/web/src/pages/AdminOverviewPage.ts b/web/src/pages/AdminOverviewPage.ts new file mode 100644 index 000000000..be9724d9e --- /dev/null +++ b/web/src/pages/AdminOverviewPage.ts @@ -0,0 +1,74 @@ +import { gettext } from "django"; +import { customElement, html, LitElement, property, TemplateResult } from "lit-element"; +import { AdminOverview } from "../api/admin_overview"; +import { DefaultClient } from "../api/client"; +import { COMMON_STYLES } from "../common/styles"; + +@customElement("pb-aggregate-card") +export class AggregateCard extends LitElement { + @property() + icon?: string; + + @property() + header?: string; + + static get styles() { + return COMMON_STYLES; + } + + render(): TemplateResult { + return html`
+
+
+ ${this.header ? gettext(this.header) : ""} +
+
+
+ +
+
`; + } + +} + +@customElement("pb-admin-overview") +export class AdminOverviewPage extends LitElement { + @property() + data?: AdminOverview; + + static get styles() { + return COMMON_STYLES; + } + + firstUpdated(): void { + AdminOverview.get().then(value => this.data = value); + } + + render(): TemplateResult { + return html`
+
+

${gettext("System Overview")}

+
+
+
+
+ + + + + ${this.data ? + this.data?.worker_count! < 1 ? + html`

+ ${this.data.worker_count} +

+

${gettext("No workers connected.")}

` : + html`

+ ${this.data.worker_count} +

` + : html``} + +
+
`; + } + +} diff --git a/web/src/pages/RouterOutlet.ts b/web/src/pages/RouterOutlet.ts index 863d3d03d..14240bdbc 100644 --- a/web/src/pages/RouterOutlet.ts +++ b/web/src/pages/RouterOutlet.ts @@ -52,6 +52,7 @@ export const ROUTES: Route[] = [ new Route(new RegExp("^/$")).redirect("/library/"), new Route(new RegExp("^#.*")).redirect("/library/"), new Route(new RegExp("^/library/$"), html``), + new Route(new RegExp("^/administration/overview/$"), html``), new Route(new RegExp("^/applications/$"), html``), new Route(new RegExp(`^/applications/(?${SLUG_REGEX})/$`)).then((args) => { return html``; diff --git a/web/src/pages/SiteShell.ts b/web/src/pages/SiteShell.ts index 6a9e8db64..77a7ae290 100644 --- a/web/src/pages/SiteShell.ts +++ b/web/src/pages/SiteShell.ts @@ -98,23 +98,15 @@ export class SiteShell extends LitElement { } render() { - return html` ${this.loading - ? html`
-
-
- -
-
-
` + return html` ${this.loading ? + html`
+
+
+ +
+
+
` : ""} - `; + `; } }