mirror of https://github.com/portainer/portainer
feat(ui): cluster setup page done EE-3705 (#7267)
Prabhat Khera
GitHub
parent
9a92b97b7e
commit
3645ff7459
|
|
@ -22,6 +22,10 @@
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
.justify-left {
|
||||
justify-content: left;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: var(--bg-dashboard-item) !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,36 +25,36 @@
|
|||
<div class="col-sm-12 form-section-title"> Networking </div>
|
||||
|
||||
<div class="form-group">
|
||||
<span class="col-sm-12 text-muted small">
|
||||
Enabling the load balancer feature will allow users to expose application they deploy over an external IP address assigned by cloud provider.
|
||||
<p style="margin-top: 2px">
|
||||
<i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px"></i>
|
||||
<div class="col-sm-12 text-muted small">
|
||||
<p> Enabling the load balancer feature will allow users to expose application they deploy over an external IP address assigned by cloud provider. </p>
|
||||
<p class="mt-1 vertical-center">
|
||||
<pr-icon icon="'alert-circle'" mode="'warning'" feather="true"></pr-icon>
|
||||
Ensure that your cloud provider allows you to create load balancers if you want to use this feature. Might incur costs.
|
||||
</p>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-12">
|
||||
<label class="control-label text-left"> Allow users to use external load balancer </label>
|
||||
<label class="switch" style="margin-left: 20px">
|
||||
<input type="checkbox" ng-model="ctrl.formValues.UseLoadBalancer" /><i data-cy="kubeSetup-loadBalancerToggle"></i>
|
||||
<label class="control-label text-left col-sm-3 col-lg-2 px-0"> Allow users to use external load balancer </label>
|
||||
<label class="switch mb-0 col-sm-8">
|
||||
<input type="checkbox" ng-model="ctrl.formValues.UseLoadBalancer" /><span class="slider round" data-cy="kubeSetup-loadBalancerToggle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<span class="col-sm-12 text-muted small">
|
||||
Configuring ingress controllers will allow users to expose application they deploy over a HTTP route.<br />
|
||||
<p style="margin-top: 2px">
|
||||
<i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px"></i>
|
||||
<div class="col-sm-12 text-muted small">
|
||||
<p> Configuring ingress controllers will allow users to expose application they deploy over a HTTP route. </p>
|
||||
<p class="mt-1 vertical-center">
|
||||
<pr-icon icon="'alert-circle'" mode="'warning'" feather="true"></pr-icon>
|
||||
Ingress classes must be manually specified for each controller you want to use in the cluster. Make sure that each controller is running inside your cluster.
|
||||
</p>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-12">
|
||||
<label class="control-label text-left">Ingress controller</label>
|
||||
<span class="label label-default interactive" style="margin-left: 10px" ng-click="ctrl.addIngressClass()" data-cy="kubeSetup-congifIngressButton">
|
||||
<i class="fa fa-plus-circle" aria-hidden="true"></i> configure ingress controller
|
||||
<span class="label label-default interactive vertical-center" style="margin-left: 10px" ng-click="ctrl.addIngressClass()" data-cy="kubeSetup-congifIngressButton">
|
||||
<pr-icon icon="'plus'" feather="true" size="'sm'" class="vertical-center"></pr-icon> configure ingress controller
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
|
@ -90,15 +90,15 @@
|
|||
<div class="col-sm-1 input-group input-group-sm">
|
||||
<button
|
||||
ng-if="!ingressClass.NeedsDeletion"
|
||||
class="btn btn-sm btn-danger"
|
||||
class="btn btn-dangerlight btn-only-icon"
|
||||
type="button"
|
||||
ng-click="ctrl.removeIngressClass($index)"
|
||||
data-cy="kubeSetup-deleteIngress"
|
||||
>
|
||||
<i class="fa fa-trash-alt" aria-hidden="true"></i>
|
||||
<pr-icon icon="'trash-2'" feather="true"></pr-icon>
|
||||
</button>
|
||||
<button ng-if="ingressClass.NeedsDeletion" class="btn btn-sm btn-primary" type="button" ng-click="ctrl.restoreIngressClass($index)">
|
||||
<i class="fa fa-trash-restore" aria-hidden="true"></i>
|
||||
<button ng-if="ingressClass.NeedsDeletion" class="btn btn-only-icon btn-light" type="button" ng-click="ctrl.restoreIngressClass($index)">
|
||||
<pr-icon icon="'rotate-ccw'" feather="true"></pr-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -113,26 +113,30 @@
|
|||
>
|
||||
<div class="col-sm-7 input-group">
|
||||
<div
|
||||
class="small text-warning"
|
||||
class="small"
|
||||
style="margin-top: 5px"
|
||||
ng-if="kubernetesClusterSetupForm['ingress_class_name_' + $index].$invalid || ctrl.state.duplicates.ingressClasses.refs[$index] !== undefined"
|
||||
>
|
||||
<div ng-messages="kubernetesClusterSetupForm['ingress_class_name_'+$index].$error">
|
||||
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Ingress class name is required.</p>
|
||||
<p ng-message="pattern"
|
||||
><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field must consist of lower case alphanumeric characters or '-', start with an
|
||||
alphabetic character, and end with an alphanumeric character (e.g. 'my-name', or 'abc-123').</p
|
||||
<p ng-message="required" class="vertical-center text-muted"
|
||||
><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Ingress class name is required.</p
|
||||
>
|
||||
<p ng-message="pattern" class="vertical-center text-muted"
|
||||
><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> This field must consist of lower case alphanumeric characters or '-', start
|
||||
with an alphabetic character, and end with an alphanumeric character (e.g. 'my-name', or 'abc-123').</p
|
||||
>
|
||||
</div>
|
||||
<p ng-if="ctrl.state.duplicates.ingressClasses.refs[$index] !== undefined">
|
||||
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This ingress class is already defined.
|
||||
<p ng-if="ctrl.state.duplicates.ingressClasses.refs[$index] !== undefined" class="vertical-center text-muted">
|
||||
<pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> This ingress class is already defined.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3 input-group">
|
||||
<div class="small text-warning" style="margin-top: 5px" ng-if="kubernetesClusterSetupForm['ingress_class_type_' + $index].$invalid">
|
||||
<div class="small" style="margin-top: 5px" ng-if="kubernetesClusterSetupForm['ingress_class_type_' + $index].$invalid">
|
||||
<div ng-messages="kubernetesClusterSetupForm['ingress_class_type_'+$index].$error">
|
||||
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Ingress class type is required.</p>
|
||||
<p ng-message="required" class="vertical-center text-muted"
|
||||
><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Ingress class type is required.</p
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -150,7 +154,7 @@
|
|||
</div>
|
||||
|
||||
<!-- auto update window -->
|
||||
<div class="col-sm-12 form-section-title"> Change Window Setting </div>
|
||||
<div class="col-sm-12 form-section-title"> Change Window Settings </div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="col-sm-12">
|
||||
|
|
@ -161,11 +165,16 @@
|
|||
feature-id="ctrl.limitedFeatureAutoWindow"
|
||||
tooltip="'Specify a timeframe during which automatic updates can occur in this environment.'"
|
||||
on-change="(ctrl.onToggleAutoUpdate)"
|
||||
label-class="'col-sm-3 col-lg-2 px-0 !m-0'"
|
||||
switch-class="'col-sm-8'"
|
||||
>
|
||||
</por-switch-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<time-window-picker ng-show="ctrl.state.autoUpdateSettings.Enabled" time-window="ctrl.state.autoUpdateSettings" time-zone="ctrl.state.timeZone"></time-window-picker>
|
||||
|
||||
<!-- #region SECURITY -->
|
||||
<div class="col-sm-12 form-section-title"> Security </div>
|
||||
|
||||
<div class="form-group">
|
||||
|
|
@ -173,29 +182,32 @@
|
|||
By default, all the users have access to the default namespace. Enable this option to set accesses on the default namespace.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="col-sm-12">
|
||||
<label class="control-label text-left"> Restrict access to the default namespace </label>
|
||||
<label class="switch" style="margin-left: 20px">
|
||||
<input type="checkbox" ng-model="ctrl.formValues.RestrictDefaultNamespace" /><i data-cy="kubeSetup-restrictDefaultNsToggle"></i>
|
||||
<label class="control-label text-left col-sm-3 col-lg-2 px-0"> Restrict access to the default namespace </label>
|
||||
<label class="switch col-sm-8">
|
||||
<input type="checkbox" ng-model="ctrl.formValues.RestrictDefaultNamespace" /><span class="slider round" data-cy="kubeSetup-restrictDefaultNsToggle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- #endregion -->
|
||||
|
||||
<div class="col-sm-12 form-section-title"> Resources and Metrics </div>
|
||||
|
||||
<div class="form-group">
|
||||
<span class="col-sm-12 text-muted small">
|
||||
By ENABLING resource over-commit, you are able to assign more resources to namespaces than is physically available in the cluster. This may lead to unexpected
|
||||
deployment failures if there is insufficient resource to service demand.
|
||||
<p style="margin-top: 2px">
|
||||
<i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px"></i>
|
||||
<div class="col-sm-12 text-muted small">
|
||||
<p>
|
||||
By ENABLING resource over-commit, you are able to assign more resources to namespaces than is physically available in the cluster. This may lead to unexpected
|
||||
deployment failures if there is insufficient resource to service demand.
|
||||
</p>
|
||||
<p class="mt-1 vertical-center">
|
||||
<pr-icon icon="'alert-circle'" mode="'warning'" feather="true"></pr-icon>
|
||||
By DISABLING resource over-commit (highly recommended), you are only able to assign resources to namespaces that are less (in aggregate) than the cluster total
|
||||
minus any system resource reservation.
|
||||
</p>
|
||||
</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
</div>
|
||||
|
||||
<div class="col-sm-12">
|
||||
<por-switch-field
|
||||
data-cy="'kubeSetup-resourceOverCommitToggle'"
|
||||
|
|
@ -204,25 +216,28 @@
|
|||
feature-id="ctrl.limitedFeature"
|
||||
checked="ctrl.formValues.EnableResourceOverCommit"
|
||||
on-change="(ctrl.onChangeEnableResourceOverCommit)"
|
||||
label-class="'col-sm-3 col-lg-2 px-0 !m-0'"
|
||||
switch-class="'col-sm-8'"
|
||||
></por-switch-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<span class="col-sm-12 text-muted small">
|
||||
Enabling this feature will allow users to use specific features like autoscaling and to see container and node resource usage.
|
||||
<p style="margin-top: 2px">
|
||||
<i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px"></i>
|
||||
<div class="col-sm-12 text-muted small">
|
||||
<p> Enabling this feature will allow users to use specific features like autoscaling and to see container and node resource usage. </p>
|
||||
<p class="vertical-center mt-1">
|
||||
<pr-icon icon="'alert-circle'" mode="'warning'" feather="true"></pr-icon>
|
||||
Ensure that <a href="https://kubernetes.io/docs/tasks/debug-application-cluster/resource-metrics-pipeline/#metrics-server" target="_blank">metrics server</a> or
|
||||
<a href="https://github.com/kubernetes-sigs/prometheus-adapter" target="_blank">prometheus</a> is running inside your cluster.
|
||||
</p>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-12">
|
||||
<label class="control-label text-left"> Enable features using the metrics API </label>
|
||||
<label class="switch" style="margin-left: 20px">
|
||||
<input type="checkbox" ng-model="ctrl.formValues.UseServerMetrics" ng-change="ctrl.enableMetricsServer()" /><i data-cy="kubeSetup-metricsToggle"></i>
|
||||
<label class="control-label text-left col-sm-3 col-lg-2 px-0"> Enable features using the metrics API </label>
|
||||
<label class="switch col-sm-8">
|
||||
<input type="checkbox" ng-model="ctrl.formValues.UseServerMetrics" ng-change="ctrl.enableMetricsServer()" />
|
||||
<span class="slider round" data-cy="kubeSetup-metricsToggle"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div ng-if="ctrl.state.metrics.pending && ctrl.state.metrics.userClick" class="col-sm-12 small text-muted" style="margin-top: 5px">
|
||||
|
|
@ -230,26 +245,24 @@
|
|||
</div>
|
||||
<div
|
||||
ng-if="!ctrl.state.metrics.pending && ctrl.state.metrics.isServerRunning && ctrl.state.metrics.userClick"
|
||||
class="col-sm-12 small text-muted"
|
||||
class="col-sm-12 small text-muted vertical-center"
|
||||
style="margin-top: 5px"
|
||||
>
|
||||
<i class="fa fa-check green-icon" aria-hidden="true" style="margin-right: 2px"></i> Successfully reached metrics API
|
||||
<pr-icon icon="'check'" mode="'success'" feather="true"></pr-icon> Successfully reached metrics API
|
||||
</div>
|
||||
<div
|
||||
ng-if="!ctrl.state.metrics.pending && !ctrl.state.metrics.isServerRunning && ctrl.state.metrics.userClick"
|
||||
class="col-sm-12 small text-muted"
|
||||
style="margin-top: 5px"
|
||||
class="col-sm-12 small text-muted vertical-center mt-2"
|
||||
>
|
||||
<i class="fa fa-times red-icon" aria-hidden="true" style="margin-right: 2px"></i> Unable to reach metrics API, make sure metrics server is properly deployed inside
|
||||
that cluster.
|
||||
<pr-icon icon="'x'" mode="'danger'" feather="true"></pr-icon> Unable to reach metrics API, make sure metrics server is properly deployed inside that cluster.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-12 form-section-title"> Available storage options </div>
|
||||
|
||||
<div class="form-group" ng-if="!ctrl.storageClassAvailable()">
|
||||
<div class="col-sm-12 small text-muted">
|
||||
<i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px"></i>
|
||||
<div class="col-sm-12 small text-muted vertical-center">
|
||||
<pr-icon icon="'alert-circle'" mode="'warning'" feather="true"></pr-icon>
|
||||
Unable to detect any storage class available to persist data. Users won't be able to persist application data inside this cluster.
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -278,9 +291,9 @@
|
|||
</tr>
|
||||
<tr ng-repeat="class in ctrl.StorageClasses">
|
||||
<td>
|
||||
<div style="margin: 5px">
|
||||
<label class="switch" style="margin-right: 10px">
|
||||
<input type="checkbox" ng-model="class.selected" /><i data-cy="kubeSetup-storageToggle{{ class.Name }}"></i>
|
||||
<div class="flex-center justify-left">
|
||||
<label class="switch mr-2 mb-0">
|
||||
<input type="checkbox" ng-model="class.selected" /><span class="slider round" data-cy="kubeSetup-storageToggle{{ class.Name }}"></span>
|
||||
</label>
|
||||
<span>{{ class.Name }}</span>
|
||||
</div>
|
||||
|
|
@ -302,8 +315,11 @@
|
|||
</td>
|
||||
<td>
|
||||
<div style="margin: 5px">
|
||||
<label class="switch"
|
||||
><input type="checkbox" ng-model="class.AllowVolumeExpansion" /><i data-cy="kubeSetup-storageExpansionToggle{{ class.Name }}"></i>
|
||||
<label class="switch mr-2 mb-0"
|
||||
><input type="checkbox" ng-model="class.AllowVolumeExpansion" /><span
|
||||
class="slider round"
|
||||
data-cy="kubeSetup-storageExpansionToggle{{ class.Name }}"
|
||||
></span>
|
||||
</label>
|
||||
</div>
|
||||
</td>
|
||||
|
|
@ -312,8 +328,8 @@
|
|||
</table>
|
||||
</div>
|
||||
<div class="col-sm-12">
|
||||
<span ng-if="!ctrl.hasValidStorageConfiguration()" style="margin-left: 5px" class="text-muted small">
|
||||
<i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px"></i>
|
||||
<span ng-if="!ctrl.hasValidStorageConfiguration()" class="text-muted small vertical-center mt-2">
|
||||
<pr-icon icon="'alert-circle'" mode="'warning'" feather="true"></pr-icon>
|
||||
Shared access policy configuration required
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -101,7 +101,7 @@ export function EnvironmentItem({ environment, onClick, groupName }: Props) {
|
|||
<i className="fa fa-memory space-left space-right" />
|
||||
{humanize(environment.Snapshots[0].TotalMemory)}
|
||||
<i className="fa fa-digital-tachograph space-left space-right" />
|
||||
{environment.Gpus.length}
|
||||
{environment.Gpus?.length}
|
||||
</span>
|
||||
)}
|
||||
<span className="space-left space-right">-</span>
|
||||
|
|
|
|||
|
|
@ -13,4 +13,5 @@ export const switchField = r2a(SwitchField, [
|
|||
'onChange',
|
||||
'featureId',
|
||||
'switchValues',
|
||||
'switchClass',
|
||||
]);
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ export interface Props {
|
|||
name?: string;
|
||||
tooltip?: string;
|
||||
labelClass?: string;
|
||||
switchClass?: string;
|
||||
dataCy?: string;
|
||||
disabled?: boolean;
|
||||
featureId?: FeatureId;
|
||||
|
|
@ -35,6 +36,7 @@ export function SwitchField({
|
|||
onChange,
|
||||
featureId,
|
||||
switchValues,
|
||||
switchClass,
|
||||
}: Props) {
|
||||
const toggleName = name ? `toggle_${name}` : '';
|
||||
|
||||
|
|
@ -51,7 +53,7 @@ export function SwitchField({
|
|||
{tooltip && <Tooltip message={tooltip} />}
|
||||
</span>
|
||||
<Switch
|
||||
className="space-right"
|
||||
className={clsx('space-right', switchClass)}
|
||||
name={toggleName}
|
||||
id={toggleName}
|
||||
checked={checked}
|
||||
|
|
|
|||
Loading…
Reference in New Issue