fix: update tenant storage (#726)

* use table storage for metric card if possible
* do not format storage to same size
* add explanations, rename storage types

Author: artemmufazalov

src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx

@@ -79,28 +79,36 @@ export function TenantOverview({
     const {
         cpu,
         blobStorage,
-        tableStorage,
+        tabletStorage,
         memory,
         cpuUsage,
         blobStorageLimit,
-        tableStorageLimit,
+        tabletStorageLimit,
         memoryLimit,
     } = calculateTenantMetrics(tenant);
 
+    // If there is table storage limit (data_size_hard_quota),
+    // use it for metric card instead of blob storage limit
+    // When datasize exceeds or equals to quota
+    // all write operations to the database are finished with error
+    const isTabletStorageLimitSet = tabletStorageLimit && tabletStorageLimit > 0;
+    const storageUsed = isTabletStorageLimitSet ? tabletStorage : blobStorage;
+    const storageLimit = isTabletStorageLimitSet ? tabletStorageLimit : blobStorageLimit;
+
     const calculatedMetrics: TenantMetrics = {
         memoryUsed: memory,
         memoryLimit,
         cpuUsed: cpu,
         cpuUsage,
-        storageUsed: blobStorage,
-        storageLimit: blobStorageLimit,
+        storageUsed,
+        storageLimit,
     };
 
     const storageMetrics = {
         blobStorageUsed: blobStorage,
         blobStorageLimit,
-        tableStorageUsed: tableStorage,
-        tableStorageLimit,
+        tabletStorageUsed: tabletStorage,
+        tabletStorageLimit,
     };
 
     const renderName = () => {

src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TenantStorage.tsx

@@ -1,7 +1,7 @@
 import InfoViewer from '../../../../../components/InfoViewer/InfoViewer';
 import {ProgressViewer} from '../../../../../components/ProgressViewer/ProgressViewer';
+import {LabelWithPopover} from '../../../../../components/LabelWithPopover';
 import {formatStorageValues} from '../../../../../utils/dataFormatters/dataFormatters';
-import {getSizeWithSignificantDigits} from '../../../../../utils/bytesParsers';
 
 import {TenantDashboard} from '../TenantDashboard/TenantDashboard';
 
@@ -11,12 +11,13 @@ import {storageDashboardConfig} from './storageDashboardConfig';
 import {TopTables} from './TopTables';
 import {TopGroups} from './TopGroups';
 import {b} from '../utils';
+import i18n from '../i18n';
 
 export interface TenantStorageMetrics {
     blobStorageUsed?: number;
     blobStorageLimit?: number;
-    tableStorageUsed?: number;
-    tableStorageLimit?: number;
+    tabletStorageUsed?: number;
+    tabletStorageLimit?: number;
 }
 
 interface TenantStorageProps {
@@ -25,34 +26,39 @@ interface TenantStorageProps {
 }
 
 export function TenantStorage({tenantName, metrics}: TenantStorageProps) {
-    const {blobStorageUsed, tableStorageUsed, blobStorageLimit, tableStorageLimit} = metrics;
-    const formatValues = (value?: number, total?: number) => {
-        const size = getSizeWithSignificantDigits(Number(blobStorageLimit || blobStorageUsed), 0);
-
-        return formatStorageValues(value, total, size);
-    };
+    const {blobStorageUsed, tabletStorageUsed, blobStorageLimit, tabletStorageLimit} = metrics;
 
     const info = [
         {
-            label: 'Database storage',
+            label: (
+                <LabelWithPopover
+                    text={i18n('storage.tablet-storage-title')}
+                    popoverContent={i18n('storage.tablet-storage-description')}
+                />
+            ),
             value: (
                 <ProgressViewer
-                    value={blobStorageUsed}
-                    capacity={blobStorageLimit}
-                    formatValues={formatValues}
+                    value={tabletStorageUsed}
+                    capacity={tabletStorageLimit}
+                    formatValues={formatStorageValues}
                     colorizeProgress={true}
                     warningThreshold={75}
                     dangerThreshold={85}
                 />
             ),
         },
         {
-            label: 'Table storage',
+            label: (
+                <LabelWithPopover
+                    text={i18n('storage.db-storage-title')}
+                    popoverContent={i18n('storage.db-storage-description')}
+                />
+            ),
             value: (
                 <ProgressViewer
-                    value={tableStorageUsed}
-                    capacity={tableStorageLimit}
-                    formatValues={formatValues}
+                    value={blobStorageUsed}
+                    capacity={blobStorageLimit}
+                    formatValues={formatStorageValues}
                     colorizeProgress={true}
                     warningThreshold={75}
                     dangerThreshold={85}

src/containers/Tenant/Diagnostics/TenantOverview/i18n/en.json

@@ -3,10 +3,6 @@
   "no-pools-data": "No pools data",
 
   "top-nodes.empty-data": "No such nodes",
-
-  "title.pools": "Pools",
-  "title.metrics": "Metrics",
-
   "top-groups.empty-data": "No such groups",
 
   "top": "Top",
@@ -28,6 +24,11 @@
   "charts.queries-per-second": "Queries per second",
   "charts.transaction-latency": "Transactions latencies {{percentile}}",
   "charts.cpu-usage": "CPU usage",
-  "charts.storage-usage": "Storage usage",
-  "charts.memory-usage": "Memory usage"
+  "charts.storage-usage": "Tablet storage usage",
+  "charts.memory-usage": "Memory usage",
+
+  "storage.tablet-storage-title": "Tablet storage",
+  "storage.tablet-storage-description": "Size of user data and indexes stored in schema objects (tables, topics, etc.)",
+  "storage.db-storage-title": "Database storage",
+  "storage.db-storage-description": "Size of data stored in distributed storage with all overheads for redundancy"
 }

src/containers/Tenant/Diagnostics/TenantOverview/i18n/index.ts

@@ -1,11 +1,9 @@
 import {i18n, Lang} from '../../../../../utils/i18n';
 
 import en from './en.json';
-import ru from './ru.json';
 
 const COMPONENT = 'ydb-diagnostics-tenant-overview';
 
 i18n.registerKeyset(Lang.En, COMPONENT, en);
-i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
 
 export default i18n.keyset(COMPONENT);

src/containers/Tenant/Diagnostics/TenantOverview/i18n/ru.json

@@ -39,7 +39,7 @@ export const calculateTenantMetrics = (tenant?: TTenant) => {
     const cpu = isNumeric(CoresUsed) ? Number(CoresUsed) * 1_000_000 : undefined;
     const memory = isNumeric(MemoryUsed) ? Number(MemoryUsed) : undefined;
     const blobStorage = isNumeric(StorageAllocatedSize) ? Number(StorageAllocatedSize) : undefined;
-    const tableStorage = isNumeric(Metrics.Storage) ? Number(Metrics.Storage) : undefined;
+    const tabletStorage = isNumeric(Metrics.Storage) ? Number(Metrics.Storage) : undefined;
 
     // We use system pool usage and user pool usage to calculate cpu usage because
     // only these pools directly indicate resources available to perform user queries
@@ -51,19 +51,19 @@ export const calculateTenantMetrics = (tenant?: TTenant) => {
     const blobStorageLimit = isNumeric(StorageAllocatedLimit)
         ? Number(StorageAllocatedLimit)
         : undefined;
-    const tableStorageLimit = isNumeric(DatabaseQuotas.data_size_hard_quota)
+    const tabletStorageLimit = isNumeric(DatabaseQuotas.data_size_hard_quota)
         ? Number(DatabaseQuotas.data_size_hard_quota)
         : undefined;
 
     return {
         cpu,
         memory,
         blobStorage,
-        tableStorage,
+        tabletStorage,
         cpuUsage,
         memoryLimit,
         blobStorageLimit,
-        tableStorageLimit,
+        tabletStorageLimit,
     };
 };