fix(core): fix awaiting judgment overflow, prevent flicker on active …

…stages (#5169)
spinnaker · Apr 12, 2018 · ff9aa05 · ff9aa05
1 parent b44c5ce
commit ff9aa05
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 16 deletions.
diff --git a/app/scripts/modules/core/src/pipeline/executions/execution/ExecutionMarker.tsx b/app/scripts/modules/core/src/pipeline/executions/execution/ExecutionMarker.tsx
@@ -93,8 +93,10 @@ export class ExecutionMarker extends React.Component<IExecutionMarkerProps, IExe
     const MarkerIcon = stage.markerIcon;
     const stageContents = (
       <div className={markerClassName} style={{ width, backgroundColor: stage.color }} onClick={this.handleStageClick}>
-        <MarkerIcon stage={stage} />
-        <span className="duration">{this.state.duration}</span>
+        <span className="horizontal center middle">
+          <MarkerIcon stage={stage} />
+          <span className="duration">{this.state.duration}</span>
+        </span>
       </div>
     );
     if (stage.useCustomTooltip) {

diff --git a/app/scripts/modules/core/src/pipeline/executions/execution/execution.less b/app/scripts/modules/core/src/pipeline/executions/execution/execution.less
@@ -1,4 +1,4 @@
-@import (reference) "~core/presentation/less/imports/commonImports.less";
+@import (reference) '~core/presentation/less/imports/commonImports.less';
 
 .execution {
   .label {
@@ -12,25 +12,26 @@
     &.label-succeeded {
       background-color: var(--color-success);
     }
-    &.label-terminal, &.label-terminated {
+    &.label-terminal,
+    &.label-terminated {
       background-color: var(--color-danger);
     }
     &.label-failed_continue {
       background-color: var(--color-alert);
       color: var(--color-mineshaft);
     }
-    &.label-running, &.label-launched {
+    &.label-running,
+    &.label-launched {
       background-color: var(--color-accent);
     }
     &.label-stopped {
       background-color: var(--color-danger-light);
       color: var(--color-mineshaft);
     }
-
   }
   .timestamp {
     color: var(--color-dovegray);
-    font-size: .8em;
+    font-size: 0.8em;
     padding-top: 22px;
   }
   .panel {
@@ -52,7 +53,6 @@
         background-color: var(--color-accent-g1);
       }
     }
-
   }
 }
 
@@ -85,10 +85,11 @@ execution-details-section-nav {
 
 .execution-bar {
   display: inline-block;
-  width: calc(~"100% - 235px");
+  width: calc(~'100% - 235px');
   vertical-align: top;
   .stage {
-    .fa { // .fa is "font-awesome" - the only icon set we're using for custom stage icons
+    .fa {
+      // .fa is "font-awesome" - the only icon set we're using for custom stage icons
       display: inline-block;
     }
     .duration {
@@ -97,6 +98,7 @@ execution-details-section-nav {
       visibility: hidden;
       width: 0;
       display: inline-block;
+      overflow: hidden;
     }
   }
 }

diff --git a/app/scripts/modules/core/src/pipeline/executions/executions.less b/app/scripts/modules/core/src/pipeline/executions/executions.less
@@ -1,6 +1,6 @@
-@import (reference) "~core/presentation/less/imports/commonImports.less";
+@import (reference) '~core/presentation/less/imports/commonImports.less';
 
-[ui-view="pipelines"] {
+[ui-view='pipelines'] {
   padding-top: 0 !important;
 }
 .executions-section {
@@ -97,7 +97,8 @@
 }
 
 // overrides
-.execution-status-executing, .execution-status-running {
+.execution-status-executing,
+.execution-status-running {
   color: var(--color-accent);
 }
 .execution-status-terminal {
@@ -110,6 +111,7 @@
 .execution-marker {
   fill: var(--color-alto);
   background-color: var(--color-alto);
+  overflow: hidden;
   &.execution-marker-terminal {
     fill: var(--color-danger);
     background-color: var(--color-danger);
@@ -130,7 +132,8 @@
     fill: var(--color-danger-light);
     background-color: var(--color-danger-light);
   }
-  &.execution-marker-not_started, &.execution-marker-canceled {
+  &.execution-marker-not_started,
+  &.execution-marker-canceled {
     fill: var(--color-alto);
     background-color: var(--color-alto);
   }
@@ -147,7 +150,8 @@
     background-color: var(--color-danger-light);
   }
   &.execution-marker-stopped {
-    &.stage-type-checkpreconditions, &.stage-type-manualjudgment {
+    &.stage-type-checkpreconditions,
+    &.stage-type-manualjudgment {
       fill: var(--color-titanium);
       background-color: var(--color-titanium);
     }

diff --git a/app/scripts/modules/core/src/pipeline/service/execution.service.ts b/app/scripts/modules/core/src/pipeline/service/execution.service.ts
@@ -442,7 +442,8 @@ export class ExecutionService {
       } else {
         // if the stage is active, update it in place if it has changed to save Angular
         // from removing, then re-rendering every DOM node
-        if (updatedSummary.isActive || currentSummary.isActive) {
+        // also, don't dehydrate
+        if ((updatedSummary.isActive || currentSummary.isActive) && (!current.hydrated || updated.hydrated)) {
           if (this.stringify(currentSummary) !== this.stringify(updatedSummary)) {
             Object.assign(currentSummary, updatedSummary);
           }