feat: ai assistant placeholders

src/components/ComponentsProvider/componentsRegistry.ts

@@ -6,11 +6,15 @@ import {StaffCard} from '../User/StaffCard';
 import type {ComponentsRegistryTemplate} from './registry';
 import {Registry} from './registry';
 
+const EmptyPlaceholder = () => null;
+
 const componentsRegistryInner = new Registry()
     .register('StaffCard', StaffCard)
     .register('AsideNavigation', AsideNavigation)
     .register('ErrorBoundary', ErrorBoundaryInner)
-    .register('ShardsTable', ShardsTable);
+    .register('ShardsTable', ShardsTable)
+    .register('AIAssistantButton', EmptyPlaceholder)
+    .register('ChatPanel', EmptyPlaceholder);
 
 export type ComponentsRegistry = ComponentsRegistryTemplate<typeof componentsRegistryInner>;
 

src/containers/App/App.tsx

@@ -5,6 +5,7 @@ import type {History} from 'history';
 import {Helmet} from 'react-helmet-async';
 import {connect} from 'react-redux';
 
+import {componentsRegistry} from '../../components/ComponentsProvider/componentsRegistry';
 import {ErrorBoundary} from '../../components/ErrorBoundary/ErrorBoundary';
 import type {RootState} from '../../store';
 import {Navigation} from '../AsideNavigation/Navigation';
@@ -32,6 +33,8 @@ function App({
     children,
     userSettings = getUserSettings({singleClusterMode}),
 }: AppProps) {
+    const ChatPanel = componentsRegistry.get('ChatPanel');
+
     return (
         <Providers store={store} history={history}>
             <Helmet defaultTitle="YDB Monitoring" titleTemplate="%s — YDB Monitoring" />
@@ -43,6 +46,7 @@ function App({
                     </ErrorBoundary>
                 </Navigation>
             </ContentWrapper>
+            {ChatPanel && <ChatPanel />}
             <ReduxTooltip />
         </Providers>
     );

src/containers/Header/Header.tsx

@@ -4,6 +4,7 @@ import {ArrowUpRightFromSquare, CirclePlus, PlugConnection} from '@gravity-ui/ic
 import {Breadcrumbs, Button, Divider, Flex, Icon} from '@gravity-ui/uikit';
 import {useLocation} from 'react-router-dom';
 
+import {componentsRegistry} from '../../components/ComponentsProvider/componentsRegistry';
 import {getConnectToDBDialog} from '../../components/ConnectToDB/ConnectToDBDialog';
 import {InternalLink} from '../../components/InternalLink';
 import {useAddClusterFeatureAvailable} from '../../store/reducers/capabilities/hooks';
@@ -38,6 +39,8 @@ function Header() {
     const isAddClusterAvailable =
         useAddClusterFeatureAvailable() && uiFactory.onAddCluster !== undefined;
 
+    const AIAssistantButton = componentsRegistry.get('AIAssistantButton');
+
     const breadcrumbItems = React.useMemo(() => {
         let options = {...pageBreadcrumbsOptions, singleClusterMode};
 
@@ -76,6 +79,10 @@ function Header() {
             );
         }
 
+        if (AIAssistantButton) {
+            elements.push(<AIAssistantButton key="ai-assistant" />);
+        }
+
         if (!isClustersPage && isUserAllowedToMakeChanges) {
             elements.push(
                 <Button view="flat" href={createDeveloperUIInternalPageHref()} target="_blank">

src/containers/Heatmap/Heatmap.tsx

@@ -88,7 +88,9 @@ export const Heatmap = ({path, database}: HeatmapProps) => {
         const {min, max} = getCurrentMetricLimits(currentMetric, tablets);
 
         const preparedTablets = tablets.map((tablet) => {
-            const value = currentMetric && Number(tablet.metrics?.[currentMetric]);
+            const value =
+                currentMetric &&
+                Number(tablet.metrics?.[currentMetric as keyof typeof tablet.metrics]);
             const colorIndex = getColorIndex(value, min, max);
             const color = COLORS_RANGE[colorIndex];
 

src/store/configureStore.ts

@@ -1,4 +1,4 @@
-import {configureStore as configureReduxStore} from '@reduxjs/toolkit';
+import {combineReducers, configureStore as configureReduxStore} from '@reduxjs/toolkit';
 import type {Action, Dispatch, Middleware, Reducer, UnknownAction} from '@reduxjs/toolkit';
 import type {History} from 'history';
 import {createBrowserHistory} from 'history';
@@ -7,7 +7,7 @@ import {listenForHistoryChange} from 'redux-location-state';
 import {YdbEmbeddedAPI} from '../services/api';
 
 import {getUrlData} from './getUrlData';
-import rootReducer from './reducers';
+import {rootReducer} from './reducers';
 import {api as storeApi} from './reducers/api';
 import {syncUserSettingsFromLS} from './reducers/settings/settings';
 import {UPDATE_REF} from './reducers/tooltip';
@@ -54,18 +54,70 @@ export const codeAssistBackend = window.code_assist_backend;
 
 const isSingleClusterMode = `${metaBackend}` === 'undefined';
 
-export function configureStore({
-    aRootReducer = rootReducer,
-    singleClusterMode = isSingleClusterMode,
-    api = new YdbEmbeddedAPI({webVersion, withCredentials: !customBackend}),
-} = {}) {
+interface BaseStoreOptions {
+    singleClusterMode?: boolean;
+    api?: YdbEmbeddedAPI;
+}
+
+interface StoreOptionsWithCustomRootReducer extends BaseStoreOptions {
+    /**
+     * Custom root reducer that completely replaces the default rootReducer.
+     * ⚠️ Cannot be used together with additionalReducers
+     */
+    aRootReducer: Reducer;
+    /**
+     * @deprecated When using aRootReducer, additionalReducers cannot be used
+     */
+    additionalReducers?: undefined;
+}
+
+interface StoreOptionsWithAdditionalReducers extends BaseStoreOptions {
+    /**
+     * @deprecated When using additionalReducers, aRootReducer cannot be used
+     */
+    aRootReducer?: undefined;
+    /**
+     * Additional reducers to be merged with the default rootReducer.
+     * ⚠️ Cannot be used together with aRootReducer
+     */
+    additionalReducers: Record<string, Reducer>;
+}
+
+interface StoreOptionsDefault extends BaseStoreOptions {
+    aRootReducer?: undefined;
+    additionalReducers?: undefined;
+}
+
+export type ConfigureStoreOptions =
+    | StoreOptionsWithCustomRootReducer
+    | StoreOptionsWithAdditionalReducers
+    | StoreOptionsDefault;
+
+export function configureStore(options: ConfigureStoreOptions = {}) {
+    const {
+        aRootReducer,
+        singleClusterMode = isSingleClusterMode,
+        api = new YdbEmbeddedAPI({webVersion, withCredentials: !customBackend}),
+        additionalReducers = {},
+    } = options;
+
     ({backend, basename, clusterName} = getUrlData({
         singleClusterMode,
         customBackend,
     }));
     const history = createBrowserHistory({basename});
+    let finalReducer: Reducer;
+
+    if (aRootReducer) {
+        finalReducer = aRootReducer;
+    } else {
+        finalReducer = combineReducers({
+            ...rootReducer,
+            ...additionalReducers,
+        });
+    }
 
-    const store = _configureStore(aRootReducer, history, {singleClusterMode}, [
+    const store = _configureStore(finalReducer, history, {singleClusterMode}, [
         storeApi.middleware,
     ]);
     listenForHistoryChange(store, history);

src/store/reducers/index.ts

@@ -1,5 +1,3 @@
-import {combineReducers} from '@reduxjs/toolkit';
-
 import {api} from './api';
 import authentication from './authentication/authentication';
 import cluster from './cluster/cluster';
@@ -39,9 +37,3 @@ export const rootReducer = {
     fullscreen,
     clusters,
 };
-
-const combinedReducer = combineReducers({
-    ...rootReducer,
-});
-
-export default combinedReducer;