trustchain-oc1-orchestral/authentik
Archived
10
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

web: allow setting of querystring arguments with API Client, update table

Browse source
This commit is contained in:
Jens Langhammer 2020-11-29 12:01:06 +01:00
parent 7f821c484c
commit 66b3635648
10 changed files with 87 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
web/dist/main.js vendored
View file

File diff suppressed because one or more lines are too long

2
web/dist/main.js.map vendored
View file

File diff suppressed because one or more lines are too long

2
web/src/api/application.ts
View file

@ -13,6 +13,6 @@ export class Application {
policies?: string[];
static get(slug: string): Promise<Application> {
return DefaultClient.fetch<Application>("core", "applications", slug);
return DefaultClient.fetch<Application>(["core", "applications", slug]);
}
}

18
web/src/api/client.ts
View file

@ -3,17 +3,25 @@ import { NotFoundError, RequestError } from "./errors";
export const VERSION = "v2beta";
export class Client {
makeUrl(...url: string[]): string {
return `/api/${VERSION}/${url.join("/")}/`;
makeUrl(url: string[], query?: { [key: string]: string }): string {
let builtUrl = `/api/${VERSION}/${url.join("/")}/`;
if (query) {
let queryString = Object.keys(query)
.map((k) => encodeURIComponent(k) + "=" + encodeURIComponent(query[k]))
.join("&");
builtUrl += `?${queryString}`;
}
return builtUrl;
}
fetch<T>(...url: string[]): Promise<T> {
return fetch(this.makeUrl(...url))
fetch<T>(url: string[], query?: { [key: string]: string }): Promise<T> {
const finalUrl = this.makeUrl(url, query);
return fetch(finalUrl)
.then((r) => {
if (r.status > 300) {
switch (r.status) {
case 404:
throw new NotFoundError(`URL ${this.makeUrl(...url)} not found`);
throw new NotFoundError(`URL ${finalUrl} not found`);
default:
throw new RequestError(r.statusText);
}

2
web/src/api/config.ts
View file

@ -5,6 +5,6 @@ export class Config {
branding_title?: string;
static get(): Promise<Config> {
return DefaultClient.fetch<Config>("root", "config");
return DefaultClient.fetch<Config>(["root", "config"]);
}
}

2
web/src/api/token.ts
View file

@ -5,7 +5,7 @@ interface TokenResponse {
}
export function tokenByIdentifier(identifier: string): Promise<string> {
return DefaultClient.fetch<TokenResponse>("core", "tokens", identifier, "view_key").then(
return DefaultClient.fetch<TokenResponse>(["core", "tokens", identifier, "view_key"]).then(
(r) => r.key
);
}

2
web/src/api/user.ts
View file

@ -10,6 +10,6 @@ export class User {
avatar?: string;
static me(): Promise<User> {
return DefaultClient.fetch<User>("core", "users", "me");
return DefaultClient.fetch<User>(["core", "users", "me"]);
}
}

11
web/src/elements/Sidebar.ts
View file

@ -78,7 +78,16 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
},
{
name: "Policies",
path: ["/administration/policies/"],
children: [
{
name: "Policies",
path: ["/administration/policies/"],
},
{
name: "Bindings",
path: ["/administration/policies/bindings/"],
},
],
},
{
name: "Property Mappings",

55
web/src/elements/Table.ts
View file

@ -1,57 +1,46 @@
import { css, html, LitElement, TemplateResult } from "lit-element";
import { html, LitElement } from "lit-element";
import { until } from "lit-html/directives/until.js";
import { DefaultClient, PBResponse } from "../api/client";
import { PBResponse } from "../api/client";
import { COMMON_STYLES } from "../common/styles";
export abstract class Table extends LitElement {
abstract apiEndpoint(): string[];
abstract apiEndpoint(): Promise<PBResponse>;
abstract columns(): Array<string>;
abstract row(item: any): Array<TemplateResult>;
abstract row(item: any): Array<string>;
private data: PBResponse = <PBResponse>{};
public static get styles() {
return css`
table {
width: 100%;
}
table,
tr,
td {
border: 1px inset white;
border-collapse: collapse;
}
td,
th {
padding: 0.5rem;
}
td:hover {
border: 1px solid red;
}
`;
static get styles() {
return [COMMON_STYLES];
}
private renderRows() {
return DefaultClient.fetch<PBResponse>(...this.apiEndpoint())
return this.apiEndpoint()
.then((r) => (this.data = r))
.then(() => {
return this.data.results.map((item) => {
return this.row(item).map((col) => {
// let t = <TemplateStringsArray>[];
return col;
});
const fullRow = [`<tr role="row">`].concat(
this.row(item).map((col) => {
return `<td role="cell">${col}</td>`;
})
);
fullRow.push(`</tr>`);
return html(<any>fullRow);
});
});
}
render() {
return html`<table>
return html`<table class="pf-c-table pf-m-compact pf-m-grid-md">
<thead>
<tr>
${this.columns().map((col) => html`<th>${col}</th>`)}
<tr role="row">
${this.columns().map(
(col) => html`<th role="columnheader" scope="col">${col}</th>`
)}
</tr>
</thead>
<tbody>
${until(this.renderRows(), html`<tr><td>loading...</tr></td>`)}
<tbody role="rowgroup">
${until(this.renderRows(), html`<tr role="row"><td>loading...</tr></td>`)}
</tbody>
</table>`;
}

53
web/src/pages/applications/ApplicationViewPage.ts
View file

@ -1,6 +1,6 @@
import { css, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { Application } from "../../api/application";
import { DefaultClient } from "../../api/client";
import { DefaultClient, PBResponse } from "../../api/client";
import { COMMON_STYLES } from "../../common/styles";
import { Table } from "../../elements/Table";
@ -9,16 +9,38 @@ export class BoundPoliciesList extends Table {
@property()
target?: string;
apiEndpoint(): string[] {
return ["policies", "bindings", `?target=${this.target}`];
apiEndpoint(): Promise<PBResponse> {
return DefaultClient.fetch<PBResponse>(["policies", "bindings"], {
target: this.target!,
ordering: "order",
});
}
columns(): string[] {
return ["Foo"];
return ["Policy", "Enabled", "Order", "Timeout", ""];
}
row(item: any): TemplateResult[] {
return [html`${item}`];
row(item: any): string[] {
return [
item.policy.name,
item.enabled,
item.order,
item.timeout,
`
<pb-modal-button href="{% url 'passbook_admin:policy-binding-update' pk=binding.pk %}">
<button slot="trigger" class="pf-c-button pf-m-secondary">
Edit
</button>
<div slot="modal"></div>
</pb-modal-button>
<pb-modal-button href="{% url 'passbook_admin:policy-binding-delete' pk=binding.pk %}">
<button slot="trigger" class="pf-c-button pf-m-danger">
Delete
</button>
<div slot="modal"></div>
</pb-modal-button>
`
];
}
}
@ -79,12 +101,12 @@ export class ApplicationViewPage extends LitElement {
</div>
<div class="pf-c-card__body">
<pb-admin-logins-chart
url="${DefaultClient.makeUrl(
url="${DefaultClient.makeUrl([
"core",
"applications",
this.application?.slug!,
"metrics"
)}"
"metrics",
])}"
></pb-admin-logins-chart>
</div>
</div>
@ -95,15 +117,10 @@ export class ApplicationViewPage extends LitElement {
tab-title="Policy Bindings"
class="pf-c-page__main-section pf-m-no-padding-mobile"
>
<div class="pf-l-gallery pf-m-gutter">
<div
class="pf-c-card pf-c-card-aggregate pf-l-gallery__item pf-m-4-col"
style="grid-column-end: span 3;grid-row-end: span 2;"
>
<pb-bound-policies-list
.target=${this.application.pk}
></pb-bound-policies-list>
</div>
<div class="pf-c-card">
<pb-bound-policies-list
.target=${this.application.pk}
></pb-bound-policies-list>
</div>
</div>
</pb-tabs>`;