After click save button in cluster logging, UI keep loading

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

app/styles/_rancher.scss

@@ -59,6 +59,7 @@
 @import "app/styles/components/searchable-select";
 @import "app/styles/components/nav-boxes";
 @import "app/styles/components/pipeline";
+@import "app/styles/components/logging";
 
 // Vendor
 // Pretty much what it says. Vendor specific changes/overrides or includes.

app/styles/components/_logging.scss

@@ -0,0 +1,3 @@
+.logging-format {
+  font-size: 85%;
+}

lib/logging/addon/components/logging/code-block/component.js

@@ -0,0 +1,4 @@
+import layout from './template';
+import CodeBlock from 'shared/components/code-block/component';
+
+export default CodeBlock.extend({ layout, });

lib/logging/addon/components/logging/code-block/template.hbs

@@ -0,0 +1 @@
+{{{highlighted}}}

lib/logging/addon/components/logging/form-log-format/template.hbs

@@ -33,6 +33,6 @@
 </div>
 
 <div class="col span-7 logging-format">
-    {{code-block code=logPreview}}
+    {{logging/code-block code=logPreview language="json"}}
 </div>
 </main>

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

@@ -27,6 +27,7 @@ export default Component.extend(NewOrEdit, {
       let targetType = get(this, 'targetType');
       const pageScope = this.get('pageScope');
       const model = get(this, 'model');
+      const intl = get(this, 'intl')
 
       // set projectId or clusterId
       if (pageScope === 'project') {
@@ -84,6 +85,15 @@ export default Component.extend(NewOrEdit, {
         }
       }
 
+      if (targetType === 'splunk') {
+        if (!get(model, 'splunk.config.token')) {
+          set(this, 'errors', [intl.t('loggingPage.splunk.tokenRequired')]);
+          cb();
+
+          return;
+        }
+      }
+
       // set kafka config
       if (targetType === 'kafka') {
         let kt;

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

@@ -108,7 +108,7 @@ export default Component.extend({
   logPreview: computed('fieldsStr', function() {
     const fieldsStr = get(this, 'fieldsStr');
     const template = `{
-    "log":    "time=\"${ new Date().toString() }\" level=info msg=\"Cluster [local] condition status unknown\"\n",
+    "log":    "time=\"${ new Date().toString() }\" level=info msg=\"Cluster [local] condition status unknown\"",
     "stream": "stderr",
     "tag":    "default.var.log.containers.cattle-6b4ccb5b9d-v57vw_default_cattle-xxx.log"
     "docker": {

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

@@ -35,7 +35,7 @@ export default Component.extend({
   logPreview: function() {
     const fieldsStr = get(this, 'fieldsStr');
     const template = `{
-    "log": "time=\"${ new Date().toString() }\" level=info msg=\"Cluster [local] condition status unknown\"\n",
+    "log": "time=\"${ new Date().toString() }\" level=info msg=\"Cluster [local] condition status unknown\"",
     "stream": "stderr",
     "tag": "default.var.log.containers.cattle-6b4ccb5b9d-v57vw_default_cattle-xxx.log"
     "docker": {

lib/logging/addon/components/logging/targets-nav/component.js

@@ -67,7 +67,7 @@ export default Component.extend({
       {
         type:      'fluentForwarder',
         label:     'loggingPage.targetTypes.fluentd',
-        css:       `fluentd${   this.currentCss('fluentd') }`,
+        css:       `fluentd${   this.currentCss('fluentd output forward') }`,
         available: true,
         disabled:  false,
       },

lib/logging/translations/en-us.yaml

@@ -79,6 +79,7 @@ loggingPage:
     token: Token
     tokenPlaceholder: Your Token
     tokenHelpText: 'Tokens are entities that let logging agents and HTTP clients connect to the HEC input. <a href="http://docs.splunk.com/Documentation/Splunk/7.0.0/Data/UsetheHTTPEventCollector#Configure_HTTP_Event_Collector_on_Splunk_Enterprise" target="_blank">Detail</a>'
+    tokenRequired: Token is Required
     source: Source
     sourcePlaceholder: e.g. fluentd
     sourceHelpText: 'A default field that identifies the source of an event, that is, where the event originated. <a href="https://docs.splunk.com/Splexicon:Source" target="_blank">Detail</a>'

lib/logging/translations/zh-hans.yaml

@@ -79,6 +79,7 @@ loggingPage:
     token: Token
     tokenPlaceholder: Your Token
     tokenHelpText: 'Token是允许日志收集程序和HTTP客户端连接到HEC的验证信息，<a href="http://docs.splunk.com/Documentation/Splunk/7.0.0/Data/UsetheHTTPEventCollector#Configure_HTTP_Event_Collector_on_Splunk_Enterprise" target="_blank">了解详情</a>。'
+    tokenRequired: Token必须填写
     source: 日志源
     sourcePlaceholder: '例如: fluentd'
     sourceHelpText: '标识事件来源的默认字段，即事件发生的位置，<a href="https://docs.splunk.com/Splexicon:Source" target="_blank">了解详情</a>。'