Replace Watcher's watch-type-select directive with two buttons. (#19782) (#19884)

x-pack/plugins/watcher/public/components/watch_type_select/index.js

@@ -1,7 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import './watch_type_select';

x-pack/plugins/watcher/public/components/watch_type_select/watch_type_select.html

@@ -1,24 +0,0 @@
-<ui-select
-  ng-model="selectedItem.value"
-  on-select="onSelect($select.selected)"
->
-  <ui-select-match placeholder="Create new watch" data-test-subj="createNewWatch">
-    {{$select.selected.typeName}}
-  </ui-select-match>
-  <ui-select-choices repeat="watchType in watchTypes | filter:$select.search">
-    <div class="watchTypeChoice" data-test-subj="{{watchType.typeName.replace(' ' , '')}}">
-      <div class="watchTypeIcon">
-        <span ng-class="watchType.iconClass"></span>
-      </div>
-      <div class="watchTypeDescription">
-        <div
-          class="watchTypeDescription_name"
-          ng-bind-html="watchType.typeName | highlight: $select.search"
-        ></div>
-        <div class="watchTypeDescription_message">
-          <span ng-bind-html="watchType.selectMessage | highlight: $select.search"></span>
-        </div>
-      </div>
-    </div>
-  </ui-select-choices>
-</ui-select>

x-pack/plugins/watcher/public/components/watch_type_select/watch_type_select.js

@@ -1,53 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import { map, filter, sortBy } from 'lodash';
-import { uiModules } from 'ui/modules';
-import template from './watch_type_select.html';
-import 'angular-ui-select';
-import { Watch } from 'plugins/watcher/models/watch';
-import './watch_type_select.less';
-
-const app = uiModules.get('xpack/watcher');
-
-function getWatchTypes() {
-  const allWatchTypes = map(Watch.getWatchTypes(), (WatchType, key) => {
-    return {
-      type: key,
-      typeName: WatchType.typeName,
-      iconClass: WatchType.iconClass,
-      selectMessage: WatchType.selectMessage,
-      sortOrder: WatchType.selectSortOrder,
-      isCreatable: WatchType.isCreatable
-    };
-  });
-  const fitleredWatchTypes = filter(allWatchTypes, watchType => watchType.isCreatable);
-  const result = sortBy(fitleredWatchTypes, watchType => watchType.sortOrder);
-
-  return result;
-}
-
-app.directive('watchTypeSelect', function () {
-  return {
-    restrict: 'E',
-    template: template,
-    scope: {
-      onChange: '='
-    },
-    controller: class ActionTypeSelectController {
-      constructor($scope) {
-        $scope.selectedItem = { value: null };
-
-        $scope.watchTypes = getWatchTypes();
-
-        $scope.onSelect = (watchType) => {
-          $scope.onChange(watchType.type);
-          $scope.selectedItem = { value: null };
-        };
-      }
-    }
-  };
-});

x-pack/plugins/watcher/public/components/watch_type_select/watch_type_select.less

@@ -1,52 +0,0 @@
-@import (reference) "~ui/styles/variables";
-@import (reference) "~ui/styles/mixins";
-@import (reference) "~ui/styles/theme";
-@import (reference) '~ui/styles/variables/colors';
-
-.watchTypeChoice {
-  display: flex;
-}
-
-.watchTypeIcon {
-  flex: 1 0 auto;
-  margin-right: 10px;
-  font-size: 14pt;
-}
-
-.watchTypeDescription {
-  flex: 1 1 auto;
-  width: 100%;
-}
-
-.watchTypeDescription_name {
-  font-weight: bold;
-}
-
-.watchTypeDescription_message {
-  font-size: 9pt;
-}
-
-watch-type-select {
-
-  //*************************** ui-select-tweaks
-  .ui-select-bootstrap > .ui-select-choices {
-    max-height: 350px;
-    width: 300px;
-  }
-
-  .ui-select-bootstrap .ui-select-choices-row>span {
-    padding: 10px 20px;
-  }
-
-  .ui-select-match .btn {
-    border-color: @globalColorBlue;
-    color: @globalColorBlue;
-  }
-
-  .ui-select-placeholder {
-    color:  @globalColorBlue !important;
-    padding-right: 10px;
-  }
-  //*************************** end ui-select-tweaks
-
-}

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="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">
-          <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="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>

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;

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');