Repository: metron Updated Branches: refs/heads/master 39bb85676 -> 942aaaf22
http://git-wip-us.apache.org/repos/asf/metron/blob/942aaaf2/metron-interface/metron-alerts/src/app/app.component.ts ---------------------------------------------------------------------- diff --git a/metron-interface/metron-alerts/src/app/app.component.ts b/metron-interface/metron-alerts/src/app/app.component.ts index e5e0bf2..2a3c15e 100644 --- a/metron-interface/metron-alerts/src/app/app.component.ts +++ b/metron-interface/metron-alerts/src/app/app.component.ts @@ -15,15 +15,17 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import {AuthenticationService} from './service/authentication.service'; +declare var $; + @Component({ selector: 'metron-alerts-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) -export class AppComponent { +export class AppComponent implements OnInit { loggedIn = false; constructor(private authService: AuthenticationService) { @@ -31,4 +33,19 @@ export class AppComponent { this.loggedIn = result; }); } + + ngOnInit(): void { + $('body').tooltip({ + trigger : 'hover', + selector: '[data-toggle="tooltip"]' + }); + + $('body').on('show.bs.tooltip ', function () { + $('.tooltip').tooltip('hide'); + }); + + $(document).on('click', function () { + $('.tooltip').tooltip('hide'); + }); + } } http://git-wip-us.apache.org/repos/asf/metron/blob/942aaaf2/metron-interface/metron-alerts/src/app/model/group-order.ts ---------------------------------------------------------------------- diff --git a/metron-interface/metron-alerts/src/app/model/group-order.ts b/metron-interface/metron-alerts/src/app/model/group-order.ts new file mode 100644 index 0000000..c80d448 --- /dev/null +++ b/metron-interface/metron-alerts/src/app/model/group-order.ts @@ -0,0 +1,22 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export class GroupOrder { + sortOrder: 'desc'|'asc' = 'desc'; + groupOrderType: 'count'|'term' = 'term'; +} http://git-wip-us.apache.org/repos/asf/metron/blob/942aaaf2/metron-interface/metron-alerts/src/app/model/group-request.ts ---------------------------------------------------------------------- diff --git a/metron-interface/metron-alerts/src/app/model/group-request.ts b/metron-interface/metron-alerts/src/app/model/group-request.ts new file mode 100644 index 0000000..cdd52c3 --- /dev/null +++ b/metron-interface/metron-alerts/src/app/model/group-request.ts @@ -0,0 +1,26 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import {Group} from './group'; +import {INDEXES} from '../utils/constants'; + +export class GroupRequest { + indices: string[] = INDEXES; + query: string; + scoreField = 'threat:triage:score'; + groups: Group[] = []; +} http://git-wip-us.apache.org/repos/asf/metron/blob/942aaaf2/metron-interface/metron-alerts/src/app/model/group-response.ts ---------------------------------------------------------------------- diff --git a/metron-interface/metron-alerts/src/app/model/group-response.ts b/metron-interface/metron-alerts/src/app/model/group-response.ts new file mode 100644 index 0000000..e45d7f1 --- /dev/null +++ b/metron-interface/metron-alerts/src/app/model/group-response.ts @@ -0,0 +1,23 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import {GroupResult} from './group-result'; + +export class GroupResponse { + groupedBy: string; + groupResults: GroupResult[]; +} http://git-wip-us.apache.org/repos/asf/metron/blob/942aaaf2/metron-interface/metron-alerts/src/app/model/group-result.ts ---------------------------------------------------------------------- diff --git a/metron-interface/metron-alerts/src/app/model/group-result.ts b/metron-interface/metron-alerts/src/app/model/group-result.ts new file mode 100644 index 0000000..dfaa4e2 --- /dev/null +++ b/metron-interface/metron-alerts/src/app/model/group-result.ts @@ -0,0 +1,25 @@ + +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +export class GroupResult { + key: string; + total: number; + score: number; + groupedBy: string; + groupResults: GroupResult[] = []; +} http://git-wip-us.apache.org/repos/asf/metron/blob/942aaaf2/metron-interface/metron-alerts/src/app/model/group.ts ---------------------------------------------------------------------- diff --git a/metron-interface/metron-alerts/src/app/model/group.ts b/metron-interface/metron-alerts/src/app/model/group.ts new file mode 100644 index 0000000..e8ce0d6 --- /dev/null +++ b/metron-interface/metron-alerts/src/app/model/group.ts @@ -0,0 +1,29 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import {GroupOrder} from './group-order'; + +export class Group { + order: GroupOrder; + field: string; + + constructor(field: string) { + this.field = field; + this.order = new GroupOrder(); + } +} http://git-wip-us.apache.org/repos/asf/metron/blob/942aaaf2/metron-interface/metron-alerts/src/app/model/search-request.ts ---------------------------------------------------------------------- diff --git a/metron-interface/metron-alerts/src/app/model/search-request.ts b/metron-interface/metron-alerts/src/app/model/search-request.ts index 3992ced..d8dbcda 100644 --- a/metron-interface/metron-alerts/src/app/model/search-request.ts +++ b/metron-interface/metron-alerts/src/app/model/search-request.ts @@ -1,6 +1,3 @@ -import {SortField} from './sort-field'; -import {DEFAULT_FACETS} from '../utils/constants'; -import {INDEXES} from '../utils/constants'; /** * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreements. See the NOTICE file @@ -18,6 +15,9 @@ import {INDEXES} from '../utils/constants'; * See the License for the specific language governing permissions and * limitations under the License. */ +import {SortField} from './sort-field'; +import {DEFAULT_FACETS, DEFAULT_GROUPS, INDEXES} from '../utils/constants'; + export class SearchRequest { // _source: string[]; //TODO: This needs to be removed from: number; @@ -25,5 +25,5 @@ export class SearchRequest { query: string; size: number; sort: SortField[]; - facetFields: string[] = DEFAULT_FACETS; + facetFields: string[] = Array.from(new Set(DEFAULT_FACETS.concat(DEFAULT_GROUPS))); } http://git-wip-us.apache.org/repos/asf/metron/blob/942aaaf2/metron-interface/metron-alerts/src/app/model/search-response.ts ---------------------------------------------------------------------- diff --git a/metron-interface/metron-alerts/src/app/model/search-response.ts b/metron-interface/metron-alerts/src/app/model/search-response.ts index 7fac1f2..c71f9be 100644 --- a/metron-interface/metron-alerts/src/app/model/search-response.ts +++ b/metron-interface/metron-alerts/src/app/model/search-response.ts @@ -17,9 +17,13 @@ */ import {Alert} from './alert'; import {Facets} from './facets'; +import {SearchResultGroup} from './search-result-group'; export class SearchResponse { total = 0; + groupedBy: string; results: Alert[] = []; facetCounts: Facets; + groups: SearchResultGroup[]; } + http://git-wip-us.apache.org/repos/asf/metron/blob/942aaaf2/metron-interface/metron-alerts/src/app/model/search-result-group.ts ---------------------------------------------------------------------- diff --git a/metron-interface/metron-alerts/src/app/model/search-result-group.ts b/metron-interface/metron-alerts/src/app/model/search-result-group.ts new file mode 100644 index 0000000..82945ea --- /dev/null +++ b/metron-interface/metron-alerts/src/app/model/search-result-group.ts @@ -0,0 +1,26 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import {SearchResponse} from './search-response'; + +export class SearchResultGroup { + key: string; + total: number; + results: SearchResponse[]; + groupedBy: string; + groups: SearchResultGroup[]; +} http://git-wip-us.apache.org/repos/asf/metron/blob/942aaaf2/metron-interface/metron-alerts/src/app/service/search.service.ts ---------------------------------------------------------------------- diff --git a/metron-interface/metron-alerts/src/app/service/search.service.ts b/metron-interface/metron-alerts/src/app/service/search.service.ts index 0e48f6e..71ed516 100644 --- a/metron-interface/metron-alerts/src/app/service/search.service.ts +++ b/metron-interface/metron-alerts/src/app/service/search.service.ts @@ -15,18 +15,19 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import {Http, Headers, RequestOptions} from '@angular/http'; import {Injectable, NgZone} from '@angular/core'; -import {Headers, RequestOptions} from '@angular/http'; import {Observable} from 'rxjs/Rx'; import 'rxjs/add/observable/interval'; import 'rxjs/add/operator/switchMap'; import 'rxjs/add/operator/onErrorResumeNext'; import {HttpUtil} from '../utils/httpUtil'; -import {Http} from '@angular/http'; import {SearchResponse} from '../model/search-response'; import {SearchRequest} from '../model/search-request'; import {AlertSource} from '../model/alert-source'; +import {GroupRequest} from '../model/group-request'; +import {GroupResult} from '../model/group-result'; import {INDEXES} from '../utils/constants'; import {ColumnMetadata} from '../model/column-metadata'; @@ -57,6 +58,14 @@ export class SearchService { constructor(private http: Http, private ngZone: NgZone) { } + groups(groupRequest: GroupRequest): Observable<GroupResult> { + let url = '/api/v1/search/group'; + return this.http.post(url, groupRequest, new RequestOptions({headers: new Headers(this.defaultHeaders)})) + .map(HttpUtil.extractData) + .catch(HttpUtil.handleError) + .onErrorResumeNext(); + } + public getAlert(sourceType: string, alertId: string): Observable<AlertSource> { let url = '/api/v1/search/findOne'; let requestSchema = { guid: alertId, sensorType: sourceType}; http://git-wip-us.apache.org/repos/asf/metron/blob/942aaaf2/metron-interface/metron-alerts/src/app/shared/directives/alert-severity-hexagon.directive.spec.ts ---------------------------------------------------------------------- diff --git a/metron-interface/metron-alerts/src/app/shared/directives/alert-severity-hexagon.directive.spec.ts b/metron-interface/metron-alerts/src/app/shared/directives/alert-severity-hexagon.directive.spec.ts new file mode 100644 index 0000000..b1b3254 --- /dev/null +++ b/metron-interface/metron-alerts/src/app/shared/directives/alert-severity-hexagon.directive.spec.ts @@ -0,0 +1,8 @@ +import { AlertSeverityHexagonDirective } from './alert-severity-hexagon.directive'; + +describe('AlertSeverityHexagonDirective', () => { + it('should create an instance', () => { + const directive = new AlertSeverityHexagonDirective(); + expect(directive).toBeTruthy(); + }); +}); http://git-wip-us.apache.org/repos/asf/metron/blob/942aaaf2/metron-interface/metron-alerts/src/app/shared/directives/alert-severity-hexagon.directive.ts ---------------------------------------------------------------------- diff --git a/metron-interface/metron-alerts/src/app/shared/directives/alert-severity-hexagon.directive.ts b/metron-interface/metron-alerts/src/app/shared/directives/alert-severity-hexagon.directive.ts new file mode 100644 index 0000000..6d8b48c --- /dev/null +++ b/metron-interface/metron-alerts/src/app/shared/directives/alert-severity-hexagon.directive.ts @@ -0,0 +1,45 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { Directive, ElementRef, SimpleChanges, Input, OnChanges } from '@angular/core'; + +@Directive({ + selector: '[appAlertSeverityHexagon]' +}) +export class AlertSeverityHexagonDirective implements OnChanges { + + @Input() severity: number; + + constructor(private el: ElementRef) { } + + ngOnChanges(changes: SimpleChanges) { + if (changes['severity'] && changes['severity'].currentValue) { + this.setColor(this.severity); + } + } + + private setColor(severity: number) { + if ( severity > 100 ) { + this.el.nativeElement.classList.add('error'); + } else if ( severity > 50 ) { + this.el.nativeElement.classList.add('warning'); + } else { + this.el.nativeElement.classList.add('info'); + } + } + +} http://git-wip-us.apache.org/repos/asf/metron/blob/942aaaf2/metron-interface/metron-alerts/src/app/shared/directives/alert-severity.directive.ts ---------------------------------------------------------------------- diff --git a/metron-interface/metron-alerts/src/app/shared/directives/alert-severity.directive.ts b/metron-interface/metron-alerts/src/app/shared/directives/alert-severity.directive.ts index c978d62..370747a 100644 --- a/metron-interface/metron-alerts/src/app/shared/directives/alert-severity.directive.ts +++ b/metron-interface/metron-alerts/src/app/shared/directives/alert-severity.directive.ts @@ -39,14 +39,14 @@ export class AlertSeverityDirective implements OnInit, OnChanges { private setBorder(severity: number) { if ( severity > 69 ) { - this.el.nativeElement.style.borderLeft = '4px solid #D60A15'; - this.el.nativeElement.style.paddingLeft = '10px'; + this.el.nativeElement.style.borderLeft = '3px solid #D60A15'; + this.el.nativeElement.style.paddingLeft = '5px'; } else if ( severity > 39 ) { - this.el.nativeElement.style.borderLeft = '4px solid #D6711D'; - this.el.nativeElement.style.paddingLeft = '10px'; + this.el.nativeElement.style.borderLeft = '3px solid #D6711D'; + this.el.nativeElement.style.paddingLeft = '5px'; } else { - this.el.nativeElement.style.borderLeft = '4px solid #AC9B5A'; - this.el.nativeElement.style.paddingLeft = '10px'; + this.el.nativeElement.style.borderLeft = '3px solid #AC9B5A'; + this.el.nativeElement.style.paddingLeft = '5px'; } } http://git-wip-us.apache.org/repos/asf/metron/blob/942aaaf2/metron-interface/metron-alerts/src/app/shared/group-by/group-by-component-data.ts ---------------------------------------------------------------------- diff --git a/metron-interface/metron-alerts/src/app/shared/group-by/group-by-component-data.ts b/metron-interface/metron-alerts/src/app/shared/group-by/group-by-component-data.ts new file mode 100644 index 0000000..0569f02 --- /dev/null +++ b/metron-interface/metron-alerts/src/app/shared/group-by/group-by-component-data.ts @@ -0,0 +1,28 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export class GroupByComponentData { + name: string; + count: number; + selected = false; + + constructor(name: string, count: number) { + this.name = name; + this.count = count; + } +} http://git-wip-us.apache.org/repos/asf/metron/blob/942aaaf2/metron-interface/metron-alerts/src/app/shared/group-by/group-by.component.html ---------------------------------------------------------------------- diff --git a/metron-interface/metron-alerts/src/app/shared/group-by/group-by.component.html b/metron-interface/metron-alerts/src/app/shared/group-by/group-by.component.html new file mode 100644 index 0000000..3b12cd8 --- /dev/null +++ b/metron-interface/metron-alerts/src/app/shared/group-by/group-by.component.html @@ -0,0 +1,28 @@ +<!-- + Licensed to the Apache Software + Foundation (ASF) under one or more contributor license agreements. See the + NOTICE file distributed with this work for additional information regarding + copyright ownership. The ASF licenses this file to You under the Apache License, + Version 2.0 (the "License"); you may not use this file except in compliance + with the License. You may obtain a copy of the License at + http://www.apache.org/licenses/LICENSE-2.0 + Unless required by applicable law or agreed to in writing, software distributed + under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES + OR CONDITIONS OF ANY KIND, either express or implied. See the License for + the specific language governing permissions and limitations under the License. +--> +<div class='wrapper'> + <div class="mrow"> + <div class="group mr-2"> Group By </div> + <div class='container col mx-0 px-0' [dragula]='"group-bag"' [dragulaModel]='data' [dragulaOptions]="{direction: 'horizontal', removeOnSpill: false}"> + <div #dragEle class="group-by-items" *ngFor="let group of data" (click)="selectGroup(group)" [attr.data-name]="group.name" + data-animation="false" data-toggle="tooltip" data-placement="bottom" title="Drag to Sort" + [ngClass]="{'active': group.selected}"> + <div *ngIf="group.count <= maxGroupCount" class="count"> {{ group.count | number }}</div> + <div *ngIf="group.count > maxGroupCount" class="count"> {{ maxGroupCount | number }} <sup>+</sup> </div> + <div class="name"> {{ group.name | columnNameTranslate | centerEllipses:15 }}</div> + </div> + </div> + <div class="ungroup ml-2" [ngClass]="{'disabled': !groupSelected}" (click)="unGroup()"><span class="ungroup-button"> UnGroup </span></div> + </div> +</div> http://git-wip-us.apache.org/repos/asf/metron/blob/942aaaf2/metron-interface/metron-alerts/src/app/shared/group-by/group-by.component.scss ---------------------------------------------------------------------- diff --git a/metron-interface/metron-alerts/src/app/shared/group-by/group-by.component.scss b/metron-interface/metron-alerts/src/app/shared/group-by/group-by.component.scss new file mode 100644 index 0000000..b42ecb3 --- /dev/null +++ b/metron-interface/metron-alerts/src/app/shared/group-by/group-by.component.scss @@ -0,0 +1,132 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +@import "../../../variables"; + +.groups-container { + width: 100%; + display: flex; +} + +.container .group-by-items { + flex: 1; + margin: 0 4px 4px 4px; + padding: 5px 10px; + background: $mine-shaft-6; + border: 1px solid $mine-shaft-7; + border-radius: 5px; + transition: opacity 0.4s ease-in-out; + + &.active:hover { + background: $picton-blue-1; + } + + &:hover { + background: $mine-shaft; + border: 1px solid $tundora; + } + + &.gu-transit { + background: $eden-1; + border: 1px solid $blue-mine; + } + + .count { + line-height: 1; + color: $silver; + font-size: 24px; + font-weight: 200; + font-family: Roboto; + } + + .name { + font-size: 12px; + color: $gothic; + font-family: Roboto; + } +} + +.container .group-by-items.active { + background: $piction-blue; + color: $white; + + .count { + color: $white + } + + .name { + color: $white + } +} + + +.container .group-by-items { + cursor: move; + cursor: grab; + cursor: -moz-grab; + cursor: -webkit-grab; + + &:hover { + background: $mine-shaft; + border: 1px solid $tundora-2; + } +} + +.gu-mirror { + border-radius: 5px; +} + +.container { + display: flex; + width: 100%; + flex-wrap: wrap; + text-align: center; +} + +.group { + line-height: 3; + color: $dove-grey-2; +} + +.ungroup { + cursor: pointer; + line-height: 4; + font-size: 12px; + color: $curious-blue; + + &.disabled { + opacity: 0.5; + color: $dusty-grey; + cursor: not-allowed; + + .ungroup-button:hover { + background-color: transparent; + border-color: transparent; + } + } + + .ungroup-button { + padding: 3px; + border: 2px solid transparent; + + &:hover { + background: $eden-1; + border: 2px solid $blue-mine; + } + } +} + http://git-wip-us.apache.org/repos/asf/metron/blob/942aaaf2/metron-interface/metron-alerts/src/app/shared/group-by/group-by.component.ts ---------------------------------------------------------------------- diff --git a/metron-interface/metron-alerts/src/app/shared/group-by/group-by.component.ts b/metron-interface/metron-alerts/src/app/shared/group-by/group-by.component.ts new file mode 100644 index 0000000..1c6e633 --- /dev/null +++ b/metron-interface/metron-alerts/src/app/shared/group-by/group-by.component.ts @@ -0,0 +1,92 @@ +import { Component, OnInit, Input, EventEmitter, Output, OnChanges, SimpleChanges } from '@angular/core'; +import { DragulaService } from 'ng2-dragula/ng2-dragula'; +import {Facets} from '../../model/facets'; +import {GroupByComponentData} from './group-by-component-data'; + + +@Component({ + selector: 'app-group-by', + templateUrl: './group-by.component.html', + styleUrls: ['./group-by.component.scss'] +}) +export class GroupByComponent implements OnInit, OnChanges { + maxGroupCount = 99999999; + backgroundColor = '#0F4450'; + border = '1px solid #1B596C'; + + groupSelected = false; + data: GroupByComponentData[] = []; + @Input() facets: Facets = new Facets(); + + @Output() groupsChange = new EventEmitter<string[]>(); + + constructor(private dragulaService: DragulaService) {} + + fireGroupsChange() { + let selectedGroupNames = []; + this.data.reduce((selectedGroups, groupBy) => { + if (groupBy.selected) { + selectedGroups.push(groupBy.name); + } + return selectedGroups; + }, selectedGroupNames); + this.groupsChange.emit(selectedGroupNames); + this.groupSelected = (selectedGroupNames.length !== 0); + } + + ngOnInit() { + this.setTransitStyle(); + } + + ngOnChanges(changes: SimpleChanges) { + if (changes && changes['facets'] && this.facets) { + this.prepareData(); + } + } + + prepareData() { + for (let key of Object.keys(this.facets)) { + let facet = this.facets[key]; + let count = Object.keys(facet).length; + let groupByItem = this.data.filter(groupByData => groupByData.name === key)[0]; + if (!groupByItem) { + groupByItem = new GroupByComponentData(key, count); + this.data.push(groupByItem); + } else { + groupByItem.count = count; + } + } + } + + selectGroup(group: GroupByComponentData) { + group.selected = !group.selected; + this.fireGroupsChange(); + } + + private setTransitStyle() { + this.dragulaService.drag.subscribe(value => { + value[1].style.background = this.backgroundColor; + value[1].style.border = this.border; + value[1].style.textAlign = 'Center'; + + value[1].querySelector('.count').style.fontSize = '20px'; + value[1].querySelector('.name').style.fontSize = '12px'; + + }); + + this.dragulaService.dragend.subscribe(value => { + value[1].style.background = ''; + value[1].style.border = ''; + value[1].style.textAlign = ''; + }); + + this.dragulaService.dropModel.subscribe(value => { + this.fireGroupsChange(); + }); + } + + unGroup() { + this.data.map(group => group.selected = false); + this.fireGroupsChange(); + } +} http://git-wip-us.apache.org/repos/asf/metron/blob/942aaaf2/metron-interface/metron-alerts/src/app/shared/group-by/group-by.module.ts ---------------------------------------------------------------------- diff --git a/metron-interface/metron-alerts/src/app/shared/group-by/group-by.module.ts b/metron-interface/metron-alerts/src/app/shared/group-by/group-by.module.ts new file mode 100644 index 0000000..2f2c7d1 --- /dev/null +++ b/metron-interface/metron-alerts/src/app/shared/group-by/group-by.module.ts @@ -0,0 +1,35 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import {NgModule} from '@angular/core'; +import { DecimalPipe } from '@angular/common'; +import { DragulaModule } from 'ng2-dragula'; + +import {SharedModule} from '../shared.module'; +import {GroupByComponent} from './group-by.component'; + +@NgModule({ + imports: [ + SharedModule, + DragulaModule + ], + exports: [GroupByComponent], + declarations: [GroupByComponent], + providers: [DecimalPipe], +}) +export class GroupByModule { +} http://git-wip-us.apache.org/repos/asf/metron/blob/942aaaf2/metron-interface/metron-alerts/src/app/shared/metron-table/metron-sorter/metron-sorter.component.ts ---------------------------------------------------------------------- diff --git a/metron-interface/metron-alerts/src/app/shared/metron-table/metron-sorter/metron-sorter.component.ts b/metron-interface/metron-alerts/src/app/shared/metron-table/metron-sorter/metron-sorter.component.ts index 4808156..b151e46 100644 --- a/metron-interface/metron-alerts/src/app/shared/metron-table/metron-sorter/metron-sorter.component.ts +++ b/metron-interface/metron-alerts/src/app/shared/metron-table/metron-sorter/metron-sorter.component.ts @@ -15,7 +15,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { Component, Input } from '@angular/core'; +import { Component, Input, OnChanges, SimpleChanges } from '@angular/core'; import {MetronTableDirective, SortEvent} from '../metron-table.directive'; import {Sort} from '../../../utils/enums'; @@ -24,7 +24,10 @@ import {Sort} from '../../../utils/enums'; templateUrl: './metron-sorter.component.html', styleUrls: ['./metron-sorter.component.scss'] }) -export class MetronSorterComponent { +export class MetronSorterComponent implements OnChanges { + + @Input() sortOnCol: string; + @Input() sortOrder: number; @Input() sortBy: string; @Input() type = 'string'; @@ -39,6 +42,15 @@ export class MetronSorterComponent { }); } + ngOnChanges(changes: SimpleChanges) { + if (changes['sortOnCol'] && changes['sortOnCol'].currentValue) { + if (this.sortOnCol === this.sortBy ) { + this.sortAsc = this.sortOrder === Sort.ASC; + this.sortDesc = this.sortOrder === Sort.DSC; + } + } + } + sort() { let order = this.sortAsc ? Sort.DSC : Sort.ASC; this.metronTable.setSort({sortBy: this.sortBy, sortOrder: order, type: this.type}); http://git-wip-us.apache.org/repos/asf/metron/blob/942aaaf2/metron-interface/metron-alerts/src/app/shared/metron-table/metron-table.directive.ts ---------------------------------------------------------------------- diff --git a/metron-interface/metron-alerts/src/app/shared/metron-table/metron-table.directive.ts b/metron-interface/metron-alerts/src/app/shared/metron-table/metron-table.directive.ts index b3ba181..acd62f3 100644 --- a/metron-interface/metron-alerts/src/app/shared/metron-table/metron-table.directive.ts +++ b/metron-interface/metron-alerts/src/app/shared/metron-table/metron-table.directive.ts @@ -65,7 +65,9 @@ export class MetronTableDirective implements AfterViewInit { } else { let parent = this.getParentTR($event.target); - parent.style.backgroundColor = this.rowhighlightColor; + if (!parent.classList.contains('no-hover')) { + parent.style.backgroundColor = this.rowhighlightColor; + } } } http://git-wip-us.apache.org/repos/asf/metron/blob/942aaaf2/metron-interface/metron-alerts/src/app/shared/shared.module.ts ---------------------------------------------------------------------- diff --git a/metron-interface/metron-alerts/src/app/shared/shared.module.ts b/metron-interface/metron-alerts/src/app/shared/shared.module.ts index c2ad78f..e26ec9b 100644 --- a/metron-interface/metron-alerts/src/app/shared/shared.module.ts +++ b/metron-interface/metron-alerts/src/app/shared/shared.module.ts @@ -24,6 +24,7 @@ import { NavContentDirective } from './directives/nav-content.directive'; import { CenterEllipsesPipe } from './pipes/center-ellipses.pipe'; import { AlertSearchDirective } from './directives/alert-search.directive'; import { ColumnNameTranslatePipe } from './pipes/column-name-translate.pipe'; +import { AlertSeverityHexagonDirective } from './directives/alert-severity-hexagon.directive'; @NgModule({ imports: [ @@ -35,7 +36,8 @@ import { ColumnNameTranslatePipe } from './pipes/column-name-translate.pipe'; NavContentDirective, CenterEllipsesPipe, AlertSearchDirective, - ColumnNameTranslatePipe + ColumnNameTranslatePipe, + AlertSeverityHexagonDirective ], exports: [ CommonModule, @@ -45,7 +47,8 @@ import { ColumnNameTranslatePipe } from './pipes/column-name-translate.pipe'; NavContentDirective, CenterEllipsesPipe, AlertSearchDirective, - ColumnNameTranslatePipe + ColumnNameTranslatePipe, + AlertSeverityHexagonDirective ] }) export class SharedModule { } http://git-wip-us.apache.org/repos/asf/metron/blob/942aaaf2/metron-interface/metron-alerts/src/app/utils/constants.ts ---------------------------------------------------------------------- diff --git a/metron-interface/metron-alerts/src/app/utils/constants.ts b/metron-interface/metron-alerts/src/app/utils/constants.ts index 6435b93..b71f89e 100644 --- a/metron-interface/metron-alerts/src/app/utils/constants.ts +++ b/metron-interface/metron-alerts/src/app/utils/constants.ts @@ -15,11 +15,17 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + +import {environment} from '../../environments/environment'; + export const NUM_SAVED_SEARCH = 10; export const ALERTS_RECENT_SEARCH = 'metron-alerts-recent-saved-search'; export const ALERTS_SAVED_SEARCH = 'metron-alerts-saved-search'; export const ALERTS_TABLE_METADATA = 'metron-alerts-table-metadata'; export const ALERTS_COLUMN_NAMES = 'metron-alerts-column-names'; +export let TREE_SUB_GROUP_SIZE = 5; export let DEFAULT_FACETS = ['source:type', 'ip_src_addr', 'ip_dst_addr', 'host', 'enrichments:geo:ip_dst_addr:country']; -export let INDEXES = ['websphere', 'snort', 'asa', 'bro', 'yaf']; +export let DEFAULT_GROUPS = ['source:type', 'ip_src_addr', 'ip_dst_addr', 'host', 'enrichments:geo:ip_dst_addr:country']; +export let INDEXES = environment.indices ? environment.indices.split(',') : ['websphere', 'snort', 'asa', 'bro', 'yaf']; + http://git-wip-us.apache.org/repos/asf/metron/blob/942aaaf2/metron-interface/metron-alerts/src/app/utils/elasticsearch-utils.ts ---------------------------------------------------------------------- diff --git a/metron-interface/metron-alerts/src/app/utils/elasticsearch-utils.ts b/metron-interface/metron-alerts/src/app/utils/elasticsearch-utils.ts index 0896f32..bbd4112 100644 --- a/metron-interface/metron-alerts/src/app/utils/elasticsearch-utils.ts +++ b/metron-interface/metron-alerts/src/app/utils/elasticsearch-utils.ts @@ -56,10 +56,10 @@ export class ElasticsearchUtils { public static extractAlertsData(res: Response): SearchResponse { let response: any = res || {}; - let alertsSearchResponse: SearchResponse = new SearchResponse(); - alertsSearchResponse.total = response['hits']['total']; - alertsSearchResponse.results = response['hits']['hits']; - return alertsSearchResponse; + let searchResponse: SearchResponse = new SearchResponse(); + searchResponse.total = response['hits']['total']; + searchResponse.results = response['hits']['hits']; + return searchResponse; } public static extractESErrorMessage(error: any): any { http://git-wip-us.apache.org/repos/asf/metron/blob/942aaaf2/metron-interface/metron-alerts/src/styles.scss ---------------------------------------------------------------------- diff --git a/metron-interface/metron-alerts/src/styles.scss b/metron-interface/metron-alerts/src/styles.scss index e3a0622..b34fc39 100644 --- a/metron-interface/metron-alerts/src/styles.scss +++ b/metron-interface/metron-alerts/src/styles.scss @@ -20,6 +20,7 @@ @import "_variables.scss"; @import "slider.scss"; @import "metron-dialog.scss"; +@import "hexagon"; body, button { @@ -242,6 +243,13 @@ form } } +.tooltip-inner { + opacity: 0.9; + font-size: 11px; + border-radius: 0px; + border: 1px solid $silver-2; +} + hr { display: block; height: 1px; @@ -249,4 +257,6 @@ hr { border-top: 1px solid $tundora-1; margin: 0.3rem 0; padding: 0; -} \ No newline at end of file +} + +
