Skip to content

Commit

Permalink
[Management] Saved objects to React/EUI! (elastic#17426)
Browse files Browse the repository at this point in the history 
* Not working proto code

* More proto code

* Work in progress

* Just go back to non interactive searching, much easier

* This should be on the server

* Revert "[@kbn/ui-framework] move ui-framework to a package (elastic#17085)"

This reverts commit ef3339b.

* Revert "Revert "[@kbn/ui-framework] move ui-framework to a package (elastic#17085)""

This reverts commit ce9ce14e1060c426090b55a5367de3ff4329e681.

* Use BasicTable properly

* Table improvements

* Small tweaks to the table

* Improvements

* Flyout mostly working

* Remove in memory table

* Getting close

* Tweaks

* Revamping server code, still need to support editing

* Progress

* Fix export

* Updates and passing functional tests

* Better links in relationships flyout

* Add skip import option

* Fixes around importing and removing unnecessary code

* Remove tags for now

* Tests for lib/

* Some fixes

* Ensure we clear index pattern cache

* Parity with master

* Revert any changes in package.json

* Reset any changes in this file

* Move the new argumen to the end to prevent test failures

* Fix functional tests

* Add relationship tests

* Fix tests

* API integration tests for relationships

* Ensure we're properly waiting for things to happen

* Fix test issue

* Wait for the table to finish loading instead of the whole page

* Tests for objects_table

* Componentry tests

* Ensure this is grabbing the right field

* Update snapshot

* Fixes with importing index patterns

* PR feedback

* PR feedback

* PR feedback

* Update snapshot

* PR feedback

* Update snapshot

* Respect the savedObjects:perPage config

* Updates from PR feedback

* More updates from PR feedback

* Make this more efficient

* Add debugging for functional test failures

* Wait longer

* Wrap each button accessor with a retry.try

* Try wrapping this in a retry.try

* Debug

* Lets make sure it is visible

* Maybe the short timeout is affecting this - use the default timeout which should be higher and allow more time for the animation to finish

* Rewrite this per suggestions from stacey
  • Loading branch information
@chrisronline
chrisronline committed May 17, 2018
1 parent 63e168c commit 66318e8
Show file tree
Hide file tree
Showing 74 changed files with 6,291 additions and 891 deletions.
2 changes: 2 additions & 0 deletions src/core_plugins/kibana/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { scrollSearchApi } from './server/routes/api/scroll_search';
import { importApi } from './server/routes/api/import';
import { exportApi } from './server/routes/api/export';
import { homeApi } from './server/routes/api/home';
import { managementApi } from './server/routes/api/management';
import { scriptsApi } from './server/routes/api/scripts';
import { registerSuggestionsApi } from './server/routes/api/suggestions';
import { registerFieldFormats } from './server/field_formats/register';
Expand Down Expand Up @@ -133,6 +134,7 @@ export default function (kibana) {
importApi(server);
exportApi(server);
homeApi(server);
managementApi(server);
registerSuggestionsApi(server);
registerFieldFormats(server);
registerTutorials(server);
Expand Down
209 changes: 1 addition & 208 deletions src/core_plugins/kibana/public/management/sections/objects/_objects.html
View file
Original file line number Diff line number Diff line change
@@ -1,212 +1,5 @@
<kbn-management-app section="kibana" class="kuiView">
<kbn-management-objects class="kuiViewContent kuiViewContent--constrainedWidth">
<!-- Header -->
<div class="kuiViewContentItem kuiBar kuiVerticalRhythm">
<div class="kuiBarSection">
<h1 class="euiTitle">
Edit Saved Objects
</h1>
</div>

<div class="kuiBarSection">
<button
class="kuiButton kuiButton--basic kuiButton--iconText"
data-test-subj="exportAllObjects"
ng-click="exportAll()"
>
<span class="kuiButton__inner">
<span aria-hidden="true" class="kuiButton__icon kuiIcon fa-download"></span>
<span>Export Everything</span>
</span>
</button>

<file-upload
on-read="importAll(fileContents)"
upload-selector="[data-import-saved-objects-button]"
>
<button
class="kuiButton kuiButton--basic kuiButton--iconText"
data-import-saved-objects-button
>
<span class="kuiButton__inner">
<span aria-hidden="true" class="kuiButton__icon kuiIcon fa-upload"></span>
<span>Import</span>
</span>
</button>
</file-upload>
</div>
</div>

<!-- Intro -->
<div class="euiText">
<p class="kuiViewContentItem">
From here you can delete saved objects, such as saved searches. You can also edit the raw data of saved objects. Typically objects are only modified via their associated application, which is probably what you should use instead of this screen. Each tab is limited to 100 results. You can use the filter to find objects not in the default list.
</p>
</div>

<div class="euiSpacer euiSpacer--m"></div>

<!-- Tabs -->
<div class="kuiViewContentItem kuiVerticalRhythm">
<div class="kuiTabs">
<button
class="kuiTab kbn-management-tab"
ng-class="{ 'kuiTab-isSelected': state.tab === service.title }"
ng-repeat="service in services"
ng-click="changeTab(service)"
data-test-subj="objectsTab-{{ service.title }}"
>
{{ service.title }}
<small aria-label="{{:: service.data.length + ' of ' + service.total + ' ' + service.title }}">
({{service.data.length}}<span ng-show="service.total > service.data.length"> of {{service.total}}</span>)
</small>
</button>
</div>
</div>

<!-- ControlledTable -->
<div
class="kuiViewContentItem kuiControlledTable kuiVerticalRhythm"
ng-repeat="service in services track by $index"
ng-show="state.tab === service.title"
>
<!-- ToolBar -->
<div class="kuiToolBar">
<div class="kuiToolBarSearch">
<div
class="kuiToolBarSearchBox"
role="search"
>
<div class="kuiToolBarSearchBox__icon kuiIcon fa-search"></div>
<input
class="kuiToolBarSearchBox__input"
type="text"
placeholder="Search..."
aria-label="Search"
ng-model="managementObjectsController.advancedFilter"
>
</div>
</div>

<div class="kuiToolBarSection">
<!-- Bulk delete button -->
<button
class="kuiButton kuiButton--danger kuiButton--iconText"
ng-click="bulkDelete()"
aria-label="Delete selected objects"
ng-disabled="selectedItems.length == 0"
>
<span class="kuiButton__inner">
<span aria-hidden="true" class="kuiButton__icon kuiIcon fa-trash"></span>
<span>Delete</span>
</span>
</button>

<!-- Bulk export button -->
<button
class="kuiButton kuiButton--basic kuiButton--iconText"
ng-click="bulkExport()"
aria-label="Export selected objects"
ng-disabled="selectedItems.length == 0"
>
<span class="kuiButton__inner">
<span aria-hidden="true" class="kuiButton__icon kuiIcon fa-download"></span>
<span>Export</span>
</span>
</button>
</div>

<div class="kuiToolBarSection">
<!-- We need an empty section for the buttons to be positioned consistently. -->
</div>
</div>

<!-- NoResults -->
<div
class="kuiPanel kuiPanel--centered kuiPanel--withToolBar"
ng-if="!service.data.length"
>
<div class="kuiTableInfo">
No {{service.title}} matched your search.
</div>
</div>

<!-- Table -->
<table class="kuiTable" ng-if="service.data.length" data-test-subj="objectsTable-{{service.title}}">
<thead>
<tr>
<th scope="col" class="kuiTableHeaderCell kuiTableHeaderCell--checkBox">
<div class="kuiTableHeaderCell__liner">
<input
type="checkbox"
aria-label="Select All"
class="kuiCheckBox"
ng-checked="managementObjectsController.areAllRowsChecked()"
ng-click="toggleAll()"
aria-label="{{managementObjectsController.areAllRowsChecked() ? 'Deselect all rows' : 'Select all rows'}}"
>
</div>
</th>

<th scope="col" class="kuiTableHeaderCell">
<div class="kuiTableHeaderCell__liner">
Title
</div>
</th>
</tr>
</thead>

<tbody>
<tr
ng-repeat="item in service.data | orderBy:'title'"
class="kuiTableRow"
data-test-subj="objectsTableRow"
>
<td class="kuiTableRowCell kuiTableRowCell--checkBox">
<div class="kuiTableRowCell__liner">
<input
type="checkbox"
class="kuiCheckBox"
ng-click="toggleItem(item)"
ng-checked="selectedItems.indexOf(item) >= 0"
>
</div>
</td>
<td class="kuiTableRowCell">
<div class="kuiTableRowCell__liner">
<a class="kuiLink" href="" ng-click="edit(service, item)">
{{ item.title }}
</a>

<button
class="kuiMicroButton kuiTableRowHoverReveal"
ng-click="open(item)"
aria-label="View"
tooltip="View in app"
>
<span
aria-hidden="true"
class="kuiIcon fa-eye"
></span>
</button>
</div>
</td>
</tr>

</tbody>
</table>

<!-- ToolBarFooter -->
<div class="kuiToolBarFooter">
<div class="kuiToolBarFooterSection">
<div class="kuiToolBarText" ng-hide="selectedItems.length === 0">
{{ selectedItems.length }} selected
</div>
</div>
<div class="kuiToolBarFooterSection">
<!-- We need an empty section for the buttons to be positioned consistently. -->
</div>
</div>
</div>
<div id="reactSavedObjectsTable"></div>
</kbn-management-objects>
</kbn-management-app>
Loading

0 comments on commit 66318e8

Please sign in to comment.