Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Wrap pod logs #6217

Open
wants to merge 77 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
77 commits
Select commit Hold shift + click to select a range
da39984
Create functional LogList component
aleksfront Aug 29, 2022
d51c327
Add tanstack/react-virtual dependency
aleksfront Aug 29, 2022
6f91071
Using new <LogList/>
aleksfront Aug 31, 2022
843c0f7
Remove overflow from the LogControls
aleksfront Sep 1, 2022
85fadc7
Set some list onScroll events
aleksfront Sep 1, 2022
88678f6
Load more logs when scrolled to top
aleksfront Sep 1, 2022
e02278d
Merge branch 'master' into wrap-pod-logs
aleksfront Sep 1, 2022
e16fcf2
Remove overflow from the LogControls
aleksfront Sep 1, 2022
af8f39f
Show logs regarding to showTimestamps flag
aleksfront Sep 1, 2022
62cc0d7
Keep scrolling position when loaded more logs
aleksfront Sep 2, 2022
6d0d524
Merge branch 'master' into wrap-pod-logs
aleksfront Sep 2, 2022
968621f
Fix scroll position when more logs loaded
aleksfront Sep 2, 2022
c4538e9
Scroll to bottom on pod id change
aleksfront Sep 2, 2022
1679ba1
Scroll to bottom on tab change
aleksfront Sep 5, 2022
2e0b4d1
Add LogList external styles
aleksfront Sep 5, 2022
da8570d
Add more styles
aleksfront Sep 5, 2022
f09974f
Move LogRow to its own file
aleksfront Sep 5, 2022
f90ede1
Scroll to overlay from the search
aleksfront Sep 5, 2022
c4ae074
Add wrapper switch
aleksfront Sep 5, 2022
5443f40
Highlight log row on hover
aleksfront Sep 6, 2022
b989340
Refresh rows measurement by refreshing their keys
aleksfront Sep 6, 2022
8ed40ff
Create useScrollToBottomButton hook
aleksfront Sep 6, 2022
4c74d5a
Add useInitialScrollToBottom() hook
aleksfront Sep 6, 2022
b8f4fa1
Show Jump to bottom button
aleksfront Sep 6, 2022
6ec7618
Restyling Jump to bottom button
aleksfront Sep 6, 2022
51c059f
Give more room to the LogRows content
aleksfront Sep 6, 2022
7b53650
Hook function renaming
aleksfront Sep 6, 2022
05a3ed0
Fix scrolling to items on search
aleksfront Sep 6, 2022
dadd69e
Add useIntersectionObserver() hook
aleksfront Sep 7, 2022
1898a4d
Remove unused code
aleksfront Sep 7, 2022
d37ae1b
Fixing ts compilation errors
aleksfront Sep 7, 2022
ac8ed14
Scroll list to bottom when new logs arrived
aleksfront Sep 8, 2022
d951f3a
Move all side effects to hooks
aleksfront Sep 8, 2022
2d69bbc
Fix linter errors
aleksfront Sep 8, 2022
64773f3
Unify styles for the top and bottom lines
aleksfront Sep 9, 2022
511fc09
Prevent useEffect not firing with because of condition
aleksfront Sep 9, 2022
e82f83f
Use named export for useIntersectionObserver
aleksfront Sep 9, 2022
aeb0127
Disable smooth scrolling
aleksfront Sep 9, 2022
c4f41db
Increase timeout delay to wait virtualizer
aleksfront Sep 9, 2022
0383666
Remove unused files
aleksfront Sep 9, 2022
0de9b9c
Decrease scroll to bottom timeout time a bit
aleksfront Sep 9, 2022
66dbced
Merge branch 'master' into wrap-pod-logs
aleksfront Sep 9, 2022
85426ac
Remove a leftover
aleksfront Sep 9, 2022
31c7ae1
Merge branch 'master' into wrap-pod-logs
aleksfront Nov 28, 2022
7ce064c
Fixing to-bottom tests
aleksfront Nov 28, 2022
6b2b9bc
Bump @tanstack/react-virtual version
aleksfront Nov 28, 2022
d598ee5
Fix download-logs tests
aleksfront Nov 28, 2022
efc7972
Fixing log-search tests
aleksfront Nov 28, 2022
a1e54ee
Align with latest Virtualizer API
aleksfront Nov 28, 2022
6a1c607
Fixing smoke tests
aleksfront Nov 28, 2022
24d059f
Testing log lines wrap
aleksfront Nov 28, 2022
cbee791
Fix selector
aleksfront Nov 28, 2022
c8998eb
Add missing click event
aleksfront Nov 28, 2022
4e3c596
Few line characters, bigger timeout
aleksfront Nov 29, 2022
f8c0028
Updating snapshots
aleksfront Nov 29, 2022
fb2b3ff
Add navigateToPods step
aleksfront Nov 29, 2022
b88a9c3
Navigate to pods at the start of the test
aleksfront Nov 29, 2022
3748e94
Remove unused waitForSelector
aleksfront Nov 29, 2022
8551385
Change namespace to default
aleksfront Nov 29, 2022
5a41265
Fix logline selector
aleksfront Nov 29, 2022
0f6b0f3
Fixing finding wrapped log line height
aleksfront Nov 30, 2022
8d2d9e8
Insert very long log contents
aleksfront Dec 1, 2022
f181081
Linter fix
aleksfront Dec 1, 2022
13257f0
Set viewport size for the tests
aleksfront Dec 1, 2022
d19e65b
Fix click .wrap-logs click event
aleksfront Dec 1, 2022
2c2266e
Adding hard wait for debugging
aleksfront Dec 1, 2022
a49c947
Test for white-space rule changing
aleksfront Dec 2, 2022
5921098
Search for element using getByTestId
aleksfront Dec 2, 2022
8566ae8
Using asElement() for assertions
aleksfront Dec 2, 2022
4fbaa7f
Use getByText from frame selector
aleksfront Dec 2, 2022
59d0790
Testing bounding boxes
aleksfront Dec 2, 2022
178c1f0
More testing of bounding box
aleksfront Dec 2, 2022
f957eb0
Testing check() instead of click()
aleksfront Dec 2, 2022
5f660bb
Use click instead of check
aleksfront Dec 2, 2022
1af76e1
Check if .wrap class applied properly
aleksfront Dec 5, 2022
be2cb63
Remove e2e wrap logs test case
aleksfront Dec 5, 2022
a38fdc7
Linter fixes
aleksfront Dec 5, 2022
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 12 additions & 6 deletions integration/__tests__/cluster-pages.tests.ts
Original file line number Diff line number Diff line change
Expand Up @@ -105,27 +105,33 @@ describeIf(minikubeReady(TEST_NAMESPACE))("Minikube based tests", () => {

// Check if controls are available
await frame.waitForSelector(".Dock.isOpen");
await frame.waitForSelector(".LogList .VirtualList");
await frame.waitForSelector("[data-testid=pod-log-list]");
await frame.waitForSelector(".LogResourceSelector");

const logSearchInput = await frame.waitForSelector(
".LogSearch .SearchInput input",
);

await logSearchInput.type(":");
await frame.waitForSelector(".LogList .list span.active");
await frame.waitForSelector("[data-testid=search-overlay-active]");

const showTimestampsButton = await frame.waitForSelector(
const showTimestampsCheckbox = await frame.waitForSelector(
"[data-testid='log-controls'] .show-timestamps",
);

await showTimestampsButton.click();
await showTimestampsCheckbox.click();

const showPreviousButton = await frame.waitForSelector(
const showPreviousCheckbox = await frame.waitForSelector(
"[data-testid='log-controls'] .show-previous",
);

await showPreviousButton.click();
await showPreviousCheckbox.click();

const showWrapLogsCheckbox = await frame.waitForSelector(
"[data-testid='log-controls'] .wrap-logs",
);

await showWrapLogsCheckbox.click();
},
10 * 60 * 1000,
);
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -228,6 +228,7 @@
"@sentry/electron": "^3.0.8",
"@sentry/integrations": "^6.19.3",
"@side/jest-runtime": "^1.0.1",
"@tanstack/react-virtual": "3.0.0-beta.23",
"@types/circular-dependency-plugin": "5.0.5",
"abort-controller": "^3.0.0",
"auto-bind": "^4.0.0",
Expand Down
89 changes: 68 additions & 21 deletions src/features/pod-logs/__snapshots__/download-logs.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -746,31 +746,37 @@ exports[`download logs options in logs dock tab opening pod logs when logs avail
</div>
</div>
<div
class="LogList flex"
class="LogList"
data-testid="pod-log-list"
>
<div
class="VirtualList box grow"
class="virtualizer"
style="height: 0px;"
>
<div>
<div
class="list"
style="position: relative; height: 420000px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
>
<div
class="anchorLine"
style="top: 0px;"
/>
<div
class="rowWrapper"
data-index="0"
style="transform: translateY(0px);"
>
<div>
<div
style="height: 18px; width: 100%;"
class="LogRow"
>
<div
class="LogRow"
style="position: absolute; left: 0px; top: 0px; height: 18px; width: 100%;"
>
<span>
some-logs
</span>
<br />
</div>
<span>
some-logs
</span>
<br />
</div>
</div>
</div>
<div
class="anchorLine"
style="bottom: 0px;"
/>
</div>
</div>
<div
Expand All @@ -789,6 +795,21 @@ exports[`download logs options in logs dock tab opening pod logs when logs avail
<div
class="flex gaps align-center"
>
<label
class="Checkbox flex align-center wrap-logs"
>
<input
type="checkbox"
/>
<i
class="box flex align-center"
/>
<span
class="label"
>
Wrap logs
</span>
</label>
<label
class="Checkbox flex align-center show-timestamps"
>
Expand Down Expand Up @@ -1599,11 +1620,22 @@ exports[`download logs options in logs dock tab opening pod logs when logs not a
</div>
</div>
<div
class="LogList flex box grow align-center justify-center"
class="LogList"
data-testid="pod-log-list"
>
There are no logs available for container

docker-exporter
<div
class="virtualizer"
style="height: 0px;"
>
<div
class="anchorLine"
style="top: 0px;"
/>
<div
class="anchorLine"
style="bottom: 0px;"
/>
</div>
</div>
<div
class="controls"
Expand All @@ -1613,6 +1645,21 @@ exports[`download logs options in logs dock tab opening pod logs when logs not a
<div
class="flex gaps align-center"
>
<label
class="Checkbox flex align-center wrap-logs"
>
<input
type="checkbox"
/>
<i
class="box flex align-center"
/>
<span
class="label"
>
Wrap logs
</span>
</label>
<label
class="Checkbox flex align-center show-timestamps"
>
Expand Down
12 changes: 12 additions & 0 deletions src/features/pod-logs/download-logs.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,17 @@ import showErrorNotificationInjectable from "../../renderer/components/notificat
import type { DiContainer } from "@ogre-tools/injectable";
import type { Container } from "../../common/k8s-api/endpoints";

const observe = jest.fn();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: set it inline below?


Object.defineProperty(window, "IntersectionObserver", {
writable: true,
value: jest.fn().mockImplementation(() => ({
observe,
disconnect: jest.fn(),
unobserve: jest.fn(),
})),
});

describe("download logs options in logs dock tab", () => {
let windowDi: DiContainer;
let rendered: RenderResult;
Expand Down Expand Up @@ -71,6 +82,7 @@ describe("download logs options in logs dock tab", () => {
namespace: "default",
showPrevious: true,
showTimestamps: false,
wrap: false,
}));
windowDi.override(setLogTabDataInjectable, () => jest.fn());
windowDi.override(loadLogsInjectable, () => jest.fn());
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<LogList /> renders logs 1`] = `
<div>
<div
class="LogList"
data-testid="pod-log-list"
>
<div
class="virtualizer"
style="height: 0px;"
>
<div
class="anchorLine"
style="top: 0px;"
/>
<div
class="rowWrapper"
data-index="0"
style="transform: translateY(0px);"
>
<div>
<div
class="LogRow"
>
<span>
hello
</span>
<br />
</div>
</div>
</div>
<div
class="rowWrapper"
data-index="1"
style="transform: translateY(0px);"
>
<div>
<div
class="LogRow"
>
<span>
world
</span>
<br />
</div>
</div>
</div>
<div
class="anchorLine"
style="bottom: 0px;"
/>
</div>
</div>
</div>
`;

exports[`<LogList /> when user selected to wrap log lines renders logs with wrapping 1`] = `
<div>
<div
class="LogList"
data-testid="pod-log-list"
>
<div
class="virtualizer"
style="height: 0px;"
>
<div
class="anchorLine"
style="top: 0px;"
/>
<div
class="rowWrapper wrap"
data-index="0"
style="transform: translateY(0px);"
>
<div>
<div
class="LogRow"
>
<span>
hello
</span>
<br />
</div>
</div>
</div>
<div
class="rowWrapper wrap"
data-index="1"
style="transform: translateY(0px);"
>
<div>
<div
class="LogRow"
>
<span>
world
</span>
<br />
</div>
</div>
</div>
<div
class="anchorLine"
style="bottom: 0px;"
/>
</div>
</div>
</div>
`;
Loading