feat(core/executions): Render newly migrated execution groups (#8807)

* feat(core/executions): Render newly migrated pipelines differently * Use classnames
spinnaker · Dec 18, 2020 · 29a85a0 · 29a85a0
1 parent 82dca5f
commit 29a85a0
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 4 deletions.
diff --git a/app/scripts/modules/core/src/application/nav/verticalNav.less b/app/scripts/modules/core/src/application/nav/verticalNav.less
@@ -114,7 +114,7 @@
     }
   }
 
-  .nav-section:not(:first-of-type):not(:last-of-type) {
+  .nav-section:not(:first-of-type) {
     border-top: 1px solid var(--color-white);
   }
 }

diff --git a/app/scripts/modules/core/src/domain/IPipeline.ts b/app/scripts/modules/core/src/domain/IPipeline.ts
@@ -16,6 +16,7 @@ export interface IPipeline {
   locked?: IPipelineLock;
   limitConcurrent: boolean;
   manualStartAlert?: IPipelineManualStartAlert;
+  migrationStatus?: string;
   name: string;
   notifications?: INotification[];
   respectQuietPeriod?: boolean;

diff --git a/app/scripts/modules/core/src/pipeline/executions/executionGroup/ExecutionGroup.tsx b/app/scripts/modules/core/src/pipeline/executions/executionGroup/ExecutionGroup.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import ReactGA from 'react-ga';
 import { Observable, Subject, Subscription } from 'rxjs';
 import { flatten, uniq, without } from 'lodash';
+import classnames from 'classnames';
 
 import { Application } from 'core/application/application.model';
 import { CollapsibleSectionStateCache } from 'core/cache';
@@ -24,6 +25,7 @@ import { RenderWhenVisible } from 'core/utils/RenderWhenVisible';
 
 import { TriggersTag } from '../../triggers/TriggersTag';
 import { AccountTag } from 'core/account';
+import { MigrationTag } from './MigrationTag';
 import { ReactInjector } from 'core/reactShims';
 import { ManualExecutionModal } from '../../manualExecution';
 import { PipelineTemplateReader, PipelineTemplateV2Service } from '../../config/templates';
@@ -251,6 +253,7 @@ export class ExecutionGroup extends React.PureComponent<IExecutionGroupProps, IE
     const { group } = this.props;
     const { displayExecutionActions, pipelineConfig, triggeringExecution, showingDetails } = this.state;
     const pipelineDisabled = pipelineConfig && pipelineConfig.disabled;
+    const pipelineJustMigrated = pipelineConfig?.migrationStatus === 'STARTED';
     const pipelineDescription = pipelineConfig && pipelineConfig.description;
     const hasRunningExecutions = group.runningExecutions && group.runningExecutions.length > 0;
 
@@ -285,13 +288,20 @@ export class ExecutionGroup extends React.PureComponent<IExecutionGroupProps, IE
       );
     }
 
+    const shadowedClassName = classnames({ shadowed: true, 'in-migration': pipelineJustMigrated });
+    const groupActionsClassName = classnames({
+      'text-right': true,
+      'execution-group-actions': true,
+      'in-migration': pipelineJustMigrated,
+    });
+
     return (
       <div className={`execution-group ${showingDetails ? 'showing-details' : 'details-hidden'}`}>
         {group.heading && (
           <div className="clickable sticky-header" onClick={this.handleHeadingClicked}>
             <div className={`execution-group-heading ${pipelineDisabled ? 'inactive' : 'active'}`}>
               <span className={`glyphicon pipeline-toggle glyphicon-chevron-${this.state.open ? 'down' : 'right'}`} />
-              <div className="shadowed" style={{ position: 'relative' }}>
+              <div className={shadowedClassName} style={{ position: 'relative' }}>
                 <div className={`heading-tag-overflow-group ${this.state.showOverflowAccountTags ? 'shown' : ''}`}>
                   {groupTargetAccountLabelsExtra}
                 </div>
@@ -317,6 +327,7 @@ export class ExecutionGroup extends React.PureComponent<IExecutionGroupProps, IE
                       <span className="badge">{group.runningExecutions.length}</span>
                     </span>
                   )}
+                  {pipelineJustMigrated && <MigrationTag />}
                 </h4>
                 {pipelineConfig && (
                   <EntityNotifications
@@ -329,7 +340,7 @@ export class ExecutionGroup extends React.PureComponent<IExecutionGroupProps, IE
                   />
                 )}
                 {displayExecutionActions && (
-                  <div className="text-right execution-group-actions">
+                  <div className={groupActionsClassName}>
                     {pipelineConfig && <TriggersTag pipeline={pipelineConfig} />}
                     {pipelineConfig && <NextRunTag pipeline={pipelineConfig} />}
                     <ExecutionAction handleClick={this.handleConfigureClicked}>

diff --git a/app/scripts/modules/core/src/pipeline/executions/executionGroup/ExecutionGroups.tsx b/app/scripts/modules/core/src/pipeline/executions/executionGroup/ExecutionGroups.tsx
@@ -89,7 +89,12 @@ export class ExecutionGroups extends React.Component<IExecutionGroupsProps, IExe
     const { groups = [], container, showingDetails } = this.state;
     const hasGroups = groups.length > 0;
     const className = `row pipelines executions ${showingDetails ? 'showing-details' : ''}`;
-    const executionGroups = groups.map((group: IExecutionGroup) => (
+
+    const allGroups = groups
+      .filter((g: IExecutionGroup) => g.config.migrationStatus === 'STARTED')
+      .concat(groups.filter((g) => g.config.migrationStatus !== 'STARTED'));
+
+    const executionGroups = allGroups.map((group: IExecutionGroup) => (
       <ExecutionGroup parent={container} key={group.heading} group={group} application={this.props.application} />
     ));
 

diff --git a/app/scripts/modules/core/src/pipeline/executions/executionGroup/MigrationTag.tsx b/app/scripts/modules/core/src/pipeline/executions/executionGroup/MigrationTag.tsx
@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { Overridable } from 'core/overrideRegistry';
+
+@Overridable('core.executions.migrationTag')
+export class MigrationTag extends React.Component<{}, {}> {
+  public render() {
+    return <span className="migration-tag sp-margin-s-left">MIGRATED</span>;
+  }
+}
diff --git a/app/scripts/modules/core/src/pipeline/executions/executionGroup/executionGroup.less b/app/scripts/modules/core/src/pipeline/executions/executionGroup/executionGroup.less
@@ -101,6 +101,14 @@
   vertical-align: middle;
 }
 
+.migration-tag {
+  background-color: var(--color-warning);
+  border-radius: 8px;
+  color: var(--color-white);
+  font-size: 10px;
+  padding: 2px 8px;
+}
+
 .execution-group-actions {
   background-color: var(--color-accent-g2);
   flex: 0 0 auto;
@@ -110,6 +118,9 @@
       margin-left: 40px;
     }
   }
+  &.in-migration {
+    background-color: var(--color-status-warning-light);
+  }
 }
 
 .execution-group {

diff --git a/app/scripts/modules/core/src/presentation/stickyHeader.less b/app/scripts/modules/core/src/presentation/stickyHeader.less
@@ -12,6 +12,10 @@
     flex: 1 1 auto;
     background-color: var(--color-accent-g2);
     align-items: center;
+
+    &.in-migration {
+      background-color: var(--color-status-warning-light);
+    }
   }
   .clearfix();
 }