@yugabytedb/perf-advisor-ui 1.0.65 → 1.0.67

package/dist/types.d.ts

@@ -1,11 +1,12 @@
-import { MUIDataTableMeta, MUIDataTableColumn, MUIDataTableOptions } from 'mui-datatables';
+import React, { ReactNode, FC, ReactElement, HTMLAttributes, VFC } from 'react';
 import * as axios from 'axios';
-import React$1, { FC, ReactNode, ReactElement, ChangeEvent, HTMLAttributes, VFC } from 'react';
-import { ButtonProps, StandardTextFieldProps, MenuProps, SelectProps, BoxProps, CheckboxProps, InputProps, DialogProps, DialogContentProps, PopperProps, TooltipProps, SwitchProps, FormControlLabelProps } from '@material-ui/core';
+import { ButtonProps, MenuProps, SelectProps, StandardTextFieldProps, CheckboxProps, InputProps, PopperProps, TooltipProps } from '@material-ui/core';
 import { LinkProps } from 'react-router-dom';
 import * as _material_ui_core_styles_withStyles from '@material-ui/core/styles/withStyles';
 import { FieldValues, UseControllerProps } from 'react-hook-form';
+import { YBInputProps, YBToggleProps, YBCheckboxProps as YBCheckboxProps$1 } from '@yugabyte-ui-library/core';
 import { FetchNextPageOptions, InfiniteQueryObserverResult } from 'react-query';
+import { MUIDataTableColumn, MUIDataTableOptions } from 'mui-datatables';
 
 interface Universe {
     creationDate: string;
@@ -483,13 +484,16 @@ interface AnomalyResponse {
 declare enum InsightsTabs {
     CLUSTER_LOAD = "Cluster Load",
     INSIGHTS = "Insights",
-    METRICS = "Metrics",
-    CLUSTER_LOAD_DB = "Load by Database"
+    METRICS = "Metrics"
 }
-declare enum ClusterLoadTabs {
+declare enum ClusterLoadOverallTabs {
     ANOMALIES = "Anomalies",
     QUERIES = "Queries"
 }
+declare enum ClusterLoadSubTabs {
+    OVERALL_LOAD = "Overall Load",
+    LOAD_BY_DATABASE = "Load by Database"
+}
 declare const URL_TAB_PATH: {
     ANOMALIES: string;
     QUERIES: string;
@@ -497,25 +501,39 @@ declare const URL_TAB_PATH: {
     INSIGHTS: string;
     CLUSTER_LOAD: string;
     CLUSTER_LOAD_DB: string;
+    OVERALL_LOAD: string;
 };
 declare enum AnomalyTypeFilter {
     PERF_ANOMALY = "PERF_ANOMALY",
     INSIGHT = "INSIGHT"
 }
+interface MUIDataTableMeta {
+    rowIndex: number;
+    columnIndex: number;
+    columnData: unknown[];
+    rowData: unknown[];
+    tableData: unknown[][];
+    tableState: unknown;
+}
+interface MUIDataTableColumnMeta {
+    index: number;
+    name: string;
+    label?: string;
+}
+type SortOrder = "asc" | "desc" | "none";
 interface ColumnOptions {
-    sort?: boolean;
-    display?: boolean;
+    display?: boolean | "true" | "false" | "excluded";
     filter?: boolean;
-    setCellHeaderProps?: () => {
-        style: React.CSSProperties;
-        className: string;
-    };
-    customBodyRender?: (value: any, tableMeta: MUIDataTableMeta) => React.ReactNode;
-    customHeadLabelRender?: (header: any) => React.ReactNode;
+    sort?: boolean;
+    customBodyRender?: (value: unknown, tableMeta: MUIDataTableMeta, updateValue: (value: unknown) => void) => ReactNode;
+    customHeadRender?: (columnMeta: MUIDataTableColumnMeta, updateDirection?: (direction: SortOrder) => void, sortOrder?: SortOrder) => ReactNode;
+    setCellProps?: () => Record<string, unknown>;
+    setCellHeaderProps?: () => Record<string, unknown>;
+    hideHeader?: boolean;
 }
 interface Column {
-    label: string;
     name: string;
+    label?: string;
     options?: ColumnOptions;
 }
 interface GraphAxisData {
@@ -677,7 +695,7 @@ interface CodeBlockProps {
     preClassName?: string;
     lang?: string;
     containerClassName?: string;
-    text: string | string[] | React$1.ReactElement | React$1.ReactElement[];
+    text: string | string[] | React.ReactElement | React.ReactElement[];
     dataTestId?: string;
     enabledExpandCollapse?: boolean;
     collapseHeight?: number;
@@ -688,7 +706,7 @@ interface CodeBlockProps {
 }
 declare const YBCodeBlock: FC<CodeBlockProps>;
 
-declare const useCodeBlockStyles: (props?: any) => _material_ui_core_styles_withStyles.ClassNameMap<"codeClassName" | "preClassName" | "containerClassName" | "searchBox" | "refreshBtn" | "codeBlock" | "codeBlockSqlView" | "tableHeaderCell" | "rowTableCell" | "tableContainer" | "tableRow" | "queryTableRow" | "queryTableCell" | "queryPreBlock" | "queryPreBlockWeb" | "queryPreBlockFull" | "queryCodeElement" | "queryCodeElementWeb" | "queryContainerCode" | "defaultActions" | "overrideExpandBtn" | "preQueryBlock">;
+declare const useCodeBlockStyles: (props?: any) => _material_ui_core_styles_withStyles.ClassNameMap<"codeClassName" | "preClassName" | "containerClassName" | "searchBox" | "refreshBtn" | "codeBlock" | "codeBlockSqlView" | "tableHeaderCell" | "rowTableCell" | "tableContainer" | "tableRow" | "queryTableRow" | "queryTableCell" | "queryPreBlock" | "queryPreBlockYBM" | "queryPreBlockWeb" | "queryPreBlockFull" | "queryCodeElement" | "queryCodeElementWeb" | "queryContainerCode" | "defaultActions" | "overrideExpandBtn" | "preQueryBlock" | "queryCellBox">;
 
 interface YBErrorIndicatorProps {
     type?: string;
@@ -697,18 +715,6 @@ interface YBErrorIndicatorProps {
 }
 declare const YBErrorIndicator: ({ type, uuid, customErrorMessage }: YBErrorIndicatorProps) => JSX.Element;
 
-interface YBLabelProps {
-    className?: string;
-    dataTestId?: string;
-    width?: string;
-}
-declare const YBLabel: FC<YBLabelProps>;
-
-type YBInputProps = {
-    tooltip?: ReactNode;
-} & Omit<StandardTextFieldProps, 'variant' | 'color' | 'classes' | 'size' | 'select' | 'FormHelperTextProps' | 'SelectProps'>;
-declare const YBInput: FC<YBInputProps>;
-
 type YBInputFieldProps$1<T extends FieldValues> = UseControllerProps<T> & YBInputProps;
 declare const YBInputField: <T extends FieldValues>(props: YBInputFieldProps$1<T>) => ReactElement;
 
@@ -720,11 +726,6 @@ type YBSelectProps = {
 } & Omit<StandardTextFieldProps, 'variant' | 'color' | 'classes' | 'select' | 'size' | 'placeholder' | 'FormHelperTextProps' | 'SelectProps'>;
 declare const YBSelect: FC<YBSelectProps>;
 
-interface GenericFailureProps extends BoxProps {
-    text?: string;
-}
-declare const GenericFailure: FC<GenericFailureProps>;
-
 declare enum AlertVariant {
     Info = "info",
     Warning = "warning",
@@ -755,57 +756,13 @@ interface AlertProps {
 declare const YBAlert: FC<AlertProps>;
 
 interface YBCheckboxProps extends CheckboxProps {
-    label: React$1.ReactNode;
+    label: React.ReactNode;
     labelClassName?: string;
     showCheckedIcon?: boolean;
     inputProps?: InputProps['inputProps'];
 }
 declare const YBCheckbox: FC<YBCheckboxProps>;
 
-interface YBDateTimePickerProps {
-    defaultDateTimeValue?: string;
-    dateTimeLabel: string;
-    value: string;
-    className?: any;
-    errorMsg?: string;
-    onChange: (selectedValue: ChangeEvent<HTMLInputElement>) => void;
-    disabled?: boolean;
-    isReadOnly?: boolean;
-}
-declare const YBDateTimePicker: ({ defaultDateTimeValue, dateTimeLabel, value, errorMsg, onChange, className, disabled, isReadOnly }: YBDateTimePickerProps) => JSX.Element;
-
-interface OverrideButtonProps {
-    primary?: YBButtonProps;
-    secondary?: YBButtonProps;
-}
-interface YBModalProps extends DialogProps {
-    title?: string;
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    overrideHeight?: string | number;
-    overrideWidth?: string | number;
-    isSidePanel?: boolean;
-    titleSeparator?: boolean;
-    titleIcon?: React$1.ReactNode;
-    actionsInfo?: React$1.ReactNode;
-    onClose?: () => void;
-    onSubmit?: () => void;
-    enableBackdropDismiss?: boolean;
-    submitLabel?: string;
-    submitButtonTooltip?: string | ReactElement;
-    submitTestId?: string;
-    customSubmitButton?: React$1.ReactNode;
-    cancelLabel?: React$1.ReactNode;
-    cancelButtonTooltip?: string;
-    cancelTestId?: string;
-    buttonProps?: OverrideButtonProps;
-    customTitle?: React$1.ReactNode;
-    hideCloseBtn?: boolean;
-    dialogContentProps?: DialogContentProps;
-    formProps?: React$1.HTMLProps<HTMLFormElement>;
-    gradientTag?: string;
-}
-declare const YBModal: FC<YBModalProps>;
-
 interface YBInfinitePaginationProps<T> {
     dataPrefetchFn: (options?: FetchNextPageOptions | undefined) => Promise<InfiniteQueryObserverResult<T, unknown>>;
     page: number;
@@ -813,12 +770,12 @@ interface YBInfinitePaginationProps<T> {
     rowsPerPageOptions?: number[];
     total: number;
     showRecordsPerPage?: boolean;
-    recordsPerPageCaption?: string | React$1.ReactNode;
+    recordsPerPageCaption?: string | React.ReactNode;
     onPageChange: (newPage: number) => void;
     onPageSizeChange: (newSize: string | number) => void;
     hasMoreData?: boolean;
 }
-declare const YBInfinitePagination: <T>({ dataPrefetchFn, page, onPageChange, onPageSizeChange, hasMoreData, total, rowsPerPageOptions, rowsPerPage, showRecordsPerPage, recordsPerPageCaption }: YBInfinitePaginationProps<T>) => React$1.ReactElement;
+declare const YBInfinitePagination: <T>({ dataPrefetchFn, page, onPageChange, onPageSizeChange, hasMoreData, total, rowsPerPageOptions, rowsPerPage, showRecordsPerPage, recordsPerPageCaption }: YBInfinitePaginationProps<T>) => React.ReactElement;
 
 interface PaginationProps {
     onPageSelect: (pageNo: number) => void;
@@ -878,13 +835,6 @@ type YBTooltipProps = {
 } & Omit<TooltipProps, 'children'>;
 declare const YBTooltip: VFC<YBTooltipProps>;
 
-interface YBToggleProps extends SwitchProps {
-    label?: string;
-    formControlLabelProps?: Partial<FormControlLabelProps>;
-    inputProps?: InputProps['inputProps'];
-}
-declare const YBToggle: FC<YBToggleProps>;
-
 type YBInputFieldProps<T extends FieldValues> = UseControllerProps<T> & YBToggleProps;
 declare const YBToggleField: <T extends FieldValues>(props: YBInputFieldProps<T>) => ReactElement;
 
@@ -920,7 +870,7 @@ interface ClusterRegionSelectorProps {
 }
 declare const ClusterRegionSelector: ({ selectedItem, primaryClusterToRegionMap, asyncClusterToRegionMap, onClusterRegionSelected }: ClusterRegionSelectorProps) => JSX.Element;
 
-type YBCheckboxFieldProps<T extends FieldValues> = UseControllerProps<T> & YBCheckboxProps;
+type YBCheckboxFieldProps<T extends FieldValues> = UseControllerProps<T> & YBCheckboxProps$1;
 declare const YBCheckboxField: <T extends FieldValues>(props: YBCheckboxFieldProps<T>) => ReactElement;
 
 declare const IN_DEVELOPMENT_MODE: boolean;
@@ -1310,4 +1260,14 @@ declare const isValidObject: typeof isDefinedNotNull;
 declare function removeNullProperties(obj: any): void;
 declare function isYAxisGreaterThanThousand(dataArray: any): boolean;
 
-export { ACTIVE_SESSION_HISOTRY_EPS_CLIENT_NODE, ACTIVE_SESSION_HISTORY_EPS_GLOBAL, ACTIVE_SESSION_HISTORY_QUERY_EVENTS, ALL, ALL_REGIONS, ALL_ZONES, ANOMALY_CATEGORY_LIST, ANOMALY_FILTER_DURATION_OPTIONS, ANOMALY_TAG, ANOMALY_TYPE_TO_NAME_MAP, ASH, ASH_GROUPBY_VALUES, AggregatedLineSettings, Aggregation, AlertVariant, Anomaly, AnomalyCategory, AnomalyDetails, AnomalyDetectionStatus, AnomalyDetectionStatusText, AnomalyGroup, AnomalyInstance, AnomalyResponse, AnomalyType, AnomalyTypeFilter, AppName, AttachUniversePayload, AuthDetails, BACKGROUND_QUERY_REQUEST_GRAPHS, CATALOG_READ_REQUEST_GRAPH, CATEGORY_HEADER_DATA_MAP, COLORS, CORES, CPU_CORES, CPU_COUNT, CQL_QUERY_REQUEST_GRAPHS, ChartType, ClusterLoadResponseData, ClusterLoadTabs, ClusterNodeInfo, ClusterNodeListMetadata, ClusterRegionSelector, Column, ColumnOptions, ConfigureUniverseMetadata, DB_CAPS_TAG_, DB_TAG, DEFAULT_ERROR_MESSAGES, DEFAULT_RECORDS_PER_PAGE, ELLIPSIS, FormattedAnomalyRca, GLOBAL_RUNTIME_CONFIG, GROUP_BY_OPERATIONS, GenericFailure, GraphAxisData, GraphFilters, GraphMetadata, GraphRequestParams, GraphResponse, GraphSettings, GraphType, GroupEventsParam, IN_DEVELOPMENT_MODE, InsightsTabs, MAX_OUTLIER_NUM_NODES, METRICS_OUTLIER_DATABASES_STORAGE_KEY, METRICS_OUTLIER_TABLES_STORAGE_KEY, METRICS_SESSION_STORAGE_KEY, METRIC_DB_RESOURCES_WITH_GRAPHS, METRIC_FONT, METRIC_NAMES, METRIC_RESOURCES_WITH_GRAPHS, METRIC_TABLES_RESOURCES_WITH_GRAPHS, METRIC_TABS, METRIC_TABS_DATABASES, METRIC_TABS_TABLES, MIN_OUTLIER_NUM_NODES, MORE, MetadataFields, MetricConsts, MetricMeasure, MetricOrigin, MetricSplitSelector, MetricsAnalysisEntry, MetricsAnalysisEntryProps, NAME_COLOR_MAPPING, NodeData, NodeDataCloudInfo, NodeDataMetrics, NodeDetails, NodeInfo, NodeState, OutlierSelector, PAUrlParams, PerfAdvisorAPI, PerfAdvisorEntry, PrimaryDashboardViewTabs, QUERIES, QUERY_DETAILS, QUERY_KEY, QUERY_TAG, QUERY_TYPE_TAG, QueryPageParams, QueryType, QueryTypeMode, QueryWaitEvents, RCAGuideline, RCA_GANT_CHART, REACT_APP_API_URL, REGION_TAG, REGION_ZONE_TAG, RUNTIME_CONFIG_KEYS, Resources, RowItemClasses$1 as RowItemClasses, RuntimeConfigData, RuntimeConfigType, RuntimeConfigs, SQL_QUERY_REQUEST_GRAPHS, SortDirection, SplitMode, SplitType, TABLET_ID_TAG, TABLET_TAG, TABLE_REQUEST_GRAPHS, TABLE_TAG, TIME_FILTER_LABEL, TIME_FILTER_VALUES, TPFeatureFlags, TYPE, TableInfo, TablePageParams, TroubleshootingRecommendations, URL_TAB_PATH, USER_TAG, Universe, UniverseConfig, UniverseMetadataFields, UniverseQueryData, UniverseQueryStatsData, UpdateMetadataFormFields, UpdateRuntimeConfigFormFields, UrlParams, VIEW_MORE, WAIT_EVENT_MAPPING, WaitEventClassification, YBAlert, YBButton, YBCheckbox, YBCheckboxField, YBCodeBlock, YBDateTimePicker, YBErrorIndicator, YBInfinitePagination, YBInput, YBInputField, YBLabel, YBModal, YBPagination, YBPanelItem, YBSelect, YBTable, YBToggle, YBToggleField, YBTooltip, ZONE_TAG, ZoneNodeSelector, filterDurations, getCustomFooterComponent, getRowCellComponent, isDefinedNotNull, isEmptyArray, isEmptyObject, isEmptyString, isNonEmptyArray, isNonEmptyObject, isNonEmptyString, isNullOrEmpty, isValidObject, isYAxisGreaterThanThousand, metricOutlierSelectors, metricSplitSelectors, otherSplitSelectors, queryTypeSelectors, removeNullProperties, useCodeBlockStyles };
+interface YBThemeWrapperProps {
+    children: React.ReactNode;
+    appName: AppName;
+}
+/**
+ * Wraps components with the YBThemeProvider to ensure proper styling
+ * for @yugabyte-ui-library/core components
+ */
+declare const YBThemeWrapper: React.FC<YBThemeWrapperProps>;
+
+export { ACTIVE_SESSION_HISOTRY_EPS_CLIENT_NODE, ACTIVE_SESSION_HISTORY_EPS_GLOBAL, ACTIVE_SESSION_HISTORY_QUERY_EVENTS, ALL, ALL_REGIONS, ALL_ZONES, ANOMALY_CATEGORY_LIST, ANOMALY_FILTER_DURATION_OPTIONS, ANOMALY_TAG, ANOMALY_TYPE_TO_NAME_MAP, ASH, ASH_GROUPBY_VALUES, AggregatedLineSettings, Aggregation, AlertVariant, Anomaly, AnomalyCategory, AnomalyDetails, AnomalyDetectionStatus, AnomalyDetectionStatusText, AnomalyGroup, AnomalyInstance, AnomalyResponse, AnomalyType, AnomalyTypeFilter, AppName, AttachUniversePayload, AuthDetails, BACKGROUND_QUERY_REQUEST_GRAPHS, CATALOG_READ_REQUEST_GRAPH, CATEGORY_HEADER_DATA_MAP, COLORS, CORES, CPU_CORES, CPU_COUNT, CQL_QUERY_REQUEST_GRAPHS, ChartType, ClusterLoadOverallTabs, ClusterLoadResponseData, ClusterLoadSubTabs, ClusterNodeInfo, ClusterNodeListMetadata, ClusterRegionSelector, Column, ColumnOptions, ConfigureUniverseMetadata, DB_CAPS_TAG_, DB_TAG, DEFAULT_ERROR_MESSAGES, DEFAULT_RECORDS_PER_PAGE, ELLIPSIS, FormattedAnomalyRca, GLOBAL_RUNTIME_CONFIG, GROUP_BY_OPERATIONS, GraphAxisData, GraphFilters, GraphMetadata, GraphRequestParams, GraphResponse, GraphSettings, GraphType, GroupEventsParam, IN_DEVELOPMENT_MODE, InsightsTabs, MAX_OUTLIER_NUM_NODES, METRICS_OUTLIER_DATABASES_STORAGE_KEY, METRICS_OUTLIER_TABLES_STORAGE_KEY, METRICS_SESSION_STORAGE_KEY, METRIC_DB_RESOURCES_WITH_GRAPHS, METRIC_FONT, METRIC_NAMES, METRIC_RESOURCES_WITH_GRAPHS, METRIC_TABLES_RESOURCES_WITH_GRAPHS, METRIC_TABS, METRIC_TABS_DATABASES, METRIC_TABS_TABLES, MIN_OUTLIER_NUM_NODES, MORE, MetadataFields, MetricConsts, MetricMeasure, MetricOrigin, MetricSplitSelector, MetricsAnalysisEntry, MetricsAnalysisEntryProps, NAME_COLOR_MAPPING, NodeData, NodeDataCloudInfo, NodeDataMetrics, NodeDetails, NodeInfo, NodeState, OutlierSelector, PAUrlParams, PerfAdvisorAPI, PerfAdvisorEntry, PrimaryDashboardViewTabs, QUERIES, QUERY_DETAILS, QUERY_KEY, QUERY_TAG, QUERY_TYPE_TAG, QueryPageParams, QueryType, QueryTypeMode, QueryWaitEvents, RCAGuideline, RCA_GANT_CHART, REACT_APP_API_URL, REGION_TAG, REGION_ZONE_TAG, RUNTIME_CONFIG_KEYS, Resources, RowItemClasses$1 as RowItemClasses, RuntimeConfigData, RuntimeConfigType, RuntimeConfigs, SQL_QUERY_REQUEST_GRAPHS, SortDirection, SplitMode, SplitType, TABLET_ID_TAG, TABLET_TAG, TABLE_REQUEST_GRAPHS, TABLE_TAG, TIME_FILTER_LABEL, TIME_FILTER_VALUES, TPFeatureFlags, TYPE, TableInfo, TablePageParams, TroubleshootingRecommendations, URL_TAB_PATH, USER_TAG, Universe, UniverseConfig, UniverseMetadataFields, UniverseQueryData, UniverseQueryStatsData, UpdateMetadataFormFields, UpdateRuntimeConfigFormFields, UrlParams, VIEW_MORE, WAIT_EVENT_MAPPING, WaitEventClassification, YBAlert, YBButton, YBCheckbox, YBCheckboxField, YBCodeBlock, YBErrorIndicator, YBInfinitePagination, YBInputField, YBPagination, YBPanelItem, YBSelect, YBTable, YBThemeWrapper, YBToggleField, YBTooltip, ZONE_TAG, ZoneNodeSelector, filterDurations, getCustomFooterComponent, getRowCellComponent, isDefinedNotNull, isEmptyArray, isEmptyObject, isEmptyString, isNonEmptyArray, isNonEmptyObject, isNonEmptyString, isNullOrEmpty, isValidObject, isYAxisGreaterThanThousand, metricOutlierSelectors, metricSplitSelectors, otherSplitSelectors, queryTypeSelectors, removeNullProperties, useCodeBlockStyles };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yugabytedb/perf-advisor-ui",
-  "version": "1.0.65",
+  "version": "1.0.67",
   "main": "dist/cjs/index.js",
   "types": "dist/types.d.ts",
   "author": "Rajagopalan Madhavan",
@@ -28,6 +28,7 @@
     "eslint-plugin-import": "2.23.4",
     "nodemon": "3.1.10",
     "rollup": "2.79.1",
+    "@yugabyte-ui-library/core": "2.0.9",
     "rollup-plugin-dts": "4.2.3",
     "rollup-plugin-peer-deps-external": "2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
@@ -79,7 +80,8 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-query": "3.32.1",
-    "vis-timeline": "7.7.3"
+    "vis-timeline": "7.7.3",
+    "@yugabyte-ui-library/core": "2.0.9"
   },
   "scripts": {
     "start": "rollup start",