[ML] Explain Log Rate Spikes: Fix analysis table row pinning. (#141455)

- Fixes styling of hovered and pinned rows to use EUI provided variables. - The above was also done for the Log Pattern Analysis page to fix an issue with dark theme. - Fixes unpinning a row for field/value pairs. - Fixes pinning/unpinning for groups.
elastic · Sep 26, 2022 · 8937be2 · 8937be2
1 parent f576b1f
commit 8937be2
Show file tree

Hide file tree

Showing 11 changed files with 250 additions and 106 deletions.
diff --git a/...ps/public/components/document_count_content/document_count_chart/document_count_chart.tsx b/...ps/public/components/document_count_content/document_count_chart/document_count_chart.tsx
@@ -120,7 +120,7 @@ export const DocumentCountChart: FC<DocumentCountChartProps> = ({
   const overallSeriesNameWithSplit = i18n.translate(
     'xpack.aiops.dataGrid.field.documentCountChartSplit.seriesLabel',
     {
-      defaultMessage: 'other document count',
+      defaultMessage: 'Other document count',
     }
   );
 

diff --git a/...ublic/components/document_count_content/document_count_content/document_count_content.tsx b/...ublic/components/document_count_content/document_count_content/document_count_content.tsx
@@ -5,13 +5,12 @@
  * 2.0.
  */
 
-import React, { useEffect, useState, FC, useMemo } from 'react';
+import React, { useEffect, useState, FC } from 'react';
 
 import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
 import type { WindowParameters } from '@kbn/aiops-utils';
-import type { ChangePoint } from '@kbn/ml-agg-utils';
 
 import { DocumentCountChart, DocumentCountChartPoint } from '../document_count_chart';
 import { TotalCountHeader } from '../total_count_header';
@@ -27,19 +26,19 @@ const clearSelectionLabel = i18n.translate(
 export interface DocumentCountContentProps {
   brushSelectionUpdateHandler: (d: WindowParameters) => void;
   clearSelectionHandler: () => void;
-  changePoint?: ChangePoint;
   documentCountStats?: DocumentCountStats;
   documentCountStatsSplit?: DocumentCountStats;
+  documentCountStatsSplitLabel?: string;
   totalCount: number;
   windowParameters?: WindowParameters;
 }
 
 export const DocumentCountContent: FC<DocumentCountContentProps> = ({
   brushSelectionUpdateHandler,
   clearSelectionHandler,
-  changePoint,
   documentCountStats,
   documentCountStatsSplit,
+  documentCountStatsSplitLabel = '',
   totalCount,
   windowParameters,
 }) => {
@@ -52,10 +51,6 @@ export const DocumentCountContent: FC<DocumentCountContentProps> = ({
   const bucketTimestamps = Object.keys(documentCountStats?.buckets ?? {}).map((time) => +time);
   const timeRangeEarliest = Math.min(...bucketTimestamps);
   const timeRangeLatest = Math.max(...bucketTimestamps);
-  const chartPointsSplitLabel = useMemo(
-    () => `${changePoint?.fieldName}:${changePoint?.fieldValue}`,
-    [changePoint]
-  );
 
   if (
     documentCountStats === undefined ||
@@ -121,7 +116,7 @@ export const DocumentCountContent: FC<DocumentCountContentProps> = ({
           timeRangeEarliest={timeRangeEarliest}
           timeRangeLatest={timeRangeLatest}
           interval={documentCountStats.interval}
-          chartPointsSplitLabel={chartPointsSplitLabel}
+          chartPointsSplitLabel={documentCountStatsSplitLabel}
           isBrushCleared={isBrushCleared}
         />
       )}

diff --git a/...gins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes_analysis.tsx b/...gins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes_analysis.tsx
@@ -23,7 +23,6 @@ import { useFetchStream } from '@kbn/aiops-utils';
 import type { WindowParameters } from '@kbn/aiops-utils';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
-import type { ChangePoint } from '@kbn/ml-agg-utils';
 import type { Query } from '@kbn/es-query';
 
 import { useAiopsAppContext } from '../../hooks/use_aiops_app_context';
@@ -32,7 +31,7 @@ import type { ApiExplainLogRateSpikes } from '../../../common/api';
 
 import { SpikeAnalysisGroupsTable } from '../spike_analysis_table';
 import { SpikeAnalysisTable } from '../spike_analysis_table';
-import { GroupTableItem } from '../spike_analysis_table/spike_analysis_table_groups';
+import { useSpikeAnalysisTableRowContext } from '../spike_analysis_table/spike_analysis_table_row_provider';
 
 const groupResultsMessage = i18n.translate(
   'xpack.aiops.spikeAnalysisTable.groupedSwitchLabel.groupResults',
@@ -54,10 +53,6 @@ interface ExplainLogRateSpikesAnalysisProps {
   /** Window parameters for the analysis */
   windowParameters: WindowParameters;
   searchQuery: Query['query'];
-  onPinnedChangePoint?: (changePoint: ChangePoint | null) => void;
-  onSelectedChangePoint?: (changePoint: ChangePoint | null) => void;
-  selectedChangePoint?: ChangePoint;
-  onSelectedGroup?: (group: GroupTableItem | null) => void;
 }
 
 export const ExplainLogRateSpikesAnalysis: FC<ExplainLogRateSpikesAnalysisProps> = ({
@@ -66,21 +61,22 @@ export const ExplainLogRateSpikesAnalysis: FC<ExplainLogRateSpikesAnalysisProps>
   latest,
   windowParameters,
   searchQuery,
-  onPinnedChangePoint,
-  onSelectedChangePoint,
-  selectedChangePoint,
-  onSelectedGroup,
 }) => {
   const { http } = useAiopsAppContext();
   const basePath = http.basePath.get() ?? '';
 
+  const { clearAllRowState } = useSpikeAnalysisTableRowContext();
+
   const [currentAnalysisWindowParameters, setCurrentAnalysisWindowParameters] = useState<
     WindowParameters | undefined
   >();
   const [groupResults, setGroupResults] = useState<boolean>(false);
 
   const onSwitchToggle = (e: { target: { checked: React.SetStateAction<boolean> } }) => {
     setGroupResults(e.target.checked);
+
+    // When toggling the group switch, clear all row selections
+    clearAllRowState();
   };
 
   const {
@@ -109,15 +105,9 @@ export const ExplainLogRateSpikesAnalysis: FC<ExplainLogRateSpikesAnalysisProps>
   // Start handler clears possibly hovered or pinned
   // change points on analysis refresh.
   function startHandler() {
-    // Reset grouping to false when restarting the analysis.
+    // Reset grouping to false and clear all row selections when restarting the analysis.
     setGroupResults(false);
-
-    if (onPinnedChangePoint) {
-      onPinnedChangePoint(null);
-    }
-    if (onSelectedChangePoint) {
-      onSelectedChangePoint(null);
-    }
+    clearAllRowState();
 
     setCurrentAnalysisWindowParameters(windowParameters);
     start();
@@ -249,20 +239,13 @@ export const ExplainLogRateSpikesAnalysis: FC<ExplainLogRateSpikesAnalysisProps>
           changePoints={data.changePoints}
           groupTableItems={groupTableItems}
           loading={isRunning}
-          onPinnedChangePoint={onPinnedChangePoint}
-          onSelectedChangePoint={onSelectedChangePoint}
-          selectedChangePoint={selectedChangePoint}
-          onSelectedGroup={onSelectedGroup}
           dataViewId={dataView.id}
         />
       ) : null}
       {showSpikeAnalysisTable && (!groupResults || !foundGroups) ? (
         <SpikeAnalysisTable
           changePoints={data.changePoints}
           loading={isRunning}
-          onPinnedChangePoint={onPinnedChangePoint}
-          onSelectedChangePoint={onSelectedChangePoint}
-          selectedChangePoint={selectedChangePoint}
           dataViewId={dataView.id}
         />
       ) : null}

diff --git a/...ins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes_app_state.tsx b/...ins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes_app_state.tsx
@@ -36,6 +36,8 @@ import {
 import type { AiopsAppDependencies } from '../../hooks/use_aiops_app_context';
 import { AiopsAppContext } from '../../hooks/use_aiops_app_context';
 
+import { SpikeAnalysisTableRowStateProvider } from '../spike_analysis_table/spike_analysis_table_row_provider';
+
 import { ExplainLogRateSpikesPage } from './explain_log_rate_spikes_page';
 
 export interface ExplainLogRateSpikesAppStateProps {
@@ -164,7 +166,9 @@ export const ExplainLogRateSpikesAppState: FC<ExplainLogRateSpikesAppStateProps>
   return (
     <AiopsAppContext.Provider value={appDependencies}>
       <UrlStateContextProvider value={{ searchString: urlSearchString, setUrlState }}>
-        <ExplainLogRateSpikesPage dataView={dataView} savedSearch={savedSearch} />
+        <SpikeAnalysisTableRowStateProvider>
+          <ExplainLogRateSpikesPage dataView={dataView} savedSearch={savedSearch} />
+        </SpikeAnalysisTableRowStateProvider>
       </UrlStateContextProvider>
     </AiopsAppContext.Provider>
   );

diff --git a/.../plugins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes_page.tsx b/.../plugins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes_page.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useCallback, useEffect, useMemo, useState, FC } from 'react';
+import React, { useCallback, useEffect, useState, FC } from 'react';
 import {
   EuiEmptyPrompt,
   EuiFlexGroup,
@@ -19,6 +19,7 @@ import {
   EuiTitle,
 } from '@elastic/eui';
 
+import { i18n } from '@kbn/i18n';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import type { WindowParameters } from '@kbn/aiops-utils';
 import type { ChangePoint } from '@kbn/ml-agg-utils';
@@ -38,10 +39,21 @@ import { SearchPanel } from '../search_panel';
 import { restorableDefaults } from './explain_log_rate_spikes_app_state';
 import { ExplainLogRateSpikesAnalysis } from './explain_log_rate_spikes_analysis';
 import type { GroupTableItem } from '../spike_analysis_table/spike_analysis_table_groups';
+import { useSpikeAnalysisTableRowContext } from '../spike_analysis_table/spike_analysis_table_row_provider';
 
 // TODO port to `@emotion/react` once `useEuiBreakpoint` is available https://github.com/elastic/eui/pull/6057
 import './explain_log_rate_spikes_page.scss';
 
+function getDocumentCountStatsSplitLabel(changePoint?: ChangePoint, group?: GroupTableItem) {
+  if (changePoint) {
+    return `${changePoint?.fieldName}:${changePoint?.fieldValue}`;
+  } else if (group) {
+    return i18n.translate('xpack.aiops.spikeAnalysisPage.documentCountStatsSplitGroupLabel', {
+      defaultMessage: 'Selected group',
+    });
+  }
+}
+
 /**
  * ExplainLogRateSpikes props require a data view.
  */
@@ -58,6 +70,15 @@ export const ExplainLogRateSpikesPage: FC<ExplainLogRateSpikesPageProps> = ({
 }) => {
   const { data: dataService } = useAiopsAppContext();
 
+  const {
+    currentSelectedChangePoint,
+    currentSelectedGroup,
+    setPinnedChangePoint,
+    setPinnedGroup,
+    setSelectedChangePoint,
+    setSelectedGroup,
+  } = useSpikeAnalysisTableRowContext();
+
   const [aiopsListState, setAiopsListState] = usePageUrlState(AppStateKey, restorableDefaults);
   const [globalState, setGlobalState] = useUrlState('_g');
 
@@ -93,19 +114,6 @@ export const ExplainLogRateSpikesPage: FC<ExplainLogRateSpikesPageProps> = ({
     [currentSavedSearch, aiopsListState, setAiopsListState]
   );
 
-  const [pinnedChangePoint, setPinnedChangePoint] = useState<ChangePoint | null>(null);
-  const [selectedChangePoint, setSelectedChangePoint] = useState<ChangePoint | null>(null);
-  const [selectedGroup, setSelectedGroup] = useState<GroupTableItem | null>(null);
-
-  // If a row is pinned, still overrule with a potentially hovered row.
-  const currentSelectedChangePoint = useMemo(() => {
-    if (selectedChangePoint) {
-      return selectedChangePoint;
-    } else if (pinnedChangePoint) {
-      return pinnedChangePoint;
-    }
-  }, [pinnedChangePoint, selectedChangePoint]);
-
   const {
     documentStats,
     timefilter,
@@ -119,8 +127,7 @@ export const ExplainLogRateSpikesPage: FC<ExplainLogRateSpikesPageProps> = ({
     aiopsListState,
     setGlobalState,
     currentSelectedChangePoint,
-    undefined,
-    selectedGroup
+    currentSelectedGroup
   );
 
   const { totalCount, documentCountStats, documentCountStatsCompare } = documentStats;
@@ -170,6 +177,7 @@ export const ExplainLogRateSpikesPage: FC<ExplainLogRateSpikesPageProps> = ({
   function clearSelection() {
     setWindowParameters(undefined);
     setPinnedChangePoint(null);
+    setPinnedGroup(null);
     setSelectedChangePoint(null);
     setSelectedGroup(null);
   }
@@ -230,12 +238,15 @@ export const ExplainLogRateSpikesPage: FC<ExplainLogRateSpikesPageProps> = ({
                   clearSelectionHandler={clearSelection}
                   documentCountStats={documentCountStats}
                   documentCountStatsSplit={
-                    currentSelectedChangePoint || selectedGroup
+                    currentSelectedChangePoint || currentSelectedGroup
                       ? documentCountStatsCompare
                       : undefined
                   }
+                  documentCountStatsSplitLabel={getDocumentCountStatsSplitLabel(
+                    currentSelectedChangePoint,
+                    currentSelectedGroup
+                  )}
                   totalCount={totalCount}
-                  changePoint={currentSelectedChangePoint}
                   windowParameters={windowParameters}
                 />
               </EuiPanel>
@@ -250,10 +261,6 @@ export const ExplainLogRateSpikesPage: FC<ExplainLogRateSpikesPageProps> = ({
                   latest={latest}
                   windowParameters={windowParameters}
                   searchQuery={searchQuery}
-                  onPinnedChangePoint={setPinnedChangePoint}
-                  onSelectedChangePoint={setSelectedChangePoint}
-                  selectedChangePoint={currentSelectedChangePoint}
-                  onSelectedGroup={setSelectedGroup}
                 />
               )}
               {windowParameters === undefined && (

diff --git a/x-pack/plugins/aiops/public/components/log_categorization/category_table/category_table.tsx b/x-pack/plugins/aiops/public/components/log_categorization/category_table/category_table.tsx
@@ -10,6 +10,7 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import type { TimefilterContract } from '@kbn/data-plugin/public';
 import {
+  useEuiBackgroundColor,
   EuiButton,
   EuiSpacer,
   EuiFlexGroup,
@@ -62,6 +63,7 @@ export const CategoryTable: FC<Props> = ({
   setSelectedCategory,
 }) => {
   const euiTheme = useEuiTheme();
+  const primaryBackgroundColor = useEuiBackgroundColor('primary');
   const { openInDiscoverWithFilter } = useDiscoverLinks();
   const [selectedCategories, setSelectedCategories] = useState<Category[]>([]);
   const { onTableChange, pagination, sorting } = useTableState<Category>(categories ?? [], 'key');
@@ -193,22 +195,18 @@ export const CategoryTable: FC<Props> = ({
       pinnedCategory.key === category.key
     ) {
       return {
-        backgroundColor: 'rgb(227,240,249,0.37)',
+        backgroundColor: primaryBackgroundColor,
       };
     }
 
-    if (
-      selectedCategory &&
-      selectedCategory.key === category.key &&
-      selectedCategory.key === category.key
-    ) {
+    if (selectedCategory && selectedCategory.key === category.key) {
       return {
         backgroundColor: euiTheme.euiColorLightestShade,
       };
     }
 
     return {
-      backgroundColor: 'white',
+      backgroundColor: euiTheme.euiColorEmptyShade,
     };
   };
 

diff --git a/x-pack/plugins/aiops/public/components/log_categorization/log_categorization_page.tsx b/x-pack/plugins/aiops/public/components/log_categorization/log_categorization_page.tsx
@@ -116,6 +116,7 @@ export const LogCategorizationPage: FC<LogCategorizationPageProps> = ({
     aiopsListState,
     setGlobalState,
     undefined,
+    undefined,
     BAR_TARGET
   );