From 5a5eecbfc69585d573f1030db0dcdec438065096 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Wed, 21 Dec 2016 16:08:06 -0800 Subject: [PATCH] Add landing page with table to Visualize app. - Update Visualize wizard UI. - kbnTopNav directive supports no-menu-extensions attribute for excluding extensions, so you can hide the menu items entirely. --- .../public/visualize/editor/editor.html | 2 +- .../kibana/public/visualize/index.js | 3 +- .../public/visualize/landing/landing.js | 11 ++ .../visualize/landing/visualize_landing.html | 147 ++++++++++++++++++ .../visualize/landing/visualize_landing.js | 83 ++++++++++ .../kibana/public/visualize/styles/main.less | 70 ++++----- .../public/visualize/wizard/step_1.html | 30 ++-- .../public/visualize/wizard/step_2.html | 14 +- src/ui/public/kbn_top_nav/kbn_top_nav.js | 5 +- 9 files changed, 307 insertions(+), 58 deletions(-) create mode 100644 src/core_plugins/kibana/public/visualize/landing/landing.js create mode 100644 src/core_plugins/kibana/public/visualize/landing/visualize_landing.html create mode 100644 src/core_plugins/kibana/public/visualize/landing/visualize_landing.js diff --git a/src/core_plugins/kibana/public/visualize/editor/editor.html b/src/core_plugins/kibana/public/visualize/editor/editor.html index e5535094f24cc..a782c53106dc6 100644 --- a/src/core_plugins/kibana/public/visualize/editor/editor.html +++ b/src/core_plugins/kibana/public/visualize/editor/editor.html @@ -33,7 +33,7 @@ - +
+ + +
+ +
+ Visualize +
+
+ + +
+ +
+ +
+
+
+
+ +
+
+ +
+ + + + + + + Create visualization + +
+ +
+ +
+
+ + +
+
+ No visualizations matched your search. +
+
+ + + + + + + + + + + + + + + + + + + + + +
+ + + Visualization + + Type +
+ + +
+ + {{ item.title }} + + + +
+ 		+
+ {{ item.type.title }} +
+
+ + +
+
+
+ {{ landingController.getSelectedItemsCount() }} selected +
+
+
+ +
+
+
+
diff --git a/src/core_plugins/kibana/public/visualize/landing/visualize_landing.js b/src/core_plugins/kibana/public/visualize/landing/visualize_landing.js new file mode 100644 index 0000000000000..e94fd3154dcce --- /dev/null +++ b/src/core_plugins/kibana/public/visualize/landing/visualize_landing.js @@ -0,0 +1,83 @@ +import SavedObjectRegistryProvider from 'ui/saved_objects/saved_object_registry'; + +export function VisualizeLandingController( + $scope, + kbnUrl, + Notifier, + Private +) { + // TODO: Extract this into an external service. + const services = Private(SavedObjectRegistryProvider).byLoaderPropertiesName; + const visualizationService = services.visualizations; + const notify = new Notifier({ location: 'Visualize' }); + + let selectedItems = []; + + const fetchObjects = () => { + visualizationService.find(this.filter) + .then(result => { + this.items = result.hits; + }); + }; + + this.items = []; + this.filter = ''; + + this.toggleAll = function toggleAll() { + if (this.areAllItemsChecked()) { + selectedItems = []; + } else { + selectedItems = this.items.slice(0); + } + }; + + this.toggleItem = function toggleItem(item) { + if (this.isItemChecked(item)) { + const index = selectedItems.indexOf(item); + selectedItems.splice(index, 1); + } else { + selectedItems.push(item); + } + }; + + this.isItemChecked = function isItemChecked(item) { + return selectedItems.indexOf(item) !== -1; + }; + + this.areAllItemsChecked = function areAllItemsChecked() { + return this.getSelectedItemsCount() === this.items.length; + }; + + this.getSelectedItemsCount = function getSelectedItemsCount() { + return selectedItems.length; + }; + + this.deleteSelectedItems = function deleteSelectedItems() { + const selectedIds = selectedItems.map(item => item.id); + + visualizationService.delete(selectedIds) + .then(fetchObjects) + .then(() => { + selectedItems = []; + }) + .catch(error => notify.error(error)); + }; + + this.open = function open(item) { + kbnUrl.change(item.url.substr(1)); + }; + + this.edit = function edit(item) { + const params = { + // TODO: Get this value from somewhere instead of hardcodign it. + service: 'savedVisualizations', + id: item.id + }; + + kbnUrl.change('/management/kibana/objects/{{ service }}/{{ id }}', params); + }; + + $scope.$watch(() => this.filter, () => { + fetchObjects(); + }); +} diff --git a/src/core_plugins/kibana/public/visualize/styles/main.less b/src/core_plugins/kibana/public/visualize/styles/main.less index e14b6d8d5e010..4687f38c8edfe 100644 --- a/src/core_plugins/kibana/public/visualize/styles/main.less +++ b/src/core_plugins/kibana/public/visualize/styles/main.less @@ -2,56 +2,48 @@ @import (reference) "~ui/styles/bootstrap/list-group"; @import (reference) "~ui/styles/list-group-menu"; -/** - * 1. Push down the breadcrumbs a bit. - */ -.vis-wizard { - margin: 0; - padding: 12px 0 0; // 1 +.wizard-sub-title { + margin-top: 0px; + margin-bottom: 8px; + padding: 0px 5px; } - .wizard-sub-title { - margin-top: 0px; - margin-bottom: 8px; - padding: 0px 5px; - } +.wizard-type { + flex: 1; - .wizard-type { - flex: 1; + // TODO: When we migrate off Bootstrap, we can eliminate these "mixins". + .list-group-item(); + .list-group-menu .list-group-menu-item(); - // TODO: When we migrate off Bootstrap, we can eliminate these "mixins". - .list-group-item(); - .list-group-menu .list-group-menu-item(); + border: none; + border-radius: 0; + background-color: @kibanaGray6; +} - border: none; - border-radius: 0; - background-color: @kibanaGray6; + .wizard-type-heading { + flex: 0 0 200px; + display: flex; + align-items: center; + font-size: 1.2em; } - .wizard-type-heading { - flex: 0 0 200px; - display: flex; - align-items: center; - font-size: 1.2em; + .wizard-type-heading-icon { + flex: 0 0 auto; + margin-right: @padding-base-horizontal; + font-size: 1.5em; + text-align: center; + color: @saved-object-finder-icon-color; } - .wizard-type-heading-icon { - flex: 0 0 auto; - margin-right: @padding-base-horizontal; - font-size: 1.5em; - text-align: center; - color: @saved-object-finder-icon-color; - } - - .wizard-type-heading-text { - flex: 1 0 auto; - } - - .wizard-type-description { - flex: 1 1 auto; - color: @wizard-vis-type-description-color; + .wizard-type-heading-text { + flex: 1 0 auto; } + .wizard-type-description { + flex: 1 1 auto; + color: @wizard-vis-type-description-color; + } + @media (min-width: @screen-lg) { .wizard { padding: 0; diff --git a/src/core_plugins/kibana/public/visualize/wizard/step_1.html b/src/core_plugins/kibana/public/visualize/wizard/step_1.html index 1604638599417..f4c69bf82cdc7 100644 --- a/src/core_plugins/kibana/public/visualize/wizard/step_1.html +++ b/src/core_plugins/kibana/public/visualize/wizard/step_1.html @@ -1,10 +1,24 @@ -
-
- + + + +
+ +
+ + +
+ +
+

+ Select visualization type +

+
+
-

Create New Visualization

{{type.title}}
-
-

Or, Open a Saved Visualization

- -
diff --git a/src/core_plugins/kibana/public/visualize/wizard/step_2.html b/src/core_plugins/kibana/public/visualize/wizard/step_2.html index a810af180b163..2afb75122a333 100644 --- a/src/core_plugins/kibana/public/visualize/wizard/step_2.html +++ b/src/core_plugins/kibana/public/visualize/wizard/step_2.html @@ -1,7 +1,15 @@ -
-
- + + + +
+ +
+ + +

From a New Search, Select Index

diff --git a/src/ui/public/kbn_top_nav/kbn_top_nav.js b/src/ui/public/kbn_top_nav/kbn_top_nav.js index 2d4cd3ef91476..2003ccb162c4f 100644 --- a/src/ui/public/kbn_top_nav/kbn_top_nav.js +++ b/src/ui/public/kbn_top_nav/kbn_top_nav.js @@ -99,9 +99,10 @@ module.directive('kbnTopNav', function (Private) { }); }); - const extensions = getNavbarExtensions($attrs.name); - let controls = _.get($scope, $attrs.config, []); + const noMenuExtensions = $attrs.hasOwnProperty('noMenuExtensions'); + const extensions = noMenuExtensions ? [] : getNavbarExtensions($attrs.name); + if (controls instanceof KbnTopNavController) { controls.addItems(extensions); } else {