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

feat(ui): cluster setup page done EE-3705 (#7267)

pull/7320/head
Prabhat Khera 2022-07-22 14:16:50 +12:00 committed by GitHub
parent 9a92b97b7e
commit 3645ff7459
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 88 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/css/bootstrap-override.css
View File

@ -22,6 +22,10 @@
justify-content: center; justify-content: center;
} }
.justify-left {
justify-content: left;
}
.blue { .blue {
background: var(--bg-dashboard-item) !important; background: var(--bg-dashboard-item) !important;
} }

142
app/kubernetes/views/configure/configure.html
View File

@ -25,36 +25,36 @@
<div class="col-sm-12 form-section-title"> Networking </div> <div class="col-sm-12 form-section-title"> Networking </div>
<div class="form-group"> <div class="form-group">
<span class="col-sm-12 text-muted small"> <div 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> Enabling the load balancer feature will allow users to expose application they deploy over an external IP address assigned by cloud provider. </p>
<p style="margin-top: 2px"> <p class="mt-1 vertical-center">
<i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px"></i> <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. Ensure that your cloud provider allows you to create load balancers if you want to use this feature. Might incur costs.
</p> </p>
</span> </div>
<div class="col-sm-12"> <div class="col-sm-12">
<label class="control-label text-left"> Allow users to use external load balancer </label> <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" style="margin-left: 20px"> <label class="switch mb-0 col-sm-8">
<input type="checkbox" ng-model="ctrl.formValues.UseLoadBalancer" /><i data-cy="kubeSetup-loadBalancerToggle"></i> <input type="checkbox" ng-model="ctrl.formValues.UseLoadBalancer" /><span class="slider round" data-cy="kubeSetup-loadBalancerToggle"></span>
</label> </label>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<span class="col-sm-12 text-muted small"> <div class="col-sm-12 text-muted small">
Configuring ingress controllers will allow users to expose application they deploy over a HTTP route.<br /> <p> Configuring ingress controllers will allow users to expose application they deploy over a HTTP route. </p>
<p style="margin-top: 2px"> <p class="mt-1 vertical-center">
<i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px"></i> <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. 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> </p>
</span> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<div class="col-sm-12"> <div class="col-sm-12">
<label class="control-label text-left">Ingress controller</label> <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"> <span class="label label-default interactive vertical-center" 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 <pr-icon icon="'plus'" feather="true" size="'sm'" class="vertical-center"></pr-icon> configure ingress controller
</span> </span>
</div> </div>
@ -90,15 +90,15 @@
<div class="col-sm-1 input-group input-group-sm"> <div class="col-sm-1 input-group input-group-sm">
<button <button
ng-if="!ingressClass.NeedsDeletion" ng-if="!ingressClass.NeedsDeletion"
class="btn btn-sm btn-danger" class="btn btn-dangerlight btn-only-icon"
type="button" type="button"
ng-click="ctrl.removeIngressClass($index)" ng-click="ctrl.removeIngressClass($index)"
data-cy="kubeSetup-deleteIngress" 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>
<button ng-if="ingressClass.NeedsDeletion" class="btn btn-sm btn-primary" type="button" ng-click="ctrl.restoreIngressClass($index)"> <button ng-if="ingressClass.NeedsDeletion" class="btn btn-only-icon btn-light" type="button" ng-click="ctrl.restoreIngressClass($index)">
<i class="fa fa-trash-restore" aria-hidden="true"></i> <pr-icon icon="'rotate-ccw'" feather="true"></pr-icon>
</button> </button>
</div> </div>
</div> </div>
@ -113,26 +113,30 @@
> >
<div class="col-sm-7 input-group"> <div class="col-sm-7 input-group">
<div <div
class="small text-warning" class="small"
style="margin-top: 5px" style="margin-top: 5px"
ng-if="kubernetesClusterSetupForm['ingress_class_name_' + $index].$invalid || ctrl.state.duplicates.ingressClasses.refs[$index] !== undefined" ng-if="kubernetesClusterSetupForm['ingress_class_name_' + $index].$invalid || ctrl.state.duplicates.ingressClasses.refs[$index] !== undefined"
> >
<div ng-messages="kubernetesClusterSetupForm['ingress_class_name_'+$index].$error"> <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="required" class="vertical-center text-muted"
<p ng-message="pattern" ><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Ingress class name is required.</p
><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="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> </div>
<p ng-if="ctrl.state.duplicates.ingressClasses.refs[$index] !== undefined"> <p ng-if="ctrl.state.duplicates.ingressClasses.refs[$index] !== undefined" class="vertical-center text-muted">
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This ingress class is already defined. <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> This ingress class is already defined.
</p> </p>
</div> </div>
</div> </div>
<div class="col-sm-3 input-group"> <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"> <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> </div>
</div> </div>
@ -150,7 +154,7 @@
</div> </div>
<!-- auto update window --> <!-- 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="form-group">
<div class="col-sm-12"> <div class="col-sm-12">
@ -161,11 +165,16 @@
feature-id="ctrl.limitedFeatureAutoWindow" feature-id="ctrl.limitedFeatureAutoWindow"
tooltip="'Specify a timeframe during which automatic updates can occur in this environment.'" tooltip="'Specify a timeframe during which automatic updates can occur in this environment.'"
on-change="(ctrl.onToggleAutoUpdate)" on-change="(ctrl.onToggleAutoUpdate)"
label-class="'col-sm-3 col-lg-2 px-0 !m-0'"
switch-class="'col-sm-8'"
> >
</por-switch-field> </por-switch-field>
</div> </div>
</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="col-sm-12 form-section-title"> Security </div>
<div class="form-group"> <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. By default, all the users have access to the default namespace. Enable this option to set accesses on the default namespace.
</span> </span>
</div> </div>
<div class="form-group"> <div class="form-group">
<div class="col-sm-12"> <div class="col-sm-12">
<label class="control-label text-left"> Restrict access to the default namespace </label> <label class="control-label text-left col-sm-3 col-lg-2 px-0"> Restrict access to the default namespace </label>
<label class="switch" style="margin-left: 20px"> <label class="switch col-sm-8">
<input type="checkbox" ng-model="ctrl.formValues.RestrictDefaultNamespace" /><i data-cy="kubeSetup-restrictDefaultNsToggle"></i> <input type="checkbox" ng-model="ctrl.formValues.RestrictDefaultNamespace" /><span class="slider round" data-cy="kubeSetup-restrictDefaultNsToggle"></span>
</label> </label>
</div> </div>
</div> </div>
<!-- #endregion -->
<div class="col-sm-12 form-section-title"> Resources and Metrics </div> <div class="col-sm-12 form-section-title"> Resources and Metrics </div>
<div class="form-group"> <div class="form-group">
<span class="col-sm-12 text-muted small"> <div 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 <p>
deployment failures if there is insufficient resource to service demand. 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
<p style="margin-top: 2px"> deployment failures if there is insufficient resource to service demand.
<i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px"></i> </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 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. minus any system resource reservation.
</p> </p>
</span> </div>
</div>
<div class="form-group">
<div class="col-sm-12"> <div class="col-sm-12">
<por-switch-field <por-switch-field
data-cy="'kubeSetup-resourceOverCommitToggle'" data-cy="'kubeSetup-resourceOverCommitToggle'"
@ -204,25 +216,28 @@
feature-id="ctrl.limitedFeature" feature-id="ctrl.limitedFeature"
checked="ctrl.formValues.EnableResourceOverCommit" checked="ctrl.formValues.EnableResourceOverCommit"
on-change="(ctrl.onChangeEnableResourceOverCommit)" on-change="(ctrl.onChangeEnableResourceOverCommit)"
label-class="'col-sm-3 col-lg-2 px-0 !m-0'"
switch-class="'col-sm-8'"
></por-switch-field> ></por-switch-field>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<span class="col-sm-12 text-muted small"> <div 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> Enabling this feature will allow users to use specific features like autoscaling and to see container and node resource usage. </p>
<p style="margin-top: 2px"> <p class="vertical-center mt-1">
<i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px"></i> <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 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. <a href="https://github.com/kubernetes-sigs/prometheus-adapter" target="_blank">prometheus</a> is running inside your cluster.
</p> </p>
</span> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<div class="col-sm-12"> <div class="col-sm-12">
<label class="control-label text-left"> Enable features using the metrics API </label> <label class="control-label text-left col-sm-3 col-lg-2 px-0"> Enable features using the metrics API </label>
<label class="switch" style="margin-left: 20px"> <label class="switch col-sm-8">
<input type="checkbox" ng-model="ctrl.formValues.UseServerMetrics" ng-change="ctrl.enableMetricsServer()" /><i data-cy="kubeSetup-metricsToggle"></i> <input type="checkbox" ng-model="ctrl.formValues.UseServerMetrics" ng-change="ctrl.enableMetricsServer()" />
<span class="slider round" data-cy="kubeSetup-metricsToggle"></span>
</label> </label>
</div> </div>
<div ng-if="ctrl.state.metrics.pending && ctrl.state.metrics.userClick" class="col-sm-12 small text-muted" style="margin-top: 5px"> <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>
<div <div
ng-if="!ctrl.state.metrics.pending && ctrl.state.metrics.isServerRunning && ctrl.state.metrics.userClick" 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" 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>
<div <div
ng-if="!ctrl.state.metrics.pending && !ctrl.state.metrics.isServerRunning && ctrl.state.metrics.userClick" 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 mt-2"
style="margin-top: 5px"
> >
<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 <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.
that cluster.
</div> </div>
</div> </div>
<div class="col-sm-12 form-section-title"> Available storage options </div> <div class="col-sm-12 form-section-title"> Available storage options </div>
<div class="form-group" ng-if="!ctrl.storageClassAvailable()"> <div class="form-group" ng-if="!ctrl.storageClassAvailable()">
<div class="col-sm-12 small text-muted"> <div class="col-sm-12 small text-muted vertical-center">
<i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px"></i> <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. Unable to detect any storage class available to persist data. Users won't be able to persist application data inside this cluster.
</div> </div>
</div> </div>
@ -278,9 +291,9 @@
</tr> </tr>
<tr ng-repeat="class in ctrl.StorageClasses"> <tr ng-repeat="class in ctrl.StorageClasses">
<td> <td>
<div style="margin: 5px"> <div class="flex-center justify-left">
<label class="switch" style="margin-right: 10px"> <label class="switch mr-2 mb-0">
<input type="checkbox" ng-model="class.selected" /><i data-cy="kubeSetup-storageToggle{{ class.Name }}"></i> <input type="checkbox" ng-model="class.selected" /><span class="slider round" data-cy="kubeSetup-storageToggle{{ class.Name }}"></span>
</label> </label>
<span>{{ class.Name }}</span> <span>{{ class.Name }}</span>
</div> </div>
@ -302,8 +315,11 @@
</td> </td>
<td> <td>
<div style="margin: 5px"> <div style="margin: 5px">
<label class="switch" <label class="switch mr-2 mb-0"
><input type="checkbox" ng-model="class.AllowVolumeExpansion" /><i data-cy="kubeSetup-storageExpansionToggle{{ class.Name }}"></i> ><input type="checkbox" ng-model="class.AllowVolumeExpansion" /><span
class="slider round"
data-cy="kubeSetup-storageExpansionToggle{{ class.Name }}"
></span>
</label> </label>
</div> </div>
</td> </td>
@ -312,8 +328,8 @@
</table> </table>
</div> </div>
<div class="col-sm-12"> <div class="col-sm-12">
<span ng-if="!ctrl.hasValidStorageConfiguration()" style="margin-left: 5px" class="text-muted small"> <span ng-if="!ctrl.hasValidStorageConfiguration()" class="text-muted small vertical-center mt-2">
<i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px"></i> <pr-icon icon="'alert-circle'" mode="'warning'" feather="true"></pr-icon>
Shared access policy configuration required Shared access policy configuration required
</span> </span>
</div> </div>

2
app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentItem.tsx
View File

@ -101,7 +101,7 @@ export function EnvironmentItem({ environment, onClick, groupName }: Props) {
<i className="fa fa-memory space-left space-right" /> <i className="fa fa-memory space-left space-right" />
{humanize(environment.Snapshots[0].TotalMemory)} {humanize(environment.Snapshots[0].TotalMemory)}
<i className="fa fa-digital-tachograph space-left space-right" /> <i className="fa fa-digital-tachograph space-left space-right" />
{environment.Gpus.length} {environment.Gpus?.length}
</span> </span>
)} )}
<span className="space-left space-right">-</span> <span className="space-left space-right">-</span>

1
app/portainer/react/components/switch-field.ts
View File

@ -13,4 +13,5 @@ export const switchField = r2a(SwitchField, [
'onChange', 'onChange',
'featureId', 'featureId',
'switchValues', 'switchValues',
'switchClass',
]); ]);

4
app/react/components/form-components/SwitchField/SwitchField.tsx
View File

@ -15,6 +15,7 @@ export interface Props {
name?: string; name?: string;
tooltip?: string; tooltip?: string;
labelClass?: string; labelClass?: string;
switchClass?: string;
dataCy?: string; dataCy?: string;
disabled?: boolean; disabled?: boolean;
featureId?: FeatureId; featureId?: FeatureId;
@ -35,6 +36,7 @@ export function SwitchField({
onChange, onChange,
featureId, featureId,
switchValues, switchValues,
switchClass,
}: Props) { }: Props) {
const toggleName = name ? `toggle_${name}` : ''; const toggleName = name ? `toggle_${name}` : '';
@ -51,7 +53,7 @@ export function SwitchField({
{tooltip && <Tooltip message={tooltip} />} {tooltip && <Tooltip message={tooltip} />}
</span> </span>
<Switch <Switch
className="space-right" className={clsx('space-right', switchClass)}
name={toggleName} name={toggleName}
id={toggleName} id={toggleName}
checked={checked} checked={checked}