List namespaces, display Pod count

web2/package.json

@@ -10,9 +10,15 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-regular-svg-icons": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/vue-fontawesome": "^3.0.6",
     "axios": "^1.6.8",
     "bootstrap": "^5.3.3",
     "bootstrap-vue": "^2.23.1",
+    "lodash": "^4.17.21",
+    "moment": "^2.30.1",
     "pinia": "^2.1.7",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0"

web2/src/components/Namespaces.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { ref, onMounted } from 'vue';
 import { useNamespacesStore } from '@/stores/namespaces';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import Loader from './Loader.vue'
 import ErrorCard from './ErrorCard.vue'
 import NamespacesList from './NamespacesList.vue'
@@ -19,6 +20,8 @@ const isError = ref(false)
 const error = ref(null)
 const activeNamespace = ref(0)
 
+const searchString = ref('')
+
 onMounted(() => {
   store.getNamespaces()
 })
@@ -68,56 +71,58 @@ function isSortDown() {
    return store.nsSort == 'asc' ? true : false
 }
 
-function items() {
-  let result = store.filterNamespaces(store.nsSearchString);
-  if(isSortDown()) {
-    result = store.sortNamespaces('asc')
+function filter() {
+  store.filterNamespaces(searchString.value)
+}
+
+function clear() {
+  searchString.value = ""
+  store.filterNamespaces(searchString.value)
+}
+
+function sort() {
+  if (store.nsSort == 'asc') {
+    store.sortNamespaces('asc')
   } else {
-    result = store.sortNamespaces('desc')
+    store.sortNamespaces('desc')
   }
-  return result
+    
 }
+
 </script>
 
 <template>
   <div class="container">
-    {{ store.namespaces }}
     <div class="input-group mb-3">
-      <span class="input-group-text" id="basic-addon1">@</span>
-      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
+      <span class="input-group-text" id="ns-search">{{ store.filteredNamespaces.length }}</span>
+      <input type="text" class="form-control" v-model="searchString" placeholder="Search Namespace" @keyup="filter" aria-label="Namespace" aria-describedby="ns-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>
-    <b-input-group :prepend="items.length.toString()">
-      <b-form-input v-model="str" placeholder="Search Namespace" @keyup.enter="filter"></b-form-input>
-      <b-input-group-append>
-        <b-button v-on:click="str = ''" variant="outline-secondary">
-          <i class="fas fa-times"></i>
-        </b-button>
-        <b-button v-on:click="isSortDown = !isSortDown" variant="outline-secondary">
-          <i class="fas fa-sort-amount-down" v-if="isSortDown"></i>
-          <i class="fas fa-sort-amount-up" v-if="!isSortDown"></i>
-        </b-button>
-      </b-input-group-append>
-    </b-input-group>
-    <!---->
-    <!-- <p/> -->
-    <!---->
-    <!-- <Loader v-if="isLoading" /> -->
-    <!---->
-    <!-- <h5 v-if="items.length == 0 && !isLoading && !isError">No namespaces found</h5> -->
-    <!---->
-    <!-- <div class="row" v-if="!isLoading && !isError"> -->
-    <!--   <div class="col" v-if="items.length > 0"> -->
-    <!--     <h6 v-if="recentNamespaces.length > 0">All</h6> -->
-    <!--     <NamespacesList :items="items" :active="activeNamespace"/> -->
-    <!--   </div> -->
-    <!--   <div class="col-4" v-if="recentNamespaces.length > 0"> -->
-    <!--     <h6>Recent</h6> -->
-    <!--     <RecentNamespacesList class="col"/> -->
-    <!--   </div> -->
-    <!-- </div> -->
-    <!---->
-    <!-- <ErrorCard title="Unable to load namespaces" :error="error" v-if="isError"/> -->
-    <!---->
+
+    <Loader v-if="isLoading" />
+
+    <h5 v-if="store.namespaces.length == 0 && !isLoading && !isError">No namespaces found</h5>
+
+    <div class="row" v-if="isLoading && !isError">
+      <div class="col" v-if="store.namespaces.length > 0">
+        <h6 v-if="store.recentNamespaces.length > 0">All</h6>
+        <NamespacesList :items="store.namespaces" :active="activeNamespace"/>
+      </div>
+      <div class="col-4" v-if="store.recentNamespaces.length > 0">
+        <h6>Recent</h6>
+        <RecentNamespacesList class="col"/>
+      </div>
+    </div>
+
+    <ErrorCard title="Unable to load namespaces" :error="error" v-if="isError"/>
+
   </div>
 </template>
 

web2/src/components/NamespacesList.vue

@@ -1,44 +1,61 @@
-<script>
+<script setup>
+import { ref, onMounted } from 'vue';
 import PodCount from './PodCount.vue'
-export default {
-  name: 'NamespacesList',
-  components: {
-    PodCount
-  },
-  props: {
-    items: {
-      type: Array,
-      required: true,
-      default: () => {
-        return [];
-      }
-    },
-    active: {
-      type: Number,
-      default: () => {
-        return 0
-      }
-    }
+import { useNamespacesStore } from '@/stores/namespaces';
+
+const store = useNamespacesStore();
+const active = ref(0);
+
+onMounted(() => {
+  store.getNamespaces();
+});
+
+// export default {
+//   name: 'NamespacesList',
+//   components: {
+//     PodCount
+//   },
+//   props: {
+//     items: {
+//       type: Array,
+//       required: true,
+//       default: () => {
+//         return [];
+//       }
+//     },
+//     active: {
+//       type: Number,
+//       default: () => {
+//         return 0
+//       }
+//     }
+//   }
+// }
+
+function getActive(index) {
+  if(active.value == index) {
+    return 'active'
   }
+  return ''
 }
+
 </script>
 
 <template>
 <div class="h-100">
-  <b-list-group>
-    <b-list-group-item 
-      v-for="(item, index) in items" :key="index"
-      v-bind:href="'#/namespaces/'+item.metadata.name+'/pods'" 
-      :active="active == index">
-      <div class="d-flex justify-content-between align-items-center">
-        <span class="mb-1">{{ item.metadata.name }}</span>
-        <small><span class="namespace-icons"><i class="far fa-clock"></i> {{ item.metadata.creationTimestamp | moment("from", "now", true) }}</span> <span class="namespace-icons"><PodCount :namespace="item.metadata.name"/></span></small>
-      </div>
-    </b-list-group-item>
-  </b-list-group>
+  <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">
+          <span class="mb-1">{{ item.metadata.name }}</span>
+          <small><span class="namespace-icons"><i class="far fa-clock"></i> {{  $filters.timeAgo(item.metadata.creationTimestamp) }}</span> <span class="namespace-icons"><PodCount :namespace="item.metadata.name"/></span></small>
+        </div>
+
+      </li>
+  </ul>
   </div>
 </template>
 
+
 <style>
 .namespace-icons {
   padding-left: 8px;

web2/src/components/PodCount.vue

@@ -1,13 +1,20 @@
 <script setup>
 
+import { onMounted } from 'vue';
 import { useNamespacesStore } from '@/stores/namespaces';
 
 const store = useNamespacesStore()
+const props = defineProps(['namespace'])
+
+onMounted(() => {
+  store.getPods(props.namespace);
+})
 
 </script>
 
 <template>
-  <span v-if="isLoaded"><i class="fas fa-hashtag"></i> {{ store.pods.length }}</span>
+  {{ store.pods.length }}
+  <span><i class="fas fa-hashtag"></i> {{ store.getPodCount(namespace) }}</span>
 </template>
 
 <style scoped>

web2/src/main.js

@@ -3,13 +3,31 @@ import { createPinia } from "pinia";
 import App from "./App.vue";
 import router from "./router";
 
-// import BootstrapVue from "bootstrap-vue";
+import moment from "moment";
+
 import "bootstrap/dist/css/bootstrap.min.css";
 import "bootstrap";
 import "./styles/main.scss";
 
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { faXmarkCircle } from "@fortawesome/free-regular-svg-icons";
+import {
+  faArrowUpWideShort,
+  faArrowDownWideShort,
+} from "@fortawesome/free-solid-svg-icons";
+
 const app = createApp(App);
 
+app.config.globalProperties.$filters = {
+  timeAgo(date) {
+    return moment(date).fromNow();
+  },
+};
+
+library.add(faXmarkCircle, faArrowUpWideShort, faArrowDownWideShort);
+
+app.component("font-awesome-icon", FontAwesomeIcon);
 app.use(createPinia());
 app.use(router);
 // app.use(BootstrapVue);