Replace Watcher's watch-type-select directive with two buttons. (elas…

…tic#19782)
maryia-lapata · Jun 25, 2018 · ae94b09 · ae94b09
1 parent 3e08dbf
commit ae94b09
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 211 deletions.
diff --git a/x-pack/plugins/watcher/public/components/watch_type_select/index.js b/x-pack/plugins/watcher/public/components/watch_type_select/index.js
diff --git a/x-pack/plugins/watcher/public/components/watch_type_select/watch_type_select.html b/x-pack/plugins/watcher/public/components/watch_type_select/watch_type_select.html
diff --git a/x-pack/plugins/watcher/public/components/watch_type_select/watch_type_select.js b/x-pack/plugins/watcher/public/components/watch_type_select/watch_type_select.js
diff --git a/x-pack/plugins/watcher/public/components/watch_type_select/watch_type_select.less b/x-pack/plugins/watcher/public/components/watch_type_select/watch_type_select.less
diff --git a/x-pack/plugins/watcher/public/sections/watch_list/components/watch_list/watch_list.html b/x-pack/plugins/watcher/public/sections/watch_list/components/watch_list/watch_list.html
@@ -6,83 +6,101 @@
 
     <div
       ng-if="!watchList.forbidden"
-      class="kuiViewContentItem kuiControlledTable kuiVerticalRhythm"
+      class="kuiViewContentItem kuiVerticalRhythm"
     >
-      <div class="kuiToolBar">
-        <div class="kuiToolBarSearch">
-          <tool-bar-search-box
-            filter="watchList.query"
-            on-filter="watchList.onQueryChange"
-          ></tool-bar-search-box>
-        </div>
-
-        <div class="kuiToolBarSection">
-          <watch-type-select
-            class="watchTypeSelect"
-            on-change="watchList.onWatchTypeChange"
-          ></watch-type-select>
-          <button
-            class="kuiButton kuiButton--danger"
-            ng-disabled="!watchList.hasSelectedWatches"
-            ng-click="watchList.onSelectedWatchesDelete()"
-            data-test-subj="btnDeleteWatches"
-          >
-            Delete
-          </button>
-        </div>
+      <div class="kuiVerticalRhythm">
+        <button
+          class="kuiButton kuiButton--primary"
+          ng-click="watchList.onClickCreateThresholdAlert()"
+          data-test-subj="createThresholdAlertButton"
+          tooltip="Set up a custom watch in raw JSON"
+        >
+          Create threshold alert
+        </button>
 
-        <div class="kuiToolBarSection">
-          <tool-bar-pager-text
-            start-item="watchList.pager.startItem"
-            end-item="watchList.pager.endItem"
-            total-items="watchList.pager.totalItems"
-          ></tool-bar-pager-text>
-          <tool-bar-pager-buttons
-            has-previous-page="watchList.pager.hasPreviousPage"
-            has-next-page="watchList.pager.hasNextPage"
-            on-page-next="watchList.onPageNext"
-            on-page-previous="watchList.onPagePrevious"
-          ></tool-bar-pager-buttons>
-        </div>
+        <button
+          class="kuiButton kuiButton--primary"
+          ng-click="watchList.onClickCreateAdvancedWatch()"
+          data-test-subj="createAdvancedWatchButton"
+          tooltip="Send an alert on a specific condition"
+        >
+          Create advanced watch
+        </button>
       </div>
 
-      <watch-table
-        watches="watchList.pageOfWatches"
-        watches-being-deleted="watchList.watchesBeingDeleted"
-        sort-field="watchList.sortField"
-        sort-reverse="watchList.sortReverse"
-        on-sort-change="watchList.onSortChange"
-        on-select-change="watchList.onSelectedChange"
-        ng-show="watchList.hasPageOfWatches"
-      >
-      </watch-table>
+      <div class="kuiControlledTable kuiVerticalRhythm">
+        <div class="kuiToolBar">
+          <div class="kuiToolBarSearch">
+            <tool-bar-search-box
+              filter="watchList.query"
+              on-filter="watchList.onQueryChange"
+            ></tool-bar-search-box>
+          </div>
 
-      <table-info ng-show="!watchList.hasPageOfWatches">
-        No watches found.
-      </table-info>
+          <div class="kuiToolBarSection">
+            <button
+              class="kuiButton kuiButton--danger"
+              ng-disabled="!watchList.hasSelectedWatches"
+              ng-click="watchList.onSelectedWatchesDelete()"
+              data-test-subj="btnDeleteWatches"
+            >
+              Delete
+            </button>
+          </div>
 
-      <div class="kuiToolBarFooter">
-        <div class="kuiToolBarFooterSection">
-          <tool-bar-selected-count
-            count="watchList.selectedWatches.length"
-            singular-name="watch"
-            plural-name="watches"
-            ng-show="watchList.hasSelectedWatches"
-          ></tool-bar-selected-count>
+          <div class="kuiToolBarSection">
+            <tool-bar-pager-text
+              start-item="watchList.pager.startItem"
+              end-item="watchList.pager.endItem"
+              total-items="watchList.pager.totalItems"
+            ></tool-bar-pager-text>
+            <tool-bar-pager-buttons
+              has-previous-page="watchList.pager.hasPreviousPage"
+              has-next-page="watchList.pager.hasNextPage"
+              on-page-next="watchList.onPageNext"
+              on-page-previous="watchList.onPagePrevious"
+            ></tool-bar-pager-buttons>
+          </div>
         </div>
 
-        <div class="kuiToolBarFooterSection">
-          <tool-bar-pager-text
-            start-item="watchList.pager.startItem"
-            end-item="watchList.pager.endItem"
-            total-items="watchList.pager.totalItems"
-          ></tool-bar-pager-text>
-          <tool-bar-pager-buttons
-            has-previous-page="watchList.pager.hasPreviousPage"
-            has-next-page="watchList.pager.hasNextPage"
-            on-page-next="watchList.onPageNext"
-            on-page-previous="watchList.onPagePrevious"
-          ></tool-bar-pager-buttons>
+        <watch-table
+          watches="watchList.pageOfWatches"
+          watches-being-deleted="watchList.watchesBeingDeleted"
+          sort-field="watchList.sortField"
+          sort-reverse="watchList.sortReverse"
+          on-sort-change="watchList.onSortChange"
+          on-select-change="watchList.onSelectedChange"
+          ng-show="watchList.hasPageOfWatches"
+        >
+        </watch-table>
+
+        <table-info ng-show="!watchList.hasPageOfWatches">
+          No watches found.
+        </table-info>
+
+        <div class="kuiToolBarFooter">
+          <div class="kuiToolBarFooterSection">
+            <tool-bar-selected-count
+              count="watchList.selectedWatches.length"
+              singular-name="watch"
+              plural-name="watches"
+              ng-show="watchList.hasSelectedWatches"
+            ></tool-bar-selected-count>
+          </div>
+
+          <div class="kuiToolBarFooterSection">
+            <tool-bar-pager-text
+              start-item="watchList.pager.startItem"
+              end-item="watchList.pager.endItem"
+              total-items="watchList.pager.totalItems"
+            ></tool-bar-pager-text>
+            <tool-bar-pager-buttons
+              has-previous-page="watchList.pager.hasPreviousPage"
+              has-next-page="watchList.pager.hasNextPage"
+              on-page-next="watchList.onPageNext"
+              on-page-previous="watchList.onPagePrevious"
+            ></tool-bar-pager-buttons>
+          </div>
         </div>
       </div>
     </div>

diff --git a/x-pack/plugins/watcher/public/sections/watch_list/components/watch_list/watch_list.js b/x-pack/plugins/watcher/public/sections/watch_list/components/watch_list/watch_list.js
@@ -10,14 +10,13 @@ import { InitAfterBindingsWorkaround } from 'ui/compat';
 import { Notifier, toastNotifications } from 'ui/notify';
 import template from './watch_list.html';
 import '../watch_table';
-import { PAGINATION, REFRESH_INTERVALS } from 'plugins/watcher/../common/constants';
+import { PAGINATION, REFRESH_INTERVALS, WATCH_TYPES } from 'plugins/watcher/../common/constants';
 import 'ui/pager_control';
 import 'ui/pager';
 import 'ui/react_components';
 import 'ui/table_info';
 import 'plugins/watcher/components/tool_bar_selected_count';
 import 'plugins/watcher/components/forbidden_message';
-import 'plugins/watcher/components/watch_type_select';
 import 'plugins/watcher/services/watches';
 import 'plugins/watcher/services/license';
 
@@ -123,10 +122,18 @@ app.directive('watchList', function ($injector) {
         this.selectedWatches = selectedWatches;
       };
 
-      onWatchTypeChange = (watchType) => {
+      onClickCreateThresholdAlert = () => {
+        this.goToWatchWizardForType(WATCH_TYPES.THRESHOLD);
+      };
+
+      onClickCreateAdvancedWatch = () => {
+        this.goToWatchWizardForType(WATCH_TYPES.JSON);
+      };
+
+      goToWatchWizardForType = (watchType) => {
         const url = `management/elasticsearch/watcher/watches/new-watch/${watchType}`;
         kbnUrl.change(url, {});
-      }
+      };
 
       onSelectedWatchesDelete = () => {
         const watchesBeingDeleted = this.selectedWatches;

diff --git a/x-pack/test/functional/page_objects/watcher_page.js b/x-pack/test/functional/page_objects/watcher_page.js
@@ -23,8 +23,7 @@ export function WatcherPageProvider({ getPageObjects, getService }) {
     }
 
     async createWatch(watchName, name) {
-      await testSubjects.click('createNewWatch');
-      await testSubjects.click('AdvancedWatch');
+      await testSubjects.click('createAdvancedWatchButton');
       await remote.findById('id').type(watchName);
       await remote.findById('name').type(name);
       await testSubjects.click('btnSaveWatch');