From de90024f031829e744f158c376156fe89a9b4358 Mon Sep 17 00:00:00 2001 From: Pete Harverson Date: Wed, 3 Oct 2018 16:12:55 +0100 Subject: [PATCH] [ML] Adds new page for choosing file or index based data visualizer --- .../ml/public/datavisualizer/_index.scss | 1 + .../plugins/ml/public/datavisualizer/index.js | 1 + .../datavisualizer/selector/_index.scss | 1 + .../datavisualizer/selector/_selector.scss | 5 + .../selector/datavisualizer_selector.js | 125 ++++++++++++++++++ .../datavisualizer/selector/directive.js | 38 ++++++ .../public/datavisualizer/selector/index.js | 8 ++ x-pack/plugins/ml/public/index.scss | 8 ++ 8 files changed, 187 insertions(+) create mode 100644 x-pack/plugins/ml/public/datavisualizer/_index.scss create mode 100644 x-pack/plugins/ml/public/datavisualizer/selector/_index.scss create mode 100644 x-pack/plugins/ml/public/datavisualizer/selector/_selector.scss create mode 100644 x-pack/plugins/ml/public/datavisualizer/selector/datavisualizer_selector.js create mode 100644 x-pack/plugins/ml/public/datavisualizer/selector/directive.js create mode 100644 x-pack/plugins/ml/public/datavisualizer/selector/index.js diff --git a/x-pack/plugins/ml/public/datavisualizer/_index.scss b/x-pack/plugins/ml/public/datavisualizer/_index.scss new file mode 100644 index 0000000000000..af259ce363a56 --- /dev/null +++ b/x-pack/plugins/ml/public/datavisualizer/_index.scss @@ -0,0 +1 @@ +@import './selector/index'; diff --git a/x-pack/plugins/ml/public/datavisualizer/index.js b/x-pack/plugins/ml/public/datavisualizer/index.js index e94162faefcc6..6d5d234989988 100644 --- a/x-pack/plugins/ml/public/datavisualizer/index.js +++ b/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'; diff --git a/x-pack/plugins/ml/public/datavisualizer/selector/_index.scss b/x-pack/plugins/ml/public/datavisualizer/selector/_index.scss new file mode 100644 index 0000000000000..75f8d1c014393 --- /dev/null +++ b/x-pack/plugins/ml/public/datavisualizer/selector/_index.scss @@ -0,0 +1 @@ +@import 'selector'; diff --git a/x-pack/plugins/ml/public/datavisualizer/selector/_selector.scss b/x-pack/plugins/ml/public/datavisualizer/selector/_selector.scss new file mode 100644 index 0000000000000..a6007a63620ed --- /dev/null +++ b/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; +} diff --git a/x-pack/plugins/ml/public/datavisualizer/selector/datavisualizer_selector.js b/x-pack/plugins/ml/public/datavisualizer/selector/datavisualizer_selector.js new file mode 100644 index 0000000000000..b6305c27a2dd7 --- /dev/null +++ b/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 ( + + To experience what the full Machine Learning features of a {' '} + + Platinum subscription + {' '} + have to offer, start a 30-day trial from the license management page. + + ); +} + + +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 ( + + + + + +

Data Visualizer

+ + + + + + + + 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. + + + + + + + } + 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={ + + Select file + + } + /> + + + } + title="Pick index pattern" + description="Visualize data in an existing Elasticsearch index." + footer={ + + Select index + + } + /> + + + {shouldShowStartTrialLink === true && + + + + + + + Start trial + + } + /> + + + + } + + + ); +} diff --git a/x-pack/plugins/ml/public/datavisualizer/selector/directive.js b/x-pack/plugins/ml/public/datavisualizer/selector/directive.js new file mode 100644 index 0000000000000..0e26c3249c2f8 --- /dev/null +++ b/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 = ``; + +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' }, { }); +}); diff --git a/x-pack/plugins/ml/public/datavisualizer/selector/index.js b/x-pack/plugins/ml/public/datavisualizer/selector/index.js new file mode 100644 index 0000000000000..3839017291326 --- /dev/null +++ b/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'; diff --git a/x-pack/plugins/ml/public/index.scss b/x-pack/plugins/ml/public/index.scss index 549b8a413fbaa..c2ba5bb1eda04 100644 --- a/x-pack/plugins/ml/public/index.scss +++ b/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';