feat: search in service logs by adschwartz · Pull Request #1830 · kurtosis-tech/kurtosis

adschwartz · 2023-11-18T01:25:49Z

Description:

Adding a search bar to the service logs window

Is this change user facing?

YES

References (if applicable):

# Conflicts: # enclave-manager/web/src/components/enclaves/logs/LogViewer.tsx

# Conflicts: # engine/server/webapp/asset-manifest.json # engine/server/webapp/index.html # engine/server/webapp/static/js/main.045e0a73.js.LICENSE.txt # engine/server/webapp/static/js/main.045e0a73.js.map # engine/server/webapp/static/js/main.14d7f9cc.js.LICENSE.txt # engine/server/webapp/static/js/main.14d7f9cc.js.map # engine/server/webapp/static/js/main.9e07637a.js # engine/server/webapp/static/js/main.9e07637a.js.LICENSE.txt # engine/server/webapp/static/js/main.9e07637a.js.map

🤖 I have created a release *beep* *boop* --- ## [0.85.33](0.85.32...0.85.33) (2023-11-20) ### Features * search in service logs ([#1830](#1830)) ([7fce5b5](7fce5b5)), closes [#1791](#1791) --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: kurtosisbot <kurtosisbot@users.noreply.github.com>

Dartoxian

Nice job getting this out - I expect a decent amount of the feedback I've left here you're already aware of. The main piece of feedback I have is a strong preference to avoid chains of useEffect in response to callbacks - they make code harder to read and can eventually introduce bugs that are hard to trace. React has some notes on how to identify and remove avoidable effects here https://react.dev/learn/you-might-not-need-an-effect

Dartoxian · 2023-11-21T09:10:21Z

+export type LogLineInput = {
+  logLineProps: LogLineProps;
+  logLineSearch?: LogLineSearch;
+  selected: boolean | undefined;
+};
+
 const logFontFamily = "Menlo, Monaco, Inconsolata, Consolas, Courier, monospace";

-export const LogLine = ({ timestamp, message, status }: LogLineProps) => {


Here LogLineProps should have just become:

export type LogLineProps = { timestamp?: DateTime; message?: string; status?: LogStatus; selected?: boolean; logLineSearch?: LogLineSearch; }

Dartoxian · 2023-11-21T09:12:19Z

+  const HighlightPattern = ({
+    text,
+    regex,
+    selected,
+  }: {
+    text: string;
+    regex: RegExp;
+    selected: boolean | undefined;
+  }) => {


I don't think this component (because that's what it is) should be inlined with LogLineSearch - this means it's redefined on every render and defined for every LogLine. I think it's LogLine specific enough to just be another non exported component in this file.

Dartoxian · 2023-11-21T09:14:10Z

-  const processText = (message: string) => {
-    if (hasAnsi(message)) {
-      return parse(convert.toHtml(message));
+  const processText = (text: string, selected: boolean | undefined) => {


this is also actually another react component - it should be moved out of the LogLine component and given a better name as a (non exported) component like Message

Dartoxian · 2023-11-21T09:23:32Z

@@ -4,6 +4,9 @@ import { DateTime } from "luxon";
 import { isDefined } from "../../../utils";
 // @ts-ignore


Just noticed this - lets not use has-ansi (or its dependency ansi-regex) at all and just inline the code in src/utils/index.ts (and combine it with stripAnsi):

export function ansiRegex({ onlyFirst = false } = {}) { const pattern = [ "[\\u001B\\u009B][[\\]()#;?]*(?:(?:(?:(?:;[-a-zA-Z\\d\\/#&.:=?%@~_]+)*|[a-zA-Z\\d]+(?:;[-a-zA-Z\\d\\/#&.:=?%@~_]*)*)?\\u0007)", "(?:(?:\\d{1,4}(?:;\\d{0,4})*)?[\\dA-PR-TZcf-nq-uy=><~]))", ].join("|"); return new RegExp(pattern, onlyFirst ? undefined : "g"); } const regex = ansiRegex({ onlyFirst: true }); export function hasAnsi(text: string) { return regex.test(text); }

Dartoxian · 2023-11-21T09:25:04Z

 // @ts-ignore
 import hasAnsi from "has-ansi";
+import { ReactElement } from "react";
+import { normalizeLogText } from "./LogViewer";


This is a circular dependency now between LogLine and LogViewer - this should be avoided, and this method should be moved to a utils file.

Dartoxian · 2023-11-21T09:45:13Z

+    const searchTerm = normalizeLogText(rawText);
+    const logLineSearch: LogLineSearch = {
+      searchTerm: searchTerm,
+      pattern: new RegExp(searchTerm, "gi"), // `i` is invariant case


i is case insensitive

Dartoxian · 2023-11-21T09:55:44Z

+    if (!search) return false;
+    return isDefined(search.searchTerm) && isNotEmpty(search.searchTerm);


(nit):

return isDefined(search?.searchTerm) && isNotEmpty(search.searchTerm);

Dartoxian · 2023-11-21T09:56:34Z

+    debouncedUpdateSearchTermCallback(e.target.value);
+  };
+
+  const priorMatch = () => {


(very minor) wasn't immediately obvious to me this is a function - should be named something like handlePriorMatchClick

Dartoxian · 2023-11-21T09:58:21Z

+  useEffect(() => {
+    if (virtuosoRef?.current && currentSearchIndex !== undefined && currentSearchIndex >= 0) {
+      virtuosoRef.current.scrollToIndex(searchMatchesIndices[currentSearchIndex]);
+    }
+  }, [currentSearchIndex]);


this should not be a useEffect and should probably be either in a callback or called direct from the navigation/find matches code.

Dartoxian · 2023-11-21T10:05:18Z

+                          <Editable
+                            p={0}
+                            m={0}
+                            size={"sm"}
+                            value={`${currentSearchIndex + 1}`}
+                            onChange={(inputString) =>
+                              updateSearchIndexBounded(parseMatchIndexRequest(inputString) - 1)
+                            }
+                          >


I'm not familiar with this component, but wondering if we can apply numeric constraint to it.

## Description: This PR includes a number or emui enhancements: * Artifacts view * fix to dict/list input sizes * Update logging ui to match designs * Update general app layout to match designs (headers) Additionally the feedback left on #1830 is implemented. ### Demo of the artifacts view https://github.com/kurtosis-tech/kurtosis/assets/4419574/0849e46e-c410-4a07-a65f-bcc74297c53b ## Is this change user facing? YES

Anders Schwartz added 5 commits November 16, 2023 19:07

wip

3125223

Merge branch 'main' into anders/search

ac0be3b

# Conflicts: # enclave-manager/web/src/components/enclaves/logs/LogViewer.tsx

feat: search

da2dffd

adding highlighting

a505e9f

Merge branch 'main' into anders/search

ba19516

adschwartz requested a review from Dartoxian November 18, 2023 01:25

build

01b4afc

adschwartz enabled auto-merge November 18, 2023 12:34

adschwartz disabled auto-merge November 18, 2023 12:34

Anders Schwartz added 2 commits November 20, 2023 12:06

new build

58793f8

adschwartz enabled auto-merge November 20, 2023 17:08

tedim52 approved these changes Nov 20, 2023

View reviewed changes

Merge branch 'main' into anders/search

d2b83a4

adschwartz added this pull request to the merge queue Nov 20, 2023

Merged via the queue into main with commit 7fce5b5 Nov 20, 2023

adschwartz deleted the anders/search branch November 20, 2023 17:57

kurtosisbot mentioned this pull request Nov 20, 2023

chore(main): release 0.85.33 #1836

Merged

Dartoxian reviewed Nov 21, 2023

View reviewed changes

This was referenced Nov 21, 2023

chore: Implement logs navigation feedback #1837

Closed

feat: emui enhancements #1847

Merged

kurtosisbot mentioned this pull request Nov 1, 2024

chore(main): release kurtosis 2.0.0 #2589

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: search in service logs#1830

feat: search in service logs#1830
adschwartz merged 9 commits into
mainfrom
anders/search

adschwartz commented Nov 18, 2023

Uh oh!

Dartoxian left a comment

Uh oh!

Dartoxian Nov 21, 2023

Uh oh!

Dartoxian Nov 21, 2023

Uh oh!

Dartoxian Nov 21, 2023

Uh oh!

Dartoxian Nov 21, 2023

Uh oh!

Dartoxian Nov 21, 2023

Uh oh!

Dartoxian Nov 21, 2023

Uh oh!

Dartoxian Nov 21, 2023

Uh oh!

Dartoxian Nov 21, 2023

Uh oh!

Dartoxian Nov 21, 2023

Uh oh!

Dartoxian Nov 21, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		@@ -4,6 +4,9 @@ import { DateTime } from "luxon";
		import { isDefined } from "../../../utils";
		// @ts-ignore

		if (!search) return false;
		return isDefined(search.searchTerm) && isNotEmpty(search.searchTerm);

Conversation

adschwartz commented Nov 18, 2023

Description:

Is this change user facing?

References (if applicable):

Uh oh!

Dartoxian left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants