Terminal dock tab improvements (#294)

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

dashboard/client/components/+nodes/node-menu.tsx

@@ -24,7 +24,7 @@ export function NodeMenu(props: KubeObjectMenuProps<Node>) {
 
   const shell = () => {
     createTerminalTab({
-      title: _i18n._(t`Shell: ${nodeName}`),
+      title: _i18n._(t`Node: ${nodeName}`),
       node: nodeName,
     });
     hideDetails();
@@ -75,4 +75,4 @@ export function NodeMenu(props: KubeObjectMenuProps<Node>) {
       </MenuItem>
     </KubeObjectMenu>
   );
-}
+}

dashboard/client/components/+workloads-pods/pod-menu.tsx

@@ -9,7 +9,7 @@ import { StatusBrick } from "../status-brick";
 import { PodLogsDialog } from "./pod-logs-dialog";
 import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-menu";
 import { cssNames, prevDefault } from "../../utils";
-import { terminalStore } from "../dock/terminal.store";
+import { terminalStore, createTerminalTab } from "../dock/terminal.store";
 import { _i18n } from "../../i18n";
 import { hideDetails } from "../../navigation";
 
@@ -22,15 +22,22 @@ export class PodMenu extends React.Component<Props> {
     const { object: pod } = this.props
     const containerParam = container ? `-c ${container}` : ""
     let command = `kubectl exec -i -t -n ${pod.getNs()} ${pod.getName()} ${containerParam} "--"`
+    if (process.platform !== "win32") {
+      command = `exec ${command}`
+    }
     if (pod.getSelectedNodeOs() === "windows") {
       command = `${command} powershell`
     } else {
       command = `${command} sh -c "clear; (bash || ash || sh)"`
     }
 
+    const shell = createTerminalTab({
+      title: _i18n._(t`Pod: ${pod.getName()} (namespace: ${pod.getNs()})`)
+    });
+
     terminalStore.sendCommand(command, {
       enter: true,
-      newTab: true,
+      tabId: shell.id
     });
   }
 

dashboard/client/components/dock/dock-tab.scss

@@ -14,7 +14,7 @@
 
   .label {
     .title {
-      max-width: 150px;
+      max-width: 250px;
       overflow: hidden;
       text-overflow: ellipsis;
     }
@@ -31,4 +31,4 @@
   &:last-child {
     padding-right: $padding;
   }
-}
+}

dashboard/client/components/dock/terminal-tab.tsx

@@ -7,12 +7,20 @@ import { autobind, cssNames } from "../../utils";
 import { DockTab, DockTabProps } from "./dock-tab";
 import { Icon } from "../icon";
 import { terminalStore } from "./terminal.store";
+import { dockStore } from "./dock.store";
+import { reaction } from "mobx";
 
 interface Props extends DockTabProps {
 }
 
 @observer
 export class TerminalTab extends React.Component<Props> {
+  componentDidMount() {
+    reaction(() => this.isDisconnected, () => {
+      dockStore.closeTab(this.tabId)
+    })
+  }
+
   get tabId() {
     return this.props.value.id;
   }
@@ -31,6 +39,7 @@ export class TerminalTab extends React.Component<Props> {
     const className = cssNames("TerminalTab", this.props.className, {
       disconnected: this.isDisconnected,
     });
+
     return (
       <DockTab
         {...this.props}
@@ -48,4 +57,4 @@ export class TerminalTab extends React.Component<Props> {
       />
     )
   }
-}
+}