feat: ai placeholders

Author: astandrik

package-lock.json

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

src/components/ComponentsProvider/componentsRegistry.ts

@@ -0,0 +1,3 @@
+export {ComponentsProvider} from './ComponentsProvider';
+export {componentsRegistry} from './componentsRegistry';
+export type {ComponentsRegistry} from './componentsRegistry';

src/components/ComponentsProvider/index.ts

@@ -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,9 @@ function App({
     children,
     userSettings = getUserSettings({singleClusterMode}),
 }: AppProps) {
+    // Get ChatPanel from registry if it exists
+    const ChatPanel = componentsRegistry.get('ChatPanel');
+
     return (
         <Providers store={store} history={history}>
             <Helmet defaultTitle="YDB Monitoring" titleTemplate="%s — YDB Monitoring" />
@@ -43,6 +47,8 @@ function App({
                     </ErrorBoundary>
                 </Navigation>
             </ContentWrapper>
+            {/* Render ChatPanel only if it's registered */}
+            {ChatPanel && <ChatPanel />}
             <ReduxTooltip />
         </Providers>
     );

src/containers/App/App.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,9 @@ function Header() {
     const isAddClusterAvailable =
         useAddClusterFeatureAvailable() && uiFactory.onAddCluster !== undefined;
 
+    // Get AIAssistantButton from registry if it exists
+    const AIAssistantButton = componentsRegistry.get('AIAssistantButton');
+
     const breadcrumbItems = React.useMemo(() => {
         let options = {...pageBreadcrumbsOptions, singleClusterMode};
 
@@ -76,6 +80,11 @@ function Header() {
             );
         }
 
+        // Add AI Assistant button if component is registered
+        if (AIAssistantButton) {
+            elements.push(<AIAssistantButton key="ai-assistant" />);
+        }
+
         if (!isClustersPage && isUserAllowedToMakeChanges) {
             elements.push(
                 <Button view="flat" href={createDeveloperUIInternalPageHref()} target="_blank">

src/containers/Header/Header.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/containers/Heatmap/Heatmap.tsx

@@ -17,6 +17,9 @@
   "settings.editor.codeAssistant.title": "Code Assistant",
   "settings.editor.codeAssistant.description": "Use Code Assistant for autocomplete.",
 
+  "settings.editor.aiAssistant.title": "AI Assistant",
+  "settings.editor.aiAssistant.description": "Show AI Assistant.",
+
   "settings.editor.queryStreaming.title": "Query Streaming",
   "settings.editor.queryStreaming.description": "Use streaming api for query results.",
 

src/containers/UserSettings/i18n/en.json

@@ -7,6 +7,7 @@ export {
 export {AsideNavigation} from './containers/AsideNavigation/AsideNavigation';
 
 export {configureStore, rootReducer} from './store';
+export type {ConfigureStoreOptions} from './store';
 export {default as appRoutes} from './routes';
 
 export {YdbEmbeddedAPI} from './services/api';

src/lib.ts

@@ -3,6 +3,8 @@ const {createProxyMiddleware} = require('http-proxy-middleware');
 
 module.exports = function (app) {
     const metaYdbBackend = process.env.META_YDB_BACKEND;
+
+    // Proxy for existing YDB meta backend
     if (metaYdbBackend && metaYdbBackend !== 'undefined') {
         app.use(
             '/meta',

src/setupProxy.js

@@ -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 combinedRootReducer, {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,43 @@ export const codeAssistBackend = window.code_assist_backend;
 
 const isSingleClusterMode = `${metaBackend}` === 'undefined';
 
+export interface ConfigureStoreOptions {
+    aRootReducer?: Reducer;
+    singleClusterMode?: boolean;
+    api?: YdbEmbeddedAPI;
+    additionalReducers?: Record<string, Reducer>;
+}
+
 export function configureStore({
-    aRootReducer = rootReducer,
+    aRootReducer,
     singleClusterMode = isSingleClusterMode,
     api = new YdbEmbeddedAPI({webVersion, withCredentials: !customBackend}),
-} = {}) {
+    additionalReducers = {},
+}: ConfigureStoreOptions = {}) {
     ({backend, basename, clusterName} = getUrlData({
         singleClusterMode,
         customBackend,
     }));
     const history = createBrowserHistory({basename});
 
-    const store = _configureStore(aRootReducer, history, {singleClusterMode}, [
+    // Create the final reducer
+    let finalReducer: Reducer;
+
+    if (aRootReducer) {
+        // If custom root reducer is provided, use it
+        finalReducer = aRootReducer;
+    } else if (Object.keys(additionalReducers).length > 0) {
+        // If additional reducers are provided, combine them with the default ones
+        finalReducer = combineReducers({
+            ...rootReducer,
+            ...additionalReducers,
+        });
+    } else {
+        // Otherwise use the default combined reducer
+        finalReducer = combinedRootReducer;
+    }
+
+    const store = _configureStore(finalReducer, history, {singleClusterMode}, [
         storeApi.middleware,
     ]);
     listenForHistoryChange(store, history);