diff --git a/src/renderer/components/dock/pod-log-controls.tsx b/src/renderer/components/dock/pod-log-controls.tsx index d3ba81e7ab..58121f0806 100644 --- a/src/renderer/components/dock/pod-log-controls.tsx +++ b/src/renderer/components/dock/pod-log-controls.tsx @@ -8,14 +8,17 @@ import { Icon } from "../icon"; import { _i18n } from "../../i18n"; import { cssNames, downloadFile } from "../../utils"; import { Pod } from "../../api/endpoints"; +import { PodLogSearch } from "./pod-log-search"; interface Props { ready: boolean tabId: string tabData: IPodLogsData - logs: string[][] + logs: string[] save: (data: Partial) => void reload: () => void + onSearch: (query: string) => void + search: string } export const PodLogControls = observer((props: Props) => { @@ -24,6 +27,7 @@ export const PodLogControls = observer((props: Props) => { const { selectedContainer, showTimestamps, previous } = tabData; const since = podLogsStore.getTimestamps(podLogsStore.logs.get(tabId)[0]); const pod = new Pod(tabData.pod); + const toggleTimestamps = () => { save({ showTimestamps: !showTimestamps }); } @@ -110,6 +114,7 @@ export const PodLogControls = observer((props: Props) => { onClick={downloadLogs} tooltip={_i18n._(t`Save`)} /> + ); diff --git a/src/renderer/components/dock/pod-log-search.tsx b/src/renderer/components/dock/pod-log-search.tsx new file mode 100644 index 0000000000..b7334ae55b --- /dev/null +++ b/src/renderer/components/dock/pod-log-search.tsx @@ -0,0 +1,25 @@ +import React from "react"; +import { observer } from "mobx-react"; +import { cssNames } from "../../utils"; +import { Input } from "../input"; + +interface Props { + onSearch: (query: string) => void + search: string +} + +export const PodLogSearch = observer((props: Props) => { + const { onSearch, search } = props; + const setSearch = (query: string) => { + onSearch(query); + }; + return ( +
+ +
+ ) +}); \ No newline at end of file diff --git a/src/renderer/components/dock/pod-logs.scss b/src/renderer/components/dock/pod-logs.scss index 374d24ee8e..56254e5327 100644 --- a/src/renderer/components/dock/pod-logs.scss +++ b/src/renderer/components/dock/pod-logs.scss @@ -29,11 +29,18 @@ font-family: $font-monospace; font-size: smaller; white-space: pre; - -webkit-font-smoothing: auto; + -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; + } } } } diff --git a/src/renderer/components/dock/pod-logs.tsx b/src/renderer/components/dock/pod-logs.tsx index 524befa2d1..d87cd84147 100644 --- a/src/renderer/components/dock/pod-logs.tsx +++ b/src/renderer/components/dock/pod-logs.tsx @@ -27,6 +27,7 @@ export class PodLogs extends React.Component { @observable ready = false; @observable preloading = false; // Indicator for setting Spinner (loader) at the top of the logs @observable showJumpToBottom = false; + @observable findQuery = ""; // A text from search field private logsElement = React.createRef(); // A reference for outer container in VirtualList private lastLineIsShown = true; // used for proper auto-scroll content after refresh @@ -101,6 +102,14 @@ export class PodLogs extends React.Component { } } + /** + * Updating findQuery observable + * @param query {string} A text from search field + */ + onSearch(query: string) { + this.findQuery = query; + } + /** * Computed prop which returns logs with or without timestamps added to each line * @returns {Array} An array log items @@ -138,9 +147,22 @@ export class PodLogs extends React.Component { */ getLogRow = (index: number) => { const isSeparator = this.logs[index] === "---newlogs---"; // TODO: Use constant separator + const { findQuery } = this; + const item = this.logs[index]; + const contents: React.ReactElement[] = []; + if (findQuery) { + // If search is enabled, replace keyword with backgrounded to "highlight" searchable text + const pieces = item.split(findQuery); + pieces.forEach((piece, index) => { + const overlay = index !== pieces.length - 1 ? {findQuery} : null + contents.push( + <>{piece}{overlay} + ); + }) + } return (
- {this.logs[index]} + {contents.length > 1 ? contents : item}
); } @@ -207,6 +229,8 @@ export class PodLogs extends React.Component { logs={this.logs} save={this.save} reload={this.reload} + search={this.findQuery} + onSearch={this.onSearch} /> ) return (