[CYB-164] Pipeline CRUD + Inter-cluster communication (#41)

Author: stas-panasiuk

flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/package-lock.json

@@ -10,14 +10,14 @@
  * limitations governing your use of the file.
  */
 
-import { Injectable } from '@angular/core';
-import { Actions, Effect, ofType } from '@ngrx/effects';
-import { Action } from '@ngrx/store';
-import { NzMessageService } from 'ng-zorro-antd/message';
-import { Observable, of } from 'rxjs';
-import { catchError, map, switchMap } from 'rxjs/operators';
+import {Injectable} from '@angular/core';
+import {Actions, Effect, ofType} from '@ngrx/effects';
+import {Action} from '@ngrx/store';
+import {NzMessageService} from 'ng-zorro-antd/message';
+import {Observable, of} from 'rxjs';
+import {catchError, map, switchMap} from 'rxjs/operators';
 
-import { AddParserPageService } from '../services/chain-add-parser-page.service';
+import {AddParserPageService} from '../services/chain-add-parser-page.service';
 
 import * as fromActions from './chain-add-parser-page.actions';
 
@@ -26,7 +26,7 @@ export class AddParserEffects {
   constructor(
     private actions$: Actions,
     private messageService: NzMessageService,
-    private addParserService: AddParserPageService,
+    private addParserService: AddParserPageService
   ) { }
 
   @Effect()

flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-add-parser-page/chain-add-parser-page.effects.ts

@@ -10,9 +10,9 @@
  * limitations governing your use of the file.
  */
 
-import { Action } from '@ngrx/store';
+import {Action} from '@ngrx/store';
 
-import { ChainModel, ChainOperationalModel } from './chain.model';
+import {ChainModel, ChainOperationalModel} from './chain.model';
 
 export const LOAD_CHAINS = '[Chain List] load all start';
 export const LOAD_CHAINS_SUCCESS = '[Chain List] load all success';
@@ -26,8 +26,23 @@ export const SHOW_CREATE_MODAL = '[Chain List] show create modal';
 export const HIDE_CREATE_MODAL = '[Chain List] hide create modal';
 export const SHOW_DELETE_MODAL = '[Chain List] show delete modal';
 export const HIDE_DELETE_MODAL = '[Chain List] hide delete modal';
+export const SHOW_RENAME_SELECTED_PIPELINE_MODAL = '[Chain List] show rename selected pipeline modal';
+export const HIDE_RENAME_PIPELINE_MODAL = '[Chain List] hide rename pipeline modal';
 export const CREATE_CHAIN_SUCCESS = '[Chain List] create item success';
 export const CREATE_CHAIN_FAIL = '[Chain List] create item fail';
+export const LOAD_PIPELINES = '[Chain List] load pipelines start';
+export const LOAD_PIPELINES_SUCCESS = '[Chain List] load pipelines success';
+export const LOAD_PIPELINES_FAIL = '[Chain List] load pipelines fail';
+export const CREATE_PIPELINE = '[Chain List] create pipeline start';
+export const CREATE_PIPELINE_SUCCESS = '[Chain List] create pipeline success';
+export const CREATE_PIPELINE_FAIL = '[Chain List] create pipeline fail';
+export const RENAME_SELECTED_PIPELINE = '[Chain List] rename selected pipeline start';
+export const RENAME_PIPELINE_SUCCESS = '[Chain List] rename pipeline success';
+export const RENAME_PIPELINE_FAIL = '[Chain List] rename pipeline fail';
+export const DELETE_SELECTED_PIPELINE = '[Chain List] delete selected pipeline start';
+export const DELETE_PIPELINE_SUCCESS = '[Chain List] delete pipeline success';
+export const DELETE_PIPELINE_FAIL = '[Chain List] delete pipeline fail';
+export const PIPELINE_CHANGED = '[Chain List] selected pipeline changed';
 
 export class NoopChainAction implements Action {
   readonly type: '';
@@ -92,6 +107,16 @@ export class HideDeleteModalAction implements Action {
   constructor() {}
 }
 
+export class ShowRenameSelectedPipelineModalAction implements Action {
+  readonly type = SHOW_RENAME_SELECTED_PIPELINE_MODAL;
+  constructor() {}
+}
+
+export class HideRenamePipelineModalAction implements Action {
+  readonly type = HIDE_RENAME_PIPELINE_MODAL;
+  constructor() {}
+}
+
 export class CreateChainSuccessAction implements Action {
     readonly type = CREATE_CHAIN_SUCCESS;
     constructor(public chain: ChainModel) {}
@@ -102,6 +127,71 @@ export class CreateChainFailAction implements Action {
     constructor(public error: { message: string }) {}
   }
 
+export class LoadPipelinesAction implements Action {
+    readonly type = LOAD_PIPELINES;
+    constructor() {}
+  }
+
+export class LoadPipelinesSuccessAction implements Action {
+    readonly type = LOAD_PIPELINES_SUCCESS;
+    constructor(public pipelines: string[]) {}
+  }
+
+export class LoadPipelinesFailAction implements Action {
+    readonly type = LOAD_PIPELINES_FAIL;
+    constructor(public error: { message: string }) {}
+  }
+
+export class CreatePipelineAction implements Action {
+    readonly type = CREATE_PIPELINE;
+    constructor(public pipelineName: string) {}
+  }
+
+export class CreatePipelineSuccessAction implements Action {
+    readonly type = CREATE_PIPELINE_SUCCESS;
+    constructor(public newPipelineName, public pipelines: string[]) {}
+  }
+
+export class CreatePipelineFailAction implements Action {
+    readonly type = CREATE_PIPELINE_FAIL;
+    constructor(public error: { message: string }) {}
+  }
+
+export class RenameSelectedPipelineAction implements Action {
+    readonly type = RENAME_SELECTED_PIPELINE;
+    constructor(public newPipelineName: string) {}
+  }
+
+export class RenamePipelineSuccessAction implements Action {
+    readonly type = RENAME_PIPELINE_SUCCESS;
+    constructor(public newPipelineName, public pipelines: string[]) {}
+  }
+
+export class RenamePipelineFailAction implements Action {
+    readonly type = RENAME_PIPELINE_FAIL;
+    constructor(public error: { message: string }) {}
+  }
+
+export class DeleteSelectedPipelineAction implements Action {
+    readonly type = DELETE_SELECTED_PIPELINE;
+    constructor() {}
+  }
+
+export class DeletePipelineSuccessAction implements Action {
+    readonly type = DELETE_PIPELINE_SUCCESS;
+    constructor(public pipelines: string[]) {}
+  }
+
+export class DeletePipelineFailAction implements Action {
+    readonly type = DELETE_PIPELINE_FAIL;
+    constructor(public error: { message: string }) {}
+  }
+
+export class PipelineChangedAction implements Action {
+    readonly type = PIPELINE_CHANGED;
+    constructor(public newPipelineName: string) {}
+}
+
 export type ChainListAction = LoadChainsAction
   | LoadChainsSuccessAction
   | LoadChainsFailAction
@@ -114,6 +204,21 @@ export type ChainListAction = LoadChainsAction
   | CreateChainAction
   | ShowCreateModalAction
   | HideCreateModalAction
+  | ShowRenameSelectedPipelineModalAction
+  | HideRenamePipelineModalAction
   | CreateChainSuccessAction
   | CreateChainFailAction
-  | NoopChainAction;
+  | NoopChainAction
+  | LoadPipelinesAction
+  | LoadPipelinesSuccessAction
+  | LoadPipelinesFailAction
+  | CreatePipelineAction
+  | CreatePipelineSuccessAction
+  | CreatePipelineFailAction
+  | RenameSelectedPipelineAction
+  | RenamePipelineSuccessAction
+  | RenamePipelineFailAction
+  | DeleteSelectedPipelineAction
+  | DeletePipelineSuccessAction
+  | DeletePipelineFailAction
+  | PipelineChangedAction;

flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-list-page/chain-list-page.actions.ts

@@ -42,6 +42,24 @@
     </nz-form-item>
   </form>
 </nz-modal>
+<nz-modal
+  [nzVisible]="isPipelineRenameModalVisible$ | async"
+  nzTitle="Rename Pipeline"
+  (nzOnCancel)="handlePipelineRenameModalCancel()"
+  (nzOnOk)="renamePipeline()"
+  [nzOkDisabled]="!newPipelineName.valid"
+  [nzOkLoading]="isOkLoading$ | async"
+>
+  <form nz-form *nzModalContent [formGroup]="renamePipelineForm" (ngSubmit)='renamePipeline()' [nzLayout]="'vertical'">
+    <nz-form-item>
+      <nz-form-label>Pipeline name:</nz-form-label>
+      <nz-form-control nzErrorTip="Pipeline Name is Required with at least 3 characters" nzSpan="14">
+        <input nz-input data-qe-id="pipeline-name" formControlName="pipelineName" type="text" id="pipelineName"
+               placeholder="{{selectedPipeline$ | async}}">
+      </nz-form-control>
+    </nz-form-item>
+  </form>
+</nz-modal>
 <nz-modal
   *ngIf="deleteChainItem$ | async as deleteChainItem"
   [nzVisible]="isChainDeleteModalVisible$ | async"
@@ -59,6 +77,43 @@
   </ng-template>
 </nz-modal>
 
+<div class="pipeline-select">
+  <span>Select pipeline:</span>
+  <nz-select
+          nzShowSearch
+          nzAllowClear
+          [nzDropdownRender]="newPipelineRenderTemplate"
+          nzPlaceHolder="Select a pipeline"
+          class="pipeline-select-dropdown pipeline-element"
+          [nzDisabled]="(pipelineList$ | async) && (pipelineList$ | async).length < 1"
+          [ngModel]="selectedPipeline$ | async"
+          (ngModelChange)="pipelineChanged($event)">
+    <nz-option *ngFor="let item of (pipelineList$ | async)" [nzLabel]="item" [nzValue]="item"></nz-option>
+  </nz-select>
+  <ng-template #newPipelineRenderTemplate>
+    <nz-divider class="add-pipeline-divider"></nz-divider>
+    <div class="add-pipeline-container">
+      <input type="text" nz-input #inputElement />
+      <a class="add-pipeline-button" (click)="createPipeline(inputElement)">
+        <span nz-icon nzType="plus"></span>
+        Add pipeline
+      </a>
+    </div>
+  </ng-template>
+  <button *ngIf="selectedPipeline$ | async"
+          class="pipeline-element"
+          nz-tooltip="Delete selected pipeline"
+          nz-button
+          nzType="default"
+          (click)="deletePipeline()">Delete</button>
+  <button *ngIf="selectedPipeline$ | async"
+          class="pipeline-element"
+          nz-tooltip="Rename selected pipeline"
+          nz-button
+          nzType="default"
+          (click)="showPipelineRenameModal()">Rename</button>
+</div>
+
 <nz-card nzTitle="Parser Chains" [nzExtra]="AddButton">
   <nz-table #basicTable [nzData]="$any(chainDataSorted$ | async)" [nzShowPagination]="false">
     <thead>

flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-list-page/chain-list-page.component.html

@@ -52,3 +52,28 @@
     height: 30px;
     font-size: 20px;
 }
+
+.pipeline-select {
+    margin: 1rem;
+    width: 40rem;
+    display-model: inline-block;
+}
+
+.pipeline-element {
+    margin: 0 0.25rem;
+}
+
+.pipeline-select-dropdown {
+    width: 12rem;
+}
+.add-pipeline-divider {
+    margin: 4px 0;
+}
+.add-pipeline-container {
+    padding: 8px;
+}
+.add-pipeline-button {
+    flex: 0 0 auto;
+    padding: 8px;
+    display: block;
+}

flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-list-page/chain-list-page.component.scss

@@ -18,13 +18,17 @@ import {BehaviorSubject, combineLatest, Observable, of} from 'rxjs';
 import {switchMap, take} from 'rxjs/operators';
 
 import * as fromActions from './chain-list-page.actions';
-import {LoadChainsAction} from './chain-list-page.actions';
+import {LoadPipelinesAction} from './chain-list-page.actions';
 import {
   ChainListPageState,
   getChains,
-  getCreateModalVisible, getDeleteChain,
+  getCreateModalVisible,
+  getDeleteChain,
   getDeleteModalVisible,
   getLoading,
+  getPipelineRenameModalVisible,
+  getPipelines,
+  getSelectedPipeline,
 } from './chain-list-page.reducers';
 import {ChainModel, ChainOperationalModel} from './chain.model';
 import {NzMessageService} from "ng-zorro-antd/message";
@@ -36,27 +40,35 @@ import {NzMessageService} from "ng-zorro-antd/message";
 })
 export class ChainListPageComponent implements OnInit {
   isChainCreateModalVisible$: Observable<boolean>;
+  isPipelineRenameModalVisible$: Observable<boolean>;
   isOkLoading$: Observable<boolean>;
   chains$: Observable<ChainModel[]>;
   isChainDeleteModalVisible$: Observable<boolean>;
   deleteChainItem$: Observable<ChainModel>;
+  pipelineList$: Observable<string[]>;
   totalRecords = 200;
   chainDataSorted$: Observable<ChainModel[]>;
   sortDescription$: BehaviorSubject<{ key: string, value: string }> = new BehaviorSubject({key: 'name', value: ''});
   newChainForm: UntypedFormGroup;
+  renamePipelineForm: UntypedFormGroup;
+  selectedPipeline$: Observable<string>;
+
 
   constructor(
     private store: Store<ChainListPageState>,
     private fb: UntypedFormBuilder,
     private route: ActivatedRoute,
     private messageService: NzMessageService,
   ) {
-    store.dispatch(new LoadChainsAction());
+    store.dispatch(new LoadPipelinesAction());
     this.chains$ = store.pipe(select(getChains));
     this.isOkLoading$ = store.pipe(select(getLoading));
     this.isChainCreateModalVisible$ = store.pipe(select(getCreateModalVisible));
     this.isChainDeleteModalVisible$ = store.pipe(select(getDeleteModalVisible));
+    this.isPipelineRenameModalVisible$ = store.pipe(select(getPipelineRenameModalVisible));
     this.deleteChainItem$ = this.store.pipe(select(getDeleteChain));
+    this.pipelineList$ = this.store.pipe(select(getPipelines));
+    this.selectedPipeline$ = this.store.pipe(select(getSelectedPipeline));
 
     this.chainDataSorted$ = combineLatest([
       this.chains$,
@@ -66,10 +78,18 @@ export class ChainListPageComponent implements OnInit {
     );
   }
 
+  pipelineChanged($event: string) {
+    this.store.dispatch(new fromActions.PipelineChangedAction($event))
+  }
+
   get chainName() {
     return this.newChainForm.get('chainName') as UntypedFormControl;
   }
 
+  get newPipelineName() {
+    return this.renamePipelineForm.get('pipelineName') as UntypedFormControl;
+  }
+
   showAddChainModal(): void {
     this.store.dispatch(new fromActions.ShowCreateModalAction());
   }
@@ -126,5 +146,31 @@ export class ChainListPageComponent implements OnInit {
     this.newChainForm = this.fb.group({
       chainName: new UntypedFormControl('', [Validators.required, Validators.minLength(3)]),
     });
+    this.renamePipelineForm = this.fb.group({
+      pipelineName: new UntypedFormControl('', [Validators.required, Validators.minLength(3)]),
+    });
+  }
+
+  showPipelineRenameModal() {
+    this.store.dispatch(new fromActions.ShowRenameSelectedPipelineModalAction());
+  }
+
+  handlePipelineRenameModalCancel() {
+    this.store.dispatch(new fromActions.HideRenamePipelineModalAction());
+  }
+
+  createPipeline(inputElement: HTMLInputElement) {
+    let pipelineName = inputElement.value;
+    this.store.dispatch(new fromActions.CreatePipelineAction(pipelineName));
+  }
+
+  deletePipeline() {
+    this.store.dispatch(new fromActions.DeleteSelectedPipelineAction());
+  }
+
+  renamePipeline() {
+    let newPipelineName = this.newPipelineName.value;
+    this.renamePipelineForm.reset();
+    this.store.dispatch(new fromActions.RenameSelectedPipelineAction(newPipelineName));
   }
 }