Rework ingress detail page

rancher/rancher#15096

app/components/form-labels-annotations/template.hbs

@@ -1,67 +1,67 @@
 {{#accordion-list-item
-   title=(t 'formLabelsAnnotations.title')
-   detail=(t detailKey appName=settings.appName)
-   showStatus=true
-   status=status
-   statusClass=statusClass
-   expandAll=expandAll
-   expand=(action expandFn)
+     title=(t 'formLabelsAnnotations.title')
+     detail=(t detailKey appName=settings.appName)
+     showStatus=true
+     status=status
+     statusClass=statusClass
+     expandAll=expandAll
+     expand=(action expandFn)
 }}
   <div class="row">
     {{#if editing}}
-    <div class="col span-6">
-      <div class="clearfix">
-        <label class="acc-label">{{t 'formUserLabels.title'}}</label>
-      </div>
-      {{#if userLabelArray.length}}
-        <table class="table fixed no-lines js-label-table">
-          <thead>
-            <tr class="hidden-xs hidden-sm">
-              <th>{{t 'formUserLabels.key.label'}}{{field-required}}</th>
-              <th width="30">&nbsp;</th>
-              <th>{{t 'formUserLabels.value.label'}}</th>
-              <th width="40">&nbsp;</th>
-            </tr>
-          </thead>
-          <tbody>
-            {{#each userLabelArray as |label|}}
-              <tr>
-                <td data-title="key">
-                  {{input-paste pasted="pastedLabels" class="form-control input-sm key js-label" type="text" value=label.key placeholder="formUserLabels.key.placeholder" disabled=(eq label.readonly true)}}
-                </td>
-
-                <td class="valign-top text-center">
-                  {{#if editing}}
-                    {{t 'formKeyValue.separator'}}
-                  {{/if}}
-                </td>
-
-                <td data-title="label">
-                  {{input class="form-control input-sm" type="text" value=label.value placeholder=(t 'formUserLabels.value.placeholder') disabled=(eq label.readonly true)}}
-                </td>
-
-                <td class="text-right">
-                  <button class="btn bg-primary btn-sm" {{action "removeLabel" label}} disabled={{eq label.readonly true}}><i class="icon icon-minus"/><span class="sr-only">{{t 'generic.remove'}}</span></button>
-                </td>
-              </tr>
-            {{/each}}
-          </tbody>
-        </table>
-        <div class="protip mb-5">
-          {{t 'formUserLabels.protip'}}
+      <div class="col span-6">
+        <div class="clearfix">
+          <label class="acc-label">{{t 'formUserLabels.title'}}</label>
         </div>
-      {{/if}}
+        {{#if userLabelArray.length}}
+          <table class="table fixed no-lines js-label-table">
+            <thead>
+              <tr class="hidden-xs hidden-sm">
+                <th>{{t 'formUserLabels.key.label'}}{{field-required}}</th>
+                <th width="30">&nbsp;</th>
+                <th>{{t 'formUserLabels.value.label'}}</th>
+                <th width="40">&nbsp;</th>
+              </tr>
+            </thead>
+            <tbody>
+              {{#each userLabelArray as |label|}}
+                <tr>
+                  <td data-title="key">
+                    {{input-paste pasted="pastedLabels" class="form-control input-sm key js-label" type="text" value=label.key placeholder="formUserLabels.key.placeholder" disabled=(eq label.readonly true)}}
+                  </td>
 
-      <button class="btn bg-link icon-btn" {{action "addUserLabel"}}>
-        <span class="darken"><i class="icon icon-plus text-small"/></span>
-        <span>{{t 'formUserLabels.addAction'}}</span>
-      </button>
-    </div>
+                  <td class="valign-top text-center">
+                    {{#if editing}}
+                      {{t 'formKeyValue.separator'}}
+                    {{/if}}
+                  </td>
+
+                  <td data-title="label">
+                    {{input class="form-control input-sm" type="text" value=label.value placeholder=(t 'formUserLabels.value.placeholder') disabled=(eq label.readonly true)}}
+                  </td>
+
+                  <td class="text-right">
+                    <button class="btn bg-primary btn-sm" {{action "removeLabel" label}} disabled={{eq label.readonly true}}><i class="icon icon-minus"/><span class="sr-only">{{t 'generic.remove'}}</span></button>
+                  </td>
+                </tr>
+              {{/each}}
+            </tbody>
+          </table>
+          <div class="protip mb-5">
+            {{t 'formUserLabels.protip'}}
+          </div>
+        {{/if}}
+
+        <button class="btn bg-link icon-btn" {{action "addUserLabel"}}>
+          <span class="darken"><i class="icon icon-plus text-small"/></span>
+          <span>{{t 'formUserLabels.addAction'}}</span>
+        </button>
+      </div>
     {{else}}
       {{#if model.canHaveLabels}}
         {{table-labels
-          header=(t 'formUserLabels.title')
-          model=model.labels
+            header=(t 'formUserLabels.title')
+            model=model.labels
         }}
       {{/if}}
     {{/if}}
@@ -70,18 +70,18 @@
     {{/unless}}
     <div class="col {{if editing 'span-6' 'span-12'}}">
       {{#if editing}}
-         {{form-key-value
+        {{form-key-value
             header=(t 'formAnnotations.title')
             editing=editing
             initialMap=model.annotations
             changed=(action "annotationsChange")
             addActionLabel="formAnnotations.addActionLabel"
-          }}
+        }}
       {{else}}
         {{table-labels
-          header=(t 'formAnnotations.title')
-          model=model.annotations
-          labelIntlSec="annotationsSection"
+            header=(t 'formAnnotations.title')
+            model=model.annotations
+            labelIntlSec="annotationsSection"
         }}
       {{/if}}
     </div>

app/components/new-edit-ingress/template.hbs

@@ -5,50 +5,50 @@
 <div class="row">
   <div class="col span-11-of-23 mt-0 mb-0">
     {{form-name-description
-      model=ingress
-      nameDisabled=existing
-      namePlaceholder="servicePage.newIngress.form.name.placeholder"
-      descriptionPlaceholder="servicePage.newIngress.form.description.placeholder"
+        model=ingress
+        nameDisabled=existing
+        namePlaceholder="servicePage.newIngress.form.name.placeholder"
+        descriptionPlaceholder="servicePage.newIngress.form.description.placeholder"
     }}
   </div>
 
   <div class="col span-11-of-23 mt-0 mb-0 offset-1-of-23">
     {{form-namespace
-      editing=(and editing (not existing))
-      namespace=namespace
-      errors=namespaceErrors
+        editing=(and editing (not existing))
+        namespace=namespace
+        errors=namespaceErrors
     }}
   </div>
 </div>
 
 <section class="mt-40 horizontal-form container-fluid">
   {{form-ingress-rule
-    ingress=ingress
-    editing=true
+      ingress=ingress
+      editing=true
   }}
   <hr class="mt-30 mb-30" />
 </section>
 
 {{#accordion-list as | al expandFn | }}
   {{form-ssl-termination
-    editing=true
-    ingress=ingress
-    namespace=namespace
-    namespacedCertificates=namespacedCertificates
-    certificates=certificates
-    expandAll=al.expandAll
-    expandFn=expandFn
+      certificates=certificates
+      editing=true
+      expandAll=al.expandAll
+      expandFn=expandFn
+      ingress=ingress
+      namespace=namespace
+      namespacedCertificates=namespacedCertificates
   }}
 
   {{form-labels-annotations
-    classNames="accordion-wrapper"
-    labelErrors=labelErrors
-    initialLabels=ingress.labels
-    setLabels=(action 'setLabels')
-    expandAll=al.expandAll
-    expandFn=expandFn
-    model=ingress
-    annotationErrors=annotationErrors
+      annotationErrors=annotationErrors
+      classNames="accordion-wrapper"
+      expandAll=al.expandAll
+      expandFn=expandFn
+      initialLabels=ingress.labels
+      labelErrors=labelErrors
+      model=ingress
+      setLabels=(action 'setLabels')
   }}
 {{/accordion-list}}
 

app/ingress/template.hbs

@@ -18,16 +18,33 @@
 
 <section class="mt-40 horizontal-form container-fluid">
   {{form-ingress-rule
-    ingress=model.ingress
-    editing=false
+      ingress=model.ingress
+      editing=false
   }}
-  <hr class="mt-30 mb-30" />
 </section>
 
-{{form-ssl-termination
-  editing=false
-  ingress=model.ingress
-  namespace=model.ingress.namespace
-  namespacedCertificates=model.namespacedCertificates
-  certificates=model.certificates
-}}
+<hr class="mt-30 mb-30" />
+
+<section class="horizontal-form container-fluid">
+  {{#accordion-list as | al expandFn | }}
+    {{form-ssl-termination
+        editing=false
+        expandAll=al.expandAll
+        expandFn=expandFn
+        ingress=model.ingress
+        namespace=model.ingress.namespace
+        namespacedCertificates=model.namespacedCertificates
+        certificates=model.certificates
+    }}
+
+
+    {{form-labels-annotations
+        classNames="accordion-wrapper"
+        editing=false
+        expandAll=al.expandAll
+        expandFn=expandFn
+        initialLabels=model.ingress.labels
+        model=model.ingress
+    }}
+  {{/accordion-list}}
+</section>

lib/shared/addon/components/form-ingress-rows/template.hbs

@@ -19,23 +19,43 @@
     </div>
 
     <div class="row">
-      <div class="col span-6 mt-0 mb-0">
-        {{#unless rule.new}}
+      <div class="col mt-0 mb-0 {{if (eq mode 'manual') 'span-6' 'span-12'}}" >
+        {{#if editing}}
+          {{#unless rule.new}}
+            <div class="radio">
+              <label>{{radio-button selection=mode value="existing"}} {{t 'formIngress.hostMode.existing' domain=(if existingHost existingHost 'n/a') htmlSafe=true}}</label>
+            </div>
+          {{/unless}}
+          {{#if settings.ingress-ip-domain}}
+            <div class="radio">
+              <label>{{radio-button selection=mode value="automatic"}} {{t 'formIngress.hostMode.automatic' domain=settings.ingress-ip-domain htmlSafe=true}}</label>
+            </div>
+          {{/if}}
           <div class="radio">
-            <label>{{radio-button selection=mode value="existing"}} {{t 'formIngress.hostMode.existing' domain=(if existingHost existingHost 'n/a') htmlSafe=true}}</label>
+            <label>{{radio-button selection=mode value="manual"}} {{t 'formIngress.hostMode.manual'}}</label>
           </div>
-        {{/unless}}
-        {{#if settings.ingress-ip-domain}}
           <div class="radio">
-            <label>{{radio-button selection=mode value="automatic"}} {{t 'formIngress.hostMode.automatic' domain=settings.ingress-ip-domain htmlSafe=true}}</label>
+            <label class="{{if defaultDisabled 'text-muted'}}">{{radio-button selection=mode value="default" disabled=defaultDisabled}} {{t 'formIngress.hostMode.default'}}</label>
           </div>
+        {{else}}
+          {{#if (eq mode "existing")}}
+            <div>
+              <label>{{t 'formIngress.hostMode.existing' domain=(if existingHost existingHost 'n/a') htmlSafe=true}}</label>
+            </div>
+          {{else if (eq mode "automatic")}}
+            <div>
+              <label>{{t 'formIngress.hostMode.automatic' domain=settings.ingress-ip-domain htmlSafe=true}}</label>
+            </div>
+          {{else if (eq mode "manual")}}
+            <div>
+              <label>{{t 'formIngress.hostMode.manual'}}</label>
+            </div>
+          {{else}}
+            <div>
+              <label>{{t 'formIngress.hostMode.default'}}</label>
+            </div>
+          {{/if}}
         {{/if}}
-        <div class="radio">
-          <label>{{radio-button selection=mode value="manual"}} {{t 'formIngress.hostMode.manual'}}</label>
-        </div>
-        <div class="radio">
-          <label class="{{if defaultDisabled 'text-muted'}}">{{radio-button selection=mode value="default" disabled=defaultDisabled}} {{t 'formIngress.hostMode.default'}}</label>
-        </div>
       </div>
 
       {{#if (eq mode "manual")}}
@@ -50,5 +70,10 @@
 
     <hr class="mt-20 mb-20" />
 
-    {{form-ingress-backends ingress=ingress isDefault=isDefault rule=rule editing=editing}}
+    {{form-ingress-backends
+        ingress=ingress
+        isDefault=isDefault
+        rule=rule
+        editing=editing
+    }}
   </div>

lib/shared/addon/components/form-ingress-rule/template.hbs

@@ -4,11 +4,12 @@
 <hr/>
 {{#each rules as |rule|}}
   {{form-ingress-rows
-    removeRule=(action 'removeRule')
-    rules=rules
-    rule=rule
-    ingress=ingress
-    editing=editing}}
+      removeRule=(action 'removeRule')
+      rules=rules
+      rule=rule
+      ingress=ingress
+      editing=editing
+  }}
 {{else}}
   <div class="p-20">{{t 'formIngress.noRules'}}</div>
 {{/each}}