forked from elastic/kibana
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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.
- Loading branch information
Showing
9 changed files
with
307 additions
and
58 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
11 changes: 11 additions & 0 deletions
11
src/core_plugins/kibana/public/visualize/landing/landing.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import routes from 'ui/routes'; | ||
| import modules from 'ui/modules'; | ||
| import visualizeLandingTemplate from './visualize_landing.html'; | ||
| import { VisualizeLandingController } from './visualize_landing'; | ||
|
|
||
| routes | ||
| .when('/visualize/landing', { | ||
| template: visualizeLandingTemplate, | ||
| controller: VisualizeLandingController, | ||
| controllerAs: 'landingController', | ||
| }); |
147 changes: 147 additions & 0 deletions
147
src/core_plugins/kibana/public/visualize/landing/visualize_landing.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,147 @@ | ||
| <!-- Local nav. --> | ||
| <kbn-top-nav name="visualize" no-menu-extensions> | ||
| <!-- Transcluded elements. --> | ||
| <div data-transclude-slots> | ||
| <!-- Title. --> | ||
| <div | ||
| data-transclude-slot="topLeftCorner" | ||
| class="kuiLocalTitle" | ||
| > | ||
| Visualize | ||
| </div> | ||
| </div> | ||
| </kbn-top-nav> | ||
|
|
||
| <div class="kuiViewContent kuiViewContent--constrainedWidth"> | ||
| <!-- ControlledTable --> | ||
| <div class="kuiViewContentItem kuiControlledTable kuiVerticalRhythm"> | ||
| <!-- ToolBar --> | ||
| <div class="kuiToolBar"> | ||
| <div class="kuiToolBarSearch"> | ||
| <div class="kuiToolBarSearchBox"> | ||
| <div class="kuiToolBarSearchBox__icon kuiIcon fa-search"></div> | ||
| <input | ||
| class="kuiToolBarSearchBox__input" | ||
| type="text" | ||
| placeholder="Search..." | ||
| aria-label="Filter" | ||
| ng-model="landingController.filter" | ||
| > | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="kuiToolBarSection"> | ||
| <!-- Bulk delete button --> | ||
| <button | ||
| class="kuiButton kuiButton--danger kuiButton--iconText" | ||
| confirm-click="landingController.deleteSelectedItems()" | ||
| confirmation="Are you sure you want to delete the selected visualizations? This action is irreversible!" | ||
| aria-label="Delete selected objects" | ||
| ng-hide="landingController.getSelectedItemsCount() === 0" | ||
| > | ||
| <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-trash"></span> | ||
| Delete | ||
| </button> | ||
|
|
||
| <!-- Create visualization button --> | ||
| <a | ||
| class="kuiButton kuiButton--primary kuiButton--iconText" | ||
| href="#/visualize/step/1" | ||
| aria-label="Create new visualization" | ||
| ng-hide="landingController.getSelectedItemsCount() > 0" | ||
| > | ||
| <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-plus"></span> | ||
| Create visualization | ||
| </a> | ||
| </div> | ||
|
|
||
| <div class="kuiToolBarSection"> | ||
| <!-- We need an empty section for the buttons to be positioned consistently. --> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- NoResults --> | ||
| <div class="kuiPanel kuiPanel--centered" ng-if="!landingController.items.length"> | ||
| <div class="kuiNoResults"> | ||
| No visualizations matched your search. | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Table --> | ||
| <table class="kuiTable" ng-if="landingController.items.length"> | ||
| <thead> | ||
| <tr> | ||
| <th class="kuiTableHeaderCell kuiTableHeaderCell--checkBox"> | ||
| <input | ||
| type="checkbox" | ||
| class="kuiCheckBox" | ||
| ng-checked="landingController.areAllItemsChecked()" | ||
| ng-click="landingController.toggleAll()" | ||
| > | ||
| </th> | ||
| <th class="kuiTableHeaderCell"> | ||
| Visualization | ||
| </th> | ||
| <th class="kuiTableHeaderCell"> | ||
| Type | ||
| </th> | ||
| </tr> | ||
| </thead> | ||
|
|
||
| <tbody> | ||
| <tr | ||
| ng-repeat="item in landingController.items track by item.id | orderBy:'title'" | ||
| class="kuiTableRow" | ||
| > | ||
| <td class="kuiTableRowCell kuiTableRowCell--checkBox"> | ||
| <input | ||
| type="checkbox" | ||
| class="kuiCheckBox" | ||
| ng-click="landingController.toggleItem(item)" | ||
| ng-checked="landingController.isItemChecked(item)" | ||
| > | ||
| </td> | ||
|
|
||
| <td class="kuiTableRowCell"> | ||
| <div class="kuiTableRowCell__liner"> | ||
| <a class="kuiLink" ng-href="{{ item.url }}"> | ||
| {{ item.title }} | ||
| </a> | ||
|
|
||
| <button | ||
| class="kuiMicroButton kuiTableRowHoverReveal" | ||
| ng-click="landingController.edit(item)" | ||
| aria-label="Edit" | ||
| tooltip="Edit object" | ||
| > | ||
| <span | ||
| aria-hidden="true" | ||
| class="kuiIcon fa-code" | ||
| ></span> | ||
| </button> | ||
| </div> | ||
| </td> | ||
|
|
||
| <td class="kuiTableRowCell"> | ||
| <div class="kuiTableRowCell__liner"> | ||
| {{ item.type.title }} | ||
| </div> | ||
| </td> | ||
| </tr> | ||
|
|
||
| </tbody> | ||
| </table> | ||
|
|
||
| <!-- ToolBarFooter --> | ||
| <div class="kuiToolBarFooter"> | ||
| <div class="kuiToolBarFooterSection"> | ||
| <div class="kuiToolBarText" ng-hide="landingController.getSelectedItemsCount() === 0"> | ||
| {{ landingController.getSelectedItemsCount() }} selected | ||
| </div> | ||
| </div> | ||
| <div class="kuiToolBarFooterSection"> | ||
| <!-- We need an empty section for the buttons to be positioned consistently. --> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> |
83 changes: 83 additions & 0 deletions
83
src/core_plugins/kibana/public/visualize/landing/visualize_landing.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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(); | ||
| }); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.