Expose external_ip to knative cluster application

2 files changed, 49 insertions, 0 deletions

diff --git a/app/assets/javascripts/clusters/components/applications.vue b/app/assets/javascripts/clusters/components/applications.vue
index 8354c28778c..34c510cb468 100644
--- a/app/assets/javascripts/clusters/components/applications.vue
+++ b/app/assets/javascripts/clusters/components/applications.vue
@@ -168,6 +168,9 @@ export default {
     knativeInstalled() {
       return this.applications.knative.status === APPLICATION_STATUS.INSTALLED;
     },
+    knativeExternalIp() {
+      return this.applications.knative.externalIp;
+    },
   },
   created() {
     this.helmInstallIllustration = helmInstallIllustration;
@@ -444,6 +447,49 @@ export default {
               />
             </div>
           </template>
+          <template v-if="knativeInstalled">
+            <div class="form-group">
+              <label for="knative-ip-address">
+                {{ s__('ClusterIntegration|Knative IP Address:') }}
+              </label>
+              <div v-if="knativeExternalIp" class="input-group">
+                <input
+                  id="knative-ip-address"
+                  :value="knativeExternalIp"
+                  type="text"
+                  class="form-control js-ip-address"
+                  readonly
+                />
+                <span class="input-group-append">
+                  <clipboard-button
+                    :text="knativeExternalIp"
+                    :title="s__('ClusterIntegration|Copy Knative IP Address to clipboard')"
+                    class="input-group-text js-clipboard-btn"
+                  />
+                </span>
+              </div>
+              <input v-else type="text" class="form-control js-ip-address" readonly value="?" />
+            </div>
+
+            <p v-if="!knativeExternalIp" class="settings-message js-no-ip-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.`)
+              }}
+            </p>
+
+            <p>
+              {{
+                s__(`ClusterIntegration|Point a wildcard DNS to this
+              generated IP address in order to access
+              your application after it has been deployed.`)
+              }}
+              <a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer">
+                {{ __('More information') }}
+              </a>
+            </p>
+          </template>
         </div>
       </application-row>
     </div>
diff --git a/app/assets/javascripts/clusters/stores/clusters_store.js b/app/assets/javascripts/clusters/stores/clusters_store.js
index 3678be59d24..2d69da8eaec 100644
--- a/app/assets/javascripts/clusters/stores/clusters_store.js
+++ b/app/assets/javascripts/clusters/stores/clusters_store.js
@@ -60,6 +60,7 @@ export default class ClusterStore {
           requestStatus: null,
           requestReason: null,
           hostname: null,
+          externalIp: null,
         },
       },
     };
@@ -111,6 +112,8 @@ export default class ClusterStore {
       } else if (appId === KNATIVE) {
         this.state.applications.knative.hostname =
           serverAppEntry.hostname || this.state.applications.knative.hostname;
+        this.state.applications.knative.externalIp =
+          serverAppEntry.external_ip || this.state.applications.knative.externalIp;
       }
     });
   }