Merge branch 'main' into astandrik.enable-autorefresh-for-paginated-t…

…ables-1070-2
ydb-platform · Aug 9, 2024 · 21f42c3 · 21f42c3
2 parents 0c76d4d + 085e116
commit 21f42c3
Show file tree

Hide file tree

Showing 19 changed files with 267 additions and 68 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -36,4 +36,4 @@
             "all"
         ],
     },
-}
+}
diff --git a/src/.eslintrc b/src/.eslintrc
@@ -15,6 +15,10 @@
                 "selector": "TSTypeReference>TSQualifiedName[left.name='React'][right.name='FC']",
                 "message": "Don't use React.FC",
             },
-        ],
+            {
+                "selector": "ImportDeclaration[source.value='axios'] :matches(ImportSpecifier[imported.name='isAxiosError'])",
+                "message": "Please use isAxiosError from utils/response instead of axios",
+            },
+          ],
     },
 }
diff --git a/src/components/QueryExecutionStatus/QueryExecutionStatus.tsx b/src/components/QueryExecutionStatus/QueryExecutionStatus.tsx
@@ -8,12 +8,12 @@ import {
     CircleXmark,
 } from '@gravity-ui/icons';
 import {Icon, Spin, Tooltip} from '@gravity-ui/uikit';
-import {isAxiosError} from 'axios';
 
 import i18n from '../../containers/Tenant/Query/i18n';
 import {isQueryCancelledError} from '../../containers/Tenant/Query/utils/isQueryCancelledError';
 import {cn} from '../../utils/cn';
 import {useChangedQuerySettings} from '../../utils/hooks/useChangedQuerySettings';
+import {isAxiosError} from '../../utils/response';
 import QuerySettingsDescription from '../QuerySettingsDescription/QuerySettingsDescription';
 
 import './QueryExecutionStatus.scss';

diff --git a/src/components/VDiskInfo/VDiskInfo.tsx b/src/components/VDiskInfo/VDiskInfo.tsx
@@ -1,11 +1,15 @@
+import React from 'react';
+
 import {getVDiskPagePath} from '../../routes';
+import {selectIsUserAllowedToMakeChanges} from '../../store/reducers/authentication/authentication';
 import {useDiskPagesAvailable} from '../../store/reducers/capabilities/hooks';
 import {valueIsDefined} from '../../utils';
 import {cn} from '../../utils/cn';
 import {formatStorageValuesToGb, stringifyVdiskId} from '../../utils/dataFormatters/dataFormatters';
 import {createVDiskDeveloperUILink} from '../../utils/developerUI/developerUI';
 import {getSeverityColor} from '../../utils/disks/helpers';
 import type {PreparedVDisk} from '../../utils/disks/types';
+import {useTypedSelector} from '../../utils/hooks';
 import {bytesToSpeed} from '../../utils/utils';
 import {EntityStatus} from '../EntityStatus/EntityStatus';
 import {InfoViewer} from '../InfoViewer';
@@ -33,6 +37,7 @@ export function VDiskInfo<T extends PreparedVDisk>({
     ...infoViewerProps
 }: VDiskInfoProps<T>) {
     const diskPagesAvailable = useDiskPagesAvailable();
+    const isUserAllowedToMakeChanges = useTypedSelector(selectIsUserAllowedToMakeChanges);
 
     const {
         AllocatedSize,
@@ -142,32 +147,47 @@ export function VDiskInfo<T extends PreparedVDisk>({
             value: bytesToSpeed(WriteThroughput),
         });
     }
-    if (valueIsDefined(PDiskId) && valueIsDefined(NodeId) && valueIsDefined(VDiskSlotId)) {
-        const vDiskPagePath = getVDiskPagePath(VDiskSlotId, PDiskId, NodeId);
-        const vDiskInternalViewerPath = createVDiskDeveloperUILink({
-            nodeId: NodeId,
-            pDiskId: PDiskId,
-            vDiskSlotId: VDiskSlotId,
-        });
 
-        vdiskInfo.push({
-            label: vDiskInfoKeyset('links'),
-            value: (
-                <span className={b('links')}>
-                    {withVDiskPageLink && diskPagesAvailable && (
-                        <LinkWithIcon
-                            title={vDiskInfoKeyset('vdisk-page')}
-                            url={vDiskPagePath}
-                            external={false}
-                        />
-                    )}
-                    <LinkWithIcon
-                        title={vDiskInfoKeyset('developer-ui')}
-                        url={vDiskInternalViewerPath}
-                    />
-                </span>
-            ),
-        });
+    const diskParamsDefined =
+        valueIsDefined(PDiskId) && valueIsDefined(NodeId) && valueIsDefined(VDiskSlotId);
+
+    if (diskParamsDefined) {
+        const links: React.ReactNode[] = [];
+
+        if (withVDiskPageLink && diskPagesAvailable) {
+            const vDiskPagePath = getVDiskPagePath(VDiskSlotId, PDiskId, NodeId);
+            links.push(
+                <LinkWithIcon
+                    key={vDiskPagePath}
+                    title={vDiskInfoKeyset('vdisk-page')}
+                    url={vDiskPagePath}
+                    external={false}
+                />,
+            );
+        }
+
+        if (isUserAllowedToMakeChanges) {
+            const vDiskInternalViewerPath = createVDiskDeveloperUILink({
+                nodeId: NodeId,
+                pDiskId: PDiskId,
+                vDiskSlotId: VDiskSlotId,
+            });
+
+            links.push(
+                <LinkWithIcon
+                    key={vDiskInternalViewerPath}
+                    title={vDiskInfoKeyset('developer-ui')}
+                    url={vDiskInternalViewerPath}
+                />,
+            );
+        }
+
+        if (links.length) {
+            vdiskInfo.push({
+                label: vDiskInfoKeyset('links'),
+                value: <div className={b('links')}>{links}</div>,
+            });
+        }
     }
 
     const title = data && withTitle ? <VDiskTitle data={data} /> : null;

diff --git a/src/containers/Tenant/Query/QueriesHistory/QueriesHistory.scss b/src/containers/Tenant/Query/QueriesHistory/QueriesHistory.scss
@@ -4,10 +4,23 @@
     overflow: auto;
 
     height: 100%;
-    padding: 0 16px;
+    padding: 0 20px;
 
     @include flex-container();
 
+    .ydb-table-with-controls-layout__controls {
+        height: 46px;
+        padding-top: 0;
+    }
+
+    &.ydb-table-with-controls-layout .data-table__sticky_moving {
+        top: 46px !important;
+    }
+
+    &__search {
+        @include search();
+    }
+
     &__table-row {
         cursor: pointer;
     }

diff --git a/src/containers/Tenant/Query/QueriesHistory/QueriesHistory.tsx b/src/containers/Tenant/Query/QueriesHistory/QueriesHistory.tsx
@@ -1,8 +1,14 @@
 import type {Column} from '@gravity-ui/react-data-table';
 
 import {ResizeableDataTable} from '../../../../components/ResizeableDataTable/ResizeableDataTable';
+import {Search} from '../../../../components/Search';
+import {TableWithControlsLayout} from '../../../../components/TableWithControlsLayout/TableWithControlsLayout';
 import {TruncatedQuery} from '../../../../components/TruncatedQuery/TruncatedQuery';
-import {selectQueriesHistory} from '../../../../store/reducers/executeQuery';
+import {
+    selectQueriesHistory,
+    selectQueriesHistoryFilter,
+    setQueryHistoryFilter,
+} from '../../../../store/reducers/executeQuery';
 import {TENANT_QUERY_TABS_ID} from '../../../../store/reducers/tenant/constants';
 import {setQueryTab} from '../../../../store/reducers/tenant/tenant';
 import type {QueryInHistory} from '../../../../types/store/executeQuery';
@@ -25,13 +31,18 @@ function QueriesHistory({changeUserInput}: QueriesHistoryProps) {
     const dispatch = useTypedDispatch();
 
     const queriesHistory = useTypedSelector(selectQueriesHistory);
+    const filter = useTypedSelector(selectQueriesHistoryFilter);
     const reversedHistory = [...queriesHistory].reverse();
 
     const onQueryClick = (query: QueryInHistory) => {
         changeUserInput({input: query.queryText});
         dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
     };
 
+    const onChangeFilter = (value: string) => {
+        dispatch(setQueryHistoryFilter(value));
+    };
+
     const columns: Column<QueryInHistory>[] = [
         {
             name: 'queryText',
@@ -49,17 +60,27 @@ function QueriesHistory({changeUserInput}: QueriesHistoryProps) {
     ];
 
     return (
-        <div className={b()}>
-            <ResizeableDataTable
-                columnsWidthLSKey={QUERIES_HISTORY_COLUMNS_WIDTH_LS_KEY}
-                columns={columns}
-                data={reversedHistory}
-                settings={QUERY_TABLE_SETTINGS}
-                emptyDataMessage={i18n('history.empty')}
-                onRowClick={(row) => onQueryClick(row)}
-                rowClassName={() => b('table-row')}
-            />
-        </div>
+        <TableWithControlsLayout className={b()}>
+            <TableWithControlsLayout.Controls>
+                <Search
+                    value={filter}
+                    onChange={onChangeFilter}
+                    placeholder={i18n('filter.text.placeholder')}
+                    className={b('search')}
+                />
+            </TableWithControlsLayout.Controls>
+            <TableWithControlsLayout.Table>
+                <ResizeableDataTable
+                    columnsWidthLSKey={QUERIES_HISTORY_COLUMNS_WIDTH_LS_KEY}
+                    columns={columns}
+                    data={reversedHistory}
+                    settings={QUERY_TABLE_SETTINGS}
+                    emptyDataMessage={i18n(filter ? 'history.empty-search' : 'history.empty')}
+                    onRowClick={(row) => onQueryClick(row)}
+                    rowClassName={() => b('table-row')}
+                />
+            </TableWithControlsLayout.Table>
+        </TableWithControlsLayout>
     );
 }
 

diff --git a/src/containers/Tenant/Query/QueryEditor/QueryEditor.tsx b/src/containers/Tenant/Query/QueryEditor/QueryEditor.tsx
@@ -60,7 +60,7 @@ const CONTEXT_MENU_GROUP_ID = 'navigation';
 const RESULT_TYPES = {
     EXECUTE: 'execute',
     EXPLAIN: 'explain',
-};
+} as const;
 
 const b = cn('query-editor');
 
@@ -100,7 +100,7 @@ function QueryEditor(props: QueryEditorProps) {
     } = props;
     const {tenantPath: savedPath} = executeQuery;
 
-    const [resultType, setResultType] = React.useState(RESULT_TYPES.EXECUTE);
+    const [resultType, setResultType] = React.useState<ValueOf<typeof RESULT_TYPES>>();
     const [isResultLoaded, setIsResultLoaded] = React.useState(false);
     const [querySettings] = useQueryExecutionSettings();
     const [enableTracingLevel] = useSetting<boolean>(ENABLE_TRACING_LEVEL_KEY);

diff --git a/src/containers/Tenant/Query/SavedQueries/SavedQueries.scss b/src/containers/Tenant/Query/SavedQueries/SavedQueries.scss
@@ -6,10 +6,23 @@
     overflow: auto;
 
     height: 100%;
-    padding: 0 16px;
+    padding: 0 20px;
 
     @include flex-container();
 
+    .ydb-table-with-controls-layout__controls {
+        height: 46px;
+        padding-top: 0;
+    }
+
+    &.ydb-table-with-controls-layout .data-table__sticky_moving {
+        top: 46px !important;
+    }
+
+    &__search {
+        @include search();
+    }
+
     &__row {
         cursor: pointer;
 

diff --git a/src/containers/Tenant/Query/SavedQueries/SavedQueries.tsx b/src/containers/Tenant/Query/SavedQueries/SavedQueries.tsx
@@ -6,16 +6,20 @@ import DataTable from '@gravity-ui/react-data-table';
 import {Button, Dialog, Icon} from '@gravity-ui/uikit';
 
 import {ResizeableDataTable} from '../../../../components/ResizeableDataTable/ResizeableDataTable';
+import {Search} from '../../../../components/Search';
+import {TableWithControlsLayout} from '../../../../components/TableWithControlsLayout/TableWithControlsLayout';
 import {TruncatedQuery} from '../../../../components/TruncatedQuery/TruncatedQuery';
 import {
     deleteSavedQuery,
+    selectSavedQueriesFilter,
     setQueryNameToEdit,
+    setSavedQueriesFilter,
 } from '../../../../store/reducers/queryActions/queryActions';
 import {TENANT_QUERY_TABS_ID} from '../../../../store/reducers/tenant/constants';
 import {setQueryTab} from '../../../../store/reducers/tenant/tenant';
 import type {SavedQuery} from '../../../../types/store/query';
 import {cn} from '../../../../utils/cn';
-import {useTypedDispatch} from '../../../../utils/hooks';
+import {useTypedDispatch, useTypedSelector} from '../../../../utils/hooks';
 import {MAX_QUERY_HEIGHT, QUERY_TABLE_SETTINGS} from '../../utils/constants';
 import i18n from '../i18n';
 import {useSavedQueries} from '../utils/useSavedQueries';
@@ -64,6 +68,7 @@ interface SavedQueriesProps {
 export const SavedQueries = ({changeUserInput}: SavedQueriesProps) => {
     const savedQueries = useSavedQueries();
     const dispatch = useTypedDispatch();
+    const filter = useTypedSelector(selectSavedQueriesFilter);
 
     const [isDeleteDialogVisible, setIsDeleteDialogVisible] = React.useState(false);
     const [queryNameToDelete, setQueryNameToDelete] = React.useState<string>('');
@@ -97,6 +102,10 @@ export const SavedQueries = ({changeUserInput}: SavedQueriesProps) => {
         };
     };
 
+    const onChangeFilter = (value: string) => {
+        dispatch(setSavedQueriesFilter(value));
+    };
+
     const columns: Column<SavedQuery>[] = [
         {
             name: 'name',
@@ -129,21 +138,30 @@ export const SavedQueries = ({changeUserInput}: SavedQueriesProps) => {
 
     return (
         <React.Fragment>
-            <div className={b()}>
-                <ResizeableDataTable
-                    columnsWidthLSKey={SAVED_QUERIES_COLUMNS_WIDTH_LS_KEY}
-                    columns={columns}
-                    data={savedQueries}
-                    settings={QUERY_TABLE_SETTINGS}
-                    emptyDataMessage={i18n('saved.empty')}
-                    rowClassName={() => b('row')}
-                    onRowClick={(row) => onQueryClick(row.body, row.name)}
-                    initialSortOrder={{
-                        columnId: 'name',
-                        order: DataTable.ASCENDING,
-                    }}
-                />
-            </div>
+            <TableWithControlsLayout className={b()}>
+                <TableWithControlsLayout.Controls>
+                    <Search
+                        onChange={onChangeFilter}
+                        placeholder={i18n('filter.text.placeholder')}
+                        className={b('search')}
+                    />
+                </TableWithControlsLayout.Controls>
+                <TableWithControlsLayout.Table>
+                    <ResizeableDataTable
+                        columnsWidthLSKey={SAVED_QUERIES_COLUMNS_WIDTH_LS_KEY}
+                        columns={columns}
+                        data={savedQueries}
+                        settings={QUERY_TABLE_SETTINGS}
+                        emptyDataMessage={i18n(filter ? 'history.empty-search' : 'saved.empty')}
+                        rowClassName={() => b('row')}
+                        onRowClick={(row) => onQueryClick(row.body, row.name)}
+                        initialSortOrder={{
+                            columnId: 'name',
+                            order: DataTable.ASCENDING,
+                        }}
+                    />
+                </TableWithControlsLayout.Table>
+            </TableWithControlsLayout>
             <DeleteDialog
                 visible={isDeleteDialogVisible}
                 queryName={queryNameToDelete}

diff --git a/src/containers/Tenant/Query/i18n/en.json b/src/containers/Tenant/Query/i18n/en.json
@@ -6,6 +6,7 @@
   "tabs.saved": "Saved",
 
   "history.empty": "History is empty",
+  "history.empty-search": "Search result is empty",
   "saved.empty": "There are no saved queries",
 
   "delete-dialog.header": "Delete query",
@@ -48,6 +49,8 @@
   "action.next-query": "Next query in history",
   "action.save-query": "Save query",
 
+  "filter.text.placeholder": "Search by query text...",
+
   "gear.tooltip": "Query execution settings have been changed for ",
   "banner.query-settings.message": "Query results are displayed for "
 }
diff --git a/src/containers/Tenant/Query/utils/useSavedQueries.tsx b/src/containers/Tenant/Query/utils/useSavedQueries.tsx
@@ -1,8 +1,12 @@
-import {SAVED_QUERIES_KEY, useSetting} from '../../../../lib';
+import {SAVED_QUERIES_KEY, useSetting, useTypedSelector} from '../../../../lib';
+import {selectSavedQueriesFilter} from '../../../../store/reducers/queryActions/queryActions';
 import type {SavedQuery} from '../../../../types/store/query';
 
 export function useSavedQueries() {
     const [savedQueries] = useSetting<SavedQuery[]>(SAVED_QUERIES_KEY, []);
+    const filter = useTypedSelector(selectSavedQueriesFilter).toLowerCase();
 
-    return savedQueries;
+    return filter
+        ? savedQueries.filter((item) => item.body.toLowerCase().includes(filter))
+        : savedQueries;
 }
diff --git a/src/store/reducers/authentication/authentication.ts b/src/store/reducers/authentication/authentication.ts
@@ -56,7 +56,7 @@ export const authenticationApi = api.injectEndpoints({
                     dispatch(setUser(data));
                     return {data};
                 } catch (error) {
-                    if (isAxiosResponse(error) && error.status === 401) {
+                    if (isAxiosResponse(error) && error.status === 401 && !error.data?.authUrl) {
                         dispatch(setIsAuthenticated(false));
                     }
                     return {error};