Allow hiding the TSVB axis for time series

changelogs/fragments/8504.yml

@@ -0,0 +1,6 @@
+feat:
+- Allow hiding the TSVB axis for time series visualizations ([#8504](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8504))
+- Allow setting scale of each axis for TSVB time series ([#8504](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8504))
+
+fix:
+- Compress non-OUI input fields in TSVB visualizations ([#8504](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8504))

src/plugins/vis_type_timeseries/public/application/components/aggs/_agg_row.scss

@@ -17,7 +17,3 @@
 .tvbAggRow__unavailable {
   margin-top: -$euiSizeXS;
 }
-
-.tvbAgg__input {
-  @include euiFormControlStyle($borderOnly: false, $includeStates: true, $includeSizes: false);
-}

src/plugins/vis_type_timeseries/public/application/components/aggs/moving_average.js

@@ -45,6 +45,7 @@ import {
   EuiSpacer,
   EuiCompressedFormRow,
   EuiCompressedFieldNumber,
+  EuiFormControlLayout,
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { MODEL_TYPES } from '../../../../common/model_options';
@@ -207,16 +208,18 @@ export const MovingAverageAgg = (props) => {
               })
             }
           >
-            {/*
-              EUITODO: The following input couldn't be converted to EUI because of type mis-match.
-              Should it be text or number?
-            */}
-            <input
-              className="tvbAgg__input"
-              type="text"
-              onChange={handleNumberChange('window')}
-              value={model.window}
-            />
+            <EuiFormControlLayout compressed={true}>
+              {/*
+                EUITODO: The following input couldn't be converted to EUI because of type mis-match.
+                Should it be text or number?
+              */}
+              <input
+                className="euiFieldText euiFieldText--compressed"
+                type="text"
+                onChange={handleNumberChange('window')}
+                value={model.window}
+              />
+            </EuiFormControlLayout>
           </EuiCompressedFormRow>
         </EuiFlexItem>
       </EuiFlexGroup>

src/plugins/vis_type_timeseries/public/application/components/aggs/serial_diff.js

@@ -43,6 +43,7 @@ import {
   EuiFormLabel,
   EuiCompressedFormRow,
   EuiSpacer,
+  EuiFormControlLayout,
 } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
 import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
@@ -117,16 +118,18 @@ export const SerialDiffAgg = (props) => {
               />
             }
           >
-            {/*
-              EUITODO: The following input couldn't be converted to EUI because of type mis-match.
-              Should it be text or number?
-            */}
-            <input
-              className="tvbAgg__input"
-              onChange={handleNumberChange('lag')}
-              value={model.lag}
-              type="text"
-            />
+            <EuiFormControlLayout compressed={true}>
+              {/*
+                EUITODO: The following input couldn't be converted to EUI because of type mis-match.
+                Should it be text or number?
+              */}
+              <input
+                className="euiFieldText euiFieldText--compressed"
+                onChange={handleNumberChange('lag')}
+                value={model.lag}
+                type="text"
+              />
+            </EuiFormControlLayout>
           </EuiCompressedFormRow>
         </EuiFlexItem>
       </EuiFlexGroup>

src/plugins/vis_type_timeseries/public/application/components/aggs/top_hit.js

@@ -44,6 +44,7 @@ import {
   EuiCompressedComboBox,
   EuiSpacer,
   EuiCompressedFormRow,
+  EuiFormControlLayout,
 } from '@elastic/eui';
 import { injectI18n, FormattedMessage } from '@osd/i18n/react';
 import { OSD_FIELD_TYPES } from '../../../../../../plugins/data/public';
@@ -206,15 +207,17 @@ const TopHitAggUi = (props) => {
               <FormattedMessage id="visTypeTimeseries.topHit.sizeLabel" defaultMessage="Size" />
             }
           >
-            {/*
-              EUITODO: The following input couldn't be converted to EUI because of type mis-match.
-              Should it be text or number?
-            */}
-            <input
-              className="tvbAgg__input"
-              value={model.size}
-              onChange={handleTextChange('size')}
-            />
+            <EuiFormControlLayout compressed={true}>
+              {/*
+                EUITODO: The following input couldn't be converted to EUI because of type mis-match.
+                Should it be text or number?
+              */}
+              <input
+                className="euiFieldText euiFieldText--compressed"
+                value={model.size}
+                onChange={handleTextChange('size')}
+              />
+            </EuiFormControlLayout>
           </EuiCompressedFormRow>
         </EuiFlexItem>
         <EuiFlexItem>

src/plugins/vis_type_timeseries/public/application/components/panel_config/gauge.js

@@ -52,6 +52,7 @@ import {
   EuiCompressedFieldNumber,
   EuiTitle,
   EuiHorizontalRule,
+  EuiFormControlLayout,
 } from '@elastic/eui';
 import { injectI18n, FormattedMessage } from '@osd/i18n/react';
 import { QueryBarWrapper } from '../query_bar_wrapper';
@@ -215,17 +216,19 @@ class GaugePanelConfigUi extends Component {
                     />
                   }
                 >
-                  {/*
-                    EUITODO: The following input couldn't be converted to EUI because of type mis-match.
-                    It accepts a null value, but is passed a empty string.
-                  */}
-                  <input
-                    id={htmlId('gaugeMax')}
-                    className="tvbAgg__input"
-                    type="number"
-                    onChange={handleTextChange('gauge_max')}
-                    value={model.gauge_max}
-                  />
+                  <EuiFormControlLayout compressed={true}>
+                    {/*
+                      EUITODO: The following input couldn't be converted to EUI because of type mis-match.
+                      It accepts a null value, but is passed a empty string.
+                    */}
+                    <input
+                      id={htmlId('gaugeMax')}
+                      className="euiFieldText euiFieldText--compressed"
+                      type="number"
+                      onChange={handleTextChange('gauge_max')}
+                      value={model.gauge_max}
+                    />
+                  </EuiFormControlLayout>
                 </EuiCompressedFormRow>
               </EuiFlexItem>
               <EuiFlexItem>

src/plugins/vis_type_timeseries/public/application/components/panel_config/table.js

@@ -52,6 +52,7 @@ import {
   EuiHorizontalRule,
   EuiCode,
   EuiText,
+  EuiFormControlLayout,
 } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
 import { QueryBarWrapper } from '../query_bar_wrapper';
@@ -164,16 +165,18 @@ export class TablePanelConfig extends Component {
                       />
                     }
                   >
-                    {/*
-                      EUITODO: The following input couldn't be converted to EUI because of type mis-match.
-                      Should it be number or string?
-                    */}
-                    <input
-                      className="tvbAgg__input"
-                      type="number"
-                      onChange={handleTextChange('pivot_rows')}
-                      value={model.pivot_rows}
-                    />
+                    <EuiFormControlLayout compressed={true}>
+                      {/*
+                        EUITODO: The following input couldn't be converted to EUI because of type mis-match.
+                        Should it be number or string?
+                      */}
+                      <input
+                        className="euiFieldText euiFieldText--compressed"
+                        type="number"
+                        onChange={handleTextChange('pivot_rows')}
+                        value={model.pivot_rows}
+                      />
+                    </EuiFormControlLayout>
                   </EuiCompressedFormRow>
                 </EuiFlexItem>
               </EuiFlexGroup>

src/plugins/vis_type_timeseries/public/application/components/panel_config/timeseries.js

@@ -48,7 +48,7 @@ import {
   EuiCompressedFormRow,
   EuiFormLabel,
   EuiSpacer,
-  EuiCompressedFieldText,
+  EuiCompressedFieldNumber,
   EuiTitle,
   EuiHorizontalRule,
 } from '@elastic/eui';
@@ -271,7 +271,7 @@ class TimeseriesPanelConfigUi extends Component {
                     />
                   }
                 >
-                  <EuiCompressedFieldText
+                  <EuiCompressedFieldNumber
                     onChange={handleTextChange('axis_min')}
                     value={model.axis_min}
                   />
@@ -287,7 +287,7 @@ class TimeseriesPanelConfigUi extends Component {
                     />
                   }
                 >
-                  <EuiCompressedFieldText
+                  <EuiCompressedFieldNumber
                     onChange={handleTextChange('axis_max')}
                     value={model.axis_max}
                   />

src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/config.js

@@ -47,13 +47,14 @@
   EuiCompressedFieldNumber,
   EuiFormLabel,
   EuiSpacer,
+  EuiFormControlLayout,
 } from '@elastic/eui';
 import { FormattedMessage, injectI18n } from '@osd/i18n/react';
 import { getDefaultQueryLanguage } from '../../lib/get_default_query_language';
 import { QueryBarWrapper } from '../../query_bar_wrapper';
 
 import { isPercentDisabled } from '../../lib/stacked';
-import { STACKED_OPTIONS } from '../../../visualizations/constants/chart';
+import { STACKED_OPTIONS, AXIS_POSITION } from '../../../visualizations/constants/chart';
 
 export const TimeseriesConfig = injectI18n(function (props) {
   const handleSelectChange = createSelectHandler(props.onChange);
@@ -114,20 +115,48 @@
         id: 'visTypeTimeseries.timeSeries.rightLabel',
         defaultMessage: 'Right',
       }),
-      value: 'right',
+      value: AXIS_POSITION.RIGHT,
     },
     {
       label: intl.formatMessage({
         id: 'visTypeTimeseries.timeSeries.leftLabel',
         defaultMessage: 'Left',
       }),
-      value: 'left',
+      value: AXIS_POSITION.LEFT,
+    },
+    {
+      label: intl.formatMessage({
+        id: 'visTypeTimeseries.timeSeries.hiddenLabel',
+        defaultMessage: 'Hidden',
+      }),
+      value: AXIS_POSITION.HIDDEN,
     },
   ];
+
   const selectedAxisPosOption = positionOptions.find((option) => {
     return model.axis_position === option.value;
   });
 
+  const scaleOptions = [
+    {
+      label: intl.formatMessage({
+        id: 'visTypeTimeseries.timeseries.scaleOptions.normalLabel',
+        defaultMessage: 'Normal',
+      }),
+      value: 'normal',
+    },
+    {
+      label: intl.formatMessage({
+        id: 'visTypeTimeseries.timeseries.scaleOptions.logLabel',
+        defaultMessage: 'Log',
+      }),
+      value: 'log',
+    },
+  ];
+  const selectedAxisScaleOption = scaleOptions.find((option) => {
+    return model.axis_scale === option.value;
+  });
+
   const chartTypeOptions = [
     {
       label: intl.formatMessage({
@@ -505,17 +534,19 @@
               />
             }
           >
-            {/*
-              EUITODO: The following input couldn't be converted to EUI because of type mis-match.
-              It accepts a null value, but is passed a empty string.
-            */}
-            <input
-              className="tvbAgg__input"
-              type="number"
-              disabled={disableSeparateYaxis}
-              onChange={handleTextChange('axis_min')}
-              value={model.axis_min}
-            />
+            <EuiFormControlLayout compressed={true}>
+              {/*
+                EUITODO: The following input couldn't be converted to EUI because of type mis-match.
+                It accepts a null value, but is passed a empty string.
+              */}
+              <input
+                className="euiFieldText euiFieldText--compressed"
+                type="number"
+                disabled={disableSeparateYaxis}
+                onChange={handleTextChange('axis_min')}
+                value={model.axis_min}
+              />
+            </EuiFormControlLayout>
           </EuiCompressedFormRow>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
@@ -528,16 +559,19 @@
               />
             }
           >
-            {/*
-              EUITODO: The following input couldn't be converted to EUI because of type mis-match.
-              It accepts a null value, but is passed a empty string.
-            */}
-            <input
-              className="tvbAgg__input"
-              disabled={disableSeparateYaxis}
-              onChange={handleTextChange('axis_max')}
-              value={model.axis_max}
-            />
+            <EuiFormControlLayout compressed={true}>
+              {/*
+                EUITODO: The following input couldn't be converted to EUI because of type mis-match.
+                It accepts a null value, but is passed a empty string.
+              */}
+              <input
+                className="euiFieldText euiFieldText--compressed"
+                type="number"
+                disabled={disableSeparateYaxis}
+                onChange={handleTextChange('axis_max')}
+                value={model.axis_max}
+              />
+            </EuiFormControlLayout>
           </EuiCompressedFormRow>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
@@ -560,6 +594,26 @@
             />
           </EuiCompressedFormRow>
         </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiCompressedFormRow
+            id={htmlId('axisScale')}
+            label={
+              <FormattedMessage
+                id="visTypeTimeseries.timeseries.optionsTab.axisScaleLabel"
+                defaultMessage="Axis scale"
+              />
+            }
+          >
+            <EuiCompressedComboBox
+              isClearable={false}
+              isDisabled={disableSeparateYaxis}
+              options={scaleOptions}
+              selectedOptions={selectedAxisScaleOption ? [selectedAxisScaleOption] : []}
+              onChange={handleSelectChange('axis_scale')}
+              singleSelection={{ asPlainText: true }}
+            />
+          </EuiCompressedFormRow>
+        </EuiFlexItem>
       </EuiFlexGroup>
 
       <EuiHorizontalRule margin="s" />