http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/html/dataset/datasetFormGeneralStepTpl.html ---------------------------------------------------------------------- diff --git a/falcon-ui/app/html/dataset/datasetFormGeneralStepTpl.html b/falcon-ui/app/html/dataset/datasetFormGeneralStepTpl.html index 458a25b..bb0d7a7 100644 --- a/falcon-ui/app/html/dataset/datasetFormGeneralStepTpl.html +++ b/falcon-ui/app/html/dataset/datasetFormGeneralStepTpl.html @@ -19,700 +19,774 @@ --> <form id="formGeneralBox" name="datasetForm" - class="col-xs-24" novalidate> - <div class="row"> - <div class="col-xs-24"> - <label class="db"> Mirror Name - <input type="text" - name="nameInput" - class="form-control" - ng-model="UIModel.name" - placeholder="" - ng-disabled="!cloningMode" - ng-pattern="validations.patterns.name" - ng-required="true" - check-name="{type:'process', check:clone}"/> - </label> + <div class="col-xs-8"> + <label class="light" tooltip="dataset.name">Mirror Name<mandatory-field></mandatory-field></label> + <input type="text" + name="nameInput" + class="form-control" + ng-model="UIModel.name" + placeholder="" + ng-disabled="editingMode" + ng-pattern="validations.patterns.name" + ng-required="true" + check-name="{type:'process', check:!editingMode}"/> + </label> + </div> + + <div class="col-xs-24 tagsBox plr0px"> + <label class="col-xs-24 light">Tags</label> + <div class="col-xs-12"> + <div ng-repeat="tag in UIModel.tags"> + <div class="row dynamic-table-spacer"> + <div class="col-xs-8"> + <input type="text" class="form-control" ng-model="tag.key" + validation-optional-message="{{validations.messages.key}}" + ng-pattern="validations.patterns.alpha" ng-required="tag.value" placeholder="key"/> + </div> + <div class="col-xs-8"> + <input type="text" class="form-control" validation-optional-message="{{validations.messages.value}}" + ng-model="tag.value" ng-pattern="validations.patterns.alpha" + ng-required="tag.key" placeholder="value"/> + </div> + <div class="col-xs-8"> + <button type="button" class="btn btn-default btn-xs" ng-click="removeTag($index)" ng-if="!$first || !$last"> + <span class="entypo minus"></span> delete + </button> + <button type="button" class="btn btn-default btn-xs" ng-click="addTag()" ng-if="$last"> + <span class="entypo plus"></span> add tag + </button> + </div> + </div> + </div> </div> + </div> + + <div class="col-xs-24 plr0px"> + <div class="col-xs-12 plr0px"> + <div class="col-xs-24 clusterBox plr0px"> + <h3>Source</h3> + <div class="runJobOnBox"> + <input type="radio" + id="runJobOnSourceRadio" + ng-model="UIModel.runOn" + value="source" + ng-required="true" + ng-disabled="UIModel.source.location !== 'HDFS'"/> + Run job here + </div> - <div class="col-xs-24 tagsBox mt10"> - <label class="db">Tags + <div class="locationBox" ng-if="UIModel.type === 'HDFS'"> + <div class="col-xs-5"><label class="light">Location</label></div> + <div class="col-xs-3"><label class="mt15 radio-inline"> + <input type="radio" + ng-change="checkFromSource()" + id="sourceHDFSRadio" + ng-model="UIModel.source.location" + value="HDFS" + ng-required="!UIModel.source.location"/> HDFS + </label> + </div> + <div class="col-xs-3"><label class="mt15 radio-inline"> + <input type="radio" + ng-change="checkFromSource()" + id="sourceAzureRadio" + ng-model="UIModel.source.location" + value="azure" + ng-required="!UIModel.source.location"/> Azure + </label> + </div> + <div class="col-xs-1"><label class="mt15 radio-inline"> + <input type="radio" + ng-change="checkFromSource()" + id="sourceS3Radio" + ng-model="UIModel.source.location" + value="s3" + ng-required="!UIModel.source.location"/> S3 + </label> + </div> + </div> - <div class="row mb10"> - <div class="col-xs-10"> + <div class="col-xs-24" ng-if="UIModel.source.location === 'HDFS' || UIModel.type === 'HIVE'"> + <div class="col-xs-5 p0"><label class="light">Cluster<mandatory-field></mandatory-field></label></div> + <div class="col-xs-13 mt10"> + <select ng-model="UIModel.source.cluster" + name="sourceClusterSelect" + ng-change="getSourceDefinition()" + ng-required="UIModel.source.location === 'HDFS' || UIModel.type === 'HIVE'" + class="form-control padding0" + id="sourceClusterSelect"> + + <option value="" disabled style='display:none;'>-Select cluster-</option> + <option ng-selected="UIModel.source.cluster === cluster.name" + ng-repeat="cluster in clustersList" + value="{{cluster.name}}"> + {{cluster.name}} + </option> + </select> + </div> + </div> + + <div class="col-xs-24" ng-if="UIModel.source.location === 'azure' && UIModel.type === 'HDFS'"> + <div class="col-xs-5 p0"><label class="light">Base URL<mandatory-field></mandatory-field></label></div> + <div class="col-xs-13 mt10"> <input type="text" - name="newTagKeyInput" + name="sourceClusterUrlInput" class="form-control" - ng-model="UIModel.tags.newTag.key" - placeholder="key" - ng-pattern="validations.patterns.alpha" - ng-required="UIModel.tags.newTag.value" - validation-optional-message="{{validations.messages.key}}"/> + ng-model="UIModel.source.url" + placeholder="URL" + ng-pattern="validations.patterns.azure" + ng-required="UIModel.source.location === 'azure'" + validation-message="{{validations.messages.azure}}" /> </div> - <div class="col-xs-10"> + </div> + <div class="col-xs-24" ng-if="UIModel.source.location === 's3' && UIModel.type === 'HDFS'"> + <div class="col-xs-5 p0"><label class="light">Base URL<mandatory-field></mandatory-field></label></div> + <div class="col-xs-13 mt10"> <input type="text" - name="newTagValueInput" + name="sourceClusterUrlInput" class="form-control" - ng-model="UIModel.tags.newTag.value" - placeholder="value" - ng-pattern="validations.patterns.alpha" - ng-required="UIModel.tags.newTag.key" - validation-optional-message="{{validations.messages.value}}"/> - </div> - <div class="col-xs-4"> - <button type="button" - class="btn btn-default btn-xs" - ng-click="addTag()" - ng-disabled="!UIModel.tags.newTag.key || !UIModel.tags.newTag.value" - ng-disabled="false"> - <span class="glyphicon glyphicon-plus"></span> add tag - </button> + ng-model="UIModel.source.url" + placeholder="URL" + ng-pattern="validations.patterns.s3" + ng-required="UIModel.source.location === 's3'" + validation-message="{{validations.messages.s3}}" /> </div> </div> - <div ng-repeat="tag in UIModel.tags.tagsArray" class="row"> - <div class="col-xs-10"> - <h6>{{tag.key}}</h6> + <div class="col-xs-24" ng-if="UIModel.type === 'HDFS'"> + <div class="col-xs-5 p0"><label class="light">Path<mandatory-field></mandatory-field></label></div> + <div class="col-xs-13 mt10"> + <input type="text" + name="sourceClusterPathInput" + class="form-control" + ng-model="UIModel.source.path" + placeholder="Path" + ng-pattern="validations.patterns.osPath" + ng-required="UIModel.source.location === 'HDFS' || UIModel.type === 'HIVE'" + validation-message="{{validations.messages.path}}"/> </div> - <div class="col-xs-10"> - <h6>{{tag.value}}</h6> + </div> + + <div class="col-xs-24" ng-if="UIModel.type === 'HIVE'"> + <div class="col-xs-5 p0"> + <label class="light" tooltip="dataset.sourceHiveServer2Uri">HiveServer2 endpoint</label> </div> - <div class="col-xs-4" ng-if="tag.key !== '_falcon_mirroring_type'"> - <button type="button" - class="btn btn-default btn-xs" - ng-click="removeTag($index)" - ng-disabled="false"> - <span class="glyphicon glyphicon-minus"></span> delete - </button> + <div class="col-xs-13 mt10"> + <input type="text" + name="sourceHiveServerInput" + ng-model="UIModel.hiveOptions.source.hiveServerToEndpoint" + class="form-control" + validation-optional-message="{{validations.messages.path}}" /> </div> </div> - </label> - </div> - </div> - <div class="row"> - <div class="col-xs-24 mt10"> - <label class="db">Mirror type - <div class="typeButtonsBox"> - <button type="button" - ng-class="{active:UIModel.formType === 'HDFS'}" - class="btn btn-default btn-xs" - ng-click="switchModel('HDFS')"> - File System - </button> - <button type="button" - ng-class="{active:UIModel.formType === 'HIVE'}" - class="btn btn-default btn-xs" - ng-click="switchModel('HIVE')"> - HIVE(catalog Storage) - </button> - </div> - </label> - </div> - </div> + <div class="col-xs-24 mt5" ng-if="UIModel.type === 'HIVE'"> + <div class="col-xs-5 p0"> + <label class="light">I want to copy<mandatory-field></mandatory-field></label> + </div> + <div class="col-xs-4"><label class="mt15 radio-inline"> + <input type="radio" + id="targetHIVEDatabaseRadio" + ng-model="UIModel.source.hiveDatabaseType" + value="databases" + ng-required="!UIModel.source.location"/>Entire databases + </label> + </div> + <div><label class="mt15 radio-inline"> + <input type="radio" + id="targetHIVETablesRadio" + ng-model="UIModel.source.hiveDatabaseType" + value="tables" + ng-required="!UIModel.source.hiveDatabaseType"/> + Tables in a single database + </label> + </div> - <div class="row"> - <div class="col-xs-24 clusterBox"> - <h3>Source</h3> - <div class="runJobOnBox"> - <input type="radio" - id="runJobOnSourceRadio" - ng-model="UIModel.runOn", - value="source" - ng-required="true" - ng-disabled="UIModel.source.location !== 'HDFS'"/> - Run job here - </div> + <div class="col-xs-24 mt5 plr0px"> + <div class="col-xs-13 col-xs-offset-5" ng-if="UIModel.source.hiveDatabaseType === 'databases'"> + <label class="col-xs-24 p0 light" tooltip="dataset.sourceDatabases">Databases (comma separated)<mandatory-field></mandatory-field></label> + <textarea name="sourceDatabasesInput" + class="form-control databasesTextArea" + ng-model="UIModel.source.hiveDatabases" + ng-pattern="validations.patterns.hiveDatabases" + ng-required="UIModel.target.location === 'HDFS'" + validation-message="{{validations.messages.databases}}" + ng-keydown="validations.acceptNoSpaces($event)"> + </textarea> + </div> + <div class="col-xs-13 col-xs-offset-5" ng-if="UIModel.source.hiveDatabaseType === 'tables'"> + <label class="col-xs-24 p0 light">Database<mandatory-field></mandatory-field></label> + <input type="text" + name="sourceDatabaseInput" + class="form-control" + ng-model="UIModel.source.hiveDatabases" + ng-pattern="validations.patterns.hiveDatabase" + ng-required="UIModel.target.location === 'HDFS'" + validation-message="{{validations.messages.database}}" + ng-keydown="validations.acceptNoSpaces($event)"/> + <label class="col-xs-24 p0 light" tooltip="dataset.sourceTables">Tables (comma separated)<mandatory-field></mandatory-field></label> + <textarea name="sourceTablesInput" + class="form-control tablesTextArea" + ng-model="UIModel.source.hiveTables" + ng-pattern="validations.patterns.hiveTables" + ng-required="UIModel.target.location === 'HDFS'" + validation-message="{{validations.messages.tables}}" + ng-keydown="validations.acceptNoSpaces($event)"> + </textarea> + </div> + </div> + </div> - <div class="locationBox" ng-if="UIModel.formType === 'HDFS'"> - <label class="db">Location: - <span> - <input type="radio" - ng-change="checkFromSource()" - id="sourceHDFSRadio" - ng-model="UIModel.source.location" - value="HDFS" - ng-required="!UIModel.source.location"/> HDFS - </span> - <span ng-if="UIModel.target.location === 'HDFS'"> - <input type="radio" - ng-change="checkFromSource()" - id="sourceAzureRadio" - ng-model="UIModel.source.location" - value="azure" - ng-required="!UIModel.source.location"/> Azure - </span> - <span ng-if="UIModel.target.location === 'HDFS'"> - <input type="radio" - ng-change="checkFromSource()" - id="sourceS3Radio" - ng-model="UIModel.source.location" - value="s3" - ng-required="!UIModel.source.location"/> S3 - </span> - - </label> - </div> + <div class="col-xs-24" ng-if="UIModel.type === 'HIVE' && secureMode === true"> + <div class="col-xs-5 p0"> + <label class="light" tooltip="dataset.sourceHive2KerberosPrincipal">Hive2 Kerberos Principal<mandatory-field></mandatory-field></label> + </div> + <div class="col-xs-13 mt10"> + <input type="text" + name="sourceHive2KerberosPrincipal" + class="form-control" + ng-model="UIModel.source.hive2KerberosPrincipal" + placeholder="Source Metastore URI" + ng-pattern="validations.patterns.kerberosPrincipal" + ng-required="UIModel.type === 'HIVE'" + validation-message="{{validations.messages.kerberosPrincipal}}" /> + </div> + </div> + <div class="col-xs-24" ng-if="UIModel.type === 'HIVE' && secureMode === true"> + <div class="col-xs-5 p0"> + <label class="light">Meta Store URI<mandatory-field></mandatory-field></label> + </div> + <div class="col-xs-13 mt10"> + <input type="text" + name="sourceMetastoreUri" + class="form-control" + ng-model="UIModel.source.hiveMetastoreUri" + placeholder="Source Metastore URI" + ng-pattern="validations.patterns.metastoreUri" + ng-required="UIModel.type === 'HIVE'" + validation-message="{{validations.messages.metastoreUri}}" /> + </div> + </div> + <div class="col-xs-24" ng-if="UIModel.type === 'HIVE' && secureMode === true"> + <div class="col-xs-5 p0"> + <label class="light">Kerberos Principal<mandatory-field></mandatory-field></label> + </div> + <div class="col-xs-13 mt10"> + <input type="text" + name="sourceMetastoreKerberosPrincipal" + class="form-control" + ng-model="UIModel.source.hiveMetastoreKerberosPrincipal" + placeholder="Kerberos Principal" + ng-pattern="validations.patterns.kerberosPrincipal" + ng-required="UIModel.type === 'HIVE'" + validation-message="{{validations.messages.kerberosPrincipal}}" /> + </div> + </div> - <div> - <select ng-if="UIModel.source.location === 'HDFS' || UIModel.formType === 'HIVE'" - ng-model="UIModel.source.cluster" - name="sourceClusterSelect" - ng-change="getSourceDefinition()" - ng-required="UIModel.source.location === 'HDFS' || UIModel.formType === 'HIVE'" - class="col-xs-24 form-control" - id="sourceClusterSelect"> - - <option value="" disabled style='display:none;'>-Select cluster-</option> - <option ng-selected="UIModel.source.cluster === cluster.name" - ng-repeat="cluster in clustersList" - value="{{cluster.name}}"> - {{cluster.name}} - </option> - </select> </div> + </div> - <div ng-if="UIModel.source.location === 'azure' && UIModel.formType === 'HDFS'"> - <label class="db">Base URL - <input type="text" - name="sourceClusterUrlInput" - class="form-control" - ng-model="UIModel.source.url" - placeholder="URL" - ng-pattern="validations.patterns.azure" - ng-required="UIModel.source.location === 'azure'" - validation-message="{{validations.messages.azure}}" /> - </label> - </div> - <div ng-if="UIModel.source.location === 's3' && UIModel.formType === 'HDFS'"> - <label class="db">Base URL - <input type="text" - name="sourceClusterUrlInput" - class="form-control" - ng-model="UIModel.source.url" - placeholder="URL" - ng-pattern="validations.patterns.s3" - ng-required="UIModel.source.location === 's3'" - validation-message="{{validations.messages.s3}}" /> - </label> - </div> + <div class="col-xs-12 plr0px pl5"> + <div class="col-xs-24 plr0px clusterBox"> + <h3>Target</h3> + <div class="runJobOnBox"> + <input type="radio" + id="runJobOnTargetRadio" + ng-model="UIModel.runOn" + value="target" + ng-required="true" + ng-disabled="UIModel.target.location !== 'HDFS'"/> + Run job here + </div> + <div class="locationBox" ng-if="UIModel.type === 'HDFS'"> + <div class="col-xs-5"><label class="light">Location</label></div> + <div class="col-xs-3"><label class="mt15 radio-inline"> + <input type="radio" + ng-change="checkFromTarget()" + id="targetHDFSRadio" + ng-model="UIModel.target.location" + value="HDFS" + ng-required="!UIModel.target.location"/> HDFS + </label> + </div> + <div class="col-xs-3"><label class="mt15 radio-inline"> + <input type="radio" + ng-change="checkFromTarget()" + id="targetAzureRadio" + ng-model="UIModel.target.location" + value="azure" + ng-required="!UIModel.target.location"/> Azure + </label> + </div> + <div class="col-xs-1"><label class="mt15 radio-inline"> + <input type="radio" + ng-change="checkFromTarget()" + id="targetS3Radio" + ng-model="UIModel.target.location" + value="S3" + ng-required="!UIModel.target.location"/> S3 + </label> + </div> + </div> - <div ng-if="UIModel.formType === 'HDFS'"> - <label class="db">Path - <input type="text" - name="sourceClusterPathInput" - class="form-control" - ng-model="UIModel.source.path" - placeholder="Path" - ng-pattern="validations.patterns.osPath" - ng-required="UIModel.source.location === 'HDFS' || UIModel.formType === 'HIVE'" - validation-message="{{validations.messages.path}}"/> - </label> - </div> + <div class="col-xs-24" ng-if="UIModel.target.location === 'HDFS' || UIModel.type === 'HIVE'"> + <div class="col-xs-5 p0"> + <label class="light">Cluster<mandatory-field></mandatory-field></label> + </div> + <div class="col-xs-13 mt10"> + <select ng-model="UIModel.target.cluster" + ng-change="getTargetDefinition()" + name="targetClusterSelect" + ng-required="UIModel.target.location === 'HDFS' || UIModel.type === 'HIVE'" + class="col-xs-24 form-control padding0" + id="targetClusterSelect"> + <option value="" disabled selected style='display:none;'>-Select cluster-</option> + <option ng-selected="UIModel.target.cluster === clusterItem.name" + ng-repeat="clusterItem in clustersList" + value="{{clusterItem.name}}"> + {{clusterItem.name}} + </option> + </select> + <div class="custom-danger" ng-show="clusterErrorMessage != ''"> + {{clusterErrorMessage}} + </div> + </div> + </div> - <div ng-if="UIModel.formType === 'HIVE'"> - <h5 class="hiveDatabasesTitol">I want to copy</h5> - <div class="databaseRadioBox"> - <input type="radio" - id="targetHIVEDatabaseRadio" - ng-model="UIModel.source.hiveDatabaseType" - value="databases" - ng-required="!UIModel.source.location"/> Entire databases - <input type="radio" - id="targetHIVETablesRadio" - ng-model="UIModel.source.hiveDatabaseType" - value="tables" - ng-required="!UIModel.source.hiveDatabaseType"/> Tables in a single database - </div> - - <div ng-if="UIModel.source.hiveDatabaseType === 'databases'"> - <label class="db">Databases (comma separated) - <textarea name="sourceDatabasesInput" - class="form-control databasesTextArea" - ng-model="UIModel.source.hiveDatabases" - ng-pattern="validations.patterns.textarea" - ng-required="UIModel.target.location === 'HDFS'" - validation-message="{{validations.messages.databases}}" - ng-keydown="validations.acceptNoSpaces($event)"> - </textarea> - </label> - </div> - <div ng-if="UIModel.source.hiveDatabaseType === 'tables'"> - <label class="db">Database + <div class="col-xs-24" ng-if="UIModel.type === 'HIVE'"> + <div class="col-xs-5 p0"> + <label class="light" tooltip="dataset.targetHiveServer2Uri">HiveServer2 endpoint</label> + </div> + <div class="col-xs-13 mt10"> <input type="text" - name="sourceDatabaseInput" + name="targetHiveServerInput" + ng-model="UIModel.hiveOptions.target.hiveServerToEndpoint" class="form-control" - ng-model="UIModel.source.hiveDatabase" - ng-pattern="validations.patterns.textarea" - ng-required="UIModel.target.location === 'HDFS'" - validation-message="{{validations.messages.database}}" - ng-keydown="validations.acceptNoSpaces($event)"/> - </label> - <label class="db">Tables (comma separated) - <textarea name="sourceTablesInput" - class="form-control tablesTextArea" - ng-model="UIModel.source.hiveTables" - ng-pattern="validations.patterns.textarea" - ng-required="UIModel.target.location === 'HDFS'" - validation-message="{{validations.messages.tables}}" - ng-keydown="validations.acceptNoSpaces($event)"> - </textarea> - </label> + validation-optional-message="{{validations.messages.path}}" /> + </div> </div> - </div> - - </div> - - <div class="col-xs-24 clusterBox"> - <h3>Target</h3> - <div class="runJobOnBox"> - <input type="radio" - id="runJobOnTargetRadio" - ng-model="UIModel.runOn" - value="target" - ng-required="true" - ng-disabled="UIModel.target.location !== 'HDFS'"/> - Run job here - </div> - <div class="locationBox" ng-if="UIModel.formType === 'HDFS'"> - <label class="db">Location: - - <input type="radio" - ng-change="checkFromTarget()" - id="targetHDFSRadio" - ng-model="UIModel.target.location" - value="HDFS" - ng-required="!UIModel.target.location"/> HDFS - <span ng-if="UIModel.source.location === 'HDFS'"> - <input type="radio" - ng-change="checkFromTarget()" - id="targetAzureRadio" - ng-model="UIModel.target.location" - value="azure" - ng-required="!UIModel.target.location"/> Azure - </span> - <span ng-if="UIModel.source.location === 'HDFS'"> - <input type="radio" - ng-change="checkFromTarget()" - id="targetS3Radio" - ng-model="UIModel.target.location" - value="S3" - ng-required="!UIModel.target.location"/> S3 - </span> - </label> - </div> + <div class="col-xs-24" ng-if="UIModel.type === 'HIVE'&& secureMode === true"> + <div class="col-xs-5 p0"> + <label class="light" tooltip="dataset.targetHive2KerberosPrincipal">Hive2 Kerberos Principal<mandatory-field></mandatory-field></label> + </div> + <div class="col-xs-13 mt10"> + <input type="text" + name="targetHive2KerberosPrincipal" + class="form-control" + ng-model="UIModel.target.hive2KerberosPrincipal" + placeholder="Hive2 Kerberos Principal" + ng-pattern="validations.patterns.kerberosPrincipal" + ng-required="UIModel.type === 'HIVE'" + validation-message="{{validations.messages.kerberosPrincipal}}" /> + </div> + </div> + <div class="col-xs-24" ng-if="UIModel.type === 'HIVE'&& secureMode === true"> + <div class="col-xs-5 p0"><label class="light">Meta Store URI<mandatory-field></mandatory-field></label></div> + <div class="col-xs-13 mt10"> + <input type="text" + name="targetMetastoreUri" + class="form-control" + ng-model="UIModel.target.hiveMetastoreUri" + placeholder="Target Metastore URI" + ng-pattern="validations.patterns.metastoreUri" + ng-required="UIModel.type === 'HIVE'" + validation-message="{{validations.messages.metastoreUri}}" /> + </div> + </div> + <div class="col-xs-24" ng-if="UIModel.type === 'HIVE' && secureMode === true"> + <div class="col-xs-5 p0"> + <label class="light">Kerberos Principal<mandatory-field></mandatory-field></label> + </div> + <div class="col-xs-13 mt10"> + <input type="text" + name="targetMetastoreKerberosPrincipal" + class="form-control" + ng-model="UIModel.target.hiveMetastoreKerberosPrincipal" + placeholder="Kerberos Principal" + ng-pattern="validations.patterns.kerberosPrincipal" + ng-required="UIModel.type === 'HIVE'" + validation-message="{{validations.messages.kerberosPrincipal}}" /> + </div> + </div> - <div> - <select ng-if="UIModel.target.location === 'HDFS' || UIModel.formType === 'HIVE'" - ng-model="UIModel.target.cluster" - ng-change="getTargetDefinition()" - name="targetClusterSelect" - ng-required="UIModel.target.location === 'HDFS' || UIModel.formType === 'HIVE'" - class="col-xs-24 form-control" - id="targetClusterSelect"> - <option value="" disabled selected style='display:none;'>-Select cluster-</option> - <option ng-selected="UIModel.target.cluster === clusterItem.name" - ng-repeat="clusterItem in clustersList" - value="{{clusterItem.name}}"> - {{clusterItem.name}} - </option> - </select> - </div> + <div class="col-xs-24" ng-if="UIModel.target.location === 'azure' && UIModel.type === 'HDFS'"> + <div class="col-xs-5 p0"><label class="light">Base URL<mandatory-field></mandatory-field></label></div> + <div class="col-xs-13 mt10"> + <input type="text" + name="targetClusterUrlInput" + class="form-control" + ng-model="UIModel.target.url" + placeholder="URL" + ng-pattern="validations.patterns.azure" + ng-required="UIModel.target.location === 'azure'" + validation-message="{{validations.messages.azure}}"/> + </div> + </div> + <div class="col-xs-24" ng-if="UIModel.target.location === 'S3' && UIModel.type === 'HDFS'"> + <div class="col-xs-5 p0"><label class="light">Base URL<mandatory-field></mandatory-field></label></div> + <div class="col-xs-13 mt10"> + <input type="text" + name="targetClusterUrlInput" + class="form-control" + ng-model="UIModel.target.url" + placeholder="URL" + ng-pattern="validations.patterns.s3" + ng-required="UIModel.target.location === 'S3'" + validation-message="{{validations.messages.s3}}"/> + </div> + </div> - <div ng-if="UIModel.target.location === 'azure' && UIModel.formType === 'HDFS'"> - <label class="db">Base URL - <input type="text" - name="targetClusterUrlInput" - class="form-control" - ng-model="UIModel.target.url" - placeholder="URL" - ng-pattern="validations.patterns.azure" - ng-required="UIModel.target.location === 'azure'" - validation-message="{{validations.messages.azure}}"/> - </label> - </div> - <div ng-if="UIModel.target.location === 'S3' && UIModel.formType === 'HDFS'"> - <label class="db">Base URL - <input type="text" - name="targetClusterUrlInput" - class="form-control" - ng-model="UIModel.target.url" - placeholder="URL" - ng-pattern="validations.patterns.s3" - ng-required="UIModel.target.location === 'S3'" - validation-message="{{validations.messages.s3}}"/> - </label> + <div class="col-xs-24" ng-if="UIModel.type === 'HDFS'"> + <div class="col-xs-5 p0"><label class="light">Path<mandatory-field></mandatory-field></label></div> + <div class="col-xs-13 mt10"> + <input type="text" + name="targetClusterPathInput" + class="form-control" + ng-model="UIModel.target.path" + placeholder="Path" + ng-pattern="validations.patterns.osPath" + ng-required="UIModel.target.location === 'HDFS'" + validation-message="{{validations.messages.path}}"/> + </div> + </div> </div> + </div> + </div> - <div ng-if="UIModel.formType === 'HDFS'"> - <label class="db">Path - <input type="text" - name="targetClusterPathInput" - class="form-control" - ng-model="UIModel.target.path" - placeholder="Path" - ng-pattern="validations.patterns.osPath" - ng-required="UIModel.target.location === 'HDFS'" - validation-message="{{validations.messages.path}}"/> - </label> + <div class="col-xs-24 plr0px"> + <div class="col-xs-12 plr0px clusterBoxEndLine"> + </div> + <div class="col-xs-12 plr0px pl5"> + <div class="col-xs-24 plr0px clusterBoxEndLine"> </div> - </div> </div> - <div class="row"> - <div class="col-xs-24 validityBox"> - <h4>Validity </h4> - <div class="startDateBox"> - <label>Start + <div class="col-xs-24"><label class="mt15">Validity</label></div> + <div class="col-xs-24 validityBox plr0px"> + <div class="col-xs-24 plr0px"> + <div class="startDateBox col-xs-4"> + <label class="light">Start<mandatory-field></mandatory-field></label> <input type="text" - name="startDateInput" - class="form-control dateInput" - placeholder="mm/dd/yyyy" - datepicker-popup="{{dateFormat}}" - ng-model="UIModel.validity.start" - is-open="$parent.startOpened" - ng-click="openStartDatePicker($event)" - ng-change="constructDate()" - ng-required="true" - simple-date> - </label> - </div> - <div class="startTimeBox"> - <label>Time + name="startDateInput" + class="form-control dateInput" + placeholder="{{dateFormat | lowercase}}" + ng-model="UIModel.validity.start.date" + ng-required="true" + simple-date-picker /> + </div> + <div class="startTimeBox col-xs-4"> + <label class="light">Begin Time<mandatory-field></mandatory-field></label> <timepicker ng-change="constructDate()" - ng-model="UIModel.validity.startTime" + ng-model="UIModel.validity.start.time" + ng-required="true" hour-step="1" minute-step="1" show-meridian="true"> </timepicker> - </label> + </div> </div> - <div class="endDateBox"> - <label>End + <div class="col-xs-24 plr0px"> + <div class="endDateBox col-xs-4"> + <label class="light">End<mandatory-field></mandatory-field></label> <input type="text" - name="startDateInput" - class="form-control dateInput" - placeholder="mm/dd/yyyy" - datepicker-popup="{{dateFormat}}" - ng-model="UIModel.validity.end" - is-open="$parent.endOpened" - ng-click="openEndDatePicker($event)" - ng-change="constructDate()" - min-date="UIModel.validity.start" - ng-required="true" - simple-date> - </label> - </div> - <div class="endTimeBox"> - <label>Time + name="startDateInput" + class="form-control dateInput" + placeholder="{{dateFormat | lowercase}}" + ng-model="UIModel.validity.end.date" + ng-required="true" + simple-date-picker /> + </div> + <div class="endTimeBox col-xs-4"> + <label class="light">End Time<mandatory-field></mandatory-field></label> <timepicker ng-change="constructDate()" - ng-model="UIModel.validity.endTime" + ng-model="UIModel.validity.end.time" + ng-required="true" hour-step="1" minute-step="1" show-meridian="true"> </timepicker> - </label> + </div> </div> - <div class="tzBox"> - <label> - <time-zone-select - ng-model="UIModel.validity.tz" - class=""> - </time-zone-select> - </label> + </div> + + <div class="frequencyBox"> + <div class="col-xs-24"> + <label>Frequency</label> + </div> + <div class="col-xs-24 plr0px"> + <div class="col-xs-24"> + <label class="light">Repeat Every</label> + </div> + <div class="col-xs-2"> + <input type="text" + name="frequencyQuantity" + ng-model="UIModel.frequency.quantity" + ng-pattern="validations.patterns.twoDigits" + ng-keydown="validations.acceptOnlyNumber($event)" + ng-keyup="checkMininumFrequency(UIModel.frequency.quantity, UIModel.frequency.unit, datasetForm.frequencyQuantity)" + class="form-control" + ng-required="true" + validation-optional-message="{{validations.messages.number}}" /> + </div> + <div class="col-xs-6"> + <select ng-model="UIModel.frequency.unit" class="form-control padding0" ng-required="true" + ng-change="checkMininumFrequency(UIModel.frequency.quantity, UIModel.frequency.unit, datasetForm.frequencyQuantity)"> + <option selected value="minutes">minutes</option> + <option value="hours">hours</option> + <option value="days">days</option> + <option value="months">months</option> + </select> + </div> + <div class="col-xs-24 custom-danger" ng-if="!isFrequencyValid">{{validations.messages.frequency.minimum}}</div> </div> </div> - </div> - <div class="row"> - <div class="col-xs-24 alertsBox"> + <div class="tzBox col-xs-8"> + <label class="light">Timezone<mandatory-field></mandatory-field></label> + <time-zone-select ng-model="UIModel.validity.timezone"></time-zone-select> + </div> + + <div class="col-xs-24"> + <label class="light" tooltip="dataset.jobNotificationReceivers">Send alerts to</label> + </div> + <div class="col-xs-24 alertsBox plr0px"> <div class="emailBox"> - <label> - <h4>Send alerts to </h4> + <div class="col-xs-8"> <input class="form-control" name="emailAlertInput" - ng-model="UIModel.alerts.alert.email" + ng-model="UIModel.alert.email" type="text" placeholder="Email" ng-pattern="validations.patterns.email" - validation-optional-message="{{validations.messages.email}}"> - </label> + validation-message="{{validations.messages.email}}"> + </div> </div> - <div class="addAlertBox"> + <div class="addAlertBox col-xs-3"> <button class="btn btn-default btn-xs" - ng-disabled="!UIModel.alerts.alert.email" + ng-disabled="!UIModel.alert.email" type="button" ng-click="addAlert()"> <span class="glyphicon glyphicon-plus"></span>add alert </button> </div> + </div> - <div class="emailArrayRow" ng-repeat="email in UIModel.alerts.alertsArray"> - <span>{{email}}</span> - <button class="btn btn-default btn-xs" - type="button" - ng-click="removeAlert()"> - <span class="glyphicon glyphicon-minus"></span> delete - </button> - </div> - - </div> + <div class="col-xs-24 emailArrayRow mt10 plr0px" ng-repeat="email in UIModel.alerts"> + <span class="col-xs-8">{{email}}</span> + <div class="col-xs-3"><button class="btn btn-default btn-xs" + type="button" + ng-click="removeAlert()"> + <span class="glyphicon glyphicon-minus"></span> delete + </button></div> </div> - <div class="row advancedOptionsButton" ng-click="expandOptions = !expandOptions"> - <h4>Advanced options - <span class="entypo chevron-down" ng-if="!expandOptions"></span> - <span class="entypo chevron-up" ng-if="expandOptions"></span> - <hr /> - </h4> + <div class="col-xs-24 advancedOption" ng-click="expandOptions = !expandOptions"> + <label class="pointer blink-success">Advanced Options</label> + <i class="glyphicon glyphicon-chevron-down mt15" ng-if="!expandOptions"></i> + <i class="glyphicon glyphicon-chevron-up mt15" ng-if="expandOptions"></i> </div> - <div id="advancedOptionsBox" ng-class="{expanded:expandOptions}"> - <div class="frequencyBox"> - <h4>Frequency</h4> - <label>Every</label> - <input type="text" - name="frequencyEveryInput" - ng-model="UIModel.frequency.number" - ng-pattern="validations.patterns.twoDigits" - ng-keydown="validations.acceptOnlyNumber($event)" - class="form-control" - validation-optional-message="{{validations.messages.number}}" /> - - <select ng-model="UIModel.frequency.unit" class="form-control"> - <option selected value="minutes">minutes</option> - <option value="hours">hours</option> - <option value="days">days</option> - <option value="months">months</option> - </select> - </div> + <div id="advancedOptionsBox" class="col-xs-24 plr0px" ng-class="{expanded:expandOptions}"> + <div class="col-xs-24" ng-if="UIModel.type === 'HIVE'"> + <label tooltip="dataset.tdeEncryptionEnabled">TDE Encryption</label> + <input type="checkbox" ng-model="UIModel.tdeEncryptionEnabled" ng-checked="UIModel.tdeEncryptionEnabled"/> + </div> <div class="allocationBox"> - <h4>Allocation</h4> - - <div ng-if="UIModel.formType === 'HDFS'"> - <div> - <label>Max Maps for Distcp - <input type="text" - name="maxMapsInput" - ng-model="UIModel.allocation.hdfs.maxMaps" - ng-pattern="validations.patterns.number" - ng-keydown="validations.acceptOnlyNumber($event)" - class="form-control" - validation-optional-message="{{validations.messages.allocationNumber}}"/> - </label> + <div class="col-xs-24"> + <label>Allocation</label> + </div> + <div class="col-xs-24 plr0px" ng-if="UIModel.type === 'HDFS'"> + <div class="col-xs-6"> + <label class="light" tooltip="dataset.distcpMaxMaps">Max Maps for Distcp</label> + <input type="text" + name="maxMapsInput" + ng-model="UIModel.allocation.hdfs.distcpMaxMaps" + ng-pattern="validations.patterns.number" + ng-keydown="validations.acceptOnlyNumber($event)" + class="form-control" + validation-optional-message="{{validations.messages.allocationNumber}}"/> </div> - <div> - <label>Max bandwidth (MB) - <input type="text" - name="maxBandwidthInput" - ng-model="UIModel.allocation.hdfs.maxBandwidth" - ng-pattern="validations.patterns.number" - ng-keydown="validations.acceptOnlyNumber($event)" - class="form-control" - validation-optional-message="{{validations.messages.allocationNumber}}" /> - </label> + <div class="col-xs-6"> + <label class="light" tooltip="dataset.distcpMapBandwidth">Max bandwidth (MB)</label> + <input type="text" + name="maxBandwidthInput" + ng-model="UIModel.allocation.hdfs.distcpMapBandwidth" + ng-pattern="validations.patterns.number" + ng-keydown="validations.acceptOnlyNumber($event)" + class="form-control" + validation-optional-message="{{validations.messages.allocationNumber}}" /> </div> </div> - <div ng-if="UIModel.formType === 'HIVE'"> - <div> - <label>Max Maps for Distcp - <input type="text" - name="hiveMaxMapsInput" - ng-model="UIModel.allocation.hive.maxMapsDistcp" - ng-pattern="validations.patterns.number" - ng-keydown="validations.acceptOnlyNumber($event)" - class="form-control" - validation-optional-message="{{validations.messages.allocationNumber}}"/> - </label> + <div class="col-xs-24 plr0px" ng-if="UIModel.type === 'HIVE'"> + <div class="col-xs-6"> + <label class="light" tooltip="dataset.distcpMaxMaps">Max Maps for Distcp</label> + <input type="text" + name="hiveMaxMapsInput" + ng-model="UIModel.allocation.hive.distcpMaxMaps" + ng-pattern="validations.patterns.number" + ng-keydown="validations.acceptOnlyNumber($event)" + class="form-control" + validation-optional-message="{{validations.messages.allocationNumber}}"/> </div> - <div> - <label>Max Maps for Mirror - <input type="text" - name="maxBandwidthInput" - ng-model="UIModel.allocation.hive.maxMapsMirror" - ng-pattern="validations.patterns.number" - ng-keydown="validations.acceptOnlyNumber($event)" - class="form-control" - validation-optional-message="{{validations.messages.allocationNumber}}" /> - </label> + <div class="col-xs-6"> + <label class="light" tooltip="dataset.replicationMaxMaps">Max Maps for Mirror</label> + <input type="text" + name="maxMapsInput" + ng-model="UIModel.allocation.hive.replicationMaxMaps" + ng-pattern="validations.patterns.number" + ng-keydown="validations.acceptOnlyNumber($event)" + class="form-control" + validation-optional-message="{{validations.messages.allocationNumber}}" /> </div> - <div> - <label>Max Events - <input type="text" - name="maxMapsEventsInput" - ng-model="UIModel.allocation.hive.maxMapsEvents" - ng-pattern="validations.patterns.number" - ng-keydown="validations.acceptOnlyNumber($event)" - class="form-control" - validation-optional-message="{{validations.messages.allocationNumber}}" /> - </label> + <div class="col-xs-6"> + <label class="light" tooltip="dataset.maxEvents">Max Events</label> + <input type="text" + name="maxEventsInput" + ng-model="UIModel.allocation.hive.maxEvents" + ng-pattern="validations.patterns.number" + ng-keydown="validations.acceptOnlyNumber($event)" + class="form-control" + validation-optional-message="{{validations.messages.allocationNumber}}" /> </div> - <div> - <label>Max bandwidth (MB) - <input type="text" - name="maxBandwidthInput" - ng-model="UIModel.allocation.hive.maxBandwidth" - ng-pattern="validations.patterns.number" - ng-keydown="validations.acceptOnlyNumber($event)" - class="form-control" - validation-optional-message="{{validations.messages.allocationNumber}}" /> - </label> + <div class="col-xs-6"> + <label class="light" tooltip="dataset.distcpMapBandwidth">Max bandwidth (MB)</label> + <input type="text" + name="maxBandwidthInput" + ng-model="UIModel.allocation.hive.distcpMapBandwidth" + ng-pattern="validations.patterns.number" + ng-keydown="validations.acceptOnlyNumber($event)" + class="form-control" + validation-optional-message="{{validations.messages.allocationNumber}}" /> </div> </div> - </div> - <div class="hiveOptBox" ng-if="UIModel.formType === 'HIVE'"> - <h4>Source</h4> + <div class="hiveOptBox mt10 col-xs-24 plr0px" ng-if="UIModel.type === 'HIVE'"> + <label class="col-xs-24">Source</label> - <label>Staging path + <label class="col-xs-24 light mt10">Staging path</label> + <div class="col-xs-8"> <input type="text" name="sourceStagingPathInput" ng-model="UIModel.hiveOptions.source.stagingPath" ng-pattern="validations.patterns.path" class="form-control" validation-optional-message="{{validations.messages.path}}" /> - </label> - <label>HiveServer2 endpoint - <input type="text" - name="sourceHiveServerInput" - ng-model="UIModel.hiveOptions.source.hiveServerToEndpoint" - ng-pattern="validations.patterns.path" - class="form-control" - validation-optional-message="{{validations.messages.path}}" /> - </label> + </div> + + <label class="col-xs-24 mt15">Target</label> - <h4>Target</h4> - <label>Staging path + <label class="col-xs-24 light mt10">Staging path</label> + <div class="col-xs-8"> <input type="text" name="targetStagingPathInput" ng-model="UIModel.hiveOptions.target.stagingPath" ng-pattern="validations.patterns.path" class="form-control" validation-optional-message="{{validations.messages.path}}" /> - </label> - <label>HiveServer2 endpoint - <input type="text" - name="targetHiveServerInput" - ng-model="UIModel.hiveOptions.target.hiveServerToEndpoint" - ng-pattern="validations.patterns.path" - class="form-control" - validation-optional-message="{{validations.messages.path}}" /> - </label> + </div> </div> - <div class="retryBox"> - <h4>Retry</h4> + <div class="col-xs-24 plr0px retryBox"> + <label class="col-xs-24">Retry</label> - <div class="policyBox"> - <label>Policy</label> - <select ng-model="UIModel.retry.policy" - class="form-control"> - <option selected value="periodic">PERIODIC</option> - <option value="exp-backoff">EXPONENTIAL_BACKOFF</option> - <option value="final">FINAL</option> + <div class="col-xs-6 policyBox pt5px mt5"> + <label class="light">Policy</label> + <select ng-model="UIModel.retry.policy" ng-required="true" + class="form-control padding0" ng-change="policyChange()"> + <option selected value="periodic">PERIODIC</option> + <option value="exp-backoff">EXPONENTIAL_BACKOFF</option> + <option value="final">FINAL</option> </select> </div> - <div> - <label>Delay</label> - <input type="text" - name="frequencyEveryInput" - ng-model="UIModel.retry.delay.number" - ng-pattern="validations.patterns.twoDigits" - ng-keydown="validations.acceptOnlyNumber($event)" - class="form-control" - validation-optional-message="{{validations.messages.number}}" /> - - <select ng-model="UIModel.retry.delay.unit" - class="form-control"> - <option selected value="minutes">minutes</option> - <option value="hours">hours</option> - <option value="days">days</option> - <option value="months">months</option> - </select> + <div class="col-xs-6 pt5px mt8"> + <label class="col-xs-6 light plr0px">Delay</label> + <div class="col-xs-8 plr0px"> + <input type="text" + name="frequencyEveryInput" + ng-model="UIModel.retry.delay.quantity" + ng-pattern="validations.patterns.twoDigits" + ng-keydown="validations.acceptOnlyNumber($event)" + class="form-control" + ng-disabled = "UIModel.retry.policy === 'final'" + validation-optional-message="{{validations.messages.number}}" /> + </div> + <div class="col-xs-16"> + <select ng-model="UIModel.retry.delay.unit" + class="form-control padding0" ng-disabled = "UIModel.retry.policy === 'final'"> + <option selected value="minutes">minutes</option> + <option value="hours">hours</option> + <option value="days">days</option> + <option value="months">months</option> + </select> + </div> </div> - <div> - <label>Attempts</label> + <div class="col-xs-6 pt5px mt5"> + <label class="light">Attempts</label> <input type="text" - name="frequencyEveryInput" - ng-model="UIModel.retry.attempts" - ng-pattern="validations.patterns.twoDigits" - ng-keydown="validations.acceptOnlyNumber($event)" - class="form-control" - validation-optional-message="{{validations.messages.number}}" /> + name="frequencyEveryInput" + ng-model="UIModel.retry.attempts" + ng-pattern="validations.patterns.twoDigits" + ng-keydown="validations.acceptOnlyNumber($event)" + class="form-control" + ng-disabled = "UIModel.retry.policy === 'final'" + validation-optional-message="{{validations.messages.number}}" /> </div> </div> - <div class="aclBox col-xs-24"> - <h4>Access Control List</h4> - <div class="col-xs-8"> - <label>Owner + <div class="col-xs-24 plr0px"> + <label class="col-xs-24">Access Control List</label> + <div class="col-xs-24 plr0px"> + <div class="col-xs-8"> + <label class="light">Owner<mandatory-field></mandatory-field></label> <input type="text" name="aclOwnerInput" - ng-model="UIModel.acl.owner" + ng-model="UIModel.ACL.owner" ng-pattern="validations.patterns.unixId" class="form-control" ng-required="true" validation-message="{{validations.messages.acl.owner}}"/> - </label> - </div> - <div class="col-xs-8"> - <label>Group + </div> + <div class="col-xs-8 pl0px"> + <label class="light">Group<mandatory-field></mandatory-field></label> <input type="text" name="aclGroupInput" - ng-model="UIModel.acl.group" + ng-model="UIModel.ACL.group" ng-pattern="validations.patterns.unixId" class="form-control" ng-required="true" validation-message="{{validations.messages.acl.group}}" /> - </label> + </div> </div> - <div class="col-xs-8"> - <label>Permissions - <input type="text" - name="aclPermissionsInput" - ng-model="UIModel.acl.permissions" - ng-pattern="validations.patterns.unixPermissions" - class="form-control" - ng-required="true" - validation-message="{{validations.messages.acl.permission}}" /> - </label> + <div class="col-xs-24"> + <div class="col-xs-8 plr0px"> + <label class="light">Permissions<mandatory-field></mandatory-field></label> + <acl-permissions acl-model="UIModel.ACL.permission"></acl-permissions> + </div> </div> </div> - - - - </div> - - <div class="row"> - <div class="col-xs-24 mt20"> - - <button class="btn nextBtn pull-right" - ng-disabled="buttonSpinners.show" - ng-click="goNext(datasetForm.$invalid, 'forms.dataset.summary')" > - Next <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.show" /> - </button> - <a class="pull-right" ui-sref="main"> - Cancel + <div class="col-xs-24 pb15px mt35"> + <div class="pull-right"> + <a class="btn cnclBtn" ui-sref="main"> + CANCEL </a> - + <button class="btn nextBtn" + ng-disabled="buttonSpinners.show" + ng-click="goNext(datasetForm.$invalid)" scroll-to-error> + NEXT <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.show" /> + </button> </div> </div> - - - - - </form>
http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/html/dataset/datasetFormSummaryStepTpl.html ---------------------------------------------------------------------- diff --git a/falcon-ui/app/html/dataset/datasetFormSummaryStepTpl.html b/falcon-ui/app/html/dataset/datasetFormSummaryStepTpl.html index 6d73af5..2b192cf 100644 --- a/falcon-ui/app/html/dataset/datasetFormSummaryStepTpl.html +++ b/falcon-ui/app/html/dataset/datasetFormSummaryStepTpl.html @@ -18,128 +18,215 @@ */ --> <div id="formSummaryBox" class="col-xs-24"> + <h4>General</h4> <div> - <h4 class="lightSubtitle">Name</h4> - {{UIModel.name}} + <label>Name</label>: + <span>{{UIModel.name}}</span> </div> <div> - <h4 class="lightSubtitle">Type</h4> - {{UIModel.formType}} - </div> - <div> - <h4 class="lightSubtitle">Tags</h4> - <div ng-repeat="tag in UIModel.tags.tagsArray"><span>{{tag.key}}</span> - {{tag.value}}</div> + <label>Tags</label>: + <div ng-repeat="tag in UIModel.tags"><span>{{tag.key}}</span> - <span>{{tag.value}}</span></div> </div> <div> - <h4 class="lightSubtitle">Source</h4> + <h4>Source</h4> </div> <div class="box"> - <h3 ng-if="UIModel.formType === 'HIVE' || UIModel.source.location === 'HDFS'">{{UIModel.source.cluster}}</h3> - - <h4 ng-if="UIModel.formType === 'HDFS'">Location</h4> - <div ng-if="UIModel.formType === 'HDFS'">{{UIModel.source.location}}</div> - <div ng-if="UIModel.formType === 'HDFS'"><span>Path:</span> {{UIModel.source.path}}</div> - <div ng-if="UIModel.formType === 'HDFS' && UIModel.source.location !== 'HDFS'"><span>URL:</span>{{UIModel.source.url}}</div> - - - + <h3 ng-if="UIModel.type === 'HIVE' || UIModel.source.location === 'HDFS'">{{UIModel.source.cluster}}</h3> + <div ng-if="UIModel.type === 'HDFS'"> + <label class="locationBox">Location</label>: + <span>{{UIModel.source.location}}</span> + </div> + <div ng-if="UIModel.type === 'HDFS'"> + <label>Path</label>: + <span>{{UIModel.source.path}}</span></div> + <div ng-if="UIModel.type === 'HDFS' && UIModel.source.location !== 'HDFS'"> + <label>URL</label>: + <span>{{UIModel.source.url}}</span> + </div> + <div ng-if="UIModel.type === 'HIVE'">I want to copy <span>{{UIModel.source.hiveDatabaseType}}</span></div> + <div ng-if="UIModel.type === 'HIVE' && UIModel.source.hiveDatabaseType === 'databases'"> + <label>Databases</label>: + <span>{{UIModel.source.hiveDatabases}}</span> + </div> + <div ng-if="UIModel.type === 'HIVE' && UIModel.source.hiveDatabaseType === 'tables'"> + <label>From Database </label> + <span>{{UIModel.source.hiveDatabases}}</span> + </div> + <div ng-if="UIModel.type === 'HIVE' && UIModel.source.hiveDatabaseType === 'tables'"> + <label>Tables</label>: + <span>{{UIModel.source.hiveTables}}</span> + </div> - <div ng-if="UIModel.formType === 'HIVE'">I want to copy <span>{{UIModel.source.hiveDatabaseType}}</span></div> - <div ng-if="UIModel.formType === 'HIVE' && UIModel.source.hiveDatabaseType === 'databases'"><span>Databases:</span> {{UIModel.source.hiveDatabases}}</div> - <div ng-if="UIModel.formType === 'HIVE' && UIModel.source.hiveDatabaseType === 'tables'"><span>From Database </span>{{UIModel.source.hiveDatabase}}</div> - <div ng-if="UIModel.formType === 'HIVE' && UIModel.source.hiveDatabaseType === 'tables'"><span>Tables:</span> {{UIModel.source.hiveTables}}</div> + <div ng-if="UIModel.type === 'HIVE'"> + <label>HiveServer2 endpoint</label>: + <span>{{UIModel.hiveOptions.source.hiveServerToEndpoint}}</span> + </div> + <div ng-if="UIModel.type === 'HIVE'"> + <label>Staging path</label>: + <span>{{UIModel.hiveOptions.source.stagingPath}}</span> + </div> + <div ng-if="UIModel.type === 'HIVE' && secureMode === true"> + <label>Hive2 Kerberos Principal</label>: + <span>{{UIModel.source.hive2KerberosPrincipal}}</span> + </div> + <div ng-if="UIModel.type === 'HIVE' && secureMode === true"> + <label>Meta Store URI</label>: + <span>{{UIModel.source.hiveMetastoreUri}}</span> + </div> + <div ng-if="UIModel.type === 'HIVE' && secureMode === true"> + <label>Kerberos Principal</label>: + <span>{{UIModel.source.hiveMetastoreKerberosPrincipal}}</span> + </div> </div> + <div> - <h4 class="lightSubtitle">Target</h4> + <h4>Target</h4> </div> <div class="box"> - <h3 ng-if="(UIModel.formType === 'HDFS' && UIModel.target.location === 'HDFS') || UIModel.formType === 'HIVE'">{{UIModel.target.cluster}}</h3> + <h3 ng-if="(UIModel.type === 'HDFS' && UIModel.target.location === 'HDFS') || UIModel.type === 'HIVE'"> + {{UIModel.target.cluster}} + </h3> - <h4 ng-if="UIModel.formType === 'HDFS'">Location</h4> - <div ng-if="UIModel.formType === 'HDFS'">{{UIModel.target.location}}</div> - <div ng-if="UIModel.formType === 'HDFS'"><span>Path:</span> {{UIModel.target.path}}</div> - <div ng-if="UIModel.formType === 'HDFS' && UIModel.target.location !== 'HDFS'"><span>URL:</span> {{UIModel.target.url}}</div> + <div ng-if="UIModel.type === 'HDFS'"> + <label class="locationBox">Location</label>: + <span>{{UIModel.target.location}}</span> + </div> + <div ng-if="UIModel.type === 'HDFS'"> + <label>Path</label>: + <span>{{UIModel.target.path}}</span> + </div> + <div ng-if="UIModel.type === 'HDFS' && UIModel.target.location !== 'HDFS'"> + <label>URL:</label>: + <span>{{UIModel.target.url}}</span> + </div> + <div ng-if="UIModel.type === 'HIVE'"> + <label>HiveServer2 endpoint</label>: + <span>{{UIModel.hiveOptions.target.hiveServerToEndpoint}}</span> + </div> + + <div ng-if="UIModel.type === 'HIVE'"> + <label>Staging path</label>: + <span>{{UIModel.hiveOptions.target.stagingPath}}</span> + </div> + + <div ng-if="UIModel.type === 'HIVE' && secureMode === true"> + <label>Hive2 Kerberos Principal</label>: + <span>{{UIModel.target.hive2KerberosPrincipal}}</span> + </div> + + <div ng-if="UIModel.type === 'HIVE' && secureMode === true"> + <label>Meta Store URI</label>: + <span>{{UIModel.target.hiveMetastoreUri}}</span> + </div> + + <div ng-if="UIModel.type === 'HIVE' && secureMode === true"> + <label>Kerberos Principal</label>: + <span>{{UIModel.target.hiveMetastoreKerberosPrincipal}}</span> + </div> </div> <div> <h4 class="lightSubtitle">Run On</h4> - <div ng-if="UIModel.runOn === 'source'">{{UIModel.source.cluster}}</div> - <div ng-if="UIModel.runOn === 'target'">{{UIModel.target.cluster}}</div> + <div ng-if="UIModel.runOn === 'source'"><span>{{UIModel.source.cluster}}</span></div> + <div ng-if="UIModel.runOn === 'target'"><span>{{UIModel.target.cluster}}</span></div> </div> <hr /> <div> <h4 class="lightSubtitle">Schedule</h4> - <span>Start on: </span>{{UIModel.validity.startISO}} <br /> - <span>End on: </span>{{UIModel.validity.endISO}} + <div><label>Start on</label>: <span>{{UIModel.validity.start.date|date:'yyyy-MM-dd'}} {{UIModel.validity.start.time|date:'HH:mm'|date:'HH:mm'}}</span></div> + <div><label>End on</label>: <span>{{UIModel.validity.end.date|date:'yyyy-MM-dd'}} {{UIModel.validity.end.time|date:'HH:mm'}}</span></div> </div> - <div ng-if="UIModel.formType === 'HDFS'"> - <h4 class="lightSubtitle">Max Maps</h4> - {{UIModel.allocation.hdfs.maxMaps}} - - <h4 class="lightSubtitle">Max Bandwidth</h4> - {{UIModel.allocation.hdfs.maxBandwidth}} + <div> + <h4 class="lightSubtitle">Frequency</h4> + <span>{{UIModel.frequency.quantity}} {{UIModel.frequency.unit}}</span> </div> - <div ng-if="UIModel.formType === 'HIVE'"> - - <h4 class="lightSubtitle">Max Maps for Distcp</h4> - {{UIModel.allocation.hive.maxMapsDistcp}} - - <h4 class="lightSubtitle">Max Bandwidth</h4> - {{UIModel.allocation.hive.maxBandwidth}} - - <h4 class="lightSubtitle">Max Events</h4> - {{UIModel.allocation.hive.maxMapsEvents}} - <h4 class="lightSubtitle">Max Maps for mirror</h4> - {{UIModel.allocation.hive.maxMapsMirror}} + <div> + <h4 class="lightSubtitle">Timezone</h4> + <span>{{UIModel.validity.timezone}}</span> </div> <div> - <h4 ng-if="UIModel.alerts.alertsArray.length > 0" class="lightSubtitle">Alerts</h4> - {{ UIModel.alerts.alertsArray.join() }} + <h4 ng-if="UIModel.alerts.length > 0" class="lightSubtitle">Alerts</h4> + <span>{{ UIModel.alerts.join() }}</span> </div> + <div ng-if="UIModel.type === 'HIVE'"> + <h4 class="lightSubtitle">TDE Encryption</h4> + <span>{{UIModel.tdeEncryptionEnabled}}</span> + </div> <hr /> - <h4 class="lightSubtitle">ACL</h4> - <div><span>Owner:</span> {{UIModel.acl.owner}}</div> - <div><span>Group:</span> {{UIModel.acl.group}}</div> - <div><span>Permissions:</span> {{UIModel.acl.permissions}}</div> - <h4 class="lightSubtitle">Retry</h4> - <div><span>Policy: </span> {{UIModel.retry.policy}}</div> - <div><span>delay: </span> {{UIModel.retry.delay.number}} {{UIModel.retry.delay.unit}}</div> - <div><span>Attempts: </span> {{UIModel.retry.attempts}}</div> + <h4 class="lightSubtitle">Allocation</h4> + <div ng-if="UIModel.type === 'HDFS'"> + <div> + <label>Max Maps</label>: + <span>{{UIModel.allocation.hdfs.distcpMaxMaps}}</span> + </div> + <div> + <label>Max Bandwidth</label>: + <span>{{UIModel.allocation.hdfs.distcpMapBandwidth}}</span> + </div> + </div> + <div ng-if="UIModel.type === 'HIVE'"> + <div> + <label>Max Maps for Distcp</label>: + <span>{{UIModel.allocation.hive.distcpMaxMaps}}</span> + </div> + <div> + <label>Max Bandwidth</label>: + <span>{{UIModel.allocation.hive.distcpMapBandwidth}}</span> + </div> + <div> + <label>Max Events</label>: + <span>{{UIModel.allocation.hive.maxEvents}}</span> + </div> + <div> + <label>Max Maps for mirror</label>: + <span>{{UIModel.allocation.hive.replicationMaxMaps}}</span> + </div> + </div> + <hr /> - <h4 class="lightSubtitle">Frequency</h4> - <div>{{UIModel.frequency.number}} {{UIModel.frequency.unit}}</div> + <h4 class="lightSubtitle">Retry</h4> + <div><label>Policy</label>: <span>{{UIModel.retry.policy}}</span></div> + <div><label>Delay</label>: <span>{{UIModel.retry.delay.quantity}} {{UIModel.retry.delay.unit}}</span></div> + <div><label>Attempts</label>: <span>{{UIModel.retry.attempts}}</span></div> + <hr /> + <h4 class="lightSubtitle">Access Control List</h4> + <div> + <label>Owner</label>: <span>{{UIModel.ACL.owner}}</span> + <label>Group</label>: <span>{{UIModel.ACL.group}}</span> + <label>Permissions</label>: <span>{{UIModel.ACL.permission}}</span> + </div> <hr /> - <div class="row"> - <div class="col-xs-24 mt20"> - <button type="button" class="btn prevBtn" - ng-click="goBack('forms.dataset.general')" - ng-disabled="buttonSpinners.backShow"> - Previous <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.backShow" /> - </button> - <button class="btn nextBtn pull-right" + <div class="col-xs-24 mt35 pb15px pl0px"> + <button type="button" class="btn prevBtn" + ng-click="goBack()" + ng-disabled="buttonSpinners.backShow"> + Previous <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.backShow" /> + </button> + <div class="pull-right"> + <a class="btn cnclBtn" ui-sref="main"> + CANCEL + </a> + <button class="btn nextBtn" ng-disabled="buttonSpinners.show" ng-click="save()"> - Save <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.show" /> + SAVE <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.show" /> </button> - <a class="pull-right" ui-sref="main"> - Cancel - </a> </div> </div> http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/html/dataset/datasetFormTpl.html ---------------------------------------------------------------------- diff --git a/falcon-ui/app/html/dataset/datasetFormTpl.html b/falcon-ui/app/html/dataset/datasetFormTpl.html index d471d40..3d1d01a 100644 --- a/falcon-ui/app/html/dataset/datasetFormTpl.html +++ b/falcon-ui/app/html/dataset/datasetFormTpl.html @@ -17,41 +17,29 @@ * limitations under the License. */ --> -<div id="formBox"> - <div class="formTitol"> - <a>Falcon Mirrors</a> - <h1>New Mirror</h1> - </div> - +<div id="formBox" class="datasetForm"> <div class="col-sm-24"> - <div class="formBoxWrapper"> - - <div class="progressBox col-xs-24" ng-class="{ general:isActive('forms.dataset.general'), + <div class="formBoxContainer detailsBox"> + <div class="row datasetProgressBox" ng-class="{ general:isActive('forms.dataset.general'), summary:isActive('forms.dataset.summary')}"> - <div class="progressBar"> - <div class="bar1"></div> - <span> - <div class="fir"> - <b>1</b> - <span class="glyphicon glyphicon-ok"></span> - <h6>General</h6> - </div> - </span> - <span> - <div class="sec"> - <b>2</b> - <span class="glyphicon glyphicon-ok"></span> - <h6>Summary</h6> - </div> - </span> + <div class="progressBar col-xs-24"> + <div class="text-center" ng-class="{ + active:isActive('forms.dataset.general'), + completed:isCompleted('forms.dataset.general')}">General</div> + <div class="text-center" ng-class="{ + active:isActive('forms.dataset.summary'), + completed:isCompleted('forms.dataset.summary')}">Summary</div> </div> </div> - <div class="row" ui-view></div> + <div class="row customContainer"> + <div class="col-xs-offset-1 col-xs-22"> + <div class="col-xs-24"> + <label class="title">NEW {{UIModel.type}} MIRROR</label> + </div> + <div ui-view></div> + </div> + </div> </div> </div> - - <div class="col-sm-24"> - - </div> -</div> \ No newline at end of file +</div> http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/html/dataset/datasetSummary.html ---------------------------------------------------------------------- diff --git a/falcon-ui/app/html/dataset/datasetSummary.html b/falcon-ui/app/html/dataset/datasetSummary.html new file mode 100644 index 0000000..8d855f1 --- /dev/null +++ b/falcon-ui/app/html/dataset/datasetSummary.html @@ -0,0 +1,209 @@ +<!-- +/** + * 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 id="formSummaryBox" class="summaryBox"> + <h5>{{entityTypeLabel}}</h5> + <div> + <label>Name</label>: + <span>{{extension.name}}</span> + </div> + <div> + <label>Tags</label>: + <div ng-repeat="tag in extension.tags"><span>{{tag.key}}</span> - <span>{{tag.value}}</span></div> + </div> + + <div> + <h4 class="lightSubtitle">Source</h4> + </div> + <div class="box"> + <h3 ng-if="extension.type === 'HIVE' || extension.source.location === 'HDFS'">{{extension.source.cluster}}</h3> + <div ng-if="extension.type === 'HDFS'"> + <label class="locationBox">Location</label>: + <span>{{extension.source.location}}</span> + </div> + <div ng-if="extension.type === 'HDFS'"> + <label>Path</label>: + <span>{{extension.source.path}}</span></div> + <div ng-if="extension.type === 'HDFS' && extension.source.location !== 'HDFS'"> + <label>URL</label>: + <span>{{extension.source.url}}</span> + </div> + + <div ng-if="extension.type === 'HIVE'">I want to copy <span>{{extension.source.hiveDatabaseType}}</span></div> + <div ng-if="extension.type === 'HIVE' && extension.source.hiveDatabaseType === 'databases'"> + <label>Databases</label>: + <span>{{extension.source.hiveDatabases}}</span> + </div> + <div ng-if="extension.type === 'HIVE' && extension.source.hiveDatabaseType === 'tables'"> + <label>From Database </label> + <span>{{extension.source.hiveDatabases}}</span> + </div> + <div ng-if="extension.type === 'HIVE' && extension.source.hiveDatabaseType === 'tables'"> + <label>Tables</label>: + <span>{{extension.source.hiveTables}}</span> + </div> + + <div ng-if="extension.type === 'HIVE'"> + <label>HiveServer2 endpoint</label>: + <span>{{extension.hiveOptions.source.hiveServerToEndpoint}}</span> + </div> + + <div ng-if="extension.type === 'HIVE'"> + <label>Staging path</label>: + <span>{{extension.hiveOptions.source.stagingPath}}</span> + </div> + + <div ng-if="extension.type === 'HIVE' && secureMode === true"> + <label>Hive2 Kerberos Principal</label>: + <span>{{extension.source.hive2KerberosPrincipal}}</span> + </div> + + <div ng-if="extension.type === 'HIVE' && secureMode === true"> + <label>Meta Store URI</label>: + <span>{{extension.source.hiveMetastoreUri}}</span> + </div> + + <div ng-if="extension.type === 'HIVE' && secureMode === true"> + <label>Kerberos Principal</label>: + <span>{{extension.source.hiveMetastoreKerberosPrincipal}}</span> + </div> + </div> + + <div> + <h4 class="lightSubtitle">Target</h4> + </div> + <div class="box"> + <h3 ng-if="(extension.type === 'HDFS' && extension.target.location === 'HDFS') || extension.type === 'HIVE'"> + {{extension.target.cluster}} + </h3> + + <div ng-if="extension.type === 'HDFS'"> + <label class="locationBox">Location</label>: + <span>{{extension.target.location}}</span> + </div> + <div ng-if="extension.type === 'HDFS'"> + <label>Path</label>: + <span>{{extension.target.path}}</span> + </div> + <div ng-if="extension.type === 'HDFS' && extension.target.location !== 'HDFS'"> + <label>URL</label>: + <span>{{extension.target.url}}</span> + </div> + + <div ng-if="extension.type === 'HIVE'"> + <label>HiveServer2 endpoint</label>: + <span>{{extension.hiveOptions.target.hiveServerToEndpoint}}</span> + </div> + + <div ng-if="extension.type === 'HIVE'"> + <label>Staging path</label>: + <span>{{extension.hiveOptions.target.stagingPath}}</span> + </div> + + <div ng-if="extension.type === 'HIVE' && secureMode === true"> + <label>Hive2 Kerberos Principal</label>: + <span>{{extension.target.hive2KerberosPrincipal}}</span> + </div> + + <div ng-if="extension.type === 'HIVE' && secureMode === true"> + <label>Meta Store URI</label>: + <span>{{extension.target.hiveMetastoreUri}}</span> + </div> + + <div ng-if="extension.type === 'HIVE' && secureMode === true"> + <label>Kerberos Principal</label>: + <span>{{extension.target.hiveMetastoreKerberosPrincipal}}</span> + </div> + </div> + + <div> + <h4 class="lightSubtitle">Run On</h4> + <div ng-if="extension.runOn === 'source'"><span>{{extension.source.cluster}}</span></div> + <div ng-if="extension.runOn === 'target'"><span>{{extension.target.cluster}}</span></div> + </div> + + <hr /> + + <div> + <h4 class="lightSubtitle">Schedule</h4> + <div><label>Start on</label>: <span>{{extension.validity.start.date|date:'yyyy-MM-dd'}} {{extension.validity.start.time|date:'HH:mm'|date:'HH:mm'}}</span></div> + <div><label>End on</label>: <span>{{extension.validity.end.date|date:'yyyy-MM-dd'}} {{extension.validity.end.time|date:'HH:mm'}}</span></div> + </div> + + <div> + <h4 class="lightSubtitle">Frequency</h4> + <span>{{extension.frequency.quantity}} {{extension.frequency.unit}}</span> + </div> + + <div> + <h4 class="lightSubtitle">Timezone</h4> + <span>{{extension.validity.timezone}}</span> + </div> + + <div> + <h4 ng-if="extension.alerts.length > 0" class="lightSubtitle">Alerts</h4> + <span>{{ extension.alerts.join() }}</span> + </div> + <hr /> + + <h4 class="lightSubtitle">Allocation</h4> + <div ng-if="extension.type === 'HDFS'"> + <div> + <label>Max Maps</label>: + <span>{{extension.allocation.hdfs.distcpMaxMaps}}</span> + </div> + <div> + <label>Max Bandwidth</label>: + <span>{{extension.allocation.hdfs.distcpMapBandwidth}}</span> + </div> + </div> + <div ng-if="extension.type === 'HIVE'"> + <div> + <label>Max Maps for Distcp</label>: + <span>{{extension.allocation.hive.distcpMaxMaps}}</span> + </div> + <div> + <label>Max Bandwidth</label>: + <span>{{extension.allocation.hive.distcpMapBandwidth}}</span> + </div> + <div> + <label>Max Events</label>: + <span>{{extension.allocation.hive.maxEvents}}</span> + </div> + <div> + <label>Max Maps for mirror</label>: + <span>{{extension.allocation.hive.replicationMaxMaps}}</span> + </div> + </div> + <hr /> + + <h4 class="lightSubtitle">Retry</h4> + <div><label>Policy</label>: <span>{{extension.retry.policy}}</span></div> + <div><label>delay</label>: <span>{{extension.retry.delay.quantity}} {{extension.retry.delay.unit}}</span></div> + <div><label>Attempts</label>: <span>{{extension.retry.attempts}}</span></div> + <hr /> + + <h4 class="lightSubtitle">Access Control List</h4> + <div> + <label>Owner</label>: <span>{{extension.ACL.owner}}</span> + <label>Group</label>: <span>{{extension.ACL.group}}</span> + <label>Permissions</label>: <span>{{extension.ACL.permission}}</span> + </div> + <hr /> +</div> http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/html/datasource/datasourceFormAdvancedStepTpl.html ---------------------------------------------------------------------- diff --git a/falcon-ui/app/html/datasource/datasourceFormAdvancedStepTpl.html b/falcon-ui/app/html/datasource/datasourceFormAdvancedStepTpl.html new file mode 100644 index 0000000..b382040 --- /dev/null +++ b/falcon-ui/app/html/datasource/datasourceFormAdvancedStepTpl.html @@ -0,0 +1,72 @@ +<!-- +/** + * 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. + */ +--> +<form name="datasourceForm" novalidate id="datasourceFormGeneralStep"> + <div class="col-xs-24"><label>Access Control List</label></div> + <div class="col-xs-24 plr0px"> + <div class="col-xs-8"> + <label class="light">Owner<mandatory-field></mandatory-field></label> + <input type="text" class="form-control" validation-message="{{validations.messages.acl.owner}}" + ng-required="true" + ng-pattern="validations.patterns.unixId" + ng-model="datasource.ACL.owner"/> + </div> + <div class="col-xs-8"> + <label class="light">Group<mandatory-field></mandatory-field></label> + <input type="text" class="form-control" validation-message="{{validations.messages.acl.group}}" + ng-required="true" + ng-pattern="validations.patterns.unixId" + ng-model="datasource.ACL.group"/> + </div> + <div class="col-xs-24"> + <div class="col-xs-8 plr0px"> + <label class="light">Permissions<mandatory-field></mandatory-field></label> + <acl-permissions acl-model="datasource.ACL.permission"></acl-permissions> + </div> + </div> + </div> + + <div class="col-xs-24"> + <div class="pull-right"> + <button id="datasource.step2" class="btn btn-datasource" + ng-disabled="buttonSpinners.validateShow" + ng-click="validate()"> + Test <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.validateShow" /> + </button> + </div> + </div> + + <div class="col-xs-24 pb15px mt35"> + <button id="datasource.backToStep1" class="btn prevBtn" type="button" ng-click="goBack()" ng-disabled="buttonSpinners.backShow"> + PREVIOUS <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.backShow"> + </button> + <div class="pull-right"> + <a class="btn cnclBtn" ui-sref="main"> + CANCEL + </a> + <button id="datasource.step1" class="btn nextBtn" + ng-disabled="buttonSpinners.show" + ng-click="goNext(datasourceForm.$invalid)" + scroll-to-error> + NEXT <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.show" /> + </button> + </div> + </div> + +</form>
