github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

feat(ui): namespace details UI improvements EE-3480 (#7335)

pull/7424/head
Dakota Walsh 2022-08-04 14:45:44 +12:00 committed by GitHub
parent aa0f1221de
commit d28030abea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 184 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
app/kubernetes/components/datatables/resource-pool-applications-datatable/resourcePoolApplicationsDatatable.html
View File

@ -2,13 +2,25 @@
<rd-widget> <rd-widget>
<rd-widget-body classes="no-padding"> <rd-widget-body classes="no-padding">
<div class="toolBar"> <div class="toolBar">
<div class="toolBarTitle"> <div class="toolBarTitle vertical-center">
<i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px"></i> <pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon>
{{ $ctrl.titleText }} {{ $ctrl.titleText }}
</div> </div>
<div class="searchBar vertical-center">
<pr-icon icon="'search'" feather="true" class="searchIcon"></pr-icon>
<input
type="text"
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search for an application"
auto-focus
ng-model-options="{ debounce: 300 }"
/>
</div>
<div ng-if="$ctrl.refreshCallback" class="settings"> <div ng-if="$ctrl.refreshCallback" class="settings">
<span class="setting" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open"> <span class="setting" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
<span uib-dropdown-toggle> <i class="fa fa-cog" aria-hidden="true"></i> Table settings </span> <span uib-dropdown-toggle><pr-icon icon="'more-vertical'" feather="true"></pr-icon></span>
<div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu> <div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
<div class="tableMenu"> <div class="tableMenu">
<div class="menuHeader"> Table settings </div> <div class="menuHeader"> Table settings </div>
@ -28,7 +40,7 @@
<option value="300">5min</option> <option value="300">5min</option>
</select> </select>
<span> <span>
<i id="refreshRateChange" class="fa fa-check green-icon" aria-hidden="true" style="margin-top: 7px; display: none"></i> <pr-icon id="refreshRateChange" style="display: none" icon="'check'" mode="'success'" feather="true"></pr-icon>
</span> </span>
</div> </div>
</div> </div>
@ -41,56 +53,54 @@
</span> </span>
</div> </div>
</div> </div>
<div class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input
type="text"
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search..."
auto-focus
ng-model-options="{ debounce: 300 }"
/>
</div>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover nowrap-cells"> <table class="table table-hover nowrap-cells">
<thead> <thead>
<tr> <tr>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('Name')"> <table-column-header
Name col-title="'Name'"
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></i> can-sort="true"
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></i> is-sorted="$ctrl.state.orderBy === 'Name'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Name')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('StackName')"> <table-column-header
Stack col-title="'StackName'"
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'StackName' && !$ctrl.state.reverseOrder"></i> can-sort="true"
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'StackName' && $ctrl.state.reverseOrder"></i> is-sorted="$ctrl.state.orderBy === 'StackName'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'StackName' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('StackName')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('Image')"> <table-column-header
Image col-title="'Image'"
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Image' && !$ctrl.state.reverseOrder"></i> can-sort="true"
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Image' && $ctrl.state.reverseOrder"></i> is-sorted="$ctrl.state.orderBy === 'Image'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'Image' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Image')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('CPU')"> <table-column-header
CPU reservation col-title="'CPU'"
<i class="fa fa-sort-numeric-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'CPU' && !$ctrl.state.reverseOrder"></i> can-sort="true"
<i class="fa fa-sort-numeric-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'CPU' && $ctrl.state.reverseOrder"></i> is-sorted="$ctrl.state.orderBy === 'CPU'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'CPU' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('CPU')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('Memory')"> <table-column-header
Memory reservation col-title="'Memory'"
<i class="fa fa-sort-numeric-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Memory' && !$ctrl.state.reverseOrder"></i> can-sort="true"
<i class="fa fa-sort-numeric-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Memory' && $ctrl.state.reverseOrder"></i> is-sorted="$ctrl.state.orderBy === 'Memory'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'Memory' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Memory')"
></table-column-header>
</th> </th>
</tr> </tr>
</thead> </thead>

2
app/kubernetes/components/yaml-inspector/yamlInspector.html
View File

@ -1,6 +1,6 @@
<div> <div>
<code-editor identifier="application-details-yaml" read-only="true" value="$ctrl.data"></code-editor> <code-editor identifier="application-details-yaml" read-only="true" value="$ctrl.data"></code-editor>
<div class="py-5"> <div class="p-5">
<span class="btn btn-light btn-sm" ng-click="$ctrl.copyYAML()"> <span class="btn btn-light btn-sm" ng-click="$ctrl.copyYAML()">
<pr-icon class="vertical-center" icon="'copy'" feather="true"></pr-icon> <pr-icon class="vertical-center" icon="'copy'" feather="true"></pr-icon>
Copy to clipboard Copy to clipboard

4
app/kubernetes/views/resource-pools/create/createResourcePool.html
View File

@ -269,7 +269,7 @@
/> />
</div> </div>
<div class="col-sm-1 input-group input-group-sm" ng-if="$index > 0"> <div class="col-sm-1 input-group input-group-sm" ng-if="$index > 0">
<button class="btn btn-md btn-light btn-only-icon !h-[30px]" type="button" ng-click="$ctrl.removeHostname(ic, $index)"> <button class="btn btn-md btn-dangerlight btn-only-icon !h-[30px]" type="button" ng-click="$ctrl.removeHostname(ic, $index)">
<pr-icon icon="'trash-2'" size="'md'" feather="true"></pr-icon> <pr-icon icon="'trash-2'" size="'md'" feather="true"></pr-icon>
</button> </button>
</div> </div>
@ -376,7 +376,7 @@
</div> </div>
<div class="input-group input-group-sm col-sm-1"> <div class="input-group input-group-sm col-sm-1">
<button <button
class="btn btn-sm btn-light btn-only-icon !h-[30px]" class="btn btn-sm btn-dangerlight btn-only-icon !h-[30px]"
type="button" type="button"
ng-click="$ctrl.removeAnnotation(ic, $index)" ng-click="$ctrl.removeAnnotation(ic, $index)"
data-cy="namespaceCreate-deleteAnnotationButton{{ ic.IngressClass.Name }}" data-cy="namespaceCreate-deleteAnnotationButton{{ ic.IngressClass.Name }}"

65
app/kubernetes/views/resource-pools/edit/components/ingresses-datatable/template.html
View File

@ -2,10 +2,25 @@
<rd-widget> <rd-widget>
<rd-widget-body classes="no-padding"> <rd-widget-body classes="no-padding">
<div class="toolBar"> <div class="toolBar">
<div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px"></i> {{ $ctrl.titleText }} </div> <div class="toolBarTitle vertical-center">
<pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'"></pr-icon>
{{ $ctrl.titleText }}
</div>
<div class="searchBar vertical-center">
<pr-icon icon="'search'" feather="true" class="searchIcon"></pr-icon>
<input
type="text"
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search for an ingress..."
auto-focus
ng-model-options="{ debounce: 300 }"
/>
</div>
<div class="settings"> <div class="settings">
<span class="setting" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open"> <span class="setting" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
<span uib-dropdown-toggle><i class="fa fa-cog" aria-hidden="true"></i> Table settings</span> <span uib-dropdown-toggle><pr-icon icon="'more-vertical'" feather="true"></pr-icon></span>
<div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu> <div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
<div class="tableMenu"> <div class="tableMenu">
<div class="menuHeader"> Table settings </div> <div class="menuHeader"> Table settings </div>
@ -25,7 +40,7 @@
<option value="300">5min</option> <option value="300">5min</option>
</select> </select>
<span> <span>
<i id="refreshRateChange" class="fa fa-check green-icon" aria-hidden="true" style="margin-top: 7px; display: none"></i> <pr-icon id="refreshRateChange" style="display: none" icon="'check'" mode="'success'" feather="true"></pr-icon>
</span> </span>
</div> </div>
</div> </div>
@ -38,31 +53,24 @@
</span> </span>
</div> </div>
</div> </div>
<div class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input
type="text"
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search..."
auto-focus
ng-model-options="{ debounce: 300 }"
/>
</div>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover nowrap-cells"> <table class="table table-hover nowrap-cells">
<thead> <thead>
<tr> <tr>
<th ng-if="$ctrl.hasExpandableItems()" class="datatable-wide dropdown">
<div class="cursor-pointer vertical-center" ng-click="$ctrl.expandAll()">
<pr-icon ng-if="$ctrl.state.expandAll" icon="'chevron-down'" feather="true"></pr-icon>
<pr-icon ng-if="!$ctrl.state.expandAll" icon="'chevron-right'" feather="true"></pr-icon>
</div>
</th>
<th> <th>
<a ng-click="$ctrl.expandAll()" ng-if="$ctrl.hasExpandableItems()" style="margin-right: 5px"> <table-column-header
<i ng-class="{ 'fas fa-angle-down': $ctrl.state.expandAll, 'fas fa-angle-right': !$ctrl.state.expandAll }" aria-hidden="true"></i> col-title="'Name'"
</a> can-sort="true"
<a ng-click="$ctrl.changeOrderBy('Name')"> is-sorted="$ctrl.state.orderBy === 'Name'"
Ingress is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></i> ng-click="$ctrl.changeOrderBy('Name')"
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></i> ></table-column-header>
</a>
</th> </th>
</tr> </tr>
</thead> </thead>
@ -73,11 +81,14 @@
ng-click="$ctrl.expandItem(item, !item.Expanded)" ng-click="$ctrl.expandItem(item, !item.Expanded)"
pagination-id="$ctrl.tableKey" pagination-id="$ctrl.tableKey"
> >
<td colspan="3"> <td ng-if="$ctrl.hasExpandableItems()">
<a ng-if="$ctrl.itemCanExpand(item)" style="margin-right: 5px"> <div ng-if="$ctrl.itemCanExpand(item)" class="vertical-center">
<i ng-class="{ 'fas fa-angle-down': item.Expanded, 'fas fa-angle-right': !item.Expanded }" class="space-right" aria-hidden="true"></i> </a <pr-icon ng-if="item.Expanded" icon="'chevron-down'" feather="true"></pr-icon>
>{{ item.Name }} <pr-icon ng-if="!item.Expanded" icon="'chevron-right'" feather="true"></pr-icon>
</div>
</td> </td>
<td>{{ item.Name }}</td>
<td>{{ item.Size }}</td>
</tr> </tr>
<tr <tr
dir-paginate-end dir-paginate-end

142
app/kubernetes/views/resource-pools/edit/resourcePool.html
View File

@ -14,7 +14,7 @@
<rd-widget-body classes="no-padding"> <rd-widget-body classes="no-padding">
<uib-tabset active="ctrl.state.activeTab" justified="true" type="pills"> <uib-tabset active="ctrl.state.activeTab" justified="true" type="pills">
<uib-tab index="0" classes="btn-sm" select="ctrl.selectTab(0)"> <uib-tab index="0" classes="btn-sm" select="ctrl.selectTab(0)">
<uib-tab-heading> <i class="fa fa-layer-group space-right" aria-hidden="true"></i> Namespace </uib-tab-heading> <uib-tab-heading class="vertical-center"> <pr-icon icon="'layers'" feather="true"></pr-icon> Namespace </uib-tab-heading>
<form class="form-horizontal" autocomplete="off" name="resourcePoolEditForm" style="padding: 20px; margin-top: 10px"> <form class="form-horizontal" autocomplete="off" name="resourcePoolEditForm" style="padding: 20px; margin-top: 10px">
<!-- name-input --> <!-- name-input -->
<div class="form-group"> <div class="form-group">
@ -33,18 +33,30 @@
</div> </div>
</div> </div>
<!-- !name-input --> <!-- !name-input -->
<div ng-if="ctrl.isAdmin && ctrl.isEditable" class="col-sm-12 form-section-title">Quota</div> <div ng-if="ctrl.isAdmin && ctrl.isEditable" class="col-sm-12 form-section-title">Resource quota</div>
<!-- quotas-switch --> <!-- quotas-switch -->
<div ng-if="ctrl.isAdmin && ctrl.isEditable" class="form-group"> <div ng-if="ctrl.isAdmin && ctrl.isEditable" class="form-group">
<div class="col-sm-12"> <div class="col-sm-12 mt-2" ng-if="ctrl.state.resourceOverCommitEnabled">
<div class="form-group">
<div class="col-sm-3 col-lg-2">
<label class="control-label text-left"> Resource assignment </label> <label class="control-label text-left"> Resource assignment </label>
<label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="ctrl.formValues.HasQuota" /><i></i> </label> </div>
<div class="col-sm-9 pt-2">
<label class="switch">
<input type="checkbox" ng-model="ctrl.formValues.HasQuota" />
<span class="slider round"></span>
</label>
</div>
</div>
</div> </div>
</div> </div>
<div class="form-group" ng-if="ctrl.formValues.HasQuota && ctrl.isAdmin && ctrl.isEditable && !ctrl.isQuotaValid()"> <div class="form-group" ng-if="ctrl.formValues.HasQuota && ctrl.isAdmin && ctrl.isEditable && !ctrl.isQuotaValid()">
<span class="col-sm-12 text-warning small"> <div class="col-sm-12 small text-muted">
<p> <i class="fa fa-exclamation-triangle" aria-hidden="true" style="margin-right: 2px"></i> At least a single limit must be set for the quota to be valid. </p> <p class="vertical-center">
</span> <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon>
Not enough resources available in the cluster to apply a resource reservation.
</p>
</div>
</div> </div>
<div ng-if="ctrl.formValues.HasQuota"> <div ng-if="ctrl.formValues.HasQuota">
<kubernetes-resource-reservation <kubernetes-resource-reservation
@ -93,12 +105,12 @@
</div> </div>
</div> </div>
<div class="form-group" ng-show="resourcePoolEditForm.memory_limit.$invalid"> <div class="form-group" ng-show="resourcePoolEditForm.memory_limit.$invalid">
<div class="col-sm-12 small text-warning"> <div class="col-sm-12 small text-muted">
<div ng-messages="resourcePoolEditForm.pool_name.$error"> <div ng-messages="resourcePoolEditForm.pool_name.$error">
<p <p class="vertical-center">
><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Value must be between {{ ctrl.ResourceQuotaDefaults.MemoryLimit }} and <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> Value must be between {{ ctrl.ResourceQuotaDefaults.MemoryLimit }} and
{{ ctrl.state.sliderMaxMemory }}</p {{ ctrl.state.sliderMaxMemory }}.
> </p>
</div> </div>
</div> </div>
</div> </div>
@ -127,17 +139,20 @@
<div class="col-sm-12 form-section-title"> Load balancers </div> <div class="col-sm-12 form-section-title"> Load balancers </div>
<div class="form-group"> <div class="form-group">
<span class="col-sm-12 text-muted small"> <div class="col-sm-12 small text-muted">
<i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px"></i> <p class="vertical-center">
<pr-icon icon="'info'" feather="true"></pr-icon>
You can set a quota on the amount of external load balancers that can be created inside this namespace. Set this quota to 0 to effectively disable the use of You can set a quota on the amount of external load balancers that can be created inside this namespace. Set this quota to 0 to effectively disable the use of
load balancers in this namespace. load balancers in this namespace.
</span> </p>
</div>
</div> </div>
<div class="form-group"> <div class="form-group">
<div class="col-sm-12"> <div class="col-sm-12">
<por-switch-field <por-switch-field
data-cy="'k8sNamespaceCreate-loadBalancerQuotaToggle'" data-cy="'k8sNamespaceCreate-loadBalancerQuotaToggle'"
label="'Load Balancer quota'" label="'Load Balancer quota'"
label-class="'col-sm-3 col-lg-2'"
name="'k8s-resourcepool-Lbquota'" name="'k8s-resourcepool-Lbquota'"
feature-id="ctrl.LBQuotaFeatureId" feature-id="ctrl.LBQuotaFeatureId"
checked="ctrl.formValues.UseLoadBalancersQuota" checked="ctrl.formValues.UseLoadBalancersQuota"
@ -158,8 +173,8 @@
<div class="form-group" ng-if="ctrl.formValues.IngressClasses.length > 0"> <div class="form-group" ng-if="ctrl.formValues.IngressClasses.length > 0">
<div class="col-sm-12 small text-muted"> <div class="col-sm-12 small text-muted">
<p> <p class="vertical-center">
<i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px"></i> <pr-icon icon="'info'" feather="true"></pr-icon>
Enable and configure ingresses available to users when deploying applications. Enable and configure ingresses available to users when deploying applications.
</p> </p>
</div> </div>
@ -167,14 +182,23 @@
<div class="form-group" ng-repeat-start="ic in ctrl.formValues.IngressClasses track by ic.IngressClass.Name"> <div class="form-group" ng-repeat-start="ic in ctrl.formValues.IngressClasses track by ic.IngressClass.Name">
<div class="text-muted col-sm-12" style="width: 100%"> <div class="text-muted col-sm-12" style="width: 100%">
<div style="border-bottom: 1px solid #cdcdcd; padding-bottom: 5px"> <pr-icon icon="'svg-route'" mode="'primary'"></pr-icon>
<i class="fa fa-route" aria-hidden="true" style="margin-right: 2px"></i> {{ ic.IngressClass.Name }} {{ ic.IngressClass.Name }}
</div> <hr />
</div> </div>
<div class="col-sm-12" style="margin-top: 10px"> <div class="col-sm-12">
<div class="form-group">
<div class="col-sm-3 col-lg-2">
<label class="control-label text-left"> Allow users to use this ingress </label> <label class="control-label text-left"> Allow users to use this ingress </label>
<label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="ic.Selected" /><i></i> </label> </div>
<div class="col-sm-9 pt-2">
<label class="switch">
<input type="checkbox" ng-model="ic.Selected" />
<span class="slider round"></span>
</label>
</div>
</div>
</div> </div>
</div> </div>
@ -188,8 +212,8 @@
> >
</portainer-tooltip> </portainer-tooltip>
</label> </label>
<span class="label label-default interactive" style="margin-left: 10px" ng-click="ctrl.addHostname(ic)"> <span class="vertical-center label label-default interactive" style="margin-left: 10px" ng-click="ctrl.addHostname(ic)">
<i class="fa fa-plus-circle" aria-hidden="true"></i> add hostname <pr-icon icon="'plus'" feather="true"></pr-icon> add hostname
</span> </span>
</div> </div>
<div class="col-sm-12" style="margin-top: 10px"> <div class="col-sm-12" style="margin-top: 10px">
@ -209,29 +233,32 @@
/> />
</div> </div>
<div class="col-sm-1 input-group input-group-sm" ng-if="$index > 0"> <div class="col-sm-1 input-group input-group-sm" ng-if="$index > 0">
<button ng-if="!item.NeedsDeletion" class="btn btn-sm btn-danger" type="button" ng-click="ctrl.removeHostname(ic, $index)"> <button ng-if="!item.NeedsDeletion" class="btn btn-sm btn-dangerlight" type="button" ng-click="ctrl.removeHostname(ic, $index)">
<i class="fa fa-trash-alt" aria-hidden="true"></i> <pr-icon icon="'trash-2'" feather="true"></pr-icon>
</button> </button>
<button ng-if="item.NeedsDeletion" class="btn btn-sm btn-primary" type="button" ng-click="ctrl.restoreHostname(item)"> <button ng-if="item.NeedsDeletion" class="btn btn-sm btn-primary" type="button" ng-click="ctrl.restoreHostname(item)">
<i class="fa fa-trash-restore" aria-hidden="true"></i> <pr-icon icon="'svg-restore'"></pr-icon>
</button> </button>
</div> </div>
</div> </div>
<div <div
class="small text-warning" class="small text-muted"
style="margin-top: 5px" style="margin-top: 5px"
ng-show="resourcePoolEditForm['hostname_' + ic.IngressClass.Name + '_' + $index].$invalid || item.Duplicate" ng-show="resourcePoolEditForm['hostname_' + ic.IngressClass.Name + '_' + $index].$invalid || item.Duplicate"
> >
<ng-messages for="resourcePoolEditForm['hostname_' + ic.IngressClass.Name + '_' + $index].$error"> <ng-messages for="resourcePoolEditForm['hostname_' + ic.IngressClass.Name + '_' + $index].$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Hostname is required.</p> <p ng-message="required" class="vertical-center">
<p ng-message="pattern"> <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon>
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Hostname is required.
</p>
<p ng-message="pattern" class="vertical-center">
<pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon>
This field must consist of lower case alphanumeric characters, '-' or '.', and must start and end with an alphanumeric character (e.g. This field must consist of lower case alphanumeric characters, '-' or '.', and must start and end with an alphanumeric character (e.g.
'example.com'). 'example.com').
</p> </p>
</ng-messages> </ng-messages>
<p ng-if="item.Duplicate"> <p ng-if="item.Duplicate">
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i> <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon>
This hostname is already used. This hostname is already used.
</p> </p>
</div> </div>
@ -241,28 +268,28 @@
</div> </div>
<div ng-repeat-end class="form-group" ng-if="ic.Selected" style="margin-bottom: 20px"> <div ng-repeat-end class="form-group" ng-if="ic.Selected" style="margin-bottom: 20px">
<div class="col-sm-12 small text-muted" style="margin-top: 5px"> <div class="col-sm-12 small text-muted" style="margin-top: 5px">
<p> <p class="vertical-center">
<i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px"></i> <pr-icon icon="'info'" feather="true"></pr-icon>
You can specify a list of annotations that will be associated to the ingress. You can specify a list of annotations that will be associated to the ingress.
</p> </p>
</div> </div>
<div class="col-sm-12"> <div class="col-sm-12">
<label class="control-label text-left">Annotations</label> <label class="control-label text-left">Annotations</label>
<span class="label label-default interactive" style="margin-left: 10px" ng-click="ctrl.addAnnotation(ic)"> <span class="vertical-center label label-default interactive" style="margin-left: 10px" ng-click="ctrl.addAnnotation(ic)">
<i class="fa fa-plus-circle" aria-hidden="true"></i> add annotation <pr-icon icon="'plus'" feather="true"></pr-icon> add annotation
</span> </span>
<portainer-tooltip <portainer-tooltip
message="'Use annotations to configure options for an ingress. Review Nginx or Traefik documentation to find the annotations supported by your choice of ingress type.'" message="'Use annotations to configure options for an ingress. Review Nginx or Traefik documentation to find the annotations supported by your choice of ingress type.'"
> >
</portainer-tooltip> </portainer-tooltip>
<span <span
class="label label-default interactive" class="vertical-center label label-default interactive"
ng-if="ic.IngressClass.Type === ctrl.IngressClassTypes.NGINX" ng-if="ic.IngressClass.Type === ctrl.IngressClassTypes.NGINX"
style="margin-left: 10px" style="margin-left: 10px"
ng-click="ctrl.addRewriteAnnotation(ic)" ng-click="ctrl.addRewriteAnnotation(ic)"
> >
<i class="fa fa-plus-circle" aria-hidden="true"></i> add rewrite annotation <pr-icon icon="'plus'" feather="true"></pr-icon> add rewrite annotation
</span> </span>
<portainer-tooltip <portainer-tooltip
ng-if="ic.IngressClass.Type === ctrl.IngressClassTypes.NGINX" ng-if="ic.IngressClass.Type === ctrl.IngressClassTypes.NGINX"
@ -270,12 +297,12 @@
> >
</portainer-tooltip> </portainer-tooltip>
<span <span
class="label label-default interactive" class="vertical-center label label-default interactive"
ng-if="ic.IngressClass.Type === ctrl.IngressClassTypes.NGINX" ng-if="ic.IngressClass.Type === ctrl.IngressClassTypes.NGINX"
style="margin-left: 10px" style="margin-left: 10px"
ng-click="ctrl.addUseregexAnnotation(ic)" ng-click="ctrl.addUseregexAnnotation(ic)"
> >
<i class="fa fa-plus-circle" aria-hidden="true"></i> add regular expression annotation <pr-icon icon="'plus'" feather="true"></pr-icon> add regular expression annotation
</span> </span>
<portainer-tooltip <portainer-tooltip
ng-if="ic.IngressClass.Type === ctrl.IngressClassTypes.NGINX" ng-if="ic.IngressClass.Type === ctrl.IngressClassTypes.NGINX"
@ -311,8 +338,8 @@
/> />
</div> </div>
<div class="col-sm-1 input-group input-group-sm"> <div class="col-sm-1 input-group input-group-sm">
<button class="btn btn-sm btn-danger" type="button" ng-click="ctrl.removeAnnotation(ic, $index)"> <button class="btn btn-sm btn-dangerlight" type="button" ng-click="ctrl.removeAnnotation(ic, $index)">
<i class="fa fa-trash-alt" aria-hidden="true"></i> <pr-icon icon="'trash-2'" feather="true"></pr-icon>
</button> </button>
</div> </div>
</div> </div>
@ -335,9 +362,9 @@
<div ng-if="ctrl.isAdmin && !ctrl.isSystem"> <div ng-if="ctrl.isAdmin && !ctrl.isSystem">
<div class="form-group"> <div class="form-group">
<div class="col-sm-12 small text-muted"> <div class="col-sm-12 small text-muted">
<p> <p class="vertical-center">
<i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px"></i> <pr-icon icon="'info'" feather="true"></pr-icon>
Define which registry can be used by users who have access to this namespace. Define which registries can be used by users who have access to this namespace.
</p> </p>
</div> </div>
</div> </div>
@ -360,7 +387,7 @@
tick-property="Checked" tick-property="Checked"
helper-elements="filter" helper-elements="filter"
search-property="Name" search-property="Name"
translation="{nothingSelected: 'Select one or more registry', search: 'Search...'}" translation="{nothingSelected: 'Select one or more registries', search: 'Search...'}"
> >
</span> </span>
</div> </div>
@ -374,17 +401,20 @@
<div class="form-group"> <div class="form-group">
<span class="col-sm-12 text-muted small"> <span class="col-sm-12 text-muted small">
<i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px"></i> <p class="vertical-center">
<pr-icon icon="'info'" feather="true" mode="primary"></pr-icon>
Quotas can be set on each storage option to prevent users from exceeding a specific threshold when deploying applications. You can set a quota to 0 to Quotas can be set on each storage option to prevent users from exceeding a specific threshold when deploying applications. You can set a quota to 0 to
effectively prevent the usage of a specific storage option inside this namespace. effectively prevent the usage of a specific storage option inside this namespace.
</p>
</span> </span>
</div> </div>
<div class="col-sm-12 form-section-title">
<i class="fa fa-route" aria-hidden="true" style="margin-right: 2px"></i> <div class="form-section-title text-muted col-sm-12" style="width: 100%">
standard <div class="vertical-center"> <pr-icon icon="'svg-route'"></pr-icon>standard </div>
<hr />
</div> </div>
<storage-class-switch value="sc.Selected" name="sc.Name" on-change="(ctrl.onToggleStorageQuota)" authorization="K8sResourcePoolDetailsW"></storage-class-switch> <storage-class-switch value="sc.Selected" name="sc.Name" on-change="(ctrl.onToggleStorageQuota)" authorization="K8sResourcePoolDetailsW"> </storage-class-switch>
<!-- #endregion --> <!-- #endregion -->
@ -428,8 +458,8 @@
</form> </form>
</uib-tab> </uib-tab>
<uib-tab index="1" classes="btn-sm" select="ctrl.selectTab(1)"> <uib-tab index="1" classes="btn-sm" select="ctrl.selectTab(1)">
<uib-tab-heading> <uib-tab-heading class="vertical-center">
<i class="fa fa-history space-right" aria-hidden="true"></i> Events <pr-icon icon="'file-text'" feather="true"></pr-icon> Events
<div ng-if="ctrl.hasEventWarnings()"> <div ng-if="ctrl.hasEventWarnings()">
<i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px"></i> <i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px"></i>
{{ ctrl.state.eventWarningCount }} warning(s) {{ ctrl.state.eventWarningCount }} warning(s)
@ -447,7 +477,7 @@
></kubernetes-events-datatable> ></kubernetes-events-datatable>
</uib-tab> </uib-tab>
<uib-tab index="2" ng-if="ctrl.pool.Yaml" select="ctrl.showEditor()" classes="btn-sm"> <uib-tab index="2" ng-if="ctrl.pool.Yaml" select="ctrl.showEditor()" classes="btn-sm">
<uib-tab-heading> <i class="fa fa-code space-right" aria-hidden="true"></i> YAML </uib-tab-heading> <uib-tab-heading class="vertical-center"><pr-icon icon="'code'" feather="true"></pr-icon> YAML </uib-tab-heading>
<div style="padding-right: 25px" ng-if="ctrl.state.showEditorTab"> <div style="padding-right: 25px" ng-if="ctrl.state.showEditorTab">
<kubernetes-yaml-inspector key="resource-pool-yaml" data="ctrl.pool.Yaml"></kubernetes-yaml-inspector> <kubernetes-yaml-inspector key="resource-pool-yaml" data="ctrl.pool.Yaml"></kubernetes-yaml-inspector>
</div> </div>
@ -467,7 +497,7 @@
refresh-callback="ctrl.getApplications" refresh-callback="ctrl.getApplications"
loading="ctrl.state.applicationsLoading" loading="ctrl.state.applicationsLoading"
title-text="Applications running in this namespace" title-text="Applications running in this namespace"
title-icon="fa-laptop-code" title-icon="code"
> >
</kubernetes-resource-pool-applications-datatable> </kubernetes-resource-pool-applications-datatable>
</div> </div>
@ -482,7 +512,7 @@
refresh-callback="ctrl.getIngresses" refresh-callback="ctrl.getIngresses"
loading="ctrl.state.ingressesLoading" loading="ctrl.state.ingressesLoading"
title-text="Ingress routes and applications" title-text="Ingress routes and applications"
title-icon="fa-route" title-icon="svg-route"
> >
</kubernetes-resource-pool-ingresses-datatable> </kubernetes-resource-pool-ingresses-datatable>
</div> </div>