[GitHub] metron pull request #1103: METRON-1671: Initial PCAP UI
Github user tiborm closed the pull request at: https://github.com/apache/metron/pull/1103 ---
[GitHub] metron pull request #1103: METRON-1671: Initial PCAP UI
Github user sardell commented on a diff in the pull request:
https://github.com/apache/metron/pull/1103#discussion_r205746588
--- Diff:
metron-interface/metron-alerts/src/app/pcap/pcap-packet-line/pcap-packet-line.component.html
---
@@ -0,0 +1,19 @@
+
+{{ip.timestamp.value}} {{ip.timestamp.show}}
--- End diff --
@justinleet [I created a
ticket](https://issues.apache.org/jira/browse/METRON-1698) to get some feedback
on whether we should be displaying both field values as separate fields in the
UI or if we should just choose one. I'm going to hold off on making changes to
this code until we get some feedback from the community.
---
[GitHub] metron pull request #1103: METRON-1671: Initial PCAP UI
Github user tiborm commented on a diff in the pull request:
https://github.com/apache/metron/pull/1103#discussion_r205732629
--- Diff:
metron-interface/metron-alerts/src/app/pcap/pcap-packet-line/pcap-packet-line.component.ts
---
@@ -0,0 +1,55 @@
+/**
+ * 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 { Component, OnInit, Input } from '@angular/core';
+import { PdmlPacket, PdmlProto, PdmlField } from '../model/pdml'
+
+@Component({
+ selector: '[app-pcap-packet-line]',
+ templateUrl: './pcap-packet-line.component.html',
+ styleUrls: ['./pcap-packet-line.component.scss']
+})
+export class PcapPacketLineComponent implements OnInit {
+
+ @Input() packet: PdmlPacket
+
+ ip: {
+timestamp: PdmlField,
+ip_src_addr: PdmlField, ip_src_port: PdmlField,
+ip_dest_addr: PdmlField, ip_dest_port: PdmlField,
+protocol: PdmlField
+ }
+
+ constructor() { }
+
+ ngOnInit() {
+let gen_proto: PdmlProto = this.packet.protos.filter(p => p.name ==
"geninfo")[0]
--- End diff --
Thanks @merrimanr! I addressed this in a new commit.
---
[GitHub] metron pull request #1103: METRON-1671: Initial PCAP UI
Github user tiborm commented on a diff in the pull request:
https://github.com/apache/metron/pull/1103#discussion_r205722021
--- Diff:
metron-interface/metron-alerts/src/app/pcap/pcap-panel/pcap-panel.component.ts
---
@@ -0,0 +1,65 @@
+import { Component, OnInit, Input } from '@angular/core';
--- End diff --
Thanks, we added license headers.
---
[GitHub] metron pull request #1103: METRON-1671: Initial PCAP UI
Github user tiborm commented on a diff in the pull request:
https://github.com/apache/metron/pull/1103#discussion_r205721981
--- Diff:
metron-interface/metron-alerts/src/app/pcap/pcap-panel/pcap-panel.component.spec.ts
---
@@ -0,0 +1,51 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
--- End diff --
Thanks, we added license headers.
---
[GitHub] metron pull request #1103: METRON-1671: Initial PCAP UI
Github user tiborm commented on a diff in the pull request:
https://github.com/apache/metron/pull/1103#discussion_r205721365
--- Diff:
metron-interface/metron-alerts/src/app/pcap/pcap-packet/pcap-packet.component.ts
---
@@ -0,0 +1,22 @@
+import { Component, OnInit, Input } from '@angular/core';
--- End diff --
Thanks, we added license headers.
---
[GitHub] metron pull request #1103: METRON-1671: Initial PCAP UI
Github user tiborm commented on a diff in the pull request:
https://github.com/apache/metron/pull/1103#discussion_r205715003
--- Diff:
metron-interface/metron-alerts/src/app/pcap/pcap-list/pcap-list.component.spec.ts
---
@@ -0,0 +1,53 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
--- End diff --
Thanks, we added license headers.
---
[GitHub] metron pull request #1103: METRON-1671: Initial PCAP UI
Github user tiborm commented on a diff in the pull request:
https://github.com/apache/metron/pull/1103#discussion_r205714935
--- Diff:
metron-interface/metron-alerts/src/app/pcap/pcap-filters/pcap-filters.component.ts
---
@@ -0,0 +1,24 @@
+import { Component, OnInit, Input, Output, EventEmitter } from
'@angular/core';
--- End diff --
Thanks, we added license headers.
---
[GitHub] metron pull request #1103: METRON-1671: Initial PCAP UI
Github user tiborm commented on a diff in the pull request:
https://github.com/apache/metron/pull/1103#discussion_r205714876
--- Diff:
metron-interface/metron-alerts/src/app/pcap/pcap-filters/pcap-filters.component.spec.ts
---
@@ -0,0 +1,29 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
--- End diff --
Thanks, we added license headers.
---
[GitHub] metron pull request #1103: METRON-1671: Initial PCAP UI
Github user justinleet commented on a diff in the pull request:
https://github.com/apache/metron/pull/1103#discussion_r205108455
--- Diff:
metron-interface/metron-alerts/src/app/pcap/pcap-packet-line/pcap-packet-line.component.html
---
@@ -0,0 +1,19 @@
+
+{{ip.timestamp.value}} {{ip.timestamp.show}}
--- End diff --
This looks like the culprit for the double timestamp/data showing
---
[GitHub] metron pull request #1103: METRON-1671: Initial PCAP UI
Github user merrimanr commented on a diff in the pull request:
https://github.com/apache/metron/pull/1103#discussion_r204541945
--- Diff:
metron-interface/metron-alerts/src/app/pcap/pcap-panel/pcap-panel.component.ts
---
@@ -0,0 +1,78 @@
+/**
+ * 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 { Component, OnInit, Input } from '@angular/core';
+
+import { PcapService, PcapStatusResponse } from '../service/pcap.service'
+import { PcapRequest } from '../model/pcap.request'
+import { Pdml } from '../model/pdml'
+import {Subscription} from "rxjs/Rx";
+
+@Component({
+ selector: 'app-pcap-panel',
+ templateUrl: './pcap-panel.component.html',
+ styleUrls: ['./pcap-panel.component.scss']
+})
+export class PcapPanelComponent implements OnInit {
+
+ @Input() pdml: Pdml = null;
+
+ @Input() pcapRequest: PcapRequest;
+
+ statusSubscription: Subscription;
+ queryRunning: boolean = false;
+ progressWidth: number = 0;
+ selectedPage: number = 1;
+
+ constructor(private pcapService: PcapService ) { }
+
+ ngOnInit() {
+ }
+
+ onSearch(pcapRequest) {
+console.log(pcapRequest);
+this.pdml = null;
+this.progressWidth = 0;
+this.pcapService.submitRequest(pcapRequest).subscribe(id => {
+ this.queryRunning = true;
+ this.statusSubscription =
this.pcapService.pollStatus(id).subscribe((statusResponse: PcapStatusResponse)
=> {
+if ('SUCCEEDED' === statusResponse.jobStatus) {
+ this.statusSubscription.unsubscribe();
+ this.queryRunning = false;
+ this.pcapService.getPackets(id,
this.selectedPage).toPromise().then(pdml => {
+this.pdml = pdml;
+ });
+} else if (this.progressWidth < 100) {
+ this.progressWidth = Math.trunc(statusResponse.percentComplete);
+}
+ });
+});
+
+//
this.pcapService.getTestPackets(this.pcapRequest).subscribe(response => {
--- End diff --
Commented code.
---
[GitHub] metron pull request #1103: METRON-1671: Initial PCAP UI
Github user merrimanr commented on a diff in the pull request: https://github.com/apache/metron/pull/1103#discussion_r204541854 --- Diff: metron-interface/metron-alerts/src/app/pcap/pcap-panel/pcap-panel.component.html --- @@ -0,0 +1,39 @@ + + + + + + --- End diff -- Commented code should be removed. ---
[GitHub] metron pull request #1103: METRON-1671: Initial PCAP UI
Github user merrimanr commented on a diff in the pull request:
https://github.com/apache/metron/pull/1103#discussion_r204541762
--- Diff:
metron-interface/metron-alerts/src/app/pcap/pcap-packet-line/pcap-packet-line.component.ts
---
@@ -0,0 +1,55 @@
+/**
+ * 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 { Component, OnInit, Input } from '@angular/core';
+import { PdmlPacket, PdmlProto, PdmlField } from '../model/pdml'
+
+@Component({
+ selector: '[app-pcap-packet-line]',
+ templateUrl: './pcap-packet-line.component.html',
+ styleUrls: ['./pcap-packet-line.component.scss']
+})
+export class PcapPacketLineComponent implements OnInit {
+
+ @Input() packet: PdmlPacket
+
+ ip: {
+timestamp: PdmlField,
+ip_src_addr: PdmlField, ip_src_port: PdmlField,
+ip_dest_addr: PdmlField, ip_dest_port: PdmlField,
+protocol: PdmlField
+ }
+
+ constructor() { }
+
+ ngOnInit() {
+let gen_proto: PdmlProto = this.packet.protos.filter(p => p.name ==
"geninfo")[0]
--- End diff --
These variables do not match the style used across Metron in Typescript
files. We generally follow the [Angular](https://angular.io/guide/styleguide)
style guide because this is an Angular application but I'm not sure we have
officially agreed on that as a community in a discussion thread. I will get
that going.
I'm fairly confident that this won't match whatever style we choose so I
would suggest we make it match our current codebase in the meantime.
---
[GitHub] metron pull request #1103: METRON-1671: Initial PCAP UI
Github user justinleet commented on a diff in the pull request:
https://github.com/apache/metron/pull/1103#discussion_r204532402
--- Diff:
metron-interface/metron-alerts/src/app/pcap/pcap-panel/pcap-panel.component.ts
---
@@ -0,0 +1,78 @@
+/**
+ * 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 { Component, OnInit, Input } from '@angular/core';
+
+import { PcapService, PcapStatusResponse } from '../service/pcap.service'
+import { PcapRequest } from '../model/pcap.request'
+import { Pdml } from '../model/pdml'
+import {Subscription} from "rxjs/Rx";
+
+@Component({
+ selector: 'app-pcap-panel',
+ templateUrl: './pcap-panel.component.html',
+ styleUrls: ['./pcap-panel.component.scss']
+})
+export class PcapPanelComponent implements OnInit {
+
+ @Input() pdml: Pdml = null;
+
+ @Input() pcapRequest: PcapRequest;
+
+ statusSubscription: Subscription;
+ queryRunning: boolean = false;
+ progressWidth: number = 0;
+ selectedPage: number = 1;
+
+ constructor(private pcapService: PcapService ) { }
+
+ ngOnInit() {
+ }
+
+ onSearch(pcapRequest) {
+console.log(pcapRequest);
+this.pdml = null;
+this.progressWidth = 0;
+this.pcapService.submitRequest(pcapRequest).subscribe(id => {
+ this.queryRunning = true;
+ this.statusSubscription =
this.pcapService.pollStatus(id).subscribe((statusResponse: PcapStatusResponse)
=> {
+if ('SUCCEEDED' === statusResponse.jobStatus) {
--- End diff --
We also need to handle FAILED and KILLED states
---
[GitHub] metron pull request #1103: METRON-1671: Initial PCAP UI
Github user cestella commented on a diff in the pull request:
https://github.com/apache/metron/pull/1103#discussion_r204137964
--- Diff:
metron-interface/metron-alerts/src/app/pcap/pcap-list/pcap-list.component.ts ---
@@ -0,0 +1,22 @@
+import { Component, OnInit, Input } from '@angular/core';
--- End diff --
we need a license header here
---
[GitHub] metron pull request #1103: METRON-1671: Initial PCAP UI
Github user cestella commented on a diff in the pull request:
https://github.com/apache/metron/pull/1103#discussion_r204138121
--- Diff:
metron-interface/metron-alerts/src/app/pcap/pcap-packet-line/pcap-packet-line.component.spec.ts
---
@@ -0,0 +1,1266 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
--- End diff --
we need a license header here
---
[GitHub] metron pull request #1103: METRON-1671: Initial PCAP UI
Github user cestella commented on a diff in the pull request:
https://github.com/apache/metron/pull/1103#discussion_r204137924
--- Diff:
metron-interface/metron-alerts/src/app/pcap/pcap-list/pcap-list.component.spec.ts
---
@@ -0,0 +1,53 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
--- End diff --
we need a license header here
---
[GitHub] metron pull request #1103: METRON-1671: Initial PCAP UI
Github user cestella commented on a diff in the pull request:
https://github.com/apache/metron/pull/1103#discussion_r204138341
--- Diff:
metron-interface/metron-alerts/src/app/pcap/service/pcap.service.spec.ts ---
@@ -0,0 +1,1735 @@
+import { TestBed, async, inject } from '@angular/core/testing';
--- End diff --
we need a license header here
---
[GitHub] metron pull request #1103: METRON-1671: Initial PCAP UI
Github user cestella commented on a diff in the pull request:
https://github.com/apache/metron/pull/1103#discussion_r204138476
--- Diff:
metron-interface/metron-alerts/src/app/pcap/service/pcap.service.ts ---
@@ -0,0 +1,10186 @@
+import {Injectable, NgZone} from '@angular/core';
--- End diff --
we need a license header here
---
[GitHub] metron pull request #1103: METRON-1671: Initial PCAP UI
Github user cestella commented on a diff in the pull request:
https://github.com/apache/metron/pull/1103#discussion_r204138196
--- Diff:
metron-interface/metron-alerts/src/app/pcap/pcap-packet/pcap-packet.component.ts
---
@@ -0,0 +1,22 @@
+import { Component, OnInit, Input } from '@angular/core';
--- End diff --
we need a license header here
---
[GitHub] metron pull request #1103: METRON-1671: Initial PCAP UI
Github user cestella commented on a diff in the pull request:
https://github.com/apache/metron/pull/1103#discussion_r204137821
--- Diff:
metron-interface/metron-alerts/src/app/pcap/pcap-filters/pcap-filters.component.spec.ts
---
@@ -0,0 +1,29 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
--- End diff --
Some of these .ts files don't have license headers, how is this passing the
rat check? Do we have a rat exclusion that is too broad?
---
[GitHub] metron pull request #1103: METRON-1671: Initial PCAP UI
Github user cestella commented on a diff in the pull request:
https://github.com/apache/metron/pull/1103#discussion_r204138081
--- Diff:
metron-interface/metron-alerts/src/app/pcap/pcap-packet-line/pcap-packet-line.component.ts
---
@@ -0,0 +1,38 @@
+import { Component, OnInit, Input } from '@angular/core';
--- End diff --
we need a license header here
---
[GitHub] metron pull request #1103: METRON-1671: Initial PCAP UI
Github user cestella commented on a diff in the pull request:
https://github.com/apache/metron/pull/1103#discussion_r204138244
--- Diff:
metron-interface/metron-alerts/src/app/pcap/pcap-panel/pcap-panel.component.spec.ts
---
@@ -0,0 +1,51 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
--- End diff --
we need a license header here
---
[GitHub] metron pull request #1103: METRON-1671: Initial PCAP UI
Github user cestella commented on a diff in the pull request:
https://github.com/apache/metron/pull/1103#discussion_r204138294
--- Diff:
metron-interface/metron-alerts/src/app/pcap/pcap-panel/pcap-panel.component.ts
---
@@ -0,0 +1,65 @@
+import { Component, OnInit, Input } from '@angular/core';
--- End diff --
we need a license header here
---
[GitHub] metron pull request #1103: METRON-1671: Initial PCAP UI
Github user cestella commented on a diff in the pull request:
https://github.com/apache/metron/pull/1103#discussion_r204137868
--- Diff:
metron-interface/metron-alerts/src/app/pcap/pcap-filters/pcap-filters.component.ts
---
@@ -0,0 +1,24 @@
+import { Component, OnInit, Input, Output, EventEmitter } from
'@angular/core';
--- End diff --
we need a license header here
---
[GitHub] metron pull request #1103: METRON-1671: Initial PCAP UI
Github user tiborm closed the pull request at: https://github.com/apache/metron/pull/1103 ---
[GitHub] metron pull request #1103: METRON-1671: Initial PCAP UI
GitHub user tiborm reopened a pull request: https://github.com/apache/metron/pull/1103 METRON-1671: Initial PCAP UI ## Contributor Comments This PR contains the initial cut of PCAP UI. https://user-images.githubusercontent.com/2437400/42747095-28d510bc-88db-11e8-8501-98c82f6ec521.png;> The user is able to submit a PCAP process job by the search button (magnifier icon) at the top of the page. In the same filter bar User is able to narrow the result set by filtering to the following fields: - IP Source Address - IP Source Port - IP Dest Address - IP Dest Port - Protocol - Include Reverse Traffic - Free text filtering While the PCAP job is in progress a progress bar shows up below the filter bar. (Sorry, having no screenshot about it.) https://user-images.githubusercontent.com/2437400/42747099-2cbd9db6-88db-11e8-8be8-7f2bb2971fe3.png;> The result of the PCAP processing is visualized in a grid. User able to open each record to get access to the details of the packet. # Running tests If you like to run the unit tests run: npm install npm test For addition info please check the readme.md in metron-alerts. ## Pull Request Checklist Thank you for submitting a contribution to Apache Metron. Please refer to our [Development Guidelines](https://cwiki.apache.org/confluence/pages/viewpage.action?pageId=61332235) for the complete guide to follow for contributions. Please refer also to our [Build Verification Guidelines](https://cwiki.apache.org/confluence/display/METRON/Verifying+Builds?show-miniview) for complete smoke testing guides. In order to streamline the review of the contribution we ask you follow these guidelines and ask you to double check the following: ### For all changes: - [x] Is there a JIRA ticket associated with this PR? If not one needs to be created at [Metron Jira](https://issues.apache.org/jira/browse/METRON/?selectedTab=com.atlassian.jira.jira-projects-plugin:summary-panel). - [x] Does your PR title start with METRON- where is the JIRA number you are trying to resolve? Pay particular attention to the hyphen "-" character. - [x] Has your PR been rebased against the latest commit within the target branch (typically master)? ### For code changes: - [x] Have you included steps to reproduce the behavior or problem that is being changed or addressed? - [x] Have you included steps or a guide to how the change may be verified and tested manually? - [x] Have you ensured that the full suite of tests and checks have been executed in the root metron folder via: ``` mvn -q clean integration-test install && dev-utilities/build-utils/verify_licenses.sh ``` - [x] Have you written or updated unit tests and or integration tests to verify your changes? - [ ] If adding new dependencies to the code, are these dependencies licensed in a way that is compatible for inclusion under [ASF 2.0](http://www.apache.org/legal/resolved.html#category-a)? - [x] Have you verified the basic functionality of the build by building and running locally with Vagrant full-dev environment or the equivalent? ### For documentation related changes: - [ ] Have you ensured that format looks appropriate for the output in which it is rendered by building and verifying the site-book? If not then run the following commands and the verify changes via `site-book/target/site/index.html`: ``` cd site-book mvn site ``` Note: Please ensure that once the PR is submitted, you check travis-ci for build issues and submit an update to your PR as soon as possible. It is also recommended that [travis-ci](https://travis-ci.org) is set up for your personal repository such that your branches are built there before submitting a pull request. You can merge this pull request into a Git repository by running: $ git pull https://github.com/tiborm/metron feature/METRON-1554-pcap-query-panel Alternatively you can review and apply these changes as the patch at: https://github.com/apache/metron/pull/1103.patch To close this pull request, make a commit to your master/trunk branch with (at least) the following in the commit message: This closes #1103 ---
