feat(precondition): add custom message to precondition

app/scripts/modules/core/src/help/help.contents.ts

@@ -79,6 +79,8 @@ const helpContents: { [key: string]: string } = {
   'pipeline.config.checkPreconditions.failPipeline': `
       <p><strong>Checked</strong> - the overall pipeline will fail whenever this precondition is false.</p>
       <p><strong>Unchecked</strong> - the overall pipeline will continue executing but this particular branch will stop.</p>`,
+  'pipeline.config.checkPreconditions.failureMessage': `
+      <p> This failure message will be shown to the user if the precondition evaluates to false. </p>`,
   'pipeline.config.checkPreconditions.expectedSize': 'Number of server groups in the selected cluster',
   'pipeline.config.checkPreconditions.expression': `
       <p>Value must evaluate to "true".</p>

app/scripts/modules/core/src/pipeline/config/preconditions/types/expression/additionalFields.html

@@ -16,4 +16,13 @@
       <input type="checkbox" ng-model="precondition.failPipeline" />
     </div>
   </div>
+
+  <div class="form-group row">
+    <div class="col-sm-3 sm-label-right">
+      Failure Message <help-field key="pipeline.config.checkPreconditions.failureMessage"></help-field>
+    </div>
+    <div class="col-sm-9">
+      <textarea ng-model="precondition.context.failureMessage" rows="4" class="form-control input-sm"> </textarea>
+    </div>
+  </div>
 </ng-form>

app/scripts/modules/core/src/pipeline/config/stages/checkPreconditions/CheckPreconditionsExecutionDetails.tsx

@@ -2,18 +2,22 @@ import * as React from 'react';
 import { get } from 'lodash';
 
 import { StageFailureMessage } from 'core/pipeline';
+
 import { ExecutionDetailsSection, IExecutionDetailsSectionProps } from '../common';
 import { robotToHuman } from 'core/presentation/robotToHumanFilter/robotToHuman.filter';
 
 export function CheckPreconditionsExecutionDetails(props: IExecutionDetailsSectionProps) {
   const context = get(props.stage, 'context.context', {} as any);
+  const userFailureMessage = context.failureMessage;
+  const failureMessage = props.stage.failureMessage;
+  const stageFailureMessage = failureMessage == null ? userFailureMessage : failureMessage;
   return (
     <ExecutionDetailsSection name={props.name} current={props.current}>
       <div className="row">
         <div className="col-md-12">
           <dl className="dl-horizontal">
             {Object.keys(context)
-              .filter(key => key !== 'expression' && context[key] !== null)
+              .filter(key => !['expression', 'failureMessage'].includes(key) && context[key] !== null)
               .map(key => (
                 <div key={key}>
                   <dt>{robotToHuman(key)}</dt>
@@ -27,7 +31,7 @@ export function CheckPreconditionsExecutionDetails(props: IExecutionDetailsSecti
           </dl>
         </div>
       </div>
-      <StageFailureMessage stage={props.stage} message={props.stage.failureMessage} />
+      <StageFailureMessage stage={props.stage} message={stageFailureMessage} />
     </ExecutionDetailsSection>
   );
 }

app/scripts/modules/core/src/pipeline/details/StageFailureMessage.tsx

@@ -23,6 +23,10 @@ export interface IStageFailureMessageState {
   isFailed?: boolean;
 }
 
+export enum StageFailureMessages {
+  NO_REASON_PROVIDED = 'No reason provided.',
+}
+
 @UIRouterContext
 export class StageFailureMessage extends React.Component<IStageFailureMessageProps, IStageFailureMessageState> {
   public static defaultProps: Partial<IStageFailureMessageProps> = {
@@ -73,9 +77,11 @@ export class StageFailureMessage extends React.Component<IStageFailureMessagePro
       const exceptionTitle = isFailed ? (messages.length ? 'Exceptions' : 'Exception') : 'Warning';
       const displayMessages =
         message || !messages.length ? (
-          <Markdown message={message || 'No reason provided.'} className="break-word" />
+          <Markdown message={message || StageFailureMessages.NO_REASON_PROVIDED} className="break-word" />
         ) : (
-          messages.map((m, i) => <Markdown key={i} message={m || 'No reason provided.'} className="break-word" />)
+          messages.map((m, i) => (
+            <Markdown key={i} message={m || StageFailureMessages.NO_REASON_PROVIDED} className="break-word" />
+          ))
         );
 
       if (displayMessages) {