[ML] File datavisualizer initial commit

x-pack/plugins/ml/index.js

@@ -24,6 +24,7 @@ import { filtersRoutes } from './server/routes/filters';
 import { resultsServiceRoutes } from './server/routes/results_service';
 import { jobServiceRoutes } from './server/routes/job_service';
 import { jobAuditMessagesRoutes } from './server/routes/job_audit_messages';
+import { fileDataVisualizerRoutes } from './server/routes/file_data_visualizer';
 
 export const ml = (kibana) => {
   return new kibana.Plugin({
@@ -38,9 +39,10 @@ export const ml = (kibana) => {
         description: 'Machine Learning for the Elastic Stack',
         icon: 'plugins/ml/ml.svg',
         main: 'plugins/ml/app',
+        styleSheetPath: `${__dirname}/public/index.scss`,
       },
       hacks: ['plugins/ml/hacks/toggle_app_link_in_nav'],
-      home: ['plugins/ml/register_feature']
+      home: ['plugins/ml/register_feature'],
     },
 
 
@@ -72,7 +74,8 @@ export const ml = (kibana) => {
         const config = server.config();
         return {
           kbnIndex: config.get('kibana.index'),
-          esServerUrl: config.get('elasticsearch.url')
+          esServerUrl: config.get('elasticsearch.url'),
+          maxPayloadBytes: config.get('server.maxPayloadBytes'),
         };
       });
 
@@ -90,6 +93,7 @@ export const ml = (kibana) => {
       resultsServiceRoutes(server, commonRouteConfig);
       jobServiceRoutes(server, commonRouteConfig);
       jobAuditMessagesRoutes(server, commonRouteConfig);
+      fileDataVisualizerRoutes(server, commonRouteConfig);
     }
 
   });

x-pack/plugins/ml/public/app.js

@@ -32,6 +32,7 @@ import 'plugins/ml/components/confirm_modal';
 import 'plugins/ml/components/nav_menu';
 import 'plugins/ml/components/loading_indicator';
 import 'plugins/ml/settings';
+import 'plugins/ml/file_datavisualizer';
 
 import uiRoutes from 'ui/routes';
 

x-pack/plugins/ml/public/file_datavisualizer/_file_datavisualizer.scss

@@ -0,0 +1,5 @@
+@import 'components/index';
+
+.file-datavisualizer-container {
+  padding: 20px;
+}

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

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

x-pack/plugins/ml/public/file_datavisualizer/components/_index.scss

@@ -0,0 +1,4 @@
+@import 'file_datavisualizer_view/index';
+@import 'results_view/index';
+@import 'summary/index';
+@import 'fields_stats/index';

x-pack/plugins/ml/public/file_datavisualizer/components/fields_stats/_field_stats_card.scss

@@ -0,0 +1,13 @@
+.card-container {
+  display: inline-grid;
+  padding: 0px 10px 10px 0px;
+}
+
+.ml-field-data-card {
+  height: 408px;
+
+  .card-contents {
+    height: 378px;
+    line-height: 21px;
+  }
+}

x-pack/plugins/ml/public/file_datavisualizer/components/fields_stats/_fields_stats.scss

@@ -0,0 +1,8 @@
+.fields-stats {
+  padding: 10px;
+}
+.field {
+  margin-bottom: 10px;
+}
+
+

x-pack/plugins/ml/public/file_datavisualizer/components/fields_stats/_index.scss

@@ -0,0 +1,2 @@
+@import 'fields_stats';
+@import 'field_stats_card';

x-pack/plugins/ml/public/file_datavisualizer/components/fields_stats/field_stats_card.js

@@ -0,0 +1,96 @@
+/*
+ * 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 {
+  EuiSpacer,
+
+} from '@elastic/eui';
+
+import { FieldTypeIcon } from '../../../components/field_type_icon';
+
+export function FieldStatsCard({ field }) {
+
+  const percent = Math.round(field.percent * 100) / 100;
+
+  let type = field.type;
+  if (type === 'double' || type === 'long') {
+    type = 'number';
+  }
+
+  return (
+    <React.Fragment>
+      <div className="card-container">
+        <div className="ml-field-data-card">
+          <div
+            className={`ml-field-title-bar ${type}`}
+          >
+            <FieldTypeIcon type={type} />
+            <div className="field-name">{field.name}</div>
+          </div>
+
+          <div className="card-contents">
+            <div className="stats">
+              <div className="stat">
+                <i className="fa fa-files-o" aria-hidden="true" /> {field.count} document{(field.count > 1) ? 's' : ''} ({percent}%)
+              </div>
+              <div className="stat">
+                <i className="fa fa-cubes" aria-hidden="true" /> {field.cardinality} distinct value{(field.cardinality > 1) ? 's' : ''}
+              </div>
+
+              {
+                (field.mean_value) &&
+                <React.Fragment>
+                  <div>
+                    <div className="stat min heading">min</div>
+                    <div className="stat median heading">median</div>
+                    <div className="stat max heading">max</div>
+                  </div>
+                  <div>
+                    <div className="stat min heading">{field.min_value}</div>
+                    <div className="stat median heading">{field.median_value}</div>
+                    <div className="stat max heading">{field.max_value}</div>
+                  </div>
+                </React.Fragment>
+              }
+            </div>
+
+            {
+              (field.top_hits) &&
+              <React.Fragment>
+
+                <EuiSpacer size="s" />
+
+                <div className="stats">
+                  <div className="stat">top values</div>
+                  {field.top_hits.map((h) => {
+                    const pcnt = Math.round(((h.count / field.count) * 100) * 100) / 100;
+                    return (
+                      <div key={h.value} className="top-value">
+                        <div className="field-label">{h.value}&nbsp;</div>
+                        <div className="top-value-bar-holder">
+                          <div
+                            className={`top-value-bar ${type}`}
+                            style={{ width: `${pcnt}%` }}
+                          />
+                        </div>
+                        <div className="count-label">{pcnt}%</div>
+                      </div>
+                    );
+                  }
+                  )}
+                </div>
+              </React.Fragment>
+            }
+
+          </div>
+        </div>
+      </div>
+    </React.Fragment>
+  );
+}

x-pack/plugins/ml/public/file_datavisualizer/components/fields_stats/fields_stats.js

@@ -0,0 +1,77 @@
+/*
+ * 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, {
+  Component,
+} from 'react';
+
+import { FieldStatsCard } from './field_stats_card';
+
+export class FieldsStats extends Component {
+  constructor(props) {
+    super(props);
+
+    this.fields = createFields(this.props.results);
+    console.log(this.fields);
+  }
+
+  render() {
+    return (
+      <div className="fields-stats">
+        {
+          this.fields.map(f => (
+            <FieldStatsCard
+              field={f}
+              key={f.name}
+            />
+          ))
+        }
+      </div>
+    );
+  }
+}
+
+function createFields(results) {
+  const {
+    mappings,
+    field_stats: fieldStats,
+    num_messages_analyzed: numMessagesAnalyzed,
+    timestamp_field: timestampField,
+  } = results;
+
+  let fields = [];
+
+  if (mappings && fieldStats) {
+    fields = Object.keys(fieldStats).map((fName) => {
+      const field = { name: fName };
+      const f  = fieldStats[fName];
+      const m  = mappings[fName];
+
+      // sometimes the timestamp field is not in the mappings, and so our
+      // collection of fields will be missing a time field with a type of date
+      if (fName === timestampField && field.type === undefined) {
+        field.type = 'date';
+      }
+
+      if (f !== undefined) {
+        Object.assign(field, f);
+      }
+
+      if (m !== undefined) {
+        field.type = m.type;
+        if (m.format !== undefined) {
+          field.format = m.format;
+        }
+      }
+
+      field.percent = ((field.count / numMessagesAnalyzed) * 100);
+
+      return field;
+    });
+  }
+  return fields;
+}

x-pack/plugins/ml/public/file_datavisualizer/components/fields_stats/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 { FieldsStats } from './fields_stats';

x-pack/plugins/ml/public/file_datavisualizer/components/file_contents/file_contents.js

@@ -0,0 +1,47 @@
+/*
+ * 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 {
+  EuiTitle,
+  EuiSpacer,
+} from '@elastic/eui';
+
+import { MLJobEditor, EDITOR_MODE } from '../../../jobs/jobs_list/components/ml_job_editor';
+
+export function FileContents({ data, format, numberOfLines }) {
+  let mode = EDITOR_MODE.TEXT;
+  if (format === EDITOR_MODE.JSON) {
+    mode = EDITOR_MODE.JSON;
+  }
+
+  const formattedData = limitByNumberOfLines(data, numberOfLines);
+
+  return (
+    <React.Fragment>
+      <EuiTitle size="s">
+        <h3>File contents</h3>
+      </EuiTitle>
+
+      <div>First {numberOfLines} line{(numberOfLines > 1) ? 's' : ''}</div>
+
+      <EuiSpacer size="s" />
+
+      <MLJobEditor
+        mode={mode}
+        readOnly={true}
+        value={formattedData}
+        height="200px"
+      />
+    </React.Fragment>
+  );
+}
+
+function limitByNumberOfLines(data, numberOfLines) {
+  return data.split('\n').slice(0, numberOfLines).join('\n');
+}

x-pack/plugins/ml/public/file_datavisualizer/components/file_contents/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 { FileContents } from './file_contents';

x-pack/plugins/ml/public/file_datavisualizer/components/file_datavisualizer_view/_index.scss

@@ -0,0 +1 @@
+@import 'file_datavisualizer_view'