[ML] Adds functional tests for the index data visualizer card contents

x-pack/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/content_types/date_content.tsx

@@ -25,7 +25,7 @@ export const DateContent: FC<FieldDataCardProps> = ({ config }) => {
   return (
     <div className="mlFieldDataCard__stats">
       <div>
-        <EuiText size="xs" color="subdued">
+        <EuiText size="xs" color="subdued" data-test-subj="mlFieldDataCardDocCount">
           <EuiIcon type="document" />
           &nbsp;
           <FormattedMessage
@@ -41,7 +41,7 @@ export const DateContent: FC<FieldDataCardProps> = ({ config }) => {
 
       <EuiSpacer size="m" />
 
-      <div>
+      <div data-test-subj="mlFieldDataCardEarliest">
         <FormattedMessage
           id="xpack.ml.fieldDataCard.cardDate.earliestDescription"
           defaultMessage="earliest {earliestFormatted}"
@@ -53,7 +53,7 @@ export const DateContent: FC<FieldDataCardProps> = ({ config }) => {
 
       <EuiSpacer size="s" />
 
-      <div>
+      <div data-test-subj="mlFieldDataCardLatest">
         <FormattedMessage
           id="xpack.ml.fieldDataCard.cardDate.latestDescription"
           defaultMessage="latest {latestFormatted}"

x-pack/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/content_types/keyword_content.tsx

@@ -24,7 +24,7 @@ export const KeywordContent: FC<FieldDataCardProps> = ({ config }) => {
   return (
     <div className="mlFieldDataCard__stats">
       <div>
-        <EuiText size="xs" color="subdued">
+        <EuiText size="xs" color="subdued" data-test-subj="mlFieldDataCardDocCount">
           <EuiIcon type="document" />
           &nbsp;
           <FormattedMessage
@@ -41,7 +41,7 @@ export const KeywordContent: FC<FieldDataCardProps> = ({ config }) => {
       <EuiSpacer size="xs" />
 
       <div>
-        <EuiText size="xs" color="subdued">
+        <EuiText size="xs" color="subdued" data-test-subj="mlFieldDataCardCardinality">
           <EuiIcon type="database" />
           &nbsp;
           <FormattedMessage

x-pack/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/content_types/number_content.tsx

@@ -29,10 +29,12 @@ import {
 } from '../metric_distribution_chart';
 import { TopValues } from '../top_values';
 
-enum DETAILS_MODE {
-  DISTRIBUTION = 'distribution',
-  TOP_VALUES = 'top_values',
-}
+const DETAILS_MODE = {
+  DISTRIBUTION: 'distribution',
+  TOP_VALUES: 'top_values',
+} as const;
+
+type DetailsModeType = typeof DETAILS_MODE[keyof typeof DETAILS_MODE];
 
 const METRIC_DISTRIBUTION_CHART_WIDTH = 325;
 const METRIC_DISTRIBUTION_CHART_HEIGHT = 210;
@@ -76,7 +78,7 @@ export const NumberContent: FC<FieldDataCardProps> = ({ config }) => {
   return (
     <div className="mlFieldDataCard__stats">
       <div>
-        <EuiText size="xs" color="subdued">
+        <EuiText size="xs" color="subdued" data-test-subj="mlFieldDataCardDocCount">
           <EuiIcon type="document" />
           &nbsp;
           <FormattedMessage
@@ -91,7 +93,7 @@ export const NumberContent: FC<FieldDataCardProps> = ({ config }) => {
       </div>
       <EuiSpacer size="xs" />
       <div>
-        <EuiText size="xs" color="subdued">
+        <EuiText size="xs" color="subdued" data-test-subj="mlFieldDataCardCardinality">
           <EuiIcon type="database" />
           &nbsp;
           <FormattedMessage
@@ -131,28 +133,28 @@ export const NumberContent: FC<FieldDataCardProps> = ({ config }) => {
         </EuiFlexItem>
       </EuiFlexGroup>
       <EuiFlexGroup gutterSize="xs" justifyContent="center">
-        <EuiFlexItem grow={1} className="eui-textTruncate">
+        <EuiFlexItem grow={1} className="eui-textTruncate" data-test-subj="mlFieldDataCardMin">
           <DisplayValue value={kibanaFieldFormat(min, fieldFormat)} />
         </EuiFlexItem>
-        <EuiFlexItem grow={1} className="eui-textTruncate">
+        <EuiFlexItem grow={1} className="eui-textTruncate" data-test-subj="mlFieldDataCardMedian">
           <DisplayValue value={kibanaFieldFormat(median, fieldFormat)} />
         </EuiFlexItem>
-        <EuiFlexItem grow={1} className="eui-textTruncate">
+        <EuiFlexItem grow={1} className="eui-textTruncate" data-test-subj="mlFieldDataCardMax">
           <DisplayValue value={kibanaFieldFormat(max, fieldFormat)} />
         </EuiFlexItem>
       </EuiFlexGroup>
       <EuiSpacer size="s" />
       <EuiButtonGroup
         options={detailsOptions}
         idSelected={detailsMode}
-        onChange={(optionId) => setDetailsMode(optionId as DETAILS_MODE)}
+        onChange={(optionId) => setDetailsMode(optionId as DetailsModeType)}
         legend={i18n.translate(
           'xpack.ml.fieldDataCard.cardNumber.selectMetricDetailsDisplayAriaLabel',
           {
             defaultMessage: 'Select display option for metric details',
           }
         )}
-        data-test-subj="mlFieldDataCardNumberDetailsSelect"
+        data-test-subj="mlFieldDataCardDetailsSelect"
         isFullWidth={true}
         buttonSize="compressed"
       />

x-pack/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/document_count_chart/document_count_chart.tsx

@@ -61,7 +61,7 @@ export const DocumentCountChart: FC<Props> = ({
   const EVENT_RATE_COLOR = themeName.euiColorVis2;
 
   return (
-    <div style={{ width, height }}>
+    <div style={{ width, height }} data-test-subj="mlFieldDataCardDocumentCountChart">
       <Chart>
         <Settings
           xDomain={xDomain}

x-pack/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/examples_list/examples_list.tsx

@@ -31,7 +31,7 @@ export const ExamplesList: FC<Props> = ({ examples }) => {
   });
 
   return (
-    <div>
+    <div data-test-subj="mlFieldDataCardExamplesList">
       <EuiTitle size="xxxs" className="mlFieldDataCard__valuesTitle">
         <span>
           <FormattedMessage

x-pack/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/field_data_card.tsx

@@ -76,7 +76,7 @@ export const FieldDataCard: FC<FieldDataCardProps> = ({ config }) => {
       hasShadow={false}
     >
       <FieldTitleBar card={config} />
-      <div className="mlFieldDataCard__content">
+      <div className="mlFieldDataCard__content" data-test-subj="mlFieldDataCardContent">
         {loading === true ? <LoadingIndicator /> : getCardContent()}
       </div>
     </EuiPanel>

x-pack/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/metric_distribution_chart/metric_distribution_chart.tsx

@@ -72,7 +72,7 @@ export const MetricDistributionChart: FC<Props> = ({ width, height, chartData, f
   };
 
   return (
-    <div style={{ width, height }}>
+    <div style={{ width, height }} data-test-subj="mlFieldDataCardMetricDistributionChart">
       <Chart>
         <Settings
           theme={{

x-pack/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/top_values/top_values.tsx

@@ -45,7 +45,7 @@ export const TopValues: FC<Props> = ({ stats, fieldFormat, barColor }) => {
   const progressBarMax = isTopValuesSampled === true ? topValuesSampleSize : count;
 
   return (
-    <Fragment>
+    <div data-test-subj="mlFieldDataCardTopValues">
       {topValues.map((value: any) => (
         <EuiFlexGroup gutterSize="xs" alignItems="center" key={value.key}>
           <EuiFlexItem grow={false} style={{ width: 100 }} className="eui-textTruncate">
@@ -55,7 +55,7 @@ export const TopValues: FC<Props> = ({ stats, fieldFormat, barColor }) => {
               </EuiText>
             </EuiToolTip>
           </EuiFlexItem>
-          <EuiFlexItem>
+          <EuiFlexItem data-test-subj="mlFieldDataCardTopValueBar">
             <EuiProgress value={value.doc_count} max={progressBarMax} color={barColor} size="m" />
           </EuiFlexItem>
           <EuiFlexItem grow={false} style={{ width: 70 }} className="eui-textTruncate">
@@ -79,6 +79,6 @@ export const TopValues: FC<Props> = ({ stats, fieldFormat, barColor }) => {
           </EuiText>
         </Fragment>
       )}
-    </Fragment>
+    </div>
   );
 };

x-pack/plugins/ml/public/application/datavisualizer/index_based/components/search_panel/search_panel.tsx

@@ -48,16 +48,20 @@ const searchSizeOptions = [1000, 5000, 10000, 100000, -1].map((v) => {
     value: String(v),
     inputDisplay:
       v > 0 ? (
-        <FormattedMessage
-          id="xpack.ml.datavisualizer.searchPanel.sampleSizeOptionLabel"
-          defaultMessage="Sample size (per shard): {wrappedValue}"
-          values={{ wrappedValue: <b>{v}</b> }}
-        />
+        <span data-test-subj={`mlDataVisualizerShardSizeOption ${v}`}>
+          <FormattedMessage
+            id="xpack.ml.datavisualizer.searchPanel.sampleSizeOptionLabel"
+            defaultMessage="Sample size (per shard): {wrappedValue}"
+            values={{ wrappedValue: <b>{v}</b> }}
+          />
+        </span>
       ) : (
-        <FormattedMessage
-          id="xpack.ml.datavisualizer.searchPanel.allOptionLabel"
-          defaultMessage="Search all"
-        />
+        <span data-test-subj={`mlDataVisualizerShardSizeOption all`}>
+          <FormattedMessage
+            id="xpack.ml.datavisualizer.searchPanel.allOptionLabel"
+            defaultMessage="Search all"
+          />
+        </span>
       ),
   };
 });
@@ -174,10 +178,18 @@ export const SearchPanel: FC<Props> = ({
       <EuiFlexItem grow={false}>
         <EuiText size="s">
           <FormattedMessage
-            id="xpack.ml.datavisualizer.searchPanel.documentsPerShardLabel"
-            defaultMessage="Total documents: {wrappedTotalCount}"
+            id="xpack.ml.datavisualizer.searchPanel.totalDocCountLabel"
+            defaultMessage="Total documents: {strongTotalCount}"
             values={{
-              wrappedTotalCount: <b data-test-subj="mlDataVisualizerTotalDocCount">{totalCount}</b>,
+              strongTotalCount: (
+                <strong data-test-subj="mlDataVisualizerTotalDocCount">
+                  <FormattedMessage
+                    id="xpack.ml.datavisualizer.searchPanel.totalDocCountNumber"
+                    defaultMessage="{totalCount, plural, one {#} other {#}}"
+                    values={{ totalCount }}
+                  />
+                </strong>
+              ),
             }}
           />
         </EuiText>

x-pack/plugins/translations/translations/ja-JP.json

@@ -1361,6 +1361,12 @@
     "data.search.unableToGetSavedQueryToastTitle": "保存したクエリ {savedQueryId} を読み込めません",
     "data.search.upgradeLicense": "クエリがタイムアウトしました。無料のベーシックティアではクエリがタイムアウトすることはありません。",
     "data.search.upgradeLicenseActionText": "今すぐアップグレード",
+    "data.search.functions.kibana_context.filters.help": "Kibana ジェネリックフィルターを指定します",
+    "data.search.functions.kibana_context.help": "Kibana グローバルコンテキストを更新します",
+    "data.search.functions.kibana_context.q.help": "自由形式の Kibana テキストクエリを指定します",
+    "data.search.functions.kibana_context.savedSearchId.help": "クエリとフィルターに使用する保存検索ID を指定します。",
+    "data.search.functions.kibana_context.timeRange.help": "Kibana 時間範囲フィルターを指定します",
+    "data.search.functions.kibana.help": "Kibana グローバルコンテキストを取得します",
     "devTools.badge.readOnly.text": "読み込み専用",
     "devTools.badge.readOnly.tooltip": "を保存できませんでした",
     "devTools.devToolsTitle": "開発ツール",
@@ -1662,12 +1668,6 @@
     "expressions.functions.font.invalidFontWeightErrorMessage": "無効なフォント太さ：'{weight}'",
     "expressions.functions.font.invalidTextAlignmentErrorMessage": "無効なテキストアラインメント：'{align}'",
     "expressions.functions.fontHelpText": "フォントスタイルを作成します。",
-    "data.search.functions.kibana_context.filters.help": "Kibana ジェネリックフィルターを指定します",
-    "data.search.functions.kibana_context.help": "Kibana グローバルコンテキストを更新します",
-    "data.search.functions.kibana_context.q.help": "自由形式の Kibana テキストクエリを指定します",
-    "data.search.functions.kibana_context.savedSearchId.help": "クエリとフィルターに使用する保存検索ID を指定します。",
-    "data.search.functions.kibana_context.timeRange.help": "Kibana 時間範囲フィルターを指定します",
-    "data.search.functions.kibana.help": "Kibana グローバルコンテキストを取得します",
     "expressions.functions.theme.args.defaultHelpText": "テーマ情報がない場合のデフォルト値。",
     "expressions.functions.theme.args.variableHelpText": "読み取るテーマ変数名。",
     "expressions.functions.themeHelpText": "テーマ設定を読み取ります。",
@@ -12273,7 +12273,6 @@
     "xpack.ml.datavisualizer.page.fieldsPanelTitle": "フィールド",
     "xpack.ml.datavisualizer.page.metricsPanelTitle": "メトリック",
     "xpack.ml.datavisualizer.searchPanel.allOptionLabel": "すべて検索",
-    "xpack.ml.datavisualizer.searchPanel.documentsPerShardLabel": "合計ドキュメント数: {wrappedTotalCount}",
     "xpack.ml.datavisualizer.searchPanel.invalidKuerySyntaxErrorMessageQueryBar": "無効なクエリ",
     "xpack.ml.datavisualizer.searchPanel.queryBarPlaceholder": "小さいサンプルサイズを選択することで、クエリの実行時間を短縮しクラスターへの負荷を軽減できます。",
     "xpack.ml.datavisualizer.searchPanel.queryBarPlaceholderText": "検索… (例: status:200 AND extension:\"PHP\")",

x-pack/plugins/translations/translations/zh-CN.json

@@ -1362,6 +1362,12 @@
     "data.search.unableToGetSavedQueryToastTitle": "无法加载已保存查询 {savedQueryId}",
     "data.search.upgradeLicense": "您的查询已超时。使用我们免费的基础级许可，您的查询永不会超时。",
     "data.search.upgradeLicenseActionText": "立即升级",
+    "data.search.functions.kibana_context.filters.help": "指定 Kibana 常规筛选",
+    "data.search.functions.kibana_context.help": "更新 kibana 全局上下文",
+    "data.search.functions.kibana_context.q.help": "指定 Kibana 自由格式文本查询",
+    "data.search.functions.kibana_context.savedSearchId.help": "指定要用于查询和筛选的已保存搜索 ID",
+    "data.search.functions.kibana_context.timeRange.help": "指定 Kibana 时间范围筛选",
+    "data.search.functions.kibana.help": "获取 kibana 全局上下文",
     "devTools.badge.readOnly.text": "只读",
     "devTools.badge.readOnly.tooltip": "无法保存",
     "devTools.devToolsTitle": "开发工具",
@@ -1663,12 +1669,6 @@
     "expressions.functions.font.invalidFontWeightErrorMessage": "无效的字体粗细：“{weight}”",
     "expressions.functions.font.invalidTextAlignmentErrorMessage": "无效的文本对齐方式：“{align}”",
     "expressions.functions.fontHelpText": "创建字体样式。",
-    "data.search.functions.kibana_context.filters.help": "指定 Kibana 常规筛选",
-    "data.search.functions.kibana_context.help": "更新 kibana 全局上下文",
-    "data.search.functions.kibana_context.q.help": "指定 Kibana 自由格式文本查询",
-    "data.search.functions.kibana_context.savedSearchId.help": "指定要用于查询和筛选的已保存搜索 ID",
-    "data.search.functions.kibana_context.timeRange.help": "指定 Kibana 时间范围筛选",
-    "data.search.functions.kibana.help": "获取 kibana 全局上下文",
     "expressions.functions.theme.args.defaultHelpText": "主题信息不可用时的默认值。",
     "expressions.functions.theme.args.variableHelpText": "要读取的主题变量的名称。",
     "expressions.functions.themeHelpText": "读取主题设置。",
@@ -12287,7 +12287,6 @@
     "xpack.ml.datavisualizer.page.fieldsPanelTitle": "字段",
     "xpack.ml.datavisualizer.page.metricsPanelTitle": "指标",
     "xpack.ml.datavisualizer.searchPanel.allOptionLabel": "搜索全部",
-    "xpack.ml.datavisualizer.searchPanel.documentsPerShardLabel": "文档总数：{wrappedTotalCount}",
     "xpack.ml.datavisualizer.searchPanel.invalidKuerySyntaxErrorMessageQueryBar": "无效查询",
     "xpack.ml.datavisualizer.searchPanel.queryBarPlaceholder": "选择较小的样例大小将减少查询运行时间和集群上的负载。",
     "xpack.ml.datavisualizer.searchPanel.queryBarPlaceholderText": "搜索……（例如，status:200 AND extension:\"PHP\"）",