Add support for ingress hostnames

10 files changed, 88 insertions, 79 deletions

diff --git a/app/assets/javascripts/clusters/components/applications.vue b/app/assets/javascripts/clusters/components/applications.vue
index f74cd71de04..13e8617c515 100644
--- a/app/assets/javascripts/clusters/components/applications.vue
+++ b/app/assets/javascripts/clusters/components/applications.vue
@@ -89,53 +89,26 @@ export default {
     ingressInstalled() {
       return this.applications.ingress.status === APPLICATION_STATUS.INSTALLED;
     },
-    ingressExternalIp() {
-      return this.applications.ingress.externalIp;
+    ingressExternalEndpoint() {
+      return this.applications.ingress.externalIp || this.applications.ingress.externalHostname;
     },
     certManagerInstalled() {
       return this.applications.cert_manager.status === APPLICATION_STATUS.INSTALLED;
     },
     ingressDescription() {
-      const extraCostParagraph = sprintf(
-        _.escape(
-          s__(
-            `ClusterIntegration|%{boldNotice} This will add some extra resources
-            like a load balancer, which may incur additional costs depending on
-            the hosting provider your Kubernetes cluster is installed on. If you are using
-            Google Kubernetes Engine, you can %{pricingLink}.`,
-          ),
-        ),
-        {
-          boldNotice: `<strong>${_.escape(s__('ClusterIntegration|Note:'))}</strong>`,
-          pricingLink: `<a href="https://cloud.google.com/compute/pricing#lb" target="_blank" rel="noopener noreferrer">
-              ${_.escape(s__('ClusterIntegration|check the pricing here'))}</a>`,
-        },
-        false,
-      );
-
-      const externalIpParagraph = sprintf(
+      return sprintf(
         _.escape(
           s__(
-            `ClusterIntegration|After installing Ingress, you will need to point your wildcard DNS
-            at the generated external IP address in order to view your app after it is deployed. %{ingressHelpLink}`,
+            `ClusterIntegration|Installing Ingress may incur additional costs. Learn more about %{pricingLink}.`,
           ),
         ),
         {
-          ingressHelpLink: `<a href="${this.ingressHelpPath}">
-              ${_.escape(s__('ClusterIntegration|More information'))}
-            </a>`,
+          pricingLink: `<strong><a href="https://cloud.google.com/compute/pricing#lb"
+              target="_blank" rel="noopener noreferrer">
+              ${_.escape(s__('ClusterIntegration|pricing'))}</a></strong>`,
         },
         false,
       );
-
-      return `
-          <p>
-            ${extraCostParagraph}
-          </p>
-          <p class="settings-message append-bottom-0">
-            ${externalIpParagraph}
-          </p>
-        `;
     },
     certManagerDescription() {
       return sprintf(
@@ -196,11 +169,26 @@ export default {
     knativeUpgradeFailed() {
       return this.knative.status === APPLICATION_STATUS.UPDATE_ERRORED;
     },
-    knativeExternalIp() {
-      return this.knative.externalIp;
+    knativeExternalEndpoint() {
+      return this.knative.externalIp || this.knative.externalHostname;
+    },
+    knativeDescription() {
+      return sprintf(
+        _.escape(
+          s__(
+            `ClusterIntegration|Installing Knative may incur additional costs. Learn more about %{pricingLink}.`,
+          ),
+        ),
+        {
+          pricingLink: `<strong><a href="https://cloud.google.com/compute/pricing#lb"
+              target="_blank" rel="noopener noreferrer">
+              ${_.escape(s__('ClusterIntegration|pricing'))}</a></strong>`,
+        },
+        false,
+      );
     },
     canUpdateKnativeEndpoint() {
-      return this.knativeExternalIp && !this.knativeUpgradeFailed && !this.knativeUpgrading;
+      return this.knativeExternalEndpoint && !this.knativeUpgradeFailed && !this.knativeUpgrading;
     },
     knativeHostname: {
       get() {
@@ -289,31 +277,31 @@ export default {
 
           <template v-if="ingressInstalled">
             <div class="form-group">
-              <label for="ingress-ip-address">
-                {{ s__('ClusterIntegration|Ingress IP Address') }}
+              <label for="ingress-endpoint">
+                {{ s__('ClusterIntegration|Ingress Endpoint') }}
               </label>
-              <div v-if="ingressExternalIp" class="input-group">
+              <div v-if="ingressExternalEndpoint" class="input-group">
                 <input
-                  id="ingress-ip-address"
-                  :value="ingressExternalIp"
+                  id="ingress-endpoint"
+                  :value="ingressExternalEndpoint"
                   type="text"
-                  class="form-control js-ip-address"
+                  class="form-control js-endpoint"
                   readonly
                 />
                 <span class="input-group-append">
                   <clipboard-button
-                    :text="ingressExternalIp"
-                    :title="s__('ClusterIntegration|Copy Ingress IP Address to clipboard')"
+                    :text="ingressExternalEndpoint"
+                    :title="s__('ClusterIntegration|Copy Ingress Endpoint to clipboard')"
                     class="input-group-text js-clipboard-btn"
                   />
                 </span>
               </div>
-              <input v-else type="text" class="form-control js-ip-address" readonly value="?" />
+              <input v-else type="text" class="form-control js-endpoint" readonly value="?" />
               <p class="form-text text-muted">
                 {{
                   s__(`ClusterIntegration|Point a wildcard DNS to this
-                generated IP address in order to access
-                your application after it has been deployed.`)
+                  generated endpoint in order to access
+                  your application after it has been deployed.`)
                 }}
                 <a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer">
                   {{ __('More information') }}
@@ -321,19 +309,21 @@ export default {
               </p>
             </div>
 
-            <p v-if="!ingressExternalIp" class="settings-message js-no-ip-message">
+            <p v-if="!ingressExternalEndpoint" class="settings-message js-no-endpoint-message">
               {{
-                s__(`ClusterIntegration|The IP address is in
-              the process of being assigned. Please check your Kubernetes
-              cluster or Quotas on Google Kubernetes Engine if it takes a long time.`)
+                s__(`ClusterIntegration|The endpoint is in
+                the process of being assigned. Please check your Kubernetes
+                cluster or Quotas on Google Kubernetes Engine if it takes a long time.`)
               }}
 
-              <a :href="ingressHelpPath" target="_blank" rel="noopener noreferrer">
+              <a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer">
                 {{ __('More information') }}
               </a>
             </p>
           </template>
-          <div v-html="ingressDescription"></div>
+          <template v-if="!ingressInstalled">
+            <div class="bs-callout bs-callout-info" v-html="ingressDescription"></div>
+          </template>
         </div>
       </application-row>
       <application-row
@@ -443,7 +433,7 @@ export default {
             }}
           </p>
 
-          <template v-if="ingressExternalIp">
+          <template v-if="ingressExternalEndpoint">
             <div class="form-group">
               <label for="jupyter-hostname">
                 {{ s__('ClusterIntegration|Jupyter Hostname') }}
@@ -468,7 +458,7 @@ export default {
               <p v-if="ingressInstalled" class="form-text text-muted">
                 {{
                   s__(`ClusterIntegration|Replace this with your own hostname if you want.
-                If you do so, point hostname to Ingress IP Address from above.`)
+                  If you do so, point hostname to Ingress IP Address from above.`)
                 }}
                 <a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer">
                   {{ __('More information') }}
@@ -493,10 +483,10 @@ export default {
       >
         <div slot="description">
           <span v-if="!rbac">
-            <p v-if="!rbac" class="bs-callout bs-callout-info append-bottom-0">
+            <p v-if="!rbac" class="rbac-notice bs-callout bs-callout-info append-bottom-0">
               {{
                 s__(`ClusterIntegration|You must have an RBAC-enabled cluster
-              to install Knative.`)
+                to install Knative.`)
               }}
               <a :href="helpPath" target="_blank" rel="noopener noreferrer">
                 {{ __('More information') }}
@@ -534,31 +524,31 @@ export default {
             </template>
             <template v-if="knativeInstalled">
               <div class="form-group col-sm-12 col-md-6 pl-md-0 mb-0 mt-3 mt-md-0">
-                <label for="knative-ip-address">
+                <label for="knative-endpoint">
                   <strong>
                     {{ s__('ClusterIntegration|Knative Endpoint:') }}
                   </strong>
                 </label>
-                <div v-if="knativeExternalIp" class="input-group">
+                <div v-if="knativeExternalEndpoint" class="input-group">
                   <input
-                    id="knative-ip-address"
-                    :value="knativeExternalIp"
+                    id="knative-endpoint"
+                    :value="knativeExternalEndpoint"
                     type="text"
-                    class="form-control js-knative-ip-address"
+                    class="form-control js-knative-endpoint"
                     readonly
                   />
                   <span class="input-group-append">
                     <clipboard-button
-                      :text="knativeExternalIp"
+                      :text="knativeExternalEndpoint"
                       :title="s__('ClusterIntegration|Copy Knative Endpoint to clipboard')"
-                      class="input-group-text js-knative-ip-clipboard-btn"
+                      class="input-group-text js-knative-endpoint-clipboard-btn"
                     />
                   </span>
                 </div>
                 <input
                   v-else
                   type="text"
-                  class="form-control js-knative-ip-address"
+                  class="form-control js-knative-endpoint"
                   readonly
                   value="?"
                 />
@@ -576,13 +566,13 @@ export default {
               </p>
 
               <p
-                v-if="!knativeExternalIp"
-                class="settings-message js-no-knative-ip-message mt-2 mr-3 mb-0 ml-3 "
+                v-if="!knativeExternalEndpoint"
+                class="settings-message js-no-knative-endpoint-message mt-2 mr-3 mb-0 ml-3"
               >
                 {{
-                  s__(`ClusterIntegration|The IP address is in
-                the process of being assigned. Please check your Kubernetes
-                cluster or Quotas on Google Kubernetes Engine if it takes a long time.`)
+                  s__(`ClusterIntegration|The endpoint is in
+                  the process of being assigned. Please check your Kubernetes
+                  cluster or Quotas on Google Kubernetes Engine if it takes a long time.`)
                 }}
               </p>
 
diff --git a/app/assets/javascripts/clusters/stores/clusters_store.js b/app/assets/javascripts/clusters/stores/clusters_store.js
index 3f03a8512fc..92993337f02 100644
--- a/app/assets/javascripts/clusters/stores/clusters_store.js
+++ b/app/assets/javascripts/clusters/stores/clusters_store.js
@@ -25,6 +25,7 @@ export default class ClusterStore {
           requestStatus: null,
           requestReason: null,
           externalIp: null,
+          externalHostname: null,
         },
         cert_manager: {
           title: s__('ClusterIntegration|Cert-Manager'),
@@ -68,6 +69,7 @@ export default class ClusterStore {
           hostname: null,
           isEditingHostName: false,
           externalIp: null,
+          externalHostname: null,
         },
       },
     };
@@ -120,6 +122,7 @@ export default class ClusterStore {
 
       if (appId === INGRESS) {
         this.state.applications.ingress.externalIp = serverAppEntry.external_ip;
+        this.state.applications.ingress.externalHostname = serverAppEntry.external_hostname;
       } else if (appId === CERT_MANAGER) {
         this.state.applications.cert_manager.email =
           this.state.applications.cert_manager.email || serverAppEntry.email;
@@ -136,6 +139,8 @@ export default class ClusterStore {
         }
         this.state.applications.knative.externalIp =
           serverAppEntry.external_ip || this.state.applications.knative.externalIp;
+        this.state.applications.knative.externalHostname =
+          serverAppEntry.external_hostname || this.state.applications.knative.externalHostname;
       } else if (appId === RUNNER) {
         this.state.applications.runner.version = version;
         this.state.applications.runner.upgradeAvailable = upgradeAvailable;
diff --git a/app/models/clusters/applications/ingress.rb b/app/models/clusters/applications/ingress.rb
index 7c15aaa4825..567f1a2267f 100644
--- a/app/models/clusters/applications/ingress.rb
+++ b/app/models/clusters/applications/ingress.rb
@@ -48,6 +48,7 @@ module Clusters
       def schedule_status_update
         return unless installed?
         return if external_ip
+        return if external_hostname
 
         ClusterWaitForIngressIpAddressWorker.perform_async(name, id)
       end
diff --git a/app/models/clusters/applications/jupyter.rb b/app/models/clusters/applications/jupyter.rb
index 80205775b6a..7efcc175f9f 100644
--- a/app/models/clusters/applications/jupyter.rb
+++ b/app/models/clusters/applications/jupyter.rb
@@ -18,8 +18,10 @@ module Clusters
 
       def set_initial_status
         return unless not_installable?
+        return unless cluster&.application_ingress_available?
 
-        if cluster&.application_ingress_available? && cluster.application_ingress.external_ip
+        ingress = cluster.application_ingress
+        if ingress.external_ip || ingress.external_hostname
           self.status = 'installable'
         end
       end
diff --git a/app/models/clusters/applications/knative.rb b/app/models/clusters/applications/knative.rb
index 8d79b041b64..347c3c8c37f 100644
--- a/app/models/clusters/applications/knative.rb
+++ b/app/models/clusters/applications/knative.rb
@@ -66,6 +66,7 @@ module Clusters
       def schedule_status_update
         return unless installed?
         return if external_ip
+        return if external_hostname
 
         ClusterWaitForIngressIpAddressWorker.perform_async(name, id)
       end
diff --git a/app/models/clusters/cluster.rb b/app/models/clusters/cluster.rb
index be3e6a05e1e..5156c7d7514 100644
--- a/app/models/clusters/cluster.rb
+++ b/app/models/clusters/cluster.rb
@@ -67,6 +67,7 @@ module Clusters
     delegate :available?, to: :application_prometheus, prefix: true, allow_nil: true
     delegate :available?, to: :application_knative, prefix: true, allow_nil: true
     delegate :external_ip, to: :application_ingress, prefix: true, allow_nil: true
+    delegate :external_hostname, to: :application_ingress, prefix: true, allow_nil: true
 
     alias_attribute :base_domain, :domain
 
diff --git a/app/serializers/cluster_application_entity.rb b/app/serializers/cluster_application_entity.rb
index 02df1480828..a4a2c015c4e 100644
--- a/app/serializers/cluster_application_entity.rb
+++ b/app/serializers/cluster_application_entity.rb
@@ -6,6 +6,7 @@ class ClusterApplicationEntity < Grape::Entity
   expose :status_reason
   expose :version
   expose :external_ip, if: -> (e, _) { e.respond_to?(:external_ip) }
+  expose :external_hostname, if: -> (e, _) { e.respond_to?(:external_hostname) }
   expose :hostname, if: -> (e, _) { e.respond_to?(:hostname) }
   expose :email, if: -> (e, _) { e.respond_to?(:email) }
   expose :update_available?, as: :update_available, if: -> (e, _) { e.respond_to?(:update_available?) }
diff --git a/app/services/clusters/applications/check_ingress_ip_address_service.rb b/app/services/clusters/applications/check_ingress_ip_address_service.rb
index 0ec06e776a7..e254a0358a0 100644
--- a/app/services/clusters/applications/check_ingress_ip_address_service.rb
+++ b/app/services/clusters/applications/check_ingress_ip_address_service.rb
@@ -11,9 +11,13 @@ module Clusters
 
       def execute
         return if app.external_ip
+        return if app.external_hostname
         return unless try_obtain_lease
 
-        app.update!(external_ip: ingress_ip) if ingress_ip
+        app.external_ip = ingress_ip if ingress_ip
+        app.external_hostname = ingress_hostname if ingress_hostname
+
+        app.save! if app.changed?
       end
 
       private
@@ -25,12 +29,16 @@ module Clusters
       end
 
       def ingress_ip
-        service.status.loadBalancer.ingress&.first&.ip
+        ingress_service&.ip
+      end
+
+      def ingress_hostname
+        ingress_service&.hostname
       end
 
-      def service
+      def ingress_service
         strong_memoize(:ingress_service) do
-          app.ingress_service
+          app.ingress_service.status.loadBalancer.ingress&.first
         end
       end
     end
diff --git a/app/views/clusters/clusters/_form.html.haml b/app/views/clusters/clusters/_form.html.haml
index 9fb91a39387..c08b41e2f23 100644
--- a/app/views/clusters/clusters/_form.html.haml
+++ b/app/views/clusters/clusters/_form.html.haml
@@ -37,7 +37,7 @@
         = s_('ClusterIntegration|Alternatively')
         %code #{@cluster.application_ingress_external_ip}.nip.io
         = s_('ClusterIntegration| can be used instead of a custom domain.')
-      - custom_domain_url = help_page_path('user/project/clusters/index', anchor: 'pointing-your-dns-at-the-cluster-ip')
+      - custom_domain_url = help_page_path('user/project/clusters/index', anchor: 'pointing-your-dns-at-the-external-endpoint')
       - custom_domain_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: custom_domain_url }
       = s_('ClusterIntegration| %{custom_domain_start}More information%{custom_domain_end}.').html_safe % { custom_domain_start: custom_domain_start, custom_domain_end: '</a>'.html_safe }
 
diff --git a/app/views/clusters/clusters/show.html.haml b/app/views/clusters/clusters/show.html.haml
index 7d381c6d4a6..884fa323093 100644
--- a/app/views/clusters/clusters/show.html.haml
+++ b/app/views/clusters/clusters/show.html.haml
@@ -22,8 +22,8 @@
   cluster_status: @cluster.status_name,
   cluster_status_reason: @cluster.status_reason,
   help_path: help_page_path('user/project/clusters/index.md', anchor: 'installing-applications'),
-  ingress_help_path: help_page_path('user/project/clusters/index.md', anchor: 'getting-the-external-ip-address'),
-  ingress_dns_help_path: help_page_path('topics/autodevops/quick_start_guide.md', anchor: 'point-dns-at-cluster-ip'),
+  ingress_help_path: help_page_path('user/project/clusters/index.md', anchor: 'getting-the-external-endpoint'),
+  ingress_dns_help_path: help_page_path('user/project/clusters/index.md', anchor: 'manually-determining-the-external-endpoint'),
   manage_prometheus_path: manage_prometheus_path } }
 
   .js-cluster-application-notice