LogView controls

web2/src/components/LogViewer.vue

@@ -2,7 +2,6 @@
 import { ref, onMounted, onUpdated, onBeforeUnmount, defineProps } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { useNamespacesStore } from '@/stores/namespaces';
-import { storeToRefs } from 'pinia';
 import Loader from './Loader.vue'
 
 const props = defineProps({
@@ -35,8 +34,6 @@ const isLargeText = ref(false);
 const isWatching = ref(false);
 const error = ref(null);
 const selectedContainer = ref(0);
-const modifier = ref(0);
-const { getPodCount } = storeToRefs(store);
 const podLog = ref([]);
 
 const pod = ref({
@@ -56,27 +53,7 @@ onMounted(async () => {
     error.value = error
   }
   pod.value = data;
-  // console.log(success, status)
-  // await store.getPod(route.params.namespace, route.params.pod).then(() => {
-  //   console.log("asdasd")
-  //   console.log(store.pod)
-  // })
   getLogs(data);
-  // if(route.query.container) {
-  //   let p = store.pod.value;
-  //   for(let i = 0; p.spec.containers.length > i; i++) {
-  //     if(p.spec.containers[i].name.toLowerCase() == route.query.container.toLowerCase()) {
-  //       selectedContainer = i;
-  //       break;
-  //     } 
-  //   }
-  // }
-  // if(route.query.watch && route.query.watch.toLowerCase() == 'true') {
-  //   toggleWatch();
-  // }
-  // if(route.query.largetext && route.query.largetext.toLowerCase() == "true") {
-  //   toggleLargeText(); 
-  // }
 })
 
 onBeforeUnmount(() => {
@@ -88,7 +65,7 @@ onUpdated(() => {
 })
 
 function reload() {
-  closeStream()
+  // closeStream()
   getLogs(pod.value)
   // store.dispatch('resetLineStart');
   gotoBottom();
@@ -104,7 +81,8 @@ async function getLogs(p) {
     error.value = error;
   }
   podLog.value = data
-  console.log(podLog.value)
+  isLoading.value = false;
+  isReloading.value = false;
 }
 
 function watch() {
@@ -203,8 +181,6 @@ function download(filename, data) {
 </script>
 
 <template>
-  <div class="h-100">
-
     <div class="container">
       <Loader v-if="isLoading" />
       <div class="alert alert-info" role="alert" v-if="!podLog && !isLoading">
@@ -213,37 +189,39 @@ function download(filename, data) {
     </div>
 
     <!-- <div v-if="!isLoading && podLog" class="border-top border-dark h-100" style="background-color: black"> -->
-    <div 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>
-        <nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
-          <div class="container-fluid">
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
-              <span class="navbar-toggler-icon"></span>
-            </button>
-            <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
+        <nav class="navbar sticky-top navbar-expand-lg border-bottom border-dark bg" style="background-color: black">
+          <div class="container-fluid container">
+
+            <div class="flex">
               <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">
-                    Dropdown
+                  {{ pod.spec.containers[selectedContainer].name }}
                   </button>
                   <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
                     <li><h6 class="dropdown-header">containers</h6></li>
-                    <li v-for="(container, index) in pod.spec.containers" :key="index" v-on:click="setSelectedContainer(index)"><a class="dropdown-item">{{container.name}}</a></li>
+                  <li v-for="(container, index) in pod.spec.containers" :class="{active: index == selectedContainer}" :key="index" v-on:click="setSelectedContainer(index)"><a class="dropdown-item">{{container.name}}</a></li>
                   </ul>
                 </li>
               </ul>
             </div>
-            <div class="btn-group" role="group">
-              <button type="button" class="btn btn-outline-primary">Reload</button>
-              <button type="button" class="btn btn-outline-primary">Download</button>
+              <span class="navbar-text log-length d-flex p-2">{{ podLog.length }}/{{ store.maxLogLines }}</span>
+            <div class="input-group d-flex p-2">
+              <span class="input-group-text" id="basic-addon1"><font-awesome-icon :icon="['fas', 'magnifying-glass']" /></span>
+              <input type="text" class="form-control log-search-field" placeholder="Search ..." aria-label="Search">
             </div>
-            <div class="btn-group" role="group">
-              <button type="button" class="btn btn-outline-primary">Top</button>
-              <button type="button" class="btn btn-outline-primary">Bottom</button>
-              <button type="button" class="btn btn-outline-primary">Text Size</button>
-              <button type="button" class="btn btn-outline-primary">Watch</button>
+            <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>
+            </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>
+              <button type="button" class="btn btn-outline-primary" @click="gotoBottom()"><font-awesome-icon :icon="['fas', 'arrow-down']" /></button>
+              <button type="button" class="btn" :class="{'btn-outline-primary': !isLargeText, 'btn-primary': isLargeText}" @click="toggleLargeText()"><font-awesome-icon :icon="['fas', 'text-height']" /></button>
+              <button type="button" class="btn" :class="{'btn-outline-primary': !isWatching, 'btn-primary': isWatching}" @click="toggleWatch()"><font-awesome-icon :icon="['fas', 'eye']" /></button>
             </div>
-            <span class="navbar-text log-length">{{ podLog.length }}/{{ store.maxLogLines }}</span>
           </div>
         </nav>
 
@@ -262,10 +240,16 @@ function download(filename, data) {
         </div>
       </div>
     </div>
-  </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
+@import "bootstrap/scss/_functions.scss";
+@import "bootstrap/scss/_variables.scss";
+@import "bootstrap/scss/_mixins.scss";
+
+.dropdown-toggle {
+  font-family: $font-family-code;
+}
 .log-view {
   background-color: black;
   padding-top: 16px;
@@ -309,6 +293,9 @@ function download(filename, data) {
   font-family: Menlo,Monaco,Consolas,monospace;
   color: rgb(108, 117, 125);
 }
+.log-search-field::placeholder {
+  color: rgb(108, 117, 125);
+}
 </style>
 
 

web2/src/components/Nav.vue

@@ -46,21 +46,21 @@ function items() {
 <template>
   <div class="container">
     <nav class="navbar navbar-expand-lg">
-        <div class="container-fluid ">
-          <div class="col logo">logga</div>
-          <nav style="--bs-breadcrumb-divider: '/';" aria-label="breadcrumb">
-            <ol class="breadcrumb">
-              <li v-for="(item, index) in items()" class="breadcrumb-item" :class="{active: index == items().length-1}">
-                <router-link v-if="index <= items().length-2 " :to="item.to">{{item.text}}</router-link>
-              <span v-if="index == items().length-1">{{ item.text }}</span>
-              </li>
-            </ol>
-          </nav>
-          <div class="align-items-center">
-            <span class="app-ver">v1.0.0</span>
-              <a href="https://github.com/amimof/logga" class="github-link" target="_blank"><font-awesome-icon :icon="['fab', 'github']" class="icon"/></a>
-          </div>
+      <div class="container-fluid ">
+        <div class="col logo">logga</div>
+        <nav style="--bs-breadcrumb-divider: '/';" aria-label="breadcrumb">
+          <ol class="breadcrumb">
+            <li v-for="(item, index) in items()" class="breadcrumb-item" :class="{active: index == items().length-1}">
+              <router-link v-if="index <= items().length-2 " :to="item.to">{{item.text}}</router-link>
+            <span v-if="index == items().length-1">{{ item.text }}</span>
+            </li>
+          </ol>
+        </nav>
+        <div class="align-items-center">
+          <span class="app-ver">v1.0.0</span>
+          <a href="https://github.com/amimof/logga" class="github-link" target="_blank"><font-awesome-icon :icon="['fab', 'github']" class="icon"/></a>
         </div>
+      </div>
     </nav>
   </div>
 

web2/src/main.js

@@ -1,32 +1,54 @@
+// Vue app
 import { createApp } from "vue";
 import { createPinia } from "pinia";
 import App from "./App.vue";
 import router from "./router";
+const app = createApp(App);
+
+// Moment
 import moment from "moment";
+app.config.globalProperties.$filters = {
+  timeAgo(date) {
+    return moment(date).fromNow();
+  },
+};
 
-// import "bootstrap/dist/css/bootstrap.min.css";
-// import "bootstrap/scss/bootstrap.scss";
+// Bootstrap 5
 import "bootstrap/dist/js/bootstrap.js";
 import "./styles/main.scss";
 
+// Fontawesoem
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { faXmarkCircle } from "@fortawesome/free-regular-svg-icons";
 import {
   faArrowUpWideShort,
   faArrowDownWideShort,
+  faArrowUp,
+  faArrowDown,
+  faTextHeight,
+  faEye,
+  faDownload,
+  faRedo,
+  faMagnifyingGlass,
 } from "@fortawesome/free-solid-svg-icons";
 import { faGithub } from "@fortawesome/free-brands-svg-icons";
-const app = createApp(App);
 
-app.config.globalProperties.$filters = {
-  timeAgo(date) {
-    return moment(date).fromNow();
-  },
-};
-
-library.add(faXmarkCircle, faArrowUpWideShort, faArrowDownWideShort, faGithub);
+library.add(
+  faXmarkCircle,
+  faArrowUpWideShort,
+  faArrowDownWideShort,
+  faGithub,
+  faArrowUp,
+  faArrowDown,
+  faTextHeight,
+  faEye,
+  faDownload,
+  faRedo,
+  faMagnifyingGlass
+);
 
+// Init app
 app.component("font-awesome-icon", FontAwesomeIcon);
 app.use(createPinia());
 app.use(router);