Merge branch '42643-persist-external-ip-of-ingress-controller-gke' into 'master'

Display ingress IP address in the Kubernetes page

See merge request gitlab-org/gitlab-ce!17052

6 files changed, 134 insertions, 29 deletions

diff --git a/app/assets/javascripts/clusters/clusters_bundle.js b/app/assets/javascripts/clusters/clusters_bundle.js
index b070a59cf15..01aec4f36af 100644
--- a/app/assets/javascripts/clusters/clusters_bundle.js
+++ b/app/assets/javascripts/clusters/clusters_bundle.js
@@ -37,10 +37,11 @@ export default class Clusters {
       clusterStatusReason,
       helpPath,
       ingressHelpPath,
+      ingressDnsHelpPath,
     } = document.querySelector('.js-edit-cluster-form').dataset;
 
     this.store = new ClustersStore();
-    this.store.setHelpPaths(helpPath, ingressHelpPath);
+    this.store.setHelpPaths(helpPath, ingressHelpPath, ingressDnsHelpPath);
     this.store.setManagePrometheusPath(managePrometheusPath);
     this.store.updateStatus(clusterStatus);
     this.store.updateStatusReason(clusterStatusReason);
@@ -98,6 +99,7 @@ export default class Clusters {
             helpPath: this.state.helpPath,
             ingressHelpPath: this.state.ingressHelpPath,
             managePrometheusPath: this.state.managePrometheusPath,
+            ingressDnsHelpPath: this.state.ingressDnsHelpPath,
           },
         });
       },
diff --git a/app/assets/javascripts/clusters/components/application_row.vue b/app/assets/javascripts/clusters/components/application_row.vue
index 50e35bbbba5..c2a35341eb2 100644
--- a/app/assets/javascripts/clusters/components/application_row.vue
+++ b/app/assets/javascripts/clusters/components/application_row.vue
@@ -36,10 +36,6 @@
         type: String,
         required: false,
       },
-      description: {
-        type: String,
-        required: true,
-      },
       status: {
         type: String,
         required: false,
@@ -148,7 +144,7 @@
         class="table-section section-wrap"
         role="gridcell"
       >
-        <div v-html="description"></div>
+        <slot name="description"></slot>
       </div>
       <div
         class="table-section table-button-footer section-align-top"
diff --git a/app/assets/javascripts/clusters/components/applications.vue b/app/assets/javascripts/clusters/components/applications.vue
index 978881a4831..35618398468 100644
--- a/app/assets/javascripts/clusters/components/applications.vue
+++ b/app/assets/javascripts/clusters/components/applications.vue
@@ -2,10 +2,16 @@
   import _ from 'underscore';
   import { s__, sprintf } from '../../locale';
   import applicationRow from './application_row.vue';
+  import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
+  import {
+    APPLICATION_INSTALLED,
+    INGRESS,
+  } from '../constants';
 
   export default {
     components: {
       applicationRow,
+      clipboardButton,
     },
     props: {
       applications: {
@@ -23,6 +29,11 @@
         required: false,
         default: '',
       },
+      ingressDnsHelpPath: {
+        type: String,
+        required: false,
+        default: '',
+      },
       managePrometheusPath: {
         type: String,
         required: false,
@@ -43,19 +54,16 @@
           false,
         );
       },
-      helmTillerDescription() {
-        return _.escape(s__(
-          `ClusterIntegration|Helm streamlines installing and managing Kubernetes applications.
-          Tiller runs inside of your Kubernetes Cluster, and manages
-          releases of your charts.`,
-        ));
+      ingressId() {
+        return INGRESS;
+      },
+      ingressInstalled() {
+        return this.applications.ingress.status === APPLICATION_INSTALLED;
+      },
+      ingressExternalIp() {
+        return this.applications.ingress.externalIp;
       },
       ingressDescription() {
-        const descriptionParagraph = _.escape(s__(
-          `ClusterIntegration|Ingress gives you a way to route requests to services based on the
-          request host or path, centralizing a number of services into a single entrypoint.`,
-        ));
-
         const extraCostParagraph = sprintf(
           _.escape(s__(
             `ClusterIntegration|%{boldNotice} This will add some extra resources
@@ -84,9 +92,6 @@
 
         return `
           <p>
-            ${descriptionParagraph}
-          </p>
-          <p>
             ${extraCostParagraph}
           </p>
           <p class="settings-message append-bottom-0">
@@ -136,33 +141,121 @@
           id="helm"
           :title="applications.helm.title"
           title-link="https://docs.helm.sh/"
-          :description="helmTillerDescription"
           :status="applications.helm.status"
           :status-reason="applications.helm.statusReason"
           :request-status="applications.helm.requestStatus"
           :request-reason="applications.helm.requestReason"
-        />
+        >
+          <div slot="description">
+            {{ s__(`ClusterIntegration|Helm streamlines installing
+              and managing Kubernetes applications.
+              Tiller runs inside of your Kubernetes Cluster,
+              and manages releases of your charts.`) }}
+          </div>
+        </application-row>
         <application-row
-          id="ingress"
+          :id="ingressId"
           :title="applications.ingress.title"
           title-link="https://kubernetes.io/docs/concepts/services-networking/ingress/"
-          :description="ingressDescription"
           :status="applications.ingress.status"
           :status-reason="applications.ingress.statusReason"
           :request-status="applications.ingress.requestStatus"
           :request-reason="applications.ingress.requestReason"
-        />
+        >
+          <div slot="description">
+            <p>
+              {{ s__(`ClusterIntegration|Ingress gives you a way to route
+                requests to services based on the request host or path,
+                centralizing a number of services into a single entrypoint.`) }}
+            </p>
+
+            <template v-if="ingressInstalled">
+              <div class="form-group">
+                <label for="ingress-ip-address">
+                  {{ s__('ClusterIntegration|Ingress IP Address') }}
+                </label>
+                <div
+                  v-if="ingressExternalIp"
+                  class="input-group"
+                >
+                  <input
+                    type="text"
+                    id="ingress-ip-address"
+                    class="form-control js-ip-address"
+                    :value="ingressExternalIp"
+                    readonly
+                  />
+                  <span class="input-group-btn">
+                    <clipboard-button
+                      :text="ingressExternalIp"
+                      :title="s__('ClusterIntegration|Copy Ingress IP Address to clipboard')"
+                      css-class="btn btn-default js-clipboard-btn"
+                    />
+                  </span>
+                </div>
+                <input
+                  v-else
+                  type="text"
+                  class="form-control js-ip-address"
+                  readonly
+                  value="?"
+                />
+              </div>
+
+              <p
+                v-if="!ingressExternalIp"
+                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 GKE if it takes a long time.`) }}
+
+                <a
+                  :href="ingressHelpPath"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {{ __('More information') }}
+                </a>
+              </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
+              v-else
+              v-html="ingressDescription"
+            >
+            </div>
+          </div>
+        </application-row>
         <application-row
           id="prometheus"
           :title="applications.prometheus.title"
           title-link="https://prometheus.io/docs/introduction/overview/"
           :manage-link="managePrometheusPath"
-          :description="prometheusDescription"
           :status="applications.prometheus.status"
           :status-reason="applications.prometheus.statusReason"
           :request-status="applications.prometheus.requestStatus"
           :request-reason="applications.prometheus.requestReason"
-        />
+        >
+          <div
+            slot="description"
+            v-html="prometheusDescription"
+          >
+          </div>
+        </application-row>
         <!--
           NOTE: Don't forget to update `clusters.scss`
           min-height for this block and uncomment `application_spec` tests
diff --git a/app/assets/javascripts/clusters/constants.js b/app/assets/javascripts/clusters/constants.js
index 93223aefff8..b7179f52bb3 100644
--- a/app/assets/javascripts/clusters/constants.js
+++ b/app/assets/javascripts/clusters/constants.js
@@ -10,3 +10,4 @@ export const APPLICATION_ERROR = 'errored';
 export const REQUEST_LOADING = 'request-loading';
 export const REQUEST_SUCCESS = 'request-success';
 export const REQUEST_FAILURE = 'request-failure';
+export const INGRESS = 'ingress';
diff --git a/app/assets/javascripts/clusters/stores/clusters_store.js b/app/assets/javascripts/clusters/stores/clusters_store.js
index 904ee5fd475..348bbec3b25 100644
--- a/app/assets/javascripts/clusters/stores/clusters_store.js
+++ b/app/assets/javascripts/clusters/stores/clusters_store.js
@@ -1,4 +1,5 @@
 import { s__ } from '../../locale';
+import { INGRESS } from '../constants';
 
 export default class ClusterStore {
   constructor() {
@@ -21,6 +22,7 @@ export default class ClusterStore {
           statusReason: null,
           requestStatus: null,
           requestReason: null,
+          externalIp: null,
         },
         runner: {
           title: s__('ClusterIntegration|GitLab Runner'),
@@ -40,9 +42,10 @@ export default class ClusterStore {
     };
   }
 
-  setHelpPaths(helpPath, ingressHelpPath) {
+  setHelpPaths(helpPath, ingressHelpPath, ingressDnsHelpPath) {
     this.state.helpPath = helpPath;
     this.state.ingressHelpPath = ingressHelpPath;
+    this.state.ingressDnsHelpPath = ingressDnsHelpPath;
   }
 
   setManagePrometheusPath(managePrometheusPath) {
@@ -64,6 +67,7 @@ export default class ClusterStore {
   updateStateFromServer(serverState = {}) {
     this.state.status = serverState.status;
     this.state.statusReason = serverState.status_reason;
+
     serverState.applications.forEach((serverAppEntry) => {
       const {
         name: appId,
@@ -76,6 +80,10 @@ export default class ClusterStore {
         status,
         statusReason,
       };
+
+      if (appId === INGRESS) {
+        this.state.applications.ingress.externalIp = serverAppEntry.external_ip;
+      }
     });
   }
 }
diff --git a/app/assets/javascripts/vue_shared/components/clipboard_button.vue b/app/assets/javascripts/vue_shared/components/clipboard_button.vue
index e855ec3c098..3b6c2da1664 100644
--- a/app/assets/javascripts/vue_shared/components/clipboard_button.vue
+++ b/app/assets/javascripts/vue_shared/components/clipboard_button.vue
@@ -28,6 +28,11 @@
         required: false,
         default: false,
       },
+      cssClass: {
+        type: String,
+        required: false,
+        default: 'btn btn-default btn-transparent btn-clipboard',
+      },
     },
   };
 </script>
@@ -35,7 +40,7 @@
 <template>
   <button
     type="button"
-    class="btn btn-transparent btn-clipboard"
+    :class="cssClass"
     :title="title"
     :data-clipboard-text="text"
     v-tooltip