diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_option_gauge.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_option_gauge.tsx index e57b1870b..8e95c91fd 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_option_gauge.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_option_gauge.tsx @@ -16,9 +16,9 @@ export const ConfigPanelOptionGauge = ({ handleConfigChange, }: any) => { const { Gauge = {} } = visualizations?.data?.rawVizData; - const isReadOnly = !( - Gauge?.dataConfig?.dimensions?.length && Gauge?.dataConfig?.dimensions[0]?.name != '' - ); + const dimensions = Gauge?.dataConfig?.dimensions + ? Gauge.dataConfig.dimensions.filter((i) => i.name !== '') + : []; const [numberOfGauges, setNumberOfGauges] = useState( DefaultGaugeChartParameters.DisplayDefaultGauges ); @@ -37,6 +37,7 @@ export const ConfigPanelOptionGauge = ({ setNumberOfGauges(Number(e.target.value)); }} value={numberOfGauges} + min={DefaultGaugeChartParameters.DisplayDefaultGauges} onBlur={() => { const newPanelOptions = { ...panelOptionsValues, @@ -45,7 +46,7 @@ export const ConfigPanelOptionGauge = ({ handleConfigChange(newPanelOptions); }} placeholder={'Number of gauges'} - readOnly={isReadOnly} + readOnly={!dimensions.length} /> ); diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds.tsx index 7c342a027..0a8fda0ca 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds.tsx @@ -16,6 +16,7 @@ import { EuiFlexItem, EuiFieldText, htmlIdGenerator, + EuiToolTip, } from '@elastic/eui'; import { isEmpty } from 'lodash'; @@ -35,6 +36,15 @@ export const ConfigThresholds = ({ props, }: any) => { const addButtonText = '+ Add threshold'; + const AddButtonTextWrapper = () => + props?.maxLimit && !isEmpty(vizState) && vizState.length === props.maxLimit ? ( + + <>{addButtonText} + + ) : ( + <>{addButtonText} + ); + const getThresholdUnit = () => { return { thid: htmlIdGenerator('thr')(), @@ -92,7 +102,7 @@ export const ConfigThresholds = ({ isDisabled: !isEmpty(vizState) && vizState.length === props.maxLimit, })} > - {addButtonText} + {!isEmpty(vizState) &&