static: start implementing Application View page

passbook/static/static/src/api/client.ts

@@ -3,7 +3,7 @@ import { NotFoundError, RequestError } from "./errors";
 export const VERSION = "v2beta";
 
 export class Client {
-    private makeUrl(...url: string[]): string {
+    makeUrl(...url: string[]): string {
         return `/api/${VERSION}/${url.join("/")}/`;
     }
 
@@ -26,3 +26,10 @@ export class Client {
 }
 
 export const DefaultClient = new Client();
+
+export interface PBResponse {
+    count: number;
+    next: string;
+    previous: string;
+    results: Array<any>;
+}

passbook/static/static/src/elements/Sidebar.ts

@@ -31,17 +31,12 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
         name: "Administration",
         children: [
             {
-                name: "General",
+                name: "Overview",
-                children: [
+                path: ["/administration/overview/"],
-                    {
+            },
-                        name: "Overview",
+            {
-                        path: ["/administration/overview/"],
+                name: "System Tasks",
-                    },
+                path: ["/administration/tasks/"],
-                    {
-                        name: "System Tasks",
-                        path: ["/administration/tasks/"],
-                    },
-                ],
             },
             {
                 name: "Applications",

passbook/static/static/src/elements/Table.ts

@@ -0,0 +1,58 @@
+import { css, html, LitElement, TemplateResult } from "lit-element";
+import { until } from "lit-html/directives/until.js";
+import { DefaultClient, PBResponse } from "../api/client";
+
+export abstract class Table extends LitElement {
+    abstract apiEndpoint(): string[];
+    abstract columns(): Array<string>;
+    abstract row(item: any): Array<TemplateResult>;
+
+    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;
+            }
+        `;
+    }
+
+    private renderRows() {
+        return DefaultClient.fetch<PBResponse>(...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;
+                    });
+                });
+            });
+    }
+
+    render() {
+        return html`<table>
+            <thead>
+                <tr>
+                    ${this.columns().map((col) => html`<th>${col}</th>`)}
+                </tr>
+            </thead>
+            <tbody>
+                ${until(this.renderRows(), html`<tr><td>loading...</tr></td>`)}
+            </tbody>
+        </table>`;
+    }
+}

passbook/static/static/src/pages/FlowShellCard.ts

@@ -26,7 +26,10 @@ export class FlowShellCard extends LitElement {
     firstUpdated() {
         fetch(this.flowBodyUrl)
             .then((r) => {
-                if (!r.ok) {
+                if (r.status === 404) {
+                    // Fallback when the flow does not exist, just redirect to the root
+                    window.location.pathname = "/";
+                } else if (!r.ok) {
                     throw Error(r.statusText);
                 }
                 return r;

passbook/static/static/src/pages/applications/ApplicationViewPage.ts

@@ -1,6 +1,26 @@
-import { css, customElement, html, LitElement, property } from "lit-element";
+import { css, customElement, html, LitElement, property, TemplateResult } from "lit-element";
 import { Application } from "../../api/application";
+import { DefaultClient } from "../../api/client";
 import { COMMON_STYLES } from "../../common/styles";
+import { Table } from "../../elements/Table";
+
+@customElement("pb-bound-policies-list")
+export class BoundPoliciesList extends Table {
+    @property()
+    target?: string;
+
+    apiEndpoint(): string[] {
+        return ["policies", "bindings", `?target=${this.target}`];
+    }
+
+    columns(): string[] {
+        return ["Foo"];
+    }
+
+    row(item: any): TemplateResult[] {
+        return [html`${item}`];
+    }
+}
 
 @customElement("pb-application-view")
 export class ApplicationViewPage extends LitElement {
@@ -28,6 +48,9 @@ export class ApplicationViewPage extends LitElement {
     }
 
     render() {
+        if (!this.application) {
+            return html``;
+        }
         return html`<section class="pf-c-page__main-section pf-m-light">
                 <div class="pf-c-content">
                     <h1>
@@ -38,16 +61,50 @@ export class ApplicationViewPage extends LitElement {
                 </div>
             </section>
             <pb-tabs>
-                <section slot="page-1" tab-title="Users" class="pf-c-page__main-section pf-m-no-padding-mobile">
+                <section
-                    <div class="pf-c-card">
+                    slot="page-1"
-                        users
+                    tab-title="Users"
-                        <h1>test</h1>
+                    class="pf-c-page__main-section pf-m-no-padding-mobile"
-
+                >
-                        <span>${this.application?.slug}</span>
+                    <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__header">
+                                <div class="pf-c-card__header-main">
+                                    <i class="pf-icon pf-icon-server"></i> Logins over the last 24
+                                    hours
+                                </div>
+                            </div>
+                            <div class="pf-c-card__body">
+                                <pb-admin-logins-chart
+                                    url="${DefaultClient.makeUrl(
+                                        "core",
+                                        "applications",
+                                        this.application?.slug!,
+                                        "metrics"
+                                    )}"
+                                ></pb-admin-logins-chart>
+                            </div>
+                        </div>
                     </div>
                 </section>
-                <div slot="page-2" tab-title="Containers">
+                <div
-                    foo
+                    slot="page-2"
+                    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>
                 </div>
             </pb-tabs>`;
     }