diff options
| -rw-r--r-- | alarm-analysis/src/main/webapp/alarm/app/correlation-ruleInfo/ruleInfo.component.html | 153 | ||||
| -rw-r--r-- | alarm-analysis/src/main/webapp/alarm/app/correlation-ruleInfo/ruleInfo.component.ts | 290 |
2 files changed, 443 insertions, 0 deletions
diff --git a/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleInfo/ruleInfo.component.html b/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleInfo/ruleInfo.component.html new file mode 100644 index 00000000..95585133 --- /dev/null +++ b/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleInfo/ruleInfo.component.html @@ -0,0 +1,153 @@ +<!--
+ 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"|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.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 == 1">
+ <div class="col-xs-3">
+ <input class="magic-radio" type="radio" name="enabled" id="radio3" [(ngModel)]="queryRule.enabled" value="0">
+ <label for="radio1">{{"common_on"|translate}}</label>
+ </div>
+ <div class="col-xs-3">
+ <input class="magic-radio" type="radio" name="enabled" id="radio4" [(ngModel)]="queryRule.enabled" value="1">
+ <label for="radio2">{{"common_off"|translate}}</label>
+ </div>
+ </div>
+ <div *ngIf="queryRule.enabled == 0">
+ <div class="col-xs-3">
+ <input class="magic-radio" type="radio" name="enabled" id="radio1" [(ngModel)]="queryRule.enabled" value="0">
+ <label for="radio1">{{"common_on"|translate}}</label>
+ </div>
+ <div class="col-xs-3">
+ <input class="magic-radio" type="radio" name="enabled" id="radio2" [(ngModel)]="queryRule.enabled" value="1">
+ <label for="radio2">{{"common_off"|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/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleInfo/ruleInfo.component.ts b/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleInfo/ruleInfo.component.ts new file mode 100644 index 00000000..2fc81602 --- /dev/null +++ b/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleInfo/ruleInfo.component.ts @@ -0,0 +1,290 @@ +/*
+ 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;
+ }
+ });
+ }
+ }
+
+ initUpload(queryRule:RuleModel):void{
+ $("#fileName").text("");
+ $("#importFailTip").addClass("hide_panel");
+ $("#fileupload").fileupload({
+
+ dropZone: $('#dropzone'),
+ maxNumberOfFiles: 1,
+ maxChunkSize: 20000000,
+ autoUpload: false,
+ add: function (e, data) {
+ var 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);
+ var 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,
+ }
+ this.queryRule={
+ ruleid:null,
+ rulename:null,
+ description:null,
+ content:null,
+ createtime:null,
+ creator:null,
+ updatetime:null,
+ modifier:null,
+ enabled:0,
+ }
+
+ 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 |