fix(core/pipeline): make UX less bad when a pipeline stage never happ…

…ened (#7563)
spinnaker · Oct 24, 2019 · 6236a9f · 6236a9f
1 parent 17232e6
commit 6236a9f
Showing 1 changed file with 25 additions and 13 deletions.
diff --git a/...cripts/modules/core/src/pipeline/config/stages/pipeline/PipelineStageExecutionDetails.tsx b/...cripts/modules/core/src/pipeline/config/stages/pipeline/PipelineStageExecutionDetails.tsx
@@ -2,6 +2,8 @@ import * as React from 'react';
 import { UISref } from '@uirouter/react';
 
 import { IExecutionDetailsSectionProps, ExecutionDetailsSection, StageFailureMessage } from 'core/pipeline';
+import { IPipeline } from 'core/domain';
+import { useLatestPromise } from 'core/presentation/hooks/useLatestPromise.hook';
 
 export function PipelineStageExecutionDetails(props: IExecutionDetailsSectionProps) {
   const {
@@ -13,6 +15,13 @@ export function PipelineStageExecutionDetails(props: IExecutionDetailsSectionPro
     current,
   } = props;
 
+  const { result: pipelineConfigs } = useLatestPromise<IPipeline[]>(() => {
+    application.pipelineConfigs.activate();
+    return application.pipelineConfigs.ready();
+  }, []);
+  const pipelineConfig =
+    pipelineConfigs && context.pipeline && pipelineConfigs.find(({ id }) => context.pipeline === id);
+
   return (
     <ExecutionDetailsSection name={name} current={current}>
       <div className="row">
@@ -22,27 +31,30 @@ export function PipelineStageExecutionDetails(props: IExecutionDetailsSectionPro
             <dt>Application</dt>
             <dd>{context.application}</dd>
             <dt>Pipeline</dt>
-            <dd>{context.executionName}</dd>
+            <dd>{(pipelineConfig && pipelineConfig.name) || context.executionName || 'N/A'}</dd>
             <dt>Status</dt>
-            <dd>{context.status}</dd>
+            <dd>{context.status || 'N/A'}</dd>
           </dl>
         </div>
       </div>
       <StageFailureMessage stage={stage} message={stage.failureMessage} />
       <div className="row">
         <div className="col-md-12">
           <div className="well alert alert-info">
-            <UISref
-              to="home.applications.application.pipelines.executionDetails.execution"
-              params={{
-                application: stage.context.application,
-                executionId: stage.context.executionId,
-                executionParams: { application: application.name, executionId: execution.id },
-              }}
-              options={{ inherit: false, reload: 'home.applications.application.pipelines.executionDetails' }}
-            >
-              <a target="_self">View Pipeline Execution</a>
-            </UISref>
+            {(stage.hasNotStarted || !context.executionId) && <span>No Execution Started</span>}
+            {!stage.hasNotStarted && context.executionId && (
+              <UISref
+                to="home.applications.application.pipelines.executionDetails.execution"
+                params={{
+                  application: stage.context.application,
+                  executionId: stage.context.executionId,
+                  executionParams: { application: application.name, executionId: execution.id },
+                }}
+                options={{ inherit: false, reload: 'home.applications.application.pipelines.executionDetails' }}
+              >
+                <a target="_self">View Pipeline Execution</a>
+              </UISref>
+            )}
           </div>
         </div>
       </div>