feat(plugins/plugin-kubectl): Provide search capability on pod detail…

…s Logs tab

part of kubernetes-sigs#5570

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

@@ -363,6 +363,13 @@ export class Terminal<S extends TerminalState = TerminalState> extends Container
     return { command }
   }
 
+  /** Write to the UI */
+  protected write(line: string) {
+    if (this.state.xterm) {
+      this.state.xterm.write(line)
+    }
+  }
+
   /** Indicate that we have received some data */
   private gotSomeData(streamUUID: string) {
     if (!this.state.gotSomeData) {
@@ -442,7 +449,7 @@ export class Terminal<S extends TerminalState = TerminalState> extends Container
 
             if (typeof _ === 'string' && this.state.streamUUID === streamUUID) {
               this.gotSomeData(streamUUID)
-              xterm.write(_)
+              this.write(_)
             }
           }
         },
@@ -596,8 +603,13 @@ export class Terminal<S extends TerminalState = TerminalState> extends Container
     }
   }
 
+  /** Not ready to render? */
+  protected notReady() {
+    return this.state.dom && !this.state.xterm
+  }
+
   public render() {
-    if (this.state.dom && !this.state.xterm) {
+    if (this.notReady()) {
       return <Loading />
     } else {
       return (

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

@@ -26,6 +26,8 @@ import { Terminal, TerminalState } from './ExecIntoPod'
 import { ContainerProps, StreamingStatus } from './ContainerCommon'
 import { KubeOptions, getContainer, hasLabel, withKubeconfigFrom } from '../../../controller/kubectl/options'
 
+import '../../../../web/scss/components/LogsSearch.scss'
+
 const debug = Debug('plugin-kubectl/Logs')
 const strings = i18n('plugin-kubectl', 'logs')
 
@@ -37,6 +39,8 @@ const strings = i18n('plugin-kubectl', 'logs')
 const defaultTail = 1000
 
 interface State extends TerminalState {
+  nLines: number
+  filter: Partial<string>
   showingPrevious: boolean
 }
 
@@ -49,6 +53,8 @@ export class Logs extends Terminal<State> {
     super(props)
 
     this.state = Object.assign(this.state, {
+      nLines: 0,
+      filter: undefined,
       showingPrevious: showingPrevious(this.props.args.argsForMode),
       container: this.defaultContainer()
     })
@@ -268,6 +274,68 @@ export class Logs extends Terminal<State> {
       </div>
     )
   }
+
+  private readonly loglines: string[] = []
+  private delay: ReturnType<typeof setTimeout>
+  protected write(line: string) {
+    this.loglines.push(line)
+    if (!this.state.filter && this.state.xterm) {
+      this.state.xterm.write(line)
+    } else {
+      if (this.delay) clearTimeout(this.delay)
+      this.delay = setTimeout(() => this.setState({ nLines: this.loglines.length }), 20)
+    }
+  }
+
+  private refill(filter: string) {
+    this.setState(curState => {
+      curState.xterm.clear()
+      const pattern = new RegExp(filter, /^[a-z0-9]+$/.test(filter) ? 'i' : undefined)
+      this.loglines
+        .join()
+        .split(/\n/)
+        .forEach(_ => {
+          if (pattern.test(_)) {
+            curState.xterm.writeln(_)
+          }
+        })
+      return { filter }
+    })
+  }
+
+  private delay2: ReturnType<typeof setTimeout>
+  private onFilterChange(evt: React.ChangeEvent<HTMLInputElement>) {
+    if (this.delay2) clearTimeout(this.delay2)
+    const filter = evt.currentTarget.value
+    this.delay2 = setTimeout(() => this.refill(filter), 20)
+  }
+
+  private readonly _onFilterChange = this.onFilterChange.bind(this)
+
+  private filterPane() {
+    return (
+      <div className="flex-layout kui--sidecar-filter-area">
+        <input
+          className="flex-fill kui--sidecar-filter-input"
+          placeholder="Enter filter string or regular expression"
+          onChange={this._onFilterChange}
+        />
+      </div>
+    )
+  }
+
+  public render() {
+    if (this.notReady()) {
+      return super.render()
+    } else {
+      return (
+        <React.Fragment>
+          <div className="flex-fill">{super.render()}</div>
+          {this.filterPane()}
+        </React.Fragment>
+      )
+    }
+  }
 }
 
 /**

plugins/plugin-kubectl/web/scss/components/LogsSearch.scss

@@ -0,0 +1,21 @@
+/*
+ * Copyright 2021 The Kubernetes Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.kui--sidecar-filter-input {
+  padding: 0.375em;
+  color: var(--color-sidecar-toolbar-foreground);
+  background-color: var(--color-sidecar-toolbar-background);
+}