Keydown event handling

web2/src/components/LogViewer.vue

@@ -27,12 +27,8 @@ const keyr = 82;
 const keyd = 68;
 const keytab = 9;
 
-const isReloading = ref(false);
-const isLoading = ref(true);
-const isError = ref(false);
 const isLargeText = ref(false);
 const isWatching = ref(false);
-const error = ref(null);
 const selectedContainer = ref(0);
 const selectedContainerName = ref("");
 const pod = computed(() => store.pod)
@@ -56,29 +52,29 @@ onUpdated(() => {
 })
 
 function reload() {
-  // closeStream()
+  closeStream()
   store.getLog(props.namespace, props.pod, selectedContainerName.value)
   // store.dispatch('resetLineStart');
   gotoBottom();
 }
 
 function watch() {
-  //store.dispatch('streamPodLog', { namespace: this.$route.params.namespace, pod: this.$route.params.pod, container: this.pod.spec.containers[this.selectedContainer].name });
+  store.streamLogs(props.namespace, props.pod, selectedContainerName.value);
   isWatching.value = true;
   router.push({ query: Object.assign({}, route.query, { watch: "true" })});
   gotoBottom();
 }
 
 function toggleWatch() {
-  if(isWatching) {
+  if(isWatching.value) {
     closeStream()
   } else {
     watch();
   }
 }
 
 function closeStream() {
-  //store.dispatch('closeStream')
+  store.closeStream();
   isWatching.value = false;
   router.push({ query: Object.assign({}, route.query, { watch: "false" })});
 }
@@ -90,13 +86,13 @@ function gotoBottom () {
 function gotoTop () {
   window.scrollTo(0, 49);
 }
+
 function toggleLargeText() {
-  this.isLargeText = !this.isLargeText;
+  isLargeText.value = !isLargeText.value;
   router.push({ query: Object.assign({}, route.query, { largetext: isLargeText.value })});
 }
 
-
-async function setSelectedContainer(index) {
+function setSelectedContainer(index) {
   selectedContainer.value = index;
   selectedContainerName.value = pod.value.spec.containers[index].name
   router.push({ query: Object.assign({}, route.query, { container: selectedContainerName.value })});
@@ -109,12 +105,12 @@ async function setSelectedContainer(index) {
 
 
 function setNextContainer() {
-  if(store.pod.spec.containers.length > 1) {
-    if(selectedContainer < (store.pod.spec.containers.length-1)) {
-      setSelectedContainer(selectedContainer+1);
+  if(pod.value.spec.containers.length > 1) {
+    if(selectedContainer.value < (pod.value.spec.containers.length-1)) {
+      setSelectedContainer(selectedContainer.value+1);
       return
     }
-    if(selectedContainer == (store.pod.spec.containers.length-1)) {
+    if(selectedContainer.value == (pod.value.spec.containers.length-1)) {
       setSelectedContainer(0);
       return
     }
@@ -139,7 +135,7 @@ function handlePress(e) {
       reload();
       break;
     case keyd:
-      download(`${store.pod.metadata.name}.log`, store.podLog);
+      download(`${pod.value.metadata.name}.log`, podLog.value);
       break;
     case keytab: 
       setNextContainer();
@@ -149,7 +145,7 @@ function handlePress(e) {
 }
 
 function download(filename, data) {
-  const content = btoa(data.join('\r\n'));
+  const content = data.join('\r\n');
   const link = document.createElement('a');
   link.setAttribute('download', filename); //or any other extension
   link.setAttribute("href", "data:text/plain;base64;charset=utf-8,"+content); //or any other extension

web2/src/components/Namespaces.vue

@@ -16,17 +16,19 @@ const keyesc = 27;
 const keyup = 38;
 const keydown = 40;
 const keyenter = 13;
+const keysearch = 55;
 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]
 
 const isLoading = ref(true)
 const isError = ref(false)
 const error = ref(null)
 const activeNamespace = ref(0)
 const searchString = ref('')
+const searchfield = ref(null);
 
 onMounted(() => {
   store.getNamespaces()
-  window.addEventListener("keydown", handlePress);
+  window.addEventListener("keydown", handlePress, false);
 })
 
 onBeforeUnmount(() => {
@@ -35,24 +37,42 @@ onBeforeUnmount(() => {
 
 function handlePress(e) {
 
-  // Up/Down
-  if(e.keyCode == keyup && activeNamespace.value > 0) {
-    activeNamespace.value--;
-  } else if (e.keyCode == keydown && activeNamespace.value < store.filteredNamespaces.length-1) {
-    activeNamespace.value++;
-  } else if (keychars.indexOf(e.keyCode) > -1) {
-
-  }
-
-  // Enter
-  if(e.keyCode == keyenter) {
-    let i = store.filteredNamespaces[activeNamespace.value].metadata.name;
-    router.push({ path: `/namespaces/${i}/pods`})
+  // Fuzzy find namespaces using regular a-z keys 
+  if (keychars.indexOf(e.keyCode) > -1) {
+    activeNamespace.value = 0;
+    searchfield.value.focus();
+    return;
   }
 
-  // Blur and clear input
-  if(event.keyCode == keyesc) {
-    searchString.value = "";
+  // Handle actions such as up/down enter/esc
+  switch(e.keyCode) {
+    case keydown:
+      e.preventDefault();
+      if(activeNamespace.value > store.filteredNamespaces.length-1) {
+        activeNamespace.value = 0;
+      }
+      if(activeNamespace.value < store.filteredNamespaces.length-1) {
+        activeNamespace.value++
+      }
+      break;
+    case keyup:
+      e.preventDefault();
+      if(activeNamespace.value > store.filteredNamespaces.length-1) {
+        activeNamespace.value = 0;
+      }
+      if(activeNamespace.value > 0) {
+        activeNamespace.value--;
+      }
+      break;
+    case keyenter:
+      e.preventDefault();
+      let i = store.filteredNamespaces[activeNamespace.value].metadata.name;
+      router.push({ path: `/namespaces/${i}/pods`})
+      break;
+    case keyesc:
+      e.preventDefault();
+      searchString.value = "";
+      break;
   }
 }
 
@@ -71,11 +91,10 @@ function clear() {
 
 function sort() {
   if (store.nsSort == 'asc') {
-    store.sortNamespaces('asc')
-  } else {
     store.sortNamespaces('desc')
+  } else {
+    store.sortNamespaces('asc')
   }
-
 }
 
 </script>
@@ -84,14 +103,14 @@ function sort() {
   <div class="container">
     <div class="input-group mb-3">
       <span class="input-group-text" id="ns-search">{{ store.filteredNamespaces.length }}</span>
-      <input type="text" class="search-field form-control" v-model="searchString" placeholder="Search Namespace" @keyup="filter" aria-label="Namespace" aria-describedby="ns-search">
+      <input type="text" class="search-field form-control" v-model="searchString" placeholder="Search Namespace" @keyup="filter" aria-label="Namespace" aria-describedby="ns-search" ref="searchfield">
 
       <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 class="btn btn-outline-secondary" type="button" id="button-addon2" v-on:click="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>
     </div>
 

web2/src/components/Pods.vue

@@ -16,6 +16,7 @@ const isError = ref(false);
 const error = ref(null);
 const activePod = ref(0);
 const searchString = ref('')
+const searchfield = ref(null);
 
 const keyesc = 27;
 const keyup = 38;
@@ -37,31 +38,51 @@ onBeforeUnmount(() => {
 })
 
 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) {
-
+
+  // Fuzzy find pods using regular a-z keys 
+  if (keychars.indexOf(e.keyCode) > -1) {
+    activePod.value = 0;
+    searchfield.value.focus();
+    return;
   }
 
-  // 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`})
+  // Handle actions such as up/down enter/esc
+  switch(e.keyCode) {
+    case keydown:
+      e.preventDefault();
+      if(activePod.value > store.filteredPods.length-1) {
+        activePod.value = 0;
+      }
+      if(activePod.value < store.filteredPods.length-1) {
+        activePod.value++
+      }
+      break;
+    case keyup:
+      e.preventDefault();
+      if(activePod.value > store.filteredPods.length-1) {
+        activePod.value = 0;
+      }
+      if(activePod.value > 0) {
+        activePod.value--;
+      }
+      break;
+    case keyenter:
+      e.preventDefault();
+      let n = store.filteredPods[activePod.value].metadata.namespace
+      let p = store.filteredPods[activePod.value].metadata.name;
+      router.push({ path: `/namespaces/${n}/pods/${p}`})
+      break;
+    case keyesc:
+      e.preventDefault();
+      if(searchString.value == "") {
+        router.push({ path: `/namespaces`})
+      } else {
+        searchString.value = "";
+      }
+      break;
   }
 
-  // Blur and clear input
-  if(e.keyCode == keyesc) {
-    searchString.value = ""
-  }
 }
 
 function isSortDown() {
@@ -77,20 +98,27 @@ function clear() {
   store.filterPods(searchString.value)
 }
 
+function sort() {
+  if (store.podSort == 'asc') {
+    store.sortPods('desc')
+  } else {
+    store.sortPods('asc')
+  }
+}
 </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">
+      <input type="text" class="form-control" v-model="searchString" placeholder="Search Pods" @keyup="filter" aria-label="search-pods" ref="searchfield" 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 class="btn btn-outline-secondary" type="button" id="button-addon2" v-on:click="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>
     </div>
     <p/>

web2/src/services/pods.js

@@ -21,4 +21,5 @@ export default {
   getPod,
   getPods,
   getPodLog,
+  streamPodLog,
 };

web2/src/stores/namespace.js

@@ -27,8 +27,8 @@ export const useNamespacesStore = defineStore("namespaces", () => {
 
   function sortNamespaces(sort) {
     nsSort.value = sort;
-    let list = utils.filterNamespaces(nsSearchString.value);
-    return sortList(list, sort);
+    let list = utils.sortList(filteredNamespaces.value, sort);
+    filteredNamespaces.value = list;
   }
 
   return {