Merge pull request opensearch-project#56 from abasatwar/feature/gauge…

…_chart pr issue fixed for min limit in gauge input, tooltip added for thresh…
deepaknevdepsl · Jul 28, 2022 · 7a68db8 · 7a68db8
2 parents ef13bd5 + 32c815f
commit 7a68db8
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/...er/visualizations/config_panel/config_panes/config_controls/config_panel_option_gauge.tsx b/...er/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<number>(
     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}
       />
     </EuiFormRow>
   );

diff --git a/...s/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds.tsx b/...s/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 ? (
+      <EuiToolTip position="top" content="Only one threshold can be applied">
+        <>{addButtonText}</>
+      </EuiToolTip>
+    ) : (
+      <>{addButtonText}</>
+    );
+
   const getThresholdUnit = () => {
     return {
       thid: htmlIdGenerator('thr')(),
@@ -92,7 +102,7 @@ export const ConfigThresholds = ({
           isDisabled: !isEmpty(vizState) && vizState.length === props.maxLimit,
         })}
       >
-        {addButtonText}
+        <AddButtonTextWrapper />
       </EuiButton>
       <EuiSpacer size="s" />
       {!isEmpty(vizState) &&