mirror of https://github.com/portainer/portainer
feat(ui): namespace details UI improvements EE-3480 (#7335)
Dakota Walsh
GitHub
parent
aa0f1221de
commit
d28030abea
|
|
@ -2,13 +2,25 @@
|
|||
<rd-widget>
|
||||
<rd-widget-body classes="no-padding">
|
||||
<div class="toolBar">
|
||||
<div class="toolBarTitle">
|
||||
<i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px"></i>
|
||||
<div class="toolBarTitle vertical-center">
|
||||
<pr-icon icon="$ctrl.titleIcon" feather="true"></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 application"
|
||||
auto-focus
|
||||
ng-model-options="{ debounce: 300 }"
|
||||
/>
|
||||
</div>
|
||||
<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 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="tableMenu">
|
||||
<div class="menuHeader"> Table settings </div>
|
||||
|
|
@ -28,7 +40,7 @@
|
|||
<option value="300">5min</option>
|
||||
</select>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -41,56 +53,54 @@
|
|||
</span>
|
||||
</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">
|
||||
<table class="table table-hover nowrap-cells">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<a ng-click="$ctrl.changeOrderBy('Name')">
|
||||
Name
|
||||
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></i>
|
||||
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></i>
|
||||
</a>
|
||||
<table-column-header
|
||||
col-title="'Name'"
|
||||
can-sort="true"
|
||||
is-sorted="$ctrl.state.orderBy === 'Name'"
|
||||
is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
|
||||
ng-click="$ctrl.changeOrderBy('Name')"
|
||||
></table-column-header>
|
||||
</th>
|
||||
<th>
|
||||
<a ng-click="$ctrl.changeOrderBy('StackName')">
|
||||
Stack
|
||||
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'StackName' && !$ctrl.state.reverseOrder"></i>
|
||||
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'StackName' && $ctrl.state.reverseOrder"></i>
|
||||
</a>
|
||||
<table-column-header
|
||||
col-title="'StackName'"
|
||||
can-sort="true"
|
||||
is-sorted="$ctrl.state.orderBy === 'StackName'"
|
||||
is-sorted-desc="$ctrl.state.orderBy === 'StackName' && $ctrl.state.reverseOrder"
|
||||
ng-click="$ctrl.changeOrderBy('StackName')"
|
||||
></table-column-header>
|
||||
</th>
|
||||
<th>
|
||||
<a ng-click="$ctrl.changeOrderBy('Image')">
|
||||
Image
|
||||
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Image' && !$ctrl.state.reverseOrder"></i>
|
||||
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Image' && $ctrl.state.reverseOrder"></i>
|
||||
</a>
|
||||
<table-column-header
|
||||
col-title="'Image'"
|
||||
can-sort="true"
|
||||
is-sorted="$ctrl.state.orderBy === 'Image'"
|
||||
is-sorted-desc="$ctrl.state.orderBy === 'Image' && $ctrl.state.reverseOrder"
|
||||
ng-click="$ctrl.changeOrderBy('Image')"
|
||||
></table-column-header>
|
||||
</th>
|
||||
<th>
|
||||
<a ng-click="$ctrl.changeOrderBy('CPU')">
|
||||
CPU reservation
|
||||
<i class="fa fa-sort-numeric-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'CPU' && !$ctrl.state.reverseOrder"></i>
|
||||
<i class="fa fa-sort-numeric-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'CPU' && $ctrl.state.reverseOrder"></i>
|
||||
</a>
|
||||
<table-column-header
|
||||
col-title="'CPU'"
|
||||
can-sort="true"
|
||||
is-sorted="$ctrl.state.orderBy === 'CPU'"
|
||||
is-sorted-desc="$ctrl.state.orderBy === 'CPU' && $ctrl.state.reverseOrder"
|
||||
ng-click="$ctrl.changeOrderBy('CPU')"
|
||||
></table-column-header>
|
||||
</th>
|
||||
<th>
|
||||
<a ng-click="$ctrl.changeOrderBy('Memory')">
|
||||
Memory reservation
|
||||
<i class="fa fa-sort-numeric-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Memory' && !$ctrl.state.reverseOrder"></i>
|
||||
<i class="fa fa-sort-numeric-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Memory' && $ctrl.state.reverseOrder"></i>
|
||||
</a>
|
||||
<table-column-header
|
||||
col-title="'Memory'"
|
||||
can-sort="true"
|
||||
is-sorted="$ctrl.state.orderBy === 'Memory'"
|
||||
is-sorted-desc="$ctrl.state.orderBy === 'Memory' && $ctrl.state.reverseOrder"
|
||||
ng-click="$ctrl.changeOrderBy('Memory')"
|
||||
></table-column-header>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<div>
|
||||
<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()">
|
||||
<pr-icon class="vertical-center" icon="'copy'" feather="true"></pr-icon>
|
||||
Copy to clipboard
|
||||
|
|
|
|||
|
|
@ -269,7 +269,7 @@
|
|||
/>
|
||||
</div>
|
||||
<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>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -376,7 +376,7 @@
|
|||
</div>
|
||||
<div class="input-group input-group-sm col-sm-1">
|
||||
<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"
|
||||
ng-click="$ctrl.removeAnnotation(ic, $index)"
|
||||
data-cy="namespaceCreate-deleteAnnotationButton{{ ic.IngressClass.Name }}"
|
||||
|
|
|
|||
|
|
@ -2,10 +2,25 @@
|
|||
<rd-widget>
|
||||
<rd-widget-body classes="no-padding">
|
||||
<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">
|
||||
<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="tableMenu">
|
||||
<div class="menuHeader"> Table settings </div>
|
||||
|
|
@ -25,7 +40,7 @@
|
|||
<option value="300">5min</option>
|
||||
</select>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -38,31 +53,24 @@
|
|||
</span>
|
||||
</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">
|
||||
<table class="table table-hover nowrap-cells">
|
||||
<thead>
|
||||
<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>
|
||||
<a ng-click="$ctrl.expandAll()" ng-if="$ctrl.hasExpandableItems()" style="margin-right: 5px">
|
||||
<i ng-class="{ 'fas fa-angle-down': $ctrl.state.expandAll, 'fas fa-angle-right': !$ctrl.state.expandAll }" aria-hidden="true"></i>
|
||||
</a>
|
||||
<a ng-click="$ctrl.changeOrderBy('Name')">
|
||||
Ingress
|
||||
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></i>
|
||||
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></i>
|
||||
</a>
|
||||
<table-column-header
|
||||
col-title="'Name'"
|
||||
can-sort="true"
|
||||
is-sorted="$ctrl.state.orderBy === 'Name'"
|
||||
is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
|
||||
ng-click="$ctrl.changeOrderBy('Name')"
|
||||
></table-column-header>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
|
@ -73,11 +81,14 @@
|
|||
ng-click="$ctrl.expandItem(item, !item.Expanded)"
|
||||
pagination-id="$ctrl.tableKey"
|
||||
>
|
||||
<td colspan="3">
|
||||
<a ng-if="$ctrl.itemCanExpand(item)" style="margin-right: 5px">
|
||||
<i ng-class="{ 'fas fa-angle-down': item.Expanded, 'fas fa-angle-right': !item.Expanded }" class="space-right" aria-hidden="true"></i> </a
|
||||
>{{ item.Name }}
|
||||
<td ng-if="$ctrl.hasExpandableItems()">
|
||||
<div ng-if="$ctrl.itemCanExpand(item)" class="vertical-center">
|
||||
<pr-icon ng-if="item.Expanded" icon="'chevron-down'" feather="true"></pr-icon>
|
||||
<pr-icon ng-if="!item.Expanded" icon="'chevron-right'" feather="true"></pr-icon>
|
||||
</div>
|
||||
</td>
|
||||
<td>{{ item.Name }}</td>
|
||||
<td>{{ item.Size }}</td>
|
||||
</tr>
|
||||
<tr
|
||||
dir-paginate-end
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<rd-widget-body classes="no-padding">
|
||||
<uib-tabset active="ctrl.state.activeTab" justified="true" type="pills">
|
||||
<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">
|
||||
<!-- name-input -->
|
||||
<div class="form-group">
|
||||
|
|
@ -33,18 +33,30 @@
|
|||
</div>
|
||||
</div>
|
||||
<!-- !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 -->
|
||||
<div ng-if="ctrl.isAdmin && ctrl.isEditable" class="form-group">
|
||||
<div class="col-sm-12">
|
||||
<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 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>
|
||||
</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 class="form-group" ng-if="ctrl.formValues.HasQuota && ctrl.isAdmin && ctrl.isEditable && !ctrl.isQuotaValid()">
|
||||
<span class="col-sm-12 text-warning small">
|
||||
<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>
|
||||
</span>
|
||||
<div class="col-sm-12 small text-muted">
|
||||
<p class="vertical-center">
|
||||
<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 ng-if="ctrl.formValues.HasQuota">
|
||||
<kubernetes-resource-reservation
|
||||
|
|
@ -93,12 +105,12 @@
|
|||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<p
|
||||
><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Value must be between {{ ctrl.ResourceQuotaDefaults.MemoryLimit }} and
|
||||
{{ ctrl.state.sliderMaxMemory }}</p
|
||||
>
|
||||
<p class="vertical-center">
|
||||
<pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> Value must be between {{ ctrl.ResourceQuotaDefaults.MemoryLimit }} and
|
||||
{{ ctrl.state.sliderMaxMemory }}.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -127,17 +139,20 @@
|
|||
<div class="col-sm-12 form-section-title"> Load balancers </div>
|
||||
|
||||
<div class="form-group">
|
||||
<span class="col-sm-12 text-muted small">
|
||||
<i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px"></i>
|
||||
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.
|
||||
</span>
|
||||
<div class="col-sm-12 small text-muted">
|
||||
<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
|
||||
load balancers in this namespace.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-12">
|
||||
<por-switch-field
|
||||
data-cy="'k8sNamespaceCreate-loadBalancerQuotaToggle'"
|
||||
label="'Load Balancer quota'"
|
||||
label-class="'col-sm-3 col-lg-2'"
|
||||
name="'k8s-resourcepool-Lbquota'"
|
||||
feature-id="ctrl.LBQuotaFeatureId"
|
||||
checked="ctrl.formValues.UseLoadBalancersQuota"
|
||||
|
|
@ -158,8 +173,8 @@
|
|||
|
||||
<div class="form-group" ng-if="ctrl.formValues.IngressClasses.length > 0">
|
||||
<div class="col-sm-12 small text-muted">
|
||||
<p>
|
||||
<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>
|
||||
Enable and configure ingresses available to users when deploying applications.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -167,14 +182,23 @@
|
|||
|
||||
<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 style="border-bottom: 1px solid #cdcdcd; padding-bottom: 5px">
|
||||
<i class="fa fa-route" aria-hidden="true" style="margin-right: 2px"></i> {{ ic.IngressClass.Name }}
|
||||
</div>
|
||||
<pr-icon icon="'svg-route'" mode="'primary'"></pr-icon>
|
||||
{{ ic.IngressClass.Name }}
|
||||
<hr />
|
||||
</div>
|
||||
|
||||
<div class="col-sm-12" style="margin-top: 10px">
|
||||
<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 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>
|
||||
</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>
|
||||
|
||||
|
|
@ -188,8 +212,8 @@
|
|||
>
|
||||
</portainer-tooltip>
|
||||
</label>
|
||||
<span class="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
|
||||
<span class="vertical-center label label-default interactive" style="margin-left: 10px" ng-click="ctrl.addHostname(ic)">
|
||||
<pr-icon icon="'plus'" feather="true"></pr-icon> add hostname
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-sm-12" style="margin-top: 10px">
|
||||
|
|
@ -209,29 +233,32 @@
|
|||
/>
|
||||
</div>
|
||||
<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)">
|
||||
<i class="fa fa-trash-alt" aria-hidden="true"></i>
|
||||
<button ng-if="!item.NeedsDeletion" class="btn btn-sm btn-dangerlight" type="button" ng-click="ctrl.removeHostname(ic, $index)">
|
||||
<pr-icon icon="'trash-2'" feather="true"></pr-icon>
|
||||
</button>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="small text-warning"
|
||||
class="small text-muted"
|
||||
style="margin-top: 5px"
|
||||
ng-show="resourcePoolEditForm['hostname_' + ic.IngressClass.Name + '_' + $index].$invalid || item.Duplicate"
|
||||
>
|
||||
<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="pattern">
|
||||
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
|
||||
<p ng-message="required" class="vertical-center">
|
||||
<pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon>
|
||||
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.
|
||||
'example.com').
|
||||
</p>
|
||||
</ng-messages>
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -241,28 +268,28 @@
|
|||
</div>
|
||||
<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">
|
||||
<p>
|
||||
<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 specify a list of annotations that will be associated to the ingress.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-12">
|
||||
<label class="control-label text-left">Annotations</label>
|
||||
<span class="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
|
||||
<span class="vertical-center label label-default interactive" style="margin-left: 10px" ng-click="ctrl.addAnnotation(ic)">
|
||||
<pr-icon icon="'plus'" feather="true"></pr-icon> add annotation
|
||||
</span>
|
||||
<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.'"
|
||||
>
|
||||
</portainer-tooltip>
|
||||
<span
|
||||
class="label label-default interactive"
|
||||
class="vertical-center label label-default interactive"
|
||||
ng-if="ic.IngressClass.Type === ctrl.IngressClassTypes.NGINX"
|
||||
style="margin-left: 10px"
|
||||
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>
|
||||
<portainer-tooltip
|
||||
ng-if="ic.IngressClass.Type === ctrl.IngressClassTypes.NGINX"
|
||||
|
|
@ -270,12 +297,12 @@
|
|||
>
|
||||
</portainer-tooltip>
|
||||
<span
|
||||
class="label label-default interactive"
|
||||
class="vertical-center label label-default interactive"
|
||||
ng-if="ic.IngressClass.Type === ctrl.IngressClassTypes.NGINX"
|
||||
style="margin-left: 10px"
|
||||
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>
|
||||
<portainer-tooltip
|
||||
ng-if="ic.IngressClass.Type === ctrl.IngressClassTypes.NGINX"
|
||||
|
|
@ -311,8 +338,8 @@
|
|||
/>
|
||||
</div>
|
||||
<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)">
|
||||
<i class="fa fa-trash-alt" aria-hidden="true"></i>
|
||||
<button class="btn btn-sm btn-dangerlight" type="button" ng-click="ctrl.removeAnnotation(ic, $index)">
|
||||
<pr-icon icon="'trash-2'" feather="true"></pr-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -335,9 +362,9 @@
|
|||
<div ng-if="ctrl.isAdmin && !ctrl.isSystem">
|
||||
<div class="form-group">
|
||||
<div class="col-sm-12 small text-muted">
|
||||
<p>
|
||||
<i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px"></i>
|
||||
Define which registry can be used by users who have access to this namespace.
|
||||
<p class="vertical-center">
|
||||
<pr-icon icon="'info'" feather="true"></pr-icon>
|
||||
Define which registries can be used by users who have access to this namespace.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -360,7 +387,7 @@
|
|||
tick-property="Checked"
|
||||
helper-elements="filter"
|
||||
search-property="Name"
|
||||
translation="{nothingSelected: 'Select one or more registry', search: 'Search...'}"
|
||||
translation="{nothingSelected: 'Select one or more registries', search: 'Search...'}"
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -374,17 +401,20 @@
|
|||
|
||||
<div class="form-group">
|
||||
<span class="col-sm-12 text-muted small">
|
||||
<i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px"></i>
|
||||
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.
|
||||
<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
|
||||
effectively prevent the usage of a specific storage option inside this namespace.
|
||||
</p>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-sm-12 form-section-title">
|
||||
<i class="fa fa-route" aria-hidden="true" style="margin-right: 2px"></i>
|
||||
standard
|
||||
|
||||
<div class="form-section-title text-muted col-sm-12" style="width: 100%">
|
||||
<div class="vertical-center"> <pr-icon icon="'svg-route'"></pr-icon>standard </div>
|
||||
<hr />
|
||||
</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 -->
|
||||
|
||||
|
|
@ -428,8 +458,8 @@
|
|||
</form>
|
||||
</uib-tab>
|
||||
<uib-tab index="1" classes="btn-sm" select="ctrl.selectTab(1)">
|
||||
<uib-tab-heading>
|
||||
<i class="fa fa-history space-right" aria-hidden="true"></i> Events
|
||||
<uib-tab-heading class="vertical-center">
|
||||
<pr-icon icon="'file-text'" feather="true"></pr-icon> Events
|
||||
<div ng-if="ctrl.hasEventWarnings()">
|
||||
<i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px"></i>
|
||||
{{ ctrl.state.eventWarningCount }} warning(s)
|
||||
|
|
@ -447,7 +477,7 @@
|
|||
></kubernetes-events-datatable>
|
||||
</uib-tab>
|
||||
<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">
|
||||
<kubernetes-yaml-inspector key="resource-pool-yaml" data="ctrl.pool.Yaml"></kubernetes-yaml-inspector>
|
||||
</div>
|
||||
|
|
@ -467,7 +497,7 @@
|
|||
refresh-callback="ctrl.getApplications"
|
||||
loading="ctrl.state.applicationsLoading"
|
||||
title-text="Applications running in this namespace"
|
||||
title-icon="fa-laptop-code"
|
||||
title-icon="code"
|
||||
>
|
||||
</kubernetes-resource-pool-applications-datatable>
|
||||
</div>
|
||||
|
|
@ -482,7 +512,7 @@
|
|||
refresh-callback="ctrl.getIngresses"
|
||||
loading="ctrl.state.ingressesLoading"
|
||||
title-text="Ingress routes and applications"
|
||||
title-icon="fa-route"
|
||||
title-icon="svg-route"
|
||||
>
|
||||
</kubernetes-resource-pool-ingresses-datatable>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue