converting tsvb - first step

src/core_plugins/metrics/public/kbn_vis_types/editor_controller.js

@@ -1,104 +1,30 @@
-import { uiModules } from 'ui/modules';
-import '../services/executor';
-import createNewPanel from '../lib/create_new_panel';
-import '../directives/vis_editor';
-import _ from 'lodash';
-import angular from 'angular';
-import { FilterBarQueryFilterProvider } from 'ui/filter_bar/query_filter';
+import React from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
 
-const app = uiModules.get('kibana/metrics_vis', ['kibana']);
-app.controller('MetricsEditorController', (
-  $location,
-  $element,
-  $scope,
-  Private,
-  timefilter,
-  metricsExecutor
-) => {
-
-  $scope.embedded = $location.search().embed === 'true';
-  const queryFilter = Private(FilterBarQueryFilterProvider);
-  const createFetch = Private(require('../lib/fetch'));
-  const fetch = () => {
-    const fn = createFetch($scope);
-    return fn().then((resp) => {
-      $element.trigger('renderComplete');
-      return resp;
-    });
-  };
-  const fetchFields = Private(require('../lib/fetch_fields'));
-
-  const debouncedFetch = _.debounce(() => {
-    fetch();
-  }, 1000, {
-    leading: false,
-    trailing: true
-  });
-
-  const debouncedFetchFields = _.debounce(fetchFields($scope), 1000, {
-    leading: false,
-    trailing: true
-  });
-
-  // If the model doesn't exist we need to either intialize it with a copy from
-  // the $scope.vis._editableVis.params or create a new panel all together.
-  if (!$scope.model) {
-    if ($scope.vis._editableVis.params.type) {
-      $scope.model = _.assign({}, $scope.vis._editableVis.params);
-    } else {
-      $scope.model = createNewPanel();
-      angular.copy($scope.model, $scope.vis._editableVis.params);
-    }
+class ReactEditorController {
+  constructor(el, vis) {
+    this.el = el;
+    this.vis = vis;
   }
 
-  $scope.$watchCollection('model', newValue => {
-    angular.copy(newValue, $scope.vis._editableVis.params);
-    $scope.stageEditableVis();
-    debouncedFetch();
-
-    const patternsToFetch = [];
-    // Fetch any missing index patterns
-    if (!$scope.fields[newValue.index_pattern]) {
-      patternsToFetch.push(newValue.index_pattern);
-    }
+  render(visData) {
+    this.visData = visData;
 
-    newValue.series.forEach(series => {
-      if (series.override_index_pattern &&
-        !$scope.fields[series.series_index_pattern]) {
-        patternsToFetch.push(series.series_index_pattern);
-      }
+    return new Promise((resolve) => {
+      const Component = this.vis.type.visConfig.component;
+      render(<Component vis={this.vis} visData={visData} renderComplete={resolve} />, this.el);
     });
+  }
 
-    if (newValue.annotations) {
-      newValue.annotations.forEach(item => {
-        if (item.index_pattern &&
-          !$scope.fields[item.index_pattern]) {
-          patternsToFetch.push(item.index_pattern);
-        }
-      });
-    }
-
-    if(patternsToFetch.length) {
-      debouncedFetchFields(_.unique(patternsToFetch));
+  resize() {
+    if (this.visData) {
+      this.render(this.vis, this.visData);
     }
-  });
-
-  $scope.visData = {};
-  $scope.fields = {};
-  // All those need to be consolidated
-  $scope.$listen(queryFilter, 'fetch', fetch);
-  $scope.$on('fetch', fetch);
-
-  fetchFields($scope)($scope.model.index_pattern);
-
-  // Register fetch
-  metricsExecutor.register({ execute: fetch });
-
-  // Start the executor
-  metricsExecutor.start();
-
-  // Destory the executor
-  $scope.$on('$destroy', metricsExecutor.destroy);
+  }
 
-});
+  destroy() {
+    unmountComponentAtNode(this.el);
+  }
+}
 
+export { ReactEditorController };

src/core_plugins/metrics/public/kbn_vis_types/index.js

@@ -1,35 +1,37 @@
-import './vis_controller';
-import './editor_controller';
 import '../visualizations/less/main.less';
 import 'react-select/dist/react-select.css';
 import '../less/main.less';
 import image from '../images/icon-visualbuilder.svg';
-import { AngularVisTypeProvider } from 'ui/vis/vis_types/angular_vis_type';
-
+import { ReactEditorController } from './editor_controller';
+import { MetricsRequestHandlerProvider } from './request_handler';
+import { VisFactoryProvider } from 'ui/vis/vis_factory';
 import { CATEGORY } from 'ui/vis/vis_category';
+
 // register the provider with the visTypes registry so that other know it exists
 import { VisTypesRegistryProvider } from 'ui/registry/vis_types';
 VisTypesRegistryProvider.register(MetricsVisProvider);
 
 export default function MetricsVisProvider(Private) {
-  const AngularVisType = Private(AngularVisTypeProvider);
+  const VisFactory = Private(VisFactoryProvider);
+  const metricsRequestHandler = Private(MetricsRequestHandlerProvider).handler;
 
-  // return the visType object, which kibana will use to display and configure new
-  // Vis object of this type.
-  return new AngularVisType({
+  return VisFactory.createVislibVisualization({
     name: 'metrics',
     title: 'Visual Builder',
-    image,
     description: 'Build time-series using a visual pipeline interface',
     category: CATEGORY.TIME,
+    image,
     isExperimental: true,
-    template: require('./vis.html'),
-    fullEditor: true,
-    params: {
-      editor: require('./editor.html')
+    visConfig: {
+      defaults: {
+
+      },
+      component: require('../components/visualization')
+    },
+    editor: ReactEditorController,
+    editorConfig: {
+      component: require('../components/vis_editor')
     },
-    requiresSearch: false,
-    requiresTimePicker: true,
-    implementsRenderComplete: true,
+    requestHandler: metricsRequestHandler
   });
 }

src/core_plugins/metrics/public/kbn_vis_types/request_handler.js

@@ -0,0 +1,43 @@
+import { validateInterval } from '../lib/validate_interval';
+
+const MetricsRequestHandlerProvider = function (Private, Notifier, config, timefilter, $http) {
+  const dashboardContext = Private(require('../../../timelion/public/services/dashboard_context'));
+  const notify = new Notifier({ location: 'Metrics' });
+
+  return {
+    name: 'metrics',
+    handler: function (vis /*, appState, uiState*/) {
+
+      return new Promise((resolve) => {
+        const panel = vis.params;
+        if (panel && panel.id) {
+          const params = {
+            timerange: timefilter.getBounds(),
+            filters: [dashboardContext()],
+            panels: [panel]
+          };
+
+          try {
+            const maxBuckets = config.get('metrics:max_buckets');
+            validateInterval(timefilter, panel, maxBuckets);
+            return $http.post('../api/metrics/vis/data', params)
+              .success(resp => {
+                resolve(resp);
+              })
+              .error(resp => {
+                resolve({});
+                const err = new Error(resp.message);
+                err.stack = resp.stack;
+                notify.error(err);
+              });
+          } catch (e) {
+            notify.error(e);
+            return resolve();
+          }
+        }
+      });
+    }
+  };
+};
+
+export { MetricsRequestHandlerProvider };