From 82fb5f7ac19edce3410b0c5feb08a00e618a3b3f Mon Sep 17 00:00:00 2001 From: Prabhat Khera <91852476+prabhat-org@users.noreply.github.com> Date: Mon, 11 Jul 2022 14:05:23 +1200 Subject: [PATCH] feat(kubernetes): UI improvements kube app create EE-3462 (#7149) --- app/assets/css/icon.css | 8 + .../por-image-registry-rate-limits.html | 8 +- .../imageRegistry/por-image-registry.html | 28 +- app/kubernetes/__module.js | 1 + .../kube-services-item.html | 396 +++++++++--------- .../kube-services/kube-services.html | 31 +- .../create/createApplication.html | 214 ++++++---- app/kubernetes/views/deploy/deploy.html | 40 +- app/kubernetes/views/kubernetes.css | 11 + app/kubernetes/views/summary/summary.html | 8 +- .../git-form-additional-file-item.html | 12 +- .../git-form-additional-files-panel.html | 4 +- .../git-form-auth-fieldset.html | 14 +- .../git-form-auto-update-fieldset.html | 63 +-- .../git-form-compose-path-field.html | 8 +- .../git-form-ref-field.html | 4 +- .../git-form-url-field.html | 4 +- 17 files changed, 469 insertions(+), 385 deletions(-) create mode 100644 app/kubernetes/views/kubernetes.css diff --git a/app/assets/css/icon.css b/app/assets/css/icon.css index 73d06b4d8..9cc2b9b1e 100644 --- a/app/assets/css/icon.css +++ b/app/assets/css/icon.css @@ -122,3 +122,11 @@ pr-icon { display: flex; align-items: center; } + +.btn-only-icon { + padding: 6px; +} + +.btn-only-icon pr-icon { + margin-top: 0; +} diff --git a/app/docker/components/imageRegistry/por-image-registry-rate-limits.html b/app/docker/components/imageRegistry/por-image-registry-rate-limits.html index dbbbe1951..d55189f44 100644 --- a/app/docker/components/imageRegistry/por-image-registry-rate-limits.html +++ b/app/docker/components/imageRegistry/por-image-registry-rate-limits.html @@ -1,7 +1,7 @@
-
- +
+ You are currently using a free account to pull images from DockerHub and will be limited to 200 pulls every 6 hours. Remaining pulls: {{ $ctrl.pullRateLimits.remaining }}/{{ $ctrl.pullRateLimits.limit }} @@ -19,8 +19,8 @@
-
- +
+ Your authorized pull count quota as a free user is now exceeded. You will not be able to pull any image from the DockerHub registry. diff --git a/app/docker/components/imageRegistry/por-image-registry.html b/app/docker/components/imageRegistry/por-image-registry.html index 21389ddb8..4611b035d 100644 --- a/app/docker/components/imageRegistry/por-image-registry.html +++ b/app/docker/components/imageRegistry/por-image-registry.html @@ -1,8 +1,8 @@ -
+
- -
+ +
- -
+
+
+ +
{{ $ctrl.displayedRegistryURL() }} - Search + Search
@@ -45,13 +47,13 @@
-

- +

+ When using advanced mode, image and repository must be publicly available.

- -
+ +
@@ -59,10 +61,10 @@
-
+

- Image name is required. + Image name is required. Tag must be specified otherwise Portainer will pull all tags associated to the image.

diff --git a/app/kubernetes/__module.js b/app/kubernetes/__module.js index d31a54027..8def97d1b 100644 --- a/app/kubernetes/__module.js +++ b/app/kubernetes/__module.js @@ -1,6 +1,7 @@ import registriesModule from './registries'; import customTemplateModule from './custom-templates'; import { reactModule } from './react'; +import './views/kubernetes.css'; angular.module('portainer.kubernetes', ['portainer.app', registriesModule, customTemplateModule, reactModule]).config([ '$stateRegistryProvider', diff --git a/app/kubernetes/components/kube-services/kube-services-item/kube-services-item.html b/app/kubernetes/components/kube-services/kube-services-item/kube-services-item.html index df7c93b57..43c2cf447 100644 --- a/app/kubernetes/components/kube-services/kube-services-item/kube-services-item.html +++ b/app/kubernetes/components/kube-services/kube-services-item/kube-services-item.html @@ -1,12 +1,14 @@ -
+

- No Load balancer is available in this cluster, click + No Load balancer is available in this cluster, click here to configure load balancer.

-
-

No Load balancer is available in this cluster, contract your administrator.

+
+

+ No Load balancer is available in this cluster, contract your administrator. +

-
+
- - publish a new port + + publish a new port
-
-
- container port - -
- -
- service port - -
- -
- nodeport - -
- -
- loadbalancer port - -
- -
- ingress - -
- -
- hostname - -
- -
- route - -
- -
-
- - +
+
+
+ container port +
- + +
+ This container port is already used. +
+
+

Container port number is required.

+

Container port number must be inside the range 1-65535.

+

Container port number must be inside the range 1-65535.

+
+
-
-
-
-

- This container port is already used. -

-
-
-

Container port number is required.

-

Container port number must be inside the range 1-65535.

-

Container port number must be inside the range 1-65535.

-
+
+
+ service port +
- -
-
-

- This service port is already used. -

+ +
+ This service port is already used.
-
+
-

Service port number is required.

-

Container port number must be inside the range 1-65535.

-

Container port number must be inside the range 1-65535.

+

Service port number is required.

+

Container port number must be inside the range 1-65535.

+

Container port number must be inside the range 1-65535.

-
+ +
-
-
-
-

Node port number must be inside the range 30000-32767 or blank for system allocated.

-

Node port number must be inside the range 30000-32767 or blank for system allocated.

+
+
+ nodeport + +
+
+ +
+
+

Node port number must be inside the range 30000-32767 or blank for system + allocated.

+

Node port number must be inside the range 30000-32767 or blank for system + allocated.

+
-
+
+
+
+
+ loadbalancer port + +
+
-
-
+
+
+ ingress + +
+ +
-

Ingress selection is required.

+

Ingress selection is required.

-
+ +
-
-
+
+
+ hostname + +
+ +
-

Host is required.

+

Host is required.

+ +
+ +
+
+ route +
-
-
+ +
-

Route is required.

+

Route is required.

This field must consist of alphanumeric characters or the special characters: '-', '_' or '/'. It - must start and end with an alphanumeric character (e.g. 'my-route', or 'route-123').

This field must consist of alphanumeric characters or the special characters: '-', '_' + or '/'. It must start and end with an alphanumeric character (e.g. 'my-route', or 'route-123').

+ +
+ +
+
+
+ + +
+
diff --git a/app/kubernetes/components/kube-services/kube-services.html b/app/kubernetes/components/kube-services/kube-services.html index a33753a79..3aca90531 100644 --- a/app/kubernetes/components/kube-services/kube-services.html +++ b/app/kubernetes/components/kube-services/kube-services.html @@ -9,8 +9,14 @@ ng-options="item.typeValue as item.typeName for item in $ctrl.state.serviceType" data-cy="k8sAppCreate-publishingModeDropdown" > -
@@ -33,12 +39,12 @@ >
@@ -47,25 +53,26 @@ Ingress
-
+

- Ingress is not configured in this namespace, select another namespace or click + Ingress is not configured in this namespace, select another namespace or click here to configure ingress.

-
+

- Ingress is not configured in this namespace, select another namespace or contact your administrator. + Ingress is not configured in this namespace, select another namespace or contact your + administrator.

@@ -85,12 +92,12 @@ >
diff --git a/app/kubernetes/views/applications/create/createApplication.html b/app/kubernetes/views/applications/create/createApplication.html index 405406452..5871921cd 100644 --- a/app/kubernetes/views/applications/create/createApplication.html +++ b/app/kubernetes/views/applications/create/createApplication.html @@ -33,7 +33,7 @@
-
+
@@ -50,8 +50,8 @@
Namespace
- -
+ +
-
+
-

This field is required.

+

This field is required.

- + This field must consist of lower case alphanumeric characters or '-', contain at most 63 characters, start with an alphabetic character, and end with an alphanumeric character (e.g. 'my-name', or 'abc-123').

- + An application with the same name already exists inside the selected namespace.

@@ -160,8 +160,7 @@ - -
+
+ +
Stack
- + Portainer can automatically bundle multiple applications inside a stack. Enter a name of a new stack or select an existing stack in the list. Leave empty to use the application name.
- -
+ +
Environment variables - add environment variable + add environment variable
@@ -257,17 +258,17 @@
-
@@ -279,7 +280,7 @@ >
-

Environment variable name is required.

+

Environment variable name is required.

This field must consist of alphabetic characters, digits, '_', '-', or '.', and - must not start with a digit (e.g. 'my.env-name', or 'MY_ENV.NAME', or 'MyEnvName1'.

This field must consist of alphabetic characters, digits, '_', '-', + or '.', and must not start with a digit (e.g. 'my.env-name', or 'MY_ENV.NAME', or 'MyEnvName1'.

This environment variable is already defined.

This environment variable is already defined.

@@ -312,17 +313,17 @@
- add configuration + add configuration
- + Portainer will automatically expose all the keys of a configuration as environment variables. This behavior can be overridden to filesystem mounts for each key via the override button.
@@ -330,8 +331,8 @@
- -
+ +
-
+
-
-
+
+
The following keys will be loaded from the {{ config.SelectedConfiguration.Name }} configuration as environment variables: {{ key }}
@@ -440,10 +441,10 @@ " > -

Path is required.

+

Path is required.

This path is already used.

This path is already used.

@@ -460,13 +461,13 @@
- + No storage option is available to persist data, contact your administrator to enable a storage option.
-
+
- add persisted folder + add persisted folder + +
+ +
+ + + This namespace has exhausted its storage capacity. Contact your administrator to expand the capacity of the namespace.
@@ -536,6 +544,7 @@ ng-min="0" required ng-disabled="ctrl.isEditAndExistingPersistedFolder($index) || ctrl.formValues.Containers.length > 1" + ng-change="ctrl.onChangeVolumeRequestedSize()" />
@@ -591,7 +601,7 @@ ng-click="ctrl.removePersistedFolder($index)" data-cy="k8sAppCreate-rmPersistentFolderButton" > - +
@@ -611,6 +621,7 @@ kubernetesApplicationCreationForm['persisted_folder_path_' + $index].$invalid || ctrl.state.duplicates.persistedFolders.refs[$index] !== undefined || kubernetesApplicationCreationForm['persisted_folder_size_' + $index].$invalid || + ctrl.state.exceeded.persistedFolders.refs[$index] !== undefined || kubernetesApplicationCreationForm['existing_volumes_' + $index].$invalid || ctrl.state.duplicates.existingVolumes.refs[$index] !== undefined " @@ -624,10 +635,10 @@ " > -

Path is required.

+

Path is required.

This path is already defined.

This path is already defined.

@@ -635,21 +646,33 @@
-
+
-

Size is required.

-

This value must be greater than zero.

+

Size is required.

+

This value must be greater than zero.

 +

+ + You can only request up to + {{ ctrl.state.storages.availabilities[persistedFolder.StorageClass.Name] | kubernetesAppStorageRequestSizeHumanReadable }} for + {{ persistedFolder.StorageClass.Name }} +

-

Volume is required.

+

Volume is required.

This volume is already used.

This volume is already used.

@@ -761,14 +784,14 @@
- + Resource reservations are applied per instance of the application.
- + A resource quota is set on this namespace, you must specify resource reservations. Resource reservations are applied per instance of the application. Maximums are inherited from the namespace quota.
@@ -776,7 +799,7 @@
- + This namespace has exhausted its resource capacity and you will not be able to deploy the application. Contact your administrator to expand the capacity of the namespace.
@@ -820,7 +843,7 @@

Value must be between {{ ctrl.state.sliders.memory.min }} and + > Value must be between {{ ctrl.state.sliders.memory.min }} and {{ ctrl.state.sliders.memory.max }}

@@ -851,7 +874,7 @@
- + These reservations would exceed the resources currently available in the cluster.
@@ -942,10 +965,10 @@
-
+
-

Instance count is required.

-

Instance count must be greater than 0.

+

Instance count is required.

+

Instance count must be greater than 0.
@@ -956,7 +979,7 @@ ng-if="!ctrl.resourceReservationsOverflow() && ctrl.formValues.ReplicaCount > 1 && (ctrl.formValues.CpuLimit !== 0 || ctrl.formValues.MemoryLimit !== 0)" >
- + This application will reserve the following resources: {{ ctrl.formValues.CpuLimit * ctrl.formValues.ReplicaCount | kubernetesApplicationCPUValue }} CPU and {{ ctrl.formValues.MemoryLimit * ctrl.formValues.ReplicaCount }} MB of memory. @@ -964,15 +987,22 @@
-
- +
+ This application would exceed available resources. Please review resource reservations or the instance count.
+
+
+ + This application would exceed available storage. Please review the persisted folders or the instance count. +
+
+
- + The following storage option(s) do not support concurrent access from multiples instances: {{ ctrl.getNonScalableStorage() }}. You will not be able to scale that application.
@@ -1037,9 +1067,11 @@
-

Minimum instances is required.

-

Minimum instances must be greater than 0.

-

Minimum instances must be smaller than maximum instances.

+

Minimum instances is required.

+

Minimum instances must be greater than 0.

+

Minimum instances must be smaller than maximum instances.
@@ -1057,8 +1089,10 @@
-

Maximum instances is required.

-

Maximum instances must be greater than minimum instances.

+

Maximum instances is required.

+

Maximum instances must be greater than minimum instances.
@@ -1079,9 +1113,9 @@
-

Target CPU usage is required.

-

Target CPU usage must be greater than 0.

-

Target CPU usage must be smaller than 100.

+

Target CPU usage is required.

+

Target CPU usage must be greater than 0.

+

Target CPU usage must be smaller than 100.
@@ -1092,7 +1126,7 @@
- + This application would exceed available resources. Please review resource reservations or the maximum instance count of the auto-scaling policy.
@@ -1106,13 +1140,13 @@
- - add rule + + add rule
- + Deploy this application on nodes that respect ALL of the following placement rules. Placement rules are based on node labels.
@@ -1143,21 +1177,21 @@
@@ -1165,7 +1199,7 @@

- This label is already defined. + This label is already defined.

@@ -1257,14 +1291,14 @@
- + This namespace has exhausted its resource capacity and you will not be able to deploy the application. Contact your administrator to expand the capacity of the namespace.
- + You do not have access to any namespace. Contact your administrator to get access to a namespace.
diff --git a/app/kubernetes/views/deploy/deploy.html b/app/kubernetes/views/deploy/deploy.html index f55d395af..ce112cb80 100644 --- a/app/kubernetes/views/deploy/deploy.html +++ b/app/kubernetes/views/deploy/deploy.html @@ -5,18 +5,18 @@
-
+
- Deploy + Deploy
Namespace
- -
+ +
+ +
+
@@ -41,8 +46,8 @@
- -
+ +
@@ -110,7 +115,7 @@

- + Portainer uses Kompose to convert your Compose manifest to a Kubernetes compliant manifest. Be wary that not all the Compose format options are supported by Kompose at the moment.

@@ -119,12 +124,9 @@ official documentation.

- +

- + This feature allows you to deploy any kind of Kubernetes resource in this environment (Deployment, Secret, ConfigMap...).

@@ -144,8 +146,8 @@ Indicate the URL to the manifest.

- -
+ +
- Logs + Logs
diff --git a/app/kubernetes/views/kubernetes.css b/app/kubernetes/views/kubernetes.css new file mode 100644 index 000000000..4ac609dcd --- /dev/null +++ b/app/kubernetes/views/kubernetes.css @@ -0,0 +1,11 @@ +.service-form .form-group { + vertical-align: top; +} + +.service-form .form-group .input-group { + width: 100%; +} + +.service-form .clear-both { + clear: both; +} diff --git a/app/kubernetes/views/summary/summary.html b/app/kubernetes/views/summary/summary.html index 3b0767e2e..f62cd25f2 100644 --- a/app/kubernetes/views/summary/summary.html +++ b/app/kubernetes/views/summary/summary.html @@ -6,19 +6,19 @@ > Summary - expand - collapse + expand + collapse
- + Portainer will execute the following Kubernetes actions.
-
    +
    • {{ summary.action }} {{ $ctrl.getArticle(summary.kind, summary.action) }} diff --git a/app/portainer/components/forms/git-form/git-form-additional-files-panel/git-form-additional-file-item/git-form-additional-file-item.html b/app/portainer/components/forms/git-form/git-form-additional-files-panel/git-form-additional-file-item/git-form-additional-file-item.html index 414e4fb54..ca030590e 100644 --- a/app/portainer/components/forms/git-form/git-form-additional-files-panel/git-form-additional-file-item/git-form-additional-file-item.html +++ b/app/portainer/components/forms/git-form/git-form-additional-files-panel/git-form-additional-file-item/git-form-additional-file-item.html @@ -13,15 +13,15 @@ required />
-
-
-
-

Path is required.

-

File path must include yaml, yml, json, or hcl extension

+
+
+

Path is required.

+

File path must include yaml, yml, json, or hcl extension

diff --git a/app/portainer/components/forms/git-form/git-form-additional-files-panel/git-form-additional-files-panel.html b/app/portainer/components/forms/git-form/git-form-additional-files-panel/git-form-additional-files-panel.html index ac85dacd2..e69131668 100644 --- a/app/portainer/components/forms/git-form/git-form-additional-files-panel/git-form-additional-files-panel.html +++ b/app/portainer/components/forms/git-form/git-form-additional-files-panel/git-form-additional-files-panel.html @@ -1,7 +1,9 @@
- add file + + add file +
-
- +
+ Enabling authentication will store the credentials and it is advisable to use a git service account
-
+
- -
+ +
-