Skip to content

Commit dde2d11

Browse files
peteharversonpeteharverson
authored
[ML] Adds functional tests for the index data visualizer card contents (#83174)
* [ML] Adds functional tests for the index data visualizer card contents * [ML] Fix translations * [ML] Fix type errors in permissions tests * [ML] Address comments from review
1 parent 4dd25fa commit dde2d11

File tree

18 files changed

+365
-88
lines changed

18 files changed

+365
-88
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export const DateContent: FC<FieldDataCardProps> = ({ config }) => {
2525
return (
2626
<div className="mlFieldDataCard__stats">
2727
<div>
28-
<EuiText size="xs" color="subdued">
28+
<EuiText size="xs" color="subdued" data-test-subj="mlFieldDataCardDocCount">
2929
<EuiIcon type="document" />
3030
&nbsp;
3131
<FormattedMessage
@@ -41,7 +41,7 @@ export const DateContent: FC<FieldDataCardProps> = ({ config }) => {
4141

4242
<EuiSpacer size="m" />
4343

44-
<div>
44+
<div data-test-subj="mlFieldDataCardEarliest">
4545
<FormattedMessage
4646
id="xpack.ml.fieldDataCard.cardDate.earliestDescription"
4747
defaultMessage="earliest {earliestFormatted}"
@@ -53,7 +53,7 @@ export const DateContent: FC<FieldDataCardProps> = ({ config }) => {
5353

5454
<EuiSpacer size="s" />
5555

56-
<div>
56+
<div data-test-subj="mlFieldDataCardLatest">
5757
<FormattedMessage
5858
id="xpack.ml.fieldDataCard.cardDate.latestDescription"
5959
defaultMessage="latest {latestFormatted}"

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export const KeywordContent: FC<FieldDataCardProps> = ({ config }) => {
2424
return (
2525
<div className="mlFieldDataCard__stats">
2626
<div>
27-
<EuiText size="xs" color="subdued">
27+
<EuiText size="xs" color="subdued" data-test-subj="mlFieldDataCardDocCount">
2828
<EuiIcon type="document" />
2929
&nbsp;
3030
<FormattedMessage
@@ -41,7 +41,7 @@ export const KeywordContent: FC<FieldDataCardProps> = ({ config }) => {
4141
<EuiSpacer size="xs" />
4242

4343
<div>
44-
<EuiText size="xs" color="subdued">
44+
<EuiText size="xs" color="subdued" data-test-subj="mlFieldDataCardCardinality">
4545
<EuiIcon type="database" />
4646
&nbsp;
4747
<FormattedMessage

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

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,12 @@ import {
2929
} from '../metric_distribution_chart';
3030
import { TopValues } from '../top_values';
3131

32-
enum DETAILS_MODE {
33-
DISTRIBUTION = 'distribution',
34-
TOP_VALUES = 'top_values',
35-
}
32+
const DETAILS_MODE = {
33+
DISTRIBUTION: 'distribution',
34+
TOP_VALUES: 'top_values',
35+
} as const;
36+
37+
type DetailsModeType = typeof DETAILS_MODE[keyof typeof DETAILS_MODE];
3638

3739
const METRIC_DISTRIBUTION_CHART_WIDTH = 325;
3840
const METRIC_DISTRIBUTION_CHART_HEIGHT = 210;
@@ -76,7 +78,7 @@ export const NumberContent: FC<FieldDataCardProps> = ({ config }) => {
7678
return (
7779
<div className="mlFieldDataCard__stats">
7880
<div>
79-
<EuiText size="xs" color="subdued">
81+
<EuiText size="xs" color="subdued" data-test-subj="mlFieldDataCardDocCount">
8082
<EuiIcon type="document" />
8183
&nbsp;
8284
<FormattedMessage
@@ -91,7 +93,7 @@ export const NumberContent: FC<FieldDataCardProps> = ({ config }) => {
9193
</div>
9294
<EuiSpacer size="xs" />
9395
<div>
94-
<EuiText size="xs" color="subdued">
96+
<EuiText size="xs" color="subdued" data-test-subj="mlFieldDataCardCardinality">
9597
<EuiIcon type="database" />
9698
&nbsp;
9799
<FormattedMessage
@@ -131,28 +133,28 @@ export const NumberContent: FC<FieldDataCardProps> = ({ config }) => {
131133
</EuiFlexItem>
132134
</EuiFlexGroup>
133135
<EuiFlexGroup gutterSize="xs" justifyContent="center">
134-
<EuiFlexItem grow={1} className="eui-textTruncate">
136+
<EuiFlexItem grow={1} className="eui-textTruncate" data-test-subj="mlFieldDataCardMin">
135137
<DisplayValue value={kibanaFieldFormat(min, fieldFormat)} />
136138
</EuiFlexItem>
137-
<EuiFlexItem grow={1} className="eui-textTruncate">
139+
<EuiFlexItem grow={1} className="eui-textTruncate" data-test-subj="mlFieldDataCardMedian">
138140
<DisplayValue value={kibanaFieldFormat(median, fieldFormat)} />
139141
</EuiFlexItem>
140-
<EuiFlexItem grow={1} className="eui-textTruncate">
142+
<EuiFlexItem grow={1} className="eui-textTruncate" data-test-subj="mlFieldDataCardMax">
141143
<DisplayValue value={kibanaFieldFormat(max, fieldFormat)} />
142144
</EuiFlexItem>
143145
</EuiFlexGroup>
144146
<EuiSpacer size="s" />
145147
<EuiButtonGroup
146148
options={detailsOptions}
147149
idSelected={detailsMode}
148-
onChange={(optionId) => setDetailsMode(optionId as DETAILS_MODE)}
150+
onChange={(optionId) => setDetailsMode(optionId as DetailsModeType)}
149151
legend={i18n.translate(
150152
'xpack.ml.fieldDataCard.cardNumber.selectMetricDetailsDisplayAriaLabel',
151153
{
152154
defaultMessage: 'Select display option for metric details',
153155
}
154156
)}
155-
data-test-subj="mlFieldDataCardNumberDetailsSelect"
157+
data-test-subj="mlFieldDataCardDetailsSelect"
156158
isFullWidth={true}
157159
buttonSize="compressed"
158160
/>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ export const DocumentCountChart: FC<Props> = ({
6161
const EVENT_RATE_COLOR = themeName.euiColorVis2;
6262

6363
return (
64-
<div style={{ width, height }}>
64+
<div style={{ width, height }} data-test-subj="mlFieldDataCardDocumentCountChart">
6565
<Chart>
6666
<Settings
6767
xDomain={xDomain}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export const ExamplesList: FC<Props> = ({ examples }) => {
3131
});
3232

3333
return (
34-
<div>
34+
<div data-test-subj="mlFieldDataCardExamplesList">
3535
<EuiTitle size="xxxs" className="mlFieldDataCard__valuesTitle">
3636
<span>
3737
<FormattedMessage

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ export const FieldDataCard: FC<FieldDataCardProps> = ({ config }) => {
7676
hasShadow={false}
7777
>
7878
<FieldTitleBar card={config} />
79-
<div className="mlFieldDataCard__content">
79+
<div className="mlFieldDataCard__content" data-test-subj="mlFieldDataCardContent">
8080
{loading === true ? <LoadingIndicator /> : getCardContent()}
8181
</div>
8282
</EuiPanel>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export const MetricDistributionChart: FC<Props> = ({ width, height, chartData, f
7272
};
7373

7474
return (
75-
<div style={{ width, height }}>
75+
<div style={{ width, height }} data-test-subj="mlFieldDataCardMetricDistributionChart">
7676
<Chart>
7777
<Settings
7878
theme={{

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export const TopValues: FC<Props> = ({ stats, fieldFormat, barColor }) => {
4545
const progressBarMax = isTopValuesSampled === true ? topValuesSampleSize : count;
4646

4747
return (
48-
<Fragment>
48+
<div data-test-subj="mlFieldDataCardTopValues">
4949
{topValues.map((value: any) => (
5050
<EuiFlexGroup gutterSize="xs" alignItems="center" key={value.key}>
5151
<EuiFlexItem grow={false} style={{ width: 100 }} className="eui-textTruncate">
@@ -55,7 +55,7 @@ export const TopValues: FC<Props> = ({ stats, fieldFormat, barColor }) => {
5555
</EuiText>
5656
</EuiToolTip>
5757
</EuiFlexItem>
58-
<EuiFlexItem>
58+
<EuiFlexItem data-test-subj="mlFieldDataCardTopValueBar">
5959
<EuiProgress value={value.doc_count} max={progressBarMax} color={barColor} size="m" />
6060
</EuiFlexItem>
6161
<EuiFlexItem grow={false} style={{ width: 70 }} className="eui-textTruncate">
@@ -79,6 +79,6 @@ export const TopValues: FC<Props> = ({ stats, fieldFormat, barColor }) => {
7979
</EuiText>
8080
</Fragment>
8181
)}
82-
</Fragment>
82+
</div>
8383
);
8484
};

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

Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -48,16 +48,20 @@ const searchSizeOptions = [1000, 5000, 10000, 100000, -1].map((v) => {
4848
value: String(v),
4949
inputDisplay:
5050
v > 0 ? (
51-
<FormattedMessage
52-
id="xpack.ml.datavisualizer.searchPanel.sampleSizeOptionLabel"
53-
defaultMessage="Sample size (per shard): {wrappedValue}"
54-
values={{ wrappedValue: <b>{v}</b> }}
55-
/>
51+
<span data-test-subj={`mlDataVisualizerShardSizeOption ${v}`}>
52+
<FormattedMessage
53+
id="xpack.ml.datavisualizer.searchPanel.sampleSizeOptionLabel"
54+
defaultMessage="Sample size (per shard): {wrappedValue}"
55+
values={{ wrappedValue: <b>{v}</b> }}
56+
/>
57+
</span>
5658
) : (
57-
<FormattedMessage
58-
id="xpack.ml.datavisualizer.searchPanel.allOptionLabel"
59-
defaultMessage="Search all"
60-
/>
59+
<span data-test-subj={`mlDataVisualizerShardSizeOption all`}>
60+
<FormattedMessage
61+
id="xpack.ml.datavisualizer.searchPanel.allOptionLabel"
62+
defaultMessage="Search all"
63+
/>
64+
</span>
6165
),
6266
};
6367
});
@@ -174,10 +178,18 @@ export const SearchPanel: FC<Props> = ({
174178
<EuiFlexItem grow={false}>
175179
<EuiText size="s">
176180
<FormattedMessage
177-
id="xpack.ml.datavisualizer.searchPanel.documentsPerShardLabel"
178-
defaultMessage="Total documents: {wrappedTotalCount}"
181+
id="xpack.ml.datavisualizer.searchPanel.totalDocCountLabel"
182+
defaultMessage="Total documents: {strongTotalCount}"
179183
values={{
180-
wrappedTotalCount: <b data-test-subj="mlDataVisualizerTotalDocCount">{totalCount}</b>,
184+
strongTotalCount: (
185+
<strong data-test-subj="mlDataVisualizerTotalDocCount">
186+
<FormattedMessage
187+
id="xpack.ml.datavisualizer.searchPanel.totalDocCountNumber"
188+
defaultMessage="{totalCount, plural, one {#} other {#}}"
189+
values={{ totalCount }}
190+
/>
191+
</strong>
192+
),
181193
}}
182194
/>
183195
</EuiText>

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12270,7 +12270,6 @@
1227012270
"xpack.ml.datavisualizer.page.fieldsPanelTitle": "フィールド",
1227112271
"xpack.ml.datavisualizer.page.metricsPanelTitle": "メトリック",
1227212272
"xpack.ml.datavisualizer.searchPanel.allOptionLabel": "すべて検索",
12273-
"xpack.ml.datavisualizer.searchPanel.documentsPerShardLabel": "合計ドキュメント数: {wrappedTotalCount}",
1227412273
"xpack.ml.datavisualizer.searchPanel.invalidKuerySyntaxErrorMessageQueryBar": "無効なクエリ",
1227512274
"xpack.ml.datavisualizer.searchPanel.queryBarPlaceholder": "小さいサンプルサイズを選択することで、クエリの実行時間を短縮しクラスターへの負荷を軽減できます。",
1227612275
"xpack.ml.datavisualizer.searchPanel.queryBarPlaceholderText": "検索… (例: status:200 AND extension:\"PHP\")",

0 commit comments

Comments
 (0)