Add message for empty example response

elastic · Mar 3, 2020 · 55db708 · 55db708
1 parent 182098d
commit 55db708
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 0 deletions.
diff --git a/...a/public/pages/logs/log_entry_categories/sections/top_categories/category_details_row.tsx b/...a/public/pages/logs/log_entry_categories/sections/top_categories/category_details_row.tsx
@@ -10,6 +10,7 @@ import { euiStyled } from '../../../../../../../observability/public';
 import { TimeRange } from '../../../../../../common/http_api/shared';
 import { useLogEntryCategoryExamples } from '../../use_log_entry_category_examples';
 import { CategoryExampleMessage } from './category_example_message';
+import { CategoryExampleMessagesEmptyIndicator } from './category_example_messages_empty_indicator';
 import { CategoryExampleMessagesFailureIndicator } from './category_example_messages_failure_indicator';
 import { CategoryExampleMessagesLoadingIndicator } from './category_example_messages_loading_indicator';
 
@@ -43,6 +44,8 @@ export const CategoryDetailsRow: React.FunctionComponent<{
         <CategoryExampleMessagesLoadingIndicator exampleCount={exampleCount} />
       ) : hasFailedLoadingLogEntryCategoryExamples ? (
         <CategoryExampleMessagesFailureIndicator onRetry={getLogEntryCategoryExamples} />
+      ) : logEntryCategoryExamples.length === 0 ? (
+        <CategoryExampleMessagesEmptyIndicator onReload={getLogEntryCategoryExamples} />
       ) : (
         logEntryCategoryExamples.map((categoryExample, categoryExampleIndex) => (
           <CategoryExampleMessage

diff --git a/...og_entry_categories/sections/top_categories/category_example_messages_empty_indicator.tsx b/...og_entry_categories/sections/top_categories/category_example_messages_empty_indicator.tsx
@@ -0,0 +1,29 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import { EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import React from 'react';
+
+export const CategoryExampleMessagesEmptyIndicator: React.FunctionComponent<{
+  onReload: () => void;
+}> = ({ onReload }) => (
+  <EuiFlexGroup alignItems="center" justifyContent="center">
+    <EuiFlexItem grow={false} className="eui-textNoWrap">
+      <FormattedMessage
+        id="xpack.infra.logs.logEntryCategories.exampleEmptyDescription"
+        defaultMessage="No examples found within the selected time range. Increase the log entry retention period to improve message sample availability."
+      />
+    </EuiFlexItem>
+    <EuiFlexItem grow={false}>
+      <EuiButton onClick={onReload} size="s">
+        <FormattedMessage
+          id="xpack.infra.logs.logEntryCategories.exampleEmptyReloadButtonLabel"
+          defaultMessage="Reload"
+        />
+      </EuiButton>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+);