ydb-embedded-ui 20.2.1 → 20.3.0

package/src/store/reducers/cluster/utils.ts

@@ -0,0 +1,142 @@
+import type {
+    TBridgePile,
+    TClusterInfo,
+    TClusterInfoV2,
+    TClusterInfoV5,
+    TStorageStats,
+} from '../../../types/api/cluster';
+import type {ExecuteQueryResponse, KeyValueRow} from '../../../types/api/query';
+import {QUERY_TECHNICAL_MARK} from '../../../utils/constants';
+import {normalizeMediaType} from '../../../utils/disks/normalizeMediaType';
+import {parseQueryAPIResponse} from '../../../utils/query';
+
+import type {ClusterGroupsStats} from './types';
+
+export const createSelectClusterGroupsQuery = () => {
+    return `${QUERY_TECHNICAL_MARK}
+SELECT 
+    PDiskFilter,
+    ErasureSpecies,
+    CurrentAvailableSize,
+    CurrentAllocatedSize,
+    CurrentGroupsCreated,
+    AvailableGroupsToCreate
+FROM \`.sys/ds_storage_stats\`
+ORDER BY CurrentGroupsCreated DESC;
+`;
+};
+
+const getDiskType = (rawTypeString: string) => {
+    // Check if value math regexp and put disk type in type group
+    const diskTypeRe = /^Type:(?<type>[A-Za-z]+)/;
+
+    const diskType = rawTypeString.match(diskTypeRe)?.groups?.['type'];
+
+    return diskType ? normalizeMediaType(diskType) : undefined;
+};
+
+function getGroupStats(data?: KeyValueRow[] | TStorageStats[]) {
+    const result: ClusterGroupsStats = {};
+
+    data?.forEach((stats) => {
+        const {
+            PDiskFilter,
+            ErasureSpecies: erasure,
+            CurrentAvailableSize,
+            CurrentAllocatedSize,
+            CurrentGroupsCreated,
+            AvailableGroupsToCreate,
+        } = stats;
+
+        const createdGroups = Number(CurrentGroupsCreated) || 0;
+        const availableGroupsToCreate = Number(AvailableGroupsToCreate) || 0;
+        const totalGroups = createdGroups + availableGroupsToCreate;
+        const allocatedSize = Number(CurrentAllocatedSize) || 0;
+        const availableSize = Number(CurrentAvailableSize) || 0;
+        const diskType = PDiskFilter && typeof PDiskFilter === 'string' && getDiskType(PDiskFilter);
+
+        if (diskType && erasure && typeof erasure === 'string' && createdGroups) {
+            const preparedStats = {
+                diskType,
+                erasure,
+                createdGroups,
+                totalGroups,
+                allocatedSize,
+                availableSize,
+            };
+
+            if (result[diskType]) {
+                if (result[diskType][erasure]) {
+                    const currentValue = {...result[diskType][erasure]};
+                    result[diskType][erasure] = {
+                        diskType,
+                        erasure,
+                        createdGroups: currentValue.createdGroups + createdGroups,
+                        totalGroups: currentValue.totalGroups + totalGroups,
+                        allocatedSize: currentValue.allocatedSize + allocatedSize,
+                        availableSize: currentValue.availableSize + availableSize,
+                    };
+                } else {
+                    result[diskType][erasure] = preparedStats;
+                }
+            } else {
+                result[diskType] = {[erasure]: preparedStats};
+            }
+        }
+    });
+
+    return result;
+}
+
+export const parseGroupsStatsQueryResponse = (
+    data: ExecuteQueryResponse | null,
+): ClusterGroupsStats => {
+    const parsedData = parseQueryAPIResponse(data).resultSets?.[0]?.result;
+    return getGroupStats(parsedData);
+};
+
+export function getGroupStatsFromClusterInfo(info: TClusterInfoV2) {
+    return getGroupStats(info.StorageStats);
+}
+
+function isClusterInfoWithBridgeInfo(info: TClusterInfo): info is TClusterInfoV5 {
+    return 'BridgeInfo' in info;
+}
+
+function hasBridgePileDisplayData(pile: TBridgePile) {
+    const hasGroupStatuses = Object.values(pile.GroupStatuses ?? {}).some((value) => {
+        const numericValue = Number(value);
+
+        return Number.isFinite(numericValue) && numericValue > 0;
+    });
+
+    return Boolean(pile.Name?.trim() || pile.State || pile.Nodes !== undefined || hasGroupStatuses);
+}
+
+export function prepareClusterInfo(info: TClusterInfo): TClusterInfo {
+    if (!isClusterInfoWithBridgeInfo(info) || !info.BridgeInfo?.Piles) {
+        return info;
+    }
+
+    const visiblePiles = info.BridgeInfo.Piles.filter(hasBridgePileDisplayData);
+
+    if (visiblePiles.length === info.BridgeInfo.Piles.length) {
+        return info;
+    }
+
+    return {
+        ...info,
+        BridgeInfo: {
+            ...info.BridgeInfo,
+            Piles: visiblePiles,
+        },
+    };
+}
+
+export function normalizeDomain(domain?: string) {
+    if (!domain) {
+        return undefined;
+    }
+    const normalizedDomain = domain.startsWith('/') ? domain.slice(1) : domain;
+    return normalizedDomain.toUpperCase();
+}

package/src/store/reducers/clusters/clusters.ts

@@ -0,0 +1,50 @@
+import {createSlice} from '@reduxjs/toolkit';
+import type {PayloadAction} from '@reduxjs/toolkit';
+
+import {api} from '../api';
+
+import type {ClustersFilters} from './types';
+import {prepareClustersData} from './utils';
+
+const initialState: ClustersFilters = {
+    clusterName: '',
+    status: [],
+    service: [],
+    version: [],
+    galaxy: [],
+};
+
+const slice = createSlice({
+    name: 'clusters',
+    initialState,
+    reducers: {
+        changeClustersFilters: (state, action: PayloadAction<Partial<ClustersFilters>>) => ({
+            ...state,
+            ...action.payload,
+        }),
+    },
+});
+
+export default slice.reducer;
+export const {changeClustersFilters} = slice.actions;
+
+export const clustersApi = api.injectEndpoints({
+    endpoints: (builder) => ({
+        getClustersList: builder.query({
+            queryFn: async (_, {signal}) => {
+                try {
+                    if (window.api.meta) {
+                        const data = await window.api.meta.getClustersList(undefined, {signal});
+                        return {data: prepareClustersData(data)};
+                    } else {
+                        throw new Error('Method is not implemented.');
+                    }
+                } catch (error) {
+                    return {error};
+                }
+            },
+            providesTags: ['All'],
+        }),
+    }),
+    overrideExisting: 'throw',
+});

package/src/store/reducers/clusters/selectors.ts

@@ -0,0 +1,95 @@
+import escapeRegExp from 'lodash/escapeRegExp';
+
+import type {ClustersFilters, ClustersStateSlice, PreparedCluster} from './types';
+
+// ==== Simple selectors ====
+
+export const selectClusterNameFilter = (state: ClustersStateSlice) => state.clusters.clusterName;
+export const selectStatusFilter = (state: ClustersStateSlice) => state.clusters.status;
+export const selectServiceFilter = (state: ClustersStateSlice) => state.clusters.service;
+export const selectVersionFilter = (state: ClustersStateSlice) => state.clusters.version;
+export const selectGalaxyFilter = (state: ClustersStateSlice) => state.clusters.galaxy;
+
+// ==== Filters ====
+
+const isMatchesByStatus = (clusterData: PreparedCluster, selectedStatuses: string[]) => {
+    return (
+        selectedStatuses.length === 0 ||
+        (clusterData.status && selectedStatuses.includes(clusterData.status))
+    );
+};
+
+const isMatchesByService = (clusterData: PreparedCluster, selectedServices: string[]) => {
+    return (
+        selectedServices.length === 0 ||
+        (clusterData.service && selectedServices.includes(clusterData.service))
+    );
+};
+
+const isMatchesByGalaxy = (clusterData: PreparedCluster, selectedGalaxies: string[]) => {
+    return (
+        selectedGalaxies.length === 0 ||
+        (clusterData.galaxy && selectedGalaxies.includes(clusterData.galaxy))
+    );
+};
+
+const isMatchesByVersion = (clusterData: PreparedCluster, selectedVersions: string[]) => {
+    return (
+        selectedVersions.length === 0 ||
+        selectedVersions.some((selectedVersion) => {
+            return clusterData.cluster?.Versions?.some((clusterVersion) =>
+                clusterVersion.startsWith(selectedVersion),
+            );
+        })
+    );
+};
+
+export const splitNameIntoParts = (name: string | undefined): string[] => {
+    return name?.toLowerCase().match(/[a-zA-Z]+|\d+/g) || [];
+};
+
+const isMatchesByTextQuery = (clusterData: PreparedCluster, searchQuery = '') => {
+    const preparedSearchQuery = searchQuery.trim().toLowerCase();
+
+    if (!preparedSearchQuery) {
+        return true;
+    }
+
+    const searchTokens = preparedSearchQuery.split(' ');
+
+    const clusterNameParts = splitNameIntoParts(clusterData.title);
+
+    const filteredByName = searchTokens.every((token) => {
+        const escapedToken = escapeRegExp(token);
+        const startsWithTokenRegExp = new RegExp(
+            `^${escapedToken}|[^a-zA-Z0-9]${escapedToken}`,
+            'i',
+        );
+
+        // both tests are required so that both searches '03' and 'vla03' would match 'YDB DEV VLA03'
+        return (
+            (clusterData.title && startsWithTokenRegExp.test(clusterData.title)) ||
+            clusterNameParts.some((name) => name.startsWith(token))
+        );
+    });
+    const filteredByVersion = clusterData.preparedVersions.some((item) =>
+        item.version.includes(preparedSearchQuery),
+    );
+    const filteredByHost = Boolean(clusterData.hosts && clusterData.hosts[preparedSearchQuery]);
+
+    const filteredByDomain = clusterData.domain?.toLowerCase().includes(preparedSearchQuery);
+
+    return filteredByName || filteredByVersion || filteredByHost || filteredByDomain;
+};
+
+export function filterClusters(clusters: PreparedCluster[], filters: ClustersFilters) {
+    return clusters.filter((cluster) => {
+        return (
+            isMatchesByGalaxy(cluster, filters.galaxy) &&
+            isMatchesByStatus(cluster, filters.status) &&
+            isMatchesByService(cluster, filters.service) &&
+            isMatchesByVersion(cluster, filters.version) &&
+            isMatchesByTextQuery(cluster, filters.clusterName)
+        );
+    });
+}

package/src/store/reducers/clusters/types.ts

@@ -0,0 +1,39 @@
+import type {
+    MetaBaseClusterInfo,
+    MetaClusterCoresUrl,
+    MetaClusterLinks,
+    MetaClusterLogsUrls,
+    MetaClusterSettings,
+    MetaClusterTraceView,
+    MetaExtendedClusterInfo,
+} from '../../../types/api/meta';
+import type {PreparedVersion} from '../../../utils/versions/types';
+
+export interface PreparedCluster extends Omit<MetaExtendedClusterInfo, 'name' | 'title'> {
+    name: string | undefined;
+    title: string | undefined;
+    preparedVersions: PreparedVersion[];
+    preparedComputeVersions: PreparedVersion[];
+    preparedStorageVersions: PreparedVersion[];
+    preparedBackend?: string;
+    settings: MetaClusterSettings | undefined;
+    links: MetaClusterLinks | undefined;
+    cores: MetaClusterCoresUrl | undefined;
+    logging: MetaClusterLogsUrls | undefined;
+    monitoring: MetaBaseClusterInfo['solomon'];
+    traceView: MetaClusterTraceView | undefined;
+    clusterDomain?: string;
+    clusterExternalName?: string;
+}
+
+export interface ClustersFilters {
+    status: string[];
+    service: string[];
+    version: string[];
+    galaxy: string[];
+    clusterName: string;
+}
+
+export interface ClustersStateSlice {
+    clusters: ClustersFilters;
+}

package/src/store/reducers/clusters/utils.ts

@@ -0,0 +1,69 @@
+import type {MetaClusterVersion, MetaClusters} from '../../../types/api/meta';
+import {uiFactory} from '../../../uiFactory/uiFactory';
+import {prepareBackendFromBalancer} from '../../../utils/parseBalancer';
+import {
+    getVersionMap,
+    getVersionsData,
+    prepareClusterVersions,
+} from '../../../utils/versions/clusterVersionColors';
+import {prepareClusterLinksFields} from '../cluster/parseFields';
+
+import type {PreparedCluster} from './types';
+
+export const prepareClustersData = (data: MetaClusters): PreparedCluster[] => {
+    const {clusters = []} = data;
+
+    let allMinorVersions = new Map();
+
+    // Collect all clusters minor versions
+    clusters.forEach(({versions = []}) => {
+        allMinorVersions = getVersionMap(versions, allMinorVersions);
+    });
+
+    // Get colors map for all clusters colors
+    const versionsData = getVersionsData(allMinorVersions);
+
+    // Apply color map to every cluster in the list
+    return clusters.map((cluster) => {
+        const parsedFields = prepareClusterLinksFields(cluster);
+        const {settings: parsedSettings} = parsedFields;
+
+        // If no backend is provided, it will be automatically generated by API instance
+        const useMetaProxy = uiFactory.useMetaProxy && parsedSettings?.use_meta_proxy !== false;
+        const clusterDomain = uiFactory.useClusterDomain
+            ? parsedSettings?.cluster_domain
+            : undefined;
+        const preparedBackend =
+            cluster.balancer && !useMetaProxy
+                ? prepareBackendFromBalancer(cluster.balancer)
+                : undefined;
+
+        // Split versions by role in a single pass
+        const {versions = []} = cluster;
+        const computeVersions: MetaClusterVersion[] = [];
+        const storageVersions: MetaClusterVersion[] = [];
+        for (const version of versions) {
+            if (version.role === 'compute') {
+                computeVersions.push(version);
+            } else if (version.role === 'storage') {
+                storageVersions.push(version);
+            }
+        }
+
+        const clusterName = cluster.name;
+        const clusterTitle = cluster.title || clusterName;
+
+        return {
+            ...cluster,
+            name: clusterName,
+            title: clusterTitle,
+            ...parsedFields,
+            preparedVersions: prepareClusterVersions(versions, versionsData),
+            preparedComputeVersions: prepareClusterVersions(computeVersions, versionsData),
+            preparedStorageVersions: prepareClusterVersions(storageVersions, versionsData),
+            preparedBackend,
+            clusterDomain,
+            clusterExternalName: parsedSettings?.cluster_external_name,
+        } satisfies PreparedCluster;
+    });
+};

package/src/store/reducers/codeAssist/codeAssist.ts

@@ -0,0 +1,113 @@
+import type {
+    AcceptEvent,
+    DeclineEvent,
+    IgnoreEvent,
+    PromptFile,
+    Suggestions,
+} from '@ydb-platform/monaco-ghost';
+
+import type {TelemetryOpenTabs} from '../../../types/api/codeAssist';
+import {api} from '../api';
+
+export const codeAssistApi = api.injectEndpoints({
+    endpoints: (builder) => ({
+        getCodeAssistSuggestions: builder.query<Suggestions, PromptFile[]>({
+            queryFn: async (promptFiles: PromptFile[]) => {
+                try {
+                    if (window.api.codeAssist) {
+                        const data =
+                            await window.api.codeAssist.getCodeAssistSuggestions(promptFiles);
+                        return {data};
+                    } else {
+                        throw new Error('Method is not implemented.');
+                    }
+                } catch {
+                    return {data: {items: []}};
+                }
+            },
+        }),
+
+        acceptSuggestion: builder.mutation({
+            queryFn: async (event: AcceptEvent) => {
+                try {
+                    if (window.api.codeAssist) {
+                        const data = await window.api.codeAssist.sendCodeAssistTelemetry({
+                            Accepted: {
+                                AcceptedText: event.acceptedText,
+                                ConvertedText: event.acceptedText,
+                                Timestamp: Date.now(),
+                                RequestId: event.requestId,
+                            },
+                        });
+                        return {data};
+                    } else {
+                        throw new Error('Method is not implemented.');
+                    }
+                } catch (error) {
+                    return {error};
+                }
+            },
+        }),
+
+        discardSuggestion: builder.mutation({
+            queryFn: async (event: DeclineEvent) => {
+                try {
+                    if (window.api.codeAssist) {
+                        const data = await window.api.codeAssist.sendCodeAssistTelemetry({
+                            Discarded: {
+                                RequestId: event.requestId,
+                                Timestamp: Date.now(),
+                                DiscardReason: 'OnCancel',
+                                DiscardedText: event.suggestionText,
+                                CacheHitCount: event.hitCount,
+                            },
+                        });
+                        return {data};
+                    } else {
+                        throw new Error('Method is not implemented.');
+                    }
+                } catch (error) {
+                    return {error};
+                }
+            },
+        }),
+
+        ignoreSuggestion: builder.mutation({
+            queryFn: async (event: IgnoreEvent) => {
+                try {
+                    if (window.api.codeAssist) {
+                        const data = await window.api.codeAssist.sendCodeAssistTelemetry({
+                            Ignored: {
+                                RequestId: event.requestId,
+                                Timestamp: Date.now(),
+                                IgnoredText: event.suggestionText,
+                            },
+                        });
+                        return {data};
+                    } else {
+                        throw new Error('Method is not implemented.');
+                    }
+                } catch (error) {
+                    return {error};
+                }
+            },
+        }),
+
+        sendUserQueriesData: builder.mutation({
+            queryFn: async (userQueries: TelemetryOpenTabs) => {
+                try {
+                    if (window.api.codeAssist) {
+                        const data =
+                            await window.api.codeAssist.sendCodeAssistOpenTabs(userQueries);
+                        return {data};
+                    } else {
+                        throw new Error('Method is not implemented.');
+                    }
+                } catch (error) {
+                    return {error};
+                }
+            },
+        }),
+    }),
+    overrideExisting: 'throw',
+});

package/src/store/reducers/configs.ts

@@ -0,0 +1,34 @@
+import {api} from './api';
+
+export const configsApi = api.injectEndpoints({
+    endpoints: (build) => ({
+        getFeatureFlags: build.query({
+            queryFn: async ({database}: {database?: string}, {signal}) => {
+                try {
+                    const res = await window.api.viewer.getFeatureFlags(database, {signal});
+                    const db = res.Databases[0];
+
+                    return {data: db.FeatureFlags};
+                } catch (error) {
+                    return {error};
+                }
+            },
+            providesTags: ['All'],
+        }),
+        getConfig: build.query({
+            queryFn: async ({database}: {database?: string}, {signal}) => {
+                try {
+                    const res = await window.api.viewer.getConfig(database, {signal});
+
+                    const {StartupConfigYaml, ...rest} = res;
+
+                    return {data: {current: rest, startup: String(StartupConfigYaml)}};
+                } catch (error) {
+                    return {error};
+                }
+            },
+            providesTags: ['All'],
+        }),
+    }),
+    overrideExisting: 'throw',
+});

package/src/store/reducers/environments/environments.ts

@@ -0,0 +1,24 @@
+import {serializeReduxError} from '../../../utils/errors/serializeReduxError';
+import {api} from '../api';
+
+import {prepareEnvironments} from './utils';
+
+export const environmentsApi = api.injectEndpoints({
+    endpoints: (builder) => ({
+        getMetaEnvironments: builder.query({
+            queryFn: async (_) => {
+                try {
+                    if (!window.api.meta) {
+                        throw new Error('Method is not implemented.');
+                    }
+                    const data = await window.api.meta.getMetaEnvironments();
+
+                    return {data: prepareEnvironments(data)};
+                } catch (error) {
+                    return {error: serializeReduxError(error)};
+                }
+            },
+        }),
+    }),
+    overrideExisting: 'throw',
+});

package/src/store/reducers/environments/utils.ts

@@ -0,0 +1,20 @@
+import type {MetaEnvironmentsResponse} from '../../../types/api/environments';
+import {uiFactory} from '../../../uiFactory/uiFactory';
+
+export function prepareEnvironments(environmentsResponse: MetaEnvironmentsResponse) {
+    const determinedEnvironments = uiFactory.databasesEnvironmentsConfig?.getEnvironments?.();
+
+    if (determinedEnvironments?.length) {
+        return determinedEnvironments;
+    }
+
+    const rawEnvironments = environmentsResponse?.environments.map((env) => env.name) ?? [];
+    const supportedEnvironments = uiFactory.databasesEnvironmentsConfig?.getSupportedEnvironments();
+
+    if (!supportedEnvironments?.length) {
+        return [];
+    }
+
+    // Return only environments that are in supported environments list
+    return supportedEnvironments.filter((envName) => rawEnvironments.includes(envName));
+}

package/src/store/reducers/executeTopQueries/constants.ts

@@ -0,0 +1,19 @@
+// Define table names as constants
+export const TOP_QUERIES_TABLES = {
+    CPU_TIME: {
+        ONE_HOUR: '.sys/top_queries_by_cpu_time_one_hour',
+        ONE_MINUTE: '.sys/top_queries_by_cpu_time_one_minute',
+    },
+    DURATION: {
+        ONE_HOUR: '.sys/top_queries_by_duration_one_hour',
+        ONE_MINUTE: '.sys/top_queries_by_duration_one_minute',
+    },
+    READ_BYTES: {
+        ONE_HOUR: '.sys/top_queries_by_read_bytes_one_hour',
+        ONE_MINUTE: '.sys/top_queries_by_read_bytes_one_minute',
+    },
+    REQUEST_UNITS: {
+        ONE_HOUR: '.sys/top_queries_by_request_units_one_hour',
+        ONE_MINUTE: '.sys/top_queries_by_request_units_one_minute',
+    },
+};