hertzbeat/web-app/src/app/routes/monitor/monitor-edit/monitor-edit.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="edit"></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 #editForm="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" />
        </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
            [(ngModel)]="params[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)]="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">
            <input
              [type]="passwordVisible ? 'text' : 'password'"
              nz-input
              placeholder="input password"
              [required]="paramDefine.required"
              [(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"
            [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"
            [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-item>

      <nz-divider></nz-divider>

      <nz-form-item>
        <nz-form-label nzSpan="7" nzFor="intervals" nzTooltipTitle="监控周期性采集数据间隔时间,单位秒"> 采集间隔 </nz-form-label>
        <nz-form-control nzSpan="10">
          <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(editForm.form)"> 测试 </button>
          <button nz-button nzType="primary" type="submit" (click)="onSubmit(editForm.form)"> 确定 </button>
          <button nz-button nzType="primary" type="reset" (click)="onCancel()"> 取消 </button>
        </div>
      </div>
    </form>
  </div>
</nz-spin>