feat: add Retry button to sidecar toolbar when log streaming stopped abnormally

myan9 · starpit · commit 47872f4aafb1 · 2020-05-28T14:41:54.000-04:00
Fixes #4755
diff --git a/plugins/plugin-client-common/src/components/spi/Icons/impl/Carbon.tsx b/plugins/plugin-client-common/src/components/spi/Icons/impl/Carbon.tsx
@@ -44,6 +44,7 @@ import {
   List16 as List,
   PauseOutlineFilled16 as Pause,
   PlayFilled16 as Play,
+  Renew16 as Retry,
   CaretRight20 as NextPage,
   CaretLeft20 as PreviousPage,
   FlashOffFilled20 as Network
@@ -67,6 +68,7 @@ const icons: Record<Exclude<SupportedIcon, 'Up'>, CarbonIconType> = {
   NextPage,
   Pause,
   Play,
+  Retry,
   PreviousPage,
   Screenshot,
   ScreenshotInProgress,
diff --git a/plugins/plugin-client-common/src/components/spi/Icons/impl/PatternFly.tsx b/plugins/plugin-client-common/src/components/spi/Icons/impl/PatternFly.tsx
@@ -43,6 +43,7 @@ import {
   CaretRightIcon as NextPage,
   NetworkWiredIcon as Network,
   PauseCircleIcon as Pause,
+  RebootingIcon as Retry,
   PlayCircleIcon as Play
 } from '@patternfly/react-icons'
 
@@ -86,6 +87,8 @@ export default function PatternFly4Icons(props: Props) {
       return <Pause {...props} />
     case 'Play':
       return <Play {...props} />
+    case 'Retry':
+      return <Retry {...props} />
     case 'PreviousPage':
       return <PreviousPage style={Pagination} {...props} />
     case 'Network':
diff --git a/plugins/plugin-client-common/src/components/spi/Icons/index.tsx b/plugins/plugin-client-common/src/components/spi/Icons/index.tsx
@@ -35,6 +35,7 @@ export type SupportedIcon =
   | 'NextPage'
   | 'Pause'
   | 'Play'
+  | 'Retry'
   | 'PreviousPage'
   | 'Screenshot'
   | 'ScreenshotInProgress'
diff --git a/plugins/plugin-kubectl/i18n/logs_en_US.json b/plugins/plugin-kubectl/i18n/logs_en_US.json
@@ -19,6 +19,7 @@
   "Log streaming stopped abnormally.": "Log streaming **stopped abnormally**.",
   "Pause Streaming": "Pause Streaming",
   "Resume Streaming": "Resume Streaming",
+  "Retry": "Retry",
   "Occurred at": "Occurred at {0}",
   "Stack Trace": "Stack Trace",
   "Error": "Error"
diff --git a/plugins/plugin-kubectl/logs/src/test/logs/logs-dash-c.ts b/plugins/plugin-kubectl/logs/src/test/logs/logs-dash-c.ts
@@ -58,57 +58,105 @@ wdescribe(`kubectl Logs tab ${process.env.MOCHA_RUN_TARGET || ''}`, function(thi
   const containerName1 = 'nginx'
   const containerName2 = 'vim'
 
-  it(`should create sample pod from URL`, () => {
-    return CLI.command(`echo ${inputEncoded} | base64 --decode | kubectl create -f - -n ${ns}`, this.app)
-      .then(ReplExpect.okWithPtyOutput(podName))
-      .catch(Common.oops(this, true))
-  })
+  const createPodWithoutWaiting = () => {
+    it(`should create sample pod from URL`, () => {
+      return CLI.command(`echo ${inputEncoded} | base64 --decode | kubectl create -f - -n ${ns}`, this.app)
+        .then(ReplExpect.okWithPtyOutput(podName))
+        .catch(Common.oops(this, true))
+    })
+  }
 
-  it(`should wait for the pod to come up`, () => {
-    return CLI.command(`kubectl get pod ${podName} -n ${ns} -w`, this.app)
-      .then(ReplExpect.okWithCustom({ selector: Selectors.BY_NAME(podName) }))
-      .then(selector => waitForGreen(this.app, selector))
-      .catch(Common.oops(this, true))
-  })
+  const waitForPod = () => {
+    it(`should wait for the pod to come up`, () => {
+      return CLI.command(`kubectl get pod ${podName} -n ${ns} -w`, this.app)
+        .then(ReplExpect.okWithCustom({ selector: Selectors.BY_NAME(podName) }))
+        .then(selector => waitForGreen(this.app, selector))
+        .catch(Common.oops(this, true))
+    })
+  }
 
-  it(`should get pods via kubectl then click`, async () => {
-    try {
-      const selector: string = await CLI.command(`kubectl get pods ${podName} -n ${ns}`, this.app).then(
-        ReplExpect.okWithCustom({ selector: Selectors.BY_NAME(podName) })
-      )
-
-      // wait for the badge to become green
-      await waitForGreen(this.app, selector)
-
-      // now click on the table row
-      await this.app.client.click(`${selector} .clickable`)
-      await SidecarExpect.open(this.app)
-        .then(SidecarExpect.mode(defaultModeForGet))
-        .then(SidecarExpect.showing(podName))
-    } catch (err) {
-      return Common.oops(this, true)(err)
-    }
-  })
+  const getPodViaClick = (wait = true) => {
+    it(`should get pods via kubectl then click`, async () => {
+      try {
+        const selector: string = await CLI.command(`kubectl get pods ${podName} -n ${ns}`, this.app).then(
+          ReplExpect.okWithCustom({ selector: Selectors.BY_NAME(podName) })
+        )
 
-  it('should show logs tab', async () => {
-    try {
-      await this.app.client.waitForVisible(Selectors.SIDECAR_MODE_BUTTON('logs'))
-      await this.app.client.click(Selectors.SIDECAR_MODE_BUTTON('logs'))
-      await this.app.client.waitForVisible(Selectors.SIDECAR_MODE_BUTTON_SELECTED('logs'))
+        if (wait) {
+          // wait for the badge to become green
+          await waitForGreen(this.app, selector)
+        }
 
-      await SidecarExpect.toolbarText({ type: 'info', text: 'Logs are live', exact: false })(this.app)
+        // now click on the table row
+        await this.app.client.click(`${selector} .clickable`)
+        await SidecarExpect.open(this.app)
+          .then(SidecarExpect.mode(defaultModeForGet))
+          .then(SidecarExpect.showing(podName))
+      } catch (err) {
+        return Common.oops(this, true)(err)
+      }
+    })
+  }
 
-      await sleep(sleepTime)
-      await waitForLogText((text: string) => text.includes(containerName1) && text.includes(containerName2))
-    } catch (err) {
-      return Common.oops(this, true)(err)
+  const getPodViaYaml = () => {
+    it('should get pods via kubectl get -o yaml', async () => {
+      try {
+        await CLI.command(`kubectl get pods ${podName} -n ${ns} -o yaml`, this.app)
+        await SidecarExpect.open(this.app)
+      } catch (err) {
+        return Common.oops(this, true)(err)
+      }
+    })
+  }
+
+  const testLogsContent = (show: string[], notShow?: string[]) => {
+    if (show) {
+      show.forEach(showInLog => {
+        it(`should show ${showInLog} in log output`, async () => {
+          try {
+            await sleep(sleepTime)
+            await waitForLogText((text: string) => text.indexOf(showInLog) !== -1)
+          } catch (err) {
+            return Common.oops(this, true)(err)
+          }
+        })
+      })
     }
-  })
+
+    if (notShow) {
+      notShow.forEach(notShowInLog => {
+        it(`should not show ${notShowInLog} in log output`, async () => {
+          try {
+            await sleep(sleepTime)
+            await waitForLogText((text: string) => text.indexOf(notShowInLog) === -1)
+          } catch (err) {
+            return Common.oops(this, true)(err)
+          }
+        })
+      })
+    }
+  }
+
+  const switchToLogsTab = (showInLog: string[], toolbar: { text: string; type: string }) => {
+    it('should show logs tab', async () => {
+      try {
+        await this.app.client.waitForVisible(Selectors.SIDECAR_MODE_BUTTON('logs'))
+        await this.app.client.click(Selectors.SIDECAR_MODE_BUTTON('logs'))
+        await this.app.client.waitForVisible(Selectors.SIDECAR_MODE_BUTTON_SELECTED('logs'))
+
+        await SidecarExpect.toolbarText({ type: toolbar.type, text: toolbar.text, exact: false })(this.app)
+
+        testLogsContent(showInLog)
+      } catch (err) {
+        return Common.oops(this, true)(err)
+      }
+    })
+  }
 
   const switchContainer = (
     container: string,
-    _showInLog: string[],
-    _notShowInLog: string[],
+    showInLog: string[],
+    notShowInLog: string[],
     toolbar: { text: string; type: string }
   ) => {
     it(`should switch to container ${container}`, async () => {
@@ -124,27 +172,7 @@ wdescribe(`kubectl Logs tab ${process.env.MOCHA_RUN_TARGET || ''}`, function(thi
       }
     })
 
-    _showInLog.forEach(showInLog => {
-      it(`should show ${showInLog} in log output`, async () => {
-        try {
-          await sleep(sleepTime)
-          await waitForLogText((text: string) => text.indexOf(showInLog) !== -1)
-        } catch (err) {
-          return Common.oops(this, true)(err)
-        }
-      })
-    })
-
-    _notShowInLog.forEach(notShowInLog => {
-      it(`should not show ${notShowInLog} in log output`, async () => {
-        try {
-          await sleep(sleepTime)
-          await waitForLogText((text: string) => text.indexOf(notShowInLog) === -1)
-        } catch (err) {
-          return Common.oops(this, true)(err)
-        }
-      })
-    })
+    testLogsContent(showInLog, notShowInLog)
   }
 
   const toggleStreaming = (changeToLive: boolean) => {
@@ -164,6 +192,25 @@ wdescribe(`kubectl Logs tab ${process.env.MOCHA_RUN_TARGET || ''}`, function(thi
     })
   }
 
+  const doRetry = (showInLog: string[], toolbar: { text: string; type: string }) => {
+    it('should hit retry', async () => {
+      try {
+        await this.app.client.waitForVisible(Selectors.SIDECAR_MODE_BUTTON('retry-streaming'))
+        await this.app.client.click(Selectors.SIDECAR_MODE_BUTTON('retry-streaming'))
+        await SidecarExpect.toolbarText({ text: toolbar.text, type: toolbar.type, exact: false })(this.app)
+        testLogsContent(showInLog)
+      } catch (err) {
+        return Common.oops(this, true)(err)
+      }
+    })
+  }
+
+  /* Here comes the test */
+  createPodWithoutWaiting()
+  waitForPod()
+  getPodViaClick()
+  switchToLogsTab([containerName1, containerName2], { text: 'Logs are live', type: 'info' })
+
   /** testing various combination here */
   switchContainer(containerName1, [containerName1], [containerName2], { text: containerName1, type: 'info' })
 
@@ -237,5 +284,25 @@ wdescribe(`kubectl Logs tab ${process.env.MOCHA_RUN_TARGET || ''}`, function(thi
     type: 'error'
   })
 
+  doRetry(['not found'], {
+    text: showError,
+    type: 'error'
+  })
+
+  createPodWithoutWaiting() // recreate this pod
+  getPodViaYaml() // NOTE: immediately open sidecar when pod is in creation
+
+  switchToLogsTab(['not found'], {
+    text: showError,
+    type: 'error'
+  })
+
+  waitForPod() // wait for pod ready
+
+  doRetry([containerName1, containerName2], {
+    text: 'Logs are live',
+    type: 'info'
+  })
+
   deleteNS(this, ns)
 })
diff --git a/plugins/plugin-kubectl/src/lib/view/modes/ContainerCommon.tsx b/plugins/plugin-kubectl/src/lib/view/modes/ContainerCommon.tsx
@@ -15,7 +15,7 @@
  */
 
 import * as React from 'react'
-import { DropDown } from '@kui-shell/plugin-client-common'
+import { DropDown, Icons } from '@kui-shell/plugin-client-common'
 import { Abortable, Arguments, Button, FlowControllable, Tab, ToolbarProps, ToolbarText, i18n } from '@kui-shell/core'
 
 import { Pod } from '../../model/resource'
@@ -63,10 +63,31 @@ export abstract class ContainerComponent<State extends ContainerState> extends R
 > {
   protected abstract toolbarText(status: StreamingStatus): ToolbarText
 
+  protected toolbarButtonsForError(status: StreamingStatus): Button[] {
+    if (status === 'Error') {
+      return [
+        {
+          mode: 'retry-streaming',
+          label: strings('Retry'),
+          kind: 'view',
+          icon: <Icons icon="Retry" onClick={() => this.showContainer(this.state.container)} />,
+          command: () => {} // eslint-disable-line @typescript-eslint/no-empty-function
+        } as Button
+      ]
+    } else {
+      return []
+    }
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  protected toolbarButtonsForStreaming(status: StreamingStatus): Button[] {
+    return []
+  }
+
   /** Buttons to display in the Toolbar. */
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   protected toolbarButtons(status: StreamingStatus): Button[] {
-    return this.containerList()
+    return this.toolbarButtonsForError(status).concat(this.toolbarButtonsForStreaming(status), this.containerList())
   }
 
   protected supportsAllContainers() {
diff --git a/plugins/plugin-kubectl/src/lib/view/modes/Events.tsx b/plugins/plugin-kubectl/src/lib/view/modes/Events.tsx
@@ -168,8 +168,23 @@ class Events extends React.PureComponent<Props, State> {
     }
   }
 
-  /** Toolbar buttons to display */
-  protected toolbarButtons(status: StreamingStatus) {
+  protected toolbarButtonsForError(status: StreamingStatus): Button[] {
+    if (status === 'Error') {
+      return [
+        {
+          mode: 'retry-streaming',
+          label: strings('Retry'),
+          kind: 'view',
+          icon: <Icons icon="Retry" onClick={() => this.initStream()} />,
+          command: () => {} // eslint-disable-line @typescript-eslint/no-empty-function
+        } as Button
+      ]
+    } else {
+      return []
+    }
+  }
+
+  protected toolbarButtonsForStreaming(status: StreamingStatus): Button[] {
     const isLive = status === 'Live'
     return [
       {
@@ -182,6 +197,11 @@ class Events extends React.PureComponent<Props, State> {
     ]
   }
 
+  /** Toolbar buttons to display */
+  protected toolbarButtons(status: StreamingStatus) {
+    return this.toolbarButtonsForError(status).concat(this.toolbarButtonsForStreaming(status))
+  }
+
   /** Update Toolbar text and Toolbar buttons. */
   protected updateToolbar(status: StreamingStatus) {
     this.props.toolbarController.willUpdateToolbar(
diff --git a/plugins/plugin-kubectl/src/lib/view/modes/ExecIntoPod.tsx b/plugins/plugin-kubectl/src/lib/view/modes/ExecIntoPod.tsx
@@ -106,7 +106,7 @@ export class Terminal<S extends TerminalState = TerminalState> extends Container
     super(props)
 
     this.state = {
-      container: props.pod.spec.containers[0].name,
+      container: this.defaultContainer(),
 
       dom: undefined,
       xterm: undefined,
@@ -159,6 +159,10 @@ export class Terminal<S extends TerminalState = TerminalState> extends Container
     }
   }
 
+  protected defaultContainer() {
+    return this.props.pod.spec.containers[0].name
+  }
+
   /**
    * Convert the current theme to an xterm.js ITheme
    *
@@ -295,6 +299,8 @@ export class Terminal<S extends TerminalState = TerminalState> extends Container
     const { pod } = this.props
     const { container } = this.state
 
+    console.error('yoyo', container)
+
     return `${getCommandFromArgs(this.props.args)} exec -it ${pod.metadata.name} -c ${container} -n ${
       pod.metadata.namespace
     } -- sh`
@@ -404,7 +410,7 @@ export class Terminal<S extends TerminalState = TerminalState> extends Container
             return {
               job: undefined,
               streamUUID: undefined,
-              container: undefined,
+              container: curState.container,
               isLive,
               isTerminated: true
             }
diff --git a/plugins/plugin-kubectl/src/lib/view/modes/logs.tsx b/plugins/plugin-kubectl/src/lib/view/modes/logs.tsx
diff --git a/plugins/plugin-kubectl/src/test/k8s2/terminal-tab.ts b/plugins/plugin-kubectl/src/test/k8s2/terminal-tab.ts
