Skip to content

Commit 0a57f73

Browse files
spadgettspadgett
committed
Add in-context Jenkinsfile help
Give a brief description of what a Jenkinsfile is with some examples in the build config editor and pipeline pages.
1 parent f892e0a commit 0a57f73

15 files changed

+278
-62
lines changed

‎app/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -270,6 +270,7 @@ <h1>JavaScript Required</h1>
270270
<script src="scripts/controllers/modals/confirmReplaceModal.js"></script>
271271
<script src="scripts/controllers/modals/processTemplateModal.js"></script>
272272
<script src="scripts/controllers/modals/linkService.js"></script>
273+
<script src="scripts/controllers/modals/jenkinsfileExamplesModal.js"></script>
273274
<script src="scripts/controllers/about.js"></script>
274275
<script src="scripts/controllers/commandLine.js"></script>
275276
<script src="scripts/controllers/createPersistentVolumeClaim.js"></script>

‎app/scripts/constants.js

+2
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,8 @@ window.OPENSHIFT_CONSTANTS = {
3939
"roles": "architecture/additional_concepts/authorization.html#roles",
4040
"service_accounts": "dev_guide/service_accounts.html",
4141
"users_and_groups": "architecture/additional_concepts/authentication.html#users-and-groups",
42+
"pipeline-builds": "architecture/core_concepts/builds_and_image_streams.html#pipeline-build",
43+
"pipeline-plugin": "using_images/other_images/jenkins.html#openshift-origin-pipeline-plug-in",
4244
// default should remain last, add new links above
4345
"default": "welcome/index.html"
4446
},

‎app/scripts/controllers/build.js

+5
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ angular.module('openshiftConsole')
1212
$routeParams,
1313
BuildsService,
1414
DataService,
15+
ModalsService,
1516
Navigate,
1617
ProjectsService) {
1718
$scope.projectName = $routeParams.project;
@@ -199,6 +200,10 @@ angular.module('openshiftConsole')
199200
}
200201
};
201202

203+
$scope.showJenkinsfileExamples = function() {
204+
ModalsService.showJenkinsfileExamples();
205+
};
206+
202207
$scope.$on('$destroy', function(){
203208
DataService.unwatchAll(watches);
204209
});

‎app/scripts/controllers/buildConfig.js

+5
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ angular.module('openshiftConsole')
1616
ImagesService,
1717
DataService,
1818
LabelFilter,
19+
ModalsService,
1920
ProjectsService,
2021
keyValueEditorUtils) {
2122
$scope.projectName = $routeParams.project;
@@ -266,6 +267,10 @@ angular.module('openshiftConsole')
266267
});
267268
};
268269

270+
$scope.showJenkinsfileExamples = function() {
271+
ModalsService.showJenkinsfileExamples();
272+
};
273+
269274
$scope.$on('$destroy', function(){
270275
DataService.unwatchAll(watches);
271276
});

‎app/scripts/controllers/modals/jenkinsfileExamplesModal.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
'use strict';
2+
3+
angular.module('openshiftConsole')
4+
.controller('JenkinsfileExamplesModalController', function($scope, $uibModalInstance) {
5+
$scope.ok = function() {
6+
$uibModalInstance.close('ok');
7+
};
8+
});

‎app/scripts/services/modals.js

+8
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,14 @@ angular.module("openshiftConsole")
1616
});
1717

1818
return modalInstance.result;
19+
},
20+
21+
showJenkinsfileExamples: function() {
22+
$uibModal.open({
23+
animation: true,
24+
templateUrl: 'views/modals/jenkinsfile-examples-modal.html',
25+
controller: 'JenkinsfileExamplesModalController'
26+
});
1927
}
2028
};
2129
});

‎app/styles/_forms.less

+9
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,12 @@
66
.input-group-addon.wildcard-prefix {
77
padding-left: 10px;
88
}
9+
10+
.editor-examples {
11+
padding: 19px;
12+
margin-bottom: 20px;
13+
border: 1px solid @color-pf-black-300;
14+
.copy-to-clipboard {
15+
margin-top: 3px;
16+
}
17+
}

‎app/views/browse/_build-details.html

+7-1
Original file line numberDiff line numberDiff line change
@@ -87,18 +87,24 @@ <h3>Configuration <span class="small" ng-if="buildConfigName">created from <a hr
8787
<dt ng-if-start="build.spec.strategy.jenkinsPipelineStrategy.jenkinsfilePath">
8888
Jenkinsfile Path:
8989
</dt>
90-
<dd ng-if-end>
90+
<dd>
9191
<span ng-if="build | jenkinsfileLink">
9292
<a ng-href="{{build | jenkinsfileLink}}">{{build.spec.strategy.jenkinsPipelineStrategy.jenkinsfilePath}}</a>
9393
</span>
9494
<span ng-if="!(build | jenkinsfileLink)">
9595
{{build.spec.strategy.jenkinsPipelineStrategy.jenkinsfilePath}}
9696
</span>
9797
</dd>
98+
<div ng-if-end class="small">
99+
<a href="" ng-click="showJenkinsfileExamples()">What's a Jenkinsfile?</a>
100+
</div>
98101
<dt ng-if-start="build.spec.strategy.jenkinsPipelineStrategy.jenkinsfile">
99102
Jenkinsfile:
100103
</dt>
101104
<dd></dd>
105+
<div class="small pull-right mar-top-sm">
106+
<a href="" ng-click="showJenkinsfileExamples()">What's a Jenkinsfile?</a>
107+
</div>
102108
<div ng-if-end ui-ace="{
103109
mode: 'groovy',
104110
theme: 'eclipse',

‎app/views/browse/build-config.html

+10-2
Original file line numberDiff line numberDiff line change
@@ -234,9 +234,17 @@ <h2>No builds.</h2>
234234
<dd ng-if="!(buildConfig | jenkinsfileLink)">
235235
{{buildConfig.spec.strategy.jenkinsPipelineStrategy.jenkinsfilePath}}
236236
</dd>
237+
<div class="small">
238+
<a href="" ng-click="showJenkinsfileExamples()">What's a Jenkinsfile?</a>
239+
</div>
237240
</div>
238241
<div ng-if="buildConfig.spec.strategy.jenkinsPipelineStrategy.jenkinsfile">
239-
<dt>Jenkinsfile:</dt><dd></dd>
242+
<div class="small pull-right mar-top-sm">
243+
<a href="" ng-click="showJenkinsfileExamples()">What's a Jenkinsfile?</a>
244+
</div>
245+
<dt>
246+
Jenkinsfile:
247+
</dt><dd></dd>
240248
<div ui-ace="{
241249
mode: 'groovy',
242250
theme: 'eclipse',
@@ -249,7 +257,7 @@ <h2>No builds.</h2>
249257
advanced: {
250258
highlightActiveLine: false
251259
}
252-
}" readonly ng-model="buildConfig.spec.strategy.jenkinsPipelineStrategy.jenkinsfile" class="ace-bordered ace-inline ace-read-only mar-top-md"></div>
260+
}" readonly ng-model="buildConfig.spec.strategy.jenkinsPipelineStrategy.jenkinsfile" class="ace-bordered ace-inline ace-read-only"></div>
253261
</div>
254262
</div>
255263
<dt ng-if-start="buildConfig.spec.source.binary.asFile">Binary Input as File:</dt>

‎app/views/edit/build-config.html

+20-10
Original file line numberDiff line numberDiff line change
@@ -232,7 +232,7 @@ <h3>Source Configuration</h3>
232232
</div>
233233

234234
<div ng-if="updatedBuildConfig | isJenkinsPipelineStrategy" class="section">
235-
<h3 class="with-divider">Jenkins Pipeline Configuration</h3>
235+
<h3 ng-class="{ 'with-divider': !sources.none }">Jenkins Pipeline Configuration</h3>
236236
<div class="form-group" ng-if="buildConfig.spec.source.type === 'Git'">
237237
<label for="jenkinsfile-type">Jenkinsfile Type</label>
238238
<select
@@ -267,15 +267,25 @@ <h3 class="with-divider">Jenkins Pipeline Configuration</h3>
267267

268268
<div ng-if="jenkinsfileOptions.type === 'inline'">
269269
<label>Jenkinsfile</label>
270-
<div ui-ace="{
271-
mode: 'groovy',
272-
theme: 'eclipse',
273-
onLoad: aceLoaded,
274-
rendererOptions: {
275-
fadeFoldWidgets: true,
276-
showPrintMargin: false
277-
}
278-
}" ng-model="updatedBuildConfig.spec.strategy.jenkinsPipelineStrategy.jenkinsfile" class="ace-bordered ace-inline"></div>
270+
<div ui-ace="{
271+
mode: 'groovy',
272+
theme: 'eclipse',
273+
onLoad: aceLoaded,
274+
rendererOptions: {
275+
fadeFoldWidgets: true,
276+
showPrintMargin: false
277+
}
278+
}" ng-model="updatedBuildConfig.spec.strategy.jenkinsPipelineStrategy.jenkinsfile" class="ace-bordered ace-inline"></div>
279+
</div>
280+
<div class="mar-top-md mar-bottom-md">
281+
<a ng-if="!view.jenkinsfileExamples" href="" ng-click="view.jenkinsfileExamples = true">What's a Jenkinsfile?</a>
282+
</div>
283+
<div ng-if="view.jenkinsfileExamples" class="editor-examples">
284+
<div class="pull-right mar-top-md">
285+
<a href="" ng-click="view.jenkinsfileExamples = false">Hide examples</a>
286+
</div>
287+
<h4>Jenkinsfile Examples</h4>
288+
<ng-include src="'views/edit/jenkinsfile-examples.html'"></ng-include>
279289
</div>
280290
</div>
281291
<div ng-if="sources.none && !(updatedBuildConfig | isJenkinsPipelineStrategy)">

‎app/views/edit/jenkinsfile-examples.html

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<div>
2+
<p>
3+
A Jenkinsfile is a Groovy script that defines your pipeline. In the Jenkinsfile, you can declare
4+
pipeline stages and run one or more steps within each stage. Here are some examples you can use
5+
in your pipelines.
6+
</p>
7+
<p>
8+
Declare a new pipeline stage called <var>Build:</var>
9+
<copy-to-clipboard
10+
display-wide="true"
11+
clipboard-text="'stage \'Build\''">
12+
</copy-to-clipboard>
13+
</p>
14+
<p>
15+
Start a build for build config <var>my-build-config:</var>
16+
<copy-to-clipboard
17+
display-wide="true"
18+
clipboard-text="'openshiftBuild(buildConfig: \'my-build-config\', showBuildLogs: \'true\')'">
19+
</copy-to-clipboard>
20+
</p>
21+
<p>
22+
Start a deployment for deployment config <var>my-deployment-config:</var>
23+
<copy-to-clipboard
24+
display-wide="true"
25+
clipboard-text="'openshiftDeploy(deploymentConfig: \'my-deployment-config\')'">
26+
</copy-to-clipboard>
27+
</p>
28+
<p>
29+
Run the shell command <var>make test:</var>
30+
<copy-to-clipboard
31+
display-wide="true"
32+
clipboard-text="'sh \'make test\''">
33+
</copy-to-clipboard>
34+
</p>
35+
<p>
36+
Prompt for manual input:
37+
<copy-to-clipboard
38+
display-wide="true"
39+
clipboard-text="'input \'Promote to production?\''">
40+
</copy-to-clipboard>
41+
</p>
42+
<p>
43+
Learn more about
44+
<a ng-href="{{ 'pipeline-builds' | helpLink}}" target="_blank">Pipeline Builds</a>
45+
and the
46+
<a ng-href="{{ 'pipeline-plugin' | helpLink}}" target="_blank">OpenShift Pipeline Plugin</a>.
47+
</p>
48+
</div>

‎app/views/modals/jenkinsfile-examples-modal.html

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<div>
2+
<div class="modal-body">
3+
<h2>Jenkinsfile Examples</h2>
4+
<ng-include src="'views/edit/jenkinsfile-examples.html'"></ng-include>
5+
</div>
6+
<div class="modal-footer">
7+
<button class="btn btn-lg btn-default" type="button" ng-click="ok()">OK</button>
8+
</div>
9+
</div>

0 commit comments

Comments
 (0)