[ML] Adds new page for choosing file or index based data visualizer

x-pack/plugins/ml/public/datavisualizer/_index.scss

@@ -0,0 +1 @@
+@import './selector/index';

x-pack/plugins/ml/public/datavisualizer/index.js

@@ -7,6 +7,7 @@
 
 
 import './styles/main.less';
+import './selector';
 import './datavisualizer_controller';
 import 'plugins/ml/components/data_recognizer';
 import 'plugins/ml/components/field_data_card';

x-pack/plugins/ml/public/datavisualizer/selector/_index.scss

@@ -0,0 +1 @@
+@import 'selector';

x-pack/plugins/ml/public/datavisualizer/selector/_selector.scss

@@ -0,0 +1,5 @@
+.ml-datavisualizer-selector {
+  flex-grow: 1;
+  background-color: $euiColorLightestShade;
+  min-height: 100vh;
+}

x-pack/plugins/ml/public/datavisualizer/selector/datavisualizer_selector.js

@@ -0,0 +1,125 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+
+import {
+  EuiButton,
+  EuiCard,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiLink,
+  EuiPage,
+  EuiPageBody,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+
+
+function startTrialDescription() {
+  return (
+    <span>
+      To experience what the full Machine Learning features of a {' '}
+      <EuiLink
+        href="https://www.elastic.co/subscriptions"
+        target="_blank"
+      >
+        Platinum subscription
+      </EuiLink>{' '}
+      have to offer, start a 30-day trial from the license management page.
+    </span>
+  );
+}
+
+
+export function DatavisualizerSelector() {
+
+  // TODO - add correct logic for determining whether to show the link to the
+  // license management page allowing the user to start a trial of the Platinum feature set.
+  const shouldShowStartTrialLink = true;
+
+  return (
+    <EuiPage>
+      <EuiPageBody restrictWidth={1000}>
+        <EuiFlexGroup gutterSize="xl">
+          <EuiFlexItem grow={false}>
+            <EuiTitle size="l">
+              <h2>Data Visualizer</h2>
+            </EuiTitle>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiSpacer size="xl" />
+        <EuiFlexGroup gutterSize="xl">
+          <EuiFlexItem grow={false}>
+            <EuiText color="subdued">
+              The Machine Learning Data Visualizer tool helps you understand your data, by analyzing the metrics and fields in
+              an existing Elasticsearch index or in a log file.
+            </EuiText>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiSpacer size="xl" />
+        <EuiFlexGroup justifyContent="spaceAround" gutterSize="xl">
+          <EuiFlexItem>
+            <EuiCard
+              icon={<EuiIcon size="xxl" type="addDataApp" />}
+              title="Import data"
+              description="Visualize data from a log file. Supported for files up to 100MB in size."
+              betaBadgeLabel="Experimental"
+              betaBadgeTooltipContent="Experimental feature. Please help us by reporting any bugs."
+              footer={
+                <EuiButton
+                  target="_self"
+                  href="#/filedatavisualizer"
+                >
+                  Select file
+                </EuiButton>
+              }
+            />
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiCard
+              icon={<EuiIcon size="xxl" type="dataVisualizer" />}
+              title="Pick index pattern"
+              description="Visualize data in an existing Elasticsearch index."
+              footer={
+                <EuiButton
+                  target="_self"
+                  href="#datavisualizer_index_select"
+                >
+                  Select index
+                </EuiButton>
+              }
+            />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        {shouldShowStartTrialLink === true &&
+          <React.Fragment>
+            <EuiSpacer size="xxl" />
+            <EuiSpacer size="xxl" />
+            <EuiFlexGroup justifyContent="spaceAround" gutterSize="xl">
+              <EuiFlexItem grow={false} style={{ width: '600px' }}>
+                <EuiCard
+                  title="Start trial"
+                  description={startTrialDescription()}
+                  footer={
+                    <EuiButton
+                      target="_blank"
+                      href="kibana#/management/elasticsearch/license_management/home"
+                    >
+                      Start trial
+                    </EuiButton>
+                  }
+                />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </React.Fragment>
+        }
+      </EuiPageBody>
+    </EuiPage>
+  );
+}

x-pack/plugins/ml/public/datavisualizer/selector/directive.js

@@ -0,0 +1,38 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import 'ngreact';
+
+import { uiModules } from 'ui/modules';
+const module = uiModules.get('apps/ml', ['react']);
+
+// TODO - add in correct license and privilege checks.
+//import { checkBasicLicense } from 'plugins/ml/license/check_license';
+//import { checkFindFileStructurePrivilege } from 'plugins/ml/privilege/check_privilege';
+import { initPromise } from 'plugins/ml/util/promise';
+
+import uiRoutes from 'ui/routes';
+
+const template = `<ml-nav-menu name="datavisualizer" /><datavisualizer-selector class="ml-datavisualizer-selector"/>`;
+
+uiRoutes
+  .when('/datavisualizer', {
+    template,
+    resolve: {
+      //CheckLicense: checkBasicLicense,
+      //privileges: checkFindFileStructurePrivilege,
+      initPromise: initPromise(false)
+    }
+  });
+
+
+import { DatavisualizerSelector } from './datavisualizer_selector';
+
+module.directive('datavisualizerSelector', function ($injector) {
+  const reactDirective = $injector.get('reactDirective');
+
+  return reactDirective(DatavisualizerSelector, undefined, { restrict: 'E' }, { });
+});

x-pack/plugins/ml/public/datavisualizer/selector/index.js

@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+
+import './directive';

x-pack/plugins/ml/public/index.scss

@@ -1 +1,9 @@
+// Should import both the EUI constants and any Kibana ones that are considered global
+@import 'ui/public/styles/styling_constants';
+
+// ML needs EUI card styling till it fully adopts React components
+@import '@elastic/eui/src/components/panel/variables';
+@import '@elastic/eui/src/components/panel/mixins';
+
+@import 'datavisualizer/index';
 @import 'file_datavisualizer/index';