Create Pod store

web2/src/common/utils.js

@@ -0,0 +1,30 @@
+import _ from "lodash";
+
+function filterList(list, searchString) {
+  let q = searchString || "";
+
+  // Remove whitespaces
+  q = q.replace(/\s/g, "");
+
+  // Filter by name
+  let filtered = _.filter(list, function (item) {
+    return item.metadata.name.includes(q);
+  });
+
+  return filtered;
+}
+
+function sortList(list, sort) {
+  return _.orderBy(
+    list,
+    function (item) {
+      return item.metadata.name;
+    },
+    [sort]
+  );
+}
+
+export default {
+  filterList,
+  sortList,
+};

web2/src/components/LogViewer.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, onMounted, onUpdated, onBeforeUnmount, defineProps } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
-import { useNamespacesStore } from '@/stores/namespaces';
+import { usePodStore } from '@/stores/pod';
 import Loader from './Loader.vue'
 
 const props = defineProps({
@@ -17,7 +17,7 @@ const props = defineProps({
 
 const router = useRouter();
 const route = useRoute();
-const store = useNamespacesStore();
+const store = usePodStore();
 
 const keyw = 87;
 const keyb = 66;
@@ -48,8 +48,9 @@ const pod = ref({
 
 onMounted(async () => {
   window.addEventListener("keydown", handlePress);
-  const { data, error } = await store.getPodV2(route.params.namespace, route.params.pod);
+  const { data, error } = await store.getPod(route.params.namespace, route.params.pod);
   if(error != null) {
+    console.log("error fetching data", error)
     error.value = error
   }
   pod.value = data;
@@ -76,7 +77,7 @@ async function getLogs(p) {
   let nName = props.namespace
   let pName = props.pod
   let cName = p.spec.containers[selectedContainer.value].name
-  const { data, error } = await store.getPodLog(nName, pName, cName);
+  const { data, error } = await store.getLog(nName, pName, cName);
   if(error != null) {
     error.value = error;
   }

web2/src/components/Namespaces.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, onMounted, onBeforeUnmount } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
-import { useNamespacesStore } from '@/stores/namespaces';
+import { useNamespacesStore } from '@/stores/namespace';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import Loader from './Loader.vue'
 import ErrorCard from './ErrorCard.vue'

web2/src/components/NamespacesList.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, onMounted, defineProps } from 'vue';
 import PodCount from './PodCount.vue'
-import { useNamespacesStore } from '@/stores/namespaces';
+import { useNamespacesStore } from '@/stores/namespace';
 
 const store = useNamespacesStore();
 // const active = ref(0);

web2/src/components/Pod.vue

@@ -1,14 +1,14 @@
 <script setup>
 import { useRouter, useRoute, onBeforeRouteLeave } from 'vue-router';
 import { ref, onMounted, onBeforeUnmount } from 'vue';
-import { useNamespacesStore } from '@/stores/namespaces';
+import { usePodStore } from '@/stores/pod';
 import LogViewer from './LogViewer.vue'
 import ErrorCard from './ErrorCard.vue'
 import Loader from './Loader.vue'
 
 const router = useRouter();
 const route = useRoute();
-const store = useNamespacesStore();
+const store = usePodStore();
 const keyesc = 27;
 const isLoading = ref(true);
 const isError = ref(false);

web2/src/components/PodCount.vue

@@ -1,17 +1,7 @@
 <script setup>
 
 import { ref } from 'vue';
-import { useNamespacesStore } from '@/stores/namespaces';
-import { storeToRefs } from 'pinia';
-
-// const store = useNamespacesStore()
 const props = defineProps(['namespace'])
-// const { getPodCount } = storeToRefs(store);
-
-// onMounted(() => {
-//   store.getPods(props.namespace);
-// })
-
 const dummy1 = ref(1)
 const dummy2 = ref(2)
 

web2/src/components/Pods.vue

@@ -1,15 +1,16 @@
 <script setup>
 import { ref, onMounted, onBeforeUnmount } from 'vue';
-import { useNamespacesStore } from '@/stores/namespaces';
+import { usePodStore } from '@/stores/pod';
 import { useRouter, useRoute } from 'vue-router';
 import Loader from './Loader.vue'
 import ErrorCard from './ErrorCard.vue'
 import PodsList from './PodsList.vue'
 
-const store = useNamespacesStore();
+const store = usePodStore();
 const router = useRouter();
 const route = useRoute();
 
+const pods = ref([]);
 const isLoading = ref(true);
 const isError = ref(false);
 const error = ref(null);
@@ -22,10 +23,13 @@ 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(() => {
-  store.getPods(route.params.namespace);
+onMounted(async () => {
+  const { data, error } = await store.getPods(route.params.namespace);
+  if (error != null) {
+    alert(error)
+  }
+  pods.value = data;
   window.addEventListener("keydown", handlePress);
-    // this.$store.dispatch('addRecentNamespace', this.$route.params.namespace)
 })
 
 onBeforeUnmount(() => {
@@ -95,7 +99,7 @@ function clear() {
 
     <h5 v-if="store.pods.length == 0 && !isLoading && !isError">No pods found</h5>
 
-    <PodsList :items="store.pods" :active="activePod" />
+    <PodsList :items="store.filteredPods" :active="activePod" />
 
     <ErrorCard title="Unable to load pods" :error="error" v-if="isError"/>
 

web2/src/components/PodsList.vue

@@ -1,10 +1,10 @@
 <script setup>
 import { ref, defineProps, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
-import { useNamespacesStore } from '@/stores/namespaces';
+import { usePodStore } from '@/stores/pod';
 
 const route = useRoute();
-const store = useNamespacesStore();
+const store = usePodStore();
 const props = defineProps({
   active: Number,
   items: Array

web2/src/components/RecentNamespacesList.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useNamespacesStore } from '@/stores/namespaces'
+import { useNamespacesStore } from '@/stores/namespace'
 const store = useNamespacesStore()
 </script>
 

web2/src/services/pods.js

@@ -4,12 +4,16 @@ async function getPod(namespace, pod) {
   return await fetch(`${apiUrl}/namespaces/${namespace}/pods/${pod}`);
 }
 
+async function getPods(namespace) {
+  return await fetch(`${apiUrl}/namespaces/${namespace}/pods`);
+}
 async function getPodLog(n, p, c) {
   return await fetch(
     `${apiUrl}/namespaces/${n}/pods/${p}/log?container=${c}&tailLines=1000`
   );
 }
 export default {
   getPod,
+  getPods,
   getPodLog,
 };

web2/src/stores/namespace.js

@@ -0,0 +1,44 @@
+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";
+
+export const useNamespacesStore = defineStore("namespaces", () => {
+  const namespaces = ref([]);
+  const filteredNamespaces = ref([]);
+  const recentNamespaces = ref([]);
+  const nsSearchString = ref("");
+  const nsSort = ref("asc");
+
+  async function getNamespaces() {
+    return axios.get(`${apiUrl}/namespaces`).then((res) => {
+      namespaces.value = res.data.items;
+      filteredNamespaces.value = res.data.items;
+    });
+  }
+
+  function filterNamespaces(searchString) {
+    let filtered = utils.filterList(namespaces.value, searchString);
+    nsSearchString.value = searchString;
+    filteredNamespaces.value = filtered;
+  }
+
+  function sortNamespaces(sort) {
+    nsSort.value = sort;
+    let list = utils.filterNamespaces(nsSearchString.value);
+    return sortList(list, sort);
+  }
+
+  return {
+    namespaces,
+    recentNamespaces,
+    nsSearchString,
+    nsSort,
+    getNamespaces,
+    filterNamespaces,
+    filteredNamespaces,
+    sortNamespaces,
+  };
+});