[ML] Adds an About panel to the file data visualizer landing page (#2…

…4260) * [ML] Adds an About panel to the file data visualizer landing page * [ML] Remove unnecessary style from file data visualizer scss
elastic · Oct 22, 2018 · 890608d · 890608d
1 parent 4b3ac1d
commit 890608d
Show file tree

Hide file tree

Showing 7 changed files with 144 additions and 2 deletions.
diff --git a/x-pack/plugins/ml/public/datavisualizer/selector/datavisualizer_selector.js b/x-pack/plugins/ml/public/datavisualizer/selector/datavisualizer_selector.js
@@ -57,7 +57,7 @@ export function DatavisualizerSelector() {
           <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.
+              a log file or an existing Elasticsearch index.
             </EuiText>
           </EuiFlexItem>
         </EuiFlexGroup>
@@ -69,7 +69,7 @@ export function DatavisualizerSelector() {
               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."
+              betaBadgeTooltipContent="Experimental feature. We'd love to hear your feedback."
               footer={
                 <EuiButton
                   target="_self"

diff --git a/x-pack/plugins/ml/public/file_datavisualizer/components/_index.scss b/x-pack/plugins/ml/public/file_datavisualizer/components/_index.scss
@@ -2,3 +2,4 @@
 @import 'results_view/index';
 @import 'summary/index';
 @import 'fields_stats/index';
+@import 'about_panel/index';
diff --git a/x-pack/plugins/ml/public/file_datavisualizer/components/about_panel/_about_panel.scss b/x-pack/plugins/ml/public/file_datavisualizer/components/about_panel/_about_panel.scss
@@ -0,0 +1,6 @@
+.file-datavisualizer-about-panel__icon {
+  width: $euiSizeXL * 3;
+  height: $euiSizeXL * 3;
+  margin-left: $euiSizeXL;
+  margin-right: $euiSizeL;
+}
diff --git a/x-pack/plugins/ml/public/file_datavisualizer/components/about_panel/_index.scss b/x-pack/plugins/ml/public/file_datavisualizer/components/about_panel/_index.scss
@@ -0,0 +1 @@
+@import 'about_panel'
diff --git a/x-pack/plugins/ml/public/file_datavisualizer/components/about_panel/about_panel.js b/x-pack/plugins/ml/public/file_datavisualizer/components/about_panel/about_panel.js
@@ -0,0 +1,118 @@
+/*
+ * 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 {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiLink,
+  EuiSpacer,
+  EuiPanel,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+
+export function AboutPanel() {
+
+  return (
+    <EuiPanel paddingSize="l">
+      <EuiFlexGroup gutterSize="xl" alignItems="center">
+        <EuiFlexItem grow={false}>
+          <EuiIcon size="xxl" type="addDataApp" className="file-datavisualizer-about-panel__icon" />
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiTitle size="m">
+            <h3>
+              Visualize data from a log file
+            </h3>
+          </EuiTitle>
+          <EuiSpacer size="s" />
+          <EuiText>
+            <p>
+              The Machine Learning Data Visualizer helps you understand the fields and metrics
+              in a log file as preparation for further analysis. After analyzing the data in the
+              file you can then choose to import the data into an elasticsearch index.
+            </p>
+          </EuiText>
+          <EuiSpacer size="s" />
+          <EuiText>
+            <p>
+              Select the file to visualize using the button at the top of the page,
+              and we will then attempt to analyze its structure.
+            </p>
+          </EuiText>
+          <EuiSpacer size="s" />
+          <EuiText>
+            <p>
+              The log file formats we currently support are:
+            </p>
+          </EuiText>
+          <EuiSpacer size="m" />
+          <EuiFlexGroup gutterSize="l">
+            <EuiFlexItem grow={false}>
+              <EuiIcon size="l" type="document" />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiText>
+                <p>
+                  JSON
+                </p>
+              </EuiText>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          <EuiSpacer size="s" />
+          <EuiFlexGroup gutterSize="l">
+            <EuiFlexItem grow={false}>
+              <EuiIcon size="l" type="document" />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiText>
+                <p>
+                  Delimited text files such as CSV and TSV
+                </p>
+              </EuiText>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          <EuiSpacer size="s" />
+          <EuiFlexGroup gutterSize="l">
+            <EuiFlexItem grow={false}>
+              <EuiIcon size="l" type="document" />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiText>
+                <p>
+                  Log files consisting of semi-structured text with the timestamp in each message having a common format
+                </p>
+              </EuiText>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          <EuiSpacer size="m" />
+          <EuiText>
+            <p>
+              Files up to 100MB in size can be uploaded.
+            </p>
+          </EuiText>
+          <EuiSpacer size="s" />
+          <EuiText>
+            <p>
+              This is an experimental feature. For any feedback please create an issue in&nbsp;
+              <EuiLink
+                href="https://github.com/elastic/kibana/issues/new"
+                target="_blank"
+              >
+                GitHub
+              </EuiLink>.
+            </p>
+          </EuiText>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+
+    </EuiPanel>
+  );
+}
diff --git a/x-pack/plugins/ml/public/file_datavisualizer/components/about_panel/index.js b/x-pack/plugins/ml/public/file_datavisualizer/components/about_panel/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.
+ */
+
+
+export { AboutPanel } from './about_panel';
diff --git a/...ublic/file_datavisualizer/components/file_datavisualizer_view/file_datavisualizer_view.js b/...ublic/file_datavisualizer/components/file_datavisualizer_view/file_datavisualizer_view.js
@@ -20,6 +20,7 @@ import {
 import { isEqual } from 'lodash';
 
 import { ml } from '../../../services/ml_api_service';
+import { AboutPanel } from '../about_panel';
 import { ResultsView } from '../results_view';
 import { FileCouldNotBeRead, FileTooLarge } from './file_error_callouts';
 import { EditFlyout } from '../edit_flyout';
@@ -218,6 +219,13 @@ export class FileDataVisualizerView extends Component {
 
             <EuiSpacer size="l" />
 
+            {(!loading && !loaded) &&
+              <React.Fragment>
+                <AboutPanel />
+                <EuiSpacer size="l" />
+              </React.Fragment>
+            }
+
             {(loading) &&
               <div style={{ textAlign: 'center' }} >
                 <EuiLoadingSpinner size="xl"/>