Resolve "Add a link to documentation on how to get external ip in the Kubernetes cluster details page"

3 files changed, 27 insertions, 3 deletions

diff --git a/app/assets/javascripts/clusters/clusters_bundle.js b/app/assets/javascripts/clusters/clusters_bundle.js
index 4dddb6eb0d6..fd2d1276230 100644
--- a/app/assets/javascripts/clusters/clusters_bundle.js
+++ b/app/assets/javascripts/clusters/clusters_bundle.js
@@ -35,10 +35,11 @@ export default class Clusters {
       clusterStatus,
       clusterStatusReason,
       helpPath,
+      ingressHelpPath,
     } = document.querySelector('.js-edit-cluster-form').dataset;
 
     this.store = new ClustersStore();
-    this.store.setHelpPath(helpPath);
+    this.store.setHelpPaths(helpPath, ingressHelpPath);
     this.store.updateStatus(clusterStatus);
     this.store.updateStatusReason(clusterStatusReason);
     this.service = new ClustersService({
@@ -93,6 +94,7 @@ export default class Clusters {
           props: {
             applications: this.state.applications,
             helpPath: this.state.helpPath,
+            ingressHelpPath: this.state.ingressHelpPath,
           },
         });
       },
diff --git a/app/assets/javascripts/clusters/components/applications.vue b/app/assets/javascripts/clusters/components/applications.vue
index ff2e0768a87..3b7195de635 100644
--- a/app/assets/javascripts/clusters/components/applications.vue
+++ b/app/assets/javascripts/clusters/components/applications.vue
@@ -18,6 +18,11 @@
         required: false,
         default: '',
       },
+      ingressHelpPath: {
+        type: String,
+        required: false,
+        default: '',
+      },
     },
     computed: {
       generalApplicationDescription() {
@@ -59,13 +64,28 @@
           false,
         );
 
+        const externalIpParagraph = 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}`,
+          )), {
+            ingressHelpLink: `<a href="${this.ingressHelpPath}">
+              ${_.escape(s__('ClusterIntegration|More information'))}
+            </a>`,
+          },
+          false,
+        );
+
         return `
           <p>
             ${descriptionParagraph}
           </p>
-          <p class="append-bottom-0">
+          <p>
             ${extraCostParagraph}
           </p>
+          <p class="settings-message append-bottom-0">
+            ${externalIpParagraph}
+          </p>
         `;
       },
       gitlabRunnerDescription() {
diff --git a/app/assets/javascripts/clusters/stores/clusters_store.js b/app/assets/javascripts/clusters/stores/clusters_store.js
index bd4a1fb37f9..49c3d184ef9 100644
--- a/app/assets/javascripts/clusters/stores/clusters_store.js
+++ b/app/assets/javascripts/clusters/stores/clusters_store.js
@@ -4,6 +4,7 @@ export default class ClusterStore {
   constructor() {
     this.state = {
       helpPath: null,
+      ingressHelpPath: null,
       status: null,
       statusReason: null,
       applications: {
@@ -39,8 +40,9 @@ export default class ClusterStore {
     };
   }
 
-  setHelpPath(helpPath) {
+  setHelpPaths(helpPath, ingressHelpPath) {
     this.state.helpPath = helpPath;
+    this.state.ingressHelpPath = ingressHelpPath;
   }
 
   updateStatus(status) {