| <!-- |
| Licensed to the Apache Software Foundation (ASF) under one |
| or more contributor license agreements. See the NOTICE file |
| distributed with this work for additional information |
| regarding copyright ownership. The ASF licenses this file |
| to you 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-fluid" (window:resize)="onResize($event)"> |
| <div class="row"> |
| <h5 class="over-title margin-bottom-15">Create Measure</h5> |
| </div> |
| <div class="row"> |
| <form name="Form" id="form" #prForm="ngForm" novalidate> |
| <div id="wizard" class="swMain"> |
| <ul> |
| <li> |
| <a class="selected"> |
| <div class="stepNumber"> |
| 1 |
| </div> |
| <span class="stepDesc text-small"> Configuration </span> |
| </a> |
| </li> |
| </ul> |
| </div> |
| <div id="step-4" class="formStep"> |
| <label class="stepDesc">Please setup the measure required information</label> |
| <div class="container-fluid"> |
| <div class="col-md-12 col-lg-12 col-sm-12"> |
| <fieldset> |
| <legend> |
| Required Information |
| </legend> |
| <div class="y-scrollable"> |
| <div class="col-md-12 col-lg-12 col-sm-12" style="margin-top:30px;"> |
| <div class="form-group" |
| [ngClass]="{'has-error':prName.dirty&&prName.invalid, 'has-success':prName.valid}"> |
| <label class="col-md-2 col-lg-2 col-sm-2 control-label"> |
| Measure Name<span class="symbol required"></span>: |
| </label> |
| <div class="col-md-10 col-lg-10 col-sm-10 "> |
| <input type="text" class="form-control" [(ngModel)]="newMeasure.name" #prName="ngModel" |
| name="prName" placeholder="Please input the measure name" required |
| pattern="^[a-zA-Z0-9_-]*$"> |
| <span class="error text-small block " *ngIf="prName.dirty && (prName.errors?.required)">Measure Name is required</span> |
| <span class="error text-small block " *ngIf="prName.dirty && (prName.errors?.pattern)">Only letter, number, "-" and "_" are allowed</span> |
| </div> |
| </div> |
| </div> |
| <div class="col-md-12 col-lg-12 col-sm-12"> |
| <div class="form-group" |
| [ngClass]="{'has-error':mName.dirty&&mName.invalid, 'has-success':mName.valid}"> |
| <label class="col-md-2 col-lg-2 col-sm-2 control-label"> |
| Metric Name<span class="symbol required"></span>: |
| </label> |
| <div class="col-md-10 col-lg-10 col-sm-10 "> |
| <input type="text" class="form-control" [(ngModel)]="newMeasure.metricName" #mName="ngModel" |
| name="mName" placeholder="Please input the metric name" required |
| pattern="^[a-zA-Z0-9_-]*$"> |
| <span class="error text-small block " *ngIf="mName.dirty && (mName.errors?.required)">Metric Name is required</span> |
| <span class="error text-small block " *ngIf="mName.dirty && (mName.errors?.pattern)">Only letter, number, "-" and "_" are allowed</span> |
| </div> |
| </div> |
| </div> |
| <div class="col-md-12 col-lg-12 col-sm-12"> |
| <div class="form-group" |
| [ngClass]="{'has-error':mName.dirty&&mName.invalid, 'has-success':mName.valid}"> |
| <label class="col-md-2 col-lg-2 col-sm-2 control-label"> |
| Dq Type<span class="symbol required"></span>: |
| </label> |
| <div class="col-md-10 col-lg-10 col-sm-10 "> |
| <select [(ngModel)]="newMeasure.dqType" name="dqTypeOptions[{{i}}]" class="form-control input-sm" |
| placeholder="Visual Type" required> |
| <option *ngFor="let t of dqTypeOptions" value="{{t}}">{{t}}</option> |
| </select> |
| <span class="error text-small block " *ngIf="mName.dirty && (mName.errors?.required)">Metric Name is required</span> |
| </div> |
| </div> |
| </div> |
| <div class="col-md-12 col-lg-12 col-sm-12"> |
| <div class="form-group"> |
| <label class="col-md-2 col-lg-2 col-sm-2 control-label"> |
| Measure Description: |
| </label> |
| <div class="col-md-10 col-lg-10 col-sm-10 "> |
| <input type="text" class="form-control" [(ngModel)]="newMeasure.description" |
| placeholder="Please input detailed description of your measure" name="desc"> |
| </div> |
| </div> |
| </div> |
| <div class="col-md-12 col-lg-12 col-sm-12"> |
| <div class="form-group"> |
| <label for="typeSelector" class="col-md-2 col-lg-2 col-sm-2 control-label"> |
| Measure Type: |
| </label> |
| <div class="col-md-10 col-lg-10 col-sm-10 "> |
| <select id="typeSelector" class="form-control" [(ngModel)]="newMeasure.measureType" disabled |
| required name="type"> |
| <option>{{newMeasure.measureType}}</option> |
| </select> |
| </div> |
| </div> |
| </div> |
| <div class="col-md-12 col-lg-12 col-sm-12"> |
| <div class="form-group"> |
| <label class="col-md-2 col-lg-2 col-sm-2 control-label"> |
| Owner: |
| </label> |
| <div class="col-md-10 col-lg-10 col-sm-10"> |
| <input type="text" class="form-control" name="owner" disabled [(ngModel)]="newMeasure.owner"> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div style="color:#b2c831"> |
| <p> |
| <i class="fa fa-info-circle"></i> After submitted, please go to "<a class="bark-link" |
| routerLink="/measures">Measures</a>" |
| to check the measure status |
| </p> |
| </div> |
| </fieldset> |
| </div> |
| <div class="form-group btn-container"> |
| <toaster-container></toaster-container> |
| <button type="submit" (click)="submit(prForm)" class="btn btn-primary btn-o next-step btn-wide pull-right"> |
| Submit |
| </button> |
| </div> |
| </div> |
| </div> |
| <div class="modal fade" id="confirm" role="dialog" #modal tabindex="-1" [ngClass]="{'in': visibleAnimate}" |
| [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}" |
| (click)="onContainerClicked($event)"> |
| <div class="modal-dialog modal-xg modal-lg"> |
| <div class="modal-content"> |
| <div class="modal-header"> |
| <button type="button" class="close" (click)="hide()">×</button> |
| <h4 class="modal-title">Save the measure with the below information?</h4> |
| </div> |
| <div class="modal-body"> |
| <div class="container-fluid" id="viewruleContent" style="overflow:auto;"> |
| <div class="row"> |
| <h5 class="over-title margin-bottom-15">Basic information</h5> |
| </div> |
| <div class="row"> |
| <div class="col-lg-12 col-md-12 col-sm-12"> |
| <div id="viewrule-definition" class="viewrule-content"> |
| <div class="row"> |
| <label class="col-md-4 col-lg-4 col-sm-4"> |
| Measure Name: |
| </label> |
| <div class="col-md-8 col-lg-8 col-sm-8 "> |
| {{newMeasure.name}} |
| </div> |
| </div> |
| <div class="row"> |
| <label class="col-md-4 col-lg-4 col-sm-4"> |
| Metric Name: |
| </label> |
| <div class="col-md-8 col-lg-8 col-sm-8 "> |
| {{newMeasure.metricName}} |
| </div> |
| </div> |
| <div class="row"> |
| <label class="col-md-4 col-lg-4 col-sm-4"> |
| Dq Type: |
| </label> |
| <div class="col-md-8 col-lg-8 col-sm-8 "> |
| {{newMeasure.dqType}} |
| </div> |
| </div> |
| <div class="row"> |
| <label class="col-md-4 col-lg-4 col-sm-4"> |
| Measure Description: |
| </label> |
| <div class="col-md-8 col-lg-8 col-sm-8 "> |
| {{newMeasure.description}} |
| </div> |
| </div> |
| <div class="row"> |
| <label class="col-md-4 col-lg-4 col-sm-4"> |
| Measure Type: |
| </label> |
| <div class="col-md-8 col-lg-8 col-sm-8 "> |
| {{newMeasure.measureType}} |
| </div> |
| </div> |
| <div class="row"> |
| <label class="col-md-4 col-lg-4 col-sm-4"> |
| Owner: |
| </label> |
| <div class="col-md-8 col-lg-8 col-sm-8"> |
| {{newMeasure.owner}} |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="modal-footer"> |
| <button type="button" class="btn btn-default" (click)="hide()">Cancel</button> |
| <button type="button" id="save" class="btn btn-primary" (click)="save()">Save</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </form> |
| </div> |
| </div> |