Listing pods

web2/src/components/Namespaces.vue

@@ -12,6 +12,7 @@ const store = useNamespacesStore()
 const router = useRouter();
 const route = useRoute();
 
+const keyesc = 27;
 const keyup = 38;
 const keydown = 40;
 const keyenter = 13;
@@ -39,7 +40,7 @@ function handlePress(e) {
     activeNamespace.value--;
   } else if (e.keyCode == keydown && activeNamespace.value < store.filteredNamespaces.length-1) {
     activeNamespace.value++;
-  } else if (keychars.indexOf(event.keyCode) > -1) {
+  } else if (keychars.indexOf(e.keyCode) > -1) {
 
   }
 
@@ -48,6 +49,11 @@ function handlePress(e) {
     let i = store.filteredNamespaces[activeNamespace.value].metadata.name;
     router.push({ path: `/namespaces/${i}/pods`})
   }
+
+  // Blur and clear input
+  if(event.keyCode == keyesc) {
+    searchString.value = "";
+  }
 }
 
 function isSortDown() {

web2/src/components/NamespacesList.vue

@@ -21,7 +21,7 @@ function getActive(index) {
 </script>
 
 <template>
-<div class="h-100">
+  <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">
         <div class="d-flex justify-content-between align-items-center">

web2/src/components/Pods.vue

@@ -0,0 +1,109 @@
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+import { useNamespacesStore } from '@/stores/namespaces';
+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 router = useRouter();
+const route = useRoute();
+
+const isLoading = ref(true);
+const isError = ref(false);
+const error = ref(null);
+const activePod = ref(0);
+const searchString = ref('')
+
+const keyesc = 27;
+const keyup = 38;
+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);
+  window.addEventListener("keydown", handlePress);
+    // this.$store.dispatch('addRecentNamespace', this.$route.params.namespace)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener("keydown", handlePress);
+})
+
+function handlePress(e) {
+  // Up/Down
+  if(e.keyCode == keyup && activePod.value > 0) {
+    activePod.value--;
+  } else if (e.keyCode == keydown && activePod.value < store.filteredPods.length-1) {
+    activePod.value++;
+  } else if (keychars.indexOf(e.keyCode) > -1) {
+
+  }
+
+  // Enter
+  if (e.keyCode == keyenter) {
+    let n = store.filteredPods[activePod.value].metadata.namespace
+    let p = store.filteredPods[activePod.value].metadata.name;
+    router.push({ path: `/namespaces/${n}/pods/${p}`})
+  }
+
+  // Go back to namespaces on esc
+  if (e.keyCode == keyesc && searchString == "") {
+    router.push({ path: `/namespaces`})
+  }
+
+  // Blur and clear input
+  if(e.keyCode == keyesc) {
+    searchString = ""
+  }
+}
+
+function isSortDown() {
+   return store.podSort == 'asc' ? true : false
+}
+
+function filter() {
+  store.filterPods(searchString.value)
+}
+
+function clear() {
+  searchString.value = ""
+  store.filterPods(searchString.value)
+}
+
+</script>
+
+<template>
+  <div class="container">
+    <div class="input-group mb-3">
+      <span class="input-group-text" id="ns-search">{{ store.filteredPods.length }}</span>
+      <input type="text" class="form-control" v-model="searchString" placeholder="Search Pods" @keyup="filter" aria-label="search-pods" aria-describedby="pods-search">
+
+      <button class="btn btn-outline-secondary" v-on:click="clear" type="button" id="button-addon2">
+        <font-awesome-icon :icon="['far', 'circle-xmark']" class="icon"/>
+      </button>
+      <button class="btn btn-outline-secondary" type="button" id="button-addon2">
+        <font-awesome-icon :icon="['fas', 'arrow-up-wide-short']" class="icon" v-if="isSortDown" v-on:click="sort"/>
+        <font-awesome-icon :icon="['fas', 'arrow-down-wide-short']" class="icon" v-if="!isSortDown" v-on:click="sort"/>
+      </button>
+    </div>
+    <p/>
+
+    <Loader v-if="isLoading" />
+
+    <h5 v-if="store.pods.length == 0 && !isLoading && !isError">No pods found</h5>
+
+    <PodsList :items="items" :active="activePod" />
+
+    <ErrorCard title="Unable to load pods" :error="error" v-if="isError"/>
+
+  </div>
+
+</template>
+
+<style lang="scss" scoped>
+</style>
+
+

web2/src/components/PodsList.vue

@@ -0,0 +1,68 @@
+<script setup>
+import { ref, defineProps, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { useNamespacesStore } from '@/stores/namespaces';
+
+const route = useRoute();
+const store = useNamespacesStore();
+const props = defineProps(['active'])
+
+onMounted(() => {
+  store.getPods(route.params.namespace);
+})
+
+function numContainersReady(pod) {
+  if(!pod) {
+    return 0;
+  }
+  var numReady = 0;
+  for(let i = 0; i < pod.status.containerStatuses.length; i++) {
+    if(pod.status.containerStatuses[i].ready) {
+      numReady++;
+    }
+  }
+  return numReady;
+}
+
+function numContainerRestarts(pod) {
+  if(!pod) {
+    return 0;
+  }
+  var numRestarts = 0;
+  for(let i = 0; i < pod.status.containerStatuses.length; i++)  {
+    numRestarts += pod.status.containerStatuses[i].restartCount;
+  }
+  return numRestarts;
+}
+
+function getActive(index) {
+  if(props.active == index) {
+    return 'active'
+  }
+  return ''
+}
+
+</script>
+
+<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.filteredPods">
+        <div class="d-flex justify-content-between align-items-center">
+          <span class="mb-1">{{ item.metadata.name }}</span>
+          <small></small>
+        <small><span><i class="far fa-clock"></i> {{ $filters.timeAgo(item.metadata.creationTimestamp) }} <i class="fas fa-long-arrow-alt-up"></i> {{ item.spec.containers.length }} <i class="fas fa-redo-alt"></i> {{ numContainerRestarts(item) }}</span></small>
+        </div>
+
+      </li>
+  </ul>
+</div>
+</template>
+
+<style lang="scss" scoped>
+.created {
+  opacity: 0.5;
+}
+</style>
+
+

web2/src/router/index.js

@@ -1,7 +1,8 @@
 import { createRouter, createWebHistory } from "vue-router";
 // import NotFoundComponent from '../components/NotFoundComponent.vue'
 import Namespaces from "../components/Namespaces.vue";
-// import Pods from '../components/Pods.vue'
+import Pods from "../components/Pods.vue";
+// import Pod from "../components/Pod.vue";
 // import Pod from '../components/Pod.vue'
 
 const router = createRouter({
@@ -16,6 +17,16 @@ const router = createRouter({
       name: "Namespaces",
       component: Namespaces,
     },
+    {
+      path: "/namespaces/:namespace/pods",
+      name: "Pods",
+      component: Pods,
+    },
+    // {
+    //   path: "/namespaces/:namespace/pods/:pod",
+    //   name: "Pod",
+    //   component: Pod,
+    // },
     ,
   ],
 });

web2/src/stores/namespaces.js

@@ -1,4 +1,4 @@
-import { ref, computed } from "vue";
+import { ref } from "vue";
 import { defineStore } from "pinia";
 import axios from "axios";
 import _ from "lodash";
@@ -9,6 +9,7 @@ const apiUrl = "http://127.0.0.1:8080/api";
 export const useNamespacesStore = defineStore("namespaces", () => {
   const namespaces = ref([]);
   const filteredNamespaces = ref([]);
+  const filteredPods = ref([]);
   const recentNamespaces = ref([]);
   const nsSearchString = ref("");
   const nsSort = ref("asc");
@@ -30,6 +31,12 @@ export const useNamespacesStore = defineStore("namespaces", () => {
     filteredNamespaces.value = filtered;
   }
 
+  function filterPods(searchString) {
+    podSearchString.value = searchString;
+    let filtered = filterList(pods.value, searchString);
+    filteredPods.value = filtered;
+  }
+
   function sortNamespaces(sort) {
     nsSort.value = sort;
     let list = filterNamespaces(nsSearchString.value);
@@ -69,7 +76,8 @@ export const useNamespacesStore = defineStore("namespaces", () => {
 
   async function getPods(namespace) {
     return axios.get(`${apiUrl}/namespaces/${namespace}/pods`).then((res) => {
-      pods.value.set(namespace, res.data.items);
+      pods.value = res.data.items;
+      filteredPods.value = res.data.items;
     });
   }
 
@@ -114,5 +122,7 @@ export const useNamespacesStore = defineStore("namespaces", () => {
     getPod,
     getPodLog,
     getPodCount,
+    filterPods,
+    filteredPods,
   };
 });