diff options
Diffstat (limited to 'rulemgt-frontend/src/app/correlation-ruleInfo')
| -rw-r--r-- | rulemgt-frontend/src/app/correlation-ruleInfo/ruleInfo.component.html | 155 | ||||
| -rw-r--r-- | rulemgt-frontend/src/app/correlation-ruleInfo/ruleInfo.component.ts | 297 |
2 files changed, 452 insertions, 0 deletions
diff --git a/rulemgt-frontend/src/app/correlation-ruleInfo/ruleInfo.component.html b/rulemgt-frontend/src/app/correlation-ruleInfo/ruleInfo.component.html new file mode 100644 index 0000000..6378429 --- /dev/null +++ b/rulemgt-frontend/src/app/correlation-ruleInfo/ruleInfo.component.html @@ -0,0 +1,155 @@ +<!-- + Copyright 2017 ZTE Corporation. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +--> +<div class="container" style="margin-top: 20px"> + <form #ruleForm="ngForm" class="form-group row" (submit)="onSubmit(ruleName)"> + <div class="form-body"> + <div class="row form-group col-xs-12 "> + <label for="userName" class="col-xs-2 col-form-label labelstyle"> + <span>{{"field_rule_name_Add_Page"|translate}}</span> + <span style="color: red">*</span> + </label> + <div class="col-xs-6" style="margin-left: -100px"> + <input class="form-control ng-pristine ng-untouched ng-invalid ng-invalid-required" style="width: 60%" type="text" name="rulename" + [(ngModel)]="queryRule.ruleName" id="ruleNameInput" readonly="{{addBottonStatus}}" #ruleName="ngModel" + required> + </div> + </div> + + <div class="row form-group col-xs-12"> + <label for="userName" class="col-xs-2 col-form-label labelstyle"> + <span>{{"field_description"|translate}}</span> + </label> + <div class="col-xs-6" style="margin-left: -100px"> + <input class="form-control ng-untouched ng-pristine ng-valid" readonly="{{addBottonStatus}}" style="width: 60%" type="text" + [(ngModel)]="queryRule.loopControlName" name="description"> + </div> + </div> + + <div class="row form-group col-xs-12"> + <label for="userName" class="col-xs-2 col-form-label labelstyle"> + <span>{{"field_description"|translate}}</span> + </label> + <div class="col-xs-6" style="margin-left: -100px"> + <input class="form-control ng-untouched ng-pristine ng-valid" readonly="{{addBottonStatus}}" style="width: 60%" type="text" + [(ngModel)]="queryRule.description" name="description"> + </div> + </div> + + <div id="state" class="row form-group col-xs-12"> + <label class="col-xs-2 col-form-label labelstyle"> + <span>{{"common_status"|translate}}</span> + </label> + + <div class="col-xs-6" style="margin-left: -113px"> + <div *ngIf="queryRule.enabled == 0"> + <div class="col-xs-3" > + <input class="magic-radio" type="radio" name="radio" [(ngModel)]="queryRule.enabled" value='0'> + <label for="radio1" >{{"common_off"|translate}}</label> + </div> + <div class="col-xs-3" > + <input class="magic-radio" type="radio" name="radio" [(ngModel)]="queryRule.enabled" value='1'> + <label for="radio1" (click)="switch()">{{"common_on"|translate}}</label> + </div> + </div> + <div *ngIf="queryRule.enabled == 1"> + <div class="col-xs-3" > + <input class="magic-radio" type="radio" name="radio" [(ngModel)]="queryRule.enabled" value='0'> + <label for="radio1" (click)="switch()">{{"common_off"|translate}}</label> + </div> + <div class="col-xs-3" > + <input class="magic-radio" type="radio" name="radio" [(ngModel)]="queryRule.enabled" value='1'> + <label for="radio1" >{{"common_on"|translate}}</label> + </div> + </div> + </div> + </div> + + <div class="row form-group col-xs-12"> + <label for="" class="col-xs-2 col-form-label labelstyle"> + <span>{{"common_file"|translate}}</span> + </label> + <div class="col-xs-6" style="margin-left: -100px"> + <div class="btn-group btn-group-circle"> + <span class="importDivArea mmlBatchBtnBar"> + <button class="btn btn-info" id="importBtn" disabled="{{addBottonStatus}}"> + <span class="ict-import"></span> + <span>{{"import"|translate}}</span> + </button> + <div id="importDiv" class="container upload"> + <form id="fileupload" #fileForm="ngForm" role="form" enctype="multipart/form-data"> + <div class="file-preview"> + <div id="dropzone" class="file-drop-zone"> + <div class="file-drop-zone-title"> + <span>{{"file_import"|translate}}</span> + </div> + </div> + </div> + + <div class="input-group fileupload-btn"> + <div id="fileName" class="form-control file-caption">task2.zip</div> + <span class="input-group-btn" id="btnGroup"> + <span class="btn btn-primary fileinput-button white radius_s blue1-active" id="browse" data-placement="bottom" data-toggle="tooltip"> + <span class="importBtnFontSize">{{"common_browse"|translate}}</span> + <input type="file" name="file" title=" " accept=".txt" multiple=""> + </span> + <button id="fileremove" class="btn btn-default" type="button"> + <span class="importBtnFontSize">{{"common_remove"|translate}}</span> + </button> + <button id="filesubmit" class="btn btn-default" type="button">{{"common_confirm"|translate}}</button> + </span> + </div> + + </form> + </div> + </span> + </div> + </div> + </div> + + <div class="row form-group col-xs-12"> + <label for="" class="col-xs-2 col-form-label labelstyle"> + <span>{{"message_rule_content"|translate}}</span> + <span style="color: red">*</span> + </label> + <div class="col-xs-8" style="margin-left: -100px"> + <div class="form-group"> + <textarea id="cmds" class="form-control" readonly="{{addBottonStatus}}" [(ngModel)]="queryRule.content" name="content" rows="12" + cols="80" required placeholder="package example;"> + </textarea> + + </div> + </div> + </div> + + <div class="row form-group col-xs-12 " style="margin-left: 73px"> + <div class="col-xs-8 "> + <label class="myclass" id="checkLabel"> + <button type="button" (click)="checkContent('check')" disabled="{{addBottonStatus}}" class="btn btn-info">{{"common_check"|translate}}</button> + </label> + <label class="myclass" id="updateLabel"> + <button type="button" disabled="{{addBottonStatus}}" class="btn btn-info" (click)="update()">{{"common_update"|translate}}</button> + </label> + <label class="myclass" id="saveLabel"> + <button type="submit" disabled="{{addBottonStatus}}" class="btn btn-info">{{"common_save"|translate}}</button> + </label> + <label class="myclass" id="cancelLabel"> + <button type="button" routerLink='/alarmRule' class="btn btn-info">{{"common_cancel"|translate}}</button> + </label> + </div> + </div> + </div> + </form> +</div>
\ No newline at end of file diff --git a/rulemgt-frontend/src/app/correlation-ruleInfo/ruleInfo.component.ts b/rulemgt-frontend/src/app/correlation-ruleInfo/ruleInfo.component.ts new file mode 100644 index 0000000..7f8d375 --- /dev/null +++ b/rulemgt-frontend/src/app/correlation-ruleInfo/ruleInfo.component.ts @@ -0,0 +1,297 @@ +/* + Copyright 2017 ZTE Corporation. + + Licensed under the Apache License, Version 2.0 (the 'License'); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an 'AS IS' BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +import { Component, OnInit, Input } from '@angular/core'; +import { RuleModel } from '../correlation-ruleList/alarmRule'; +import { ActivatedRoute, Params, Router } from '@angular/router'; +import { AlarmRuleService } from '../correlation-ruleList/alarmRule.service'; +import { Http, Response, Headers } from '@angular/http'; +import { ModalService } from '../correlation-modal/modal.service'; +import { NgModel } from '@angular/forms'; +declare var $: any; +@Component({ + selector: 'RuleInfo', + templateUrl: './ruleInfo.component.html' +}) +export class RuleInfo implements OnInit { + formModel: RuleModel; + queryRule: RuleModel; + id: number; + addBottonStatus: boolean; + constructor(private modalService: ModalService, private route: ActivatedRoute, private router: Router, private alarmRuleService: AlarmRuleService, http: Http) { }; + + update() { + this.queryRule.enabled = $('input:radio:checked').val(); + if (!this.queryRule.content.startsWith('package ')) { + let msg = { title: 'exception_content_error', message: 'exception_package_error' }; + this.modalService.getmodalObservable.next(msg); + } else { + + this.alarmRuleService.checkContent(this.queryRule.content) + .then(res => { + if (res.status == 200) { + this.alarmRuleService.updateRule(this.queryRule) + .then(res => { + if (res.status == 200) { + let msg = { title: 'modalTitleUpdate', message: 'message_update_rule_success' }; + this.modalService.getmodalObservable.next(msg); + this.router.navigate(['alarmRule']); + } else if (res.status == 499) { + let msg = { title: 'modalTitleUpdate', message: 'message_exception_rule_fail' }; + this.modalService.getmodalObservable.next(msg); + } else { + let msg = { title: 'modalTitleUpdate', message: 'message_other_exception_rule_fail' }; + this.modalService.getmodalObservable.next(msg); + } + }).catch( + res => { + let msg = { title: 'modalTitleUpdate', message: 'message_other_exception_rule_fail' }; + this.modalService.getmodalObservable.next(msg); + } + ); + + } else if (res.status == 499) { + let msg = { 'title': 'modalTitleCheck', message: 'message_rule_content_repeat_error' }; + this.modalService.getmodalObservable.next(msg); + return false; + } else { + let msg = { 'title': 'modalTitleCheck', message: 'message_other_exception_rule_fail' }; + this.modalService.getmodalObservable.next(msg); + return false; + } + }) + } + } + + onSubmit(obj: NgModel) { + this.save(); + } + + save() { + if (!this.queryRule.content.startsWith('package ')) { + let msg = { title: 'exception_content_error', message: 'exception_package_error' }; + this.modalService.getmodalObservable.next(msg); + } else { + this.alarmRuleService.checkContent(this.queryRule.content).then(res => { + if (res.status == 200) { + this.alarmRuleService.save(this.queryRule).then(res => { + if (res.status == 200) { + let msg = { title: 'modalTitleDefault', message: 'message_add_rule_success' }; + this.modalService.getmodalObservable.next(msg); + this.router.navigate(['alarmRule']); + } else if (res.status == 499) { + let msg = { title: 'modalTitleDefault', message: 'message_rule_name_repeat_error' }; + this.modalService.getmodalObservable.next(msg); + } else { + let msg = { 'title': 'modalTitleCheck', message: 'message_other_exception_rule_fail' }; + this.modalService.getmodalObservable.next(msg); + } + + }).catch(error => { + let msg = { title: 'modalTitleDefault', message: 'message_rule_name_repeat_error' }; + this.modalService.getmodalObservable.next(msg); + }); + return true; + } else if (res.status == 499) { + let msg = { 'title': 'modalTitleCheck', message: 'message_rule_content_repeat_error' }; + this.modalService.getmodalObservable.next(msg); + return false; + } else { + let msg = { 'title': 'modalTitleCheck', message: 'message_other_exception_rule_fail' }; + this.modalService.getmodalObservable.next(msg); + return false; + } + }) + } + } + + getRuleInfo(id: string): void { + this.route.params.switchMap((params: Params) => this.alarmRuleService.search(id)) + .subscribe(rule => { + rule[0].enabled = '' + rule[0].enabled; + this.queryRule = rule[0] + }) + } + + checkContent(judge: string): void { + if (!this.queryRule.content.startsWith('package ')) { + let msg = { title: 'exception_content_error', message: 'exception_package_error' }; + this.modalService.getmodalObservable.next(msg); + } else { + this.alarmRuleService.checkContent(this.queryRule.content) + .then(res => { + if (res.status == 200) { + let msg = { 'title': 'modalTitleCheck', message: 'message_checkContent_rule_success' }; + this.modalService.getmodalObservable.next(msg); + } else if (res.status == 499) { + let msg = { 'title': 'modalTitleCheck', message: 'message_rule_content_repeat_error' }; + this.modalService.getmodalObservable.next(msg); + return false; + } else { + let msg = { 'title': 'modalTitleCheck', message: 'message_other_exception_rule_fail' }; + this.modalService.getmodalObservable.next(msg); + return false; + } + }); + } + } + switch(): void { + // alert(this.queryRule.enabled); + this.queryRule.enabled == '0' ? this.queryRule.enabled = '1' : this.queryRule.enabled = '0'; + } + + + initUpload(queryRule: RuleModel): void { + $('#fileName').text(''); + $('#importFailTip').addClass('hide_panel'); + $('#fileupload').fileupload({ + + dropZone: $('#dropzone'), + maxNumberOfFiles: 1, + maxChunkSize: 20000000, + autoUpload: false, + add: function (e, data) { + let fileName = data.files[0].name; + + $('#importFailTip').addClass('hide_panel'); + let suffix = fileName.substring(fileName.lastIndexOf('.'), fileName.length) + + if (suffix != '.txt') { + $('#importFailTip').removeClass('hide_panel'); + return suffix; + } + + $('#bar').css('width', '0%'); + $('#persent').text('0%'); + $('#fileName').text(fileName); + $('#fileremove').attr('disabled', false); + $('#filesubmit').attr('disabled', false); + $('#filesubmit').click(function () { + this.file = data.files[0] + var reader = new FileReader(); + reader.readAsText(this.file); + reader.onload = function (data) { + queryRule.content = this.result; + } + $('#fileremove').click(); + $('#importDiv').hide(); + e.stopPropagation(); + }); + + $('#fileremove').click(function () { + $('#bar').css('width', '0%'); + $('#persent').text('0%'); + $('#fileName').text(''); + $('#filesubmit').attr('disabled', true); + $('#fileremove').attr('disabled', true); + }); + }, + done: function (e, data) { + + }, + fail: function (e, resp) { + }, + always: function (e, data) { + $('.progress').removeClass('active'); + $('#bar').css('width', '100%'); + $('#persent').text('100%'); + }, + progressall: function (e, data) { + } + }); + } + + initImportDiv(queryRule: RuleModel): void { + this.initUpload(queryRule); + let importDiv = $('#importDiv'); + $(function (arg) { + $('#importBtn').click(function (e) { + e.preventDefault(); + $('[data-toggle="tooltip"]').tooltip(); + $('#importFailTip').addClass('hide_panel'); + showDiv(); + $(document).one('click', function (e) { + $(importDiv).hide(); + }); + e.stopPropagation(); + }); + $(importDiv).click(function (e) { + e.stopPropagation(); + }); + $('#filesubmit').attr('disabled', true); + $('#fileremove').attr('disabled', true); + }); + function showDiv() { + $('#bar').css('width', '0%'); + $('#persent').text('0%'); + $(importDiv).fadeIn(); + } + } + ngOnInit() { + this.formModel = { + ruleId: null, + ruleName: null, + description: null, + content: null, + createTime: null, + creator: null, + updateTime: null, + modifier: null, + enabled: null, + loopControlName: null + }; + this.queryRule = { + ruleId: null, + ruleName: null, + description: null, + content: null, + createTime: null, + creator: null, + updateTime: null, + modifier: null, + enabled: 0, + loopControlName: '' + }; + + this.route.params.subscribe((params) => { + + let id = params['id']; + if (typeof (id) == 'string') { + if (id.indexOf('&') == -1) { + $('#ruleNameInput').attr('disabled', true); + $('#saveLabel').hide(); + } else { + this.addBottonStatus = false; + $('#saveLabel').hide(); + $('#checkLabel').hide(); + $('#updateLabel').hide(); + } + + let str = id.split('&'); + this.getRuleInfo(str[0]); + } else if (typeof (id) != 'undefined') { + this.getRuleInfo(id); + } else { + $('#updateLabel').hide(); + } + if (typeof (this.queryRule.enabled) === 'number') { + this.queryRule.enabled = '' + this.queryRule.enabled; + } + }); + + this.initImportDiv(this.queryRule); + } + +}
\ No newline at end of file |