Adds missing links, uses value instead of placeholder in input field and properly sets the ip key

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,
           },
         });
       },

app/assets/javascripts/clusters/components/application_row.vue

@@ -148,10 +148,7 @@
       </div>
       <div
         class="table-section table-button-footer section-align-top"
-        :class="{
-          'section-20': showManageButton,
-          'section-15': !showManageButton,
-        }"
+        :class="{ 'section-20': showManageButton, 'section-15': !showManageButton }"
         role="gridcell"
       >
         <div

app/assets/javascripts/clusters/components/applications.vue

@@ -28,6 +28,11 @@
         required: false,
         default: '',
       },
+      ingressDnsHelpPath: {
+        type: String,
+        required: false,
+        default: '',
+      },
       managePrometheusPath: {
         type: String,
         required: false,
@@ -51,6 +56,9 @@
       ingressInstalled() {
         return this.applications.ingress.status === APPLICATION_INSTALLED;
       },
+      ingressExternalIp() {
+        return this.applications.ingress.externalIp;
+      },
       ingressDescription() {
         const extraCostParagraph = sprintf(
           _.escape(s__(
@@ -165,19 +173,19 @@
                   {{ s__("ClusterIntegration| Ingress IP Address") }}
                 </label>
                 <div
-                  v-if="applications.ingress.external_ip"
+                  v-if="ingressExternalIp"
                   class="input-group"
                 >
                   <input
                     type="text"
                     id="ipAddress"
-                    class="form-control js-select-on-focus"
-                    :placeholder="applications.ingress.external_ip"
+                    class="form-control"
+                    :placeholder="ingressExternalIp"
                     readonly
                   />
                   <span class="input-group-btn">
                     <clipboard-button
-                      :text="applications.ingress.external_ip"
+                      :text="ingressExternalIp"
                       :title="s__('ClusterIntegration|Copy Ingress IP Address')"
                       css-class="btn btn-default js-clipboard-btn"
                     />
@@ -194,14 +202,14 @@
               </div>
               <p
-                v-if="!applications.ingress.external_ip"
+                v-if="!ingressExternalIp"
                 class="settings-message js-no-ip-message"
               >
-                {{ s__(`ClusterIntegration|The IP address is in process
-                to be assigned, please check your Kubernetes
+                {{ s__(`ClusterIntegration|The IP address is still in
+                the process of being assigned, please check your Kubernetes
                 cluster or Quotas on GKE if it takes a long time.`) }}
                 <a
-                  href="TODO"
+                  :href="ingressHelpPath"
                   target="_blank"
                   rel="noopener noreferrer"
                 >
@@ -214,7 +222,7 @@
                 generated IP address in order to access
                 your application after it has been deployed.`) }}
                 <a
-                  href="TODO"
+                  :href="ingressDnsHelpPath"
                   target="_blank"
                   rel="noopener noreferrer"
                 >

app/assets/javascripts/clusters/stores/clusters_store.js

@@ -21,6 +21,7 @@ export default class ClusterStore {
           statusReason: null,
           requestStatus: null,
           requestReason: null,
+          externalIp: null,
         },
         runner: {
           title: s__('ClusterIntegration|GitLab Runner'),
@@ -40,9 +41,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 +66,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 +79,10 @@ export default class ClusterStore {
         status,
         statusReason,
       };
+
+      if (appId === 'ingress') {
+        this.state.applications.ingress.externalIp = serverAppEntry.external_ip;
+      }
     });
   }
 }

app/views/projects/clusters/show.html.haml

@@ -15,6 +15,7 @@
   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'),
   manage_prometheus_path: edit_project_service_path(@cluster.project, 'prometheus') } }
   .js-cluster-application-notice

spec/javascripts/clusters/components/applications_spec.js

@@ -54,14 +54,13 @@ describe('Applications', () => {
               ingress: {
                 title: 'Ingress',
                 status: 'installed',
-                external_ip: '0.0.0.0',
+                externalIp: '0.0.0.0',
               },
               helm: { title: 'Helm Tiller' },
               runner: { title: 'GitLab Runner' },
               prometheus: { title: 'Prometheus' },
             },
           });
-
           expect(
             vm.$el.querySelector('#ipAddress').getAttribute('placeholder'),
           ).toEqual('0.0.0.0');
@@ -92,7 +91,7 @@ describe('Applications', () => {
           expect(
             vm.$el.querySelector('.js-no-ip-message').textContent.replace(/\n(\s)+/g, ' ').trim(),
           ).toEqual(
-            'The IP address is in process to be assigned, please check your Kubernetes cluster or Quotas on GKE if it takes a long time. More information',
+            'The IP address is still in the process of being assigned, please check your Kubernetes cluster or Quotas on GKE if it takes a long time. More information',
           );
         });
       });

spec/javascripts/clusters/services/mock_data.js

@@ -18,6 +18,7 @@ const CLUSTERS_MOCK_DATA = {
           name: 'ingress',
           status: APPLICATION_ERROR,
           status_reason: 'Cannot connect',
+          external_ip: null,
         }, {
           name: 'runner',
           status: APPLICATION_INSTALLING,

spec/javascripts/clusters/stores/clusters_store_spec.js

@@ -75,6 +75,7 @@ describe('Clusters Store', () => {
             statusReason: mockResponseData.applications[1].status_reason,
             requestStatus: null,
             requestReason: null,
+            externalIp: null,
           },
           runner: {
             title: 'GitLab Runner',