Ensure chart values are set

Author: Kerry350

x-pack/platform/plugins/shared/dataset_quality/public/rule_types/degraded_docs/rule_form/rule_condition_chart.tsx

@@ -22,10 +22,6 @@ import {
   asPercent,
 } from './chart_preview/chart_preview_helper';
 
-interface ChartOptions {
-  interval?: string;
-}
-
 export interface RuleConditionChartProps {
   threshold: number[];
   comparator: COMPARATORS;
@@ -34,7 +30,6 @@ export interface RuleConditionChartProps {
   dataView?: DataView;
   groupBy?: string | string[];
   timeRange: TimeRange;
-  chartOptions?: ChartOptions;
 }
 
 export function RuleConditionChart({
@@ -45,30 +40,30 @@ export function RuleConditionChart({
   dataView,
   groupBy,
   timeRange,
-  chartOptions: { interval } = {},
 }: RuleConditionChartProps) {
   const {
     services: { http, uiSettings },
   } = useKibanaContextForPlugin();
+  const chartInterval = timeSize && timeUnit ? `${timeSize}${timeUnit}` : undefined;
 
   const { loading, value, error } = useAbortableAsync(
     async ({ signal }) => {
-      if (dataView && timeRange.from && timeRange.to) {
+      if (dataView && timeRange.from && timeRange.to && chartInterval) {
         return http.get<PreviewChartResponse>(
           '/internal/dataset_quality/rule_types/degraded_docs/chart_preview',
           {
             query: {
               index: dataView?.getIndexPattern(),
               start: timeRange?.from,
               end: timeRange?.to,
-              interval: interval || `${timeSize}${timeUnit}`,
+              interval: chartInterval,
               groupBy: rison.encodeArray(Array.isArray(groupBy) ? groupBy : [groupBy]),
             },
           }
         );
       }
     },
-    [http, dataView, groupBy, interval, timeRange?.from, timeRange?.to, timeSize, timeUnit]
+    [http, dataView, groupBy, chartInterval, timeRange?.from, timeRange?.to]
   );
 
   return (

x-pack/platform/plugins/shared/dataset_quality/public/rule_types/degraded_docs/rule_form/rule_form.tsx

@@ -192,6 +192,10 @@ export const RuleForm: React.FunctionComponent<
   };
 
   const selectedOptions = [...getPreSelectedOptions(), ...getUserSelectedOptions(groupBy)];
+  const normalizedThreshold = threshold ?? defaultRuleParams.threshold!;
+  const normalizedComparator = (comparator ?? defaultRuleParams.comparator) as COMPARATORS;
+  const normalizedTimeSize = timeSize || defaultRuleParams.timeSize!;
+  const normalizedTimeUnit = (timeUnit ?? defaultRuleParams.timeUnit) as TimeUnitChar;
 
   return (
     <>
@@ -247,8 +251,8 @@ export const RuleForm: React.FunctionComponent<
       />
 
       <ThresholdExpression
-        thresholdComparator={comparator ?? defaultRuleParams.comparator}
-        threshold={threshold}
+        thresholdComparator={normalizedComparator}
+        threshold={normalizedThreshold}
         onChangeSelectedThresholdComparator={(value) => updateProperty('comparator', value)}
         onChangeSelectedThreshold={(value) => updateProperty('threshold', value)}
         errors={errors}
@@ -257,20 +261,20 @@ export const RuleForm: React.FunctionComponent<
       />
 
       <RuleConditionChart
-        threshold={threshold}
-        comparator={comparator as COMPARATORS}
-        timeSize={timeSize}
-        timeUnit={timeUnit as TimeUnitChar}
+        threshold={normalizedThreshold}
+        comparator={normalizedComparator}
+        timeSize={normalizedTimeSize}
+        timeUnit={normalizedTimeUnit}
         dataView={dataView}
         groupBy={groupBy}
-        timeRange={{ from: `now-${(timeSize ?? 1) * 20}${timeUnit}`, to: 'now' }}
+        timeRange={{ from: `now-${normalizedTimeSize * 20}${normalizedTimeUnit}`, to: 'now' }}
       />
 
       <EuiSpacer size="l" />
 
       <ForLastExpression
-        timeWindowSize={timeSize}
-        timeWindowUnit={timeUnit}
+        timeWindowSize={normalizedTimeSize}
+        timeWindowUnit={normalizedTimeUnit}
         errors={{
           timeSize: [],
           timeUnit: [],