Fetching namespaces

web2/src/components/Loader.vue

@@ -1,13 +1,16 @@
-<script>
+<script setup>
 </script>
 
 <template>
   <div class="d-flex justify-content-center">
-    Loading ...
+    <div class="spinner-border" style="color: rgb(0, 123, 255)" role="status">
+      <span class="visually-hidden">Loading...</span>
+    </div>
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 </style>
 
 
+

web2/src/components/Namespaces.vue

@@ -24,8 +24,8 @@ const activeNamespace = ref(0)
 const searchString = ref('')
 const searchfield = ref(null);
 
-onMounted(() => {
-  store.getNamespaces()
+onMounted(async () => {
+  reload();
   window.addEventListener("keydown", handlePress);
 })
 
@@ -97,6 +97,10 @@ function sort() {
   }
 }
 
+function reload() {
+  store.getNamespaces();
+}
+
 </script>
 
 <template>
@@ -112,16 +116,17 @@ 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>
 
-    <Loader v-if="isLoading" />
+    <Loader v-if="store.isNamespacesLoading" />
 
     <h5 v-if="store.namespaces.length == 0 && !isLoading && !isError">No namespaces found</h5>
 
-    <div class="row" v-if="isLoading && !isError">
+    <div class="row" v-if="!store.isNamespacesLoading && !isError">
       <div class="col" v-if="store.namespaces.length > 0">
         <h6 v-if="store.recentNamespaces.length > 0">All</h6>
-        <NamespacesList :items="store.namespaces" :active="activeNamespace"/>
+        <NamespacesList :items="store.filteredNamespaces" :active="activeNamespace"/>
       </div>
       <div class="col-4" v-if="store.recentNamespaces.length > 0">
         <h6>Recent</h6>

web2/src/components/NamespacesList.vue

@@ -1,15 +1,8 @@
 <script setup>
-import { ref, onMounted, defineProps } from 'vue';
+import { defineProps } from 'vue';
 import PodCount from './PodCount.vue'
-import { useNamespacesStore } from '@/stores/namespace';
 
-const store = useNamespacesStore();
-// const active = ref(0);
-const props = defineProps(['active']);
-
-onMounted(() => {
-  store.getNamespaces();
-});
+const props = defineProps(['active', 'items']);
 
 function getActive(index) {
   if(props.active == index) {
@@ -23,7 +16,7 @@ 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 store.filteredNamespaces">
+      <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>

web2/src/components/PodCount.vue

@@ -12,7 +12,6 @@ const apiUrl = "http://127.0.0.1:8080/api";
 const controller = new AbortController();
 const signal = controller.signal;
 
-const pods = ref([]);
 const isLoaded = ref(true);
 const podCount = ref(0);
 

web2/src/services/namespaces.js

@@ -0,0 +1,13 @@
+const apiUrl = "http://127.0.0.1:8080/api";
+
+async function getNamespace(namespace) {
+  return await fetch(`${apiUrl}/namespaces/${namespace}`);
+}
+
+async function getNamespaces() {
+  return await fetch(`${apiUrl}/namespaces`);
+}
+export default {
+  getNamespace,
+  getNamespaces,
+};

web2/src/stores/namespace.js

@@ -1,22 +1,43 @@
 import { ref, computed } from "vue";
 import { defineStore } from "pinia";
-import axios from "axios";
 import utils from "../common/utils";
-
-const apiUrl = "http://127.0.0.1:8080/api";
+import NamespaceService from "../services/namespaces";
 
 export const useNamespacesStore = defineStore("namespaces", () => {
   const namespaces = ref([]);
   const filteredNamespaces = ref([]);
   const recentNamespaces = ref([]);
   const nsSearchString = ref("");
   const nsSort = ref("asc");
+  const isNamespacesLoading = ref(false);
 
   async function getNamespaces() {
-    return axios.get(`${apiUrl}/namespaces`).then((res) => {
-      namespaces.value = res.data.items;
-      filteredNamespaces.value = res.data.items;
-    });
+    isNamespacesLoading.value = true;
+    namespaces.value = [];
+    filteredNamespaces.value = [];
+
+    try {
+      const response = await NamespaceService.getNamespaces();
+      if (!response.ok) {
+        throw new Error(
+          `unable to fetch namespaces with status ${response.status}`
+        );
+      }
+      const data = await response.json();
+      namespaces.value = data.items;
+      filteredNamespaces.value = data.items;
+      isNamespacesLoading.value = false;
+      return {
+        data: data.items,
+        error: null,
+      };
+    } catch (error) {
+      isNamespacesLoading.value = false;
+      return {
+        data: null,
+        error: error,
+      };
+    }
   }
 
   function filterNamespaces(searchString) {
@@ -40,5 +61,6 @@ export const useNamespacesStore = defineStore("namespaces", () => {
     filterNamespaces,
     filteredNamespaces,
     sortNamespaces,
+    isNamespacesLoading,
   };
 });