feat: side panel aka refrigerator for query text in top queries #2134

astandrik · 2025-04-10T15:41:31Z

Closes #2079

CI Results

Test Status: ⚠️ FLAKY

Total	Passed	Failed	Flaky	Skipped
318	317	0	1	0

😟 No changes in tests. 😕

Bundle Size: 🔺

Current: 83.53 MB | Main: 83.47 MB
Diff: +0.06 MB (0.07%)

⚠️ Bundle size increased. Please review.

ℹ️ CI Information

Test recordings for failed tests are available in the full report.
Bundle size is measured for the entire 'dist' directory.
📊 indicates links to detailed reports.
🔺 indicates increase, 🔽 decrease, and ✅ no change in bundle size.

astandrik · 2025-04-18T12:26:34Z

pasting sharing link to tg is not working

astandrik · 2025-04-18T15:20:57Z

pasting sharing link to tg is not working

fixed

astandrik · 2025-04-18T17:28:26Z

should fix design review now

Copilot

Pull Request Overview

This PR introduces a side panel ("refrigerator") to display detailed query text and related information in the Top Queries view. Key changes include:

Updating sorting behavior in Top Queries by accepting an optional initial sort parameter.
Adding a new drawer component for displaying query details.
Refactoring row selection and active state highlighting logic in both TopQueriesData and RunningQueriesData.

Reviewed Changes

Copilot reviewed 19 out of 24 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/containers/Tenant/Diagnostics/TopQueries/utils.ts	Adds an optional initialSort parameter and a new utility to create InfoViewer items.
src/containers/Tenant/Diagnostics/TopQueries/hooks/useSetSelectedTopQueryRowFromParams.ts	Introduces a hook to select a query row based on URL params.
src/containers/Tenant/Diagnostics/TopQueries/hooks/useGetSelectedRowTableSort.ts	Adds support for retrieving sort order from URL params.
src/containers/Tenant/Diagnostics/TopQueries/columns/constants.ts	Updates query columns by adding a new 'QueryHash' column.
src/containers/Tenant/Diagnostics/TopQueries/columns/columns.tsx	Adjusts the ordering of columns for running queries.
src/containers/Tenant/Diagnostics/TopQueries/TopQueriesData.tsx	Refactors row click handling and integrates the new query details drawer.
src/containers/Tenant/Diagnostics/TopQueries/TopQueries.tsx	Removes now-unused row click handlers in favor of the new drawer logic.
src/containers/Tenant/Diagnostics/TopQueries/RunningQueriesData.tsx	Applies similar refactoring as TopQueriesData for consistency in handling selected rows and drawer display.
src/containers/Tenant/Diagnostics/TopQueries/QueryDetails/*	New files for rendering query details including the drawer content and copy link button.
src/containers/Drawer/Drawer.tsx	Implements a new drawer container and item wrapper used across query details views.
src/components/SyntaxHighlighter/YDBSyntaxHighlighter.tsx	Enhances the syntax highlighter with dynamic padding based on clipboard button settings.
src/components/Search/Search.tsx	Adds support for passing an input ref to the Search component.
src/containers/Tenant/Diagnostics/Diagnostics.tsx	Wraps page content in the new Drawer container to support drawer overlays.

Files not reviewed (5)

src/containers/Drawer/Drawer.scss: Language not supported
src/containers/Tenant/Diagnostics/Diagnostics.scss: Language not supported
src/containers/Tenant/Diagnostics/TopQueries/QueryDetails/QueryDetails.scss: Language not supported
src/containers/Tenant/Diagnostics/TopQueries/TopQueries.scss: Language not supported
src/containers/Tenant/Diagnostics/TopQueries/i18n/en.json: Language not supported

src/containers/Tenant/Diagnostics/TopQueries/RunningQueriesData.tsx

astandrik · 2025-04-24T11:02:42Z

@artemmufazalov @Raubzeug ping

Raubzeug · 2025-04-24T07:00:19Z

src/components/SyntaxHighlighter/YDBSyntaxHighlighter.tsx

+        withClipboardButton.alwaysVisible
+    ) {
+        if (withClipboardButton.withLabel) {
+            paddingStyles = {paddingRight: 80};


src/containers/Drawer/Drawer.tsx

Raubzeug · 2025-04-24T11:18:38Z

src/containers/Tenant/Diagnostics/TopQueries/QueryDetails/QueryDetails.tsx

+                </div>
+            </div>
+
+            <Fullscreen>


Decided to get rid of Fullscreen view, isn't it?

Raubzeug · 2025-04-24T11:19:54Z

src/containers/Tenant/Diagnostics/TopQueries/QueryDetails/QueryDetailsDrawerContent.tsx

+    }
+
+    return (
+        <div className={b('not-found-container')}>


Maybe separate component?

astandrik · 2025-04-29T10:13:59Z

decided to merge refrigerator independently #2224

astandrik · 2025-05-12T21:58:06Z

fixed review issues

astandrik · 2025-05-12T22:34:01Z

Stand redeployed

Raubzeug · 2025-05-13T06:09:31Z

src/components/Drawer/Drawer.tsx

-    | {type: 'close'}
-    | {type: 'copyLink'; link: string}
-    | {type: 'custom'; node: React.ReactNode; key: string};
+    | {type: DrawerControlType.CLOSE}


why did you decide to use enum here? String has same type protection, but you should not import enum in any place you want to use drawer controls.

Raubzeug · 2025-05-13T06:10:03Z

src/containers/Tenant/Diagnostics/TopQueries/QueryDetails/NotFoundContainer.tsx

+
+export const NotFoundContainer = ({onClose}: NotFoundContainerProps) => {
+    return (
+        <div className={b('not-found-container')}>


Raubzeug · 2025-05-13T06:10:32Z

src/containers/Tenant/Diagnostics/TopQueries/QueryDetails/QueryDetails.scss

@@ -0,0 +1,45 @@
+@import '../../../../../styles/mixins.scss';
+
+.kv-query-details {


lets change prefix to ydb-

Raubzeug · 2025-05-13T06:10:57Z

src/containers/Tenant/Diagnostics/TopQueries/QueryDetails/QueryDetails.tsx

+
+export const QueryDetails = ({queryText, infoItems, onOpenInEditor}: QueryDetailsProps) => {
+    return (
+        <div className={b()}>


Raubzeug · 2025-05-13T06:31:39Z

src/containers/Tenant/Diagnostics/TopQueries/TopQueriesData.tsx

+
+    const renderDrawerContent = React.useCallback(() => {
+        if (!isDrawerVisible) {
+            return null;


As for me this case should be processed in Drawer component.

Raubzeug · 2025-05-13T06:33:22Z

src/containers/Tenant/Diagnostics/TopQueries/i18n/en.json

+  "query-details.not-found.title": "Not found",
+  "query-details.not-found.description": "This query no longer exists",
+  "query-not-found": "Query Not Found",
+  "query-not-found.description": "The selected query is no longer available in the current dataset",


It seems this key is not be used

Raubzeug · 2025-05-13T06:33:47Z

src/containers/Tenant/Diagnostics/TopQueries/i18n/en.json

+  "query-details.query.title": "Query Text",
+  "query-details.not-found.title": "Not found",
+  "query-details.not-found.description": "This query no longer exists",
+  "query-not-found": "Query Not Found",


It seems this key is not be used

Raubzeug · 2025-05-13T06:34:21Z

src/containers/Tenant/Diagnostics/TopQueries/i18n/en.json

+  "query-details.not-found.description": "This query no longer exists",
+  "query-not-found": "Query Not Found",
+  "query-not-found.description": "The selected query is no longer available in the current dataset",
+  "query-details.copy-link": "Copy link to query",


Raubzeug · 2025-05-13T06:34:26Z

src/containers/Tenant/Diagnostics/TopQueries/i18n/en.json

+  "query-not-found": "Query Not Found",
+  "query-not-found.description": "The selected query is no longer available in the current dataset",
+  "query-details.copy-link": "Copy link to query",
+  "query-details.link-copied": "Copied to clipboard"


astandrik · 2025-05-13T10:11:46Z

redeployed stand

astandrik force-pushed the astandrik.2079 branch from 3ea2bd5 to 89ed060 Compare April 15, 2025 16:55

astandrik force-pushed the astandrik.2079 branch from 702d798 to 8d69beb Compare April 21, 2025 08:53

astandrik requested a review from Copilot April 21, 2025 14:50

Copilot AI reviewed Apr 21, 2025

View reviewed changes

src/containers/Tenant/Diagnostics/TopQueries/RunningQueriesData.tsx Outdated Show resolved Hide resolved

astandrik requested review from Raubzeug and artemmufazalov April 21, 2025 14:54

astandrik marked this pull request as ready for review April 21, 2025 14:54

Raubzeug requested changes Apr 24, 2025

View reviewed changes

astandrik force-pushed the astandrik.2079 branch 2 times, most recently from dfe1cdc to 85933b2 Compare May 5, 2025 14:09

astandrik force-pushed the astandrik.2079 branch from 85933b2 to 79b586c Compare May 12, 2025 14:53

astandrik and others added 6 commits May 12, 2025 23:54

feat: Drawer

672c68a

fix: minor fixes

c44f1cb

fix: nanofixes

3615357

fix: more fixes

ba93521

fix: isEqual

eceba42

fix: move to separate container

dfd6964

astandrik force-pushed the astandrik.2079 branch from 7e5b7b6 to dfd6964 Compare May 12, 2025 21:46

astandrik requested a review from Raubzeug May 12, 2025 21:58

astandrik added 3 commits May 13, 2025 01:00

fix: remove junk

523f8d0

fix: panel height

3552825

fix: fix padding

d9db6cc

Raubzeug requested changes May 13, 2025

View reviewed changes

fix: review fixes

30a741f

astandrik requested a review from Raubzeug May 13, 2025 09:48

fix: move isDrawerVisible to inner

48aae89

Raubzeug approved these changes May 13, 2025

View reviewed changes

astandrik added this pull request to the merge queue May 13, 2025

Merged via the queue into main with commit e2c269a May 13, 2025
7 checks passed

astandrik deleted the astandrik.2079 branch May 13, 2025 11:11

ydb-platform-bot mentioned this pull request May 13, 2025

chore(main): release 9.0.0 #2255

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: side panel aka refrigerator for query text in top queries #2134

feat: side panel aka refrigerator for query text in top queries #2134

astandrik commented Apr 10, 2025 •

edited by github-actions bot

Loading

astandrik commented Apr 18, 2025

astandrik commented Apr 18, 2025

astandrik commented Apr 18, 2025

Copilot AI left a comment

astandrik commented Apr 24, 2025

Raubzeug Apr 24, 2025

Raubzeug Apr 24, 2025

Raubzeug Apr 24, 2025

astandrik commented Apr 29, 2025

astandrik commented May 12, 2025

astandrik commented May 12, 2025

Raubzeug May 13, 2025

Raubzeug May 13, 2025

Raubzeug May 13, 2025

Raubzeug May 13, 2025

Raubzeug May 13, 2025

Raubzeug May 13, 2025

Raubzeug May 13, 2025

Raubzeug May 13, 2025

Raubzeug May 13, 2025

astandrik commented May 13, 2025

		@@ -0,0 +1,45 @@
		@import '../../../../../styles/mixins.scss';

		.kv-query-details {

feat: side panel aka refrigerator for query text in top queries #2134

feat: side panel aka refrigerator for query text in top queries #2134

Conversation

astandrik commented Apr 10, 2025 • edited by github-actions bot Loading

CI Results

Test Status: ⚠️ FLAKY

Bundle Size: 🔺

astandrik commented Apr 18, 2025

astandrik commented Apr 18, 2025

astandrik commented Apr 18, 2025

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

astandrik commented Apr 24, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

astandrik commented Apr 29, 2025

astandrik commented May 12, 2025

astandrik commented May 12, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

astandrik commented May 13, 2025

astandrik commented Apr 10, 2025 •

edited by github-actions bot

Loading