wip: started on tabs

src/components/RouterViewport.vue

@@ -1,11 +1,15 @@
 <script setup lang="ts">
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import TabOrchestrator from "@/components/TabOrchestrator.vue";
 </script>
 <template>
-  <ScrollArea
-    class="w-full h-full max-h-screen flex flex-grow border-l border-[#232323] bg-[#0f0f0f]"
-  >
-    <router-view />
-    <ScrollBar orientation="horizontal" />
-  </ScrollArea>
+  <div class="flex flex-col max-h-screen relative w-full">
+    <ScrollArea
+      class="w-full flex flex-grow border-l border-[#232323] bg-[#0f0f0f]"
+    >
+      <router-view />
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
+    <TabOrchestrator />
+  </div>
 </template>

src/components/TabOrchestrator.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import Expand from "@/assets/icons/expand.svg";
+
+const state = reactive({
+  open: false,
+});
+</script>
+<template>
+  <div class="border-t border-l bg-background">
+    <div class="flex items-center mb-0 text-xs py-1 px-1">
+      <div class="flex space-x-3">
+        <div
+          class="py-1 px-2 rounded cursor-pointer max-w-[200px] truncate hover:bg-border"
+        >
+          Logs for minikube/default/countdown-b8dz2
+        </div>
+        <div class="py-1 px-2 rounded cursor-pointer hover:bg-border">
+          Tab 2
+        </div>
+        <div class="py-1 px-2 rounded cursor-pointer hover:bg-border">
+          Tab 3
+        </div>
+      </div>
+      <div
+        class="ml-auto p-1 rounded cursor-pointer hover:bg-border"
+        @click="state.open = !state.open"
+      >
+        <Expand
+          class="text-white h-3"
+          :class="{ 'rotate-90': !state.open, 'rotate-270': state.open }"
+        />
+      </div>
+    </div>
+    <div class="" v-show="state.open">Test</div>
+  </div>
+</template>

src/components/tables/pods.ts

@@ -37,18 +37,3 @@ export const columns: ColumnDef<V1Pod>[] = [
     accessorKey: "spec.nodeName",
   },
 ];
-
-export const rowActions: RowAction<V1Pod>[] = [
-  {
-    label: "Describe",
-    handler: (row) => {
-      console.log("Describe", row);
-    },
-  },
-  {
-    label: "Logs",
-    handler: (row) => {
-      console.log("Logs", row);
-    },
-  },
-];

src/components/ui/DataTable.vue

@@ -18,7 +18,6 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { RowAction } from "../tables/types";
-import { rowActions } from "../tables/pods";
 
 interface DataTableState<T> {
   contextMenuSubject: T | null;
@@ -101,7 +100,7 @@ const table = useVueTable({
           </template>
         </TableBody>
       </ContextMenuTrigger>
-      <ContextMenuContent>
+      <ContextMenuContent v-if="rowActions && rowActions?.length > 0">
         <ContextMenuItem
           v-for="(rowAction, index) in rowActions"
           :key="index"

src/views/Pods.vue

@@ -3,18 +3,44 @@ import { injectStrict } from "@/lib/utils";
 import { V1Pod } from "@kubernetes/client-node";
 import { Kubernetes } from "@/services/Kubernetes";
 import { ref, h } from "vue";
+import { useRouter } from "vue-router";
 import { useToast, ToastAction } from "@/components/ui/toast";
 
 import { KubeContextStateKey } from "@/providers/KubeContextProvider";
-const { context, namespace } = injectStrict(KubeContextStateKey);
 
 import DataTable from "@/components/ui/DataTable.vue";
-import { columns, rowActions } from "@/components/tables/pods";
+import { RowAction } from "@/components/tables/types";
+import { columns } from "@/components/tables/pods";
 import { useDataRefresher } from "@/composables/refresher";
 
+const { context, namespace } = injectStrict(KubeContextStateKey);
+
 const { toast } = useToast();
+const router = useRouter();
+
 const pods = ref<V1Pod[]>([]);
 
+const rowActions: RowAction<V1Pod>[] = [
+  {
+    label: "Edit",
+    handler: (row) => {
+      console.log("Edit", row);
+    },
+  },
+  {
+    label: "Describe",
+    handler: (row) => {
+      console.log("Describe", row);
+    },
+  },
+  {
+    label: "Logs",
+    handler: (row) => {
+      router.push({ name: "PodLogs", params: { podName: row.metadata?.name } });
+    },
+  },
+];
+
 async function getPods(refresh: boolean = false) {
   if (!refresh) {
     pods.value = [];
@@ -47,7 +73,7 @@ const { startRefreshing, stopRefreshing } = useDataRefresher(getPods, 1000, [
   namespace,
 ]);
 </script>
-x
+
 <template>
   <DataTable :data="pods" :columns="columns" :row-actions="rowActions" />
 </template>

tailwind.config.js

@@ -20,6 +20,9 @@ module.exports = {
       },
     },
     extend: {
+      rotate: {
+        270: "270deg",
+      },
       backdropBlur: {
         xxs: "1px",
       },