feat: fixed nav, reload nav on context switch, fixed shell

src/components/Navigation.vue

@@ -13,45 +13,45 @@ const { context } = injectStrict(KubeContextStateKey);
 
 interface NavigationGroup {
   title: string;
-  coreResources: string[];
+  coreResourceKinds: string[];
   apiGroupResources: string[];
 }
 
 const navigationGroups: NavigationGroup[] = [
   {
     title: "Workloads",
-    coreResources: ["pods"],
+    coreResourceKinds: ["Pod"],
     apiGroupResources: ["apps", "batch"],
   },
   {
     title: "Config",
-    coreResources: ["configmaps", "resourcequotas", "secrets"],
-    apiGroupResources: [""],
+    coreResourceKinds: ["ConfigMap", "ResourceQuota", "Secret"],
+    apiGroupResources: [],
   },
   {
     title: "Network",
-    coreResources: ["endpoints", "services", "endpointslices"],
-    apiGroupResources: ["networking.k8s.io"],
+    coreResourceKinds: ["Endpoints", "Service"],
+    apiGroupResources: ["networking.*"],
   },
   {
     title: "Storage",
-    coreResources: ["persistentvolumeclaims"],
-    apiGroupResources: ["storage.k8s.io"],
+    coreResourceKinds: ["PersistentVolumeClaim"],
+    apiGroupResources: ["storage.*"],
   },
   {
     title: "Scaling",
-    coreResources: [],
-    apiGroupResources: ["autoscaling"],
+    coreResourceKinds: [],
+    apiGroupResources: ["autoscaling.*"],
   },
   {
     title: "Policies",
-    coreResources: ["poddisruptionbudgets", "limitranges"],
-    apiGroupResources: [],
+    coreResourceKinds: ["LimitRange"],
+    apiGroupResources: ["policy.*", "policies.*"],
   },
   {
     title: "Access Control",
-    coreResources: ["serviceaccounts"],
-    apiGroupResources: ["rbac.authorization.k8s.io"],
+    coreResourceKinds: ["ServiceAccount", "Role", "RoleBinding"],
+    apiGroupResources: [".*authorization.*"],
   },
 ];
 
@@ -60,22 +60,48 @@ const clusterResources = ref<Map<string, V1APIResource[]>>(new Map());
 const getCoreResourcesForGroup = (group: NavigationGroup) => {
   return Array.from(clusterResources.value.values())
     .flat()
-    .filter((resource) => group.coreResources.includes(resource.name));
+    .filter((resource) => group.coreResourceKinds.includes(resource.kind))
+    .filter((resource) => !resource.name.includes("/"));
 };
 
 const getApiResourcesForGroup = (group: NavigationGroup) => {
   return Array.from(clusterResources.value.keys())
-    .filter((key) => group.apiGroupResources.includes(key))
+    .filter((key) => {
+      return group.apiGroupResources.some((group) => {
+        return key.match(group);
+      });
+    })
+    .map((key) => clusterResources.value.get(key)!)
+    .flat()
+    .filter((resource) => !resource.name.includes("/"));
+};
+
+const getOtherResources = () => {
+  return Array.from(clusterResources.value.keys())
+    .filter((key) => {
+      return !navigationGroups.some((group) => {
+        return group.apiGroupResources.some((group) => {
+          return key.match(group);
+        });
+      });
+    })
     .map((key) => clusterResources.value.get(key)!)
     .flat()
-    .filter((resource) => resource.singularName !== "");
+    .filter((resource) => !resource.name.includes("/"))
+    .filter(
+      (resource) =>
+        !navigationGroups.some((group) => {
+          return group.coreResourceKinds.includes(resource.kind);
+        })
+    );
 };
 
 const formatResourceKind = (kind: string) => {
   return pluralize(kind);
 };
 
-onMounted(() => {
+const fetchResources = () => {
+  clusterResources.value.clear();
   Kubernetes.getCoreApiVersions(context.value).then((results) => {
     results.forEach((version) => {
       Kubernetes.getCoreApiResources(context.value, version).then(
@@ -110,6 +136,14 @@ onMounted(() => {
     .catch((error) => {
       console.error(error);
     });
+};
+
+onMounted(() => {
+  fetchResources();
+});
+
+watch(context, () => {
+  fetchResources();
 });
 </script>
 
@@ -120,57 +154,6 @@ onMounted(() => {
       <ContextSwitcher class="mt-[30px]" />
       <div class="flex w-full flex-grow flex-shrink overflow-hidden">
         <ScrollArea class="w-full mt-0 mb-0">
-          <!-- <NavigationGroup title="Workloads">
-            <NavigationItem icon="pods" title="Pods" :to="{ name: 'Pods' }" />
-            <NavigationItem
-              icon="deployments"
-              title="Deployments"
-              :to="{ name: 'Deployments' }"
-            />
-            <NavigationItem icon="jobs" title="Jobs" :to="{ name: 'Jobs' }" />
-            <NavigationItem
-              icon="cronjobs"
-              title="Cron Jobs"
-              :to="{ name: 'CronJobs' }"
-            />
-          </NavigationGroup>
-          <NavigationGroup title="Configuration">
-            <NavigationItem
-              icon="configmaps"
-              title="Config Maps"
-              :to="{ name: 'ConfigMaps' }"
-            />
-            <NavigationItem
-              icon="secrets"
-              title="Secrets"
-              :to="{ name: 'Secrets' }"
-            />
-          </NavigationGroup>
-          <NavigationGroup title="Network">
-            <NavigationItem
-              icon="services"
-              title="Services"
-              :to="{ name: 'Services' }"
-            />
-            <NavigationItem
-              icon="virtualservices"
-              title="Virtual Services"
-              :to="{ name: 'VirtualServices' }"
-            />
-            <NavigationItem
-              icon="ingresses"
-              title="Ingresses"
-              :to="{ name: 'Ingresses' }"
-            />
-          </NavigationGroup>
-          <NavigationGroup title="Storage">
-            <NavigationItem
-              icon="persistentvolumeclaims"
-              title="Persistent Volume Claims"
-              :to="{ name: 'PersistentVolumeClaims' }"
-            />
-          </NavigationGroup>
-          <NavigationGroup title="Custom Resources"> </NavigationGroup> -->
           <NavigationGroup
             v-for="group in navigationGroups"
             :key="group.title"
@@ -197,6 +180,18 @@ onMounted(() => {
               }"
             />
           </NavigationGroup>
+          <NavigationGroup title="Other">
+            <NavigationItem
+              icon="pods"
+              :title="formatResourceKind(resource.kind)"
+              v-for="resource in getOtherResources()"
+              :key="resource.name"
+              :to="{
+                path: `/${resource.name}`,
+                query: { resource: resource.name },
+              }"
+            />
+          </NavigationGroup>
         </ScrollArea>
       </div>
       <div class="flex-shrink-0 border-t -ml-2 pl-2 pt-2 mb-0">

src/components/NavigationGroup.vue

@@ -1,9 +1,29 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import ArrowDownIcon from "@/assets/icons/arrow_down.svg";
-defineProps<{ title: string }>();
+import { SettingsContextStateKey } from "@/providers/SettingsContextProvider";
+import { injectStrict } from "@/lib/utils";
 
-const collapsed = ref(false);
+const props = defineProps<{ title: string }>();
+
+const { settings } = injectStrict(SettingsContextStateKey);
+const collapsed = ref(
+  settings.value.collapsedNavigationGroups.includes(props.title)
+);
+
+watch(
+  () => collapsed.value,
+  (collapsed) => {
+    if (collapsed) {
+      settings.value.collapsedNavigationGroups.push(props.title);
+    } else {
+      settings.value.collapsedNavigationGroups =
+        settings.value.collapsedNavigationGroups.filter(
+          (title) => title !== props.title
+        );
+    }
+  }
+);
 </script>
 <template>
   <div>

src/providers/SettingsContextProvider.ts

@@ -18,6 +18,7 @@ export interface SettingsContextState {
     tabProvider: {
       height: number;
     };
+    collapsedNavigationGroups: string[];
   };
 }
 
@@ -32,6 +33,7 @@ export default {
         tabProvider: {
           height: 50,
         },
+        collapsedNavigationGroups: [],
       },
     });
     provide(SettingsContextStateKey, toRefs(state));

src/views/GenericResource.vue

@@ -13,6 +13,14 @@ const { context, namespace } = injectStrict(KubeContextStateKey);
 
 const resourceData = ref<any>([]);
 
+import { RowAction, getDefaultActions } from "@/components/tables/types";
+import { TabProviderAddTabKey } from "@/providers/TabProvider";
+const addTab = injectStrict(TabProviderAddTabKey);
+
+const rowActions: RowAction<any>[] = [
+  ...getDefaultActions<any>(addTab, context.value),
+];
+
 onBeforeRouteUpdate((to, from, next) => {
   killWatchCommand();
   initiateWatchCommand(to.query.resource as string);
@@ -68,14 +76,12 @@ const initiateWatchCommand = (resource: string) => {
   command.spawn().then((child) => {
     process = child;
   });
-  console.log("spawned");
 };
 
 const killWatchCommand = () => {
   if (process) {
     process.kill();
     process = null;
-    console.log("killed");
   }
 };
 
@@ -91,7 +97,7 @@ onUnmounted(() => {
   <DataTable
     :data="resourceData"
     :columns="columns"
-    :row-actions="[]"
+    :row-actions="rowActions"
     :key="resourceData.length"
   />
 </template>

src/views/Shell.vue

@@ -30,7 +30,7 @@ const openTerminal = () => {
   invoke<string>("create_tty_session", {
     initCommand: [
       "kubectl",
-      "edit",
+      "exec",
       "--tty",
       "--stdin",
       props.pod.metadata?.name as string,