Notify users that Elasticsearch endpoint has to be an URL

https://github.com/rancher/rancher/issues/13943

lib/logging/addon/components/logging/new-edit/component.js

@@ -107,7 +107,7 @@ export default Component.extend(NewOrEdit, {
       set(model, 'outputTags', get(model, `${targetType}.outputTags`));
       set(model, 'dockerRoot', get(model, `${targetType}.dockerRoot`));
 
-      const formatConfig = get(model, `${targetType}.config`)
+      const formatConfig = get(model, `${targetType}.config`).clone()
       if (targetType === 'elasticsearch') {
         Object.assign(formatConfig, {endpoint: this.formatUrl(formatConfig.endpoint)})
       }

lib/logging/addon/components/logging/target-elasticsearch/component.js

@@ -1,12 +1,13 @@
 import Component from '@ember/component';
 import es from 'logging/mixins/target-elasticsearch';
-import { get, computed, setProperties } from '@ember/object';
+import { get, computed, setProperties, set } from '@ember/object';
 import { alias } from '@ember/object/computed'
 
 export default Component.extend(es, {
   showAdvanced: false,
   config: alias('model.config'),
   sslVerify: alias('model.config.sslVerify'),
+  endpointError: false,
 
   didInsertElement() {
     this.$('#elasticsearch-endpoint').focus()
@@ -35,4 +36,14 @@ export default Component.extend(es, {
     const ps = get(this, 'pageScope');
     return ps === 'cluster' ? '${clusterName}-${dateFormat}' : '${clusterName}_${projectName}-${dateFormat}';
   }.property('pageScope'),
+
+  actions: {
+    alertMessage(value='') {
+      if (value.startsWith('https:') || value.startsWith('http:')) {
+        set(this, 'endpointError', false)
+      } else {
+        set(this, 'endpointError', true)
+      }
+    },
+  },
 });

lib/logging/addon/components/logging/target-elasticsearch/template.hbs

@@ -10,9 +10,14 @@
           classNames="form-control"
           placeholder=(t 'loggingPage.endpointPlaceholder')
           id="elasticsearch-endpoint"
+          focus-out="alertMessage"
       }}
     </div>
-    <p class="text-info text-small">{{t 'loggingPage.elasticsearch.endpointHelpText'}}</p>
+    {{#if endpointError}}
+      <p class="text-error text-small">{{t 'loggingPage.elasticsearch.endpointErrorText'}}</p>
+    {{else}}
+      <p class="text-info text-small">{{t 'loggingPage.elasticsearch.endpointHelpText'}}</p>
+    {{/if}}
   </section>
   <h4>{{t 'loggingPage.elasticsearch.xpack.header'}} <span class="text-muted">{{t 'loggingPage.elasticsearch.xpack.headerOptional'}}</span></h4>
   <section>

lib/logging/translations/en-us.yaml

@@ -85,6 +85,7 @@ loggingPage:
   elasticsearch:
     header: Elasticsearch Configuration
     endpointHelpText: Copy your endpoint from Elastic Cloud, or input the reachable endpoint of your self-hosted Elacticsearch.
+    endpointErrorText: Endpoint should starts with "http:" or "https:".
     xpack:
       header: X-Pack Security
       headerOptional: (optional)