@yugabytedb/perf-advisor-ui 1.0.163 → 1.0.165

package/README.md

@@ -58,14 +58,13 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 
 # Build and Publish UI
 
-### `npm run changelog`
-
-1. Updates version in package.json
-2. Generates a section for adding notes in CHANGELOG file for latest version
+Bump `version` in `package.json` by hand and append a section to the end of `CHANGELOG.md`
+— it is ordered oldest-first. There is no changelog generator; commit titles here are
+`[PLAT-nnnnn] ...` rather than conventional commits, so nothing can derive the entries.
 
 ### `npm run release`
 
-1. Builds the app for production to the `dist` folder.\
-   a. It correctly bundles React in production mode and optimizes the build for the best performance.
-   b. The build is minified and the filenames include the hashes.\
-2. Publishes the version to NPM registry using Yugabyte credentials.
+1. Runs `npm ci`, then publishes to the NPM registry using Yugabyte credentials.
+2. Publishing is gated by the `prepublishOnly` hook, which runs `typecheck`, `lint` and the
+   production build first, so a broken tree cannot be published. The same gate applies to a
+   bare `npm publish`.

package/dist/api.d.ts

@@ -1,5 +1,5 @@
 import { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios';
-import { Anomaly, AnomalyDetectionStatus, AnomalyGroup, BackgroundTasksResponse, ClusterLoadResponseData, MetadataFields, GraphRequestParams, QueryPlanData, QueryStatsPagedBody, ClusterDetails, IndexPagedResponse, MaterializedViewPagedResponse, TablePagedResponse, HaState, HaGroupRequest, HaPromoteRequest } from './helpers/dtos';
+import { Anomaly, AnomalyDetectionStatus, AnomalyGroup, BackgroundTasksResponse, ClusterLoadResponseData, MetadataFields, GraphRequestParams, QueryPlanData, QueryStatsPagedBody, ClusterDetails, IndexPagedResponse, MaterializedViewPagedResponse, HaState, HaGroupRequest, HaPromoteRequest, RuntimeConfigData, TablePagedResponse } from './helpers/dtos';
 export declare enum QUERY_KEY {
     fetchAnomalies = "fetchAnomalies",
     fetchGraphs = "fetchGraphs",
@@ -23,6 +23,7 @@ export declare enum QUERY_KEY {
     fetchSpecificRuntimeConfigs = "fetchSpecificRuntimeConfigs",
     fetchSpecificRuntimeConfigsKey = "fetchSpecificRuntimeConfigsKey",
     updateRuntimeConfig = "updateRuntimeConfig",
+    fetchUniverseRuntimeConfigs = "fetchUniverseRuntimeConfigs",
     fetchAnomalyGroups = "fetchAnomalyGroups",
     fetchAnomalyGroupsByType = "fetchAnomalyGroupsByType",
     fetchAnomalyGroupsById = "fetchAnomalyGroupsById",
@@ -116,6 +117,8 @@ declare class ApiService {
     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>;
+    fetchUniverseRuntimeConfigs: (universeUuid: string, keys: string[], apiUrl?: string) => Promise<RuntimeConfigData[]>;
+    updateUniverseRuntimeConfig: (universeUuid: string, configKey: string, configValue: 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[]>;

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

@@ -15,7 +15,16 @@ export interface ChartCardProps {
     config?: ChartConfig;
     rescaleYAxisOnLegendToggle?: boolean;
     renderError?: RenderErrorFn;
+    /**
+     * When provided, an expand affordance is rendered in the card header. Omit it
+     * (the default) to keep the header as-is.
+     */
+    onExpand?: () => void;
+    /** Marks this instance as the fullscreen copy rendered inside ExpandedChartModal. */
+    isExpanded?: boolean;
+    /** Explicit card height in px. Defaults to the standard in-grid card height. */
+    chartHeight?: number;
     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, rescaleYAxisOnLegendToggle, renderError, onEChartsDateSelect, onFilterBarData }: ChartCardProps) => JSX.Element;
+export declare const ChartCard: ({ title, titleInfo, headerRightSlot, data, chartType, isLoading, isError, errorText, metricKey, timezone, config, rescaleYAxisOnLegendToggle, renderError, onExpand, isExpanded, chartHeight, onEChartsDateSelect, onFilterBarData }: ChartCardProps) => JSX.Element;

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

@@ -1 +1,8 @@
-export declare const useChartCardStyles: (props?: any) => import('@material-ui/styles').ClassNameMap<"loadingContainer" | "card" | "titleRow" | "titleGroup" | "titleText" | "rightGroup" | "chartWrapper" | "chart">;
+export declare const DEFAULT_CARD_HEIGHT = 320;
+export interface ChartCardStyleProps {
+    /** Total card height in px. Defaults to the standard in-grid card height. */
+    cardHeight?: number;
+    /** Fullscreen copy: the dialog provides the frame, so drop the card border. */
+    isExpanded?: boolean;
+}
+export declare const useChartCardStyles: (props: ChartCardStyleProps) => import('@material-ui/styles').ClassNameMap<string>;

package/dist/common/ExpandedChartModal/ExpandChartButton.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface ExpandChartButtonProps {
+    onClick: () => void;
+    dataTestId: string;
+    title?: string;
+}
+export declare const ExpandChartButton: ({ onClick, dataTestId, title }: ExpandChartButtonProps) => JSX.Element;
+export {};

package/dist/common/ExpandedChartModal/ExpandedChartModal.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+export interface ExpandedChartSize {
+    width: number;
+    height: number;
+}
+interface ExpandedChartModalProps {
+    open: boolean;
+    title: ReactNode;
+    dataTestId: string;
+    onClose: () => void;
+    headerRightSlot?: ReactNode;
+    children: (size: ExpandedChartSize) => ReactNode;
+}
+export declare const ExpandedChartModal: ({ open, title, dataTestId, onClose, headerRightSlot, children }: ExpandedChartModalProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,5 @@
+export { ExpandChartButton } from './ExpandChartButton';
+export { ExpandedChartModal } from './ExpandedChartModal';
+export type { ExpandedChartSize } from './ExpandedChartModal';
+export { useExpandedChart } from './useExpandedChart';
+export type { UseExpandedChartResult, SharedChartControlProps } from './useExpandedChart';

package/dist/common/ExpandedChartModal/useExpandedChart.d.ts

@@ -0,0 +1,17 @@
+/**
+ * GraphView props that hand its header selectors over to this hook. Spread these
+ * into the prop builder shared by a grid card and its fullscreen copy.
+ */
+export interface SharedChartControlProps {
+    selectedMetricOperation: string | null;
+    selectedGroupByOperation: string | null;
+    onMetricOperationChange: (operation: string) => void;
+    onGroupByOperationChange: (operation: string) => void;
+}
+export interface UseExpandedChartResult {
+    expandedKey: string | null;
+    expand: (key: string) => void;
+    collapse: () => void;
+    getSharedControlProps: (chartKey: string) => SharedChartControlProps;
+}
+export declare const useExpandedChart: () => UseExpandedChartResult;

package/dist/common/index.d.ts

@@ -13,3 +13,5 @@ export { NodeTypeSelector } from './PAHeader/NodeTypeSelector';
 export { YBCheckboxField } from './YBCheckbox/YBCheckboxField';
 export { PerfAdvisorCodeBlock } from './PerfAdvisorCodeBlock/PerfAdvisorCodeBlock';
 export { CopyToClipboardButton } from './CopyToClipboardButton/CopyToClipboardButton';
+export { ExpandChartButton, ExpandedChartModal, useExpandedChart } from './ExpandedChartModal';
+export type { ExpandedChartSize, UseExpandedChartResult, SharedChartControlProps } from './ExpandedChartModal';

package/dist/components/SecondaryDashboard/DrilldownView/BindVariablesSection.d.ts

@@ -4,7 +4,8 @@ interface BindVariablesSectionProps {
     universeUuid: string;
     apiUrl: string;
     appName: AppName;
-    gflagEnabled: boolean;
+    bindVariablesSupported: boolean;
+    bindVariablesEnabled: boolean;
 }
-export declare const BindVariablesSection: ({ bindVariables, universeUuid, apiUrl, appName, gflagEnabled }: BindVariablesSectionProps) => JSX.Element;
+export declare const BindVariablesSection: ({ bindVariables, universeUuid, apiUrl, appName, bindVariablesSupported, bindVariablesEnabled }: BindVariablesSectionProps) => JSX.Element;
 export {};

package/dist/components/SecondaryDashboard/GraphView.d.ts

@@ -45,9 +45,30 @@ interface GraphViewProps {
      * works with both legend isolation and native per-series toggle.
      */
     rescaleYAxisOnLegendToggle?: boolean;
+    /**
+     * When provided, an expand affordance is rendered in the graph header. Omit it
+     * (the default) to keep the header as-is.
+     */
+    onExpand?: () => void;
+    /**
+     * Marks this instance as the fullscreen copy rendered inside ExpandedChartModal:
+     * pixel grid insets, longer legend labels, DOM ids suffixed to avoid colliding
+     * with the in-grid copy, and container-driven (rather than clamped) sizing.
+     */
+    isExpanded?: boolean;
+    /** Explicit chart height in px. Defaults to the standard in-grid height. */
+    chartHeight?: number;
+    /**
+     * Header selector state. Supplying a value together with its change handler
+     * makes that selector controlled; GraphView otherwise owns it internally.
+     */
+    selectedMetricOperation?: string | null;
+    onMetricOperationChange?: (operation: string) => void;
+    selectedGroupByOperation?: string | null;
+    onGroupByOperationChange?: (operation: string) => void;
     registerChartInstance?: (instance: echarts.ECharts) => void;
     onEChartsDateSelect: (startDateTime: number, endDateTime: number) => void;
     onSelectAshLabel?: (groupBy: string, metricData: GraphResponse, isHistoricalQueryView?: boolean) => void;
 }
-export declare const GraphView: React.MemoExoticComponent<({ metricData, appName, metricKey, metricMeasure, operations, groupByOperations, anomalyData, height, isRecommendationGraph, timezone, graphTitle, graphType, queryData, dateTimeRange, isHistoricalQueryView, showTitle, loading, useStackedBars, enableLegendIsolation, rescaleYAxisOnLegendToggle, onEChartsDateSelect, onSelectAshLabel, registerChartInstance }: GraphViewProps) => JSX.Element>;
+export declare const GraphView: React.MemoExoticComponent<({ metricData, appName, metricKey, metricMeasure, operations, groupByOperations, anomalyData, height, isRecommendationGraph, timezone, graphTitle, graphType, queryData, dateTimeRange, isHistoricalQueryView, showTitle, loading, useStackedBars, enableLegendIsolation, rescaleYAxisOnLegendToggle, onExpand, isExpanded, chartHeight, selectedMetricOperation: metricOperationProp, onMetricOperationChange, selectedGroupByOperation: groupByOperationProp, onGroupByOperationChange, onEChartsDateSelect, onSelectAshLabel, registerChartInstance }: GraphViewProps) => JSX.Element>;
 export {};

package/dist/components/SecondaryDashboard/Metadata/AnomalyRCAGraphs.d.ts

@@ -1,4 +1,10 @@
 import { AnomalyGroup, AppName, ClusterDetails, GraphRequestParams, UrlParams } from '../../../helpers/dtos';
+interface FormattedMainGraph {
+    name: string;
+    index: number;
+    groupByControl: boolean;
+    displayName?: string;
+}
 interface AnomalyRCAGraphsProps {
     appName: AppName;
     metricMeasure: string;
@@ -7,12 +13,7 @@ interface AnomalyRCAGraphsProps {
     anomalyData: AnomalyGroup;
     apiUrl: string;
     amomalyGraphRequestParams?: GraphRequestParams[] | null;
-    formattedMainGraphs?: {
-        name: string;
-        index: number;
-        groupByControl: boolean;
-        displayName?: string;
-    }[];
+    formattedMainGraphs?: FormattedMainGraph[];
     urlParams: UrlParams;
     dateTimeRange: {
         startDateTime: Date;

package/dist/components/hooks/useAnomalyPreselection.d.ts

@@ -14,13 +14,14 @@ export interface UseAnomalyPreselectionParams {
     dateTimeRange: DateTimeRange;
     region: string;
     node: string;
-    onClusterRegionSelected: (selection: ClusterRegionSelection) => void;
-    onZoneNodeSelected: (selection: ZoneNodeSelection) => void;
+    hasUserScopeOverride: boolean;
+    applyClusterRegionSelection: (selection: ClusterRegionSelection) => void;
+    applyZoneNodeSelection: (selection: ZoneNodeSelection) => void;
     setMetricMeasure: Dispatch<SetStateAction<MetricMeasure>>;
 }
 /**
  * Applies all of an anomaly's initial-load pre-selections (affected node, affected region, and the
  * split/measure) to the page-level cluster-filter + metric-measure state.
  */
-export declare const useAnomalyPreselection: ({ viewConfig, anomalyGroupData, universeUuid, apiUrl, dateTimeRange, region, node, onClusterRegionSelected, onZoneNodeSelected, setMetricMeasure }: UseAnomalyPreselectionParams) => void;
+export declare const useAnomalyPreselection: ({ viewConfig, anomalyGroupData, universeUuid, apiUrl, dateTimeRange, region, node, hasUserScopeOverride, applyClusterRegionSelection, applyZoneNodeSelection, setMetricMeasure }: UseAnomalyPreselectionParams) => void;
 export {};

package/dist/components/hooks/useClusterFilterState.d.ts

@@ -23,8 +23,11 @@ export declare const useClusterFilterState: () => {
     zone: string;
     node: string;
     nodeType: NodeType;
-    onClusterRegionSelected: ({ isCluster, isRegion, selectedOption, isPrimaryCluster, clusterUuid }: ClusterRegionSelection) => void;
-    onZoneNodeSelected: ({ isZone, isNode, selectedOption, clusterUuid, isPrimaryCluster: isPrimary, showClusterTag }: ZoneNodeSelection) => void;
+    hasUserScopeOverride: boolean;
+    applyClusterRegionSelection: ({ isCluster, isRegion, selectedOption, isPrimaryCluster, clusterUuid }: ClusterRegionSelection) => void;
+    applyZoneNodeSelection: ({ isZone, isNode, selectedOption, clusterUuid, isPrimaryCluster: isPrimary, showClusterTag }: ZoneNodeSelection) => void;
+    onClusterRegionSelected: (selection: ClusterRegionSelection) => void;
+    onZoneNodeSelected: (selection: ZoneNodeSelection) => void;
     onNodeTypeSelected: (selection: NodeType) => void;
     resetFilters: () => void;
 };