@yugabytedb/perf-advisor-ui 1.0.134 → 1.0.136

package/README.md

@@ -1,6 +1,6 @@
 # @yugabytedb/perf-advisor-ui
 
-Troubleshoot UI for Yugabyte applications
+Troubleshoot UI library for Yugabyte applications. Bundled with [Vite](https://vite.dev/) in library mode and published to npm as an ESM-only package.
 
 ## install
 
@@ -24,6 +24,27 @@ Selecting the anomaly to view the secondary dashboard will list the main graph w
 
 The corresponding RCA graphs will also be listed in secondary dashboard to help user diagnose the issue
 
+## Local development
+
+This package is consumed by [`perf-advisor-web`](../perf-advisor-web). When iterating on it alongside the host app, use [yalc](https://github.com/wclr/yalc) — Vite picks up library changes via the `watch-yalc-lib` plugin in `perf-advisor-web/vite.config.ts`.
+
+1. Ensure the node version is `v22.18.0` (see `engines` in `package.json`).
+2. Install dependencies: `npm ci`.
+3. Build once in watch mode: `npm run dev` (alias for `vite build --watch`). The build also runs `yalc push` after each rebuild via the `yalc-push` plugin, so consumers that have linked this package via yalc receive updates automatically.
+4. To consume in `perf-advisor-web`, follow the yalc setup steps in [`perf-advisor-web/README.md`](../perf-advisor-web/README.md).
+
+### Configuring the backend URL
+
+The library reads `REACT_APP_API_URL` the same way `perf-advisor-web` does ([`src/helpers/config.ts`](src/helpers/config.ts)). When the library is used inside `perf-advisor-web` in dev, the variable is set in the host app's terminal / `.env.local` — see the host app's README. The library itself doesn't need any env configuration to develop.
+
+## Other scripts
+
+- `npm run build` — production build of the library (`NODE_ENV=production vite build`) into `dist/`.
+- `npm run build:dev` — non-minified development build (used before `yalc publish`).
+- `npm run typecheck` — `tsc --noEmit`.
+- `npm run lint` / `npm run lint:fix`.
+- `npm run format` / `npm run format:check`.
+
 ## license
 
 The MIT License (MIT)

package/dist/api.d.ts

@@ -0,0 +1,96 @@
+import { Anomaly, AnomalyDetectionStatus, AnomalyGroup, BackgroundTasksResponse, ClusterLoadResponseData, MetadataFields, GraphRequestParams, QueryPlanData, QueryStatsPagedBody, ClusterDetails } from './helpers/dtos';
+export declare enum QUERY_KEY {
+    fetchAnomalies = "fetchAnomalies",
+    fetchGraphs = "fetchGraphs",
+    fetchUniverseMetadataList = "fetchUniverseMetadataList",
+    deleteUniverseMetadata = "deleteUniverseMetadata",
+    updateUniverseMetadata = "updateUniverseMetadata",
+    fetchUniverseListDetails = "fetchUniverseListDetails",
+    fetchUniverseById = "fetchUniverseById",
+    fetchAnomalyDetectionStatus = "fetchAnomalyDetectionStatus",
+    scheduleAnomalyDetectionStatus = "scheduleAnomalyDetectionStatus",
+    fetchAnomaliesPage = "fetchAnomaliesPage",
+    fetchQueriesPage = "fetchQueriesPage",
+    fetchQueriesStatsPage = "fetchQueriesStatsPage",
+    fetchQueriesDatabases = "fetchQueriesDatabases",
+    fetchCustomerMetadataList = "fetchCustomerMetadataList",
+    fetchQueryStats = "fetchQueryStats",
+    fetchTablesPage = "fetchTablesPage",
+    fetchNamespaces = "fetchNamespaces",
+    deleteRuntimeConfig = "deleteRuntimeConfig",
+    fetchRuntimeConfigs = "fetchRuntimeConfigs",
+    fetchSpecificRuntimeConfigs = "fetchSpecificRuntimeConfigs",
+    fetchSpecificRuntimeConfigsKey = "fetchSpecificRuntimeConfigsKey",
+    updateRuntimeConfig = "updateRuntimeConfig",
+    fetchAnomalyGroups = "fetchAnomalyGroups",
+    fetchAnomalyGroupsByType = "fetchAnomalyGroupsByType",
+    fetchAnomalyGroupsById = "fetchAnomalyGroupsById",
+    getUniverseMetadata = "getUniverseMetadata",
+    fetchMetricsGraphs = "fetchMetricsGraphs",
+    fetchLoadDbStatsPage = "fetchLoadDbStatsPage",
+    fetchTabletsStatsPage = "fetchTabletsStatsPage",
+    fetchNodeLoadStatsPage = "fetchNodeLoadStatsPage",
+    sendTelemetryEvent = "sendTelemetryEvent",
+    fetchBackgroundTasks = "fetchBackgroundTasks",
+    fetchClusterDetails = "fetchClusterDetails"
+}
+declare class ApiService {
+    fetchAnomalies: (universeUuid: string, startTime?: Date | null, endTime?: Date | null, apiUrl?: string) => Promise<Anomaly[]>;
+    fetchAnomaliesPage: (universeUuid: string, pageno: number, apiUrl?: string, records_to_fetch?: number, startTime?: Date | null, endTime?: Date | null, category?: any, searchInput?: string) => Promise<import('axios').AxiosResponse<Anomaly[]>>;
+    fetchQueriesPage: (universeUuid: string, payload: any) => Promise<import('axios').AxiosResponse<GraphRequestParams[]>>;
+    fetchLoadDbStatsPage: (universeUuid: string, payload: any) => Promise<import('axios').AxiosResponse<GraphRequestParams[]>>;
+    fetchTabletStatsPage: (universeUuid: string, payload: any, getClusterDetails: () => ClusterDetails) => Promise<import('axios').AxiosResponse<GraphRequestParams[]>>;
+    fetchNodeLoadStatsPage: (universeUuid: string, payload: any) => Promise<import('axios').AxiosResponse<GraphRequestParams[]>>;
+    fetchQueriesStatsPage: (universeUuid: string, payload: any, getClusterDetails: () => ClusterDetails, filteredLegends: string[], showSystemQueries?: boolean) => Promise<import('axios').AxiosResponse<GraphRequestParams[]>>;
+    fetchNamespaceSchemas: (universeUuid: string, namespaceName: string, apiUrl?: string) => Promise<string[]>;
+    fetchQueryStats: (universeUuid: string, payload: {
+        queryId: string;
+        startTime?: string;
+        endTime?: string;
+        dbId?: string;
+    }, apiUrl?: string) => Promise<QueryPlanData>;
+    fetchQueriesExport: (universeUuid: string, payload: {
+        apiUrl?: string | undefined;
+        startTime?: string | undefined;
+        endTime?: string | undefined;
+        search?: string | undefined;
+        database?: string | undefined;
+        queryType?: string | undefined;
+        sortBy?: string | undefined;
+        sortDirection?: string | undefined;
+        topN: number;
+        queryKeys?: string[] | undefined;
+        includePlans?: boolean | undefined;
+        excludeTpUser?: boolean | undefined;
+        excludeSystemDBs?: boolean | undefined;
+    }, apiUrl?: string, signal?: AbortSignal) => Promise<QueryStatsPagedBody>;
+    fetchTablesPage: (universeUuid: string, payload: any) => Promise<import('axios').AxiosResponse<any[]>>;
+    fetchNamespaces: (universeUuid: string, apiUrl?: string) => Promise<string[]>;
+    fetchQueriesDatabases: (universeUuid: string, apiUrl?: string) => Promise<string[]>;
+    fetchAnomaliesById: (universeUuid: string, anomalyUuid: string, apiUrl?: string) => Promise<Anomaly>;
+    fetchGraphs: (universeUuid: String, data: any, apiUrl?: string, requestKey?: string) => Promise<ClusterLoadResponseData[]>;
+    fetchCustomerMetadataList: (apiUrl?: string) => Promise<MetadataFields[]>;
+    fetchCustomerMetadataById: (customerUuid: string, apiUrl?: string) => Promise<any>;
+    updateCustomerMetadata: (customerUuid: string, data: any, apiUrl?: string) => Promise<any>;
+    deleteCustomerMetadataById: (customerUuid: string, apiUrl?: string) => Promise<any>;
+    fetchUniverseMetadataList: (apiUrl?: string, customerUuid?: string, universeUuid?: string) => Promise<MetadataFields[]>;
+    getUniverseMetadata: (universeUuid: string, apiUrl?: string) => Promise<any>;
+    updateUniverseMetadata: (universeUuid: string, data: any, apiUrl?: string) => Promise<any>;
+    deleteUniverseMetadata: (universeUuid: string, apiUrl?: string) => Promise<any>;
+    fetchUniverseListDetails: (apiUrl?: string, customerUuid?: string, universeUuid?: string) => Promise<any>;
+    fetchUniverseById: (universeUuid: string, apiUrl?: string) => Promise<any>;
+    fetchAnomalyDetectionStatus: (universeUuid: string, apiUrl?: string) => Promise<AnomalyDetectionStatus>;
+    scheduleAnomalyDetectionStatus: (universeUuid: string, apiUrl?: string) => Promise<AnomalyDetectionStatus>;
+    fetchRuntimeConfigs: (scopeUuid?: string, apiUrl?: string) => Promise<string[]>;
+    fetchSpecificRuntimeConfigs: (scopeUuid: string | undefined, keys: string[], apiUrl?: string) => Promise<string[]>;
+    updateRuntimeConfig: (scopeUuid: string | undefined, configKey: string, configValue: string, apiUrl?: string) => Promise<any>;
+    deleteRuntimeConfig: (scopeUuid: string | undefined, configKey: string, apiUrl?: string) => Promise<any>;
+    fetchBackgroundTasks: (universeUuid: string, startTime: string | null, endTime: string | null, limit?: number | null, apiUrl?: string) => Promise<BackgroundTasksResponse>;
+    fetchAnomalyGroups: (universeUuid: string, startTime: string | null, endTime: string | null, anomalyType: string | undefined, getClusterDetails: () => ClusterDetails, apiUrl?: string) => {};
+    fetchAnomalyGroupsByType: (universeUuid: string, startTime: string, endTime: string, anomalyType: string, apiUrl?: string) => Promise<AnomalyGroup[]>;
+    fetchAnomalyGroupById: (universeUuid: string, anomalyGroupId: string, startTime: string, endTime: string, apiUrl?: string) => {};
+    sendTelemetryEvent: (universeUuid: string, payload: any, apiUrl?: string) => Promise<any>;
+    fetchClusterDetails: (universeUuid: string, startTime: string | null, endTime: string | null, apiUrl?: string) => Promise<any>;
+}
+export declare const PerfAdvisorAPI: ApiService;
+export {};

package/dist/common/ChartCard/ChartCard.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { ChartConfig, RenderErrorFn } from './types';
+import { ChartType, ClusterLoadResponseData } from '../../helpers/dtos';
+export interface ChartCardProps {
+    title: string;
+    titleInfo?: ReactNode;
+    headerRightSlot?: ReactNode;
+    data: ClusterLoadResponseData[] | null;
+    chartType: ChartType;
+    isLoading: boolean;
+    isError: boolean;
+    errorText?: string;
+    metricKey: string;
+    timezone?: string;
+    config?: ChartConfig;
+    renderError?: RenderErrorFn;
+    onEChartsDateSelect: (start: number, end: number) => void;
+    onFilterBarData?: (data: string[]) => void;
+}
+export declare const ChartCard: ({ title, titleInfo, headerRightSlot, data, chartType, isLoading, isError, errorText, metricKey, timezone, config, renderError, onEChartsDateSelect, onFilterBarData }: ChartCardProps) => JSX.Element;

package/dist/common/ChartCard/ChartCard.styles.d.ts

@@ -0,0 +1 @@
+export declare const useChartCardStyles: (props?: any) => import('@material-ui/styles').ClassNameMap<"loadingContainer" | "card" | "titleRow" | "titleGroup" | "titleText" | "rightGroup" | "chartWrapper" | "chart">;

package/dist/common/ChartCard/ChartTypeSelector.d.ts

@@ -0,0 +1,8 @@
+import { ChartType } from '../../helpers/dtos';
+interface ChartTypeSelectorProps {
+    value: ChartType;
+    onChange: (chartType: ChartType) => void;
+    dataTestId?: string;
+}
+export declare const ChartTypeSelector: ({ value, onChange, dataTestId }: ChartTypeSelectorProps) => JSX.Element;
+export {};

package/dist/common/ChartCard/WaitEventTypeSelector.d.ts

@@ -0,0 +1,8 @@
+import { DbWaitEventType } from '../../helpers/dtos';
+interface WaitEventTypeSelectorProps {
+    value: DbWaitEventType;
+    onChange: (waitEventType: DbWaitEventType) => void;
+    dataTestId?: string;
+}
+export declare const WaitEventTypeSelector: ({ value, onChange, dataTestId }: WaitEventTypeSelectorProps) => JSX.Element;
+export {};

package/dist/common/ChartCard/buildOptions.d.ts

@@ -0,0 +1,3 @@
+import { ClusterLoadResponseData } from '../../helpers/dtos';
+import { BuildOptionsParams, BuildOptionsResult } from './types';
+export declare const buildOptions: (overallMetrics: ClusterLoadResponseData[] | null, params: BuildOptionsParams) => BuildOptionsResult;

package/dist/common/ChartCard/defaults.d.ts

@@ -0,0 +1,9 @@
+import { ChartConfig, ResolvedChartDefaults, TooltipFormatter } from './types';
+export declare const MAX_LEGENDS_SIZE = 55;
+export declare const DEFAULT_MAX_NAME_LENGTH = 30;
+export declare const BAR_STACK_NAME = "total";
+export declare const DEFAULT_CHART_DEFAULTS: ResolvedChartDefaults;
+export declare const defaultAbbreviate: (name: string) => string;
+export declare const defaultTooltipFormatter: TooltipFormatter;
+export declare const resolveDefaults: (config: ChartConfig) => ResolvedChartDefaults;
+export declare const DEFAULT_CHART_CONFIG: ChartConfig;

package/dist/common/ChartCard/helpers/anomalyOverlay.d.ts

@@ -0,0 +1,2 @@
+import { AnomalyOverlayConfig, EChartsSeriesItem } from '../types';
+export declare const applyAnomalyOverlay: (processedData: EChartsSeriesItem[], startTime: number | undefined, endTime: number | undefined, overlay: AnomalyOverlayConfig | undefined) => void;

package/dist/common/ChartCard/helpers/axes.d.ts

@@ -0,0 +1,43 @@
+import { EChartsSeriesItem } from '../types';
+export declare const computeYAxisMax: (processedData: EChartsSeriesItem[]) => number;
+export interface TimeAxisConfig {
+    type: 'time';
+    min?: number;
+    max?: number;
+    axisLabel: {
+        color: string;
+        textStyle: {
+            fontFamily: string;
+            fontSize: number;
+        };
+        formatter: (value: number) => string;
+    };
+    axisLine: {
+        lineStyle: {
+            color: string;
+        };
+    };
+}
+export interface ValueAxisConfig {
+    type: 'value';
+    axisLine: {
+        lineStyle: {
+            color: string;
+        };
+    };
+    axisLabel: {
+        color: string;
+        margin: number;
+        textStyle: {
+            fontFamily: string;
+            fontSize: number;
+        };
+        precision: number;
+    };
+    splitNumber: number;
+    max: number;
+}
+export declare const buildAxes: (timezone: string | undefined, startTime: number | undefined, endTime: number | undefined, yAxisMax: number) => {
+    xAxis: TimeAxisConfig;
+    yAxis: ValueAxisConfig;
+};

package/dist/common/ChartCard/helpers/index.d.ts

@@ -0,0 +1,11 @@
+export { buildAxes, computeYAxisMax } from './axes';
+export type { TimeAxisConfig, ValueAxisConfig } from './axes';
+export { buildSeries } from './series';
+export type { BuildSeriesResult } from './series';
+export { buildLegend } from './legend';
+export type { BuiltLegend } from './legend';
+export { buildTooltip } from './tooltip';
+export type { BuiltTooltip } from './tooltip';
+export { applyAnomalyOverlay } from './anomalyOverlay';
+export { wireDragToZoom, wireLegendIsolation, injectLegendTestIds } from './interactions';
+export type { DateSelectHandler } from './interactions';

package/dist/common/ChartCard/helpers/interactions.d.ts

@@ -0,0 +1,6 @@
+import { MutableRefObject } from 'react';
+import * as echarts from 'echarts/core';
+export type DateSelectHandler = (start: number, end: number) => void;
+export declare const wireDragToZoom: (instance: echarts.EChartsType, onSelectRef: MutableRefObject<DateSelectHandler>) => (() => void);
+export declare const wireLegendIsolation: (instance: echarts.EChartsType, activeLegendsRef: MutableRefObject<string[]>, onChange: (newActive: string[]) => void) => void;
+export declare const injectLegendTestIds: (container: HTMLElement | null, nameMapping: Record<string, string>) => void;

package/dist/common/ChartCard/helpers/legend.d.ts

@@ -0,0 +1,41 @@
+import { LegendPosition } from '../../../helpers/dtos';
+import { ChartConfig, EChartsSeriesItem, LegendIconOverride, LegendRichStyles } from '../types';
+interface LegendDataEntry {
+    name: string;
+    icon?: LegendIconOverride;
+}
+export interface BuiltLegend {
+    type: 'scroll';
+    tooltip: {
+        show: boolean;
+        formatter: (params: {
+            name: string;
+        }) => string | null;
+    };
+    orient: 'horizontal' | 'vertical';
+    icon: 'roundRect';
+    itemWidth: number;
+    itemHeight: number;
+    itemGap: number;
+    itemStyle: {
+        borderColor: string;
+        borderWidth: number;
+    };
+    left?: number;
+    top?: number;
+    bottom?: number;
+    height?: number;
+    width?: number;
+    padding?: number;
+    textStyle: {
+        fontFamily: string;
+        fontWeight: number;
+        fontSize: number;
+        color: string;
+        rich: LegendRichStyles;
+    };
+    data: Array<string | LegendDataEntry>;
+    formatter: (name: string) => string;
+}
+export declare const buildLegend: (legendPosition: LegendPosition, processedData: EChartsSeriesItem[], nameMapping: Record<string, string>, config: ChartConfig) => BuiltLegend;
+export {};

package/dist/common/ChartCard/helpers/series.d.ts

@@ -0,0 +1,9 @@
+import { ChartType, ClusterLoadResponseData } from '../../../helpers/dtos';
+import { ChartConfig, EChartsSeriesItem } from '../types';
+export interface BuildSeriesResult {
+    processedData: EChartsSeriesItem[];
+    nameMapping: Record<string, string>;
+    startTime: number | undefined;
+    endTime: number | undefined;
+}
+export declare const buildSeries: (overallMetrics: ClusterLoadResponseData[] | null, config: ChartConfig, chartType: ChartType, showLineSymbols: boolean) => BuildSeriesResult;

package/dist/common/ChartCard/helpers/tooltip.d.ts

@@ -0,0 +1,27 @@
+import { ChartConfig, EChartsTooltipParams, EChartsTooltipTrigger } from '../types';
+export interface BuiltTooltip {
+    trigger: EChartsTooltipTrigger;
+    appendToBody: boolean;
+    confine: boolean;
+    axisPointer: {
+        type: 'shadow';
+        shadowStyle: {
+            color: string;
+        };
+        lineStyle: {
+            color: string;
+            width: number;
+        };
+    };
+    textStyle: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+        color: string;
+        fontWeight: number;
+    };
+    extraCssText: string;
+    z: number;
+    formatter: (params: EChartsTooltipParams) => string;
+}
+export declare const buildTooltip: (timezone: string | undefined, nameMapping: Record<string, string>, config: ChartConfig) => BuiltTooltip;

package/dist/common/ChartCard/index.d.ts

@@ -0,0 +1,8 @@
+export { ChartCard } from './ChartCard';
+export type { ChartCardProps } from './ChartCard';
+export { ChartTypeSelector } from './ChartTypeSelector';
+export { WaitEventTypeSelector } from './WaitEventTypeSelector';
+export { buildOptions } from './buildOptions';
+export { DEFAULT_CHART_CONFIG } from './defaults';
+export { ChartLineType } from './types';
+export type { ChartConfig, ChartConfigDefaults, AnomalyOverlayConfig, AbbreviationConfig, ResolvedChartDefaults, SeriesDataItem, SeriesNameContext, SeriesBuildContext, LegendItemDescriptor, LegendIconOverride, LegendRichStyles, RichTextFragment, EChartsAxisValue, EChartsPoint, EChartsSymbol, EChartsLineStyle, EChartsItemStyle, EChartsSeriesEmphasis, EChartsSeriesItem, EChartsMarkArea, EChartsMarkAreaDatum, EChartsTooltipTrigger, EChartsTooltipParam, EChartsTooltipParams, EChartsLegendSelectChangedParams, ZrMouseEvent, MarkAreaStyleOverride, TooltipFormatter, RenderErrorFn, BuildOptionsParams, BuildOptionsResult, BuiltChartOption } from './types';

package/dist/common/ChartCard/types.d.ts

@@ -0,0 +1,171 @@
+import { ReactNode } from 'react';
+import { AnomalyGroup, ChartType, ClusterLoadResponseData, LegendPosition } from '../../helpers/dtos';
+export interface SeriesDataItem {
+    name: string;
+    x: number[] | string[];
+    y: string[] | number[];
+    type?: string;
+    namespaceName?: string;
+    instanceName?: string;
+}
+export type EChartsAxisValue = number | string;
+export type EChartsPoint = [EChartsAxisValue, EChartsAxisValue];
+export declare enum ChartLineType {
+    SOLID = "solid",
+    DASHED = "dashed",
+    DOTTED = "dotted"
+}
+export type EChartsSymbol = 'none' | 'circle';
+export type EChartsTooltipTrigger = 'axis' | 'item';
+export interface EChartsLineStyle {
+    color?: string;
+    width?: number;
+    type?: ChartLineType | number[];
+}
+export interface EChartsItemStyle {
+    color?: string;
+    borderColor?: string;
+    borderWidth?: number;
+}
+export interface EChartsSeriesEmphasis {
+    lineStyle?: EChartsLineStyle;
+    itemStyle?: EChartsItemStyle;
+    symbolSize?: number;
+}
+export interface EChartsMarkAreaDatum {
+    xAxis: EChartsAxisValue;
+}
+export interface EChartsMarkArea {
+    xAxisIndex?: number;
+    data: Array<[EChartsMarkAreaDatum, EChartsMarkAreaDatum]>;
+    itemStyle?: EChartsItemStyle;
+}
+export interface EChartsSeriesItem {
+    name: string;
+    type: 'line' | 'bar';
+    stack?: string | null;
+    data: EChartsPoint[];
+    showLegend: boolean;
+    tooltip?: {
+        show: boolean;
+    };
+    lineStyle?: EChartsLineStyle;
+    itemStyle?: EChartsItemStyle;
+    symbol?: EChartsSymbol;
+    symbolSize?: number;
+    silent?: boolean;
+    z?: number;
+    emphasis?: EChartsSeriesEmphasis;
+    markArea?: EChartsMarkArea;
+    thresholdCap?: boolean;
+}
+export interface EChartsTooltipParam {
+    seriesName: string;
+    value: EChartsAxisValue | EChartsPoint;
+    color: string;
+    axisValueLabel?: string;
+}
+export type EChartsTooltipParams = EChartsTooltipParam | EChartsTooltipParam[];
+export type TooltipFormatter = (params: EChartsTooltipParams, nameMapping: Record<string, string>, timezone?: string) => string;
+export interface EChartsLegendSelectChangedParams {
+    name: string;
+    selected: Record<string, boolean>;
+}
+export interface ZrMouseEvent {
+    offsetX: number;
+    offsetY: number;
+}
+export interface RichTextFragment {
+    backgroundColor?: string | {
+        image: string;
+    };
+    width?: number;
+    height?: number;
+    padding?: number | [number, number, number, number];
+    lineHeight?: number;
+    borderWidth?: number;
+    borderColor?: string;
+    borderType?: 'solid' | 'dashed' | 'dotted';
+    color?: string;
+    fontSize?: number;
+    fontWeight?: number | 'normal' | 'bold';
+    fontFamily?: string;
+}
+export type LegendRichStyles = Record<string, RichTextFragment>;
+export interface SeriesNameContext {
+    item: SeriesDataItem;
+    metric: ClusterLoadResponseData;
+    index: number;
+}
+export interface SeriesBuildContext {
+    item: SeriesDataItem;
+    rawName: string;
+    resolvedName: string;
+    displayName: string;
+    index: number;
+    defaultColor: string;
+    seriesType: 'line' | 'bar';
+    showLegend: boolean;
+    showLineSymbols: boolean;
+}
+export type LegendIconOverride = 'none' | 'roundRect' | 'circle';
+export interface LegendItemDescriptor {
+    iconOverride?: LegendIconOverride;
+    formattedLabel?: string;
+}
+export type MarkAreaStyleOverride = Partial<Omit<EChartsMarkArea, 'data' | 'xAxisIndex'>>;
+export interface AnomalyOverlayConfig {
+    data: AnomalyGroup | null | undefined;
+    markAreaStyle?: MarkAreaStyleOverride;
+    enabled?: () => boolean;
+}
+export interface AbbreviationConfig {
+    enabled: boolean;
+    maxLength: number;
+    abbreviate?: (name: string) => string;
+}
+export interface ChartConfigDefaults {
+    legendPosition?: LegendPosition;
+    showLineSymbols?: boolean;
+    enableLegendIsolation?: boolean;
+}
+export interface ChartConfig {
+    resolveSeriesName: (ctx: SeriesNameContext) => string;
+    sortSeries?: (items: SeriesDataItem[]) => SeriesDataItem[];
+    buildSeriesItem?: (ctx: SeriesBuildContext) => EChartsSeriesItem[] | null;
+    getLegendItem?: (name: string) => LegendItemDescriptor | null;
+    legendRichStyles?: LegendRichStyles;
+    tooltipTrigger?: EChartsTooltipTrigger;
+    tooltipFormatter?: TooltipFormatter;
+    abbreviation?: AbbreviationConfig;
+    anomalyOverlay?: AnomalyOverlayConfig;
+    defaults?: ChartConfigDefaults;
+}
+export interface ResolvedChartDefaults {
+    legendPosition: LegendPosition;
+    showLineSymbols: boolean;
+    enableLegendIsolation: boolean;
+}
+export interface BuildOptionsParams {
+    config: ChartConfig;
+    chartType: ChartType;
+    timezone?: string;
+}
+export interface BuiltChartOption {
+    tooltip: unknown;
+    legend: unknown;
+    grid: unknown;
+    xAxis: unknown;
+    yAxis: unknown;
+    series: unknown[];
+    toolbox: {
+        show: boolean;
+    };
+    brush?: unknown;
+    graphic?: unknown;
+}
+export interface BuildOptionsResult {
+    options: BuiltChartOption;
+    nameMapping: Record<string, string>;
+}
+export type RenderErrorFn = (errorText?: string) => ReactNode;

package/dist/common/CopyToClipboardButton/CopyToClipboardButton.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface CopyToClipboardButtonProps {
+    text: string;
+    altText?: string;
+    resetMs?: number;
+}
+export declare const CopyToClipboardButton: ({ text, altText, resetMs }: CopyToClipboardButtonProps) => JSX.Element;
+export {};

package/dist/common/PAHeader/MetricSplitSelector.d.ts

@@ -0,0 +1,8 @@
+import { AnomalyGroup, MetricMeasure } from '../../helpers/dtos';
+interface MetricSplitSelectorProps {
+    metricSplitSelectors: any;
+    anomalyData?: AnomalyGroup | null;
+    onSplitTypeSelected: (selectedOption: MetricMeasure) => void;
+}
+export declare const MetricSplitSelector: ({ metricSplitSelectors, onSplitTypeSelected, anomalyData }: MetricSplitSelectorProps) => JSX.Element;
+export {};

package/dist/common/PAHeader/OutlierSelector.d.ts

@@ -0,0 +1,13 @@
+import { MetricMeasure, SplitMode } from '../../helpers/dtos';
+interface OutlierSelectorProps {
+    metricOutlierSelectors: any;
+    selectedNumNodes: number;
+    outlierType: SplitMode;
+    onOutlierTypeSelected: (selectedOption: SplitMode) => void;
+    onNumNodesChanged: (numNodes: number) => void;
+    metricMeasure?: MetricMeasure;
+    showNumNodesInput?: boolean;
+    showNumNodesSelector?: boolean;
+}
+export declare const OutlierSelector: ({ metricOutlierSelectors, selectedNumNodes, outlierType, onOutlierTypeSelected, onNumNodesChanged, metricMeasure, showNumNodesInput, showNumNodesSelector }: OutlierSelectorProps) => JSX.Element;
+export {};

package/dist/common/PAHeader/QueryTypeSelector.d.ts

@@ -0,0 +1,8 @@
+import { QueryTypeMode } from '../../helpers/dtos';
+interface QueryTypeSelectorProps {
+    queryTypeSelectors: any;
+    queryType: QueryTypeMode;
+    onQueryTypeSelected: (selectedOption: QueryTypeMode) => void;
+}
+export declare const QueryTypeSelector: ({ queryTypeSelectors, queryType, onQueryTypeSelected }: QueryTypeSelectorProps) => JSX.Element;
+export {};

package/dist/common/PAHeader/YBClusterRegionSelector.d.ts

@@ -0,0 +1,9 @@
+import { ClusterRegionSelection } from '../../components/hooks/useClusterFilterState';
+interface ClusterRegionSelectorProps {
+    selectedItem: string;
+    primaryClusterToRegionMap: any;
+    asyncClusterToRegionMap: any;
+    onClusterRegionSelected: (selection: ClusterRegionSelection) => void;
+}
+export declare const ClusterRegionSelector: ({ selectedItem, primaryClusterToRegionMap, asyncClusterToRegionMap, onClusterRegionSelected }: ClusterRegionSelectorProps) => JSX.Element;
+export {};

package/dist/common/PAHeader/YBZoneNodeSelector.d.ts

@@ -0,0 +1,11 @@
+import { ZoneNodeSelection } from '../../components/hooks/useClusterFilterState';
+interface ZoneNodeSelectorProps {
+    selectedItem: string;
+    primaryZoneToNodesMap: any;
+    asyncZoneToNodesMap: any;
+    primaryClusterUuid?: string;
+    asyncClusterUuid?: string;
+    onZoneNodeSelected: (selection: ZoneNodeSelection) => void;
+}
+export declare const ZoneNodeSelector: ({ selectedItem, primaryZoneToNodesMap, asyncZoneToNodesMap, primaryClusterUuid, asyncClusterUuid, onZoneNodeSelected }: ZoneNodeSelectorProps) => JSX.Element;
+export {};

package/dist/common/PerfAdvisorCodeBlock/PerfAdvisorCodeBlock.d.ts

@@ -0,0 +1,23 @@
+import { AceMode } from '../../helpers/utils';
+export interface MetadataEntry {
+    label: string;
+    value: string;
+}
+interface PerfAdvisorCodeBlockProps {
+    text: string;
+    mode?: AceMode;
+    metadata?: MetadataEntry[];
+    loading?: boolean;
+    showLineNumbers?: boolean;
+    showCopyButton?: boolean;
+    maxLines?: number;
+    minLines?: number;
+    fontSize?: number;
+    fontFamily?: string;
+    width?: string;
+    height?: string;
+    className?: string;
+    copyText?: string;
+}
+export declare const PerfAdvisorCodeBlock: ({ text, mode, metadata, loading, showLineNumbers, showCopyButton, maxLines, minLines, fontSize, fontFamily, width, height, className, copyText }: PerfAdvisorCodeBlockProps) => JSX.Element;
+export {};

package/dist/common/YBCheckbox/YBCheckboxField.d.ts

@@ -0,0 +1,6 @@
+import { ReactElement } from 'react';
+import { FieldValues, UseControllerProps } from 'react-hook-form';
+import { YBCheckboxProps } from '@yugabyte-ui-library/core';
+type YBCheckboxFieldProps<T extends FieldValues> = UseControllerProps<T> & YBCheckboxProps;
+export declare const YBCheckboxField: <T extends FieldValues>(props: YBCheckboxFieldProps<T>) => ReactElement;
+export {};

package/dist/common/YBCodeBlock/codeBlock.d.ts

@@ -0,0 +1 @@
+export declare const useCodeBlockStyles: (props?: any) => import('@material-ui/styles').ClassNameMap<"searchBox" | "containerClassName" | "preClassName" | "codeClassName" | "refreshBtn" | "codeBlock" | "codeBlockSqlView" | "tableHeaderCell" | "rowTableCell" | "tableContainer" | "tableRow" | "queryTableRow" | "queryTableCell" | "queryPreBlock" | "queryPreBlockYBM" | "queryPreBlockWeb" | "queryPreBlockFull" | "queryCodeElement" | "queryCodeElementWeb" | "queryContainerCodeInTable" | "queryContainerCodeInBreadcrumbs" | "codeClassNameInTable" | "preClassNameInTable" | "defaultActions" | "overrideExpandBtn" | "preQueryBlock" | "queryCellBox">;

package/dist/common/YBErrorIndicator/YBErrorIndicator.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface YBErrorIndicatorProps {
+    type?: string;
+    uuid?: string;
+    customErrorMessage?: string;
+}
+export declare const YBErrorIndicator: ({ type, uuid, customErrorMessage }: YBErrorIndicatorProps) => JSX.Element;
+export {};

package/dist/common/YBInput/YBInputField.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+import { UseControllerProps, FieldValues } from 'react-hook-form';
+import { YBInputProps } from '@yugabyte-ui-library/core';
+export type YBInputFieldProps<T extends FieldValues> = UseControllerProps<T> & YBInputProps & {
+    dataTestId?: string;
+};
+export declare const YBInputField: <T extends FieldValues>(props: YBInputFieldProps<T>) => ReactElement;