Log search

src/renderer/components/+apps-helm-charts/helm-charts.tsx

@@ -11,7 +11,7 @@ import { navigation } from "../../navigation";
 import { ItemListLayout } from "../item-object-list/item-list-layout";
 import { t, Trans } from "@lingui/macro";
 import { _i18n } from "../../i18n";
-import { SearchInput } from "../input";
+import { SearchInputUrl } from "../input";
 
 enum sortBy {
   name = "name",
@@ -72,7 +72,7 @@ export class HelmCharts extends Component<Props> {
             (items: HelmChart[]) => items.filter(item => !item.deprecated)
           ]}
           customizeHeader={() => (
-            <SearchInput placeholder={_i18n._(t`Search Helm Charts`)} />
+            <SearchInputUrl placeholder={_i18n._(t`Search Helm Charts`)} />
           )}
           renderTableHeader={[
             { className: "icon" },

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

@@ -8,22 +8,26 @@ import { Icon } from "../icon";
 import { _i18n } from "../../i18n";
 import { cssNames, downloadFile } from "../../utils";
 import { Pod } from "../../api/endpoints";
+import { PodLogSearch, PodLogSearchProps } from "./pod-log-search";
 
-interface Props {
+interface Props extends PodLogSearchProps {
   ready: boolean
   tabId: string
   tabData: IPodLogsData
-  logs: string[][]
+  logs: string[]
   save: (data: Partial<IPodLogsData>) => void
   reload: () => void
+  onSearch: (query: string) => void
 }
 
 export const PodLogControls = observer((props: Props) => {
   if (!props.ready) return null;
-  const { tabData, tabId, save, reload, logs } = props;
+  const { tabData, save, reload, tabId, logs } = props;
   const { selectedContainer, showTimestamps, previous } = tabData;
-  const since = podLogsStore.getTimestamps(podLogsStore.logs.get(tabId)[0]);
+  const rawLogs = podLogsStore.logs.get(tabId);
+  const since = rawLogs.length ? podLogsStore.getTimestamps(rawLogs[0]) : null;
   const pod = new Pod(tabData.pod);
+
   const toggleTimestamps = () => {
     save({ showTimestamps: !showTimestamps });
   }
@@ -35,8 +39,7 @@ export const PodLogControls = observer((props: Props) => {
 
   const downloadLogs = () => {
     const fileName = selectedContainer ? selectedContainer.name : pod.getName();
-    const [oldLogs, newLogs] = logs;
-    downloadFile(fileName + ".log", [...oldLogs, ...newLogs].join("\n"), "text/plain");
+    downloadFile(fileName + ".log", logs.join("\n"), "text/plain");
   }
 
   const onContainerChange = (option: SelectOption) => {
@@ -92,7 +95,7 @@ export const PodLogControls = observer((props: Props) => {
           </>
         )}
       </div>
-      <div className="flex gaps">
+      <div className="flex box grow gaps align-center">
         <Icon
           material="av_timer"
           onClick={toggleTimestamps}
@@ -110,6 +113,7 @@ export const PodLogControls = observer((props: Props) => {
           onClick={downloadLogs}
           tooltip={_i18n._(t`Save`)}
         />
+        <PodLogSearch {...props} />
       </div>
     </div>
   );

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

@@ -0,0 +1,10 @@
+.PodLogsSearch {
+  .SearchInput {
+    min-width: 150px;
+    width: 150px;
+
+    .find-count {
+      margin-left: 2px;
+    }
+  }
+}

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

@@ -0,0 +1,70 @@
+import "./pod-log-search.scss";
+
+import React from "react";
+import { observer } from "mobx-react";
+import { SearchInput } from "../input";
+import { searchStore } from "./search.store";
+import { Icon } from "../icon";
+import { _i18n } from "../../i18n";
+import { t } from "@lingui/macro";
+
+export interface PodLogSearchProps {
+  onSearch: (query: string) => void
+  toPrevOverlay: () => void
+  toNextOverlay: () => void
+  logs: string[]
+}
+
+export const PodLogSearch = observer((props: PodLogSearchProps) => {
+  const { logs, onSearch, toPrevOverlay, toNextOverlay } = props;
+  const { setNextOverlayActive, setPrevOverlayActive, searchQuery, occurrences, activeFind, totalFinds } = searchStore;
+  const jumpDisabled = !searchQuery || !occurrences.length;
+  const findCounts = (
+    <div className="find-count">
+      {activeFind}/{totalFinds}
+    </div>
+  );
+
+  const setSearch = (query: string) => {
+    searchStore.onSearch(logs, query);
+    onSearch(query);
+  };
+
+  const onPrevOverlay = () => {
+    setPrevOverlayActive();
+    toPrevOverlay();
+  }
+
+  const onNextOverlay = () => {
+    setNextOverlayActive();
+    toNextOverlay();
+  }
+
+  return (
+    <div className="PodLogsSearch flex box grow justify-flex-end gaps align-center">
+      <SearchInput
+        value={searchQuery}
+        onChange={setSearch}
+        closeIcon={false}
+        contentRight={totalFinds > 0 && findCounts}
+      />
+      <Icon
+        material="keyboard_arrow_up"
+        tooltip={_i18n._(t`Previous`)}
+        onClick={onPrevOverlay}
+        disabled={jumpDisabled}
+      />
+      <Icon
+        material="keyboard_arrow_down"
+        tooltip={_i18n._(t`Next`)}
+        onClick={onNextOverlay}
+        disabled={jumpDisabled}
+      />
+      <Icon
+        material="close"
+        tooltip={_i18n._(t`Clear`)}
+        onClick={() => setSearch("")}
+      />
+    </div>
+  );
+});

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

@@ -6,19 +6,47 @@
     // `overflow: overlay` don't allow scroll to the last line
     overflow: auto;
 
+    position: relative;
     color: $textColorAccent;
     background: $logsBackground;
-    line-height: var(--log-line-height);
-    border-radius: 2px;
-    padding: $padding * 2;
-    font-family: $font-monospace;
-    font-size: smaller;
-    white-space: pre;
     flex-grow: 1;
 
-    > div {
-     // Provides font better readability on large screens
-      -webkit-font-smoothing: subpixel-antialiased;
+    .find-overlay {
+      position: absolute;
+      border-radius: 2px;
+      background-color: #8cc474;
+      margin-top: 4px;
+      opacity: 0.5;
+    }
+
+    .VirtualList {
+      height: 100%;
+
+      .list {
+        .LogRow {
+          padding: 2px 16px;
+          height: 18px;  // Must be equal to lineHeight variable in pod-logs.scss
+          font-family: $font-monospace;
+          font-size: smaller;
+          white-space: pre;
+          -webkit-font-smoothing: auto; // Better readability on non-retina screens
+
+          &:hover {
+            // TODO: Use a theme var to styling
+            background: #35373a;
+          }
+
+          span {
+            border-radius: 2px;
+            background-color: #8cc474b8;
+            -webkit-font-smoothing: auto;
+
+            &.active {
+              background-color: orange;
+            }
+          }
+        }
+      }
     }
   }
 
@@ -47,7 +75,8 @@
     padding: $unit / 2 $unit * 1.5;
     border-radius: $unit * 2;
     opacity: 0;
-    transition: opacity 0.2s;
+    z-index: 2;
+    top: 20px;
 
     &.active {
       opacity: 1;
@@ -57,4 +86,10 @@
       --size: $unit * 2;
     }
   }
+
+  .PodLogControls {
+    .Select {
+      min-width: 150px;
+    }
+  }
 }

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 { isDevelopment } from "../../../common/vars";
+import { searchStore } from "./search.store";
 
 export interface IPodLogsData {
   pod: Pod;
@@ -20,7 +20,7 @@ type TabId = string;
 type PodLogLine = string;
 
 // Number for log lines to load
-export const logRange = isDevelopment ? 100 : 1000;
+export const logRange = 500;
 
 @autobind()
 export class PodLogsStore extends DockTabStore<IPodLogsData> {
@@ -48,6 +48,13 @@ export class PodLogsStore extends DockTabStore<IPodLogsData> {
 
     reaction(() => this.logs.get(dockStore.selectedTabId), () => {
       this.setNewLogSince(dockStore.selectedTabId);
+      // Refresh search when logs changed
+      searchStore.onSearch(this.logs.get(dockStore.selectedTabId));
+    })
+
+    reaction(() => dockStore.selectedTabId, () => {
+      // Clear search query on tab change
+      searchStore.reset();
     })
   }
 
@@ -82,6 +89,7 @@ export class PodLogsStore extends DockTabStore<IPodLogsData> {
    * @param tabId
    */
   loadMore = async (tabId: TabId) => {
+    if (!this.logs.get(tabId).length) return;
     const oldLogs = this.logs.get(tabId);
     const logs = await this.loadLogs(tabId, {
       sinceTime: this.getLastSinceTime(tabId)
@@ -120,7 +128,7 @@ export class PodLogsStore extends DockTabStore<IPodLogsData> {
    * @param tabId
    */
   setNewLogSince(tabId: TabId) {
-    if (!this.logs.has(tabId) || this.newLogSince.has(tabId)) return;
+    if (!this.logs.has(tabId) || !this.logs.get(tabId).length || this.newLogSince.has(tabId)) return;
     const timestamp = this.getLastSinceTime(tabId);
     this.newLogSince.set(tabId, timestamp.split(".")[0]); // Removing milliseconds from string
   }