diff options
Diffstat (limited to 'public/src/app')
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; |