update UI

kyverno · Dec 9, 2023 · d8a8ab2 · d8a8ab2
1 parent c12ef36
commit d8a8ab2
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 5 deletions.
diff --git a/frontend/app.vue b/frontend/app.vue
@@ -24,4 +24,8 @@ const { data: sources } = useAPI<string[]>(
   .main-height {
     min-height: calc(100vh - 64px);
   }
+
+  .no-scrollbar {
+    overflow: hidden!important;
+  }
 </style>
diff --git a/frontend/modules/core/components/ClusterResourceResultList.vue b/frontend/modules/core/components/ClusterResourceResultList.vue
@@ -11,7 +11,7 @@
       <v-list lines="two">
           <template v-for="item in data.items" :key="item.id">
               <v-divider />
-              <v-list-item>
+              <v-list-item :to="`/resource/${item.id}`">
                   <v-list-item-title>{{ item.name }}</v-list-item-title>
                   <v-list-item-subtitle>{{ item.apiVersion }} {{ item.kind }}</v-list-item-subtitle>
                   <template v-slot:append>

diff --git a/frontend/modules/core/plugins/apis.ts b/frontend/modules/core/plugins/apis.ts
@@ -11,8 +11,8 @@ export default defineNuxtPlugin(async () => {
 
   api.setPrefix(apiConfig.default)
 
-  kinds.value = apiConfig.defaultFilter.resources
-  clusterKinds.value = apiConfig.defaultFilter.clusterResources
+  kinds.value = apiConfig.defaultFilter.resources || []
+  clusterKinds.value = apiConfig.defaultFilter.clusterResources || []
 
   const store = useConfigStore()
 

diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
@@ -16,7 +16,7 @@
         <LazyClusterResourceResultList />
       </v-col>
     </v-row>
-    <v-infinite-scroll :items="loaded" :onLoad="load">
+    <v-infinite-scroll :onLoad="load" class="no-scrollbar">
       <template v-for="ns in loaded" :key="ns">
         <v-row>
           <v-col>

diff --git a/frontend/pages/resource/[id].vue b/frontend/pages/resource/[id].vue
@@ -5,7 +5,16 @@
         <v-card elevation="2" rounded>
           <div  class="bg-indigo">
             <v-card-title>
-              <span v-if="data?.resource.namespace">{{ data?.resource.namespace }}/</span>{{ data.resource.name }}
+              <v-container fluid class="ma-0 pa-0">
+                <v-row>
+                  <v-col>
+                    <span v-if="data?.resource.namespace">{{ data?.resource.namespace }}/</span>{{ data.resource.name }}
+                  </v-col>
+                  <v-col class="text-right">
+                    <v-btn variant="text" color="white" prepend-icon="mdi-arrow-left" @click="router.back()">back</v-btn>
+                  </v-col>
+                </v-row>
+              </v-container>
             </v-card-title>
             <v-card-subtitle class="pb-4">{{ data?.resource.apiVersion }} {{ data.resource.kind }}</v-card-subtitle>
           </div>
@@ -34,6 +43,7 @@ import ResourceResultCounts from "~/modules/core/components/chart/ResourceResult
 import type { Source } from "~/modules/core/types";
 
 const route = useRoute()
+const router = useRouter()
 
 const { data } = useAPI(
     (api) => Promise.all([