Web console: support new ingest spec format

web-console/src/components/array-input/array-input.tsx

@@ -23,7 +23,7 @@ import { compact } from '../../utils';
 
 export interface ArrayInputProps {
   className?: string;
-  values: string[];
+  values: string[] | undefined;
   onChange: (newValues: string[] | undefined) => void;
   placeholder?: string;
   large?: boolean;
@@ -40,8 +40,11 @@ export const ArrayInput = React.memo(function ArrayInput(props: ArrayInputProps)
     const stringValue = e.target.value;
     const newValues: string[] = stringValue.split(/[,\s]+/).map((v: string) => v.trim());
     const newValuesFiltered = compact(newValues);
-    if (newValues.length === newValuesFiltered.length) {
-      onChange(stringValue === '' ? undefined : newValuesFiltered);
+    if (stringValue === '') {
+      onChange(undefined);
+      setStringValue(undefined);
+    } else if (newValues.length === newValuesFiltered.length) {
+      onChange(newValuesFiltered);
       setStringValue(undefined);
     } else {
       setStringValue(stringValue);
@@ -51,7 +54,7 @@ export const ArrayInput = React.memo(function ArrayInput(props: ArrayInputProps)
   return (
     <TextArea
       className={className}
-      value={stringValue || props.values.join(', ')}
+      value={stringValue || (props.values || []).join(', ')}
       onChange={handleChange}
       placeholder={placeholder}
       large={large}

web-console/src/components/auto-form/auto-form.tsx

@@ -25,11 +25,13 @@ import { FormGroupWithInfo } from '../form-group-with-info/form-group-with-info'
 import { IntervalInput } from '../interval-input/interval-input';
 import { JsonInput } from '../json-input/json-input';
 import { PopoverText } from '../popover-text/popover-text';
-import { SuggestibleInput, SuggestionGroup } from '../suggestible-input/suggestible-input';
+import { SuggestibleInput, Suggestion } from '../suggestible-input/suggestible-input';
 
 import './auto-form.scss';
 
-export interface Field<T> {
+export type Functor<M, R> = R | ((model: M) => R);
+
+export interface Field<M> {
   name: string;
   label?: string;
   info?: React.ReactNode;
@@ -43,12 +45,14 @@ export interface Field<T> {
     | 'json'
     | 'interval';
   defaultValue?: any;
-  suggestions?: (string | SuggestionGroup)[];
+  suggestions?: Functor<M, Suggestion[]>;
   placeholder?: string;
   min?: number;
-  disabled?: boolean | ((model: T) => boolean);
-  defined?: boolean | ((model: T) => boolean);
-  required?: boolean | ((model: T) => boolean);
+  zeroMeansUndefined?: boolean;
+  disabled?: Functor<M, boolean>;
+  defined?: Functor<M, boolean>;
+  required?: Functor<M, boolean>;
+  adjustment?: (model: M) => M;
 }
 
 export interface AutoFormProps<T> {
@@ -73,21 +77,16 @@ export class AutoForm<T extends Record<string, any>> extends React.PureComponent
     return newLabel;
   }
 
-  static evaluateFunctor<T>(
-    functor: undefined | boolean | ((model: T) => boolean),
-    model: T | undefined,
-    defaultValue = false,
-  ): boolean {
+  static evaluateFunctor<M, R>(
+    functor: undefined | Functor<M, R>,
+    model: M | undefined,
+    defaultValue: R,
+  ): R {
     if (!model || functor == null) return defaultValue;
-    switch (typeof functor) {
-      case 'boolean':
-        return functor;
-
-      case 'function':
-        return functor(model);
-
-      default:
-        throw new TypeError(`invalid functor`);
+    if (typeof functor === 'function') {
+      return (functor as any)(model);
+    } else {
+      return functor;
     }
   }
 
@@ -109,27 +108,42 @@ export class AutoForm<T extends Record<string, any>> extends React.PureComponent
   };
 
   private modelChange = (newModel: T) => {
-    const { fields, onChange } = this.props;
+    const { fields, onChange, model } = this.props;
 
+    // Delete things that are not defined now (but were defined prior to the change)
     for (const someField of fields) {
-      if (!AutoForm.evaluateFunctor(someField.defined, newModel, true)) {
+      if (
+        !AutoForm.evaluateFunctor(someField.defined, newModel, true) &&
+        AutoForm.evaluateFunctor(someField.defined, model, true)
+      ) {
         newModel = deepDelete(newModel, someField.name);
       }
     }
 
+    // Perform any adjustments if needed
+    for (const someField of fields) {
+      if (someField.adjustment) {
+        newModel = someField.adjustment(newModel);
+      }
+    }
+
     onChange(newModel);
   };
 
   private renderNumberInput(field: Field<T>): JSX.Element {
     const { model, large, onFinalize } = this.props;
 
-    const modelValue = deepGet(model as any, field.name) || field.defaultValue;
+    let modelValue = deepGet(model as any, field.name);
+    if (typeof modelValue !== 'number') modelValue = field.defaultValue;
     return (
       <NumericInput
         value={modelValue}
         onValueChange={(valueAsNumber: number, valueAsString: string) => {
           if (valueAsString === '' || isNaN(valueAsNumber)) return;
-          this.fieldChange(field, valueAsNumber);
+          this.fieldChange(
+            field,
+            valueAsNumber === 0 && field.zeroMeansUndefined ? undefined : valueAsNumber,
+          );
         }}
         onBlur={e => {
           if (e.target.value === '') {
@@ -140,10 +154,10 @@ export class AutoForm<T extends Record<string, any>> extends React.PureComponent
         min={field.min || 0}
         fill
         large={large}
-        disabled={AutoForm.evaluateFunctor(field.disabled, model)}
+        disabled={AutoForm.evaluateFunctor(field.disabled, model, false)}
         placeholder={field.placeholder}
         intent={
-          AutoForm.evaluateFunctor(field.required, model) && modelValue == null
+          AutoForm.evaluateFunctor(field.required, model, false) && modelValue == null
             ? AutoForm.REQUIRED_INTENT
             : undefined
         }
@@ -169,7 +183,7 @@ export class AutoForm<T extends Record<string, any>> extends React.PureComponent
         majorStepSize={1000000}
         fill
         large={large}
-        disabled={AutoForm.evaluateFunctor(field.disabled, model)}
+        disabled={AutoForm.evaluateFunctor(field.disabled, model, false)}
       />
     );
   }
@@ -190,11 +204,11 @@ export class AutoForm<T extends Record<string, any>> extends React.PureComponent
         }}
         onFinalize={onFinalize}
         placeholder={field.placeholder}
-        suggestions={field.suggestions}
+        suggestions={AutoForm.evaluateFunctor(field.suggestions, model, undefined)}
         large={large}
-        disabled={AutoForm.evaluateFunctor(field.disabled, model)}
+        disabled={AutoForm.evaluateFunctor(field.disabled, model, false)}
         intent={
-          AutoForm.evaluateFunctor(field.required, model) && modelValue == null
+          AutoForm.evaluateFunctor(field.required, model, false) && modelValue == null
             ? AutoForm.REQUIRED_INTENT
             : undefined
         }
@@ -206,9 +220,9 @@ export class AutoForm<T extends Record<string, any>> extends React.PureComponent
     const { model, large, onFinalize } = this.props;
     const modelValue = deepGet(model as any, field.name);
     const shownValue = modelValue == null ? field.defaultValue : modelValue;
-    const disabled = AutoForm.evaluateFunctor(field.disabled, model);
+    const disabled = AutoForm.evaluateFunctor(field.disabled, model, false);
     const intent =
-      AutoForm.evaluateFunctor(field.required, model) && modelValue == null
+      AutoForm.evaluateFunctor(field.required, model, false) && modelValue == null
         ? AutoForm.REQUIRED_INTENT
         : undefined;
 
@@ -263,9 +277,9 @@ export class AutoForm<T extends Record<string, any>> extends React.PureComponent
         }}
         placeholder={field.placeholder}
         large={large}
-        disabled={AutoForm.evaluateFunctor(field.disabled, model)}
+        disabled={AutoForm.evaluateFunctor(field.disabled, model, false)}
         intent={
-          AutoForm.evaluateFunctor(field.required, model) && modelValue == null
+          AutoForm.evaluateFunctor(field.required, model, false) && modelValue == null
             ? AutoForm.REQUIRED_INTENT
             : undefined
         }

web-console/src/components/rule-editor/__snapshots__/rule-editor.spec.tsx.snap

@@ -90,59 +90,54 @@ exports[`rule editor matches snapshot 1`] = `
               >
                 <select>
                   <option
-                    value="load"
+                    value="loadForever"
                   >
-                    Load
+                    loadForever
                   </option>
                   <option
-                    value="drop"
+                    value="loadByInterval"
                   >
-                    Drop
+                    loadByInterval
                   </option>
                   <option
-                    value="broadcast"
+                    value="loadByPeriod"
                   >
-                    Broadcast
+                    loadByPeriod
                   </option>
-                </select>
-                <span
-                  class="bp3-icon bp3-icon-double-caret-vertical"
-                  icon="double-caret-vertical"
-                >
-                  <svg
-                    data-icon="double-caret-vertical"
-                    height="16"
-                    viewBox="0 0 16 16"
-                    width="16"
+                  <option
+                    value="dropForever"
                   >
-                    <desc>
-                      double-caret-vertical
-                    </desc>
-                    <path
-                      d="M5 7h6a1.003 1.003 0 00.71-1.71l-3-3C8.53 2.11 8.28 2 8 2s-.53.11-.71.29l-3 3A1.003 1.003 0 005 7zm6 2H5a1.003 1.003 0 00-.71 1.71l3 3c.18.18.43.29.71.29s.53-.11.71-.29l3-3A1.003 1.003 0 0011 9z"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </span>
-              </div>
-              <div
-                class="bp3-html-select"
-              >
-                <select>
+                    dropForever
+                  </option>
+                  <option
+                    value="dropByInterval"
+                  >
+                    dropByInterval
+                  </option>
+                  <option
+                    value="dropByPeriod"
+                  >
+                    dropByPeriod
+                  </option>
+                  <option
+                    value="dropBeforeByPeriod"
+                  >
+                    dropBeforeByPeriod
+                  </option>
                   <option
-                    value="Forever"
+                    value="broadcastForever"
                   >
-                    forever
+                    broadcastForever
                   </option>
                   <option
-                    value="ByPeriod"
+                    value="broadcastByInterval"
                   >
-                    by period
+                    broadcastByInterval
                   </option>
                   <option
-                    value="ByInterval"
+                    value="broadcastByPeriod"
                   >
-                    by interval
+                    broadcastByPeriod
                   </option>
                 </select>
                 <span

web-console/src/components/rule-editor/rule-editor.scss

@@ -31,10 +31,7 @@
     }
   }
 
-  .by-period {
-    display: flex;
-    .bp3-input-group {
-      padding-right: 15px;
-    }
+  .include-future {
+    margin-left: 15px;
   }
 }