Add landing page with table to Visualize app. #9605

cjcenizal · 2016-12-22T00:17:41Z

Addresses #9722

Changes

Refactor Visualize Wizard to use explicit controller names, instead of defining them dynamically.
Update Visualize wizard UI.

TODO

Now

Add icon-specific table column to UI Framework
Add kuiIcon variation for presenting a neutral icon
“Open” menu item should go back to home
Add column sorting
Fix visualization breadcrumbs to include Visualize app, and remove "Open" menu
Fix breadcrumbs to provide links back to each breadcrumb (and expect each breadcrumb link to be explicitly defined, maybe)
Adjust routes to support breadcrumbs representing progress through the Wizard
Add pagination to handle 1000s of visualizations

Later

Onboarding content, when no visualizations exist
Use lookup service to get icons, instead of relying on server
Extract API service
Use table and pagination directives and services

Screenshots

alt74 · 2016-12-22T16:24:53Z

cool! @cjcenizal instead of "+ new visualization" text in the button should we always use "Add New" instead? Use "Add New" for all tables where a user can create a new object (Graph, Timelion, etc). @uboness what do you think?

cjcenizal · 2016-12-22T17:40:10Z

@alt74 That's a really interesting question. I think my preference as a user is to see the noun inside this button because it reinforces the domain of this view. Until we have a large "Visualizations" title, I feel like this view doesn't scream "Visualizations" at me, so anything we can do to reinforce the domain would be beneficial.

On the other hand, one advantage of a consistent label is that the buttons become more scalable -- we wouldn't need to worry about them growing too long and disrupting other controls inside the ToolBar. Can you think of others, @alt74 ?

Does the benefit of having the noun inside the button make sense? If so, then I propose we move forward by using the approach in this PR, but with a critical eye on each use case... if we discover a situation where the noun causes the button to disrupt other content in the ToolBar, then we can relabel them to have the more generic copy.

uboness · 2016-12-22T18:32:20Z

I had the same feeling as @alt74... feels too repetitive indeed to have "Visualization" there.

"+ Add New" also feels somewhat repetitive (is there an option to add something that is not new... not here at least"

Then we're left with "+ Add" do we really need both "+" and "Add" ?

I'd like to challenge having any text. "+" generally peaks for itself... just like a trash icon communicates "delete". I think that together with a tooltip, users will get used to this fairly quickly and you gain cleaner UI.

Also,

How many rows are we going to show in the table. Are we paginating at all here? We should. Now, if we don't have enough rows to require pagination and we hide the pagination buttons, should we just push the tool buttons ("+" in this case) all the way to the right? (right now it feels somewhat hanging there)

spalger

Looks like some iteration is needed, but code looks good at this point.

spalger · 2016-12-22T19:30:58Z

src/core_plugins/kibana/public/visualize/index.js

@@ -24,7 +25,7 @@ uiRoutes
  requireDefaultIndex: true
 })
 .when('/visualize', {
-  redirectTo: '/visualize/step/1'
+  redirectTo: '/visualize/landing'


Maybe we should pick a more descriptive route name. Maybe /visualize/load, /visualize/index, or just /visualize since it's an index of the visualizations.

spalger · 2016-12-22T19:31:16Z

src/core_plugins/kibana/public/visualize/wizard/wizard.js


 const module = uiModules.get('app/visualize', ['kibana/courier']);

 /********
 /** Wizard Step 1
 /********/
 routes.when('/visualize/step/1', {
-  template: templateStep(1, require('plugins/kibana/visualize/wizard/step_1.html'))
+  template: require('plugins/kibana/visualize/wizard/step_1.html'),


Mind converting this and the require below to be import statements?

spalger · 2016-12-22T19:31:28Z

src/ui_framework/components/button/_button.scss

@@ -80,23 +80,23 @@
  }
 }

+/**


This should probably move up above line 70

I've found it's better to keep comments local to classes (even if they're duplicated), or else it can become really hard to keep track of them as the number of comments and classes grows.

That's fine, but you moved this comment up from 106, so maybe it should be duplicated for line 76 and 106?

Good catch, but I think it already is duplicated for those lines.

ppisljar · 2016-12-23T11:15:10Z

Regarding the button, i feel the noun inside the button is useful for the first couple of times you are using the application. After that its just taking extra space. I don't think we should have that button have the noun inside just for the sake of first time users, tooltip is fine enough for that.

I have a couple of other questions:

list of visualizations as the first page .... i am not sure how kibana is used the most, but i am guessing you go to Visualize when you want to create a new chart. If that's the case then we just moved it one click further. On the other way this is more similar to how applications normally function (get list of items for some data type where you can delete, edit or add them)
going for fixed-width center positioned design ... currently it looks super weird as we are switching from full width to fixed width design. If we plan to migrate whole kibana to fixed width then i guess it'll become better at some point. Note that this change doesn't just affect visualize, but same happens when you go to saved objects in management. Maybe its not that noticable on a small screen but on UHD you get this when you go to visualize (every other kibana page is full width):

and index selection screen is not the same width as the first two (but thats probably a bug or something went wrong with merge, as in CJs screenshots above it looks ok.

ppisljar · 2016-12-23T11:20:05Z

for a short time (after clicking visualize) you see a narrower table displayed (with no data in it) ... should probably be hidden with ng-cloak, a loader or at least make the empty table the same width as the filled one to prevent annoying flicker

ppisljar · 2016-12-23T17:27:01Z

few more ideas:

i would go without type column
i would put edit object icon on the right (something like in google inbox)
delete/ create button should be right aligned ?
hover on rows ?
add additional buttons next to edit object (like share, duplicate, delete)

uboness · 2016-12-23T18:22:11Z

going for fixed-width center positioned design ... currently it looks super weird as we are switching from full width to fixed width design. If we plan to migrate whole kibana to fixed width then i guess it'll become better at some point. Note that this change doesn't just affect visualize, but same happens when you go to saved objects in management. Maybe its not that noticable on a small screen but on UHD you get this when you go to visualize (every other kibana page is full width):

agree... lets try 2 other options - a relative width (say 75% of the width centralized) and a full width

epixa · 2016-12-23T18:36:34Z

I propose a third option: a max-width left justified. No amount of wrangling is going to change the fact that so long as we have a sidebar in place, Kibana is left justified. Centering content inside it just seems awkward.

cjcenizal · 2016-12-23T20:11:41Z

Comments from UI Review

Wizard improvements

The Wizard is tough to scan because it takes up so much space.
Usually you know what you want your visualization to look like, but you may not know what it's called. It would help to be able to see a preview of what each type looks like.

Table

The column titles get a little lost.
"Visualization" column could be renamed to just "Name".
From using PagerDuty and GitHub, it seems like a green "Add" button would be more intuitive.
The number of selected items gets lost on the bottom.
Check out https://dribbble.com/shots/1903644-Data-Grid for a neat way of revealing truncated content.

Table actions

Users may want a "Copy URL" link.
We could explore other actions, such as Sharing and Reporting functionality from within the table.

cjcenizal · 2016-12-23T22:08:13Z

Changes

I addressed @spalger's routing and import syntax suggestions.
I fixed the changing-width bug that @ppisljar noted.
I removed the button labels, added tooltips, and moved them to the right side per @uboness's suggestion.
I renamed the "Visualization" column to "Name" per @kevinkluge's suggestion.

I think this is the limit to the changes I want to make in this PR. Let's tackle the question of table width and alignment in separate iteration, when we can take all table views into account.

cjcenizal · 2016-12-24T01:34:22Z

jenkins, test this

stacey-gammon · 2016-12-27T21:40:13Z

It looks awesome @cjcenizal! Really glad about this, I think people will be really excited especially when we have one for dashboard.

A couple comments:

I can get into a situation where the timepicker shows in the upper right corner even on the landing page.
I don't like the 'edit object' link. There are two different editing experiences - the raw editing of saved objects, that is more dangerous, and our "guided" ui experience, which is what the user gets from clicking on the link. I don't think the distinction is clear that the < /> edit link brings you to saved object management but clicking the link brings you to the visualization (which you can also edit). Do we really want saved object management to be so easily accessible? Seems like a "power user" feature.

The column headers aren't sortable. Since name used to be sortable, this seems like a regression. Type sorting was never possible before but would be cool if it was simple to add.
Minor thought - I think it'd be cool if the row you were hovering over was highlighted a slightly different color. Take it or leave it. :)

stacey-gammon · 2016-12-28T14:36:46Z

src/core_plugins/kibana/public/visualize/listing/visualize_listing.html

+
+      <tbody>
+        <tr
+          ng-repeat="item in listingController.items track by item.id | orderBy:'title'"


Is this supposed to cause it to be ordered by title because that doesn't seem to be happening? Or does it default to order by title if there is no item.id? I'm unfamiliar with this syntax.

Good catch, this actually needs to be:

ng-repeat="item in listingController.items | orderBy:'title' track by item.id"

Relevant links:

https://code.angularjs.org/1.4.14/docs/api/ng/filter/orderBy

http://stackoverflow.com/questions/16455832/orderby-not-working-as-expected-angularjs

I'll make a PR to fix this in Dashboard too.

stacey-gammon · 2016-12-28T14:39:46Z

src/core_plugins/kibana/public/visualize/listing/visualize_listing.html

+      </div>
+    </div>
+  </div>
+</div>


The previous table component had max 20 items shown at one time. Will this show all of them? Will the page be able to handle many visualizations? It's not paged, right, they are just all listed? I wonder how many visualizations some of our biggest users have, order of 1,000s maybe?

there is an infinite_scroll under ui/directives which could serve well here

stacey-gammon · 2016-12-28T14:43:47Z

src/core_plugins/kibana/public/visualize/listing/visualize_listing.js

+    const selectedIds = selectedItems.map(item => item.id);
+
+    visualizationService.delete(selectedIds)
+    .then(fetchObjects)


Should the .then's be indented by two because it's a continuation of the top line?

stacey-gammon · 2016-12-28T14:44:12Z

src/core_plugins/kibana/public/visualize/listing/visualize_listing.js

+
+  this.edit = function edit(item) {
+    const params = {
+      // TODO: Get this value from somewhere instead of hardcodign it.


minor, but hardcodign = hardcoding

stacey-gammon · 2016-12-28T14:46:01Z

src/ui_framework/components/button/_button.scss

@@ -73,7 +73,7 @@

  &:hover:enabled,
  &:active:enabled {
-    color: #FFFFFF;
+    color: #FFFFFF !important; /* 1 */


I see this /* 1 */ used in various places, what's its meaning/purpose?

there are comments at the top of the file marked with 1. and 2.

ahhh, cool, thanks for the explanation!

stacey-gammon · 2016-12-28T14:49:11Z

test/support/page_objects/visualize_page.js

@@ -372,14 +369,7 @@ export default class VisualizePage {
  // this is for starting on the


Is this comment relevant? Opening a saved visualization doesn't seem to have anything to do with the create new visualization page.

ppisljar · 2016-12-30T06:36:05Z

I agree with everything Stacey said above, but besides that I have nothing more to add. This looks A W E S O M E. great job CJ!

cjcenizal · 2017-02-04T00:49:08Z

@spalger @ppisljar @stacey-gammon Ready for another review.

Adding pagination to both Visualize and Dashboard listing tables. Stacey, can you make sure Dashboard still works OK?
I changed the routes for the Visualize wizard. Do these still make sense to everyone? Suggestions welcome for better route names, which are displayed in the breadcrumbs.
Added sorting on table.
Removed "Open" menu button from the Visualization view.

stacey-gammon · 2017-02-06T14:59:14Z

src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.html

          tooltip="Create new dashboard"
        >
          <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-plus"></span>
        </a>
      </div>
+
+      <div class="kuiToolBarSection">


Awesome! Only one issue is that if you select all, looks like it selects everything, not just the first page, so if you do select all and delete, it'll delete everything. I don't think this is what we want.

I agree with @stacey-gammon. The way I see it, you shouldn't be able to select items that are not visible. This would also mean that changing the page would clear previously selected items.

Great catch! Thanks, will update.

stacey-gammon · 2017-02-06T15:01:26Z

src/core_plugins/kibana/public/visualize/listing/visualize_listing.html

+    </div>
+
+    <!-- NoResults -->
+    <div class="kuiPanel kuiPanel--centered" ng-if="!listingController.items.length">


Use the new Prompt For Items section? Also for some reason this isn't coming out as styled like the dashboard one, I think kuiNoResults should be kuiNoItems.

stacey-gammon · 2017-02-06T15:03:16Z

Love the new routes and the new look/feel of creating a visualization. So much cleaner!

spalger · 2017-02-06T15:58:04Z

src/ui/public/pager/pager_service.factory.js

+
+const app = uiModules.get('kibana');
+
+app.factory('pagerService', () => {


An object called pagerService looks like an instance of the PagerService class to my eye. What do you think about renaming this to PagerService and exposing the class directly, or returning the create function directly and renaming it to createPagerService.

I think we should name this pagerFactory instead, which is a much clearer indication IMO that this object follows the factory pattern (i.e. it exposes create methods).

spalger · 2017-02-06T15:59:58Z

src/ui/public/kbn_top_nav/bread_crumbs/bread_crumbs.js

@@ -32,6 +37,12 @@ module.directive('breadCrumbs', function ($location) {
        $scope.breadcrumbs.pop();
      }

+      if ($scope.omitPages) {
+        $scope.breadcrumbs = $scope.breadcrumbs.filter(breadcrumb =>
+          $scope.omitPages.indexOf(breadcrumb.toLowerCase()) === -1


You could also use Array#includes() here

spalger · 2017-02-06T16:01:54Z

src/core_plugins/kibana/public/visualize/wizard/wizard.js

  $scope.visTypeUrl = function (visType) {
-    const baseUrl = visType.requiresSearch ? '#/visualize/step/2?' : '#/visualize/create?';
+    const baseUrl =


We absolutely should if we can. What routes are changing?

spalger · 2017-02-06T16:14:51Z

src/core_plugins/kibana/public/visualize/editor/editor.html

-          ng-bind="savedVis.lastSavedTitle"
-        ></span>
-      </div>
+        title="getVisualizationTitle()"


this should probably be page-title

title isn't used by the breadcrumbs so the navbar no longer has the item title in it.

Great catch, thanks!

spalger · 2017-02-06T16:18:46Z

src/core_plugins/kibana/public/visualize/listing/visualize_listing.js

+import _ from 'lodash';
+
+export function VisualizeListingController(
+  $filter,


Would you mind trying const $filter = $injector.get('$filter') here and below? It's a part of #9495 that, among other things, prevents argument lists like this

spalger · 2017-02-06T16:31:14Z

src/core_plugins/kibana/public/visualize/visualize_constants.js

@@ -0,0 +1,7 @@
+export const VisualizeConstants = {
+  LANDING_PAGE_URL: '/visualize',


The way these *_URL variables are used implies that *_PATHNAME would be a more appropriate suffix (The code assumes they will not have query strings, hosts, ports, etc.).

spalger · 2017-02-06T16:34:03Z

src/core_plugins/kibana/public/visualize/wizard/wizard.js

@@ -77,8 +89,11 @@ module.controller('VisualizeWizardStep2', function ($route, $scope, timefilter,
    if (!pattern) return;

    if (addToDashMode) {
-      return `#/visualize/create?${DashboardConstants.ADD_VISUALIZATION_TO_DASHBOARD_MODE_PARAM}&type=${type}&indexPattern=${pattern}`;
+      return `#${VisualizeConstants.CREATE_URL}` +


There is a lot of this going on, I don't want to comment on it everywhere, but I'd like to reiterate my opinion that dynamically creating urls with string concatenation is a recipe for hard to trace bugs. Ideally we would always use a bonafide formatter like url.format()

Recorded in #10199

spalger · 2017-02-06T16:36:16Z

src/core_plugins/kibana/public/visualize/listing/visualize_listing.js

+  };
+
+  this.isItemChecked = function isItemChecked(item) {
+    return selectedItems.indexOf(item) !== -1;


Array#includes()?

IE doesn't support this yet. Does it get shimmed?

Yep, we use the babel-polyfill so we get all of the new Array and String methods, along with Maps and Sets and such

i hope it does as we do use it in many other locations.

spalger · 2017-02-06T16:37:01Z

src/core_plugins/kibana/public/visualize/listing/visualize_listing.js

+  }];
+
+  this.getSortProperty = function getSortProperty() {
+    return _.find(this.sortProperties, property => property.isSelected);


No need for _.find(), Array#find() should do the trick

spalger · 2017-02-06T16:45:47Z

src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.html

          tooltip="Create new dashboard"
        >
          <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-plus"></span>
        </a>
      </div>
+
+      <div class="kuiToolBarSection">


I agree with @stacey-gammon. The way I see it, you shouldn't be able to select items that are not visible. This would also mean that changing the page would clear previously selected items.

spalger · 2017-02-06T16:47:16Z

Most of my comments are style/optional/discretionary items, but the title missing from the breadcrumbs and potentially the ability to select non-visible items are things I think we need to fix before merging.

…y applies to the current page of items. - Paging clears the selection. - Searching clears the selection. - Sorting clears the selection.

- Use consistent "Create" terminology in both Visualize and Dashboard for creating new items. - Use NoItems and PromptForItems components in Visualize listing view.

…f URL.

cjcenizal · 2017-02-06T19:49:22Z

@stacey-gammon @spalger I've addressed your feedback. Would you mind taking another look? Please see the commit log for detailed notes on the changes. I made sure all changes to the Visualize listing page are mirrored in Dashboard.

A couple of the more visual changes:

Used NoItems and PromptForItems components

Fixed breadcrumbs and tweaked language

stacey-gammon

looks great!

Backports PR #9605 **Commit 1:** Refactor Visualize Wizard to use explicit controller names, instead of defining them dynamically. * Original sha: 5778951 * Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-21T20:58:55Z **Commit 2:** 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. * Original sha: 5a5eecb * Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-22T00:08:06Z **Commit 3:** Add kuiIcon--basic and support icons in Table component. Display icons in Visualize landing page. * Original sha: 1dbffd1 * Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-22T01:38:35Z **Commit 4:** Fix bug with vertical alignment in Table cells. * Original sha: f69df4c * Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-22T01:41:56Z **Commit 5:** Change Visualize menu items: New goes to landing page, Open goes to wizard. * Original sha: 8ca2faf * Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-22T01:46:22Z **Commit 6:** Move visualize/landing route to live at visualize/ instead. * Original sha: e674f6c * Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-23T21:46:21Z **Commit 7:** Refactor Visualize Wizard templates to use import syntax. * Original sha: b129af5 * Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-23T21:48:11Z **Commit 8:** Set kuiViewContent width to 100% to avoid it shrink wrapping its content. * Original sha: 94afb6f * Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-23T22:00:36Z **Commit 9:** Move ToolBar buttons to the right side. Remove labels and add tooltips. * Original sha: 6a66f6f * Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-23T22:04:49Z **Commit 10:** Fix functional tests for Visualize, to work with new landing page. * Original sha: 5a720c9 * Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-23T23:47:52Z **Commit 11:** Remove unused Visualize load menu template. * Original sha: b010488 * Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-23T23:52:24Z **Commit 12:** Remove Edit link from Visualization listing. * Original sha: a1f737f * Authored by CJ Cenizal <cj@cenizal.com> on 2017-01-03T19:41:50Z **Commit 13:** Disable timepicker in Visualization listing. * Original sha: ca4adc3 * Authored by CJ Cenizal <cj@cenizal.com> on 2017-01-05T00:18:35Z **Commit 14:** Add basic Icon example. Fix Visualize Wizard titles and layout. * Original sha: 50e2da7 * Authored by CJ Cenizal <cj@cenizal.com> on 2017-01-17T16:57:31Z **Commit 15:** Remove icon cells from Table component. Fix Visualize landing table header bug and type icon position. * Original sha: 5625264 * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-01T18:19:49Z **Commit 16:** Change Visualize route names. Add omitPages attribute to breadcrumbs directive. Make Visualize breadcrumbs into links. * Original sha: 93c9533 * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-02T00:41:07Z **Commit 17:** Remove Open and New menu buttons from Visualize. * Original sha: f243762 * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-02T01:07:55Z **Commit 18:** Add ConfirmationModal for deleting visualizations. * Original sha: d0325ba * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-02T01:14:34Z **Commit 19:** Implement sorting for name and type columns in Visualize listing. * Original sha: 39ed424 * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-02T01:21:57Z **Commit 20:** Refactor Visualize routes into VisualizeConstants file. Fix functional tests. * Original sha: 43ceb6e * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-02T18:45:17Z **Commit 21:** Add pager_controls directive and pager service. Add pagination to Dashboard and Visualize landing pages. Change Dashboard listing to use hrefs for each dashboard. * Original sha: d1d3da7 * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-04T00:37:28Z **Commit 22:** Add Basic Icon example. * Original sha: 880b7b4 * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-04T00:41:59Z **Commit 23:** Use ng-if instead of ng-hide to hide/reveal Table action buttons in Dashboard listing. * Original sha: 668d598 * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-04T00:44:06Z **Commit 24:** Redirect from old Visualize wizard routes to new ones. * Original sha: 99525ac * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-06T18:37:05Z **Commit 25:** Use ViewContent and Title components in Visualize wizard. * Original sha: 734c85b * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-06T18:46:50Z **Commit 26:** Fix Visualize and Dashboard listing table logic so that selection only applies to the current page of items. - Paging clears the selection. - Searching clears the selection. - Sorting clears the selection. * Original sha: de4f7b4 * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-06T19:05:16Z **Commit 27:** - Fix Visualize wizard breadcrumbs. - Use consistent "Create" terminology in both Visualize and Dashboard for creating new items. - Use NoItems and PromptForItems components in Visualize listing view. * Original sha: 10dbff6 * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-06T19:22:09Z **Commit 28:** Rename pagerService factory to pagerFactory. * Original sha: 6eeeab6 * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-06T19:29:36Z **Commit 29:** Minor code style improvements. * Original sha: 438f5c4 * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-06T19:36:17Z **Commit 30:** Use inject dependencies in Visualize and Dashboard listing. * Original sha: 794b18c * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-06T19:45:00Z

Backports PR elastic#9605 **Commit 1:** Refactor Visualize Wizard to use explicit controller names, instead of defining them dynamically. * Original sha: 5778951 * Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-21T20:58:55Z **Commit 2:** 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. * Original sha: 5a5eecb * Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-22T00:08:06Z **Commit 3:** Add kuiIcon--basic and support icons in Table component. Display icons in Visualize landing page. * Original sha: 1dbffd1 * Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-22T01:38:35Z **Commit 4:** Fix bug with vertical alignment in Table cells. * Original sha: f69df4c * Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-22T01:41:56Z **Commit 5:** Change Visualize menu items: New goes to landing page, Open goes to wizard. * Original sha: 8ca2faf * Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-22T01:46:22Z **Commit 6:** Move visualize/landing route to live at visualize/ instead. * Original sha: e674f6c * Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-23T21:46:21Z **Commit 7:** Refactor Visualize Wizard templates to use import syntax. * Original sha: b129af5 * Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-23T21:48:11Z **Commit 8:** Set kuiViewContent width to 100% to avoid it shrink wrapping its content. * Original sha: 94afb6f * Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-23T22:00:36Z **Commit 9:** Move ToolBar buttons to the right side. Remove labels and add tooltips. * Original sha: 6a66f6f * Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-23T22:04:49Z **Commit 10:** Fix functional tests for Visualize, to work with new landing page. * Original sha: 5a720c9 * Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-23T23:47:52Z **Commit 11:** Remove unused Visualize load menu template. * Original sha: b010488 * Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-23T23:52:24Z **Commit 12:** Remove Edit link from Visualization listing. * Original sha: a1f737f * Authored by CJ Cenizal <cj@cenizal.com> on 2017-01-03T19:41:50Z **Commit 13:** Disable timepicker in Visualization listing. * Original sha: ca4adc3 * Authored by CJ Cenizal <cj@cenizal.com> on 2017-01-05T00:18:35Z **Commit 14:** Add basic Icon example. Fix Visualize Wizard titles and layout. * Original sha: 50e2da7 * Authored by CJ Cenizal <cj@cenizal.com> on 2017-01-17T16:57:31Z **Commit 15:** Remove icon cells from Table component. Fix Visualize landing table header bug and type icon position. * Original sha: 5625264 * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-01T18:19:49Z **Commit 16:** Change Visualize route names. Add omitPages attribute to breadcrumbs directive. Make Visualize breadcrumbs into links. * Original sha: 93c9533 * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-02T00:41:07Z **Commit 17:** Remove Open and New menu buttons from Visualize. * Original sha: f243762 * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-02T01:07:55Z **Commit 18:** Add ConfirmationModal for deleting visualizations. * Original sha: d0325ba * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-02T01:14:34Z **Commit 19:** Implement sorting for name and type columns in Visualize listing. * Original sha: 39ed424 * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-02T01:21:57Z **Commit 20:** Refactor Visualize routes into VisualizeConstants file. Fix functional tests. * Original sha: 43ceb6e * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-02T18:45:17Z **Commit 21:** Add pager_controls directive and pager service. Add pagination to Dashboard and Visualize landing pages. Change Dashboard listing to use hrefs for each dashboard. * Original sha: d1d3da7 * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-04T00:37:28Z **Commit 22:** Add Basic Icon example. * Original sha: 880b7b4 * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-04T00:41:59Z **Commit 23:** Use ng-if instead of ng-hide to hide/reveal Table action buttons in Dashboard listing. * Original sha: 668d598 * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-04T00:44:06Z **Commit 24:** Redirect from old Visualize wizard routes to new ones. * Original sha: 99525ac * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-06T18:37:05Z **Commit 25:** Use ViewContent and Title components in Visualize wizard. * Original sha: 734c85b * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-06T18:46:50Z **Commit 26:** Fix Visualize and Dashboard listing table logic so that selection only applies to the current page of items. - Paging clears the selection. - Searching clears the selection. - Sorting clears the selection. * Original sha: de4f7b4 * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-06T19:05:16Z **Commit 27:** - Fix Visualize wizard breadcrumbs. - Use consistent "Create" terminology in both Visualize and Dashboard for creating new items. - Use NoItems and PromptForItems components in Visualize listing view. * Original sha: 10dbff6 * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-06T19:22:09Z **Commit 28:** Rename pagerService factory to pagerFactory. * Original sha: 6eeeab6 * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-06T19:29:36Z **Commit 29:** Minor code style improvements. * Original sha: 438f5c4 * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-06T19:36:17Z **Commit 30:** Use inject dependencies in Visualize and Dashboard listing. * Original sha: 794b18c * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-06T19:45:00Z

Backports PR #9605 **Commit 1:** Refactor Visualize Wizard to use explicit controller names, instead of defining them dynamically. * Original sha: 5778951 * Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-21T20:58:55Z **Commit 2:** 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. * Original sha: 5a5eecb * Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-22T00:08:06Z **Commit 3:** Add kuiIcon--basic and support icons in Table component. Display icons in Visualize landing page. * Original sha: 1dbffd1 * Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-22T01:38:35Z **Commit 4:** Fix bug with vertical alignment in Table cells. * Original sha: f69df4c * Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-22T01:41:56Z **Commit 5:** Change Visualize menu items: New goes to landing page, Open goes to wizard. * Original sha: 8ca2faf * Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-22T01:46:22Z **Commit 6:** Move visualize/landing route to live at visualize/ instead. * Original sha: e674f6c * Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-23T21:46:21Z **Commit 7:** Refactor Visualize Wizard templates to use import syntax. * Original sha: b129af5 * Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-23T21:48:11Z **Commit 8:** Set kuiViewContent width to 100% to avoid it shrink wrapping its content. * Original sha: 94afb6f * Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-23T22:00:36Z **Commit 9:** Move ToolBar buttons to the right side. Remove labels and add tooltips. * Original sha: 6a66f6f * Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-23T22:04:49Z **Commit 10:** Fix functional tests for Visualize, to work with new landing page. * Original sha: 5a720c9 * Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-23T23:47:52Z **Commit 11:** Remove unused Visualize load menu template. * Original sha: b010488 * Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-23T23:52:24Z **Commit 12:** Remove Edit link from Visualization listing. * Original sha: a1f737f * Authored by CJ Cenizal <cj@cenizal.com> on 2017-01-03T19:41:50Z **Commit 13:** Disable timepicker in Visualization listing. * Original sha: ca4adc3 * Authored by CJ Cenizal <cj@cenizal.com> on 2017-01-05T00:18:35Z **Commit 14:** Add basic Icon example. Fix Visualize Wizard titles and layout. * Original sha: 50e2da7 * Authored by CJ Cenizal <cj@cenizal.com> on 2017-01-17T16:57:31Z **Commit 15:** Remove icon cells from Table component. Fix Visualize landing table header bug and type icon position. * Original sha: 5625264 * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-01T18:19:49Z **Commit 16:** Change Visualize route names. Add omitPages attribute to breadcrumbs directive. Make Visualize breadcrumbs into links. * Original sha: 93c9533 * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-02T00:41:07Z **Commit 17:** Remove Open and New menu buttons from Visualize. * Original sha: f243762 * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-02T01:07:55Z **Commit 18:** Add ConfirmationModal for deleting visualizations. * Original sha: d0325ba * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-02T01:14:34Z **Commit 19:** Implement sorting for name and type columns in Visualize listing. * Original sha: 39ed424 * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-02T01:21:57Z **Commit 20:** Refactor Visualize routes into VisualizeConstants file. Fix functional tests. * Original sha: 43ceb6e * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-02T18:45:17Z **Commit 21:** Add pager_controls directive and pager service. Add pagination to Dashboard and Visualize landing pages. Change Dashboard listing to use hrefs for each dashboard. * Original sha: d1d3da7 * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-04T00:37:28Z **Commit 22:** Add Basic Icon example. * Original sha: 880b7b4 * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-04T00:41:59Z **Commit 23:** Use ng-if instead of ng-hide to hide/reveal Table action buttons in Dashboard listing. * Original sha: 668d598 * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-04T00:44:06Z **Commit 24:** Redirect from old Visualize wizard routes to new ones. * Original sha: 99525ac * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-06T18:37:05Z **Commit 25:** Use ViewContent and Title components in Visualize wizard. * Original sha: 734c85b * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-06T18:46:50Z **Commit 26:** Fix Visualize and Dashboard listing table logic so that selection only applies to the current page of items. - Paging clears the selection. - Searching clears the selection. - Sorting clears the selection. * Original sha: de4f7b4 * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-06T19:05:16Z **Commit 27:** - Fix Visualize wizard breadcrumbs. - Use consistent "Create" terminology in both Visualize and Dashboard for creating new items. - Use NoItems and PromptForItems components in Visualize listing view. * Original sha: 10dbff6 * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-06T19:22:09Z **Commit 28:** Rename pagerService factory to pagerFactory. * Original sha: 6eeeab6 * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-06T19:29:36Z **Commit 29:** Minor code style improvements. * Original sha: 438f5c4 * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-06T19:36:17Z **Commit 30:** Use inject dependencies in Visualize and Dashboard listing. * Original sha: 794b18c * Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-06T19:45:00Z

cjcenizal added Team:Platform-Design Team Label for Kibana Design Team. Support the Analyze group of plugins. release_note:enhancement v5.2.0 v6.0.0 labels Dec 22, 2016

cjcenizal assigned spalger, thomasneirynck, ppisljar, stacey-gammon, alt74 and uboness Dec 22, 2016

cjcenizal force-pushed the feature/visualize-landing-page-table branch from 48347a9 to ee5ab0e Compare December 22, 2016 18:18

spalger reviewed Dec 22, 2016

View reviewed changes

cjcenizal force-pushed the feature/visualize-landing-page-table branch from ee5ab0e to 3a87785 Compare December 23, 2016 21:49

stacey-gammon reviewed Dec 28, 2016

View reviewed changes

cjcenizal force-pushed the feature/visualize-landing-page-table branch from 0df4dee to 3778148 Compare January 3, 2017 00:07

This was referenced Jan 3, 2017

Kibana UI componentization #9708

Closed

Add date created, date modified, other metadata to Saved Objects #9202

Open

cjcenizal force-pushed the feature/visualize-landing-page-table branch from fee5981 to 668d598 Compare February 4, 2017 00:45

stacey-gammon reviewed Feb 6, 2017

View reviewed changes

spalger suggested changes Feb 6, 2017

View reviewed changes

cjcenizal mentioned this pull request Feb 6, 2017

Center or left-align content that has a constrained width? #10195

Closed

cjcenizal added 6 commits February 6, 2017 10:37

Redirect from old Visualize wizard routes to new ones.

99525ac

Use ViewContent and Title components in Visualize wizard.

734c85b

Fix Visualize and Dashboard listing table logic so that selection onl…

de4f7b4

…y applies to the current page of items. - Paging clears the selection. - Searching clears the selection. - Sorting clears the selection.

- Fix Visualize wizard breadcrumbs.

10dbff6

- Use consistent "Create" terminology in both Visualize and Dashboard for creating new items. - Use NoItems and PromptForItems components in Visualize listing view.

Rename pagerService factory to pagerFactory.

6eeeab6

Minor code style improvements.

438f5c4

cjcenizal mentioned this pull request Feb 6, 2017

Use url.format instead of kbn.eval where appropriate #10199

Closed

cjcenizal added 2 commits February 6, 2017 11:45

Use inject dependencies in Visualize and Dashboard listing.

794b18c

Update Dashboard and Visualize constants to use PATH suffix instead o…

af07fa7

…f URL.

stacey-gammon approved these changes Feb 6, 2017

View reviewed changes

cjcenizal merged commit a5705f8 into elastic:master Feb 6, 2017

cjcenizal deleted the feature/visualize-landing-page-table branch February 6, 2017 22:41

elastic-jasper mentioned this pull request Feb 6, 2017

[5.x] Add landing page with table to Visualize app. #10206

Closed

elastic-jasper mentioned this pull request Feb 7, 2017

[5.x] Add landing page with table to Visualize app. #10212

Merged

cjcenizal mentioned this pull request Feb 7, 2017

Dashboard and Visualize landing pages #9722

Closed

cjcenizal mentioned this pull request Feb 14, 2017

Dashboard table listing doesn't reflect selected state correctly when searching. #10170

Closed

@@ @@ -80,23 +80,23 @@ @@
                 }
               }
+              /**

		@@ -372,14 +369,7 @@ export default class VisualizePage {
		// this is for starting on the


		const app = uiModules.get('kibana');

		app.factory('pagerService', () => {

		@@ -0,0 +1,7 @@
		export const VisualizeConstants = {
		LANDING_PAGE_URL: '/visualize',

Add landing page with table to Visualize app. #9605

Add landing page with table to Visualize app. #9605

Conversation

cjcenizal commented Dec 22, 2016 • edited Loading

Changes

TODO

Now

Later

Screenshots

alt74 commented Dec 22, 2016

cjcenizal commented Dec 22, 2016

uboness commented Dec 22, 2016

spalger left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ppisljar commented Dec 23, 2016 • edited Loading

ppisljar commented Dec 23, 2016 • edited Loading

ppisljar commented Dec 23, 2016

uboness commented Dec 23, 2016

epixa commented Dec 23, 2016

cjcenizal commented Dec 23, 2016 • edited Loading

Comments from UI Review

Wizard improvements

Table

Table actions

cjcenizal commented Dec 23, 2016 • edited Loading

Changes

cjcenizal commented Dec 24, 2016

stacey-gammon commented Dec 27, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ppisljar Dec 30, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ppisljar commented Dec 30, 2016

cjcenizal commented Feb 4, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stacey-gammon commented Feb 6, 2017

spalger Feb 6, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

spalger Feb 6, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

spalger commented Feb 6, 2017

cjcenizal commented Feb 6, 2017 • edited Loading

Used NoItems and PromptForItems components

Fixed breadcrumbs and tweaked language

stacey-gammon left a comment

Choose a reason for hiding this comment

cjcenizal commented Dec 22, 2016 •

edited

Loading

ppisljar commented Dec 23, 2016 •

edited

Loading

ppisljar commented Dec 23, 2016 •

edited

Loading

cjcenizal commented Dec 23, 2016 •

edited

Loading

cjcenizal commented Dec 23, 2016 •

edited

Loading

ppisljar Dec 30, 2016 •

edited

Loading

spalger Feb 6, 2017 •

edited

Loading

spalger Feb 6, 2017 •

edited

Loading

cjcenizal commented Feb 6, 2017 •

edited

Loading