Update the UX for enabling istio

lib/istio/addon/components/istio-catalog/template.hbs

@@ -2,13 +2,6 @@
   <h1 class="pull-left">
     {{t "clusterIstioPage.header"}}
   </h1>
-  {{#if (and enabled canEnable)}}
-    <div class="pull-right">
-      <button class="btn bg-error" {{action "disable"}}>
-        {{t "clusterIstioPage.disable"}}
-      </button>
-    </div>
-  {{/if}}
 </section>
 
 {{#if canEnable}}
@@ -141,7 +134,7 @@
     detail=(t "clusterIstioPage.workload.detail" workload="Pilot")
     expandAll=al.expandAll
     expand=(action expandFn)
-    expandOnInit=true
+    expandOnInit=false
   }}
     {{form-reservation
       component="Pilot"
@@ -203,7 +196,7 @@
     detail=(t "clusterIstioPage.workload.detail" workload="Mixer")
     expandAll=al.expandAll
     expand=(action expandFn)
-    expandOnInit=true
+    expandOnInit=false
   }}
     {{form-reservation
       component="MixerTelemetry"
@@ -265,7 +258,7 @@
     detail=(t "clusterIstioPage.workload.detail" workload="Tracing")
     expandAll=al.expandAll
     expand=(action expandFn)
-    expandOnInit=true
+    expandOnInit=false
   }}
     <div class="row">
       <div class="col span-6">
@@ -308,7 +301,7 @@
     detail=(t "clusterIstioPage.workload.detail" workload="Ingress Gateway")
     expandAll=al.expandAll
     expand=(action expandFn)
-    expandOnInit=true
+    expandOnInit=false
   }}
     <div class="row">
       <div class="col span-6">
@@ -424,25 +417,29 @@
       </div>
     {{/if}}
     {{/accordion-list-item}}
-  {{/accordion-list}}
 
-  {{#advanced-section}}
-    <hr/>
-    {{form-key-value
-      initialMap=customAnswers
-      changed=(action (mut customAnswers))
-      allowEmptyValue=true
-      addInitialEmptyRow=true
-      editing=true
-      header=(t "newCatalog.answers.label")
-      addActionLabel="newCatalog.answers.addAction"
-      keyLabel="newContainer.environment.keyLabel"
-      keyPlaceholder="newContainer.environment.keyPlaceholder"
-      valueLabel="newContainer.environment.valueLabel"
-      valuePlaceholder="newContainer.environment.valuePlaceholder"
+    {{#accordion-list-item
+      title=(t "clusterIstioPage.customAnswers.title")
+      detail=(t "clusterIstioPage.customAnswers.detail")
+      expandAll=al.expandAll
+      expand=(action expandFn)
+      expandOnInit=false
     }}
-  {{/advanced-section}}
-
+      {{form-key-value
+        initialMap=customAnswers
+        changed=(action (mut customAnswers))
+        allowEmptyValue=true
+        addInitialEmptyRow=true
+        editing=true
+        header=(t "newCatalog.answers.label")
+        addActionLabel="newCatalog.answers.addAction"
+        keyLabel="newContainer.environment.keyLabel"
+        keyPlaceholder="newContainer.environment.keyPlaceholder"
+        valueLabel="newContainer.environment.valueLabel"
+        valuePlaceholder="newContainer.environment.valuePlaceholder"
+      }}
+    {{/accordion-list-item}}
+  {{/accordion-list}}
 {{#if (or pilotWarning mixerTelemetryWarning tracingWarning gatewayWarning (and mixerPolicyWarning config.mixerPolicyEnabled) mixerWarning istioWarning)}}
   {{#banner-message color="bg-warning"}}
     {{#if istioWarning}}
@@ -466,14 +463,20 @@
 
   {{top-errors errors=errors}}
 
-  {{save-cancel
+  {{#save-cancel
     saveDisabled=saveDisabled
     editing=enabled
     createLabel="clusterIstioPage.enableActionLabel"
     save=(action "save")
     saved=saved
-    cancel=cancel
+    cancelDisabled=true
   }}
+    {{#if (and enabled canEnable)}}
+      <button class="btn bg-error" {{action "disable"}}>
+        {{t "clusterIstioPage.disable"}}
+      </button>
+    {{/if}}
+  {{/save-cancel}}
 {{else}}
   {{#if enableClusterMonitoring}}
     {{#unless canReuse}}

lib/istio/translations/en-us.yaml

@@ -4,9 +4,12 @@ clusterIstioPage:
   disabled: "Istio is not enabled yet. Please click Enable button to enable it."
   notReady: Installing Istio into the system project of current cluster...
   confirmDisable: "Are you sure?  Click again to disable Istio"
-  disable: Disable Istio
+  disable: Disable
   enableActionLabel: Enable
   version: Istio Version
+  customAnswers:
+    title: Custom Answers
+    detail: Config custom answers for Istio.
   links:
     kiali:
       label: Kiali UI

lib/monitoring/addon/components/enable-monitoring/template.hbs

@@ -3,34 +3,6 @@
     <h1 class="pull-left">
       {{t (concat "monitoringPage." level ".title")}}
     </h1>
-    {{#if (and enabled canDisableMonitor)}}
-      <div class="pull-right">
-        {{#if confirmDisable}}
-          <button class="btn bg-error" {{action "disable"}}>
-            <i class="icon icon-alert"></i> {{t "monitoringPage.confirmDisable"}}
-          </button>
-        {{else}}
-          {{#if (and istioEnabled (eq level "cluster"))}}
-            {{#tooltip-element
-              type="tooltip-basic"
-              model=(t "monitoringPage.errors.disableIstioFirst")
-              tooltipTemplate="tooltip-static"
-              aria-describedby="tooltip-base"
-              inlineBlock=true
-              placement="top"
-            }}
-              <button class="btn bg-error" {{action "promptDisable"}}>
-                {{t "monitoringPage.disable"}}
-              </button>
-            {{/tooltip-element}}
-          {{else}}
-            <button class="btn bg-error" {{action "promptDisable"}}>
-              {{t "monitoringPage.disable"}}
-            </button>
-          {{/if}}
-        {{/if}}
-      </div>
-    {{/if}}
   </section>
 
   {{#if settings.isRancher}}
@@ -371,13 +343,40 @@
   {{/if}}
 
   <div class="text-center">
-    {{save-cancel
+    {{#save-cancel
       saveDisabled=saveDisabled
       cancelDisabled=true
       editing=enabled
       createLabel="monitoringPage.enableActionLabel"
       save="enable"
     }}
+      {{#if (and enabled canDisableMonitor)}}
+        {{#if confirmDisable}}
+          <button class="btn bg-error" {{action "disable"}}>
+            <i class="icon icon-alert"></i> {{t "monitoringPage.confirmDisable"}}
+          </button>
+        {{else}}
+          {{#if (and istioEnabled (eq level "cluster"))}}
+            {{#tooltip-element
+              type="tooltip-basic"
+              model=(t "monitoringPage.errors.disableIstioFirst")
+              tooltipTemplate="tooltip-static"
+              aria-describedby="tooltip-base"
+              inlineBlock=true
+              placement="top"
+            }}
+              <button class="btn bg-error" {{action "promptDisable"}}>
+                {{t "monitoringPage.disable"}}
+              </button>
+            {{/tooltip-element}}
+          {{else}}
+            <button class="btn bg-error" {{action "promptDisable"}}>
+              {{t "monitoringPage.disable"}}
+            </button>
+          {{/if}}
+        {{/if}}
+      {{/if}}
+    {{/save-cancel}}
   </div>
 {{else if (and (eq level "project") scope.currentProject.isSystemProject)}}
   {{banner-message

lib/monitoring/translations/en-us.yaml

@@ -94,8 +94,8 @@ monitoringPage:
   upgrade: Upgrade monitoring to the latest version {version}
   upgradeAvailable: "({version} Upgrade Available)"
   confirmDisable: "Are you sure?  Click again to disable monitoring."
-  disable: Disable Monitoring
-  enableActionLabel: Enable Monitoring
+  disable: Disable
+  enableActionLabel: Enable
   systemProject: "If you want to collect custom metrics for pods in System Project, please enable cluster level monitoring directly."
   noPermission: "You do not have permission to configure {level} level monitoring."
   toUpdate:

lib/shared/addon/components/save-cancel/template.hbs

@@ -1,4 +1,3 @@
-{{yield}}
 {{#if saving}}
   <button class="btn btn-disabled {{savingColor}}" {{action "doNothing"}}>
     <i class="icon icon-spinner icon-spin"></i>
@@ -9,6 +8,7 @@
     {{t btnLabel}}
   </button>
 {{/if}}
+{{yield}}
 {{#unless cancelDisabled}}
   <button {{action "cancel"}} class="btn {{cancelColor}}">
     {{t cancelLabel}}