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,8 +6,29 @@
|
|||
|
||||
<div
|
||||
ng-if="!watchList.forbidden"
|
||||
class="kuiViewContentItem kuiControlledTable kuiVerticalRhythm"
|
||||
class="kuiViewContentItem kuiVerticalRhythm"
|
||||
>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<div class="kuiControlledTable kuiVerticalRhythm">
|
||||
<div class="kuiToolBar">
|
||||
<div class="kuiToolBarSearch">
|
||||
<tool-bar-search-box
|
||||
|
@ -17,10 +38,6 @@
|
|||
</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"
|
||||
|
@ -87,4 +104,5 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</kbn-management-app>
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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');
|
||||
|
|
Loading…
Reference in a new issue