Embedded UI as a package

You can use app as a package and extend it with your own components - navigation, additional pages, settings.

Install

npm install ydb-embedded-ui

Basic usage example for single-cluster app

import ReactDOM from 'react-dom/client';
import {SingleClusterApp as App, ErrorBoundary, configureStore} from 'ydb-embedded-ui';

import 'ydb-embedded-ui/dist/styles/index.scss';

const {store, history} = configureStore({singleClusterMode: true});

function render() {
  const container = document.getElementById('root');
  if (!container) {
    throw new Error("Can't find root element");
  }

  const root = ReactDOM.createRoot(container);

  root.render(
    <ErrorBoundary>
      <App store={store} history={history} />
    </ErrorBoundary>,
  );
}

render();

For multi-cluster version replace SingleClusterApp with MultiClusterApp and pass singleClusterMode:false to configureStore

Add additional pages or replace existing

Add AppSlots.RoutesSlot as an App child, define your own routes there or redefine existing ones:

import {SingleClusterApp as App, AppSlots} from 'ydb-embedded-ui';

root.render(
  <App store={store} history={history}>
    <AppSlots.RoutesSlot>
      <Route path="/my-page-route">
        <MyPage />
      </Route>
      <Route path="/some-existing-route">
        <MyPage />
      </Route>
    </AppSlots.RoutesSlot>
  </App>,
);

Also you can you can modify pages slots, this way you can also use existing components:

import {SingleClusterApp as App, AppSlots} from 'ydb-embedded-ui';

root.render(
  <App store={store} history={history}>
    <AppSlots.ClusterSlot>
      {({component}) => {
        return <MyPage component={component} />;
      }}
    </AppSlots.ClusterSlot>
  </App>,
);

Update default components with componentsRegistry

You can replace some of app components with componentsRegistry. To work properly new component should have the same props as replaced components:

import {componentsRegistry} from 'ydb-embedded-ui';

componentsRegistry
  .set('StaffCard', MyStaffCard)
  .set('AsideNavigation', MyAsideNavigation)
  .set('ErrorBoundary', MyErrorBoundary);

Add additional settings

import {produce} from 'immer';
import {getUserSettings, SingleClusterApp as App} from 'ydb-embedded-ui';

const settings = getUserSettings({
  singleClusterMode: true,
  codeAssistantConfigured: false,
});

const mySettings = produce(settings, (draft) => {
  // modify settings
});

root.render(<App store={store} history={history} settings={mySettings} />);

Define functions to get monitoring links

import type {GetMonitoringClusterLink, GetMonitoringLink} from 'ydb-embedded-ui';
import {MultiClusterApp as App} from 'ydb-embedded-ui';

export const getMonitoringLinkExtended: GetMonitoringLink = (params) => {
    // do some stuff
};

export const getMonitoringClusterLinkExtended: GetMonitoringClusterLink = (monitoring) => {
    // do some stuff
};

root.render(
    <App
        store={store}
        history={history}
        getMonitoringClusterLink={getMonitoringClusterLinkExtended}
        getMonitoringLink={getMonitoringLinkExtended}
    />,
);

Modify api

import {configureStore, MultiClusterApp as App, YdbEmbeddedAPI} from 'ydb-embedded-ui';

class MyApi extends YdbEmbeddedAPI {
    customApi: MyCustomApi;

    constructor() {
        super({config: {withCredentials: true}, webVersion: true});

        this.customApi = new MyCustomApi();
    }
}

const {store, history} = configureStore({api: new MyApi()});

root.render(<App store={store} history={history} />);