diff --git a/src/renderer/components/dock/pod-log-search.scss b/src/renderer/components/dock/pod-log-search.scss index 0728be1dc8..f7e43b8427 100644 --- a/src/renderer/components/dock/pod-log-search.scss +++ b/src/renderer/components/dock/pod-log-search.scss @@ -1,6 +1,7 @@ .PodLogsSearch { .SearchInput { min-width: 150px; + width: 150px; label { background: none; @@ -8,5 +9,9 @@ border-radius: $radius; box-shadow: 0 0 0 1px $halfGray; } + + .find-count { + margin-left: 2px; + } } } \ No newline at end of file diff --git a/src/renderer/components/dock/pod-log-search.tsx b/src/renderer/components/dock/pod-log-search.tsx index 35b6010bba..2271e2e8f4 100644 --- a/src/renderer/components/dock/pod-log-search.tsx +++ b/src/renderer/components/dock/pod-log-search.tsx @@ -17,8 +17,13 @@ export interface PodLogSearchProps { export const PodLogSearch = observer((props: PodLogSearchProps) => { const { logs, onSearch, toPrevOverlay, toNextOverlay } = props; - const { setNextOverlayActive, setPrevOverlayActive, searchQuery, occurrences } = searchStore; + const { setNextOverlayActive, setPrevOverlayActive, searchQuery, occurrences, activeFind, totalFinds } = searchStore; const jumpDisabled = !searchQuery || !occurrences.length; + const findCounts = ( +
+ {activeFind}/{totalFinds} +
+ ); const setSearch = (query: string) => { searchStore.onSearch(logs, query); @@ -40,9 +45,9 @@ export const PodLogSearch = observer((props: PodLogSearchProps) => { 0 && findCounts} /> - {/* {activeOverlay} / {totalOverlays} */} { onClick={onNextOverlay} disabled={jumpDisabled} /> + setSearch("")} + /> ); }); \ No newline at end of file diff --git a/src/renderer/components/dock/search.store.ts b/src/renderer/components/dock/search.store.ts index 1b0bae31dc..724cf9aff0 100644 --- a/src/renderer/components/dock/search.store.ts +++ b/src/renderer/components/dock/search.store.ts @@ -87,6 +87,14 @@ export class SearchStore { return this.occurrences[this.activeOverlayIndex]; } + @computed get activeFind(): number { + return this.activeOverlayIndex + 1; + } + + @computed get totalFinds(): number { + return this.occurrences.length; + } + /** * Checks if overlay is active (to highlight it with orange background usually) * @param line Index of the line where overlay is located @@ -110,6 +118,7 @@ export class SearchStore { reset() { this.searchQuery = ""; this.activeOverlayIndex = -1; + this.occurrences = []; } }