[ML] Explain Log Rate Spikes: fix chart showing as empty when filter …

…matches field/value pair in hovered row (#142693) * fix chart showing as empty when filter matches field/value pair in hovered row * use both overall and split buckets to get timerange * always pass along split stats as they are up to date Co-authored-by: Kibana Machine <[email protected]>
elastic · Oct 18, 2022 · 253ed9c · 253ed9c
1 parent 8cb51bd
commit 253ed9c
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 24 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
@@ -127,9 +127,17 @@ export const DocumentCountChart: FC<DocumentCountChartProps> = ({
   // TODO Let user choose between ZOOM and BRUSH mode.
   const [viewMode] = useState<VIEW_MODE>(VIEW_MODE.BRUSH);
 
+  const hasNoData = useMemo(
+    () =>
+      (chartPoints === undefined || chartPoints.length < 1) &&
+      (chartPointsSplit === undefined ||
+        (Array.isArray(chartPointsSplit) && chartPointsSplit.length < 1)),
+    [chartPoints, chartPointsSplit]
+  );
+
   const adjustedChartPoints = useMemo(() => {
-    // Display empty chart when no data in range
-    if (chartPoints.length < 1) return [{ time: timeRangeEarliest, value: 0 }];
+    // Display empty chart when no data in range and no split data to show
+    if (hasNoData) return [{ time: timeRangeEarliest, value: 0 }];
 
     // If chart has only one bucket
     // it won't show up correctly unless we add an extra data point
@@ -145,12 +153,11 @@ export const DocumentCountChart: FC<DocumentCountChartProps> = ({
 
   const adjustedChartPointsSplit = useMemo(() => {
     // Display empty chart when no data in range
-    if (!Array.isArray(chartPointsSplit) || chartPointsSplit.length < 1)
-      return [{ time: timeRangeEarliest, value: 0 }];
+    if (hasNoData) return [{ time: timeRangeEarliest, value: 0 }];
 
     // If chart has only one bucket
     // it won't show up correctly unless we add an extra data point
-    if (chartPointsSplit.length === 1) {
+    if (Array.isArray(chartPointsSplit) && chartPointsSplit.length === 1) {
       return [
         ...chartPointsSplit,
         {
@@ -349,18 +356,20 @@ export const DocumentCountChart: FC<DocumentCountChartProps> = ({
             timeAxisLayerCount={useLegacyTimeAxis ? 0 : 2}
             style={useLegacyTimeAxis ? {} : MULTILAYER_TIME_AXIS_STYLE}
           />
-          <HistogramBarSeries
-            id={SPEC_ID}
-            name={chartPointsSplit ? overallSeriesNameWithSplit : overallSeriesName}
-            xScaleType={ScaleType.Time}
-            yScaleType={ScaleType.Linear}
-            xAccessor="time"
-            yAccessors={['value']}
-            data={adjustedChartPoints}
-            timeZone={timeZone}
-            yNice
-          />
-          {chartPointsSplit && (
+          {adjustedChartPoints?.length && (
+            <HistogramBarSeries
+              id={SPEC_ID}
+              name={chartPointsSplit ? overallSeriesNameWithSplit : overallSeriesName}
+              xScaleType={ScaleType.Time}
+              yScaleType={ScaleType.Linear}
+              xAccessor="time"
+              yAccessors={['value']}
+              data={adjustedChartPoints}
+              timeZone={timeZone}
+              yNice
+            />
+          )}
+          {adjustedChartPointsSplit?.length && (
             <HistogramBarSeries
               id={`${SPEC_ID}_split`}
               name={chartPointsSplitLabel}

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
@@ -49,8 +49,11 @@ export const DocumentCountContent: FC<DocumentCountContentProps> = ({
   }, [windowParameters]);
 
   const bucketTimestamps = Object.keys(documentCountStats?.buckets ?? {}).map((time) => +time);
-  const timeRangeEarliest = Math.min(...bucketTimestamps);
-  const timeRangeLatest = Math.max(...bucketTimestamps);
+  const splitBucketTimestamps = Object.keys(documentCountStatsSplit?.buckets ?? {}).map(
+    (time) => +time
+  );
+  const timeRangeEarliest = Math.min(...[...bucketTimestamps, ...splitBucketTimestamps]);
+  const timeRangeLatest = Math.max(...[...bucketTimestamps, ...splitBucketTimestamps]);
 
   if (
     documentCountStats === undefined ||

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
@@ -237,11 +237,7 @@ export const ExplainLogRateSpikesPage: FC<ExplainLogRateSpikesPageProps> = ({
                   brushSelectionUpdateHandler={setWindowParameters}
                   clearSelectionHandler={clearSelection}
                   documentCountStats={documentCountStats}
-                  documentCountStatsSplit={
-                    currentSelectedChangePoint || currentSelectedGroup
-                      ? documentCountStatsCompare
-                      : undefined
-                  }
+                  documentCountStatsSplit={documentCountStatsCompare}
                   documentCountStatsSplitLabel={getDocumentCountStatsSplitLabel(
                     currentSelectedChangePoint,
                     currentSelectedGroup