mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 01:13:23 -04:00
[ML] Remove deprecated angularjs directives. (#28564)
* [ML] Remove deprecated show-charts directive. * [ML] Remove deprecated ml-controls-select directive. * [ML] Remove deprecated SCSS import.
This commit is contained in:
Walter Rafelsberger
GitHub
parent
b1e7d5abf2
commit
98ec9e17bd
10 changed files with 4 additions and 199 deletions
|
|
@ -1,3 +1,2 @@
|
|||
@import 'controls';
|
||||
@import 'controls_select/index';
|
||||
@import 'select_severity/index';
|
||||
@import 'select_severity/index';
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import { stateFactoryProvider } from 'plugins/ml/factories/state_factory';
|
|||
import { uiModules } from 'ui/modules';
|
||||
const module = uiModules.get('apps/ml', ['react']);
|
||||
|
||||
import { CheckboxShowCharts, mlCheckboxShowChartsService } from './checkbox_showcharts';
|
||||
import { mlCheckboxShowChartsService } from './checkbox_showcharts';
|
||||
|
||||
module.service('mlCheckboxShowChartsService', function (Private) {
|
||||
const stateFactory = Private(stateFactoryProvider);
|
||||
|
|
@ -20,13 +20,4 @@ module.service('mlCheckboxShowChartsService', function (Private) {
|
|||
showCharts: true
|
||||
});
|
||||
mlCheckboxShowChartsService.initialized = true;
|
||||
})
|
||||
.directive('mlCheckboxShowCharts', function ($injector) {
|
||||
const reactDirective = $injector.get('reactDirective');
|
||||
|
||||
return reactDirective(
|
||||
CheckboxShowCharts,
|
||||
undefined,
|
||||
{ restrict: 'E' },
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
@ -5,4 +5,4 @@
|
|||
*/
|
||||
|
||||
|
||||
import './checkbox_showcharts_directive';
|
||||
import './checkbox_showcharts_service';
|
||||
|
|
|
|||
|
|
@ -1,80 +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 ngMock from 'ng_mock';
|
||||
import expect from 'expect.js';
|
||||
|
||||
describe('ML - <ml-controls-select>', () => {
|
||||
let $scope;
|
||||
let $compile;
|
||||
let $element;
|
||||
|
||||
beforeEach(ngMock.module('kibana'));
|
||||
beforeEach(() => {
|
||||
ngMock.inject(function ($injector) {
|
||||
$compile = $injector.get('$compile');
|
||||
const $rootScope = $injector.get('$rootScope');
|
||||
$scope = $rootScope.$new();
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
$scope.$destroy();
|
||||
});
|
||||
|
||||
it('Plain initialization doesn\'t throw an error', () => {
|
||||
$element = $compile('<ml-controls-select />')($scope);
|
||||
const scope = $element.isolateScope();
|
||||
|
||||
expect(scope.identifier).to.be.an('undefined');
|
||||
expect(scope.label).to.be.an('undefined');
|
||||
expect(scope.options).to.be.an('undefined');
|
||||
expect(scope.selected).to.be.an('undefined');
|
||||
expect(scope.setOption).to.be.a('function');
|
||||
expect(scope.showIcons).to.be.an('undefined');
|
||||
expect(scope.updateFn).to.be.a('undefined');
|
||||
});
|
||||
|
||||
it('Initialize with attributes, call pass-through function', (done) => {
|
||||
$scope.intervalOptions = [
|
||||
{ display: 'testOptionLabel1', val: 'testOptionValue1' },
|
||||
{ display: 'testOptionLabel2', val: 'testOptionValue2' }
|
||||
];
|
||||
$scope.selectedOption = $scope.intervalOptions[1];
|
||||
|
||||
$scope.testUpdateFn = function () {
|
||||
done();
|
||||
};
|
||||
|
||||
$element = $compile(`
|
||||
<ml-controls-select
|
||||
identifier="testIdentifier"
|
||||
label="testLabel"
|
||||
options="intervalOptions"
|
||||
selected="selectedOption"
|
||||
show-icons="false"
|
||||
update-fn="testUpdateFn"
|
||||
/>
|
||||
`)($scope);
|
||||
|
||||
const scope = $element.isolateScope();
|
||||
|
||||
expect(scope.identifier).to.be('testIdentifier');
|
||||
expect(scope.label).to.be('testLabel');
|
||||
expect(scope.options).to.equal($scope.intervalOptions);
|
||||
expect(scope.selected).to.equal($scope.selectedOption);
|
||||
expect(scope.setOption).to.be.a('function');
|
||||
expect(scope.showIcons).to.be.false;
|
||||
expect(scope.updateFn).to.be.a('function');
|
||||
|
||||
// this should call the function passed through ($scope.testUpdateFn)
|
||||
// which in return calls done() to finish the test
|
||||
scope.setOption();
|
||||
});
|
||||
|
||||
});
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
ml-controls-select {
|
||||
.dropdown-group {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
cursor: pointer;
|
||||
}
|
||||
.dropdown-toggle {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
min-width: 120px;
|
||||
font-size: $euiFontSizeXS;
|
||||
|
||||
> li > a {
|
||||
color: $euiColorDarkestShade;;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover, &:active, &:focus {
|
||||
color: $euiColorEmptyShade;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button.dropdown-toggle {
|
||||
text-align: left;
|
||||
margin-bottom: $euiSizeXS;
|
||||
|
||||
// SASSTODO: Needs more specific selectors
|
||||
span {
|
||||
font-size: $euiSizeXS;
|
||||
}
|
||||
}
|
||||
|
||||
button.dropdown-toggle:hover,
|
||||
button.dropdown-toggle:focus {
|
||||
color: $euiColorDarkestShade;
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
@import 'controls_select';
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<label for="select{{identifier}}" class="kuiLabel">{{label}}:</label>
|
||||
<div class="dropdown-group" dropdown>
|
||||
<button id="select{{identifier}}" type="button" class="form-control dropdown-toggle" ng-class="{ 'dropdown-toggle-narrow': narrowStyle }" dropdown-toggle ng-disabled="disabled">
|
||||
<span><i ng-if="showIcons" class="fa fa-exclamation-triangle ml-icon-severity-{{selected.display}}"></i> {{selected.display}}</span> <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li ng-repeat="option in options">
|
||||
<a href="" ng-click="setOption(option)"><i ng-if="showIcons" class="fa fa-exclamation-triangle ml-icon-severity-{{option.display}}"></i> {{option.display}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -1,39 +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.
|
||||
*/
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* AngularJS directive for rendering a select element with threshold levels.
|
||||
*/
|
||||
|
||||
import template from './controls_select.html';
|
||||
|
||||
import { uiModules } from 'ui/modules';
|
||||
const module = uiModules.get('apps/ml');
|
||||
|
||||
module.directive('mlControlsSelect', function () {
|
||||
return {
|
||||
restrict: 'E',
|
||||
scope: {
|
||||
identifier: '@',
|
||||
label: '@',
|
||||
narrowStyle: '=',
|
||||
options: '=',
|
||||
showIcons: '=',
|
||||
selected: '=',
|
||||
updateFn: '='
|
||||
},
|
||||
template,
|
||||
link: function (scope) {
|
||||
scope.setOption = function (d) {
|
||||
if (typeof scope.updateFn === 'function') {
|
||||
scope.updateFn(d);
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
});
|
||||
|
|
@ -1,9 +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 './controls_select_directive.js';
|
||||
|
|
@ -7,6 +7,5 @@
|
|||
|
||||
|
||||
import './checkbox_showcharts';
|
||||
import './controls_select';
|
||||
import './select_interval';
|
||||
import './select_severity';
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue