Improved reactivity for Pod and LogViewer

web2/src/components/Loader.vue

@@ -7,7 +7,7 @@
   </div>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
 </style>
 
 

web2/src/components/LogViewer.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, onUpdated, onBeforeUnmount, defineProps } from 'vue';
+import { ref, computed, onMounted, onUpdated, onBeforeUnmount, defineProps } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { usePodStore } from '@/stores/pod';
 import Loader from './Loader.vue'
@@ -34,27 +34,17 @@ const isLargeText = ref(false);
 const isWatching = ref(false);
 const error = ref(null);
 const selectedContainer = ref(0);
-const podLog = ref([]);
+const selectedContainerName = ref("");
+const pod = computed(() => store.pod)
+const podLog = computed(() => store.logs)
 
-const pod = ref({
-  spec: {
-    containers: [
-      {
-        name: "Amir"
-      }
-    ]
-  }
-});
-
-onMounted(async () => {
+onMounted(() => {
+  store.getPod(props.namespace, props.pod).then(() => {
+    let container = pod.value.spec.containers[selectedContainer.value].name
+    selectedContainerName.value = container;
+    store.getLog(props.namespace, props.pod, container);
+  })
   window.addEventListener("keydown", handlePress);
-  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;
-  getLogs(data);
 })
 
 onBeforeUnmount(() => {
@@ -67,25 +57,11 @@ onUpdated(() => {
 
 function reload() {
   // closeStream()
-  getLogs(pod.value)
+  store.getLog(props.namespace, props.pod, selectedContainerName.value)
   // store.dispatch('resetLineStart');
   gotoBottom();
 }
 
-async function getLogs(p) {
-  isReloading.value = true;
-  let nName = props.namespace
-  let pName = props.pod
-  let cName = p.spec.containers[selectedContainer.value].name
-  const { data, error } = await store.getLog(nName, pName, cName);
-  if(error != null) {
-    error.value = error;
-  }
-  podLog.value = data
-  isLoading.value = false;
-  isReloading.value = false;
-}
-
 function watch() {
   //store.dispatch('streamPodLog', { namespace: this.$route.params.namespace, pod: this.$route.params.pod, container: this.pod.spec.containers[this.selectedContainer].name });
   isWatching.value = true;
@@ -116,14 +92,15 @@ function gotoTop () {
 }
 function toggleLargeText() {
   this.isLargeText = !this.isLargeText;
-  router.push({ query: Object.assign({}, route.query, { largetext: isLargeText })});
+  router.push({ query: Object.assign({}, route.query, { largetext: isLargeText.value })});
 }
 
 
 async function setSelectedContainer(index) {
   selectedContainer.value = index;
-  router.push({ query: Object.assign({}, route.query, { container: pod.value.spec.containers[selectedContainer.value].name })});
-  await getLogs(pod.value);
+  selectedContainerName.value = pod.value.spec.containers[index].name
+  router.push({ query: Object.assign({}, route.query, { container: selectedContainerName.value })});
+  store.getLog(props.namespace, props.pod, selectedContainerName.value);
   if(isWatching) {
     closeStream();
     watch();
@@ -183,14 +160,12 @@ function download(filename, data) {
 
 <template>
     <div class="container">
-      <Loader v-if="isLoading" />
-      <div class="alert alert-info" role="alert" v-if="!podLog && !isLoading">
+      <Loader v-if="store.podLoading" />
+      <div class="alert alert-info" role="alert" v-if="!store.podLoading && podLog.length <= 0">
         Pod logs are no longer available
       </div>
     </div>
-
-    <!-- <div v-if="!isLoading && podLog" class="border-top border-dark h-100" style="background-color: black"> -->
-    <div v-if="!isLoading && podLog" class="border-top border-dark h-100" style="background-color: black">
+    <div v-if="!store.podLoading && podLog.length > 0" class="border-top border-dark h-100" style="background-color: black">
       <div>
         <nav class="navbar sticky-top navbar-expand-lg border-bottom border-dark bg" style="background-color: black">
           <div class="container-fluid container">
@@ -199,7 +174,7 @@ function download(filename, data) {
               <ul class="navbar-nav">
                 <li class="nav-item dropdown">
                   <button class="btn btn-outline-primary dropdown-toggle" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                  {{ pod.spec.containers[selectedContainer].name }}
+                  {{ selectedContainerName }}
                   </button>
                   <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
                     <li><h6 class="dropdown-header">containers</h6></li>
@@ -215,7 +190,7 @@ function download(filename, data) {
             </div>
             <div class="navbar-text btn-group d-flex p-2" role="group">
               <button type="button" class="btn btn-outline-primary" @click="download(pod.metadata.name+'.log', podLog)"><font-awesome-icon :icon="['fas', 'download']" /></button>
-              <button type="button" class="btn btn-outline-primary" :disabled="isReloading" @click="reload()"><font-awesome-icon :icon="['fas', 'redo']" /></button>
+              <button type="button" class="btn btn-outline-primary" :disabled="store.logsLoading" @click="reload()"><font-awesome-icon :icon="['fas', 'redo']" /></button>
             </div>
             <div class="navbar-text btn-group d-flex p-2" role="group">
             <button type="button" class="btn btn-outline-primary" @click="gotoTop()"><font-awesome-icon :icon="['fas', 'arrow-up']" /></button>

web2/src/components/Pod.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { useRouter, useRoute, onBeforeRouteLeave } from 'vue-router';
-import { ref, onMounted, onBeforeUnmount } from 'vue';
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
 import { usePodStore } from '@/stores/pod';
 import LogViewer from './LogViewer.vue'
 import ErrorCard from './ErrorCard.vue'
@@ -14,6 +14,9 @@ const isLoading = ref(true);
 const isError = ref(false);
 const error = ref(null);
 
+// await store.getPod(route.params.namespace, route.params.pod);
+const pod = computed(() => store.pod)
+
 onMounted(() => {
   let n = route.params.namespace;
   let p = route.params.pod;

web2/src/services/pods.js

@@ -12,6 +12,11 @@ async function getPodLog(n, p, c) {
     `${apiUrl}/namespaces/${n}/pods/${p}/log?container=${c}&tailLines=1000`
   );
 }
+async function streamPodLog(n, p, c) {
+  return new EventSource(
+    `${apiUrl}/namespaces/${n}/pods/${p}/log?watch=true&container=${c}&tailLines=1000`
+  );
+}
 export default {
   getPod,
   getPods,

web2/src/stores/pod.js

@@ -17,6 +17,9 @@ export const usePodStore = defineStore("pod", () => {
   const logs = ref([]);
   const lineStart = ref(0);
   const maxLogLines = ref(1000);
+  const podError = ref(null);
+  const podLoading = ref(true);
+  const logsLoading = ref(true);
 
   const getPodCount = computed((n) => {
     if (pods.value.has(n)) {
@@ -54,49 +57,58 @@ export const usePodStore = defineStore("pod", () => {
 
   async function getPod(n, p) {
     try {
+      podLoading.value = true;
       const response = await PodService.getPod(n, p);
       if (!response.ok) {
-        throw new Error(`unable to get pod with status ${response.status}`);
+        podError.value = new Error(
+          `unable to get pod with status ${response.status}`
+        );
+        podLoading.value = false;
+        return;
       }
       const data = await response.json();
-      return {
-        data: data,
-        error: null,
-      };
+      pod.value = data;
+      podLoading.value = false;
     } catch (error) {
-      return {
-        data: null,
-        error: error,
-      };
+      console.log("Error", error);
+      podLoading.value = false;
+      podError.value = error;
     }
   }
 
   async function getLog(n, p, c) {
     try {
+      logsLoading.value = true;
       const response = await PodService.getPodLog(n, p, c);
       if (!response.ok) {
-        throw new Error(`unable to get pod log with status ${response.status}`);
+        podError.value = new Error(
+          `unable to fetch logs with status ${response.status}`
+        );
+        logsLoading.value = false;
+        return;
       }
-      const linesRes = await response.text();
-      let lines = linesRes.split(/\r?\n/);
+      const data = await response.text();
+      let lines = data.split(/\r?\n/);
       if (lines[lines.length - 1] == "") {
         lines.splice(lines.length - 1, 1);
       }
-      return {
-        data: lines,
-        error: null,
-      };
+      logs.value = lines;
+      logsLoading.value = false;
     } catch (error) {
-      return {
-        data: null,
-        error: error,
-      };
+      podError.value = error;
+      logsLoading.value = false;
     }
+    // return PodService.getPodLog(n, p, c).then((r) => {
+    //   const data = r.json();
+    //   let lines = data.split(/\r?\n/);
+    //   if (lines[lines.length - 1] == "") {
+    //     lines.splice(lines.length - 1, 1);
+    //   }
+    //   logs.value = lines;
+    // });
   }
   async function streamLogs(n, p, c) {
-    eventSource = new EventSource(
-      `${apiUrl}/namespaces/${n}/pods/${p}/log?watch=true&container=${c}&tailLines=1000`
-    );
+    eventSource = PodService.streamLogs(n, p, c);
     eventSource.onmessage = function (e) {
       if (logs.length >= maxLogLines) {
         logs.splice(0, 1);
@@ -120,5 +132,8 @@ export const usePodStore = defineStore("pod", () => {
     getPod,
     getLog,
     streamLogs,
+    podError,
+    podLoading,
+    logsLoading,
   };
 });