ydb-embedded-ui 4.8.0 → 4.8.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [4.8.2](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.8.1...v4.8.2) (2023-06-27)
+
+
+### Bug Fixes
+
+* **breadcrumbs:** update tenant and tablet params ([#443](https://github.com/ydb-platform/ydb-embedded-ui/issues/443)) ([b0d31ac](https://github.com/ydb-platform/ydb-embedded-ui/commit/b0d31acce6d6e97d759180c885e6aea3b762a91c))
+
+## [4.8.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.8.0...v4.8.1) (2023-06-26)
+
+
+### Bug Fixes
+
+* **Tenants:** fix tenant link ([#439](https://github.com/ydb-platform/ydb-embedded-ui/issues/439)) ([432c621](https://github.com/ydb-platform/ydb-embedded-ui/commit/432c621eb2fb2ffd5a747299af930236d5cc06f7))
+
 ## [4.8.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.7.0...v4.8.0) (2023-06-26)
 
 

package/dist/components/Tablet/Tablet.tsx

@@ -18,21 +18,10 @@ interface TabletProps {
 }
 
 export const Tablet = ({tablet = {}, tenantName}: TabletProps) => {
-    const {TabletId: id, NodeId, Type, State} = tablet;
+    const {TabletId: id, NodeId} = tablet;
     const status = tablet.Overall?.toLowerCase();
 
-    const tabletPath =
-        id &&
-        createHref(
-            routes.tablet,
-            {id},
-            {
-                nodeId: NodeId,
-                type: Type,
-                state: State,
-                tenantName,
-            },
-        );
+    const tabletPath = id && createHref(routes.tablet, {id}, {nodeId: NodeId, tenantName});
 
     return (
         <ContentWithPopup

package/dist/containers/AsideNavigation/AsideNavigation.tsx

@@ -120,19 +120,13 @@ enum Panel {
     UserSettings = 'UserSettings',
 }
 
-function AsideNavigation(props: AsideNavigationProps) {
+export const useGetLeftNavigationItems = () => {
     const location = useLocation();
     const history = useHistory();
 
-    const [visiblePanel, setVisiblePanel] = useState<Panel>();
-
     const [initialTenantPage, setInitialTenantPage] = useSetting<string>(TENANT_INITIAL_PAGE_KEY);
     const {tenantPage = initialTenantPage} = useTypedSelector((state) => state.tenant);
 
-    const setIsCompact = (compact: boolean) => {
-        props.setSettingValue(ASIDE_HEADER_COMPACT_KEY, JSON.stringify(compact));
-    };
-
     const {pathname} = location;
     const queryParams = parseQuery(location);
 
@@ -183,6 +177,20 @@ function AsideNavigation(props: AsideNavigationProps) {
         });
     }, [tenantPage, isTenantPage, setInitialTenantPage, history, queryParams]);
 
+    return menuItems;
+};
+
+function AsideNavigation(props: AsideNavigationProps) {
+    const history = useHistory();
+
+    const [visiblePanel, setVisiblePanel] = useState<Panel>();
+
+    const setIsCompact = (compact: boolean) => {
+        props.setSettingValue(ASIDE_HEADER_COMPACT_KEY, JSON.stringify(compact));
+    };
+
+    const menuItems = useGetLeftNavigationItems();
+
     return (
         <React.Fragment>
             <AsideHeader

package/dist/containers/Header/breadcrumbs.ts

@@ -10,10 +10,15 @@ import type {
     TabletsBreadcrumbsOptions,
     TenantBreadcrumbsOptions,
 } from '../../store/reducers/header/types';
+import {
+    TENANT_DIAGNOSTICS_TABS_IDS,
+    TENANT_PAGE,
+    TENANT_PAGES_IDS,
+} from '../../store/reducers/tenant/constants';
 import routes, {createHref} from '../../routes';
 
 import {getClusterPath} from '../Cluster/utils';
-import {getTenantPath} from '../Tenant/TenantPages';
+import {TenantTabsGroups, getTenantPath} from '../Tenant/TenantPages';
 import {getDefaultNodePath} from '../Node/NodePages';
 
 const prepareTenantName = (tenantName: string) => {
@@ -61,10 +66,16 @@ const getNodeBreadcrumbs = (options: NodeBreadcrumbsOptions, query = {}): RawBre
     // Compute nodes have tenantName, storage nodes doesn't
     const isStorageNode = !tenantName;
 
+    const newQuery = {
+        ...query,
+        [TENANT_PAGE]: TENANT_PAGES_IDS.diagnostics,
+        [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.nodes,
+    };
+
     if (isStorageNode) {
         breadcrumbs = getClusterBreadcrumbs(options, query);
     } else {
-        breadcrumbs = getTenantBreadcrumbs(options, query);
+        breadcrumbs = getTenantBreadcrumbs(options, newQuery);
     }
 
     const text = nodeId ? `Node ${nodeId}` : 'Node';
@@ -79,21 +90,26 @@ const getTabletsBreadcrubms = (
     options: TabletsBreadcrumbsOptions,
     query = {},
 ): RawBreadcrumbItem[] => {
-    const {tenantName, nodeIds, state, type} = options;
+    const {tenantName, nodeIds} = options;
+
+    const newQuery = {
+        ...query,
+        [TENANT_PAGE]: TENANT_PAGES_IDS.diagnostics,
+        [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.tablets,
+    };
 
     let breadcrumbs: RawBreadcrumbItem[];
 
     // Cluster system tablets don't have tenantName
     if (tenantName) {
-        breadcrumbs = getTenantBreadcrumbs(options, query);
+        breadcrumbs = getTenantBreadcrumbs(options, newQuery);
     } else {
         breadcrumbs = getClusterBreadcrumbs(options, query);
     }
 
     const link = createHref(routes.tabletsFilters, undefined, {
+        ...query,
         nodeIds,
-        state,
-        type,
         path: tenantName,
     });
 

package/dist/containers/Tablet/Tablet.tsx

@@ -48,16 +48,9 @@ export const Tablet = () => {
         error,
     } = useTypedSelector((state) => state.tablet);
 
-    const {
-        nodeId: queryNodeId,
-        type: queryType,
-        state: queryState,
-        tenantName: queryTenantName,
-    } = parseQuery(location);
+    const {nodeId: queryNodeId, tenantName: queryTenantName} = parseQuery(location);
 
     const nodeId = tablet.NodeId?.toString() || queryNodeId?.toString();
-    const tabletState = tablet.State || queryState?.toString();
-    const tabletType = tablet.Type || queryType?.toString();
     const tenantName = tenantPath || queryTenantName?.toString();
 
     // NOTE: should be reviewed when migrating to React 18
@@ -84,13 +77,11 @@ export const Tablet = () => {
         dispatch(
             setHeaderBreadcrumbs('tablet', {
                 nodeIds: nodeId ? [nodeId] : [],
-                state: tabletState,
-                type: tabletType,
                 tenantName,
                 tabletId: id,
             }),
         );
-    }, [dispatch, tenantName, id, nodeId, tabletState, tabletType]);
+    }, [dispatch, tenantName, id, nodeId]);
 
     const renderExternalLinks = (link: {name: string; path: string}, index: number) => {
         return (

package/dist/containers/TabletsFilters/TabletsFilters.js

@@ -81,10 +81,15 @@ class TabletsFilters extends React.Component {
         });
         const {nodeIds, type, path, state} = queryParams;
         const nodes = TabletsFilters.parseNodes(nodeIds);
-        const stateFilter = TabletsFilters.getStateFiltersFromColor(state);
 
-        setStateFilter(stateFilter);
-        setTypeFilter([type]);
+        if (state) {
+            const stateFilter = TabletsFilters.getStateFiltersFromColor(state);
+            setStateFilter(stateFilter);
+        }
+
+        if (type) {
+            setTypeFilter([type]);
+        }
 
         this.setState({nodeFilter: nodes, tenantPath: path}, () => {
             this.makeRequest();

package/dist/containers/Tenants/Tenants.js

@@ -18,14 +18,9 @@ import {AutoFetcher} from '../../utils/autofetcher';
 import routes, {createHref} from '../../routes';
 import {formatCPU, formatBytesToGigabyte, formatNumber} from '../../utils';
 import {withSearch} from '../../HOCS';
-import {DEFAULT_TABLE_SETTINGS, TENANT_INITIAL_PAGE_KEY} from '../../utils/constants';
-import {TENANT_PAGES_IDS} from '../../store/reducers/tenant/constants';
+import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
 import {getTenantsInfo} from '../../store/reducers/tenants/tenants';
-import {
-    changeFilter,
-    getSettingValue,
-    ProblemFilterValues,
-} from '../../store/reducers/settings/settings';
+import {changeFilter, ProblemFilterValues} from '../../store/reducers/settings/settings';
 
 import {clusterName} from '../../store';
 import {TenantTabsGroups, TENANT_INFO_TABS} from '../Tenant/TenantPages';
@@ -115,7 +110,6 @@ class Tenants extends React.Component {
             filter,
             handleSearchQuery,
             additionalTenantsInfo = {},
-            savedTenantInitialTab,
         } = this.props;
 
         const filteredTenantsBySearch = tenants.filter((item) => {
@@ -124,7 +118,6 @@ class Tenants extends React.Component {
         });
         const filteredTenants = Tenants.filterTenants(filteredTenantsBySearch, filter);
 
-        const initialTenantGeneralTab = savedTenantInitialTab || TENANT_PAGES_IDS.query;
         const initialTenantInfoTab = TENANT_INFO_TABS[0].id;
 
         const getTenantBackend = (tenant) => {
@@ -154,7 +147,6 @@ class Tenants extends React.Component {
                                     name: value,
                                     backend,
                                     [TenantTabsGroups.info]: initialTenantInfoTab,
-                                    [TenantTabsGroups.general]: initialTenantGeneralTab,
                                 })}
                             />
                             {additionalTenantsInfo.name && additionalTenantsInfo.name(value, row)}
@@ -360,7 +352,6 @@ const mapStateToProps = (state) => {
         loading,
         error,
         filter: state.settings.problemFilter,
-        savedTenantInitialTab: getSettingValue(state, TENANT_INITIAL_PAGE_KEY),
     };
 };
 

package/dist/store/reducers/header/types.ts

@@ -19,8 +19,6 @@ export interface NodeBreadcrumbsOptions extends TenantBreadcrumbsOptions {
 
 export interface TabletsBreadcrumbsOptions extends TenantBreadcrumbsOptions {
     nodeIds?: string[] | number[];
-    state?: string;
-    type?: string;
 }
 
 export interface TabletBreadcrumbsOptions extends TabletsBreadcrumbsOptions {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "4.8.0",
+  "version": "4.8.2",
   "files": [
     "dist"
   ],