Panel filter entities by namespace

frontend/src/namespace-selector.js

@@ -0,0 +1,58 @@
+import {
+    LitElement,
+    html,
+    css,
+} from "lit";
+import { fireEvent } from "card-tools/src/event";
+
+export class NamespaceSelector extends LitElement {
+    constructor() {
+        super();
+        // This is a workaround to load the ha-paper-dropdown-menu.
+        // See https://github.com/home-assistant/frontend/issues/7098 for more details.
+        window.loadCardHelpers().then(helpers => {
+            helpers.createRowElement({ type: "input-select-entity" });
+        });
+    }
+
+    static get properties() {
+        return {
+            hass: { type: Object },
+            narrow: { type: Boolean },
+            route: { type: Object },
+            panel: { type: Object },
+            config: {},
+        };
+    }
+
+    setConfig(config) {
+        this.config = config;
+    }
+
+
+    render() {
+        return html`
+            <ha-paper-dropdown-menu label="Namespaces" @value-changed=${(e) => {
+                fireEvent("namespace-changed", {namespace: e.detail.value}, this);
+            }}>
+                <paper-listbox slot="dropdown-content" selected="0">
+                    <paper-item>all</paper-item>
+                    ${Object.values(this.hass.states).filter(state => {
+                        return state.attributes.device_class == "Namespace";
+                    }).map(state => {
+                        return html`
+                            <paper-item>${state.attributes.metadata.name}</paper-item>
+                        `;
+                    })}
+                </paper-listbox>
+            </ha-paper-dropdown-menu>
+        `;
+    }
+
+    static get styles() {
+        return css`
+        `;
+    }
+}
+
+customElements.define("namespace-selector", NamespaceSelector);

frontend/src/panel.js

@@ -7,11 +7,11 @@ import { haStyle } from "../home-assistant/src/resources/styles.ts";
 import { fireEvent } from "card-tools/src/event";
 
 import "./table-card.js"
+import "./namespace-selector.js"
 
 class KubernetesPanel extends LitElement {
   constructor() {
-    super()
-    this.table = document.createElement("table-card");
+    super();
   }
 
   static get properties() {
@@ -20,13 +20,15 @@ class KubernetesPanel extends LitElement {
       narrow: { type: Boolean },
       route: { type: Object },
       panel: { type: Object },
+      namespace: { type: String },
     };
   }
 
   getConfig() {
+    var config = {};
     switch (this._page) {
       case "Node":
-        return {
+        config = {
           columns: [
             { header: "Name", function: "return entity_row.attributes.metadata.name" },
             { header: "State", function: "return entity_row.state" }
@@ -35,8 +37,9 @@ class KubernetesPanel extends LitElement {
             "attributes.device_class": this._page
           }
         }
+        break;
       case "Deployment":
-        return {
+        config =  {
           columns: [
             { header: "Name", function: "return entity_row.attributes.metadata.name" },
             { header: "Namespace", function: "return entity_row.attributes.metadata.namespace" },
@@ -46,8 +49,9 @@ class KubernetesPanel extends LitElement {
             "attributes.device_class": this._page
           }
         }
+        break;
       case "DaemonSet":
-        return {
+        config = {
           columns: [
             { header: "Name", function: "return entity_row.attributes.metadata.name" },
             { header: "Namespace", function: "return entity_row.attributes.metadata.namespace" },
@@ -57,8 +61,9 @@ class KubernetesPanel extends LitElement {
             "attributes.device_class": this._page
           }
         }
+        break;
       case "Pod":
-        return {
+        config =  {
           columns: [
             { header: "Name", function: "return entity_row.attributes.metadata.name" },
             { header: "Namespace", function: "return entity_row.attributes.metadata.namespace" },
@@ -69,8 +74,14 @@ class KubernetesPanel extends LitElement {
             "attributes.device_class": this._page
           }
         }
+        break;
     }
 
+    if (this.namespace && this.namespace != "all") {
+      config.filters["attributes.metadata.namespace"] = this.namespace;
+    }
+
+    return config;
   }
 
   render() {
@@ -94,13 +105,34 @@ class KubernetesPanel extends LitElement {
             <paper-tab page-name="DaemonSet">DaemonSets</paper-tab>
             <paper-tab page-name="Pod">Pods</paper-tab>
           </ha-tabs>
+
+          ${!this.narrow ?
+            html`
+            <namespace-selector
+            .hass=${this.hass}
+            @namespace-changed=${(e) => this.namespace = e.detail.namespace}
+            ></namespace-selector>`
+            : html``
+          }
         </app-toolbar>
+        ${this.narrow ?
+          html`
+          <namespace-selector
+          .hass=${this.hass}
+          @namespace-changed=${(e) => this.namespace = e.detail.namespace}
+          ></namespace-selector>`
+          : html``
+        }
       </app-header>
-
+      ${page ? html`
       <table-card
         .hass=${this.hass}
         .config=${this.getConfig()}
       ></table-card>
+      `:
+      html``
+      }
+
     </ha-app-layout>
     `;
   }
@@ -144,6 +176,9 @@ class KubernetesPanel extends LitElement {
         );
         text-transform: uppercase;
       }
+      namespace-selector {
+        margin: 20px;
+      }
     `];
   }
 }

frontend/src/table-card.js

@@ -38,9 +38,11 @@ export class TableCard extends LitElement {
 
     Object.values(this.hass.states).
       filter(state => {
-        for (const [key, value] of Object.entries(this.config.filters)) {
-          if (this.findByPath(state, key) != value) {
-            return false;
+        if (this.config.filters) {
+          for (const [key, value] of Object.entries(this.config.filters)) {
+            if (this.findByPath(state, key) != value) {
+              return false;
+            }
           }
         }
         return true;