Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reactify visualize listing table #14227

Merged
merged 24 commits into from
Oct 12, 2017
Merged

Reactify visualize listing table #14227

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
27ec5ab
Reactify visualize listing table
stacey-gammon Sep 29, 2017
96b3e63
refactor toolbar => toolBar
stacey-gammon Oct 5, 2017
c70f0ac
use prompt prop to also cover loading and didn't match search logic.
stacey-gammon Oct 5, 2017
b3a9d55
Use default alignment instead of ternary
stacey-gammon Oct 5, 2017
3beb8e6
Add keys to array elements where missing
stacey-gammon Oct 5, 2017
4f5417e
Add align property to KuiTableHeaderCell
stacey-gammon Oct 5, 2017
eaab28f
Fix issue with filter not showing up in search tool bar
stacey-gammon Oct 5, 2017
55809a7
onCheckChanged => onSelectionChanged
stacey-gammon Oct 5, 2017
cfadb44
pagerComponent => pager, actionComponent => actions
stacey-gammon Oct 5, 2017
cdf7369
use singular verbiage when only 1 item is selected
stacey-gammon Oct 5, 2017
3651c5d
exit early per style guide
stacey-gammon Oct 5, 2017
b52e18d
fix lint errors
stacey-gammon Oct 5, 2017
83cca1d
rename columns => header
stacey-gammon Oct 5, 2017
f50f916
Refactor KuiTableHeaderCell into KuiListingTable
stacey-gammon Oct 5, 2017
c11f928
fix lint errors
stacey-gammon Oct 5, 2017
77db4b7
Merge branch 'master' of https://github.com/elastic/kibana into react…
stacey-gammon Oct 9, 2017
8de5e96
areAllRowsChecked => areAllRowsSelected
stacey-gammon Oct 11, 2017
497546f
improve itemSelectedCount logic in KuiListingTableToolBarFooter
stacey-gammon Oct 11, 2017
c29c8a6
React.Component => Component
stacey-gammon Oct 11, 2017
5348022
make header data a variable, not a function
stacey-gammon Oct 11, 2017
381f6fa
Only consider all rows selected if rows exist and they are all select…
stacey-gammon Oct 12, 2017
279d89d
Merge branch 'master' of https://github.com/elastic/kibana into react…
stacey-gammon Oct 12, 2017
2ec632b
Adding a few KuiListingTable tests
stacey-gammon Oct 12, 2017
2153631
Give one column sort attributes in examples page
stacey-gammon Oct 12, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions src/core_plugins/kibana/public/visualize/listing/no_visualizations_prompt.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import React from 'react';

import {
KuiEmptyTablePrompt,
KuiEmptyTablePromptPanel,
KuiLinkButton,
KuiButtonIcon,
} from 'ui_framework/components';

export function NoVisualizationsPrompt() {
return (
<KuiEmptyTablePromptPanel>
<KuiEmptyTablePrompt
actions={
<KuiLinkButton
href="#/visualize/new"
buttonType="primary"
icon={<KuiButtonIcon type="create"/>}
>
Create a visualization
</KuiLinkButton>
}
message="Looks like you don't have any visualizations. Let's create some!"
/>
</KuiEmptyTablePromptPanel>
);
}
218 changes: 4 additions & 214 deletions src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,220 +26,10 @@
</div>
</div>
</div>
<!-- ControlledTable -->
<div class="kuiViewContentItem kuiControlledTable kuiVerticalRhythm">
<!-- ToolBar -->
<div class="kuiToolBar">
<tool-bar-search-box
class="kuiToolBarSection"
filter="listingController.filter"
on-filter="listingController.onFilter"
data-test-subj="visualizationSearchFilter"
></tool-bar-search-box>

<div class="kuiToolBarSection">
<!-- Bulk delete button -->
<button
class="kuiButton kuiButton--danger"
aria-label="Delete selected objects"
ng-if="listingController.getSelectedItemsCount() > 0"
ng-click="listingController.deleteSelectedItems()"
tooltip="Delete selected visualizations"
tooltip-append-to-body="true"
>
<span aria-hidden="true" class="kuiButton__icon kuiIcon fa-trash"></span>
</button>
<visualize-listing-table
fetch-items="listingController.fetchItems"
delete-selected-items="listingController.deleteSelectedItems"
></visualize-listing-table>

<!-- Create visualization button -->
<a
class="kuiButton kuiButton--primary"
href="#/visualize/new"
aria-label="Create new visualization"
ng-if="listingController.getSelectedItemsCount() === 0"
tooltip="Create new visualization"
tooltip-append-to-body="true"
>
<span aria-hidden="true" class="kuiButton__icon kuiIcon fa-plus"></span>
</a>
</div>

<div class="kuiToolBarSection">
<!-- Pagination -->
<tool-bar-pager-text
start-item="listingController.pager.startItem"
end-item="listingController.pager.endItem"
total-items="listingController.pager.totalItems"
></tool-bar-pager-text>
<tool-bar-pager-buttons
has-previous-page="listingController.pager.hasPreviousPage"
has-next-page="listingController.pager.hasNextPage"
on-page-next="listingController.onPageNext"
on-page-previous="listingController.onPagePrevious"
></tool-bar-pager-buttons>
</div>
</div>

<!-- TableInfo -->
<div
class="kuiPanel kuiPanel--centered kuiPanel--withToolBar"
ng-if="!listingController.items.length && listingController.filter"
>
<div class="kuiTableInfo">
No visualizations matched your search.
</div>
</div>

<!-- EmptyTablePrompt -->
<div
class="kuiPanel kuiPanel--centered kuiPanel--withToolBar"
ng-if="!listingController.isFetchingItems && !listingController.items.length && !listingController.filter"
>
<div class="kuiEmptyTablePrompt">
<div class="kuiEmptyTablePrompt__message">
Looks like you don&rsquo;t have any visualizations. Let&rsquo;s create some!
</div>

<div class="kuiEmptyTablePrompt__actions">
<a
class="kuiButton kuiButton--primary kuiButton--iconText"
href="#/visualize/new"
>
<span class="kuiButton__inner">
<span class="kuiButton__icon kuiIcon fa-plus"></span>
<span>Create a visualization</span>
</span>
</a>
</div>
</div>
</div>

<!-- Table -->
<table class="kuiTable" ng-if="listingController.items.length">
<thead>
<tr>
<th class="kuiTableHeaderCell kuiTableHeaderCell--checkBox">
<div class="kuiTableHeaderCell__liner">
<input
type="checkbox"
class="kuiCheckBox"
ng-checked="listingController.areAllItemsChecked()"
ng-click="listingController.toggleAll()"
aria-label="{{listingController.areAllItemsChecked() ? 'Deselect all rows' : 'Select all rows'}}"
>
</div>
</th>

<th
class="kuiTableHeaderCell"
>
<button
class="kuiTableHeaderCellButton"
ng-class="{'kuiTableHeaderCellButton-isSorted': listingController.getSortedProperty().name == 'title'}"
ng-click="listingController.sortOn('title')"
aria-label="{{listingController.isAscending('title') ? 'Sort name descending' : 'Sort name ascending'}}"
>
<span class="kuiTableHeaderCell__liner">
Name
<span
class="kuiTableSortIcon kuiIcon"
ng-class="listingController.isAscending('title') ? 'fa-long-arrow-up' : 'fa-long-arrow-down'"
></span>
</span>
</button>
</th>

<th
class="kuiTableHeaderCell"
>
<button
class="kuiTableHeaderCellButton"
ng-class="{'kuiTableHeaderCellButton-isSorted': listingController.getSortedProperty().name == 'type'}"
ng-click="listingController.sortOn('type')"
aria-label="{{listingController.isAscending('type') ? 'Sort type descending' : 'Sort type ascending'}}"
>
<span class="kuiTableHeaderCell__liner">
Type
<span
class="kuiTableSortIcon kuiIcon"
ng-class="listingController.isAscending('type') ? 'fa-long-arrow-up' : 'fa-long-arrow-down'"
></span>
</span>
</button>
</th>
</tr>
</thead>

<tbody>
<tr
ng-repeat="item in listingController.pageOfItems track by item.id"
class="kuiTableRow"
>
<td class="kuiTableRowCell kuiTableRowCell--checkBox">
<div class="kuiTableRowCell__liner">
<input
type="checkbox"
class="kuiCheckBox"
ng-click="listingController.toggleItem(item)"
ng-checked="listingController.isItemChecked(item)"
aria-label="{{listingController.isItemChecked(item) ? 'Deselect row' : 'Select row'}}"
>
</div>
</td>

<td class="kuiTableRowCell">
<div class="kuiTableRowCell__liner">
<a class="kuiLink" ng-href="{{ listingController.getUrlForItem(item) }}">
{{ item.title }}
</a>
</div>
</td>

<td class="kuiTableRowCell">
<div class="kuiTableRowCell__liner">
<span class="kuiStatusText">
<img
class="kuiStatusText__icon kuiIcon"
ng-if="item.type.image"
aria-hidden="true"
ng-src="{{ item.type.image }}"
/>

<!-- If there's no image, default to an icon, for BWC. -->
<span
class="kuiStatusText__icon kuiIcon {{ item.icon }}"
ng-if="!item.type.image"
></span>

{{ item.type.title }}
</span>
</div>
</td>
</tr>
</tbody>
</table>

<!-- ToolBarFooter -->
<div class="kuiToolBarFooter">
<div class="kuiToolBarFooterSection">
<div class="kuiToolBarText" ng-hide="listingController.getSelectedItemsCount() === 0">
{{ listingController.getSelectedItemsCount() }} selected
</div>
</div>

<div class="kuiToolBarFooterSection">
<!-- Pagination -->
<tool-bar-pager-text
start-item="listingController.pager.startItem"
end-item="listingController.pager.endItem"
total-items="listingController.pager.totalItems"
></tool-bar-pager-text>
<tool-bar-pager-buttons
has-previous-page="listingController.pager.hasPreviousPage"
has-next-page="listingController.pager.hasNextPage"
on-page-next="listingController.onPageNext"
on-page-previous="listingController.onPagePrevious"
></tool-bar-pager-buttons>
</div>
</div>
</div>
</div>
Loading