feat(MetricCards): add network utilization

Author: Raubzeug

src/components/ProgressViewer/ProgressViewer.tsx

@@ -35,6 +35,7 @@ Props description:
 6) inverseColorize - invert the colors of the progress bar
 7) warningThreshold - the percentage of fullness at which the color of the progress bar changes to yellow
 8) dangerThreshold - the percentage of fullness at which the color of the progress bar changes to red
+9) overflow - parcents may be more that 100%
 */
 
 export interface ProgressViewerProps {
@@ -49,13 +50,15 @@ export interface ProgressViewerProps {
     warningThreshold?: number;
     dangerThreshold?: number;
     hideCapacity?: boolean;
+    overflow?: boolean;
 }
 
 export function ProgressViewer({
     value,
     capacity,
     formatValues = defaultFormatValues,
     percents,
+    overflow,
     className,
     size = 'xs',
     colorizeProgress,
@@ -68,12 +71,13 @@ export function ProgressViewer({
 
     let fillWidth =
         Math.floor((parseFloat(String(value)) / parseFloat(String(capacity))) * 100) || 0;
+    const rawFillWidth = fillWidth;
     fillWidth = fillWidth > 100 ? 100 : fillWidth;
     let valueText: number | string | undefined = value,
         capacityText: number | string | undefined = capacity,
         divider = '/';
     if (percents) {
-        valueText = fillWidth + '%';
+        valueText = (overflow ? rawFillWidth : fillWidth) + '%';
         capacityText = '';
         divider = '';
     } else if (formatValues) {

src/containers/Tenant/Diagnostics/TenantOverview/MetricsCards/MetricCard/MetricCard.scss

@@ -14,6 +14,13 @@
         margin-bottom: 10px;
     }
 
+    &__note {
+        display: flex;
+        .g-help-mark__button {
+            display: flex;
+        }
+    }
+
     &__label {
         font-weight: 600;
 

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

@@ -1,3 +1,5 @@
+import {Flex, HelpMark} from '@gravity-ui/uikit';
+
 import {DiagnosticCard} from '../../../../../../components/DiagnosticCard/DiagnosticCard';
 import {ProgressViewer} from '../../../../../../components/ProgressViewer/ProgressViewer';
 import type {ProgressViewerProps} from '../../../../../../components/ProgressViewer/ProgressViewer';
@@ -36,9 +38,11 @@ interface MetricCardProps {
     label?: string;
     status?: MetricStatus;
     metrics: DiagnosticsCardMetric[];
+    interactive?: boolean;
+    note?: string;
 }
 
-export function MetricCard({active, label, status, metrics}: MetricCardProps) {
+export function MetricCard({active, label, status, metrics, interactive, note}: MetricCardProps) {
     const renderContent = () => {
         return metrics.map(({title, ...progressViewerProps}, index) => {
             return (
@@ -49,10 +53,25 @@ export function MetricCard({active, label, status, metrics}: MetricCardProps) {
             );
         });
     };
+    const renderNote = () => {
+        if (!note) {
+            return null;
+        }
+        return (
+            <HelpMark placement="top" className={b('note')}>
+                {note}
+            </HelpMark>
+        );
+    };
     return (
-        <DiagnosticCard className={b({active})} active={active}>
+        <DiagnosticCard className={b({active})} active={active} interactive={interactive}>
             <div className={b('header')}>
-                {label && <div className={b('label')}>{label}</div>}
+                {label && (
+                    <Flex gap={1} alignItems="center" className={b('label')}>
+                        {label}
+                        {renderNote()}
+                    </Flex>
+                )}
                 {getStatusIcon(status)}
             </div>
             <div className={b('content')}>{renderContent()}</div>

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

@@ -14,9 +14,11 @@ import type {
     TenantStorageStats,
 } from '../../../../../store/reducers/tenants/utils';
 import {getMetricStatusFromUsage} from '../../../../../store/reducers/tenants/utils';
+import {formatBytes} from '../../../../../utils/bytesParsers';
 import {cn} from '../../../../../utils/cn';
+import {SHOW_NETWORK_UTILIZATION} from '../../../../../utils/constants';
 import {formatStorageValues} from '../../../../../utils/dataFormatters/dataFormatters';
-import {useTypedSelector} from '../../../../../utils/hooks';
+import {useSetting, useTypedSelector} from '../../../../../utils/hooks';
 import {TenantTabsGroups, getTenantPath} from '../../../TenantPages';
 import i18n from '../i18n';
 
@@ -41,13 +43,15 @@ interface MetricsCardsProps {
     memoryStats?: TenantMetricStats[];
     blobStorageStats?: TenantStorageStats[];
     tabletStorageStats?: TenantStorageStats[];
+    networkStats?: TenantMetricStats[];
 }
 
 export function MetricsCards({
     poolsCpuStats,
     memoryStats,
     blobStorageStats,
     tabletStorageStats,
+    networkStats,
 }: MetricsCardsProps) {
     const location = useLocation();
 
@@ -100,6 +104,7 @@ export function MetricsCards({
                     active={metricsTab === TENANT_METRICS_TABS_IDS.memory}
                 />
             </Link>
+            <NetworkCard networkStats={networkStats} />
         </div>
     );
 }
@@ -210,3 +215,41 @@ function MemoryCard({active, memoryStats = []}: MemoryCardProps) {
         />
     );
 }
+interface NetworkCardProps {
+    networkStats?: TenantMetricStats[];
+}
+
+function NetworkCard({networkStats}: NetworkCardProps) {
+    const [showNetworkUtilization] = useSetting<boolean>(SHOW_NETWORK_UTILIZATION);
+    if (!showNetworkUtilization || !networkStats) {
+        return null;
+    }
+    let status: MetricStatus = METRIC_STATUS.Unspecified;
+
+    const metrics: DiagnosticsCardMetric[] = networkStats.map((metric) => {
+        const {used, limit, usage} = metric;
+
+        const metricStatus = getMetricStatusFromUsage(usage);
+        if (MetricStatusToSeverity[metricStatus] > MetricStatusToSeverity[status]) {
+            status = metricStatus;
+        }
+
+        return {
+            title: formatBytes({value: limit, withSpeedLabel: true}),
+            value: used,
+            capacity: limit,
+            percents: true,
+            overflow: true,
+        };
+    });
+
+    return (
+        <MetricCard
+            interactive={false}
+            label={i18n('cards.network-label')}
+            note={i18n('cards.network-note')}
+            metrics={metrics}
+            status={status}
+        />
+    );
+}

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

@@ -86,6 +86,7 @@ export function TenantOverview({
 
         poolsStats,
         memoryStats,
+        networkStats,
         blobStorageStats,
         tabletStorageStats,
     } = calculateTenantMetrics(tenantData);
@@ -162,6 +163,7 @@ export function TenantOverview({
                             memoryStats={memoryStats}
                             blobStorageStats={blobStorageStats}
                             tabletStorageStats={tabletStorageStats}
+                            networkStats={networkStats}
                         />
                     </Flex>
                 </div>

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

@@ -24,6 +24,8 @@
   "cards.cpu-label": "CPU",
   "cards.storage-label": "Storage",
   "cards.memory-label": "Memory",
+  "cards.network-label": "Network",
+  "cards.network-note": "Network usage is the average outgoing bandwidth usage across all nodes in the database",
 
   "charts.queries-per-second": "Queries per second",
   "charts.transaction-latency": "Transactions latencies {{percentile}}",

src/containers/UserSettings/i18n/en.json

@@ -38,7 +38,7 @@
 
   "settings.enableNetworkTable.title": "Enable network table",
 
-  "settings.showNetworkUtilization.title": "Show cluster network utilization",
+  "settings.showNetworkUtilization.title": "Show network utilization",
 
   "settings.useShowPlanToSvg.title": "Execution plan",
   "settings.useShowPlanToSvg.description": " Show \"Execution plan\" button in query result widow. Opens svg with execution plan in a new window.",

src/store/reducers/tenants/utils.ts

@@ -1,8 +1,10 @@
+import {isNil} from 'lodash';
+
 import type {PoolName, TPoolStats} from '../../../types/api/nodes';
 import type {TTenant} from '../../../types/api/tenant';
 import {EType} from '../../../types/api/tenant';
 import {DEFAULT_DANGER_THRESHOLD, DEFAULT_WARNING_THRESHOLD} from '../../../utils/constants';
-import {isNumeric} from '../../../utils/utils';
+import {isNumeric, safeParseNumber} from '../../../utils/utils';
 
 import {METRIC_STATUS} from './contants';
 import type {PreparedTenant} from './types';
@@ -16,7 +18,7 @@ const getControlPlaneValue = (tenant: TTenant) => {
 };
 
 export interface TenantMetricStats<T = string> {
-    name: T;
+    name?: T;
     usage?: number;
     limit?: number;
     used?: number;
@@ -60,6 +62,8 @@ export const calculateTenantMetrics = (tenant: TTenant = {}) => {
         DatabaseQuotas = {},
         StorageUsage,
         QuotaUsage,
+        NetworkUtilization,
+        NetworkWriteThroughput,
     } = tenant;
 
     const cpu = Number(CoresUsed) * 1_000_000 || 0;
@@ -140,6 +144,18 @@ export const calculateTenantMetrics = (tenant: TTenant = {}) => {
         },
     ];
 
+    const isNetworkStatsAvailabe = !isNil(NetworkUtilization) && !isNil(NetworkWriteThroughput);
+    const networkThroughput = safeParseNumber(NetworkWriteThroughput);
+    const usedNetwork = safeParseNumber(NetworkUtilization) * networkThroughput;
+    const networkStats: TenantMetricStats[] | undefined = isNetworkStatsAvailabe
+        ? [
+              {
+                  used: usedNetwork,
+                  limit: networkThroughput,
+              },
+          ]
+        : undefined;
+
     return {
         memory,
         blobStorage,
@@ -153,6 +169,7 @@ export const calculateTenantMetrics = (tenant: TTenant = {}) => {
         memoryStats,
         blobStorageStats,
         tabletStorageStats,
+        networkStats,
     };
 };
 

src/types/api/tenant.ts

@@ -62,6 +62,11 @@ export interface TTenant {
 
     StorageUsage?: TStorageUsage[];
     QuotaUsage?: TStorageUsage[];
+
+    /** value is float */
+    NetworkUtilization?: number;
+    /** value is uint64 */
+    NetworkWriteThroughput?: string;
 }
 
 export interface THiveDomainStatsStateCount {