Merge branch '64755-expand-anomalies-page-to-add-categories' into 710…

…63-add-dataset-filtering-to-anomalies-page
elastic · Jul 13, 2020 · f159057 · f159057
2 parents 2524277 + 667f9c9
commit f159057
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 57 deletions.
diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/chart.tsx b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/chart.tsx
@@ -78,60 +78,56 @@ export const AnomaliesChart: React.FunctionComponent<{
     [setTimeRange]
   );
 
-  return (
-    <>
-      {!isLoading && !series.length ? (
-        <EuiEmptyPrompt
-          title={
-            <h2>
-              {i18n.translate('xpack.infra.logs.analysis.anomalySectionLogRateChartNoData', {
-                defaultMessage: 'There is no log rate data to display.',
+  return !isLoading && !series.length ? (
+    <EuiEmptyPrompt
+      title={
+        <h2>
+          {i18n.translate('xpack.infra.logs.analysis.anomalySectionLogRateChartNoData', {
+            defaultMessage: 'There is no log rate data to display.',
+          })}
+        </h2>
+      }
+      titleSize="m"
+    />
+  ) : (
+    <LoadingOverlayWrapper isLoading={isLoading}>
+      <div style={{ height: 160, width: '100%' }}>
+        {series.length ? (
+          <Chart className="log-entry-rate-chart">
+            <Axis
+              id="timestamp"
+              position="bottom"
+              showOverlappingTicks
+              tickFormat={chartDateFormatter}
+            />
+            <Axis
+              id="values"
+              position="left"
+              tickFormat={(value) => numeral(value.toPrecision(3)).format('0[.][00]a')} // https://github.com/adamwdraper/Numeral-js/issues/194
+            />
+            <BarSeries
+              id={logEntryRateSpecId}
+              name={i18n.translate('xpack.infra.logs.analysis.anomaliesSectionLineSeriesName', {
+                defaultMessage: 'Log entries per 15 minutes (avg)',
               })}
-            </h2>
-          }
-          titleSize="m"
-        />
-      ) : (
-        <LoadingOverlayWrapper isLoading={isLoading}>
-          <div style={{ height: 160, width: '100%' }}>
-            {series.length ? (
-              <Chart className="log-entry-rate-chart">
-                <Axis
-                  id="timestamp"
-                  position="bottom"
-                  showOverlappingTicks
-                  tickFormat={chartDateFormatter}
-                />
-                <Axis
-                  id="values"
-                  position="left"
-                  tickFormat={(value) => numeral(value.toPrecision(3)).format('0[.][00]a')} // https://github.com/adamwdraper/Numeral-js/issues/194
-                />
-                <BarSeries
-                  id={logEntryRateSpecId}
-                  name={i18n.translate('xpack.infra.logs.analysis.anomaliesSectionLineSeriesName', {
-                    defaultMessage: 'Log entries per 15 minutes (avg)',
-                  })}
-                  xScaleType="time"
-                  yScaleType="linear"
-                  xAccessor={'time'}
-                  yAccessors={['value']}
-                  data={series}
-                  barSeriesStyle={barSeriesStyle}
-                />
-                {renderAnnotations(annotations, chartId, renderAnnotationTooltip)}
-                <Settings
-                  onBrushEnd={handleBrushEnd}
-                  tooltip={tooltipProps}
-                  baseTheme={isDarkMode ? DARK_THEME : LIGHT_THEME}
-                  xDomain={{ min: timeRange.startTime, max: timeRange.endTime }}
-                />
-              </Chart>
-            ) : null}
-          </div>
-        </LoadingOverlayWrapper>
-      )}
-    </>
+              xScaleType="time"
+              yScaleType="linear"
+              xAccessor={'time'}
+              yAccessors={['value']}
+              data={series}
+              barSeriesStyle={barSeriesStyle}
+            />
+            {renderAnnotations(annotations, chartId, renderAnnotationTooltip)}
+            <Settings
+              onBrushEnd={handleBrushEnd}
+              tooltip={tooltipProps}
+              baseTheme={isDarkMode ? DARK_THEME : LIGHT_THEME}
+              xDomain={{ min: timeRange.startTime, max: timeRange.endTime }}
+            />
+          </Chart>
+        ) : null}
+      </div>
+    </LoadingOverlayWrapper>
   );
 };
 

diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/index.tsx b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/index.tsx
@@ -4,7 +4,14 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui';
+import {
+  EuiEmptyPrompt,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiTitle,
+  EuiLoadingSpinner,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { useMemo } from 'react';
 import { euiStyled } from '../../../../../../../observability/public';
@@ -95,7 +102,10 @@ export const AnomaliesResults: React.FunctionComponent<{
           logEntryRateResults.histogramBuckets &&
           !logEntryRateResults.histogramBuckets.length)) &&
       (!anomalies || anomalies.length === 0) ? (
-        <LoadingOverlayWrapper isLoading={isLoadingLogRateResults || isLoadingAnomaliesResults}>
+        <LoadingOverlayWrapper
+          isLoading={isLoadingLogRateResults || isLoadingAnomaliesResults}
+          loadingChildren={<LoadingOverlayContent />}
+        >
           <EuiEmptyPrompt
             title={
               <h2>
@@ -198,3 +208,10 @@ const renderAnnotationTooltip = (details?: string) => {
 const TooltipWrapper = euiStyled('div')`
   white-space: nowrap;
 `;
+
+const loadingAriaLabel = i18n.translate(
+  'xpack.infra.logs.analysis.anomaliesSectionLoadingAriaLabel',
+  { defaultMessage: 'Loading anomalies' }
+);
+
+const LoadingOverlayContent = () => <EuiLoadingSpinner size="xl" aria-label={loadingAriaLabel} />;
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -7472,7 +7472,6 @@
     "xpack.infra.logs.analysis.anomaliesSectionLineSeriesName": "15 分ごとのログエントリー (平均)",
     "xpack.infra.logs.analysis.anomaliesSectionLoadingAriaLabel": "異常を読み込み中",
     "xpack.infra.logs.analysis.anomaliesSectionTitle": "異常",
-    "xpack.infra.logs.analysis.anomalySectionNoAnomaliesTitle": "異常が検出されませんでした。",
     "xpack.infra.logs.analysis.anomalySectionNoDataBody": "時間範囲を調整する必要があるかもしれません。",
     "xpack.infra.logs.analysis.anomalySectionNoDataTitle": "表示するデータがありません。",
     "xpack.infra.logs.analysis.jobConfigurationOutdatedCalloutMessage": "異なるソース構成を使用して ML ジョブが作成されました。現在の構成を適用するにはジョブを再作成してください。これにより以前検出された異常が削除されます。",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -7477,7 +7477,6 @@
     "xpack.infra.logs.analysis.anomaliesSectionLineSeriesName": "每 15 分钟日志条目数（平均值）",
     "xpack.infra.logs.analysis.anomaliesSectionLoadingAriaLabel": "正在加载异常",
     "xpack.infra.logs.analysis.anomaliesSectionTitle": "异常",
-    "xpack.infra.logs.analysis.anomalySectionNoAnomaliesTitle": "未检测到任何异常。",
     "xpack.infra.logs.analysis.anomalySectionNoDataBody": "您可能想调整时间范围。",
     "xpack.infra.logs.analysis.anomalySectionNoDataTitle": "没有可显示的数据。",
     "xpack.infra.logs.analysis.jobConfigurationOutdatedCalloutMessage": "创建 ML 作业时所使用的源配置不同。重新创建作业以应用当前配置。这将移除以前检测到的异常。",