Counts, resource nav

components/formatters/LinkDetail.vue

@@ -0,0 +1,23 @@
+<script>
+
+export default {
+  props: {
+    value: {
+      type:     String,
+      required: true
+    },
+    row: {
+      type:     Object,
+      required: true
+    }
+  },
+};
+</script>
+
+<template>
+  <span>
+    <nuxt-link :to="row.id">
+      {{ row.displayName }}
+    </nuxt-link>
+  </span>
+</template>

layouts/default.vue

@@ -15,12 +15,12 @@
       <nav>
         <NamespacePicker />
         <ul class="list-unstyled packages">
-          <n-link v-for="pkg in packages" :key="pkg.name" :to="pkg.name" tag="li" class="package">
+          <n-link v-for="pkg in packages" :key="pkg.name" :to="'/'+pkg.name" tag="li" class="package">
             <a>{{ pkg.label }}</a>
-            <ul class="list-unstyled children">
-              <li><a>Child 1</a></li>
-              <li><a>Child 2</a></li>
-              <li><a>Child 3</a></li>
+            <ul v-if="pkg.children" class="list-unstyled children">
+              <n-link v-for="child in pkg.children" :key="child.route" :to="child.route" tag="li">
+                <a>{{ child.label }}</a></li>
+              </n-link>
             </ul>
           </n-link>
         </ul>
@@ -43,6 +43,7 @@
 
 <script>
 import { THEME } from '~/store/prefs';
+import { COUNT } from '~/utils/types';
 import NamespacePicker from '~/components/NamespacePicker';
 
 export default {
@@ -56,6 +57,12 @@ export default {
 
   computed: {
     packages() {
+      const counts = this.$store.getters['counts'];
+      const children = counts.map(res => ({
+        ...res,
+        route: `/explorer/${ res.id }/`
+      }));
+
       const data = [
         {
           name:  'cluster',
@@ -63,7 +70,8 @@ export default {
         },
         {
           name:     'explorer',
-          label: 'Explorer'
+          label:    'Explorer',
+          children,
         }
       ];
 

nuxt.config.js

@@ -32,9 +32,8 @@ module.exports = {
      ** You can extend webpack config here
      */
     extend(config, { isDev, isClient }) {
-      console.log(`Build, isDev: ${ isDev }, isClient: ${ isClient }`);
       if (isDev) {
-        config.devtool = isClient ? '#source-map' : 'inline-source-map';
+        config.devtool = isClient ? 'eval-source-map' : 'inline-source-map';
       }
     },
     //    extractCSS: true,

pages/explorer/_resource/_id.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    ID: {{ $route.params.id }}
+  </div>
+</template>

pages/explorer/_resource/_namespace/_id.vue

@@ -0,0 +1,6 @@
+<template>
+<div>
+    <p>Namespace: {{ $route.params.namespace }}</p>
+    <p>ID: {{ $route.params.id }}</p>
+  </div>
+</template>

pages/explorer/_resource/index.vue

@@ -0,0 +1,53 @@
+
+<template>
+  <div>
+    <SortableTable
+      :headers="headers"
+      :rows="filteredRows"
+      key-field="metadata.uid"
+      table-actions
+    />
+  </div>
+</template>
+
+<script>
+import SortableTable from '@/components/SortableTable';
+import { NAME, NAMESPACE, CREATED } from '@/utils/table-headers';
+import { removeObject } from '@/utils/array';
+
+export default {
+  components: { SortableTable },
+
+  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));
+    }
+  },
+
+  asyncData(ctx) {
+    return ctx.store.dispatch('v1/findAll', { type: ctx.params.resource }).then((rows) => {
+      return { rows };
+    });
+  },
+};
+</script>

pages/explorer/index.vue

@@ -1,55 +1,6 @@
 
 <template>
   <div>
-    Explorer Index
-
-    <SortableTable
-      :headers="headers"
-      :rows="filteredRows"
-      key-field="metadata.uid"
-      table-actions
-    />
+    &lt;-- Select a resource over here
   </div>
 </template>
-
-<script>
-import SortableTable from '@/components/SortableTable';
-import { NAME, NAMESPACE, CREATED } from '@/utils/table-headers';
-import { removeObject } from '@/utils/array';
-
-export default {
-  components: { SortableTable },
-
-  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 { rows };
-  },
-};
-</script>

plugins/norman/index.js

@@ -43,9 +43,14 @@ export const Norman = {
     },
 
     schemaName: (state, getters) => (type) => {
+      type = getters.normalizeType(type);
       const schemas = state.types['schema'];
       const keyField = KEY_FIELD_FOR['schema'] || KEY_FIELD_FOR['default'];
-      const entry = schemas.list.find(x => x[keyField].toLowerCase().endsWith(`.${ type }`));
+      const entry = schemas.list.find((x) => {
+        const thisOne = getters.normalizeType(x[keyField]);
+
+        return thisOne === type || thisOne.endsWith(`.${ type }`);
+      });
 
       if ( entry ) {
         return entry[keyField];
@@ -115,7 +120,7 @@ export const Norman = {
         }
       }
 
-      if ( !url.startsWith('/') ) {
+      if ( !url.startsWith('/') && !url.startsWith('http') ) {
         const baseUrl = state.config.baseUrl.replace(/\/$/, '');
 
         url = `${ baseUrl }/${ url }`;
@@ -344,6 +349,7 @@ export const Norman = {
       opt = opt || {};
       opt.url = getters.urlFor(type, id, opt);
 
+      console.log('Request', opt);
       const res = await dispatch('request', opt);
 
       if ( !getters.hasType(type) ) {

store/index.js

@@ -1,5 +1,5 @@
 import Norman from '@/plugins/norman';
-import { POD, NAMESPACE } from '@/utils/types';
+import { COUNT, POD, NAMESPACE } from '@/utils/types';
 import { NAMESPACES } from '@/store/prefs';
 
 export const plugins = [
@@ -20,6 +20,35 @@ export const getters = {
 
   namespaces(state) {
     return state.namespaces;
+  },
+
+  counts(state, getters) {
+    const obj = getters['v1/all'](COUNT)[0].counts;
+    const out = Object.keys(obj).map((id) => {
+      const schema = getters['v1/schemaFor'](id);
+
+      if ( !schema ) {
+        console.log('Unknown schema, id');
+
+        return null;
+      }
+
+      const attrs = schema.attributes || {};
+      const entry = obj[id];
+
+      return {
+        id,
+        label:      attrs.kind,
+        group:      attrs.group,
+        version:    attrs.version,
+        namespaced: attrs.namespaced,
+        verbs:      attrs.verbs,
+        count:      entry.count,
+        revision:   entry.revision
+      };
+    });
+
+    return out.filter(x => !!x);
   }
 };
 
@@ -46,8 +75,9 @@ export const actions = {
       dispatch('prefs/loadCookies'),
       // ctx.store.dispatch('k8s/loadAll'),
       dispatch('v1/loadSchemas'),
-      dispatch('v1/findAll', { type: POD, opt: { url: 'pods' } }),
+      dispatch('v1/findAll', { type: COUNT, opt: { url: 'counts' } }),
       dispatch('v1/findAll', { type: NAMESPACE, opt: { url: 'namespaces' } })
+      //      dispatch('v1/findAll', { type: POD, opt: { url: 'pods' } }),
     ]);
 
     commit('updateNamespaces', getters['prefs/get'](NAMESPACES));

utils/table-headers.js

@@ -18,6 +18,7 @@ export const NAME = {
   value:     'displayName',
   label:     'Name',
   sort:      ['sortName', 'id'],
+  formatter: 'LinkDetail',
 };
 
 export const NAMESPACE = {

utils/types.js

@@ -1,2 +1,3 @@
+export const COUNT = 'count';
 export const POD = 'io.k8s.api.core.v1.Pod';
 export const NAMESPACE = 'io.k8s.api.core.v1.namespace';