[Logs UI] Reorganise log rate anomaly table (#69516)

* Remove top level chart Remove top level anomalies chart * Refactor table columns to accomodate new formatting * Tyical vs actual stats in expanded row * Format message based on actual vs typical * Start fleshing out log rate examples endpoint and lib methods * Use the real document ID for expanded rows so React doesn't re-render content * Add all data fetching resources for log entry rate examples * Move log entry example and severity indicator components to a shared location * Render examples for log rate * Add severity indicator * Styling tweaks * Move horizontal button popover menu to a shared components so log rate table can use it * Revert "Move horizontal button popover menu to a shared components so log rate table can use it" This reverts commit f80db59. * Add "view in stream" and "view in anomaly explorer" links * Hook links into the new context menu component * Add log column headers and add styling tweaks etc * Fix translations * Tweak comments * Chart tweaks * Update x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/expanded_row.tsx Co-authored-by: Felix Stürmer <weltenwort@users.noreply.github.com> * PR amendments - Pass href to context menu items - Fix start and end times used for example logs - Use "fewer" rather than "less" * Update x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/table.tsx Co-authored-by: Felix Stürmer <weltenwort@users.noreply.github.com> * Update x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/log_entry_example.tsx Co-authored-by: Felix Stürmer <weltenwort@users.noreply.github.com> * Update x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/log_entry_example.tsx Co-authored-by: Felix Stürmer <weltenwort@users.noreply.github.com> * Update x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/table.tsx Co-authored-by: Felix Stürmer <weltenwort@users.noreply.github.com> * Update x-pack/plugins/infra/server/routes/log_analysis/results/log_entry_rate_examples.ts Co-authored-by: Felix Stürmer <weltenwort@users.noreply.github.com> * Update x-pack/plugins/infra/server/routes/log_analysis/results/log_entry_rate_examples.ts Co-authored-by: Felix Stürmer <weltenwort@users.noreply.github.com> * Update x-pack/plugins/infra/server/routes/log_analysis/results/log_entry_rate_examples.ts Co-authored-by: Felix Stürmer <weltenwort@users.noreply.github.com> * Update x-pack/plugins/infra/server/routes/log_analysis/results/log_entry_rate_examples.ts Co-authored-by: Felix Stürmer <weltenwort@users.noreply.github.com> * PR amendments - Fix typechecking - Add an empty log example column header to account for the context menu - Add anomaly start time to rows Co-authored-by: Felix Stürmer <weltenwort@users.noreply.github.com>
elastic · Jul 3, 2020 · 7ec48fd · 7ec48fd
1 parent 97ca7bf
commit 7ec48fd
Show file tree

Hide file tree

Showing 28 changed files with 1,177 additions and 257 deletions.
diff --git a/x-pack/plugins/infra/common/http_api/log_analysis/results/index.ts b/x-pack/plugins/infra/common/http_api/log_analysis/results/index.ts
@@ -8,3 +8,4 @@ export * from './log_entry_categories';
 export * from './log_entry_category_datasets';
 export * from './log_entry_category_examples';
 export * from './log_entry_rate';
+export * from './log_entry_rate_examples';
diff --git a/x-pack/plugins/infra/common/http_api/log_analysis/results/log_entry_rate.ts b/x-pack/plugins/infra/common/http_api/log_analysis/results/log_entry_rate.ts
@@ -30,13 +30,16 @@ export type GetLogEntryRateRequestPayload = rt.TypeOf<typeof getLogEntryRateRequ
  */
 
 export const logEntryRateAnomalyRT = rt.type({
+  id: rt.string,
   actualLogEntryRate: rt.number,
   anomalyScore: rt.number,
   duration: rt.number,
   startTime: rt.number,
   typicalLogEntryRate: rt.number,
 });
 
+export type LogEntryRateAnomaly = rt.TypeOf<typeof logEntryRateAnomalyRT>;
+
 export const logEntryRatePartitionRT = rt.type({
   analysisBucketCount: rt.number,
   anomalies: rt.array(logEntryRateAnomalyRT),

diff --git a/x-pack/plugins/infra/common/http_api/log_analysis/results/log_entry_rate_examples.ts b/x-pack/plugins/infra/common/http_api/log_analysis/results/log_entry_rate_examples.ts
@@ -0,0 +1,77 @@
+/*
+ * 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 * as rt from 'io-ts';
+
+import {
+  badRequestErrorRT,
+  forbiddenErrorRT,
+  timeRangeRT,
+  routeTimingMetadataRT,
+} from '../../shared';
+
+export const LOG_ANALYSIS_GET_LOG_ENTRY_RATE_EXAMPLES_PATH =
+  '/api/infra/log_analysis/results/log_entry_rate_examples';
+
+/**
+ * request
+ */
+
+export const getLogEntryRateExamplesRequestPayloadRT = rt.type({
+  data: rt.type({
+    // the dataset to fetch the log rate examples from
+    dataset: rt.string,
+    // the number of examples to fetch
+    exampleCount: rt.number,
+    // the id of the source configuration
+    sourceId: rt.string,
+    // the time range to fetch the log rate examples from
+    timeRange: timeRangeRT,
+  }),
+});
+
+export type GetLogEntryRateExamplesRequestPayload = rt.TypeOf<
+  typeof getLogEntryRateExamplesRequestPayloadRT
+>;
+
+/**
+ * response
+ */
+
+const logEntryRateExampleRT = rt.type({
+  id: rt.string,
+  dataset: rt.string,
+  message: rt.string,
+  timestamp: rt.number,
+  tiebreaker: rt.number,
+});
+
+export type LogEntryRateExample = rt.TypeOf<typeof logEntryRateExampleRT>;
+
+export const getLogEntryRateExamplesSuccessReponsePayloadRT = rt.intersection([
+  rt.type({
+    data: rt.type({
+      examples: rt.array(logEntryRateExampleRT),
+    }),
+  }),
+  rt.partial({
+    timing: routeTimingMetadataRT,
+  }),
+]);
+
+export type GetLogEntryRateExamplesSuccessReponsePayload = rt.TypeOf<
+  typeof getLogEntryRateExamplesSuccessReponsePayloadRT
+>;
+
+export const getLogEntryRateExamplesResponsePayloadRT = rt.union([
+  getLogEntryRateExamplesSuccessReponsePayloadRT,
+  badRequestErrorRT,
+  forbiddenErrorRT,
+]);
+
+export type GetLogEntryRateExamplesResponsePayload = rt.TypeOf<
+  typeof getLogEntryRateExamplesResponsePayloadRT
+>;
diff --git a/...categories/anomaly_severity_indicator.tsx → ...is_results/anomaly_severity_indicator.tsx b/...categories/anomaly_severity_indicator.tsx → ...is_results/anomaly_severity_indicator.tsx
@@ -10,7 +10,7 @@ import {
   formatAnomalyScore,
   getSeverityCategoryForScore,
   ML_SEVERITY_COLORS,
-} from '../../../../../../common/log_analysis';
+} from '../../../../common/log_analysis';
 
 export const AnomalySeverityIndicator: React.FunctionComponent<{
   anomalyScore: number;

diff --git a/x-pack/plugins/infra/public/components/logging/log_entry_examples/log_entry_examples.tsx b/x-pack/plugins/infra/public/components/logging/log_entry_examples/log_entry_examples.tsx
@@ -0,0 +1,49 @@
+/*
+ * 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 React from 'react';
+
+import { euiStyled } from '../../../../../observability/public';
+import { LogEntryExampleMessagesEmptyIndicator } from './log_entry_examples_empty_indicator';
+import { LogEntryExampleMessagesFailureIndicator } from './log_entry_examples_failure_indicator';
+import { LogEntryExampleMessagesLoadingIndicator } from './log_entry_examples_loading_indicator';
+
+interface Props {
+  isLoading: boolean;
+  hasFailedLoading: boolean;
+  hasResults: boolean;
+  exampleCount: number;
+  onReload: () => void;
+}
+export const LogEntryExampleMessages: React.FunctionComponent<Props> = ({
+  isLoading,
+  hasFailedLoading,
+  exampleCount,
+  hasResults,
+  onReload,
+  children,
+}) => {
+  return (
+    <Wrapper>
+      {isLoading ? (
+        <LogEntryExampleMessagesLoadingIndicator exampleCount={exampleCount} />
+      ) : hasFailedLoading ? (
+        <LogEntryExampleMessagesFailureIndicator onRetry={onReload} />
+      ) : !hasResults ? (
+        <LogEntryExampleMessagesEmptyIndicator onReload={onReload} />
+      ) : (
+        children
+      )}
+    </Wrapper>
+  );
+};
+
+const Wrapper = euiStyled.div`
+  align-items: stretch;
+  flex-direction: column;
+  flex: 1 0 0%;
+  overflow: hidden;
+`;
diff --git a/...gory_example_messages_empty_indicator.tsx → ...es/log_entry_examples_empty_indicator.tsx b/...gory_example_messages_empty_indicator.tsx → ...es/log_entry_examples_empty_indicator.tsx
@@ -7,20 +7,20 @@ import { EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import React from 'react';
 
-export const CategoryExampleMessagesEmptyIndicator: React.FunctionComponent<{
+export const LogEntryExampleMessagesEmptyIndicator: React.FunctionComponent<{
   onReload: () => void;
 }> = ({ onReload }) => (
   <EuiFlexGroup alignItems="center" justifyContent="center">
     <EuiFlexItem grow={false} className="eui-textNoWrap">
       <FormattedMessage
-        id="xpack.infra.logs.logEntryCategories.exampleEmptyDescription"
+        id="xpack.infra.logs.logEntryExamples.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"
+          id="xpack.infra.logs.logEntryExamples.exampleEmptyReloadButtonLabel"
           defaultMessage="Reload"
         />
       </EuiButton>

diff --git a/...ry_example_messages_failure_indicator.tsx → .../log_entry_examples_failure_indicator.tsx b/...ry_example_messages_failure_indicator.tsx → .../log_entry_examples_failure_indicator.tsx
@@ -7,22 +7,22 @@ import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiTextColor } from '@elastic/eui
 import { FormattedMessage } from '@kbn/i18n/react';
 import React from 'react';
 
-export const CategoryExampleMessagesFailureIndicator: React.FunctionComponent<{
+export const LogEntryExampleMessagesFailureIndicator: React.FunctionComponent<{
   onRetry: () => void;
 }> = ({ onRetry }) => (
   <EuiFlexGroup alignItems="center" justifyContent="center">
     <EuiFlexItem grow={false} className="eui-textNoWrap">
       <EuiTextColor color="danger">
         <FormattedMessage
-          id="xpack.infra.logs.logEntryCategories.exampleLoadingFailureDescription"
-          defaultMessage="Failed to load category examples."
+          id="xpack.infra.logs.logEntryExamples.exampleLoadingFailureDescription"
+          defaultMessage="Failed to load examples."
         />
       </EuiTextColor>
     </EuiFlexItem>
     <EuiFlexItem grow={false}>
       <EuiButton onClick={onRetry} size="s">
         <FormattedMessage
-          id="xpack.infra.logs.logEntryCategories.exampleLoadingFailureRetryButtonLabel"
+          id="xpack.infra.logs.logEntryExamples.exampleLoadingFailureRetryButtonLabel"
           defaultMessage="Retry"
         />
       </EuiButton>

diff --git a/...ry_example_messages_loading_indicator.tsx → .../log_entry_examples_loading_indicator.tsx b/...ry_example_messages_loading_indicator.tsx → .../log_entry_examples_loading_indicator.tsx
@@ -7,7 +7,7 @@
 import { EuiLoadingContent } from '@elastic/eui';
 import React from 'react';
 
-export const CategoryExampleMessagesLoadingIndicator: React.FunctionComponent<{
+export const LogEntryExampleMessagesLoadingIndicator: React.FunctionComponent<{
   exampleCount: number;
 }> = ({ exampleCount }) => (
   <>

diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/column_headers.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/column_headers.tsx
@@ -68,7 +68,7 @@ export const LogColumnHeaders: React.FunctionComponent<{
   );
 };
 
-const LogColumnHeader: React.FunctionComponent<{
+export const LogColumnHeader: React.FunctionComponent<{
   columnWidth: LogEntryColumnWidth;
   'data-test-subj'?: string;
 }> = ({ children, columnWidth, 'data-test-subj': dataTestSubj }) => (
@@ -77,7 +77,7 @@ const LogColumnHeader: React.FunctionComponent<{
   </LogColumnHeaderWrapper>
 );
 
-const LogColumnHeadersWrapper = euiStyled.div.attrs((props) => ({
+export const LogColumnHeadersWrapper = euiStyled.div.attrs((props) => ({
   role: props.role ?? 'row',
 }))`
   align-items: stretch;

diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/index.ts b/x-pack/plugins/infra/public/components/logging/log_text_stream/index.ts
@@ -4,9 +4,15 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { LogEntryColumn, LogEntryColumnWidths, useColumnWidths } from './log_entry_column';
+export {
+  LogEntryColumn,
+  LogEntryColumnWidths,
+  useColumnWidths,
+  iconColumnId,
+} from './log_entry_column';
 export { LogEntryFieldColumn } from './log_entry_field_column';
 export { LogEntryMessageColumn } from './log_entry_message_column';
 export { LogEntryRowWrapper } from './log_entry_row';
 export { LogEntryTimestampColumn } from './log_entry_timestamp_column';
 export { ScrollableLogTextStreamView } from './scrollable_log_text_stream_view';
+export { LogEntryContextMenu } from './log_entry_context_menu';
diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_context_menu.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_context_menu.tsx
@@ -13,7 +13,8 @@ import { LogEntryColumnContent } from './log_entry_column';
 
 interface LogEntryContextMenuItem {
   label: string;
-  onClick: () => void;
+  onClick: (e: React.MouseEvent) => void;
+  href?: string;
 }
 
 interface LogEntryContextMenuProps {
@@ -40,9 +41,9 @@ export const LogEntryContextMenu: React.FC<LogEntryContextMenuProps> = ({
 }) => {
   const closeMenuAndCall = useMemo(() => {
     return (callback: LogEntryContextMenuItem['onClick']) => {
-      return () => {
+      return (e: React.MouseEvent) => {
         onClose();
-        callback();
+        callback(e);
       };
     };
   }, [onClose]);
@@ -60,7 +61,7 @@ export const LogEntryContextMenu: React.FC<LogEntryContextMenuProps> = ({
 
   const wrappedItems = useMemo(() => {
     return items.map((item, i) => (
-      <EuiContextMenuItem key={i} onClick={closeMenuAndCall(item.onClick)}>
+      <EuiContextMenuItem key={i} onClick={closeMenuAndCall(item.onClick)} href={item.href}>
         {item.label}
       </EuiContextMenuItem>
     ));

diff --git a/...ges/logs/log_entry_categories/sections/top_categories/anomaly_severity_indicator_list.tsx b/...ges/logs/log_entry_categories/sections/top_categories/anomaly_severity_indicator_list.tsx
@@ -8,7 +8,7 @@ import React from 'react';
 
 import { LogEntryCategoryDataset } from '../../../../../../common/http_api/log_analysis';
 import { getFriendlyNameForPartitionId } from '../../../../../../common/log_analysis';
-import { AnomalySeverityIndicator } from './anomaly_severity_indicator';
+import { AnomalySeverityIndicator } from '../../../../../components/logging/log_analysis_results/anomaly_severity_indicator';
 
 export const AnomalySeverityIndicatorList: React.FunctionComponent<{
   datasets: LogEntryCategoryDataset[];

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
@@ -5,14 +5,10 @@
  */
 
 import React, { useEffect } from 'react';
-
-import { euiStyled } from '../../../../../../../observability/public';
-import { TimeRange } from '../../../../../../common/http_api/shared';
 import { useLogEntryCategoryExamples } from '../../use_log_entry_category_examples';
+import { LogEntryExampleMessages } from '../../../../../components/logging/log_entry_examples/log_entry_examples';
+import { TimeRange } from '../../../../../../common/http_api/shared';
 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';
 
 const exampleCount = 5;
 
@@ -39,30 +35,21 @@ export const CategoryDetailsRow: React.FunctionComponent<{
   }, [getLogEntryCategoryExamples]);
 
   return (
-    <CategoryExampleMessages>
-      {isLoadingLogEntryCategoryExamples ? (
-        <CategoryExampleMessagesLoadingIndicator exampleCount={exampleCount} />
-      ) : hasFailedLoadingLogEntryCategoryExamples ? (
-        <CategoryExampleMessagesFailureIndicator onRetry={getLogEntryCategoryExamples} />
-      ) : logEntryCategoryExamples.length === 0 ? (
-        <CategoryExampleMessagesEmptyIndicator onReload={getLogEntryCategoryExamples} />
-      ) : (
-        logEntryCategoryExamples.map((categoryExample, categoryExampleIndex) => (
-          <CategoryExampleMessage
-            dataset={categoryExample.dataset}
-            key={categoryExampleIndex}
-            message={categoryExample.message}
-            timestamp={categoryExample.timestamp}
-          />
-        ))
-      )}
-    </CategoryExampleMessages>
+    <LogEntryExampleMessages
+      isLoading={isLoadingLogEntryCategoryExamples}
+      hasFailedLoading={hasFailedLoadingLogEntryCategoryExamples}
+      hasResults={logEntryCategoryExamples.length > 0}
+      exampleCount={exampleCount}
+      onReload={getLogEntryCategoryExamples}
+    >
+      {logEntryCategoryExamples.map((example, exampleIndex) => (
+        <CategoryExampleMessage
+          key={exampleIndex}
+          dataset={example.dataset}
+          message={example.message}
+          timestamp={example.timestamp}
+        />
+      ))}
+    </LogEntryExampleMessages>
   );
 };
-
-const CategoryExampleMessages = euiStyled.div`
-  align-items: stretch;
-  flex-direction: column;
-  flex: 1 0 0%;
-  overflow: hidden;
-`;