Type panel_config

src/plugins/vis_type_timeseries/public/application/components/panel_config.tsx

@@ -0,0 +1,78 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { Observable } from 'rxjs';
+
+import { IUiSettingsClient } from 'kibana/public';
+import { FormValidationContext } from '../contexts/form_validation_context';
+import { VisDataContext } from '../contexts/vis_data_context';
+import { panelConfigTypes } from './panel_config/index';
+import { TimeseriesVisParams } from '../../types';
+import { VisFields } from '../lib/fetch_fields';
+
+interface FormValidationResults {
+  [key: string]: boolean;
+}
+
+interface PanelConfigProps {
+  fields?: VisFields;
+  model: TimeseriesVisParams;
+  visData$: Observable<TimeseriesVisParams>;
+  getConfig: IUiSettingsClient['get'];
+  onChange: (partialModel: Partial<TimeseriesVisParams>) => void;
+}
+
+const checkModelValidity = (validationResults: FormValidationResults) =>
+  Object.values(validationResults).every((isValid) => isValid);
+
+export function PanelConfig(props: PanelConfigProps) {
+  const { model, onChange } = props;
+  const Component = panelConfigTypes[model.type];
+  const formValidationResults = useRef<FormValidationResults>({});
+  const [visData, setVisData] = useState(model);
+
+  useEffect(() => {
+    const visDataSubscription = props.visData$.subscribe(setVisData);
+
+    return function cleanup() {
+      visDataSubscription.unsubscribe();
+    };
+  }, [model.id, props.visData$]);
+
+  const updateControlValidity = useCallback(
+    (controlKey: string, isControlValid: boolean) => {
+      formValidationResults.current[controlKey] = isControlValid;
+      onChange({ isModelInvalid: !checkModelValidity(formValidationResults.current) });
+    },
+    [onChange]
+  );
+
+  if (Component) {
+    return (
+      <FormValidationContext.Provider value={updateControlValidity}>
+        <VisDataContext.Provider value={visData}>
+          <div data-test-subj={`tvbPanelConfig__${model.type}`}>
+            <Component {...props} />
+          </div>
+        </VisDataContext.Provider>
+      </FormValidationContext.Provider>
+    );
+  }
+
+  return (
+    <div>
+      <FormattedMessage
+        id="visTypeTimeseries.missingPanelConfigDescription"
+        defaultMessage="Missing panel config for &ldquo;{modelType}&rdquo;"
+        values={{ modelType: model.type }}
+      />
+    </div>
+  );
+}

src/plugins/vis_type_timeseries/public/application/components/panel_config/index.ts

@@ -0,0 +1,30 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+// these are not typed yet
+// @ts-expect-error
+import { TimeseriesPanelConfig as timeseries } from './panel_config/timeseries';
+// @ts-expect-error
+import { MetricPanelConfig as metric } from './panel_config/metric';
+// @ts-expect-error
+import { TopNPanelConfig as topN } from './panel_config/top_n';
+// @ts-expect-error
+import { TablePanelConfig as table } from './panel_config/table';
+// @ts-expect-error
+import { GaugePanelConfig as gauge } from './panel_config/gauge';
+// @ts-expect-error
+import { MarkdownPanelConfig as markdown } from './panel_config/markdown';
+
+export const panelConfigTypes = {
+  timeseries,
+  table,
+  metric,
+  top_n: topN,
+  gauge,
+  markdown,
+};

src/plugins/vis_type_timeseries/public/application/components/vis_editor.tsx

@@ -24,7 +24,6 @@ import { Storage } from '../../../../../plugins/kibana_utils/public';
 
 // @ts-expect-error
 import { VisEditorVisualization } from './vis_editor_visualization';
-// @ts-expect-error
 import { PanelConfig } from './panel_config';
 import { extractIndexPatterns } from '../../../common/extract_index_patterns';
 import { VisPicker } from './vis_picker';
@@ -55,8 +54,8 @@ interface TimeseriesEditorState {
 export class VisEditor extends Component<TimeseriesEditorProps, TimeseriesEditorState> {
   private abortControllerFetchFields?: AbortController;
   private localStorage: Storage;
-  private visDataSubject: Rx.BehaviorSubject<any>;
-  private visData$: Rx.Observable<any>;
+  private visDataSubject: Rx.BehaviorSubject<TimeseriesVisParams>;
+  private visData$: Rx.Observable<TimeseriesVisParams>;
 
   constructor(props: TimeseriesEditorProps) {
     super(props);