web: allow setting of querystring arguments with API Client, update table
This commit is contained in:
parent
7f821c484c
commit
66b3635648
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -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]);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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"]);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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"]);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -76,10 +76,19 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
|
|||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Policies",
|
||||
children: [
|
||||
{
|
||||
name: "Policies",
|
||||
path: ["/administration/policies/"],
|
||||
},
|
||||
{
|
||||
name: "Bindings",
|
||||
path: ["/administration/policies/bindings/"],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Property Mappings",
|
||||
path: ["/administration/property-mappings/"],
|
||||
|
|
|
@ -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>`;
|
||||
}
|
||||
|
|
|
@ -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,17 +117,12 @@ 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;"
|
||||
>
|
||||
<div class="pf-c-card">
|
||||
<pb-bound-policies-list
|
||||
.target=${this.application.pk}
|
||||
></pb-bound-policies-list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</pb-tabs>`;
|
||||
}
|
||||
}
|
||||
|
|
Reference in New Issue