ydb-embedded-ui 20.2.1 → 20.4.0

package/src/store/reducers/capabilities/hooks.ts

@@ -0,0 +1,262 @@
+import type {
+    Capability,
+    FeatureSetting,
+    MetaCapability,
+    SecuritySetting,
+} from '../../../types/api/capabilities';
+import {uiFactory} from '../../../uiFactory/uiFactory';
+import {useSetting, useTypedSelector} from '../../../utils/hooks';
+import {useDatabaseFromQuery} from '../../../utils/hooks/useDatabaseFromQuery';
+import {useClusterBaseInfo} from '../cluster/cluster';
+import {SETTING_KEYS} from '../settings/constants';
+
+import {
+    capabilitiesApi,
+    selectBridgeModeEnabled,
+    selectCapabilityVersion,
+    selectDatabaseCapabilities,
+    selectFeatureSetting,
+    selectGraphShardExists,
+    selectMetaCapabilities,
+    selectMetaCapabilityVersion,
+    selectSecuritySetting,
+} from './capabilities';
+
+export function useCapabilitiesQuery() {
+    const database = useDatabaseFromQuery();
+
+    return capabilitiesApi.useGetClusterCapabilitiesQuery({database});
+}
+
+export function useCapabilitiesLoaded() {
+    const database = useDatabaseFromQuery();
+
+    const {data, error} = useTypedSelector((state) => selectDatabaseCapabilities(state, database));
+
+    // If capabilities endpoint is not available, request finishes with error
+    // That means no new features are available
+    return Boolean(data || error);
+}
+
+export function useAllCapabilitiesLoaded() {
+    // It is always true if there is no meta, since request finishes with an error
+    const metaCapabilitiesLoaded = useMetaCapabilitiesLoaded();
+    const capabilitiesLoaded = useCapabilitiesLoaded();
+
+    return metaCapabilitiesLoaded && capabilitiesLoaded;
+}
+
+const useGetFeatureVersion = (feature: Capability) => {
+    const database = useDatabaseFromQuery();
+
+    return useTypedSelector((state) => selectCapabilityVersion(state, feature, database) || 0);
+};
+
+export const useGetMetaFeatureVersion = (feature: MetaCapability) => {
+    return useTypedSelector((state) => selectMetaCapabilityVersion(state, feature) || 0);
+};
+
+export const useSchemaTopicDataAvailable = () => {
+    return useGetMetaFeatureVersion('/meta/schema_topic_data') >= 1;
+};
+
+export const useOidcAvailable = () => {
+    const authorizeAvailable = useGetMetaFeatureVersion('/meta/oidc/authorize') >= 1;
+    const callbackAvailable = useGetMetaFeatureVersion('/meta/oidc/callback') >= 1;
+
+    return authorizeAvailable && callbackAvailable;
+};
+
+export const useCreateDirectoryFeatureAvailable = () => {
+    return useGetFeatureVersion('/scheme/directory') > 0;
+};
+
+export const useDiskPagesAvailable = () => {
+    // New PDisk (info, restart) and VDisk (evict) handlers was made at the same time
+    // It's enough to check only pdisk handler
+    return useGetFeatureVersion('/pdisk/info') > 0;
+};
+
+export const useTracingLevelOptionAvailable = () => {
+    return useGetFeatureVersion('/viewer/query') > 2;
+};
+
+export const useStorageGroupsHandlerAvailable = () => {
+    return useGetFeatureVersion('/storage/groups') > 2;
+};
+
+export const useStorageStatsAvailable = () => {
+    return useGetFeatureVersion('/viewer/storage_stats') > 0;
+};
+
+export const useDetailedStorageViewAvailable = () => {
+    const clusterInfo = useClusterBaseInfo();
+
+    return uiFactory.isDetailedStorageViewAvailable?.({clusterInfo});
+};
+
+export const useNewStorageViewEnabled = () => {
+    const [enabled] = useSetting(SETTING_KEYS.ENABLE_NEW_STORAGE_VIEW, false);
+    const detailedStorageViewAvailable = useDetailedStorageViewAvailable();
+
+    return enabled && detailedStorageViewAvailable;
+};
+
+export const useBlobIndexStatWithVdiskId = () => {
+    return useGetFeatureVersion('/vdisk/blobindexstat') > 1;
+};
+
+export const useStorageGroupsHandlerHasGrouping = () => {
+    return useGetFeatureVersion('/storage/groups') > 4;
+};
+
+export const useViewerNodesHandlerHasGrouping = () => {
+    return useGetFeatureVersion('/viewer/nodes') > 6;
+};
+
+export const useViewerNodesHandlerHasGroupingBySystemState = () => {
+    return useGetFeatureVersion('/viewer/nodes') > 11;
+};
+
+export const useViewerNodesHandlerHasNetworkStats = () => {
+    return useGetFeatureVersion('/viewer/nodes') > 13;
+};
+
+// Before this version handler has very big response size if nodes quantity is more than 100
+// Response size could be up to 20-30MB, it loads very long and freezes UI
+// It is not very common for databases, but an often case for clusters
+export const useNodesHandlerHasWorkingClusterNetworkStats = () => {
+    return useGetFeatureVersion('/viewer/nodes') >= 16;
+};
+
+export const useViewerPeersHandlerAvailable = () => {
+    return useGetFeatureVersion('/viewer/peers') > 0;
+};
+
+export const useFeatureFlagsAvailable = () => {
+    return useGetFeatureVersion('/viewer/feature_flags') > 1;
+};
+export const useClusterDashboardAvailable = () => {
+    return useGetFeatureVersion('/viewer/cluster') > 4;
+};
+
+export const useSnapshotReadWriteAvailable = () => {
+    return useGetFeatureVersion('/viewer/query') >= 11;
+};
+
+export const useExecuteQueryAndForgetAvailable = () => {
+    return useGetFeatureVersion('/viewer/query') >= 12;
+};
+
+export const useStreamingAvailable = () => {
+    return useGetFeatureVersion('/viewer/query') >= 8;
+};
+export const useBaseConfigAvailable = () => {
+    return useGetFeatureVersion('/viewer/config') >= 1;
+};
+
+export const useConfigAvailable = () => {
+    const isBaseConfigsAvailable = useBaseConfigAvailable();
+    const isFeaturesAvailable = useFeatureFlagsAvailable();
+    return isBaseConfigsAvailable || isFeaturesAvailable;
+};
+
+export const useEditAccessAvailable = () => {
+    return useGetFeatureVersion('/viewer/acl') >= 2 && !uiFactory.hideGrantAccess;
+};
+
+const ACL_NON_DEFAULT_INHERITANCE_REVOCATION_VERSION = 3;
+
+export const useNonDefaultAclInheritanceRevocationAvailable = () => {
+    return useGetFeatureVersion('/viewer/acl') >= ACL_NON_DEFAULT_INHERITANCE_REVOCATION_VERSION;
+};
+
+export const useViewerTopicDataAvailable = () => {
+    return useGetFeatureVersion('/viewer/topic_data') >= 1;
+};
+
+export const useTopicDataAvailable = () => {
+    const schemaTopicDataAvailable = useSchemaTopicDataAvailable();
+    const viewerTopicDataAvailable = useViewerTopicDataAvailable();
+
+    return schemaTopicDataAvailable || viewerTopicDataAvailable;
+};
+
+const useGetSecuritySetting = (feature: SecuritySetting) => {
+    const database = useDatabaseFromQuery();
+
+    return useTypedSelector((state) => selectSecuritySetting(state, feature, database));
+};
+
+const useGetFeatureSetting = (feature: FeatureSetting) => {
+    const database = useDatabaseFromQuery();
+
+    return useTypedSelector((state) => selectFeatureSetting(state, feature, database));
+};
+
+export const useAnalyzeOperationAvailable = () => {
+    const operationListVersion = useGetFeatureVersion('/operation/list');
+    const analyzeLongRunningOperationEnabled = useGetFeatureSetting(
+        'EnableAnalyzeLongRunningOperation',
+    );
+
+    return operationListVersion >= 2 && Boolean(analyzeLongRunningOperationEnabled);
+};
+
+export const useGraphShardExists = () => {
+    const database = useDatabaseFromQuery();
+
+    return useTypedSelector((state) => selectGraphShardExists(state, database));
+};
+
+export const useBridgeModeEnabled = () => {
+    const database = useDatabaseFromQuery();
+    const enabled = useTypedSelector((state) => selectBridgeModeEnabled(state, database));
+    return Boolean(enabled);
+};
+
+export const useClusterWithoutAuthInUI = () => {
+    return useGetSecuritySetting('UseLoginProvider') === false;
+};
+
+export const useLoginWithDatabase = () => {
+    return useGetSecuritySetting('DomainLoginOnly') === false;
+};
+
+export function useMetaCapabilitiesQuery() {
+    capabilitiesApi.useGetMetaCapabilitiesQuery({});
+}
+
+export function useMetaCapabilitiesLoaded() {
+    const {data, error} = useTypedSelector(selectMetaCapabilities);
+
+    // If capabilities endpoint is not available, request finishes with error
+    // That means no new features are available
+    return Boolean(data || error);
+}
+
+export const useMetaEnvironmentsAvailable = () => {
+    return Boolean(uiFactory.databasesEnvironmentsConfig);
+};
+
+export const useMultiTabQueryEditorEnabled = () => {
+    return Boolean(uiFactory.enableMultiTabQueryEditor);
+};
+
+export const useEmMetaAvailable = () => {
+    return Boolean(uiFactory.emMetaAvailable);
+};
+
+export const useBlobStorageCapacityMetricsAvailable = () => {
+    const hasStorageGroups = useGetFeatureVersion('/storage/groups') >= 10;
+    const hasViewerNodes = useGetFeatureVersion('/viewer/nodes') >= 20;
+
+    return hasStorageGroups && hasViewerNodes;
+};
+
+export const useBlobStorageCapacityMetricsEnabled = () => {
+    const available = useBlobStorageCapacityMetricsAvailable();
+    const [enabled] = useSetting(SETTING_KEYS.ENABLE_BLOB_STORAGE_CAPACITY_METRICS, false);
+
+    return enabled && available;
+};

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

@@ -0,0 +1,247 @@
+import {createSelector, createSlice} from '@reduxjs/toolkit';
+import type {Dispatch, PayloadAction} from '@reduxjs/toolkit';
+import {skipToken} from '@reduxjs/toolkit/query';
+
+import type {ClusterTab} from '../../../containers/Cluster/utils';
+import {clusterTabsIds, isClusterTab} from '../../../containers/Cluster/utils';
+import {isClusterInfoV2} from '../../../types/api/cluster';
+import type {TClusterInfo} from '../../../types/api/cluster';
+import type {TTabletStateInfo} from '../../../types/api/tablet';
+import {CLUSTER_DEFAULT_TITLE} from '../../../utils/constants';
+import {useClusterNameFromQuery} from '../../../utils/hooks/useDatabaseFromQuery';
+import {useIsViewerUser} from '../../../utils/hooks/useIsUserAllowedToMakeChanges';
+import {isQueryErrorResponse} from '../../../utils/query';
+import type {RootState} from '../../defaultStore';
+import {api} from '../api';
+import {selectNodesMap} from '../nodesList';
+
+import {
+    parseCoresUrl,
+    parseLinksField,
+    parseLoggingUrls,
+    parseSettingsField,
+    parseTraceField,
+} from './parseFields';
+import type {ClusterGroupsStats, ClusterState} from './types';
+import {
+    createSelectClusterGroupsQuery,
+    getGroupStatsFromClusterInfo,
+    normalizeDomain,
+    parseGroupsStatsQueryResponse,
+    prepareClusterInfo,
+} from './utils';
+
+export const INITIAL_DEFAULT_CLUSTER_TAB = clusterTabsIds.tenants;
+
+const initialState: ClusterState = {
+    defaultClusterTab: INITIAL_DEFAULT_CLUSTER_TAB,
+};
+const clusterSlice = createSlice({
+    name: 'cluster',
+    initialState,
+    reducers: {
+        setDefaultClusterTab(state, action: PayloadAction<ClusterTab>) {
+            state.defaultClusterTab = action.payload;
+        },
+    },
+});
+
+export function updateDefaultClusterTab(tab: string) {
+    return (dispatch: Dispatch) => {
+        if (isClusterTab(tab)) {
+            dispatch(clusterSlice.actions.setDefaultClusterTab(tab));
+        }
+    };
+}
+
+export default clusterSlice.reducer;
+
+export const clusterApi = api.injectEndpoints({
+    endpoints: (builder) => ({
+        getClusterInfo: builder.query<
+            {
+                clusterData: TClusterInfo;
+                groupsStats?: ClusterGroupsStats;
+            },
+            string | undefined
+        >({
+            queryFn: async (clusterName, {signal}) => {
+                try {
+                    const rawClusterData = await window.api.viewer.getClusterInfo(clusterName, {
+                        signal,
+                    });
+                    const clusterData = prepareClusterInfo(rawClusterData);
+
+                    const clusterRoot = clusterData.Domain;
+                    // Without domain we cannot get stats from system tables
+                    if (!clusterRoot) {
+                        return {data: {clusterData}};
+                    }
+
+                    if (isClusterInfoV2(clusterData)) {
+                        return {
+                            data: {
+                                clusterData,
+                                groupsStats: getGroupStatsFromClusterInfo(clusterData),
+                            },
+                        };
+                    }
+
+                    try {
+                        const query = createSelectClusterGroupsQuery();
+
+                        // Normally query request should be fulfilled within 300-400ms even on very big clusters
+                        // Table with stats is supposed to be very small (less than 10 rows)
+                        // So we batch this request with cluster request to prevent possible layout shifts, if data is missing
+                        const groupsStatsResponse = await window.api.viewer.sendQuery({
+                            query: query,
+                            database: clusterRoot,
+                            action: 'execute-query',
+                            internal_call: true,
+                        });
+
+                        if (isQueryErrorResponse(groupsStatsResponse)) {
+                            return {data: {clusterData}};
+                        }
+
+                        return {
+                            data: {
+                                clusterData,
+                                groupsStats: parseGroupsStatsQueryResponse(groupsStatsResponse),
+                            },
+                        };
+                    } catch {
+                        return {data: {clusterData}};
+                    }
+                } catch (error) {
+                    return {error};
+                }
+            },
+            providesTags: ['All'],
+        }),
+        getClusterBaseInfo: builder.query({
+            queryFn: async (clusterName: string, {signal}) => {
+                try {
+                    if (!window.api.meta) {
+                        throw new Error('Method is not implemented.');
+                    }
+                    const data = await window.api.meta.getClusterBaseInfo(clusterName, {signal});
+                    return {data};
+                } catch (error) {
+                    return {error};
+                }
+            },
+            providesTags: ['All'],
+        }),
+    }),
+    overrideExisting: 'throw',
+});
+
+export function useClusterBaseInfo() {
+    const clusterNameFromQuery = useClusterNameFromQuery();
+    const isViewerUser = useIsViewerUser();
+
+    const shouldFetchClusterBaseInfo = Boolean(clusterNameFromQuery && isViewerUser);
+    const {currentData, isSuccess, isError} = clusterApi.useGetClusterBaseInfoQuery(
+        clusterNameFromQuery || skipToken,
+        {
+            skip: !isViewerUser,
+        },
+    );
+
+    const {solomon: monitoring, name, title, ...data} = currentData || {};
+
+    // name is used for requests, title is used for display
+    // Example:
+    // Name: ydb_vla_dev02
+    // Title: YDB DEV VLA02
+    const clusterName = name ?? clusterNameFromQuery ?? undefined;
+    const clusterTitle = title || clusterName;
+
+    // Whether the request settled (or is not needed). Until then `settings` is
+    // not yet known and any decision that depends on it must be deferred.
+    const isResolved = !shouldFetchClusterBaseInfo || isSuccess || isError;
+
+    return {
+        ...data,
+
+        monitoring,
+
+        name: clusterName,
+        title: clusterTitle,
+
+        traceView: parseTraceField(data.trace_view),
+        cores: parseCoresUrl(data.cores),
+        logging: parseLoggingUrls(data.logging),
+
+        settings: parseSettingsField(data.settings),
+        links: parseLinksField(data.links),
+
+        isError,
+        isResolved,
+    };
+}
+
+export function useClusterWithProxy() {
+    const {settings} = useClusterBaseInfo();
+    return settings?.use_meta_proxy !== false;
+}
+
+/**
+ * Reports whether the cluster base info (and therefore the `use_meta_proxy`
+ * setting) is known. While the request is in flight `useClusterWithProxy()`
+ * optimistically returns `true`, so any decision that switches backends
+ * (e.g. meta vs viewer for topic data) must be deferred until this resolves.
+ * When the query is skipped (single-cluster mode / non-viewer user) settings
+ * are not applicable and considered resolved — defaults apply.
+ */
+export function useClusterProxySettingResolved() {
+    const {isResolved} = useClusterBaseInfo();
+    return isResolved;
+}
+
+type ClusterBaseInfo = ReturnType<typeof useClusterBaseInfo>;
+
+export type ClusterInfo = Omit<ClusterBaseInfo, 'isError' | 'isResolved'>;
+
+const createClusterInfoSelector = createSelector(
+    (clusterName?: string) => clusterName,
+    (clusterName) => clusterApi.endpoints.getClusterInfo.select(clusterName),
+);
+
+const selectClusterInfo = createSelector(
+    (state: RootState) => state,
+    (_state: RootState, clusterName?: string) => createClusterInfoSelector(clusterName),
+    (state, selectGetClusterInfo) => selectGetClusterInfo(state).data,
+);
+
+export const selectClusterTitle = createSelector(
+    (_state: RootState, clusterName?: string) => clusterName,
+    (state: RootState, clusterName?: string) => selectClusterInfo(state, clusterName),
+    (clusterName, clusterInfo) => {
+        return (
+            clusterName ||
+            normalizeDomain(clusterInfo?.clusterData?.Domain) ||
+            CLUSTER_DEFAULT_TITLE
+        );
+    },
+);
+
+export const selectClusterTabletsWithFqdn = createSelector(
+    (state: RootState, clusterName?: string) => selectClusterInfo(state, clusterName),
+    (state: RootState) => selectNodesMap(state),
+    (data, nodeHostsMap): (TTabletStateInfo & {fqdn?: string})[] => {
+        const tablets = data?.clusterData?.SystemTablets;
+        if (!tablets) {
+            return [];
+        }
+        if (!nodeHostsMap) {
+            return tablets;
+        }
+        return tablets.map((tablet) => {
+            const fqdn =
+                tablet.NodeId === undefined ? undefined : nodeHostsMap.get(tablet.NodeId)?.Host;
+            return {...tablet, fqdn};
+        });
+    },
+);

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

@@ -0,0 +1,178 @@
+import {z} from 'zod';
+
+import type {
+    MetaBaseClusterInfo,
+    MetaClusterCoresUrl,
+    MetaClusterLinks,
+    MetaClusterLogsUrls,
+    MetaClusterSettings,
+    MetaClusterTraceView,
+} from '../../../types/api/meta';
+
+export interface PreparedClusterLinks {
+    monitoring: MetaBaseClusterInfo['solomon'];
+    traceView: MetaClusterTraceView | undefined;
+    cores: MetaClusterCoresUrl | undefined;
+    logging: MetaClusterLogsUrls | undefined;
+    settings: MetaClusterSettings | undefined;
+    links: MetaClusterLinks | undefined;
+}
+
+const monitoringSchema = z.object({
+    monitoring_url: z.string().url(),
+    serverless_dashboard: z.string().optional(),
+    dedicated_dashboard: z.string().optional(),
+    cluster_dashboard: z.string().optional(),
+    host: z.string().optional(),
+    slot: z.string().optional(),
+    cluster_name: z.string().optional(),
+});
+
+export function parseMonitoringField(
+    monitoring: MetaBaseClusterInfo['solomon'],
+): MetaBaseClusterInfo['solomon'] {
+    if (!monitoring) {
+        return undefined;
+    }
+
+    if (typeof monitoring === 'object') {
+        return monitoringSchema.safeParse(monitoring).data;
+    }
+
+    const trimmedMonitoring = monitoring.trim();
+
+    if (!trimmedMonitoring) {
+        return undefined;
+    }
+
+    try {
+        const parsedMonitoring = JSON.parse(trimmedMonitoring);
+
+        if (typeof parsedMonitoring === 'string') {
+            return parsedMonitoring;
+        }
+
+        return monitoringSchema.safeParse(parsedMonitoring).data;
+    } catch {
+        return trimmedMonitoring;
+    }
+}
+
+const traceViewSchema = z.object({
+    url: z.string().url(),
+});
+
+export function parseTraceField(
+    traceView: MetaBaseClusterInfo['trace_view'],
+): MetaClusterTraceView | undefined {
+    if (traceView && typeof traceView === 'object') {
+        return traceView;
+    }
+    try {
+        return traceView ? traceViewSchema.parse(JSON.parse(traceView)) : undefined;
+    } catch (e) {
+        console.error('Error parsing trace_view field:', e);
+    }
+
+    return undefined;
+}
+
+const coresUrlSchema = z.object({
+    url: z.string().url(),
+});
+
+export function parseCoresUrl(
+    cores: MetaBaseClusterInfo['cores'],
+): MetaClusterCoresUrl | undefined {
+    if (cores && typeof cores === 'object') {
+        return cores;
+    }
+    try {
+        return cores ? coresUrlSchema.parse(JSON.parse(cores)) : undefined;
+    } catch (e) {
+        console.error('Error parsing cores field:', e);
+    }
+
+    return undefined;
+}
+
+const loggingUrlsSchema = z.object({
+    url: z.string().url().optional(),
+    slo_logs_url: z.string().url().optional(),
+    monium_cluster: z.string().optional(),
+});
+
+export function parseLoggingUrls(
+    logging: MetaBaseClusterInfo['logging'],
+): MetaClusterLogsUrls | undefined {
+    if (logging && typeof logging === 'object') {
+        return logging;
+    }
+    try {
+        return logging ? loggingUrlsSchema.parse(JSON.parse(logging)) : undefined;
+    } catch (e) {
+        console.error('Error parsing logging field:', e);
+    }
+
+    return undefined;
+}
+
+const settingsSchema = z.object({
+    use_meta_proxy: z.boolean().optional(),
+    cluster_domain: z.string().optional(),
+    cluster_external_name: z.string().optional(),
+});
+
+export function parseSettingsField(
+    settings: MetaBaseClusterInfo['settings'],
+): MetaClusterSettings | undefined {
+    if (settings && typeof settings === 'object') {
+        return settings;
+    }
+    try {
+        return settings ? settingsSchema.parse(JSON.parse(settings)) : undefined;
+    } catch (e) {
+        console.error('Error parsing settings field:', e);
+    }
+
+    return undefined;
+}
+
+const linksSchema = z.array(
+    z.object({
+        title: z.string().optional(),
+        description: z.string().optional(),
+        url: z.string(),
+        type: z.string(),
+        context: z.string().optional(),
+    }),
+);
+
+export function parseLinksField(links: MetaBaseClusterInfo['links']): MetaClusterLinks | undefined {
+    if (Array.isArray(links)) {
+        return links;
+    }
+    try {
+        return links ? linksSchema.parse(JSON.parse(links)) : undefined;
+    } catch (e) {
+        console.error('Error parsing links field:', e);
+    }
+
+    return undefined;
+}
+
+export function prepareClusterLinksFields(
+    data: Pick<
+        MetaBaseClusterInfo,
+        'solomon' | 'trace_view' | 'cores' | 'logging' | 'settings' | 'links'
+    >,
+): PreparedClusterLinks {
+    return {
+        monitoring: parseMonitoringField(data.solomon),
+        traceView: parseTraceField(data.trace_view),
+        cores: parseCoresUrl(data.cores),
+        logging: parseLoggingUrls(data.logging),
+        settings: parseSettingsField(data.settings),
+        links: parseLinksField(data.links),
+    };
+}

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

@@ -0,0 +1,20 @@
+import type {ClusterTab} from '../../../containers/Cluster/utils';
+
+export interface DiskErasureGroupsStats {
+    diskType: string;
+    erasure: string;
+    createdGroups: number;
+    totalGroups: number;
+    allocatedSize: number;
+    availableSize: number;
+}
+
+/** Keys - erasure types */
+type DiskGroupsStats = Record<string, DiskErasureGroupsStats>;
+
+/** Keys - PDisks types */
+export type ClusterGroupsStats = Record<string, DiskGroupsStats>;
+
+export interface ClusterState {
+    defaultClusterTab: ClusterTab;
+}