namespace filter

frontend/components/PageLayout.vue

@@ -4,7 +4,7 @@
       <v-col>
         <v-card>
           <v-toolbar color="header" elevation="2">
-            <v-toolbar-title>{{ title }}</v-toolbar-title>
+            <v-toolbar-title v-if="title">{{ title }}</v-toolbar-title>
             <template #append>
               <FormKindAutocomplete style="min-width: 300px; max-width: 100%; margin-right: 15px;" v-model="kinds" :source="source" />
               <FormClusterKindAutocomplete v-if="!nsScoped" style="min-width: 300px;" v-model="clusterKinds" :source="source" />

frontend/composables/infinite.ts

@@ -1,14 +1,45 @@
 import type { Ref, UnwrapRef } from "vue";
 import type { UnwrapRefSimple } from "@vue/reactivity";
 
-export const useInfinite = <T>(list: Ref<T[] | null>) => {
+export const useInfinite = <T>(list: Ref<T[] | null>, defaultLoadings = 3) => {
   const loaded = ref<T[]>([])
-  const index = ref(1)
+  const index = ref(0)
 
-  watch(list, (l) => {
-    if (!list.value?.length) return
+  watch(list, (newValue, oldValue) => {
+    const l = newValue || []
+    const length = (l || []).length
+    const oldLength = (oldValue || []).length
 
-    loaded.value = (l || []).slice(0, 1) as UnwrapRefSimple<T>[]
+    if (!length || (length === loaded.value.length && loaded.value.every(i => (l.includes(i as T))))) return;
+
+    if (length - oldLength === 1) {
+      loaded.value = l.slice(0, length) as UnwrapRefSimple<T>[]
+      index.value = length
+
+      return
+    }
+
+    if (oldLength > 0 && oldLength < length) {
+      loaded.value = l.slice(0, oldLength + 1) as UnwrapRefSimple<T>[]
+      index.value = oldLength + 1
+
+      return
+    }
+
+    if (oldLength > length) {
+      loaded.value = l.slice(0, length) as UnwrapRefSimple<T>[]
+      index.value = length
+
+      return
+    }
+
+    let loadCounter = defaultLoadings
+    if (length < defaultLoadings) {
+      loadCounter = length
+    }
+
+    loaded.value = l.slice(0, loadCounter) as UnwrapRefSimple<T>[]
+    index.value = loadCounter
   }, { immediate: true })
 
   const load = ({ done }: any) => {

frontend/composables/router.ts

@@ -1,6 +1,6 @@
 import debounce from 'lodash.debounce'
 
-const debounced = debounce((emit: () => void) => { emit() }, 600)
+export const useDebounce = (wait: number = 600) => debounce((emit: () => void) => { emit() }, wait)
 
 export const defineRouteQuery = (key: string, selected: Ref<string[]>) => {
     const router = useRouter()
@@ -20,6 +20,8 @@ export const defineRouteQuery = (key: string, selected: Ref<string[]>) => {
         selected.value = values
     }
 
+    const debounced = useDebounce()
+
     return (inp: string[]) => {
         selected.value = inp
 

frontend/modules/core/components/ClusterResourceResultList.vue

@@ -10,7 +10,7 @@
   <v-list v-if="data?.items?.length && open" lines="two">
     <ResourceResultItem v-for="item in data.items" :key="item.id" :item="item" :details="details" :filter="filter" />
   </v-list>
-  <template v-if="data.count > options.offset">
+  <template v-if="data.count > options.offset && open">
     <v-divider />
     <v-pagination v-model="options.page" :length="length" class="my-4" />
   </template>

frontend/modules/core/components/ResourceScroller.vue

@@ -14,11 +14,11 @@
 <script setup lang="ts">
 import { useInfinite } from "~/composables/infinite";
 
-const props = defineProps<{ list: any[]; }>()
+const props = defineProps<{ list: any[]; defaultLoadings?: number }>()
 
 const list = ref<any[]>(props.list)
 
 watch(() => props.list, () => { list.value = props.list }, { immediate: true })
 
-const { load, loaded } = useInfinite(list)
+const { load, loaded } = useInfinite(list, props.defaultLoadings)
 </script>

frontend/modules/core/components/form/KindAutocomplete.vue

@@ -30,9 +30,7 @@ const selected = ref<string[]>(props.modelValue);
 const loading = ref<boolean>(true);
 
 const { data: items } = useAPI(
-    ($coreAPI) => {
-      return $coreAPI.namespacedKinds(props.source)
-    },
+    (api) => api.namespacedKinds(props.source),
     {
       default: () => [],
       finally: () => {

frontend/modules/core/components/form/NamespaceAutocomplete.vue

@@ -0,0 +1,47 @@
+<template>
+  <v-autocomplete
+      multiple
+      clearable
+      density="compact"
+      :items="items as string[]"
+      variant="outlined"
+      hide-details
+      label="Namespaces"
+      closable-chips
+      :model-value="selected"
+      @update:model-value="input"
+      style="min-width: 300px;"
+  >
+    <template #selection="{ item, index }">
+      <v-chip v-if="index <= 1" size="small" label>
+        <span>{{ (item as any).title }}</span>
+      </v-chip>
+      <span v-if="index === 2" class="grey--text caption ml-2 d-inline-flex align-center">
+        (+{{ selected.length - 2 }} others)
+      </span>
+    </template>
+  </v-autocomplete>
+</template>
+
+<script lang="ts" setup>
+import { ResourceFilter } from "~/modules/core/provider/dashboard";
+import { useDebounce } from "~/composables/router";
+
+const props = defineProps<{ modelValue: string[]; items: string[]; }>();
+
+const emit = defineEmits<{ 'update:modelValue': string[] }>();
+
+const filter = inject(ResourceFilter, ref({}))
+
+const selected = ref<string[]>([]);
+
+const input = defineRouteQuery('namespaces', selected);
+
+watch(() => props.items, (current) => {
+  input(selected.value.filter((s) => current.includes(s)));
+}, { immediate: true });
+
+const debounced = useDebounce()
+
+watch(selected, (current) => debounced(() => emit("update:modelValue", current)), { immediate: true });
+</script>

frontend/modules/core/components/resource/NamespaceSection.vue

@@ -0,0 +1,36 @@
+<template>
+  <v-row>
+    <v-col>
+      <v-card>
+        <v-toolbar color="header">
+          <v-toolbar-title>Namespace Scoped Resources</v-toolbar-title>
+          <template #append>
+            <form-namespace-autocomplete v-model="internal" :items="props.namespaces" />
+          </template>
+        </v-toolbar>
+      </v-card>
+    </v-col>
+  </v-row>
+  <slot :namespaces="list">
+    <resource-scroller :list="list">
+      <template #default="{ item }">
+        <LazyResourceResultList :namespace="item" :details="false" />
+      </template>
+    </resource-scroller>
+  </slot>
+</template>
+
+<script setup lang="ts">
+import ResourceScroller from "~/modules/core/components/ResourceScroller.vue";
+
+const props = defineProps<{ namespaces: string[]; }>()
+
+const internal = ref<string[]>([])
+
+const list = computed(() => {
+  if (internal.value.length > 0) return internal.value
+
+  return props.namespaces || []
+})
+
+</script>

frontend/package.json

@@ -14,7 +14,7 @@
     "@nuxt/devtools": "latest",
     "@types/chroma-js": "^2.4.3",
     "@types/lodash.debounce": "^4.0.9",
-    "nuxt": "^3.8.2",
+    "nuxt": "^3.9.0",
     "sass": "^1.69.5",
     "vite-plugin-vuetify": "^1.0.2",
     "vue": "^3.3.8",

frontend/pages/custom-boards/[id].vue

@@ -10,11 +10,15 @@
         <LazyClusterResourceResultList :details="data.multiSource" />
       </v-col>
     </v-row>
-    <resource-scroller :list="data.namespaces" v-if="data.namespaces.length">
-      <template #default="{ item }">
-        <LazyResourceResultList :namespace="item" :details="data.multiSource" />
+    <resource-namespace-section v-if="data.namespaces.length" :namespaces="data.namespaces">
+      <template #default="{ namespaces }">
+        <resource-scroller :list="namespaces" :default-loadings="3">
+          <template #default="{ item }">
+            <LazyResourceResultList :namespace="item" :details="data.multiSource" />
+          </template>
+        </resource-scroller>
       </template>
-    </resource-scroller>
+    </resource-namespace-section>
   </page-layout>
 </template>
 

frontend/pages/index.vue

@@ -1,5 +1,6 @@
 <template>
-  <page-layout v-model:kinds="kinds"
+  <page-layout title="Dashboard"
+               v-model:kinds="kinds"
                v-model:cluster-kinds="clusterKinds"
                v-if="data"
   >
@@ -10,11 +11,15 @@
         <LazyClusterResourceResultList :details="data.multiSource" />
       </v-col>
     </v-row>
-    <resource-scroller :list="data.namespaces" v-if="data.namespaces.length">
-      <template #default="{ item }">
-        <LazyResourceResultList :namespace="item" :details="data.multiSource" />
+    <resource-namespace-section v-if="data.namespaces.length" :namespaces="data.namespaces">
+      <template #default="{ namespaces }">
+        <resource-scroller :list="namespaces">
+          <template #default="{ item }">
+            <LazyResourceResultList :namespace="item" :details="data.multiSource" />
+          </template>
+        </resource-scroller>
       </template>
-    </resource-scroller>
+    </resource-namespace-section>
   </page-layout>
 </template>
 

frontend/pages/source/[source]/[category].vue

@@ -11,18 +11,13 @@
         <LazyClusterResourceResultList :details="false" :source="route.params.source"/>
       </v-col>
     </v-row>
-    <resource-scroller :list="data.namespaces">
-      <template #default="{ item }">
-        <LazyResourceResultList :details="false" :namespace="item"/>
-      </template>
-    </resource-scroller>
+    <resource-namespace-section v-if="data.namespaces.length" :namespaces="data.namespaces" />
   </page-layout>
 </template>
 
 <script lang="ts" setup>
 import { useAPI } from '~/modules/core/composables/api'
 import { capilize } from "~/modules/core/layouthHelper";
-import ResourceScroller from "~/modules/core/components/ResourceScroller.vue";
 import { ResourceFilter } from "~/modules/core/provider/dashboard";
 import { onChange } from "~/helper/compare";
 

frontend/pages/source/[source]/index.vue

@@ -6,11 +6,7 @@
         <LazyClusterResourceResultList :source="route.params.source" :details="false" />
       </v-col>
     </v-row>
-    <resource-scroller :list="data.namespaces">
-      <template #default="{ item }">
-        <LazyResourceResultList :namespace="item" :details="false" />
-      </template>
-    </resource-scroller>
+    <resource-namespace-section v-if="data.namespaces" :namespaces="data.namespaces" />
   </page-layout>
 </template>
 
@@ -19,7 +15,6 @@ import { useAPI } from '~/modules/core/composables/api'
 import { capilize } from "~/modules/core/layouthHelper";
 import { type Filter } from "~/modules/core/types";
 import { ResourceFilter } from "~/modules/core/provider/dashboard";
-import ResourceScroller from "~/modules/core/components/ResourceScroller.vue";
 import { onChange } from "~/helper/compare";
 
 const kinds = ref<string[]>([])