This is an automated email from the ASF dual-hosted git repository.
sardell pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/metron.git
The following commit(s) were added to refs/heads/master by this push:
new bb9a244 METRON-2259 [UI] Hide Resolved and Hide Dismissed toggles not
works when filtering is in manual mode (tiborm via sardell) closes
apache/metron#1532
bb9a244 is described below
commit bb9a244d81feb54bc93456310f57a92d63cea38f
Author: tiborm <[email protected]>
AuthorDate: Sat Oct 12 15:17:40 2019 -0500
METRON-2259 [UI] Hide Resolved and Hide Dismissed toggles not works when
filtering is in manual mode (tiborm via sardell) closes apache/metron#1532
---
.../show-hide-alert-entries.component.spec.ts | 32 ++++++++++++++++++++--
.../show-hide/show-hide-alert-entries.component.ts | 16 +++++++++--
.../show-hide/show-hide.service.spec.ts | 12 +++++++-
.../configure-rows/show-hide/show-hide.service.ts | 6 +++-
.../src/app/shared/switch/switch.component.html | 4 +--
.../src/app/shared/switch/switch.component.scss | 9 ++++++
.../src/app/shared/switch/switch.component.ts | 1 +
7 files changed, 70 insertions(+), 10 deletions(-)
diff --git
a/metron-interface/metron-alerts/src/app/alerts/configure-rows/show-hide/show-hide-alert-entries.component.spec.ts
b/metron-interface/metron-alerts/src/app/alerts/configure-rows/show-hide/show-hide-alert-entries.component.spec.ts
index fdb559c..0b54f44 100644
---
a/metron-interface/metron-alerts/src/app/alerts/configure-rows/show-hide/show-hide-alert-entries.component.spec.ts
+++
b/metron-interface/metron-alerts/src/app/alerts/configure-rows/show-hide/show-hide-alert-entries.component.spec.ts
@@ -38,7 +38,8 @@ describe('ShowHideAlertEntriesComponent', () => {
return {
hideDismissed: false,
hideResolved: false,
- setFilterFor: jasmine.createSpy('setFilterFor')
+ setFilterFor: jasmine.createSpy('setFilterFor'),
+ isAvailable: () => true,
}
} },
]
@@ -105,7 +106,6 @@ describe('ShowHideAlertEntriesComponent', () => {
});
it('should trigger changed event on any toggle changes and propagate state',
() => {
- const serviceSpy = TestBed.get(ShowHideService);
spyOn(component.changed, 'emit');
fixture.detectChanges();
@@ -124,6 +124,32 @@ describe('ShowHideAlertEntriesComponent', () => {
fixture.detectChanges();
expect((component.changed.emit as Spy).calls.argsFor(1)[0]).toEqual({
hideResolved: true, hideDismissed: true });
- })
+ });
+
+ it('should disable toggles when isAvailable returns false', () => {
+ component.showHideService.isAvailable = () => false;
+ fixture.detectChanges();
+
+
expect(fixture.debugElement.queryAll(By.directive(SwitchComponent))[0].componentInstance.disabled).toBe(true);
+
expect(fixture.debugElement.queryAll(By.directive(SwitchComponent))[1].componentInstance.disabled).toBe(true);
+
+ component.showHideService.isAvailable = () => true;
+ fixture.detectChanges();
+
+
expect(fixture.debugElement.queryAll(By.directive(SwitchComponent))[0].componentInstance.disabled).toBe(false);
+
expect(fixture.debugElement.queryAll(By.directive(SwitchComponent))[1].componentInstance.disabled).toBe(false);
+ });
+
+ it('should show warning about the reason of disabled state', () => {
+ component.showHideService.isAvailable = () => false;
+ fixture.detectChanges();
+
+ expect(fixture.debugElement.query(By.css('.warning'))).toBeTruthy();
+
+ component.showHideService.isAvailable = () => true;
+ fixture.detectChanges();
+
+ expect(fixture.debugElement.query(By.css('.warning'))).toBeFalsy();
+ });
});
diff --git
a/metron-interface/metron-alerts/src/app/alerts/configure-rows/show-hide/show-hide-alert-entries.component.ts
b/metron-interface/metron-alerts/src/app/alerts/configure-rows/show-hide/show-hide-alert-entries.component.ts
index b8be2de..c11b774 100644
---
a/metron-interface/metron-alerts/src/app/alerts/configure-rows/show-hide/show-hide-alert-entries.component.ts
+++
b/metron-interface/metron-alerts/src/app/alerts/configure-rows/show-hide/show-hide-alert-entries.component.ts
@@ -26,11 +26,17 @@ export interface ShowHideStateModel {
@Component({
selector: 'app-show-hide-alert-entries',
template: `
+ <div *ngIf="!isAvailable()" class="warning">Hide toggles are not available
in manual filtering mode.</div>
<app-switch [text]="'HIDE Resolved Alerts'"
data-qe-id="hideResolvedAlertsToggle" [selected]="showHideService.hideResolved"
- (onChange)="onVisibilityChanged('RESOLVE', $event)"> </app-switch>
+ (onChange)="onVisibilityChanged('RESOLVE', $event)"
+ [disabled]="!isAvailable()"> </app-switch>
<app-switch [text]="'HIDE Dismissed Alerts'"
data-qe-id="hideDismissedAlertsToggle"
[selected]="showHideService.hideDismissed"
- (onChange)="onVisibilityChanged('DISMISS', $event)"> </app-switch>
- `
+ (onChange)="onVisibilityChanged('DISMISS', $event)"
+ [disabled]="!isAvailable()"> </app-switch>
+ `,
+ styles: [
+ '.warning { font-size: 0.8rem; padding: 0 0.4rem; color: darkorange; }',
+ ]
})
export class ShowHideAlertEntriesComponent {
@@ -46,4 +52,8 @@ export class ShowHideAlertEntriesComponent {
});
}
+ isAvailable() {
+ return this.showHideService.isAvailable();
+ }
+
}
diff --git
a/metron-interface/metron-alerts/src/app/alerts/configure-rows/show-hide/show-hide.service.spec.ts
b/metron-interface/metron-alerts/src/app/alerts/configure-rows/show-hide/show-hide.service.spec.ts
index b234a3d..e2c99d4 100644
---
a/metron-interface/metron-alerts/src/app/alerts/configure-rows/show-hide/show-hide.service.spec.ts
+++
b/metron-interface/metron-alerts/src/app/alerts/configure-rows/show-hide/show-hide.service.spec.ts
@@ -18,14 +18,16 @@
import { TestBed, inject, getTestBed } from '@angular/core/testing';
import { ShowHideService } from './show-hide.service';
-import { QueryBuilder } from 'app/alerts/alerts-list/query-builder';
+import { QueryBuilder, FilteringMode } from
'app/alerts/alerts-list/query-builder';
import { Spy } from 'jasmine-core';
import { Filter } from 'app/model/filter';
+import { serializePath } from '@angular/router/src/url_tree';
class QueryBuilderMock {
addOrUpdateFilter = () => {};
removeFilter = () => {};
+ getFilteringMode = () => {};
}
describe('ShowHideService', () => {
@@ -122,4 +124,12 @@ describe('ShowHideService', () => {
expect(queryBuilderMock.removeFilter).toHaveBeenCalledWith(new
Filter('-alert_status', 'DISMISS', false));
expect(queryBuilderMock.addOrUpdateFilter).not.toHaveBeenCalled();
}));
+
+ it('is available should return false if query builder in in manual mode',
inject([ShowHideService], (service: ShowHideService) => {
+ queryBuilderMock.getFilteringMode = () => FilteringMode.MANUAL;
+ expect(service.isAvailable()).toBe(false);
+
+ queryBuilderMock.getFilteringMode = () => FilteringMode.BUILDER;
+ expect(service.isAvailable()).toBe(true);
+ }));
});
diff --git
a/metron-interface/metron-alerts/src/app/alerts/configure-rows/show-hide/show-hide.service.ts
b/metron-interface/metron-alerts/src/app/alerts/configure-rows/show-hide/show-hide.service.ts
index f00251a..f5244d1 100644
---
a/metron-interface/metron-alerts/src/app/alerts/configure-rows/show-hide/show-hide.service.ts
+++
b/metron-interface/metron-alerts/src/app/alerts/configure-rows/show-hide/show-hide.service.ts
@@ -16,7 +16,7 @@
* limitations under the License.
*/
import { Injectable } from '@angular/core';
-import { QueryBuilder } from 'app/alerts/alerts-list/query-builder';
+import { QueryBuilder, FilteringMode } from
'app/alerts/alerts-list/query-builder';
import { Filter } from 'app/model/filter';
@Injectable({
@@ -67,4 +67,8 @@ export class ShowHideService {
break;
}
}
+
+ isAvailable() {
+ return this.queryBuilder.getFilteringMode() === FilteringMode.BUILDER;
+ }
}
diff --git
a/metron-interface/metron-alerts/src/app/shared/switch/switch.component.html
b/metron-interface/metron-alerts/src/app/shared/switch/switch.component.html
index 14b722e..56942d9 100644
--- a/metron-interface/metron-alerts/src/app/shared/switch/switch.component.html
+++ b/metron-interface/metron-alerts/src/app/shared/switch/switch.component.html
@@ -11,9 +11,9 @@
OR CONDITIONS OF ANY KIND, either express or implied. See the License
for
the specific language governing permissions and limitations under the
License.
-->
-<div>
+<div [class.toggle-disabled]="disabled">
<label class="switch">
- <input type="checkbox" [checked]="selected"
(change)="onValueChange($event)" class="inputdemo">
+ <input type="checkbox" [disabled]="disabled" [checked]="selected"
(change)="onValueChange($event)" class="inputdemo">
<div class="slider round"></div>
</label>
<label> {{ text }}</label>
diff --git
a/metron-interface/metron-alerts/src/app/shared/switch/switch.component.scss
b/metron-interface/metron-alerts/src/app/shared/switch/switch.component.scss
index db1df79..b2611f6 100644
--- a/metron-interface/metron-alerts/src/app/shared/switch/switch.component.scss
+++ b/metron-interface/metron-alerts/src/app/shared/switch/switch.component.scss
@@ -21,6 +21,15 @@ label {
font-family: Roboto-Regular;
}
+.toggle-disabled {
+ opacity: 0.3;
+}
+
+.toggle-disabled .slider,
+.toggle-disabled input {
+ cursor: default !important;
+}
+
.switch {
position: relative;
display: inline-block;
diff --git
a/metron-interface/metron-alerts/src/app/shared/switch/switch.component.ts
b/metron-interface/metron-alerts/src/app/shared/switch/switch.component.ts
index 6708081..32c8aa0 100644
--- a/metron-interface/metron-alerts/src/app/shared/switch/switch.component.ts
+++ b/metron-interface/metron-alerts/src/app/shared/switch/switch.component.ts
@@ -27,6 +27,7 @@ export class SwitchComponent {
@Output() onChange: EventEmitter<Event> = new EventEmitter();
@Input() text: string;
@Input() selected = false;
+ @Input() disabled = false;
onValueChange(event) {
this.onChange.emit(event.target.checked);
