feat: added support for multi-container shell selection

unxsist · Jan 11, 2024 · 2b3d513 · 2b3d513
1 parent 3d6d298
commit 2b3d513
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 18 deletions.
diff --git a/src/components/tables/types.ts b/src/components/tables/types.ts
@@ -1,4 +1,15 @@
-export interface RowAction<T> {
+export interface BaseRowAction<T> {
   label: string;
+}
+
+export interface WithOptions<T> extends BaseRowAction<T> {
+  options: (row: T) => WithHandler<T>[];
+  handler?: never;
+}
+
+export interface WithHandler<T> extends BaseRowAction<T> {
+  options?: never;
   handler: (row: T) => void;
 }
+
+export type RowAction<T> = WithOptions<T> | WithHandler<T>;
diff --git a/src/components/ui/DataTable.vue b/src/components/ui/DataTable.vue
@@ -7,6 +7,9 @@ import {
   ContextMenuTrigger,
   ContextMenuContent,
   ContextMenuItem,
+  ContextMenuSub,
+  ContextMenuSubTrigger,
+  ContextMenuSubContent,
 } from "@/components/ui/context-menu";
 
 import {
@@ -103,12 +106,26 @@ const table = useVueTable({
         </TableBody>
       </ContextMenuTrigger>
       <ContextMenuContent v-if="rowActions && rowActions?.length > 0">
-        <ContextMenuItem
-          v-for="(rowAction, index) in rowActions"
-          :key="index"
-          @select="rowAction.handler(state.contextMenuSubject as TData)"
-          >{{ rowAction.label }}</ContextMenuItem
-        >
+        <template v-for="(rowAction, index) in rowActions" :key="index">
+          <ContextMenuItem
+            v-if="!rowAction.options"
+            @select="rowAction.handler(state.contextMenuSubject as TData)"
+            >{{ rowAction.label }}</ContextMenuItem
+          >
+          <ContextMenuSub v-else>
+            <ContextMenuSubTrigger>
+              {{ rowAction.label }}
+            </ContextMenuSubTrigger>
+            <ContextMenuSubContent>
+              <ContextMenuItem
+                v-for="(option, optionIndex) in rowAction.options(state.contextMenuSubject as TData)"
+                :key="optionIndex"
+                @select="option.handler(state.contextMenuSubject as TData)"
+                >{{ option.label }}</ContextMenuItem
+              >
+            </ContextMenuSubContent>
+          </ContextMenuSub>
+        </template>
       </ContextMenuContent>
     </ContextMenu>
   </Table>

diff --git a/src/views/Pods.vue b/src/views/Pods.vue
@@ -32,25 +32,39 @@ const rowActions: RowAction<V1Pod>[] = [
   {
     label: "Describe",
     handler: (row) => {
-      console.log("Describe", row);
-    },
-  },
-  {
-    label: "Shell",
-    handler: (row) => {
-      console.log(row);
       addTab(
-        `shell_${row.metadata?.name}`,
-        `Shell for ${row.metadata?.name}`,
-        defineAsyncComponent(() => import("@/views/Shell.vue")),
+        `describe_${row.metadata?.name}`,
+        `Describe ${row.metadata?.name}`,
+        defineAsyncComponent(() => import("@/views/Describe.vue")),
         {
           context: context.value,
           namespace: namespace.value,
-          pod: row,
+          object: `pods/${row.metadata?.name}`,
         }
       );
     },
   },
+  {
+    label: "Shell",
+    options: (row) => {
+      return (row.status?.containerStatuses || []).map((container) => ({
+        label: container.name,
+        handler: () => {
+          addTab(
+            `shell_${row.metadata?.name}_${container.name}`,
+            `>_ ${row.metadata?.name}/${container.name}`,
+            defineAsyncComponent(() => import("@/views/Shell.vue")),
+            {
+              context: context.value,
+              namespace: namespace.value,
+              pod: row,
+              container: container,
+            }
+          );
+        },
+      }));
+    },
+  },
   {
     label: "Logs",
     handler: (row) => {