feat: restrictions for not IsViewerUser (#2684)

Author: Raubzeug

eslint.config.mjs

@@ -46,6 +46,7 @@ export default [
             'import/consistent-type-specifier-style': ['error', 'prefer-top-level'],
             curly: ['error', 'all'],
             'react-hooks/exhaustive-deps': 'warn',
+            'react-hooks/rules-of-hooks': 'error',
         },
     },
     // TypeScript-specific rules that require type information

src/components/ErrorBoundary/utils.tsx

@@ -24,7 +24,7 @@ async function getBackendVersion() {
         // node_id=. returns data about node that fullfills request
         // normally this request should be fast (200-300ms with good connection)
         // timeout=1000 in order not to wait too much in case everything is broken
-        const data = await window.api.viewer.getNodeInfo('.', {timeout: 1000});
+        const data = await window.api.viewer.getNodeInfo({nodeId: '.'}, {timeout: 1000});
         return data?.SystemStateInfo?.[0]?.Version;
     } catch (error) {
         return {error: prepareErrorMessage(error)};

src/components/NodeId/NodeId.tsx

@@ -0,0 +1,12 @@
+import {getDefaultNodePath} from '../../containers/Node/NodePages';
+import {useDatabaseFromQuery} from '../../utils/hooks/useDatabaseFromQuery';
+import {InternalLink} from '../InternalLink';
+
+interface NodeIdProps {
+    id: string | number;
+}
+
+export function NodeId({id}: NodeIdProps) {
+    const database = useDatabaseFromQuery();
+    return <InternalLink to={getDefaultNodePath(id, {database})}>{id}</InternalLink>;
+}

src/components/PDiskPopup/PDiskPopup.tsx

@@ -10,6 +10,7 @@ import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
 import {createPDiskDeveloperUILink} from '../../utils/developerUI/developerUI';
 import type {PreparedPDisk} from '../../utils/disks/types';
 import {useTypedSelector} from '../../utils/hooks';
+import {useDatabaseFromQuery} from '../../utils/hooks/useDatabaseFromQuery';
 import {useIsUserAllowedToMakeChanges} from '../../utils/hooks/useIsUserAllowedToMakeChanges';
 import {bytesToGB, isNumeric} from '../../utils/utils';
 import {InfoViewer} from '../InfoViewer';
@@ -109,8 +110,9 @@ interface PDiskPopupProps {
 }
 
 export const PDiskPopup = ({data}: PDiskPopupProps) => {
+    const database = useDatabaseFromQuery();
     const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges();
-    const nodesMap = useTypedSelector(selectNodesMap);
+    const nodesMap = useTypedSelector((state) => selectNodesMap(state, database));
     const nodeData = valueIsDefined(data.NodeId) ? nodesMap?.get(data.NodeId) : undefined;
     const info = React.useMemo(
         () => preparePDiskData(data, nodeData, isUserAllowedToMakeChanges),

src/components/ProgressWrapper/SingleProgress.tsx

@@ -25,10 +25,6 @@ export function SingleProgress({
     size = PROGRESS_SIZE,
     withCapacityUsage = false,
 }: ProgressWrapperSingleProps) {
-    if (!isValidValue(value)) {
-        return <div className={className}>{i18n('alert_no-data')}</div>;
-    }
-
     const numericValue = safeParseNumber(value);
     const numericCapacity = safeParseNumber(capacity);
     const clampedFillWidth = calculateProgressWidth(numericValue, numericCapacity);
@@ -41,6 +37,10 @@ export function SingleProgress({
         return formatProgressText(valueText, capacityText, numericCapacity);
     }, [valueText, capacityText, numericCapacity]);
 
+    if (!isValidValue(value)) {
+        return <div className={className}>{i18n('alert_no-data')}</div>;
+    }
+
     return (
         <ProgressContainer
             displayText={displayText}

src/components/ProgressWrapper/StackProgress.tsx

@@ -29,10 +29,6 @@ export function StackProgress({
         return stack.filter((segment) => !segment.isInfo && segment.value > 0);
     }, [stack]);
 
-    if (displaySegments.length === 0) {
-        return <div className={className}>{i18n('alert_no-data')}</div>;
-    }
-
     const totalValue = React.useMemo(() => {
         return displaySegments.reduce((sum, segment) => sum + segment.value, 0);
     }, [displaySegments]);
@@ -59,6 +55,10 @@ export function StackProgress({
         return formatProgressText(totalValueText, totalCapacityText, numericTotalCapacity || 0);
     }, [totalValueText, totalCapacityText, numericTotalCapacity]);
 
+    if (displaySegments.length === 0) {
+        return <div className={className}>{i18n('alert_no-data')}</div>;
+    }
+
     return (
         <ProgressContainer
             displayText={displayText}

src/components/QueriesActivityBar/QueriesActivityCharts.tsx

@@ -38,12 +38,6 @@ export function QueriesActivityCharts({
     const queriesChartConfig = getChartByTarget('queries.requests');
     const latenciesChartConfig = getChartByTarget('queries.latencies.p99');
 
-    // Early return if required charts are not found
-    if (!queriesChartConfig || !latenciesChartConfig) {
-        console.warn('Required chart configurations not found in defaultDashboardConfig');
-        return null;
-    }
-
     // Refetch data only if charts have successfully loaded at least once
     const shouldRefresh = hasChartsLoaded ? autoRefreshInterval : 0;
 
@@ -58,6 +52,12 @@ export function QueriesActivityCharts({
         [onChartDataStatusChange],
     );
 
+    // Early return if required charts are not found
+    if (!queriesChartConfig || !latenciesChartConfig) {
+        console.warn('Required chart configurations not found in defaultDashboardConfig');
+        return null;
+    }
+
     // WORKAROUND: Charts are rendered outside Disclosure component due to YAGR tooltip bug
     // Issue: https://github.com/gravity-ui/yagr/issues/262
 

src/components/ShardsTable/columns.tsx

@@ -1,11 +1,10 @@
 import DataTable from '@gravity-ui/react-data-table';
 
-import {getDefaultNodePath} from '../../containers/Node/NodePages';
 import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
 import {formatNumber, roundToPrecision} from '../../utils/dataFormatters/dataFormatters';
 import {getUsageSeverity} from '../../utils/generateEvaluator';
-import {InternalLink} from '../InternalLink';
 import {LinkToSchemaObject} from '../LinkToSchemaObject/LinkToSchemaObject';
+import {NodeId} from '../NodeId/NodeId';
 import {TabletNameWrapper} from '../TabletNameWrapper/TabletNameWrapper';
 import {UsageLabel} from '../UsageLabel/UsageLabel';
 
@@ -39,7 +38,7 @@ export const getDataSizeColumn: GetShardsColumn = () => {
         align: DataTable.RIGHT,
     };
 };
-export const getTabletIdColumn: GetShardsColumn = () => {
+export const getTabletIdColumn: GetShardsColumn = ({database}) => {
     return {
         name: TOP_SHARDS_COLUMNS_IDS.TabletId,
         header: TOP_SHARDS_COLUMNS_TITLES.TabletId,
@@ -51,6 +50,7 @@ export const getTabletIdColumn: GetShardsColumn = () => {
                 <TabletNameWrapper
                     tabletId={row.TabletId}
                     followerId={row.FollowerId || undefined}
+                    database={database}
                 />
             );
         },
@@ -65,7 +65,7 @@ export const getNodeIdColumn: GetShardsColumn = () => {
             if (!row.NodeId) {
                 return EMPTY_DATA_PLACEHOLDER;
             }
-            return <InternalLink to={getDefaultNodePath(row.NodeId)}>{row.NodeId}</InternalLink>;
+            return <NodeId id={row.NodeId} />;
         },
         align: DataTable.RIGHT,
     };

src/components/VDisk/VDisk.tsx

@@ -1,5 +1,6 @@
 import {cn} from '../../utils/cn';
 import type {PreparedVDisk} from '../../utils/disks/types';
+import {useDatabaseFromQuery} from '../../utils/hooks/useDatabaseFromQuery';
 import {DiskStateProgressBar} from '../DiskStateProgressBar/DiskStateProgressBar';
 import {HoverPopup} from '../HoverPopup/HoverPopup';
 import {InternalLink} from '../InternalLink';
@@ -34,7 +35,10 @@ export const VDisk = ({
     delayClose,
     delayOpen,
 }: VDiskProps) => {
-    const vDiskPath = getVDiskLink(data);
+    const database = useDatabaseFromQuery();
+    const vDiskPath = getVDiskLink(data, {
+        database: database,
+    });
 
     return (
         <HoverPopup

src/components/VDisk/utils.ts

@@ -1,28 +1,15 @@
 import {getVDiskPagePath} from '../../routes';
-import {valueIsDefined} from '../../utils';
 import type {PreparedVDisk} from '../../utils/disks/types';
 
-export function getVDiskLink(data: PreparedVDisk) {
-    let vDiskPath: string | undefined;
-
-    if (
-        valueIsDefined(data.VDiskSlotId) &&
-        valueIsDefined(data.PDiskId) &&
-        valueIsDefined(data.NodeId)
-    ) {
-        vDiskPath = getVDiskPagePath({
-            vDiskSlotId: data.VDiskSlotId,
-            pDiskId: data.PDiskId,
+export function getVDiskLink(data: PreparedVDisk, query: {database: string | undefined}) {
+    if (!data.StringifiedId) {
+        return undefined;
+    }
+    return getVDiskPagePath(
+        {
             nodeId: data.NodeId,
             vDiskId: data.StringifiedId,
-        });
-    } else if (valueIsDefined(data.StringifiedId)) {
-        vDiskPath = getVDiskPagePath({
-            vDiskId: data.StringifiedId,
-            pDiskId: data.PDiskId,
-            nodeId: data.NodeId,
-        });
-    }
-
-    return vDiskPath;
+        },
+        query,
+    );
 }