fix(TabletsStatistic): use tenant backend (#429)

Author: artemmufazalov

src/components/TabletsStatistic/TabletsStatistic.tsx

@@ -12,9 +12,9 @@ import './TabletsStatistic.scss';
 
 const b = cn('tablets-statistic');
 
-type ITablets = TFullTabletStateInfo[] | TComputeTabletStateInfo[];
+type Tablets = TFullTabletStateInfo[] | TComputeTabletStateInfo[];
 
-const prepareTablets = (tablets: ITablets) => {
+const prepareTablets = (tablets: Tablets) => {
     const res = tablets.map((tablet) => {
         return {
             label: getTabletLabel(tablet.Type),
@@ -28,25 +28,32 @@ const prepareTablets = (tablets: ITablets) => {
 };
 
 interface TabletsStatisticProps {
-    tablets: ITablets;
+    tablets: Tablets;
     path: string | undefined;
     nodeIds: string[] | number[];
+    backend?: string;
 }
 
-export const TabletsStatistic = ({tablets = [], path, nodeIds}: TabletsStatisticProps) => {
+export const TabletsStatistic = ({tablets = [], path, nodeIds, backend}: TabletsStatisticProps) => {
     const renderTabletInfo = (item: ReturnType<typeof prepareTablets>[number], index: number) => {
-        return (
-            <Link
-                to={createHref(routes.tabletsFilters, undefined, {
-                    nodeIds,
-                    state: item.state,
-                    type: item.type,
-                    path,
-                })}
-                key={index}
-                className={b('tablet', {state: item.state?.toLowerCase()})}
-            >
-                {item.label}: {item.count}
+        const tabletsPath = createHref(routes.tabletsFilters, undefined, {
+            nodeIds,
+            state: item.state,
+            type: item.type,
+            path,
+            backend,
+        });
+
+        const label = `${item.label}: ${item.count}`;
+        const className = b('tablet', {state: item.state?.toLowerCase()});
+
+        return backend ? (
+            <a href={tabletsPath} key={index} className={className}>
+                {label}
+            </a>
+        ) : (
+            <Link to={tabletsPath} key={index} className={className}>
+                {label}
             </Link>
         );
     };

src/containers/Tenants/Tenants.js

@@ -126,15 +126,19 @@ class Tenants extends React.Component {
         const initialTenantGeneralTab = savedTenantInitialTab || TENANT_GENERAL_TABS[0].id;
         const initialTenantInfoTab = TENANT_INFO_TABS[0].id;
 
+        const getTenantBackend = (tenant) => {
+            const backend = tenant.MonitoringEndpoint ?? tenant.backend;
+            return additionalTenantsInfo.tenantBackend
+                ? additionalTenantsInfo.tenantBackend(backend)
+                : undefined;
+        };
+
         const columns = [
             {
                 name: 'Name',
                 header: 'Database',
                 render: ({value, row}) => {
-                    const backend = row.MonitoringEndpoint ?? row.backend;
-                    const tenantBackend = additionalTenantsInfo.tenantBackend
-                        ? additionalTenantsInfo.tenantBackend(backend)
-                        : undefined;
+                    const backend = getTenantBackend(row);
                     const isExternalLink = Boolean(backend);
                     return (
                         <div className={b('name-wrapper')}>
@@ -147,7 +151,7 @@ class Tenants extends React.Component {
                                 hasClipboardButton
                                 path={createHref(routes.tenant, undefined, {
                                     name: value,
-                                    backend: tenantBackend,
+                                    backend,
                                     [TenantTabsGroups.info]: initialTenantInfoTab,
                                     [TenantTabsGroups.general]: initialTenantGeneralTab,
                                 })}
@@ -287,12 +291,20 @@ class Tenants extends React.Component {
                 header: 'Tablets States',
                 sortable: false,
                 width: 430,
-                render: ({value, row}) =>
-                    value ? (
-                        <TabletsStatistic path={row.Name} tablets={value} nodeIds={row.NodeIds} />
+                render: ({value, row}) => {
+                    const backend = getTenantBackend(row);
+
+                    return value ? (
+                        <TabletsStatistic
+                            path={row.Name}
+                            tablets={value}
+                            nodeIds={row.NodeIds}
+                            backend={backend}
+                        />
                     ) : (
                         '—'
-                    ),
+                    );
+                },
             },
         ];