[CYB-156] Parser-by-parser diffOnly logic

flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-page/components/live-view/diff-popup/diff-popup.actions.ts

@@ -0,0 +1,30 @@
+/*
+ * Copyright 2020 - 2022 Cloudera. All Rights Reserved.
+ *
+ * This file is licensed 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.
+ *
+ * This file is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+ * either express or implied. Refer to the License for the specific permissions and
+ * limitations governing your use of the file.
+ */
+
+import {createAction, props, union} from '@ngrx/store';
+
+
+export const ShowDiffModalAction = createAction(
+    '[DiffModal] Diff Modal Shown',
+    props<{ previousDiffValue: string, newDiffValue: string }>()
+);
+
+export const HideDiffModalAction = createAction(
+    '[DiffModal] Diff Modal Hidden'
+);
+
+const actions = union({
+    ShowDiffModalAction,
+    HideDiffModalAction
+});
+
+export type DiffPopupActionsType = typeof actions;

flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-page/components/live-view/diff-popup/diff-popup.component.html

@@ -0,0 +1,15 @@
+<nz-modal
+        nzWidth="80%"
+        [nzVisible]="diffModalVisible$ | async"
+        nzTitle="Difference"
+        nzCentered="true"
+        (nzOnCancel)="handleCancelModal()"
+        (nzOnOk)="handleOkModal()"
+>
+    <ng-container *nzModalContent>
+        <app-text-diff-view
+                [originalModel]="previousDiffValue$ | async"
+                [modifiedModel]="newDiffValue$ | async">
+        </app-text-diff-view>
+    </ng-container>
+</nz-modal>

flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-page/components/live-view/diff-popup/diff-popup.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DiffPopupComponent } from './diff-popup.component';
+
+describe('DiffPopupComponent', () => {
+  let component: DiffPopupComponent;
+  let fixture: ComponentFixture<DiffPopupComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DiffPopupComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DiffPopupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-page/components/live-view/diff-popup/diff-popup.component.ts

@@ -0,0 +1,32 @@
+import {Component} from '@angular/core';
+import {select, Store} from "@ngrx/store";
+import {DiffPopupState} from "./diff-popup.reducers";
+import {HideDiffModalAction} from "./diff-popup.actions";
+import {Observable} from "rxjs";
+import {getDiffModalVisible, getNewDiffValue, getPreviousDiffValue} from "./diff-popup.selectors";
+
+@Component({
+    selector: 'app-diff-popup',
+    templateUrl: './diff-popup.component.html',
+    styleUrls: ['./diff-popup.component.scss']
+})
+export class DiffPopupComponent {
+
+    diffModalVisible$: Observable<boolean>;
+    previousDiffValue$: Observable<string>;
+    newDiffValue$: Observable<string>;
+
+    constructor(private store: Store<DiffPopupState>) {
+        this.diffModalVisible$ = store.pipe(select(getDiffModalVisible));
+        this.previousDiffValue$ = store.pipe(select(getPreviousDiffValue));
+        this.newDiffValue$ = store.pipe(select(getNewDiffValue));
+    }
+
+    handleOkModal() {
+        this.store.dispatch(HideDiffModalAction());
+    }
+
+    handleCancelModal() {
+        this.store.dispatch(HideDiffModalAction());
+    }
+}

flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-page/components/live-view/diff-popup/diff-popup.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {StoreModule} from "@ngrx/store";
+import {reducer} from "./diff-popup.reducers";
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    StoreModule.forFeature('diff-popup', reducer),
+  ]
+})
+export class DiffPopupModule { }

flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-page/components/live-view/diff-popup/diff-popup.reducers.ts

@@ -0,0 +1,50 @@
+/*
+ * Copyright 2020 - 2022 Cloudera. All Rights Reserved.
+ *
+ * This file is licensed 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.
+ *
+ * This file is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+ * either express or implied. Refer to the License for the specific permissions and
+ * limitations governing your use of the file.
+ */
+
+import {DiffPopupActionsType, HideDiffModalAction, ShowDiffModalAction} from "./diff-popup.actions";
+
+export interface DiffPopupState {
+    diffModalShown: boolean;
+    previousDiffValue: string;
+    newDiffValue: string;
+}
+
+export const initialState: DiffPopupState = {
+    diffModalShown: false,
+    previousDiffValue: "",
+    newDiffValue: ""
+};
+
+export function reducer(
+    state: DiffPopupState = initialState,
+    action: DiffPopupActionsType
+): DiffPopupState {
+    switch (action.type) {
+        case ShowDiffModalAction.type: {
+            return {
+                ...state,
+                previousDiffValue: action.previousDiffValue,
+                newDiffValue: action.newDiffValue,
+                diffModalShown: true,
+            };
+        }
+        case HideDiffModalAction.type: {
+            return {
+                ...state,
+                diffModalShown: false,
+            };
+        }
+        default: {
+            return state;
+        }
+    }
+}

flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-page/components/live-view/diff-popup/diff-popup.selectors.ts

@@ -0,0 +1,33 @@
+/*
+ * Copyright 2020 - 2022 Cloudera. All Rights Reserved.
+ *
+ * This file is licensed 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.
+ *
+ * This file is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+ * either express or implied. Refer to the License for the specific permissions and
+ * limitations governing your use of the file.
+ */
+
+import {createSelector} from '@ngrx/store';
+import {DiffPopupState} from "./diff-popup.reducers";
+
+function getDiffPopupState(state: any): DiffPopupState {
+    return state['diff-popup'];
+}
+
+export const getDiffModalVisible = createSelector(
+    getDiffPopupState,
+    (state: DiffPopupState) => state.diffModalShown
+);
+
+export const getPreviousDiffValue = createSelector(
+    getDiffPopupState,
+    (state: DiffPopupState) => state.previousDiffValue
+);
+
+export const getNewDiffValue = createSelector(
+    getDiffPopupState,
+    (state: DiffPopupState) => state.newDiffValue
+);

flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-page/components/live-view/live-view-result/live-view-result.component.html

@@ -14,6 +14,16 @@
   <button nz-button (click)="downloadEntries()" class="download-btn"><i nz-icon nzType="download" nzTheme="outline"></i>Download Output</button>
   <button nz-button (click)="copyOutput()" class="download-btn"><i nz-icon nzType="copy" nzTheme="outline"></i>Copy to Clipboard</button>
   <div *ngFor="let entry of results; index as i">
+    <button nz-button
+            class="parser-by-parser-button"
+            *ngIf="parserByParserViewId === null && entry.parserResults"
+            (click)="enableParserByParserView(i)">Parser-by-Parser View</button>
+    <button nz-button
+            class="parser-by-parser-button"
+            *ngIf="parserByParserViewId === i" (click)="parserByParserViewId = null">
+      <span nz-icon nzType="left"></span>
+      Return to Message Results View
+    </button>
     <nz-card [ngClass]="entry.log.type" [nzBodyStyle]="{ padding: 0 }" *ngIf="parserByParserViewId === null">
       <div nz-row class="output">
         <div nz-col nzSpan="2" class="label">Output</div>
@@ -28,14 +38,9 @@
         <div nz-col nzSpan="2" class="label">Log</div>
         <div nz-col nzSpan="22" class="message">{{ entry.log.message }}</div>
         <button nz-button *ngIf="entry.log.type === 'error'" (click)="onInvestigateParserClicked(entry.log.parserId)">Click to see failed Parser</button>
-        <button nz-button *ngIf="entry.parserResults" (click)="enableParserByParserView(i)">Parser-by-Parser View</button>
         <app-stack-trace *ngIf="entry.log.stackTrace" [stackTraceMsg]="entry.log.stackTrace"></app-stack-trace>
       </div>
     </nz-card>
-    <button *ngIf="parserByParserViewId === i" nz-button nzType="link" (click)="parserByParserViewId = null" style="padding-left: 0; margin-bottom: 1rem;">
-      <i nz-icon nzType="left"></i>
-      Return to Message Results View
-    </button>
     <app-parser-by-parser *ngIf="parserByParserViewId === i"
                           [parserResults]="entry.parserResults"
                           [logMessage]="entry.log.message"

flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-page/components/live-view/live-view-result/live-view-result.component.scss

@@ -68,3 +68,7 @@
   display: flex;
   align-items: flex-end;
 }
+
+.parser-by-parser-button {
+  margin-bottom: 1rem;
+}

flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-page/components/live-view/live-view.module.ts

@@ -36,9 +36,10 @@ import { LiveViewService } from './services/live-view.service';
 import { StackTraceComponent } from './stack-trace/stack-trace.component';
 import { NzTimelineModule } from 'ng-zorro-antd/timeline';
 import { NzResultModule } from 'ng-zorro-antd/result';
+import {NzCheckboxModule} from "ng-zorro-antd/checkbox";
+import {NzIconModule} from "ng-zorro-antd/icon";
 import { SampleDataTextInputComponent } from './sample-data-form/sample-data-text-input/sample-data-text-input.component';
 import { SampleDataTextFolderInputComponent } from './sample-data-form/sample-data-text-folder-input/sample-data-text-folder-input.component';
-import {NzIconModule} from "ng-zorro-antd/icon";
 import {NzToolTipModule} from "ng-zorro-antd/tooltip";
 import {NzStepsModule} from "ng-zorro-antd/steps";
 import {NzTableModule} from "ng-zorro-antd/table";
@@ -48,6 +49,8 @@ import {
 import {NzCollapseModule} from "ng-zorro-antd/collapse";
 import { TextDiffViewComponent } from './text-diff-view/text-diff-view.component';
 import {MonacoEditorModule} from '@materia-ui/ngx-monaco-editor';
+import {DiffPopupComponent} from "./diff-popup/diff-popup.component";
+import {DiffPopupModule} from "./diff-popup/diff-popup.module";
 
 @NgModule({
   declarations: [
@@ -59,33 +62,36 @@ import {MonacoEditorModule} from '@materia-ui/ngx-monaco-editor';
     SampleDataTextInputComponent,
     SampleDataTextFolderInputComponent,
     TextDiffViewComponent,
+    DiffPopupComponent,
+  ],
+  imports: [
+    NzModalModule,
+    CommonModule,
+    FormsModule,
+    StoreModule.forFeature('live-view', reducer),
+    EffectsModule.forFeature([LiveViewEffects]),
+    SampleDataTextFolderInputModule,
+    DiffPopupModule,
+    NzTabsModule,
+    NzFormModule,
+    NzButtonModule,
+    NzRadioModule,
+    NzInputModule,
+    NzSpinModule,
+    NzSwitchModule,
+    NzCardModule,
+    NzPopoverModule,
+    NzTimelineModule,
+    NzResultModule,
+    NzCheckboxModule,
+    ReactiveFormsModule,
+    NzIconModule,
+    NzToolTipModule,
+    NzStepsModule,
+    NzTableModule,
+    NzCollapseModule,
+    MonacoEditorModule,
   ],
-    imports: [
-        NzModalModule,
-        CommonModule,
-        FormsModule,
-        StoreModule.forFeature('live-view', reducer),
-        EffectsModule.forFeature([LiveViewEffects]),
-        SampleDataTextFolderInputModule,
-        NzTabsModule,
-        NzFormModule,
-        NzButtonModule,
-        NzRadioModule,
-        NzInputModule,
-        NzSpinModule,
-        NzSwitchModule,
-        NzCardModule,
-        NzPopoverModule,
-        NzTimelineModule,
-        NzResultModule,
-        ReactiveFormsModule,
-        NzIconModule,
-        NzToolTipModule,
-        NzStepsModule,
-        NzTableModule,
-        NzCollapseModule,
-        MonacoEditorModule,
-    ],
   providers: [
     LiveViewService
   ],

flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-page/components/live-view/models/live-view.model.ts

@@ -23,6 +23,13 @@ export interface EntryParsingResultModel {
   parserResults?: ParserResultsModel[];
 }
 
+export enum ParserFieldStatus {
+  NEW,
+  DIFF,
+  REMOVED,
+  SAME
+}
+
 export interface ParserResultsModel {
   output: {};
   log: {

flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-page/components/live-view/parser-by-parser/parser-by-parser.component.html

@@ -9,11 +9,11 @@
   ~ either express or implied. Refer to the License for the specific permissions and
   ~ limitations governing your use of the file.
   -->
-
 <div class="pbp-container">
+  <label nz-checkbox class="diff-only-checkbox" [(ngModel)]="diffOnly">Differences only</label>
   <nz-timeline class="nz-timeline">
     <nz-timeline-item
-      *ngFor="let parser of parserResults; last as isLast"
+      *ngFor="let parser of parserResults"
       [nzDot]="dotTemplate"
     >
       <h4>
@@ -31,9 +31,19 @@ <h4>
         <div nz-row class="output">
           <div nz-col nzSpan="2" class="label">Output</div>
           <div nz-col nzSpan="22">
-            <div nz-row *ngFor="let item of parser.output | keyvalue">
-              <div nz-col nzSpan="6" class="fieldName">{{ item.key }}:</div>
-              <div nz-col nzSpan="18">{{ item.value }}</div>
+            <div nz-row
+                 *ngFor="let item of parser.output | keyvalue"
+                 [ngClass]="{
+                   'fieldNew': diffOnly && item.value.status === ParserFieldStatus.NEW,
+                   'fieldDiff': diffOnly && item.value.status === ParserFieldStatus.DIFF,
+                   'fieldRemoved': diffOnly && item.value.status === ParserFieldStatus.REMOVED
+                 }">
+              <div nz-col nzSpan="6" nzFlex="2" class="fieldName">{{ item.key }}:</div>
+              <div nz-col nzFlex="6">{{ diffOnly ? item.value.currentValue : item.value }}</div>
+              <button nz-button nz-col nzFlex="1"
+                      class="diff-param-button"
+                      (click)="showDiff(item.value.previousValue, item.value.currentValue)"
+                      *ngIf="diffOnly && item.value.status === ParserFieldStatus.DIFF">Show diff</button>
             </div>
           </div>
         </div>
@@ -75,3 +85,5 @@ <h4 nz-title>Error Message:</h4>
     </nz-result>
   </div>
 </div>
+
+<app-diff-popup></app-diff-popup>