From 484c0ee154eb07a75af5361acf7bb1ef2a93f96a Mon Sep 17 00:00:00 2001 From: mufazalov Date: Thu, 7 Mar 2024 18:09:55 +0300 Subject: [PATCH] feat(MetricChart): make charts database specific --- src/components/MetricChart/MetricChart.tsx | 4 ++++ src/components/MetricChart/getChartData.ts | 10 ++++++++-- .../DefaultOverviewContent/DefaultOverviewContent.tsx | 8 ++++++-- .../Diagnostics/TenantOverview/TenantCpu/TenantCpu.tsx | 2 +- .../TenantOverview/TenantDashboard/TenantDashboard.tsx | 4 +++- .../TenantOverview/TenantMemory/TenantMemory.tsx | 2 +- .../Diagnostics/TenantOverview/TenantOverview.tsx | 2 +- .../TenantOverview/TenantStorage/TenantStorage.tsx | 2 +- src/services/api.ts | 4 ++-- src/types/api/render.ts | 1 + 10 files changed, 28 insertions(+), 11 deletions(-) diff --git a/src/components/MetricChart/MetricChart.tsx b/src/components/MetricChart/MetricChart.tsx index 2ba40d1d7b..54812cce5f 100644 --- a/src/components/MetricChart/MetricChart.tsx +++ b/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, diff --git a/src/components/MetricChart/getChartData.ts b/src/components/MetricChart/getChartData.ts index 99cec87d23..9b39031988 100644 --- a/src/components/MetricChart/getChartData.ts +++ b/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}`}, ); }; diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/DefaultOverviewContent/DefaultOverviewContent.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/DefaultOverviewContent/DefaultOverviewContent.tsx index 43a73fd31a..179dc405d3 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/DefaultOverviewContent/DefaultOverviewContent.tsx +++ b/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 ; +interface DefaultOverviewContentProps { + database: string; +} + +export const DefaultOverviewContent = ({database}: DefaultOverviewContentProps) => { + return ; }; diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TenantCpu.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TenantCpu.tsx index 0a02939b37..cd19f50b84 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TenantCpu.tsx +++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TenantCpu.tsx @@ -14,7 +14,7 @@ interface TenantCpuProps { export function TenantCpu({path, additionalNodesProps}: TenantCpuProps) { return ( <> - + diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantDashboard/TenantDashboard.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantDashboard/TenantDashboard.tsx index bc54f7f23f..23930af361 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/TenantDashboard/TenantDashboard.tsx +++ b/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(true); const [timeFrame = '1h', setTimeframe] = useQueryParam('timeframe', StringParam); @@ -64,6 +65,7 @@ export const TenantDashboard = ({charts}: TenantDashboardProps) => { return ( - + ); diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx index e94fb9d3e2..4da5f147bb 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx +++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx @@ -146,7 +146,7 @@ export function TenantOverview({ ); } default: { - return ; + return ; } } }; diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TenantStorage.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TenantStorage.tsx index 26c7c12347..152d449f8f 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TenantStorage.tsx +++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TenantStorage.tsx @@ -69,7 +69,7 @@ export function TenantStorage({tenantName, metrics}: TenantStorageProps) { return ( <> - + diff --git a/src/services/api.ts b/src/services/api.ts index 3ebe39088d..35607c70c0 100644 --- a/src/services/api.ts +++ b/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( - this.getPath('/viewer/json/render'), + this.getPath(`/viewer/json/render?database=${database}`), requestString, {}, { diff --git a/src/types/api/render.ts b/src/types/api/render.ts index fa63638d19..66de2006fa 100644 --- a/src/types/api/render.ts +++ b/src/types/api/render.ts @@ -34,4 +34,5 @@ export interface JsonRenderRequestParams { from: number; until: number; maxDataPoints: number; + database: string; }