Log search

.azure-pipelines.yml

@@ -37,6 +37,10 @@ jobs:
         displayName: Cache Yarn packages
       - script: make install-deps
         displayName: Install dependencies
+      - script: make build-npm
+        displayName: Generate npm package
+      - script: make build-extensions
+        displayName: Build bundled extensions
       - script: make integration-win
         displayName: Run integration tests
       - script: make build
@@ -74,6 +78,10 @@ jobs:
         condition: eq(variables.CACHE_RESTORED, 'true')
       - script: make install-deps
         displayName: Install dependencies
+      - script: make build-npm
+        displayName: Generate npm package
+      - script: make build-extensions
+        displayName: Build bundled extensions
       - script: make test
         displayName: Run tests
       - script: make integration-mac
@@ -121,6 +129,10 @@ jobs:
         displayName: Install dependencies
       - script: make lint
         displayName: Lint
+      - script: make build-npm
+        displayName: Generate npm package
+      - script: make build-extensions
+        displayName: Build bundled extensions
       - script: make test
         displayName: Run tests
       - bash: |

integration/__tests__/app.tests.ts

@@ -410,6 +410,40 @@ describe("Lens integration tests", () => {
       })
     })
 
+    describe("viewing pod logs", () => {
+      beforeEach(appStartAddCluster, 40000)
+
+      afterEach(async () => {
+        if (app && app.isRunning()) {
+          return util.tearDown(app)
+        }
+      })
+
+      it(`shows a logs for a pod`, async () => {
+        expect(clusterAdded).toBe(true)
+        // Go to Pods page
+        await app.client.click(".sidebar-nav #workloads span.link-text")
+        await app.client.waitUntilTextExists('a[href^="/pods"]', "Pods")
+        await app.client.click('a[href^="/pods"]')
+        await app.client.waitUntilTextExists("div.TableCell", "kube-apiserver")
+        // Open logs tab in dock
+        await app.client.click(".list .TableRow:first-child")
+        await app.client.waitForVisible(".Drawer")
+        await app.client.click(".drawer-title .Menu li:nth-child(2)")
+        // Check if controls are available
+        await app.client.waitForVisible(".PodLogs .VirtualList")
+        await app.client.waitForVisible(".PodLogControls")
+        await app.client.waitForVisible(".PodLogControls .SearchInput")
+        await app.client.waitForVisible(".PodLogControls .SearchInput input")
+        // Search for semicolon
+        await app.client.keys(":")
+        await app.client.waitForVisible(".PodLogs .list span.active")
+        // Click through controls
+        await app.client.click(".PodLogControls .timestamps-icon")
+        await app.client.click(".PodLogControls .undo-icon")
+      })
+    })
+
     describe("cluster operations", () => {
       beforeEach(appStartAddCluster, 40000)
 

src/common/__tests__/search-store.test.ts

@@ -0,0 +1,80 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { SearchStore } from "../search-store"
+
+let searchStore: SearchStore = null;
+
+const logs = [
+  "1:M 30 Oct 2020 16:17:41.553 # Connection with replica 172.17.0.12:6379 lost",
+  "1:M 30 Oct 2020 16:17:41.623 * Replica 172.17.0.12:6379 asks for synchronization",
+  "1:M 30 Oct 2020 16:17:41.623 * Starting Partial resynchronization request from 172.17.0.12:6379 accepted. Sending 0 bytes of backlog starting from offset 14407."
+]
+
+describe("search store tests", () => {
+  beforeEach(async () => {
+    searchStore = new SearchStore();
+  })
+
+  it("does nothing with empty search query", () => {
+    searchStore.onSearch([], "");
+    expect(searchStore.occurrences).toEqual([]);
+  })
+
+  it("doesn't brake if no text provided", () => {
+    searchStore.onSearch(null, "replica");
+    expect(searchStore.occurrences).toEqual([]);
+
+    searchStore.onSearch([], "replica");
+    expect(searchStore.occurrences).toEqual([]);
+  })
+
+  it("find 3 occurences across 3 lines", () => {
+    searchStore.onSearch(logs, "172");
+    expect(searchStore.occurrences).toEqual([0, 1, 2]);
+  })
+
+  it("find occurences within 1 line (case-insensitive)", () => {
+    searchStore.onSearch(logs, "Starting");
+    expect(searchStore.occurrences).toEqual([2, 2]);
+  })
+
+  it("sets overlay index equal to first occurence", () => {
+    searchStore.onSearch(logs, "Replica");
+    expect(searchStore.activeOverlayIndex).toBe(0);
+  })
+
+  it("set overlay index to next occurence", () => {
+    searchStore.onSearch(logs, "172");
+    searchStore.setNextOverlayActive();
+    expect(searchStore.activeOverlayIndex).toBe(1);
+  })
+
+  it("sets overlay to last occurence", () => {
+    searchStore.onSearch(logs, "172");
+    searchStore.setPrevOverlayActive();
+    expect(searchStore.activeOverlayIndex).toBe(2);
+  })
+
+  it("gets line index where overlay is located", () => {
+    searchStore.onSearch(logs, "synchronization");
+    expect(searchStore.activeOverlayLine).toBe(1);
+  })
+
+  it("escapes string for using in regex", () => {
+    const regex = searchStore.escapeRegex("some.interesting-query\\#?()[]");
+    expect(regex).toBe("some\\.interesting\\-query\\\\\\#\\?\\(\\)\\[\\]");
+  })
+
+  it("gets active find number", () => {
+    searchStore.onSearch(logs, "172");
+    searchStore.setNextOverlayActive();
+    expect(searchStore.activeFind).toBe(2);
+  })
+
+  it("gets total finds number", () => {
+    searchStore.onSearch(logs, "Starting");
+    expect(searchStore.totalFinds).toBe(2);
+  })
+})

src/renderer/components/dock/search.store.ts → src/common/search-store.ts

@@ -1,5 +1,5 @@
 import { action, computed, observable } from "mobx";
-import { autobind } from "../../utils";
+import { autobind } from "../renderer/utils";
 
 export class SearchStore {
   @observable searchQuery = ""; // Text in the search input

src/renderer/components/dock/pod-log-controls.tsx

@@ -112,6 +112,7 @@ export const PodLogControls = observer((props: Props) => {
           material="get_app"
           onClick={downloadLogs}
           tooltip={_i18n._(t`Save`)}
+          className="download-icon"
         />
         <PodLogSearch {...props} />
       </div>

src/renderer/components/dock/pod-log-search.tsx

@@ -3,7 +3,7 @@ import "./pod-log-search.scss";
 import React, { useEffect } from "react";
 import { observer } from "mobx-react";
 import { SearchInput } from "../input";
-import { searchStore } from "./search.store";
+import { searchStore } from "../../../common/search-store";
 import { Icon } from "../icon";
 import { _i18n } from "../../i18n";
 import { t } from "@lingui/macro";
@@ -40,6 +40,16 @@ export const PodLogSearch = observer((props: PodLogSearchProps) => {
     toNextOverlay();
   }
 
+  const onClear = () => {
+    setSearch("");
+  }
+
+  const onKeyDown = (evt: React.KeyboardEvent<any>) => {
+    if (evt.key === "Enter") {
+      onNextOverlay();
+    }
+  }
+
   useEffect(() => {
     // Refresh search when logs changed
     searchStore.onSearch(logs);
@@ -52,6 +62,8 @@ export const PodLogSearch = observer((props: PodLogSearchProps) => {
         onChange={setSearch}
         closeIcon={false}
         contentRight={totalFinds > 0 && findCounts}
+        onClear={onClear}
+        onKeyDown={onKeyDown}
       />
       <Icon
         material="keyboard_arrow_up"
@@ -68,7 +80,7 @@ export const PodLogSearch = observer((props: PodLogSearchProps) => {
       <Icon
         material="close"
         tooltip={_i18n._(t`Clear`)}
-        onClick={() => setSearch("")}
+        onClick={onClear}
       />
     </div>
   );

src/renderer/components/dock/pod-logs.scss

@@ -92,6 +92,10 @@
     }
   }
 
+  .logs .VirtualList .list {
+    overflow-x: scroll!important;
+  }
+
   &.noscroll {
     .logs .VirtualList .list {
       overflow-x: hidden!important; // fixing scroll to bottom issues in PodLogs

src/renderer/components/dock/pod-logs.store.ts

@@ -5,7 +5,7 @@ import { DockTabStore } from "./dock-tab.store";
 import { dockStore, IDockTab, TabKind } from "./dock.store";
 import { t } from "@lingui/macro";
 import { _i18n } from "../../i18n";
-import { searchStore } from "./search.store";
+import { searchStore } from "../../../common/search-store";
 
 export interface IPodLogsData {
   pod: Pod;

src/renderer/components/dock/pod-logs.tsx

@@ -13,7 +13,7 @@ import { IPodLogsData, logRange, podLogsStore } from "./pod-logs.store";
 import { Button } from "../button";
 import { PodLogControls } from "./pod-log-controls";
 import { VirtualList } from "../virtual-list";
-import { searchStore } from "./search.store";
+import { searchStore } from "../../../common/search-store";
 import { ListOnScrollProps } from "react-window";
 
 interface Props {

src/renderer/components/input/input.tsx

@@ -214,6 +214,10 @@ export class Input extends React.Component<InputProps, State> {
   onKeyDown(evt: React.KeyboardEvent<any>) {
     const modified = evt.shiftKey || evt.metaKey || evt.altKey || evt.ctrlKey;
 
+    if (this.props.onKeyDown) {
+      this.props.onKeyDown(evt);
+    }
+
     switch (evt.key) {
     case "Enter":
       if (this.props.onSubmit && !modified && !evt.repeat) {

src/renderer/components/input/search-input.tsx

@@ -1,10 +1,10 @@
 import "./search-input.scss";
 
-import React from "react";
+import React, { createRef } from "react";
 import { t } from "@lingui/macro";
 import { observer } from "mobx-react";
 import { _i18n } from "../../i18n";
-import { cssNames } from "../../utils";
+import { autobind, cssNames } from "../../utils";
 import { Icon } from "../icon";
 import { Input, InputProps } from "./input";
 
@@ -26,6 +26,16 @@ const defaultProps: Partial<Props> = {
 export class SearchInput extends React.Component<Props> {
   static defaultProps = defaultProps as object;
 
+  private input = createRef<Input>();
+
+  componentDidMount() {
+    addEventListener("keydown", this.focus);
+  }
+
+  componentWillUnmount() {
+    removeEventListener("keydown", this.focus);
+  }
+
   clear = () => {
     if (this.props.onClear) {
       this.props.onClear();
@@ -48,6 +58,14 @@ export class SearchInput extends React.Component<Props> {
     }
   }
 
+  @autobind()
+  focus(evt: KeyboardEvent) {
+    const meta = evt.metaKey || evt.ctrlKey;
+    if (meta && evt.key == "f") {
+      this.input.current.focus();
+    }
+  }
+
   render() {
     const { className, compact, closeIcon, onClear, ...inputProps } = this.props;
     const icon = this.props.value
@@ -60,6 +78,7 @@ export class SearchInput extends React.Component<Props> {
         onChange={this.onChange}
         onKeyDown={this.onKeyDown}
         iconRight={icon}
+        ref={this.input}
       />
     )
   }