[Stack monitoring] No-data page

x-pack/plugins/monitoring/public/application/index.tsx

@@ -19,6 +19,7 @@ import { ExternalConfigContext, ExternalConfig } from './external_config_context
 import { createPreserveQueryHistory } from './preserve_query_history';
 import { RouteInit } from './route_init';
 import { MonitoringTimeContainer } from './pages/use_monitoring_time';
+import { NoDataPage } from './pages/no_data_page';
 
 export const renderApp = (
   core: CoreStart,
@@ -50,7 +51,7 @@ const MonitoringApp: React.FC<{
           <MonitoringTimeContainer.Provider>
             <Router history={history}>
               <Switch>
-                <Route path="/no-data" component={NoData} />
+                <Route path="/no-data" component={NoDataPage} />
                 <Route path="/loading" component={LoadingPage} />
                 <RouteInit
                   path="/license"
@@ -85,10 +86,6 @@ const MonitoringApp: React.FC<{
   );
 };
 
-const NoData: React.FC<{}> = () => {
-  return <div>No data page</div>;
-};
-
 const Home: React.FC<{}> = () => {
   return <div>Home page (Cluster listing)</div>;
 };

x-pack/plugins/monitoring/public/application/pages/no_data_page.tsx

@@ -0,0 +1,180 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useCallback, useContext, useState } from 'react';
+import { Redirect } from 'react-router-dom';
+
+import { i18n } from '@kbn/i18n';
+// @ts-ignore
+import { NoData } from '../../components/no_data';
+import { PageTemplate } from './page_template';
+import { useKibana } from '../../../../../../src/plugins/kibana_react/public';
+import { CODE_PATH_LICENSE, STANDALONE_CLUSTER_CLUSTER_UUID } from '../../../common/constants';
+import { Legacy } from '../../legacy_shims';
+import { GlobalStateContext } from '../global_state_context';
+
+const CODE_PATHS = [CODE_PATH_LICENSE];
+
+export const NoDataPage = () => {
+  const title = i18n.translate('xpack.monitoring.noData.routeTitle', {
+    defaultMessage: 'Setup Monitoring',
+  });
+
+  const { services } = useKibana<{ data: any }>();
+
+  const state = useContext(GlobalStateContext);
+  const clusterUuid = state.cluster_uuid;
+  const ccs = state.ccs;
+
+  const [shouldRedirect, setShouldRedirect] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+
+  // TODO work on porting these checkers over
+  // const checkers = [new ClusterSettingsChecker($http), new NodeSettingsChecker($http)];
+  // await startChecks(checkers, updateModel);
+
+  const model = {
+    errors: [], // errors can happen from trying to check or set ES settings
+    checkMessage: null, // message to show while waiting for api response
+    isLoading: isLoading, // flag for in-progress state of checking for no data reason
+    isCollectionEnabledUpdating: false, // flags to indicate whether to show a spinner while waiting for ajax
+    isCollectionEnabledUpdated: false,
+    isCollectionIntervalUpdating: false,
+    isCollectionIntervalUpdated: false,
+  };
+
+  const getPageData = useCallback(async () => {
+    setIsLoading(true);
+    const bounds = services.data?.query.timefilter.timefilter.getBounds();
+    const min = bounds.min.toISOString();
+    const max = bounds.max.toISOString();
+
+    const url = '../api/monitoring/v1/clusters';
+
+    try {
+      const response = await services.http?.fetch(url, {
+        method: 'POST',
+        body: JSON.stringify({
+          css: undefined,
+          timeRange: {
+            min,
+            max,
+          },
+          codePaths: CODE_PATHS,
+        }),
+      });
+
+      const clusters = formatClusters(response);
+      setIsLoading(false);
+      console.log('did a refresh from nodatapage');
+
+      if (clusters && clusters.length) {
+        setShouldRedirect(true);
+      }
+    } catch (err) {
+      // TODO something useful with the error reason
+      // if (err && err.status === 503) {
+      //   catchReason = {
+      //     property: 'custom',
+      //     message: err.data.message,
+      //   };
+      // }
+      console.log(err);
+    }
+  }, [ccs, clusterUuid, services.data?.query.timefilter.timefilter, services.http, setIsLoading]);
+
+  const { updateModel } = new ModelUpdater(model);
+  const enabler = new Enabler(updateModel);
+
+  return (
+    <PageTemplate title={title} getPageData={getPageData}>
+      {shouldRedirect ? (
+        <Redirect to="/home" />
+      ) : (
+        <NoData {...model} enabler={enabler} isCloudEnabled={Legacy.shims.isCloud} />
+      )}
+    </PageTemplate>
+  );
+};
+
+function formatClusters(clusters: any) {
+  return clusters.map(formatCluster);
+}
+
+function formatCluster(cluster: any) {
+  if (cluster.cluster_uuid === STANDALONE_CLUSTER_CLUSTER_UUID) {
+    cluster.cluster_name = 'Standalone Cluster';
+  }
+  return cluster;
+}
+
+// From x-pack/plugins/monitoring/public/lib/elasticsearch_settings/enabler.js
+class Enabler {
+  updateModel: any;
+
+  constructor(updateModel: (properties: any) => void) {
+    this.updateModel = updateModel;
+  }
+
+  async enableCollectionInterval() {
+    try {
+      this.updateModel({ isCollectionIntervalUpdating: true });
+      // TODO actually set it
+      // await this.$http.put('../api/monitoring/v1/elasticsearch_settings/set/collection_interval');
+      this.updateModel({
+        isCollectionIntervalUpdated: true,
+        isCollectionIntervalUpdating: false,
+      });
+    } catch (err) {
+      this.updateModel({
+        errors: err.data,
+        isCollectionIntervalUpdated: false,
+        isCollectionIntervalUpdating: false,
+      });
+    }
+  }
+
+  async enableCollectionEnabled() {
+    try {
+      this.updateModel({ isCollectionEnabledUpdating: true });
+      // TODO actually set it
+      // await this.$http.put('../api/monitoring/v1/elasticsearch_settings/set/collection_enabled');
+      this.updateModel({
+        isCollectionEnabledUpdated: true,
+        isCollectionEnabledUpdating: false,
+      });
+    } catch (err) {
+      this.updateModel({
+        errors: err.data,
+        isCollectionEnabledUpdated: false,
+        isCollectionEnabledUpdating: false,
+      });
+    }
+  }
+}
+
+// From x-pack/plugins/monitoring/public/views/no_data/model_updater.js
+class ModelUpdater {
+  model: any;
+
+  constructor(model: any) {
+    this.model = model;
+    this.updateModel = this.updateModel.bind(this);
+  }
+
+  updateModel(properties: any) {
+    const model = this.model;
+    const keys = Object.keys(properties);
+    keys.forEach((key) => {
+      if (Array.isArray(model[key])) {
+        model[key].push(properties[key]);
+      } else {
+        model[key] = properties[key];
+      }
+    });
+  }
+}