web: add more related links, add policy/user/group support for bindings

web/src/elements/policies/BoundPoliciesList.ts

@@ -24,7 +24,7 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
 
     columns(): TableColumn[] {
         return [
-            new TableColumn("Policy"),
+            new TableColumn("Policy / User / Group"),
             new TableColumn("Enabled", "enabled"),
             new TableColumn("Order", "order"),
             new TableColumn("Timeout", "timeout"),
@@ -32,9 +32,21 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
         ];
     }
 
+    getPolicyUserGroupRow(item: PolicyBinding): string {
+        if (item.policy_obj) {
+            return gettext(`Policy ${item.policy_obj.name}`);
+        } else if (item.group) {
+            return gettext(`Group ${item.group.name}`);
+        } else if (item.user) {
+            return gettext(`User ${item.user.name}`);
+        } else {
+            return gettext(``);
+        }
+    }
+
     row(item: PolicyBinding): TemplateResult[] {
         return [
-            html`${item.policy_obj.name}`,
+            html`${this.getPolicyUserGroupRow(item)}`,
             html`${item.enabled ? "Yes" : "No"}`,
             html`${item.order}`,
             html`${item.timeout}`,

web/src/elements/utils/LoadingState.ts

@@ -0,0 +1,24 @@
+import { commands } from "codemirror";
+import { CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element";
+import { COMMON_STYLES } from "../../common/styles";
+import { SpinnerSize } from "../Spinner";
+
+@customElement("ak-loading-state")
+export class LoadingState extends LitElement {
+
+    static get styles(): CSSResult[] {
+        return COMMON_STYLES;
+    }
+
+    render(): TemplateResult {
+        return html`<div class="pf-c-empty-state pf-m-full-height">
+            <div class="pf-c-empty-state__content">
+                <div class="pf-l-bullseye">
+                    <div class="pf-l-bullseye__item">
+                        <ak-spinner size="${SpinnerSize.XLarge}"></ak-spinner>
+                    </div>
+                </div>
+            </div>
+        </div>`;
+    }
+}