fix: properly calculate servers capacity

Before `getAllocated` was returning just the count of servers, use
filter to count the amount of the servers `inUse`.
Also fix wording on the Kubernetes Upgrades page, when the list is
empty.

Signed-off-by: Artem Chernyshev <artem.chernyshev@talos-systems.com>

frontend/src/App.vue

@@ -45,7 +45,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 <script lang="ts">
 import { ref, onMounted, watch } from "vue";
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
 // import Shell from "./components/Shell.vue";
 // import SidebarChangeContext from "./views/SidebarChangeContext.vue";
 // import Sidebar from "./views/Sidebar.vue";
@@ -78,6 +78,7 @@ export default {
     const currentContext = ref("");
     const selectContext = ref(false);
     const router = useRouter();
+    const route = useRoute();
 
     const updateTheme = (mode: string) => {
       dark.value = isDark(mode);
@@ -99,7 +100,7 @@ export default {
 
       connected.value = true;
 
-      await detectCapabilities();
+      await detectCapabilities(route);
     });
 
     updateTheme(theme.value);
@@ -108,8 +109,14 @@ export default {
       updateTheme(val);
     });
 
+    watch(() => route.query, (val, old) => {
+      if (val.cluster != old.cluster) {
+        detectCapabilities(route);
+      }
+    })
+
     watch(context.current, (val, old) => {
-      if (val != old) detectCapabilities();
+      if (val != old) detectCapabilities(route);
     });
 
     watch(systemTheme, (val) => {

frontend/src/context.ts

@@ -29,8 +29,8 @@ export function changeContext(c: Object) {
   context.current.value = c;
 }
 
-export function getContext() {
-  const route = useRoute();
+export function getContext(route: any = null) {
+  route = route || useRoute();
 
   const name = contextName();
 
@@ -56,7 +56,7 @@ export function contextName(): string | null {
   return context.current.value ? context.current.value.name : null;
 }
 
-export async function detectCapabilities() {
+export async function detectCapabilities(route) {
   context.capabilities.capi.value = false;
   context.capabilities.sidero.value = false;
   context.capabilities.packet.value = false;
@@ -67,6 +67,8 @@ export async function detectCapabilities() {
       await ResourceService.Get({
         type: kubernetes.crd,
         id: id,
+      }, {
+        context: getContext(route),
       });
 
       return true;

frontend/src/views/Kubernetes/TKubernetesContent.vue

@@ -32,7 +32,7 @@
         <div class="info__wrapper">
           <t-icon class="info__icon" icon="upgrade-empty-state" />
           <h3 class="info__title">
-            You have not yet updated the Kubernetes for this cluster
+            No kubernetes upgrades have yet been done
           </h3>
           <p class="info__subtitle">
             After the update, information about it will appear here

frontend/src/views/Servers/components/TServersContent.vue

@@ -79,10 +79,6 @@ export default {
       inputValue.value = data;
     };
 
-    const getAllocated = () => {
-      return items?.value?.length;
-    };
-
     const filteredItems = computed(() => {
       const arr =
         serversFilterOption.value !== TServersServersFilterOptions.ALL
@@ -109,21 +105,25 @@ export default {
             return elem?.metadata?.uid?.includes(inputValue.value);
           });
     });
+
+    const allocated = computed(() => {
+      return (items?.value || []).filter((elem) => elem?.status?.inUse).length;
+    });
+
     return {
       setServersFilterOption,
       setStatusesFilterOption,
       setInputValue,
       filteredItems,
       TServersServersFilterOptions,
       TServersStatusesFilterOptions,
-      allocated: computed(() => {
-        if (items.value.length === 0) return null;
-
-        return getAllocated();
-      }),
+      allocated: allocated,
       capacity: computed(() => {
-        if (items.value.length === 0) return null;
-        return 100 - (getAllocated() / items.value.length) * 100 + "%";
+        if (items?.value?.length === 0) {
+          return null;
+        }
+
+        return 100 - (allocated.value / items.value.length) * 100 + "%";
       }),
     };
   },