Namespace filter

components/NamespacePicker.vue

@@ -1,90 +1,52 @@
 <template>
-  <div>
-    NAMESPACES
-    <MultiSelect
-      deselect-label="Can't remove this value"
-      placeholder="Choose namespace"
-      :options="options"
-      :track-by="id"
-      :label="displayName"
-      :taggable="true"
-      :value="value"
-      :limit="3"
-      :limit-text="limitText"
-      :allow-empty="true"
-      :multiple="true"
-      :searchable="true"
-      :clear-on-select="false"
-      :close-on-select="false"
-      @input="updateSelection"
-    >
-      <template slot="tag" slot-scope="{ option, label, value, remove }">
-        <span class="custom__tag">
-          <span>{{ option.displayName }}</span>
-          <span class="custom__remove text-small" @click="remove(option)">❌</span>
-        </span>
-      </template>
-      <template slot="singleLabel" slot-scope="{ option }">
-        {{ option.displayName }}
-      </template>
-      <template slot="clear" slot-scope="props">
-        <div v-if="value.length" class="multiselect__clear" @mousedown.prevent.stop="clearAll(props.search)"></div>
-      </template>
-      <template slot="noResult">
-        <span>No namespaces match</span>
-      </template>
-    </MultiSelect>
+  <div class="picker">
+    <div v-for="ns in namespaces" :key="ns.id">
+      <label>
+        <input v-model="value" type="radio" :value="ns.id">{{ ns.label }}
+      </label>
+    </div>
   </div>
 </template>
 
 <script>
-import MultiSelect from 'vue-multiselect';
 import { NAMESPACES } from '@/store/prefs';
 import { NAMESPACE } from '@/utils/types';
+import { isArray } from '@/utils/array';
 
 const ALL = '_all';
 
 export default {
-  components: { MultiSelect },
-
-  data() {
-    // const value = this.$store.getters['prefs/get'](NAMESPACES);
-    const value = [
-      { id: ALL, displayName: 'All Namespaces' },
-    ];
-
-    const isAll = value.find(x => x.id === '_all');
-
-    const choices = this.$store.getters['v1/all'](NAMESPACE);
-    const out = [
-      { id: ALL, displayName: 'All Namespaces' },
-    ];
-
-    choices.forEach((obj) => {
-      out.push({
-        id:          obj.id,
-        displayName: obj.displayName,
-        $isDisabled: isAll && false,
-      });
-    });
-
-    return { value, options: choices };
-  },
-
   computed: {
+    value: {
+      get() {
+        const value = this.$store.getters['prefs/get'](NAMESPACES);
+
+        // @TODO Mutliple support
+        if ( isArray(value) ) {
+          return value[0];
+        } else {
+          return value;
+        }
+      },
+
+      set(neu) {
+        const val = [neu];
+
+        this.$store.dispatch('switchNamespaces', val);
+      }
+    },
+
     namespaces() {
-      const isAll = !!this.value.find(x => x.id === '_all');
       const choices = this.$store.getters['v1/all'](NAMESPACE);
 
       const out = [
-        { id: ALL, displayName: 'All Namespaces' },
+        { id: ALL, label: 'All Namespaces' },
       ];
 
       choices.forEach((obj) => {
         out.push({
-          id:          obj.id,
-          displayName: obj.displayName,
-          $isDisabled: isAll && false,
+          id:    obj.id,
+          label: obj.displayName,
         });
       });
 
@@ -105,3 +67,10 @@ export default {
 };
 
 </script>
+
+<style type="scss" scoped>
+  .picker {
+    max-height: 200px;
+    overflow-y: auto;
+  }
+</style>

layouts/default.vue

@@ -3,7 +3,7 @@
   <div class="root">
     <header>
       <n-link to="/">
-        Left
+        Left -- {{ $store.state.namespaces }}
       </n-link>
 
       <div class="header-right">

pages/explorer/index.vue

@@ -5,7 +5,7 @@
 
     <SortableTable
       :headers="headers"
-      :rows="rows"
+      :rows="filteredRows"
       key-field="metadata.uid"
       table-actions
     />
@@ -14,23 +14,42 @@
 
 <script>
 import SortableTable from '@/components/SortableTable';
-import { NAME, CREATED } from '@/utils/table-headers';
+import { NAME, NAMESPACE, CREATED } from '@/utils/table-headers';
+import { removeObject } from '@/utils/array';
 
 export default {
   components: { SortableTable },
 
-  computed: {},
+  computed: {
+    headers() {
+      const out = [
+        NAME,
+        NAMESPACE,
+        CREATED
+      ];
+
+      if ( !this.$store.getters['allNamespaces'] ) {
+        removeObject(out, NAMESPACE);
+      }
+
+      return out;
+    },
+
+    filteredRows() {
+      if ( this.$store.getters['allNamespaces'] ) {
+        return this.rows;
+      }
+
+      const namespaces = this.$store.getters['namespaces'];
+
+      return this.rows.filter(x => namespaces.includes(x.metadata.namespace));
+    }
+  },
 
   async asyncData(ctx) {
     const rows = await ctx.store.dispatch('v1/findAll', { type: 'io.k8s.api.core.v1.Pod' });
 
-    return {
-      headers: [
-        NAME,
-        CREATED
-      ],
-      rows,
-    };
+    return { rows };
   },
 };
 </script>

store/index.js

@@ -1,22 +1,42 @@
 import Norman from '@/plugins/norman';
 import { POD, NAMESPACE } from '@/utils/types';
+import { NAMESPACES } from '@/store/prefs';
 
 export const plugins = [
   Norman({ namespace: 'v1' })
 ];
 
 export const state = () => {
-  return { preloaded: false };
+  return {
+    preloaded:  false,
+    namespaces: [],
+  };
+};
+
+export const getters = {
+  allNamespaces(state) {
+    return (state.namespaces || []).includes('_all');
+  },
+
+  namespaces(state) {
+    return state.namespaces;
+  }
 };
 
 export const mutations = {
   preloaded(state) {
     state.preloaded = true;
   },
+
+  updateNamespaces(state, neu) {
+    state.namespaces = neu;
+  }
 };
 
 export const actions = {
-  async preload({ state, dispatch, commit }) {
+  async preload({
+    state, getters, commit, dispatch
+  }) {
     if ( state.preloaded ) {
       return;
     }
@@ -29,13 +49,24 @@ export const actions = {
       dispatch('v1/findAll', { type: POD, opt: { url: 'pods' } }),
       dispatch('v1/findAll', { type: NAMESPACE, opt: { url: 'namespaces' } })
     ]);
+
+    commit('updateNamespaces', getters['prefs/get'](NAMESPACES));
     console.log('Done Preloading.');
 
     commit('preloaded');
   },
 
-  nuxtClientInit({ commit }) {
-    commit('v1/rehydrateProxies');
+  switchNamespaces({ commit }, val) {
+    commit('prefs/set', { key: NAMESPACES, val });
+    commit('updateNamespaces', val);
+  },
+
+  async nuxtClientInit({ state, dispatch, commit }) {
+    if ( state.preloaded ) {
+      commit('v1/rehydrateProxies');
+    } else {
+      await dispatch('preload');
+    }
   },
 
   async nuxtServerInit({ dispatch }) {

store/prefs.js

@@ -2,10 +2,10 @@ import Vue from 'vue';
 
 const all = {};
 
-export const create = function(name, def, json = false) {
+export const create = function(name, def, parseJSON = false) {
   all[name] = {
     def,
-    isJson: json
+    parseJSON
   };
 
   return name;
@@ -72,11 +72,7 @@ export const actions = {
   loadCookies({ commit }) {
     for (const key in all) {
       const entry = all[key];
-      const opt = {};
-
-      if (!entry.isJson) {
-        opt.parseJSON = false;
-      }
+      const opt = { parseJSON: entry.parseJSON !== false };
 
       const val = this.$cookies.get(`${ prefix }${ key }`, opt);
 

utils/table-headers.js

@@ -20,6 +20,13 @@ export const NAME = {
   sort:   ['sortName', 'id'],
 };
 
+export const NAMESPACE = {
+  name:   'namespace',
+  value:  'metadata.namespace',
+  label:  'Namespace',
+  sort:   ['metadata.namespace', 'id'],
+};
+
 export const CREATED = {
   name:      'created',
   value:     'metadata.creationTimestamp',