Add support for ingress hostnamesingress-hostnames

1 files changed, 61 insertions, 71 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>