http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/html/entityDetailsTpl.html ---------------------------------------------------------------------- diff --git a/falcon-ui/app/html/entityDetailsTpl.html b/falcon-ui/app/html/entityDetailsTpl.html index 6f1a4bc..2afefac 100644 --- a/falcon-ui/app/html/entityDetailsTpl.html +++ b/falcon-ui/app/html/entityDetailsTpl.html @@ -19,58 +19,101 @@ --> <div class="container" id="entityDetails"> - <div class="row"> - <div class="col-sm-24"> - <button class="btn " ui-sref="main">< Back to Search</button> + <div class="row pt15px"> + <div class="col-sm-24 detailsHeaders pl0px"> + <button class="btn" title="Back to search" ui-sref="main">< </button> + <span class="entityName">{{entity.name}}</span> + <span ng-class="{'blink-success': entity.status == 'RUNNING', + 'text-success': entity.status == 'SUCCEEDED', + 'blink-warning': entity.status == 'SUSPENDED', + 'blink-danger': entity.status == 'UNKNOWN'}" ng-if="entity.type != 'cluster'"> + {{entity.status}}</span> + <br><br> + <div class="pull-left"> + <table> + <tbody> + <tr> + <td class="buttonCell" colspan="9"> + <div class="btn btn-gray btn-xs buttons-to-show" ng-click="scheduleEntity()" ng-if="entity.type != 'cluster' && entity.status == 'SUBMITTED'"> + <span class="entypo play"></span> <div>Schedule</div> + </div> + <div class="btn btn-gray btn-xs buttons-to-show" ng-click="resumeEntity()" ng-if="entity.type != 'cluster' && entity.status == 'SUSPENDED'"> + <span class="entypo play"></span> <div>Resume</div> + </div> + <div class="btn btn-gray btn-xs buttons-to-show" ng-click="suspendEntity()" ng-if="entity.type != 'cluster' && entity.status == 'RUNNING'"> + <span class="entypo paus"></span> <div>Pause</div> + </div> + <div class="btn btn-gray btn-xs buttons-to-show" ng-click="editEntity()" + ng-disabled="entity.type === 'cluster' && (!isSafeMode() || !isSuperUser())" + ng-class="{disabledEditBtn: entity.type === 'cluster' && (!isSafeMode() || !isSuperUser())}" + title="{{(entity.type === 'cluster' && !isSafeMode() || (!isSuperUser())) ? 'Cluster entity update can only be performed by superuser during safemode' : ''}}"> + <span class="entypo cog"></span> <div>Edit</div> + </div> + <div class="btn btn-gray btn-xs buttons-to-show" ng-click="cloneEntity()" ng-if="entity.type != 'cluster'"> + <span class="entypo docs"></span> <div>Copy</div> + </div> + <div class="btn btn-gray btn-xs buttons-to-show" ng-click="deleteEntity()"> + <span class="entypo trash"></span> <div>Delete</div> + </div> + <div class="btn btn-gray btn-xs buttons-to-show" ng-click="downloadEntity()"> + <span class="entypo down"></span> <div>XML</div> + </div> + </td> + </tr> + </tbody> + </table> + + </div> </div> </div> - +<!--* <h3 class="link-icons entity-title entity-link-null" id="entity-title"> {{entity.name}} <button type="button" class="detailsBT"> <span ng-class="displayIcon((entity.type | uppercase), entity.model)"></span> {{entityTypeLabel}} </button> - </h3> + </h3>--> - <div class="row"> - <div class="col-sm-24"> - <div class="detailsBox"> - <h4> - Dependencies - </h4> - <div class="dependencies-graph"><dependencies-graph name="entity.name" type="entity.type"/></div> + <div class="row pt15px" ng-if="entity.type != 'cluster'"> + <div class="col-sm-24 pl0px"> + <div class="entityDetailsBox"> + <div class="dependencies-graph"><dependencies-graph name="entity.name" type="entity.type"/></div> </div> </div> </div> - <div class="row"> - <div class="col-sm-16"> - <div class="detailsBox"> + <div class="row pt15px"> + <div class="col-sm-16 entityDetailsBox p10px" ng-if="entity.type != 'cluster'"> + <div> <h4> - Instances + INSTANCES </h4> <instances-list input="instancesList" type="entity.type" name="entity.name" instance-details="instanceDetails" pages="pages" go-page="goPage" next-pages="nextPages" prev-pages="prevPages" change-pages-set="changePagesSet" start="entity.start" end="entity.end"/> </div> </div> - <div class="col-sm-8"> - <div class="summaryBox" ng-init="propsOpen = false"> + <div ng-class="{'col-sm-8': entity.type !== 'cluster', 'col-sm-24': entity.type === 'cluster'}"> + <div class="summaryBox" ng-init="propsOpen = entity.type === 'cluster'"> <div class="row"> <div class="col-sm-21"> <h4> - Properties + PROPERTIES </h4> </div> <div class="col-sm-3"> - <h4 class="pointer glyphicon" ng-click="propsOpen = !propsOpen" ng-class="propsOpen ? 'glyphicon-chevron-up':'glyphicon-chevron-down'"></h4> + <h4 ng-hide="entity.type === 'cluster'" class="pointer glyphicon" ng-click="propsOpen = !propsOpen" ng-class="propsOpen ? 'glyphicon-chevron-up':'glyphicon-chevron-down'"></h4> </div> </div> <div ng-show="propsOpen" class="animate-show"> <div ng-if="entity.type == 'feed'" ui-view="feedSummary"></div> - <div ng-if="entity.type == 'process'" ui-view="processSummary"></div> + <div ng-if="entity.type == 'cluster'" ui-view="clusterSummary"></div> + <div ng-if="entity.type == 'process' && entityTypeLabel == 'Process'" ui-view="processSummary"></div> + <div ng-if="entity.type == 'process' && entityTypeLabel == 'Snapshot'" ui-view="snapshotSummary"></div> + <div ng-if="entity.type == 'process' && (entityTypeLabel == 'HDFS Mirror' || entityTypeLabel == 'Hive Mirror')" + ui-view="datasetSummary"></div> </div> </div> </div> </div> -</div> \ No newline at end of file +</div>
http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/html/entitySummary.html ---------------------------------------------------------------------- diff --git a/falcon-ui/app/html/entitySummary.html b/falcon-ui/app/html/entitySummary.html index 83e8a85..f3d7c2a 100644 --- a/falcon-ui/app/html/entitySummary.html +++ b/falcon-ui/app/html/entitySummary.html @@ -85,13 +85,13 @@ </div> <div class="col-sm-8" ng-repeat="property in feed.properties"> - <label>{{property.key}}</label>: + <label>{{feedPropertiesLabels[property.key]}}</label>: <span ng-if="property.key !== 'timeout'">{{optional(property.value)}}</span> <frequency ng-if="property.key === 'timeout'" value="property.value" prefix="at"/> </div> <div class="col-sm-8" ng-repeat="property in feed.customProperties | filter: {key: '!!'}"> - <label>{{property.key}}</label>: {{property.value}} + <label>{{feedPropertiesLabels[property.key]}}</label>: {{property.value}} </div> <h4 class="col-sm-8" > @@ -131,7 +131,7 @@ <label>Timezone</label>: {{feed.timezone}} </div> <div class="col-sm-24"> - <label>Retention</label>: <frequency value="cluster.retention" prefix="Archive in"/> + <label>Retention</label>: <frequency value="cluster.retention" prefix=""/> </div> </div> <div class="clearfix hidden-md"></div> @@ -144,4 +144,4 @@ <label class="col-sm-24" >Table uri</label> <div class="col-sm-24">{{optional(cluster.storage.catalog.catalogTable.uri)}}</div> </div> -</div> \ No newline at end of file +</div> http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/html/error.html ---------------------------------------------------------------------- diff --git a/falcon-ui/app/html/error.html b/falcon-ui/app/html/error.html new file mode 100644 index 0000000..683510e --- /dev/null +++ b/falcon-ui/app/html/error.html @@ -0,0 +1,37 @@ +<!-- +/** + * 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="col-sm-24 dashboardBox login" ng-class="{showValidationStyle:showLoginVal.show}"> + <div class="row"> + <div class="col-sm-6"></div> + <div class="col-sm-12"> + + <div class="detailsBox centered"> + <h3 class="auth" ng-if="httpError.code === 401 || httpError.code === 403"> + Verify user name and password. If problem continues, contact your administrator. + </h3> + <h3 class="auth" ng-if="httpError.code !== 401 && httpError.code !== 403"> + ERROR {{ httpError.code }} {{ httpError.error }}, try later. + </h3> + </div> + + </div> + <div class="col-sm-6"></div> + </div> +</div> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/html/feed/feedFormAdvancedStepTpl.html ---------------------------------------------------------------------- diff --git a/falcon-ui/app/html/feed/feedFormAdvancedStepTpl.html b/falcon-ui/app/html/feed/feedFormAdvancedStepTpl.html new file mode 100644 index 0000000..e50fc29 --- /dev/null +++ b/falcon-ui/app/html/feed/feedFormAdvancedStepTpl.html @@ -0,0 +1,166 @@ +<!-- +/** + * 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="feedForm" novalidate id="feedFormAdvancedStep"> + <div class="col-xs-24"><label>Job Details</label></div> + <div class="col-xs-24 plr0px"> + <div ng-repeat="property in feed.properties track by $index"> + <div ng-if="property.key === 'queueName'"> + <div class="col-xs-4"> + <label class="light">Queue Name</label> + <input type="text" class="form-control" + ng-model="property.value" /> + </div> + </div> + <div ng-if="property.key === 'jobPriority'"> + <div class="col-xs-4"> + <label class="light">Job Priority</label> + <select ng-model="property.value" class="form-control padding0"> + <option value="" disabled selected style='display:none;'>-Select job-</option> + <option value="VERY_HIGH">Very high</option> + <option value="HIGH">High</option> + <option value="NORMAL">Normal</option> + <option value="LOW">Low</option> + <option value="VERY_LOW">Very Low</option> + </select> + </div> + </div> + </div> + </div> + + <div class="col-xs-24 plr0px"> + <div class="col-xs-4"> + <label class="col-xs-24 light plr0px">Late Arrival Cutoff</label> + <input type="text" class="col-xs-4" ng-keydown="validations.acceptOnlyNumber($event)" + ng-model="feed.lateArrival.cutOff.quantity" + ng-pattern="validations.patterns.twoDigits"/> + <select + ng-model="feed.lateArrival.cutOff.unit" class="col-xs-offset-1 col-xs-19"> + <option value="" disabled selected style='display:none;'>-Select unit-</option> + <option 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-4"> + <label class="light">Availability Flag</label> + <input type="text" class="form-control" + ng-model="feed.availabilityFlag" + validation-optional-message="{{validations.messages.value}}" + ng-pattern="validations.patterns.alpha"> + </div> + </div> + + <label class="col-xs-24">Performance & Throttling - Distributed Copy</label> + + <div class="col-xs-24 plr0px"> + <div ng-repeat="property in feed.properties track by $index"> + <div ng-if="property.key === 'mapBandwidthKB'"> + <div class="col-xs-4"> + <label class="light">Max Bandwidth</label> + <input type="text" class="form-control" + ng-model="property.value"> + </div> + </div> + <div ng-if="property.key === 'maxMaps'"> + <div class="col-xs-4"> + <label class="light">Max map jobs</label> + <input type="text" class="form-control" + ng-model="property.value"> + </div> + </div> + </div> + </div> + + <div class="col-xs-24 plr0px"> + <div ng-repeat="property in feed.properties track by $index"> + <div ng-if="property.key === 'parallel'"> + <div class="col-xs-4"> + <label class="col-xs-24 light plr0px">Parallel</label> + <input type="text" class="form-control" + ng-model="property.value"> + </div> + </div> + </div> + </div> + + <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="feed.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="feed.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="feed.ACL.permission"></acl-permissions> + </div> + </div> + </div> + <div class="col-xs-24"><label>Feed Schema</label></div> + <div class="col-xs-8"> + <label class="light" tooltip="feed.schema.location">Location<mandatory-field></mandatory-field></label> + <input type="text" class="form-control" validation-message="{{validations.messages.location}}" + ng-maxlength="200" + ng-pattern="validations.patterns.osPath" + ng-model="feed.schema.location"/> + </div> + <div class="col-xs-8"> + <label class="light" tooltip="feed.schema.provider">Provider<mandatory-field></mandatory-field></label> + <input type="text" class="form-control" validation-message="{{validations.messages.provider}}" + ng-pattern="validations.patterns.osPath" + ng-model="feed.schema.provider"/> + </div> + <div class="col-xs-8"></div> + + + <div class="col-xs-24 pb15px mt35"> + <button id="feed.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="feed.step1" class="btn nextBtn" + ng-disabled="buttonSpinners.show" + ng-click="goNext(feedForm.$invalid)" + scroll-to-error> + NEXT <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.show" /> + </button> + <button class="btn advancedSaveBtn" + ng-disabled="feedForm.$invalid || buttonSpinners.saveShow" + ng-click="saveEntity(feedForm.$invalid)" scroll-to-error> + SAVE ADVANCED OPTIONS <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.saveShow" /> + </button> + </div> + </div> + +</form> http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/html/feed/feedFormClusterDetailsTpl.html ---------------------------------------------------------------------- diff --git a/falcon-ui/app/html/feed/feedFormClusterDetailsTpl.html b/falcon-ui/app/html/feed/feedFormClusterDetailsTpl.html new file mode 100644 index 0000000..7192fd7 --- /dev/null +++ b/falcon-ui/app/html/feed/feedFormClusterDetailsTpl.html @@ -0,0 +1,151 @@ +<!-- +/** + * 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. + */ +--> +<feed-form-cluster-partitions></feed-form-cluster-partitions> + +<div class="row detailsBox"> + <div class="col-xs-24 feedLocationNavBox nopointer plr0px"> + <span class="col-xs-7" ng-show="!feed.storage.fileSystem.active">Default Storage Type</span> + <span class="col-xs-7" ng-show="feed.storage.fileSystem.active">Storage Type</span> + + <div class="col-xs-17 feedLocationNav disabled"> + <button class="btn btn-default pull-right" + ng-class="{active: feed.storage.catalog.active}" + ng-disabled="true"> + Catalog Storage + </button> + <button class="btn btn-default pull-right" + ng-class="{active: feed.storage.fileSystem.active}" + ng-disabled="true"> + File System + </button> + </div> + </div> + + <div class="col-xs-24"> + <label pl0px>LOCATION</label> + <label class="light">(if not defined, will use default location)</label> + </div> + + <div class="col-xs-24" + ng-show="feed.storage.fileSystem.active" + ng-repeat="location in cluster.storage.fileSystem.locations"> + <label class="light">{{capitalize(location.type)}} Path<mandatory-field></mandatory-field></label> + <input type="text" + placeholder="{{clusterLocationsPlaceHolders[location.type]}}" + class="form-control" + ng-model="location.path" + validation-optional-message="{{validations.messages.path}}" + ng-pattern="validations.patterns.osPath" /> + </div> + + <div class="col-xs-24" ng-show="feed.storage.catalog.active"> + <label class="light">Table uri<mandatory-field></mandatory-field></label> + <input type="text" class="form-control" + ng-model="cluster.storage.catalog.catalogTable.uri" + validation-optional-message="{{validations.messages.path}}" + ng-pattern="validations.patterns.osPath"/> + </div> + + <div class="col-xs-24"> + <label class="mt15">VALIDITY</label> + </label></div> + <div class="col-xs-24"> + <label class="mt15 light">Time Zone : <span>{{feed.timezone}}</span> + </label></div> + <div class="col-xs-24 validityBox plr0px"> + <div class="col-xs-24 plr0px"> + <div class="col-xs-6 startDateBox"> + <label class="light">Start<mandatory-field></mandatory-field> + <input type="text" + name="startDateInput" + class="form-control dateInput" + placeholder="{{dateFormat | lowercase}}" + ng-model="cluster.validity.start.date" + simple-date-picker /> + </label> + </div> + <div class="col-xs-6 startTimeBox"> + <label class="light">Time<mandatory-field></mandatory-field> + <timepicker ng-change="constructDate()" + ng-model="cluster.validity.start.time" + hour-step="1" + minute-step="1" + show-meridian="true"> + </timepicker> + </label> + </div> + </div> + + <label class="col-xs-24 custom-danger validationMessageGral" + ng-if="!cluster.validity.start.date"> + {{validations.messages.date.empty}} + </label> + + <div class="col-xs-24 plr0px"> + <div class="col-xs-6 endDateBox"> + <label class="light">End<mandatory-field></mandatory-field> + <input type="text" + name="startDateInput" + class="form-control dateInput" + placeholder="{{dateFormat | lowercase}}" + ng-model="cluster.validity.end.date" + simple-date-picker /> + </label> + </div> + <div class="col-xs-6 endTimeBox"> + <label class="light">Time<mandatory-field></mandatory-field> + <timepicker ng-change="constructDate()" + ng-model="cluster.validity.end.time" + hour-step="1" + minute-step="1" + show-meridian="true"> + </timepicker> + </label> + </div> + </div> + + <label class="col-xs-24 custom-danger validationMessageGral" + ng-if="!cluster.validity.end.date"> + {{validations.messages.date.empty}} + </label> + </div> + + <label class="light col-xs-24">Retention<mandatory-field></mandatory-field></label> + + <div class="col-xs-24 inlineInputsGroup"> + <input type="text" class="form-control" validation-message="{{validations.messages.number}}" + ng-required="true" ng-model="cluster.retention.quantity" ng-keydown="validations.acceptOnlyNumber($event)" + ng-pattern="validations.patterns.twoDigits"> + + <select ng-model="cluster.retention.unit" + ng-required="true"> + <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="row"> + <button type="button" class="btn btn-default pull-right btn-xs mt5" ng-click="removeCluster($index, cluster.type)"> + <span class="entypo minus"></span> delete + </button> + </div> +</div> http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/html/feed/feedFormClusterPartitionsTpl.html ---------------------------------------------------------------------- diff --git a/falcon-ui/app/html/feed/feedFormClusterPartitionsTpl.html b/falcon-ui/app/html/feed/feedFormClusterPartitionsTpl.html new file mode 100644 index 0000000..a09c74e --- /dev/null +++ b/falcon-ui/app/html/feed/feedFormClusterPartitionsTpl.html @@ -0,0 +1,44 @@ +<!-- +/** + * 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="col-xs-24" ng-show="partitionList.length > 0"> + <input type="checkbox" ng-model="selectPartition" /> + <label class="light">Partition</label> + <div class="typeButtonsBox mt5" ng-show="selectPartition"> + <div ng-repeat="partition in partitionList"> + <div class="col-xs-16 panel panel-default mb5"> + <div class="partition-panel-body"> + <div class="col-xs-4 mt5"> + {{partition.partitionName}} + </div> + <div class="col-xs-12 form-inline"> + <input type="radio" ng-model="partition.mapping" value="mappedPartition" + ng-change="preparePartitionExpression(partitionList)" /> + <input type="text" class="form-control" ng-model="partition.partitionText" + ng-change="preparePartitionExpression(partitionList)" + ng-disabled="partition.mapping!='mappedPartition'" /> + <input type="radio" ng-model="partition.mapping" value="any" + ng-change="preparePartitionExpression(partitionList)" /> + Any + </div> + </div> + </div> + </div> + </div> +</div> http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/html/feed/feedFormClustersStepTpl.html ---------------------------------------------------------------------- diff --git a/falcon-ui/app/html/feed/feedFormClustersStepTpl.html b/falcon-ui/app/html/feed/feedFormClustersStepTpl.html index b33b7f3..91f7d31 100644 --- a/falcon-ui/app/html/feed/feedFormClustersStepTpl.html +++ b/falcon-ui/app/html/feed/feedFormClustersStepTpl.html @@ -18,179 +18,107 @@ */ --> <form name="feedForm" novalidate id="feedFormClusterStep"> - <button class="hidden" ng-click="goNext(feedForm.$invalid, 'forms.feed.summary')" ></button> - <div ng-repeat="cluster in feed.clusters"> - <div class="row"> - <h4 class="col-xs-24">{{capitalize(cluster.type)}} Cluster </h4> + <div class="feedFormClusters"> + <div class="col-xs-24 pt5px"> + <label class="light">Partitions (comma separated)</label> + <input type="text" class="form-control" validation-optional-message="{{validations.messages.partitions}}" + ng-pattern="validations.patterns.commaSeparated" + ng-blur="createFeedClusterPartitions()" + ng-model="feedPartitions" /> </div> - <div class="row detailsBox"> - <div class="col-xs-offset-1 col-xs-22"> - - <div class="row"> - <div class="col-xs-24"> - <select ng-model="cluster.name" validation-message="{{validations.messages.cluster}}" - ng-required="true" class="col-xs-24 form-control padding0" id="clusterNameSelect"> - <option value="" disabled selected style='display:none;'>-Select cluster-</option> - <option id="cluster_" ng-repeat="clusterItem in clusterList">{{clusterItem.name}}</option> - </select> - </div> - - - <div class="col-xs-24 feedLocationNavBox nopointer"> - <h4 class="col-xs-7" ng-show="!feed.storage.fileSystem.active">Default Storage type</h4> - <h4 class="col-xs-7" ng-show="feed.storage.fileSystem.active">Storage type</h4> - - <div class="col-xs-17 feedLocationNav disabled"> - <button class="btn btn-default pull-right" - ng-class="{active: feed.storage.catalog.active}" - ng-disabled="true"> - Catalog Storage - </button> - <button class="btn btn-default pull-right" - ng-class="{active: feed.storage.fileSystem.active}" - ng-disabled="true"> - File System - </button> - </div> - </div> - - <div class="col-xs-19"> - <label>Location</label> - <label class="light">(if not defined, will use default location)</label> - </div> - - <div class="col-xs-24" - ng-show="feed.storage.fileSystem.active" - ng-repeat="location in cluster.storage.fileSystem.locations"> - <label class="light">{{location.type}} path</label> - <input type="text" - placeholder="{{clusterLocationsPlaceHolders[location.type]}}" - class="form-control" - ng-model="location.path" - validation-optional-message="{{validations.messages.path}}" - ng-pattern="validations.patterns.osPath" /> - </div> - - <div class="col-xs-24 mb10" ng-show="feed.storage.catalog.active"> - <label class="light">Table uri</label> - <input type="text" class="form-control" - ng-model="cluster.storage.catalog.catalogTable.uri" - validation-optional-message="{{validations.messages.path}}" - ng-pattern="validations.patterns.osPath"/> - </div> - <div class="clearfix mb20"></div> - <label class="col-xs-24"> Validity </label> - <div class="col-xs-24 validityBox"> - <div class="startDateBox"> - <label>Start - <input type="text" - name="startDateInput" - class="form-control dateInput" - placeholder="mm/dd/yyyy" - datepicker-popup="{{dateFormat}}" - ng-model="cluster.validity.start.date" - is-open="cluster.validity.start.opened" - ng-click="openDatePicker($event, cluster.validity.start)" - ng-change="constructDate()" - ng-required="true" - simple-date> - </label> - <label class="col-xs-24 custom-danger validationMessageGral" - ng-if="!cluster.validity.start.date"> - {{validations.messages.date.empty}} - </label> - </div> - <div class="startTimeBox"> - <label>Time - <timepicker ng-change="constructDate()" - ng-model="cluster.validity.start.time" - hour-step="1" - minute-step="1" - show-meridian="true"> - </timepicker> - </label> - </div> - <div class="endDateBox"> - <label>End - <input type="text" - name="startDateInput" - class="form-control dateInput" - placeholder="mm/dd/yyyy" - datepicker-popup="{{dateFormat}}" - ng-model="cluster.validity.end.date" - is-open="cluster.validity.end.opened" - ng-click="openDatePicker($event, cluster.validity.end)" - ng-change="constructDate()" - ng-required="true" - min-date="cluster.validity.start.date" - simple-date> - </label> - <label class="col-xs-24 custom-danger validationMessageGral" - ng-if="!cluster.validity.end.date"> - {{validations.messages.date.empty}} - </label> - </div> - <div class="endTimeBox"> - <label>Time - <timepicker ng-change="constructDate()" - ng-model="cluster.validity.end.time" - hour-step="1" - minute-step="1" - show-meridian="true"> - </timepicker> - </label> - </div> - </div> - - <label class="light col-xs-24"> Retention </label> - - <div class="col-xs-24 inlineInputsGroup"> - <input type="text" class="form-control" validation-message="{{validations.messages.number}}" - ng-required="true" ng-model="cluster.retention.quantity" ng-keydown="validations.acceptOnlyNumber($event)" - ng-pattern="validations.patterns.twoDigits"> - - <select ng-model="cluster.retention.unit" - ng-required="true"> - <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="row" ng-if="cluster.type !== 'source'"> - <button type="button" class="btn btn-default pull-right btn-xs" ng-click="removeCluster($index)"> - <span class="entypo minus"></span> delete - </button> - </div> - + <div class="col-xs-24"> + <label>Source Cluster<mandatory-field></mandatory-field></label> + </div> - </div> + <div class="col-xs-24"> + <select ng-model="sourceClusterName" + ng-change="clearSourceClusterFlags()" + class="form-control padding0 clusterSelect"> + <option value="" disabled selected style='display:none;'>-Select source cluster-</option> + <option id="cluster_" ng-repeat="clusterItem in clusterList">{{clusterItem.name}}</option> + </select> + + <button type="button" class="btn btn-default btn-xs clusterAddBtn" ng-click="addSourceCluster()"> + Add + </button> + </div> + <div class="col-xs-24"> + <label class="custom-danger" ng-show="sourceClusterNotSelected"> + You need to select the source cluster + </label> + <label class="custom-danger" ng-show="sourceClusterExists"> + Source cluster is already added + </label> + </div> - </div> + <div class="col-xs-24 sourceClusterList" ng-show="(feed.clusters | filter:{type:'source'}).length > 0"> + <label class="clusterListLabel mb7">Source Clusters</label> + <accordion close-others="false"> + <accordion-group ng-repeat="cluster in feed.clusters | filter:{type:'source'}" is-open="cluster.isAccordionOpened"> + <accordion-heading>{{ cluster.name }}</accordion-heading> + <feed-form-cluster-details></feed-form-cluster-details> + </accordion-group> + </accordion> </div> </div> - <div class="col-xs-24 mt10"> - <button type="button" class="btn btn-default btn-xs" ng-click="addCluster()"> - <span class="entypo plus"></span> add cluster + <div class="col-xs-24" ng-show="(feed.clusters | filter:{type:'source'}).length < 1"> + <label class="custom-danger"> + You need to provide at least one source cluster + </label> + </div> + + <div class="col-xs-24"> + <label>Target Cluster</label> + </div> + <div class="col-xs-24"> + <select ng-model="targetClusterName" + ng-change="clearTargetClusterFlags()" + class="form-control padding0 clusterSelect"> + <option value="" disabled selected style='display:none;'>-Select target cluster-</option> + <option id="cluster_" ng-repeat="clusterItem in clusterList">{{clusterItem.name}}</option> + </select> + + <button type="button" class="btn btn-default btn-xs clusterAddBtn" ng-click="addTargetCluster()"> + Add </button> </div> - <div class="col-xs-24 mt20"> + <div class="col-xs-24"> + <label class="custom-danger" ng-show="targetClusterNotSelected"> + You need to select the target cluster + </label> + <label class="custom-danger" ng-show="targetClusterExists"> + Target cluster is already added + </label> + </div> + + <div class="col-xs-24 targetClusterList" ng-show="(feed.clusters | filter:{type:'target'}).length > 0"> + <label class="clusterListLabel mb7">Target Clusters</label> + <accordion close-others="false"> + <accordion-group ng-repeat="cluster in feed.clusters | filter:{type:'target'}" is-open="cluster.isAccordionOpened"> + <accordion-heading>{{ cluster.name }}</accordion-heading> + <feed-form-cluster-details></feed-form-cluster-details> + </accordion-group> + </accordion> + </div> + + <div class="col-xs-24 mt35 pb15px"> <button id="feed.backToStep3" - class="btn prevBtn" - type="button" - ng-click="goBack('forms.feed.location')" - ng-disabled="buttonSpinners.backShow" > - Previous <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.backShow" /> - </button> - <button id="feed.step4" class="btn nextBtn pull-right" - ng-click="goNext(feedForm.$invalid, 'forms.feed.summary')" > - Next <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.show" /> + 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> - <a class="pull-right" ui-sref="main"> - Cancel - </a> + <div class="pull-right"> + <a class="btn cnclBtn" ui-sref="main"> + CANCEL + </a> + <button id="feed.step4" class="btn nextBtn" + ng-click="goNext(feedForm.$invalid)" scroll-to-error> + NEXT <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.show" /> + </button> + </div> </div> -</form> \ No newline at end of file +</form> http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/html/feed/feedFormDataSourceTpl.html ---------------------------------------------------------------------- diff --git a/falcon-ui/app/html/feed/feedFormDataSourceTpl.html b/falcon-ui/app/html/feed/feedFormDataSourceTpl.html new file mode 100644 index 0000000..04ea3a2 --- /dev/null +++ b/falcon-ui/app/html/feed/feedFormDataSourceTpl.html @@ -0,0 +1,148 @@ +<!-- +/** + * 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="datasourceBox"> + <div class="col-xs-24"> + <label class="light">Datasource<mandatory-field></mandatory-field></label> + </div> + <div class="col-xs-10"> + <select ng-model="feed[feed.dataTransferType][dataSourceType].name" + ng-required="true" + class="form-control padding0" + validation-message="{{validations.messages.datasource}}"> + <option value="" disabled style='display:none;'>Select transfer datasource</option> + <option ng-repeat="datasourceItem in datasourceList" + value="{{datasourceItem.name}}"> + {{datasourceItem.name}} + </option> + </select> + </div> + + <div class="col-xs-24"> + <label class="light">Table<mandatory-field></mandatory-field></label> + </div> + <div class="col-xs-10"> + <input type="text" + ng-required="true" + placeholder="Enter table name" + class="form-control" + ng-model="feed[feed.dataTransferType][dataSourceType].tableName" + validation-optional-message="{{validations.messages.table}}" /> + </div> + <div class="col-xs-24 plr0px" ng-if="feed.dataTransferType === 'export'"> + <div class="col-xs-24"> + <label class="light">Load Method<mandatory-field></mandatory-field></label> + </div> + + <div class="col-xs-12 plr0px mt5"> + <div class="typeButtonsBox"> + <div class="col-xs-12"> + <span class="radio-inline"> + <input type="radio" name="type" value="updateonly" ng-model="feed[feed.dataTransferType][dataSourceType][dataTransferAction].type"/> + Update Only + </div> + <div class="col-xs-12"> + <span class="radio-inline"> + <input type="radio" name="type" value="allowinsert" ng-model="feed[feed.dataTransferType][dataSourceType][dataTransferAction].type"/> + Allow Insert + </div> + </div> + </div> + </div> + <div class="col-xs-24 plr0px" ng-if="feed.dataTransferType === 'import'"> + <div class="col-xs-24"> + <label class="light">Extract Type<mandatory-field></mandatory-field></label> + </div> + + <div class="col-xs-12 plr0px mt5"> + <div class="typeButtonsBox"> + <div class="col-xs-8"> + <span class="radio-inline"> + <input type="radio" name="type" value="full" + ng-model="feed[feed.dataTransferType][dataSourceType][dataTransferAction].type"/> + Full + </div> + <div class="col-xs-8"> + <span class="radio-inline"> + <input type="radio" name="type" value="incremental" disabled="disabled" + ng-model="feed[feed.dataTransferType][dataSourceType][dataTransferAction].type"/> + Incremental + </div> + </div> + </div> + <div class="col-xs-24"> + <label class="light">Merge Type<mandatory-field></mandatory-field></label> + </div> + + <div class="col-xs-12 plr0px mt5"> + <div class="typeButtonsBox"> + <div class="col-xs-8"> + <span class="radio-inline"> + <input type="radio" name="mergepolicy" value="snapshot" + ng-model="feed[feed.dataTransferType][dataSourceType][dataTransferAction].mergepolicy"/> + Snapshot + </div> + <div class="col-xs-8"> + <span class="radio-inline"> + <input type="radio" name="mergepolicy" value="append" + ng-model="feed[feed.dataTransferType][dataSourceType][dataTransferAction].mergepolicy"/> + Append + </div> + </div> + </div> + </div> + <div class="col-xs-24"> + <label class="light">Columns<mandatory-field></mandatory-field></label> + </div> + + <div class="col-xs-12 mt5 plr0px"> + <div class="typeButtonsBox"> + <div class="col-xs-8"> + <span class="radio-inline"> + <input type="radio" name="fieldsType" value="all" + ng-model="feed[feed.dataTransferType][dataSourceType].columnsType"/> + All + </div> + <div class="col-xs-8"> + <span class="radio-inline"> + <input type="radio" name="fieldsType" value="include" + ng-model="feed[feed.dataTransferType][dataSourceType].columnsType"/> + Include + </div> + <div class="col-xs-8"> + <span class="radio-inline"> + <input type="radio" name="fieldsType" value="exclude" + ng-model="feed[feed.dataTransferType][dataSourceType].columnsType"/> + Exclude + </div> + </div> + </div> + <div class="col-xs-16 mt5" ng-if="feed[feed.dataTransferType][dataSourceType].columnsType === 'include'"> + <input type="text" + ng-required="true" + class="form-control" + ng-model="feed[feed.dataTransferType][dataSourceType].includesCSV" /> + </div> + <div class="col-xs-16 mt5" ng-if="feed[feed.dataTransferType][dataSourceType].columnsType === 'exclude'"> + <input type="text" + ng-required="true" + class="form-control" + ng-model="feed[feed.dataTransferType][dataSourceType].excludesCSV" /> + </div> +</div> http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/html/feed/feedFormGeneralStepTpl.html ---------------------------------------------------------------------- diff --git a/falcon-ui/app/html/feed/feedFormGeneralStepTpl.html b/falcon-ui/app/html/feed/feedFormGeneralStepTpl.html index 2a4f5c4..6af357c 100644 --- a/falcon-ui/app/html/feed/feedFormGeneralStepTpl.html +++ b/falcon-ui/app/html/feed/feedFormGeneralStepTpl.html @@ -19,106 +19,463 @@ --> <form name="feedForm" novalidate id="feedFormGeneralStep"> - <div class="col-xs-24"> - <label class="light">Name</label> - <input type="text" class="form-control" ng-disabled="!cloningMode" ng-keydown="validations.acceptNoSpaces($event)" - check-name="{type:'feed', check:cloningMode}" ng-class="{fakeInvalid:!validations.nameAvailable}" - ng-model="feed.name" ng-required="true" ng-pattern="validations.patterns.name"/> - </div> - <div class="col-xs-24"> - <label class="light">Description</label> - <input type="text" class="form-control" validation-optional-message="{{validations.messages.description}}" - ng-model="feed.description" - ng-pattern="validations.patterns.freeText"/> - </div> + <div class="col-xs-4"> + <label class="light" tooltip="feed.name">Feed Name<mandatory-field></mandatory-field></label> + <input type="text" class="form-control" ng-disabled="editingMode" ng-keydown="validations.acceptNoSpaces($event)" + check-name="{type:'feed', check:!editingMode}" ng-class="{fakeInvalid:!validations.nameAvailable}" + ng-model="feed.name" ng-required="true" ng-pattern="validations.patterns.name"/> + </div> - <div class="col-xs-24"> - <label class="light">Tags</label> - </div> + <div class="col-xs-24"> + <label class="light">Description</label> + </div> + + <div class="col-xs-8"> + <input type="text" class="form-control" + ng-model="feed.description" + ng-pattern="validations.patterns.freeText"/> + </div> - <div class="col-xs-24"> - <div ng-repeat="tag in feed.tags"> - <div class="row dynamic-table-spacer"> - <div class="col-xs-10"> - <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-11"> - <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-3"> - <button type="button" class="btn btn-default btn-xs" ng-click="removeTag($index)" ng-if="$index>0"> - <span class="entypo minus"></span> delete - </button> - </div> + <div class="col-xs-24"> + <label class="light">Tags</label> + </div> + + <div class="col-xs-12"> + <div ng-repeat="tag in feed.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-disabled="xmlPreview.edit" ng-if="!$first || !$last"> + <span class="entypo minus"></span> delete + </button> + <button type="button" class="btn btn-default btn-xs" ng-click="addTag()" ng-disabled="xmlPreview.edit" ng-if="$last"> + <span class="entypo plus"></span> add tag + </button> + </div> </div> </div> - <div class="col-xs-24 dynamic-table-spacer"> - <button type="button" class="btn btn-default btn-xs" ng-click="addTag()"> - <span class="entypo plus"></span> add tag - </button> - </div> + </div> + <div class="col-xs-24"> + <label class="light" tooltip="feed.groups"> + Feed Groups (comma separated) + </label> + </div> - <div class="col-xs-24"> - <label class="light">Groups (comma separated)</label> - <input type="text" class="form-control" validation-optional-message="{{validations.messages.acl.group}}" - ng-pattern="validations.patterns.commaSeparated" - ng-model="feed.groups"/> - </div> + <div class="col-xs-8"> + <input type="text" class="form-control" validation-optional-message="{{validations.messages.acl.group}}" + ng-pattern="validations.patterns.commaSeparated" + ng-model="feed.groups"/> + </div> - <div class="col-xs-24"><h4 class="tittle-in-row">Access Control List</h4></div> - <div class="col-xs-8"> - <label class="light">Owner</label> - <input type="text" class="form-control" validation-message="{{validations.messages.acl.owner}}" - ng-required="true" - ng-pattern="validations.patterns.unixId" - ng-model="feed.ACL.owner"/> - </div> - <div class="col-xs-8"> - <label class="light">Group</label> - <input type="text" class="form-control" validation-message="{{validations.messages.acl.group}}" - ng-required="true" - ng-pattern="validations.patterns.unixId" - ng-model="feed.ACL.group"/> + <div class="col-xs-24"> + <label class="light">Type<mandatory-field></mandatory-field></label> + </div> + + <div class="col-xs-4"> + <select ng-model="feed.dataTransferType" ng-required="true" + class="form-control padding0" ng-change="onTypeChange(feed.dataTransferType)"> + <option value="" disabled selected style='display:none;'>-Select feed type-</option> + <option value="hive">Hive</option> + <option value="hdfs">HDFS</option> + <option value="import">RDBMS Import</option> + <option value="export">RDBMS Export</option> + </select> + </div> + + <div class="col-xs-24" ng-if="feed.dataTransferType !== ''"> + <input type="checkbox" ng-checked="feed.enableFeedReplication" + ng-model="feed.enableFeedReplication" ng-disabled="xmlPreview.edit"/> + <label class="light">Enable Replication</label> + </div> + <div class="col-xs-24 plr0px" ng-if="feed.dataTransferType !== ''"> + <div class="col-xs-12 plr0px"> + <div class="col-xs-24 plr0px clusterBox"> + <h3>Source(s)</h3> + <div ng-if="feed.dataTransferType === 'import'"> + <feed-form-data-source></feed-form-data-source> + </div> + <div ng-if="feed.dataTransferType === 'hdfs' || feed.dataTransferType === 'hive' || feed.dataTransferType === 'export'"> + <div class="col-xs-24 plr0px" ng-if="feed.dataTransferType === 'export'"> + <div class="col-xs-24"> + <label class="light">Location</label> + </div> + <label class="custom-danger" ng-show="feedForm.$submitted && !feed.sourceClusterLocationType"> + You need to select a source location type. + </label> + <div class="col-xs-24 mt5 plr0px"> + <div class="typeButtonsBox"> + <div class="col-xs-6"> + <span class="radio-inline"> + <input type="radio" name="sourceClusterLocationType" ng-required="!feed.sourceClusterLocationType" + value="hdfs" ng-model="feed.sourceClusterLocationType" + ng-checked="feed.dataTransferType === 'hdfs' || feed.sourceClusterLocationType === 'hdfs'"/> + HDFS + </div> + <div class="col-xs-6"> + <span class="radio-inline"> + <input type="radio" name="sourceClusterLocationType" ng-required="!feed.sourceClusterLocationType" + value="hive" ng-model="feed.sourceClusterLocationType" + ng-checked="feed.dataTransferType === 'hive' || feed.sourceClusterLocationType ==='hive'"/> + Hive + </div> + </div> + </div> + </div> + <div id="sourceClusters"> + <div class="col-xs-24 plr0px" ng-repeat="sourceCluster in feed.clusters | filter:{type:'source'}" ng-if="$index > 0"> + <div ng-if="feed.sourceClusterLocationType === 'hive'"> + <feed-form-hive-storage + storage-info="{'clusterStorage':sourceCluster, 'clustersList':clustersList, 'feedClusters':feed.clusters, readOnly:true}" + required="(feed.clusters | filter:{type:'source'}).length > 1" validations="validations"> + </feed-form-hive-storage> + </div> + <div ng-if="feed.sourceClusterLocationType === 'hdfs'"> + <feed-form-hdfs-storage + storage-info="{'clusterStorage':sourceCluster, 'clustersList':clustersList, 'feedClusters':feed.clusters, readOnly:true}" + required="(feed.clusters | filter:{type:'source'}).length > 1" validations="validations"> + </feed-form-hdfs-storage> + </div> + </div> + </div> + + <div class="col-xs-24 plr0px" ng-repeat="sourceCluster in feed.clusters | filter:{type:'source'}" ng-if='$index === 0'> + <div ng-if="feed.sourceClusterLocationType === 'hive'"> + <feed-form-hive-storage storage-info="{'clusterStorage':sourceCluster,'clustersList':clustersList, 'feedClusters':feed.clusters,type:'source',validationMessage:validations.messages.number}" + required="(feed.clusters | filter:{type:'source'}).length === 1" validations="validations" + add="addClusterStorage(value)" show="toggleClusterStorage(value)" + open-date-picker="openDatePicker(event,container)" construct-date="constructDate()"> + </feed-form-hive-storage> + </div> + <div ng-if="feed.sourceClusterLocationType === 'hdfs'"> + <feed-form-hdfs-storage storage-info="{'clusterStorage':sourceCluster,'clustersList':clustersList, 'feedClusters':feed.clusters,type:'source',validationMessage:validations.messages.number}" + required="(feed.clusters | filter:{type:'source'}).length === 1" validations="validations" + add="addClusterStorage(value)" show="toggleClusterStorage(value)" + open-date-picker="openDatePicker(event,container)" construct-date="constructDate()"> + </feed-form-hdfs-storage> + </div> + </div> + </div> + </div> + </div> + + <div class="col-xs-12 plr0px pl5"> + <div class="col-xs-24 plr0px clusterBox" + ng-if="feed.dataTransferType === 'export' || feed.dataTransferType === 'import' || feed.enableFeedReplication"> + <h3>Target(s)</h3> + <div ng-if="feed.dataTransferType === 'export'"> + <feed-form-data-source></feed-form-data-source> + </div> + <div ng-if="feed.dataTransferType === 'import'"> + <div class="col-xs-24 plr0px"> + <div class="col-xs-24"> + <label class="light">Location</label> + </div> + <label class="custom-danger" ng-show="feedForm.$submitted && !feed.targetClusterLocationType"> + You need to select a target location type. + </label> + <div class="col-xs-24 mt5 plr0px"> + <div class="typeButtonsBox"> + <div class="col-xs-6"> + <span class="radio-inline"> + <input type="radio" name="targetClusterLocationType" ng-required="!feed.targetClusterLocationType" + value="hdfs" ng-model="feed.targetClusterLocationType" + ng-checked="feed.dataTransferType === 'hdfs' || feed.targetClusterLocationType === 'hdfs'"/> + HDFS + </div> + <div class="col-xs-6"> + <span class="radio-inline"> + <input type="radio" name="targetClusterLocationType" ng-required="!feed.targetClusterLocationType" + value="hive" ng-model="feed.targetClusterLocationType" + ng-checked="feed.dataTransferType === 'hive' || feed.targetClusterLocationType ==='hive'"/> + Hive + </div> + </div> + </div> + </div> + <div id="sourceClusters"> + <div class="col-xs-24 plr0px" ng-repeat="sourceCluster in feed.clusters | filter:{type:'source'}" ng-if="$index > 0"> + <div ng-if="feed.targetClusterLocationType === 'hive'"> + <feed-form-hive-storage + storage-info="{'clusterStorage':sourceCluster, 'clustersList':clustersList, 'feedClusters':feed.clusters, readOnly:true}" + required="(feed.clusters | filter:{type:'source'}).length > 1" validations="validations"> + </feed-form-hive-storage> + </div> + <div ng-if="feed.targetClusterLocationType === 'hdfs'"> + <feed-form-hdfs-storage + storage-info="{'clusterStorage':sourceCluster, 'clustersList':clustersList, 'feedClusters':feed.clusters, readOnly:true}" + required="(feed.clusters | filter:{type:'source'}).length > 1" validations="validations"> + </feed-form-hdfs-storage> + </div> + </div> + </div> + + <div class="col-xs-24 plr0px" ng-repeat="sourceCluster in feed.clusters | filter:{type:'source'}" ng-if='$index === 0'> + <div ng-if="feed.targetClusterLocationType === 'hive'"> + <feed-form-hive-storage storage-info="{'clusterStorage':sourceCluster,'clustersList':clustersList, 'feedClusters':feed.clusters,type:'source',validationMessage:validations.messages.number}" + required="(feed.clusters | filter:{type:'source'}).length === 1" validations="validations" + add="addClusterStorage(value)" show="toggleClusterStorage(value)" + open-date-picker="openDatePicker(event,container)" construct-date="constructDate()"> + </feed-form-hive-storage> + </div> + <div ng-if="feed.targetClusterLocationType === 'hdfs'"> + <feed-form-hdfs-storage storage-info="{'clusterStorage':sourceCluster,'clustersList':clustersList, 'feedClusters':feed.clusters,type:'source',validationMessage:validations.messages.number}" + required="(feed.clusters | filter:{type:'source'}).length === 1" validations="validations" + add="addClusterStorage(value)" show="toggleClusterStorage(value)" + open-date-picker="openDatePicker(event,container)" construct-date="constructDate()"> + </feed-form-hdfs-storage> + </div> + </div> + </div> + + <div ng-if="feed.enableFeedReplication && (feed.dataTransferType === 'hdfs' || feed.dataTransferType === 'hive')"> + <div id="targetClusters"> + <div class="col-xs-24 plr0px" ng-repeat="targetCluster in feed.clusters | filter:{type:'target'}" ng-if='$index > 0'> + <div ng-if="feed.targetClusterLocationType === 'hive'"> + <feed-form-hive-storage + storage-info="{'clusterStorage':targetCluster, 'clustersList':clustersList, 'feedClusters':feed.clusters, readOnly:true}" + required="feed.enableFeedReplication && (feed.clusters | filter:{type:'target'}).length > 1" + validations="validations"> + </feed-form-hive-storage> + </div> + <div ng-if="feed.targetClusterLocationType === 'hdfs'"> + <feed-form-hdfs-storage + storage-info="{'clusterStorage':targetCluster, 'clustersList':clustersList, 'feedClusters':feed.clusters, readOnly:true}" + required="feed.enableFeedReplication && (feed.clusters | filter:{type:'target'}).length > 1" + validations="validations"> + </feed-form-hdfs-storage> + </div> + </div> + </div> + + <div class="col-xs-24 plr0px" ng-repeat="targetCluster in feed.clusters | filter:{type:'target'}" ng-if='$index === 0'> + <div ng-if="feed.targetClusterLocationType === 'hive'"> + <feed-form-hive-storage + storage-info="{'clusterStorage':targetCluster, 'clustersList':clustersList, 'feedClusters':feed.clusters, type:'target'}" + validations="validations" add="addClusterStorage(value)" + required="feed.enableFeedReplication && (feed.clusters | filter:{type:'target'}).length === 1" + show="toggleClusterStorage(value)" open-date-picker="openDatePicker(event,container)" + construct-date="constructDate()"> + </feed-form-hive-storage> + </div> + <div ng-if="feed.targetClusterLocationType === 'hdfs'"> + <feed-form-hdfs-storage + storage-info="{'clusterStorage':targetCluster, 'clustersList':clustersList, 'feedClusters':feed.clusters,type:'target'}" + validations="validations" add="addClusterStorage(value)" + required="feed.enableFeedReplication && (feed.clusters | filter:{type:'target'}).length === 1" + show="toggleClusterStorage(value)" open-date-picker="openDatePicker(event,container)" + construct-date="constructDate()"> + </feed-form-hdfs-storage> + </div> + </div> + </div> + </div> + </div> + </div> + + <div class="col-xs-24 plr0px" ng-if="feed.dataTransferType !== ''"> + <div class="col-xs-12 plr0px clusterBoxEndLine"> </div> - <div class="col-xs-8"> - <label class="light">Permissions</label> - <input type="text" class="form-control" validation-message="{{validations.messages.acl.permission}}" - ng-required="true" - ng-pattern="validations.patterns.unixPermissions" - ng-model="feed.ACL.permission"/> + <div class="col-xs-12 plr0px pl5" + ng-if="feed.dataTransferType === 'export' || feed.dataTransferType === 'import' || feed.enableFeedReplication"> + <div class="col-xs-24 plr0px clusterBoxEndLine"> + </div> </div> + </div> + + <div class="col-xs-24 frequencyBox plr0px"> + <div class="col-xs-24"> + <label>Frequency</label> + </div> + <div class="col-xs-24"> + <label class="light">Repeat Every<mandatory-field></mandatory-field></label> + </div> + <div class="col-xs-24 plr0px"> + <div class="col-xs-2"> + <input type="text" + name="frequencyQuantity" + ng-model="feed.frequency.quantity" + ng-pattern="validations.patterns.twoDigits" + ng-keydown="validations.acceptOnlyNumber($event)" + ng-keyup="checkMininumFrequency(feed.frequency.quantity, feed.frequency.unit, feedForm.frequencyQuantity)" + class="form-control" + ng-required="true" + validation-message="{{validations.messages.number}}" /> + </div> + <div class="col-xs-6"> + <select ng-model="feed.frequency.unit" class="form-control padding0" ng-required="true" + ng-change="checkMininumFrequency(feed.frequency.quantity, feed.frequency.unit, feedForm.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> + <div class="col-xs-24 custom-danger" ng-if="!isFrequencyValid">{{validations.messages.frequency.minimum}}</div> + + <div class="col-xs-24"> + <label class="light">Timezone<mandatory-field></mandatory-field></label> + </div> + <div class="col-xs-8"> + <time-zone-select ng-model="feed.timezone"></time-zone-select> + </div> + </div> + + <div class="col-xs-24 advancedOption" ng-click="expandOptions = !expandOptions" id="feedAdvancedOption"> + <label class="mt15 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 class="col-xs-24"><h4 class="tittle-in-row">Schema</h4></div> - <div class="col-xs-12"> - <label class="light">Location</label> + <div id="advancedOptionsBox" class="col-xs-24 plr0px" ng-class="{expanded:expandOptions}"> + <div class="col-xs-24"><label>Job Details</label></div> + <div class="col-xs-24 plr0px"> + <div ng-repeat="property in feed.properties track by $index"> + <div ng-if="property.key === 'queueName'"> + <div class="col-xs-4"> + <label class="light">Queue Name</label> + <input type="text" class="form-control" + ng-model="property.value" /> + </div> + </div> + <div ng-if="property.key === 'jobPriority'"> + <div class="col-xs-4"> + <label class="light">Job Priority</label> + <select ng-model="property.value" class="form-control padding0"> + <option value="" disabled selected style='display:none;'>-Select job-</option> + <option value="VERY_HIGH">Very high</option> + <option value="HIGH">High</option> + <option value="NORMAL">Normal</option> + <option value="LOW">Low</option> + <option value="VERY_LOW">Very Low</option> + </select> + </div> + </div> + </div> + </div> + + <div class="col-xs-24 plr0px"> + <div class="col-xs-4"> + <label class="col-xs-24 light plr0px">Late Arrival Cutoff</label> + <input type="text" class="col-xs-4" ng-keydown="validations.acceptOnlyNumber($event)" + ng-model="feed.lateArrival.cutOff.quantity" + ng-pattern="validations.patterns.twoDigits"/> + <select + ng-model="feed.lateArrival.cutOff.unit" class="col-xs-offset-1 col-xs-19"> + <option value="" disabled selected style='display:none;'>-Select unit-</option> + <option 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-4"> + <label class="light">Availability Flag</label> + <input type="text" class="form-control" + ng-model="feed.availabilityFlag" + validation-optional-message="{{validations.messages.value}}" + ng-pattern="validations.patterns.alpha"> + </div> + </div> + + <label class="col-xs-24">Performance & Throttling - Distributed Copy</label> + + <div class="col-xs-24 plr0px"> + <div ng-repeat="property in feed.properties track by $index"> + <div ng-if="property.key === 'mapBandwidthKB'"> + <div class="col-xs-4"> + <label class="light">Max Bandwidth</label> + <input type="text" class="form-control" + ng-model="property.value"> + </div> + </div> + <div ng-if="property.key === 'maxMaps'"> + <div class="col-xs-4"> + <label class="light">Max map jobs</label> + <input type="text" class="form-control" + ng-model="property.value"> + </div> + </div> + </div> + </div> + + <div class="col-xs-24 plr0px"> + <div ng-repeat="property in feed.properties track by $index"> + <div ng-if="property.key === 'parallel'"> + <div class="col-xs-4"> + <label class="col-xs-24 light plr0px">Parallel</label> + <input type="text" class="form-control" + ng-model="property.value"> + </div> + </div> + </div> + </div> + + <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="feed.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="feed.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="feed.ACL.permission"></acl-permissions> + </div> + </div> + </div> + <div class="col-xs-24"><label>Feed Schema</label></div> + <div class="col-xs-8"> + <label class="light" tooltip="feed.schema.location">Location<mandatory-field></mandatory-field></label> <input type="text" class="form-control" validation-message="{{validations.messages.location}}" ng-maxlength="200" ng-pattern="validations.patterns.osPath" - ng-model="feed.schema.location" - ng-required="true"/> + ng-model="feed.schema.location"/> </div> - <div class="col-xs-12"> - <label class="light">Provider</label> + <div class="col-xs-8"> + <label class="light" tooltip="feed.schema.provider">Provider<mandatory-field></mandatory-field></label> <input type="text" class="form-control" validation-message="{{validations.messages.provider}}" ng-pattern="validations.patterns.osPath" - ng-model="feed.schema.provider" - ng-required="true"/> + ng-model="feed.schema.provider"/> </div> + <div class="col-xs-8"></div> + </div> - - <div class="col-xs-24 mt20"> - <button id="feed.step1" class="btn nextBtn col-xs-6 pull-right" - ng-disabled="buttonSpinners.show" - ng-click="goNext(feedForm.$invalid, 'forms.feed.properties')"> - Next <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.show" /> - </button> - <a class="pull-right" ui-sref="main"> - Cancel - </a> + <div class="col-xs-24 pb15px mt35"> + <div class="pull-right"> + <a class="btn cnclBtn" ui-sref="main"> + CANCEL + </a> + <button id="feed.step1" class="btn nextBtn" + ng-disabled="buttonSpinners.show" + ng-click="goNext(feedForm.$invalid)" + scroll-to-error> + NEXT <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.show" /> + </button> + <button id="feed.step5" class="btn nextBtn" ng-click="saveEntity(feedForm.$invalid)" + ng-disabled="feedForm.$invalid || buttonSpinners.saveShow"> + SAVE <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.saveShow" /> + </button> + </div> </div> -</form> \ No newline at end of file +</form> http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/html/feed/feedFormLocationStepTpl.html ---------------------------------------------------------------------- diff --git a/falcon-ui/app/html/feed/feedFormLocationStepTpl.html b/falcon-ui/app/html/feed/feedFormLocationStepTpl.html index 7c7355e..aefe7c0 100644 --- a/falcon-ui/app/html/feed/feedFormLocationStepTpl.html +++ b/falcon-ui/app/html/feed/feedFormLocationStepTpl.html @@ -20,9 +20,11 @@ <form name="feedForm" novalidate id="feedFormLocationStep"> <div class="col-xs-24 locationStep"> <div class="row"> - <div class="col-xs-24 feedLocationNavBox"> - <h4 class="col-xs-10" ng-show="feed.storage.fileSystem.active">Default Storage type </h4> - <h4 class="col-xs-10" ng-show="feed.storage.catalog.active"> Storage type </h4> + <div class="col-xs-24 feedLocationNavBox plr0px mt15"> + <span class="col-xs-10" ng-show="feed.storage.fileSystem.active" + tooltip="feed.location.storageType">Default Storage Type</span> + <span class="col-xs-10" ng-show="feed.storage.catalog.active" + tooltip="feed.location.storageType">Storage Type</span> <div class="col-xs-14 feedLocationNav"> <button type="button" @@ -41,13 +43,13 @@ </div> <div class="clearfix"></div> </div> - <h4 class="col-xs-12">Default Location</h4> + <div class="col-xs-24"><label class="mt15">DEFAULT LOCATION</label></div> <div class="col-xs-24"> <div ng-show="feed.storage.fileSystem.active" ng-repeat="location in feed.storage.fileSystem.locations" class="row"> <div class="col-xs-8"> - <label class="light">{{capitalize(location.type)}} path</label> + <label class="light">{{capitalize(location.type)}} Path<mandatory-field></mandatory-field></label> </div> <div class="pull-right" ng-show="location.focused"> <label class="light">add</label> @@ -59,10 +61,10 @@ <div class="clearfix hidden-md"></div> <div class="col-xs-24"> <input type="text" class="form-control" validation-message="{{validations.messages.path}}" - ng-required="true" + ng-required="feed.storage.fileSystem.active" ng-model="location.path" ng-pattern="validations.patterns.osPath" - ng-class="{firstInput: $index === 0}" + focus-if="feed.storage.fileSystem.active && $index === 0" ng-focus="location.focused = true"/> </div> </div> @@ -71,12 +73,12 @@ <div ng-show="feed.storage.catalog.active"> <div class="col-xs-8"> - <label class="light">Table uri</label> + <label class="light">Table uri<mandatory-field></mandatory-field></label> </div> <div class="pull-right" ng-show="feed.storage.catalog.catalogTable.focused"> <label class="light">add</label> - <label ng-repeat="timeVariable in ['${YEAR}', '${MONTH}', '${DAY} ', '${HOUR}']" + <label ng-repeat="timeVariable in ['${YEAR}', '${MONTH}', '${DAY}', '${HOUR}']" ng-click="appendVariable(timeVariable, feed.storage.catalog.catalogTable, 'uri')"> {{timeVariable}} </label> @@ -87,27 +89,27 @@ ng-model="feed.storage.catalog.catalogTable.uri" ng-pattern="validations.patterns.tableUri" ng-required="feed.storage.catalog.active" validation-message="{{validations.messages.path}}" + focus-if="feed.storage.catalog.active" ng-focus="feed.storage.catalog.catalogTable.focused = true"/> </div> </div> </div> - - <div class="row"> - <div class="col-xs-24 mt20"> - <button type="button" - id="feed.backToStep2" class="btn prevBtn" - ng-click="goBack('forms.feed.properties')" - ng-disabled="buttonSpinners.backShow"> - Previous <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.backShow" /> - </button> - <button id="feed.step3" class="btn nextBtn pull-right" ng-click="goNext(feedForm.$invalid, 'forms.feed.clusters')" > - 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 mt35 pb15px pl0px"> + <button type="button" + id="feed.backToStep2" 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 id="feed.step3" class="btn nextBtn" ng-click="goNext(feedForm.$invalid)" scroll-to-error> + NEXT <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.show" /> + </button> </div> </div> </div> -</form> \ No newline at end of file +</form> http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/html/feed/feedFormPropertiesStepTpl.html ---------------------------------------------------------------------- diff --git a/falcon-ui/app/html/feed/feedFormPropertiesStepTpl.html b/falcon-ui/app/html/feed/feedFormPropertiesStepTpl.html index 2e4cfd1..e2a4a44 100644 --- a/falcon-ui/app/html/feed/feedFormPropertiesStepTpl.html +++ b/falcon-ui/app/html/feed/feedFormPropertiesStepTpl.html @@ -19,143 +19,132 @@ --> <form name="feedForm" novalidate id="feedFormPropertiesStep"> - <h5 class="col-xs-24 mb10">Timing</h5> - - <div class="col-xs-9 inlineInputsGroup"> - <div class="light">Frequency</div> - <span>Every</span> - <input type="text" class="form-control" validation-message="{{validations.messages.number}}" + <div class="col-xs-24"> + <label class="light" tooltip="feed.properties.frequency"> + Frequency Every<mandatory-field></mandatory-field> + </label> + <div class="row dynamic-table-spacer"> + <div class="col-xs-10"> + <input type="text" class="form-control" validation-message="{{validations.messages.number}}" ng-model="feed.frequency.quantity" autofocus ng-required="true" ng-keydown="validations.acceptOnlyNumber($event)" ng-pattern="validations.patterns.twoDigits"/> - - <select - ng-model="feed.frequency.unit" - ng-required="true"> - <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-9 inlineInputsGroup"> - <div class="light"><input type="checkbox" ng-model="feed.lateArrival.active" />Late Arrival</div> - <span>Up to</span> - - <input type="text" class="form-control" ng-keydown="validations.acceptOnlyNumber($event)" - ng-model="feed.lateArrival.cutOff.quantity" - ng-disabled="!feed.lateArrival.active" - ng-pattern="validations.patterns.twoDigits" - ng-required="feed.lateArrival.active"/> - - <select - ng-model="feed.lateArrival.cutOff.unit" ng-disabled="!feed.lateArrival.active" - ng-required="feed.lateArrival.active"> - <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-6 inlineInputsGroup"> - <div class="light">Availability Flag</div> - <input type="text" id="availInput" class="form-control" - ng-model="feed.availabilityFlag" - ng-pattern="validations.patterns.alpha"> - </div> - </div> - - <div class="col-xs-24"> - <div class="row mt20"> - <label class="col-xs-5 light">Timezone</label> - <time-zone-select ng-model="feed.timezone" class="col-xs-19"></time-zone-select> - - <h5 class="col-xs-24">Properties</h5> - - <div class="col-xs-5"> - <label class="light">Name</label> - </div> - <div class="col-xs-19"> - <label class="light">Value</label> - </div> - <div class="col-xs-24" id="feedPropertiesBox"> - <div ng-repeat="property in feed.properties" class="row"> - - <label class="col-xs-5">{{property.key}}</label> - - <div class="col-xs-19" ng-if="property.key !== 'timeout' && property.key !== 'jobPriority'"> - <input type="text" class="form-control" placeholder="{{propPlaceholders[property.key]}}" - ng-model="property.value" validation-optional-message="{{validations.messages.value}}" - ng-pattern="validations.patterns.alpha"/> </div> - <div class="col-xs-19 inlineInputsGroup" ng-if="property.key === 'timeout'"> - At - <input type="text" class="form-control" ng-keydown="validations.acceptOnlyNumber($event)" - ng-model="property.value.quantity" - ng-pattern="validations.patterns.twoDigits"/> + <div class="col-xs-11"> <select - ng-model="property.value.unit"> - <option value="" disabled selected style='display:none;'>-Select timeout-</option> - <option value="minutes">minutes</option> - <option value="hours">hours</option> - <option value="days">days</option> - <option value="months">months</option> - </select> + ng-model="feed.frequency.unit" + ng-required="true"> + <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-19" ng-if="property.key === 'jobPriority'"> - <select ng-model="property.value" class="form-control padding0"> - <option value="" disabled selected style='display:none;'>-Select job-</option> - <option value="VERY_HIGH">Very high</option> - <option value="HIGH">High</option> - <option value="NORMAL">Normal</option> - <option value="LOW">Low</option> - <option value="VERY_LOW">Very Low</option> - </select> + <div class="col-xs-3"> </div> </div> - </div> - <div class="col-xs-24"> - <div ng-repeat="property in feed.customProperties" class="row"> - <div class="col-xs-5 mt10"> - <input type="text" class="form-control" placeholder="key" - ng-model="property.key" validation-optional-message="{{validations.messages.key}}" - ng-pattern="validations.patterns.alpha" - ng-required="property.value"/> - </div> - - <div class="col-xs-15 mt10"> - <input type="text" class="form-control" placeholder="value" - ng-model="property.value" validation-optional-message="{{validations.messages.value}}" - ng-pattern="validations.patterns.alpha" - ng-required="property.key"/> + </div> + <div class="col-xs-24"> + <input type="checkbox" ng-model="feed.lateArrival.active" class="labelCheckBox" /> + <label class="light" tooltip="feed.properties.lateArrival"> + Late Arrival Upto<mandatory-field></mandatory-field> + </label> + <div class="row dynamic-table-spacer"> + <div class="col-xs-10"> + <input type="text" class="form-control" ng-keydown="validations.acceptOnlyNumber($event)" + ng-model="feed.lateArrival.cutOff.quantity" + ng-disabled="!feed.lateArrival.active" + ng-pattern="validations.patterns.twoDigits" + ng-required="feed.lateArrival.active"/> </div> - <div class="col-xs-4 mt10"> - <button type="button" class="btn btn-default btn-xs mt1" ng-click="removeCustomProperty($index)" ng-if="$index>0"> - <span class="entypo minus"></span> delete - </button> + <div class="col-xs-11"> + <select + ng-model="feed.lateArrival.cutOff.unit" ng-disabled="!feed.lateArrival.active" + ng-required="feed.lateArrival.active"> + <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> + <div class="col-xs-24"> + <label class="light" tooltip="feed.properties.availabilityIndicator"> + Availability Indicator<mandatory-field></mandatory-field> + </label> + <div class="row dynamic-table-spacer"> + <div class="col-xs-10"> + <input type="text" id="availInput" class="form-control" ng-model="feed.availabilityFlag" + ng-pattern="validations.patterns.alpha" + validation-message="{{validations.messages.availabilityFlag}}" + ng-required="true"> + </div> </div> - </div> - <div class="col-xs-24 mt10"> - <button type="button" class="btn btn-default btn-xs" ng-click="addCustomProperty()"> - <span class="entypo plus"></span> add property - </button> - </div> </div> - </div> - <div class="col-xs-24 mt20"> - <button id="feed.backToStep1" class="btn prevBtn" type="button" - ng-click="goBack('forms.feed.general')" - ng-disabled="buttonSpinners.backShow"> - Previous <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.backShow" /> - </button> - <button id="feed.step2" class="btn nextBtn pull-right" ng-click="goNext(feedForm.$invalid, 'forms.feed.location')"> - Next <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.show" /> - </button> - <a class="pull-right" ui-sref="main"> - Cancel - </a> - </div> -</form> \ No newline at end of file + <div class="col-xs-24"> + <label class="light" tooltip="feed.properties.timezone">Timezone<mandatory-field></mandatory-field></label> + <div class="row dynamic-table-spacer"> + <div class="col-xs-24"> + <time-zone-select ng-model="feed.timezone" required="true"></time-zone-select> + </div> + </div> + </div> + <div class="col-xs-24"><label class="mt15">PROPERTIES</label></div> + </div> + <div class="col-xs-24 plr0px mt10"> + <table class="table properties"> + <thead> + <tr> + <th class="no-border-bottom col-xs-4">Name</th> + <th class="no-border-bottom col-xs-20">Value</th> + </tr> + </thead> + <tbody> + <tr ng-repeat="property in feed.properties" class=""> + <td class="no-border-top font11px">{{feedPropertiesLabels[property.key]}}</td> + <td class="no-border-top"><div ng-if="property.key !== 'timeout' && property.key !== 'jobPriority'"> + <input type="text" class="form-control" placeholder="{{propPlaceholders[property.key]}}" ng-model="property.value" validation-optional-message="{{validations.messages.value}}" ng-pattern="validations.patterns.alpha"> + </div> + <div class="col-xs-24 plr0px" ng-if="property.key === 'timeout'"> + <span class="col-xs-1 plr0px pt5px pb5px">at</span> + <input type="text" class="col-xs-2 feedFormInputBorder" ng-keydown="validations.acceptOnlyNumber($event)" ng-model="property.value.quantity" ng-pattern="validations.patterns.twoDigits"> + <div class="col-xs-1"></div> + <select ng-model="property.value.unit" class="col-xs-4"> + <option value="" disabled="" selected="" style="display:none;">-Select timeout-</option> + <option value="minutes">minutes</option> + <option value="hours">hours</option> + <option value="days">days</option> + <option value="months">months</option> + </select> + </div> + <div class="" ng-if="property.key === 'jobPriority'"> + <select ng-model="property.value" class="form-control padding0"> + <option value="" disabled="" selected="" style="display:none;">-Select job-</option> + <option value="VERY_HIGH">Very high</option> + <option value="HIGH">High</option> + <option value="NORMAL">Normal</option> + <option value="LOW">Low</option> + <option value="VERY_LOW">Very Low</option> + </select> + </div> + </td> + </tr> + </tbody> + </table> + </div> + <div class="col-xs-24 mt35 pb15px plr0px"> + <button id="feed.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="feed.step2" class="btn nextBtn" ng-click="goNext(feedForm.$invalid)" scroll-to-error> + NEXT <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.show"> + </button> + </div> + </div> +</form>
