From 9c5a2b5dd58e48a8022015a1b85f8fbf4f1787ed Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Mon, 27 Jul 2020 21:28:37 -0700
Subject: [PATCH] Present scaling events on the job task group page

---
 ui/app/styles/components/accordion.scss       |  8 ++--
 .../styles/components/inline-definitions.scss | 12 ++++++
 .../list-accordion/accordion-body.hbs         |  2 +-
 ui/app/templates/jobs/job/task-group.hbs      | 41 +++++++++++++++++++
 4 files changed, 58 insertions(+), 5 deletions(-)

diff --git a/ui/app/styles/components/accordion.scss b/ui/app/styles/components/accordion.scss
index 3aaa057e5..2b59864a2 100644
--- a/ui/app/styles/components/accordion.scss
+++ b/ui/app/styles/components/accordion.scss
@@ -15,6 +15,10 @@
       border-bottom-left-radius: $radius;
       border-bottom-right-radius: $radius;
     }
+
+    &.is-full-bleed {
+      padding: 0;
+    }
   }
 
   .accordion-head {
@@ -26,10 +30,6 @@
       background: $white;
     }
 
-    &.is-inactive {
-      color: $grey-light;
-    }
-
     .accordion-head-content {
       width: 100%;
       margin-right: 1.5em;
diff --git a/ui/app/styles/components/inline-definitions.scss b/ui/app/styles/components/inline-definitions.scss
index a79273919..50f72b905 100644
--- a/ui/app/styles/components/inline-definitions.scss
+++ b/ui/app/styles/components/inline-definitions.scss
@@ -8,6 +8,10 @@
     font-weight: $weight-semibold;
   }
 
+  &.is-faded {
+    color: darken($grey-blue, 20%);
+  }
+
   .pair {
     margin-right: 2em;
     white-space: nowrap;
@@ -27,6 +31,14 @@
     }
   }
 
+  .icon-field {
+    display: flex;
+    margin-left: -1em;
+    .icon-container {
+      width: 1.5em;
+    }
+  }
+
   &.is-small {
     font-size: $size-7;
   }
diff --git a/ui/app/templates/components/list-accordion/accordion-body.hbs b/ui/app/templates/components/list-accordion/accordion-body.hbs
index 45371404e..19d1aefd6 100644
--- a/ui/app/templates/components/list-accordion/accordion-body.hbs
+++ b/ui/app/templates/components/list-accordion/accordion-body.hbs
@@ -1,5 +1,5 @@
 {{#if this.isOpen}}
-  <div data-test-accordion-body class="accordion-body">
+  <div data-test-accordion-body class="accordion-body {{if this.fullBleed "is-full-bleed"}}">
     {{yield}}
   </div>
 {{/if}}
diff --git a/ui/app/templates/jobs/job/task-group.hbs b/ui/app/templates/jobs/job/task-group.hbs
index c5a2baf4a..c92f3416c 100644
--- a/ui/app/templates/jobs/job/task-group.hbs
+++ b/ui/app/templates/jobs/job/task-group.hbs
@@ -137,6 +137,47 @@
 
   <LifecycleChart @tasks={{this.model.tasks}} />
 
+  {{#if this.model.scaleState.isVisible}}
+    {{! this is where the accordion goes }}
+    <div data-test-scaling-events class="boxed-section">
+      <div class="boxed-section-head">
+        Recent Scaling Events
+      </div>
+      <div class="boxed-section-body">
+        <ListAccordion @source={{this.model.scaleState.events}} @key="time" as |a|>
+          <a.head @buttonLabel="details" @isExpandable={{a.item.hasMeta}} class="with-columns">
+            <div class="columns inline-definitions">
+              <div class="column is-3">
+                <span class="icon-field">
+                  <span class="icon-container" title="{{if a.item.error "Error event"}}">
+                    {{#if a.item.error}}{{x-icon "cancel-circle-fill" class="is-danger"}}{{/if}}
+                  </span>
+                  <span data-test-time>{{format-ts a.item.time}}</span>
+                </span>
+              </div>
+              <div class="column is-2">
+                {{#if a.item.count}}
+                  {{#if a.item.increased}}
+                    {{x-icon "arrow-up" class="is-danger"}}
+                  {{else}}
+                    {{x-icon "arrow-down" class="is-primary"}}
+                  {{/if}}
+                  <span>{{a.item.count}}</span>
+                {{/if}}
+              </div>
+              <div class="column">
+                {{a.item.message}}
+              </div>
+            </div>
+          </a.head>
+          <a.body @fullBleed={{true}}>
+            <JsonViewer @json={{a.item.meta}} @fluidHeight={{true}} />
+          </a.body>
+        </ListAccordion>
+      </div>
+    </div>
+  {{/if}}
+
   {{#if this.model.volumes.length}}
     <div data-test-volumes class="boxed-section">
       <div class="boxed-section-head">