fix: properly update servers menu item when the context is changed

Also remove unnecessary complexity from the Overview page which was
copy-pasted from the Charts component.
Keep track only of the last point and don't support several series. Also
limit the amount of points we request to the minimum value.

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

frontend/src/components/common/MenuItem/TMenuItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <router-link v-if="isItemVisible" :to="route" active-class="item__active">
+  <router-link :to="route" active-class="item__active">
     <div class="item">
       <t-icon class="item__icon" :icon="icon" />
       <p class="item__name">{{ name }}</p>
@@ -25,7 +25,6 @@ export default {
       type: String,
       required: true,
     },
-    isItemVisible: Boolean,
   },
 };
 </script>

frontend/src/components/views/SideBar/components/TSideBarList.vue

@@ -2,112 +2,76 @@
   <nav class="nav">
     <div class="nav__list">
       <t-menu-item
-        v-for="(item, idx) of menuItems"
-        :key="idx"
-        :route="item.route"
-        :name="item.name"
-        :icon="item.icon"
-        :isActive="item.active"
-        :isItemVisible="isServersItemVisible(item.name)"
-      />
+         v-for="item of menuItems"
+         :key="item.name"
+         :route="item.route"
+         :name="item.name"
+         :icon="item.icon"
+         :isActive="item.active"
+       />
     </div>
   </nav>
 </template>
 
 <script lang="ts">
-import { useRoute } from "vue-router";
-import { computed, onMounted, ref, watch } from "@vue/runtime-core";
 import TMenuItem from "@/components/common/MenuItem/TMenuItem.vue";
-import { getContext } from "@/context";
-import { checkIsSidero } from "@/methods";
+
+import { useRoute } from "vue-router";
+import { computed, watch } from "@vue/runtime-core";
+import { context as ctx, getContext } from "@/context";
+
 export default {
   components: { TMenuItem },
   setup() {
     const route = useRoute();
-    let context = getContext();
+    const context = getContext();
+    const getRoute = (name: string, path: string) => {
+      return route.query.cluster !== undefined ? {
+        name: name,
+        query: {
+          cluster: route.query.cluster,
+          namespace: route.query.namespace,
+          uid: route.query.uid,
+        },
+      } : path
+    }
+
     const menuItems = computed(() => {
-      return [
+      const res = [
         {
           name: "Overview",
-          route:
-            route.query.cluster !== undefined
-              ? {
-                  name: "OverviewPage",
-                  query: {
-                    cluster: route.query.cluster,
-                    namespace: route.query.namespace,
-                    uid: route.query.uid,
-                  },
-                }
-              : "/overview",
+          route: getRoute("OverviewPage", "/overview"),
           icon: "overview",
         },
         {
           name: "Nodes",
-          route:
-            route.query.cluster !== undefined
-              ? {
-                  name: "Nodes",
-                  query: {
-                    cluster: route.query.cluster,
-                    namespace: route.query.namespace,
-                    uid: route.query.uid,
-                  },
-                }
-              : "/",
+          route: getRoute("Nodes", "/"),
           icon: "nodes",
         },
         {
           name: "Pods",
-          route:
-            route.query.cluster !== undefined
-              ? {
-                  name: "Pods",
-                  query: {
-                    cluster: route.query.cluster,
-                    namespace: route.query.namespace,
-                    uid: route.query.uid,
-                  },
-                }
-              : "/pods",
+          route: getRoute("Pods", "/pods"),
           icon: "podes",
         },
-        {
+      ];
+
+      if (ctx.capabilities.sidero.value) {
+        res.push({
           name: "Servers",
-          route:
-            route.query.cluster !== undefined
-              ? {
-                  name: "Servers",
-                  query: {
-                    cluster: route.query.cluster,
-                    namespace: route.query.namespace,
-                    uid: route.query.uid,
-                  },
-                }
-              : "/servers",
+          route: getRoute("Servers", "/servers"),
           icon: "cloud-connection",
-        },
-        {
-          name: "Upgrade Kubernetes",
-          route:
-            route.query.cluster !== undefined
-              ? {
-                  name: "Upgrade Kubernetes",
-                  query: {
-                    cluster: route.query.cluster,
-                    namespace: route.query.namespace,
-                    uid: route.query.uid,
-                  },
-                }
-              : "/upgrade",
-          icon: "kubernetes",
-        },
-      ];
+        });
+      }
+
+      res.push({
+        name: "Upgrade Kubernetes",
+        route: getRoute("Upgrade Kubernetes", "/upgrade"),
+        icon: "kubernetes",
+      });
+
+      return res;
     });
-    let isSidero: any = ref(null);
-    onMounted(() =>
-      checkIsSidero(context).then((data) => (isSidero.value = data))
-    );
+
     watch(
       () => route.query,
       () => {
@@ -118,18 +82,12 @@ export default {
             uid: String(route?.query?.uid),
           };
         } else context.cluster = undefined;
-        checkIsSidero(context).then((data) => (isSidero.value = data));
       }
     );
-    const isServersItemVisible = (name) => {
-      if (name == "Servers" && !isSidero.value) return false;
-      return true;
-    };
+
     return {
       route,
       menuItems,
-      isSidero,
-      isServersItemVisible,
     };
   },
 };

frontend/src/methods/index.ts

@@ -126,28 +126,3 @@ export const getUpgradeID = async () => {
     ? ctx.cluster.uid
     : null || contextName || response?.currentContext;
 }
-
-export const checkIsSidero = async (context) => {
-
-  const checkCRD = async (id: string) => {
-    try {
-      await ResourceService.Get({
-        type: kubernetes.crd,
-        id: id,
-      }, {
-        context:context
-      });
-
-      return true;
-    } catch(e:any) {
-      if(e.code !== Code.NOT_FOUND)
-        throw e;
-
-      return false;
-    }
-  }
-  const sidero = checkCRD("servers.metal.sidero.dev");
-  const hasSidero = await sidero;
-
-  return hasSidero;
-}

frontend/src/views/Overview/Overview.vue

@@ -28,6 +28,7 @@ import { ManagementService } from "@/api/grpc";
 import { onMounted } from "@vue/runtime-core";
 import TWatch from "@/components/common/Watch/TWatch.vue";
 import { getUpgradeID } from "@/methods";
+
 export default {
   components: {
     TOverviewContent,

frontend/src/views/Overview/components/TOverviewContent.vue

@@ -55,7 +55,7 @@
             :resource="{
               type: talos.cpu,
               namespace: talos.perfNamespace,
-              tail_events: 25,
+              tail_events: 2,
             }"
             :context="context"
             @cpu="(data) => getDataFromNode(data)"
@@ -309,6 +309,7 @@ export default {
         return b.cpu - a.cpu;
       });
     };
+
     const getDataFromNode = (data) => {
       nodesItems.value![data.index].cpu = +data.cpu;
     };

frontend/src/views/Overview/components/TOverviewNodesUsage.vue

@@ -13,9 +13,9 @@
 import { computed, ref, toRefs } from "@vue/reactivity";
 import { getField } from "@/methods";
 import { getContext, context as ctx } from "@/context";
-import Watch from "@/api/watch";
 import { Kind } from "@/api/socket/message";
-import { DateTime } from "luxon";
+import Watch from "@/api/watch";
+
 export default {
   props: {
     item: Object,
@@ -31,12 +31,7 @@ export default {
   emits: ["cpu"],
   setup(props, componentContext) {
     const { item, index } = toRefs(props);
-    const series: any = ref([]);
-    const seriesMap: any = {};
-    let points: any = {};
-    let flush: any = {};
-
-    const numPoints = ref(props["resource"]["tail_events"] || 25);
+    const point = ref({ user: 0, system: 0 });
 
     const ip = computed(() => {
       const addresses: any = getField(item.value, "status", "addresses");
@@ -122,62 +117,22 @@ export default {
         return;
       }
 
-      const data = handleCPU(spec["new"]["spec"], spec["old"]["spec"]);
-      for (const key in data) {
-        if (!(key in seriesMap)) {
-          series.value.push({
-            name: key,
-            data: [],
-          });
-
-          seriesMap[key] = {
-            index: series.value.length - 1,
-            version: 0,
-          };
-        }
-
-        const version = spec["new"]["metadata"]["version"];
-        const meta = seriesMap[key];
-        if (version <= meta.version) {
-          continue;
-        }
-
-        let point = data[key];
-        const updated = spec["new"]["metadata"]["updated"];
-        if (updated) {
-          point = [DateTime.fromISO(updated).toMillis(), point];
-        }
-
-        clearTimeout(flush[meta.index]);
-
-        if (!points[meta.index]) points[meta.index] = [];
-
-        points[meta.index].push(point);
-        meta.version = version;
-
-        flush[meta.index] = setTimeout(() => {
-          let dst = series.value[meta.index].data;
-
-          dst = dst.concat(points[meta.index]);
-
-          if (dst.length >= numPoints.value) {
-            dst.splice(0, dst.length - numPoints.value + 1);
-          }
-
-          series.value[meta.index].data = dst;
-          points[meta.index] = [];
-        }, 50);
-      }
+      point.value = handleCPU(spec["new"]["spec"], spec["old"]["spec"]);
     };
 
     const w = new Watch(ctx.api, null, handlePoint);
 
     w.setup({ ...props, context }, componentContext);
 
     const currentCPUUsage = computed(() => {
-      const data = series.value[1]?.data?.at(-1)?.at(1).toFixed(2) ?? 0;
-      componentContext.emit("cpu", { cpu: data, index: index.value });
-      return data;
+      if (!point.value) {
+        return 0;
+      }
+
+      const total = point.value.user + point.value.system;
+      componentContext.emit("cpu", { cpu: total.toFixed(2), index: index.value });
+
+      return total.toFixed(2);
     });
 
     return {