[Management] Saved objects to React/EUI!

src/core_plugins/kibana/index.js

@@ -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';
@@ -149,6 +150,7 @@ export default function (kibana) {
       importApi(server);
       exportApi(server);
       homeApi(server);
+      managementApi(server);
       registerSuggestionsApi(server);
       registerFieldFormats(server);
       registerTutorials(server);

src/core_plugins/kibana/public/management/sections/objects/_objects.html

@@ -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>