Skip to content
website.component.html 20.1 KiB
Newer Older
wangqinghua's avatar
wangqinghua committed
<nz-modal [nzWidth]="1080" [(nzVisible)]="isVisible" nzTitle="{{title}}" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" [nzOkLoading]="isOkLoading">
wangqinghua's avatar
wangqinghua committed
    <nz-tabset [nzType]="'card'" [nzSelectedIndex]="tabNum" (nzSelectedIndexChange)="tabsChange($event)" style="padding-bottom: 25px;min-height: 500px">
wangqinghua's avatar
wangqinghua committed
        <nz-tab nzTitle="1.场景">
            <div nz-form class="ant-advanced-search-form form-select">
                <form nz-form class="ant-advanced-search-form">
                    <nz-collapse>
wangqinghua's avatar
wangqinghua committed
                        <nz-collapse-panel nzHeader="基本属性" [nzActive]="false">
wangqinghua's avatar
wangqinghua committed
                            <div nz-row [nzGutter]="24">
                                <div nz-col [nzSpan]="12">
                                    <nz-form-item nzFlex>
wangqinghua's avatar
wangqinghua committed
                                        <nz-form-label [nzSpan]="6" nzRequired nzFor="webName">网站名称</nz-form-label>
wangqinghua's avatar
wangqinghua committed
                                        <nz-form-control [nzSpan]="14">
wangqinghua's avatar
wangqinghua committed
                                            <input id="webName" name="webName" nz-input placeholder="网站名称" [(ngModel)]="validateForm.name">
wangqinghua's avatar
wangqinghua committed
                                        </nz-form-control>
                                    </nz-form-item>
                                </div>

                                <div nz-col [nzSpan]="12">
                                    <nz-form-item nzFlex>
wangqinghua's avatar
wangqinghua committed
                                        <nz-form-label [nzOffset]="4" [nzSpan]="6" nzRequired nzFor="delay">更新间隔</nz-form-label>
wangqinghua's avatar
wangqinghua committed
                                        <nz-form-control [nzSpan]="14">
wangqinghua's avatar
wangqinghua committed
                                            <input id="delay" name="delay" nz-input placeholder="更新间隔" [(ngModel)]="validateForm.delay">
wangqinghua's avatar
wangqinghua committed
                                        </nz-form-control>
                                    </nz-form-item>
                                </div>
                            </div>

                            <div nz-row [nzGutter]="24">
                                <div nz-col [nzSpan]="12">
                                    <nz-form-item nzFlex>
                                        <nz-form-label [nzSpan]="6" nzFor="retries">尝试次数</nz-form-label>
                                        <nz-form-control [nzSpan]="14">
wangqinghua's avatar
wangqinghua committed
                                            <input id="retries" name="retries" nz-input placeholder="尝试次数" [(ngModel)]="validateForm.retries">
wangqinghua's avatar
wangqinghua committed
                                        </nz-form-control>
                                    </nz-form-item>
                                </div>

                            </div>

                            <div nz-row [nzGutter]="24">
                                <div nz-col [nzSpan]="24">
                                    <nz-form-item nzFlex>
wangqinghua's avatar
wangqinghua committed
                                        <nz-form-label [nzSpan]="3" nzFor="http_proxy">Http代理</nz-form-label>
wangqinghua's avatar
wangqinghua committed
                                        <nz-form-control [nzSpan]="18">
                                            <input id="http_proxy" name="http_proxy" nz-input placeholder="默认"
                                                   [(ngModel)]="validateForm.http_proxy">
                                        </nz-form-control>
                                    </nz-form-item>
                                </div>
                            </div>
                        </nz-collapse-panel>

wangqinghua's avatar
wangqinghua committed
                        <nz-collapse-panel nzHeader="高级属性" [nzActive]="false">
wangqinghua's avatar
wangqinghua committed
                            <div nz-row [nzGutter]="24">
                                <div nz-col [nzSpan]="2">
                                    变量
                                </div>
                                <div nz-col [nzSpan]="10">
                                    <nz-form-item nzFlex>
                                        <nz-form-control [nzSpan]="14">
                                            <input  name="ipmi_username" nz-input placeholder="默认">
                                        </nz-form-control>
                                    </nz-form-item>
                                </div>
                                <div nz-col [nzSpan]="1">
                                    >=
                                </div>
                                <div nz-col [nzSpan]="10">
                                    <nz-form-item nzFlex>
                                        <nz-form-control [nzSpan]="14">
                                            <input  name="ipmi_username" nz-input placeholder="默认">
                                        </nz-form-control>
                                    </nz-form-item>
                                </div>
                                <div nz-col [nzSpan]="1">
                                    X
                                </div>
                            </div>

                            <div nz-row [nzGutter]="24">
                                <div nz-col [nzSpan]="2">
                                    头部
                                </div>
                                <div nz-col [nzSpan]="10">
                                    <nz-form-item nzFlex>
                                        <nz-form-control [nzSpan]="14">
                                            <input name="ipmi_username" nz-input placeholder="默认">
                                        </nz-form-control>
                                    </nz-form-item>
                                </div>
                                <div nz-col [nzSpan]="1">
                                    >=
                                </div>
                                <div nz-col [nzSpan]="10">
                                    <nz-form-item nzFlex>
                                        <nz-form-control [nzSpan]="14">
                                            <input  name="ipmi_username" nz-input placeholder="默认">
                                        </nz-form-control>
                                    </nz-form-item>
                                </div>
                                <div nz-col [nzSpan]="1">
                                    X
                                </div>
                            </div>
                        </nz-collapse-panel>
                    </nz-collapse>

                </form>

            </div>
        </nz-tab>

        <nz-tab nzTitle="2.步骤">
wangqinghua's avatar
wangqinghua committed
                    <button class="margin-left-5" (click)="addStep()" nz-button nzType="default">添加步骤</button>
wangqinghua's avatar
wangqinghua committed
                    <div style="padding: 10px;">
wangqinghua's avatar
wangqinghua committed
                        <div nz-row [nzGutter]="24">
wangqinghua's avatar
wangqinghua committed
                            <div nz-col  [nzSpan]="1" class="text-center">
wangqinghua's avatar
wangqinghua committed
                                No
                            </div>
wangqinghua's avatar
wangqinghua committed
                            <div nz-col [nzSpan]="4">
wangqinghua's avatar
wangqinghua committed
                                <span class="color-red">*</span>步骤名称
wangqinghua's avatar
wangqinghua committed
                            </div>
wangqinghua's avatar
wangqinghua committed
                            <div nz-col [nzSpan]="2">
wangqinghua's avatar
wangqinghua committed
                                <span class="color-red">*</span>超时
wangqinghua's avatar
wangqinghua committed
                            </div>
wangqinghua's avatar
wangqinghua committed
                            <div nz-col [nzSpan]="5">
wangqinghua's avatar
wangqinghua committed
                                <span class="color-red">*</span>URL
wangqinghua's avatar
wangqinghua committed
                            </div>
                            <div nz-col [nzSpan]="3">
                                要求字串
                            </div>
                            <div nz-col [nzSpan]="3">
                                要求状态码
                            </div>
                            <div nz-col [nzSpan]="3">
wangqinghua's avatar
wangqinghua committed
                                <span class="color-red">*</span>跟随跳转
wangqinghua's avatar
wangqinghua committed
                            </div>
wangqinghua's avatar
wangqinghua committed
                            <div nz-col [nzSpan]="1"></div>
                            <div nz-col [nzSpan]="2"></div>
wangqinghua's avatar
wangqinghua committed
                        </div>
wangqinghua's avatar
wangqinghua committed
                        <ng-container *ngFor="let item of steps;let i = index;">
                            <div nz-row [nzGutter]="12">
                                <div nz-col [nzSpan]="1" class="text-center middle">
                                    {{i +1}}
                                </div>
                                <nz-form-control nz-col [nzSpan]="4">
                                    <input nz-input placeholder="名称" [(ngModel)]="item.name">
                                </nz-form-control>
                                <nz-form-control nz-col [nzSpan]="2">
                                    <input nz-input placeholder="15" [(ngModel)]="item.timeout">
                                </nz-form-control>
                                <nz-form-control nz-col [nzSpan]="5">
                                    <input nz-input placeholder=""  [(ngModel)]="item.url">
                                </nz-form-control>
                                <nz-form-control nz-col [nzSpan]="3">
                                    <input nz-input placeholder="" [(ngModel)]="item.posts">
                                </nz-form-control>
                                <nz-form-control nz-col [nzSpan]="3">
                                    <input nz-input placeholder="200" [(ngModel)]="item.status_codes">
                                </nz-form-control>
                                <nz-form-control nz-col [nzSpan]="3">
                                    <nz-select style="width: 100%" name="equipmentType" nzPlaceHolder="是否跟随跳转" [(ngModel)]="item.follow_redirects">
                                        <nz-option nzValue="1" nzLabel="是"></nz-option>
                                        <nz-option nzValue="0" nzLabel="否"></nz-option>
                                    </nz-select>
                                </nz-form-control>
                                <div nz-col [nzSpan]="1" class="middle">
                                    <span (click)="deleteStep(i)" class="cursor main-color">X</span>
                                </div>
                                <div nz-col [nzSpan]="2" (click)="showCon(i)"  class="middle main-color cursor">阈值</div>
wangqinghua's avatar
wangqinghua committed
                            </div>
wangqinghua's avatar
wangqinghua committed
                            <div class="trigger-class" *ngIf="item.show">
                                <nz-form-item class="form-select">
                                    <nz-form-control class="form-select">
                                        <div nz-row [nzGutter]="12">
                                            <nz-form-control nz-col [nzPush]="1" [nzSpan]="6">
                                                <button nz-button nzType="primary" nzSize="small" (click)="addcondition(i)">添加条件</button>
                                                <span>危险阈值</span>
                                            </nz-form-control>
                                        </div>
                                        <div nz-row [nzGutter]="12" *ngFor="let fault of item.conditionList;let i1 = index;">
                                            <nz-form-control nz-col [nzSpan]="1"></nz-form-control>
                                            <nz-form-control nz-col [nzSpan]="5">
                                                <nz-select name="interfaces_main" nzPlaceHolder="选择接口类型" [(ngModel)]="fault.and" *ngIf="i1 > 0">
                                                    <nz-option nzValue=" and " nzLabel="并且"></nz-option>
                                                    <nz-option nzValue=" or " nzLabel="或"></nz-option>
                                                </nz-select>
                                            </nz-form-control>
                                            <nz-form-control nz-col [nzSpan]="4">
                                                <nz-select name="interfaces_main" [(ngModel)]="fault.time">
                                                    <nz-option nzValue="0" nzLabel="响应时间"></nz-option>
                                                    <nz-option nzValue="1" nzLabel="响应代码"></nz-option>
                                                </nz-select>
                                            </nz-form-control>
                                            <nz-form-control nz-col [nzSpan]="5">
                                                <nz-select name="interfaces_main" nzPlaceHolder="选择接口类型" [(ngModel)]="fault.equal">
                                                    <nz-option nzValue="=" nzLabel="="></nz-option>
                                                    <nz-option nzValue=">" nzLabel=">"></nz-option>
                                                    <nz-option nzValue="<" nzLabel="<"></nz-option>
                                                </nz-select>
                                            </nz-form-control>
                                            <nz-form-control nz-col [nzSpan]="5">
                                                <input type="text" nz-input name="value" [(ngModel)]="fault.value">
                                            </nz-form-control>
                                            <nz-form-control nz-col [nzSpan]="2">
                                                <button nz-button nzType="primary" (click)="deleteCondition(i,i1)"><i style="color: #fff" class="anticon anticon-close-circle-o"></i></button>
                                            </nz-form-control>
                                        </div>
                                    </nz-form-control>
                                </nz-form-item>
                                <nz-form-item class="form-select">
                                    <nz-form-control class="form-select">
                                        <div nz-row [nzGutter]="12">
                                            <nz-form-control nz-col [nzPush]="1" [nzSpan]="6">
                                                <button nz-button nzType="primary" nzSize="small" (click)="addFault(i)">添加条件</button>
                                                <span>故障阈值</span>
                                            </nz-form-control>
                                        </div>
                                        <div nz-row [nzGutter]="12" *ngFor="let fault of item.faultConditionList;let i2 = index;">
                                            <nz-form-control nz-col [nzSpan]="1"></nz-form-control>
                                            <nz-form-control nz-col [nzSpan]="5">
                                                <nz-select name="interfaces_main" [(ngModel)]="fault.and" *ngIf="i2 > 0">
                                                    <nz-option nzValue=" and " nzLabel="并且"></nz-option>
                                                    <nz-option nzValue=" or " nzLabel="或"></nz-option>
                                                </nz-select>
                                            </nz-form-control>
                                            <nz-form-control nz-col [nzSpan]="4">
                                                <nz-select name="interfaces_main" [(ngModel)]="fault.time">
                                                    <nz-option nzValue="0" nzLabel="响应时间"></nz-option>
                                                    <nz-option nzValue="1" nzLabel="响应代码"></nz-option>
                                                </nz-select>
                                            </nz-form-control>
                                            <nz-form-control nz-col [nzSpan]="5">
                                                <nz-select name="interfaces_main" nzPlaceHolder="选择接口类型" [(ngModel)]="fault.equal">
                                                    <nz-option nzValue="=" nzLabel="="></nz-option>
                                                    <nz-option nzValue=">" nzLabel=">"></nz-option>
                                                    <nz-option nzValue="<" nzLabel="<"></nz-option>
                                                </nz-select>
                                            </nz-form-control>
                                            <nz-form-control nz-col [nzSpan]="5">
                                                <input type="text" nz-input name="value" [(ngModel)]="fault.value">
                                            </nz-form-control>
                                            <nz-form-control nz-col [nzSpan]="2">
                                                <button nz-button nzType="primary" (click)="deleteFault(i,i2)"><i style="color: #fff" class="anticon anticon-close-circle-o"></i></button>
                                            </nz-form-control>
                                        </div>
                                    </nz-form-control>
                                </nz-form-item>
                                <div class="modal-footer-btn">
                                    <button nz-button (click)="closeCon(i,false)" nzType="primary">取消</button>
                                    <button nz-button (click)="closeCon(i,true)" nzType="primary">保存</button>
                                </div>
wangqinghua's avatar
wangqinghua committed
                            </div>
wangqinghua's avatar
wangqinghua committed
                        </ng-container>
wangqinghua's avatar
wangqinghua committed
                    </div>
        </nz-tab>

        <nz-tab nzTitle="3.认证">
            <form nz-form class="ant-advanced-search-form">
                <div nz-row [nzGutter]="24">
                    <div nz-col [nzSpan]="12">
                        <nz-form-item nzFlex>
                            <nz-form-label [nzSpan]="6" nzFor="applicationid">Http认证</nz-form-label>
                            <nz-form-control [nzSpan]="14">
                                <nz-select id="applicationid" name="applicationid" nzPlaceHolder="选择设备类型" [(ngModel)]="validateForm.applicationid">
                                    <nz-option nzValue="是" nzLabel="是"></nz-option>
                                </nz-select>
                            </nz-form-control>
                        </nz-form-item>
                    </div>

                    <div nz-col [nzSpan]="6">
                        <label nz-checkbox>
                            <span>SSL验证对端</span>
                        </label>
                    </div>

                    <div nz-col [nzSpan]="6">
                        <label nz-checkbox>
                            <span>SSL验证主机</span>
                        </label>
                    </div>
                </div>
                <div nz-row [nzGutter]="24">
                    <div nz-col [nzSpan]="12">
                        <nz-form-item nzFlex>
                            <nz-form-label [nzSpan]="6" nzFor="ssl_cert_file">SSL证书文件</nz-form-label>
                            <nz-form-control [nzSpan]="14">
                                <input id="ssl_cert_file" name="ssl_cert_file" nz-input placeholder="默认"
                                       [(ngModel)]="validateForm.ssl_cert_file">
                            </nz-form-control>
                        </nz-form-item>
                    </div>

                    <div nz-col [nzSpan]="12">
                        <nz-form-item nzFlex>
                            <nz-form-label [nzOffset]="4" [nzSpan]="6" nzFor="ssl_key_file">SSL秘钥文件
                            </nz-form-label>
                            <nz-form-control [nzSpan]="14">
                                <input id="ssl_key_file" name="ssl_key_file" nz-input placeholder="默认"
                                       [(ngModel)]="validateForm.ssl_key_file">
                            </nz-form-control>
                        </nz-form-item>
                    </div>
                </div>

                <div nz-row [nzGutter]="24">
                    <div nz-col [nzSpan]="12">
                        <nz-form-item nzFlex>
                            <nz-form-label [nzSpan]="6" nzFor="ssl_key_password">SSL秘钥密码</nz-form-label>
                            <nz-form-control [nzSpan]="14">
                                <input id="ssl_key_password" name="ssl_key_password" nz-input placeholder="默认"
                                       [(ngModel)]="validateForm.ssl_key_password">
                            </nz-form-control>
                        </nz-form-item>
                    </div>
                </div>
            </form>
        </nz-tab>
    </nz-tabset>
wangqinghua's avatar
wangqinghua committed
</nz-modal>