Sync code3.0.0-ONAP1.3.0casablanca

Sync the code between repositories

Change-Id: Ib7ee4d0e0f53b58a9bf97dadb15e094789b4f915
Issue-ID: SDC-1874
Signed-off-by: Eran (ev672n), Vosk <ev672n@att.com>

25 files changed, 461 insertions, 347 deletions

diff --git a/public/src/app/bar-icons/bar-icons.component.html b/public/src/app/bar-icons/bar-icons.component.html
index 761a5cb..b855ede 100644
--- a/public/src/app/bar-icons/bar-icons.component.html
+++ b/public/src/app/bar-icons/bar-icons.component.html
@@ -15,7 +15,7 @@
       <hr>
 
       <button mat-icon-button (click)="enableImports()" data-tests-id="import-rules" pTooltip="Import" tooltipPosition="top" [disabled]="store.viewOnly">
-        <span style="width: 100%;
+        <span [style.color]="store.expandImports[store.tabIndex] ? '#009FDB' : '#5a5a5a'" style="width: 100%;
             color:#5a5a5a;
                 height: 100%;
                 display: flex;
@@ -26,9 +26,9 @@
       <hr>
     </div>
 
-    <button mat-icon-button (click)="enableSetting()" data-tests-id="setting-gear" [style.color]="this.store.expandAdvancedSetting[store.tabIndex] ? '#009FDB' : 'black'"
+    <button mat-icon-button (click)="enableSetting()" data-tests-id="setting-gear"
       pTooltip="Settings" tooltipPosition="top">
-      <span style="width: 100%;
+      <span [style.color]="this.store.expandAdvancedSetting[store.tabIndex] ? '#009FDB' : '#5a5a5a'" style="width: 100%;
           color:#5a5a5a;
           height: 100%;
           display: flex;
@@ -47,7 +47,9 @@
   <!-- advanced setting -->
   <div class="setting" *ngIf="store.expandAdvancedSetting[store.tabIndex]">
     <div *mobxAutorun style="width: 100%;" [class]="tabName+'-setting-list'">
-      <div style="font-size: 1.5em; padding: 0 12px;">{{tabName}} Advanced Setting</div>
+      <div style="font-size: 1.5em; padding: 0 12px;">
+        {{tabName}} Advanced Settings
+      </div>
       <form #cdumpConfForm="ngForm">
         <div *ngFor="let prop of store.configurationForm" class="field" [id]="prop.name">
           <div style="display: flex;">
diff --git a/public/src/app/diagram/diagram.component.html b/public/src/app/diagram/diagram.component.html
index 7585428..c813a3c 100644
--- a/public/src/app/diagram/diagram.component.html
+++ b/public/src/app/diagram/diagram.component.html
@@ -1,7 +1,6 @@
 <div style="overflow:auto; height:450px; padding: 0 1em; border: 1px solid #d9d9d9;">
-  <svg id="diagram" #diagram align="center" #svgContainer>
-    <svg width="100%" height="1300px" preserveAspectRatio="xMaxYMin meet" *ngFor="let item of list; let i = index" style="padding: 1em 0;"
-      align="center">
+  <svg id="diagram" #diagram align="center" #svgContainer [attr.height.px]="(list.length * 45) + 50">
+    <svg width="100%" height="2000px" preserveAspectRatio="xMaxYMin meet" *ngFor="let item of list; let i = index" align="center">
 
       <svg [attr.width]="maxLengthLeft * 10">
         <text text-anchor="start" x="0" [attr.y]="40 * (i+1)" font-size="12" dy="0">
@@ -14,18 +13,18 @@
         </text>
       </svg>
 
-      <circle stroke="#8BC34A" fill="#8BC34A" [attr.cx]="maxLengthLeft * 8" [attr.cy]="44 * (i+1)" r="5" />
+      <circle stroke="#8BC34A" fill="#8BC34A" [attr.cx]="maxLengthLeft * 8" [attr.cy]="40 * (i+1)" r="5" />
 
-      <line [attr.x1]="maxLengthLeft * 8" [attr.y1]="44 * (i+1)" [attr.x2]="maxWidth - maxLengthRight * 8 - 30" [attr.y2]="44 * (i+1)"
+      <line [attr.x1]="maxLengthLeft * 8" [attr.y1]="40 * (i+1)" [attr.x2]="maxWidth - maxLengthRight * 8 - 60" [attr.y2]="40 * (i+1)"
         stroke-width="2" stroke="black" stroke-dasharray="5, 5" stroke="#8BC34A" fill="#8BC34A" class="line" />
 
-      <circle [attr.cx]="maxWidth - maxLengthRight * 8 - 30" [attr.cy]="44 * (i+1)" r="5" stroke="#8BC34A" fill="#8BC34A" />
+      <circle [attr.cx]="maxWidth - maxLengthRight * 8 - 60" [attr.cy]="40 * (i+1)" r="5" stroke="#8BC34A" fill="#8BC34A" />
 
       <text text-anchor="start" [attr.x]="maxWidth - maxLengthRight * 8" [attr.y]="40 * (i+1)" font-size="12" dy="0">
-        <tspan [attr.x]="maxWidth - maxLengthRight * 8" dy=".6em" font-weight="bold">
+        <tspan [attr.x]="maxWidth - maxLengthRight * 11" dy=".6em" font-weight="bold">
           {{item.name2}}
         </tspan>
-        <tspan [attr.x]="maxWidth - maxLengthRight * 8" dy="1.2em">
+        <tspan [attr.x]="maxWidth - maxLengthRight * 11" dy="1.2em">
           {{item.p2}}
         </tspan>
       </text>
diff --git a/public/src/app/diagram/diagram.component.scss b/public/src/app/diagram/diagram.component.scss
index 7c93d86..c693f64 100644
--- a/public/src/app/diagram/diagram.component.scss
+++ b/public/src/app/diagram/diagram.component.scss
@@ -1,5 +1,4 @@
 #diagram {
-  height: 3000px;
   width: 100%;
   margin: auto;
   display: block;
diff --git a/public/src/app/diagram/diagram.component.spec.ts b/public/src/app/diagram/diagram.component.spec.ts
index 8412561..1233517 100644
--- a/public/src/app/diagram/diagram.component.spec.ts
+++ b/public/src/app/diagram/diagram.component.spec.ts
@@ -1,98 +1,98 @@
-import { ComponentFixture, TestBed, async } from '@angular/core/testing';
-import { DiagramComponent } from './diagram.component';
+// import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+// import { DiagramComponent } from './diagram.component';
 
-describe('DiagramComponent', () => {
-  let component: DiagramComponent;
-  let fixture: ComponentFixture<DiagramComponent>;
+// describe('DiagramComponent', () => {
+//   let component: DiagramComponent;
+//   let fixture: ComponentFixture<DiagramComponent>;
 
-  beforeEach(
-    async(() => {
-      TestBed.configureTestingModule({
-        declarations: [DiagramComponent]
-      }).compileComponents();
-    })
-  );
+//   beforeEach(
+//     async(() => {
+//       TestBed.configureTestingModule({
+//         declarations: [DiagramComponent]
+//       }).compileComponents();
+//     })
+//   );
 
-  beforeEach(() => {
-    fixture = TestBed.createComponent(DiagramComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
+//   beforeEach(() => {
+//     fixture = TestBed.createComponent(DiagramComponent);
+//     component = fixture.componentInstance;
+//     fixture.detectChanges();
+//   });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
+//   it('should create', () => {
+//     expect(component).toBeTruthy();
+//   });
 
-  it('should check on change check maxLengthLeft', () => {
-    component.list = [
-      {
-        name1: 'node1dsvsdsvd',
-        name2: 'node2',
-        p1: 'Stream_publish_0',
-        p2: 'capability'
-      },
-      {
-        name1: 'node33',
-        name2: 'node2555',
-        p1: 'requirement2',
-        p2: 'capability11'
-      },
-      {
-        name1: 'namber4',
-        name2: 'namber3',
-        p1: 'requirement3',
-        p2: 'capability4'
-      }
-    ];
-    component.ngOnChanges();
-    expect(component.maxLengthLeft).toBe(16);
-  });
-  it('should check on change check maxLengthRight', () => {
-    component.list = [
-      {
-        name1: 'node1dsvsdsvd',
-        name2: 'node2',
-        p1: 'Stream_publish_0',
-        p2: 'capability'
-      },
-      {
-        name1: 'node33',
-        name2: 'node2555',
-        p1: 'requirement2',
-        p2: 'capability11'
-      },
-      {
-        name1: 'namber4',
-        name2: 'namber3',
-        p1: 'requirement3',
-        p2: 'capability4'
-      }
-    ];
-    component.ngOnChanges();
-    expect(component.maxLengthRight).toBe(12);
-  });
-  it('should check on change check maxWidth', () => {
-    component.list = [
-      {
-        name1: 'node1dsvsdsvd',
-        name2: 'node2',
-        p1: 'Stream_publish_0',
-        p2: 'capability'
-      },
-      {
-        name1: 'node33',
-        name2: 'node2555',
-        p1: 'requirement2',
-        p2: 'capability11'
-      },
-      {
-        name1: 'namber4',
-        name2: 'namber3',
-        p1: 'requirement3',
-        p2: 'capability4'
-      }
-    ];
-    component.ngOnChanges();
-    // expect(component.maxWidth).toBe(550);
-  });
-});
+//   it('should check on change check maxLengthLeft', () => {
+//     component.list = [
+//       {
+//         name1: 'node1dsvsdsvd',
+//         name2: 'node2',
+//         p1: 'Stream_publish_0',
+//         p2: 'capability'
+//       },
+//       {
+//         name1: 'node33',
+//         name2: 'node2555',
+//         p1: 'requirement2',
+//         p2: 'capability11'
+//       },
+//       {
+//         name1: 'namber4',
+//         name2: 'namber3',
+//         p1: 'requirement3',
+//         p2: 'capability4'
+//       }
+//     ];
+//     component.ngOnChanges();
+//     expect(component.maxLengthLeft).toBe(16);
+//   });
+//   it('should check on change check maxLengthRight', () => {
+//     component.list = [
+//       {
+//         name1: 'node1dsvsdsvd',
+//         name2: 'node2',
+//         p1: 'Stream_publish_0',
+//         p2: 'capability'
+//       },
+//       {
+//         name1: 'node33',
+//         name2: 'node2555',
+//         p1: 'requirement2',
+//         p2: 'capability11'
+//       },
+//       {
+//         name1: 'namber4',
+//         name2: 'namber3',
+//         p1: 'requirement3',
+//         p2: 'capability4'
+//       }
+//     ];
+//     component.ngOnChanges();
+//     expect(component.maxLengthRight).toBe(12);
+//   });
+//   it('should check on change check maxWidth', () => {
+//     component.list = [
+//       {
+//         name1: 'node1dsvsdsvd',
+//         name2: 'node2',
+//         p1: 'Stream_publish_0',
+//         p2: 'capability'
+//       },
+//       {
+//         name1: 'node33',
+//         name2: 'node2555',
+//         p1: 'requirement2',
+//         p2: 'capability11'
+//       },
+//       {
+//         name1: 'namber4',
+//         name2: 'namber3',
+//         p1: 'requirement3',
+//         p2: 'capability4'
+//       }
+//     ];
+//     component.ngOnChanges();
+//     // expect(component.maxWidth).toBe(550);
+//   });
+// });
diff --git a/public/src/app/general/general.component.html b/public/src/app/general/general.component.html
index 2d6f232..19cdeb5 100644
--- a/public/src/app/general/general.component.html
+++ b/public/src/app/general/general.component.html
@@ -38,7 +38,7 @@
     <div class="field" *ngIf="store.generalflow === 'new'">
       <div class="field-label required" style="display: flex;">
         <span>Template</span>
-        <span style="padding-left: 5px;" [innerHTML]="'help-circle' | feather:14"></span>
+        <span style="padding-left: 5px;" [innerHTML]="'help-circle' | feather:14" pTooltip="The monitoring templates define the connectivity and flow of the monitoring mS’." tooltipPosition="top"></span>
       </div>
       <select name="template" [disabled]="this.store.isEditMode" required [(ngModel)]="newVfcmt.template" (ngModelChange)="onChangeTemplate($event)"
         data-tests-id="templateDdl" class="field-text" [style.background]="this.store.isEditMode ? '#ebebe4' : 'white'">
@@ -50,7 +50,7 @@
     <div class="field" *ngIf="store.generalflow === 'import' || store.generalflow === 'edit'">
       <div class="field-label required" style="display: flex;">
         <span>Flow type</span>
-        <span style="padding-left: 5px;" [innerHTML]="'help-circle' | feather:14"></span>
+        <span style="padding-left: 5px;" [innerHTML]="'help-circle' | feather:14" pTooltip="The flow type define the connectivity and flow of the monitoring mS’." tooltipPosition="top"></span>
       </div>
       <select name="flowType" [disabled]="this.store.isEditMode || disableFlowType" required [(ngModel)]="newVfcmt.flowType" data-tests-id="flowTypeDdl"
         class="field-text" [style.background]="this.store.isEditMode || disableFlowType ? '#ebebe4' : 'white'">
@@ -62,7 +62,7 @@
     <div class="field">
       <div class="field-label required" style="display: flex;">
         <span>Attached to</span>
-        <span style="padding-left: 5px;" [innerHTML]="'help-circle' | feather:14"></span>
+        <span style="padding-left: 5px;" [innerHTML]="'help-circle' | feather:14" pTooltip="Select the VF instance to which the Monitoring Configuration would be assigned." tooltipPosition="top"></span>
       </div>
       <select name="serviceAttached" [disabled]="this.store.isEditMode || disableVnfiList" required [(ngModel)]="newVfcmt.vfni"
         data-tests-id="vfniDdl" (ngModelChange)="onChangeVfni($event)" class="field-text" [style.background]="this.store.isEditMode || disableVnfiList ? '#ebebe4' : 'white'">
diff --git a/public/src/app/home/home.component.html b/public/src/app/home/home.component.html
index 3c23385..a742696 100644
--- a/public/src/app/home/home.component.html
+++ b/public/src/app/home/home.component.html
@@ -34,8 +34,7 @@
 
     <ngx-datatable data-tests-id="monitoringComponentTable" class="material" [rows]="store.monitoringComponents"
       [loadingIndicator]="loadingIndicator" [columnMode]="'flex'" [headerHeight]="40" [footerHeight]="40" [limit]="12"
-      [rowHeight]="45" (selected)="onTableSelectItem($event)" [selectionType]="'single'" [selected]="selectedLine"
-      (activate)="onTableActivate($event)">
+      [rowHeight]="45" (selected)="onTableSelectItem($event)" [selectionType]="'single'" [selected]="selectedLine" (activate)="onTableActivate($event)">
 
       <ngx-datatable-column name="Monitoring Configuration" prop="name" [flexGrow]="3">
         <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
@@ -60,36 +59,46 @@
       <ngx-datatable-column name="Actions" sortable="false" prop="id" [flexGrow]="2">
         <ng-template let-row="row" let-rowIndex="rowIndex"  ngx-datatable-cell-template>
 
-          <div *ngIf="hoveredIndex == rowIndex" style="margin-top:-5px; display: flex; justify-content: flex-start; align-items: center;">
-
-            <button mat-icon-button *ngIf="row.submittedUuid" pTooltip="View submitted" tooltipPosition="top" (click)="viewSubmitted(row)" data-tests-id="viewSubmitted">
-              <img src="{{imgBase}}/icon_submitted.svg" style="object-fit: contain; width:18px; height: 18px;" alt="icon_submitted">
-            </button>
-
-            <button *ngIf="checkCanCreate();" mat-icon-button data-tests-id="editMC" (click)="checkTableItemHoverCondition(row) && editTableItem(row)"
-              [ngClass]="{'ngx-datatable-monitoring-name': checkTableItemHoverCondition(row)}" pTooltip="Edit"
-              tooltipPosition="top">
-              <span style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color:#5A5A5A;"
-                [innerHTML]="'edit-3' | feather:18"></span>
-            </button>
-
-            <div *ngIf="checkCanCreate();">
-            <button mat-icon-button *ngIf="row.submittedUuid != null && checkReverted(row)" pTooltip="Revert" data-tests-id="revertMC"
-              tooltipPosition="top" (click)="checkTableItemHoverCondition(row) && revertMcDialog(row)">
-              <img src="{{imgBase}}/icon_revert.svg" style="object-fit: contain; width:18px; height: 18px;" alt="icon_revert">
-            </button>
+          <div class="activeBtnWrapper">
+            <div class="activeBtn" *ngIf="hoveredIndex == rowIndex">
+
+              <button mat-icon-button *ngIf="row.submittedUuid" pTooltip="View submitted" tooltipPosition="top" (click)="viewSubmitted(row)" data-tests-id="viewSubmitted">
+                <img src="{{imgBase}}/icon_submitted.svg" style="object-fit: contain; width:18px; height: 18px;" alt="icon_submitted">
+              </button>
+
+              <button *ngIf="checkCanCreate();" mat-icon-button data-tests-id="editMC" (click)="checkTableItemHoverCondition(row) && editTableItem(row)"
+                [ngClass]="{'ngx-datatable-monitoring-name': checkTableItemHoverCondition(row)}" pTooltip="Edit"
+                tooltipPosition="top">
+                <span style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color:#5A5A5A;"
+                  [innerHTML]="'edit-3' | feather:18"></span>
+              </button>
+
+              <div *ngIf="checkCanCreate();">
+              <button mat-icon-button *ngIf="row.submittedUuid != null && checkReverted(row)" pTooltip="Revert" data-tests-id="revertMC"
+                tooltipPosition="top" (click)="checkTableItemHoverCondition(row) && revertMcDialog(row)">
+                <img src="{{imgBase}}/icon_revert.svg" style="object-fit: contain; width:18px; height: 18px;" alt="icon_revert">
+              </button>
+            </div>
+
+              <button *ngIf="checkCanCreate();" mat-icon-button data-tests-id="tableItemsButtonDelete"
+                pTooltip="Delete" tooltipPosition="top" (click)="deleteTableItem(row, rowIndex)">
+                <span style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color:#5A5A5A;"
+                  [innerHTML]="'trash-2' | feather:18"></span>
+              </button>
+
+            </div>
           </div>
+        </ng-template>
+      </ngx-datatable-column>
 
-            <button *ngIf="checkCanCreate();" mat-icon-button data-tests-id="tableItemsButtonDelete"
-              pTooltip="Delete" tooltipPosition="top" (click)="deleteTableItem(row, rowIndex)">
-              <span style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color:#5A5A5A;"
-                [innerHTML]="'trash-2' | feather:18"></span>
-            </button>
-
+      <ngx-datatable-footer>
+        <ng-template ngx-datatable-footer-template let-rowCount="rowCount" let-pageSize="pageSize" let-selectedCount="selectedCount"
+          let-curPage="curPage" let-offset="offset" let-isVisible="isVisible">
+          <div class="page-count" *ngIf="showTable===true">
+            You have {{rowCount.toLocaleString()}} MC table elements
           </div>
-
         </ng-template>
-      </ngx-datatable-column>
+      </ngx-datatable-footer>
 
     </ngx-datatable>
 
diff --git a/public/src/app/home/home.component.scss b/public/src/app/home/home.component.scss
index fb2f5e4..523fc3b 100644
--- a/public/src/app/home/home.component.scss
+++ b/public/src/app/home/home.component.scss
@@ -73,6 +73,18 @@
   color: #5a5a5a;
 }
 
+.activeBtnWrapper .activeBtn {
+  opacity: 0;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-top: -5px;
+}
+
+.activeBtnWrapper:hover .activeBtn {
+  opacity: 1;
+}
+
 // .ngx-datatable.fixed-row
 //   .datatable-scroll
 //   .datatable-body-row
diff --git a/public/src/app/home/home.component.ts b/public/src/app/home/home.component.ts
index ad970f6..ef29043 100644
--- a/public/src/app/home/home.component.ts
+++ b/public/src/app/home/home.component.ts
@@ -10,6 +10,7 @@ import { PluginPubSub } from 'sdc-pubsub';
 import { Store } from '../store/store';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { environment } from '../../environments/environment';
+import { RuleEngineApiService } from '../rule-engine/api/rule-engine-api.service';
 
 @Component({
   selector: 'app-home',
@@ -33,6 +34,7 @@ export class HomeComponent {
     private activeRoute: ActivatedRoute,
     private route: Router,
     private _restApi: RestApiService,
+    private _ruleApi: RuleEngineApiService,
     private dialog: MatDialog,
     public store: Store,
     private toastr: ToastrService,
@@ -41,6 +43,8 @@ export class HomeComponent {
     this.store.loader = true;
     this.store.viewOnly = false;
     this.store.mcName = '';
+    this._ruleApi.callUpdateTabIndex(-1);
+    this.store.setTabIndex(-1);
     this.activeRoute.queryParams.subscribe(params => {
       console.log('params: %o', params);
       this.store.sdcParmas = params;
@@ -144,7 +148,6 @@ export class HomeComponent {
     this.hoveredIndex = this.store.monitoringComponents.findIndex(
       s => s === event.row
     );
-    console.log('selected : ');
   }
 
   revertMcDialog(item) {
diff --git a/public/src/app/import-rules/import-rules.component.html b/public/src/app/import-rules/import-rules.component.html
index e32d969..80ae78b 100644
--- a/public/src/app/import-rules/import-rules.component.html
+++ b/public/src/app/import-rules/import-rules.component.html
@@ -31,10 +31,10 @@
       class="field-select">
       <option [ngValue]="null" disabled>Select Mapping</option>
       <optgroup label="Rules Configured">
-        <option *ngFor="let target of advancedSetting" [hidden]="!target.isExist" [value]="target.name" data-tests-id="templateOptionsExist">{{target.name}}</option>
+        <option *ngFor="let target of store.advancedSetting" [hidden]="!target.isExist" [value]="target.name" data-tests-id="templateOptionsExist">{{target.name}}</option>
       </optgroup>
       <optgroup label="No Mapping Configuration">
-        <option *ngFor="let target of advancedSetting" [hidden]="target.isExist" [value]="target.name" data-tests-id="templateOptionsNotExist">{{target.name}}</option>
+        <option *ngFor="let target of store.advancedSetting" [hidden]="target.isExist" [value]="target.name" data-tests-id="templateOptionsNotExist">{{target.name}}</option>
       </optgroup>
     </select>
   </div>
@@ -53,7 +53,7 @@
       <button mat-raised-button style="border: 1px solid #009fdb; color:#009fdb; font-size: 14px; font-family: 'Open Sans', sans-serif;text-align: center; height: 36px; width: 96px;">
         Browse
       </button>
-      <input type="file" id="file" accept=".json" (change)="handleFileInput($event.target.files)">
+      <input type="file" id="importMC" accept=".json" #fileInput (change)="handleFileInput($event.target.files)">
     </div>
   </div>
 
diff --git a/public/src/app/import-rules/import-rules.component.ts b/public/src/app/import-rules/import-rules.component.ts
index b581dc6..7403518 100644
--- a/public/src/app/import-rules/import-rules.component.ts
+++ b/public/src/app/import-rules/import-rules.component.ts
@@ -1,6 +1,13 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import {
+  Component,
+  EventEmitter,
+  Output,
+  ViewChild,
+  ElementRef
+} from '@angular/core';
 import { Store } from '../store/store';
 import { RuleEngineApiService } from '../rule-engine/api/rule-engine-api.service';
+import { ToastrService } from 'ngx-toastr';
 
 @Component({
   selector: 'app-import-rules',
@@ -11,12 +18,16 @@ export class ImportRulesComponent {
   fileToUpload: File = null;
   fileName = '';
   mappingTarget: string;
-  advancedSetting: Array<any>;
   tabName: string;
   isGroup = false;
   @Output() refrashRuleList = new EventEmitter();
+  @ViewChild('fileInput') fileInput: ElementRef;
 
-  constructor(public _ruleApi: RuleEngineApiService, public store: Store) {
+  constructor(
+    public _ruleApi: RuleEngineApiService,
+    private toastr: ToastrService,
+    public store: Store
+  ) {
     this._ruleApi.tabIndex
       // .filter(index => {   if (index >= 0) {     const tabName =
       // this.store.cdump.nodes[index].name;     console.log('tab name:', tabName); if
@@ -30,20 +41,20 @@ export class ImportRulesComponent {
             this.tabName.toLowerCase().includes('highlandpark') ||
             this.tabName.toLowerCase().includes('hp')
           ) {
-            this.advancedSetting = this.store.tabsProperties[index].filter(
-              item => {
-                if (
-                  !(
-                    item.hasOwnProperty('constraints') &&
-                    item.value !== undefined &&
-                    !item.value.includes('get_input')
-                  )
-                ) {
-                  return item;
-                }
+            this.store.advancedSetting = this.store.tabsProperties[
+              index
+            ].filter(item => {
+              if (
+                !(
+                  item.hasOwnProperty('constraints') &&
+                  item.value !== undefined &&
+                  !item.value.includes('get_input')
+                )
+              ) {
+                return item;
               }
-            );
-            this.mappingTarget = this.advancedSetting[0].name;
+            });
+            this.mappingTarget = this.store.advancedSetting[0].name;
 
             this._ruleApi.setParams({
               userId: this.store.sdcParmas.userId,
@@ -65,7 +76,7 @@ export class ImportRulesComponent {
                   'generateMappingRulesFileName response: ',
                   response
                 );
-                this.advancedSetting.forEach(element => {
+                this.store.advancedSetting.forEach(element => {
                   if (response.includes(element.name)) {
                     element.isExist = true;
                   } else {
@@ -73,7 +84,7 @@ export class ImportRulesComponent {
                   }
                 });
               });
-            console.log('advancedSetting', this.advancedSetting);
+            console.log('advancedSetting', this.store.advancedSetting);
           }
         }
       });
@@ -93,48 +104,61 @@ export class ImportRulesComponent {
   }
 
   handleFileInput(files: FileList) {
-    this.store.loader = true;
-    this.fileToUpload = files.item(0);
-    console.log('file to load:', this.fileToUpload);
-    this.fileName = this.fileToUpload !== null ? this.fileToUpload.name : '';
     const reader = new FileReader();
-    reader.readAsText(this.fileToUpload, 'UTF-8');
-    reader.onload = () => {
-      console.log(reader.result);
-      this._ruleApi
-        .getLatestMcUuid({
-          contextType: this.store.sdcParmas.contextType,
-          serviceUuid: this.store.sdcParmas.uuid,
-          vfiName: this.store.vfiName,
-          vfcmtUuid: this.store.mcUuid
-        })
-        .subscribe(
-          res => {
-            this.store.mcUuid = res.uuid;
-            if (
-              this.tabName.toLowerCase().includes('highlandpark') ||
-              this.tabName.toLowerCase().includes('hp')
-            ) {
-              this.isGroup = true;
+    if (files && files.length > 0) {
+      this.store.loader = true;
+      this.fileToUpload = files.item(0);
+      console.log('file to load:', this.fileToUpload);
+      this.fileName = this.fileToUpload !== null ? this.fileToUpload.name : '';
+      reader.readAsText(this.fileToUpload, 'UTF-8');
+      reader.onload = () => {
+        console.log(reader.result);
+        this._ruleApi
+          .getLatestMcUuid({
+            contextType: this.store.sdcParmas.contextType,
+            serviceUuid: this.store.sdcParmas.uuid,
+            vfiName: this.store.vfiName,
+            vfcmtUuid: this.store.mcUuid
+          })
+          .subscribe(
+            res => {
+              this.store.mcUuid = res.uuid;
+              if (
+                this.tabName.toLowerCase().includes('highlandpark') ||
+                this.tabName.toLowerCase().includes('hp')
+              ) {
+                this.isGroup = true;
+              }
+              this._ruleApi
+                .importRules(reader.result, res.uuid, this.isGroup)
+                .subscribe(
+                  response => {
+                    console.log('success import', response);
+                    this.toastr.success('', 'success import');
+                    this.store.expandImports[this.store.tabIndex] = false;
+                    this.clearFile();
+                    this.store.loader = false;
+                    this._ruleApi.callUpdateTabIndex(this.store.tabIndex);
+                  },
+                  error => {
+                    this.notifyError(error);
+                    this.clearFile();
+                  }
+                );
+            },
+            error => {
+              this.notifyError(error);
+              this.clearFile();
             }
-            this._ruleApi
-              .importRules(reader.result, res.uuid, this.isGroup)
-              .subscribe(
-                response => {
-                  console.log('success import', response);
-                  this.store.expandImports[this.store.tabIndex] = false;
-                  this.store.loader = false;
-                  this._ruleApi.callUpdateTabIndex(this.store.tabIndex);
-                },
-                error => {
-                  this.notifyError(error);
-                }
-              );
-          },
-          error => {
-            this.notifyError(error);
-          }
-        );
-    };
+          );
+      };
+    } else {
+      this.clearFile();
+    }
+  }
+
+  clearFile() {
+    this.fileInput.nativeElement.value = '';
+    this.fileName = '';
   }
 }
diff --git a/public/src/app/main/main.component.html b/public/src/app/main/main.component.html
index 182ed9c..10d86e2 100644
--- a/public/src/app/main/main.component.html
+++ b/public/src/app/main/main.component.html
@@ -39,10 +39,9 @@
         </button>
 
         <div *ngIf="this.store.isEditMode" style="display: flex;">
-          <button mat-icon-button (click)="saveCDUMP()" [disabled]="!store.cdumpIsDirty || store.viewOnly" data-tests-id="save-btn">
+          <button mat-icon-button (click)="saveCDUMP()" [disabled]="!store.cdumpIsDirty || store.viewOnly" data-tests-id="save-btn" style="margin-right: 10px;">
             <span style="width: 100%;
             height: 100%;
-            padding-right: 20px;
             display: flex;
             justify-content: center;
             align-items: center;"
diff --git a/public/src/app/main/main.component.ts b/public/src/app/main/main.component.ts
index 8ba0d1f..f4b76bc 100644
--- a/public/src/app/main/main.component.ts
+++ b/public/src/app/main/main.component.ts
@@ -56,7 +56,7 @@ export class MainComponent {
         success => {
           console.log(success);
           this.store.mcUuid = success.vfcmt.uuid;
-          this.store.generalflow = '';
+          this.store.generalflow = 'edit';
           this.store.mcName = success.vfcmt.name;
           this.store.flowType = success.cdump.flowType;
           console.log(this.cleanProperty(success));
@@ -119,7 +119,6 @@ export class MainComponent {
           this.location.path();
           // this.location.go();
           this.store.mcUuid = success.vfcmt.uuid;
-          this.store.generalflow = '';
           this.store.mcName = success.vfcmt.name;
           console.log(this.cleanProperty(success));
           this.store.cdump = success.cdump;
diff --git a/public/src/app/revert-dialog/revert-dialog.component.ts b/public/src/app/revert-dialog/revert-dialog.component.ts
index 9cd7a7d..7ae93b4 100644
--- a/public/src/app/revert-dialog/revert-dialog.component.ts
+++ b/public/src/app/revert-dialog/revert-dialog.component.ts
@@ -37,7 +37,7 @@ export class RevertDialogComponent {
         success => {
           this.store.monitoringComponents = this.store.monitoringComponents.map(
             item => {
-              if (item.invariantUuid === success.invariantUuid) {
+              if (item.invariantUUid === success.invariantUUid) {
                 item = success;
               }
               return item;
diff --git a/public/src/app/rule-engine/action-list/action-list.component.html b/public/src/app/rule-engine/action-list/action-list.component.html
index c7eac9f..201dba0 100644
--- a/public/src/app/rule-engine/action-list/action-list.component.html
+++ b/public/src/app/rule-engine/action-list/action-list.component.html
@@ -107,10 +107,11 @@
                 </button>
 
                 <button mat-icon-button class='button-remove' [disabled]="store.viewOnly" (click)="removeAction(action)" data-tests-id="deleteAction">
-                  <mat-icon>delete</mat-icon>
+                  <span style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;"
+                    [innerHTML]="'trash-2' | feather:20"></span>
                 </button>
               </div>
-            </div>
+          </div>
           </li>
         </ul>
       </div>
diff --git a/public/src/app/rule-engine/action-list/action-list.component.ts b/public/src/app/rule-engine/action-list/action-list.component.ts
index f8fd6dd..466b6a9 100644
--- a/public/src/app/rule-engine/action-list/action-list.component.ts
+++ b/public/src/app/rule-engine/action-list/action-list.component.ts
@@ -407,6 +407,7 @@ export class ActionListComponent implements AfterViewInit {
                 // clear temp copy rule.
                 this.clearCopyRuleFromList();
                 // then update the rule list and sync with server
+                this.updateTaregtListExisiting();
                 this.store.updateRuleInList(response);
                 this._ruleApi.callUpdateVersionLock();
                 this.store.loader = false;
@@ -424,6 +425,25 @@ export class ActionListComponent implements AfterViewInit {
     }
   }
 
+  updateTaregtListExisiting() {
+    this._ruleApi
+      .generateMappingRulesFileName(
+        this.store.ruleListExistParams.nodeName,
+        this.store.ruleListExistParams.nodeId,
+        this.store.ruleListExistParams.vfcmtUuid
+      )
+      .subscribe(response => {
+        console.log('generateMappingRulesFileName response: ', response);
+        this.store.advancedSetting.forEach(element => {
+          if (response.includes(element.name)) {
+            element.isExist = true;
+          } else {
+            element.isExist = false;
+          }
+        });
+      });
+  }
+
   private clearCopyRuleFromList() {
     this.store.ruleList = this.store.ruleList.filter(item => item.uid !== '');
   }
@@ -452,6 +472,7 @@ export class ActionListComponent implements AfterViewInit {
                 // clear temp copy rule.
                 this.clearCopyRuleFromList();
                 // then update the rule list and sync with server
+                this.updateTaregtListExisiting();
                 this.store.updateRuleInList(response);
                 this._ruleApi.callUpdateVersionLock();
                 this.uid = response.uid;
diff --git a/public/src/app/rule-engine/action/action.component.html b/public/src/app/rule-engine/action/action.component.html
index f439c5c..21f03b1 100644
--- a/public/src/app/rule-engine/action/action.component.html
+++ b/public/src/app/rule-engine/action/action.component.html
@@ -17,7 +17,7 @@
                 <span class="label" style="padding: 0 5px; width: 100px;">
                   Start Value
                 </span>
-                <input required class="input-text" [readonly]="store.viewOnly" data-tests-id="startValue" name="title"
+                <input required class="input-text" [readonly]="store.viewOnly" data-tests-id="startValue" name="startValue"
                   [(ngModel)]="action.stringTransform.startValue" type="text" placeholder="Select start value">
               </div>
             </div>
@@ -34,7 +34,7 @@
               <span class="label" style="padding: 0 5px; width: 100px;">
                 Target case
               </span>
-              <input required class="input-text" [readonly]="store.viewOnly" data-tests-id="targetCase" name="title"
+              <input required class="input-text" [readonly]="store.viewOnly" data-tests-id="targetCase" name="targetCase"
                 [(ngModel)]="action.stringTransform.targetCase" type="text" placeholder="Select target case">
             </div>
           </div>
@@ -162,7 +162,8 @@
                     <button mat-icon-button class="button-remove" [ngStyle]="hoveredIndex === index ? {'opacity':'1'} : {'opacity':'0'}"
                       (click)="removeSearchField(index)" *ngIf="action.search.enrich.fields.length > 1" style="box-shadow: none; height: 24px; width: 24px; display:flex"
                       data-tests-id="btnDelete" [disabled]="store.viewOnly">
-                      <mat-icon class="md-24">delete</mat-icon>
+                      <span style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;"
+                    [innerHTML]="'trash-2' | feather:20"></span>
                     </button>
                   </div>
 
@@ -217,7 +218,8 @@
                   <button mat-icon-button data-tests-id="btn-remove-row" [ngStyle]="hoveredIndex === index ? {'opacity':'1'} : {'opacity':'0'}"
                     class="button-remove" (click)="removeSearchUpdatesRow(index)" *ngIf="action.search.updates.length > 1" [disabled]="store.viewOnly"
                     style="height: 24px; width: 24px; display:flex; box-shadow: none;">
-                    <mat-icon class="md-24">delete</mat-icon>
+                    <span style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;"
+                    [innerHTML]="'trash-2' | feather:20"></span>
                   </button>
                 </th>
               </tr>
@@ -421,7 +423,8 @@
             <th style="height: 30px; display: flex; align-items: baseline;">
               <button mat-icon-button data-tests-id="btn-remove-row" [ngStyle]="hoveredIndex === index ? {'opacity':'1'} : {'opacity':'0'}"
                 class="button-remove" (click)="removeMapRow(index)" *ngIf="action.map.values.length > 1" style="height: 24px; width: 24px; display:flex; box-shadow: none;" [disabled]="store.viewOnly">
-                <mat-icon class="md-24">delete</mat-icon>
+                <span style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;"
+                    [innerHTML]="'trash-2' | feather:20"></span>
               </button>
             </th>
           </tr>
@@ -433,7 +436,6 @@
         <div style="display: flex; align-items: center;">
           <button mat-mini-fab color="primary" (click)="addMapRow()" data-tests-id="btn-add-row" style="height: 16px; width: 16px; display:flex; box-shadow: none;" [disabled]="store.viewOnly">
             <span style="padding-left: 2px; display: flex; justify-content: center; align-items: center" [innerHTML]="'plus' | feather:12"></span>
-            <!-- <mat-icon>add</mat-icon> -->
           </button>
           <span style="color: #009FDB; display: flex; justify-content: center; padding-left: 6px">Add Row</span>
         </div>
@@ -447,7 +449,7 @@
                     align-items: center;"
               [innerHTML]="'download' | feather:20"></span>
           </div>
-          <input type="file" id="file" accept=".csv" (change)="handleFileInput($event.target.files)">
+          <input type="file" id="file" #csvInput [disabled]="store.viewOnly" accept=".csv" (change)="handleFileInput($event.target.files)">
         </div>
       </div>
     </div>
diff --git a/public/src/app/rule-engine/action/action.component.ts b/public/src/app/rule-engine/action/action.component.ts
index dfdb83f..380ff43 100644
--- a/public/src/app/rule-engine/action/action.component.ts
+++ b/public/src/app/rule-engine/action/action.component.ts
@@ -4,7 +4,8 @@ import {
   Input,
   OnInit,
   ViewChild,
-  AfterViewInit
+  AfterViewInit,
+  ElementRef
 } from '@angular/core';
 // import { Copy } from "../model";
 import { Http, Response, Headers, RequestOptions } from '@angular/http';
@@ -17,6 +18,7 @@ import * as Papa from 'papaparse';
 import { metricData } from './metric.data';
 import { Store } from '../../store/store';
 import { ToastrService } from 'ngx-toastr';
+import { toJS } from 'mobx';
 
 @Component({
   selector: 'app-action',
@@ -28,6 +30,7 @@ export class ActionComponent implements OnInit, AfterViewInit {
   @ViewChild('from') fromInstance;
   @ViewChild('target') targetInstance;
   @ViewChild('actionFrm') actionFrm: NgForm;
+  @ViewChild('csvInput') fileInput: ElementRef;
   highlight = 'black';
   hoveredIndex;
   fileToUpload: File = null;
@@ -42,12 +45,12 @@ export class ActionComponent implements OnInit, AfterViewInit {
   ngAfterViewInit(): void {
     console.log(this.action.id);
     if (this.action.from !== undefined && this.action.from !== '') {
-      console.log('Action %o', this.action);
       this.fromInstance.updateMode(this.action.from);
     }
     if (this.action.target !== undefined && this.action.target !== '') {
       this.targetInstance.updateMode(this.action);
     }
+    console.log('Action %o', this.action);
   }
 
   updateFrom(data) {
@@ -93,34 +96,40 @@ export class ActionComponent implements OnInit, AfterViewInit {
     this.action.search.updates.splice(index, 1);
   }
 
-  handleFileInput(files: FileList) {
-    this.fileToUpload = files.item(0);
-    console.log('file to load:', this.fileToUpload);
-    this.fileName = this.fileToUpload !== null ? this.fileToUpload.name : '';
+  clearFile() {
+    this.fileInput.nativeElement.value = '';
+    this.fileName = '';
+  }
 
-    this.store.loader = true;
-    Papa.parse(this.fileToUpload, {
-      complete: result => {
-        if (result.data) {
-          const mapConvert = result.data
-            .slice(0, 300)
-            .filter(item => item[0] !== undefined && item[1] !== undefined)
-            .map(item => {
-              console.log(`item 0: ${item[0]} item 1: ${item[1]}`);
-              return {
-                key: item[0].trim(),
-                value: item[1].trim()
-              };
-            });
+  handleFileInput(files: FileList) {
+    if (files && files.length > 0) {
+      this.fileToUpload = files.item(0);
+      console.log('file to load:', this.fileToUpload);
+      this.fileName = this.fileToUpload !== null ? this.fileToUpload.name : '';
+      this.store.loader = true;
+      Papa.parse(this.fileToUpload, {
+        complete: result => {
+          if (result.data) {
+            const mapConvert = result.data
+              .slice(0, 300)
+              .filter(item => item[0] !== undefined && item[1] !== undefined)
+              .map(item => {
+                console.log(`item 0: ${item[0]} item 1: ${item[1]}`);
+                return {
+                  key: item[0].trim(),
+                  value: item[1].trim()
+                };
+              });
+            this.store.loader = false;
+            this.action.map.values = mapConvert;
+          }
+        },
+        error: (err, file) => {
           this.store.loader = false;
-          this.action.map.values = mapConvert;
+          console.log(`error: ${err}, in file ${file}`);
+          this.toastr.error('', err);
         }
-      },
-      error: (err, file) => {
-        this.store.loader = false;
-        console.log(`error: ${err}, in file ${file}`);
-        this.toastr.error('', err);
-      }
-    });
+      });
+    }
   }
 }
diff --git a/public/src/app/rule-engine/api/rule-engine-api.service.ts b/public/src/app/rule-engine/api/rule-engine-api.service.ts
index f19fd15..ed0d25c 100644
--- a/public/src/app/rule-engine/api/rule-engine-api.service.ts
+++ b/public/src/app/rule-engine/api/rule-engine-api.service.ts
@@ -25,7 +25,8 @@ export class RuleEngineApiService {
   flowType: string;
   editorData: Subject<any> = new Subject();
   updateVersionLock: Subject<any> = new Subject();
-  tabIndex: Subject<any> = new BehaviorSubject(-1);
+  currentTab: Subject<any> = new BehaviorSubject(-1);
+  tabIndex = this.currentTab.asObservable();
 
   constructor(private http: Http) {
     this.baseUrl = `${environment.apiBaseUrl}/rule-editor`;
@@ -171,9 +172,9 @@ export class RuleEngineApiService {
       });
   }
 
-  deleteFilter() {
+  deleteFilter(vfcmtUuid) {
     const deleteFilter = {
-      vfcmtUuid: this.vfcmtUuid,
+      vfcmtUuid: vfcmtUuid,
       dcaeCompLabel: this.dcaeCompName,
       nid: this.nid,
       configParam: this.configParam
@@ -271,6 +272,6 @@ export class RuleEngineApiService {
   }
 
   callUpdateTabIndex(index) {
-    this.tabIndex.next(index);
+    this.currentTab.next(index);
   }
 }
diff --git a/public/src/app/rule-engine/condition/condition.component.html b/public/src/app/rule-engine/condition/condition.component.html
index 3a26823..e4a8775 100644
--- a/public/src/app/rule-engine/condition/condition.component.html
+++ b/public/src/app/rule-engine/condition/condition.component.html
@@ -59,8 +59,13 @@
           <div *ngIf="!isFilter" style="display: flex; margin-left: auto;">
 
             <div style="display: flex; align-items: center; padding: 0 25px;">
-              <button mat-mini-fab color="primary" data-tests-id="addCondition" (click)="addConditional(tree, node)" style="height: 24px; width: 24px; display:flex; box-shadow: none;" [disabled]="store.viewOnly">
-                <mat-icon class="material-icons md-18">add</mat-icon>
+              <button mat-mini-fab color="primary" data-tests-id="addCondition" (click)="addConditional(tree, node)" style="height: 16px; width: 16px; display:flex; box-shadow: none;align-items: center;justify-content: center;" [disabled]="store.viewOnly">
+                <span style="width: 100%;
+                color:white;
+                height: 100%;
+                display: flex;
+                justify-content: center;
+                align-items: center;" [innerHTML]="'plus' | feather:12"></span>
               </button>
               <span class="btn-label">Add Condition
               </span>
@@ -68,8 +73,13 @@
 
             <div style="display: flex; align-items: center; padding: 0 25px;">
               <button mat-mini-fab color="primary" data-tests-id="addConditionGroup" [disabled]="node.data.level === 2 || store.viewOnly" (click)="addConditionalGroup(tree, node)"
-                style="height: 24px; width: 24px; display:flex; box-shadow: none;">
-                <mat-icon class="material-icons md-18">add</mat-icon>
+                style="height: 16px; width: 16px; display:flex; box-shadow: none;align-items: center;justify-content: center;">
+                <span style="width: 100%;
+                color:white;
+                height: 100%;
+                display: flex;
+                justify-content: center;
+                align-items: center;" [innerHTML]="'plus' | feather:12"></span>
               </button>
               <span [style.color]="node.data.level === 2 ? '#a7a7a7' : '#009fdb' " [style.cursor]="node.data.level === 2 ? 'default' : 'pointer' "
                 class="btn-label">Add Condition Group
diff --git a/public/src/app/rule-engine/from/from.component.html b/public/src/app/rule-engine/from/from.component.html
index 0da7173..835946a 100644
--- a/public/src/app/rule-engine/from/from.component.html
+++ b/public/src/app/rule-engine/from/from.component.html
@@ -52,7 +52,8 @@
 
         <button mat-icon-button class="button-remove" [ngStyle]="hoveredIndex === index ? {'opacity':'1'} : {'opacity':'0'}" (click)="removeFromInput(index)"
           *ngIf="from.values.length > 1" style="box-shadow: none; height: 24px; width: 24px; display:flex" data-tests-id="btnDelete">
-          <mat-icon class="md-24">delete</mat-icon>
+          <span style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;"
+                    [innerHTML]="'trash-2' | feather:20"></span>
         </button>
       </div>
 
@@ -81,7 +82,8 @@
 
         <button mat-icon-button class="button-remove" [ngStyle]="hoveredIndex === index ? {'opacity':'1'} : {'opacity':'0'}" (click)="removeFromInput(index)"
           *ngIf="from.values.length > 1" style="box-shadow: none; height: 24px; width: 24px; display:flex" data-tests-id="btnDelete">
-          <mat-icon class="md-24">delete</mat-icon>
+          <span style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;"
+                    [innerHTML]="'trash-2' | feather:20"></span>
         </button>
       </div>
 
@@ -112,7 +114,8 @@
 
         <button mat-icon-button class="button-remove" [ngStyle]="hoveredIndex === index ? {'opacity':'1'} : {'opacity':'0'}" (click)="removeFromInput(index)"
           *ngIf="from.values.length > 2" style="box-shadow: none; height: 24px; width: 24px; display:flex" data-tests-id="btnDelete">
-          <mat-icon class="md-24">delete</mat-icon>
+          <span style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;"
+                    [innerHTML]="'trash-2' | feather:20"></span>
         </button>
       </div>
 
@@ -122,7 +125,6 @@
         <button mat-mini-fab color="primary" (click)="addFromInput()" style="box-shadow: none; height: 16px; width: 16px; display:flex"
           data-tests-id="btnAddInput">
           <span style="padding-left: 2px; display: flex; justify-content: center; align-items: center" [innerHTML]="'plus' | feather:12"></span>
-          <!-- <mat-icon>add</mat-icon> -->
         </button>
         <span style="color: #009FDB; display: flex; justify-content: center; padding-top: 1px; padding-left: 6px;">Add input</span>
       </div>
diff --git a/public/src/app/rule-engine/rule-list/rule-list.component.html b/public/src/app/rule-engine/rule-list/rule-list.component.html
index 5085563..b0d3d9b 100644
--- a/public/src/app/rule-engine/rule-list/rule-list.component.html
+++ b/public/src/app/rule-engine/rule-list/rule-list.component.html
@@ -26,7 +26,7 @@
           <div class="field-label required" style="padding-right: 10px;">
             Entry Phase
           </div>
-          <input name="entryPhase" [readonly]="store.viewOnly" required [(ngModel)]="entryPhase" class="field-text" style="width:250px;"
+          <input name="entryPhase" [readonly]="store.viewOnly" [(ngModel)]="entryPhase" class="field-text" style="width:250px;"
             data-tests-id="entryPhase" />
         </div>
 
@@ -53,7 +53,7 @@
           </div>
         </div>
         <div *ngIf="ifStatement">
-          <button mat-raised-button (click)="applyFilter()" color="primary" style="width: 113px;height: 36px;"
+          <button mat-raised-button (click)="applyFilter()" color="primary" style="width: 113px;height: 36px;" [disabled]="store.viewOnly"
             data-tests-id="applyFilter">
             Apply Filter
           </button>
@@ -66,7 +66,7 @@
       </div>
     </div>
 
-    <div *ngIf="targetSource && (tabName.toLowerCase().includes('highlandpark') || tabName.toLowerCase().includes('hp'))">
+    <div *ngIf="targetSource && versionType.selectedEvent && (tabName.toLowerCase().includes('highlandpark') || tabName.toLowerCase().includes('hp'))">
       <div style="display: flex; align-items: baseline; width: 170px; height:35px; position:relative;" (mouseenter)="showBtnList = true"
         (mouseleave)="showBtnList = false" data-tests-id="addGroup">
         <div style="display: flex; align-items: center;">
@@ -111,8 +111,7 @@
             </div>
             <input type="text" name="phase" [(ngModel)]="item.phase" class="field-text" data-tests-id="phase" />
 
-            <button mat-icon-button (click)="deleteGroup(item.groupId)" [disabled]="disableDeleteGroup(item.groupId)" [disabled]="store.viewOnly"
-              class="gray" data-tests-id="deleteGroup">
+            <button mat-icon-button (click)="deleteGroup(item.groupId)" [disabled]="disableDeleteGroup(item.groupId) || store.viewOnly" class="gray" data-tests-id="deleteGroup">
               <span style="width: 100%;
                             height: 100%;
                             display: flex;
@@ -144,7 +143,8 @@
                 </button>
                 <button (click)="removeItem(rule.uid, item.groupId)" data-tests-id="deleteRule" class="btn-list"
                   mat-icon-button [disabled]="disableDeleteGroup(item.groupId) && item.list.length === 1 || store.viewOnly">
-                  <mat-icon class="md-24">delete</mat-icon>
+                  <span style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;"
+                    [innerHTML]="'trash-2' | feather:20"></span>
                 </button>
               </div>
             </div>
@@ -176,7 +176,7 @@
                                 align-items: center;"
                     [innerHTML]="'download' | feather:18"></span>
                 </button>
-                <input type="file" id="file" accept=".json" (change)="handleImportCDAP($event.target.files, item.groupId, item.phase)">
+                <input type="file" id="file" accept=".json" [disabled]="store.viewOnly" #groupUpload (change)="handleImportCDAP($event.target.files, item.groupId, item.phase)">
                 <span style="color: #009FDB; display: flex; justify-content: center; ">Import phase</span>
               </div>
             </div>
@@ -188,7 +188,7 @@
 
     <div *ngIf="targetSource && !(tabName.toLowerCase().includes('highlandpark') || tabName.toLowerCase().includes('hp'))">
 
-      <div *ngIf="targetSource && store.ruleList.length === 0 && !(tabName.toLowerCase().includes('highlandpark') || tabName.toLowerCase().includes('hp'))"
+      <div *ngIf="targetSource && store.ruleList.length === 0 && versionType.selectedEvent && !(tabName.toLowerCase().includes('highlandpark') || tabName.toLowerCase().includes('hp'))"
         style="margin: 30px 0; display: flex; align-items: center; justify-content: center; flex-direction: column;">
 
         <div style="margin: 3em 0 2em 0;">
@@ -244,7 +244,8 @@
                 [innerHTML]="'copy' | feather:20"></span>
             </button>
             <button (click)="removeItem(item.uid, null)" data-tests-id="deleteRule" class="btn-list" mat-icon-button *ngIf="!store.viewOnly">
-              <mat-icon class="md-24">delete</mat-icon>
+              <span style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;"
+                [innerHTML]="'trash-2' | feather:20"></span>
             </button>
           </div>
         </div>
diff --git a/public/src/app/rule-engine/rule-list/rule-list.component.ts b/public/src/app/rule-engine/rule-list/rule-list.component.ts
index 6e3c877..1bbed87 100644
--- a/public/src/app/rule-engine/rule-list/rule-list.component.ts
+++ b/public/src/app/rule-engine/rule-list/rule-list.component.ts
@@ -1,4 +1,9 @@
-import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
+import {
+  Component,
+  ViewChild,
+  ViewEncapsulation,
+  ElementRef
+} from '@angular/core';
 import { MatDialog } from '@angular/material';
 import { isEmpty } from 'lodash';
 import { ToastrService } from 'ngx-toastr';
@@ -21,6 +26,7 @@ const primaryColor = '#009fdb';
 })
 export class RuleListComponent {
   @ViewChild('versionEventType') versionType;
+  @ViewChild('groupUpload') fileInput: ElementRef;
   error: Array<string>;
   // list = new Array();
   schema;
@@ -43,6 +49,7 @@ export class RuleListComponent {
   // filter
   ifStatement = false;
   condition: any;
+  filterSave = false;
 
   private errorHandler(error: any) {
     this.store.loader = false;
@@ -82,14 +89,18 @@ export class RuleListComponent {
 
   filterCheckbox() {
     this.ifStatement = !this.ifStatement;
-    if (!this.ifStatement && this.condition !== undefined) {
-      this.deleteFilter();
+    if (!this.ifStatement) {
+      if (this.filterSave) {
+        this.deleteFilter();
+      } else {
+        this.condition = null;
+      }
     }
   }
 
   removeConditionCheck(flag) {
     this.ifStatement = flag;
-    if (this.condition !== undefined) {
+    if (this.filterSave) {
       this.deleteFilter();
     }
   }
@@ -107,10 +118,14 @@ export class RuleListComponent {
       .subscribe(
         res => {
           this.store.mcUuid = res.uuid;
-          this._ruleApi.deleteFilter().subscribe(
+          this._ruleApi.deleteFilter(res.uuid).subscribe(
             response => {
-              console.log('success import', response);
+              if (this.store.ruleList.length === 0) {
+                this.versionType.updateVersionTypeFlag(false);
+              }
               this.condition = null;
+              this.filterSave = false;
+              this.ifStatement = false;
               this.store.loader = false;
             },
             error => {
@@ -174,63 +189,76 @@ export class RuleListComponent {
     }
   }
 
+  clearFile() {
+    this.fileInput.nativeElement.value = '';
+    this.fileName = '';
+  }
+
   handleImportCDAP(files: FileList, groupId, phaseName) {
     this.error = null;
-    this.store.loader = true;
-    this.fileToUpload = files.item(0);
-    console.log('file to load:', this.fileToUpload);
-    this.fileName = this.fileToUpload !== null ? this.fileToUpload.name : '';
     const reader = new FileReader();
-    reader.readAsText(this.fileToUpload, 'UTF-8');
-    reader.onload = () => {
-      console.log(reader.result);
-      this._ruleApi
-        .getLatestMcUuid({
-          contextType: this.store.sdcParmas.contextType,
-          serviceUuid: this.store.sdcParmas.uuid,
-          vfiName: this.store.vfiName,
-          vfcmtUuid: this.store.mcUuid
-        })
-        .subscribe(
-          res => {
-            this.store.mcUuid = res.uuid;
-            let data = '';
-            try {
-              data = JSON.parse(reader.result as any);
-              const input = {
-                version: this.versionType.selectedVersion,
-                eventType: this.versionType.selectedEvent,
-                groupId: groupId,
-                phase: phaseName,
-                payload: data
-              };
-              this._ruleApi.importPhase(input).subscribe(
-                response => {
-                  console.log('success import', response);
-                  this.store.loader = false;
-                  this.store.updateRuleList(Object.values(response.rules));
-                },
-                error => {
-                  this.notifyError(error);
-                }
-              );
-            } catch (e) {
-              console.log(e);
-              this.errorHandler({
-                policyException: {
-                  messageId: 'Invalid JSON',
-                  text: 'Invalid JSON',
-                  variables: [],
-                  formattedErrorMessage: 'Invalid JSON'
-                }
-              });
+    if (files && files.length > 0) {
+      this.store.loader = true;
+      this.fileToUpload = files.item(0);
+      console.log('file to load:', this.fileToUpload);
+      this.fileName = this.fileToUpload !== null ? this.fileToUpload.name : '';
+      reader.readAsText(this.fileToUpload, 'UTF-8');
+      reader.onload = () => {
+        console.log(reader.result);
+        this._ruleApi
+          .getLatestMcUuid({
+            contextType: this.store.sdcParmas.contextType,
+            serviceUuid: this.store.sdcParmas.uuid,
+            vfiName: this.store.vfiName,
+            vfcmtUuid: this.store.mcUuid
+          })
+          .subscribe(
+            res => {
+              this.store.mcUuid = res.uuid;
+              let data = '';
+              try {
+                data = JSON.parse(reader.result as any);
+                const input = {
+                  version: this.versionType.selectedVersion,
+                  eventType: this.versionType.selectedEvent,
+                  groupId: groupId,
+                  phase: phaseName,
+                  payload: data
+                };
+                this._ruleApi.importPhase(input).subscribe(
+                  response => {
+                    console.log('success import', response);
+                    this.clearFile();
+                    this.store.loader = false;
+                    this.store.updateRuleList(Object.values(response.rules));
+                  },
+                  error => {
+                    this.clearFile();
+                    this.notifyError(error);
+                  }
+                );
+              } catch (e) {
+                console.log(e);
+                this.clearFile();
+                this.errorHandler({
+                  policyException: {
+                    messageId: 'Invalid JSON',
+                    text: 'Invalid JSON',
+                    variables: [],
+                    formattedErrorMessage: 'Invalid JSON'
+                  }
+                });
+              }
+            },
+            error => {
+              this.clearFile();
+              this.errorHandler(error);
             }
-          },
-          error => {
-            this.errorHandler(error);
-          }
-        );
-    };
+          );
+      };
+    } else {
+      this.clearFile();
+    }
   }
 
   addGroup(type) {
@@ -306,10 +334,12 @@ export class RuleListComponent {
           this.entryPhase = response.entryPhase;
           this.publishPhase = response.publishPhase;
           this.condition = response.filter;
+          this.filterSave = response.filter !== undefined ? true : false;
           this.ifStatement = this.condition == null ? false : true;
         } else {
           this.store.resetRuleList();
           this.condition = null;
+          this.filterSave = false;
           this.ifStatement = false;
           this.versionType.updateVersionTypeFlag(false);
           this.targetSource = null;
@@ -412,6 +442,7 @@ export class RuleListComponent {
       .subscribe(
         res => {
           this.store.mcUuid = res.uuid;
+          this.filterSave = true;
           let conditionData2server = null;
           conditionData2server = this.convertConditionToServer(this.condition);
           const newFilter = {
@@ -423,6 +454,9 @@ export class RuleListComponent {
           };
           this._ruleApi.applyFilter(newFilter).subscribe(
             success => {
+              if (this.store.ruleList.length === 0) {
+                this.versionType.updateVersionTypeFlag(true);
+              }
               this.store.loader = false;
             },
             error => {
@@ -549,7 +583,9 @@ export class RuleListComponent {
                       console.log(data);
                       this.versions = data.map(x => x.version);
                       this.metaData = data;
-                      this.versionType.updateVersionTypeFlag(false);
+                      if (this.filterSave === false) {
+                        this.versionType.updateVersionTypeFlag(false);
+                      }
                       this.targetSource = null;
                     });
                   }
@@ -597,7 +633,9 @@ export class RuleListComponent {
     this.store.isLeftVisible = false;
 
     this._ruleApi.updateVersionLock.subscribe(() => {
-      this.versionType.updateVersionTypeFlag(true);
+      if (this.filterSave === true) {
+        this.versionType.updateVersionTypeFlag(true);
+      }
     });
   }
 }
diff --git a/public/src/app/rule-engine/version-type-select/version-type-select.component.html b/public/src/app/rule-engine/version-type-select/version-type-select.component.html
index fd3cfab..1539c49 100644
--- a/public/src/app/rule-engine/version-type-select/version-type-select.component.html
+++ b/public/src/app/rule-engine/version-type-select/version-type-select.component.html
@@ -10,10 +10,10 @@
         style="height: 35px; padding: 0.3rem; border: 1px solid #d2d2d2; width:250px;" class="field-select">
         <option [ngValue]="null" disabled>Select Mapping</option>
         <optgroup label="Rules Configured">
-          <option *ngFor="let target of advancedSetting" [hidden]="!target.isExist" [value]="target.name" data-tests-id="templateOptionsExist">{{target.name}}</option>
+          <option *ngFor="let target of store.advancedSetting" [hidden]="!target.isExist" [value]="target.name" data-tests-id="templateOptionsExist">{{target.name}}</option>
         </optgroup>
         <optgroup label="No Mapping Configuration">
-          <option *ngFor="let target of advancedSetting" [hidden]="target.isExist" [value]="target.name" data-tests-id="templateOptionsNotExist">{{target.name}}</option>
+          <option *ngFor="let target of store.advancedSetting" [hidden]="target.isExist" [value]="target.name" data-tests-id="templateOptionsNotExist">{{target.name}}</option>
         </optgroup>
       </select>
     </div>
@@ -45,23 +45,6 @@
         | slice:0:selectedEvent.length-6}}</span>
     </div>
 
-    <!-- <div class="notifyId" style="display: flex; flex-direction:column; margin-right:10px;">
-      <div class="pretty p-svg space-down">
-        <input type="checkbox" name="notifyIdCheckbox" data-tests-id="notifyIdCheckbox" [checked]="notifyIdCheckbox" (change)="changeNotifyId()"
-        />
-        <div class="state">
-          <svg class="svg svg-icon" viewBox="0 0 20 20">
-            <path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"
-              style="stroke: #009fdb; fill:#009fdb;"></path>
-          </svg>
-          <label style="margin-left: 5px;">Notify OID</label>
-        </div>
-      </div>
-      <div *ngIf="notifyIdCheckbox" class="input-wrapper">
-        <input type="text" ngModel required name="defaultInput" data-tests-id="defaultInput" [(ngModel)]="store.notifyIdValue" class="input">
-      </div>
-    </div> -->
-
   </div>
 
 </div>
diff --git a/public/src/app/rule-engine/version-type-select/version-type-select.component.ts b/public/src/app/rule-engine/version-type-select/version-type-select.component.ts
index 6869260..791919c 100644
--- a/public/src/app/rule-engine/version-type-select/version-type-select.component.ts
+++ b/public/src/app/rule-engine/version-type-select/version-type-select.component.ts
@@ -19,7 +19,6 @@ export class VersionTypeSelectComponent {
   @Input() metaData;
   @Output() nodesUpdated = new EventEmitter();
   @Output() refrashRuleList = new EventEmitter();
-  advancedSetting: Array<any>;
   notifyIdCheckbox = false;
 
   constructor(private _ruleApi: RuleEngineApiService, public store: Store) {
@@ -36,7 +35,7 @@ export class VersionTypeSelectComponent {
           tabName.toLowerCase().includes('highlandpark') ||
           tabName.toLowerCase().includes('hp')
         ) {
-          this.advancedSetting = this.store.tabsProperties[index].filter(
+          this.store.advancedSetting = this.store.tabsProperties[index].filter(
             item => {
               if (
                 !(
@@ -49,7 +48,7 @@ export class VersionTypeSelectComponent {
               }
             }
           );
-          this.mappingTarget = this.advancedSetting[0].name;
+          this.mappingTarget = this.store.advancedSetting[0].name;
 
           this._ruleApi
             .generateMappingRulesFileName(
@@ -59,7 +58,7 @@ export class VersionTypeSelectComponent {
             )
             .subscribe(response => {
               console.log('generateMappingRulesFileName response: ', response);
-              this.advancedSetting.forEach(element => {
+              this.store.advancedSetting.forEach(element => {
                 if (response.includes(element.name)) {
                   element.isExist = true;
                 } else {
diff --git a/public/src/app/store/store.ts b/public/src/app/store/store.ts
index 5bd8c3e..a994e94 100644
--- a/public/src/app/store/store.ts
+++ b/public/src/app/store/store.ts
@@ -19,6 +19,7 @@ export class Store {
   @observable loader = false;
   @observable cdumpIsDirty = false;
   @observable expandAdvancedSetting = [];
+  @observable advancedSetting = [];
   @observable expandImports = [];
   @observable generalflow;
   @observable vfiName;