This commit is contained in:
parent
1a20ffc99e
commit
85cf559033
|
@ -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';
|
|
|
@ -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>
|
|
|
@ -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 };
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
});
|
|
|
@ -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
|
|
||||||
|
|
||||||
}
|
|
|
@ -6,83 +6,101 @@
|
||||||
|
|
||||||
<div
|
<div
|
||||||
ng-if="!watchList.forbidden"
|
ng-if="!watchList.forbidden"
|
||||||
class="kuiViewContentItem kuiControlledTable kuiVerticalRhythm"
|
class="kuiViewContentItem kuiVerticalRhythm"
|
||||||
>
|
>
|
||||||
<div class="kuiToolBar">
|
<div class="kuiVerticalRhythm">
|
||||||
<div class="kuiToolBarSearch">
|
<button
|
||||||
<tool-bar-search-box
|
class="kuiButton kuiButton--primary"
|
||||||
filter="watchList.query"
|
ng-click="watchList.onClickCreateThresholdAlert()"
|
||||||
on-filter="watchList.onQueryChange"
|
data-test-subj="createThresholdAlertButton"
|
||||||
></tool-bar-search-box>
|
tooltip="Set up a custom watch in raw JSON"
|
||||||
</div>
|
>
|
||||||
|
Create threshold alert
|
||||||
|
</button>
|
||||||
|
|
||||||
<div class="kuiToolBarSection">
|
<button
|
||||||
<watch-type-select
|
class="kuiButton kuiButton--primary"
|
||||||
class="watchTypeSelect"
|
ng-click="watchList.onClickCreateAdvancedWatch()"
|
||||||
on-change="watchList.onWatchTypeChange"
|
data-test-subj="createAdvancedWatchButton"
|
||||||
></watch-type-select>
|
tooltip="Send an alert on a specific condition"
|
||||||
<button
|
>
|
||||||
class="kuiButton kuiButton--danger"
|
Create advanced watch
|
||||||
ng-disabled="!watchList.hasSelectedWatches"
|
</button>
|
||||||
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>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<watch-table
|
<div class="kuiControlledTable kuiVerticalRhythm">
|
||||||
watches="watchList.pageOfWatches"
|
<div class="kuiToolBar">
|
||||||
watches-being-deleted="watchList.watchesBeingDeleted"
|
<div class="kuiToolBarSearch">
|
||||||
sort-field="watchList.sortField"
|
<tool-bar-search-box
|
||||||
sort-reverse="watchList.sortReverse"
|
filter="watchList.query"
|
||||||
on-sort-change="watchList.onSortChange"
|
on-filter="watchList.onQueryChange"
|
||||||
on-select-change="watchList.onSelectedChange"
|
></tool-bar-search-box>
|
||||||
ng-show="watchList.hasPageOfWatches"
|
</div>
|
||||||
>
|
|
||||||
</watch-table>
|
|
||||||
|
|
||||||
<table-info ng-show="!watchList.hasPageOfWatches">
|
<div class="kuiToolBarSection">
|
||||||
No watches found.
|
<button
|
||||||
</table-info>
|
class="kuiButton kuiButton--danger"
|
||||||
|
ng-disabled="!watchList.hasSelectedWatches"
|
||||||
|
ng-click="watchList.onSelectedWatchesDelete()"
|
||||||
|
data-test-subj="btnDeleteWatches"
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="kuiToolBarFooter">
|
<div class="kuiToolBarSection">
|
||||||
<div class="kuiToolBarFooterSection">
|
<tool-bar-pager-text
|
||||||
<tool-bar-selected-count
|
start-item="watchList.pager.startItem"
|
||||||
count="watchList.selectedWatches.length"
|
end-item="watchList.pager.endItem"
|
||||||
singular-name="watch"
|
total-items="watchList.pager.totalItems"
|
||||||
plural-name="watches"
|
></tool-bar-pager-text>
|
||||||
ng-show="watchList.hasSelectedWatches"
|
<tool-bar-pager-buttons
|
||||||
></tool-bar-selected-count>
|
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 class="kuiToolBarFooterSection">
|
<watch-table
|
||||||
<tool-bar-pager-text
|
watches="watchList.pageOfWatches"
|
||||||
start-item="watchList.pager.startItem"
|
watches-being-deleted="watchList.watchesBeingDeleted"
|
||||||
end-item="watchList.pager.endItem"
|
sort-field="watchList.sortField"
|
||||||
total-items="watchList.pager.totalItems"
|
sort-reverse="watchList.sortReverse"
|
||||||
></tool-bar-pager-text>
|
on-sort-change="watchList.onSortChange"
|
||||||
<tool-bar-pager-buttons
|
on-select-change="watchList.onSelectedChange"
|
||||||
has-previous-page="watchList.pager.hasPreviousPage"
|
ng-show="watchList.hasPageOfWatches"
|
||||||
has-next-page="watchList.pager.hasNextPage"
|
>
|
||||||
on-page-next="watchList.onPageNext"
|
</watch-table>
|
||||||
on-page-previous="watchList.onPagePrevious"
|
|
||||||
></tool-bar-pager-buttons>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -10,14 +10,13 @@ import { InitAfterBindingsWorkaround } from 'ui/compat';
|
||||||
import { Notifier, toastNotifications } from 'ui/notify';
|
import { Notifier, toastNotifications } from 'ui/notify';
|
||||||
import template from './watch_list.html';
|
import template from './watch_list.html';
|
||||||
import '../watch_table';
|
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_control';
|
||||||
import 'ui/pager';
|
import 'ui/pager';
|
||||||
import 'ui/react_components';
|
import 'ui/react_components';
|
||||||
import 'ui/table_info';
|
import 'ui/table_info';
|
||||||
import 'plugins/watcher/components/tool_bar_selected_count';
|
import 'plugins/watcher/components/tool_bar_selected_count';
|
||||||
import 'plugins/watcher/components/forbidden_message';
|
import 'plugins/watcher/components/forbidden_message';
|
||||||
import 'plugins/watcher/components/watch_type_select';
|
|
||||||
import 'plugins/watcher/services/watches';
|
import 'plugins/watcher/services/watches';
|
||||||
import 'plugins/watcher/services/license';
|
import 'plugins/watcher/services/license';
|
||||||
|
|
||||||
|
@ -123,10 +122,18 @@ app.directive('watchList', function ($injector) {
|
||||||
this.selectedWatches = selectedWatches;
|
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}`;
|
const url = `management/elasticsearch/watcher/watches/new-watch/${watchType}`;
|
||||||
kbnUrl.change(url, {});
|
kbnUrl.change(url, {});
|
||||||
}
|
};
|
||||||
|
|
||||||
onSelectedWatchesDelete = () => {
|
onSelectedWatchesDelete = () => {
|
||||||
const watchesBeingDeleted = this.selectedWatches;
|
const watchesBeingDeleted = this.selectedWatches;
|
||||||
|
|
|
@ -23,8 +23,7 @@ export function WatcherPageProvider({ getPageObjects, getService }) {
|
||||||
}
|
}
|
||||||
|
|
||||||
async createWatch(watchName, name) {
|
async createWatch(watchName, name) {
|
||||||
await testSubjects.click('createNewWatch');
|
await testSubjects.click('createAdvancedWatchButton');
|
||||||
await testSubjects.click('AdvancedWatch');
|
|
||||||
await remote.findById('id').type(watchName);
|
await remote.findById('id').type(watchName);
|
||||||
await remote.findById('name').type(name);
|
await remote.findById('name').type(name);
|
||||||
await testSubjects.click('btnSaveWatch');
|
await testSubjects.click('btnSaveWatch');
|
||||||
|
|
Loading…
Reference in a new issue