feat: add binary data in plain text display

src/containers/ClusterModeGuard/ClusterModeGuard.tsx

@@ -0,0 +1,15 @@
+import {ReactNode} from 'react';
+import {useTypedSelector} from '../../lib';
+
+export interface ClusterModeGuardProps {
+    children: ReactNode;
+    mode: 'single' | 'multi';
+}
+
+export function ClusterModeGuard({children, mode}: ClusterModeGuardProps) {
+    const shouldRender = useTypedSelector((state) =>
+        mode === 'single' ? state.singleClusterMode : !state.singleClusterMode,
+    );
+
+    return shouldRender ? <>{children}</> : null;
+}

src/containers/ClusterModeGuard/index.ts

@@ -0,0 +1 @@
+export * from './ClusterModeGuard';

src/containers/UserSettings/Setting.tsx

@@ -14,6 +14,7 @@ export type SettingsElementType = 'switch' | 'radio';
 export interface SettingProps {
     type?: SettingsElementType;
     title: string;
+    description?: ReactNode;
     settingKey: string;
     helpPopoverContent?: ReactNode;
     options?: {value: string; content: string}[];
@@ -25,6 +26,7 @@ export const Setting = ({
     type = 'switch',
     settingKey,
     title,
+    description,
     helpPopoverContent,
     options,
     defaultValue,
@@ -85,6 +87,7 @@ export const Setting = ({
         <Settings.Item
             title={title}
             highlightedTitle={title}
+            description={description}
             renderTitleComponent={renderTitleComponent}
         >
             {getSettingsElement(type)}

src/containers/UserSettings/i18n/en.json

@@ -14,6 +14,9 @@
   "settings.language.option-russian": "Russian",
   "settings.language.option-english": "English",
 
+  "settings.binaryDataInPlainTextDisplay.title": "Display binary data in plain text",
+  "settings.binaryDataInPlainTextDisplay.description": "Available starting from version 24.1",
+
   "settings.invertedDisks.title": "Inverted disks space indicators",
 
   "settings.useNodesEndpoint.title": "Break the Nodes tab in Diagnostics",

src/containers/UserSettings/i18n/index.ts

@@ -1,11 +1,5 @@
-import {i18n, Lang} from '../../../utils/i18n';
+import {registerKeysets} from '../../../utils/i18n';
 
 import en from './en.json';
-import ru from './ru.json';
 
-const COMPONENT = 'ydb-user-settings';
-
-i18n.registerKeyset(Lang.En, COMPONENT, en);
-i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
-
-export default i18n.keyset(COMPONENT);
+export default registerKeysets('ydb-user-settings', {en});

src/containers/UserSettings/settings.ts → src/containers/UserSettings/settings.tsx

@@ -10,11 +10,13 @@ import {
     USE_BACKEND_PARAMS_FOR_TABLES_KEY,
     USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
     QUERY_USE_MULTI_SCHEMA_KEY,
+    BINARY_DATA_IN_PLAIN_TEXT_DISPLAY,
 } from '../../utils/constants';
 import {Lang, defaultLang} from '../../utils/i18n';
 
 import type {SettingProps} from './Setting';
 import i18n from './i18n';
+import {ClusterModeGuard} from '../ClusterModeGuard';
 
 export interface SettingsSection {
     id: string;
@@ -75,6 +77,16 @@ export const languageSetting: SettingProps = {
     },
 };
 
+export const binaryDataInPlainTextDisplay: SettingProps = {
+    settingKey: BINARY_DATA_IN_PLAIN_TEXT_DISPLAY,
+    title: i18n('settings.binaryDataInPlainTextDisplay.title'),
+    description: (
+        <ClusterModeGuard mode="multi">
+            {i18n('settings.binaryDataInPlainTextDisplay.description')}
+        </ClusterModeGuard>
+    ),
+};
+
 export const invertedDisksSetting: SettingProps = {
     settingKey: INVERTED_DISKS_KEY,
     title: i18n('settings.invertedDisks.title'),
@@ -98,7 +110,7 @@ export const queryUseMultiSchemaSetting: SettingProps = {
 export const appearanceSection: SettingsSection = {
     id: 'appearanceSection',
     title: i18n('section.appearance'),
-    settings: [themeSetting, invertedDisksSetting],
+    settings: [themeSetting, invertedDisksSetting, binaryDataInPlainTextDisplay],
 };
 export const experimentsSection: SettingsSection = {
     id: 'experimentsSection',

src/services/api.ts

@@ -38,8 +38,10 @@ import type {JsonHotKeysResponse} from '../types/api/hotkeys';
 
 import {backend as BACKEND, metaBackend as META_BACKEND} from '../store';
 import {prepareSortValue} from '../utils/filters';
+import {BINARY_DATA_IN_PLAIN_TEXT_DISPLAY} from '../utils/constants';
 import {parseMetaCluster} from './parsers/parseMetaCluster';
 import {parseMetaTenants} from './parsers/parseMetaTenants';
+import {settingsManager} from './settings';
 
 type AxiosOptions = {
     concurrentId?: string;
@@ -305,9 +307,20 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
         const uiTimeout = 9 * 60 * 1000;
         const backendTimeout = 10 * 60 * 1000;
 
+        /**
+         * Return strings using base64 encoding.
+         * @link https://github.com/ydb-platform/ydb/pull/647
+         */
+        const base64 = !settingsManager.readUserSettingsValue(
+            BINARY_DATA_IN_PLAIN_TEXT_DISPLAY,
+            true,
+        );
+
         return this.post<QueryAPIResponse<Action, Schema>>(
             this.getPath(
-                `/viewer/json/query?timeout=${backendTimeout}${schema ? `&schema=${schema}` : ''}`,
+                `/viewer/json/query?timeout=${backendTimeout}&base64=${base64}${
+                    schema ? `&schema=${schema}` : ''
+                }`,
             ),
             params,
             {},

src/services/settings.ts

@@ -14,6 +14,7 @@ import {
     USE_BACKEND_PARAMS_FOR_TABLES_KEY,
     USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
     USE_CLUSTER_BALANCER_AS_BACKEND_KEY,
+    BINARY_DATA_IN_PLAIN_TEXT_DISPLAY,
 } from '../utils/constants';
 import {QUERY_ACTIONS, QUERY_MODES} from '../utils/query';
 import {parseJson} from '../utils/utils';
@@ -27,6 +28,7 @@ export const DEFAULT_USER_SETTINGS: SettingsObject = {
     [INVERTED_DISKS_KEY]: false,
     [USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY]: false,
     [QUERY_USE_MULTI_SCHEMA_KEY]: false,
+    [BINARY_DATA_IN_PLAIN_TEXT_DISPLAY]: true,
     [SAVED_QUERIES_KEY]: [],
     [TENANT_INITIAL_PAGE_KEY]: TENANT_PAGES_IDS.query,
     [QUERY_INITIAL_MODE_KEY]: QUERY_MODES.script,

src/utils/constants.ts

@@ -87,6 +87,7 @@ export const SAVED_QUERIES_KEY = 'saved_queries';
 export const ASIDE_HEADER_COMPACT_KEY = 'asideHeaderCompact';
 export const QUERIES_HISTORY_KEY = 'queries_history';
 export const DATA_QA_TUNE_COLUMNS_POPUP = 'tune-columns-popup';
+export const BINARY_DATA_IN_PLAIN_TEXT_DISPLAY = 'binaryDataInPlainTextDisplay';
 
 export const DEFAULT_SIZE_RESULT_PANE_KEY = 'default-size-result-pane';
 export const DEFAULT_SIZE_TENANT_SUMMARY_KEY = 'default-size-tenant-summary-pane';