fix: PTY jobs are not resizable

This PR exposes a new Resizable trait from Jobs, and does some minor cleanup on the Job type. It updates pty/client.ts to pass this through to the underlying PTY, and updates the plugin-kubectl ExecIntoPod view to use it!

part of #7473

Author: starpit

packages/core/src/core/jobs/job.ts

@@ -18,6 +18,14 @@ export interface Abortable {
   abort(): void
 }
 
+export interface Resizable {
+  resize(rows: number, cols: number): void
+}
+
+export function isResizable(job: Partial<Resizable>): job is Resizable {
+  return typeof job.resize === 'function'
+}
+
 export interface FlowControllable {
   xon(): void
   xoff(): void
@@ -32,3 +40,5 @@ export type WatchableJob = Abortable & Partial<Suspendable>
 export function isSuspendable(watch: Partial<Suspendable>) {
   return watch.xon && watch.xoff
 }
+
+export type Job = Abortable & FlowControllable & Partial<Resizable>

packages/core/src/index.ts

@@ -109,7 +109,9 @@ export {
   isMetadataBearing as isResourceWithMetadata
 } from './models/entity'
 export { isWatchable, Watchable, Watcher, WatchPusher } from './core/jobs/watchable'
-export { Abortable, FlowControllable, Suspendable, isSuspendable } from './core/jobs/job'
+
+export { Abortable, FlowControllable, Job, Resizable, isResizable, Suspendable, isSuspendable } from './core/jobs/job'
+
 import { Tab } from './webapp/tab'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { getHistoryForTab } from './models/history'

packages/core/src/models/execOptions.ts

@@ -18,7 +18,7 @@ import { ExecType } from './command'
 import { Tab } from '../webapp/tab'
 import { Stream, Streamable, StreamableFactory } from './streamable'
 import { Block } from '../webapp/models/block'
-import { Abortable, FlowControllable } from '../core/jobs/job'
+import { Job } from '../core/jobs/job'
 
 export interface ExecOptions {
   /** force execution in a given tab? */
@@ -91,10 +91,10 @@ export interface ExecOptions {
   stderr?: (str: string) => any // eslint-disable-line @typescript-eslint/no-explicit-any
 
   /** on job init, pass the job, and get back a stdout; i.e. just before the PTY is brought up */
-  onInit?: (job: Abortable & FlowControllable) => Stream | Promise<Stream>
+  onInit?: (job: Job) => Stream | Promise<Stream>
 
   /** on job ready, i.e. after the PTY is up, but before any data has been processed */
-  onReady?: (job: Abortable & FlowControllable) => void | Promise<void>
+  onReady?: (job: Job) => void | Promise<void>
 
   /** on job exit, pass the exitCode */
   onExit?: (exitCode: number) => void

plugins/plugin-bash-like/src/pty/client.ts

@@ -913,6 +913,9 @@ export const doExec = (
               debug('xoff requested')
               ws.send(JSON.stringify({ type: 'xoff', uuid: ourUUID }))
             },
+            resize: (rows: number, cols: number) => {
+              ws.send(JSON.stringify({ type: 'resize', rows, cols, uuid: ourUUID }))
+            },
             abort: () => {
               debug('abort requested')
               ws.send(JSON.stringify({ type: 'kill', uuid: ourUUID }))

plugins/plugin-kubectl/src/lib/util/fetch-file.ts

@@ -103,6 +103,9 @@ export async function openStream<T extends object>(
       },
       xon: () => stream.resume(),
       xoff: () => stream.pause(),
+      resize: () => {
+        console.error('Unsupported Operation: resize')
+      },
       write: () => {
         console.error('Unsupported Operation: write')
       }

plugins/plugin-kubectl/src/lib/view/modes/ContainerCommon.tsx

@@ -16,17 +16,7 @@
 
 import React from 'react'
 import { DropDown, Icons } from '@kui-shell/plugin-client-common'
-import {
-  Abortable,
-  Arguments,
-  Button,
-  FlowControllable,
-  ParsedOptions,
-  Tab,
-  ToolbarProps,
-  ToolbarText,
-  i18n
-} from '@kui-shell/core'
+import { Arguments, Button, ParsedOptions, Job, Tab, ToolbarProps, ToolbarText, i18n } from '@kui-shell/core'
 
 import { Pod } from '../../model/resource'
 
@@ -39,8 +29,6 @@ const strings = i18n('plugin-kubectl')
  */
 export const HYSTERESIS = 1500
 
-export type Job = Abortable & FlowControllable
-
 export type StreamingStatus = 'Live' | 'Paused' | 'Stopped' | 'Error' | 'Idle'
 
 export interface ContainerProps {

plugins/plugin-kubectl/src/lib/view/modes/ExecIntoPod.tsx

@@ -20,6 +20,8 @@ import { v4 as uuid } from 'uuid'
 import {
   Arguments,
   ModeRegistration,
+  Job,
+  isResizable,
   Streamable,
   Tab,
   ToolbarProps,
@@ -39,7 +41,7 @@ import { getCommandFromArgs } from '../../util/util'
 import { KubeResource, Pod, isPod } from '../../model/resource'
 import { KubeOptions, getContainer, withKubeconfigFrom } from '../../../controller/kubectl/options'
 
-import { ContainerProps, ContainerState, ContainerComponent, HYSTERESIS, Job, StreamingStatus } from './ContainerCommon'
+import { ContainerProps, ContainerState, ContainerComponent, HYSTERESIS, StreamingStatus } from './ContainerCommon'
 
 import '../../../../web/scss/components/Terminal/Terminal.scss'
 
@@ -450,6 +452,27 @@ export class Terminal<S extends TerminalState = TerminalState> extends Container
             return
           }
 
+          if (isResizable(job)) {
+            xterm.onResize(({ rows, cols }) => {
+              job.resize(rows, cols)
+            })
+
+            const { doResize } = this.state
+            if (doResize) {
+              // resize once on init
+              this.state.doResize()
+
+              const observer = new ResizeObserver(function observer(observed) {
+                // re: the if guard, see https://github.com/IBM/kui/issues/6585
+                if (observed.every(_ => _.contentRect.width > 0 && _.contentRect.height > 0)) {
+                  setTimeout(doResize)
+                }
+              })
+              observer.observe(this.state.dom)
+              this.state.perTerminalCleaners.push(() => observer.disconnect())
+            }
+          }
+
           xterm.onData((data: string) => {
             if (!this._unmounted && this.state.streamUUID === streamUUID) {
               job.write(data)
@@ -545,18 +568,6 @@ export class Terminal<S extends TerminalState = TerminalState> extends Container
       }
     }
 
-    // resize once on init
-    doResize()
-
-    const observer = new ResizeObserver(function observer(observed) {
-      // re: the if guard, see https://github.com/IBM/kui/issues/6585
-      if (observed.every(_ => _.contentRect.width > 0 && _.contentRect.height > 0)) {
-        setTimeout(doResize)
-      }
-    })
-    observer.observe(dom)
-    perTerminalCleaners.push(() => observer.disconnect())
-
     return {
       xterm,
       doResize,