hertzbeat/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.html

<nz-divider></nz-divider>
<nz-breadcrumb>
  <nz-breadcrumb-item>
    <a [routerLink]="['/']">
      <i nz-icon nzType="home"></i>
      <span>仪表盘</span>
    </a>
  </nz-breadcrumb-item>
  <nz-breadcrumb-item>
    <a [routerLink]="['/monitors']" [queryParams]="{ app: monitor.app ? monitor.app : '' }">
      <i nz-icon nzType="monitor"></i>
      <span>监控列表</span>
    </a>
  </nz-breadcrumb-item>
  <nz-breadcrumb-item>
    <i nz-icon nzType="plus-circle"></i>
    <span>新增 {{ 'monitor.app.' + monitor.app | i18n }} 监控</span>
    <a [href]="'https://tancloud.cn/docs/help/' + monitor.app" target="_blank" style="float: right; margin-right: 5%">
      <span>帮助&nbsp;</span>
      <i nz-icon nzType="question-circle" nzTheme="outline"></i>
    </a>
  </nz-breadcrumb-item>
</nz-breadcrumb>
<nz-divider></nz-divider>

<nz-spin [nzSpinning]="isSpinning">
  <div class="-inner-content">
    <form nz-form #newForm="ngForm">
      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzFor="host" nzRequired="true" nzTooltipTitle="被监控的对端IP或域名"> 监控Host </nz-form-label>
        <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' | i18n">
          <input
            [(ngModel)]="monitor.host"
            nz-input
            name="host"
            type="text"
            id="host"
            required
            placeholder="请输入域名或IP"
            (ngModelChange)="onHostChange($event)"
          />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzFor="name" nzRequired="true" nzTooltipTitle="标识此监控的名称,名称需要保证唯一性">
          监控名称
        </nz-form-label>
        <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' | i18n">
          <input [(ngModel)]="monitor.name" nz-input required name="name" type="text" id="name" placeholder="监控名称需要保证唯一性" />
        </nz-form-control>
      </nz-form-item>

      <nz-divider></nz-divider>

      <nz-form-item *ngFor="let paramDefine of paramDefines; let i = index">
        <nz-form-label
          *ngIf="paramDefine.field !== 'host' && paramDefine.type === 'text'"
          nzSpan="7"
          [nzRequired]="paramDefine.required"
          [nzFor]="paramDefine.field"
          >{{ paramDefine.name }}
        </nz-form-label>
        <nz-form-control
          *ngIf="paramDefine.field !== 'host' && paramDefine.type === 'text'"
          nzSpan="8"
          [nzErrorTip]="'validation.required' | i18n"
        >
          <input
            nz-input
            [required]="paramDefine.required"
            [(ngModel)]="params[i].value"
            [name]="paramDefine.field"
            [type]="paramDefine.type"
            [id]="paramDefine.field"
            [placeholder]="paramDefine.placeholder ? paramDefine.placeholder : ''"
          />
        </nz-form-control>

        <nz-form-label *ngIf="paramDefine.type === 'textarea'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field"
          >{{ paramDefine.name }}
        </nz-form-label>
        <nz-form-control *ngIf="paramDefine.type === 'textarea'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
          <textarea
            nz-input
            [(ngModel)]="params[i].value"
            [required]="paramDefine.required"
            [name]="paramDefine.field"
            [id]="paramDefine.field"
            [placeholder]="paramDefine.placeholder ? paramDefine.placeholder : ''"
            rows="3"
          ></textarea>
        </nz-form-control>

        <nz-form-label *ngIf="paramDefine.type === 'password'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field"
          >{{ paramDefine.name }}
        </nz-form-label>
        <nz-form-control *ngIf="paramDefine.type === 'password'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
          <nz-input-group [nzSuffix]="suffixTemplate" style="width: 100%">
            <input
              [type]="passwordVisible ? 'text' : 'password'"
              nz-input
              [required]="paramDefine.required"
              placeholder="input password"
              [(ngModel)]="params[i].value"
              [id]="paramDefine.field"
              [name]="paramDefine.field"
              [placeholder]="paramDefine.placeholder ? paramDefine.placeholder : ''"
            />
          </nz-input-group>
          <ng-template #suffixTemplate>
            <i nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" (click)="passwordVisible = !passwordVisible"></i>
          </ng-template>
        </nz-form-control>

        <nz-form-label *ngIf="paramDefine.type === 'number'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field"
          >{{ paramDefine.name }}
        </nz-form-label>
        <nz-form-control *ngIf="paramDefine.type === 'number'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
          <nz-input-number
            [(ngModel)]="params[i].value"
            [required]="paramDefine.required"
            [nzMin]="-1000"
            [nzMax]="65535"
            [nzStep]="1"
            [nzPlaceHolder]="paramDefine.placeholder ? paramDefine.placeholder : ''"
            [name]="paramDefine.field"
            [id]="paramDefine.field"
          ></nz-input-number>
        </nz-form-control>

        <nz-form-label *ngIf="paramDefine.type === 'boolean'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field"
          >{{ paramDefine.name }}
        </nz-form-label>
        <nz-form-control *ngIf="paramDefine.type === 'boolean'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
          <nz-switch
            [(ngModel)]="params[i].value"
            (ngModelChange)="onParamBooleanChanged($event, paramDefine.field)"
            [required]="paramDefine.required"
            [name]="paramDefine.field"
            [id]="paramDefine.field"
          ></nz-switch>
        </nz-form-control>

        <nz-form-label *ngIf="paramDefine.type === 'radio'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field"
          >{{ paramDefine.name }}
        </nz-form-label>
        <nz-form-control *ngIf="paramDefine.type === 'radio'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
          <nz-radio-group
            [(ngModel)]="params[i].value"
            nzButtonStyle="solid"
            [required]="paramDefine.required"
            [name]="paramDefine.field"
            [id]="paramDefine.field"
          >
            <label nz-radio-button [nzValue]="optionItem.value" *ngFor="let optionItem of paramDefine.options">
              {{ optionItem.label }}
            </label>
          </nz-radio-group>
        </nz-form-control>

        <nz-form-label *ngIf="paramDefine.type === 'key-value'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field"
          >{{ paramDefine.name }}
        </nz-form-label>
        <nz-form-control *ngIf="paramDefine.type === 'key-value'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
          <app-key-value-input
            [(value)]="params[i].value"
            [id]="paramDefine.field"
            [keyAlias]="paramDefine.keyAlias ? paramDefine.keyAlias : 'Name'"
            [valueAlias]="paramDefine.valueAlias ? paramDefine.valueAlias : 'Value'"
          ></app-key-value-input>
        </nz-form-control>
      </nz-form-item>

      <nz-collapse [nzGhost]="true">
        <nz-collapse-panel nzHeader="高级" [nzHeader]="extraColHeader" [nzShowArrow]="false">
          <nz-form-item *ngFor="let paramDefine of advancedParamDefines; let i = index">
            <nz-form-label
              *ngIf="paramDefine.field !== 'host' && paramDefine.type === 'text'"
              nzSpan="7"
              [nzRequired]="paramDefine.required"
              [nzFor]="paramDefine.field"
              >{{ paramDefine.name }}
            </nz-form-label>
            <nz-form-control
              *ngIf="paramDefine.field !== 'host' && paramDefine.type === 'text'"
              nzSpan="8"
              [nzErrorTip]="'validation.required' | i18n"
            >
              <input
                nz-input
                [(ngModel)]="advancedParams[i].value"
                [required]="paramDefine.required"
                [name]="paramDefine.field"
                [type]="paramDefine.type"
                [id]="paramDefine.field"
                [placeholder]="paramDefine.placeholder ? paramDefine.placeholder : ''"
              />
            </nz-form-control>

            <nz-form-label
              *ngIf="paramDefine.type === 'textarea'"
              nzSpan="7"
              [nzRequired]="paramDefine.required"
              [nzFor]="paramDefine.field"
              >{{ paramDefine.name }}
            </nz-form-label>
            <nz-form-control *ngIf="paramDefine.type === 'textarea'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
              <textarea
                nz-input
                [(ngModel)]="advancedParams[i].value"
                [required]="paramDefine.required"
                [name]="paramDefine.field"
                [id]="paramDefine.field"
                [placeholder]="paramDefine.placeholder ? paramDefine.placeholder : ''"
                rows="3"
              ></textarea>
            </nz-form-control>

            <nz-form-label
              *ngIf="paramDefine.type === 'password'"
              nzSpan="7"
              [nzRequired]="paramDefine.required"
              [nzFor]="paramDefine.field"
              >{{ paramDefine.name }}
            </nz-form-label>
            <nz-form-control *ngIf="paramDefine.type === 'password'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
              <nz-input-group [nzSuffix]="suffixTemplate" style="width: 100%">
                <input
                  [type]="passwordVisible ? 'text' : 'password'"
                  nz-input
                  placeholder="input password"
                  [required]="paramDefine.required"
                  [(ngModel)]="advancedParams[i].value"
                  [id]="paramDefine.field"
                  [name]="paramDefine.field"
                  [placeholder]="paramDefine.placeholder ? paramDefine.placeholder : ''"
                />
              </nz-input-group>
              <ng-template #suffixTemplate>
                <i nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" (click)="passwordVisible = !passwordVisible"></i>
              </ng-template>
            </nz-form-control>

            <nz-form-label *ngIf="paramDefine.type === 'number'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field"
              >{{ paramDefine.name }}
            </nz-form-label>
            <nz-form-control *ngIf="paramDefine.type === 'number'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
              <nz-input-number
                [(ngModel)]="advancedParams[i].value"
                [required]="paramDefine.required"
                [nzMin]="-1000"
                [nzMax]="65535"
                [nzStep]="1"
                [nzPlaceHolder]="paramDefine.placeholder ? paramDefine.placeholder : ''"
                [name]="paramDefine.field"
                [id]="paramDefine.field"
              ></nz-input-number>
            </nz-form-control>

            <nz-form-label *ngIf="paramDefine.type === 'boolean'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field"
              >{{ paramDefine.name }}
            </nz-form-label>
            <nz-form-control *ngIf="paramDefine.type === 'boolean'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
              <nz-switch
                [(ngModel)]="advancedParams[i].value"
                [required]="paramDefine.required"
                [name]="paramDefine.field"
                [id]="paramDefine.field"
              ></nz-switch>
            </nz-form-control>

            <nz-form-label *ngIf="paramDefine.type === 'radio'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field"
              >{{ paramDefine.name }}
            </nz-form-label>
            <nz-form-control *ngIf="paramDefine.type === 'radio'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
              <nz-radio-group
                [(ngModel)]="advancedParams[i].value"
                [required]="paramDefine.required"
                nzButtonStyle="solid"
                [name]="paramDefine.field"
                [id]="paramDefine.field"
              >
                <label nz-radio-button [nzValue]="optionItem.value" *ngFor="let optionItem of paramDefine.options">
                  {{ optionItem.label }}
                </label>
              </nz-radio-group>
            </nz-form-control>

            <nz-form-label
              *ngIf="paramDefine.type === 'key-value'"
              nzSpan="7"
              [nzRequired]="paramDefine.required"
              [nzFor]="paramDefine.field"
              >{{ paramDefine.name }}
            </nz-form-label>
            <nz-form-control *ngIf="paramDefine.type === 'key-value'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
              <app-key-value-input
                [(value)]="advancedParams[i].value"
                [id]="paramDefine.field"
                keyAlias="Header Name"
                valueAlias="Header Value"
              ></app-key-value-input>
            </nz-form-control>
          </nz-form-item>
        </nz-collapse-panel>
      </nz-collapse>
      <ng-template #extraColHeader>
        <button style="top: -10px; margin-left: 40%" nz-button nzType="dashed" nz-tooltip nzTooltipTitle="设置高级可选参数">
          <span>高级设置</span>
          <i nz-icon nzType="down-circle" nzTheme="outline"></i>
        </button>
      </ng-template>

      <nz-divider></nz-divider>

      <nz-form-item>
        <nz-form-label nzSpan="7" nzFor="intervals" nzTooltipTitle="监控周期性采集数据间隔时间,单位秒"> 采集间隔 </nz-form-label>
        <nz-form-control nzSpan="8">
          <nz-input-number [(ngModel)]="monitor.intervals" [nzMin]="10" [nzMax]="604800" [nzStep]="60" name="intervals" id="intervals">
          </nz-input-number>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzSpan="7" nzFor="detect" nzTooltipTitle="新增监控前是否先探测检查监控可用性"> 测试连接 </nz-form-label>
        <nz-form-control nzSpan="8">
          <nz-switch [(ngModel)]="detected" name="detect" id="detect"></nz-switch>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzFor="description" nzTooltipTitle="更多标识和描述此监控的备注信息"> 描述备注 </nz-form-label>
        <nz-form-control [nzSpan]="8">
          <nz-textarea-count [nzMaxCharacterCount]="100">
            <textarea [(ngModel)]="monitor.description" rows="3" nz-input name="description" id="description"></textarea>
          </nz-textarea-count>
        </nz-form-control>
      </nz-form-item>

      <div nz-row>
        <div nz-col nzSpan="8" nzOffset="9">
          <button nz-button nzType="primary" type="submit" (click)="onDetect(newForm.form)"> 测试 </button>
          <button nz-button nzType="primary" type="submit" (click)="onSubmit(newForm.form)"> 确定 </button>
          <button nz-button nzType="primary" type="reset" (click)="onCancel()"> 取消 </button>
        </div>
      </div>
    </form>
  </div>
</nz-spin>