From e3b6e4a1d37640813c224ad18dbe26c1ea466f12 Mon Sep 17 00:00:00 2001 From: zees-dev <63374656+zees-dev@users.noreply.github.com> Date: Wed, 29 Sep 2021 13:58:04 +1300 Subject: [PATCH] feat(configurations): portainer k8s configurations lingo update for explicitness EE-1626 (#5722) * kubernetes sidebar configuration lingo updated * configurations list view updated * updated configurations list add config button * - updated create and update configuration buttons to display type of configuration being created/updated - configuration filter displays explicit configuration type * updated create configuration sub-title * add configmap wording update * portainer service lingo updated in k8s app creation and update forms * publishing mode text updates * KubernetesApplicationPublishingTypes updated INTERNAL and CLUSTER to CLUSTER_IP and NODE_PORT respectively * application ports datatable updated * updated service and ingress lingo on application view page * reduced spacing to fit in ConfigMaps & Secrets in sidenav for different screen res --- app/assets/css/vendor-override.css | 2 +- .../applicationsPortsDatatable.html | 6 +- .../configurationsDatatable.html | 2 +- .../kubernetes-sidebar.html | 2 +- app/kubernetes/converters/application.js | 4 +- app/kubernetes/converters/service.js | 2 +- app/kubernetes/filters/applicationFilters.js | 20 +- .../filters/configurationFilters.js | 4 +- .../models/application/formValues.js | 2 +- .../models/application/models/constants.js | 4 +- .../create/createApplication.html | 927 +++++++++--------- .../create/createApplicationController.js | 42 +- .../views/applications/edit/application.html | 29 +- .../views/configurations/configurations.html | 4 +- .../create/createConfiguration.html | 8 +- .../configurations/edit/configuration.html | 4 +- app/kubernetes/views/summary/summary.html | 2 +- app/portainer/components/sidebar/sidebar.css | 1 + 18 files changed, 546 insertions(+), 519 deletions(-) diff --git a/app/assets/css/vendor-override.css b/app/assets/css/vendor-override.css index 106e86ff3..5b0152acc 100644 --- a/app/assets/css/vendor-override.css +++ b/app/assets/css/vendor-override.css @@ -287,7 +287,7 @@ json-tree .branch-preview { margin-top: 15px; } -.summary { +.bold { color: var(--text-summary-color); font-weight: 700; } diff --git a/app/kubernetes/components/datatables/applications-ports-datatable/applicationsPortsDatatable.html b/app/kubernetes/components/datatables/applications-ports-datatable/applicationsPortsDatatable.html index 8e8b09e05..c04ec53f0 100644 --- a/app/kubernetes/components/datatables/applications-ports-datatable/applicationsPortsDatatable.html +++ b/app/kubernetes/components/datatables/applications-ports-datatable/applicationsPortsDatatable.html @@ -125,7 +125,7 @@ - Load balancer + LoadBalancer {{ item.LoadBalancerIPAddress }} pending @@ -133,10 +133,10 @@ - Internal + ClusterIP - Cluster + NodePort diff --git a/app/kubernetes/components/datatables/configurations-datatable/configurationsDatatable.html b/app/kubernetes/components/datatables/configurations-datatable/configurationsDatatable.html index 96a5cfc19..657e4b1a5 100644 --- a/app/kubernetes/components/datatables/configurations-datatable/configurationsDatatable.html +++ b/app/kubernetes/components/datatables/configurations-datatable/configurationsDatatable.html @@ -67,7 +67,7 @@ Remove - +
+ + NodePort +
+

Publish this application via a port on all nodes of the cluster

+ + +
+ + + +
+
+ + +
- + + + + +
+
+ + + publish a new port + +
-
-
-
-
-

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 port is already used. -

-
-
+ + When publishing a port in cluster mode, the node port is optional. If left empty Kubernetes will use a random port number. If you wish to specify a port, use + a port number inside the default range 30000-32767. +
+
+ At least one published port must be defined. +
-
+
+ +
-
-

Node port number must be inside the range 30000-32767.

-

Node port number must be inside the range 30000-32767.

-
-

- This port is already used. -

+ container port +
-
-
-
-
-

Ingress selection 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').

node port + +
+ +
+ load balancer port + +
+ +
+ ingress + +
+ +
+ hostname + +
+ +
+ route + +
+ +
+
+ +
-

- This route is already used. -

+ +
+ -
-
-
-

Load balancer port number is required.

-

Load balancer port number must be inside the range 1-65535.

-

Load balancer port number must be inside the range 1-65535.

+ +
+
+
+
+

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 port is already used. +

-

- - This port is already used. -

-
-
+
+
+
+

Node port number must be inside the range 30000-32767.

+

Node port number must be inside the range 30000-32767.

+
+

+ This port is already used. +

+
+
+ +
+
+
+

Ingress selection 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 route is already used. +

+
+
+ +
+
+
+

Load balancer port number is required.

+

Load balancer port number must be inside the range 1-65535.

+

Load balancer port number must be inside the range 1-65535.

+
+

+ + This port is already used. +

+
+
+ +
+
+
-
-
+ diff --git a/app/kubernetes/views/applications/create/createApplicationController.js b/app/kubernetes/views/applications/create/createApplicationController.js index 50bdc685f..24578a374 100644 --- a/app/kubernetes/views/applications/create/createApplicationController.js +++ b/app/kubernetes/views/applications/create/createApplicationController.js @@ -37,6 +37,7 @@ class KubernetesCreateApplicationController { /* @ngInject */ constructor( + $scope, $async, $state, Notifications, @@ -54,6 +55,7 @@ class KubernetesCreateApplicationController { StackService, KubernetesNodesLimitsService ) { + this.$scope = $scope; this.$async = $async; this.$state = $state; this.Notifications = Notifications; @@ -140,6 +142,9 @@ class KubernetesCreateApplicationController { this.deployApplicationAsync = this.deployApplicationAsync.bind(this); this.setPullImageValidity = this.setPullImageValidity.bind(this); this.onChangeFileContent = this.onChangeFileContent.bind(this); + this.onServicePublishChange = this.onServicePublishChange.bind(this); + + this.$scope.$watch(() => this.formValues.IsPublishingService, this.onServicePublishChange); } /* #endregion */ @@ -416,6 +421,27 @@ class KubernetesCreateApplicationController { /* #endregion */ + onServicePublishChange() { + // service creation + if (this.formValues.PublishedPorts.length === 0) { + if (this.formValues.IsPublishingService) { + // toggle enabled + this.addPublishedPort(); + } + return; + } + + // service update + if (this.formValues.IsPublishingService) { + // toggle enabled + this.formValues.PublishedPorts.forEach((port) => (port.NeedsDeletion = false)); + } else { + // toggle disabled + // all new ports need to be deleted, existing ports need to be marked as needing deletion + this.formValues.PublishedPorts = this.formValues.PublishedPorts.filter((port) => !port.IsNew).map((port) => ({ ...port, NeedsDeletion: true })); + } + } + /* #region PUBLISHED PORTS UI MANAGEMENT */ addPublishedPort() { const p = new KubernetesApplicationPublishedPortFormValue(); @@ -476,7 +502,7 @@ class KubernetesCreateApplicationController { onChangePortMappingNodePort() { const state = this.state.duplicates.publishedPorts.nodePorts; - if (this.formValues.PublishingType === KubernetesApplicationPublishingTypes.CLUSTER) { + if (this.formValues.PublishingType === KubernetesApplicationPublishingTypes.NODE_PORT) { const source = _.map(this.formValues.PublishedPorts, (p) => (p.NeedsDeletion ? undefined : p.NodePort)); const duplicates = KubernetesFormValidationHelper.getDuplicates(source); state.refs = duplicates; @@ -736,10 +762,8 @@ class KubernetesCreateApplicationController { return this.state.isEdit && !this.formValues.PublishedPorts[index].IsNew; } - isNotInternalAndHasNoPublishedPorts() { - const toDelPorts = _.filter(this.formValues.PublishedPorts, { NeedsDeletion: true }); - const toKeepPorts = _.without(this.formValues.PublishedPorts, ...toDelPorts); - return this.formValues.PublishingType !== KubernetesApplicationPublishingTypes.INTERNAL && toKeepPorts.length === 0; + hasNoPublishedPorts() { + return this.formValues.PublishedPorts.filter((port) => !port.NeedsDeletion).length === 0; } isEditAndNotNewPlacement(index) { @@ -771,8 +795,8 @@ class KubernetesCreateApplicationController { const invalid = !this.isValid(); const hasNoChanges = this.isEditAndNoChangesMade(); const nonScalable = this.isNonScalable(); - const notInternalNoPorts = this.isNotInternalAndHasNoPublishedPorts(); - return overflow || autoScalerOverflow || inProgress || invalid || hasNoChanges || nonScalable || notInternalNoPorts; + const isPublishingWithoutPorts = this.formValues.IsPublishingService && this.hasNoPublishedPorts(); + return overflow || autoScalerOverflow || inProgress || invalid || hasNoChanges || nonScalable || isPublishingWithoutPorts; } disableLoadBalancerEdit() { @@ -926,7 +950,7 @@ class KubernetesCreateApplicationController { if (this.savedFormValues) { this.formValues.PublishingType = this.savedFormValues.PublishingType; } else { - this.formValues.PublishingType = this.ApplicationPublishingTypes.INTERNAL; + this.formValues.PublishingType = this.ApplicationPublishingTypes.CLUSTER_IP; } } this.formValues.OriginalIngresses = this.ingresses; @@ -1114,6 +1138,8 @@ class KubernetesCreateApplicationController { this.nodesLimits.excludesPods(this.application.Pods, this.formValues.CpuLimit, KubernetesResourceReservationHelper.bytesValue(this.formValues.MemoryLimit)); } + this.formValues.IsPublishingService = this.formValues.PublishedPorts.length > 0; + this.updateNamespaceLimits(); this.updateSliders(); } catch (err) { diff --git a/app/kubernetes/views/applications/edit/application.html b/app/kubernetes/views/applications/edit/application.html index a771d4285..49df77531 100644 --- a/app/kubernetes/views/applications/edit/application.html +++ b/app/kubernetes/views/applications/edit/application.html @@ -253,7 +253,8 @@
- This application is exposed through an external load balancer. Use the links below to access the different ports exposed. + This application is exposed through a service of type {{ ctrl.application.ServiceType }}. Refer to the port configuration below to access it.
@@ -282,45 +283,41 @@
- +
- This application is exposed globally on all nodes of your cluster. It can be reached using the IP address of any node in your cluster using the port configuration - below. + This application is exposed through a service of type {{ ctrl.application.ServiceType }}. It can be reached using the IP address of any node in your cluster using the port configuration below.
- +
- This application is only available for internal usage inside the cluster via the application name {{ ctrl.application.ServiceName }} + This application is exposed through a service of type {{ ctrl.application.ServiceType }}. It can be reached via the application name {{ ctrl.application.ServiceName }} and the port configuration below. Copy
-
-

Refer to the below port configuration to access the application.

-
- +

- This application is available for internal usage inside the cluster via the application name {{ ctrl.application.ServiceName }} + This application is exposed through a service of type {{ ctrl.application.ServiceType }}. It can be reached via the application name {{ ctrl.application.ServiceName }} and the port configuration below. Copy

-

It can also be accessed via specific HTTP route(s).

-
-
-

Refer to the below port configuration to access the application.

+

It is also associated to an Ingress and can be accessed via specific HTTP route(s).

@@ -330,7 +327,7 @@ Container port - {{ ctrl.application.ServiceType | kubernetesApplicationPortsTableHeaderText }} port + Service port HTTP route diff --git a/app/kubernetes/views/configurations/configurations.html b/app/kubernetes/views/configurations/configurations.html index 8e55b4fc8..48c5141d6 100644 --- a/app/kubernetes/views/configurations/configurations.html +++ b/app/kubernetes/views/configurations/configurations.html @@ -1,5 +1,5 @@ - - Configurations + + ConfigMaps & Secrets diff --git a/app/kubernetes/views/configurations/create/createConfiguration.html b/app/kubernetes/views/configurations/create/createConfiguration.html index 870a29806..3c652740d 100644 --- a/app/kubernetes/views/configurations/create/createConfiguration.html +++ b/app/kubernetes/views/configurations/create/createConfiguration.html @@ -1,5 +1,5 @@ - Configurations > Create a configuration + ConfigMaps and Secrets > Create a configuration @@ -95,7 +95,7 @@ @@ -105,7 +105,7 @@ @@ -153,7 +153,7 @@ button-spinner="ctrl.state.actionInProgress" data-cy="k8sConfigCreate-CreateConfigButton" > - Create configuration + Create {{ ctrl.formValues.Type | kubernetesConfigurationTypeText }} Creation in progress...
diff --git a/app/kubernetes/views/configurations/edit/configuration.html b/app/kubernetes/views/configurations/edit/configuration.html index 33efc651c..c115c614f 100644 --- a/app/kubernetes/views/configurations/edit/configuration.html +++ b/app/kubernetes/views/configurations/edit/configuration.html @@ -1,7 +1,7 @@ Namespaces > {{ ctrl.configuration.Namespace }} > - Configurations > {{ ctrl.configuration.Name }} + ConfigMaps and Secrets > {{ ctrl.configuration.Name }} @@ -106,7 +106,7 @@ button-spinner="ctrl.state.actionInProgress" data-cy="k8sConfigDetail-updateConfig" > - Update configuration + Update {{ ctrl.configuration.Type | kubernetesConfigurationTypeText }} Update in progress...
diff --git a/app/kubernetes/views/summary/summary.html b/app/kubernetes/views/summary/summary.html index cb62834f9..a023cb12a 100644 --- a/app/kubernetes/views/summary/summary.html +++ b/app/kubernetes/views/summary/summary.html @@ -22,7 +22,7 @@
  • {{ summary.action }} {{ $ctrl.getArticle(summary.kind, summary.action) }} - {{ summary.kind }} named {{ summary.name }} + {{ summary.kind }} named {{ summary.name }} of type {{ summary.type }} diff --git a/app/portainer/components/sidebar/sidebar.css b/app/portainer/components/sidebar/sidebar.css index ad6016ddb..f8f9b82bd 100644 --- a/app/portainer/components/sidebar/sidebar.css +++ b/app/portainer/components/sidebar/sidebar.css @@ -271,6 +271,7 @@ ul.sidebar .sidebar-title .form-control { ul.sidebar .sidebar-list a, ul.sidebar .sidebar-list .sidebar-sublist a { line-height: 36px; + letter-spacing: -0.03em; } ul.sidebar .sidebar-list .menu-icon {