refactor(core): Convert executionDetailsSectionNav, executionStepDet…

…ails, statusGlyph to react (#4273)

app/scripts/modules/core/src/delivery/delivery.module.js

@@ -7,6 +7,7 @@ import { EXECUTION_DETAILS_COMPONENT } from './details/executionDetails.componen
 import { EXECUTION_DETAILS_CONTROLLER } from './details/executionDetails.controller';
 import { BUILD_DISPLAY_NAME_FILTER } from './executionBuild/buildDisplayName.filter';
 import { EXECUTION_COMPONENT } from './executionGroup/execution/execution.component';
+import { EXECUTION_DETAILS_SECTION_NAV } from './details/executionDetailsSectionNav.component';
 import { STAGE_FAILURE_MESSAGE_COMPONENT } from './stageFailureMessage/stageFailureMessage.component';
 import { CORE_DELIVERY_DETAILS_SINGLEEXECUTIONDETAILS } from './details/singleExecutionDetails.component';
 
@@ -16,7 +17,7 @@ module.exports = angular.module('spinnaker.delivery', [
   CORE_DELIVERY_DETAILS_SINGLEEXECUTIONDETAILS,
   EXECUTION_COMPONENT,
   EXECUTION_DETAILS_COMPONENT,
-  require('./details/executionDetailsSectionNav.directive.js').name,
+  EXECUTION_DETAILS_SECTION_NAV,
 
   BUILD_DISPLAY_NAME_FILTER,
 

app/scripts/modules/core/src/delivery/details/ExecutionDetailsSectionNav.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import * as ReactGA from 'react-ga';
+import { UISref, UISrefActive } from '@uirouter/react';
+import { UIRouterContext } from '@uirouter/react-hybrid';
+
+import { robotToHuman } from 'core/presentation/robotToHumanFilter/robotToHuman.filter';
+
+export interface IExecutionDetailsSectionNavProps {
+  sections: string[];
+}
+
+@UIRouterContext
+export class ExecutionDetailsSectionNav extends React.Component<IExecutionDetailsSectionNavProps> {
+  public render() {
+    return (
+      <ul className="nav nav-pills">
+        {this.props.sections.map((section) => <Section key={section} section={section}/>)}
+      </ul>
+    );
+  }
+}
+
+const Section = (props: { section: string }): JSX.Element => {
+  const clicked = () => {
+    ReactGA.event({category: 'Pipeline', action: 'Execution details section selected', label: props.section});
+  }
+  return (
+    <li>
+      <UISrefActive class="active">
+        <UISref to=".execution" params={{details: props.section}}>
+          <span onClick={clicked}>{robotToHuman(props.section)}</span>
+        </UISref>
+      </UISrefActive>
+    </li>
+  );
+}

app/scripts/modules/core/src/delivery/details/executionDetailsSectionNav.component.ts

@@ -0,0 +1,8 @@
+import { module } from 'angular';
+import { react2angular } from 'react2angular';
+
+import { ExecutionDetailsSectionNav } from './ExecutionDetailsSectionNav';
+
+export const EXECUTION_DETAILS_SECTION_NAV = 'spinnaker.core.delivery.details.executionDetailsSectionNav';
+module(EXECUTION_DETAILS_SECTION_NAV, [])
+  .component('executionDetailsSectionNav', react2angular(ExecutionDetailsSectionNav, ['sections']));

app/scripts/modules/core/src/delivery/stageFailureMessage/stageFailureMessage.component.ts

@@ -1,7 +1,6 @@
 import { IController, module } from 'angular';
 
-import { IStageStep } from 'core/domain/IStageStep';
-import { IExecutionStage } from 'core/domain/IExecutionStage';
+import { IExecutionStage, ITaskStep } from 'core/domain';
 
 interface IFailureOnChanges extends ng.IOnChangesObject {
   isFailed: ng.IChangesObject<boolean>;
@@ -14,7 +13,7 @@ class StageFailureMessageCtrl implements IController {
   public message: string;
   public messages: string[];
   public stage: IExecutionStage;
-  public failedTask: IStageStep;
+  public failedTask: ITaskStep;
 
   public $onInit(): void {
     if (this.stage && (this.stage.isFailed || this.stage.isStopped)) {

app/scripts/modules/core/src/domain/IExecutionStage.ts

@@ -3,7 +3,7 @@ import { Application } from 'core/application/application.model';
 import { IExecution } from './IExecution';
 import { IOrchestratedItem } from './IOrchestratedItem';
 import { IStage } from './IStage';
-import { IStageStep } from './IStageStep';
+import { ITaskStep } from './ITaskStep';
 
 export interface IRestartDetails {
   restartedBy: string;
@@ -24,7 +24,7 @@ export interface IExecutionStage extends IOrchestratedItem, IStage {
   before?: IExecutionStage[];
   context: IExecutionContext;
   id: string;
-  tasks: IStageStep[];
+  tasks: ITaskStep[];
 }
 
 export interface IExecutionStageLabelComponentProps {

app/scripts/modules/core/src/domain/ITaskStep.ts

@@ -1,6 +1,6 @@
-import {ITimedItem} from './IOrchestratedItem';
+import { IOrchestratedItem } from './IOrchestratedItem';
 
-export interface ITaskStep extends ITimedItem {
+export interface ITaskStep extends IOrchestratedItem {
   name: string;
   status: string;
 }

app/scripts/modules/core/src/domain/index.ts

@@ -43,7 +43,6 @@ export * from './IServerGroup';
 export * from './IStage';
 export * from './IStageContext';
 export * from './IStageOrTriggerTypeConfig';
-export * from './IStageStep';
 export * from './IStageTypeConfig';
 export * from './IStrategy'
 export * from './ISubnet';

app/scripts/modules/core/src/pipeline/config/stages/checkPreconditions/checkPreconditionsStage.module.js

@@ -2,8 +2,10 @@
 
 const angular = require('angular');
 
+import { STAGE_CORE_MODULE } from '../core/stage.core.module';
+
 module.exports = angular.module('spinnaker.pipelines.stage.checkPreconditions', [
   require('../stage.module.js').name,
-  require('../core/stage.core.module.js').name,
+  STAGE_CORE_MODULE,
   require('./checkPreconditionsStage.js').name,
 ]);

app/scripts/modules/core/src/pipeline/config/stages/cloneServerGroup/cloneServerGroupStage.module.js

@@ -2,8 +2,10 @@
 
 const angular = require('angular');
 
+import { STAGE_CORE_MODULE } from '../core/stage.core.module';
+
 module.exports = angular.module('spinnaker.core.pipeline.stage.cloneServerGroup', [
   require('./cloneServerGroupStage.js').name,
   require('../stage.module.js').name,
-  require('../core/stage.core.module.js').name,
+  STAGE_CORE_MODULE,
 ]);

app/scripts/modules/core/src/pipeline/config/stages/core/ExecutionStepDetails.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+
+import { IExecutionStage } from 'core/domain';
+import { StatusGlyph } from 'core/task/StatusGlyph';
+import { displayableTasks } from 'core/task/displayableTasks.filter';
+import { duration } from 'core/utils/timeFormatters';
+import { robotToHuman } from 'core/presentation/robotToHumanFilter/robotToHuman.filter';
+
+export interface IExecutionStepDetailsProps {
+  stage: IExecutionStage;
+}
+
+export class ExecutionStepDetails extends React.Component<IExecutionStepDetailsProps> {
+  public render() {
+    return (
+      <div className="col-md-9">
+        <div className="row">
+          <div className="col-md-9">
+            <strong>Task</strong>
+          </div>
+          <div className="col-md-3 text-right">
+            <strong>Duration</strong>
+          </div>
+        </div>
+        { displayableTasks(this.props.stage.tasks).map((task) => (
+          <div className="row">
+            <div className="col-md-9">
+              <span className="small"><StatusGlyph item={task}/></span> {robotToHuman(task.name)}
+            </div>
+            <div className="col-md-3 text-right">
+              {duration(task.runningTimeInMs)}
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+}

app/scripts/modules/core/src/pipeline/config/stages/core/executionStepDetails.component.ts

@@ -0,0 +1,8 @@
+import { module } from 'angular';
+import { react2angular } from 'react2angular';
+
+import { ExecutionStepDetails } from './ExecutionStepDetails';
+
+export const EXECUTION_STEP_DETAILS_COMPONENT = 'spinnaker.core.pipeline.config.stages.core.executionStepDetails.component';
+module(EXECUTION_STEP_DETAILS_COMPONENT, [])
+  .component('executionStepDetails', react2angular(ExecutionStepDetails, ['stage']));

app/scripts/modules/core/src/pipeline/config/stages/core/stage.core.module.ts

@@ -0,0 +1,11 @@
+import { module } from 'angular';
+
+import { DISPLAYABLE_TASKS_FILTER } from 'core/task/displayableTasks.filter';
+import { EXECUTION_STEP_DETAILS_COMPONENT } from './executionStepDetails.component';
+
+export const STAGE_CORE_MODULE = 'spinnaker.core.pipeline.stage.core';
+
+module(STAGE_CORE_MODULE, [
+  EXECUTION_STEP_DETAILS_COMPONENT,
+  DISPLAYABLE_TASKS_FILTER,
+]);

app/scripts/modules/core/src/pipeline/config/stages/deploy/deployStage.module.js

@@ -1,14 +1,16 @@
 'use strict';
-import {CLUSTER_NAME_FILTER} from './clusterName.filter';
 
 const angular = require('angular');
 
+import { CLUSTER_NAME_FILTER } from './clusterName.filter';
+import { STAGE_CORE_MODULE } from '../core/stage.core.module';
+
 module.exports = angular.module('spinnaker.core.pipeline.stage.deploy', [
   require('./deployStage.js').name,
   require('./deployStage.transformer.js').name,
   require('./deployExecutionDetails.controller.js').name,
   CLUSTER_NAME_FILTER,
-  require('../core/stage.core.module.js').name,
+  STAGE_CORE_MODULE,
 ])
   .run(function(pipelineConfig, deployStageTransformer) {
     pipelineConfig.registerTransformer(deployStageTransformer);

app/scripts/modules/core/src/pipeline/config/stages/executionWindows/executionWindowsStage.module.js

@@ -3,6 +3,7 @@
 const angular = require('angular');
 
 import { EXECUTION_WINDOW_ACTIONS_COMPONENT } from './executionWindowActions.component';
+import { STAGE_CORE_MODULE } from '../core/stage.core.module';
 
 import './executionWindows.less';
 
@@ -12,5 +13,5 @@ module.exports = angular.module('spinnaker.core.pipeline.stage.executionWindows'
   require('./executionWindows.directive.js').name,
   EXECUTION_WINDOW_ACTIONS_COMPONENT,
   require('../stage.module.js').name,
-  require('../core/stage.core.module.js').name,
+  STAGE_CORE_MODULE,
 ]);

app/scripts/modules/core/src/pipeline/config/stages/findImageFromTags/findImageFromTagsStage.module.js

@@ -2,8 +2,10 @@
 
 const angular = require('angular');
 
+import { STAGE_CORE_MODULE } from '../core/stage.core.module';
+
 module.exports = angular.module('spinnaker.core.pipeline.stage.findImageFromTags', [
   require('../stage.module.js').name,
-  require('../core/stage.core.module.js').name,
+  STAGE_CORE_MODULE,
   require('./findImageFromTagsStage.js').name,
 ]);

app/scripts/modules/core/src/pipeline/config/stages/jenkins/jenkinsStage.module.js

@@ -1,13 +1,15 @@
 'use strict';
 
 const angular = require('angular');
-import {IGOR_SERVICE} from 'core/ci/igor.service';
-import {TIME_FORMATTERS} from 'core/utils/timeFormatters';
+
+import { IGOR_SERVICE } from 'core/ci/igor.service';
+import { STAGE_CORE_MODULE } from '../core/stage.core.module';
+import { TIME_FORMATTERS } from 'core/utils/timeFormatters';
 
 module.exports = angular.module('spinnaker.core.pipeline.stage.jenkins', [
   require('./jenkinsStage.js').name,
   require('../stage.module.js').name,
-  require('../core/stage.core.module.js').name,
+  STAGE_CORE_MODULE,
   TIME_FORMATTERS,
   IGOR_SERVICE,
   require('./jenkinsExecutionDetails.controller.js').name,

app/scripts/modules/core/src/pipeline/config/stages/manualJudgment/manualJudgmentStage.module.js

@@ -2,11 +2,13 @@
 
 const angular = require('angular');
 
+import { STAGE_CORE_MODULE } from '../core/stage.core.module';
+
 import './manualJudgmentExecutionDetails.less';
 
 module.exports = angular.module('spinnaker.core.pipeline.stage.manualJudgment', [
   require('../stage.module.js').name,
-  require('../core/stage.core.module.js').name,
+  STAGE_CORE_MODULE,
   require('./manualJudgmentExecutionDetails.controller.js').name,
   require('./manualJudgmentStage.js').name,
   require('../../../../notification/modal/editNotification.controller.modal.js').name,

app/scripts/modules/core/src/pipeline/config/stages/tagImage/tagImageStage.module.js

@@ -2,8 +2,10 @@
 
 const angular = require('angular');
 
+import { STAGE_CORE_MODULE } from '../core/stage.core.module';
+
 module.exports = angular.module('spinnaker.core.pipeline.stage.tagImage', [
   require('../stage.module.js').name,
-  require('../core/stage.core.module.js').name,
+  STAGE_CORE_MODULE,
   require('./tagImageStage.js').name,
 ]);