feat(MetricChart): make charts database specific (#750)

Author: artemmufazalov

src/components/MetricChart/MetricChart.tsx

@@ -99,6 +99,8 @@ const prepareWidgetData = (
 };
 
 interface DiagnosticsChartProps {
+    database: string;
+
     title?: string;
     metrics: MetricDescription[];
     timeFrame?: TimeFrame;
@@ -121,6 +123,7 @@ interface DiagnosticsChartProps {
 }
 
 export const MetricChart = ({
+    database,
     title,
     metrics,
     timeFrame = '1h',
@@ -172,6 +175,7 @@ export const MetricChart = ({
                 // should be width > maxDataPoints to prevent points that cannot be selected
                 // more px per dataPoint - easier to select, less - chart is smoother
                 const response = await getChartData({
+                    database,
                     metrics,
                     timeFrame,
                     maxDataPoints: width / 2,

src/components/MetricChart/getChartData.ts

@@ -2,19 +2,25 @@ import {TIMEFRAMES, type TimeFrame} from '../../utils/timeframes';
 import type {MetricDescription} from './types';
 
 interface GetChartDataParams {
+    database: string;
     metrics: MetricDescription[];
     timeFrame: TimeFrame;
     maxDataPoints: number;
 }
 
-export const getChartData = async ({metrics, timeFrame, maxDataPoints}: GetChartDataParams) => {
+export const getChartData = async ({
+    database,
+    metrics,
+    timeFrame,
+    maxDataPoints,
+}: GetChartDataParams) => {
     const targetString = metrics.map((metric) => `target=${metric.target}`).join('&');
 
     const until = Math.round(Date.now() / 1000);
     const from = until - TIMEFRAMES[timeFrame];
 
     return window.api.getChartData(
-        {target: targetString, from, until, maxDataPoints},
+        {target: targetString, from, until, maxDataPoints, database},
         {concurrentId: `getChartData|${targetString}`},
     );
 };

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

@@ -1,6 +1,10 @@
 import {TenantDashboard} from '../TenantDashboard/TenantDashboard';
 import {defaultDashboardConfig} from './defaultDashboardConfig';
 
-export const DefaultOverviewContent = () => {
-    return <TenantDashboard charts={defaultDashboardConfig} />;
+interface DefaultOverviewContentProps {
+    database: string;
+}
+
+export const DefaultOverviewContent = ({database}: DefaultOverviewContentProps) => {
+    return <TenantDashboard database={database} charts={defaultDashboardConfig} />;
 };

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

@@ -14,7 +14,7 @@ interface TenantCpuProps {
 export function TenantCpu({path, additionalNodesProps}: TenantCpuProps) {
     return (
         <>
-            <TenantDashboard charts={cpuDashboardConfig} />
+            <TenantDashboard database={path} charts={cpuDashboardConfig} />
             <TopNodesByLoad path={path} additionalNodesProps={additionalNodesProps} />
             <TopNodesByCpu path={path} additionalNodesProps={additionalNodesProps} />
             <TopShards path={path} />

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

@@ -26,10 +26,11 @@ export interface ChartConfig {
 }
 
 interface TenantDashboardProps {
+    database: string;
     charts: ChartConfig[];
 }
 
-export const TenantDashboard = ({charts}: TenantDashboardProps) => {
+export const TenantDashboard = ({database, charts}: TenantDashboardProps) => {
     const [isDashboardHidden, setIsDashboardHidden] = useState<boolean>(true);
 
     const [timeFrame = '1h', setTimeframe] = useQueryParam('timeframe', StringParam);
@@ -64,6 +65,7 @@ export const TenantDashboard = ({charts}: TenantDashboardProps) => {
             return (
                 <MetricChart
                     key={chartId}
+                    database={database}
                     title={chartConfig.title}
                     metrics={chartConfig.metrics}
                     timeFrame={timeFrame as TimeFrame}

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

@@ -9,7 +9,7 @@ interface TenantMemoryProps {
 export function TenantMemory({path}: TenantMemoryProps) {
     return (
         <>
-            <TenantDashboard charts={memoryDashboardConfig} />
+            <TenantDashboard database={path} charts={memoryDashboardConfig} />
             <TopNodesByMemory path={path} />
         </>
     );

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

@@ -146,7 +146,7 @@ export function TenantOverview({
                 );
             }
             default: {
-                return <DefaultOverviewContent />;
+                return <DefaultOverviewContent database={tenantName} />;
             }
         }
     };

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

@@ -69,7 +69,7 @@ export function TenantStorage({tenantName, metrics}: TenantStorageProps) {
 
     return (
         <>
-            <TenantDashboard charts={storageDashboardConfig} />
+            <TenantDashboard database={tenantName} charts={storageDashboardConfig} />
             <InfoViewer className={b('storage-info')} title="Storage details" info={info} />
             <TopTables path={tenantName} />
             <TopGroups tenant={tenantName} />

src/services/api.ts

@@ -399,13 +399,13 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
         });
     }
     getChartData(
-        {target, from, until, maxDataPoints}: JsonRenderRequestParams,
+        {target, from, until, maxDataPoints, database}: JsonRenderRequestParams,
         {concurrentId}: AxiosOptions = {},
     ) {
         const requestString = `${target}&from=${from}&until=${until}&maxDataPoints=${maxDataPoints}&format=json`;
 
         return this.post<JsonRenderResponse>(
-            this.getPath('/viewer/json/render'),
+            this.getPath(`/viewer/json/render?database=${database}`),
             requestString,
             {},
             {

src/types/api/render.ts

@@ -34,4 +34,5 @@ export interface JsonRenderRequestParams {
     from: number;
     until: number;
     maxDataPoints: number;
+    database: string;
 }