ydb-embedded-ui 4.15.0 → 4.16.0

package/dist/containers/Tenant/Query/QueriesHistory/QueriesHistory.tsx

@@ -3,10 +3,13 @@ import block from 'bem-cn-lite';
 
 import DataTable, {Column} from '@gravity-ui/react-data-table';
 
+import type {QueryInHistory} from '../../../../types/store/executeQuery';
 import {TruncatedQuery} from '../../../../components/TruncatedQuery/TruncatedQuery';
 import {setQueryTab} from '../../../../store/reducers/tenant/tenant';
+import {selectQueriesHistory} from '../../../../store/reducers/executeQuery';
 import {TENANT_QUERY_TABS_ID} from '../../../../store/reducers/tenant/constants';
-import {useTypedSelector} from '../../../../utils/hooks';
+import {useQueryModes, useTypedSelector} from '../../../../utils/hooks';
+import {QUERY_MODES, QUERY_MODES_TITLES, QUERY_SYNTAX} from '../../../../utils/query';
 import {MAX_QUERY_HEIGHT, QUERY_TABLE_SETTINGS} from '../../utils/constants';
 
 import i18n from '../i18n';
@@ -22,24 +25,51 @@ interface QueriesHistoryProps {
 function QueriesHistory({changeUserInput}: QueriesHistoryProps) {
     const dispatch = useDispatch();
 
-    const queriesHistory = useTypedSelector((state) => state.executeQuery.history.queries) ?? [];
+    const [queryMode, setQueryMode] = useQueryModes();
+
+    const queriesHistory = useTypedSelector(selectQueriesHistory);
     const reversedHistory = [...queriesHistory].reverse();
 
-    const onQueryClick = (queryText: string) => {
-        changeUserInput({input: queryText});
-        dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
+    const onQueryClick = (query: QueryInHistory) => {
+        let isQueryModeSet = true;
+
+        if (query.syntax === QUERY_SYNTAX.pg && queryMode !== QUERY_MODES.pg) {
+            isQueryModeSet = setQueryMode(
+                QUERY_MODES.pg,
+                i18n('history.cannot-set-mode', {mode: QUERY_MODES_TITLES[QUERY_MODES.pg]}),
+            );
+        } else if (query.syntax !== QUERY_SYNTAX.pg && queryMode === QUERY_MODES.pg) {
+            // Set query mode for queries with yql syntax
+            isQueryModeSet = setQueryMode(QUERY_MODES.script);
+        }
+
+        if (isQueryModeSet) {
+            changeUserInput({input: query.queryText});
+            dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
+        }
     };
 
-    const columns: Column<string>[] = [
+    const columns: Column<QueryInHistory>[] = [
         {
             name: 'queryText',
             header: 'Query Text',
-            render: ({row: query}) => (
-                <div className={b('query')}>
-                    <TruncatedQuery value={query} maxQueryHeight={MAX_QUERY_HEIGHT} />
-                </div>
-            ),
+            render: ({row}) => {
+                return (
+                    <div className={b('query')}>
+                        <TruncatedQuery value={row.queryText} maxQueryHeight={MAX_QUERY_HEIGHT} />
+                    </div>
+                );
+            },
+            sortable: false,
+        },
+        {
+            name: 'syntax',
+            header: 'Syntax',
+            render: ({row}) => {
+                return row.syntax === QUERY_SYNTAX.pg ? 'PostgreSQL' : 'YQL';
+            },
             sortable: false,
+            width: 200,
         },
     ];
 
@@ -52,6 +82,7 @@ function QueriesHistory({changeUserInput}: QueriesHistoryProps) {
                 settings={QUERY_TABLE_SETTINGS}
                 emptyDataMessage={i18n('history.empty')}
                 onRowClick={(row) => onQueryClick(row)}
+                rowClassName={() => b('table-row')}
             />
         </div>
     );

package/dist/containers/Tenant/Query/QueryEditor/QueryEditor.js

@@ -264,7 +264,7 @@ function QueryEditor(props) {
 
         const {queries, currentIndex} = history;
         if (input !== queries[currentIndex]) {
-            saveQueryToHistory(input);
+            saveQueryToHistory(input, mode);
         }
         dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerExpand);
     };

package/dist/containers/Tenant/Query/QueryEditorControls/QueryEditorControls.tsx

@@ -4,7 +4,7 @@ import {Button, ButtonView, DropdownMenu} from '@gravity-ui/uikit';
 import {useMemo} from 'react';
 
 import type {QueryAction, QueryMode} from '../../../../types/store/query';
-import {QUERY_MODES} from '../../../../utils/query';
+import {QUERY_MODES, QUERY_MODES_TITLES} from '../../../../utils/query';
 import {Icon} from '../../../../components/Icon';
 import {LabelWithPopover} from '../../../../components/LabelWithPopover';
 
@@ -21,32 +21,36 @@ const b = block('ydb-query-editor-controls');
 
 const OldQueryModeSelectorOptions = {
     [QUERY_MODES.script]: {
-        title: 'YQL Script',
+        title: QUERY_MODES_TITLES[QUERY_MODES.script],
         description: i18n('method-description.script'),
     },
     [QUERY_MODES.scan]: {
-        title: 'Scan',
+        title: QUERY_MODES_TITLES[QUERY_MODES.scan],
         description: i18n('method-description.scan'),
     },
 } as const;
 
 const QueryModeSelectorOptions = {
     [QUERY_MODES.script]: {
-        title: 'YQL Script',
+        title: QUERY_MODES_TITLES[QUERY_MODES.script],
         description: i18n('method-description.script'),
     },
     [QUERY_MODES.scan]: {
-        title: 'Scan',
+        title: QUERY_MODES_TITLES[QUERY_MODES.scan],
         description: i18n('method-description.scan'),
     },
     [QUERY_MODES.data]: {
-        title: 'Data',
+        title: QUERY_MODES_TITLES[QUERY_MODES.data],
         description: i18n('method-description.data'),
     },
     [QUERY_MODES.query]: {
-        title: 'YQL - QueryService',
+        title: QUERY_MODES_TITLES[QUERY_MODES.query],
         description: i18n('method-description.query'),
     },
+    [QUERY_MODES.pg]: {
+        title: QUERY_MODES_TITLES[QUERY_MODES.pg],
+        description: i18n('method-description.pg'),
+    },
 } as const;
 
 interface QueryEditorControlsProps {

package/dist/containers/Tenant/Query/i18n/en.json

@@ -8,6 +8,8 @@
   "history.empty": "History is empty",
   "saved.empty": "There are no saved queries",
 
+  "history.cannot-set-mode": "This query is available only with '{{mode}}' query mode. You need to turn in additional query modes in settings to enable it",
+
   "delete-dialog.header": "Delete query",
   "delete-dialog.question": "Are you sure you want to delete query",
   "delete-dialog.delete": "Delete",
@@ -21,6 +23,7 @@
   "method-description.scan": "Read-only queries, potentially reading a lot of data.\nAPI call: table.ExecuteScan",
   "method-description.data": "DML queries for changing and fetching data in serialization mode.\nAPI call: table.executeDataQuery",
   "method-description.query": "Any query. An experimental API call supposed to replace all existing methods.\nAPI Call: query.ExecuteScript",
+  "method-description.pg": "Queries in postgresql syntax.\nAPI call: query.ExecuteScript",
 
   "query-duration.description": "Duration of server-side query execution"
 }

package/dist/containers/Tenant/Query/i18n/ru.json

@@ -8,6 +8,8 @@
   "history.empty": "История пуста",
   "saved.empty": "Нет сохраненных запросов",
 
+  "history.cannot-set-mode": "Этот запрос доступен только в режиме '{{mode}}'. Вам необходимо включить дополнительные режимы выполнения запросов в настройках",
+
   "delete-dialog.header": "Удалить запрос",
   "delete-dialog.question": "Вы уверены что хотите удалить запрос",
   "delete-dialog.delete": "Удалить",
@@ -21,6 +23,7 @@
   "method-description.scan": "Только читающие запросы, потенциально читающие много данных.\nAPI call: table.ExecuteScan",
   "method-description.data": "DML-запросы для изменения и выборки данных в режиме изоляции Serializable.\nAPI call: table.executeDataQuery",
   "method-description.query": "Любые запросы. Экспериментальный перспективный метод, который в будущем заменит все остальные.\nAPI call: query.ExecuteScript",
+  "method-description.pg": "Запросы в синтаксисе postgresql.\nAPI call: query.ExecuteScript",
 
   "query-duration.description": "Время выполнения запроса на стороне сервера"
 }

package/dist/containers/Tenant/utils/queryTemplates.ts

@@ -1,10 +1,34 @@
 export const createTableTemplate = (path: string) => {
-    return `CREATE TABLE \`${path}/my_table\`
-(
-    \`id\` Uint64,
-    \`name\` String,
-    PRIMARY KEY (\`id\`)
-);`;
+    return `-- docs: https://ydb.tech/en/docs/yql/reference/syntax/create_table
+CREATE TABLE \`${path}/ydb_row_table\` (
+    category_id Uint64 NOT NULL,
+    id Uint64,
+    expire_at Datetime,
+    updated_on Datetime,
+    name Text,
+    \`binary-payload\` Bytes,
+    attributes JsonDocument,
+    -- uncomment to add a secondary index
+    -- INDEX idx_row_table_id GLOBAL SYNC ON ( id ) COVER ( name, attributes ), -- Secondary indexes docs https://ydb.tech/en/docs/yql/reference/syntax/create_table#secondary_index
+    PRIMARY KEY (category_id, id)
+) 
+WITH (
+    AUTO_PARTITIONING_BY_SIZE = ENABLED,
+    AUTO_PARTITIONING_PARTITION_SIZE_MB = 2048,
+    AUTO_PARTITIONING_BY_LOAD = ENABLED,
+    AUTO_PARTITIONING_MIN_PARTITIONS_COUNT = 4,
+    AUTO_PARTITIONING_MAX_PARTITIONS_COUNT = 1024,
+    -- uncomment to create a table with predefined partitions
+    -- UNIFORM_PARTITIONS = 4, -- The number of partitions for uniform initial table partitioning.
+                            -- The primary key's first column must have type Uint64 or Uint32.
+                            -- A created table is immediately divided into the specified number of partitions
+    -- uncomment to launch read only replicas in every AZ
+    -- READ_REPLICAS_SETTINGS = 'PER_AZ:1', -- Enable read replicas for stale read, launch one replica in every availability zone
+    -- uncomment to enable ttl
+    -- TTL = Interval("PT1H") ON expire_at, -- Enable background deletion of expired rows https://ydb.tech/en/docs/concepts/ttl
+    KEY_BLOOM_FILTER = ENABLED -- With a Bloom filter, you can more efficiently determine
+                               -- if some keys are missing in a table when making multiple single queries by the primary key.
+)`;
 };
 export const alterTableTemplate = (path: string) => {
     return `ALTER TABLE \`${path}\`

package/dist/containers/Tenants/Tenants.tsx

@@ -106,7 +106,9 @@ export const Tenants = ({additionalTenantsProps}: TenantsProps) => {
                                     backend,
                                 })}
                             />
-                            {additionalTenantsProps?.getMonitoringLink?.(row.Name, row.Type)}
+                            {row.Name &&
+                                row.Type &&
+                                additionalTenantsProps?.getMonitoringLink?.(row.Name, row.Type)}
                         </div>
                     );
                 },

package/dist/containers/UserSettings/Setting.tsx

@@ -18,6 +18,7 @@ export interface SettingProps {
     helpPopoverContent?: ReactNode;
     options?: {value: string; content: string}[];
     defaultValue?: unknown;
+    onValueUpdate?: VoidFunction;
 }
 
 export const Setting = ({
@@ -27,9 +28,15 @@ export const Setting = ({
     helpPopoverContent,
     options,
     defaultValue,
+    onValueUpdate,
 }: SettingProps) => {
     const [settingValue, setValue] = useSetting(settingKey, defaultValue);
 
+    const onUpdate = (value: unknown) => {
+        setValue(value);
+        onValueUpdate?.();
+    };
+
     const renderTitleComponent = (value: ReactNode) => {
         if (helpPopoverContent) {
             return (
@@ -48,7 +55,7 @@ export const Setting = ({
     const getSettingsElement = (elementType: SettingsElementType) => {
         switch (elementType) {
             case 'switch': {
-                return <Switch checked={Boolean(settingValue)} onUpdate={setValue} />;
+                return <Switch checked={Boolean(settingValue)} onUpdate={onUpdate} />;
             }
 
             case 'radio': {
@@ -57,7 +64,7 @@ export const Setting = ({
                 }
 
                 return (
-                    <RadioButton value={String(settingValue)} onUpdate={setValue}>
+                    <RadioButton value={String(settingValue)} onUpdate={onUpdate}>
                         {options.map(({value, content}) => {
                             return (
                                 <RadioButton.Option value={value} key={value}>

package/dist/containers/UserSettings/i18n/en.json

@@ -10,6 +10,10 @@
   "settings.theme.option-light": "Light",
   "settings.theme.option-system": "System",
 
+  "settings.language.title": "Interface language",
+  "settings.language.option-russian": "Russian",
+  "settings.language.option-english": "English",
+
   "settings.invertedDisks.title": "Inverted disks space indicators",
 
   "settings.useNodesEndpoint.title": "Break the Nodes tab in Diagnostics",
@@ -19,5 +23,5 @@
   "settings.useBackendParamsForTables.popover": "Filter and sort Nodes and Storage tables with request params. May increase performance, but could causes additional fetches and longer loading time on older versions",
 
   "settings.enableAdditionalQueryModes.title": "Enable additional query modes",
-  "settings.enableAdditionalQueryModes.popover": "Adds 'Data' and 'YQL - QueryService' modes. May not work on some versions"
+  "settings.enableAdditionalQueryModes.popover": "Adds 'Data', 'YQL - QueryService' and 'PostgreSQL' modes. May not work on some versions"
 }

package/dist/containers/UserSettings/i18n/ru.json

@@ -10,6 +10,10 @@
   "settings.theme.option-light": "Светлая",
   "settings.theme.option-system": "Системная",
 
+  "settings.language.title": "Язык интерфейса",
+  "settings.language.option-russian": "Русский",
+  "settings.language.option-english": "English",
+
   "settings.invertedDisks.title": "Инвертированные индикаторы места на дисках",
 
   "settings.useNodesEndpoint.title": "Сломать вкладку Nodes в диагностике",
@@ -19,5 +23,5 @@
   "settings.useBackendParamsForTables.popover": "Добавляет фильтрацию и сортировку таблиц Nodes и Storage с использованием параметров запроса. Может улушить производительность, но на старых версиях может привести к дополнительным запросам и большему времени ожидания загрузки",
 
   "settings.enableAdditionalQueryModes.title": "Включить дополнительные режимы выполнения запросов",
-  "settings.enableAdditionalQueryModes.popover": "Добавляет режимы 'Data' и 'YQL - QueryService'. Может работать некорректно на некоторых версиях"
+  "settings.enableAdditionalQueryModes.popover": "Добавляет режимы 'Data', 'YQL - QueryService' и 'PostgreSQL'. Может работать некорректно на некоторых версиях"
 }

package/dist/containers/UserSettings/settings.ts

@@ -6,10 +6,12 @@ import flaskIcon from '../../assets/icons/flask.svg';
 import {
     ENABLE_ADDITIONAL_QUERY_MODES,
     INVERTED_DISKS_KEY,
+    LANGUAGE_KEY,
     THEME_KEY,
     USE_BACKEND_PARAMS_FOR_TABLES_KEY,
     USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
 } from '../../utils/constants';
+import {Lang, defaultLang} from '../../utils/i18n';
 
 import type {SettingProps} from './Setting';
 import i18n from './i18n';
@@ -50,6 +52,29 @@ export const themeSetting: SettingProps = {
     type: 'radio',
     options: themeOptions,
 };
+
+const languageOptions = [
+    {
+        value: Lang.Ru,
+        content: i18n('settings.language.option-russian'),
+    },
+    {
+        value: Lang.En,
+        content: i18n('settings.language.option-english'),
+    },
+];
+
+export const languageSetting: SettingProps = {
+    settingKey: LANGUAGE_KEY,
+    title: i18n('settings.language.title'),
+    type: 'radio',
+    options: languageOptions,
+    defaultValue: defaultLang,
+    onValueUpdate: () => {
+        window.location.reload();
+    },
+};
+
 export const invertedDisksSetting: SettingProps = {
     settingKey: INVERTED_DISKS_KEY,
     title: i18n('settings.invertedDisks.title'),

package/dist/services/api.ts

@@ -28,6 +28,7 @@ import type {DescribeTopicResult} from '../types/api/topic';
 import type {TEvPDiskStateResponse} from '../types/api/pdisk';
 import type {TEvVDiskStateResponse} from '../types/api/vdisk';
 import type {TUserToken} from '../types/api/whoami';
+import type {QuerySyntax} from '../types/store/query';
 import type {ComputeApiRequestParams, NodesApiRequestParams} from '../store/reducers/nodes/types';
 import type {StorageApiRequestParams} from '../store/reducers/storage/types';
 
@@ -75,12 +76,16 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
             cluster_name: clusterName,
         });
     }
-    getTenantInfo({path}: {path: string}) {
-        return this.get<TTenantInfo>(this.getPath('/viewer/json/tenantinfo'), {
-            path,
-            tablets: true,
-            storage: true,
-        });
+    getTenantInfo({path}: {path: string}, {concurrentId}: AxiosOptions = {}) {
+        return this.get<TTenantInfo>(
+            this.getPath('/viewer/json/tenantinfo'),
+            {
+                path,
+                tablets: true,
+                storage: true,
+            },
+            {concurrentId: concurrentId || `getTenantInfo|${path}`},
+        );
     }
     getNodes(
         {
@@ -281,17 +286,15 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
     }
     sendQuery<Action extends Actions, Schema extends Schemas = undefined>(
         {
-            query,
-            database,
-            action,
-            stats,
             schema,
+            ...params
         }: {
             query?: string;
             database?: string;
             action?: Action;
             stats?: string;
             schema?: Schema;
+            syntax?: QuerySyntax;
         },
         {concurrentId}: AxiosOptions = {},
     ) {
@@ -303,12 +306,7 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
             this.getPath(
                 `/viewer/json/query?timeout=${backendTimeout}${schema ? `&schema=${schema}` : ''}`,
             ),
-            {
-                query,
-                database,
-                action,
-                stats,
-            },
+            params,
             {},
             {
                 concurrentId,
@@ -320,6 +318,7 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
         query: string,
         database: string,
         action: Action,
+        syntax?: QuerySyntax,
     ) {
         return this.post<ExplainResponse<Action>>(
             this.getPath('/viewer/json/query'),
@@ -327,6 +326,7 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
                 query,
                 database,
                 action: action || 'explain',
+                syntax,
                 timeout: 600000,
             },
             {},

package/dist/store/reducers/executeQuery.ts

@@ -4,12 +4,14 @@ import type {ExecuteActions} from '../../types/api/query';
 import type {
     ExecuteQueryAction,
     ExecuteQueryState,
+    ExecuteQueryStateSlice,
     MonacoHotKeyAction,
+    QueryInHistory,
 } from '../../types/store/executeQuery';
-import type {QueryRequestParams, QueryMode} from '../../types/store/query';
+import type {QueryRequestParams, QueryMode, QuerySyntax} from '../../types/store/query';
 import {getValueFromLS, parseJson} from '../../utils/utils';
 import {QUERIES_HISTORY_KEY} from '../../utils/constants';
-import {parseQueryAPIExecuteResponse} from '../../utils/query';
+import {QUERY_MODES, QUERY_SYNTAX, parseQueryAPIExecuteResponse} from '../../utils/query';
 import {parseQueryError} from '../../utils/error';
 import '../../services/api';
 
@@ -87,8 +89,12 @@ const executeQuery: Reducer<ExecuteQueryState, ExecuteQueryAction> = (
         }
 
         case SAVE_QUERY_TO_HISTORY: {
-            const query = action.data;
-            const newQueries = [...state.history.queries, query].slice(
+            const queryText = action.data.queryText;
+
+            // Do not save explicit yql syntax value for easier further support (use yql by default)
+            const syntax = action.data.mode === QUERY_MODES.pg ? QUERY_SYNTAX.pg : undefined;
+
+            const newQueries = [...state.history.queries, {queryText, syntax}].slice(
                 state.history.queries.length >= MAXIMUM_QUERIES_IN_HISTORY ? 1 : 0,
             );
             window.localStorage.setItem(QUERIES_HISTORY_KEY, JSON.stringify(newQueries));
@@ -151,7 +157,15 @@ interface SendQueryParams extends QueryRequestParams {
 }
 
 export const sendExecuteQuery = ({query, database, mode}: SendQueryParams) => {
-    const action: ExecuteActions = mode ? `execute-${mode}` : 'execute';
+    let action: ExecuteActions = 'execute';
+    let syntax: QuerySyntax = QUERY_SYNTAX.yql;
+
+    if (mode === 'pg') {
+        action = 'execute-query';
+        syntax = QUERY_SYNTAX.pg;
+    } else if (mode) {
+        action = `execute-${mode}`;
+    }
 
     return createApiRequest({
         request: window.api.sendQuery({
@@ -159,6 +173,7 @@ export const sendExecuteQuery = ({query, database, mode}: SendQueryParams) => {
             query,
             database,
             action,
+            syntax,
             stats: 'profile',
         }),
         actions: SEND_QUERY,
@@ -166,10 +181,10 @@ export const sendExecuteQuery = ({query, database, mode}: SendQueryParams) => {
     });
 };
 
-export const saveQueryToHistory = (query: string) => {
+export const saveQueryToHistory = (queryText: string, mode: QueryMode) => {
     return {
         type: SAVE_QUERY_TO_HISTORY,
-        data: query,
+        data: {queryText, mode},
     } as const;
 };
 
@@ -206,4 +221,15 @@ export const setTenantPath = (value: string) => {
     } as const;
 };
 
+export const selectQueriesHistory = (state: ExecuteQueryStateSlice): QueryInHistory[] => {
+    return state.executeQuery.history.queries.map((rawQuery) => {
+        if (typeof rawQuery === 'string') {
+            return {
+                queryText: rawQuery,
+            };
+        }
+        return rawQuery;
+    });
+};
+
 export default executeQuery;

package/dist/store/reducers/explainQuery.ts

@@ -9,10 +9,10 @@ import type {
     ExplainQueryState,
     PreparedExplainResponse,
 } from '../../types/store/explainQuery';
-import type {QueryRequestParams, QueryMode} from '../../types/store/query';
+import type {QueryRequestParams, QueryMode, QuerySyntax} from '../../types/store/query';
 
 import {preparePlan} from '../../utils/prepareQueryExplain';
-import {parseQueryAPIExplainResponse, parseQueryExplainPlan} from '../../utils/query';
+import {QUERY_SYNTAX, parseQueryAPIExplainResponse, parseQueryExplainPlan} from '../../utils/query';
 import {parseQueryError} from '../../utils/error';
 
 import {createRequestActionTypes, createApiRequest} from '../utils';
@@ -103,10 +103,18 @@ interface ExplainQueryParams extends QueryRequestParams {
 }
 
 export const getExplainQuery = ({query, database, mode}: ExplainQueryParams) => {
-    const action: ExplainActions = mode ? `explain-${mode}` : 'explain';
+    let action: ExplainActions = 'explain';
+    let syntax: QuerySyntax = QUERY_SYNTAX.yql;
+
+    if (mode === 'pg') {
+        action = 'explain-query';
+        syntax = QUERY_SYNTAX.pg;
+    } else if (mode) {
+        action = `explain-${mode}`;
+    }
 
     return createApiRequest({
-        request: window.api.getExplainQuery(query, database, action),
+        request: window.api.getExplainQuery(query, database, action, syntax),
         actions: GET_EXPLAIN_QUERY,
         dataHandler: (response): PreparedExplainResponse => {
             const {plan: rawPlan, ast} = parseQueryAPIExplainResponse(response);

package/dist/store/reducers/healthcheckInfo.ts

@@ -1,17 +1,16 @@
 import _flow from 'lodash/fp/flow';
 import _sortBy from 'lodash/fp/sortBy';
 import _uniqBy from 'lodash/fp/uniqBy';
-import _omit from 'lodash/omit';
 import {createSelector, Selector} from 'reselect';
 import {Reducer} from 'redux';
 
-import {
-    IHealthcheckInfoState,
+import type {
+    IHealthCheckInfoAction,
     IHealthcheckInfoRootStateSlice,
+    IHealthcheckInfoState,
     IIssuesTree,
-    IHealthCheckInfoAction,
 } from '../../types/store/healthcheck';
-import {IssueLog, StatusFlag} from '../../types/api/healthcheck';
+import type {IssueLog, StatusFlag} from '../../types/api/healthcheck';
 
 import '../../services/api';
 import {createRequestActionTypes, createApiRequest} from '../utils';
@@ -49,6 +48,8 @@ const healthcheckInfo: Reducer<IHealthcheckInfoState, IHealthCheckInfoAction> =
                 ...state,
                 error: action.error,
                 loading: false,
+                wasLoaded: true,
+                data: undefined,
             };
         }
 
@@ -110,6 +111,24 @@ const getInvertedConsequencesTree = ({
         : [];
 };
 
+const getIssuesStatistics = (data: IssueLog[]): [StatusFlag, number][] => {
+    const issuesMap = {} as Record<StatusFlag, number>;
+
+    for (const issue of data) {
+        if (!issuesMap[issue.status]) {
+            issuesMap[issue.status] = 0;
+        }
+        issuesMap[issue.status]++;
+    }
+
+    return (Object.entries(issuesMap) as [StatusFlag, number][]).sort(([aStatus], [bStatus]) => {
+        const bPriority = mapStatusToPriority[bStatus] || 0;
+        const aPriority = mapStatusToPriority[aStatus] || 0;
+
+        return aPriority - bPriority;
+    });
+};
+
 const getIssuesLog = (state: IHealthcheckInfoRootStateSlice) =>
     state.healthcheckInfo.data?.issue_log;
 
@@ -121,13 +140,10 @@ export const selectIssuesTrees: Selector<IHealthcheckInfoRootStateSlice, IIssues
         return getInvertedConsequencesTree({data, roots});
     });
 
-export const selectIssuesTreeById: Selector<
+export const selectIssuesStatistics: Selector<
     IHealthcheckInfoRootStateSlice,
-    IIssuesTree | undefined,
-    [string | undefined]
-> = createSelector([selectIssuesTrees, (_, id: string | undefined) => id], (issuesTrees = [], id) =>
-    issuesTrees.find((issuesTree) => issuesTree.id === id),
-);
+    [StatusFlag, number][]
+> = createSelector(getIssuesLog, (issues = []) => getIssuesStatistics(issues));
 
 export function getHealthcheckInfo(database: string) {
     return createApiRequest({