feat(RunningQueries): add userSID search (#1462)

sareyu · astandrik · web-flow · commit 1194b34cacac · 2024-10-16T10:58:51.000Z
Co-authored-by: Anton Standrik &lt;astandrik@gmail.com&gt;
diff --git a/src/containers/Tenant/Diagnostics/TopQueries/RunningQueriesData.tsx b/src/containers/Tenant/Diagnostics/TopQueries/RunningQueriesData.tsx
@@ -4,6 +4,7 @@ import {ResponseError} from '../../../../components/Errors/ResponseError';
 import {ResizeableDataTable} from '../../../../components/ResizeableDataTable/ResizeableDataTable';
 import {TableWithControlsLayout} from '../../../../components/TableWithControlsLayout/TableWithControlsLayout';
 import {topQueriesApi} from '../../../../store/reducers/executeTopQueries/executeTopQueries';
+import type {KeyValueRow} from '../../../../types/api/query';
 import {useAutoRefreshInterval, useTypedSelector} from '../../../../utils/hooks';
 import {parseQueryErrorToString} from '../../../../utils/query';
 import {QUERY_TABLE_SETTINGS} from '../../utils/constants';
@@ -16,12 +17,14 @@ import i18n from './i18n';
 
 interface Props {
     database: string;
+    onRowClick: (query: string) => void;
+    rowClassName: string;
 }
 
-export const RunningQueriesData = ({database}: Props) => {
+export const RunningQueriesData = ({database, onRowClick, rowClassName}: Props) => {
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const filters = useTypedSelector((state) => state.executeTopQueries);
-    const {currentData, isFetching, error} = topQueriesApi.useGetRunningQueriesQuery(
+    const {currentData, isLoading, error} = topQueriesApi.useGetRunningQueriesQuery(
         {
             database,
             filters,
@@ -31,16 +34,22 @@ export const RunningQueriesData = ({database}: Props) => {
 
     const data = currentData?.resultSets?.[0].result || [];
 
+    const handleRowClick = (row: KeyValueRow) => {
+        return onRowClick(row.QueryText as string);
+    };
+
     return (
         <React.Fragment>
             {error ? <ResponseError error={parseQueryErrorToString(error)} /> : null}
-            <TableWithControlsLayout.Table loading={isFetching && data === undefined}>
+            <TableWithControlsLayout.Table loading={isLoading}>
                 <ResizeableDataTable
                     emptyDataMessage={i18n('no-data')}
                     columnsWidthLSKey={RUNNING_QUERIES_COLUMNS_WIDTH_LS_KEY}
                     columns={RUNNING_QUERIES_COLUMNS}
                     data={data}
                     settings={QUERY_TABLE_SETTINGS}
+                    onRowClick={handleRowClick}
+                    rowClassName={() => rowClassName}
                 />
             </TableWithControlsLayout.Table>
         </React.Fragment>
diff --git a/src/containers/Tenant/Diagnostics/TopQueries/TopQueries.tsx b/src/containers/Tenant/Diagnostics/TopQueries/TopQueries.tsx
@@ -93,6 +93,8 @@ export const TopQueries = ({tenantName}: TopQueriesProps) => {
         dispatch(setTopQueriesFilters(value));
     };
 
+    const DataComponent = isTopQueries ? TopQueriesData : RunningQueriesData;
+
     return (
         <TableWithControlsLayout>
             <TableWithControlsLayout.Controls>
@@ -115,11 +117,7 @@ export const TopQueries = ({tenantName}: TopQueriesProps) => {
                     />
                 ) : null}
             </TableWithControlsLayout.Controls>
-            {isTopQueries ? (
-                <TopQueriesData database={tenantName} onRowClick={onRowClick} />
-            ) : (
-                <RunningQueriesData database={tenantName} />
-            )}
+            <DataComponent database={tenantName} onRowClick={onRowClick} rowClassName={b('row')} />
         </TableWithControlsLayout>
     );
 };
diff --git a/src/containers/Tenant/Diagnostics/TopQueries/TopQueriesData.tsx b/src/containers/Tenant/Diagnostics/TopQueries/TopQueriesData.tsx
@@ -5,7 +5,6 @@ import {ResizeableDataTable} from '../../../../components/ResizeableDataTable/Re
 import {TableWithControlsLayout} from '../../../../components/TableWithControlsLayout/TableWithControlsLayout';
 import {topQueriesApi} from '../../../../store/reducers/executeTopQueries/executeTopQueries';
 import type {KeyValueRow} from '../../../../types/api/query';
-import {cn} from '../../../../utils/cn';
 import {isSortableTopQueriesProperty} from '../../../../utils/diagnostics';
 import {useAutoRefreshInterval, useTypedSelector} from '../../../../utils/hooks';
 import {parseQueryErrorToString} from '../../../../utils/query';
@@ -14,17 +13,16 @@ import {QUERY_TABLE_SETTINGS} from '../../utils/constants';
 import {TOP_QUERIES_COLUMNS, TOP_QUERIES_COLUMNS_WIDTH_LS_KEY} from './getTopQueriesColumns';
 import i18n from './i18n';
 
-const b = cn('kv-top-queries');
-
 interface Props {
     database: string;
     onRowClick: (query: string) => void;
+    rowClassName: string;
 }
 
-export const TopQueriesData = ({database, onRowClick}: Props) => {
+export const TopQueriesData = ({database, onRowClick, rowClassName}: Props) => {
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const filters = useTypedSelector((state) => state.executeTopQueries);
-    const {currentData, isFetching, error} = topQueriesApi.useGetTopQueriesQuery(
+    const {currentData, isLoading, error} = topQueriesApi.useGetTopQueriesQuery(
         {
             database,
             filters,
@@ -46,15 +44,15 @@ export const TopQueriesData = ({database, onRowClick}: Props) => {
     return (
         <React.Fragment>
             {error ? <ResponseError error={parseQueryErrorToString(error)} /> : null}
-            <TableWithControlsLayout.Table loading={isFetching && currentData === undefined}>
+            <TableWithControlsLayout.Table loading={isLoading}>
                 <ResizeableDataTable
                     emptyDataMessage={i18n('no-data')}
                     columnsWidthLSKey={TOP_QUERIES_COLUMNS_WIDTH_LS_KEY}
                     columns={columns}
                     data={data || []}
                     settings={QUERY_TABLE_SETTINGS}
                     onRowClick={handleRowClick}
-                    rowClassName={() => b('row')}
+                    rowClassName={() => rowClassName}
                 />
             </TableWithControlsLayout.Table>
         </React.Fragment>
diff --git a/src/containers/Tenant/Diagnostics/TopQueries/i18n/en.json b/src/containers/Tenant/Diagnostics/TopQueries/i18n/en.json
@@ -1,6 +1,6 @@
 {
   "no-data": "No data",
-  "filter.text.placeholder": "Search by query text...",
+  "filter.text.placeholder": "Search by query text or userSID...",
   "mode_top": "Top",
   "mode_running": "Running",
   "col_user": "User",
diff --git a/src/store/reducers/executeTopQueries/executeTopQueries.ts b/src/store/reducers/executeTopQueries/executeTopQueries.ts
@@ -94,10 +94,11 @@ export const topQueriesApi = api.injectEndpoints({
                 {signal},
             ) => {
                 try {
-                    const filterConditions = filters?.text ? `Query ILIKE '%${filters.text}%'` : '';
-                    const commonQueryPart = `SELECT UserSID, QueryStartAt, Query as QueryText, ApplicationName from \`.sys/query_sessions\` WHERE ${filterConditions || 'true'}`;
+                    const filterConditions = filters?.text
+                        ? `Query ILIKE '%${filters.text}%' OR UserSID ILIKE '%${filters.text}%'`
+                        : '';
 
-                    const queryText = `${commonQueryPart} AND Query NOT LIKE '${commonQueryPart}%' ORDER BY SessionStartAt limit 100`;
+                    const queryText = `SELECT UserSID, QueryStartAt, Query as QueryText, ApplicationName from \`.sys/query_sessions\` WHERE ${filterConditions || 'true'}  ORDER BY SessionStartAt limit 100`;
 
                     const response = await window.api.sendQuery(
                         {
@@ -114,6 +115,13 @@ export const topQueriesApi = api.injectEndpoints({
 
                     const data = parseQueryAPIExecuteResponse(response);
 
+                    /* filter running queries query itself */
+                    if (data?.resultSets?.[0]?.result) {
+                        data.resultSets[0].result = data.resultSets[0].result.filter(
+                            (item) => item.QueryText !== queryText,
+                        );
+                    }
+
                     return {data};
                 } catch (error) {
                     return {error};
diff --git a/src/store/reducers/executeTopQueries/utils.ts b/src/store/reducers/executeTopQueries/utils.ts
@@ -37,7 +37,9 @@ export function getFiltersConditions(path: string, filters?: TopQueriesFilters)
     }
 
     if (filters?.text) {
-        conditions.push(`QueryText ILIKE '%${filters.text}%'`);
+        conditions.push(
+            `(QueryText ILIKE '%${filters.text}%' OR UserSID ILIKE '%${filters.text}%')`,
+        );
     }
 
     return conditions.join(' AND ');
diff --git a/tests/suites/tenant/diagnostics/Diagnostics.ts b/tests/suites/tenant/diagnostics/Diagnostics.ts
@@ -88,15 +88,15 @@ export class Table {
     }
 
     async waitForCellValueByHeader(row: number, header: string, value: string) {
-        const headers = await this.getHeaders();
-        const colIndex = headers.indexOf(header);
-        if (colIndex === -1) {
-            throw new Error(`Header "${header}" not found`);
-        }
-        const cell = this.table.locator(
-            `tr.data-table__row:nth-child(${row}) td:nth-child(${colIndex + 1})`,
-        );
         await retryAction(async () => {
+            const headers = await this.getHeaders();
+            const colIndex = headers.indexOf(header);
+            if (colIndex === -1) {
+                throw new Error(`Header "${header}" not found`);
+            }
+            const cell = this.table.locator(
+                `tr.data-table__row:nth-child(${row}) td:nth-child(${colIndex + 1})`,
+            );
             const cellValue = (await cell.innerText()).trim();
             if (cellValue === value) {
                 return true;
diff --git a/tests/suites/tenant/diagnostics/diagnostics.test.ts b/tests/suites/tenant/diagnostics/diagnostics.test.ts
@@ -65,7 +65,6 @@ test.describe('Diagnostics tab', async () => {
         const diagnostics = new Diagnostics(page);
         await diagnostics.clickTab(DiagnosticsTab.Queries);
         await diagnostics.clickRadioSwitch(QueriesSwitch.Running);
-        expect(await diagnostics.table.getRowCount()).toBe(1);
         expect(
             await diagnostics.table.waitForCellValueByHeader(1, 'QueryText', longRunningQuery),
         ).toBe(true);

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"no-data": "No data",`
`3`		`- "filter.text.placeholder": "Search by query text...",`
	`3`	`+ "filter.text.placeholder": "Search by query text or userSID...",`
`4`	`4`	`"mode_top": "Top",`
`5`	`5`	`"mode_running": "Running",`
`6`	`6`	`"col_user": "User",`
Original file line number	Diff line number	Diff line change
`@@ -37,7 +37,9 @@ export function getFiltersConditions(path: string, filters?: TopQueriesFilters)`
`37`	`37`	`}`
`38`	`38`
`39`	`39`	`if (filters?.text) {`
`40`		- conditions.push(`QueryText ILIKE '%${filters.text}%'`);
	`40`	`+ conditions.push(`
	`41`	+ `(QueryText ILIKE '%${filters.text}%' OR UserSID ILIKE '%${filters.text}%')`,
	`42`	`+ );`
`41`	`43`	`}`
`42`	`44`
`43`	`45`	`return conditions.join(' AND ');`