[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,88 @@
+.card-container {
+  display: inline-grid;
+  padding: 0px 10px 10px 0px;
+}
+
+.ml-field-data-card {
+  width: 360px;
+  height: 408px;
+
+  .stats {
+    padding: 10px 10px 0px 10px;
+    text-align: center;
+  }
+
+  .stat {
+    padding-bottom: 6px;
+  }
+  .stat.heading {
+    padding-bottom: 0px;
+  }
+
+  .stat.min, .stat.max, .stat.median {
+    width: 30%;
+    display: inline-block;
+  }
+
+  .card-contents {
+    height: 378px;
+    border-color: #d9d9d9;
+    border-style: solid;
+    border-width: 0px 1px 1px 1px;
+    border-radius: 0px 0px 5px 5px;
+    overflow: hidden;
+    line-height: 21px;
+  }
+
+  .top-value {
+    height: 21px;
+    font-size: 13px;
+  }
+  .top-value .field-label {
+    display: inline-block;
+    width: 100px;
+    text-align: right;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .top-value .count-label {
+    display: inline-block;
+    width: 70px;
+    text-align: left;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .top-value .top-value-bar-holder {
+    display: inline-block;
+    width: 160px;
+  }
+  .top-value .top-value-bar {
+    height: 15px;
+    min-width: 3px;
+  }
+}
+
+.ml-field-title-bar {
+  color: #ffffff;
+  font-size: 18px;
+  text-align: center;
+  border-radius: 5px 5px 0px 0px;
+  padding: 5px 6px;
+
+  .field-type-icon {
+    vertical-align: middle;
+    padding-right: 4px;
+    display: inline-block;
+  }
+
+  .field-name {
+    vertical-align: middle;
+    padding-right: 8px;
+    max-width: 290px;
+    display: inline-block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+}

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,123 @@
+/*
+ * 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';
+  }
+  const typeColor = getTypeColor(type);
+
+  return (
+    <React.Fragment>
+      <div className="card-container">
+        <div className="ml-field-data-card">
+          <div
+            style={{ backgroundColor: typeColor }}
+            className="ml-field-title-bar"
+          >
+            <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} documents ({percent}%)
+              </div>
+              <div className="stat">
+                <i className="fa fa-cubes" aria-hidden="true" /> {field.cardinality} distinct values
+              </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"
+                            style={{ width: `${pcnt}%`, backgroundColor: typeColor }}
+                          />
+                        </div>
+                        <div className="count-label">{pcnt}%</div>
+                      </div>
+                    );
+                  }
+                  )}
+                </div>
+              </React.Fragment>
+            }
+
+          </div>
+        </div>
+      </div>
+    </React.Fragment>
+  );
+}
+
+function getTypeColor(type) {
+
+  switch (type) {
+    case 'boolean':
+      return '#e6c220';
+    case 'date':
+      return '#f98510';
+    case 'document_count':
+      return '#db1374';
+    case 'geo_point':
+      return '#461a0a';
+    case 'ip':
+      return '#490092';
+    case 'keyword':
+      return '#00b3a4';
+    case 'number':
+      return '#3185fc';
+    case 'text':
+      return '#920000';
+
+    default:
+      return '#bfa180';
+  }
+}

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';