web: further cleanup, more linting
This commit is contained in:
parent
05aeeafacc
commit
c17623323a
|
@ -5,7 +5,8 @@
|
|||
},
|
||||
"extends": [
|
||||
"eslint:recommended",
|
||||
"plugin:@typescript-eslint/recommended"
|
||||
"plugin:@typescript-eslint/recommended",
|
||||
"plugin:lit/recommended"
|
||||
],
|
||||
"parser": "@typescript-eslint/parser",
|
||||
"parserOptions": {
|
||||
|
@ -13,7 +14,8 @@
|
|||
"sourceType": "module"
|
||||
},
|
||||
"plugins": [
|
||||
"@typescript-eslint"
|
||||
"@typescript-eslint",
|
||||
"lit"
|
||||
],
|
||||
"rules": {
|
||||
"indent": ["error", 4],
|
||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -3,7 +3,8 @@
|
|||
"scripts": {
|
||||
"build": "rollup -c ./rollup.config.js",
|
||||
"watch": "rollup -c -w",
|
||||
"lint": "eslint . --max-warnings 0"
|
||||
"lint": "eslint . --max-warnings 0",
|
||||
"lit-analyse": "lit-analyzer src"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-free": "^5.15.1",
|
||||
|
@ -29,11 +30,13 @@
|
|||
"@typescript-eslint/parser": "^4.9.0",
|
||||
"eslint": "^7.14.0",
|
||||
"eslint-config-google": "^0.14.0",
|
||||
"eslint-plugin-lit": "^1.2.4",
|
||||
"rollup-plugin-commonjs": "^10.1.0",
|
||||
"rollup-plugin-minify-html-literals": "^1.2.5",
|
||||
"rollup-plugin-node-resolve": "^5.2.0",
|
||||
"rollup-plugin-sourcemaps": "^0.6.3",
|
||||
"rollup-plugin-terser": "^7.0.2",
|
||||
"ts-lit-plugin": "^1.2.1",
|
||||
"typescript": "^4.1.2"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -9,7 +9,7 @@ import "codemirror/mode/python/python.js";
|
|||
|
||||
@customElement("pb-codemirror")
|
||||
export class CodeMirrorTextarea extends LitElement {
|
||||
@property()
|
||||
@property({type: Boolean})
|
||||
readOnly = false;
|
||||
|
||||
@property()
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import { LitElement, html, customElement, property, CSSResult, TemplateResult } from "lit-element";
|
||||
import { ifDefined } from "lit-html/directives/if-defined";
|
||||
// @ts-ignore
|
||||
import TabsStyle from "@patternfly/patternfly/components/Tabs/tabs.css";
|
||||
// @ts-ignore
|
||||
|
@ -38,6 +39,6 @@ export class Tabs extends LitElement {
|
|||
${pages.map((page) => this.renderTab(page))}
|
||||
</ul>
|
||||
</div>
|
||||
<slot name="${this.currentPage}"></slot>`;
|
||||
<slot name="${ifDefined(this.currentPage)}"></slot>`;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -19,7 +19,7 @@ export class ModalButton extends LitElement {
|
|||
@property()
|
||||
href?: string;
|
||||
|
||||
@property()
|
||||
@property({type: Boolean})
|
||||
open = false;
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
|
|
|
@ -9,7 +9,7 @@ import { ColorStyles, PRIMARY_CLASS, PROGRESS_CLASS } from "../../constants";
|
|||
|
||||
@customElement("pb-spinner-button")
|
||||
export class SpinnerButton extends LitElement {
|
||||
@property()
|
||||
@property({type: Boolean})
|
||||
isRunning = false;
|
||||
|
||||
@property()
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import { gettext } from "django";
|
||||
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
|
||||
import { ifDefined } from "lit-html/directives/if-defined";
|
||||
import { COMMON_STYLES } from "../../common/styles";
|
||||
|
||||
@customElement("pb-aggregate-card")
|
||||
|
@ -33,7 +34,7 @@ export class AggregateCard extends LitElement {
|
|||
return html`<div class="pf-c-card pf-c-card-aggregate">
|
||||
<div class="pf-c-card__header pf-l-flex pf-m-justify-content-space-between">
|
||||
<div class="pf-c-card__header-main">
|
||||
<i class="${this.icon}"></i> ${this.header ? gettext(this.header) : ""}
|
||||
<i class="${ifDefined(this.icon)}"></i> ${this.header ? gettext(this.header) : ""}
|
||||
</div>
|
||||
${this.headerLink ? html`<a href="${this.headerLink}">
|
||||
<i class="fa fa-external-link-alt"> </i>
|
||||
|
|
|
@ -1,24 +1,26 @@
|
|||
import { customElement, html, property, TemplateResult } from "lit-element";
|
||||
import { until } from "lit-html/directives/until";
|
||||
import { AggregateCard } from "./AggregateCard";
|
||||
import "../Spinner";
|
||||
import { SpinnerSize } from "../Spinner";
|
||||
|
||||
@customElement("pb-aggregate-card-promise")
|
||||
export class AggregatePromiseCard extends AggregateCard {
|
||||
@property()
|
||||
promise?: Promise<string>;
|
||||
@property({attribute: false})
|
||||
promise?: Promise<Record<string, unknown>>;
|
||||
|
||||
promiseProxy(): Promise<TemplateResult> {
|
||||
if (!this.promise) {
|
||||
return new Promise<TemplateResult>(() => html``);
|
||||
}
|
||||
return this.promise.then(s => {
|
||||
return html`<i class="fa fa-check-circle"></i> ${s}`;
|
||||
return html`<i class="fa fa-check-circle"></i> ${s.toString()}`;
|
||||
});
|
||||
}
|
||||
|
||||
renderInner(): TemplateResult {
|
||||
return html`<p class="center-value">
|
||||
${until(this.promiseProxy(), html`<pb-spinner size="large"></pb-spinner>`)}
|
||||
${until(this.promiseProxy(), html`<pb-spinner size="${SpinnerSize.Large}"></pb-spinner>`)}
|
||||
</p>`;
|
||||
}
|
||||
|
||||
|
|
|
@ -8,6 +8,9 @@ import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
|
|||
|
||||
import { until } from "lit-html/directives/until";
|
||||
|
||||
import "./SidebarBrand";
|
||||
import "./SidebarUser";
|
||||
|
||||
export interface SidebarItem {
|
||||
name: string;
|
||||
path?: string[];
|
||||
|
|
|
@ -16,7 +16,7 @@ export const DefaultConfig: Config = {
|
|||
|
||||
@customElement("pb-sidebar-brand")
|
||||
export class SidebarBrand extends LitElement {
|
||||
@property()
|
||||
@property({attribute: false})
|
||||
config: Config = DefaultConfig;
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
|
|
|
@ -46,9 +46,9 @@ export class SidebarUser extends LitElement {
|
|||
return html`
|
||||
<a href="#/-/user/" class="pf-c-nav__link user-avatar" id="user-settings">
|
||||
${until(User.me().then(u => {
|
||||
return html`<img class="pf-c-avatar" src="${u.avatar}" alt="" />
|
||||
return html`<img class="pf-c-avatar" src="${u.avatar}" alt="" />
|
||||
<span>${u.username}</span>`;
|
||||
}), html``)}
|
||||
}), html``)}
|
||||
</a>
|
||||
<a href="/flows/-/default/invalidation/" class="pf-c-nav__link user-logout" id="logout">
|
||||
<i class="fas fa-sign-out-alt" aria-hidden="true"></i>
|
||||
|
|
|
@ -4,15 +4,17 @@ import { PBResponse } from "../../api/client";
|
|||
import { COMMON_STYLES } from "../../common/styles";
|
||||
import { htmlFromString } from "../../utils";
|
||||
|
||||
import "./TablePagination";
|
||||
|
||||
export abstract class Table<T> extends LitElement {
|
||||
abstract apiEndpoint(page: number): Promise<PBResponse<T>>;
|
||||
abstract columns(): Array<string>;
|
||||
abstract row(item: T): Array<string>;
|
||||
|
||||
@property()
|
||||
@property({attribute: false})
|
||||
data?: PBResponse<T>;
|
||||
|
||||
@property()
|
||||
@property({type: Number})
|
||||
page = 1;
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
|
|
|
@ -4,7 +4,7 @@ import { COMMON_STYLES } from "../../common/styles";
|
|||
|
||||
@customElement("pb-table-pagination")
|
||||
export class TablePagination extends LitElement {
|
||||
@property()
|
||||
@property({attribute: false})
|
||||
table?: Table<unknown>;
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
|
@ -44,7 +44,7 @@ export class TablePagination extends LitElement {
|
|||
<button
|
||||
class="pf-c-button pf-m-plain"
|
||||
@click=${() => {this.previousHandler();}}
|
||||
disabled="${this.table?.data?.pagination.previous ? "true" : "false"}"
|
||||
?disabled="${(this.table?.data?.pagination.previous || 0) > 0}"
|
||||
aria-label="{% trans 'Go to previous page' %}"
|
||||
>
|
||||
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
||||
|
@ -54,7 +54,7 @@ export class TablePagination extends LitElement {
|
|||
<button
|
||||
class="pf-c-button pf-m-plain"
|
||||
@click=${() => {this.nextHandler();}}
|
||||
disabled="${this.table?.data?.pagination.next ? "true" : "false"}"
|
||||
?disabled="${(this.table?.data?.pagination.next || 0) > 0}"
|
||||
aria-label="{% trans 'Go to next page' %}"
|
||||
>
|
||||
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
||||
|
|
|
@ -1,15 +1,16 @@
|
|||
import { gettext } from "django";
|
||||
import { CSSResult, html, LitElement, TemplateResult } from "lit-element";
|
||||
import { COMMON_STYLES } from "../common/styles";
|
||||
import { html, LitElement, TemplateResult } from "lit-element";
|
||||
import { SidebarItem } from "../elements/sidebar/Sidebar";
|
||||
|
||||
// @customElement("pb-interface")
|
||||
import "../elements/Messages";
|
||||
import "../pages/router/RouterOutlet";
|
||||
|
||||
export abstract class Interface extends LitElement {
|
||||
|
||||
abstract get sidebar(): SidebarItem[];
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
return COMMON_STYLES;
|
||||
createRenderRoot(): ShadowRoot | Element {
|
||||
return this;
|
||||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
|
|
|
@ -6,7 +6,7 @@ import { truncate } from "../utils";
|
|||
|
||||
@customElement("pb-library")
|
||||
export class ApplicationViewPage extends LitElement {
|
||||
@property()
|
||||
@property({attribute: false})
|
||||
apps?: PBResponse<Application>;
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
|
|
|
@ -5,21 +5,25 @@ import { DefaultClient } from "../../api/client";
|
|||
import { User } from "../../api/user";
|
||||
import { COMMON_STYLES } from "../../common/styles";
|
||||
import { AggregatePromiseCard } from "../../elements/cards/AggregatePromiseCard";
|
||||
import { SpinnerSize } from "../../elements/Spinner";
|
||||
|
||||
import "../../elements/AdminLoginsChart";
|
||||
import "./TopApplicationsTable";
|
||||
|
||||
@customElement("pb-admin-status-card")
|
||||
export class AdminStatusCard extends AggregatePromiseCard {
|
||||
|
||||
@property()
|
||||
@property({type: Number})
|
||||
value?: number;
|
||||
|
||||
@property()
|
||||
warningText?: string;
|
||||
|
||||
@property()
|
||||
@property({type: Number})
|
||||
lessThanThreshold?: number;
|
||||
|
||||
renderNone(): TemplateResult {
|
||||
return html`<pb-spinner size="large"></pb-spinner>`;
|
||||
return html`<pb-spinner size=${SpinnerSize.Large}></pb-spinner>`;
|
||||
}
|
||||
|
||||
renderGood(): TemplateResult {
|
||||
|
@ -47,10 +51,10 @@ export class AdminStatusCard extends AggregatePromiseCard {
|
|||
|
||||
@customElement("pb-admin-overview")
|
||||
export class AdminOverviewPage extends LitElement {
|
||||
@property()
|
||||
@property({attribute: false})
|
||||
data?: AdminOverview;
|
||||
|
||||
@property()
|
||||
@property({attribute: false})
|
||||
users?: Promise<number>;
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
|
@ -89,7 +93,7 @@ export class AdminOverviewPage extends LitElement {
|
|||
html`<p class="pb-aggregate-card">
|
||||
<i class="fa fa-check-circle"></i> 0
|
||||
</p>`
|
||||
: html`<pb-spinner size="large"></pb-spinner>`}
|
||||
: html`<pb-spinner size=${SpinnerSize.Large}></pb-spinner>`}
|
||||
</pb-aggregate-card>
|
||||
<pb-aggregate-card class="pf-l-gallery__item pf-m-4-col" icon="pf-icon pf-icon-plugged" header="Policies" headerLink="#/administration/policies/">
|
||||
${this.data ?
|
||||
|
@ -101,7 +105,7 @@ export class AdminOverviewPage extends LitElement {
|
|||
html`<p class="pb-aggregate-card">
|
||||
<i class="fa fa-check-circle"></i> 0
|
||||
</p>`
|
||||
: html`<pb-spinner size="large"></pb-spinner>`}
|
||||
: html`<pb-spinner size=${SpinnerSize.Large}></pb-spinner>`}
|
||||
</pb-aggregate-card>
|
||||
<pb-aggregate-card-promise
|
||||
icon="pf-icon pf-icon-user"
|
||||
|
|
|
@ -3,10 +3,12 @@ import { CSSResult, customElement, html, LitElement, property, TemplateResult }
|
|||
import { AuditEvent, TopNEvent } from "../../api/events";
|
||||
import { COMMON_STYLES } from "../../common/styles";
|
||||
|
||||
import "../../elements/Spinner";
|
||||
|
||||
@customElement("pb-top-applications-table")
|
||||
export class TopApplicationsTable extends LitElement {
|
||||
|
||||
@property()
|
||||
@property({attribute: false})
|
||||
topN?: TopNEvent[];
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
|
|
|
@ -6,6 +6,9 @@ import { PolicyBinding } from "../../api/policy_binding";
|
|||
import { COMMON_STYLES } from "../../common/styles";
|
||||
import { Table } from "../../elements/table/Table";
|
||||
|
||||
import "../../elements/Tabs";
|
||||
import "../../elements/AdminLoginsChart";
|
||||
|
||||
@customElement("pb-bound-policies-list")
|
||||
export class BoundPoliciesList extends Table<PolicyBinding> {
|
||||
@property()
|
||||
|
@ -59,7 +62,7 @@ export class ApplicationViewPage extends LitElement {
|
|||
Application.get(value).then((app) => (this.application = app));
|
||||
}
|
||||
|
||||
@property()
|
||||
@property({attribute: false})
|
||||
application?: Application;
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
|
|
|
@ -5,6 +5,7 @@ import BullseyeStyle from "@patternfly/patternfly/layouts/Bullseye/bullseye.css"
|
|||
import SpinnerStyle from "@patternfly/patternfly/components/Spinner/spinner.css";
|
||||
// @ts-ignore
|
||||
import BackdropStyle from "@patternfly/patternfly/components/Backdrop/backdrop.css";
|
||||
import { SpinnerSize } from "../../elements/Spinner";
|
||||
|
||||
@customElement("pb-site-shell")
|
||||
export class SiteShell extends LitElement {
|
||||
|
@ -16,7 +17,7 @@ export class SiteShell extends LitElement {
|
|||
|
||||
_url?: string;
|
||||
|
||||
@property()
|
||||
@property({type: Boolean})
|
||||
loading = false;
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
|
@ -107,7 +108,7 @@ export class SiteShell extends LitElement {
|
|||
html`<div class="pf-c-backdrop">
|
||||
<div class="pf-l-bullseye">
|
||||
<div class="pf-l-bullseye__item">
|
||||
<pb-spinner size="large"></pb-spinner>
|
||||
<pb-spinner size=${SpinnerSize.Large}></pb-spinner>
|
||||
</div>
|
||||
</div>
|
||||
</div>`
|
||||
|
|
|
@ -9,9 +9,11 @@ import { Route } from "./Route";
|
|||
import { ROUTES } from "../../routes";
|
||||
import { RouteMatch } from "./RouteMatch";
|
||||
|
||||
import "../generic/SiteShell";
|
||||
|
||||
@customElement("pb-router-outlet")
|
||||
export class RouterOutlet extends LitElement {
|
||||
@property()
|
||||
@property({attribute: false})
|
||||
current?: RouteMatch;
|
||||
|
||||
@property()
|
||||
|
|
|
@ -1,6 +1,11 @@
|
|||
import { html } from "lit-html";
|
||||
import { Route, SLUG_REGEX } from "./pages/router/Route";
|
||||
|
||||
import "./pages/LibraryPage";
|
||||
import "./pages/admin-overview/AdminOverviewPage";
|
||||
import "./pages/applications/ApplicationListPage";
|
||||
import "./pages/applications/ApplicationViewPage";
|
||||
|
||||
export const ROUTES: Route[] = [
|
||||
// Prevent infinite Shell loops
|
||||
new Route(new RegExp("^/$")).redirect("/library/"),
|
||||
|
|
|
@ -9,6 +9,12 @@
|
|||
"target": "esnext",
|
||||
"module": "es2015",
|
||||
"moduleResolution": "node",
|
||||
"lib": ["es2017", "dom", "dom.iterable"]
|
||||
"lib": ["es2017", "dom", "dom.iterable"],
|
||||
"plugins": [
|
||||
{
|
||||
"name": "ts-lit-plugin",
|
||||
"strict": true
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
Reference in New Issue