Pod loading handlers

web2/src/components/NamespacesList.vue

@@ -16,13 +16,12 @@ function getActive(index) {
 <template>
   <div class="h-100">
   <ul class="list-group">
-      <li :class="'list-group-item ' + getActive(index)" :aria-current="active == index" v-for="(item, index) in items">
-        <div class="d-flex justify-content-between align-items-center">
-          <span class="mb-1">{{ item.metadata.name }}</span>
-          <small><span class="namespace-icons"><i class="far fa-clock"></i> {{  $filters.timeAgo(item.metadata.creationTimestamp) }}</span> <span class="namespace-icons"><PodCount :namespace="item.metadata.name"/></span></small>
-        </div>
-
-      </li>
+    <li class="list-group-item d-flex justify-content-between align-items-center" :class="getActive(index)" :aria-current="active == index" v-for="(item, index) in items">
+        {{ item.metadata.name }}
+        <small>
+          <span class="namespace-icons"><i class="far fa-clock"></i> {{  $filters.timeAgo(item.metadata.creationTimestamp) }}</span> <span class="namespace-icons"><PodCount :namespace="item.metadata.name"/></span>
+        </small>
+    </li>
   </ul>
   </div>
 </template>

web2/src/components/PodCount.vue

@@ -1,6 +1,6 @@
 <script setup>
 
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 import _ from 'lodash';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { onBeforeRouteLeave } from 'vue-router';
@@ -15,10 +15,6 @@ const signal = controller.signal;
 const isLoaded = ref(true);
 const podCount = ref(0);
 
-onBeforeRouteLeave(() => {
-  controller.abort();
-})
-
 async function getPods(namespace) {
   const response = await fetch(`${apiUrl}/namespaces/${namespace}/pods`, { signal });
   const result = await response.json();
@@ -28,15 +24,22 @@ async function getPods(namespace) {
   isLoaded.value = true;
 }
 
-getPods(props.namespace)
+onBeforeRouteLeave(() => {
+  controller.abort();
+})
+
+onMounted(() => {
+  getPods(props.namespace)
+})
 </script>
 
 <template>
-  
+
   <span v-if="isLoaded"><font-awesome-icon :icon="['fax', 'hashtag']" class="icon"/>
     <span v-if="podCount == 0" style="padding-left: 8px;">-</span>
     <span v-if="podCount > 0" style="padding-left: 8px;">{{ podCount }}</span>
   </span>
+
 </template>
 
 <style scoped>

web2/src/components/Pods.vue

@@ -10,8 +10,6 @@ const store = usePodStore();
 const router = useRouter();
 const route = useRoute();
 
-const pods = ref([]);
-const isLoading = ref(true);
 const isError = ref(false);
 const error = ref(null);
 const activePod = ref(0);
@@ -24,12 +22,8 @@ const keydown = 40;
 const keyenter = 13;
 const keychars = [48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 109]
 
-onMounted(async () => {
-  const { data, error } = await store.getPods(route.params.namespace);
-  if (error != null) {
-    alert(error)
-  }
-  pods.value = data;
+onMounted(() => {
+  reload();
   window.addEventListener("keydown", handlePress);
 })
 
@@ -105,6 +99,10 @@ function sort() {
     store.sortPods('asc')
   }
 }
+
+function reload() {
+ store.getPods(route.params.namespace);
+}
 </script>
 
 <template>
@@ -120,14 +118,15 @@ function sort() {
         <font-awesome-icon :icon="['fas', 'arrow-up-wide-short']" class="icon" v-if="isSortDown" />
         <font-awesome-icon :icon="['fas', 'arrow-down-wide-short']" class="icon" v-if="!isSortDown" />
       </button>
+      <button type="button" class="btn btn-outline-secondary" :disabled="store.isNamespacesLoading" @click="reload()"><font-awesome-icon :icon="['fas', 'redo']" /></button>
     </div>
     <p/>
 
-    <Loader v-if="isLoading" />
+    <Loader v-if="store.isPodLoading" />
 
-    <h5 v-if="store.pods.length == 0 && !isLoading && !isError">No pods found</h5>
+    <h5 v-if="store.pods.length == 0 && !store.isPodLoading && !isError">No pods found</h5>
 
-    <PodsList :items="store.filteredPods" :active="activePod" />
+    <PodsList :items="store.filteredPods" :active="activePod" v-if="!store.isPodLoading && !isError"/>
 
     <ErrorCard title="Unable to load pods" :error="error" v-if="isError"/>
 

web2/src/components/PodsList.vue

@@ -1,11 +1,7 @@
 <script setup>
 import { defineProps } from 'vue';
-import { useRoute } from 'vue-router';
-import { usePodStore } from '@/stores/pod';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
-const route = useRoute();
-const store = usePodStore();
 const props = defineProps({
   active: Number,
   items: Array

web2/src/stores/pod.js

@@ -18,8 +18,8 @@ export const usePodStore = defineStore("pod", () => {
   const lineStart = ref(0);
   const maxLogLines = ref(1000);
   const podError = ref(null);
-  const isPodLoading = ref(true);
-  const isLogsLoading = ref(true);
+  const isPodLoading = ref(false);
+  const isLogsLoading = ref(false);
 
   const getPodCount = computed((n) => {
     if (pods.value.has(n)) {
@@ -43,6 +43,7 @@ export const usePodStore = defineStore("pod", () => {
   async function getPods(n) {
     pods.value = [];
     filteredPods.value = [];
+    isPodLoading.value = true;
     try {
       const response = await PodService.getPods(n);
       if (!response.ok) {
@@ -51,11 +52,13 @@ export const usePodStore = defineStore("pod", () => {
       const data = await response.json();
       pods.value = data.items;
       filteredPods.value = data.items;
+      isPodLoading.value = false;
       return {
         data: data.items,
         error: null,
       };
     } catch (error) {
+      isPodLoading.value = false;
       return {
         data: null,
         error: error,