[Vis: Default Editor] Euificate table options tab

src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/switch.tsx

@@ -22,7 +22,7 @@ import React from 'react';
 import { EuiSwitch, EuiToolTip } from '@elastic/eui';
 
 interface SwitchOptionProps<ParamName extends string> {
-  dataTestSubj?: string;
+  'data-test-subj'?: string;
   label?: string;
   tooltip?: string;
   disabled?: boolean;
@@ -33,7 +33,7 @@ interface SwitchOptionProps<ParamName extends string> {
 }
 
 function SwitchOption<ParamName extends string>({
-  dataTestSubj,
+  'data-test-subj': dataTestSubj,
   tooltip,
   label,
   disabled,

src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/gauge/ranges_panel.tsx

@@ -119,7 +119,7 @@ function RangesPanel({
       />
 
       <SwitchOption
-        dataTestSubj="gaugePercentageMode"
+        data-test-subj="gaugePercentageMode"
         label={i18n.translate('kbnVislibVisTypes.controls.gaugeOptions.percentageModeLabel', {
           defaultMessage: 'Percentage mode',
         })}

src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/custom_extents_options.tsx

@@ -114,7 +114,7 @@ function CustomExtentsOptions({
       )}
 
       <SwitchOption
-        dataTestSubj="yAxisSetYExtents"
+        data-test-subj="yAxisSetYExtents"
         label={i18n.translate(
           'kbnVislibVisTypes.controls.pointSeries.valueAxes.setAxisExtentsLabel',
           {

src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/label_options.tsx

@@ -80,7 +80,9 @@ function LabelOptions({ stateParams, setValue, axis, axesName, index }: LabelOpt
       />
 
       <SwitchOption
-        dataTestSubj={`${axesName === 'valueAxes' ? 'y' : 'x'}AxisFilterLabelsCheckbox-${axis.id}`}
+        data-test-subj={`${axesName === 'valueAxes' ? 'y' : 'x'}AxisFilterLabelsCheckbox-${
+          axis.id
+        }`}
         disabled={!axis.labels.show}
         label={i18n.translate(
           'kbnVislibVisTypes.controls.pointSeries.categoryAxis.filterLabelsLabel',

src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/point_series/grid_panel.tsx

@@ -85,7 +85,7 @@ function GridPanel({ stateParams, setValue, hasHistogramAgg }: VisOptionsProps<B
         }
         value={stateParams.grid.categoryLines}
         setValue={setGrid}
-        dataTestSubj="showCategoryLines"
+        data-test-subj="showCategoryLines"
       />
 
       <SelectOption

src/legacy/core_plugins/vis_type_table/public/components/table_vis_options.tsx

@@ -0,0 +1,160 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useEffect, useMemo } from 'react';
+import { get } from 'lodash';
+import { EuiPanel, EuiTitle, EuiSpacer } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+import { tabifyGetColumns } from 'ui/agg_response/tabify/_get_columns';
+import { VisOptionsProps } from 'ui/vis/editors/default';
+import {
+  NumberInputOption,
+  SwitchOption,
+  SelectOption,
+} from '../../../kbn_vislib_vis_types/public/components/common';
+import { TableVisParams } from '../types';
+import { totalAggregations, isNumeric } from './utils';
+
+function TableOptions({
+  aggs,
+  aggsLabels,
+  stateParams,
+  setValidity,
+  setValue,
+}: VisOptionsProps<TableVisParams>) {
+  const noCol = useMemo(
+    () => ({
+      value: '',
+      text: i18n.translate('visTypeTable.params.defaultPercetangeCol', {
+        defaultMessage: 'Don’t show',
+      }),
+    }),
+    []
+  );
+  const percentageColumns = useMemo(
+    () => [
+      noCol,
+      ...tabifyGetColumns(aggs.getResponseAggs(), true)
+        .filter(col => isNumeric(get(col, 'aggConfig.type.name'), stateParams.dimensions))
+        .map(({ name }) => ({ value: name, text: name })),
+    ],
+    [aggs, aggsLabels, stateParams.percentageCol, stateParams.dimensions]
+  );
+
+  const isPerPageValid = stateParams.perPage === '' ? true : stateParams.perPage > 0;
+
+  useEffect(() => {
+    setValidity(isPerPageValid);
+  }, [isPerPageValid]);
+
+  useEffect(() => {
+    if (
+      !percentageColumns.find(({ value }) => value === stateParams.percentageCol) &&
+      percentageColumns[0] &&
+      percentageColumns[0].value !== stateParams.percentageCol
+    ) {
+      setValue('percentageCol', percentageColumns[0].value);
+    }
+  }, [aggs, aggsLabels, percentageColumns, stateParams.percentageCol]);
+
+  return (
+    <EuiPanel paddingSize="s">
+      <EuiTitle size="xs">
+        <h3>
+          <FormattedMessage
+            id="visTypeTable.params.showMetricsLabel.optionsTitle"
+            defaultMessage="Options"
+          />
+        </h3>
+      </EuiTitle>
+      <EuiSpacer size="s" />
+      <NumberInputOption
+        label={i18n.translate('visTypeTable.params.perPageLabel', {
+          defaultMessage: 'Rows per page',
+        })}
+        isInvalid={!isPerPageValid}
+        min={1}
+        paramName="perPage"
+        value={stateParams.perPage}
+        setValue={setValue}
+      />
+
+      <EuiSpacer size="xs" />
+      <SwitchOption
+        label={i18n.translate('visTypeTable.params.showMetricsLabel', {
+          defaultMessage: 'Show metrics for every bucket/level',
+        })}
+        paramName="showMetricsAtAllLevels"
+        value={stateParams.showMetricsAtAllLevels}
+        setValue={setValue}
+        data-test-subj="showMetricsAtAllLevels"
+      />
+
+      <SwitchOption
+        label={i18n.translate('visTypeTable.params.showPartialRowsLabel', {
+          defaultMessage: 'Show partial rows',
+        })}
+        tooltip={i18n.translate('visTypeTable.params.showPartialRowsTip', {
+          defaultMessage:
+            'Show rows that have partial data. This will still calculate metrics for every bucket/level, even if they are not displayed.',
+        })}
+        paramName="showPartialRows"
+        value={stateParams.showPartialRows}
+        setValue={setValue}
+        data-test-subj="showPartialRows"
+      />
+
+      <SwitchOption
+        label={i18n.translate('visTypeTable.params.showTotalLabel', {
+          defaultMessage: 'Show total',
+        })}
+        paramName="showTotal"
+        value={stateParams.showTotal}
+        setValue={setValue}
+      />
+
+      <EuiSpacer size="xs" />
+      <SelectOption
+        label={i18n.translate('visTypeTable.params.totalFunctionLabel', {
+          defaultMessage: 'Total function',
+        })}
+        disabled={!stateParams.showTotal}
+        options={totalAggregations}
+        paramName="totalFunc"
+        value={stateParams.totalFunc}
+        setValue={setValue}
+      />
+
+      <SelectOption
+        label={i18n.translate('visTypeTable.params.PercentageColLabel', {
+          defaultMessage: 'Percentage column',
+        })}
+        options={percentageColumns}
+        paramName="percentageCol"
+        value={stateParams.percentageCol}
+        setValue={setValue}
+        id="datatableVisualizationPercentageCol"
+      />
+    </EuiPanel>
+  );
+}
+
+export { TableOptions };

src/legacy/core_plugins/vis_type_table/public/components/utils.ts

@@ -0,0 +1,76 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { get } from 'lodash';
+import { i18n } from '@kbn/i18n';
+import { AggTypes, Dimensions } from '../types';
+
+/**
+ * Determines if a aggConfig is numeric
+ * @param {String} type - the type of the aggConfig
+ * @param {Object} obj - dimensions of the current visualization or editor
+ * @param {Object} obj.buckets
+ * @param {Object} obj.metrics
+ * @returns {Boolean}
+ */
+function isNumeric(
+  type: AggTypes,
+  { buckets, metrics }: Dimensions = { buckets: [], metrics: [] }
+) {
+  const dimension =
+    buckets.find(({ aggType }) => aggType === type) ||
+    metrics.find(({ aggType }) => aggType === type);
+  const formatType = get(dimension, 'format.id') || get(dimension, 'format.params.id');
+  return formatType === 'number';
+}
+
+const totalAggregations = [
+  {
+    value: AggTypes.SUM,
+    text: i18n.translate('visTypeTable.totalAggregations.sumText', {
+      defaultMessage: 'Sum',
+    }),
+  },
+  {
+    value: AggTypes.AVG,
+    text: i18n.translate('visTypeTable.totalAggregations.avgText', {
+      defaultMessage: 'Avg',
+    }),
+  },
+  {
+    value: AggTypes.MIN,
+    text: i18n.translate('visTypeTable.totalAggregations.minText', {
+      defaultMessage: 'Min',
+    }),
+  },
+  {
+    value: AggTypes.MAX,
+    text: i18n.translate('visTypeTable.totalAggregations.maxText', {
+      defaultMessage: 'Max',
+    }),
+  },
+  {
+    value: AggTypes.COUNT,
+    text: i18n.translate('visTypeTable.totalAggregations.countText', {
+      defaultMessage: 'Count',
+    }),
+  },
+];
+
+export { isNumeric, totalAggregations };

src/legacy/core_plugins/vis_type_table/public/shim/table_vis_legacy_module.ts

@@ -28,8 +28,6 @@ import 'ui/directives/paginate';
 // @ts-ignore
 import { TableVisController } from '../table_vis_controller.js';
 // @ts-ignore
-import { TableVisParams } from '../table_vis_params';
-// @ts-ignore
 import { KbnAggTable } from '../agg_table/agg_table';
 // @ts-ignore
 import { KbnAggTableGroup } from '../agg_table/agg_table_group';
@@ -43,7 +41,6 @@ export const initTableVisLegacyModule = once((): void => {
   uiModules
     .get('kibana/table_vis', ['kibana', 'RecursionHelper'])
     .controller('KbnTableVisController', TableVisController)
-    .directive('tableVisParams', TableVisParams)
     .directive('kbnAggTable', KbnAggTable)
     .directive('kbnAggTableGroup', KbnAggTableGroup)
     .directive('kbnRows', KbnRows)