portainer/app/edge/components/group-form/groupForm.html

99 lines
3.7 KiB
HTML

<form class="form-horizontal" name="EdgeGroupForm" ng-submit="$ctrl.handleSubmit()">
<div class="form-group">
<label for="group_name" class="col-sm-3 col-lg-2 control-label required text-left"> Name </label>
<div class="col-sm-9 col-lg-10">
<input
type="text"
class="form-control"
id="group_name"
name="group_name"
ng-model="$ctrl.model.Name"
required
auto-focus
data-cy="edgeGroupCreate-groupNameInput"
placeholder="e.g. mygroup"
/>
<div class="help-block" ng-show="EdgeGroupForm.group_name.$invalid">
<div class="small text-warning">
<div ng-messages="EdgeGroupForm.group_name.$error">
<p ng-message="required" class="vertical-center"> <pr-icon icon="'alert-triangle'" class-name="'icon-sm icon-warning'"></pr-icon> This field is required. </p>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12 form-section-title"> Group type </div>
<box-selector slim="true" value="$ctrl.model.Dynamic" on-change="($ctrl.onChangeDynamic)" options="$ctrl.groupTypeOptions"></box-selector>
<!-- StaticGroup -->
<div ng-if="!$ctrl.model.Dynamic">
<div ng-if="!$ctrl.noEndpoints">
<!-- environments -->
<div class="col-sm-12 form-section-title"> Associated environments </div>
<div class="form-group">
<associated-endpoints-selector
endpoint-ids="$ctrl.model.Endpoints"
tags="$ctrl.tags"
groups="$ctrl.groups"
has-backend-pagination="true"
on-associate="($ctrl.associateEndpoint)"
on-dissociate="($ctrl.dissociateEndpoint)"
></associated-endpoints-selector>
</div>
</div>
<div class="form-group" ng-if="$ctrl.noEndpoints">
<div class="col-sm-12 small text-muted">
No Edge environments are available. Head over to the <a ui-sref="portainer.endpoints">Environments view</a> to add environments.
</div>
</div>
</div>
<!-- !StaticGroup -->
<!-- DynamicGroup -->
<div ng-if="$ctrl.model.Dynamic">
<div class="col-sm-12 form-section-title"> Tags </div>
<box-selector slim="true" value="$ctrl.model.PartialMatch" on-change="($ctrl.onChangePartialMatch)" options="$ctrl.tagOptions"></box-selector>
<tag-selector ng-if="$ctrl.model.TagIds" value="$ctrl.model.TagIds" on-change="($ctrl.onChangeTags)"> </tag-selector>
<div class="table-in-row">
<group-association-table
loaded="$ctrl.loaded"
page-type="$ctrl.pageType"
table-type="associated"
retrieve-page="$ctrl.getDynamicEndpoints"
dataset="$ctrl.endpoints.value"
pagination-state="$ctrl.endpoints.state"
empty-dataset-message="No associated endpoint"
tags="$ctrl.tags"
show-tags="true"
groups="$ctrl.groups"
show-groups="true"
has-backend-pagination="true"
title="Associated environments by tags"
></group-association-table>
</div>
</div>
<!-- !DynamicGroup -->
<!-- actions -->
<div class="col-sm-12 form-section-title"> Actions </div>
<div class="form-group">
<div class="col-sm-12">
<button
type="submit"
class="btn btn-primary btn-sm"
ng-disabled="$ctrl.actionInProgress || !EdgeGroupForm.$valid || (!$ctrl.model.Dynamic && !$ctrl.model.Endpoints.length) || ($ctrl.model.Dynamic && !$ctrl.model.TagIds.length)"
button-spinner="$ctrl.actionInProgress"
data-cy="edgeGroupCreate-addGroupButton"
>
<span ng-hide="$ctrl.actionInProgress">{{ $ctrl.formActionLabel }}</span>
<span ng-show="$ctrl.actionInProgress">In progress...</span>
</button>
</div>
</div>
</form>