[ML] change empty state styling

elastic · Jul 1, 2020 · 04bf4ca · 04bf4ca
1 parent 57e4cae
commit 04bf4ca
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 36 deletions.
diff --git a/x-pack/plugins/ml/public/application/explorer/anomaly_timeline.tsx b/x-pack/plugins/ml/public/application/explorer/anomaly_timeline.tsx
@@ -343,10 +343,18 @@ export const AnomalyTimeline: FC<AnomalyTimelineProps> = React.memo(
                     isLoading={loading || viewBySwimlaneDataLoading}
                     noDataWarning={
                       typeof viewBySwimlaneFieldName === 'string' ? (
-                        <ExplorerNoInfluencersFound
-                          viewBySwimlaneFieldName={viewBySwimlaneFieldName}
-                          showFilterMessage={filterActive === true}
-                        />
+                        viewBySwimlaneFieldName === VIEW_BY_JOB_LABEL ? (
+                          <FormattedMessage
+                            id="xpack.ml.explorer.noResultForSelectedJobsMessage"
+                            defaultMessage="No results found for selected {jobsCount, plural, one {job} other {jobs}}"
+                            values={{ jobsCount: selectedJobs?.length ?? 1 }}
+                          />
+                        ) : (
+                          <ExplorerNoInfluencersFound
+                            viewBySwimlaneFieldName={viewBySwimlaneFieldName}
+                            showFilterMessage={filterActive === true}
+                          />
+                        )
                       ) : null
                     }
                   />

diff --git a/...ation/explorer/components/explorer_no_influencers_found/explorer_no_influencers_found.tsx b/...ation/explorer/components/explorer_no_influencers_found/explorer_no_influencers_found.tsx
@@ -7,34 +7,24 @@
 import React, { FC } from 'react';
 
 import { FormattedMessage } from '@kbn/i18n/react';
-import { EuiEmptyPrompt } from '@elastic/eui';
 
 /*
  * React component for rendering EuiEmptyPrompt when no influencers were found.
  */
 export const ExplorerNoInfluencersFound: FC<{
   viewBySwimlaneFieldName: string;
   showFilterMessage?: boolean;
-}> = ({ viewBySwimlaneFieldName, showFilterMessage = false }) => (
-  <EuiEmptyPrompt
-    titleSize="xs"
-    title={
-      <h2>
-        {showFilterMessage === false && (
-          <FormattedMessage
-            id="xpack.ml.explorer.noInfluencersFoundTitle"
-            defaultMessage="No {viewBySwimlaneFieldName} influencers found"
-            values={{ viewBySwimlaneFieldName }}
-          />
-        )}
-        {showFilterMessage === true && (
-          <FormattedMessage
-            id="xpack.ml.explorer.noInfluencersFoundTitleFilterMessage"
-            defaultMessage="No {viewBySwimlaneFieldName} influencers found for specified filter"
-            values={{ viewBySwimlaneFieldName }}
-          />
-        )}
-      </h2>
-    }
-  />
-);
+}> = ({ viewBySwimlaneFieldName, showFilterMessage = false }) =>
+  showFilterMessage === false ? (
+    <FormattedMessage
+      id="xpack.ml.explorer.noInfluencersFoundTitle"
+      defaultMessage="No {viewBySwimlaneFieldName} influencers found"
+      values={{ viewBySwimlaneFieldName }}
+    />
+  ) : (
+    <FormattedMessage
+      id="xpack.ml.explorer.noInfluencersFoundTitleFilterMessage"
+      defaultMessage="No {viewBySwimlaneFieldName} influencers found for specified filter"
+      values={{ viewBySwimlaneFieldName }}
+    />
+  );
diff --git a/x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx b/x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx
@@ -11,6 +11,7 @@ import {
   EuiResizeObserver,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiEmptyPrompt,
 } from '@elastic/eui';
 
 import { throttle } from 'lodash';
@@ -127,7 +128,13 @@ export const SwimlaneContainer: FC<
                     <EuiLoadingChart size="xl" data-test-subj="mlSwimLaneLoadingIndicator" />
                   </EuiText>
                 )}
-                {!isLoading && !showSwimlane && noDataWarning}
+                {!isLoading && !showSwimlane && (
+                  <EuiEmptyPrompt
+                    titleSize="xs"
+                    style={{ padding: 0 }}
+                    title={<h2>{noDataWarning}</h2>}
+                  />
+                )}
               </EuiText>
             </EuiFlexItem>
             {isPaginationVisible && (

diff --git a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/embeddable_swim_lane_container.tsx b/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/embeddable_swim_lane_container.tsx
@@ -5,7 +5,7 @@
  */
 
 import React, { FC, useState } from 'react';
-import { EuiCallOut, EuiText } from '@elastic/eui';
+import { EuiCallOut, EuiEmptyPrompt } from '@elastic/eui';
 import { Observable } from 'rxjs';
 
 import { CoreStart } from 'kibana/public';
@@ -99,12 +99,17 @@ export const EmbeddableSwimLaneContainer: FC<ExplorerSwimlaneContainerProps> = (
         }}
         isLoading={isLoading}
         noDataWarning={
-          <EuiText textAlign={'center'} size="m">
-            <FormattedMessage
-              id="xpack.ml.swimlaneEmbeddable.noDataFound"
-              defaultMessage="No anomalies found"
-            />
-          </EuiText>
+          <EuiEmptyPrompt
+            titleSize="xs"
+            title={
+              <h2>
+                <FormattedMessage
+                  id="xpack.ml.swimlaneEmbeddable.noDataFound"
+                  defaultMessage="No anomalies found"
+                />
+              </h2>
+            }
+          />
         }
       />
     </div>