ui: Change layout styling for healthcheckoutput, add CheckID (#6195)

ui-v2/app/components/healthcheck-output.js

@@ -1,5 +1,6 @@
 import Component from '@ember/component';
+import Slotted from 'block-slots';
 
-export default Component.extend({
+export default Component.extend(Slotted, {
   classNames: ['healthcheck-output'],
 });

ui-v2/app/styles/components/healthcheck-output.scss

@@ -2,40 +2,3 @@
 .healthcheck-output {
   @extend %healthcheck-output;
 }
-%healthcheck-output::before {
-  @extend %as-pseudo;
-  position: absolute;
-  width: 32px;
-  height: 32px;
-}
-%healthcheck-output.passing::before {
-  @extend %with-check-circle-fill-color-icon;
-}
-%healthcheck-output.warning::before {
-  @extend %with-alert-triangle-color-icon;
-}
-%healthcheck-output.critical::before {
-  @extend %with-cancel-square-fill-color-icon;
-}
-@media #{$--lt-spacious-healthcheck-output} {
-  .healthcheck-output button.copy-btn {
-    margin-top: -2px;
-    margin-right: -10px;
-    padding: 0;
-    min-width: 20px !important;
-    width: 20px;
-    visibility: hidden;
-  }
-  %healthcheck-output {
-    padding-left: 40px;
-    padding-top: 12px;
-    padding-bottom: 15px;
-    padding-right: 13px;
-  }
-  %healthcheck-output::before {
-    left: 9px;
-    top: 13px;
-    width: 24px;
-    height: 24px;
-  }
-}

ui-v2/app/styles/components/healthcheck-output/layout.scss

@@ -1,23 +1,75 @@
-%healthcheck-output::before {
-  left: 14px;
-  top: 20px;
-}
 %healthcheck-output {
-  position: relative;
+  display: flex;
-  padding: 20px 24px;
+
-  padding-bottom: 26px;
+  padding: 20px 16px;
-  padding-left: 57px;
+  padding-right: 24px;
+
   margin-bottom: 24px;
 }
+%healthcheck-output::before {
+  margin-right: 15px;
+}
+%healthcheck-output > div {
+  flex: 1 1 auto;
+}
+%healthcheck-output header {
+  margin-bottom: 0.9em;
+}
+%healthcheck-output dl:not(:last-of-type) {
+  float: left;
+  width: 25%;
+  margin-right: 2%;
+}
+%healthcheck-output dl:nth-of-type(3) {
+  width: 46%;
+  margin-right: 0;
+}
+%healthcheck-output dl:not(:last-of-type) dd {
+  word-break: break-all;
+}
+%healthcheck-output dt {
+  margin-bottom: 0;
+}
+%healthcheck-output dl:last-of-type {
+  clear: both;
+  margin-bottom: 0;
+}
+%healthcheck-output dl:last-of-type dt {
+  margin-bottom: 0.3em;
+}
+%healthcheck-output dl:last-of-type dd {
+  position: relative;
+}
+%healthcheck-output dl > * {
+  float: none;
+  display: block;
+  width: auto;
+  position: static;
+  padding-left: 0;
+}
 %healthcheck-output pre {
   padding: 12px;
+  padding-right: 40px;
+  white-space: pre-wrap;
 }
 %healthcheck-output .with-feedback {
-  float: right;
+  position: absolute;
+  right: 0.5em;
+  top: 1em;
 }
-%healthcheck-output dt {
+@media #{$--lt-spacious-healthcheck-output} {
-  margin-bottom: 0.2em;
+  %healthcheck-output {
-}
+    padding-top: 15px;
-%healthcheck-output dd:first-of-type {
+    padding-bottom: 15px;
-  margin-bottom: 0.6em;
+    padding-left: 14px;
+    padding-right: 19px;
+  }
+  %healthcheck-output::before {
+    margin-right: 8px;
+  }
+  %healthcheck-output dl:not(:last-of-type) {
+    float: none;
+    width: auto;
+    margin-right: 0;
+  }
 }

ui-v2/app/styles/components/healthcheck-output/skin.scss

@@ -1,6 +1,28 @@
 %healthcheck-output {
   border-width: 1px;
 }
+%healthcheck-output::before {
+  @extend %as-pseudo;
+  min-width: 26px;
+  min-height: 26px;
+  margin-right: 15px;
+}
+@media #{$--lt-spacious-healthcheck-output} {
+  %healthcheck-output::before {
+    min-width: 18px;
+    min-height: 18px;
+    margin-right: 8px;
+  }
+}
+%healthcheck-output.passing::before {
+  @extend %with-check-circle-fill-color-icon;
+}
+%healthcheck-output.warning::before {
+  @extend %with-alert-triangle-color-icon;
+}
+%healthcheck-output.critical::before {
+  @extend %with-cancel-square-fill-color-icon;
+}
 %healthcheck-output,
 %healthcheck-output pre {
   border-radius: $decor-radius-100;
@@ -9,21 +31,23 @@
   color: $gray-400;
 }
 %healthcheck-output pre {
-  background-color: $black;
+  background-color: $gray-050;
-  color: $white;
+  color: $gray-600;
 }
-%healthcheck-output.passing {
+%healthcheck-output {
   /* TODO: this should be a frame-gray */
-  // @extend %frame-green-500;
   color: $gray-900;
   border-color: $gray-200;
   border-style: solid;
+
+  border-left-width: 4px;
+}
+%healthcheck-output.passing {
+  border-left-color: $green-500;
 }
 %healthcheck-output.warning {
-  @extend %frame-yellow-500;
+  border-left-color: $yellow-500;
-  color: $gray-900;
 }
 %healthcheck-output.critical {
-  @extend %frame-red-500;
+  border-left-color: $red-500;
-  color: $gray-900;
 }

ui-v2/app/styles/components/product.scss

@@ -55,10 +55,18 @@ html.template-loading main > div {
     display: none;
   }
 }
+// reduced search magnifying icon layout
 @media #{$--lt-horizontal-selects} {
   %app-view header h1 {
     display: inline-block;
   }
+  %app-view header h1 {
+    display: inline-block;
+  }
+  // on the instance detail page we don't have the magnifier
+  html.template-instance.template-show h1 {
+    display: block;
+  }
   #toolbar-toggle + * {
     display: none;
   }

ui-v2/app/styles/core/typography.scss

@@ -104,6 +104,7 @@ th,
 td,
 caption,
 .type-dialog,
+%healthcheck-output dl > *,
 %form-element > span,
 %tooltip-bubble,
 %stats-card header a span,

ui-v2/app/styles/variables/custom-query.scss

@@ -26,8 +26,8 @@ $--lt-wide-footer: '(max-width: 420px)';
 $--spacious-page-header: '(min-width: 850px)';
 $--lt-spacious-page-header: '(max-width: 849px)';
 
-$--spacious-healthcheck-output: '(min-width: 421px)';
+$--spacious-healthcheck-output: '(min-width: 651px)';
-$--lt-spacious-healthcheck-output: '(max-width: 420px)';
+$--lt-spacious-healthcheck-output: '(max-width: 650px)';
 
 $--wide-form: '(min-width: 421px)';
 $--lt-wide-form: '(max-width: 420px)';

ui-v2/app/templates/components/healthcheck-list.hbs

@@ -1,5 +1,28 @@
 <ul data-test-healthchecks>
-{{#each (sort-by (action 'sortChecksByImportance') items) as |check| }}
+{{#each (sort-by (action 'sortChecksByImportance') items) as |item| }}
-  {{healthcheck-output data-test-node-healthcheck=check.Name tagName='li' name=check.Name class=check.Status status=check.Status notes=check.Notes output=check.Output}}
+  {{#healthcheck-output
+    data-test-node-healthcheck=item.Name
+    class=item.Status
+    tagName='li'
+    output=item.Output
+    }}
+      {{#block-slot 'header'}}
+        <h3>{{item.Name}}</h3>
+      {{/block-slot}}
+      {{#block-slot 'content'}}
+      <dl>
+        <dt>ServiceName</dt>
+        <dd>{{or item.ServiceName '-'}}</dd>
+      </dl>
+      <dl>
+        <dt>CheckID</dt>
+        <dd>{{or item.CheckID '-'}}</dd>
+      </dl>
+      <dl>
+        <dt>Notes</dt>
+        <dd>{{or item.Notes '-'}}</dd>
+      </dl>
+      {{/block-slot}}
+    {{/healthcheck-output}}
 {{/each}}
 </ul>

ui-v2/app/templates/components/healthcheck-output.hbs

@@ -1,25 +1,28 @@
-{{#feedback-dialog type='inline'}}
+{{yield}}
-    {{#block-slot 'action' as |success error|}}
+<div>
-        {{#copy-button success=(action success) error=(action error) clipboardText=output title='copy output to clipboard'}}
+  <header>
-            Copy Output
+    {{#yield-slot 'header'}}{{yield}}{{/yield-slot}}
-        {{/copy-button}}
+  </header>
-    {{/block-slot}}
+  {{#yield-slot 'content'}}{{yield}}{{/yield-slot}}
-    {{#block-slot 'success' as |transition|}}
+  <dl>
-      <p class={{transition}}>
-        Copied output!
-      </p>
-    {{/block-slot}}
-    {{#block-slot 'error' as |transition|}}
-      <p class={{transition}}>
-        Sorry, something went wrong!
-      </p>
-    {{/block-slot}}
-{{/feedback-dialog}}
-<dl>
-    <dt>{{name}}</dt>
-    <dd>{{notes}}</dd>
     <dt>Output</dt>
     <dd>
         <pre><code>{{output}}</code></pre>
+{{#feedback-dialog type='inline'}}
+  {{#block-slot 'action' as |success error|}}
+      {{copy-button success=(action success) error=(action error) clipboardText=output title='copy output to clipboard'}}
+  {{/block-slot}}
+  {{#block-slot 'success' as |transition|}}
+    <p class={{transition}}>
+      Copied output!
+    </p>
+  {{/block-slot}}
+  {{#block-slot 'error' as |transition|}}
+    <p class={{transition}}>
+      Sorry, something went wrong!
+    </p>
+  {{/block-slot}}
+{{/feedback-dialog}}
     </dd>
-</dl>
+  </dl>
+</div>