Refactor ProbabilityUsedMessage and CalculatingProbabilityMessage

elastic · Feb 14, 2023 · 1d0e2a6 · 1d0e2a6
1 parent 336e266
commit 1d0e2a6
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 33 deletions.
diff --git a/...er/public/application/common/components/document_count_content/document_count_content.tsx b/...er/public/application/common/components/document_count_content/document_count_content.tsx
@@ -42,6 +42,31 @@ export interface Props {
   loading: boolean;
 }
 
+const ProbabilityUsedMessage = ({ samplingProbability }: Pick<Props, 'samplingProbability'>) => {
+  return isDefined(samplingProbability) ? (
+    <div data-test-subj="dvRandomSamplerProbabilityUsedMsg">
+      <EuiSpacer size="m" />
+
+      <FormattedMessage
+        id="xpack.dataVisualizer.randomSamplerSettingsPopUp.probabilityLabel"
+        defaultMessage="Probability used: {samplingProbability}%"
+        values={{ samplingProbability: samplingProbability * 100 }}
+      />
+    </div>
+  ) : null;
+};
+
+const CalculatingProbabilityMessage = (
+  <div data-test-subj="dvRandomSamplerCalculatingProbabilityMsg">
+    <EuiSpacer size="m" />
+
+    <FormattedMessage
+      id="xpack.dataVisualizer.randomSamplerSettingsPopUp.calculatingProbabilityLabel"
+      defaultMessage="Calculating the optimal probability"
+    />
+  </div>
+);
+
 export const DocumentCountContent: FC<Props> = ({
   documentCountStats,
   totalCount,
@@ -105,31 +130,6 @@ export const DocumentCountContent: FC<Props> = ({
 
   const approximate = documentCountStats.randomlySampled === true;
 
-  const ProbabilityUsedMessage =
-    randomSamplerPreference !== RANDOM_SAMPLER_OPTION.OFF && isDefined(samplingProbability) ? (
-      <div data-test-subj="dvRandomSamplerAutomaticProbabilityMsg">
-        <EuiSpacer size="m" />
-
-        <FormattedMessage
-          id="xpack.dataVisualizer.randomSamplerSettingsPopUp.probabilityLabel"
-          defaultMessage="Probability used: {samplingProbability}%"
-          values={{ samplingProbability: samplingProbability * 100 }}
-        />
-      </div>
-    ) : null;
-
-  const CalculatingProbMessage =
-    randomSamplerPreference !== RANDOM_SAMPLER_OPTION.OFF && isDefined(samplingProbability) ? (
-      <div data-test-subj="dvRandomSamplerAutomaticProbabilityMsg">
-        <EuiSpacer size="m" />
-
-        <FormattedMessage
-          id="xpack.dataVisualizer.randomSamplerSettingsPopUp.calculatingProbabilityLabel"
-          defaultMessage="Calculating the optimal probability"
-        />
-      </div>
-    ) : null;
-
   return (
     <>
       <EuiFlexGroup alignItems="center" gutterSize="xs">
@@ -190,11 +190,15 @@ export const DocumentCountContent: FC<Props> = ({
                   samplingProbability={samplingProbability}
                   setSamplingProbability={setSamplingProbability}
                 />
-              ) : loading ? (
-                CalculatingProbMessage
-              ) : (
-                ProbabilityUsedMessage
-              )}
+              ) : null}
+
+              {randomSamplerPreference === RANDOM_SAMPLER_OPTION.ON_AUTOMATIC ? (
+                loading ? (
+                  CalculatingProbabilityMessage
+                ) : (
+                  <ProbabilityUsedMessage samplingProbability={samplingProbability} />
+                )
+              ) : null}
             </EuiPanel>
           </EuiPopover>
           <EuiFlexItem />

diff --git a/x-pack/test/functional/services/ml/data_visualizer_index_based.ts b/x-pack/test/functional/services/ml/data_visualizer_index_based.ts
@@ -258,7 +258,7 @@ export function MachineLearningDataVisualizerIndexBasedProvider({
         if (expectedOption === 'dvRandomSamplerOptionOff') {
           await testSubjects.existOrFail('dvRandomSamplerOptionOff', { timeout: 1000 });
           await testSubjects.missingOrFail('dvRandomSamplerProbabilityRange', { timeout: 1000 });
-          await testSubjects.missingOrFail('dvRandomSamplerAutomaticProbabilityMsg', {
+          await testSubjects.missingOrFail('dvRandomSamplerProbabilityUsedMsg', {
             timeout: 1000,
           });
         }
@@ -280,13 +280,13 @@ export function MachineLearningDataVisualizerIndexBasedProvider({
 
         if (expectedOption === 'dvRandomSamplerOptionOnAutomatic') {
           await testSubjects.existOrFail('dvRandomSamplerOptionOnAutomatic', { timeout: 1000 });
-          await testSubjects.existOrFail('dvRandomSamplerAutomaticProbabilityMsg', {
+          await testSubjects.existOrFail('dvRandomSamplerProbabilityUsedMsg', {
             timeout: 1000,
           });
 
           if (expectedProbability !== undefined) {
             const probabilityText = await testSubjects.getVisibleText(
-              'dvRandomSamplerAutomaticProbabilityMsg'
+              'dvRandomSamplerProbabilityUsedMsg'
             );
             expect(probabilityText).to.contain(
               `${expectedProbability}`,